/* ═══════════════════════════════════════════════════════════════════════
   KẾ TOÁN TINH GỌN — brand.css
   Toàn bộ màu, font, khoảng cách của website nằm trong file này.
   ĐỔI PHƯƠNG ÁN NHẬN DIỆN: thay 4 dòng --ink / --ink-2 / --acc / --acc-2
   và --paper bên dưới bằng một trong ba bộ ở phần "Bộ màu dự phòng".
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── BẢNG MÀU TƯƠI 2026 (ĐANG DÙNG) ────────────────────────────────
     Nền đậm mực đêm để ba màu tươi nổi hết mức. Tương phản cao, trẻ trung.
     Xem toàn bộ đồ hoạ dùng bảng màu này trong xem-banner-background.html */
  --ink: #101A3D;          /* mực đêm — nền đậm, chữ tiêu đề */
  --ink-2: #1B2A5C;        /* mực đêm nhạt hơn — hover, chuyển sắc */
  --acc: #00C2A8;          /* xanh ngọc — nút chính, khối lớn */
  --acc-2: #00857A;        /* xanh ngọc đậm — chữ nhấn trên nền sáng (đủ tương phản) */
  --lime: #FFC93C;         /* vàng chanh — điểm nhấn trên nền đậm */
  --coral: #FF5C7A;        /* hồng san hô — cảnh báo, số liệu giảm */
  --violet: #7C5CFF;       /* tím sáng — chuyển sắc, phụ trợ */
  --paper: #F4F7FF;        /* nền lạnh */
  --paper-warm: #FFFDF7;   /* nền giấy cho khối báo cáo */
  --seal: #FF5C7A;         /* mực dấu */

  /* ── Bộ màu dự phòng ───────────────────────────────────────────────
     Phương án A — Dấu tích gọn (trung tính, tinh gọn):
       --ink:#0F2F44; --ink-2:#16405C; --acc:#12B39B; --acc-2:#0E9683; --paper:#F7F5F0;
     Phương án B — Con dấu tin cậy (navy + vàng đồng, cổ điển):
       --ink:#132B4D; --ink-2:#1B3A66; --acc:#C79A3B; --acc-2:#A87F2B; --paper:#F2F4F7;
     Phương án C — Nhẹ vai (xanh lá + cam đất, ấm áp):
       --ink:#1F5A44; --ink-2:#287056; --acc:#D2762F; --acc-2:#B76326; --paper:#FBF7EF;
     ───────────────────────────────────────────────────────────────── */

  /* Màu trung tính */
  --white: #FFFFFF;
  --text: #1C2547;
  --text-2: #4E5A80;
  --text-3: #7A85A6;
  --line: #E1E7F5;
  --line-2: #F0F3FC;
  --ok: #00857A;
  --warn: #96650B;
  --warn-bg: #FFF8E6;
  --danger: #D33552;

  /* Chữ */
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12.5px;
  --fs-sm: 14px;
  --fs-base: 16.5px;
  --fs-md: 18px;
  --fs-lg: clamp(20px, 2vw, 23px);
  --fs-h3: clamp(19px, 1.7vw, 22px);
  --fs-h2: clamp(26px, 3.2vw, 40px);
  --fs-h1: clamp(31px, 4.6vw, 55px);
  --fs-hero: clamp(34px, 5.4vw, 64px);
  --lh-tight: 1.1;
  --lh-snug: 1.35;
  --lh: 1.68;

  /* Khoảng cách (bậc 8) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 44px; --s8: 60px; --s9: 84px; --s10: 112px;

  /* Hình khối */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(16, 26, 61, .07), 0 2px 10px rgba(16, 26, 61, .06);
  --shadow: 0 2px 4px rgba(16, 26, 61, .05), 0 14px 32px rgba(16, 26, 61, .12);
  --shadow-paper: 0 1px 1px rgba(16,26,61,.06), 0 12px 28px rgba(16,26,61,.10), 0 34px 64px rgba(16,26,61,.08);
  --shadow-acc: 0 8px 24px color-mix(in srgb, var(--acc) 40%, transparent);
  --focus: 0 0 0 3px var(--white), 0 0 0 5.5px var(--acc);
  --container: 1200px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}