/* =============================================================
   iAi Lắng Nghe — NỀN THIẾT KẾ DÙNG CHUNG
   Nguồn phong cách: IAI Inspires Design System v3.1
   (D:\DienBT\IAI Website\iai-website\src\app\globals.css)

   Bản v2 — sửa GỐC RỄ của bản cũ:
   1. Bề mặt nông: --color-bg-warm cũ gần như TRẮNG (oklch 99%) nên mọi
      tấm thẻ chìm vào nền, không có chiều sâu. Nay tách 3 tầng bề mặt rõ.
   2. Không có thang khoảng cách: số lẻ 18/22/26/28px rải rác. Nay 1 thang 4px.
   3. Không có khung portal: portal thiếu thanh bên + thanh trên + vùng cuộn.
   4. Không có công cụ vận hành: thiếu ô lọc, sắp xếp, chọn nhiều, trạng thái rỗng.
   5. Thiếu .an — lớp ẩn mà trang portal ĐANG dùng nhưng chưa từng định nghĩa.

   QUY ƯỚC ĐẶT TÊN: giữ tên tiếng Việt không dấu như bản cũ (the, bang, truong…)
   để không phải sửa lại hai trang đang dùng.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@1,600;1,700&display=swap');

/* ═══════════════════════════════════════════════════════════
   1. TOKEN
   ═══════════════════════════════════════════════════════════ */
:root {
  /* — Màu: lấy từ IAI Inspires Design System v3.1, không tự bịa — */
  --color-bg: #f3f1fa;          /* nền trang — đủ sâu để thẻ trắng NỔI lên */
  --color-surface: #ffffff;     /* tầng 1: thẻ, bảng */
  --color-surface-2: #faf9fe;   /* tầng 2: đầu bảng, dải phụ */
  --color-surface-3: #f0edf9;   /* tầng 3: vùng lõm, ô chờ */
  --color-bg-warm: #f6f4fc;     /* dải ấm — nay có màu thật, không phải trắng */
  --color-border: #e5e0f2;      /* viền tầng 1 */
  --color-border-strong: #d5cdec; /* viền tầng 2 — cho ô nhập, nút */
  --color-fg: #1b183a;
  --color-fg-soft: #2f2b52;
  --color-muted: #5c5685;
  /* Chữ phụ nhạt nhất. SỐ ĐO WCAG THẬT (tự tính bằng công thức, KHÔNG chép báo cáo):
     mã cũ #7d78a3 chỉ đạt 4.13:1 trên trắng và 3.69:1 trên nền trang ⇒ KHÔNG ĐẠT AA.
     Mã nay #6b6690: 5.35:1 trên trắng · 5.10:1 trên #faf9fe · 4.78:1 trên nền trang
     · 4.63:1 trên vùng lõm #f0edf9 ⇒ ĐẠT AA ở cả 4 tầng bề mặt. */
  --color-muted-2: #6b6690;
  --color-accent: #4c1d95;
  --color-accent-hover: #642894;
  --color-accent-soft: rgba(76, 29, 149, 0.08);
  --color-accent-line: rgba(76, 29, 149, 0.16);
  --color-green: #10b981;
  --color-green-soft: rgba(16, 185, 129, 0.08);
  --color-gold: #d9a73d;
  --color-gold-soft: rgba(217, 167, 61, 0.08);
  --color-cyan: #0ea5e9;
  --color-cyan-soft: rgba(14, 165, 233, 0.08);
  --color-yellow: #eab308;
  --color-yellow-soft: rgba(234, 179, 8, 0.08);
  --color-success: #10b981;
  --color-success-soft: #f0fdf4;
  --color-warning: #f59e0b;
  --color-warning-soft: #fffbeb;
  --color-danger: #dc2626;
  --color-danger-soft: #fef2f2;
  --color-info: #2563eb;
  --color-info-soft: #eff6ff;

  /* — Chữ — */
  --font-primary: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: ui-monospace, 'JetBrains Mono', Menlo, monospace;

  /* — Thang cỡ chữ (thay số lẻ rải rác) — */
  --fs-xs: 11.5px;   /* nhãn bảng, chữ phụ rất nhỏ */
  --fs-sm: 12.5px;   /* chú thích */
  --fs-base: 14px;   /* thân */
  --fs-md: 15px;     /* thân lớn, mô tả */
  --fs-lg: 16px;     /* tiêu đề thẻ */
  --fs-xl: 20px;     /* tiêu đề trang */
  --fs-2xl: 26px;    /* số liệu lớn */
  --fs-3xl: 34px;    /* số liệu anh hùng */

  /* — THANG KHOẢNG CÁCH 4px (mới — chống số lẻ tuỳ hứng) — */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px;

  /* — Bóng: 3 cấp, đủ khác biệt để đọc được tầng — */
  --shadow-sm: 0 1px 2px rgba(27, 24, 58, 0.05);
  --shadow-md: 0 2px 8px rgba(27, 24, 58, 0.06), 0 1px 2px rgba(27, 24, 58, 0.04);
  --shadow-lg: 0 8px 28px rgba(27, 24, 58, 0.09), 0 2px 6px rgba(27, 24, 58, 0.04);
  --shadow-xl: 0 20px 50px -12px rgba(18, 12, 44, 0.16), 0 8px 16px rgba(18, 12, 44, 0.05);
  --shadow-glow: 0 0 0 3px rgba(76, 29, 149, 0.18);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* — Khung — */
  --cao-top: 58px;        /* thanh trên */
  --rong-side: 258px;     /* thanh bên portal */
  --chuyen: 0.18s cubic-bezier(0.4, 0, 0.2, 1);  /* 180ms — trong khoảng 150–300ms */
}

/* ═══════════════════════════════════════════════════════════
   2. NỀN TẢNG
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
[hidden], .an { display: none !important; }   /* .an: lớp ẩn trang portal đang dùng */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-fg);
  font-family: var(--font-primary); font-size: var(--fs-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; word-break: break-word;
}
a { color: inherit; text-decoration: none; transition: color var(--chuyen); }
button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-xs);
}
[role="button"], [data-clickable], summary { cursor: pointer; }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
.so-lieu { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Bỏ nền chấm + quầng sáng: bản cũ dùng để che việc thiếu chiều sâu.
   Nay bề mặt đã có tầng thật nên không cần hiệu ứng trang trí. */
.lop_nen, .glow-orb-purple, .glow-orb-green { display: none; }

/* ═══════════════════════════════════════════════════════════
   3. BỐ CỤC TRANG (dùng cho landing công khai)
   ═══════════════════════════════════════════════════════════ */
.container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--sp-5); }
@media (max-width: 768px) { .container { padding-inline: var(--sp-4); } }
.container-rong { max-width: 1560px; }
.section { padding-block: var(--sp-8); }
@media (min-width: 769px) { .section { padding-block: var(--sp-10); } }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 560px) {
  .grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px)  { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } }
