/* ═══════════════════════════════════════════════════════════════
   ONIUS — Design System (single source of truth)
   Brand: gold #E8980C + dark #1a1a1a · Font: Be Vietnam Pro
   Dùng chung cho: index.html (sales page) + gioi-thieu/ (trang chủ)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Gold scale */
  --gold-50:  #FFF8EC;
  --gold-100: #FDECC8;
  --gold-200: #FAD78A;
  --gold-300: #F5BE54;
  --gold-400: #EFA621;
  --gold-500: #E8980C;   /* brand */
  --gold-600: #C97E08;
  --gold-700: #9A6206;   /* ink — chữ gold trên nền sáng (AA) */
  --gold-800: #7A4E08;
  --gold-900: #5A3A06;

  /* Ink / dark (warm black) */
  --ink-900: #141210;
  --ink-800: #1a1a1a;    /* brand dark */
  --ink-700: #2c2c2c;
  --ink-600: #3a3733;

  /* Neutral (warm gray) */
  --gray-50:  #FAF9F6;
  --gray-100: #F4F2EC;
  --gray-200: #E8E5DD;
  --gray-300: #D6D2C7;
  --gray-400: #A8A296;
  --gray-500: #78736A;
  --gray-600: #57534B;
  --gray-700: #3F3C36;

  /* Semantic */
  --green:     #2E7D32;
  --green-bg:  #ECFDF3;
  --red:       #D32F2F;
  --red-bg:    #FEF2F2;
  --amber:     #F59E0B;
  --amber-bg:  #FFFBEB;

  /* Surfaces & text */
  --bg:         #FFFFFF;
  --bg-soft:    #FAF8F3;
  --bg-dark:    var(--ink-800);
  --text:       #211C16;
  --text-muted: #6B655C;
  --text-invert:#FFFFFF;
  --gold-ink:   var(--gold-700);
  --border:     var(--gray-200);

  /* Typography */
  --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs:   .75rem;     /* 12 */
  --fs-sm:   .875rem;    /* 14 */
  --fs-base: 1rem;       /* 16 */
  --fs-md:   1.125rem;   /* 18 */
  --fs-lg:   1.25rem;    /* 20 */
  --fs-xl:   1.5rem;     /* 24 */
  --fs-2xl:  1.875rem;   /* 30 */
  --fs-3xl:  clamp(1.9rem, 4.5vw, 2.75rem);
  --fs-4xl:  clamp(2.2rem, 6vw, 3.5rem);
  --lh-tight: 1.18;
  --lh-snug:  1.35;
  --lh-base:  1.65;

  /* Spacing (4px base) */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  /* Radius */
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-pill: 999px;

  /* Shadow (warm-tinted) */
  --shadow-sm: 0 1px 2px rgba(40,30,10,.06), 0 1px 3px rgba(40,30,10,.05);
  --shadow:    0 4px 12px rgba(40,30,10,.08), 0 2px 4px rgba(40,30,10,.05);
  --shadow-md: 0 10px 24px rgba(40,30,10,.10), 0 4px 8px rgba(40,30,10,.05);
  --shadow-lg: 0 22px 48px rgba(40,30,10,.14), 0 8px 16px rgba(40,30,10,.06);
  --shadow-gold: 0 8px 28px rgba(232,152,12,.32);

  /* Motion */
  --t-fast: 140ms; --t: 240ms; --t-slow: 480ms;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* Layout */
  --container: 1080px;
  --container-narrow: 760px;
  --header-h: 64px;

  /* z-index */
  --z-header: 100; --z-sticky-cta: 90; --z-modal: 200;
}

/* ── 2. RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-md); font-weight: 700; }

/* ── 3. LAYOUT UTILITIES ──────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.container--narrow { max-width: var(--container-narrow); }
.text-center { text-align: center; }
.text-gold { color: var(--gold-ink); }
.text-muted { color: var(--text-muted); }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); }
.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: revert; } .hide-desktop { display: none; } }

/* ── 4. ICON SYSTEM (SVG sprite) ──────────────────────────────── */
.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; stroke: currentColor; fill: none;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }
.icon-lg { width: 1.75em; height: 1.75em; }
.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  background: var(--gold-50); color: var(--gold-ink); border: 1px solid var(--gold-100);
}
.icon-badge .icon { width: 26px; height: 26px; }
.icon-badge--dark { background: rgba(232,152,12,.14); color: var(--gold-400); border-color: rgba(232,152,12,.28); }

