/* LOGISTICS TP.HCM — kiểu dùng chung (khuôn luyen-thi/web/quantri/quantri.css; bảng màu xanh biển cho hệ logistics).
   Luật: nút ≤ 32px (26px trong bảng) · nhãn trạng thái luôn có CHỮ · không dính đầu trang (ngăn kéo nổi không chồng). */
:root {
  --chinh-900:#0b2a4a; --chinh-700:#114b7f; --chinh-600:#1660a8; --chinh-200:#bcd6ee; --chinh-100:#dbe9f6; --chinh-50:#f1f6fb;
  --n-900:#141a20; --n-700:#3a4652; --n-600:#505d6b; --n-500:#67748a; --n-300:#c3ccd6; --n-200:#dde3ea; --n-100:#eef2f6; --n-50:#f7f9fb; --trang:#fff;
  --tot:#176b3f; --tot-nen:#e2f2e8; --tot-vien:#b4dcc3;
  --luu:#9a4e1c; --luu-nen:#fbefdc; --luu-vien:#ecd3a0;
  --nguy:#a62d1f; --nguy-nen:#fbe6e2; --nguy-vien:#f0c0b6;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --r:7px; --r-lon:12px;
  --bong:0 1px 2px rgba(20,26,32,.06), 0 1px 1px rgba(20,26,32,.04);
  --bong-3:0 12px 32px rgba(11,42,74,.16), 0 2px 8px rgba(11,42,74,.06);
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { font-family:var(--font); font-size:14.5px; line-height:1.55; background:var(--n-100); color:var(--n-900); }
[hidden] { display:none !important; }
h1 { font-size:17px; margin:0; line-height:1.4; color:var(--chinh-900); }
h2 { font-size:16px; margin:0; line-height:1.4; }
h3 { font-size:14px; margin:6px 0 0; line-height:1.4; color:var(--chinh-900); }
a { color:var(--chinh-700); }
input, select, textarea { font-family:inherit; font-size:14px; color:var(--n-900); border:1px solid var(--n-300);
  border-radius:var(--r); background:var(--trang); padding:6px 10px; min-height:34px; max-width:100%; }
textarea { width:100%; min-height:84px; resize:vertical; }
input[type=checkbox], input[type=radio] { min-height:0; width:15px; height:15px; margin:0; accent-color:var(--chinh-600); }
input:focus, select:focus, textarea:focus, button:focus-visible { outline:2px solid var(--chinh-200); outline-offset:1px; }
label.o { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color:var(--n-700); }
label.o input, label.o select, label.o textarea { font-weight:400; }
.nut { font-family:inherit; font-size:13.5px; font-weight:600; line-height:1.2; height:32px; padding:0 12px; border-radius:var(--r);
  border:1px solid var(--n-300); background:var(--trang); color:var(--n-900); cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.nut:disabled { opacity:.55; cursor:not-allowed; }
.nut-chinh { background:var(--chinh-600); border-color:var(--chinh-600); color:var(--trang); }
.nut-nguy { background:var(--nguy); border-color:var(--nguy); color:var(--trang); }
.nut-vien-nguy { color:var(--nguy); border-color:var(--nguy-vien); }
.nut-nho { height:26px; padding:0 8px; font-size:12.5px; }
.qm { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
  background:var(--n-100); color:var(--n-600); font-size:11.5px; font-weight:700; cursor:pointer; vertical-align:middle; flex:none; }
#qm-pop { position:fixed; z-index:70; max-width:300px; background:var(--n-900); color:var(--trang); font-size:13px;
  line-height:1.5; padding:8px 10px; border-radius:var(--r); display:none; }

/* Thanh đầu — KHÔNG position:sticky (ngăn kéo fixed sẽ đè lên → bộ đo coi là chồng lấn). */
.lg-dau { background:var(--trang); border-bottom:1px solid var(--n-200); }
.lg-dau-trong { max-width:1400px; margin:0 auto; padding:8px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.lg-dau-trong .gian { flex:1 1 auto; }
.lg-nguoi { font-size:13px; color:var(--n-600); white-space:nowrap; }
.lg-menu { max-width:1400px; margin:0 auto; padding:0 12px; display:flex; flex-wrap:wrap; gap:2px; }
.lg-menu a { font-size:13.5px; font-weight:600; height:36px; padding:0 12px; display:inline-flex; align-items:center;
  color:var(--n-600); border-bottom:3px solid transparent; text-decoration:none; white-space:nowrap; }
.lg-menu a[aria-current="page"] { color:var(--chinh-700); border-bottom-color:var(--chinh-600); }
main { max-width:1400px; margin:0 auto; padding:16px; }
.lg-cc { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.lg-cc .nhom { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.lg-dem { font-size:13.5px; color:var(--n-600); }
.lg-khung { background:var(--trang); border:1px solid var(--n-200); border-radius:var(--r-lon); box-shadow:var(--bong); }
.lg-cuon { max-height:350px; overflow-y:auto; overflow-x:hidden; }
.lg-cuon thead th { position:sticky; top:0; z-index:1; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th, td { padding:8px 10px; border-bottom:1px solid var(--n-200); text-align:left; vertical-align:middle; }
thead th { font-size:12.5px; color:var(--n-600); font-weight:600; background:var(--n-50); white-space:nowrap; }
tbody tr:last-child td { border-bottom:0; }
td .nut-nho { height:26px; }
.lg-ten { font-family:inherit; font-size:14px; font-weight:700; color:var(--chinh-700); background:none; border:0; padding:0;
  cursor:pointer; text-align:left; line-height:1.4; display:block; max-width:min(280px, 20vw); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lg-ghi { display:block; font-size:11.5px; color:var(--n-600); line-height:1.4; margin-top:2px; }
.lg-ghi.luu { color:var(--luu); }
.lg-luc { font-size:12.5px; color:var(--n-600); white-space:nowrap; }
/* Nhãn trạng thái / độ tin cậy: luôn có CHỮ, màu chỉ là phụ. */
.the { display:inline-block; font-size:12px; font-weight:700; line-height:1.5; border-radius:999px; padding:0 8px; white-space:nowrap;
  border:1px solid var(--n-300); background:var(--n-50); color:var(--n-700); }
.the.hoat_dong, .the.cao { color:var(--tot); background:var(--tot-nen); border-color:var(--tot-vien); }
.the.trung_binh, .the.tham_khao, .the.quy_hoach { color:var(--luu); background:var(--luu-nen); border-color:var(--luu-vien); }
.the.khoa, .the.thap, .the.ngung { color:var(--nguy); background:var(--nguy-nen); border-color:var(--nguy-vien); }
.lg-loi { color:var(--nguy); background:var(--nguy-nen); border:1px solid var(--nguy-vien); border-radius:var(--r); padding:8px 10px; margin:8px 0; }
.lg-bao { color:var(--luu); background:var(--luu-nen); border:1px solid var(--luu-vien); border-radius:var(--r); padding:8px 10px; margin:0 0 10px; font-size:13.5px; }
.lg-rong { color:var(--n-600); padding:18px; text-align:center; }

/* Trang đăng nhập */
.lg-dn { max-width:380px; margin:48px auto; padding:24px; display:flex; flex-direction:column; gap:12px; }
.lg-dn h1 { font-size:19px; }
.lg-dn p { margin:0; font-size:13px; color:var(--n-600); }
.lg-dn .nut-chinh { height:38px; justify-content:center; }

/* Lớp phủ + ngăn kéo (từ phải) + hộp nổi — dùng từ ngày 4 (khuôn luyen-thi quantri-modal.js) */
#lg-phu { position:fixed; inset:0; background:rgba(11,42,74,.35); z-index:40; }
.lg-ngan { position:fixed; top:0; right:0; bottom:0; width:min(520px, 100vw); background:var(--trang); z-index:50; box-shadow:var(--bong-3);
  display:flex; flex-direction:column; }
.lg-ngan > header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--n-200); }
.lg-ngan > .than { flex:1 1 auto; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.lg-ngan > .than > * { flex-shrink:0; }   /* thân cuộn dạng flex dọc: con bị co về 0 khi form dài — bản đồ nhỏ màn Quy hoạch cao 0px (đo 14/10) */
.lg-ngan > footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--n-200); }
.lg-hop { position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:min(520px, calc(100vw - 32px)); max-height:calc(100vh - 32px);
  overflow:auto; background:var(--trang); border-radius:var(--r-lon); box-shadow:var(--bong-3); z-index:60; padding:18px; display:flex; flex-direction:column; gap:12px; }
.lg-hop.nguy h2 { color:var(--nguy); }
.lg-hop .nut-hang { display:flex; justify-content:flex-end; gap:8px; }

.lg-hop .lg-tom-tat { margin:0; padding-left:18px; font-size:13.5px; color:var(--n-700); }
.lg-hop .than { display:flex; flex-direction:column; gap:10px; }
.lg-hop .than .hai { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lg-mk { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lg-mk code { font-size:16px; letter-spacing:1px; background:var(--n-100); padding:4px 8px; border-radius:var(--r); }
/* Combobox có tìm */
.lg-chon { position:relative; min-width:160px; }
.lg-chon-o { width:100%; }
.lg-chon-ds { position:absolute; left:0; right:0; top:100%; z-index:30; margin:2px 0 0; padding:4px 0; list-style:none; background:var(--trang);
  border:1px solid var(--n-300); border-radius:var(--r); box-shadow:var(--bong-3); max-height:260px; overflow-y:auto; }
.lg-chon-ds li { padding:6px 10px; cursor:pointer; font-size:13.5px; }
.lg-chon-ds li[aria-selected="true"] { font-weight:700; color:var(--chinh-700); }
.lg-chon-ds li.chon, .lg-chon-ds li:hover { background:var(--chinh-50); }
.lg-ngan .hai, .lg-hop .than .hai { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px; }
label.o > input, label.o > select, label.o > textarea, label.o > .lg-chon { width:100%; min-width:0; }
label.o > .nhan { display:inline-flex; align-items:center; gap:6px; }
@media (max-width:480px) {
  .lg-ngan .hai, .lg-hop .than .hai { grid-template-columns:minmax(0, 1fr); }
  /* Thanh lọc: mỗi ô nhập chiếm trọn hàng trên điện thoại (bộ đo: ô ngắn đứng một mình = o_nhap_rach) */
  .lg-cc .nhom > input, .lg-cc .nhom > select, .lg-cc .nhom > .lg-chon { flex:1 1 100%; min-width:0; }
}
.lg-dem.co { color:var(--luu); font-weight:600; }
.nw { white-space:nowrap; }
.lg-lien-ket { font-family:inherit; font-size:inherit; font-weight:inherit; color:var(--chinh-700); background:none; border:0; padding:0;
  cursor:pointer; text-decoration:underline; }
.lg-cuon-cao { max-height:calc(100vh - 230px); min-height:240px; overflow-y:auto; overflow-x:hidden; }
.lg-cuon-cao thead th { position:sticky; top:0; z-index:1; }
.lg-details { margin-top:12px; }
.lg-details > summary { padding:10px 12px; font-weight:600; cursor:pointer; color:var(--chinh-900); }
.chi-hep { display:none; }
.lg-chon-trang { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; white-space:nowrap; cursor:pointer; }
.an-chu { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.lg-hang-loat { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.lg-hang-loat select { min-height:26px; padding:2px 6px; font-size:13px; }
fieldset.lg-chon-cach { border:1px solid var(--n-200); border-radius:var(--r); padding:8px 12px; margin:0; display:flex; flex-wrap:wrap; gap:6px 16px; }
fieldset.lg-chon-cach legend { font-size:13px; font-weight:600; color:var(--n-700); padding:0 4px; }
fieldset.lg-chon-cach label { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; cursor:pointer; }
.lg-ngan .lg-tabs { margin-bottom:4px; }
fieldset.dn-linh-vuc { max-height:170px; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
td.dn-lv .the { margin:1px 0; white-space:normal; }   /* nhãn lĩnh vực xuống dòng: để nowrap thì cột Thao tác lòi 9px ở 1024px (đo 14/10) */
.ht-ve-nut { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:8px; }
.ht-ban-do-nho { position:relative; height:280px; border:1px solid var(--n-200); border-radius:var(--r); overflow:hidden; background:#eef1f4; }
.ht-tep-tai { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin-bottom:10px; }
.ht-tep-tai label.o { flex:1 1 240px; }
.lg-nguoi-nut { font-family:inherit; font-size:13px; color:var(--n-600); background:none; border:0; padding:0; cursor:pointer;
  white-space:nowrap; text-decoration:underline dotted; }
.lg-trang { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:8px 10px; border-top:1px solid var(--n-200); font-size:13px; color:var(--n-600); }
/* Tabs */
.lg-tabs { display:flex; gap:4px; margin-bottom:12px; border-bottom:1px solid var(--n-200); flex-wrap:wrap; }
.lg-tabs button { font-family:inherit; font-size:14px; font-weight:600; height:36px; padding:0 14px; border:0; background:none;
  color:var(--n-600); border-bottom:3px solid transparent; cursor:pointer; white-space:nowrap; margin-bottom:-1px; }
.lg-tabs button[aria-selected="true"] { color:var(--chinh-700); border-bottom-color:var(--chinh-600); }
/* Ma trận quyền */
.lg-ma-tran td.nhom-cn { background:var(--n-50); font-weight:700; color:var(--chinh-900); }
.lg-ma-tran select { min-height:28px; padding:2px 6px; font-size:13px; }
.lg-ma-tran select.doi { border-color:var(--luu); background:var(--luu-nen); }
.lg-ma-tran th .lg-ghi { font-weight:400; }
/* Bảng thành thẻ dọc ở màn hẹp (khuôn CLAUDE.md §5): nhãn cột lấy từ data-nhan; tr[hidden] vẫn ẩn. */
@media (max-width:768px) {
  table.lg-the, table.lg-the tbody { display:block; width:100%; }   /* table giữ display:table thì rộng theo nội dung → thẻ lòi khỏi hộp cuộn */
  table.lg-the thead { display:none; }
  table.lg-the tr { display:block; border-bottom:1px solid var(--n-200); padding:6px 0; }
  table.lg-the tr[hidden] { display:none; }
  /* Nhãn cột đặt tuyệt đối bên trái; nội dung ô chảy KHỐI bình thường bên phải → tên + địa chỉ xếp chồng, không bị đẩy ra ngoài (đo 13/10). */
  table.lg-the td { display:block; position:relative; border:0; padding:3px 8px 3px 124px; min-height:26px; overflow-wrap:anywhere; }
  table.lg-the td::before { content:attr(data-nhan); position:absolute; left:8px; top:5px; width:108px; font-size:12px; color:var(--n-600); }
  table.lg-the td:not([data-nhan]) { padding-left:8px; }
  table.lg-the td:not([data-nhan])::before { display:none; }
  table.lg-the td.thao-tac { display:flex; flex-wrap:wrap; gap:6px; }
  table.lg-the .lg-ten { max-width:100%; }
  .chi-hep { display:block; }
  main { padding:12px; }
  .lg-dau-trong { padding:8px 12px; }
  th, td { padding:7px 8px; }
}
/* Hỗ trợ quy hoạch — bán kính phục vụ: bản đồ + kết quả cạnh nhau (màn hẹp xếp chồng) */
.qh-bk { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:12px; }
.qh-ban-do { position:relative; height:440px; border:1px solid var(--n-200); border-radius:var(--r-lon); overflow:hidden; background:#eef1f4; }
.qh-bk-kq { display:flex; flex-direction:column; min-width:0; }
.qh-bk-tom { padding:10px 12px; margin:0; border-bottom:1px solid var(--n-200); }
.qh-bk-tam { flex:1 1 280px; min-width:220px; }
.qh-bk-km { width:130px; }
@media (max-width:1024px) { .qh-bk { grid-template-columns:minmax(0, 1fr); } .qh-ban-do { height:340px; } }
/* Thống kê báo cáo — thẻ chỉ số + lưới khối (bảng + biểu đồ cột ngang thuần CSS) */
.bc-the { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:10px; margin-bottom:12px; }
.bc-the-o { padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
.bc-the-o.chua-dat { border-left:4px solid var(--nguy); }
.bc-the-o.dat { border-left:4px solid var(--tot); }
.bc-the-ten { font-size:13px; color:var(--n-600); font-weight:600; }
.bc-the-so { font-size:24px; font-weight:700; color:var(--chinh-900); font-variant-numeric:tabular-nums; }
.bc-the-so small { font-size:13px; font-weight:600; color:var(--n-600); }
.bc-luoi { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(480px, 100%), 1fr)); gap:12px; }
.bc-khoi { padding:12px; min-width:0; }
.bc-khoi h3 { margin:0 0 8px; }
.bc-khoi td.so { text-align:right; font-variant-numeric:tabular-nums; }
.bc-bd { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.bc-bd-dong { display:grid; grid-template-columns:minmax(0, 170px) minmax(0, 1fr) 48px; gap:8px; align-items:center; font-size:12.5px; }
.bc-bd-nhan { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--n-700); }
.bc-bd-cot { height:12px; background:var(--n-100); border-radius:3px; overflow:hidden; }
.bc-bd-cot > span { display:block; height:100%; background:var(--chinh-600); }
.bc-bd-so { text-align:right; font-variant-numeric:tabular-nums; }
.bc-ghi-chu { margin-top:10px; }
.bc-ghi-chu p { margin:2px 0; }