@media (min-width: 1024px) {
  .grid-2 { gap: var(--sp-7); } .grid-3 { gap: var(--sp-5); } .grid-4 { gap: var(--sp-5); }
}
@media (min-width: 1200px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ═══════════════════════════════════════════════════════════
   MÀN 3 NGĂN (đợt C 06/10/2026) — bảng ở trái, chi tiết đối tượng ở phải.
   Vì sao thêm lớp riêng thay vì dùng `.grid-2`: `.grid-2` chia ĐÔI đều ⇒ bảng bị bóp hẹp
   trong khi ngăn chi tiết chỉ cần ~360px. Lớp này giữ bảng rộng và CỐ ĐỊNH bề rộng ngăn phải.
   Dưới 1100px thì xếp DỌC (bảng trước, chi tiết sau) — màn hẹp mà ép 2 cột là bảng không đọc được.
   ═══════════════════════════════════════════════════════════ */
.man-3-ngan { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
/* Dòng đang mở ở ngăn phải — người dùng phải thấy NGAY mình đang xem dòng nào. */
.bang tr.dang-xem td { background: var(--color-accent-soft); }
@media (min-width: 1100px) {
  .man-3-ngan.co-phai { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .man-3-ngan.co-phai > .the { position: sticky; top: var(--sp-4); }
  /* CẦN THÊM (D5 Pha 1 · 07/10/2026): khuôn 3 NGĂN THẬT cây · bảng · chi tiết.
     `.co-phai` chỉ có 2 cột nên không đội lốt được; lớp mới KHÔNG sửa `.co-phai`.
     Dùng lại điểm gãy 1100 đang có — KHÔNG thêm điểm gãy mới. Hẹp hơn ⇒ thoái hoá về 1 cột
     (`minmax(0,1fr)` của `.man-3-ngan` nền): cây đưa vào `.loc-drawer` đã có, chi tiết rơi xuống dưới bảng. */
  .man-3-ngan.co-trai { grid-template-columns: 260px minmax(0, 1fr) 360px; align-items: start; }
  .man-3-ngan.co-trai > .the:last-child { position: sticky; top: var(--sp-4); }
}

/* CẦN THÊM (D5 2.4): ngăn cây phân nhánh — `.cay` khung · `.cay-nut` 1 mục · `.cay-nut.dang` mục đang chọn.
   Cùng ngôn ngữ thị giác với `.muc-nav` (thanh bên) để cây và menu đọc như một hệ. */
.cay { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.cay-nut {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  padding: 8px var(--sp-3); min-height: 36px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-muted);
  text-align: left; transition: background var(--chuyen), color var(--chuyen);
}
.cay-nut:hover { background: var(--color-surface-2); color: var(--color-fg); }
.cay-nut.dang { background: var(--color-accent-soft); color: var(--color-accent); }


/* ═══════════════════════════════════════════════════════════
   4. CHỮ
   ═══════════════════════════════════════════════════════════ */
h1, h2, h3, h4 { color: var(--color-fg); }
h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.4px; line-height: 1.3; margin: 0 0 var(--sp-2); }
h2 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.2px; line-height: 1.35; margin: 0 0 var(--sp-3); }
h3 { font-size: var(--fs-base); font-weight: 700; margin: 0 0 var(--sp-1); }
h4 { font-size: var(--fs-sm); font-weight: 700; margin: 0 0 var(--sp-1); }
.hero h1 { font-size: clamp(28px, 4.4vw, 50px); font-weight: 800; letter-spacing: -1.6px; line-height: 1.12; }
.hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--color-accent); }
.phu { color: var(--color-muted); font-size: var(--fs-md); line-height: 1.7; margin: 0 0 var(--sp-5); max-width: 70ch; }
.de { color: var(--color-muted); font-size: var(--fs-sm); line-height: 1.6; }
.de-nhat { color: var(--color-muted-2); font-size: var(--fs-xs); }
.nhan-nhom {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--color-muted-2); margin: 0 0 var(--sp-2);
}

/* ═══════════════════════════════════════════════════════════
   5. TẤM THẺ — 3 tầng bề mặt
   ═══════════════════════════════════════════════════════════ */
.the {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  overflow: hidden; position: relative;
}
.the + .the { margin-top: var(--sp-5); }
.the > .dau {
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border);
  background: var(--color-surface); display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; min-height: 56px;
}
.the > .dau h2, .the > .dau h3 { margin: 0; }
.the > .than { padding: var(--sp-5); }
.the > .chan { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--color-border); background: var(--color-surface-2); }
.the.nen { background: var(--color-surface-2); }
.the.lom { background: var(--color-surface-3); box-shadow: none; }
.the-cach { margin-left: auto; }
@media (max-width: 768px) {
  .the > .dau { padding: var(--sp-3) var(--sp-4); }
  .the > .than { padding: var(--sp-4); }
  .the + .the { margin-top: var(--sp-4); }
}

