/* =====================================================================
   FUTA EV Power — hệ thống vận hành trạm sạc (dashboard v2, giao diện 4.0)
   Màu từ logo: xanh FUTA #006838 (thương hiệu, hành động, tiền), tím EV #4010E8 (điện, đang sạc).
   Đỏ / vàng / xám chỉ cho lỗi, mất kết nối, ngừng. Không dải màu, không bóng đổ nặng.
   ===================================================================== */
:root {
  --nen: #f2f4f3;
  --mat: #ffffff;
  --mat-2: #f7f9f8;
  --mat-3: #eef2f0;
  --muc: #131e18;
  --muc-2: #56635c;
  --muc-3: #8a958f;
  --ke: #e3e8e5;
  --ke-2: #cfd7d3;
  --futa: #006838;
  --futa-dam: #00552e;
  --futa-nhat: #e3f0e8;
  --ev: #4010e8;
  --ev-nhat: #ebe7fd;
  --tot: #0a7a43;
  --xau: #c8322b;
  --canh: #c98a0b;
  --tt-sac: #4010e8;
  --tt-cam: #b2a4f6;
  --tt-ranh: #b9d9c6;
  --tt-loi: #d2332b;
  --tt-mat: #d9920b;
  --tt-ngung: #7c8781;
  --tt-khac: #c7bfd8;
  --kh-cao: #d2332b;
  --kh-binh: #dde3e0;
  --kh-thap: #4010e8;
  --nen-loi: #fcebea;
  --nen-canh: #fff4d9;
  --nen-tt: #eef0fe;
  --bong: 0 1px 2px rgba(19, 30, 24, .05);
  --bo: 8px;
  --bo-lon: 12px;
  --chu: "Be Vietnam Pro", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --chu-so: "Barlow Semi Condensed", "Be Vietnam Pro", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --nen: #0c1310; --mat: #131c18; --mat-2: #17211c; --mat-3: #1c2822; --muc: #e6eee9; --muc-2: #a4b3ab; --muc-3: #77867e;
    --ke: #222e28; --ke-2: #33413a; --futa: #46bc81; --futa-dam: #62d197; --futa-nhat: #152e21; --ev: #9b89ff; --ev-nhat: #211a47;
    --tot: #4cc98a; --xau: #f0625a; --canh: #e3a93a;
    --tt-sac: #8f7bff; --tt-cam: #574aa6; --tt-ranh: #2b5540; --tt-loi: #ef5b52; --tt-mat: #e0a326; --tt-ngung: #8a948f; --tt-khac: #5d5570;
    --kh-cao: #ef5b52; --kh-binh: #2b3731; --kh-thap: #8f7bff; --nen-loi: #381b19; --nen-canh: #372d13; --nen-tt: #1e1b3b;
    --bong: none;
    color-scheme: dark;
  }
}

/* Thanh cuộn chung cho toàn dashboard (trang, menu, bảng rộng, danh sách xổ, hộp Thông báo...):
   mảnh, bo tròn, cùng tông giao diện, không có nút mũi tên; rê chuột thì đậm và dày hơn để dễ kéo.
   Không đặt hai thuộc tính thanh cuộn kiểu chuẩn (độ rộng, màu) ở chỗ khác: Chrome mới gặp chúng là bỏ kiểu này. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background-color: var(--muc-3); background-color: color-mix(in srgb, var(--muc-3) 45%, transparent);
                            border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--muc-3); border-width: 2px; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muc-3) 55%, transparent) transparent; }
}

/* Ô tích cùng kiểu dashboard: viền mảnh bo góc, tích thì nền xanh FUTA với dấu tích trắng */
input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 0; cursor: pointer;
  display: inline-grid; place-content: center; vertical-align: -3px; border: 1.5px solid var(--ke-2); border-radius: 4px;
  background: var(--mat); transition: background-color .12s, border-color .12s; }
input[type=checkbox]::before { content: ""; width: 10px; height: 10px; background: #fff; transform: scale(0); transition: transform .12s;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
input[type=checkbox]:checked { background: var(--futa); border-color: var(--futa); }
input[type=checkbox]:checked::before { transform: scale(1); }
input[type=checkbox]:hover:not(:disabled) { border-color: var(--futa); }
input[type=checkbox]:focus-visible { outline: 2px solid var(--futa); outline-offset: 2px; }
input[type=checkbox]:disabled { opacity: .5; cursor: default; }

/* ------------------------------------------------------------ nền tảng */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nen); color: var(--muc); font: 400 14.5px/1.5 var(--chu); }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 600; }
h1 { font: 600 28px/1.1 var(--chu-so); letter-spacing: .1px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p { margin: 0; }
a { color: var(--futa); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
svg { flex: none; }
code { font-size: 12.5px; background: var(--mat-2); border: 1px solid var(--ke); padding: 0 5px; border-radius: 4px; }
.phu { color: var(--muc-2); }
.nho { font-size: 12.5px; }
.so, td.so, th.so { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.an-di { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ev); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ nút, ô nhập */
.nut { font: 500 13.5px/1.2 var(--chu); border-radius: var(--bo); padding: 8px 14px; cursor: pointer;
       border: 1px solid var(--ke-2); background: var(--mat); color: var(--muc); }
.nut:hover { background: var(--mat-2); }
.nut:disabled { opacity: .5; cursor: not-allowed; }
.chinh-nut { background: var(--futa); border-color: var(--futa); color: #fff; font-weight: 600; }
.chinh-nut:hover { background: var(--futa-dam); border-color: var(--futa-dam); }
.nut-nhe { padding: 6px 11px; font-size: 13px; }
input[type=email], input[type=password], input[type=date], input[type=search], input.o-ngay, input.o-gio, select, .o-nhap, .o-chon {
  font: 400 14px/1.3 var(--chu); padding: 8px 11px; border: 1px solid var(--ke-2); border-radius: var(--bo);
  background: var(--mat); color: var(--muc); }
input:focus, select:focus, .o-chon:focus-visible, .o-chon[aria-expanded="true"] { border-color: var(--futa); outline: none; box-shadow: 0 0 0 3px var(--futa-nhat); }
.nut-bieu-tuong { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--bo); border: 1px solid transparent;
                  background: transparent; color: var(--muc-2); cursor: pointer; }
.nut-bieu-tuong:hover { background: var(--mat-2); border-color: var(--ke); color: var(--muc); }
.nut-bieu-tuong svg, .nut-ky svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ đăng nhập */
/* Màn hình chờ lúc mở dashboard: logo giữa màn hình, dòng chữ và một vạch chạy nhẹ */
.man-cho { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
           background: var(--nen); padding: 24px; text-align: center; }
.man-cho .logo-cho { width: 220px; height: auto; display: block; }
.man-cho p { margin: 0; font-size: 14px; color: var(--muc-2); }
.vach-cho { position: relative; width: 140px; height: 3px; border-radius: 3px; background: var(--ke); overflow: hidden; }
.vach-cho::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 3px; background: var(--futa);
                   animation: vach-cho 1.2s ease-in-out infinite; }
@keyframes vach-cho { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .vach-cho::after { animation: none; left: 30%; } }
.man-cho.loi p { color: var(--xau); }
.man-cho.loi .vach-cho { display: none; }
.dang-nhap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--nen); }
.dang-nhap-khung { width: min(390px, 100%); display: grid; gap: 8px; background: var(--mat); border: 1px solid var(--ke);
                   border-radius: 16px; padding: 34px 32px 26px; box-shadow: var(--bong); border-top: 4px solid var(--ev); }
