/* =====================================================================
   /d · phuc_vu_tuyen.css — Phục vụ tuyến (docs/49).

   Mọi luật SCOPE dưới `.pvt-page`. Trang dùng lại bộ utility của van_tai.css
   (`.card-h`, `.tbl-wrap`, `.vt-picker*`) bằng cách đặt cả hai class
   `vt-page pvt-page` trên khung — cùng "họ" màn Vận tải nên nhìn giống nhau
   là đúng ý (CEO 12/09: danh mục tuyến phải đồng nhất với hệ đang có).
   Token màu ở /shared/tokens.css, không gõ hex (11_DESIGN_SYSTEM).
   ===================================================================== */
.main .khung:has(.pvt-page) { max-width: none; }

/* Dòng tiêu đề nhóm xe trong bảng tuyến */
.pvt-page tr.pvt-nhom td {
  background: var(--panel-2);
  font-weight: 700; color: var(--muted);
  border-top: 2px solid var(--line);
}

/* Ô tóm tắt lịch: mỗi ca một chip nhỏ */
.pvt-page .pvt-lich { display: flex; flex-wrap: wrap; gap: 4px; }
.pvt-page .pvt-lich .tag { font-weight: 500; }

/* Đèn trạng thái tuyến — màu + chữ (luật 7: màu không đứng một mình) */
.pvt-page .tag.pvt-QUY_HOACH  { opacity: .8; }
.pvt-page .tag.pvt-HINH_THANH { background: var(--accent-weak); color: var(--accent-strong, var(--accent)); }
.pvt-page .tag.pvt-VAN_HANH   { background: var(--good-bg); color: var(--good); }
.pvt-page .tag.pvt-TAM_DUNG   { background: var(--warn-bg); color: var(--warn); }

/* Chip địa bàn phụ bấm được trong modal chọn */
.pvt-page .pvt-db-chon { display: flex; flex-wrap: wrap; gap: 6px; }
.pvt-db-chon label { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-sm); cursor: pointer; }
.pvt-db-chon label.chinh { border-color: var(--accent); color: var(--accent); }

/* Bảng lịch trong modal: 7 thứ × N ca */
.pvt-lich-bang td, .pvt-lich-bang th { text-align: center; padding: 4px 6px; }
.pvt-lich-bang input.input { width: 56px; text-align: center; }
.pvt-lich-bang input.gio { width: 78px; }

/* Ô chỉnh sửa trong bảng — chật, giữ cùng cỡ chữ */
.pvt-page .table input.input.sm, .pvt-page .table select.input.sm { min-width: 0; }
.pvt-page .pvt-ten-o { min-width: 220px; }