/* Đầu mục trang (dùng cho portal) */
.dau-trang {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.dau-trang .trai { min-width: 0; flex: 1 1 auto; }
.dau-trang .phai { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.dau-trang h1 { margin: 0 0 var(--sp-1); }
.dau-trang .duoi-td { color: var(--color-muted); font-size: var(--fs-sm); margin: 0; }

/* ═══════════════════════════════════════════════════════════
   6. NÚT
   ═══════════════════════════════════════════════════════════ */
/* VÙNG CHẠM: luật dự án đòi ≥44×44px; Design System v3.1 chỉ nâng tới 36px từ 769px.
   Lấy 44px làm gốc, CHỈ hạ về 40px từ 769px (con trỏ chuột chính xác hơn ngón tay) —
   vẫn cao hơn v3.1. Đây là CHỦ Ý: tiếp cận thắng mật độ hiển thị. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-weight: 600; font-size: var(--fs-sm); height: 44px; padding: 0 var(--sp-4);
  border-radius: var(--radius-sm); border: 1px solid transparent;
  transition: background var(--chuyen), border-color var(--chuyen), color var(--chuyen), box-shadow var(--chuyen);
  white-space: nowrap; flex-shrink: 0; line-height: 1;
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-primary { background: var(--color-accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.btn-success { background: var(--color-green); color: #fff; }
.btn-success:hover:not(:disabled) { opacity: 0.92; }
.btn-nguy { background: var(--color-danger); color: #fff; }
.btn-nguy:hover:not(:disabled) { opacity: 0.92; }
.btn-outline { border-color: var(--color-border-strong); background: var(--color-surface); color: var(--color-fg-soft); }
.btn-outline:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); }
.btn-mem { background: var(--color-surface-3); color: var(--color-fg-soft); }
.btn-mem:hover:not(:disabled) { background: var(--color-accent-soft); color: var(--color-accent); }
.btn-chu { color: var(--color-accent); padding: 0 var(--sp-2); height: 44px; }
.btn-chu:hover:not(:disabled) { background: var(--color-accent-soft); }
.btn-lg { height: 48px; font-size: var(--fs-base); padding: 0 var(--sp-6); }
.btn-sm { height: 40px; font-size: var(--fs-sm); padding: 0 var(--sp-3); border-radius: var(--radius-sm); }
.btn-icon { width: 44px; padding: 0; }
.btn-icon.btn-sm { width: 40px; }
/* Thanh công cụ chuẩn (D5 Pha 2): trong thanh, ô tìm/ô lọc cao ĐÚNG bằng nút (40px)
   — trước đây 44px so với nút 40px nên hàng lệch nhau 2px trên mọi màn. */
@media (min-width: 769px) {
  .btn { height: 40px; } .btn-chu { height: 40px; }
  .thanh-cu input[type=search], .thanh-cu input[type=text], .thanh-cu select, .thanh-cu .loc-chon select { height: 40px; min-height: 40px; }
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.hang { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.hang-cach { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; justify-content: space-between; }
@media (max-width: 560px) { .hang .btn { flex: 1 1 auto; } }

/* ═══════════════════════════════════════════════════════════
   7. NHÃN TRẠNG THÁI
   ═══════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs);
  font-weight: 600; padding: 3px var(--sp-2); border-radius: var(--radius-full);
  line-height: 1.35; white-space: nowrap; border: 1px solid transparent;
}
.badge .cham { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-purple { background: var(--color-accent-soft); color: var(--color-accent); }
.badge-green  { background: var(--color-success-soft); color: #047857; }
.badge-gold   { background: var(--color-gold-soft); color: #8a6a1f; }
.badge-cyan   { background: var(--color-cyan-soft); color: #0369a1; }
.badge-yellow { background: var(--color-warning-soft); color: #92400e; }
.badge-info   { background: var(--color-info-soft); color: #1d4ed8; }
.badge-danger { background: var(--color-danger-soft); color: #b91c1c; }
.badge-grey   { background: var(--color-surface-3); color: var(--color-muted); }
.badge-vien   { border-color: var(--color-border-strong); background: var(--color-surface); color: var(--color-fg-soft); }

/* ═══════════════════════════════════════════════════════════
   8. Ô SỐ LIỆU
   ═══════════════════════════════════════════════════════════ */
.o_cam {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0;
}
.o_cam .ten { font-size: var(--fs-sm); color: var(--color-muted); font-weight: 500; order: -1; }
.o_cam .so {
  font-size: var(--fs-2xl); font-weight: 800; color: var(--color-fg);
  line-height: 1.1; letter-spacing: -0.8px;
}
.o_cam .so.nhan-manh { color: var(--color-accent); }
.o_cam .so.canh-bao { color: var(--color-danger); }
.o_cam .so.tot { color: #047857; }
.o_cam .xu-huong { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; }
.o_cam .xu-huong.len { color: #047857; } .o_cam .xu-huong.xuong { color: #b91c1c; }
.o_cam .xu-huong.phang { color: var(--color-muted-2); }

/* ═══════════════════════════════════════════════════════════
   9. BẢNG — kèm công cụ vận hành thật
   ═══════════════════════════════════════════════════════════ */
.thanh-cu {
  display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.o-tim { position: relative; flex: 1 1 220px; min-width: 0; max-width: 320px; }
.o-tim input { padding-left: 36px; height: 44px; }
.o-tim .kinh {
  position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--color-muted-2); pointer-events: none;
}
.loc-chon { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; min-width: 0; }
.loc-chon select { height: 44px; padding: 0 30px 0 var(--sp-3); font-size: var(--fs-sm); width: auto; min-width: 130px; }
.thanh-cu .dem { margin-left: auto; color: var(--color-muted); font-size: var(--fs-sm); white-space: nowrap; }

/* ── THANH CÔNG CỤ CHUẨN DÙNG CHUNG (D5 Pha 2 · 07/10/2026) ────────────────
   KHUÔN DUY NHẤT cho tầng 2 của MỌI màn danh sách — CẤM đặt tên lớp mới:
     <div class="thanh-cu">
       <div class="o-tim">…ô tìm…</div>
       <div class="loc-chon">…ô lọc…</div>
       <span class="chip-loc">…chip lọc đang bật…</span>
       <span class="dem">12 kết quả</span>
       <button class="btn btn-primary btn-sm">+ Thêm mới</button>
     </div>
   Luật đẩy nút "+" sang phải là CẦN: `.o-tim` có `flex: 1 1 220px` nhưng kèm trần
   `max-width` nên KHÔNG nở hết chỗ trống — đo DOM thật 1920/1366, khuôn có ô tìm
   + lọc + nút mà KHÔNG có `.dem`: khe hở phải 1065.6px / 512px nếu thiếu luật;
   có luật ⇒ 0px. `.dem` vẫn giữ `margin-left: auto` (dòng 331) nên khuôn CÓ `.dem`
   cũng ra 0px, không cần luật riêng.
   Kiểm hồi quy màn "Sản phẩm & khoá" (tự chèn `<div style="flex:1 1 auto">` giữa các
   nút, web/portal/index.html:1411): cao thanh 160.8px ở CẢ hai trạng thái có/không
   luật ⇒ luật này TRUNG TÍNH về số hàng, không đẩy thêm hàng.
   Sàn chiều cao CHỈ áp cho thanh CÓ ô tìm: hàng chip thuần cũng dùng chung lớp
   .thanh-cu (web/portal/index.html:547,940) nên không được kéo cao theo.
   Không lặp lại `row-gap`: `.thanh-cu` đã có `gap: var(--sp-2)` (đo thật: 8px). */
.thanh-cu:has(.o-tim) { min-height: calc(var(--sp-3) * 2 + 40px); }
.thanh-cu > .btn:last-child, .thanh-cu > .hang:last-child { margin-left: auto; }
.thanh-cu .dem ~ .btn:last-child, .thanh-cu .dem ~ .hang:last-child { margin-left: 0; }

@media (max-width: 768px) {
  .thanh-cu { padding: var(--sp-3); }
  /* Vùng chạm ≤768 luật hệ là 44px: nút .btn-sm trong thanh phải cao bằng ô tìm
     (nền .btn-sm = 40px ⇒ lệch 4px). Chỉ áp TRONG thanh, không đổi nghĩa .btn-sm. */
  .thanh-cu .btn-sm { height: 44px; }
  .o-tim { max-width: none; flex: 1 1 100%; }
  .loc-chon { width: 100%; }
  .loc-chon select { flex: 1 1 auto; min-width: 0; }
  .thanh-cu .dem { margin-left: 0; }
}

/* Thanh thao tác hàng loạt — chỉ hiện khi có dòng được chọn */
.thanh-hang-loat {
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-4); background: var(--color-accent-soft);
  border-bottom: 1px solid var(--color-accent-line); font-size: var(--fs-sm); font-weight: 600;
  color: var(--color-accent);
}
.thanh-hang-loat .hang { margin-left: auto; }

.khung_bang { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bang { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); }
.bang th, .bang td {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border); vertical-align: middle;
}
.bang th {
  background: var(--color-surface-2); color: var(--color-muted);
  font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.06em; white-space: nowrap; position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--color-border-strong);
}
.bang th.sap-xep { cursor: pointer; user-select: none; }
.bang th.sap-xep:hover { color: var(--color-accent); }
.bang th .mui {
  display: inline-block; margin-left: var(--sp-1); opacity: 0.35;
  font-size: 9px; vertical-align: middle;
}
.bang th[aria-sort="ascending"] .mui, .bang th[aria-sort="descending"] .mui { opacity: 1; color: var(--color-accent); }
.bang tbody tr { height: 56px; }
.bang tbody tr:last-child td { border-bottom: none; }
.bang tbody tr:hover td { background: var(--color-accent-soft); }
.bang tbody tr[data-ma] { cursor: pointer; }
.bang tbody tr[data-ma]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.bang tbody tr.dang-chon td { background: var(--color-accent-soft); }
.bang .cot-chon { width: 44px; padding-right: 0; }
.bang .cot-so { text-align: right; white-space: nowrap; }
.bang .o-chinh { font-weight: 600; color: var(--color-fg); }
.bang .phu-trong-o { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bang td .de { display: block; }
/* Mốc bề rộng theo ĐÚNG 3 tầng của Design System v3.1: <769px · 769–1099px · ≥1100px.
   Bản trước thu thanh bên ở 1024px ⇒ dải 1024–1099px (máy tính bảng theo chuẩn) hiện
   layout máy tính để bàn với thanh bên 258px — lệch chuẩn. Nay khớp 1100. */
@media (max-width: 1099px) { .bang thead th { position: static; } }
@media (max-width: 768px) {
  .bang { font-size: var(--fs-sm); }
  .bang th, .bang td { padding: var(--sp-3); }
  .bang tbody tr { height: 48px; }
}

/* ═══════════════════════════════════════════════════════════
   10. Ô NHẬP
   ═══════════════════════════════════════════════════════════ */
.truong { margin-bottom: var(--sp-5); }
.truong:last-child { margin-bottom: 0; }
label { display: block; font-weight: 600; margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--color-fg-soft); }
label .bb { color: var(--color-danger); margin-left: 2px; }
label .de { font-weight: 400; display: inline; }
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=tel], input[type=url], select, textarea {
  width: 100%; padding: 10px var(--sp-3); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-base);
  background: var(--color-surface); color: var(--color-fg); min-height: 44px;
  transition: border-color var(--chuyen), box-shadow var(--chuyen);
}
input::placeholder, textarea::placeholder { color: var(--color-muted-2); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--color-accent); box-shadow: var(--shadow-glow);
}
input:disabled, select:disabled, textarea:disabled { background: var(--color-surface-3); color: var(--color-muted-2); cursor: not-allowed; }
select {
  cursor: pointer; padding-right: 34px; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
                    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
textarea { min-height: 118px; resize: vertical; line-height: 1.65; }
input[type=file] { padding: var(--sp-3); border-style: dashed; background: var(--color-surface-2); cursor: pointer; font-size: var(--fs-sm); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--color-accent); cursor: pointer; flex-shrink: 0; }
/* Ô tích/ô chọn nằm trong nhãn bấm được: nới vùng chạm của NHÃN lên ≥44px mà không đổi hình. */
.o-kiem { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); min-height: 44px; cursor: pointer; }
.goi_y { font-size: var(--fs-xs); color: var(--color-muted); margin: var(--sp-2) 0 0; line-height: 1.6; }
.cot-nhap { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 769px) { .cot-nhap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═══════════════════════════════════════════════════════════
   11. TRẠNG THÁI RỖNG / CHỜ / LỖI (thay vì hiện lỗi hệ thống ra UI)
   ═══════════════════════════════════════════════════════════ */
.trong {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: var(--sp-9) var(--sp-5); text-align: center;
}
.trong .bieu {
  width: 40px; height: 40px; color: var(--color-muted-2); opacity: 0.6; margin-bottom: var(--sp-1);
}
.trong .td { font-weight: 700; font-size: var(--fs-md); color: var(--color-fg-soft); }
.trong .mt { color: var(--color-muted); font-size: var(--fs-sm); max-width: 46ch; }
.trong .hang { margin-top: var(--sp-3); }
@media (max-width: 768px) { .trong { padding: var(--sp-7) var(--sp-4); } }

.cho { border-radius: var(--radius-sm); background: var(--color-surface-3); position: relative; overflow: hidden; }
.cho::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: truot 1.4s infinite;
}
@keyframes truot { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.cho-dong { height: 14px; margin-bottom: var(--sp-2); }

.loi {
  background: var(--color-danger-soft); border: 1px solid #fecaca; border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); color: #991b1b;
  margin: var(--sp-4) 0; font-size: var(--fs-sm); line-height: 1.6;
}
.loi ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.loi strong { display: block; margin-bottom: var(--sp-1); }
.loi-truong { color: var(--color-danger); font-size: var(--fs-xs); font-weight: 600; margin: var(--sp-1) 0 0; }
.lech {
  background: var(--color-warning-soft); border: 1px solid #fde68a; border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0;
}
.lech .vi { font-weight: 600; color: #92400e; margin: 0 0 var(--sp-1); font-size: var(--fs-sm); line-height: 1.6; }
.lech .dl { font-size: var(--fs-xs); color: #92400e; margin: 0; }
.hop_ket { background: var(--color-success-soft); border: 1px solid #a7f3d0; border-radius: var(--radius); padding: var(--sp-5); margin: var(--sp-4) 0 0; }

/* Băng báo trạng thái phiên (chỉ dùng cho điều hướng gọn, KHÔNG hiện lỗi kỹ thuật) */
.bang-nhac {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  background: var(--color-surface-3); color: var(--color-fg-soft);
  font-size: var(--fs-sm); border: 1px solid var(--color-border);
}
.bang-nhac.cam { background: var(--color-warning-soft); border-color: #fde68a; color: #92400e; }
.bang-nhac b, .bang-nhac .nhan-manh { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   12. KHUNG PORTAL (thanh bên · thanh trên · vùng cuộn)
   ═══════════════════════════════════════════════════════════ */
.portal { display: grid; grid-template-columns: var(--rong-side) minmax(0, 1fr); min-height: 100vh; min-width: 0; }

.portal-side {
  background: var(--color-surface); border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; z-index: 40;
}
.portal-side .dau-side {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border);
  min-height: var(--cao-top); flex-shrink: 0;
}
.portal-side .nhom { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
.portal-side .nhan-nhom { padding-inline: var(--sp-2); }
.muc-nav {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: 9px var(--sp-3); min-height: 44px; border-radius: var(--radius-sm); margin-bottom: 2px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-muted);
  position: relative; transition: background var(--chuyen), color var(--chuyen);
  text-align: left;
}
.muc-nav svg { width: 16px; height: 16px; flex-shrink: 0; }
.muc-nav .dem-so {
  margin-left: auto; font-size: var(--fs-xs); font-weight: 700;
  background: var(--color-surface-3); color: var(--color-muted);
  border-radius: var(--radius-full); padding: 1px 7px; min-width: 20px; text-align: center;
}
.muc-nav:hover { background: var(--color-surface-2); color: var(--color-fg); }
.muc-nav.dang { background: var(--color-accent-soft); color: var(--color-accent); }
.muc-nav.dang::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--color-accent);
}
.muc-nav.dang .dem-so { background: var(--color-surface); color: var(--color-accent); }
.portal-side .cuoi-side { margin-top: auto; padding: var(--sp-4) var(--sp-3); border-top: 1px solid var(--color-border); }

.portal-main { min-width: 0; display: flex; flex-direction: column; }
.portal-top {
  position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6); min-height: var(--cao-top);
}
.portal-top .duong-dan { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--color-muted); min-width: 0; }
.portal-top .duong-dan .tach { opacity: 0.5; }
.portal-top .duong-dan .hien-tai { color: var(--color-fg); font-weight: 600; }
.portal-top .phai { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
/* VÁ (26/09/2026): thiếu `width: 100%` ⇒ trên `.portal-main` (flex-direction: column)
   `margin-inline: auto` khiến khối CO THEO NỘI DUNG (auto margin ở trục ngang chặn giãn),
   ở 1920px chỉ còn 687px và bỏ trống 2 bên. Thêm `width: 100%` để giãn hết rồi `max-width` mới cắt trần. */
/* VÁ (07/10/2026 · D5 Pha 1): trần cứng 1560px làm màn 1920/2560 PHÍ bề rộng.
   Nới trần theo bề rộng khả dụng bằng `max()` — thuần CSS, KHÔNG JS đo rồi gán style,
   KHÔNG thêm điểm gãy (dưới 1818px thì `100vw − 258` < 1560 nên trần vẫn là 1560px). */
.portal-than { padding: var(--sp-6); flex: 1 1 auto; width: 100%; max-width: max(1560px, calc(100vw - var(--rong-side))); margin-inline: auto; }
@media (max-width: 1099px) { .portal-than { padding: var(--sp-5); } }
@media (max-width: 768px)  { .portal-than { padding: var(--sp-4); } .portal-top { padding: var(--sp-3) var(--sp-4); } }

/* Nút mở thanh bên — chỉ hiện dưới 1100px (khớp tầng 769–1099px của v3.1) */
.nut-mo-side { display: none; }
@media (max-width: 1099px) {
  .portal { grid-template-columns: minmax(0, 1fr); }
  .nut-mo-side { display: inline-flex; }
  .portal-side {
    position: fixed; top: 0; left: 0; height: 100vh; width: min(300px, 84vw);
    transform: translateX(-100%); transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--shadow-xl); z-index: 60;
  }
  .portal-side.mo { transform: translateX(0); }
  .scrim {
    position: fixed; inset: 0; background: rgba(27, 24, 58, 0.4); z-index: 55;
    opacity: 0; pointer-events: none; transition: opacity 0.24s;
  }
  .scrim.mo { opacity: 1; pointer-events: auto; }
}
@media (min-width: 1100px) { .scrim { display: none; } }

/* ═══════════════════════════════════════════════════════════
   13. ĐIỀU HƯỚNG CÔNG KHAI (thanh trên landing)
   ═══════════════════════════════════════════════════════════ */
.topnav {
  position: sticky; top: 0; z-index: 50; width: 100%;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.topnav-inner {
  max-width: 1240px; margin-inline: auto; padding: var(--sp-3) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-5); min-height: var(--cao-top);
}
.logo-wrapper { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.logo-dot {
  width: 30px; height: 30px; border-radius: 9px; background: var(--color-accent);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px;
  box-shadow: 0 2px 8px rgba(76, 29, 149, 0.3); flex-shrink: 0;
}
.logo-text { font-weight: 800; color: var(--color-fg); font-size: var(--fs-md); letter-spacing: -0.3px; }
.logo-text em { font-family: var(--font-serif); font-style: italic; color: var(--color-accent); font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; min-width: 0; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-muted);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); white-space: nowrap;
}
.nav-links a:hover { color: var(--color-accent); background: var(--color-accent-soft); }
.nav-links a.dang { color: var(--color-accent); background: var(--color-accent-soft); }
.topnav .phai { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
@media (max-width: 768px) {
  .topnav-inner { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .nav-links { display: none; }
}
/* Màn rất hẹp (điện thoại gập 280–480px): nút ở thanh trên không đủ chỗ nằm ngang.
   Cho xuống hàng và giãn hết bề ngang — không thì nút đẩy tràn ngang cả trang. */
@media (max-width: 480px) {
  .topnav-inner { flex-wrap: wrap; row-gap: var(--sp-2); }
  .topnav-inner .phai { width: 100%; margin-left: 0; }
  .topnav-inner .phai .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   14. DẢI ANH HÙNG + KHỐI LANDING
   ═══════════════════════════════════════════════════════════ */
.hero { padding-block: var(--sp-9) var(--sp-8); position: relative; }
@media (min-width: 769px) { .hero { padding-block: var(--sp-10); } }
.hero-cot { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); align-items: center; }
@media (min-width: 900px) { .hero-cot { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-9); } }
.nhan-hero {
  display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 700;
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  color: var(--color-accent); padding: 5px var(--sp-3); border-radius: var(--radius-full);
  margin-bottom: var(--sp-5); box-shadow: var(--shadow-sm);
}
.nhan-hero .cham { width: 7px; height: 7px; border-radius: 50%; background: var(--color-green); }
.dai-so {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-5); padding-top: var(--sp-6); border-top: 1px solid var(--color-border);
}
.dai-so .o b { display: block; font-size: var(--fs-2xl); font-weight: 800; color: var(--color-accent); letter-spacing: -0.8px; }
.dai-so .o span { font-size: var(--fs-sm); color: var(--color-muted); }

