/* ============================================================
   VIPEX DESIGN SYSTEM — shared chrome for hoc.vipex.vn
   Tokens, fonts, frosted pill nav, footer, buttons, eyebrow.
   Mirrors vipex.vn (src/app/globals.css + components).
   ============================================================ */

:root{
  /* ink / surface */
  --ink-900:#0c1220; --ink-700:#2a2f3a; --ink-500:#5b6478; --ink-300:#cdd2db; --ink-200:#e6eaf1;
  --surface-0:#ffffff; --surface-1:#f4f6fa; --surface-2:#eef3fb;
  /* accent */
  --accent-600:#1c4fd0; --accent-500:#2a6df0; --accent-300:#7aa6ee; --accent-100:#c8dceb;
  --success-600:#1f8a4c;
  /* sky (hero) */
  --sky-top:#6ea4d6; --sky-mid:#7fb0d8; --sky-bot:#c8dceb;
  /* amber (AI warning, light) */
  --amber-bg:#fef9ec; --amber-line:#f1dfa6; --amber-rule:#d9a200; --amber-ink:#6b5410;
  /* type */
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* radii */
  --radius-pill:999px; --radius-sm:18px; --radius-md:22px;
  /* shadows — navy-tinted, never pure black */
  --shadow-glass:0 30px 60px rgba(20,50,90,.18), inset 0 1px 0 rgba(255,255,255,.7);
  --shadow-nav:0 12px 28px rgba(20,50,90,.12);
  --shadow-soft:0 6px 18px rgba(20,50,90,.05);
  --shadow-card-hover:0 18px 40px rgba(20,50,90,.09);
  --shadow-btn-hover:0 6px 18px rgba(20,50,90,.14);
  --ease:cubic-bezier(.22,.9,.3,1);
  --maxw:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--surface-0);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent-600);text-decoration:none}

.vwrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---- display type helper ---- */
.vdisplay{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;line-height:1.08}

/* ============================================================
   FROSTED PILL NAV
   ============================================================ */
.nav{position:sticky;top:0;z-index:50;padding:12px 16px;transition:padding .25s var(--ease)}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;min-height:60px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(20,50,90,.06);border-radius:var(--radius-pill);
  padding:8px 8px 8px 14px;box-shadow:var(--shadow-soft);
  transition:box-shadow .25s var(--ease), background .25s var(--ease);
}
.nav.scrolled .nav-inner{box-shadow:var(--shadow-nav);background:rgba(255,255,255,.92)}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand-logo{width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:#fff;
  border:1px solid rgba(37,99,235,.14);box-shadow:var(--shadow-soft);
  display:grid;place-items:center;padding:4px;overflow:hidden}
.brand-logo img{width:100%;height:100%;object-fit:contain;display:block}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--accent-600)}
.brand-sub{font-size:12px;font-weight:600;color:var(--ink-500);letter-spacing:.02em}

.nav-links{justify-self:center;display:flex;align-items:center;gap:2px}
.nav-links a{color:var(--ink-700);font-weight:500;font-size:14px;line-height:1;
  padding:9px 13px;border-radius:var(--radius-pill);white-space:nowrap;
  transition:color .15s var(--ease), background .15s var(--ease)}
.nav-links a:hover{color:var(--ink-900);background:var(--surface-1)}

.nav-cta{justify-self:end;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 20px;
  border-radius:var(--radius-pill);background:var(--ink-900);color:#fff;font-weight:600;font-size:14px;
  white-space:nowrap;transition:background .15s var(--ease), box-shadow .15s var(--ease)}
.nav-cta:hover{background:#1b2238;box-shadow:var(--shadow-btn-hover);color:#fff}
.nav-cta svg{width:14px;height:14px}

@media(max-width:720px){
  .brand-sub{display:none}
  .brand-logo{width:38px;height:38px}
  .brand-name{font-size:18px}
  .nav-links{gap:0}
  .nav-links a{font-size:13px;padding:8px 9px}
}
@media(max-width:560px){
  .nav{padding:10px 12px}
  .nav-inner{gap:6px;padding:6px 6px 6px 10px}
  .nav-links a{font-size:12.5px;padding:7px 7px}
  .nav-cta{height:38px;padding:0 14px;font-size:13px}
  .nav-cta .cta-full{display:none}
}

/* ============================================================
   EYEBROW
   ============================================================ */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-900);
  background:var(--surface-1);border:1px solid var(--ink-200);
  padding:7px 14px 7px 11px;border-radius:var(--radius-pill)}
.eyebrow svg{width:12px;height:12px;color:var(--accent-600)}

/* ============================================================
   BUTTONS (pill) — primary = dark, default = white
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-weight:600;font-size:14px;line-height:1;
  border:1px solid var(--ink-200);background:#fff;color:var(--ink-900);cursor:pointer;
  transition:background .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease), border-color .15s var(--ease)}
.btn:hover{background:#f4f7fb;box-shadow:var(--shadow-soft)}
.btn.primary{background:var(--ink-900);color:#fff;border-color:transparent}
.btn.primary:hover{background:#1b2238;box-shadow:var(--shadow-btn-hover)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn svg{width:15px;height:15px}

/* ============================================================
   AI WARNING (light, pale amber)
   ============================================================ */
.ai-warn{background:var(--amber-bg);border:1px solid var(--amber-line);border-left:3px solid var(--amber-rule);
  border-radius:12px;padding:12px 14px;color:var(--amber-ink);font-size:13px;line-height:1.5}
.ai-warn b{color:#8a6a00}

/* ============================================================
   FOOTER
   ============================================================ */
.vfoot{background:var(--surface-0);border-top:1px solid var(--ink-200);
  padding:46px 0 56px;margin-top:56px;color:var(--ink-500);font-size:13.5px}
.vfoot .brand{margin-bottom:14px}
.vfoot .brand-name{font-size:22px}
.vfoot a{color:var(--accent-600);font-weight:500}
.vfoot a:hover{text-decoration:underline;text-underline-offset:3px}
.vfoot .entity{font-weight:600;color:var(--ink-900);font-size:14px}
.vfoot .muted{color:var(--ink-500);margin-top:8px;max-width:72ch;line-height:1.6}
.vfoot .foot-row{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-top:6px}

/* ============================================================
   SCROLL REVEAL (respects reduced motion)
   Default = VISIBLE (no-JS / no-IntersectionObserver safe).
   Only hide-then-reveal when JS is present (html.js) AND motion allowed.
   ============================================================ */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease), transform .6s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}