/* ==========================================================================
   TOKENS — bóc từ src/theme/tokens.json (hệ CRM NetPrint) + mở rộng cho web
   Sửa màu/khoảng cách toàn site tại đây.
   ========================================================================== */

:root {
  /* ---------- Màu thương hiệu (nguyên bản từ tokens.json) ---------- */
  /* Chỉ một mã đỏ chủ đạo duy nhất trên toàn site — không dùng thêm
     biến thể đỏ đậm/đỏ bầm nào khác cho hover, pressed hay chữ trên nền nhạt. */
  --red: #E11D2E;
  --red-subtle: #FEECEE;
  --focus-ring: rgba(225, 29, 46, .25);

  /* ---------- Thang xám slate ---------- */
  --g50: #F8FAFC;
  --g100: #F1F5F9;
  --g200: #E2E8F0;
  --g300: #CBD5E1;
  --g400: #94A3B8;
  --g500: #64748B;
  --g600: #475569;
  --g700: #334155;
  --g800: #1F2937;
  --g900: #0F172A;

  /* ---------- Vai trò ---------- */
  --ink: var(--g900);
  --text: var(--g700);
  /* Chữ phụ dùng g600 thay vì g500: độ tương phản trên nền trắng tăng từ
     4.8:1 lên 7.5:1, đọc đỡ mỏi mắt mà vẫn phân biệt rõ với chữ chính. */
  --muted: var(--g600);
  --line: var(--g200);
  --line-strong: var(--g300);
  --paper: #FFFFFF;
  --paper-sub: var(--g50);
  --paper-tint: var(--g100);

  /* ---------- Dải CMYK (motif ngành in) ---------- */
  --c: #00AEEF;
  --m: #EC008C;
  --y: #FFF200;
  --k: #0F172A;

  /* ---------- Chữ ---------- */
  --font: "Be Vietnam Pro", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Thang chữ editorial — to hơn hẳn theme admin (14px) vì đây là web bán hàng.
     Mỗi bậc cách nhau đủ rõ để mắt phân biệt được thứ bậc, và KHÔNG ghi cứng
     cỡ chữ ở bất kỳ chỗ nào khác ngoài file này.
     Cụm chữ nhỏ (body/sm/xs/label) trước đây có 5 bậc chỉ cách nhau 1-2px,
     nhìn không rõ khác biệt — nay gộp còn 4 bậc, mỗi bậc cách nhau ≥2px. */
  --t-h1: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --t-hero: clamp(2.5rem, 5vw, 4.25rem);              /* tiêu đề hero TRANG CHỦ — 40 → 68px, to hơn --t-h1 một bậc */
  --t-h2: clamp(1.875rem, 1.3rem + 2.2vw, 2.875rem);
  --t-h3: clamp(1.375rem, 1.15rem + .8vw, 1.75rem);   /* tiêu đề thẻ lớn */
  --t-stat: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);  /* con số nổi bật — dùng chung cho MỌI số liệu to trên site */
  --t-stat-sm: clamp(1.0625rem, .9rem + .55vw, 1.3125rem); /* dải số liệu gọn dưới video hero — nhỏ hơn hẳn --t-stat để ô giá trị bằng chữ đứng vừa một dòng, cả dải cùng một cỡ */
  --t-h4: 1.1875rem;                                   /* tiêu đề thẻ thường — 19px */
  --t-lead: 1.125rem;                                  /* câu dẫn — 18px cố định, không co giãn theo màn hình nữa */
  --t-body: 1.0625rem;                                 /* 17px */
  --t-sm: .9375rem;                                    /* 15px */
  --t-label: .8125rem;                                 /* 13px — dùng chung cho chữ rất nhỏ và nhãn viết hoa */
  --t-tag: .6875rem;                                   /* 11px — nhãn tí hon viết hoa giãn chữ: nhóm thẻ sản phẩm, số thứ tự form, tag thư viện, nút Zalo chân trang. Trước đây 5 chỗ ghi cứng 10/11/11.5px, gom về một bậc */
  /* Bí danh: giữ tên --t-xs cho những nơi CSS đang gọi, trỏ về cùng giá trị
     với --t-label — trước đây 2 biến chỉ khác nhau 1px (14 vs 13), tách
     đôi không cần thiết. */
  --t-xs: var(--t-label);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-black: 800;

  /* ---------- Khoảng cách (scale gốc 4·8·12·16·20·24·32·40·48·64) ---------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;
  --s9: 48px;
  --s10: 64px;
  --s11: 88px;
  --s12: 120px;

  /* MỘT MỐC DUY NHẤT cho khe giữa mọi mục trên trang — 40px điện thoại, 64px
     máy tính lớn (khe thật giữa hai mục là gấp đôi: 80px và 128px).

     Trước 29/08 có hai bậc: bậc thường và bậc lớn (--section-y-lg) dùng cho
     nền tối, khối báo giá, với ý "chuyển chương thì thở rộng hơn". Cộng thêm
     ba chỗ tự khai đệm riêng (dải CTA mini, băng đối tác, cụm Năng lực trang
     chủ), đo ra khe dao động 87px → 131px trên cùng một trang — chênh 44px,
     nhìn là thấy chỗ thừa chỗ sát. Bậc lớn đã bỏ hẳn: nếu sau này thật sự cần
     một mục thở rộng hơn thì nới cả mốc này, đừng thêm bậc thứ hai.

     Hero cũng dùng đúng biến này nên cả trang một nhịp, không mục nào khác mục nào. */
  --section-y: clamp(40px, 4.4vw, 64px);
  --page-pad: 24px;
  /* Bề ngang tối đa của MỌI khối .wrap — một mốc duy nhất cho cả site, đổi ở
     đây là toàn trang giãn/co theo. Nới 1240 → 1320 cho trang bớt chật.
     Panel menu thả xuống bám theo mốc này chứ không ghi số rời, xem
     .nav-panel trong components.css. */
  --maxw: 1320px;
  --maxw-text: 68ch;

  /* ---------- Bo góc (giữ nhỏ cho tinh thần editorial) ---------- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 9999px;

  /* ---------- Đổ bóng ---------- */
  --sh-sm: 0 1px 2px rgba(15, 23, 42, .08);
  --sh-md: 0 8px 24px rgba(15, 23, 42, .10);
  --sh-lg: 0 16px 48px rgba(15, 23, 42, .12);

  /* ---------- Khác ---------- */
  --nav-h: 110px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (max-width: 640px) {
  :root {
    --page-pad: 18px;
    --nav-h: 90px;
  }
}