.the-tinh-nang {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--sp-2); height: 100%;
  transition: border-color var(--chuyen), box-shadow var(--chuyen);
}
.the-tinh-nang:hover { border-color: var(--color-accent-line); box-shadow: var(--shadow-md); }
.the-tinh-nang .bieu {
  width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--color-accent-soft);
  color: var(--color-accent); display: grid; place-items: center; margin-bottom: var(--sp-2);
}
.the-tinh-nang .bieu svg { width: 19px; height: 19px; }
.the-tinh-nang h3 { font-size: var(--fs-md); }
.the-tinh-nang p { margin: 0; color: var(--color-muted); font-size: var(--fs-sm); line-height: 1.65; }

.buoc { display: flex; flex-direction: column; gap: var(--sp-3); position: relative; }
.buoc .so-buoc {
  width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--color-accent); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); flex-shrink: 0;
}
.buoc .than-buoc { display: flex; gap: var(--sp-3); align-items: flex-start; }
.buoc h3 { font-size: var(--fs-base); margin: 3px 0 var(--sp-1); }

.cau-hoi { border-bottom: 1px solid var(--color-border); }
.cau-hoi:last-child { border-bottom: none; }
.cau-hoi summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) 0; min-height: 44px; font-weight: 600; font-size: var(--fs-md); list-style: none;
}
.cau-hoi summary::-webkit-details-marker { display: none; }
.cau-hoi summary::after { content: '+'; font-size: 20px; color: var(--color-muted); font-weight: 400; flex-shrink: 0; }
.cau-hoi[open] summary::after { content: '−'; color: var(--color-accent); }
.cau-hoi .tra-loi { color: var(--color-muted); font-size: var(--fs-sm); line-height: 1.75; padding: 0 0 var(--sp-4); max-width: 80ch; }

