/* Vibary UI — design tokens (chủ: #7 FE lõi).
   Bảng màu theo dac_ta_5.md mục 4; giữ thêm bí danh tên theo siêu câu lệnh v2 mục 4 (--the, --chu-phu, --bong, --chuyen, --k4…).
   Luật: .chu-thich là lớp DUY NHẤT < 14px; --chu-mo chỉ cho kẻ/icon, CẤM làm chữ. */
:root {
  /* Nền, bề mặt, viền */
  --nen: #F6F8FB;
  --be-mat: #FFFFFF;
  --be-mat-2: #FBFCFE;
  --the: var(--be-mat);
  --vien: #E3E9F2;
  --vien-mo: #EEF2F7;
  --vien-nhat: var(--vien-mo);

  /* Xanh chủ đạo + teal nhấn */
  --xanh: #1565D8;
  --xanh-dam: #0F4FB0;
  --xanh-nhat: #E8F0FD;
  --xanh-50: #F3F7FE;
  --xanh-mo: rgba(21, 101, 216, 0.14);
  --teal: #0F9D8A;
  --teal-dam: #0B7D6E;
  --teal-nhat: #E3F6F2;

  /* Chữ */
  --chu: #0B1B33;
  --chu-2: #37455C;
  --chu-3: #5B6A80;
  --chu-phu: var(--chu-3);
  --chu-mo: #9AA7B8;

  /* Trạng thái */
  --do: #D92D20;
  --do-nen: #FEE4E2;
  --do-chu: #B42318;
  --do-nhat: var(--do-nen);
  --vang: #DC6803;
  --vang-nen: #FEF0C7;
  --vang-chu: #B54708;
  --vang-nhat: var(--vang-nen);
  --la: #079455;
  --la-nen: #DCFAE6;
  --la-chu: #067647;
  --xanh-la: var(--la);
  --xanh-la-nhat: var(--la-nen);

  /* Dải màu biểu đồ: POS = bd-1, B2B = bd-2 cố định (BieuDo đọc bằng getComputedStyle) */
  --bd-1: #1565D8;
  --bd-2: #0F9D8A;
  --bd-3: #7CB2F5;
  --bd-4: #F2A33A;
  --bd-5: #8A97A8;
  --bd-luoi: #EEF2F7;

  /* Chữ (QĐ3): tiêu đề khối/menu 18 đậm · thường 14 · chú thích 12 nghiêng · số KPI 24 (22 mobile) · h1 24 */
  --font: Arial, Helvetica, sans-serif;
  --cc-chu-thich: 12px;
  --cc-than: 14px;
  --cc-tieu-de: 18px;
  --cc-kpi: 24px;
  --cc-kpi-mobile: 24px;
  --cc-h1: 24px;
  --cc-vanh: 24px;
  --cc-banner: 28px;
  --c-menu: var(--cc-tieu-de);
  --c-thuong: var(--cc-than);
  --c-chu-thich: var(--cc-chu-thich);
  --c-kpi: var(--cc-kpi);
  --c-h1: var(--cc-h1);
  --dam: 700;
  --thuong: 400;

  /* Khoảng cách 4–16 (QĐ3, trần 16) */
  --k1: 4px;
  --k2: 8px;
  --k3: 12px;
  --k4: 4px;
  --k8: 8px;
  --k12: 12px;
  --k16: 16px;

  /* Bo góc, bóng */
  --bo-s: 8px;
  --bo-m: 12px;
  --bo-l: 16px;
  --bo-tron: 999px;
  --bo-goc: var(--bo-m);
  --bo-goc-nho: var(--bo-s);
  --bong-1: 0 1px 2px rgba(11, 27, 51, 0.05), 0 2px 6px rgba(11, 27, 51, 0.04);
  --bong-2: 0 2px 8px rgba(11, 27, 51, 0.06), 0 8px 24px rgba(21, 101, 216, 0.07);
  --bong-noi: 0 2px 6px rgba(11, 27, 51, 0.08), 0 10px 28px rgba(21, 101, 216, 0.14);
  --bong: var(--bong-2);

  /* Chuyển động 180–450 ms (NT7) */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-nhanh: 180ms;
  --t-vua: 240ms;
  --t-cham: 450ms;
  --chuyen: var(--t-vua) var(--ease);
  --chuyen-nhanh: var(--t-nhanh) var(--ease);
  --phong-to: 1.02;
  --phong-to-nho: 1.015;

  /* Kích thước khung */
  --dau-cao: 64px;
  --loc-cao: 44px;
  --nav-duoi-cao: 60px;
  --cham: 44px;
  --an-toan-duoi: env(safe-area-inset-bottom, 0px);
  --r-thanh-ben: 264px;
  --cao-dau-trang: var(--dau-cao);
  --cao-thanh-duoi: var(--nav-duoi-cao);
  --vung-cham: var(--cham);
  /* Vỏ 6x6 (25/10): tông nâu từ logo; biểu đồ DT/CP/LN; focus; bo nhỏ; bậc màn hình */
  --nau-dam: #4A2512;
  --nau: #3B2A1E;
  --nau-dong: #9A4F1F;
  --nau-sang: #6B3A1E;
  --kem: #F6E7D8;
  --kem-chu: #E8D3BE;
  --tim: #7E57C2;
  --cam: #EF6C00;
  --cam-nen: #FFF3E0;
  --tim-nen: #EDE7F6;
  --bd-dt: #9A4F1F;
  --bd-cp: #F2A33A;
  --bd-ln: #079455;
  --bong-focus: 0 0 0 3px rgba(21, 101, 216, 0.35);
  --bd-cot-day: 28px;
  --bo-nho: var(--bo-goc-nho);
  --r-thanh-ben-tablet: 64px;
  --rong-noi-dung-max: 1680px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --chuyen: 0ms; --chuyen-nhanh: 0ms; --t-nhanh: 0ms; --t-vua: 0ms; --t-cham: 0ms; --phong-to: 1; --phong-to-nho: 1; }
}

@media (max-width: 640px) {
  :root { --cc-kpi: var(--cc-kpi-mobile); }
}