.logo { display: block; height: 30px; width: auto; }
.logo-lon { height: 42px; margin-bottom: 20px; }
.dang-nhap-khung h1 { font-size: 30px; }
.dang-nhap-khung .phu { margin-bottom: 14px; }
.dang-nhap-khung label { font-size: 13px; color: var(--muc-2); margin-top: 6px; }
.dang-nhap-khung .chinh-nut { margin-top: 16px; padding: 11px; font-size: 15px; }
.loi-dong { color: var(--xau); min-height: 1.5em; font-size: 13.5px; }

/* ------------------------------------------------------------ khung: thanh trái */
.ung-dung { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.thanh-trai { background: var(--mat); border-right: 1px solid var(--ke); padding: 18px 12px 12px; display: flex; flex-direction: column;
              gap: 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.dau-trai { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 10px 8px; }
.thuong-hieu { display: inline-block; }
.nut-menu { display: none; }
#menu { display: flex; flex-direction: column; gap: 1px; }
.menu-nhom { font-size: 11.5px; font-weight: 500; color: var(--muc-3); margin: 12px 12px 4px; }
#menu .menu-nhom:first-child { margin-top: 0; }
#menu a { display: flex; align-items: center; gap: 11px; color: var(--muc-2); padding: 7px 12px; border-radius: var(--bo); font-size: 14px; font-weight: 500; }
#menu a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#menu a:hover { background: var(--mat-2); color: var(--muc); text-decoration: none; }
#menu a[aria-current=page] { background: var(--futa-nhat); color: var(--futa-dam); font-weight: 600; }
.nguoi-dung { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
              padding: 12px 8px 4px; border-top: 1px solid var(--ke); font-size: 12.5px; }
.chu-cai { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ev-nhat); color: var(--ev);
           font: 600 13px/1 var(--chu); }
.nd-chu { min-width: 0; }
.nd-chu p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ndEmail { color: var(--muc); font-weight: 500; }
.phien-ban { grid-column: 1 / -1; color: var(--muc-3); font-size: 11.5px; padding-top: 6px; }

/* ------------------------------------------------------------ khung: đầu trang */
.chinh { min-width: 0; }
.thanh-tren { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
              padding: 18px 32px; background: var(--mat); border-bottom: 1px solid var(--ke); position: sticky; top: 0; z-index: 10; }
.tieu-de { display: grid; gap: 5px; min-width: 0; }
.phu-de { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 13px; color: var(--muc-2); }
.dong-bo-nho { display: inline-flex; align-items: center; gap: 7px; }
.dong-bo-nho::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tot); box-shadow: 0 0 0 3px var(--futa-nhat); }
.dong-bo-nho.cu::before { background: var(--canh); box-shadow: 0 0 0 3px var(--nen-canh); }
.ky { position: relative; }
.nut-ky { display: inline-flex; align-items: center; gap: 9px; font: 500 13.5px/1 var(--chu); padding: 9px 12px; border-radius: var(--bo);
          border: 1px solid var(--ke-2); background: var(--mat); color: var(--muc); cursor: pointer; }
.nut-ky:hover { background: var(--mat-2); }
.nut-ky small { color: var(--muc-2); font-size: 12.5px; font-weight: 400; }
.nut-ky .mui { width: 15px; height: 15px; color: var(--muc-3); }
.bang-ky { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 300px; background: var(--mat); border: 1px solid var(--ke);
           border-radius: var(--bo-lon); box-shadow: 0 8px 24px rgba(19, 30, 24, .12); padding: 8px; display: grid; gap: 8px; }
.ky-nut { display: grid; gap: 1px; }
.ky-nut button { text-align: left; font: 500 13.5px/1 var(--chu); padding: 9px 10px; border: 0; border-radius: 6px; background: transparent;
                 color: var(--muc); cursor: pointer; }