.khoi-moi {
  background: linear-gradient(135deg, #3b1a75, var(--color-accent));
  border-radius: var(--radius-lg); padding: var(--sp-8) var(--sp-6); text-align: center;
  color: #fff; box-shadow: var(--shadow-lg);
}
.khoi-moi h2 { color: #fff; font-size: var(--fs-2xl); margin-bottom: var(--sp-3); letter-spacing: -0.6px; }
.khoi-moi p { color: rgba(255,255,255,0.85); margin: 0 auto var(--sp-6); max-width: 56ch; font-size: var(--fs-md); }
.khoi-moi .btn-trang { background: #fff; color: var(--color-accent); }
.khoi-moi .btn-trang:hover { background: #f4f2fb; }
.khoi-moi .btn-vien-trang { border-color: rgba(255,255,255,0.4); color: #fff; }
.khoi-moi .btn-vien-trang:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

.chung-nhan {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  font-size: var(--fs-sm); color: var(--color-muted); box-shadow: var(--shadow-sm);
}
.chung-nhan svg { width: 17px; height: 17px; color: var(--color-green); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   15. MÃ THEO DÕI · DÒNG THỜI GIAN · THẺ CHỌN
   ═══════════════════════════════════════════════════════════ */
.ma_ticket {
  font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 700;
  color: var(--color-accent); letter-spacing: 0.08em; background: var(--color-accent-soft);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); display: inline-block;
  border: 1px dashed var(--color-accent-line); word-break: break-all;
}
.dong_thoi_gian { border-left: 2px solid var(--color-border); padding-left: var(--sp-5); margin-top: var(--sp-4); }
.moc_tg { position: relative; padding-bottom: var(--sp-4); }
.moc_tg:last-child { padding-bottom: 0; }
.moc_tg::before {
  content: ''; position: absolute; left: -26px; top: 5px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--color-border-strong); border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-border);
}
.moc_tg.xong::before { background: var(--color-green); box-shadow: 0 0 0 2px var(--color-green-soft); }
.moc_tg.dang::before { background: var(--color-warning); box-shadow: 0 0 0 2px var(--color-warning-soft); }
.moc_tg .viec { font-weight: 600; font-size: var(--fs-sm); }

.chon-o {
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-9); cursor: pointer;
  background: var(--color-surface); position: relative; transition: all var(--chuyen); user-select: none;
}
.chon-o:hover { border-color: var(--color-accent-line); background: var(--color-surface-2); }
.chon-o::before {
  content: ''; position: absolute; left: var(--sp-4); top: var(--sp-4); width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid var(--color-border-strong); background: var(--color-surface);
  transition: all var(--chuyen);
}
.chon-o.dang { border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: 0 0 0 1px var(--color-accent); }
.chon-o.dang::before { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 3px #fff; }
.chon-o .t { font-weight: 700; font-size: var(--fs-base); display: block; }
.chon-o .d { font-size: var(--fs-xs); color: var(--color-muted); line-height: 1.5; display: block; }
.chon-o input { position: absolute; opacity: 0; pointer-events: none; }

.pill {
  padding: 7px var(--sp-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600;
  color: var(--color-muted); border: 1px solid var(--color-border-strong); background: var(--color-surface);
  cursor: pointer; transition: all var(--chuyen); white-space: nowrap;
}
.pill:hover:not(.dang) { border-color: var(--color-accent); color: var(--color-accent); }
.pill.dang { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   16. MÀN CHẶN ĐĂNG NHẬP (portal nội bộ)
   ═══════════════════════════════════════════════════════════ */
.chan_dang_nhap {
  position: fixed; inset: 0; z-index: 2000; background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5); overflow-y: auto;
}
.the-dang-nhap {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  width: 100%; max-width: 404px; overflow: hidden;
}
.the-dang-nhap .dau-dn { padding: var(--sp-7) var(--sp-7) var(--sp-5); text-align: center; }
.the-dang-nhap .bieu-dn {
  width: 46px; height: 46px; border-radius: var(--radius); background: var(--color-accent);
  display: grid; place-items: center; color: #fff; margin: 0 auto var(--sp-4);
  box-shadow: 0 4px 14px rgba(76, 29, 149, 0.3);
}
.the-dang-nhap .bieu-dn svg { width: 22px; height: 22px; }
.the-dang-nhap h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.the-dang-nhap .than-dn { padding: 0 var(--sp-7) var(--sp-7); }
.the-dang-nhap .chan-dn { padding: var(--sp-4) var(--sp-7); background: var(--color-surface-2); border-top: 1px solid var(--color-border); text-align: center; }
@media (max-width: 430px) {
  .chan_dang_nhap { padding: var(--sp-4) var(--sp-3); align-items: flex-start; }
  .the-dang-nhap .dau-dn { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
  .the-dang-nhap .than-dn { padding: 0 var(--sp-5) var(--sp-5); }
  .the-dang-nhap .chan-dn { padding: var(--sp-4) var(--sp-5); }
}

/* ═══════════════════════════════════════════════════════════
   17. CHÂN TRANG
   ═══════════════════════════════════════════════════════════ */
footer.duoi {
  border-top: 1px solid var(--color-border); background: var(--color-surface);
  padding: var(--sp-7) var(--sp-5); color: var(--color-muted); font-size: var(--fs-sm); line-height: 1.9;
}
footer.duoi .trong { max-width: 1240px; margin-inline: auto; }
footer.duoi .cot { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 769px) { footer.duoi .cot { grid-template-columns: 1.4fr 1fr 1fr; } }
footer.duoi strong { color: var(--color-fg); }
footer.duoi a:hover { color: var(--color-accent); }
.duoi-cung { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); }

/* ═══════════════════════════════════════════════════════════
   19. BỔ SUNG ĐỢT B — nhãn nguồn dữ liệu · mã QR · cam kết · ngăn kéo trợ giúp · bản in
   ═══════════════════════════════════════════════════════════ */

/* Nhãn NGUỒN dữ liệu của từng khối. Màn chưa nối máy chủ thì phải nói rõ nguồn,
   cấm để số liệu mẫu đứng cạnh số liệu thật mà không ai biết cái nào là cái nào. */
.nhan-nguon {
  display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs);
  font-weight: 600; color: var(--color-muted); background: var(--color-surface-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  padding: 3px var(--sp-2); white-space: nowrap;
}
.nhan-nguon.that { background: var(--color-success-soft); border-color: #a7f3d0; color: #065f46; }

/* Mã QR + khối mã theo dõi.
   Vì sao QR nằm trong NỀN DÙNG CHUNG: landing, biên nhận in và SDK đều cần; viết 3 lần là
   3 chỗ lệch nhau. QR sinh NGAY TRÊN MÁY NGƯỜI DÙNG từ tệp chung/qrcode.js (đọc cục bộ). */
.qr {
  width: 148px; height: 148px; padding: var(--sp-2); background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); flex-shrink: 0;
}
.qr svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }
.qr-rong { display: grid; place-items: center; text-align: center; font-size: var(--fs-xs);
  color: var(--color-muted); width: 148px; height: 148px; border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md); background: var(--color-surface-2); padding: var(--sp-3); }
.hop-ma-qr { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
@media (max-width: 480px) { .qr, .qr-rong { width: 118px; height: 118px; } }

/* Khối CAM KẾT (loại C): chữ to, viền vàng — nói thẳng "bạn sẽ không nhận được thông báo". */
.cam-ket {
  border: 2px solid var(--color-gold); background: var(--color-warning-soft);
  border-radius: var(--radius); padding: var(--sp-5); margin: var(--sp-4) 0 0;
}
.cam-ket .td { font-weight: 700; font-size: var(--fs-md); color: #7c2d12; line-height: 1.5; }
.cam-ket .mt { font-size: var(--fs-sm); color: #78350f; margin: var(--sp-2) 0 0; }

/* Ngăn kéo TRỢ GIÚP trong sản phẩm (UI-05). Trượt từ phải, không che nội dung đang làm. */
.ngan-keo {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 92vw);
  background: var(--color-surface); border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl); z-index: 80; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.ngan-keo.mo { transform: translateX(0); }
.ngan-keo .dau-keo {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border); min-height: 60px;
}
.ngan-keo .dau-keo h2 { margin: 0; font-size: var(--fs-md); flex: 1 1 auto; }
.ngan-keo .than-keo { padding: var(--sp-4); overflow-y: auto; flex: 1 1 auto; }
.ngan-keo .cham-nen { position: fixed; inset: 0; background: rgba(27,24,58,0.4); z-index: 79; }
.phim-tat { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); padding: var(--sp-2) 0; border-bottom: 1px dashed var(--color-border); }
.phim-tat kbd {
  font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--color-surface-3);
  border: 1px solid var(--color-border-strong); border-bottom-width: 2px; border-radius: var(--radius-xs);
  padding: 2px 6px; color: var(--color-fg-soft);
}

/* Nút "?" trợ giúp — cùng cỡ vùng chạm với nút biểu tượng khác */
.nut-hoi { width: 44px; height: 44px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong);
  background: var(--color-surface); color: var(--color-muted); font-weight: 700; flex-shrink: 0; }
