/* Không framework, không CDN: một trang quản trị chạy localhost mà gọi CDN thì
   vừa lộ dấu vết vừa hỏng khi mất mạng. Vì vậy cũng không tải font Be Vietnam Pro
   từ Google Fonts — máy có cài thì dùng, không thì Segoe UI (đủ dấu tiếng Việt).

   Màu theo chuẩn báo cáo LSR: ba nhóm không dùng lẫn — giao diện, trạng thái
   (tốt/xấu, ĐỎ phải hiếm), phân loại (project). Kho dữ liệu đa brand nên --primary
   là xám xanh trung tính, không mượn màu HAPAS hay MATEMADE.

   Tối giản: mỗi trang một điểm nhấn (`.khung.noi`), còn lại nền phẳng, chữ phụ xám,
   không gradient, không chữ hoa giãn cách. */
:root {
  --ground: #F5F6F8; --surface: #FFFFFF; --surface-2: #EEF0F3;
  --ink: #1C2430; --ink-2: #4A5463; --muted: #6F7988; --line: #DDE1E7;
  --primary: #33415C; --primary-soft: #E6E9EF; --on-primary: #FFFFFF;
  --c1: #1D5BD8; --c2: #E8702A; --c3: #6A4FD1; --c4: #0F8B7A; --c7: #5B6B7F;
  --good: #0F8B7A; --good-soft: #DCF1EE;
  --warn: #B7791F; --warn-soft: #F7EBD3;
  --bad: #C2413A; --bad-soft: #F8E0DE;
  --none: #9AA3AF;
  --shadow: 0 1px 2px rgba(20,28,40,.06), 0 6px 20px -14px rgba(20,28,40,.25);
  --link: #1D4F9C;
  /* tên cũ, giữ để template trước đợt này không phải sửa */
  --do: var(--bad); --vang: var(--warn); --xanh: var(--good); --vien: var(--line); --mo: var(--muted);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #12161C; --surface: #1A2029; --surface-2: #232B36;
    --ink: #E8ECF2; --ink-2: #BCC4D0; --muted: #8B95A3; --line: #2E3744;
    --primary: #C9D2E3; --primary-soft: #28324A; --on-primary: #12161C;
    --c1: #6E97EA; --c2: #F0955A; --c3: #A592EE; --c4: #3FC2AE; --c7: #94A3B8;
    --good: #3FC2AE; --good-soft: #15332F; --warn: #E3A948; --warn-soft: #3A2E17;
    --bad: #EF7A72; --bad-soft: #3D2020; --none: #6B7480;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
    --link: #8DB2F2;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #12161C; --surface: #1A2029; --surface-2: #232B36;
  --ink: #E8ECF2; --ink-2: #BCC4D0; --muted: #8B95A3; --line: #2E3744;
  --primary: #C9D2E3; --primary-soft: #28324A; --on-primary: #12161C;
  --c1: #6E97EA; --c2: #F0955A; --c3: #A592EE; --c4: #3FC2AE; --c7: #94A3B8;
  --good: #3FC2AE; --good-soft: #15332F; --warn: #E3A948; --warn-soft: #3A2E17;
  --bad: #EF7A72; --bad-soft: #3D2020; --none: #6B7480;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
  --link: #8DB2F2;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 14px/1.5 "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--ground);
  font-variant-numeric: tabular-nums;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; border-radius: 2px; }
code { background: var(--surface-2); padding: 0 .25rem; font-size: 12.5px; border-radius: 3px;
       font-family: Consolas, "Cascadia Mono", monospace; }
pre { background: var(--surface-2); padding: .6rem .75rem; overflow-x: auto; font-size: 12.5px;
      white-space: pre-wrap; word-break: break-word; border-radius: 6px; }
pre code { background: none; padding: 0; }
/* Tên bảng đầy đủ trong câu chữ dài hơn màn điện thoại: cho ngắt giữa chừng (trong bảng thì không,
   bảng đã có khung cuộn riêng). */
