/* =====================================================================
   /d · cam_ket_phuc_vu.css — Cam kết phục vụ (docs/50 · docs/51 · D195).

   Mọi luật SCOPE dưới `.ckpv-page`. Khung đặt cả hai class `vt-page ckpv-page`
   để dùng lại utility của van_tai.css (`.card-h`, `.tbl-wrap`, `.vt-picker*`)
   — cùng "họ" màn Vận tải với Phục vụ tuyến, nhìn phải giống nhau.
   Token màu ở /shared/tokens.css, không gõ hex (11_DESIGN_SYSTEM).
   ===================================================================== */
.main .khung:has(.ckpv-page) { max-width: none; }

/* Thanh đợt: select đợt + chip trạng thái + nút — một dòng, co giãn */
.ckpv-page .ckpv-dot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ckpv-page .ckpv-dot select.input { min-width: 260px; max-width: 420px; }
.ckpv-page .tag.ckpv-nhap     { opacity: .8; }
.ckpv-page .tag.ckpv-ap_dung  { background: var(--good-bg); color: var(--good); }
.ckpv-page .tag.ckpv-ket_thuc { background: var(--panel-2); color: var(--muted); }

/* Ba khối cấp — tiêu đề có đếm + nút thêm bên phải */
.ckpv-page .ckpv-khoi { margin-top: 14px; }
.ckpv-page .ckpv-khoi-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ckpv-page .ckpv-khoi-hd h3 { margin: 0; font-size: var(--fs-md); }
.ckpv-page .ckpv-khoi-hd .grow { flex: 1; }

/* Ô lời hứa trong bảng: ba dòng nhỏ, mỗi loại hứa một chip */
.ckpv-page .ckpv-hua { display: flex; flex-wrap: wrap; gap: 4px; }
.ckpv-page .ckpv-hua .tag { font-weight: 500; }
.ckpv-page .ckpv-hua .tag.gio  { background: var(--accent-weak); color: var(--accent-strong, var(--accent)); }
.ckpv-page .ckpv-hua .tag.ca   { background: var(--good-bg); color: var(--good); }
.ckpv-page .ckpv-hua .tag.mtv  { background: var(--panel-2); }

/* Cảnh báo khắt khe hơn khung tuyến — đếm, không chặn (D188) */
.ckpv-page .ckpv-cb { color: var(--warn); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 4px; }
.ckpv-page .ckpv-cb .ic { width: 14px; height: 14px; }
.ckpv-page .ckpv-cb.faint { color: var(--muted); }

/* Thứ áp dụng: 7 ô nhỏ trong modal, chữ T2..CN */
.ckpv-thu { display: flex; gap: 4px; flex-wrap: wrap; }
.ckpv-thu label { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px;
  border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-sm); cursor: pointer; }
.ckpv-thu label:has(input:checked) { border-color: var(--accent); color: var(--accent); }

/* Chip thành viên nhóm trong modal nhóm */
.ckpv-tv { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; max-height: 220px; overflow: auto; }
.ckpv-tv .chip { display: inline-flex; align-items: center; gap: 4px; }
.ckpv-tv .chip button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 2px; line-height: 1; }

/* Danh sách tick nhiều (nạp tuyến / nhóm gộp) */
.ckpv-tick { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; }
/* label là flex: nội dung phải bọc trong MỘT <span>, không thì <b> + text vỡ thành cột (bẫy .note flex, 12/09) */
.ckpv-tick label { display: flex; align-items: flex-start; gap: 6px; padding: 3px 4px; font-size: var(--fs-sm); }
.ckpv-tick label > span { flex: 1; min-width: 0; }
.ckpv-tick label:hover { background: var(--panel-2); }

/* Nhóm: bảng thành viên gọn trong dòng mở rộng */
.ckpv-page td.ckpv-tvds { font-size: var(--fs-sm); color: var(--muted); }