.nut-hoi:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Bản in biên nhận (UI-15). Chỉ hiện khi in; trên màn hình là bản xem trước A5. */
.phieu-in {
  background: #fff; border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  padding: var(--sp-6); max-width: 210mm; margin: var(--sp-5) auto 0;
}
.phieu-in .dau-in { display: flex; justify-content: space-between; gap: var(--sp-4); border-bottom: 2px solid var(--color-fg); padding-bottom: var(--sp-3); }
.phieu-in .o-ghi-tay { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); height: 56px; margin-top: var(--sp-5); padding: var(--sp-2); font-size: var(--fs-xs); color: var(--color-muted); }
@media print {
  /* Chỉ in tờ biên nhận: ẩn điều hướng, nút, mọi thứ không thuộc tờ giấy. */
  body { background: #fff; }
  .topnav, .portal-side, .portal-top, .duoi, .khong-in, .ngan-keo, .cham-nen { display: none !important; }
  .phieu-in { border: none; box-shadow: none; margin: 0; padding: 0; max-width: none; page-break-inside: avoid; }
  .in-kho { display: block !important; }
  a[href]::after { content: ""; }
}
.in-kho { display: none; }

/* Thanh trên portal: hẹp thì nhãn phải xuống hàng được.
   Bản trước .badge có white-space:nowrap nên ở 280px nhóm .phai tràn 111px và bị
   body{overflow-x:hidden} che mất ⇒ nội dung bị CẮT mà không ai thấy. */
@media (max-width: 560px) {
  .portal-top { flex-wrap: wrap; row-gap: var(--sp-2); }
  .portal-top .duong-dan { order: 3; width: 100%; }
  .portal-top .phai { margin-left: 0; width: 100%; }
  .portal-top .phai .badge { white-space: normal; }
}
@media (max-width: 480px) {
  .badge { white-space: normal; }
  .hang > .btn { min-width: 0; }
}

/* Ô nhập trong bảng/hàng đợi trên màn hẹp: giữ được vùng chạm mà không tràn ngang */
@media (max-width: 430px) {
  .thanh-cu, .loc-chon { flex-wrap: wrap; }
  .loc-chon select { width: 100%; min-width: 0; }
  .o-tim { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════
   18. CP-17 → CP-24 — NÂNG TỪ PORTAL + THÊM MỚI (ĐỢT C)
   ═══════════════════════════════════════════════════════════ */

/* CP-17 — Chip lọc đang bật. Nâng từ portal/index.html; bí danh .chip_loc giữ tương thích. */
.chip-loc, .chip_loc {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--radius-full); background: var(--color-accent-soft);
  color: var(--color-accent);
}
.chip-loc button, .chip_loc button { color: inherit; opacity: .7; font-size: 14px; line-height: 1; }
.chip-loc button:hover, .chip_loc button:hover { opacity: 1; }

/* CP-18 — Công tắc bật/tắt. Bí danh .cong_tac giữ tương thích. */
.cong-tac, .cong_tac {
  width: 40px; height: 22px; border-radius: 99px; background: var(--color-border-strong);
  position: relative; transition: background .18s; flex-shrink: 0;
}
.cong-tac::after, .cong_tac::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--color-surface); transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.cong-tac.bat, .cong_tac.bat { background: var(--color-green); }
.cong-tac.bat::after, .cong_tac.bat::after { transform: translateX(18px); }

/* CP-19 — Phân trang. Bí danh .phan_trang / .nut_trang giữ tương thích. */
.phan-trang, .phan_trang {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--color-border); background: var(--color-surface);
}
.phan-trang .giua, .phan_trang .giua { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.nut-trang, .nut_trang {
  min-width: 30px; height: 30px; border-radius: var(--radius-xs); font-size: 13px;
  font-weight: 600; color: var(--color-muted); border: 1px solid transparent; padding: 0 7px;
}
.nut-trang:hover, .nut_trang:hover { background: var(--color-surface-3); color: var(--color-fg); }
.nut-trang.dang, .nut_trang.dang { background: var(--color-accent); color: var(--color-surface); }

/* CP-20 — Thanh tiến độ + biểu đồ cột. Bí danh .thanh_tien / .bien_do giữ tương thích. */
.thanh-tien, .thanh_tien { height: 7px; border-radius: 99px; background: var(--color-surface-3); overflow: hidden; }
.thanh-tien i, .thanh_tien i { display: block; height: 100%; background: var(--color-accent); border-radius: 99px; }
.thanh-tien.cam i, .thanh_tien.cam i { background: var(--color-warning); }
.thanh-tien.do i, .thanh_tien.do i { background: var(--color-danger); }

.bien-do, .bien_do { display: flex; align-items: flex-end; gap: 7px; height: 118px; padding-top: 8px; }
.bien-do .cot, .bien_do .cot {
  flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 6px; min-width: 0;
}
.bien-do .cot i, .bien_do .cot i {
  width: 100%; max-width: 42px; background: var(--color-accent); border-radius: 4px 4px 0 0;
  min-height: 3px; transition: height .3s;
}
.bien-do .cot.cam i, .bien_do .cot.cam i { background: var(--color-warning); }
.bien-do .cot.do i, .bien_do .cot.do i { background: var(--color-danger); }
.bien-do .cot span, .bien_do .cot span { font-size: 11px; color: var(--color-muted); white-space: nowrap; }
.bien-do .cot b, .bien_do .cot b { font-size: 12px; font-weight: 700; }

/* Lớp phụ nâng từ portal — avatar · ô công tắc · thẻ minh chứng · băng xem trước */

/* Avatar người dùng (28px, kèm biến thể xám). */
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--color-accent-soft);
  color: var(--color-accent); display: grid; place-items: center; font-size: 11px;
  font-weight: 700; flex-shrink: 0;
}
.avatar.xam { background: var(--color-surface-3); color: var(--color-muted); }