/* Dòng KH chưa tuyến: gợi ý mờ đi khi không có căn cứ */
.pvt-page .pvt-tin-cay { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Đợt 2
   Ma trận tuyến × ngày. Cột tên tuyến + hàng đầu dính khi cuộn — cùng cách
   `.vt-lich` của trang Vận tải (z-index cục bộ trong bảng, như tiền lệ ở đó). */
.pvt-page .pvt-mx-wrap { max-height: 72vh; overflow: auto; }
.pvt-page .pvt-mx { font-size: var(--fs-sm); border-collapse: separate; border-spacing: 2px; }
.pvt-page .pvt-mx th, .pvt-page .pvt-mx td { padding: 3px 4px; text-align: center; white-space: nowrap; border: 0; }
.pvt-page .pvt-mx thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); font-weight: 600; line-height: 1.15; }
.pvt-page .pvt-mx thead th.cn { color: var(--bad); }
.pvt-page .pvt-mx .pvt-ten { position: sticky; left: 0; z-index: 1; background: var(--panel); text-align: left; min-width: 200px; max-width: 240px; }
.pvt-page .pvt-mx thead th.pvt-ten { z-index: 3; }
.pvt-page .pvt-mx .pvt-ten-dai { overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.pvt-page .pvt-mx td.pvt-o { min-width: 46px; border-radius: 4px; cursor: pointer; font-variant-numeric: tabular-nums; }
.pvt-page .pvt-mx td.pvt-o:focus-visible { outline: 2px solid var(--accent); }
.pvt-page .pvt-mx td.pvt-o .ic { width: 12px; height: 12px; vertical-align: -1px; margin-left: 2px; }
.pvt-page .pvt-mx td small, .pvt-page .pvt-mx td.num small { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
.pvt-page .pvt-mx td.num small.bad { color: var(--bad); }
.pvt-page .pvt-mx .hom-nay { box-shadow: inset 0 0 0 2px var(--accent); }
.pvt-page .o-DU        { background: var(--good-bg); color: var(--good); }
.pvt-page .o-CANH_BAO  { background: var(--good-bg); color: var(--warn); }
.pvt-page .o-THIEU     { background: var(--warn-bg); color: var(--warn); }
.pvt-page .o-BO        { background: var(--bad-bg);  color: var(--bad); }
.pvt-page .o-PHAT_SINH { background: var(--accent-weak); color: var(--accent-text); }
.pvt-page .o-KHONG_QH, .pvt-page .o-TUONG_LAI { color: var(--faint); cursor: default; }
.pvt-page .pvt-mx td.sl { background: var(--panel-2); color: var(--ink); }
.pvt-page .pvt-mx td.sl.ld-thap small { color: var(--warn); font-weight: 650; }
.pvt-page .pvt-mx td.sl.ld-ok small   { color: var(--good); }
.pvt-page .pvt-mx td.sl.ld-cao small  { color: var(--accent-text); font-weight: 650; }
.pvt-page .pvt-mx td .pvt-bo { color: var(--bad); }
.pvt-page .pvt-mx .doi-chieu { opacity: .5; }
.pvt-page .pvt-mx tr.pvt-chan td { background: var(--panel-2); color: var(--muted); font-variant-numeric: tabular-nums; }
.pvt-page .pvt-mx tr.pvt-chan td.pvt-ten { font-weight: 600; }
.pvt-page .pvt-mx tr.pvt-chan td.canh { color: var(--warn); font-weight: 700; background: var(--warn-bg); }
/* CEO 15/09: dòng Tổng cộng đậm, tách bằng viền trên; ô "Đơn chưa gắn lệnh" bấm được. */
.pvt-page .pvt-mx tr.pvt-tong td { color: var(--ink); font-weight: 700; border-top: 2px solid var(--line); }
.pvt-page .pvt-mx tr.pvt-tong td small { display: block; font-weight: 400; color: var(--muted); font-size: 10.5px; }
.pvt-page .pvt-mx tr.pvt-chan td.pvt-cl { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.pvt-page .pvt-mx tr.pvt-chan td.pvt-cl:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
/* Ô thông tin: đơn gom theo xe — dòng đầu mỗi xe */
.pvt-pop tr.pvt-nhom-xe td { background: var(--panel-2); font-weight: 600; padding: 5px 6px; border-top: 1px solid var(--line); }
.pvt-pop tr.pvt-nhom-xe.chua td { color: var(--warn); background: var(--warn-bg); }
.pvt-pop tr.pvt-nhom-xe .pvt-nhom-xe-so { float: right; font-weight: 500; color: var(--muted); font-size: 11px; }
.pvt-pop tr.pvt-nhom-xe svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.pvt-page .pvt-chu-giai { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.pvt-page .pvt-chu-giai i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.pvt-page .pvt-chu-giai i.ld-thap { background: var(--warn); }
.pvt-page .pvt-chu-giai i.ld-ok { background: var(--good); }
.pvt-page .pvt-chu-giai i.ld-cao { background: var(--accent); }
.pvt-page .pvt-chu-giai .ic { width: 12px; height: 12px; vertical-align: -1px; margin-right: 2px; }

/* ------------------------------------------------------------------ Đợt 3 */
.pvt-page .warn-chu { color: var(--warn); }
.pvt-page tr.pvt-kk-mo > td { background: var(--panel-2); padding: var(--sp-2) var(--card-pad); }
.pvt-page tr.pvt-kk-kh:hover td { background: var(--panel-2); }

/* Soi màn 12/09: kit đặt `.input{width:100%}` (đúng cho form dọc) nên ô chọn/ô ngày
   trong thanh lọc giãn kín bề ngang và xếp chồng. Trong thanh lọc của trang này ô
   co theo nội dung, giữ tối thiểu đủ đọc. */
.pvt-page .filterbar > .input { width: auto; min-width: 150px; max-width: 360px; flex: 0 1 auto; }
.pvt-page .filterbar > input[type="month"].input,
.pvt-page .filterbar > input[type="date"].input { min-width: 0; }
/* Hai ô chọn cạnh nhau trên dòng lọc đầu (Nhóm xe · Trạng thái tuyến, CEO 15/09): cùng
   một bề rộng cố định để dòng không lệch khi nhãn option dài ngắn khác nhau, và không
   chiếm chỗ của cụm nút Ca / Lăng kính. Hẹp màn thì ô co về min rồi mới xuống dòng. */
.pvt-page .filterbar > .pvt-bn-chon { width: 160px; min-width: 130px; flex: 0 1 160px; }

/* Ô thông tin sản lượng khi bấm một ô ma trận (CEO 12/09 khuya · D187).
   CLICK mở, không hover: bảng dày ô nhỏ mà mở theo hover thì nhấp nháy loạn
   (bài học popover peek ở #hoat_dong). Kích thước cố định để đo vị trí một lần. */
.pvt-pop { position: fixed; width: 460px; max-height: 360px;
  overflow: hidden; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--e3); z-index: var(--z-over); padding: 10px 12px; }
.pvt-pop .pvt-pop-h { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-2); margin-bottom: 6px; flex: 0 0 auto; }
/* Chỉ THÂN cuộn — thanh đầu (nút mở tuyến, nút đóng) phải đứng yên. */
.pvt-pop .pvt-pop-than { flex: 1 1 auto; overflow: auto; }
.pvt-pop table { width: 100%; font-size: var(--fs-sm); }
.pvt-pop th, .pvt-pop td { padding: 3px 4px; }
.pvt-pop thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); }
.pvt-pop tfoot td { font-weight: 700; border-top: 1px solid var(--line);
  position: sticky; bottom: 0; background: var(--panel); }
