/* Quản lý án hình sự – giao diện theo mockup đã duyệt. Toàn bộ tài nguyên nằm trên máy chủ. */
@font-face { font-family: "Be Vietnam Pro"; font-weight: 400; font-display: swap; src: url("../fonts/bvp-vietnamese-400.61f0b094762b.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 500; font-display: swap; src: url("../fonts/bvp-vietnamese-500.e114e58c7ce3.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 600; font-display: swap; src: url("../fonts/bvp-vietnamese-600.fddb4ea1f52e.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 700; font-display: swap; src: url("../fonts/bvp-vietnamese-700.ffbd2c81aac3.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 400; font-display: swap; src: url("../fonts/bvp-latin-ext-400.47c767e19287.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 500; font-display: swap; src: url("../fonts/bvp-latin-ext-500.a3fb70912068.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 600; font-display: swap; src: url("../fonts/bvp-latin-ext-600.6afe3cbf8a63.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 700; font-display: swap; src: url("../fonts/bvp-latin-ext-700.b46f3787b930.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 400; font-display: swap; src: url("../fonts/bvp-latin-400.ec4890cc91be.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 500; font-display: swap; src: url("../fonts/bvp-latin-500.a787f4dc9815.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 600; font-display: swap; src: url("../fonts/bvp-latin-600.54156380a29a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 700; font-display: swap; src: url("../fonts/bvp-latin-700.99df06229b59.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --xanh: #17325C; --xanh-dam: #0E2242; --xanh-2: #2F4E86; --xanh-3: #3E6DB5; --xanh-4: #8FB1DE;
  --nhat: #E8EEF7; --nhat-2: #F4F7FB; --nen: #F4F5F7; --the: #FFFFFF; --th: #F8F9FB;
  --chu: #1B2430; --chu-2: #3D4756; --mo: #5B6675; --mo-2: #9AA3AF;
  --vien: #E3E6EB; --vien-2: #C9CFD8; --vien-3: #EEF0F3;
  --do-n: #FDECEA; --do: #8F1D13; --do-2: #B42318; --do-3: #D92D20;
  --cam-n: #FEF3E2; --cam: #7A3A06; --cam-2: #B54708; --cam-vien: #F7D9A8;
  --la-n: #E7F6EE; --la: #05543A; --la-2: #067647; --la-vien: #A6DFC0;
  --tim-n: #F2EEFB; --tim: #53389E; --lam-n: #E7F0FF; --lam: #1D4ED8;
  --hong-o: #FFC9CF; --vang-o: #FFE9A8;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "Be Vietnam Pro", system-ui, "Segoe UI", Arial, sans-serif; font-size: 14px; color: var(--chu); background: var(--nen); line-height: 1.45; }
a { color: var(--xanh); text-decoration: none; }
a:hover { color: var(--xanh-dam); text-decoration: underline; }
button, input, select, textarea { font-family: inherit; font-size: 14px; }
h1 { margin: 0; font-size: 24px; font-weight: 600; }
h2 { margin: 0; font-size: 17px; font-weight: 600; }
h3 { margin: 0; font-size: 15px; font-weight: 600; }

/* ---------------- Khung trang ---------------- */
.dau { display: flex; align-items: center; gap: 16px; padding: 10px 24px; background: var(--xanh); color: #fff; position: sticky; top: 0; z-index: 20; min-height: 60px; }
.dau a { color: #fff; }
.dau .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 1 auto; }
.dau .logo:hover { text-decoration: none; }
.dau .logo-vks { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.dau .logo-chu { display: flex; flex-direction: column; line-height: 1.25; }
.dau .logo-chu b { font-weight: 600; font-size: 15px; }
.dau .logo-chu span { font-size: 12px; color: #C9D6EA; }
.dau .tim { flex: 1 1 320px; max-width: 520px; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px; padding: 0 12px; height: 40px; }
.dau .dieu-huong { display: flex; gap: 4px; margin-left: auto; flex: none; }
.dau .dieu-huong button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08);
  display: grid; place-items: center; cursor: pointer; padding: 0; }
.dau .dieu-huong button:hover { background: rgba(255,255,255,.2); }
.dau .dieu-huong button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.dau .tim input { border: 0; outline: none; flex: 1; background: transparent; color: var(--chu); min-width: 0; }
.dau .chuong { position: relative; width: 40px; height: 40px; border-radius: 8px; border: 1px solid #3A5683; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dau .chuong .so { position: absolute; top: -6px; right: -6px; background: var(--do-3); color: #fff; font-size: 11px; border-radius: 10px; padding: 1px 6px; }
.dau .nguoi { display: flex; flex-direction: column; text-align: right; line-height: 1.25; }
.dau .nguoi b { font-weight: 500; }
.dau .nguoi span { font-size: 12px; color: #C9D6EA; }
.dau .thoat { height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid #3A5683; background: transparent; color: #fff; cursor: pointer; }
.nut-menu { display: none; background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; padding: 0; }

.khung { display: flex; align-items: flex-start; min-height: calc(100vh - 60px); }
.ben { width: 288px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--vien); position: sticky; top: 60px; height: calc(100vh - 60px); display: flex; flex-direction: column; transition: width .18s ease; }
.ben-giua { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 12px 16px; }
.noi-dung { flex: 1; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.noi-dung > * { min-width: 0; }

/* Thanh bên: hành động nhanh */
.ben .nhanh { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 12px; border-bottom: 1px solid var(--vien); margin-bottom: 8px; }
.ben .nhanh .chinh { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 8px; background: var(--xanh); color: #fff; font-weight: 500; text-decoration: none; }
.ben .nhanh .phu { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 8px; background: var(--cam-n); color: var(--cam); font-size: 13px; text-decoration: none; }
.ben .pham-vi { margin: 0 4px 12px; padding: 10px 12px; border-radius: 8px; background: var(--nhat); color: var(--xanh); font-size: 13px; }
/* Thanh bên: module (cấp 1) */
.ben details.mod { border-bottom: 1px solid var(--vien-3); padding-bottom: 4px; margin-bottom: 4px; }
.ben summary { list-style: none; cursor: pointer; }
.ben summary::-webkit-details-marker { display: none; }
.ben .mod > summary, .ben a.mod-link { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 10px; border-radius: 8px; color: var(--chu); font-size: 15px; font-weight: 600; text-decoration: none; }
.ben .mod[open] > summary, .ben a.mod-link.dang { background: var(--nhat-2); }
.ben .mod > summary::after { content: "▸"; color: var(--mo); font-weight: 400; margin-left: auto; }
.ben .mod[open] > summary::after { content: "▾"; }
.ben .chip { width: 26px; height: 26px; border-radius: 7px; background: var(--nhat); color: var(--xanh); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.ben .mod[open] > summary .chip, .ben a.mod-link.dang .chip { background: var(--xanh); color: #fff; }
/* nhóm (cấp 2) */
.ben .nhom-ds { display: flex; flex-direction: column; padding: 4px 0 4px 8px; }
.ben details.nhom > summary, .ben a.nhom-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--chu); font-size: 14px; font-weight: 500; text-decoration: none; }
.ben details.nhom > summary:hover, .ben a.nhom-link:hover, .ben .mod > summary:hover { background: var(--nhat-2); text-decoration: none; }
.ben .so-nhom { width: 22px; height: 22px; border-radius: 6px; background: var(--vien-3); color: var(--chu-2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.ben .nhom.co-chon > summary { background: var(--nhat-2); }
.ben .nhom.co-chon > summary .so-nhom, .ben a.nhom-link.dang .so-nhom { background: var(--xanh); color: #fff; }
.ben .nhom > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--mo); border-bottom: 2px solid var(--mo); transform: rotate(-45deg); margin-left: 4px; }
.ben .nhom[open] > summary::after { transform: rotate(45deg); }
.ben .tong { font-size: 12px; color: var(--mo); margin-left: auto; font-weight: 400; }
.ben .cham-do { width: 8px; height: 8px; border-radius: 4px; background: var(--do-3); flex-shrink: 0; }
/* mục (cấp 3) */
.ben .muc-ds { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px 32px; }
.ben .muc-ds.sau { padding-left: 44px; }
.ben a.muc { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border-radius: 6px; color: var(--chu-2); font-size: 13px; text-decoration: none; }
.ben a.muc:hover { background: var(--nhat-2); text-decoration: none; }
.ben a.muc.dang { background: var(--nhat); color: var(--xanh); font-weight: 600; }
.ben a.muc span:first-child { flex: 1; }
.dem { font-size: 12px; border-radius: 10px; padding: 1px 8px; background: var(--vien-3); color: var(--chu-2); font-weight: 400; white-space: nowrap; }
.dem.do { background: var(--do-n); color: var(--do); }
.dem.cam { background: var(--cam-n); color: var(--cam); }
.dem.xanh { background: var(--nhat); color: var(--xanh); }
.dem.tim { background: var(--tim-n); color: var(--tim); }

/* ---------------- Thành phần chung ---------------- */
.tieu-de-trang { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tieu-de-trang .crumb { font-size: 13px; color: var(--mo); display: block; margin-bottom: 4px; }
.tieu-de-trang .thao-tac { display: flex; flex-wrap: wrap; gap: 8px; }
.the { background: var(--the); border: 1px solid var(--vien); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.the.gon { padding: 0; gap: 0; overflow: hidden; }
.the > .dau-the { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.ghi-chu { font-size: 12px; color: var(--mo); }
.nho { font-size: 12px; color: var(--mo); }
.dam { font-weight: 600; }
.luoi { display: grid; gap: 18px; }
.luoi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.luoi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.luoi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.luoi-ben { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.cot { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hang { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* KPI */
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi > a, .kpi > div { background: #fff; border: 1px solid var(--vien); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; color: var(--chu); text-decoration: none; }
.kpi > a:hover { border-color: var(--xanh-3); text-decoration: none; }
.kpi .nhan-kpi { font-size: 13px; color: var(--mo); }
.kpi .gt { font-size: 24px; font-weight: 600; line-height: 1.2; }
.kpi .phu { font-size: 12px; color: var(--mo); }
.kpi .gt.cam { color: var(--cam-2); } .kpi .gt.do { color: var(--do-2); } .kpi .gt.la { color: var(--la-2); } .kpi .gt.tim { color: var(--tim); }

/* Nút, chip */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--vien-2); background: #fff; color: var(--chu); cursor: pointer; text-decoration: none; font-weight: 400; white-space: nowrap; }
.nut:hover { border-color: var(--xanh); text-decoration: none; color: var(--chu); }
.nut.chinh { background: var(--xanh); border-color: var(--xanh); color: #fff; font-weight: 500; }
.nut.chinh:hover { background: var(--xanh-dam); color: #fff; }
.nut.vien { border-color: var(--xanh); color: var(--xanh); }
.nut.nhat { background: var(--nhat); border-color: var(--nhat); color: var(--xanh); font-weight: 500; }
.nut.do { color: var(--do-2); border-color: #F1B5B5; }
.nut.nho-n { height: 34px; padding: 0 12px; font-size: 13px; }
.chip-loc { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--vien-2); background: #fff; color: var(--chu); cursor: pointer; text-decoration: none; font-size: 13px; white-space: nowrap; }
.chip-loc:hover { border-color: var(--xanh); text-decoration: none; }
.chip-loc.dang { background: var(--nhat); border-color: var(--xanh); color: var(--xanh); font-weight: 500; }
.chip-loc.do { background: var(--do-n); border-color: var(--do-2); color: var(--do); }

/* Nhãn */
.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; background: var(--vien-3); color: var(--chu-2); white-space: nowrap; font-weight: 400; }
.tag.xanh { background: var(--nhat); color: var(--xanh); }
.tag.lam { background: var(--lam-n); color: var(--lam); }
.tag.do { background: var(--do-n); color: var(--do); }
.tag.cam { background: var(--cam-n); color: var(--cam); }
.tag.la { background: var(--la-n); color: var(--la); }
.tag.tim { background: var(--tim-n); color: var(--tim); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 12px; font-weight: 500; background: var(--vien-3); color: var(--chu-2); white-space: nowrap; }
.pill.do { background: var(--do-n); color: var(--do); }
.pill.cam { background: var(--cam-n); color: var(--cam); }
.pill.la { background: var(--la-n); color: var(--la); }
/* tương thích template cũ */
.nhan { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; background: var(--vien-3); color: var(--chu-2); white-space: nowrap; }
.nhan.dt { background: var(--lam-n); color: var(--lam); } .nhan.tt { background: var(--cam-n); color: var(--cam); }
.nhan.xx { background: var(--la-n); color: var(--la); } .nhan.kt { background: var(--vien-3); color: var(--chu-2); }
.nhan.tdc { background: var(--do-n); color: var(--do); } .nhan.tb { background: var(--nhat); color: var(--xanh); }
.nhan.vang { background: var(--cam-n); color: var(--cam); } .nhan.tim { background: var(--tim-n); color: var(--tim); }
.nhan.cam { background: var(--cam-n); color: var(--cam); }

/* Bảng */
table { border-collapse: collapse; width: 100%; }
.cuon-ngang { overflow-x: auto; }
.bang { font-size: 13px; }
.bang th { background: var(--th); color: var(--mo); text-align: left; font-weight: 500; padding: 12px 16px; white-space: nowrap; }
.bang td { padding: 12px 16px; vertical-align: top; border-top: 1px solid var(--vien-3); }
.bang.chat th { padding: 10px 12px; } .bang.chat td { padding: 9px 12px; }
.bang td.so, .bang th.so { text-align: right; white-space: nowrap; }
.bang tr:hover td { background: #FAFBFD; }
.bang td a.ten { font-weight: 500; }
.bang .phu { font-size: 12px; color: var(--mo); margin-top: 2px; }
.bang tr.qua td:first-child { box-shadow: inset 3px 0 0 var(--do-3); }
.bang tr.sap td:first-child { box-shadow: inset 3px 0 0 var(--cam-2); }
.han { white-space: nowrap; font-weight: 500; }
.han.qua { color: var(--do-2); } .han.sap { color: var(--cam-2); } .han.ok { color: var(--chu); }

/* Lọc, form */
.loc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.loc .nhan-loc { font-size: 13px; color: var(--mo); }
.loc input[type=text], .loc input[type=date], .loc select { width: auto; height: 34px; border-radius: 17px; padding: 0 12px; min-width: 150px; }
.o-nhap, .o-chon, input[type=text], input[type=date], input[type=number], input[type=email], input[type=password], input[type=file], select, textarea {
  border: 1px solid var(--vien-2); border-radius: 8px; padding: 0 12px; background: #fff; width: 100%; color: var(--chu); height: 42px; }
textarea { height: auto; padding: 10px 12px; resize: vertical; }
input[type=file] { padding: 8px 10px; height: auto; }
select[multiple] { height: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--nhat); border-color: var(--xanh-3); }
fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 10px; }
.form-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.form-luoi.ba { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-luoi .rong { grid-column: 1 / -1; }
.truong { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.truong > label { font-size: 13px; color: var(--chu-2); }
.truong .goi-y { font-size: 12px; color: var(--mo); }
.truong .loi { color: var(--do-2); font-size: 12px; }
.truong ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.truong ul li label { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--th); font-size: 13px; }
.thanh-nut { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; padding-top: 12px; border-top: 1px solid var(--vien-3); }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--vien-2); background: #fff; color: var(--chu); font-size: 13px; text-decoration: none; }
.tabs a:hover { border-color: var(--xanh); text-decoration: none; }
.tabs a.dang { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.tabs a.dang .dem { background: rgba(255,255,255,.2); color: #fff; }

/* Thông điệp */
.tin { padding: 12px 16px; border-radius: 10px; border: 1px solid; font-size: 13px; }
.tin.success { background: var(--la-n); border-color: var(--la-vien); color: var(--la); }
.tin.info { background: var(--nhat); border-color: #C7D6EE; color: var(--xanh); }
.tin.warning { background: var(--cam-n); border-color: var(--cam-vien); color: var(--cam); }
.tin.error { background: var(--do-n); border-color: #F1B5B5; color: var(--do); }
.hop-cam { padding: 12px 16px; border-radius: 10px; background: var(--cam-n); border: 1px solid var(--cam-vien); color: var(--cam); }
.hop-xanh { padding: 12px 16px; border-radius: 10px; background: var(--nhat); color: var(--xanh); font-size: 13px; }
.hop-lam { padding: 10px 12px; border-radius: 8px; background: var(--lam-n); color: var(--lam); font-size: 13px; }

/* Thanh đo (biểu đồ ngang) */
.thanh { display: grid; grid-template-columns: 200px 1fr 48px; gap: 10px; align-items: center; font-size: 13px; padding: 4px 6px; border-radius: 6px; color: var(--chu); text-decoration: none; }
a.thanh:hover { background: var(--nhat-2); text-decoration: none; }
.thanh .ray { display: block; height: 14px; background: var(--vien-3); border-radius: 3px; overflow: hidden; }
.thanh .ray i { display: block; height: 100%; border-radius: 3px; background: var(--xanh-3); }
.thanh b { text-align: right; font-weight: 500; }
.thanh.nho-t { grid-template-columns: 90px 1fr 32px; padding: 2px 0; }
.thanh.nho-t .ray { height: 10px; }

/* Tiến trình 5 giai đoạn */
.tien-trinh { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 8px; }
.tien-trinh li { display: flex; flex-direction: column; gap: 6px; }
.tien-trinh .vach { height: 6px; border-radius: 3px; background: var(--vien); }
.tien-trinh li.xong .vach { background: var(--xanh); }
.tien-trinh li.dang .vach { background: #D97706; }
.tien-trinh .ten-gd { font-weight: 500; }
.tien-trinh li.dang .ten-gd { font-weight: 600; }
.tien-trinh li.cho .ten-gd { color: var(--mo); }

/* Mục thu gọn (hồ sơ) */
details.muc-hs { background: #fff; border: 1px solid var(--vien); border-radius: 12px; }
details.muc-hs > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px; font-size: 15px; font-weight: 600; }
details.muc-hs > summary::-webkit-details-marker { display: none; }
details.muc-hs > summary .meta { font-size: 13px; font-weight: 400; color: var(--mo); margin-left: auto; }
details.muc-hs > summary::after { content: "▸"; color: var(--mo); font-weight: 400; }
details.muc-hs[open] > summary::after { content: "▾"; }
details.muc-hs > .than { padding: 0 20px 20px; }
.kv-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.kv-luoi > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--vien-3); }
.kv-luoi > div > span:first-child { font-size: 12px; color: var(--mo); }
.kv-luoi > div.rong { grid-column: 1 / -1; }

/* Ô hạn */
.o-han { flex: 0 1 300px; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--vien); background: var(--th); }
.o-han .nhan-han { font-size: 13px; }
.o-han .ngay-han { font-size: 26px; font-weight: 600; line-height: 1.2; }
.o-han.sap { background: var(--cam-n); border-color: var(--cam-vien); color: var(--cam); }
.o-han.qua { background: var(--do-n); border-color: #F1B5B5; color: var(--do); }
.o-han.ok { background: var(--la-n); border-color: var(--la-vien); color: var(--la); }
.o-han .nho { color: inherit; opacity: .85; }

/* ---------------- Tổng quan kiểu bảng Excel ---------------- */
.tq-dau { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--xanh-2); color: #fff; border-radius: 12px; }
.tq-dau .ma { font-size: 12px; font-weight: 600; align-self: flex-start; }
.tq-dau .sao { width: 46px; height: 46px; border-radius: 23px; background: #C8102E; color: #FFD700; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.tq-dau .giua { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.tq-dau .giua b { font-size: 19px; font-weight: 700; letter-spacing: .2px; }
.tq-dau .giua span { font-size: 15px; font-weight: 600; }
.tq-dau .phai { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.tq-dau .phai a { height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid #fff; color: #fff; display: flex; align-items: center; font-size: 12px; text-decoration: none; }
.tq-dau .phai span { font-size: 11px; color: #C9D6EA; }
.tq { display: flex; gap: 14px; align-items: flex-start; }
.tq-trai { flex: 0 0 340px; display: flex; flex-direction: column; gap: 10px; }
.tq-phai { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tq h2.giua { text-align: center; font-size: 15px; font-weight: 700; }
.tq-khung { border: 2px solid var(--do-3); background: #fff; padding: 10px; display: flex; flex-direction: column; gap: 12px; }
.tq-o { border: 1px solid var(--vien-2); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.tq-o .t { font-size: 15px; font-weight: 600; }
.cot-dung { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding-top: 12px; border-bottom: 1px solid var(--mo-2); }
.cot-dung a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; color: var(--chu); text-decoration: none; }
.cot-dung a span { font-size: 11px; font-weight: 600; }
.cot-dung a i { display: block; width: 70%; min-height: 3px; }
.cot-nhan { display: flex; gap: 10px; }
.cot-nhan span { flex: 1; font-size: 10px; text-align: center; color: var(--chu-2); }
.bd-dong { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 6px; color: var(--chu); text-decoration: none; }
.bd-dong:hover { text-decoration: none; background: var(--nhat-2); }
.bd-dong > span:first-child { font-size: 11px; text-align: right; color: var(--chu-2); }
.bd-dong .doi { display: flex; flex-direction: column; gap: 1px; }
.bd-dong .doi span { display: flex; align-items: center; gap: 4px; font-size: 10px; }
.bd-dong .doi i { display: block; height: 6px; min-width: 2px; }
.tq-chi-tieu .dau-xam { background: #D9D9D9; text-align: center; font-weight: 700; padding: 4px; }
.tq-chi-tieu .dong { display: flex; justify-content: space-between; padding: 3px 4px; font-weight: 600; font-size: 13px; }
.tq-chi-tieu a.ct { display: grid; grid-template-columns: 22px 1fr 84px; gap: 4px; padding: 2px 4px; color: var(--chu); text-decoration: none; font-size: 12px; }
.tq-chi-tieu a.ct:hover { background: var(--nhat-2); }
.chu-thich { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--chu-2); align-items: center; }
.chu-thich i { display: inline-block; width: 14px; height: 10px; margin-right: 4px; vertical-align: -1px; }
.bang-excel-khung { background: #fff; border: 1px solid var(--mo-2); overflow: auto; max-height: calc(100vh - 230px); }
.bang-excel { border-collapse: collapse; font-size: 12px; table-layout: fixed; width: 100%; min-width: 860px; }
.bang-excel thead { position: sticky; top: 0; z-index: 1; }
.bang-excel th { border: 1px solid var(--mo-2); padding: 4px; background: #E7E9EE; font-weight: 600; }
.bang-excel th.mo { font-weight: 500; }
.bang-excel td { border: 1px solid #D5D9E0; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bang-excel td.giua { text-align: center; padding: 3px 4px; }
.bang-excel td a { color: var(--chu); }
.bang-excel td.hong { background: var(--hong-o); }
.bang-excel td.hong a { color: var(--do-2); }
.bang-excel td.vang { background: var(--vang-o); }
.bang-excel td.tim { outline: 2px solid #7A3FD1; outline-offset: -2px; }

/* Danh sách cột (biến động) */
.cot-ds { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cot-ds .dau-cot { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 2px solid var(--xanh); }
.cot-ds a.dong { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--vien-3); color: var(--chu); text-decoration: none; font-size: 13px; }
.cot-ds a.dong:hover { background: var(--nhat-2); }
.cot-ds a.dong span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cot-thang { display: grid; grid-template-columns: repeat(12, minmax(44px, 1fr)); gap: 8px; align-items: end; min-width: 600px; height: 200px; border-bottom: 1px solid var(--vien-2); }
.cot-thang > div { display: flex; gap: 3px; align-items: flex-end; justify-content: center; height: 200px; }
.cot-thang > div > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cot-thang span { font-size: 11px; color: var(--mo); }
.cot-thang i { display: block; width: 14px; border-radius: 2px 2px 0 0; }
.nhan-thang { display: grid; grid-template-columns: repeat(12, minmax(44px, 1fr)); gap: 8px; min-width: 600px; padding-top: 6px; }
.nhan-thang span { text-align: center; font-size: 12px; color: var(--mo); }
.thanh-xep { display: flex; height: 22px; border-radius: 4px; overflow: hidden; gap: 2px; }
.thanh-xep span { display: block; }
.chu-giai { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.chu-giai i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.chu-giai span:nth-child(2) { flex: 1; }
.tien-do { height: 8px; background: var(--vien-3); border-radius: 4px; overflow: hidden; }
.tien-do i { display: block; height: 8px; background: var(--la-2); border-radius: 4px; }

/* Sơ đồ ô theo xã */
.so-do { display: grid; gap: 6px; }
.so-do a { border-radius: 8px; padding: 8px; min-height: 64px; display: flex; flex-direction: column; justify-content: space-between; color: var(--chu); border: 1px solid rgba(0,0,0,.05); text-decoration: none; }
.so-do a:hover { outline: 2px solid var(--xanh); text-decoration: none; }
.so-do .ten-xa { font-size: 12px; font-weight: 600; line-height: 1.2; }
.so-do .so-xa { font-size: 20px; font-weight: 700; text-align: right; }
.so-do .m0 { background: #F1F3F6; color: var(--mo-2); }
.so-do .m1 { background: #DBE7F8; } .so-do .m2 { background: #B6CFF1; } .so-do .m3 { background: var(--xanh-4); }
.so-do .m4 { background: var(--xanh-3); color: #fff; } .so-do .m5 { background: var(--xanh); color: #fff; }
.thang-mau { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; font-size: 11px; color: var(--mo); }
.thang-mau span[class^="m"] { width: 22px; height: 10px; border-radius: 2px; display: inline-block; }

/* Diễn biến (dạng bảng) */
.qd-huy td { opacity: .5; text-decoration: line-through; }
.auto { color: var(--xanh); }

/* Bảng tin */
.bai { background: #fff; border: 1px solid var(--vien); border-radius: 12px; padding: 14px 16px; display: flex; gap: 12px; }
.bai.ghim { border-color: var(--xanh); }
.ava { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 20px; background: var(--nhat); color: var(--xanh); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }
.bai .than { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.bai .dau-bai { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bai .dau-bai .gio { font-size: 12px; color: var(--mo); margin-left: auto; }
.bai .noi { white-space: pre-wrap; }
.bai img { max-width: 100%; max-height: 360px; border-radius: 8px; align-self: flex-start; }
.binh-luan { background: var(--th); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.chip-chon { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-chon label { cursor: pointer; }
.chip-chon input { display: none; }
.chip-chon span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--vien-2); background: #fff; font-size: 13px; }
.chip-chon input:checked + span { background: var(--xanh); border-color: var(--xanh); color: #fff; }

/* Đọc PDF */
.trang-giay { background: #fff; border: 1px solid var(--vien-2); box-shadow: 0 2px 10px rgba(0,0,0,.08); padding: 26px 36px; font-family: "Times New Roman", Tinos, serif; font-size: 15px; line-height: 1.55; white-space: pre-wrap; max-height: 760px; overflow: auto; color: #111; }
.trang-giay mark { background: #FFE08A; padding: 0 2px; }
.buoc { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.buoc li { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px; background: #fff; color: var(--mo-2); font-size: 13px; }
.buoc li.xong { background: var(--nhat); color: var(--xanh); }
.buoc li b { font-weight: 600; }
.vung-tha { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; border: 2px dashed var(--xanh-3); background: var(--nhat-2); color: var(--xanh); }
.vung-tha .pdf { width: 40px; height: 40px; border-radius: 8px; background: var(--xanh); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; }

/* Phân trang */
.phan-trang { display: flex; gap: 6px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--vien-3); }

/* Đăng nhập */
.trang-dn { min-height: 100vh; background: linear-gradient(180deg, var(--xanh) 0, var(--xanh) 330px, var(--nen) 330px); }
.dang-nhap { max-width: 420px; margin: 0 auto; padding: 40px 16px 32px; display: flex; flex-direction: column; gap: 18px; }
.dang-nhap .dau-dn { display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; gap: 6px; }
.dang-nhap .quoc-huy { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); margin-bottom: 8px; }
.dang-nhap .co-quan { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #F5D77A; font-weight: 600; }
.dang-nhap h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.dang-nhap .phu-de { font-size: 13px; color: #C9D6EA; }
.dang-nhap .hop-dn { padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 10px 30px rgba(15,35,70,.18); border-top: 3px solid #C8102E; }
.dang-nhap .hop-dn h2 { margin: 0; font-size: 20px; }
.dang-nhap .hop-dn .truong > span { font-size: 13px; color: var(--chu-2); }
.dang-nhap .hop-dn .nut.chinh { height: 44px; font-size: 15px; }
.dang-nhap .chan-dn { text-align: center; font-size: 12px; color: var(--chu-2); }

@media (max-width: 1200px) {
  .tq { flex-direction: column; }
  .tq-trai { flex: 1 1 auto; width: 100%; }
  .luoi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .luoi-ben { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .nut-menu { display: block; }
  .ben { position: fixed; left: -300px; top: 60px; z-index: 30; transition: left .2s; box-shadow: 4px 0 16px rgba(0,0,0,.12); }
  .ben.mo { left: 0; }
  .noi-dung { padding: 14px; }
  .luoi-2, .luoi-3, .luoi-4, .form-luoi, .form-luoi.ba, .kv-luoi { grid-template-columns: minmax(0, 1fr); }
  .dau { padding: 10px 14px; gap: 10px; }
  .dau .tim, .dau .nguoi, .dau .logo-chu span { display: none; }
  .thanh { grid-template-columns: 120px 1fr 40px; }
  .tq-dau .giua b { font-size: 14px; } .tq-dau .sao, .tq-dau .ma { display: none; }
  .tien-trinh { grid-template-columns: repeat(5, minmax(80px, 1fr)); overflow-x: auto; }
}
@media print {
  .dau, .ben, .loc, .thanh-nut, .nut, .tabs { display: none !important; }
  .noi-dung { padding: 0; } body { background: #fff; }
}

/* Menu thả xuống "Thao tác khác" */
details.menu-them { position: relative; }
details.menu-them > summary { list-style: none; }
details.menu-them > summary::-webkit-details-marker { display: none; }
details.menu-them .menu-ds { position: absolute; z-index: 15; top: 44px; left: 0; min-width: 420px; background: #fff; border: 1px solid var(--vien); border-radius: 10px;
  box-shadow: 0 6px 18px rgba(23,50,92,.12); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
details.menu-them .menu-ds a { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 38px; padding: 0 10px; border-radius: 6px; color: var(--chu); text-decoration: none; }
details.menu-them .menu-ds a:hover { background: var(--nhat); }
details.menu-them .menu-ds a .nho { white-space: nowrap; }
.bat-buoc { color: var(--do-3); font-weight: 600; }
.truong:has(.loi) input, .truong:has(.loi) select, .truong:has(.loi) textarea { border-color: var(--do-3); background: #FFF8F7; }

/* Thẻ (tab) trong hồ sơ – kiểu QLAHS */
.the-hs { background: #fff; border: 1px solid var(--vien); border-radius: 12px; overflow: hidden; }
/* Thanh thẻ hồ sơ: mỗi thẻ một màu nhận diện; “Giải quyết” tô đặc để nổi bật nhất */
.thanh-the { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; gap: 6px; border-bottom: 1px solid var(--vien); padding: 8px 10px; background: #f7f9fc; }
.thanh-the button { --m: #1e3a8a; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px 12px; font-size: 13.5px; white-space: nowrap; font-weight: 600; border-radius: 999px;
  color: var(--m); background: #fff; background: color-mix(in srgb, var(--m) 9%, #fff); border: 1px solid color-mix(in srgb, var(--m) 28%, #fff); transition: background .15s, color .15s, box-shadow .15s; }
.thanh-the button:hover { background: color-mix(in srgb, var(--m) 18%, #fff); }
.thanh-the button[data-the="thong-tin"] { --m: #1d4ed8; }
.thanh-the button[data-the="bi-can"] { --m: #7c3aed; }
.thanh-the button[data-the="bpnc"], .thanh-the button[data-the="tam-giu"] { --m: #c2410c; }
.thanh-the button[data-the="hoat-dong"] { --m: #0e7490; }
.thanh-the button[data-the="giai-quyet"] { --m: #15803d; background: var(--m); color: #fff; border-color: var(--m); box-shadow: 0 2px 6px rgba(21,128,61,.35); }
.thanh-the button[data-the="giai-quyet"]:hover { background: #166534; }
.thanh-the button[data-the="dien-bien"] { --m: #b45309; }
.thanh-the button[data-the="tai-lieu"] { --m: #475569; }
.thanh-the button.dang { background: var(--m); color: #fff; border-color: var(--m); box-shadow: 0 2px 8px color-mix(in srgb, var(--m) 40%, transparent); }
.thanh-the button[data-the="giai-quyet"].dang { box-shadow: 0 0 0 3px #bbf7d0, 0 2px 8px rgba(21,128,61,.4); }
.thanh-the .so-the { font-size: 12px; color: var(--do-2); font-weight: 700; }
.thanh-the button.dang .so-the, .thanh-the button[data-the="giai-quyet"] .so-the { color: #fff; }
.thanh-the .bieu-tuong { width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--m); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.thanh-the button.dang .bieu-tuong, .thanh-the button[data-the="giai-quyet"] .bieu-tuong { background: rgba(255,255,255,.22); color: #fff; }
.thanh-the button.gq { margin-left: auto; }
.o-the { display: none; padding: 18px 20px; flex-direction: column; gap: 14px; }
.o-the.dang { display: flex; }
.dau-o-the { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.chon-thao-tac { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 16px; border-radius: 10px; background: var(--nhat-2); border: 1px solid var(--vien); }
.chon-thao-tac select { flex: 1 1 360px; max-width: 620px; }
.chon-thao-tac.gq { background: #FFF8EF; border-color: var(--cam-vien); }
select.chon-nho { height: 34px; border-radius: 8px; padding: 0 8px; font-size: 13px; width: auto; max-width: 230px; }

/* ---- Trợ lý ảo ---- */
.hop-do { padding: 12px 16px; border-radius: 10px; background: var(--do-n); border: 1px solid var(--hong-o); color: var(--do); font-size: 13px; }
.tro-ly { gap: 10px; }
.hoi-thoai { display: flex; flex-direction: column; gap: 10px; min-height: 320px; max-height: calc(100vh - 330px); overflow-y: auto; padding: 4px 2px; }
.tn { max-width: 88%; padding: 10px 14px; border-radius: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.tn p { margin: 0 0 6px; } .tn p:last-child { margin-bottom: 0; } .tn ul { margin: 4px 0; padding-left: 20px; } .tn h4 { margin: 6px 0 4px; font-size: 14px; }
.tn.toi { align-self: flex-end; background: var(--xanh); color: #fff; } .tn.toi a { color: #fff; }
.tn.ai { align-self: flex-start; background: var(--nhat-2); border: 1px solid var(--vien); }
.tn.cho { color: var(--mo); font-style: italic; } .tn.loi { background: var(--do-n); color: var(--do); border-color: var(--hong-o); }
.tn .bang { margin: 6px 0; font-size: 13px; } .tn .ghi-chu { margin-top: 6px; display: block; }
.goi-y-dau { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.o-hoi { display: flex; gap: 8px; align-items: flex-end; }
.o-hoi textarea { flex: 1; min-height: 46px; resize: vertical; padding: 10px 12px; border: 1px solid var(--vien-2); border-radius: 10px; font: inherit; }
.nhan-dien { flex-direction: row; flex-wrap: wrap; gap: 18px; padding: 14px 18px; }
.nhan-dien > div { display: flex; flex-direction: column; gap: 2px; }
.nhan-dien .nd-gd b { color: var(--xanh); font-size: 16px; } .nhan-dien .nd-dh { flex: 1 1 320px; font-size: 13px; color: var(--chu-2); }
.hai-cot-ai { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.cot-goc { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 72px; }
.cot-de-xuat { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.khung-goc { width: 100%; height: 760px; border: 1px solid var(--vien-2); border-radius: 8px; background: #fff; }
.khung-goc.anh { height: auto; max-height: 900px; object-fit: contain; }
.ds-dich { display: flex; flex-direction: column; gap: 8px; }
.dich { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--vien); border-radius: 10px; cursor: pointer; }
.dich:has(input:checked) { border-color: var(--xanh-3); background: var(--nhat-2); box-shadow: 0 0 0 1px var(--xanh-3); }
.dich.trung { border-color: var(--hong-o); } .dich.moi { background: var(--th); }
.dich input { margin-top: 3px; } .dich-noi { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.dich .ly-do { display: flex; flex-wrap: wrap; gap: 4px; } .dich .ly-do .tag { white-space: normal; }
.dich .diem { font-weight: 700; color: var(--xanh); font-size: 13px; background: var(--nhat); border-radius: 8px; padding: 2px 8px; }
.luoi-truong { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 14px; }
.truong-ai { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.truong-ai .nhan { font-weight: 500; color: var(--chu-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.truong-ai .o-nhap, .truong-ai .o-chon { width: 100%; }
.truong-ai .trich { font-size: 12px; color: var(--mo); font-style: italic; }
.nguoi-ai { border: 1px solid var(--vien); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.nguoi-ai:not(:has(.chon-nguoi input:checked)) { opacity: .55; }
.chon-nguoi { font-weight: 600; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.mo-nhat { opacity: .5; }
.thanh-duyet { position: sticky; bottom: 0; background: var(--nen); padding: 12px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-top: 1px solid var(--vien); }
[hidden] { display: none !important; }
@media (max-width: 900px) { .cot-goc { position: static; } .khung-goc { height: 520px; } .tn { max-width: 100%; } }

/* ---- Tổng quan dạng bảng điều khiển ---- */
.kpi-tq { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.kpi-o { --m: var(--xanh); background: var(--the); border: 1px solid var(--vien); border-top: 4px solid var(--m); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px; color: var(--chu); text-decoration: none; }
.kpi-o:hover { text-decoration: none; box-shadow: 0 2px 10px rgba(23,50,92,.12); }
.kpi-o .l { font-size: 12px; color: var(--mo); } .kpi-o b { font-size: 28px; line-height: 1.15; color: var(--m); } .kpi-o .s { font-size: 12px; color: var(--chu-2); }
.luoi-gd { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.the-gd { --m: var(--xanh); background: var(--the); border: 1px solid var(--vien); border-radius: 14px; padding: 0 0 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.the-gd > * { margin: 0 14px; }
.the-gd > header { margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: color-mix(in srgb, var(--m) 10%, #fff); border-bottom: 1px solid color-mix(in srgb, var(--m) 25%, #fff); font-weight: 700; font-size: 15px; }
.the-gd > header a { color: var(--chu); } .the-gd > header .so { width: 26px; height: 26px; border-radius: 8px; background: var(--m); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.the-gd > header .nhan-nam { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--mo); }
.hien-trang { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hien-trang .lon { display: flex; flex-direction: column; color: var(--chu); text-decoration: none; flex: 1 1 140px; }
.hien-trang .lon b { font-size: 34px; line-height: 1.1; color: var(--m); } .hien-trang .lon span { font-size: 12px; color: var(--chu-2); }
.hien-trang .co { display: flex; gap: 8px; }
.co-o { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 6px 8px; border-radius: 10px; background: var(--th); border: 1px solid var(--vien); font-size: 11px; color: var(--mo); text-decoration: none; }
.co-o b { font-size: 20px; color: var(--chu-2); } .co-o.do { background: var(--do-n); border-color: var(--hong-o); color: var(--do); } .co-o.do b { color: var(--do-2); }
.co-o.vang { background: var(--cam-n); border-color: var(--cam-vien); color: var(--cam); } .co-o.vang b { color: var(--cam-2); }
.bon-o { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--vien); border-radius: 10px; overflow: hidden; }
.bon-o.ba { grid-template-columns: repeat(3, 1fr); }
.bon-o a { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; text-decoration: none; color: var(--chu); text-align: center; }
.bon-o a + a { border-left: 1px solid var(--vien); } .bon-o a:hover { background: var(--nhat-2); text-decoration: none; }
.bon-o b { font-size: 18px; } .bon-o span { font-size: 11px; color: var(--mo); line-height: 1.25; }
.ty-le-gq { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--chu-2); }
.ty-le-gq i, .ct-o .thanh { display: block; height: 8px; border-radius: 4px; background: var(--vien-3); overflow: hidden; }
.ty-le-gq em, .ct-o .thanh em { display: block; height: 100%; max-width: 100%; background: var(--m); border-radius: 4px; }
.hai-ds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tieu { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--mo); display: block; margin-bottom: 2px; }
.dong-so { display: flex; justify-content: space-between; gap: 6px; padding: 3px 0; font-size: 13px; color: var(--chu); text-decoration: none; border-bottom: 1px dashed var(--vien); }
.dong-so:hover { color: var(--xanh-3); text-decoration: none; } .dong-so b { font-weight: 600; }
.trong { font-size: 12px; color: var(--mo-2); }
.sap-han { display: flex; flex-direction: column; gap: 3px; }
.dong-han { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 4px 8px; border-radius: 6px; background: var(--cam-n); color: var(--chu); text-decoration: none; }
.dong-han.qua { background: var(--do-n); } .dong-han:hover { text-decoration: none; filter: brightness(.97); }
.dong-han .ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dong-han .ngay { flex-shrink: 0; font-weight: 600; color: var(--cam-2); }
.dong-han.qua .ngay { color: var(--do-2); }
.chi-tieu-the .dong-han { background: var(--th); } .chi-tieu-the .dong-han .ngay { color: var(--mo); font-weight: 500; }
.canh-bao-o { font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--th); color: var(--chu-2); text-decoration: none; }
.canh-bao-o.do { background: var(--do-n); color: var(--do); }
.chi-tieu-hai { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-o { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--vien); border-radius: 10px; }
.ct-o > b { font-size: 28px; color: var(--m); line-height: 1.1; } .ct-o small { font-size: 15px; color: var(--mo); }
.ct-o .phu { font-size: 12px; color: var(--chu-2); } .ct-o .tot { color: var(--la-2); } .ct-o .kem { color: var(--do-2); }
.tq-phai { width: 100%; }
@media (max-width: 520px) { .hai-ds, .chi-tieu-hai { grid-template-columns: 1fr; } .bon-o { grid-template-columns: repeat(2, 1fr); } .bon-o a:nth-child(3) { border-left: 0; } }

:is(.kpi-o, .the-gd).cam { --m: #C2610C; }
:is(.kpi-o, .the-gd).xanh { --m: var(--xanh-3); }
:is(.kpi-o, .the-gd).tim { --m: #6B46C1; }
:is(.kpi-o, .the-gd).la { --m: var(--la-2); }
:is(.kpi-o, .the-gd).do { --m: var(--do-2); }
:is(.kpi-o, .the-gd).vang { --m: #B7791F; }
:is(.kpi-o, .the-gd).xam { --m: #5B6675; }
:is(.kpi-o, .the-gd).hong { --m: #C0267A; }

/* ---- Tổng quan: thanh nhảy mục, phần phân tích ---- */
.nhay-tq { display: flex; flex-wrap: wrap; gap: 6px; }
.nhay-tq a { padding: 6px 12px; border-radius: 16px; background: var(--the); border: 1px solid var(--vien); font-size: 13px; color: var(--chu-2); text-decoration: none; }
.nhay-tq a:hover { border-color: var(--xanh-3); color: var(--xanh); }
.luoi-pt { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; scroll-margin-top: 70px; }
.luoi-pt .rong { grid-column: 1 / -1; }
#giai-doan, #toi-danh, #xu-huong, #dia-ban, #dang-giai-quyet { scroll-margin-top: 70px; }
.the-gd > header .nhan-nam.hang { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bang-gon { width: 100%; border-collapse: collapse; font-size: 13px; }
.bang-gon th { text-align: left; font-size: 11px; font-weight: 600; color: var(--mo); text-transform: uppercase; letter-spacing: .3px; padding: 6px 8px; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.bang-gon td { padding: 6px 8px; border-bottom: 1px solid var(--vien-3); }
.bang-gon .so { text-align: right; font-variant-numeric: tabular-nums; }
.bang-gon tr:hover td { background: var(--nhat-2); }
.bang-thang td.so { min-width: 46px; } .bang-thang td.tang::after { content: " ▲"; color: var(--do-2); font-size: 10px; }
.bang-thang td.giam::after { content: " ▼"; color: var(--la-2); font-size: 10px; }
@media (max-width: 520px) { .luoi-pt { grid-template-columns: 1fr; } }
.the-gd > .bang-gon { width: calc(100% - 28px); }
.bon-o.nam { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 520px) { .bon-o.nam { grid-template-columns: repeat(2, 1fr); } }
.tieu-nhom { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--xanh); text-transform: uppercase; letter-spacing: .3px; }
.dem-nguoi { margin-left: auto; margin-right: 10px; font-size: 13px; color: var(--chu-2); }
.dem-nguoi b { font-size: 16px; color: var(--xanh); }
@media (max-width: 1500px) { .thanh-the .bieu-tuong { display: none; } }

/* ---- Kỳ thống kê ---- */
/* Thêm kỳ thống kê: cột đủ rộng để đọc trọn nội dung ô chọn */
.tao-ky { display: grid; grid-template-columns: minmax(230px, 1.3fr) minmax(300px, 1.6fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(250px, 1.2fr);
  gap: 12px 16px; align-items: end; }
.tao-ky .truong { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: var(--chu-2); min-width: 0; }
.tao-ky .rong { grid-column: 1 / -1; }
.tao-ky input, .tao-ky select { height: 42px; width: 100%; font-size: 14.5px; padding: 0 10px; }
.tao-ky .thang-ky select { min-width: 130px; }
.tao-ky .thang-ky input { max-width: 100px; }
@media (max-width: 1400px) { .tao-ky { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .tao-ky { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tao-ky { grid-template-columns: 1fr; } }
tr.dong-thang td { background: var(--nhat-2); }
.trang-thai-ky { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; }
.tab-bieu { display: flex; flex-wrap: wrap; gap: 6px; }
.tab-bieu a { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--vien); background: var(--the); color: var(--chu); text-decoration: none; font-weight: 600; font-size: 13px; }
.tab-bieu a span { font-weight: 400; font-size: 11px; color: var(--mo); }
.tab-bieu a.dang { background: var(--xanh); color: #fff; border-color: var(--xanh); } .tab-bieu a.dang span { color: #C9D6EA; }
.bang-ky td { vertical-align: top; }
.bang-ky tr.chua td { color: var(--mo); } .bang-ky tr.kk td { background: #FFFBEA; }
.o-kk { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.o-kk input { height: 32px; font-size: 13px; padding: 0 8px; border: 1px solid var(--vien-2); border-radius: 6px; }
.o-kk input:first-child { width: 80px; }
details.dg summary { cursor: pointer; color: var(--xanh-3); font-size: 13px; }
details.dg .bang-gon { margin-top: 6px; font-size: 12px; }

/* ---- Dấu ? hướng dẫn sau nhãn ô nhập ---- */
.form-don { max-width: 980px; }
.form-don > .cot { display: flex; flex-direction: column; gap: 16px; }
button.hoi { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 6px;
  border-radius: 50%; border: 1px solid var(--vien-2); background: var(--nhat-2); color: var(--xanh-3); font-size: 11px; font-weight: 700;
  line-height: 1; cursor: help; padding: 0; vertical-align: 1px; }
button.hoi:hover, button.hoi:focus-visible { background: var(--xanh-3); color: #fff; border-color: var(--xanh-3); outline: none; }
button.hoi::after { content: attr(data-hd); position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 30;
  width: max-content; max-width: 300px; padding: 8px 10px; border-radius: 8px; background: var(--chu); color: #fff; font-size: 12.5px;
  font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; box-shadow: 0 6px 18px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; pointer-events: none; }
button.hoi:hover::after, button.hoi:focus-visible::after, button.hoi.mo::after { opacity: 1; visibility: visible; }
.truong.rong button.hoi::after { left: 0; transform: none; }
.truong textarea#id_noi_dung { height: auto; min-height: 170px; resize: vertical; line-height: 1.5; }
button.hoi:hover, button.hoi:focus-visible, button.hoi.mo { z-index: 40; }

/* ---- Tìm kiếm nâng cao ---- */
.tim-nc { flex-basis: 100%; width: 100%; margin-top: 6px; padding: 14px 16px; border: 1px solid var(--vien); border-radius: 12px; background: var(--the);
  display: flex; flex-direction: column; gap: 12px; }
.tim-nc[hidden] { display: none; }
.tim-nc-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.tim-nc-luoi > label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--chu-2); }
.tim-nc-luoi input, .tim-nc-luoi select { height: 38px; width: 100%; min-width: 0 !important; }
.tim-nc .tu-den { display: flex; gap: 6px; } .tim-nc .tu-den input { flex: 1; padding: 0 6px; }
.tim-nc .tick { display: flex; flex-direction: column; gap: 6px; justify-content: center; font-size: 13px; }
.tim-nc .tick label { display: flex; gap: 6px; align-items: center; }
.tim-nc .tick input { width: auto; height: auto; }
form.loc { flex-wrap: wrap; }
.bang-cd td { vertical-align: top; font-size: 13px; }
.bang-cd .o-chon-nho { display: table-cell; } .bang-cd .o-chon-nho label { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; margin-bottom: 3px; }
.bang-cd select, .bang-cd input[name^="gc-"] { height: 34px; font-size: 13px; max-width: 230px; }
.bang-cd tr.kk td { background: #FFFBEA; }
.bang-cd { min-width: 1150px; } .bang-cd td:first-child { min-width: 220px; } .bang-cd .o-chon-nho { min-width: 230px; }

.o-tick ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px; font-size: 13px; }
.o-tick label { display: flex; gap: 6px; align-items: center; }
table.tv input, table.tv select { height: 36px; width: 100%; }

.o-tick > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px; font-size: 13px; max-height: 260px; overflow-y: auto; padding: 8px; border: 1px solid var(--vien); border-radius: 8px; }
.o-tick > div > div label { display: flex; gap: 6px; align-items: center; }

/* ---- Sơ đồ địa giới 14 xã ---- */
.ban-do-xa { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.bd-hinh svg { width: 100%; height: auto; max-height: 720px; display: block; }
.bd-xa path { stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; cursor: pointer; transition: filter .12s; }
.bd-xa:hover path, .bd-xa:focus path { filter: brightness(.93); outline: none; }
.bd-xa.chon path { stroke: var(--do-2); stroke-width: 5; }
.bd-xa.m0 path { fill: #EEF1F5; } .bd-xa.m1 path { fill: #DBE7F8; } .bd-xa.m2 path { fill: #B6CFF1; }
.bd-xa.m3 path { fill: #86ADE6; } .bd-xa.m4 path { fill: #4F83CF; } .bd-xa.m5 path { fill: #1F4F99; }
.bd-nhan .t { font-size: 19px; font-weight: 600; fill: var(--chu); paint-order: stroke; stroke: rgba(255,255,255,.75); stroke-width: 3px; }
.bd-nhan .s { font-size: 30px; font-weight: 700; fill: var(--chu); paint-order: stroke; stroke: rgba(255,255,255,.75); stroke-width: 3px; }
.bd-nhan.m4 .t, .bd-nhan.m4 .s, .bd-nhan.m5 .t, .bd-nhan.m5 .s { fill: #fff; stroke: rgba(0,0,0,.25); }
.thang-mau span.m1 { background: #DBE7F8; } .thang-mau span.m2 { background: #B6CFF1; } .thang-mau span.m3 { background: #86ADE6; }
.thang-mau span.m4 { background: #4F83CF; } .thang-mau span.m5 { background: #1F4F99; }
.nguon-bd { font-size: 11px; color: var(--mo-2); margin-top: 4px; }
.bd-thong-tin { border: 1px solid var(--vien); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; max-height: 720px; overflow-y: auto; }
.bd-thong-tin h3 { margin: 0; } .bd-thong-tin h4 { margin: 8px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; color: var(--mo); }
.bd-tom { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--vien); border-radius: 10px; overflow: hidden; }
.bd-tom div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; text-align: center; }
.bd-tom div + div { border-left: 1px solid var(--vien); } .bd-tom b { font-size: 20px; color: var(--xanh); } .bd-tom span { font-size: 11px; color: var(--mo); }
.bd-thon { border: 1px solid var(--vien); border-radius: 8px; padding: 6px 10px; }
.bd-thon summary { display: flex; justify-content: space-between; cursor: pointer; font-weight: 600; font-size: 13px; }
.bd-thon summary b { background: var(--cam-n); color: var(--cam-2); border-radius: 10px; padding: 0 8px; }
.bd-thon ul { margin: 6px 0 2px; padding-left: 18px; font-size: 13px; } .bd-thon li { margin-bottom: 3px; }
.bd-thon-hs { display: flex; flex-wrap: wrap; gap: 4px; }
.bd-goi-y { color: var(--mo); font-size: 13px; }
@media (max-width: 900px) { .ban-do-xa { grid-template-columns: 1fr; } }

/* ---- Khai thác số liệu: thẻ theo khâu ---- */
.tom-khai-thac { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.luoi-khau { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 14px; }
.the-khau { background: var(--the); border: 1px solid var(--vien); border-left: 4px solid var(--xanh-3); border-radius: 12px; padding: 0 0 8px; overflow: hidden; }
.the-khau.co-loi { border-color: var(--hong-o); border-left-color: var(--do-2); }
.the-khau > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; background: var(--nhat-2); border-bottom: 1px solid var(--vien); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .2px; }
.dong-kh { display: flex; align-items: center; gap: 10px; padding: 5px 14px; font-size: 13.5px; }
.dong-kh > span:first-child { flex: 1; min-width: 0; }
.dong-kh.muc-chinh { font-weight: 600; margin-top: 4px; }
.dong-kh.muc-con { padding-left: 32px; color: var(--chu-2); font-size: 13px; }
.dong-kh.muc-con > span:first-child::before { content: "→ "; color: var(--mo-2); }
.dong-kh.tong { background: var(--th); margin: 4px 0; border-top: 1px dashed var(--vien); border-bottom: 1px dashed var(--vien); font-weight: 600; }
.dong-kh.nhan-gq { border-top: 1px solid var(--vien-3); padding-top: 8px; }
.dong-kh.nhan-con { background: color-mix(in srgb, var(--xanh-3) 8%, #fff); font-weight: 700; }
a.o-so { display: inline-flex; align-items: baseline; gap: 4px; min-width: 124px; justify-content: flex-end; padding: 4px 10px; border: 1px dashed var(--cam-vien); border-radius: 8px; background: #FFFCF5; color: var(--chu); text-decoration: none; font-variant-numeric: tabular-nums; }
a.o-so:hover { border-style: solid; border-color: var(--xanh-3); text-decoration: none; }
a.o-so.dang { background: var(--xanh); color: #fff; border-color: var(--xanh); } a.o-so.dang i { color: #C9D6EA; }
a.o-so.do b { color: var(--do-2); }
a.o-so b { font-size: 15px; } a.o-so i { font-style: normal; font-size: 11px; color: var(--mo); } a.o-so em { font-style: normal; color: var(--do-2); font-weight: 700; padding: 0 2px; }
.dong-kh .tag { white-space: nowrap; }
.kiem-tra { margin: 6px 14px 4px; font-size: 12.5px; }
.kiem-tra summary { cursor: pointer; color: var(--mo); }
.kiem-tra ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.kiem-tra li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 8px; border-radius: 6px; }
.kiem-tra li.ok { background: var(--la-n); color: var(--la); } .kiem-tra li.sai { background: var(--do-n); color: var(--do); font-weight: 600; }
@media (max-width: 520px) { .luoi-khau { grid-template-columns: 1fr; } a.o-so { min-width: 0; } }

.bang-gon tr.sai td { background: var(--do-n); }

/* ===================== Dashboard Tổng quan ===================== */
.db { display: flex; flex-direction: column; gap: 14px; --c-cam: #E08A1E; --c-do: #C8102E; --c-xanh: #2E6FD8; --c-tim: #7A3FD1; --c-la: #1F9D6B; --c-hong: #D44C9A; --c-xam: #5B6B84; }
.db-dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.db-dau h1 { margin: 0; font-size: 20px; color: var(--xanh); }
.db .nho, .ngan-ds .nho { font-size: 12px; color: var(--mo); }
.db-loc { background: var(--the); border: 1px solid var(--vien); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.db-loc .hang { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.db-loc .nhan { font-size: 12px; font-weight: 600; color: var(--mo); text-transform: uppercase; letter-spacing: .04em; min-width: 72px; }
.db-loc .nhom-chip, .db .nhom-chip { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.db-loc select { width: auto; max-width: 100%; min-width: 180px; }
.db-loc select, .db-loc input[type=date] { height: 34px; border: 1px solid var(--vien-2); border-radius: 8px; padding: 0 8px; font: inherit; background: #fff; }
.db-loc .o-ngay { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--chu-2); }
.db-loc .nut { height: 34px; }
.db-trang { display: flex; flex-direction: column; gap: 14px; }
.db-trang[hidden] { display: none; }
.db-o { background: var(--the); border: 1px solid var(--vien); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.db-o > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.db-o h2 { margin: 0; font-size: 15px; color: var(--chu); }
.db-o h3 { margin: 0 0 6px; font-size: 13px; color: var(--chu-2); }
.db-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.db-luoi.ba { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.db-luoi.bon { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.db button[data-ds], .db .gt { font: inherit; cursor: pointer; }
.db .trong { color: var(--mo-2); font-size: 13px; margin: 4px 0; }
.db .chu-do { color: var(--do-2); }

/* Thẻ chỉ số */
.db-kpi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.db-kpi.nho-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.db-kpi.nam-o { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.db .chi-so { --c: var(--c-xam); text-align: left; background: var(--the); border: 1px solid var(--vien); border-top: 4px solid var(--c); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; color: var(--chu); min-width: 0; }
.db button.chi-so:hover { box-shadow: 0 4px 14px rgba(23,50,92,.12); border-color: var(--c); }
.db .chi-so.cam { --c: var(--c-cam); } .db .chi-so.do { --c: var(--c-do); } .db .chi-so.xanh { --c: var(--c-xanh); } .db .chi-so.tim { --c: var(--c-tim); } .db .chi-so.la { --c: var(--c-la); } .db .chi-so.hong { --c: var(--c-hong); }
.db .chi-so .l { font-size: 12.5px; color: var(--chu-2); font-weight: 500; }
.db .chi-so .hang-gt { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.db .chi-so .hang-gt b { font-size: 30px; line-height: 1.1; font-weight: 700; color: var(--c); }
.db .chi-so .s { font-size: 12px; color: var(--mo); }
.db .chi-so .spark { width: 46%; max-width: 120px; height: 30px; }
.db .chi-so .spark polyline { fill: none; stroke: var(--c); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.db .bien { font-size: 11.5px; font-weight: 600; }
.db .bien.xau { color: var(--do-2); } .db .bien.tot { color: var(--la-2); } .db .bien.deu { color: var(--mo); font-weight: 500; }

/* Luồng giải quyết */
.db .luong { display: flex; align-items: stretch; overflow-x: auto; padding-bottom: 4px; }
.db .buoc { --c: var(--c-xam); flex: 1 1 0; flex-wrap: nowrap; min-width: 210px; border: 1px solid var(--vien); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--c); }
.db .buoc.cam { --c: var(--c-cam); } .db .buoc.xanh { --c: var(--c-xanh); } .db .buoc.tim { --c: var(--c-tim); } .db .buoc.la { --c: var(--c-la); }
.db .buoc .ten { font-weight: 600; color: var(--c); text-decoration: none; }
.db .buoc .bon { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.db .buoc .bon button { border: 0; background: var(--nhat-2); border-radius: 8px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; color: var(--chu); }
.db .buoc .bon button:hover { background: var(--nhat); }
.db .buoc .bon button.con { background: var(--c); color: #fff; }
.db .buoc .bon b { font-size: 17px; line-height: 1.2; }
.db .buoc .bon span { font-size: 11px; opacity: .85; }
.db .thanh-tl { display: block; height: 6px; border-radius: 3px; background: var(--vien-3); overflow: hidden; }
.db .thanh-tl > i { display: block; height: 100%; background: var(--c, var(--xanh-3)); border-radius: 3px; }
.db .mui-ten { flex: 0 0 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--mo); position: relative; }
.db .mui-ten::before { content: ""; position: absolute; left: 6px; right: 12px; top: 50%; border-top: 2px dashed var(--vien-2); }
.db .mui-ten::after { content: ""; position: absolute; right: 4px; top: calc(50% - 6px); border: 6px solid transparent; border-left-color: var(--vien-2); }
.db .mui-ten b { position: relative; background: var(--the); padding: 0 4px; font-size: 16px; color: var(--chu); margin-top: -26px; }
.db .mui-ten span { position: relative; font-size: 11px; background: var(--the); padding: 0 2px; margin-top: 18px; text-align: center; }
.db .tra-lai { margin: 10px 0 0; }
.db .sau-buoc { display: none; font-size: 12px; color: var(--chu-2); border-top: 1px dashed var(--vien); padding-top: 6px; }
.db-o:has(> .luong) { container-type: inline-size; }
@container (max-width: 1080px) {
  .db .luong { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible; }
  .db .luong .mui-ten { display: none; } .db .sau-buoc { display: block; } .db .buoc { min-width: 0; }
}

/* Cảnh báo, hiện trạng, chỉ tiêu */
.db .canh-bao { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.db .cb { --c: var(--c-xam); border: 1px solid var(--vien); border-left: 4px solid var(--c); border-radius: 8px; background: #fff; padding: 8px 10px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.db .cb b { font-size: 22px; color: var(--c); line-height: 1.2; } .db .cb span { font-size: 12px; color: var(--chu-2); }
.db .cb.do { --c: var(--c-do); } .db .cb.vang { --c: #B98900; } .db .cb.cam { --c: var(--c-cam); }
.db .cb.tat { opacity: .55; }
.db .hien-trang-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.db .hien-trang-4 a { --c: var(--c-xam); text-decoration: none; text-align: center; border-radius: 8px; padding: 8px 4px; background: var(--nhat-2); border-bottom: 3px solid var(--c); color: var(--chu); }
.db .hien-trang-4 a.cam { --c: var(--c-cam); } .db .hien-trang-4 a.xanh { --c: var(--c-xanh); } .db .hien-trang-4 a.tim { --c: var(--c-tim); } .db .hien-trang-4 a.la { --c: var(--c-la); }
.db .hien-trang-4 b { display: block; font-size: 22px; color: var(--c); } .db .hien-trang-4 span { font-size: 11.5px; color: var(--mo); }
.db .hang-nho { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 13px; }
.db .chi-tieu { display: grid; gap: 12px; }
.db .chi-tieu > div { display: flex; flex-direction: column; gap: 3px; }
.db .chi-tieu > div > span:first-child { font-size: 12.5px; color: var(--chu-2); font-weight: 500; }
.db .chi-tieu b { font-size: 24px; color: var(--xanh); } .db .chi-tieu small { font-size: 14px; color: var(--mo); font-weight: 500; }

/* Thanh ngang */
.db .thanh-dong { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto 40px auto; align-items: center; gap: 8px; padding: 3px 0; }
.db .thanh-dong.gon { grid-template-columns: minmax(80px, 42%) 1fr auto 36px; }
.db .thanh-dong.mini { grid-template-columns: 1fr auto; min-width: 140px; }
.db .thanh-dong .nhan-t { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db .thanh-dong .nhan-t small { display: block; font-size: 11.5px; color: var(--mo); overflow: hidden; text-overflow: ellipsis; }
.db .thanh-dong .thanh { --c: var(--c-xanh); height: 16px; border: 0; padding: 0; background: var(--vien-3); border-radius: 4px; overflow: hidden; display: block; width: 100%; }
.db .thanh-dong .thanh.cam { --c: var(--c-cam); } .db .thanh-dong .thanh.do { --c: var(--c-do); } .db .thanh-dong .thanh.tim { --c: var(--c-tim); }
.db .thanh-dong .thanh i { display: block; height: 100%; background: var(--c); border-radius: 4px; min-width: 2px; }
.db .thanh-dong .thanh:hover i { filter: brightness(1.15); }
.db .gt { border: 0; background: none; padding: 0 2px; font-weight: 700; color: var(--xanh); text-decoration: underline dotted; text-underline-offset: 3px; min-width: 24px; text-align: right; }
.db .thanh-dong .pt { font-size: 12px; color: var(--mo); text-align: right; }
.db .thanh-dong .bien { min-width: 34px; text-align: right; }

/* Biểu đồ cột */
.db .chu-giai { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--mo); }
.db .chu-giai i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 6px; }
.db .chu-giai i.cam { background: var(--c-cam); } .db .chu-giai i.do { background: var(--c-do); } .db .chu-giai i.xanh { background: var(--c-xanh); } .db .chu-giai i.tim { background: var(--c-tim); } .db .chu-giai i.la { background: var(--c-la); }
.db .bieu-cot { display: grid; grid-template-columns: repeat(var(--n), minmax(34px, 1fr)); gap: 6px; height: 240px; align-items: end; overflow-x: auto; padding-top: 18px; border-bottom: 1px solid var(--vien-2);
  background: repeating-linear-gradient(to top, transparent 0, transparent 54px, var(--vien-3) 54px, var(--vien-3) 55px); }
.db .cot-nhom { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.db .cot-cap { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.db .cot { display: block; border: 0; padding: 0; width: 42%; max-width: 26px; min-height: 2px; border-radius: 4px 4px 0 0; position: relative; }
.db .cot.cam { background: var(--c-cam); } .db .cot.do { background: var(--c-do); }
.db .cot:hover { filter: brightness(1.15); }
.db .cot span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--chu-2); padding-bottom: 1px; }
.db .nhan-cot { font-size: 11px; color: var(--mo); text-align: center; padding-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 20px; }

/* Tiến độ: thanh xếp chồng */
.db .td-dong { display: grid; grid-template-columns: 150px 1fr 120px; grid-template-areas: "ten thanh so" ". chu chu"; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--vien-3); align-items: center; }
.db .td-dong:last-child { border-bottom: 0; }
.db .td-ten { grid-area: ten; display: flex; flex-direction: column; } .db .td-ten a { font-weight: 600; text-decoration: none; }
.db .td-thanh { grid-area: thanh; display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--vien-3); }
.db .td-thanh button { border: 0; padding: 0; height: 100%; min-width: 3px; border-right: 1px solid #fff; }
.db .td-thanh button:hover { filter: brightness(1.15); }
.db .td-thanh button.con { background: repeating-linear-gradient(45deg, #C9CFD8, #C9CFD8 4px, #DDE1E7 4px, #DDE1E7 8px); }
.db .td-so { grid-area: so; display: flex; flex-direction: column; align-items: flex-end; }
.db .td-so b { font-size: 20px; color: var(--xanh); line-height: 1.1; }
.db .td-so .tag { border: 0; cursor: pointer; margin-top: 2px; }
.db .td-chu { grid-area: chu; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.db .td-chu button { border: 0; background: none; padding: 2px 0; font-size: 12px; color: var(--chu-2); display: inline-flex; align-items: center; gap: 5px; }
.db .td-chu button:hover { color: var(--xanh); }
.db .td-chu i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.db .td-chu i.xam { background: #C9CFD8; }
.db .bang-ksv td:nth-child(2) { min-width: 220px; width: 45%; }
.db .chong { display: flex; height: 20px; gap: 1px; }
.db .chong button { border: 0; padding: 0 4px; color: #fff; font-size: 11px; font-weight: 600; min-width: 18px; text-align: center; overflow: hidden; }
.db .chong button:first-child { border-radius: 4px 0 0 4px; } .db .chong button:last-child { border-radius: 0 4px 4px 0; }
.db .chong .cam { background: var(--c-cam); } .db .chong .xanh { background: var(--c-xanh); } .db .chong .tim { background: var(--c-tim); } .db .chong .la { background: var(--c-la); }
.db .bang-ksv .tag, .db .bang-xa .tag { border: 0; cursor: pointer; }
.db .bang-xa td:nth-child(3) { min-width: 160px; }
.db .bd-thong-tin h3 { font-size: 17px; margin: 0 0 6px; color: var(--xanh); }

/* Ngăn danh sách chi tiết */
.ngan-nen { position: fixed; inset: 0; background: rgba(14,34,66,.32); z-index: 40; }
.ngan-ds { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--the); z-index: 41; display: flex; flex-direction: column; box-shadow: -8px 0 28px rgba(14,34,66,.2); }
.ngan-ds[hidden], .ngan-nen[hidden] { display: none; }
.ngan-ds > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 18px 10px; border-bottom: 1px solid var(--vien); }
.ngan-ds h2 { margin: 0; font-size: 16px; }
.dong-ngan { border: 0; background: var(--nhat-2); width: 34px; height: 34px; border-radius: 17px; font-size: 16px; cursor: pointer; flex-shrink: 0; }
.ngan-ds input[type=search] { margin: 10px 18px; height: 36px; border: 1px solid var(--vien-2); border-radius: 8px; padding: 0 10px; font: inherit; }
.ngan-ds ol { list-style: decimal; margin: 0; padding: 0 18px 0 46px; overflow-y: auto; flex: 1; }
.ngan-ds li { padding: 7px 0; border-bottom: 1px solid var(--vien-3); font-size: 13.5px; }
.ngan-ds li a { display: block; font-weight: 500; }
.ngan-ds li[hidden] { display: none; }
.ngan-ds footer { padding: 12px 18px; border-top: 1px solid var(--vien); }
.ngan-ds footer a[hidden] { display: none; }

@media (max-width: 1280px) { .db-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); } .db-luoi.bon { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .db-luoi.ba { grid-template-columns: 1fr; } .db-kpi.nam-o { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .db-luoi, .db-luoi.bon { grid-template-columns: 1fr; }
  .db-kpi, .db-kpi.nho-kpi, .db-kpi.nam-o { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-loc .nhan { min-width: 0; width: 100%; } .db-loc select { flex: 1 1 100%; }
  .db .luong { grid-template-columns: 1fr; }
  .db .td-dong { grid-template-columns: 1fr auto; grid-template-areas: "ten so" "thanh thanh" "chu chu"; }
  .db .chi-so .hang-gt b { font-size: 24px; }
}

.hop-thoi-hieu { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--cam-vien); background: var(--cam-n); border-radius: 10px; }
.hop-trung { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--vien-2); background: var(--nhat-2); border-radius: 10px; }
.hop-trung tr.nghi-trung td { background: var(--cam-n); }
.hop-trung select { min-width: 260px; }
.muc-ds .muc-tieu { display: block; padding: 10px 12px 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--mo-2); }

/* Tài liệu hướng dẫn của trợ lý */
.form-tl { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.form-tl textarea { width: 100%; font: inherit; }
.doan-tl { border-bottom: 1px solid var(--vien-3); padding: 6px 0; }
.doan-tl summary { cursor: pointer; font-weight: 600; color: var(--xanh); font-size: 13.5px; }
.van-ban-tl { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; padding: 6px 0 4px; color: var(--chu-2); }
.o-tick { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }

/* Xác thực 2 lớp */
.dang-nhap .o-ma { font-size: 22px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.buoc-2fa { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--chu-2); }
.qr-2fa { margin: 8px 0; } .qr-2fa svg { width: 180px; height: 180px; display: block; }
.khoa-2fa { margin: 6px 0; padding: 10px 12px; background: var(--nhat-2); border: 1px dashed var(--vien-2); border-radius: 8px; line-height: 1.7; }
.khoa-2fa code { font-size: 15px; letter-spacing: .06em; word-break: break-all; }
.ds-du-phong { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ds-du-phong code { font-size: 17px; padding: 8px; text-align: center; background: var(--nhat-2); border-radius: 6px; letter-spacing: .08em; }
.dang-nhap .nut { text-align: center; justify-content: center; }
@media print { .trang-dn { background: #fff; } .dang-nhap .nut { display: none; } }
.hang-cai-dat { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13.5px; }
.hang-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.hang-form input { flex: 1 1 240px; height: 38px; border: 1px solid var(--vien-2); border-radius: 8px; padding: 0 10px; font: inherit; }
tr.mo td { opacity: .55; }

.nd-nguyen-van textarea { min-height: 220px; font-size: 13.5px; line-height: 1.55; }

/* Ứng dụng cài được (PWA) */
.dau .cai-app { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.dau .cai-app:hover { background: rgba(255,255,255,.12); }
.dau .cai-app[hidden], .nut-cai-app[hidden] { display: none; }
.dang-nhap .nut-cai-app { align-self: center; }
/* Khi mở như ứng dụng: chừa vùng tai thỏ / thanh trạng thái trên iPhone */
.che-do-app .dau { padding-top: max(0px, env(safe-area-inset-top)); }
@media (max-width: 860px) { .dau .cai-app { padding: 0 8px; font-size: 12px; } }

/* Điều chỉnh tay số tự động trong kỳ thống kê */
.bang-ky tr.dc td { background: #FFF4E5; }
.bang-ky details.dieu-chinh { margin-top: 6px; }
.bang-ky details.dieu-chinh summary { cursor: pointer; font-size: 12.5px; color: var(--xanh-3); }
.bang-ky details.dieu-chinh .o-kk { margin-top: 6px; }
.bang-ky details.dieu-chinh input[name^="gc-"] { min-width: 220px; }

/* Điều chỉnh quyết định */
.hop-qd-sua { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--xanh); background: var(--nhat-2); }
.hop-qd-sua b { font-size: 15px; color: var(--xanh); }
.hop-dong-bo { padding: 10px 12px; border-radius: 8px; background: var(--cam-n); border: 1px solid var(--cam-vien); line-height: 1.5; align-items: flex-start; }
.nut-sua-qd { margin-bottom: 4px; display: inline-flex; }

/* Biểu dạng bảng: đúng cấu trúc biểu mẫu QĐ 358 */
.luoi-bieu-khung { overflow: auto; max-height: 72vh; border-top: 1px solid var(--vien); }
.luoi-bieu { border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 100%; }
.luoi-bieu th, .luoi-bieu td { border-right: 1px solid var(--vien); border-bottom: 1px solid var(--vien); padding: 0; }
.luoi-bieu thead { position: sticky; top: 0; z-index: 3; }   /* cả khối tiêu đề dính khi cuộn dọc */
.luoi-bieu thead th { background: #EEF2F8; color: var(--chu); font-weight: 600; font-size: 11px; line-height: 1.25; padding: 4px 5px; text-align: center; vertical-align: middle; min-width: 66px; }
.luoi-bieu thead tr.ma-cot th { background: #DCE6F1; color: var(--mo); font-weight: 500; font-size: 10.5px; padding: 2px 4px; }
.luoi-bieu thead th.dinh { position: sticky; left: 0; z-index: 4; min-width: 56px; }
.luoi-bieu thead th.dinh + th.dinh { left: 56px; min-width: 200px; box-shadow: 2px 0 0 var(--vien-2); }
.luoi-bieu td { text-align: center; height: 30px; }
.luoi-bieu td.dinh { position: sticky; left: 0; background: #fff; z-index: 1; text-align: left; padding: 4px 8px; }
.luoi-bieu td.dl { min-width: 56px; font-weight: 600; }
.luoi-bieu td.td { left: 56px; min-width: 200px; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 2px 0 0 var(--vien-2); }
.luoi-bieu tr.tong td { background: #F4F7FB; font-weight: 700; }
.luoi-bieu tr.tong td.dinh { background: #F4F7FB; }
.luoi-bieu tbody tr:hover td { background: var(--nhat-2); }
.luoi-bieu .khong { color: var(--mo-2); font-weight: 400; }
.luoi-bieu .o-so { width: 100%; height: 100%; min-height: 30px; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--xanh); cursor: pointer; }
.luoi-bieu .o-so:hover, .luoi-bieu .o-so.chon { background: #DCE6F1; outline: 2px solid var(--xanh-3); outline-offset: -2px; }
.luoi-bieu td.dc { background: #FFE8CC; } .luoi-bieu td.kk { background: #FFF4CC; }
#ngan-o .ngan-o-than { overflow-y: auto; flex: 1; }
.o-bang-ct { display: flex; flex-direction: column; gap: 14px; padding: 14px 18px; }
.o-bang-dau { display: flex; flex-direction: column; gap: 4px; }
.o-bang-dau > b { font-size: 14px; line-height: 1.4; }
.o-bang-so { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.o-bang-so .gt { font-size: 28px; font-weight: 700; color: var(--xanh); }
.o-bang-dc { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--cam-vien); background: var(--cam-n); border-radius: 8px; }
.o-bang-dc .o-kk { display: flex; gap: 6px; flex-wrap: wrap; } .o-bang-dc .o-kk input { height: 36px; } .o-bang-dc .o-kk input[name^="gc-"] { flex: 1; min-width: 200px; }
.o-bang-dc .hang-nut { display: flex; gap: 10px; align-items: center; }

.pham-vi-gd { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 10px; }
.pham-vi-gd .chip-loc b { margin-left: 6px; }

/* Điều chỉnh QĐ nhập vụ án */
.khoi-nhap-vu { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--xanh-4); border-radius: 10px; padding: 12px 16px; }
.khoi-nhap-vu legend { font-weight: 600; color: var(--xanh); padding: 0 6px; }
.khoi-nhap-vu h4 { margin: 8px 0 0; font-size: 14px; }
.huong-nhap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); gap: 12px; align-items: center; }
.huong-nhap .vu-hop { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 8px; background: var(--nhat-2); border: 1px solid var(--vien); }
.huong-nhap .vu-hop.dich { background: var(--la-n); border-color: var(--la-vien); }
.huong-nhap .vu-hop b { font-size: 16px; color: var(--xanh); }
.huong-nhap .mui { font-size: 28px; color: var(--xanh-3); font-weight: 700; }
.huong-nhap select { width: 100%; }
.khoi-nhap-vu tr.nghi-trung td { background: var(--cam-n); }
@media (max-width: 760px) { .huong-nhap { grid-template-columns: 1fr; } .huong-nhap .mui { transform: rotate(90deg); justify-self: center; } }
.hop-nhap-vu { margin-top: 10px; padding: 9px 12px; border-radius: 8px; background: var(--lam-n); border: 1px solid var(--xanh-4); font-size: 13.5px; }
.hop-nhap-vu.nhan { background: var(--la-n); border-color: var(--la-vien); }
.hop-nhap-vu.thieu { background: var(--do-n); border-color: #F3B4AE; }
/* Ô tìm vụ đích (nhập vụ án) */
.tim-vu-dich { position: relative; display: flex; align-items: center; }
.tim-vu-dich .kinh { position: absolute; left: 13px; color: var(--mo); font-size: 17px; pointer-events: none; }
.tim-vu-dich input { width: 100%; height: 38px; border-radius: 19px; padding: 0 34px 0 36px; }
.tim-vu-dich input.da-chon { font-weight: 600; color: var(--xanh); border-color: var(--la-vien); background: #fff; }
.tim-vu-dich .xoa { position: absolute; right: 8px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--mo); cursor: pointer; padding: 2px 6px; }
.tim-vu-dich .goi-y { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 300px; overflow-y: auto; margin: 0; padding: 4px;
  list-style: none; background: #fff; border: 1px solid var(--vien); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.tim-vu-dich .goi-y li { padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13.5px; }
.tim-vu-dich .goi-y li.dang, .tim-vu-dich .goi-y li[data-i]:hover { background: var(--lam-n); }
.tim-vu-dich .goi-y li b { color: var(--xanh); }
.tim-vu-dich .goi-y li.trong { color: var(--mo); cursor: default; }
#go-ma-tb.loi-chu { color: #b42318; }
/* Form bị can theo nhóm thông tin */
.form-bi-can { display: flex; flex-direction: column; gap: 14px; }
.nhom-tt { border: 1px solid var(--vien); border-radius: 10px; padding: 0 16px; }
.nhom-tt[open] { padding-bottom: 14px; }
.nhom-tt > summary { cursor: pointer; padding: 11px 0; font-weight: 600; color: var(--xanh); }
.nhom-tt .o-check { justify-content: flex-end; }
.nhom-tt .o-check label { display: flex; align-items: center; gap: 8px; font-size: 14px; height: 40px; }
.nhom-tt .o-check input { width: 18px; height: 18px; }
.ket-qua-nhap { border-top: 2px solid var(--la-vien); margin-top: 6px; padding-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.ket-qua-nhap .tong-sau { font-size: 14px; padding: 8px 12px; border-radius: 8px; background: var(--la-n); }
.ket-qua-nhap .tong-sau b { font-size: 16px; color: var(--la); }
.ket-qua-nhap tr.moi td { background: var(--la-n); }
.tim-vu-dich { width: 100%; }
.tim-vu-dich input { flex: 1; min-width: 0; max-width: none; }
.nhom-tt .chi-tieu label { font-weight: 600; }
.nhom-tt .truong[hidden] { display: none; }
.nhom-tt .truong.tat { opacity: .45; }
/* Bản án: hình phạt từng bị cáo */
.khoi-ban-an { display: flex; flex-direction: column; gap: 8px; }
.khoi-ban-an h4 { margin: 4px 0 0; font-size: 14px; }
.bang-ba { min-width: 900px; }
.bang-ba td { vertical-align: middle; }
.bang-ba input.o-nhap { width: 100%; min-width: 170px; }
.bang-ba tr.tat td { opacity: .45; }
.bang-ba tr.tat td:first-child { opacity: 1; }
.khoi-gia-han { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--vien); display: flex; flex-direction: column; gap: 10px; }
/* Bảng tick hoạt động nghiệp vụ */
.bang-hd-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.bang-hd { min-width: 1050px; }
.bang-hd tr.nhom-hd td { background: var(--nhat-2); font-weight: 600; color: var(--xanh); }
.bang-hd tr.dong-hd td { vertical-align: middle; }
.bang-hd tr.dong-hd input[type=date] { width: 150px; }
.bang-hd tr.dong-hd input[type=number] { width: 70px; }
.bang-hd tr.dong-hd input[type=text], .bang-hd tr.dong-hd select { width: 100%; min-width: 150px; }
.bang-hd tr.dong-hd:not(.chon) td:nth-child(n+3) { opacity: .45; }
.bang-hd tr.chon td { background: var(--la-n); }
.bang-hd label { cursor: pointer; }
.bang-hd .o-nho { font-size: 13px; display: flex; gap: 6px; align-items: center; }
/* Biện pháp ngăn chặn */
.bang-bpnc { min-width: 1050px; }
.bang-bpnc .gach { text-decoration: line-through; opacity: .7; }
.bang-bpnc .nho-inline { display: inline; }
.bang-bpnc .lien-ket { border: 0; background: none; color: var(--do-2, #b42318); cursor: pointer; padding: 0 4px; }
.bpnc-kt summary { list-style: none; cursor: pointer; display: inline-block; }
.bpnc-kt-form { display: flex; flex-direction: column; gap: 6px; padding: 8px; margin-top: 6px; border: 1px solid var(--vien); border-radius: 8px; min-width: 260px; background: var(--the, #fff); }
.bpnc-them { margin-top: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.bpnc-them h3 { margin: 0; }
.bpnc-bc { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 10px; border: 1px dashed var(--vien); border-radius: 8px; }
.o-nho { font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
/* Danh sách: sắp xếp, lọc ngay tại tiêu đề */
.bang-ds .cot-sap { color: inherit; text-decoration: none; white-space: nowrap; }
.bang-ds .cot-sap span { opacity: .45; font-size: 11px; }
.bang-ds .cot-sap.dang { color: var(--xanh); }
.bang-ds .cot-sap.dang span { opacity: 1; }
.bang-ds tr.dau-loc th { padding-top: 4px; padding-bottom: 8px; font-weight: 400; }
.bang-ds tr.dau-loc input, .bang-ds tr.dau-loc select { width: 100%; min-width: 0; height: 30px; font-size: 12.5px; padding: 0 6px; border-radius: 6px; }
.bang-ds .tu-den-nho { display: flex; flex-direction: column; gap: 3px; min-width: 120px; }
.bang-ds tr.dau-loc select { min-width: 92px; }
.lien-ket-nut { border: 0; background: none; color: var(--xanh); text-decoration: underline; cursor: pointer; padding: 0 4px; font-size: 13px; }
.o-ngay-an { display: flex; align-items: center; gap: 6px; min-height: 40px; }
/* Thanh lọc danh sách nguồn tin / vụ án */
.loc-ds input[type=search] { width: 150px; min-width: 0 !important; }
.loc-ds input.o-tim-chung { width: 240px; }
.loc-ds input.o-ngan { width: 120px; }
.loc-ds .tu-den-loc { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--vien); border-radius: 17px; height: 34px; }
.loc-ds .tu-den-loc input[type=date] { border: 0; height: 30px; padding: 0 2px; min-width: 0 !important; width: 128px; background: transparent; }
/* Kiểm tra quy tắc logic biểu thống kê */
.khoi-qt { margin: 0 16px 12px; padding: 10px 14px; border: 1px solid var(--la-vien); border-radius: 10px; background: var(--la-n); }
.khoi-qt.co-sai { border-color: #F3B4AE; background: var(--do-n); }
.khoi-qt summary { cursor: pointer; font-size: 14px; }
.bang-qt { margin-top: 8px; width: 100%; }
.bang-qt tr.dat td { opacity: .7; }
.canh-qt { color: var(--do-2, #b42318); font-size: 12px; }
.bang-ky tr:target td { background: var(--cam-n); }
/* Căn cứ tạm đình chỉ: thẻ chọn điểm */
ul.o-diem, div.o-diem { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.o-diem label { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border: 1px solid var(--vien); border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.o-diem label:has(input:checked) { border-color: var(--xanh); background: var(--lam-n); font-weight: 600; }
.o-diem input { width: auto; height: auto; margin-top: 3px; }
.khoi-qt .qt-dau { font-size: 14px; }
.khoi-qt .qt-loi { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.04); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.khoi-qt .qt-dat { margin-top: 6px; }
.khoi-qt .qt-dat summary { cursor: pointer; }
.khoi-qt .qt-ds { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
/* Chỉ tiêu kiến nghị */
.ct-kn { display: grid; grid-template-columns: minmax(0, 2fr) minmax(120px, 1.2fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--vien); }
.ct-kn .ct-thanh { height: 10px; border-radius: 5px; background: var(--vien); overflow: hidden; }
.ct-kn .ct-thanh span { display: block; height: 100%; background: var(--cam, #D97706); }
.ct-kn.dat .ct-thanh span { background: var(--la, #1f7a3a); }
.ct-kn .ct-so { white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.nho-inline { display: inline; }
@media (max-width: 760px) { .ct-kn { grid-template-columns: 1fr; } }

/* Ô chỉ tiêu nghiệp vụ trên danh sách giai đoạn */
.kpi > a.o-chi-tieu { gap: 3px; grid-column: span 2; }
@media (max-width: 520px) { .kpi > a.o-chi-tieu { grid-column: auto; } }
.o-chi-tieu .dong-ct { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: baseline; font-size: 13px; }
.o-chi-tieu .ten-ct { color: var(--chu); }
.o-chi-tieu .dong-ct b { font-size: 15px; }
.o-chi-tieu .muc-ct { font-size: 11px; color: var(--mo); min-width: 34px; text-align: right; }
.o-chi-tieu b.la { color: #15803d; } .o-chi-tieu b.do { color: #b91c1c; } .o-chi-tieu b.xam { color: var(--mo); }
.ct-bang td { vertical-align: top; } .ct-bang .so { text-align: right; white-space: nowrap; }
.ct-ds td { background: var(--nen, #f8fafc); padding-top: 0; } .ct-ds ul { margin: 6px 0 4px 18px; columns: 2; }
@media (max-width: 760px) { .ct-ds ul { columns: 1; } }
.ct-bang td:first-child { min-width: 230px; } .ct-bang td:nth-child(2) { min-width: 280px; } .ct-bang td:nth-child(4) { min-width: 110px; }

/* ===== Thanh bên kiểu Claude: nút thu gọn ở đầu, tài khoản ở góc dưới ===== */
.ben-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 6px 22px; }
.ben-ten { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mo-2); white-space: nowrap; }
.nut-gon { width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent; color: var(--mo); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.nut-gon:hover { background: var(--nhat-2); color: var(--chu); }
.nut-gon:focus-visible, .tai-khoan:focus-visible { outline: 2px solid var(--xanh); outline-offset: 2px; }
.ben-chan { position: relative; border-top: 1px solid var(--vien); padding: 8px 10px; background: #fff; }
.tai-khoan { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; color: var(--chu); font: inherit; }
.tai-khoan:hover, .tai-khoan[aria-expanded="true"] { background: var(--nhat-2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--xanh); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; }
.tk-chu { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; overflow: hidden; }
.tk-chu b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.tk-chu .vai { font-size: 12.5px; color: var(--mo); }
.tk-mui { color: var(--mo); flex-shrink: 0; }
.tk-menu { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 4px); background: #fff; border: 1px solid var(--vien); border-radius: 12px; box-shadow: 0 8px 28px rgba(15,23,42,.16); padding: 6px; z-index: 40; display: flex; flex-direction: column; gap: 2px; min-width: 240px; }
.tk-menu[hidden] { display: none; }
.tk-menu-dau { padding: 8px 10px 10px; border-bottom: 1px solid var(--vien-3); margin-bottom: 4px; display: flex; flex-direction: column; line-height: 1.3; }
.tk-menu-dau span { font-size: 12px; color: var(--mo); }
.tk-menu a, .tk-menu button { display: grid; grid-template-columns: 24px 1fr; align-items: center; column-gap: 8px; padding: 9px 10px; border-radius: 8px; color: var(--chu); text-decoration: none; font-size: 14px; border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; font: inherit; }
.tk-menu a small { grid-column: 2; font-size: 11.5px; color: var(--mo); }
.tk-menu a:hover, .tk-menu button:hover, .tk-menu a.dang { background: var(--nhat-2); text-decoration: none; }
.tk-menu form { margin: 0; border-top: 1px solid var(--vien-3); margin-top: 4px; padding-top: 4px; }
.tk-menu button { color: var(--do); }
.tk-ic { text-align: center; }

/* Thu gọn (chỉ màn hình rộng) */
@media (min-width: 861px) {
  .ben-gon .ben { width: 68px; }
  .ben-gon .ben-dau { justify-content: center; padding: 10px 0 6px; }
  .ben-gon .ben-ten, .ben-gon .ben .pham-vi, .ben-gon .ben .nhom-ds, .ben-gon .ben .muc-ds,
  .ben-gon .tk-chu, .ben-gon .tk-mui { display: none; }
  .ben-gon .ben-giua { padding: 4px 8px 16px; }
  .ben-gon .ben .mod > summary, .ben-gon .ben a.mod-link { justify-content: center; padding: 0; font-size: 0; gap: 0; }
  .ben-gon .ben .mod > summary::after { display: none; }
  .ben-gon .ben .mod > summary > span:not(.chip), .ben-gon .ben a.mod-link > span:not(.chip) { display: none; }
  .ben-gon .ben details.mod { border-bottom: 0; }
  .ben-gon .ben-chan { padding: 8px 6px; }
  .ben-gon .tai-khoan { justify-content: center; padding: 6px 0; }
  .ben-gon .tk-menu { left: 6px; right: auto; }
}
@media (max-width: 860px) { .nut-gon { display: none; } .ben { height: calc(100vh - 60px); } }
@media (prefers-reduced-motion: reduce) { .ben { transition: none; } }
.tk-nhom { padding: 10px 10px 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--mo-2); border-top: 1px solid var(--vien-3); margin-top: 4px; }

/* ===== Tổng quan: nút Truy vấn, tóm tắt phạm vi, thanh thẻ nổi ===== */
.nut-truy-van { display: inline-flex; align-items: center; gap: 6px; }
.nut-truy-van.dang { background: var(--nhat); border-color: var(--xanh); color: var(--xanh); }
.nut-truy-van .cham-loc { width: 8px; height: 8px; border-radius: 4px; background: var(--cam, #d97706); }
.db-loc[hidden] { display: none; }
.db-loc { box-shadow: 0 6px 20px rgba(15,23,42,.08); }
.db-tom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--chu-2); }
.tom-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--nhat); color: var(--xanh); font-size: 13px; }
.db-the { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.db-the a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 64px; border-radius: 12px; background: var(--the); border: 1px solid var(--vien); color: var(--chu); text-decoration: none; box-shadow: 0 1px 2px rgba(15,23,42,.05); transition: border-color .15s, box-shadow .15s, transform .15s; }
.db-the a:hover { border-color: var(--xanh-3); box-shadow: 0 4px 14px rgba(15,23,42,.08); transform: translateY(-1px); text-decoration: none; }
.db-the a:focus-visible { outline: 2px solid var(--xanh); outline-offset: 2px; }
.db-the .the-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--nhat); color: var(--xanh); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.db-the .the-chu { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.db-the .the-chu b { font-weight: 600; font-size: 14.5px; }
.db-the .the-chu small { font-size: 12px; color: var(--mo); }
.db-the a.dang { background: var(--xanh); border-color: var(--xanh); color: #fff; box-shadow: 0 6px 18px rgba(30,58,110,.28); }
.db-the a.dang .the-ic { background: rgba(255,255,255,.16); color: #fff; }
.db-the a.dang .the-chu small { color: #D6E0F0; }
@media (max-width: 1280px) { .db-the .the-chu small { display: none; } .db-the a { min-height: 54px; } }
@media (max-width: 760px) { .db-the { grid-template-columns: repeat(5, minmax(132px, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .db-the a { transition: none; } .db-the a:hover { transform: none; } }

/* Chụp văn bản bằng điện thoại (Nhập văn bản bằng trợ lý) */
.chup-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.chup .pdf { width: 40px; height: 40px; border-radius: 8px; background: var(--xanh); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.chup-trang { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.chup-trang:empty { display: none; }
.chup-trang figure { position: relative; margin: 0; border: 1px solid var(--vien); border-radius: 8px; overflow: hidden; background: #fff; }
.chup-trang img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.chup-trang figcaption { font-size: 12px; text-align: center; padding: 3px 0; color: var(--chu-2); }
.chup-trang figure button { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 14px; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.chup-nut { display: flex; flex-wrap: wrap; gap: 10px; }
.chup-nut .nut.to { min-height: 48px; padding: 0 18px; font-size: 15px; }
@media (max-width: 600px) { .chup-nut .nut.to { flex: 1 1 100%; } .chup-trang { grid-template-columns: repeat(3, 1fr); } }

/* Xoá nguồn tin / vụ án (quản trị) – cuối thẻ thông tin */
.xoa-ho-so { margin-top: 18px; border: 1px solid var(--do-2, #f5c2c0); border-radius: 10px; background: var(--do-n, #fdecec); }
.xoa-ho-so > summary { list-style: none; cursor: pointer; padding: 10px 14px; color: var(--do, #b91c1c); font-weight: 600; font-size: 14px; }
.xoa-ho-so > summary::-webkit-details-marker { display: none; }
.xoa-ho-so form { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
.xoa-ho-so .hang-xoa { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.xoa-ho-so .nut-xoa { align-self: flex-start; background: var(--do, #b91c1c); border-color: var(--do, #b91c1c); color: #fff; }
.xoa-ho-so .nut-xoa:hover { filter: brightness(.92); }

/* Cột phải đầu trang chi tiết (hạn, mã QR) */
.cot-phai-ct { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 1 auto; margin-left: auto; }
@media (max-width: 760px) { .cot-phai-ct { width: 100%; align-items: stretch; } }
/* Ô thời hạn trong cột phải trang chi tiết: cao vừa nội dung (không kéo giãn theo chiều dọc), gọn hơn */
.cot-phai-ct > .o-han, .cot-phai-ct > * { flex: 0 0 auto; }
.cot-phai-ct > .o-han { width: 280px; max-width: 100%; padding: 10px 14px; gap: 2px; }
.cot-phai-ct > .o-han .ngay-han { font-size: 22px; }
.cot-phai-ct { gap: 8px; }
@media (max-width: 760px) { .cot-phai-ct > .o-han { width: 100%; } }

/* ===== Đầu trang hồ sơ: ô hạn gọn + mã QR ngang hàng tên ===== */
.hang-han-qr { display: flex; align-items: stretch; gap: 10px; }
.cot-phai-ct .hang-han-qr > .o-han { width: auto; min-width: 190px; max-width: 240px; padding: 8px 12px; gap: 0; justify-content: center; }
.cot-phai-ct .hang-han-qr > .o-han .nho { display: none; }          /* căn cứ tính hạn: rê chuột để xem */
.cot-phai-ct .hang-han-qr > .o-han .nhan-han { font-size: 12px; }
.cot-phai-ct .hang-han-qr > .o-han .ngay-han { font-size: 20px; }
.qr-hs { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--vien); border-radius: 10px; background: #fff; cursor: zoom-in; }
.qr-hs:hover { border-color: var(--xanh-3); }
.qr-hs .qr-anh svg { width: 74px; height: 74px; display: block; }
.qr-hs .qr-ma { font-size: 11px; font-weight: 600; color: var(--xanh); letter-spacing: .02em; }
.qr-to { border: 0; border-radius: 16px; padding: 24px 28px; text-align: center; max-width: 92vw; }
.qr-to[open] { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qr-to::backdrop, .hop-chup::backdrop, .hop-quet::backdrop { background: rgba(10,20,40,.55); }
.qr-to .qr-to-anh svg { width: 280px; height: 280px; }
.qr-to b { font-size: 22px; color: var(--xanh); }
@media print { body.in-qr * { visibility: hidden; } .qr-to[open], .qr-to[open] * { visibility: visible; } .qr-to[open] { position: fixed; inset: 0; margin: auto; } .qr-to .hang { display: none; } }
@media (max-width: 760px) { .hang-han-qr > .o-han { flex: 1; max-width: none; } .qr-hs .qr-anh svg { width: 64px; height: 64px; } }

/* ===== Nút máy ảnh góc dưới phải + hộp thêm ảnh / tài liệu ===== */
.fab-chup { position: fixed; right: 24px; bottom: 24px; z-index: 35; width: 62px; height: 62px; border-radius: 50%; border: 0; background: var(--xanh); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(23,50,92,.4); transition: transform .15s; }
.fab-chup:hover { transform: scale(1.06); background: var(--xanh-2); }
.fab-chup:focus-visible { outline: 3px solid var(--vang, #f4c95d); outline-offset: 3px; }
.hop-chup, .hop-quet { border: 0; border-radius: 16px; padding: 0; width: min(720px, 94vw); max-height: 90vh; }
.hop-chup[open], .hop-quet[open] { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; }
.dau-chup { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dau-chup h2 { margin: 0; font-size: 18px; color: var(--xanh); }
.nut-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--nhat-2); font-size: 22px; cursor: pointer; }
.vung-tha-chup { border: 2px dashed var(--xanh-3); border-radius: 12px; background: var(--nhat-2); padding: 26px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--xanh); }
.vung-tha-chup.dang-keo { background: var(--nhat); border-color: var(--xanh); }
.vung-tha-chup kbd { border: 1px solid var(--vien-2); border-radius: 4px; padding: 0 5px; background: #fff; font-size: 12px; }
.hop-chup .chup-nut { display: flex; flex-wrap: wrap; gap: 10px; }
.hop-chup .chup-nut .nut { min-height: 44px; }
.webcam video, .hop-quet video { width: 100%; max-height: 50vh; border-radius: 10px; background: #000; }
.ds-chup { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; overflow-y: auto; }
.ds-chup:empty { display: none; }
.ds-chup figure { position: relative; margin: 0; border: 1px solid var(--vien); border-radius: 8px; overflow: hidden; background: #fff; }
.ds-chup img, .ds-chup .pdf-chup { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ds-chup .pdf-chup { display: flex; align-items: center; justify-content: center; background: #fdecec; color: #b91c1c; font-weight: 700; font-size: 22px; }
.ds-chup figcaption { font-size: 11px; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--chu-2); }
.ds-chup figure button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 13px; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
.chan-chup { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--vien-3); padding-top: 12px; }
.nut-quet { background: transparent; cursor: pointer; }
@media (max-width: 860px) { .fab-chup { right: 16px; bottom: 16px; width: 56px; height: 56px; } }
/* Trang có nút máy ảnh nổi: chừa chỗ để nút không che “Lưu” / “Huỷ” ở cuối form */
body:has(.fab-chup:not([hidden])) .thanh-nut, body:has(.fab-chup:not([hidden])) .thanh-duyet { padding-right: 88px; }
body:has(.fab-chup:not([hidden])) main { padding-bottom: 96px; }

/* ===== Tổng quan: bản đồ + xếp hạng xã trong Toàn cảnh ===== */
.db-dia-ban { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1200px) { .db-dia-ban { grid-template-columns: minmax(0, 1fr); } }

/* ===== Tổng quan: Đang giải quyết dạng bảng cột (kanban) ===== */
.kb-loc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.kb-loc .kb-tim { flex: 1 1 240px; height: 34px; border: 1px solid var(--vien-2); border-radius: 17px; padding: 0 14px; font: inherit; background: #fff; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.kb-cot { background: var(--nhat-2); border: 1px solid var(--vien); border-radius: 14px; display: flex; flex-direction: column; min-height: 0; border-top: 5px solid var(--xanh-3); }
.kb-cot.cam { border-top-color: #d97706; } .kb-cot.xanh { border-top-color: #2563eb; } .kb-cot.tim { border-top-color: #7c3aed; } .kb-cot.la { border-top-color: #15803d; }
.kb-dau { padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--vien); background: #fff; border-radius: 10px 10px 0 0; }
.kb-dau a { color: var(--chu); text-decoration: none; font-size: 17px; }
.kb-dau a:hover { color: var(--xanh); }
.kb-so { font-size: 13px; color: var(--mo); } .kb-so b { font-size: 22px; color: var(--chu); }
.kb-thanh { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--vien-3); }
.kb-thanh i { display: block; height: 100%; }
.kb-thanh .qua, .kb-chu .qua::before { background: #dc2626; } .kb-thanh .sap, .kb-chu .sap::before { background: #f59e0b; }
.kb-thanh .on, .kb-chu .on::before { background: #16a34a; } .kb-thanh .chua { background: #cbd5e1; }
.kb-chu { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--mo); }
.kb-chu .d::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 0; }
.kb-ds { display: flex; flex-direction: column; gap: 8px; padding: 10px; overflow-y: auto; max-height: 68vh; }
.kb-the { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: #fff; border: 1px solid var(--vien); border-left: 4px solid #16a34a;
  border-radius: 10px; color: var(--chu); text-decoration: none; box-shadow: 0 1px 2px rgba(15,23,42,.05); transition: box-shadow .15s, transform .15s; }
.kb-the:hover { box-shadow: 0 4px 14px rgba(15,23,42,.1); transform: translateY(-1px); text-decoration: none; }
.kb-the[hidden] { display: none; }
.kb-the.qua { border-left-color: #dc2626; background: #fff5f5; } .kb-the.sap { border-left-color: #f59e0b; background: #fffbeb; } .kb-the.chua { border-left-color: #94a3b8; }
.kb-the.nctn { box-shadow: inset 0 0 0 1px #7c3aed; }
.kb-han { font-size: 12px; font-weight: 600; color: #15803d; }
.kb-the.qua .kb-han { color: #b91c1c; } .kb-the.sap .kb-han { color: #b45309; } .kb-the.chua .kb-han { color: var(--mo); }
.kb-ten { font-size: 14px; font-weight: 500; line-height: 1.35; }
.kb-phu { font-size: 12px; color: var(--mo); }
.kb-nhan { display: flex; gap: 4px; } .kb-nhan i { font-style: normal; font-size: 11px; }
.kb-excel > summary { cursor: pointer; font-weight: 600; color: var(--xanh); }
.kb-excel[open] > summary { margin-bottom: 12px; }
@media (max-width: 760px) { .kanban { grid-template-columns: repeat(4, 82vw); scroll-snap-type: x mandatory; } .kb-cot { scroll-snap-align: start; } .kb-ds { max-height: 60vh; } }
@media (prefers-reduced-motion: reduce) { .kb-the { transition: none; } .kb-the:hover { transform: none; } }
/* Xếp hạng xã đặt cạnh bản đồ: gọn, mỗi xã một dòng */
.db-dia-ban .bang-xa td { white-space: nowrap; }
.db-dia-ban .bang-xa td:nth-child(3) { min-width: 110px; }
.db-dia-ban .bang-xa td:last-child { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
/* Luồng giải quyết: số bị can dưới số vụ (điều tra, truy tố, xét xử) */
.db .buoc .bon button em { font-style: normal; font-size: 11px; color: var(--mo); margin-top: 1px; white-space: nowrap; }
.db .buoc .bon button.con em { color: rgba(255,255,255,.9); }
.db .mui-ten .mt-bc { font-size: 11px; color: var(--mo); white-space: nowrap; }

/* Sơ đồ địa giới: KSV theo dõi từng xã */
.bd-ksv { margin: 4px 0 8px; font-size: 13.5px; color: var(--xanh); background: var(--nhat-2); border-radius: 8px; padding: 6px 10px; }
.bd-phan-cong { margin-top: 10px; border: 1px solid var(--vien); border-radius: 10px; padding: 10px 12px; background: #fff; }
.bd-pc-dau { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; color: var(--xanh); }
.bd-phan-cong ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bd-phan-cong li { display: grid; grid-template-columns: 150px 1fr; gap: 8px; font-size: 12.5px; padding: 3px 0; border-top: 1px solid var(--vien-3); }
.bd-phan-cong li:first-child { border-top: 0; }
.bd-pc-ksv { font-weight: 600; color: var(--chu); }
.bd-pc-xa { color: var(--chu-2); }
.bd-phan-cong li.chua .bd-pc-ksv { color: var(--do); }
@media (max-width: 520px) { .bd-phan-cong li { grid-template-columns: 1fr; gap: 0; } }

/* ===== Thêm nguồn tin bằng ảnh chụp: ảnh gốc – OCR – trường trích xuất ===== */
.doc-anh { padding: 16px 20px; border: 2px dashed var(--xanh-3); background: var(--nhat-2); margin-bottom: 16px; }
.doc-anh-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.doc-anh-ic { width: 44px; height: 44px; border-radius: 10px; background: var(--xanh); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.doc-anh-gt { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; color: var(--xanh); }
.doc-anh-ba { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.da-cot { background: #fff; border: 1px solid var(--vien); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.da-cot h4 { margin: 0; font-size: 14px; color: var(--xanh); }
.da-goc { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow: auto; }
.da-goc img { width: 100%; border: 1px solid var(--vien-3); border-radius: 6px; }
.da-goc object { width: 100%; height: 60vh; }
.da-ocr { margin: 0; white-space: pre-wrap; font-family: inherit; font-size: 14px; line-height: 1.6; text-align: justify; max-height: 70vh; overflow: auto; background: var(--nhat-2); border-radius: 8px; padding: 10px; }
.da-truong { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.da-truong dt { color: var(--mo); } .da-truong dd { margin: 0; font-weight: 500; white-space: pre-wrap; max-height: 140px; overflow: auto; }
.da-truong dd.trong { color: var(--cam, #b45309); font-weight: 400; font-style: italic; }
.da-canh-bao { margin: 0; padding-left: 0; list-style: none; font-size: 12.5px; color: #b45309; }
.ai-dien { background: #fff8db !important; border-color: #f2c94c !important; }
@media (max-width: 1100px) { .doc-anh-ba { grid-template-columns: minmax(0, 1fr); } }

/* Tem mã QR dán bìa hồ sơ */
.tem-trang { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 0; }
.tem-thao-tac { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 720px; }
.tem-qr { width: var(--co, 40mm); height: var(--co, 40mm); background: #fff; }
.tem-qr svg { width: 100%; height: 100%; display: block; }
@media print {
  body:has(.tem-trang) .dau, body:has(.tem-trang) .ben, body:has(.tem-trang) .khong-in, body:has(.tem-trang) .fab-chup { display: none !important; }
  body:has(.tem-trang) .noi-dung { padding: 0; }
  .tem-trang { padding: 0; align-items: flex-start; }
}
.che-do-doc { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; font-size: 13px; color: var(--chu-2); }
.che-do-doc label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* Nhập nguồn tin từ ảnh: văn bản gốc | OCR | form nguồn tin đặt cạnh nhau để đối chiếu */
.nhap-doi-chieu.co-anh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
.nhap-doi-chieu.co-anh > .doc-anh { grid-column: 1 / -1; margin-bottom: 0; }
.nhap-doi-chieu.co-anh > .da-cot { position: sticky; top: 72px; max-height: calc(100vh - 90px); }
.nhap-doi-chieu.co-anh > .da-cot .da-goc, .nhap-doi-chieu.co-anh > .da-cot .da-ocr { max-height: none; flex: 1; min-height: 0; }
.nhap-doi-chieu.co-anh > .da-cot-form { min-width: 0; }
.nhap-doi-chieu.co-anh > .da-cot-form .form-don { max-width: none; }
.nhap-doi-chieu.co-anh > .da-cot-form .form-luoi { grid-template-columns: minmax(0, 1fr); }
.da-sau-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; }
.da-sau-doc .da-canh-bao { flex-basis: 100%; }
@media (max-width: 1100px) {
  .nhap-doi-chieu.co-anh { grid-template-columns: minmax(0, 1fr); }
  .nhap-doi-chieu.co-anh > .da-cot { position: static; max-height: 60vh; }
}

/* Gia hạn tạm giữ (nguồn tin): tích lần 1, lần 2 – mỗi lần +03 ngày */
.gia-han-tg { min-width: 190px; }
.gia-han-tg form { margin: 0 0 4px; }
.o-tich-gh { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border: 1px solid var(--vien); border-radius: 8px; font-size: 12.5px; cursor: pointer; }
.o-tich-gh input { margin-top: 2px; width: 16px; height: 16px; flex: none; }
.o-tich-gh span { display: flex; flex-direction: column; }
.o-tich-gh.da { background: #fff4e5; border-color: #f2c94c; }
.o-tich-gh:has(input:disabled) { cursor: default; opacity: .75; }
.han-tg { margin-top: 12px; font-size: 13.5px; }

/* Khởi tố vụ án từ nguồn tin: thanh bước nhập liền mạch vụ án → bị can */
.buoc-kt { padding: 14px 20px; margin-bottom: 16px; border-left: 4px solid var(--xanh); display: flex; flex-direction: column; gap: 10px; }
.buoc-kt-dau { display: flex; flex-direction: column; gap: 2px; }
.buoc-kt-ds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: b; }
.buoc-kt-ds li { counter-increment: b; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--nhat-2); color: var(--chu-2); font-size: 13px; }
.buoc-kt-ds li::before { content: counter(b); display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: #fff; border: 1px solid var(--vien); font-size: 12px; }
.buoc-kt-ds li.xong { color: #1e6b3a; background: #e7f5ec; }
.buoc-kt-ds li.xong::before { content: "✓"; border-color: #9fd3b0; }
.buoc-kt-ds li.dang { color: #fff; background: var(--xanh); font-weight: 600; }
.buoc-kt-ds li.dang::before { color: var(--xanh); border-color: #fff; }
.buoc-kt-giu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Khối đọc ảnh văn bản ở trang nhập lệnh, quyết định, bị can, biện pháp ngăn chặn */
.nhap-doi-chieu.co-anh > .da-cot-form.luoi-ben { grid-template-columns: minmax(0, 1fr); }
.nhap-doi-chieu.co-anh > .da-cot-form.luoi-ben > aside { display: none; }
.doc-anh-gon { padding: 10px 14px; border-width: 1px; }
.doc-anh-gon .doc-anh-ic { width: 34px; height: 34px; font-size: 17px; }
label.ai-dien { background: #fff8db; border-radius: 6px; }

/* Xoá hồ sơ: nằm cuối trang sửa, thu gọn và nhạt để không chướng mắt */
.xoa-cuoi-form { margin-top: 24px; max-width: 760px; }
.xoa-cuoi-form .xoa-ho-so { background: transparent; border-style: dashed; border-color: var(--vien); }
.xoa-cuoi-form .xoa-ho-so > summary { font-weight: 500; font-size: 13px; color: var(--chu-2); }
.xoa-cuoi-form .xoa-ho-so[open] { background: var(--do-n, #fdecec); border-color: var(--do-2, #f5c2c0); }
.xoa-cuoi-form .xoa-ho-so[open] > summary { color: var(--do, #b91c1c); }

/* Bảng tin – báo nhanh một chạm (điện thoại) */
.bao-nhanh { margin-bottom: 18px; gap: 10px; }
.bao-nhanh h2 { margin: 0; font-size: 16px; }
.bao-nhanh form { display: flex; flex-direction: column; gap: 10px; }
.bao-nhanh-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.bao-nhanh-luoi button { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; text-align: left;
  border: 1px solid var(--vien); border-radius: 12px; background: var(--nhat-2); color: var(--xanh); font: inherit; font-weight: 600; cursor: pointer; }
.bao-nhanh-luoi button span { font-size: 20px; }
.bao-nhanh-luoi button:hover, .bao-nhanh-luoi button:active { background: var(--xanh); color: #fff; }
.bao-nhanh input[name=ghi_them] { height: 42px; }
.vua-bao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.vua-bao form { margin-left: auto; }
@media (max-width: 860px) { .bao-nhanh-luoi { grid-template-columns: 1fr 1fr; } .bao-nhanh-luoi button { font-size: 13.5px; min-height: 48px; padding: 6px 10px; gap: 8px; } }

/* Thanh bên: số việc quá hạn / cần xử lý như số tin nhắn mới (hết việc thì tự ẩn) */
.ben .so-do { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--do-3); color: #fff;
  font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; flex-shrink: 0; }

/* Kỳ thống kê: khối báo cáo tuần tự động */
.bct-tu-dong { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0; }
.bct-tu-dong > div { display: flex; flex-direction: column; gap: 4px; flex: 1 1 420px; }

/* Tiền THA: danh sách người đã nhận / xác nhận thông báo */
.xn-tha summary { list-style: none; cursor: pointer; display: inline-block; margin-bottom: 4px; }
.xn-tha summary::-webkit-details-marker { display: none; }
.xn-tha ul { margin: 4px 0 6px; padding-left: 4px; list-style: none; font-size: 12.5px; }

/* Mẫu nhập liệu Hình sự (kỳ thống kê) */
.mhs-gt { font-size: 13px; }
.mhs-sua-mau { border: 2px solid #f0a020; padding: 0 4px; border-radius: 4px; }
.mhs-loi-mau { color: #b42318; }
.mhs-khung { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
.mhs-muc-luc { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 160px); overflow: auto;
  background: var(--the); border: 1px solid var(--vien); border-radius: 12px; padding: 8px; }
.mhs-muc-luc a { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; font-size: 13px; color: var(--chu); text-decoration: none; }
.mhs-muc-luc a:hover { background: var(--nhat-2); }
.mhs-muc-luc i { width: 8px; height: 8px; border-radius: 4px; margin-top: 6px; flex: none; background: var(--vien); }
.mhs-muc-luc i.ok { background: #2e9e5b; } .mhs-muc-luc i.loi { background: #d92d20; }
.mhs-noi-dung { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mhs-muc { background: var(--the); border: 1px solid var(--vien); border-left: 4px solid #2e9e5b; border-radius: 12px; }
.mhs-muc:has(.mhs-dau-loi) { border-left-color: #d92d20; }
.mhs-muc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-weight: 600; }
.mhs-muc > summary::-webkit-details-marker { display: none; }
.mhs-muc > summary::after { content: "›"; margin-left: 8px; transition: transform .15s; color: var(--chu-2); }
.mhs-muc[open] > summary::after { transform: rotate(90deg); }
.mhs-ten { flex: 1; }
.mhs-dau { font-size: 12px; font-weight: 500; }
.mhs-dau-ok { color: #1e6b3a; } .mhs-dau-loi { color: #b42318; }
.mhs-than { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.mhs-mt { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.mhs-mt textarea { width: 100%; font: inherit; font-size: 13.5px; line-height: 1.5; }
.mhs-bang { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mhs-bang th { text-align: left; font-size: 12px; color: var(--chu-2); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--vien); }
.mhs-bang td { padding: 4px 8px; border-bottom: 1px solid var(--vien-3, #eef0f3); }
.mhs-bang .so { text-align: right; width: 110px; }
.mhs-bang tr.mhs-tong td { background: #fdecec; font-weight: 600; text-transform: uppercase; font-size: 12.5px; }
.mhs-bang tr.mhs-nhom td { font-weight: 600; color: var(--chu-2); }
.mhs-so { width: 90px; height: 32px; text-align: right; }
.mhs-chu { width: 100%; height: 32px; min-width: 160px; }
.mhs-so.mhs-sua { border: 2px solid #f0a020 !important; }
.mhs-loi-o { border: 2px solid #d92d20 !important; background: #fff1f0 !important; }
.mhs-ds-dau { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.mhs-x { border: 0; background: #fdecec; color: #b42318; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; }
.mhs-them { margin-top: 6px; width: 30px; height: 30px; border-radius: 50%; border: 1px dashed #d92d20; color: #d92d20; background: #fff; cursor: pointer; font-size: 16px; }
.mhs-loi { margin: 0; padding: 0; list-style: none; font-size: 13px; color: #b42318; display: flex; flex-direction: column; gap: 2px; }
.mhs-chan { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px;
  background: var(--the); border: 1px solid var(--vien); border-radius: 12px; box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
.mhs-tt { font-size: 13px; padding: 6px 12px; border-radius: 8px; }
.mhs-tt.ok { background: #e7f5ec; color: #1e6b3a; } .mhs-tt.loi { background: #fdecec; color: #b42318; }
.mhs-nut { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) { .mhs-khung { grid-template-columns: minmax(0, 1fr); } .mhs-muc-luc { display: none; } }
.mhs-dg { font-size: 12px; color: var(--chu-2); line-height: 1.45; min-width: 220px; }
.mhs-dg span[title] { cursor: help; }
.mhs-dg-tay { color: #b54708; }
.mhs-dg-th { width: 45%; }

/* Tra cứu điều, khoản BLHS ngay dưới ô điều luật; trích yếu khi rê chuột */
.goi-y-blhs { margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--xanh); background: var(--nhat-2); border-radius: 6px; padding: 4px 8px; cursor: help; }
.goi-y-blhs.loi { color: #b54708; background: #fff6e5; }
.co-trich-yeu[title]:not([title=""]) { cursor: help; text-decoration: underline dotted var(--chu-2); text-underline-offset: 3px; }
.mhs-chuong { font-weight: 400; font-size: 12.5px; color: var(--chu-2); }

/* Bảng tin – kê khai hoạt động theo giai đoạn */
.ke-khai { margin-bottom: 18px; gap: 10px; }
.ke-khai h2 { margin: 0; font-size: 16px; }
.kk-gd { display: flex; gap: 6px; flex-wrap: wrap; }
.kk-gd button { border: 1px solid var(--vien); background: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 600; color: var(--chu-2); cursor: pointer; }
.kk-gd button span { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--nhat-2); color: var(--xanh); font-size: 12px; }
.kk-gd button.dang { background: var(--xanh); color: #fff; border-color: var(--xanh); }
.kk-gd button.dang span { background: rgba(255,255,255,.25); color: #fff; }
.kk-hd { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.kk-hd button { min-height: 46px; padding: 6px 12px; text-align: left; border: 1px solid var(--vien); border-radius: 10px; background: var(--nhat-2);
  color: var(--xanh); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.kk-hd button:hover { border-color: var(--xanh); }
.kk-hd button.dang { background: var(--xanh); color: #fff; }
.kk-form { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 2px solid var(--xanh); border-radius: 12px; background: #fff; }
.kk-dau { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.kk-dau b { flex: 1; color: var(--xanh); }
.kk-vu { display: flex; flex-direction: column; gap: 6px; }
.kk-chip { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.kk-chip label { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--vien); border-radius: 8px; font-size: 13px; cursor: pointer; }
.kk-chip label:has(input:checked) { border-color: var(--xanh); background: var(--nhat-2); }
.kk-vu input[name=vu_viec_khac] { height: 40px; }
.kk-them { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kk-luot { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.kk-luot input { width: 64px; height: 36px; text-align: center; }
.kk-anh { cursor: pointer; }
.kk-dang { height: 46px; font-size: 15px; }
@media (max-width: 860px) { .kk-hd { grid-template-columns: 1fr 1fr; } .kk-hd button { font-size: 13px; } }
.dang-khac > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; }
.dang-khac > summary::-webkit-details-marker { display: none; }
.dang-khac > summary h2 { margin: 0; }
.dang-khac[open] > summary { margin-bottom: 10px; }

/* Bài đăng kiểu mạng xã hội */
.bai.fb { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.fb-dau { display: flex; align-items: center; gap: 10px; }
.fb-ai { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.fb-ai .gio { font-size: 12px; color: var(--chu-2); }
.fb-vu { display: block; font-size: 13px; padding: 6px 10px; border-radius: 8px; background: var(--nhat-2); color: var(--xanh); text-decoration: none; }
.fb-anh { width: 100%; max-height: 420px; object-fit: cover; border-radius: 10px; }
.fb-dem { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--chu-2); min-height: 4px; }
.fb-nut { display: flex; gap: 4px; border-top: 1px solid var(--vien); border-bottom: 1px solid var(--vien); padding: 4px 0; }
.fb-nut form { display: contents; }
.fb-nut button { flex: 1; border: 0; background: none; padding: 8px; border-radius: 8px; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--chu-2); cursor: pointer; }
.fb-nut button:hover { background: var(--nhat-2); }
.fb-nut button.da { color: var(--xanh); }
.fb-c { display: flex; gap: 8px; font-size: 13px; }
.fb-c > div:last-child { background: var(--nhat-2); border-radius: 12px; padding: 6px 10px; }
.ava.nho-ava { width: 28px; height: 28px; font-size: 11px; flex: none; }
.fb-bl { display: flex; gap: 6px; }
.fb-bl input { flex: 1; height: 36px; border-radius: 18px; padding: 0 14px; }
.loc-bt > summary { cursor: pointer; font-size: 13.5px; color: var(--chu-2); list-style: none; }
.loc-bt > summary::-webkit-details-marker { display: none; }
.loc-bt-o { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.loc-bt-o input { flex: 1 1 220px; height: 36px; }
.loc-bt-o select { height: 36px; }

/* Thông tin sổ Excel cũ trong hồ sơ */
.se-dong { padding: 10px 0; border-bottom: 1px dashed var(--vien); }
.se-dong:last-child { border-bottom: 0; }
.the.se-dong { padding: 12px 16px; margin-bottom: 10px; border-bottom: 1px solid var(--vien); }
.se-dong h4 { margin: 0 0 6px; font-size: 14px; }
.se-o { display: grid; grid-template-columns: minmax(140px, 240px) 1fr; gap: 3px 12px; margin: 0; font-size: 13px; }
.se-o dt { color: var(--chu-2); }
.se-o dd { margin: 0; word-break: break-word; }
@media (max-width: 640px) { .se-o { grid-template-columns: 1fr; } .se-o dd { margin-bottom: 4px; } }

/* Ảnh chụp từ điện thoại chờ dùng trên máy tính */
.anh-dt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: #fff7e6; border: 1px solid #f5c26b; animation: anh-dt-nhay 1.2s ease 2; }
.anh-dt-nho { display: inline-flex; gap: 6px; }
.anh-dt-nho img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--vien); }
@keyframes anh-dt-nhay { 50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, .35); } }
.chup-gui { padding: 18px 20px; }
.chup-gui .nut-lon { height: 56px; font-size: 17px; padding: 0 22px; }