/* ==========================================================================
   VIỆT FORMULA — Design tokens (CSS custom properties)
   Thẩm mỹ công nghiệp tinh gọn: phòng sạch, lưới kỹ thuật, bản vẽ chai lọ, số liệu lớn.
   Màu, chữ, khoảng cách, bo góc, đổ bóng, chuyển động, lớp (z-index).
   Font tự host: chỉ subset latin + vietnamese, font-display: swap.
   ========================================================================== */

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(../fonts/space-grotesk-500-700-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(../fonts/space-grotesk-500-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/be-vietnam-pro-400-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/be-vietnam-pro-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/be-vietnam-pro-500-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/be-vietnam-pro-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/be-vietnam-pro-600-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/be-vietnam-pro-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* ---- Màu thương hiệu (brief) ---- */
  --vf-clean: #F7F9FA;          /* trắng phòng sạch — nền */
  --vf-cobalt: #1F4FD8;         /* xanh cobalt — chủ đạo, CTA (7,0:1 trên trắng) */
  --vf-mint: #3CC4A4;           /* xanh bạc hà — trạng thái "đạt chuẩn" (chỉ dùng cho icon/vạch, không làm chữ trên nền sáng) */
  --vf-graphite: #1C2430;       /* than chì — chữ, nền tối (15,9:1 trên trắng) */
  --vf-steel: #8A94A6;          /* xám thép — đường kẻ, ký hiệu kỹ thuật (trang trí) */

  /* ---- Thang màu mở rộng (đạt WCAG AA cho chữ) ---- */
  --vf-cobalt-700: #1840B0;     /* hover CTA */
  --vf-cobalt-800: #12318A;
  --vf-cobalt-100: #DCE5FB;
  --vf-cobalt-50: #EEF3FD;
  --vf-mint-ink: #0A7560;       /* bạc hà đậm dùng làm chữ (5,6:1 trên trắng) */
  --vf-mint-50: #E3F7F1;
  --vf-graphite-90: #262F3D;
  --vf-graphite-80: #323C4C;
  --vf-steel-ink: #556072;      /* chữ phụ (6,4:1 trên trắng, 6,0:1 trên --vf-clean) */
  --vf-steel-300: #C9D0DB;
  --vf-line: #DFE4EB;           /* viền mảnh */
  --vf-line-strong: #C3CBD7;
  --vf-white: #FFFFFF;
  --vf-danger: #B42318;
  --vf-warn: #B54708;

  /* ---- Ngữ nghĩa ---- */
  --vf-bg: var(--vf-clean);
  --vf-surface: var(--vf-white);
  --vf-text: var(--vf-graphite);
  --vf-muted: var(--vf-steel-ink);
  --vf-primary: var(--vf-cobalt);
  --vf-ok: var(--vf-mint);
  --vf-on-dark: #E8EDF4;
  --vf-on-dark-muted: #AEB8C7;  /* 7,8:1 trên graphite */
  --vf-focus: var(--vf-cobalt);
  --vf-grid-dot: rgba(31, 79, 216, .16);
  --vf-grid-line: rgba(28, 36, 48, .055);
  --vf-grid-size: 24px;

  /* ---- Chữ ---- */
  --vf-font-display: "Space Grotesk", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vf-font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vf-font-mono: "Space Grotesk", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --vf-fs-2xs: .75rem;                                   /* 12 */
  --vf-fs-xs: .8125rem;                                  /* 13 */
  --vf-fs-sm: .9375rem;                                  /* 15 */
  --vf-fs-base: 1rem;                                    /* 16 */
  --vf-fs-md: 1.125rem;                                  /* 18 */
  --vf-fs-lg: clamp(1.25rem, 1.12rem + .55vw, 1.5rem);   /* 20 → 24 */
  --vf-fs-xl: clamp(1.5rem, 1.25rem + 1.05vw, 2rem);     /* 24 → 32 */
  --vf-fs-2xl: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem); /* 28 → 44 */
  --vf-fs-3xl: clamp(2rem, 1.35rem + 3vw, 3.75rem);      /* 32 → 60 */
  --vf-fs-num: clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem);   /* số liệu lớn */
  --vf-lh-tight: 1.12;
  --vf-lh-snug: 1.3;
  --vf-lh-body: 1.65;
  --vf-tracking-tight: -.022em;
  --vf-tracking-label: .08em;

  /* ---- Khoảng cách (bậc 4px) ---- */
  --vf-s-1: .25rem; --vf-s-2: .5rem; --vf-s-3: .75rem; --vf-s-4: 1rem; --vf-s-5: 1.25rem;
  --vf-s-6: 1.5rem; --vf-s-8: 2rem; --vf-s-10: 2.5rem; --vf-s-12: 3rem; --vf-s-16: 4rem; --vf-s-20: 5rem; --vf-s-24: 6rem;
  --vf-gutter: clamp(1rem, .6rem + 1.6vw, 2rem);          /* 16px ở 360px */
  --vf-section: clamp(3.5rem, 2.2rem + 5vw, 7rem);
  --vf-container: 1240px;
  --vf-container-text: 860px;
  --vf-header-h: 72px;
  --vf-mbar-h: 64px;

  /* ---- Bo góc ---- */
  --vf-r-xs: 2px; --vf-r-sm: 4px; --vf-r-md: 8px; --vf-r-lg: 14px; --vf-r-xl: 22px; --vf-r-pill: 999px;

  /* ---- Đổ bóng ---- */
  --vf-sh-0: 0 0 0 1px var(--vf-line);
  --vf-sh-1: 0 1px 2px rgba(28, 36, 48, .06), 0 0 0 1px rgba(28, 36, 48, .05);
  --vf-sh-2: 0 6px 18px -8px rgba(28, 36, 48, .18), 0 0 0 1px rgba(28, 36, 48, .05);
  --vf-sh-3: 0 22px 48px -18px rgba(28, 36, 48, .32), 0 0 0 1px rgba(28, 36, 48, .05);
  --vf-sh-cta: 0 10px 24px -10px rgba(31, 79, 216, .6);
  --vf-ring: 0 0 0 3px #fff, 0 0 0 5px var(--vf-focus);

  /* ---- Chuyển động ---- */
  --vf-ease: cubic-bezier(.2, .7, .2, 1);
  --vf-ease-io: cubic-bezier(.65, 0, .35, 1);
  --vf-dur-1: 120ms;   /* hover, focus */
  --vf-dur-2: 220ms;   /* mở/đóng menu, tab */
  --vf-dur-3: 420ms;   /* xuất hiện khối */
  --vf-dur-4: 900ms;   /* xoay chai 3D */
  --vf-dur-count: 1400ms; /* đếm số liệu */

  /* ---- Lớp ---- */
  --vf-z-header: 50; --vf-z-mbar: 60; --vf-z-drawer: 80; --vf-z-modal: 90; --vf-z-skip: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root { --vf-dur-1: 0ms; --vf-dur-2: 0ms; --vf-dur-3: 0ms; --vf-dur-4: 0ms; --vf-dur-count: 0ms; }
}