.pvt-pop .num, .pvt-pop td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Mã tuyến ở ma trận bấm được — mở ô xem nhanh khách của tuyến (CEO 12/09).
   Gạch chân chấm để nhìn ra là bấm được, chứ không giả dạng chữ thường. */
.pvt-page .pvt-mx .pvt-ma { background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--accent-text); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.pvt-page .pvt-mx .pvt-ma:hover { text-decoration-style: solid; }
.pvt-page .pvt-mx .pvt-ma:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 2px; }
.pvt-pop.rong { width: 520px; max-height: 420px; }
.pvt-pop .pvt-pop-meta { margin: -2px 0 8px; line-height: 1.5; }
/* ---------------------------------------------------------------- CEO 12/09
   Thẻ tuyến (màn thông tin một tuyến) + ô chọn nhiều khách của bộ lọc. */
.pvt-the { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .pvt-the { grid-template-columns: 1fr; } }
.pvt-the-ma { font-size: var(--fs-lg); letter-spacing: .02em; }
.pvt-page .pvt-gt { font-weight: 600; padding: 5px 0; min-height: 28px; }
.pvt-page tr.pvt-ngoai td { background: var(--warn-bg); }

/* Ô lọc khách: chip + ô gõ trong một khung; danh sách gợi ý RỘNG CỐ ĐỊNH, xếp lưới
   ba cột nên tên dài cũng không đẩy cột xuống dòng (bệnh của ô hẹp cũ). */
.pvt-khbox { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  min-width: 260px; max-width: 440px; padding: 3px 6px;
  border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); }
.pvt-khbox:focus-within { border-color: var(--accent); }
.pvt-khbox .chips { display: contents; }
.pvt-khbox .chip { display: inline-flex; align-items: center; gap: 2px;
  background: var(--accent-weak); color: var(--accent-ink); border-radius: var(--radius-pill);
  padding: 1px 3px 1px 8px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.pvt-khbox .chip .x { background: none; border: 0; padding: 0 2px; cursor: pointer; color: inherit; line-height: 1; }
.pvt-khbox .chip .x .ic { width: 12px; height: 12px; vertical-align: -2px; }
.pvt-khbox .o { flex: 1 1 120px; min-width: 110px; border: 0; outline: none; background: none;
  color: var(--ink); font: inherit; font-size: var(--fs-sm); padding: 3px 2px; }
.pvt-khds { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  width: 460px; max-width: 86vw; max-height: 300px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--e2); }
.pvt-khds .r { display: grid; grid-template-columns: 132px minmax(0, 1fr) 120px; gap: 8px;
  align-items: baseline; padding: 6px 10px; cursor: pointer; white-space: nowrap; font-size: var(--fs-sm); }
