/* ======================= site.css (Shared, optimized modular) ======================= */
  /* ---- Tokens ---- */
  :root {
    /* ===== Core color system ===== */
    --primary: #4F46E5;
    --primary-light: #818CF8;
    --primary-dark: #4338CA;
    --secondary: #10B981;
    --secondary-light: #34D399;
    --accent: #F59E0B;
    --accent-light: #FBBF24;

    --background: #FFFFFF;
    --surface: #FFFFFF;

    --text-primary: #1E293B;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;
    --text-on-dark: #fff;

    --border: #E2E8F0;
    --border-light: #F1F5F9;

    /* ===== Status colors ===== */
    --error: #EF4444;
    --success: #10B981;
    --warning: #F59E0B;
    --info: #3B82F6;

    /* ===== Core theme (brand) ===== */
    --core-dark: #171938;
    --core-body: #202431;
    --core-accent: #5f84ff;
    --core-gold: #d6a84f;
    --core-gold-2: #c99641;
    --core-surface: #ffffff;

    /* ===== Brand (nav / preheader) ===== */
    --brand-dark: #171938;
    --brand-accent: #ffc107;
    --brand-600: #3866DF;
    --subnav-hover: #2a2d55;

    /* ===== Heights ===== */
    --preheader-h: 40px;
    --preheader-h-md: 44px;
    --preheader-h-lg: 48px;
    --nav-height: 56px;
    --nav-h: 80px;
    --footer-height: 40px;

    /* ===== Logo sizes ===== */
    --logo-h: 42px;
    --logo-h-md: 46px;
    --logo-h-lg: 52px;

    /* ===== Radius ===== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* ===== Shadows ===== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, .10);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.12),
                0 10px 10px -5px rgba(15, 23, 42, 0.08);

    /* ===== Typography ===== */
    --why-title-size: 60px;
    --why-lh: 1.8;

    /* ===== Transitions ===== */
    --transition: all 0.2s ease-in-out;

    /* ===== CTA Gradient ===== */
    --grad-cta-start: var(--core-accent);
    --grad-cta-end: var(--core-gold);
  }


  /* ---- Base ---- */
  html,body{overflow-x:hidden;}
  html{scroll-padding-top:0;} /* tránh offset trước sticky */
  body{font-family:'Red Hat Display','Red Hat Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;}
  a{text-decoration:none;}
  img{max-width:100%;height:auto;display:block;}
  .text-gold{color:var(--core-gold)!important;}

  @media (min-width:768px){
    :root{--preheader-h:var(--preheader-h-md);--logo-h:var(--logo-h-md);}
  }
  @media (min-width:992px){
    :root{--preheader-h:var(--preheader-h-lg);--logo-h:var(--logo-h-lg);}
  }

  /* ===================================================================
    PILL BUTTON SYSTEM
    -------------------------------------------------------------------
    - .pill         : base
    - .pill--sm/lg  : kích cỡ
    - .pill--gold/blue/dark... : màu thường
    - .hover--xxx   : màu hover
    - có thể đổi màu chữ và màu chữ hover
  =================================================================== */
  .pill{
    --btn-outline:#d6a84f;
    --btn-text:#fff;
    --btn-bg1:rgba(214,168,79,.25);
    --btn-bg2:rgba(255,170,0,.5);
    --btn-pad-y:.9rem;
    --btn-pad-x:2rem;

    --btn-hover-outline:var(--btn-outline);
    --btn-hover-bg1:var(--btn-bg1);
    --btn-hover-bg2:var(--btn-bg2);
    --btn-hover-text:var(--btn-text);

    border:1.5px solid var(--btn-outline);
    color:var(--btn-text);
    background:linear-gradient(90deg,var(--btn-bg1) 0%,var(--btn-bg2) 100%) left/0% 100% no-repeat;
    border-radius:999px;
    line-height:1;
    padding-block:var(--btn-pad-y);
    padding-inline:var(--btn-pad-x);
    transition:background-size .5s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease;
    will-change:background-size;
    display:inline-flex;align-items:center;gap:.5rem;
  }
  .pill:hover{
    background-size:100% 100%;
    border-color:var(--btn-hover-outline);
    color:var(--btn-hover-text);
    box-shadow:0 10px 30px rgba(0,0,0,.35);
  }

  /* Sizes */
  .pill--xs{--btn-pad-y:.45rem;--btn-pad-x:.9rem;font-size:.78rem;}
  .pill--sm{--btn-pad-y:.65rem;--btn-pad-x:1.2rem;font-size:.875rem;}
  .pill--md{--btn-pad-y:.9rem; --btn-pad-x:2rem;font-size:1rem;}
  .pill--lg{--btn-pad-y:1.1rem;--btn-pad-x:2.4rem;font-size:1.125rem;}
  .pill--xl{--btn-pad-y:1.25rem;--btn-pad-x:2.8rem;font-size:1.25rem;}

  /* Color palettes (normal state) */
  .pill--gold{
    --btn-outline:#d6a84f; --btn-text:#fff;
    --btn-bg1:rgba(214,168,79,.25); --btn-bg2:rgba(255,170,0,.5);
  }
  .pill--blue{
    --btn-outline:#5f84ff; --btn-text:#6f93f7;
    --btn-bg1:rgba(56,102,223,.25); --btn-bg2:rgba(56,102,223,.6);
  }
  .pill--dark{
    --btn-outline:#d6a84f; --btn-text:#000;
    --btn-bg1:rgba(214,168,79,.25); --btn-bg2:rgba(255,170,0,.5);
  }
  .pill--white{
    --btn-outline:#d6a84f; --btn-text:#fff;
    --btn-bg1:rgba(214,168,79,.25); --btn-bg2:rgba(255,170,0,.5);
  }

  /* Hover palettes (cả border, bg, text) */
  .hover--gold{
    --btn-hover-outline:#f2c464;
    --btn-hover-bg1:rgba(214,168,79,.35);
    --btn-hover-bg2:rgba(255,170,0,.7);
    --btn-hover-text:#fff;
  }
  .hover--blue{
    --btn-hover-outline:#5a84ff;
    --btn-hover-bg1:rgba(56,102,223,.35);
    --btn-hover-bg2:rgba(56,102,223,.8);
    --btn-hover-text:#fff;
  }
  .hover--green{
    --btn-hover-outline:#22c55e;
    --btn-hover-bg1:rgba(34,197,94,.25);
    --btn-hover-bg2:rgba(34,197,94,.6);
    --btn-hover-text:#000;
  }
  .hover--teal{
    --btn-hover-outline:#14b8a6;
    --btn-hover-bg1:rgba(20,184,166,.25);
    --btn-hover-bg2:rgba(20,184,166,.6);
    --btn-hover-text:#fff;
  }

  /* ===================================================================
    CTA FINAL (shared component)
  =================================================================== */
  .cta-final{
    position:relative;
    padding-block:clamp(3rem,6vw,6rem);
    text-align:center;
    background:linear-gradient(135deg,var(--grad-cta-start) 0%,var(--grad-cta-end) 100%);
    color:#fff;isolation:isolate;
  }
  .cta-title{
    font-size:clamp(1.8rem,4.2vw,2.6rem);
    line-height:1.2;
    color:#fff;
    text-shadow:0 2px 12px rgba(0,0,0,.25);
  }
  .cta-body{
    color:rgba(255,255,255,.95);
    max-width:720px;margin-inline:auto;
  }
  .cta-final .pill{--btn-outline:#fff;}
  @media (max-width:991.98px){
    .cta-final{padding-block:3rem 3.5rem;}
  }

  /* ===================================================================
    Underline hover
  =================================================================== */
  .underlinehover{
    position:relative;display:inline-block;color:inherit;cursor:pointer;
  }
  .underlinehover::after{
    content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;
    background-color:var(--core-gold);transition:width .3s ease;
  }
  .underlinehover:hover::after{width:100%;}