.ky-nut button:hover { background: var(--mat-2); }
.ky-nut button[aria-pressed=true] { background: var(--futa-nhat); color: var(--futa-dam); font-weight: 600; }
.ky-tuy-chon { display: grid; gap: 7px; padding: 10px; border-top: 1px solid var(--ke); font-size: 12.5px; color: var(--muc-2); }
.ky-tuy-chon label { display: grid; gap: 4px; }
.ky-tuy-chon p { font-weight: 600; color: var(--muc); font-size: 13px; }
#noiDung { padding: 24px 32px 56px; max-width: 1480px; outline: none; }

/* ------------------------------------------------------------ đang tải */
.dang-tai { display: grid; gap: 14px; }
.dang-tai i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--mat-3) 0, var(--mat) 50%, var(--mat-3) 100%);
              background-size: 200% 100%; animation: nhap-nhay 1.4s ease-in-out infinite; }
.dang-tai i:nth-child(2) { height: 96px; border-radius: var(--bo-lon); }
.dang-tai i:nth-child(3) { height: 220px; border-radius: var(--bo-lon); }
.dang-tai i:nth-child(4) { width: 60%; }
@keyframes nhap-nhay { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ------------------------------------------------------------ thẻ, đầu khối */
.the { background: var(--mat); border: 1px solid var(--ke); border-radius: var(--bo-lon); box-shadow: var(--bong); padding: 18px 20px; min-width: 0; }
.dau-khoi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 30px 0 12px; }
.dau-khoi h2 { margin: 0; }
.the > .dau-khoi:first-child { margin-top: 0; }
h2 + .cuon, h2 + div > .cuon { margin-top: 0; }
.khoi { margin-top: 28px; }
h2 { margin: 30px 0 12px; }
.the h2 { margin-top: 0; }
.dieu-khien { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px; margin: 30px 0 12px; }
.dieu-khien h2 { margin: 0 auto 0 0; }   /* tên mục bên trái, nút và ô lọc gom sát nhau bên phải */
.dieu-khien label, .bo-loc label { font-size: 13px; color: var(--muc-2); display: inline-flex; gap: 7px; align-items: center; }

/* ------------------------------------------------------------ ô số liệu (KPI) */
.nhom-so { display: grid; gap: 22px; }
.nhom-so section { min-width: 0; }
.nhom-so h3 { display: flex; align-items: baseline; gap: 10px; height: 16px; margin-bottom: 10px; font-size: 13px; color: var(--muc); }
.nhom-so h3 span { font-size: 12px; font-weight: 400; color: var(--muc-3); }
/* (9.0) 4 cột bằng nhau, thẳng hàng giữa các hàng (màn hẹp 2 cột, điện thoại 1 cột); số tự co theo độ rộng ô (không cắt "…" mất số) */
.so-lieu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
@media (max-width: 1000px) { .so-lieu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .so-lieu { grid-template-columns: minmax(0, 1fr); } }
.so-lieu > div { position: relative; background: var(--mat); border: 1px solid var(--ke); border-radius: var(--bo-lon); box-shadow: var(--bong);
                 padding: 15px 16px 13px; min-width: 0; display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; container-type: inline-size; }