.pvt-khds .r + .r { border-top: 1px solid var(--line); }
.pvt-khds .r:hover { background: var(--panel-2); }
.pvt-khds .r.da { background: var(--accent-weak); }
.pvt-khds .r.faint { display: block; color: var(--muted); cursor: default; }
.pvt-khds .r .ten, .pvt-khds .r .nho { overflow: hidden; text-overflow: ellipsis; }

/* Kiểu xem 3 TẦNG (CEO 14/09): tầng 3 là một thanh nhỏ cho mỗi xe.
   Chữ nhỏ hơn cỡ nhỏ nhất của hệ 2 điểm — CEO muốn "nhỏ hẳn lại cho gọn". */
.pvt-page .pvt-mx td.pvt-o.bt { min-width: 68px; padding: 3px 4px; vertical-align: top; }
.pvt-page .pvt-mx td.pvt-o.bt > small { margin-bottom: 2px; }
.pvt-page .pvt-mx .pvt-xe { display: block; margin-top: 2px; text-align: left; }
.pvt-page .pvt-mx .pvt-xe.chua small { color: var(--warn); font-style: italic; }
.pvt-page .pvt-mx .pvt-xe i { display: block; height: 4px; border-radius: 2px; background: var(--panel-2);
  overflow: hidden; }
.pvt-page .pvt-mx .pvt-xe i b { display: block; height: 100%; background: var(--good-vivid); }
.pvt-page .pvt-mx .pvt-xe i b.qua { background: var(--c-3); }
/* Ô màu mẫu trong hộp giải thích — cùng token với thanh thật để không lệch nhau */
.pvt-mau { display: inline-block; width: 14px; height: 6px; border-radius: 3px; margin-right: 6px; vertical-align: 1px; }
.pvt-mau.xanh { background: var(--good-vivid); }
.pvt-mau.cam { background: var(--c-3); }
.pvt-mau.xam { background: var(--panel-2); border: 1px solid var(--line); }
.pvt-page .pvt-mx .pvt-xe small { display: block; font-size: calc(var(--fs-xs) - 2px); line-height: 1.2;
  color: var(--muted); white-space: nowrap; margin: 0; text-align: left; }

/* ---------------------------------------------------------------- CEO 16/09 · PA-A
   Lăng kính "Lái xe": ô hiện TÊN LÁI, tô theo THỨ HẠNG của lái trong CHÍNH tuyến đó.
   Bề rộng cột cố định — CEO 16/09: "cột không quá rộng, không vỡ layout". Bảng để
   `table-layout` mặc định (auto) thì trình duyệt lấy max-content từng cột và phình lên
   2.719px (chỉ nhìn được 9/30 ngày). `fixed` BỎ QUA `min-width` nên phải khai `width`,
   và chỉ HÀNG ĐẦU (thead) mới quyết định cột. Bảng cũng phải có `width` tính sẵn (JS
   `PVT_W`) — để `auto` là trình duyệt ép vừa khung rồi chia lại tỷ lệ, cột ngày teo.
   Đo: 1.638px cho 30 ngày, màn 1280 thấy 23 ngày, màn 1920 thấy trọn tháng. */
.pvt-page .pvt-mx.pvt-lx { table-layout: fixed; min-width: 100%; }
.pvt-page .pvt-mx.pvt-lx thead th { width: 48px; }
.pvt-page .pvt-mx.pvt-lx thead th.pvt-ten { width: 170px; }
.pvt-page .pvt-mx.pvt-lx thead th:last-child { width: 66px; }
.pvt-page .pvt-mx.pvt-lx .pvt-ten { min-width: 0; max-width: none; }
.pvt-page .pvt-mx.pvt-lx .pvt-ten-dai { max-width: 166px; }
.pvt-page .pvt-mx.pvt-lx td.pvt-o { min-width: 0; padding: 2px; vertical-align: top; }
.pvt-page .pvt-mx td.pvt-o.lx { background: var(--panel-2); }