p code, li > code, summary code { overflow-wrap: anywhere; }
h1 { font-size: 20px; margin: 0; letter-spacing: -.01em; line-height: 1.3; }
h2 { font-size: 15px; margin: 0 0 .4rem; }
h3 { font-size: 13px; margin: 0 0 .3rem; color: var(--ink-2); }
summary { cursor: pointer; }

/* --- khung trang ------------------------------------------------------------------ */
/* Thanh điều hướng DỌC bên trái, đứng yên khi cuộn; nội dung chiếm phần còn lại. */
.khung-trang { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.ben {
  background: var(--surface); border-right: 1px solid var(--line);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; padding: 16px 10px 12px;
}
.ten-app { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink);
           padding: 0 8px 18px; font-size: 16px; line-height: 1.2; }
.ten-app:hover { text-decoration: none; }
.ten-app small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
/* Logo LSR là PNG nét tối trên nền trong suốt; giao diện tối thì đảo sang sáng. */
.logo { flex: none; display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo { filter: invert(1); } }
:root[data-theme="dark"] .logo { filter: invert(1); }

/* Nav hai nhóm (§9.4): XEM không gây tác dụng phụ, LÀM thì có. Ba tab kho dữ liệu là
   phần chính, chữ to; hai nhóm vận hành thu vào <details>, chỉ mở sẵn khi đang ở một
   trang của nhóm đó. Nhóm LÀM tách bằng HÌNH (vạch vàng bên trái), không chỉ bằng chữ,
   để mắt phân biệt được trước khi tay bấm. */
nav { display: flex; flex-direction: column; flex: 1; gap: 6px; }
nav .nhom { display: flex; flex-direction: column; gap: 1px; }
nav a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px;
        color: var(--ink-2); font-size: 13px; }
nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
nav a.dang-o { background: var(--primary-soft); color: var(--ink); font-weight: 600; }
nav a.tab { font-size: 14px; font-weight: 600; color: var(--ink); padding: 8px 10px; min-height: 38px;
            white-space: nowrap; }
nav a.tab svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor;
                stroke-width: 1.3; color: var(--ink-2); }
nav a.tab.dang-o svg { color: var(--ink); }
nav .chinh { margin-bottom: 10px; }

nav details.nhom-phu > summary { list-style: none; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px; color: var(--muted); font-size: 12.5px; user-select: none; }
nav details.nhom-phu > summary::-webkit-details-marker { display: none; }
nav details.nhom-phu > summary:hover { color: var(--ink); background: var(--surface-2); }
nav details.nhom-phu > summary::after { content: ""; margin-left: auto; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s; }
nav details.nhom-phu[open] > summary::after { transform: rotate(45deg); }
nav details.nhom-phu .ds { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 14px;
  padding-left: 6px; border-left: 1px solid var(--line); }
nav details.nhom-phu .ds a { padding: 5px 8px; font-size: 13px; }

/* Nhóm có tác dụng phụ: vạch vàng ở tiêu đề và dọc theo danh sách link. */
nav .lam { margin-top: 2px; }
nav .lam details.nhom-phu > summary { color: var(--warn); }
nav .lam details.nhom-phu > summary::before { content: ""; width: 3px; height: 12px; border-radius: 2px;
  background: var(--warn); }
nav .lam details.nhom-phu .ds { border-left: 2px solid var(--warn); }
nav .lam a.dang-o { background: var(--warn-soft); }
/* Người chỉ có quyền xem: nhóm Làm vẫn hiện (bấm vào sẽ 403) nhưng mờ đi. */
nav .lam[data-chi-xem] { opacity: .5; }

.chan-ben { margin-top: 12px; padding: 10px 8px 0; border-top: 1px solid var(--line);
            display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--muted); }
/* Người đăng nhập (partial `_nguoi.html`): email một dòng, vai chữ nhỏ mờ, Đăng xuất nhỏ. */
.nguoi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 12px;
         color: var(--ink-2); min-width: 0; }
.nguoi-ten { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
             color: var(--ink); font-weight: 500; }
