/* =========================================================
   ZHR GLOBAL — DESIGN TOKENS
   Sửa thương hiệu ở đây là toàn site đổi theo.
   ========================================================= */
:root {
  /* --- Brand palette ------------------------------------ */
  --c-ink:            #071A2B;   /* navy sâu — nền tối, chữ tiêu đề */
  --c-ink-soft:       #0E2A42;
  --c-ink-line:       #17395420;

  --c-accent:         #0E9E96;   /* teal chủ đạo */
  --c-accent-bright:  #19C6B4;   /* teal sáng — hover, highlight */
  --c-accent-deep:    #0A6F6A;
  --c-signal:         #E2A33C;   /* amber — số liệu, nhấn dữ liệu */

  --c-paper:          #FBFAF8;   /* nền sáng chủ đạo */
  --c-paper-2:        #F2F1ED;   /* nền section xen kẽ */
  --c-surface:        #FFFFFF;
  --c-text:           #12212E;
  --c-text-muted:     #55677A;
  --c-line:           #DEDCD5;
  --c-line-strong:    #C4C1B7;

  /* Trên nền tối */
  --c-on-dark:        #F4F6F7;
  --c-on-dark-muted:  #9FB3C2;
  --c-on-dark-line:   #FFFFFF1F;

  /* --- Typography --------------------------------------- */
  --font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --text-micro: 0.6875rem;
  --text-label: 0.75rem;
  --text-sm:    0.875rem;
  --text-base:  clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --text-lead:  clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --text-h4:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --text-h3:    clamp(1.25rem, 1.12rem + 0.6vw, 1.625rem);
  --text-h2:    clamp(1.75rem, 1.35rem + 1.7vw, 3rem);
  --text-h1:    clamp(2.35rem, 1.5rem + 3.6vw, 4.75rem);
  --text-mega:  clamp(2.6rem, 1.4rem + 5vw, 6rem);

  --leading-tight: 1.06;
  --leading-snug:  1.22;
  --leading-body:  1.62;
  --track-label:   0.16em;

  /* --- Spacing & layout --------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(4rem, 2.6rem + 5.5vw, 8.5rem);

  --wrap:       1240px;
  --wrap-narrow: 780px;
  --gutter:     clamp(1.15rem, 0.6rem + 2.4vw, 3rem);

  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 18px;

  /* --- Motion ------------------------------------------- */
  --dur-fast:   140ms;
  --dur:        280ms;
  --dur-slow:   620ms;
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Elevation ---------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(7, 26, 43, 0.06);
  --shadow:    0 10px 30px -18px rgba(7, 26, 43, 0.45);
  --shadow-lg: 0 30px 60px -32px rgba(7, 26, 43, 0.5);

  --header-h: 72px;
}

@media (max-width: 720px) {
  :root { --header-h: 62px; }
}