/* Tên lái trong ô. `fixed` + `nowrap` thì chữ dài TRÀN đè ô bên cạnh (td không cắt),
   nên mỗi tên phải tự cắt lấy. KHÔNG gán z-index cho span: td không được định vị nên
   span (position:relative) nằm dưới cột tên dính trái (z-index:1) — gán z-index:1 là
   chữ lái chạy đè tên tuyến khi cuộn ngang. */
.pvt-page .pvt-mx .pvt-lai { display: block; font-size: 10.5px; line-height: 1.3;
  border-radius: 3px; padding: 1px 3px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--muted); }
.pvt-page .pvt-mx .pvt-lai + .pvt-lai { margin-top: 2px; }
.pvt-page .pvt-mx .pvt-lai.co-ht { font-size: 9.5px; letter-spacing: -.03em; }
/* Hậu tố họ đệm (chỉ 5/32 lái) và số chuyến thứ hai — nhỏ và nhạt, không giành chỗ của tên */
.pvt-page .pvt-mx .pvt-lai i { font-style: normal; font-size: 8px; opacity: .7; margin-left: 1px;
  letter-spacing: -.03em; }
.pvt-page .pvt-mx .pvt-lai s { text-decoration: none; font-size: 7.5px; opacity: .7; margin-left: 1px; }
.pvt-page .pvt-mx .pvt-lai s::before { content: "\00b7"; }

/* Ba bậc thứ hạng. Dùng cặp accent/panel-2 chứ KHÔNG dùng thang --teal-*: thang teal đảo
   chiều giữa hai chế độ (teal-1 nhạt nhất ở sáng nhưng tối nhất ở tối), chữ đặt lên là mất
   tương phản ở chế độ tối. `--accent-ink` giữ nguyên ở cả hai chế độ, đó là màu chữ dành cho
   mảng teal. Ngoài top 3 để nền trắng tường minh, không để trong suốt — kit tô nền cả hàng
   khi rê chuột, ô trong suốt sẽ nhấp nháy theo. */
.pvt-page .pvt-mx .pvt-lai.lx-1 { background: var(--accent); color: var(--accent-ink); font-weight: 650; }
.pvt-page .pvt-mx .pvt-lai.lx-2 { background: var(--accent-weak); color: var(--accent-text); }
.pvt-page .pvt-mx .pvt-lai.lx-3 { background: var(--panel-2); color: var(--ink); }
.pvt-page .pvt-mx td.pvt-o.lx .pvt-lai:not([class*="lx-"]) { background: var(--panel); }

/* Cột Tháng: số lái + lái quen nhất KÈM PHẦN TRĂM (bắt buộc — màu không được đứng một
   mình, luật 7) + thanh độ ổn định. Đỏ dưới 30, vàng 30-50, xanh từ 50. */
.pvt-page .pvt-mx td.pvt-lx-thang { text-align: left; padding: 2px 4px; font-size: 11px; }
.pvt-page .pvt-mx td.pvt-lx-thang small { font-size: 9.5px; line-height: 1.25; }
.pvt-page .pvt-mx td.pvt-lx-thang small i { font-style: normal; font-size: 8px; opacity: .7; }
.pvt-page .pvt-mx .pvt-od { display: block; height: 4px; border-radius: 2px;
  background: var(--line); margin-top: 2px; overflow: hidden; }
.pvt-page .pvt-mx .pvt-od b { display: block; height: 100%; background: var(--bad-vivid); }
.pvt-page .pvt-mx .pvt-od b.vua { background: var(--warn-vivid); }
.pvt-page .pvt-mx .pvt-od b.cao { background: var(--good-vivid); }

/* Ô mẫu trong chú giải — cùng token với ô thật để không lệch nhau */
.pvt-page .pvt-chu-giai em { font-style: normal; display: inline-block; padding: 1px 6px;
  border-radius: 3px; font-size: var(--fs-xs); margin-right: 4px; }
.pvt-page .pvt-chu-giai em.lx-1 { background: var(--accent); color: var(--accent-ink); }
.pvt-page .pvt-chu-giai em.lx-2 { background: var(--accent-weak); color: var(--accent-text); }
.pvt-page .pvt-chu-giai em.lx-3 { background: var(--panel-2); color: var(--ink); }
.pvt-page .pvt-chu-giai em.lx-x { border: 1px solid var(--line); color: var(--muted); }