.nguoi-vai { color: var(--muted); font-size: 11.5px; }
.nguoi-vai:empty { display: none; }
.nguoi-thoat { font-size: 11.5px; margin-left: auto; }
.doc-luc { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.nut-theme { font: inherit; font-size: 12px; background: none; border: 1px solid var(--line);
             color: var(--ink-2); border-radius: 999px; padding: 2px 10px; cursor: pointer; }

.noi-dung { min-width: 0; }
main { padding: 22px 28px; max-width: 1600px; }
/* Trang vận hành giữ khổ đọc 1100px; Overview, Data Map, Audit dùng cả bề ngang. */
body.hep main { max-width: 1100px; }
footer { padding: 4px 28px 24px; color: var(--muted); font-size: 12px; max-width: 1600px; }
footer details > summary { display: inline; }

/* Đợt 2 — dải tắt khẩn cấp. ĐỎ là đúng chỗ: đây là trạng thái mà mọi báo cáo sáng
   đều không đi, và mọi trang phải nói ra điều đó ngay dòng đầu. */
.khan-cap { background: var(--bad-soft); color: var(--bad); font-weight: 600;
            padding: .55rem 28px; border-bottom: 2px solid var(--bad); }
.khan-cap a { color: var(--bad); text-decoration: underline; }

/* --- thành phần dùng chung ---------------------------------------------------------- */
.dau-trang { display: flex; justify-content: space-between; align-items: baseline;
             gap: 6px 24px; flex-wrap: wrap; margin-bottom: 16px; }
.dau-trang .phu-de { color: var(--muted); font-size: 12.5px; margin: 2px 0 0; }
.dau-trang .phai { color: var(--muted); font-size: 12.5px; margin: 0; }

.yen { font-size: 15px; color: var(--good); margin: 0 0 1rem; font-weight: 600; }
.khi, .ke-tiep, .nguon { color: var(--muted); font-size: 12.5px; margin: .25rem 0; }
.tom-tat { margin: .3rem 0; }
.phu { margin-top: 1.6rem; }
.phu ul { margin: .3rem 0; padding-left: 1.2rem; }
h2.phu { margin-bottom: .5rem; }

/* Câu cảnh báo: vạch màu + nền nhạt, chữ vẫn màu mực để đọc được (chữ vàng trên nền
   trắng không đủ tương phản). */
p.do, p.vang, p.loi { padding: 6px 10px; border-left: 3px solid; border-radius: 0 4px 4px 0; color: var(--ink); }
p.do, p.loi { border-color: var(--bad); background: var(--bad-soft); }
p.vang { border-color: var(--warn); background: var(--warn-soft); }

/* Thẻ trạng thái kiểu cũ — còn dùng ở Tắt khẩn cấp và các hộp lỗi/cảnh báo khi sửa cấu hình. */
.the { display: grid; gap: 12px;
       grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.muc { border: 1px solid var(--line); border-left-width: 4px; border-radius: 6px;
       padding: .7rem .9rem; background: var(--surface); margin: 0 0 12px; }
.muc > :first-child { margin-top: 0; } .muc > :last-child { margin-bottom: 0; }
.muc.xanh { border-left-color: var(--good); }
.muc.vang { border-left-color: var(--warn); }
.muc.do   { border-left-color: var(--bad); }
.ly-do { margin: .2rem 0; font-weight: 600; color: var(--bad); }
.muc.vang .ly-do, td .ly-do.vang { color: var(--warn); }
td .ly-do.xanh { color: var(--good); }
td .ly-do { font-weight: 600; }

/* Ô tìm kiếm chiếm hết hàng, nút bên phải. */
form.tim { display: flex; gap: 8px; margin: 0 0 12px; }
form.tim input[type=search] { flex: 1; min-width: 0; }

/* Danh sách lệnh chạy tay: mô tả bên trái, cờ + nút bên phải. */
.luot.lenh li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 6px 20px;
                align-items: center; padding: .6rem .8rem; }
.luot.lenh form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; justify-content: flex-end; }
.luot.lenh .co-chon { margin: 0; }