/* ---------- Theo dõi phục vụ: tổng quan 4 lăng kính (bấm để đổi lăng kính) ---------- */
.ckpv-page .ckpv-tq { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin-top: 10px; }
.ckpv-page .ckpv-tq-o { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; }
.ckpv-page .ckpv-tq-o.chon { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ckpv-page .ckpv-tq-o:hover { background: var(--panel-2); }
.ckpv-page .ckpv-tq-o .tag.ok  { background: var(--good-bg); color: var(--good); }
.ckpv-page .ckpv-tq-o .tag.bad { background: var(--bad-bg); color: var(--bad); }
.ckpv-page .ckpv-tq-o .tag.warn { background: var(--warn-bg); color: var(--warn); }

/* ---------- Ma trận cam kết × ngày ---------- */
.ckpv-page .ckpv-mt-wrap { overflow: auto; max-height: 72vh; }
.ckpv-page .ckpv-mt { table-layout: fixed; width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.ckpv-page .ckpv-mt th, .ckpv-page .ckpv-mt td { padding: 3px 4px; font-size: var(--fs-sm); }
.ckpv-page .ckpv-mt th.ckpv-dt, .ckpv-page .ckpv-mt td.ckpv-dt { width: 260px; min-width: 260px; position: sticky; left: 0; background: var(--panel); z-index: 1; text-align: left; }
.ckpv-page .ckpv-mt thead th { position: sticky; top: 0; background: var(--panel-2); z-index: 2; text-align: center; }
.ckpv-page .ckpv-mt thead th.ckpv-dt { z-index: 3; }
.ckpv-page .ckpv-mt th.ckpv-ng { width: 36px; min-width: 36px; }
.ckpv-page .ckpv-mt th.ckpv-ng.cuoituan { color: var(--muted); }
.ckpv-page .ckpv-mt th.ckpv-ng.homnay { color: var(--accent); font-weight: 800; }
.ckpv-page .ckpv-mt tr.ckpv-nhom td { background: var(--panel-2); font-weight: 700; color: var(--muted); border-top: 2px solid var(--line); position: sticky; left: 0; }
.ckpv-page .ckpv-mt td.ckpv-o { text-align: center; cursor: pointer; border: 1px solid var(--line); border-radius: 4px; white-space: nowrap; }
.ckpv-page .ckpv-mt td.ckpv-o.DAT       { background: var(--good-bg); color: var(--good); }
.ckpv-page .ckpv-mt td.ckpv-o.KHONG_DAT { background: var(--bad-bg);  color: var(--bad); font-weight: 700; }
.ckpv-page .ckpv-mt td.ckpv-o.CANH_BAO  { background: var(--warn-bg); color: var(--warn); }
.ckpv-page .ckpv-mt td.ckpv-o.CHUA_DO   { background: var(--panel-2); color: var(--muted); }
.ckpv-page .ckpv-mt td.ckpv-o.KHONG_DON, .ckpv-page .ckpv-mt td.ckpv-o.TRONG { cursor: default; border-color: transparent; }
.ckpv-page .ckpv-mt td.ckpv-o.tuonglai  { opacity: .45; }
.ckpv-page .ckpv-mt td.ckpv-o.that      { box-shadow: inset 0 0 0 2px currentColor; }
.ckpv-page .ckpv-mt td.ckpv-dt .ckpv-hua { margin-top: 2px; }

/* ---------- Phiếu kết luận ---------- */
.ckpv-page .ckpv-ph td, .ckpv-page .ckpv-ph th { vertical-align: top; }
.ckpv-page .ckpv-ph tr.ckpv-ph-kd td:first-child { border-left: 3px solid var(--bad); }
.ckpv-page .ckpv-ph input.input.sm, .ckpv-page .ckpv-ph select.input.sm { padding: 3px 6px; font-size: var(--fs-sm); min-width: 140px; }
.ckpv-page td.num.bad { color: var(--bad); font-weight: 700; }
#modal-body .ckpv-ph td, #modal-body .ckpv-ph th { vertical-align: top; }
#modal-body .ckpv-ph tr.ckpv-ph-kd td:first-child { border-left: 3px solid var(--bad); }
#modal-body .ckpv-ph input.input.sm, #modal-body .ckpv-ph select.input.sm { padding: 3px 6px; font-size: var(--fs-sm); min-width: 150px; }