/* ── 5. BUTTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 14px 28px; border: 2px solid transparent; border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--fs-base); line-height: 1.25; letter-spacing: .01em;
  text-align: center; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast);
  white-space: normal; max-width: 100%; cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 2px; }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 100%);
  color: #fff; box-shadow: var(--shadow-gold);
}
.btn-gold:hover { box-shadow: 0 12px 34px rgba(232,152,12,.45); }

.btn-dark { background: var(--ink-800); color: #fff; }
.btn-dark:hover { background: var(--ink-700); box-shadow: var(--shadow-md); }

.btn-outline { background: transparent; color: var(--gold-ink); border-color: var(--gold-300); }
.btn-outline:hover { background: var(--gold-50); }
.btn-outline--invert { color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline--invert:hover { background: rgba(255,255,255,.12); }

.btn-lg { padding: 18px 40px; font-size: var(--fs-md); }
.btn-block { display: flex; width: 100%; }

/* ── 6. BADGES / CHIPS ────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 7px 16px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600;
  max-width: 100%; line-height: 1.3;
}
.badge-gold { background: var(--gold-50); color: var(--gold-ink); border: 1px solid var(--gold-100); }
.badge-gold--dark { background: rgba(232,152,12,.14); color: var(--gold-300); border: 1px solid rgba(232,152,12,.3); }
.badge-red { background: var(--red); color: #fff; }
.badge-green { background: var(--green-bg); color: var(--green); border: 1px solid #bbf7d0; }

.eyebrow {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink);
}
.eyebrow--red { color: var(--red); }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 8px 16px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600;
  background: var(--gray-100); color: var(--gray-600); border: 1px solid var(--border);
}

/* ── 7. SECTIONS ──────────────────────────────────────────────── */
.section { padding: var(--sp-16) 0; }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--ink-800); color: #fff; }
.section--dark .text-muted { color: rgba(255,255,255,.7); }
@media (min-width: 768px) { .section { padding: var(--sp-24) 0; } }

.section-head { max-width: 680px; margin: 0 auto var(--sp-10); text-align: center; }
.section-head .eyebrow { margin-bottom: var(--sp-3); }
.section-head h2 { margin-bottom: var(--sp-3); }
.section-head p { color: var(--text-muted); font-size: var(--fs-md); }
.section--dark .section-head p { color: rgba(255,255,255,.7); }

/* ── 8. CARD ──────────────────────────────────────────────────── */
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--sp-6); box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-200); }

/* ── 9. STICKY HEADER ─────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h); display: flex; align-items: center;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color var(--t), box-shadow var(--t);
}
.site-header.is-scrolled { border-color: var(--border); box-shadow: var(--shadow-sm); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 800; font-size: var(--fs-lg); color: var(--ink-800); }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.header-nav { display: none; gap: var(--sp-6); font-size: var(--fs-sm); font-weight: 600; color: var(--gray-600); }
.header-nav a:hover { color: var(--gold-ink); }
@media (min-width: 768px) { .header-nav { display: flex; } }
.header-cta { padding: 10px 20px; font-size: var(--fs-sm); }

/* ── 10. STICKY CTA BAR (mobile bottom) ───────────────────────── */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-cta);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(26,26,26,.96); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.1);
  transform: translateY(110%); transition: transform var(--t) var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .sc-price { color: #fff; line-height: 1.2; }
.sticky-cta .sc-price b { color: var(--gold-400); font-size: var(--fs-lg); display: block; }
.sticky-cta .sc-price s { color: rgba(255,255,255,.5); font-size: var(--fs-xs); }
.sticky-cta .btn { padding: 12px 22px; }
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* ── 11. FORM ─────────────────────────────────────────────────── */
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--sp-2); color: var(--gray-700); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; font-size: var(--fs-base); font-family: inherit;
  color: var(--text); background: var(--gray-50);
  border: 2px solid var(--border); border-radius: var(--r-sm);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.field input::placeholder, .field textarea::placeholder { color: var(--gray-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-500); background: #fff;
  box-shadow: 0 0 0 4px rgba(232,152,12,.14);
}
.field--error input, .field--error select { border-color: var(--red); }
.field .err-msg { display: none; color: var(--red); font-size: var(--fs-xs); margin-top: 6px; }
.field--error .err-msg { display: block; }

/* ── 12. A11Y / MOTION ────────────────────────────────────────── */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--gold-300); outline-offset: 2px; border-radius: 4px;
}
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Visually-hidden (a11y labels) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}