/* Ô chứa công tắc (một dòng bật/tắt trong danh sách). Bí danh .o_cong_tac giữ tương thích. */
.o-cong-tac, .o_cong_tac {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid var(--color-border);
}
.o-cong-tac:last-child, .o_cong_tac:last-child { border-bottom: none; }

/* Thẻ minh chứng (lưới thẻ nhỏ tự giãn). Bí danh .the_minh_chung giữ tương thích. */
.the-minh-chung, .the_minh_chung { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.the-minh-chung .mc, .the_minh_chung .mc {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 12px 10px; text-align: center; font-size: 11.5px; color: var(--color-muted);
  background: var(--color-surface-2); word-break: break-all;
}
.the-minh-chung .mc svg, .the_minh_chung .mc svg { width: 20px; height: 20px; margin: 0 auto 6px; color: var(--color-muted-2); }

/* Băng-rôn XEM TRƯỚC — màu TH-03 (dữ liệu cũ/xem trước). Dùng biến sẵn có, không mã màu thô. */
.bang-xem-truoc, .bang_xem_truoc {
  padding: 11px 20px; background: var(--color-warning-soft); color: var(--color-fg-soft);
  border-bottom: 2px solid var(--color-gold); font-size: 13px; font-weight: 700;
}

/* CP-21 — Toast toàn cục: tự ẩn 5 giây, đóng được, đặt role="status". Bốn biến thể màu theo TH-. */
.toast {
  position: fixed; left: 50%; bottom: var(--sp-6); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--sp-3); max-width: min(420px, 92vw);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg); font-size: var(--fs-sm); font-weight: 600;
  color: var(--color-fg); z-index: 2100;
}
.toast--thanh-cong { background: var(--color-success-soft); border-color: var(--color-green); }
.toast--loi        { background: var(--color-danger-soft);  border-color: var(--color-danger); }
.toast--canh-bao   { background: var(--color-warning-soft); border-color: var(--color-warning); }
.toast--thong-tin  { background: var(--color-info-soft);    border-color: var(--color-info); }

