/* =====================================================================
   /d · van_tai.css — Kết nối vận tải (docs/26).

   Mọi luật ở đây SCOPE dưới `.vt-page`. Trang này cần vài utility flex/spacing
   mà kit chưa có (`jc-between`, `p-3`, `mb-2`…); định nghĩa chúng ở phạm vi
   toàn cục sẽ đổi bố cục của những trang đang dùng cùng tên class mà không có
   CSS — chúng đang trông đúng nhờ mặc định của `.row`, "sửa" chúng ở đây là
   thay đổi màn hình mình không hề mở ra xem.

   Dùng token màu ở /shared/tokens.css, không gõ mã màu mới (11_DESIGN_SYSTEM).
   ===================================================================== */

/* Trang này CẦN NGUYÊN BỀ NGANG của .main để grid auto-fit tính đúng. Shell
   mặc định gói mọi trang trong `.khung {max-width: 1280px}` — ở màn 27–32" mà
   sidebar thu, .khung vẫn khoá 1280px nên `.vt-cum` không giãn ra 4 cột được.
   Dùng `:has()` để chỉ khi trang là van_tai mới bung; các trang khác vẫn 1280px.
   (`:has()` hỗ trợ Chrome 105+, Safari 15.4+, Firefox 121+ — đủ cho môi trường
   nội bộ đang dùng Chrome/Edge.) */
.main .khung:has(.vt-page) { max-width: none; }

.vt-page .row.jc-between { justify-content: space-between; }
.vt-page .row.ai-center  { align-items: center; }
.vt-page .row.ai-start   { align-items: flex-start; }
.vt-page .row.ai-end     { align-items: flex-end; }
.vt-page .p-3  { padding: var(--card-pad); }
.vt-page .mb-2 { margin-bottom: var(--sp-2); }
.vt-page .mb-3 { margin-bottom: var(--sp-3); }
.vt-page .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0; }

/* Đầu thẻ: tên bảng bên trái, con số tổng bên phải. */
.vt-page .card-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); padding: 10px var(--card-pad);
  border-bottom: 1px solid var(--line);
}

/* Chấm trạng thái tròn — cùng bộ màu với tag. */
.vt-page .den {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--faint); margin-right: 5px; flex: none;
}
.vt-page .den.good { background: var(--good); }
.vt-page .den.warn { background: var(--warn); }
.vt-page .den.bad  { background: var(--bad); }

.vt-page .empty.sm { padding: var(--sp-4) var(--card-pad); }

/* ------------------------------------------------------------------ KV2/3/4
   Ba cụm xe (CEO chốt: chia 3 màn hình) — RESPONSIVE cho cả 32" điều hành lẫn
   laptop 13" thu nhỏ trình duyệt (CEO chốt 12/08 khuya):
     * ≥ 1900px: 4 cột — màn 27–32" còn ô "chưa xếp cụm" cạnh 3 cụm chính
     * 1400–1900px: 3 cột (bố cục CEO thiết kế ban đầu)
     * 1100–1400px: 2 cột
     * < 1100px: 1 cột (13" mở kèm sidebar)
   Dùng `auto-fit` + `minmax(340px, 1fr)` để cột nào cũng đủ chỗ nhét 8 cột số
   (Xe · MTV · Lấp đầy · Đơn · CT · Điểm · Bắt đầu · Xong) mà không cuộn ngang. */