/* Bộ lọc: hàng nút tròn, mục đang chọn tô nền. */
.loc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.loc a { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2);
         font-size: 13px; background: var(--surface); }
.loc a:hover { text-decoration: none; color: var(--ink); border-color: var(--ink-2); }
.loc .dang-chon { background: var(--primary-soft); color: var(--ink); font-weight: 600;
                  border-color: transparent; }

/* Danh sách lượt chạy / thay đổi: mỗi dòng gập được, vạch trái chỉ khi có chuyện. */
.luot { list-style: none; margin: 0; padding: 0; background: var(--surface);
        border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.luot li { border-bottom: 1px solid var(--line); padding: .4rem .7rem;
           border-left: 3px solid transparent; }
.luot li:last-child { border-bottom: 0; }
.luot li.do { border-left-color: var(--bad); }
.luot li.vang { border-left-color: var(--warn); }
.luot pre { margin: .5rem 0 .2rem; }
summary .khi { display: inline-block; min-width: 8.5em; margin: 0; }
/* `overflow-wrap: anywhere`: câu hỏi thật có URL Lark dài liền một mạch — không có chỗ
   ngắt thì nó đẩy cả trang tràn ngang trên màn hình hẹp. */
summary .tom-tat { color: var(--muted); margin-left: .4rem; overflow-wrap: anywhere; }
.dot { margin-bottom: 18px; }
.dot h2 { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }

.nhan { font-size: 11.5px; padding: 0 .45rem; border-radius: 999px; background: var(--surface-2);
        color: var(--ink-2); white-space: nowrap; font-weight: 500; }
.nhan.do { background: var(--bad-soft); color: var(--bad); }
.nhan.vang { background: var(--warn-soft); color: var(--warn); }
.nhan.tay { background: var(--primary-soft); color: var(--primary); }
.nhan.xanh { background: var(--good-soft); color: var(--good); }

/* Chấm trạng thái đứng đầu dòng (thay cho cả một thẻ màu). */
.den { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px;
       background: var(--none); vertical-align: 1px; flex: none; }
.den.xanh { background: var(--good); } .den.vang { background: var(--warn); } .den.do { background: var(--bad); }

/* Nút phải trông ra nút: nó là thứ gây tác dụng phụ, không được lẫn vào một đường link. */
form label { display: block; margin: .15rem 0; }
button { font: inherit; padding: .35rem .9rem; border: 1px solid var(--line); color: var(--ink);
         border-radius: 6px; background: var(--surface); cursor: pointer; }
button:hover { background: var(--surface-2); }
button.chinh { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
button.chinh:hover { opacity: .9; background: var(--primary); }
form + form { margin-left: .5rem; }
input[type=text], input[type=search], textarea { font: inherit; padding: .35rem .55rem;
         border: 1px solid var(--line); border-radius: 6px; max-width: 100%;
         background: var(--surface); color: var(--ink); }
textarea[name=hoi] { width: 100%; display: block; }
.co-chon { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 6px; }
.co-chon label { margin: 0; white-space: nowrap; }

table.cot { border-collapse: collapse; margin: .2rem 0 .6rem; font-size: 13.5px; }
table.cot th, table.cot td { border-bottom: 1px solid var(--line); padding: .35rem .6rem;
                             text-align: left; vertical-align: top; }
table.cot tr:last-child td { border-bottom: 0; }
table.cot th { color: var(--muted); font-weight: 600; font-size: 12px; white-space: nowrap; }
table.cot.rong { width: 100%; }
table.cot .so { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.cot tr.tong td { border-top: 1px solid var(--ink-2); }
table.cot td.hep { width: 1%; white-space: nowrap; }
.so-lon { font-size: 20px; font-weight: 600; margin: .1rem 0; font-variant-numeric: tabular-nums; }
/* Bảng rộng hơn màn hình thì cuộn TRONG khung của nó, không kéo cả trang tràn ngang. */
.cuon-ngang { overflow-x: auto; max-width: 100%; }

textarea.soan { width: 100%; min-height: 28rem; font: 13px/1.45 Consolas, "Cascadia Mono", monospace;
                padding: .5rem; tab-size: 2; }
pre.diff span { display: block; }
pre.diff .them { background: var(--good-soft); color: var(--good); }
pre.diff .bot  { background: var(--bad-soft); color: var(--bad); }
pre.diff .vung { color: var(--muted); }

/* Ghi chú dài (nguồn số liệu, cách tính) gập sẵn: ai cần thì mở. */
details.ghi-chu { color: var(--muted); font-size: 12.5px; margin: 14px 0 0; }
details.ghi-chu > summary { color: var(--muted); }
details.ghi-chu > summary:hover { color: var(--ink); }
details.ghi-chu p { margin: .3rem 0; }

/* Trang hỏi đáp trực tiếp (chat.py chèn các khối này khi chữ chảy về). */
.cau-hoi pre { background: var(--primary-soft); }
pre.tra-loi { background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; }
p.buoc { color: var(--muted); font-size: 12.5px; margin: .2rem 0; }
p.tong-ket { color: var(--ink-2); font-size: 12.5px; border-top: 1px solid var(--line); padding-top: 8px; }

/* --- Overview -------------------------------------------------------------------- */
.kpi { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
       border-radius: 8px; overflow: hidden; margin-bottom: 16px;
       grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi > div { background: var(--surface); padding: 12px 14px; min-width: 0; }
.kpi .nhan-kpi { color: var(--muted); font-size: 12px; }
.kpi .so-kpi { font-size: 24px; font-weight: 700; line-height: 1.2; margin: 2px 0; }
.kpi .phu-kpi { color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.kpi.ba { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi.bon { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.luoi { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.o-8 { grid-column: span 8; } .o-4 { grid-column: span 4; }
.o-6 { grid-column: span 6; } .o-12 { grid-column: span 12; }
.khung { background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
         padding: 14px 16px; min-width: 0; }
.khung.noi { box-shadow: var(--shadow); }
.khung .phu-de { color: var(--muted); font-size: 12px; margin: 0 0 10px; }
.khung > h2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.khung > h2 .chu-mo { font-size: 12px; font-weight: 400; }
/* Khung không viền: phần phụ đứng dưới điểm nhấn, chỉ có tiêu đề và vạch ngăn. */
.khung.phang { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0;
               padding: 14px 0 0; }

/* Câu kết luận có số, đặt ngay trên biểu đồ nó nói về. */
.ket-luan { margin: 0 0 12px; padding: 0; list-style: none; }
.ket-luan li { color: var(--ink-2); font-size: 13px; margin: 0 0 2px; }
.ket-luan li:first-child { color: var(--ink); font-size: 15px; font-weight: 600; }
/* tên cũ, giữ cho template khác lỡ dùng */
.nhan-xet { margin: 0 0 16px; padding: 0; list-style: none; }

svg.cot-ngay { width: 100%; height: auto; display: block; }
svg.cot-ngay .vach { stroke: var(--line); stroke-width: 1; }
svg.cot-ngay text { fill: var(--muted); font-size: 11px; }
svg.cot-ngay .s1 { fill: var(--c1); } svg.cot-ngay .s2 { fill: var(--c3); }
svg.cot-ngay .s3 { fill: var(--c2); }
svg.cot-ngay .chua-het { opacity: .4; }
svg.cot-ngay rect:hover { opacity: .8; }
.chu-giai { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.chu-giai i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px;
              vertical-align: -1px; }
.chu-giai .s1 { background: var(--c1); } .chu-giai .s2 { background: var(--c3); }
.chu-giai .mo { background: var(--c1); opacity: .4; }

/* Cần chú ý: mỗi mục một dòng tiêu đề có vạch màu; chi tiết gập vào <details>. */
.chu-y { list-style: none; margin: 0; padding: 0; }
.chu-y > li { padding: 6px 0 6px 10px; border-left: 3px solid var(--line); margin-bottom: 6px; }
.chu-y > li.do { border-left-color: var(--bad); }
.chu-y > li.vang { border-left-color: var(--warn); }
.chu-y .tieu-de { font-weight: 600; font-size: 13.5px; }
.chu-y > li.xam .tieu-de { font-weight: 500; color: var(--ink-2); }
.chu-y .chi-tiet { color: var(--ink-2); font-size: 12.5px; margin: 3px 0 0; }
.chu-y ul { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; }
.chu-y ul li { margin: 1px 0; overflow-wrap: anywhere; }
.chu-y details > summary { list-style: none; }
.chu-y details > summary::-webkit-details-marker { display: none; }
.chu-y details > summary::after { content: " +"; color: var(--muted); font-weight: 400; }
.chu-y details[open] > summary::after { content: " −"; }
/* Bảng top 5 + phần "thêm" gập: hai bảng chung độ rộng cột nên đọc như một. */
table.cot.co-dinh { table-layout: fixed; min-width: 420px; margin-bottom: 0; }
table.cot.co-dinh td:first-child { overflow-wrap: anywhere; }
table.cot.co-dinh .c-job { width: 5.5em; } table.cot.co-dinh .c-byte { width: 6.5em; }
table.cot.co-dinh .c-thanh { width: 9.5em; } table.cot.co-dinh .c-thanh-ngan { width: 4.5em; }
table.cot.co-dinh .c-gio { width: 9.5em; }
table.cot.co-dinh th { white-space: normal; }
details.them { margin-top: 4px; }
details.them > summary { color: var(--link); font-size: 12.5px; }

.thanh { position: relative; height: 8px; background: var(--surface-2); border-radius: 999px;
         min-width: 60px; }
.thanh > span { position: absolute; inset: 0 auto 0 0; background: var(--primary); border-radius: 999px; }
td.co-thanh { min-width: 110px; }
td.co-thanh .thanh { display: inline-block; width: calc(100% - 3.6em); vertical-align: middle; }
td.co-thanh .chu-mo { display: inline-block; width: 3.2em; text-align: right; font-size: 12px; }
.chu-mo { color: var(--muted); }
.cham { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.cham.p1 { background: var(--c1); } .cham.p2 { background: var(--c3); }

.trong { padding: 24px 28px; text-align: left; background: var(--surface); border: 1px dashed var(--line);
         border-radius: 8px; max-width: 760px; }
.trong > :first-child { margin-top: 0; }

/* Dùng chung với Audit Description (mo_ta.html): hàng công cụ lọc và đường dẫn vụn.
   CSS riêng của Data Map nằm ở `so-do.css`. */
.thanh-cu { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 10px; }
.duong-dan { font-size: 13px; color: var(--muted); }

/* --- Audit Description ------------------------------------------------------------- */
.tab-con { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line);
           margin: 0 0 16px; }
.tab-con a { padding: 8px 14px; color: var(--ink-2); border-bottom: 2px solid transparent;
             margin-bottom: -1px; font-weight: 600; font-size: 13.5px; }
.tab-con a:hover { color: var(--ink); text-decoration: none; }
.tab-con a.dang-o { color: var(--ink); border-bottom-color: var(--primary); }
.thanh-chong { display: flex; height: 10px; border-radius: 999px; overflow: hidden;
               background: var(--surface-2); }
.thanh-chong .dat { background: var(--good); }
.thanh-chong .can-sua { background: var(--warn); }
.thanh-chong .khong-dat { background: var(--bad); }
select { font: inherit; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 6px;
         background: var(--surface); color: var(--ink); }

/* --- màn hẹp --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi.bon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-8, .o-4, .o-6 { grid-column: span 12; }
}
/* Thanh dọc thành khối trên cùng: ba tab chính một hàng, hai nhóm vận hành là hai nút
   gập bên dưới, mở ra thì danh sách tràn hết bề ngang. */
@media (max-width: 860px) {
  .khung-trang { display: block; }
  .ben { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line);
         padding: 12px 16px 10px; }
  .ten-app { padding: 0 0 10px; }
  nav { flex: none; flex-direction: row; flex-wrap: wrap; gap: 4px 6px; align-items: flex-start;
        align-content: flex-start; }
  nav .xem, nav .lam { display: contents; }
  nav .chinh { flex-direction: row; flex-wrap: wrap; gap: 2px 4px; width: 100%; margin: 0 0 4px; }
  nav a.tab { padding: 6px 10px; }
  nav details.nhom-phu > summary { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
                              min-height: 32px; }
  nav details.nhom-phu[open] { flex-basis: 100%; }
  nav details.nhom-phu .ds { flex-direction: row; flex-wrap: wrap; margin: 6px 0 4px 4px; }
  nav details.nhom-phu .ds a { min-height: 36px; }
  .chan-ben { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;
              margin-top: 8px; padding: 8px 0 0; }
  main { padding: 18px 20px; }
  footer { padding: 4px 20px 20px; }
  .khan-cap { padding: .55rem 20px; }
}
@media (max-width: 640px) {
  main { padding: 16px; }
  footer { padding: 4px 16px 16px; }
  .khan-cap { padding: .55rem 16px; }
  .kpi, .kpi.ba, .kpi.bon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .luot.lenh li { grid-template-columns: minmax(0, 1fr); }
  .luot.lenh form { justify-content: flex-start; }
  .kpi .so-kpi { font-size: 21px; }
  /* Ba tab chính đứng gọn một hàng: bỏ icon trên điện thoại. */
  nav a.tab { padding: 6px 8px; }
  nav a.tab svg { display: none; }
  .thanh-cu input[type=search] { width: 100%; }
  summary .khi { min-width: 0; margin-right: .3rem; }
  form + form { margin-left: 0; margin-top: .5rem; }
  /* Bảng nhiều cột trên điện thoại: chữ nhỏ lại một chút, vẫn cuộn trong khung. */
  table.cot { font-size: 12.5px; }
  table.cot th, table.cot td { padding: .3rem .45rem; }
}
@media (prefers-reduced-motion: reduce) {
  nav details.nhom-phu > summary::after { transition: none; }
}

/* --- Auditor: một nhóm cho 4 tính năng Scope 1 (2026-10-22) --- */
nav details.nhom-auditor > summary { list-style: none; cursor: pointer; display: flex;
  align-items: center; gap: 10px; }
nav details.nhom-auditor > summary::-webkit-details-marker { display: none; }
nav details.nhom-auditor > summary::after { content: ""; margin-left: auto; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s; opacity: .6; }
nav details.nhom-auditor[open] > summary::after { transform: rotate(45deg); }
nav details.nhom-auditor > summary.tab { font-size: 14px; font-weight: 600; color: var(--ink);
  padding: 8px 10px; min-height: 38px; border-radius: 6px; }
nav details.nhom-auditor > summary.tab:hover { background: var(--surface-2); }
nav details.nhom-auditor > summary svg { width: 16px; height: 16px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
nav details.nhom-auditor .ds { display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 6px 14px; padding-left: 6px; border-left: 1px solid var(--line); }
nav details.nhom-auditor .ds a { padding: 5px 8px; font-size: 13px; }
nav .so-tn { display: inline-flex; width: 16px; height: 16px; align-items: center;
  justify-content: center; border-radius: 4px; font-size: 10.5px; font-weight: 700;
  background: var(--surface-2); color: var(--muted); flex: none; }
nav a.dang-o .so-tn { background: var(--primary); color: var(--on-primary); }
nav .nhom-auditor .lam { display: flex; flex-direction: column; gap: 1px; margin: 6px 0 0;
  padding-left: 6px; border-left: 2px solid var(--warn); }
nav .nhom-auditor .lam .nhan-lam { font-size: 11px; color: var(--warn); padding: 2px 8px;
  text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 900px) {
  nav details.nhom-auditor[open] { flex-basis: 100%; }
  nav details.nhom-auditor .ds { flex-direction: row; flex-wrap: wrap; border-left: 0; }
  nav .nhom-auditor .lam { flex-direction: row; flex-wrap: wrap; flex-basis: 100%; }
  nav .nhom-auditor .lam .nhan-lam { flex-basis: 100%; }
}