/* CP-22 — Nhãn "AI gợi ý — cần xác nhận": luôn kèm chữ, không chỉ icon. */
.nhan-ai {
  display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs);
  font-weight: 600; color: var(--color-accent); background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-line); border-radius: var(--radius-full);
  padding: 3px var(--sp-2); white-space: nowrap;
}

/* CP-23 — Bộ lọc nhiều tầng dạng ngăn kéo: nền che + đóng bằng Esc. */
.loc-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(360px, 92vw);
  background: var(--color-surface); border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl); z-index: 90; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.loc-drawer.mo { transform: translateX(0); }
.loc-nen {
  position: fixed; inset: 0; background: rgba(27, 24, 58, 0.4); z-index: 89;
  opacity: 0; pointer-events: none; transition: opacity 0.24s;
}
.loc-nen.mo { opacity: 1; pointer-events: auto; }

/* CP-24 — Màn "không có quyền" (403): đặt giữa màn, kèm chữ rõ + nút về trang chủ. */
.man-403 {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: var(--sp-9) var(--sp-5); text-align: center; min-height: 60vh;
}
.man-403 .bieu {
  width: 46px; height: 46px; border-radius: var(--radius-full);
  background: var(--color-danger-soft); color: var(--color-danger);
  display: grid; place-items: center; margin-bottom: var(--sp-1);
}
.man-403 .bieu svg { width: 22px; height: 22px; }
.man-403 .td { font-weight: 700; font-size: var(--fs-lg); color: var(--color-fg); }
.man-403 .mt { color: var(--color-muted); font-size: var(--fs-sm); max-width: 46ch; }
.man-403 .hang { margin-top: var(--sp-3); }

/* ═══════════════════════════════════════════════════════════
   20. TÔN TRỌNG GIẢM CHUYỂN ĐỘNG (đặt CUỐI tệp để luôn thắng)
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important; scroll-behavior: auto !important;
  }
}