/* =============================================================================
   SALE HUB — DESIGN TOKENS + COMPONENT LAYER (nguồn chân lý duy nhất)
   Xem DESIGN_SYSTEM.md để biết quy tắc. Sửa màu/spacing/bo góc/bóng → SỬA Ở ĐÂY.
   Nguyên tắc: app làm việc 8h/ngày — dễ đọc, dịu mắt, tương phản ≥ WCAG AA 4.5:1,
   KHÔNG dùng màu chói làm nền lớn.
   Giá trị màu để dạng "R G B" (channel) → Tailwind + component đều nhân alpha được.
   ========================================================================== */
:root{
  /* ---------- PALETTE GỐC (channel) — Tailwind-compatible, đừng dùng trực tiếp ở màn hình,
       hãy dùng token ngữ nghĩa bên dưới ---------- */
  --c-slate-50:248 250 252;  --c-slate-100:241 245 249; --c-slate-200:226 232 240;
  --c-slate-300:203 213 225; --c-slate-400:148 163 184; --c-slate-500:100 116 139;
  --c-slate-600:71 85 105;   --c-slate-700:51 65 85;    --c-slate-800:30 41 59;
  --c-slate-900:15 23 42;
  --c-emerald-50:236 253 245; --c-emerald-100:209 250 229; --c-emerald-200:167 243 208;
  --c-emerald-300:110 231 183;--c-emerald-400:52 211 153; --c-emerald-500:16 185 129;
  --c-emerald-600:5 150 105;  --c-emerald-700:4 120 87;   --c-emerald-800:6 95 70;
  --c-emerald-900:6 78 59;
  --c-red-50:254 242 242; --c-red-100:254 226 226; --c-red-200:254 202 202;
  --c-red-300:252 165 165;--c-red-400:248 113 113; --c-red-500:239 68 68;
  --c-red-600:220 38 38;  --c-red-700:185 28 28;   --c-red-800:153 27 27; --c-red-900:127 29 29;
  --c-amber-50:255 251 235; --c-amber-100:254 243 199; --c-amber-200:253 230 138;
  --c-amber-300:252 211 77; --c-amber-400:251 191 36;  --c-amber-500:245 158 11;
  --c-amber-600:217 119 6;  --c-amber-700:180 83 9;    --c-amber-800:146 64 14; --c-amber-900:120 53 15;
  --c-blue-50:239 246 255; --c-blue-100:219 234 254; --c-blue-200:191 219 254;
  --c-blue-300:147 197 253;--c-blue-400:96 165 250;  --c-blue-500:59 130 246;
  --c-blue-600:37 99 235;  --c-blue-700:29 78 216;   --c-blue-800:30 64 175; --c-blue-900:30 58 138;
  --c-indigo-50:238 242 255; --c-indigo-100:224 231 255; --c-indigo-200:199 210 254;
  --c-indigo-300:165 180 252;--c-indigo-400:129 140 248; --c-indigo-500:99 102 241;
  --c-indigo-600:79 70 229;  --c-indigo-700:67 56 202;   --c-indigo-800:55 48 163; --c-indigo-900:49 46 129;
  /* Họ màu mở rộng (phân khúc HV + biểu đồ) */
  --c-purple-100:243 232 255; --c-purple-400:192 132 252; --c-purple-500:168 85 247;
  --c-purple-600:147 51 234;  --c-purple-700:126 34 206;  --c-purple-800:107 33 168; --c-purple-900:88 28 135;
  --c-orange-100:255 237 213; --c-orange-400:251 146 60;  --c-orange-500:249 115 22;
  --c-orange-600:234 88 12;   --c-orange-700:194 65 12;   --c-orange-800:154 52 18; --c-orange-900:124 45 18;
  --c-teal-100:204 251 241;   --c-teal-500:20 184 166;    --c-teal-700:15 118 110;
  --c-rose-100:255 228 230;   --c-rose-400:251 113 133;   --c-rose-600:225 29 72;   --c-rose-900:136 19 55;
  /* Thương hiệu */
  --c-navy:0 30 71; --c-gold:254 209 2; --c-brandred:211 18 23; --c-zalo:0 104 255; --c-zalo2:47 134 255; --c-cream:255 249 219;

  /* ---------- TOKEN NGỮ NGHĨA (dùng cái này ở màn hình) ---------- */
  /* Primary = navy thương hiệu (nút chính, header, nav active) */
  --primary:var(--c-navy); --primary-hover:0 40 92; --primary-subtle:238 242 247;
  --accent:var(--c-gold);                                   /* nhấn mảnh (banner, chip) — KHÔNG làm nền lớn */
  /* Thang xám 8 bậc (từ nhạt→đậm) */
  --gray-50:var(--c-slate-50);  --gray-100:var(--c-slate-100); --gray-200:var(--c-slate-200);
  --gray-300:var(--c-slate-300);--gray-400:var(--c-slate-400); --gray-500:var(--c-slate-500);
  --gray-700:var(--c-slate-700);--gray-900:var(--c-slate-900);
  --gray-600:var(--c-slate-600);--gray-800:var(--c-slate-800);  /* phụ, dùng khi cần */
  /* 4 màu ngữ nghĩa: solid (nút/viền đậm) · subtle (nền badge) · fg (chữ trên nền subtle) */
  --success:var(--c-emerald-600); --success-subtle:var(--c-emerald-50); --success-fg:var(--c-emerald-700);
  --warning:var(--c-amber-500);   --warning-subtle:var(--c-amber-50);   --warning-fg:var(--c-amber-700);
  --danger:var(--c-red-600);      --danger-subtle:var(--c-red-50);      --danger-fg:var(--c-red-700);
  --info:var(--c-blue-600);       --info-subtle:var(--c-blue-50);       --info-fg:var(--c-blue-700);
  /* Nền/mực nền tảng */
  --bg:var(--c-slate-100); --surface:255 255 255; --line:var(--c-slate-200); --text:51 51 51; --text-muted:var(--c-slate-500);

  /* Alias thương hiệu CŨ (nhiều nơi còn var(--navy)…) → giữ để không vỡ */
  --navy:rgb(var(--c-navy)); --red:rgb(var(--c-brandred)); --gold:rgb(var(--c-gold)); --zalo:rgb(var(--c-zalo));
  --ok:rgb(var(--success)); --warn:rgb(var(--warning));

  /* ---------- TYPOGRAPHY (tối đa 5 cỡ · 3 độ đậm; mặc định 14px) ---------- */
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lg:20px; --fs-xl:24px;
  --fw-normal:400; --fw-medium:500; --fw-semibold:600;

  /* ---------- SPACING (thang 4px) ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px;

  /* ---------- RADIUS (2 mức) ---------- */
  --r-sm:6px;   /* input, button, chip */
  --r-lg:10px;  /* card, modal, popover */
  --radius:6px; --radius-lg:10px;   /* tên cũ — giữ tương thích */

  /* ---------- SHADOW (2 mức) ---------- */
  --sh-card:0 1px 2px rgb(15 23 42 / .06), 0 1px 3px rgb(15 23 42 / .10);
  --sh-pop:0 10px 25px rgb(15 23 42 / .15), 0 4px 10px rgb(15 23 42 / .08);
}