.vt-cum {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.vt-day {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}

/* Bảng xe: gọn để nhét đủ 7 cột trong 1/3 màn hình. Ở màn to (>=1900) các cột
   số giãn ra tự nhiên vì grid cho khối lớn hơn. */
.vt-tbl th, .vt-tbl td { padding: 6px 8px; font-size: var(--fs-sm); }
.vt-tbl .tag.sm { font-size: 10px; padding: 0 5px; }
/* Cột "Xe/lái" đầu — CEO 12/08 khuya: gọn LẠI vừa đúng biển số, TAG loại xe
   TỰ XUỐNG DÒNG bên dưới. Nhờ vậy cả 3 cụm KV2/3/4 nằm hết trong khoang không
   phải cuộn ngang.
     * `min-width: 100px` đủ cho biển 10 ký tự (`29AB-12345`)
     * `<b>` biển số `white-space: nowrap` để không bị bẻ ở dấu `-`
     * `.tag.sm` chuyển thành block để nhảy dòng luôn, không lẫn vào biển */
.vt-tbl th:first-child, .vt-tbl td:first-child { min-width: 100px; }
.vt-tbl tr.vt-xe-hang td:first-child b { white-space: nowrap; }
.vt-tbl tr.vt-xe-hang td:first-child .tag.sm {
  display: inline-block; margin-top: 2px;
}
/* Header 2 dòng CĂN GIỮA cột (CEO 12/08 tối). Trừ cột đầu "Xe / lái" thì căn
   trái vì có tên xe dài, còn lại tiêu đề ngắn nên căn giữa dễ đọc hơn. */
.vt-tbl thead th { text-align: center; vertical-align: middle; line-height: 1.15; }
.vt-tbl thead th:first-child { text-align: left; }

/* Ô "Giờ đi/về" — HAI DÒNG DỌC (CEO 12/08 khuya). Dòng 1 giờ đi, dòng 2 giờ
   về. Chưa có mốc → "chưa đi" / "đang giao" (mờ, không phải dấu "—"). */
.vt-tbl .vt-gio-di-ve {
  white-space: nowrap; font-variant-numeric: tabular-nums;
  line-height: 1.25; padding: 4px 8px;
}
.vt-tbl .vt-gio-di-ve .vt-gio-dong { display: block; }
.vt-tbl .vt-gio-di-ve .bad  { color: var(--bad);  font-weight: 700; }
.vt-tbl .vt-gio-di-ve .good { color: var(--good); font-weight: 700; }

/* "THẺ XE" — mỗi xe = 2 tr (chính + note) đóng khung lại như 1 khối:
     * Row chính bo tròn trên, KHÔNG border-bottom (dính liền với note)
     * Row note bo tròn dưới, có background nhẹ hơn để phân biệt tầng
     * Cả cặp có border 1px xung quanh, nền panel — nổi khỏi nền cụm
     * Khoảng cách giữa 2 xe: khoảng trắng qua `border-spacing`
   Nhờ vậy mắt đọc "đây là 1 xe" thay vì "2 hàng liên tiếp". Vùng note để trống
   nhiều — sau này chèn đèn cảnh báo (⚠ về muộn · 🔧 sắp bảo dưỡng · ...). */
.vt-tbl {
  border-collapse: separate; border-spacing: 0 4px;
}
.vt-tbl tr.vt-xe-hang td {
  background: var(--panel);
  border-top: 1px solid var(--line); border-bottom: 0;
  padding-top: 8px; padding-bottom: 4px;
}
.vt-tbl tr.vt-xe-hang td:first-child {
  border-left: 1px solid var(--line);
  border-top-left-radius: 6px;
}
.vt-tbl tr.vt-xe-hang td:last-child {
  border-right: 1px solid var(--line);
  border-top-right-radius: 6px;
}
.vt-tbl tr.vt-xe-note-hang td.vt-xe-note {
  padding: 4px 10px 8px;
  /* Cùng nền trắng với row chính (CEO 12/08 khuya) — không dùng panel-2 phân
     tầng nữa. Cả cặp trông như 1 miếng giấy liền, chỉ có border ngăn ngoài. */
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;
  font-size: 11px; color: var(--muted);
}
/* Hover cả cặp cùng lúc — cùng highlight cả row chính + note của xe đó. */
.vt-tbl tr.vt-xe-hang:hover td,
.vt-tbl tr.vt-xe-note-hang:hover td { background: var(--accent-weak, var(--panel-2)); }
/* Cảnh báo (Chưa xếp cụm...) — viền vàng cho cả khung. */
.vt-tbl tr.vt-xe-hang.vt-canh td { background: var(--warn-bg); }
.vt-tbl tr.vt-xe-note-hang.vt-canh td { background: var(--warn-bg); opacity: .85; }

/* Nhãn nhỏ "Lái" / "Phụ" — mờ, in hoa nhỏ. Tên KHÔNG bold (CEO 12/08 khuya). */
.vt-nl-item { display: inline-flex; align-items: baseline; gap: 4px; }
.vt-nl-item .vt-nl-nhan {
  font-size: 10px; letter-spacing: .06em; color: var(--faint);
  text-transform: uppercase;
}
.vt-nl-item .vt-nl-ten { color: var(--ink); font-weight: 500; }
.vt-nl-sep { color: var(--faint); margin: 0 8px; }

/* KPI row (KV1) sticky đầu trang: khi cuộn xuống các cụm xe, chỉ số tổng vẫn
   ở trên đầu — điều hành viên không phải kéo về đầu để đối chiếu. Chỉ áp cho
   .vt-page để không rối các trang khác. */
.vt-page .kpi-row {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg, var(--panel)); padding: 4px 0;
}
.vt-page tr.co-tro { cursor: pointer; }
.vt-page tr.co-tro:hover { background: var(--panel-2); }
.vt-page tr.vt-canh td { background: var(--warn-bg); }