.so-lieu dt { font-size: 12.5px; color: var(--muc-2); line-height: 1.35; font-weight: 500; }
.so-lieu dd { margin: 8px 0 6px; font: 600 clamp(24px, 2.2vw, 30px)/1.1 var(--chu-so); font-size: clamp(17px, 10.5cqi, 30px);
              font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
@supports not (font-size: 1cqi) { .so-lieu dd { font-size: clamp(17px, 1.6vw, 26px); white-space: normal; overflow-wrap: anywhere; } }
.so-lieu .doi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--muc-2); min-height: 20px; }
.chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
        background: var(--mat-3); color: var(--muc-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip.tang { background: var(--futa-nhat); color: var(--tot); }
.chip.giam { background: var(--nen-loi); color: var(--xau); }
.duong-nho { display: block; width: 100%; height: 30px; margin-top: 10px; }
.duong-nho path { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.duong-nho .vung { stroke: none; opacity: .09; }
.chu-thich { margin-top: 10px; font-size: 12.5px; color: var(--muc-3); max-width: 120ch; }
details.cach-tinh { margin-top: 12px; font-size: 12.5px; color: var(--muc-2); }
details.cach-tinh summary { cursor: pointer; color: var(--muc-3); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details.cach-tinh summary::-webkit-details-marker { display: none; }
details.cach-tinh summary::before { content: "i"; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
                                   border: 1px solid var(--ke-2); font: 600 10px/1 var(--chu); color: var(--muc-2); }
details.cach-tinh[open] summary { color: var(--muc-2); }
details.cach-tinh p { margin-top: 6px; max-width: 120ch; line-height: 1.55; }

/* ------------------------------------------------------------ hệ thống trạm sạc lúc này + cần xử lý */
.hang-dau { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: stretch; margin-bottom: 26px; }
/* Cần xử lý: một thanh ngang gọn trên khung trạm, nhường cả cột phải cho hộp Thông báo */
.can-xu-ly { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; background: var(--mat); border: 1px solid var(--ke);
             border-radius: var(--bo-lon); box-shadow: var(--bong); padding: 6px 8px; margin-bottom: 16px; }
.can-xu-ly > span:first-child { font-size: 14px; font-weight: 600; color: var(--muc); padding: 0 12px 0 8px; margin-right: 2px;
                                border-right: 1px solid var(--ke); }
.can-xu-ly .viec { padding: 7px 10px; gap: 8px; }
.can-xu-ly .viec b { min-width: 0; font-size: 16px; }
/* Hộp Thông báo phủ đúng chiều cao khung trạm bên trái: không làm hàng cao thêm, không tràn */
.cot-tin { position: relative; min-height: 360px; min-width: 0; }
.cot-tin > .hop-tin { position: absolute; inset: 0; }
.hop-tin { display: flex; flex-direction: column; background: var(--mat); border: 1px solid var(--ke);
           border-radius: var(--bo-lon); box-shadow: var(--bong); padding: 16px 12px 12px; }
.dau-hop-tin { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 8px 10px; }
.dau-hop-tin span { font-size: 15px; font-weight: 600; color: var(--muc); }
.dau-hop-tin small { font-size: 12px; color: var(--muc-3); }
.dong-tin { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 0 4px 2px; }
.dong-tin .ngay-tin { align-self: center; font-size: 11.5px; color: var(--muc-2); background: var(--mat-2); border-radius: 999px; padding: 2px 10px; margin: 6px 0 2px; }
.dong-tin .tin { align-self: flex-start; max-width: 100%; background: var(--mat-2); border: 1px solid var(--ke); border-radius: 12px 12px 12px 4px; padding: 7px 10px 5px; }
.dong-tin .tin p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muc); white-space: pre-line; overflow-wrap: anywhere; }
.dong-tin .chan-tin { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 2px; }
.dong-tin .tin time { font-size: 11px; color: var(--muc-3); font-variant-numeric: tabular-nums; }
.xoa-tin, .xoa-het { border: 0; background: none; padding: 0; font: inherit; color: var(--muc-3); cursor: pointer; }
.xoa-tin { font-size: 11px; opacity: 0; }
.dong-tin .tin:hover .xoa-tin, .xoa-tin:focus-visible { opacity: 1; }
.xoa-tin:hover, .xoa-het:hover { color: var(--xau); text-decoration: underline; }
.xoa-tin:disabled, .xoa-het:disabled { opacity: .5; cursor: default; text-decoration: none; }
.xoa-het { font-size: 12px; padding: 2px 4px; }
@media (hover: none) { .xoa-tin { opacity: .85; } }
.dong-tin .trong { color: var(--muc-3); font-size: 13px; padding: 8px; margin: 0; }
/* thanh cuộn mảnh, bo tròn, cùng tông giao diện; không có nút mũi tên */
.viec { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: var(--bo); color: var(--muc); font-size: 13.5px; }
a.viec:hover { background: var(--mat-2); text-decoration: none; }
a.viec::after { content: "›"; margin-left: auto; color: var(--muc-3); font-size: 18px; line-height: 1; }
.viec b { font: 600 18px/1 var(--chu-so); min-width: 26px; font-variant-numeric: tabular-nums; }
.viec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muc-3); flex: none; }
.viec.loi::before { background: var(--tt-loi); }
.viec.mat::before { background: var(--tt-mat); }
.viec.hd::before { background: var(--ev); }
.viec.on { color: var(--tot); }
.viec.on::before { background: var(--tot); }
.bai-sac { background: var(--mat); border: 1px solid var(--ke); border-radius: var(--bo-lon); box-shadow: var(--bong); padding: 16px 18px 18px; min-width: 0; }
.bai-sac-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 20px; margin-bottom: 14px; }
.bai-sac h2 { margin: 0 0 3px; font-size: 15px; }
.chu-giai { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muc-2); }
.chu-giai span { display: inline-flex; align-items: center; gap: 6px; }
.chu-giai b { color: var(--muc); font-variant-numeric: tabular-nums; font-weight: 600; }
.o { display: inline-block; width: 11px; height: 17px; border-radius: 3px; background: var(--tt-khac); flex: none; }
.chu-giai .o { width: 9px; height: 13px; }
.o-sac { background: var(--tt-sac); }
.o-cam { background: var(--tt-cam); }
.o-ranh { background: var(--tt-ranh); }
.o-loi { background: var(--tt-loi); }
.o-mat { background: repeating-linear-gradient(135deg, var(--tt-mat) 0 2.5px, transparent 2.5px 5px); box-shadow: inset 0 0 0 1.5px var(--tt-mat); }
.o-ngung { background: var(--tt-ngung); }
.luoi-tram { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.hang-tram { border: 1px solid var(--ke); border-radius: 10px; padding: 11px 12px 12px; background: var(--mat-2); display: grid; gap: 8px; min-width: 0; }
.hang-tram.co-loi { border-color: color-mix(in srgb, var(--tt-loi) 40%, var(--ke)); }
.hang-tram a { color: var(--muc); font-weight: 600; font-size: 13.5px; }
.hang-tram a:hover { color: var(--futa); }
.hang-tram .phu { font-size: 12px; margin-top: 2px; }
.dau-o-tram { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dau-o-tram .san { font: 600 15px/1 var(--chu-so); font-variant-numeric: tabular-nums; color: var(--muc-2); white-space: nowrap; }
.cac-o { display: flex; flex-wrap: wrap; gap: 4px 3px; align-items: center; }
.tru-nhom { display: inline-flex; gap: 2px; padding: 2px; border-radius: 4px; background: var(--mat); border: 1px solid var(--ke); }
td .cac-o { gap: 2px; }
td .o { width: 10px; height: 15px; }
details.tram-thu { margin-top: 12px; }
details.tram-thu summary { cursor: pointer; font-size: 12.5px; color: var(--muc-2); }
details.tram-thu .luoi-tram { margin-top: 10px; }
.bai-sac.mot-tram .luoi-tram { grid-template-columns: 1fr; }
.bai-sac.mot-tram .hang-tram { background: transparent; border: 0; padding: 0; }

/* ------------------------------------------------------------ bảng */
.cuon { overflow-x: auto; border: 1px solid var(--ke); border-radius: var(--bo-lon); background: var(--mat); box-shadow: var(--bong); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--ke); vertical-align: middle; }
thead th { background: var(--mat-2); font-weight: 500; font-size: 12px; color: var(--muc-2); white-space: nowrap; padding-top: 10px; padding-bottom: 10px; }
tbody tr:last-child td { border-bottom: 0; }
th button { all: unset; cursor: pointer; }
th button:hover { color: var(--muc); }
th button:focus-visible { outline: 2px solid var(--ev); outline-offset: 2px; }
th[aria-sort] { color: var(--muc); font-weight: 600; }
th[aria-sort=descending] button::after { content: " ↓"; }
th[aria-sort=ascending] button::after { content: " ↑"; }
tr.bam { cursor: pointer; }
tr.bam:hover td { background: var(--mat-2); }
tr.tong td { font-weight: 600; background: var(--mat-2); border-top: 1px solid var(--ke-2); }
.cuon th:first-child, .cuon td:first-child { position: sticky; left: 0; z-index: 1; background: var(--mat); white-space: nowrap; }
.cuon thead th:first-child, .cuon tr.tong td:first-child, tr.bam:hover td:first-child { background: var(--mat-2); }
td a { font-weight: 500; }
.nhan { display: inline-block; font-size: 11px; line-height: 1.6; padding: 0 7px; border-radius: 99px; background: var(--mat-3); color: var(--muc-2);
        margin-left: 6px; font-weight: 500; vertical-align: 1px; }
.nhan-on { background: var(--futa-nhat); color: var(--tot); margin-left: 0; }
.chu-canh { color: var(--canh); font-weight: 600; }
/* (9.1) dòng trạng thái: luôn hiện, không gom vào "Cách tính" */
.trang-thai { margin-top: 10px; font-size: 13px; color: var(--muc-2); max-width: 120ch; line-height: 1.55; }
/* khung tiến trình việc gửi cho máy chủ (lấy bảng kê, tạo file và thư nháp) */
.tien-trinh { display: grid; gap: 10px; margin: 4px 0 14px; }
.tien-trinh .tt-viec { border: 1px solid var(--ke); border-radius: var(--bo); background: var(--mat); padding: 12px 14px; }
.tien-trinh .tt-dau { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tien-trinh .tt-ten { font-weight: 600; font-size: 13.5px; }
.tien-trinh .tt-gio { font-size: 12px; color: var(--muc-3); font-variant-numeric: tabular-nums; }
.tien-trinh .tt-buoc { margin: 6px 0 8px; font-size: 13px; color: var(--muc-2); }
.tien-trinh .tt-vach { position: relative; height: 6px; border-radius: 6px; background: var(--ke); overflow: hidden; }
.tien-trinh .tt-vach b { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--futa); transition: width .6s ease; }
.tien-trinh .tt-vach.cho b { width: 35%; animation: tt-cho 1.4s ease-in-out infinite; }
@keyframes tt-cho { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .tien-trinh .tt-vach.cho b { animation: none; left: 30%; } }
.tien-trinh .tt-xong { border-radius: var(--bo); padding: 11px 14px; font-size: 13.5px; background: var(--nen-tt); }
.tien-trinh .tt-xong.loi { background: var(--nen-loi); }
/* (10.7) nhãn trạng thái / việc trong hai bảng đối soát không ngắt dòng; cột lý do cắt gọn, rê chuột xem đủ */
#dsBangCan .nhan, #hvBang .nhan { white-space: nowrap; }
#hvBang .cat-chu { max-width: 14em; }
#hvBang .doi-nho, #hvBang td:first-child { white-space: nowrap; }
.cat-chu { display: inline-block; max-width: 18em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.nhan-canh { background: var(--nen-canh); color: var(--muc); margin-left: 0; }
/* Trang Pin, SOH và ODO: bảng lỗi ODO / xe bất thường không bị bóp dọc trên điện thoại (cuộn ngang, chữ chi tiết đủ rộng) */
#bangOdo td, #bangXeBt td { white-space: nowrap; }
#bangOdo .chi-tiet, #bangXeBt .chi-tiet { display: inline-block; min-width: 22em; max-width: 34em; white-space: normal; }
.thanh-do { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; width: 100%; }
.thanh-do i { display: inline-block; width: 56px; height: 5px; border-radius: 3px; background: var(--mat-3); position: relative; overflow: hidden; }
.thanh-do i b { position: absolute; inset: 0 auto 0 0; background: var(--futa); border-radius: 3px; }
.thanh-ghep { display: flex; height: 7px; min-width: 130px; border-radius: 4px; overflow: hidden; background: var(--mat-3); }
.thanh-ghep span { display: block; height: 100%; }
.doi-nho { display: block; font-size: 11.5px; color: var(--muc-3); font-weight: 400; margin-top: 1px; }

/* ------------------------------------------------------------ biểu đồ, thông báo */
.bieu-do { background: var(--mat); border: 1px solid var(--ke); border-radius: var(--bo-lon); box-shadow: var(--bong); padding: 14px 18px 12px; height: 320px; }
.the-bieu-do { background: var(--mat); border: 1px solid var(--ke); border-radius: var(--bo-lon); box-shadow: var(--bong); padding: 16px 18px 14px; }
.the-bieu-do .dau-khoi { margin: 0 0 8px; }
.the-bieu-do .ve { height: 290px; position: relative; }
.tab { display: inline-flex; background: var(--mat-3); border-radius: var(--bo); padding: 3px; gap: 2px; }
.tab button { font: 500 12.5px/1 var(--chu); border: 0; background: transparent; color: var(--muc-2); padding: 7px 11px; border-radius: 6px; cursor: pointer; }
.tab button[aria-pressed=true] { background: var(--mat); color: var(--muc); box-shadow: var(--bong); font-weight: 600; }
.thong-bao { border-radius: var(--bo); padding: 12px 16px; margin: 0 0 16px; font-size: 13.5px; border: 1px solid transparent; }
.thong-bao.loi { background: var(--nen-loi); }
.thong-bao.canh { background: var(--nen-canh); }
.thong-bao.tt { background: var(--nen-tt); }
.trong { padding: 32px; text-align: center; color: var(--muc-2); }
.quay-lai { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 13.5px; font-weight: 500; }
.quay-lai::before { content: "‹"; font-size: 18px; line-height: 1; }
.tieu-de-tram { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 18px; }

/* ------------------------------------------------------------ lọc, phân trang, biểu mẫu */
.bo-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.bo-loc input[type=search] { min-width: 250px; }
.loc-nhanh { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.loc-nhanh button { font: 500 12.5px/1 var(--chu); padding: 7px 12px; border-radius: 99px; border: 1px solid var(--ke-2); background: var(--mat); color: var(--muc-2); cursor: pointer; }
.loc-nhanh button[aria-pressed=true] { background: var(--muc); border-color: var(--muc); color: var(--mat); }
.phan-trang { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13.5px; color: var(--muc-2); }
.phan-trang div { display: flex; gap: 8px; }
.o-nhap { font-size: 13px; padding: 6px 9px; width: 120px; }
.o-nhap.so { width: 96px; text-align: right; }
.hang-nut { display: inline-flex; gap: 6px; align-items: center; }
.bieu-mau { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; background: var(--mat); border: 1px solid var(--ke); border-radius: var(--bo-lon); padding: 16px 18px; box-shadow: var(--bong); }
.bieu-mau label { display: grid; gap: 5px; font-size: 12.5px; color: var(--muc-2); }
.the-tep { display: grid; gap: 10px; background: var(--mat); border: 1.5px dashed var(--ke-2); border-radius: var(--bo-lon); padding: 24px; }

/* ------------------------------------------------------------ xu hướng */
.khung-nhiet { background: var(--mat); border: 1px solid var(--ke); border-radius: var(--bo-lon); padding: 18px; overflow-x: auto; box-shadow: var(--bong); }
.khung-nhiet > div { min-width: 660px; }
.nhiet { display: grid; grid-template-columns: 72px repeat(24, minmax(16px, 1fr)); gap: 2px; font-size: 11.5px; align-items: center; }
.nhiet .nhan-hang, .dai .nhan-hang { color: var(--muc-2); padding-right: 10px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nhiet .nhan-cot { color: var(--muc-3); text-align: center; font-variant-numeric: tabular-nums; }
.o-nhiet { height: 24px; border-radius: 3px; background: color-mix(in srgb, var(--ev) calc(var(--m) * 100%), var(--mat-2)); }
.dai { display: grid; grid-template-columns: 72px repeat(48, minmax(8px, 1fr)); gap: 1px; font-size: 11.5px; align-items: center; margin-top: 8px; }
.dai span.k { height: 12px; }
.k-cao_diem { background: var(--kh-cao); }
.k-binh_thuong { background: var(--kh-binh); }
.k-thap_diem { background: var(--kh-thap); }
.thanh-co-cau { display: flex; height: 14px; border-radius: 4px; overflow: hidden; margin: 8px 0 6px; }
.thanh-co-cau span { display: block; height: 100%; }
.nhan-dai { display: flex; gap: 8px 18px; font-size: 12.5px; color: var(--muc-2); margin-top: 12px; flex-wrap: wrap; }
.nhan-dai i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* ------------------------------------------------------------ màn hình nhỏ */
@media (max-width: 1180px) { .hang-dau { grid-template-columns: 1fr; } .cot-tin { min-height: 0; height: 420px; } }
@media (max-width: 960px) {
  .ung-dung { grid-template-columns: 1fr; }
  .thanh-trai { position: sticky; top: 0; z-index: 20; height: auto; padding: 10px 14px; gap: 0; border-right: 0; border-bottom: 1px solid var(--ke); overflow: visible; }
  .dau-trai { padding: 0; }
  .nut-menu { display: inline-block; }
  #menu, .nguoi-dung { display: none; }
  .thanh-trai.mo #menu { display: flex; padding: 10px 0 6px; max-height: 70vh; overflow-y: auto; }
  .thanh-trai.mo .nguoi-dung { display: grid; }
  .thanh-tren { position: static; padding: 14px 16px; }
  #noiDung { padding: 16px 16px 44px; }
  .bang-ky { right: auto; left: 0; }
  h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
td .duong-nho { width: 110px; height: 24px; margin: 0; }
.nhan-loi { background: var(--nen-loi); color: var(--xau); }

/* ------------------------------------------------------------ báo cáo Telegram */
.bc-luoi { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.bc-ben { display: grid; gap: 14px; }
.bc-ben h2 { margin: 0 0 8px; font-size: 15px; }
.tin-telegram { max-width: 640px; background: var(--mat); border: 1px solid var(--ke); border-radius: 14px 14px 14px 4px; box-shadow: var(--bong);
                padding: 12px 16px 14px; }
.tin-dau { font-size: 13px; font-weight: 600; color: var(--ev); margin-bottom: 6px; }
.tin-than { white-space: pre-wrap; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.tin-than b { font-weight: 700; }
.bc-dem { margin-top: 8px; }
.bc-nut { margin: 12px 0 8px; flex-wrap: wrap; }
.bc-form { display: grid; gap: 10px; }
.bc-form label { display: grid; gap: 5px; font-size: 12.5px; color: var(--muc-2); }
.bc-form label.bc-chon { display: flex; align-items: center; gap: 8px; color: var(--muc); font-size: 13.5px; }
.bc-form input[type=text], .bc-form input[type=time] { font: 400 14px/1.3 var(--chu); padding: 8px 11px; border: 1px solid var(--ke-2); border-radius: var(--bo); background: var(--mat); color: var(--muc); }
.bc-form .nut { justify-self: start; }
.bc-nhom-dau { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 600; margin-top: 14px; }
.bc-khach li small { color: var(--muc-3); font-size: 11.5px; }
.bc-khach { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; max-height: 260px; overflow-y: auto; font-size: 13.5px; }
.bc-khach li { display: flex; justify-content: space-between; gap: 12px; }
.bc-khach li span.phu { white-space: nowrap; font-size: 12px; }
.bc-on { color: var(--tot); }
.bc-loi { color: var(--xau); }
@media (max-width: 1100px) { .bc-luoi { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ đội xe: bảng gọn */
.bang-gon td { padding-top: 9px; padding-bottom: 9px; }
.bang-gon .cuon td:first-child { white-space: normal; }
.ten-dn { display: grid; gap: 2px; min-width: 200px; max-width: 380px; }
.ten-dn a { font-weight: 600; color: var(--muc); line-height: 1.35; }
.ten-dn a:hover { color: var(--futa); }
.ten-dn small { font-size: 12px; color: var(--muc-3); }
.pin-can { display: inline-grid; grid-template-columns: auto 84px; align-items: center; gap: 10px; }
.pin-can span { display: grid; text-align: right; line-height: 1.25; }
.pin-can small { font-size: 11px; color: var(--canh); font-weight: 500; white-space: nowrap; }
.pin-can i { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--mat-3); }
.pin-can em { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--futa); }
.pin-can.qua em { background: var(--canh); }
.pin-can u { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--muc-2); }
.dx-tim { display: inline-flex; gap: 8px; align-items: center; }
.dx-tim input { min-width: 220px; }
.bieu-do-cao { height: 380px; }

/* ------------------------------------------------------ Ô chọn, lịch, giờ */
select, .o-chon { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a958f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
input.o-ngay, input.o-gio { cursor: pointer; width: 138px; padding-right: 32px; background-repeat: no-repeat; background-position: right 10px center;
  font-variant-numeric: tabular-nums; caret-color: transparent; }
input.o-gio { width: 104px; }
input.o-ngay { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238a958f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
input.o-gio { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238a958f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.hop-chon { position: fixed; z-index: 80; background: var(--mat); color: var(--muc); border: 1px solid var(--ke-2); border-radius: var(--bo-lon);
  box-shadow: 0 12px 32px rgba(19, 30, 24, .16), 0 2px 6px rgba(19, 30, 24, .06); padding: 10px; font: 400 13px/1.3 var(--chu); }
.hop-chon button { font: inherit; color: inherit; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.hop-chon button:focus-visible { outline: 2px solid var(--futa); outline-offset: 1px; }
.lich { width: 276px; }
.lich-dau { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.lich-dau b { font-weight: 600; font-size: 13.5px; }
.lich-dau button { width: 32px; height: 32px; font-size: 20px; line-height: 1; color: var(--muc-2); }
.lich-dau button:hover, .lich-ngay button:hover:not([disabled]):not(.chon), .cot-gio button:hover:not(.chon) { background: var(--mat-3); }
.lich-thu, .lich-ngay { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.lich-thu span { font-size: 11px; font-weight: 600; color: var(--muc-3); padding: 4px 0 6px; }
.lich-ngay button { height: 34px; font-variant-numeric: tabular-nums; }
.lich-ngay button.hom-nay { box-shadow: inset 0 0 0 1.5px var(--futa); color: var(--futa); font-weight: 600; }
.lich-ngay button.chon { background: var(--futa); color: #fff; font-weight: 600; }
.lich-ngay button[disabled] { color: var(--muc-3); opacity: .45; cursor: default; }
.lich-chan { display: flex; justify-content: flex-end; min-height: 4px; }
.lich-chan button { margin-top: 6px; padding: 6px 10px; color: var(--futa); font-weight: 600; }
.lich-chan button:hover { background: var(--futa-nhat); }
.chon-gio { width: 176px; }
.gio-dau { display: grid; grid-template-columns: 1fr 1fr; font-size: 11px; font-weight: 600; color: var(--muc-3); text-align: center; padding-bottom: 6px; }
.gio-than { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cot-gio { display: flex; flex-direction: column; gap: 2px; max-height: 232px; overflow-y: auto; }
.cot-gio button { height: 32px; flex: none; font-variant-numeric: tabular-nums; }
.cot-gio button.chon { background: var(--futa); color: #fff; font-weight: 600; }
.cs-tong { margin: 2px 0 0; font-size: 13px; color: var(--muc-2); }
.cs-tong b { font: 600 15px var(--chu-so); color: var(--ev); }
.cs-tram { color: var(--ev); font-weight: 600; }
.ve.ve-cao { height: 340px; }

/* ------------------------------------------------------ Đồng hồ công suất (Tổng quan) */
/* Khung đồng hồ kéo đúng từ đỉnh hàng ô số liệu trên tới đáy hàng ô dưới: bỏ qua dòng tiêu đề nhóm (16px + 10px) */
.dau-tq { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 16px; align-items: stretch; }
.dong-ho { margin-top: 26px; background: var(--mat); border: 1px solid var(--ke); border-radius: var(--bo-lon); padding: 12px 14px;
  display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; }
.dong-ho h3 { align-self: flex-start; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muc-2); }
.dong-ho svg { width: 100%; max-width: 190px; height: auto; }
.dh-nen, .dh-cung { fill: none; stroke-width: 13; stroke-linecap: round; }
.dh-nen { stroke: var(--mat-3); }
.dh-cung { opacity: .9; }
.dh-vach { stroke: var(--muc-3); stroke-width: 1.4; }
.dh-nhan { font: 500 8.5px var(--chu-so); fill: var(--muc-3); }
.dh-kim { fill: var(--muc); }
.dh-truc { fill: var(--muc); stroke: var(--mat); stroke-width: 2; }
.dh-so { margin: 0; font: 600 28px/1.1 var(--chu-so); letter-spacing: -.01em; }
.dh-phu { margin: 4px 0 0; font-size: 13px; color: var(--muc-2); }
.dh-phu b { color: var(--ev); font-weight: 600; }
.dh-phu.nho { font-size: 11.5px; line-height: 1.35; color: var(--muc-3); }
@media (max-width: 1180px) { .dau-tq { grid-template-columns: 1fr; } .dong-ho { margin-top: 0; min-height: 0; flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
  .dong-ho svg { max-width: 170px; } .dong-ho h3 { width: 100%; } }

/* ------------------------------------------------------ Lưới hiệu suất theo giờ (Xu hướng) */
.khung-cuon { overflow-x: auto; margin-bottom: 8px; }
.luoi-hs { display: grid; grid-template-columns: 58px repeat(24, minmax(27px, 1fr)) 50px; gap: 3px; min-width: 820px; align-items: center; }
.luoi-tru { grid-template-columns: 92px repeat(24, minmax(27px, 1fr)) 54px; }
.luoi-hs .nhan-cot { font: 500 10.5px var(--chu-so); color: var(--muc-3); text-align: center; padding-bottom: 2px; }
.luoi-hs .nhan-hang { font-size: 12px; color: var(--muc-2); line-height: 1.15; }
.luoi-hs .nhan-hang b { display: block; font-weight: 600; color: var(--muc); font-size: 12.5px; }
.luoi-hs .nhan-hang small { display: block; font-size: 10.5px; color: var(--muc-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-hs { height: 26px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font: 600 10.5px var(--chu-so); }
.o-tb { height: 26px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font: 600 11px var(--chu-so);
  border: 1px solid var(--ke-2); color: var(--muc); }
.hs-0 { background: var(--mat-3); }
.hs-1 { background: #f3d9d6; color: #8d2b24; }
.hs-2 { background: #f5e6c3; color: #7a5410; }
.hs-3 { background: #b9e2c9; color: #185c37; }
.hs-4 { background: #5ccb8d; color: #0c3d22; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hs-1 { background: #6a2e2b; color: #f6d2ce; }
  :root:not([data-theme="light"]) .hs-2 { background: #6e5623; color: #f7e2b3; }
  :root:not([data-theme="light"]) .hs-3 { background: #2d6b4b; color: #d8f3e3; }
  :root:not([data-theme="light"]) .hs-4 { background: #5ccb8d; color: #0c3d22; } }
.luoi-hs .dai-gio { display: flex; height: 7px; border-radius: 2px; overflow: hidden; }
.luoi-hs .dai-gio i { flex: 1; }
.chu-giai-hs { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muc-2); margin: 4px 0 18px; }
.chu-giai-hs i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }

/* ------------------------------------------------------ Giới hạn công suất (Báo cáo Telegram) */
.gh-ds { display: grid; gap: 6px; margin: 8px 0 10px; }
.gh-dong { display: grid; grid-template-columns: minmax(0, 1fr) 96px 22px; gap: 8px; align-items: center; font-size: 13px; }
.gh-dong small { display: block; font-size: 11.5px; color: var(--muc-3); }
.gh-dong input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.gh-dong i { font-style: normal; font-size: 12px; color: var(--muc-3); }
.cs-tram.cs-gan-tai { color: var(--xau); }

/* ------------------------------------------------------ Người dùng */
.nd-vai p { margin: 4px 0; font-size: 13px; color: var(--muc-2); }
.nd-vai b { color: var(--muc); font-weight: 600; }
.bang-nd select, .bang-nd .o-chon { min-width: 150px; }
/* Ô chọn tự làm (js/chon-muc.js): <select> gốc ẩn, nút hiện giá trị, danh sách xổ cùng kiểu lịch */
select.chon-goc { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.o-chon { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; vertical-align: middle; }
.o-chon:disabled { opacity: .6; cursor: default; }
.hop-chon.ds-chon { list-style: none; margin: 0; padding: 4px; max-height: 300px; overflow-y: auto; font-size: 13.5px; }
.ds-chon li { padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.ds-chon li.dang { background: var(--mat-3); }
.ds-chon li.chon { background: var(--futa); color: #fff; font-weight: 600; }
.ds-chon li[aria-disabled="true"] { color: var(--muc-3); cursor: default; }

.bang-nd td { vertical-align: middle; }
.nd-nguy { margin-top: 24px; border-color: var(--xau); }
.nut-nguy { background: var(--xau); color: #fff; border-color: var(--xau); }
.nut-nguy:disabled { opacity: .5; cursor: default; }


/* Danh bạ đơn vị (trang Đối soát hoá đơn): form thêm / sửa */
.form-dv { border: 1px solid var(--ke); border-radius: var(--bo); background: var(--mat); padding: 14px 16px 16px; margin: 6px 0 14px; max-width: 880px; }
.form-dv h3 { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; }
.luoi-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.o-form { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muc-2); min-width: 0; }
.o-form.rong { grid-column: span 3; }
.o-form .o-nhap { width: 100%; font-size: 13.5px; }
.o-form small { color: var(--muc-3); font-size: 12px; }
.form-dv .thong-bao { margin: 12px 0 0; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hang-nut .nut-nguy { margin-left: auto; }
@media (max-width: 700px) { .luoi-form { grid-template-columns: 1fr; } .o-form.rong { grid-column: auto; } }