/* ============================ BASE ============================ */
body{ color:rgb(var(--text)); font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }
.num, .tabular{ font-variant-numeric:tabular-nums; }
:focus-visible{ outline:2px solid rgb(var(--primary)); outline-offset:2px; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:rgb(var(--gray-300)); border-radius:4px; }

/* ============================ BUTTON ============================ */
/* Dùng: <button class="btn btn-primary">…</button> (mặc định size md). Thêm btn-sm / btn-lg. */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-weight:var(--fw-semibold); font-size:var(--fs-sm); line-height:1; white-space:nowrap;
  padding:9px 14px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer;
  transition:background .12s,border-color .12s,color .12s,opacity .12s; user-select:none; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-sm{ font-size:var(--fs-xs); padding:6px 10px; }
.btn-lg{ font-size:var(--fs-base); padding:12px 18px; }
.btn-primary{ background:rgb(var(--primary)); color:#fff; }
.btn-primary:hover:not(:disabled){ background:rgb(var(--primary-hover)); }
.btn-secondary{ background:rgb(var(--surface)); color:rgb(var(--gray-700)); border-color:rgb(var(--gray-300)); }
.btn-secondary:hover:not(:disabled){ background:rgb(var(--gray-50)); }
.btn-ghost{ background:transparent; color:rgb(var(--gray-600)); }
.btn-ghost:hover:not(:disabled){ background:rgb(var(--gray-100)); }
.btn-danger{ background:rgb(var(--danger)); color:#fff; }
.btn-danger:hover:not(:disabled){ background:rgb(var(--c-red-700)); }
.btn-success{ background:rgb(var(--success)); color:#fff; }
.btn-success:hover:not(:disabled){ background:rgb(var(--c-emerald-700)); }

/* ============================ INPUT / FIELD ============================ */
/* <div class="field"><label class="lbl">…</label><input class="inp">…<div class="err">…</div></div> */
.field{ display:block; margin-bottom:var(--sp-3); }
.lbl{ display:block; font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:rgb(var(--gray-500)); margin-bottom:var(--sp-1); }
.inp{ width:100%; font-size:var(--fs-sm); color:rgb(var(--text)); background:rgb(var(--surface));
  border:1px solid rgb(var(--gray-300)); border-radius:var(--r-sm); padding:8px 12px; transition:border-color .12s,box-shadow .12s; }
.inp::placeholder{ color:rgb(var(--gray-400)); }
.inp:focus{ outline:none; border-color:rgb(var(--primary)); box-shadow:0 0 0 3px rgb(var(--primary) / .12); }
.inp--err{ border-color:rgb(var(--danger)); }
.inp--err:focus{ box-shadow:0 0 0 3px rgb(var(--danger) / .12); }
.err{ font-size:var(--fs-xs); color:rgb(var(--danger-fg)); margin-top:var(--sp-1); }

/* ============================ BADGE (trạng thái) ============================ */
/* <span class="badge badge-success">Đã nhập học</span> — màu trạng thái NHẤT QUÁN toàn hệ thống */
.badge{ display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  line-height:1; padding:3px 8px; border-radius:var(--r-sm); white-space:nowrap; }
.badge-muted{   background:rgb(var(--gray-100));      color:rgb(var(--gray-600)); }
.badge-info{    background:rgb(var(--info-subtle));   color:rgb(var(--info-fg)); }
.badge-success{ background:rgb(var(--success-subtle));color:rgb(var(--success-fg)); }
.badge-warning{ background:rgb(var(--warning-subtle));color:rgb(var(--warning-fg)); }
.badge-danger{  background:rgb(var(--danger-subtle)); color:rgb(var(--danger-fg)); }
.badge-primary{ background:rgb(var(--primary-subtle));color:rgb(var(--primary)); }

/* ============================ CARD ============================ */
.card{ background:rgb(var(--surface)); border:1px solid rgb(var(--line)); border-radius:var(--r-lg); box-shadow:var(--sh-card); }
.card-pad{ padding:var(--sp-4); }

/* ============================ TABLE ============================ */
.tbl{ width:100%; font-size:var(--fs-sm); border-collapse:collapse; }
.tbl thead th{ background:rgb(var(--primary)); color:#fff; text-align:left; font-weight:var(--fw-semibold);
  font-size:var(--fs-xs); padding:10px 12px; white-space:nowrap; }
.tbl tbody td{ padding:10px 12px; border-top:1px solid rgb(var(--gray-100)); }
.tbl tbody tr:hover{ background:rgb(var(--info-subtle)); }

/* ============================ MODAL ============================ */
.modalx{ position:fixed; inset:0; background:rgb(15 23 42 / .5); display:grid; place-items:center; padding:var(--sp-6); z-index:50; }
.modalx-card{ background:rgb(var(--surface)); border-radius:var(--r-lg); box-shadow:var(--sh-pop); width:100%; max-height:88vh; overflow-y:auto; }

/* ============================ TOAST ============================ */
.toastx{ position:fixed; bottom:20px; right:20px; background:rgb(var(--primary)); color:#fff;
  padding:12px 16px; border-radius:var(--r-lg); box-shadow:var(--sh-pop); font-size:var(--fs-sm); z-index:60; max-width:24rem; }
.toastx-success{ background:rgb(var(--success)); }
.toastx-danger{ background:rgb(var(--danger)); }

/* ============================ TABS ============================ */
.tabs{ display:flex; gap:var(--sp-1); border-bottom:1px solid rgb(var(--line)); }
.tab{ padding:8px 14px; font-size:var(--fs-sm); font-weight:var(--fw-medium); color:rgb(var(--gray-500));
  border-bottom:2px solid transparent; cursor:pointer; background:none; }
.tab:hover{ color:rgb(var(--primary)); }
.tab.is-active{ color:rgb(var(--primary)); border-bottom-color:rgb(var(--primary)); font-weight:var(--fw-semibold); }

/* ============================ DROPDOWN / MENU ============================ */
.menu{ background:rgb(var(--surface)); border:1px solid rgb(var(--line)); border-radius:var(--r-lg); box-shadow:var(--sh-pop); padding:var(--sp-1); }
.menu-item{ display:flex; align-items:center; gap:var(--sp-2); width:100%; text-align:left;
  padding:8px 12px; font-size:var(--fs-sm); color:rgb(var(--gray-700)); border-radius:var(--r-sm); cursor:pointer; background:none; }
.menu-item:hover{ background:rgb(var(--gray-100)); }