/* Thanh tỷ lệ lấp đầy — số nằm ĐÈ lên thanh để không tốn thêm một cột. */
.vt-bar {
  position: relative; height: 16px; border-radius: 8px;
  background: var(--panel-2); overflow: hidden; min-width: 62px;
}
.vt-bar-in { position: absolute; inset: 0 auto 0 0; border-radius: 8px; }
.vt-bar-in.good { background: var(--good); opacity: .30; }
.vt-bar-in.warn { background: var(--warn); opacity: .35; }
.vt-bar-in.bad  { background: var(--bad);  opacity: .32; }
/* Vượt >100% MTV (CEO 12/08 khuya): tím indigo, KHÔNG dùng đỏ. Đỏ báo động
   thực (về muộn, xe hỏng); tím = "quá công suất" — cần biết nhưng không phải
   lỗi. Hex violet-600/indigo-600 hoà với brand navy `#002C73`. */
.vt-bar-in.over { background: #7C3AED; opacity: .32; }
.vt-bar > span {
  position: relative; display: block; text-align: center; line-height: 16px;
  font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ TAB 5
   Bảng chấm công: 31 cột ngày + cột tên dính trái khi cuộn ngang.
   Không có cột dính thì cuộn tới ngày 20 là không còn biết đang xem ai. */
.vt-lich-wrap { max-height: 70vh; overflow: auto; }
.vt-lich { border-collapse: separate; border-spacing: 0; }
.vt-lich th, .vt-lich td {
  padding: 3px 4px; font-size: 11px; text-align: center; white-space: nowrap;
}
.vt-lich thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.vt-lich .vt-cot-ten {
  position: sticky; left: 0; z-index: 1; background: var(--panel);
  text-align: left; min-width: 168px; max-width: 168px;
  border-right: 1px solid var(--line);
}
.vt-lich thead .vt-cot-ten { z-index: 3; }
.vt-lich .vt-cn { background: var(--panel-2); }
.vt-lich tr.vt-cum-h td {
  position: sticky; left: 0; text-align: left;
  background: var(--panel-2); padding: 5px var(--card-pad);
}

.vt-o { min-width: 34px; font-variant-numeric: tabular-nums; }
.vt-lam  { background: var(--good-bg); color: var(--good); font-weight: 600; }
.vt-muon { background: var(--bad-bg);  color: var(--bad); }

/* NGÀY NGHỈ tô NỔI hẳn (CEO chốt 12/08 tối): trước đây nó cùng tông với nền
   bảng nên phải căng mắt tìm. Nghỉ là thông tin cần thấy từ xa — quét dọc một
   cột là biết hôm đó vắng mấy người. */
.vt-nghi {
  background: var(--warn-bg); color: var(--warn);
  font-weight: 700; box-shadow: inset 0 0 0 1px var(--warn);
}

/* Một ô = hai nửa ca (sáng · chiều) xếp dọc. */
.vt-lam-o { padding: 1px 2px !important; position: relative; }
.vt-nua {
  display: block; line-height: 1.35; border-radius: 3px;
  background: var(--good-bg); color: var(--good); font-weight: 600;
}
.vt-nua + .vt-nua { margin-top: 1px; }
.vt-nua.vt-muon { background: var(--bad-bg); color: var(--bad); }
.vt-nua.vt-trong { background: none; color: var(--faint); font-weight: 400; }
.vt-nua.co-tro { cursor: pointer; }
.vt-nua.co-tro:hover { box-shadow: inset 0 0 0 1px currentColor; }
/* Có phiếu nghỉ nhưng vẫn đi làm — chấm nhỏ góc ô, không che mất giờ. */
.vt-cham-nghi {
  position: absolute; top: 0; right: 2px; color: var(--warn);
  font-size: 14px; line-height: 1;
}

/* Bốn dòng quân số dính dưới hàng ngày khi cuộn dọc. */
.vt-lich thead tr.vt-tong-h th, .vt-lich thead tr.vt-tong-h td {
  position: sticky; background: var(--panel-2);
  font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.vt-lich tr.vt-tong-h td { text-align: center; font-size: 11px; }
.vt-lich tr.vt-tong-h .vt-cot-ten {
  text-align: left; font-weight: 600; background: var(--panel-2);
}
/* Ô "đã qua" = số THỰC TẾ đi giao — đậm. Ô "sắp tới" = DỰ BÁO (tổng cụm −
   nghỉ) — mờ + in nghiêng để không nhầm với đo thật. */
.vt-lich tr.vt-tong-h .vt-thuc-te { color: var(--ink); font-weight: 700; }
.vt-lich tr.vt-tong-h .vt-du-bao  { color: var(--muted); font-style: italic; }

/* Hai dòng TỔNG (LÁI + PHỤ) — mặc định giấu, bật lên bằng nút "Hiện tổng". Khi
   hiện phải nổi hơn 6 dòng chi tiết: nền đậm hơn + đường trên đậm hơn. Nếu
   không, người xem tưởng nó là dòng chi tiết thứ 7-8. */
.vt-lich tr.vt-tong-gop td {
  background: var(--ink-bg, var(--panel-2)); font-weight: 700;
  border-top: 2px solid var(--brand, var(--ink));
}

/* Picker autocomplete cho ô tìm ở tab Lịch lái xe: cố định width để không đổ
   khung khi kết quả xổ xuống. */
.vt-page .vt-l-tim { width: 220px; }
.vt-page .vt-l-tim .vt-picker { width: 100%; }
.vt-page .vt-l-tim .vt-picker input.input { padding: 4px 8px; font-size: var(--fs-sm); }

/* Nút thu gọn nhóm */
.vt-gon {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 12px; padding: 0 6px 0 0;
}
.vt-gon:hover { color: var(--ink); }

/* Dòng của người đã nghỉ việc / phiếu đã xoá — mờ đi nhưng vẫn đọc được. */
.vt-page tr.vt-mo td { opacity: .55; }

/* Ô mẫu trong phần chú giải — cùng màu với ô thật để đối chiếu được. */
.vt-chu {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.vt-chu.vt-lam { background: var(--good-bg); color: var(--good); }
.vt-chu.vt-muon { background: var(--bad-bg); color: var(--bad); }

/* ------------------------------------------------------------------ Điểm giao gom
   Bảng "Điểm giao" trong slide-over chi tiết lệnh/xe. CEO chốt 12/08 khuya:
   gom mission liên tiếp cùng KH thành 1 điểm, STT đánh lại 1..N; mỗi đơn của
   điểm hiện thành 1 badge nhỏ với trạng thái riêng. */
.vt-diem td { vertical-align: top; padding: 8px; }
.vt-diem td:first-child { min-width: 42px; }
.vt-don-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; margin: 2px 4px 2px 0;
  border-radius: 12px; font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: var(--panel-2); border: 1px solid var(--line);
}
.vt-don-badge.good { background: var(--good-bg); border-color: var(--good); }
.vt-don-badge.bad  { background: var(--bad-bg);  border-color: var(--bad); }
.vt-don-badge.warn { background: var(--warn-bg); border-color: var(--warn); }
.vt-don-badge .vt-don-tt {
  font-size: 10px; opacity: .75; text-transform: lowercase;
}

/* ------------------------------------------------------------------ TAB 2
   Hiệu suất xe — bảng xe × ngày. Cùng khuôn với vt-lich (sticky đầu cột + top),
   không tạo class mới cho những thứ chung. */
.vt-hs-wrap { max-height: 75vh; overflow: auto; }
.vt-hs { border-collapse: separate; border-spacing: 0; }
.vt-hs th, .vt-hs td {
  padding: 3px 4px; font-size: 11px; text-align: center; white-space: nowrap;
}
.vt-hs thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.vt-hs .vt-cot-ten {
  position: sticky; left: 0; z-index: 1; background: var(--panel);
  text-align: left; min-width: 178px; max-width: 178px;
  border-right: 1px solid var(--line);
}
.vt-hs thead .vt-cot-ten { z-index: 3; }

/* 3 dòng TỔNG ở đầu bảng (CEO 12/08 khuya): Tất cả · Xe lớn · Xe nhỏ.
   Sticky dưới hàng header ngày. Nền panel-2 để tách khỏi các xe bên dưới;
   dòng "Tất cả" thêm border-bottom đậm ngăn với 2 dòng phụ. */
.vt-hs thead tr.vt-hs-tong td,
.vt-hs thead tr.vt-hs-tong th {
  position: sticky; background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.vt-hs thead tr.vt-hs-tong .vt-cot-ten {
  background: var(--panel-2); text-align: left; font-weight: 700;
}
.vt-hs thead tr.vt-hs-tong-all td,
.vt-hs thead tr.vt-hs-tong-all th { border-bottom: 2px solid var(--line); }
/* Sticky top offset — hàng header ngày cao ~30px nên tổng dồn theo. */
.vt-hs thead tr.vt-hs-tong:nth-of-type(2) th,
.vt-hs thead tr.vt-hs-tong:nth-of-type(2) td { top: 30px; }
.vt-hs thead tr.vt-hs-tong:nth-of-type(3) th,
.vt-hs thead tr.vt-hs-tong:nth-of-type(3) td { top: 60px; }
.vt-hs thead tr.vt-hs-tong:nth-of-type(4) th,
.vt-hs thead tr.vt-hs-tong:nth-of-type(4) td { top: 90px; }
.vt-hs .vt-cn { background: var(--panel-2); }
.vt-hs-o { min-width: 40px; font-variant-numeric: tabular-nums; }
.vt-hs-tach { padding: 1px 2px !important; }

/* Ô nhỏ: dùng LẠI khuôn nửa ô của lịch tháng để ĐỒNG BỘ giao diện, chỉ đổi
   nền thành thang màu theo % lấp đầy. */
.vt-hs-nua {
  display: block; line-height: 1.35; border-radius: 3px;
  background: var(--panel-2); color: var(--muted); font-weight: 600;
}
.vt-hs-nua + .vt-hs-nua { margin-top: 1px; }
.vt-hs-nua.vt-trong { background: none; color: var(--faint); font-weight: 400; }
.vt-hs-good { background: var(--good-bg); color: var(--good); }
.vt-hs-warn { background: var(--warn-bg); color: var(--warn); }
.vt-hs-bad  { background: var(--bad-bg);  color: var(--bad); }
/* Vượt >100%: dải TÍM (CEO 12/08 khuya). Nhất quán với `.vt-bar-in.over` ở sa
   bàn — hai chỗ nói cùng ý "quá định mức nhưng không phải lỗi". */
.vt-hs-over { background: #EDE9FE; color: #6D28D9; }

/* ------------------------------------------------------------------ picker
   Ô chọn người có tìm kiếm. Danh sách xổ ra phải nằm TRÊN nội dung modal, nên
   z-index cao hơn và position tuyệt đối theo ô cha. */
.vt-picker { position: relative; }
.vt-picker-ds {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 30;
  max-height: 260px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--e2, 0 6px 24px rgba(0,0,0,.18));
}
.vt-picker-r { padding: 7px 10px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.vt-picker-r:hover { background: var(--panel-2); }
.vt-picker-r + .vt-picker-r { border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------ chốt v2
   Tab Chốt SLg ngày — grain theo lệnh xe (mig 145 · D103).
   Dòng đã sửa tay nền vàng nhạt: người duyệt quét mắt là thấy chỗ cần soi. */
.vt-chot-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1100px) { .vt-chot-3 { grid-template-columns: 1fr; } }
.table tr.vt-dc td { background: var(--warn-bg); }
.vt-c-mtv { width: 108px; text-align: right; }
.vt-c-ly  { max-width: 170px; }
.vt-c-ghi { min-width: 180px; }

/* Nut xs — nut icon nho cho cot Nhat ky */
.btn.xs { padding: 4px 6px; height: 26px; min-height: 26px; }
.btn.xs .icon { width: 14px; height: 14px; }

/* ------------------------------------------------- thanh đèn tháng (Đợt 2)
   KHÁC `.den` (chấm tròn 8px của sa bàn): đây là dải 31 ô vuông có số ngày,
   bấm được. Đặt tên riêng để hai thứ không giẫm lên nhau khi ai đó sửa một bên.

   Năm màu = năm trạng thái. Viền vàng chồng lên bất kỳ màu nào = ngày đó có
   dòng bị sửa tay — đó là thứ người duyệt cần soi trước tiên. */
.vt-den-thang { display: flex; flex-wrap: wrap; gap: 4px; }
.vt-den-thang i {
  width: 30px; height: 34px; border-radius: 6px; display: flex;
  align-items: center; justify-content: center;
  font-style: normal; font-size: 11px; font-weight: 700;
  border: 1px solid var(--line); color: #fff; user-select: none;
}
.vt-den-thang i:hover { filter: brightness(1.12); }
.vt-den-thang .d-duyet   { background: var(--good); border-color: var(--good); }
.vt-den-thang .d-cho     { background: var(--warn); border-color: var(--warn); }
.vt-den-thang .d-nhap    { background: var(--accent-weak); border-color: var(--line); color: var(--ink); }
.vt-den-thang .d-tuchoi  { background: var(--bad); border-color: var(--bad); }
.vt-den-thang .d-chua    { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.vt-den-thang .d-khong   { background: var(--panel-2); border-color: var(--line); color: var(--muted); }
.vt-den-thang .d-dc      { box-shadow: inset 0 0 0 2px var(--brand-yellow, #FFD400); }

.vt-den-chu { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); }
.vt-den-chu span { display: flex; align-items: center; gap: 6px; }
.vt-den-chu em {
  width: 14px; height: 14px; border-radius: 4px; display: inline-block;
  font-style: normal; border: 1px solid var(--line);
}
.vt-den-chu .d-duyet  { background: var(--good); }
.vt-den-chu .d-cho    { background: var(--warn); }
.vt-den-chu .d-nhap   { background: var(--accent-weak); }
.vt-den-chu .d-tuchoi { background: var(--bad); }
.vt-den-chu .d-chua   { background: var(--bad-bg); border-color: var(--bad); }
.vt-den-chu .d-khong  { background: var(--panel-2); }

/* --------------------------------------------------- ba nhóm tab (mục 8.0)
   Mười một tab một hàng thì mắt phải quét hết mới tìm ra cái cần. Chia ba nhóm
   việc, ngăn bằng vạch dọc mảnh — không đổi cấu trúc nút, chỉ thêm nhịp nghỉ. */
.vt-tab-nhom { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2, 8px); }
.vt-tab-vach {
  width: 1px; align-self: stretch; min-height: 26px;
  background: var(--line); margin: 0 var(--sp-2, 8px);
}
@media (max-width: 900px) { .vt-tab-vach { display: none; } }