/* ============================================================================
GIAO DIỆN DÙNG CHUNG — Hệ thống Công nợ điện ADP
FILE: assets/style.css
----------------------------------------------------------------------------
Giữ nguyên bộ TOKEN MÀU + FONT của ADP (đồng bộ với trang chủ index_home).
Muốn đổi màu/giao diện toàn hệ thống: chỉ sửa phần :root bên dưới.
============================================================================ */
/* --- 1) TOKEN THIẾT KẾ ADP — Enterprise Dashboard (theo bản DEMO 2026) --- */
/* LƯỢT 1: đồng bộ bảng màu + bo góc theo file demo giao diện Lam gửi.
Chỉ sửa trong :root → áp cho toàn hệ thống, không đụng HTML/PHP. */
:root{
--font:'Be Vietnam Pro', 'Segoe UI', system-ui, Arial, sans-serif;
--white:#FFFFFF;
--bg:#EEF1F6; /* nền tổng thể (demo) */
--bg-soft:#F5F7FA;
--line:#E1E5EC;
--line-2:#EEF0F4;
--navy:#1A1F6B; /* navy demo — đậm hơn bản cũ #2A2E72 */
--navy-2:#141863;
--navy-tint:#F6F7FD;
--navy-line:#E7E9F6;
--orange:#FF6600; /* cam demo — rực hơn bản cũ #F2761C */
--orange-dark:#E25A00;
--orange-tint:#FFF0E6;
--amber:#FFC93C;
--blue:#2563EB; --blue-tint:#E7EEFD;
--green:#16A34A; --green-tint:#E4F6EB;
--teal:#0EA5A5; --teal-tint:#DBF3F3;
--tim:#7C3AED; --tim-tint:#EDE7FB;
--indigo:#2563EB; --indigo-tint:#E7EEFD; /* Điều chỉnh (Adjustment) — cobalt, KHÔNG dùng green/teal */
--red:#DC2626; --red-tint:#FBE6E6;
--cam-tint:#FFF0E6;
--text:#161A33; /* chữ demo */
--text-muted:#667085;
--text-mo:#98A0AE; /* chữ mờ cấp 3 (demo) */
/* ====== KÍCH THƯỚC BẢNG (chỉnh 1 chỗ, áp cho MỌI bảng cùng lúc) ======
Đợt 2 (H3): hệ khoảng cách BẢNG DÙNG CHUNG — mọi bảng .data lấy padding/
typography từ đây. Giữ NGUYÊN giá trị hiệu dụng cũ (11px dọc, 14px ngang)
để không xê dịch bảng nào; chỉ tách thành biến có tên rõ ràng. */
--table-cell-y: 11px; /* padding DỌC của th/td */
--table-cell-x: 14px; /* padding NGANG của th/td */
--table-head-x: 14px; /* padding NGANG riêng cho thead (mặc định = cell-x) */
--table-head-height: 44px;
--table-row-height: 40px;
--bang-chu: 13px;
--bang-dem: var(--table-cell-y) var(--table-cell-x);
--radius-lg:16px; /* demo: thẻ/card tròn hơn */
--radius-md:12px;
--radius-sm:10px;
--sidebar-w:224px; /* UI-01: chuẩn Desktop 224px; ≥1600px nới 232px (media dưới) */
--topbar-h:64px;
--shadow-sm:0 1px 2px rgba(16,24,40,.04);
--shadow-card:0 1px 3px rgba(16,24,40,.05);
--shadow-menu:0 14px 34px rgba(16,24,40,.16);
--control-h:36px;
--control-radius:8px;
--control-font:12.5px;
--toolbar-divider-h:26px;
--toolbar-divider-space:10px;
--icon-label:16px;
--icon-action:18px;
--icon-kpi:26px;
--footer-row-h:48px;
}
/* P3-C0-M33 FIX-03 — generic actionable module badges. */
.adp-module-badge{
box-sizing:border-box;margin-left:auto;min-width:26px;height:26px;padding:0 7px;border-radius:7px;
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
font-size:12.5px;line-height:1;font-weight:800;border:1px solid transparent;
}
.adp-module-badge.tone-danger{color:#fff;background:#DC2626;border-color:#DC2626;}
.adp-module-badge.tone-warning{color:#B54708;background:#FEF0C7;border-color:#FEDF89;}
.adp-module-badge.tone-info{color:#175CD3;background:#EFF8FF;border-color:#B2DDFF;}
.qt-tab .adp-module-badge{margin-left:auto;}
.side-link.active .adp-module-badge,.qt-tab.active .adp-module-badge{color:#DC2626;background:#fff;border-color:#DC2626;}
/* Quản trị → Tài khoản security information architecture. */
.qt-security-section,.qt-security-recent{margin:0 0 12px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);}
.qt-security-section{overflow:hidden;}
.qt-security-recent{overflow:visible;}
.qt-security-heading{display:flex;align-items:center;justify-content:flex-start;gap:calc(var(--toolbar-divider-space) * 2 + 1px);padding:13px 18px;border-bottom:1px solid var(--line);}
.qt-security-heading h2{margin:0;color:var(--text);font-size:15px;}
.qt-security-subhead h4,.qt-security-drawer h4{margin:0;color:var(--navy);font-size:15px;}
.qt-security-status-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:3px 9px;border:1px solid transparent;border-radius:999px;font-size:11.5px;font-weight:650;line-height:16px;white-space:nowrap;}
.qt-security-status-chip::before{content:"";position:absolute;left:calc(-1px - var(--toolbar-divider-space));top:50%;width:1px;height:var(--toolbar-divider-h);background:var(--line);transform:translateY(-50%);}
.qt-security-status-chip.zero{color:#067647;background:#ECFDF3;border-color:#ABEFC6;}
.qt-security-status-chip.active{color:#B42318;background:#FEF3F2;border-color:#FECDCA;}
.qt-security-empty{margin:12px 18px;padding:10px 12px;border-radius:9px;background:#ECFDF3;color:#067647;font-size:13px;}
.qt-security-issues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;}
.qt-security-issue{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;border:1px solid #FEDF89;border-radius:10px;background:#FFFAEB;font-size:12.5px;}
.qt-security-issue>b{color:#B54708}.qt-security-issue>span{flex:1 1 240px;color:#475467}.qt-security-issue form{margin:0;}
.qt-security-open{box-sizing:border-box;min-height:30px;border:1px solid #D0D5DD!important;background:#fff!important;color:var(--navy)!important;box-shadow:none!important;transform:none!important;}
.qt-security-open:hover{border-color:var(--navy)!important;background:var(--navy)!important;color:#fff!important;}
.qt-security-issue.danger{border-color:#FECDCA;background:#FEF3F2}.qt-security-issue.danger>b{color:#B42318}
.qt-security-more{padding:10px 14px;text-align:center;border-top:1px solid var(--line);}
.qt-deleted-user{display:inline-block;margin-left:4px;color:#667085;font-size:10px;background:#F2F4F7;border-radius:999px;padding:2px 6px;}
.qt-nut-security{color:#175CD3;background:#EFF8FF;border-color:#B2DDFF;}
.drawer.qt-security-drawer{width:min(1080px,calc(100vw - 24px));max-width:calc(100vw - 24px);overflow-x:hidden;}
.qt-security-drawer-body{--qt-security-space:12px;--qt-security-history-space:16px;--qt-security-control-h:28px;min-width:0;overflow-x:hidden;}
.qt-security-summary-grid{--qt-summary-pad-y:12px;--qt-summary-pad-x:12px;--qt-summary-label-h:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:8px;align-items:stretch;}
.qt-security-summary-item{box-sizing:border-box;display:grid;grid-template-rows:var(--qt-summary-label-h) minmax(24px,1fr);align-content:stretch;gap:6px;min-height:86px;height:100%;padding:var(--qt-summary-pad-y) var(--qt-summary-pad-x);background:#F8FAFC;border-radius:8px;font-size:12px;}
.qt-security-summary-label{display:flex;align-items:flex-start;min-height:var(--qt-summary-label-h);color:var(--text-muted);font-size:12px;line-height:16px;}
.qt-security-summary-value{display:flex;align-items:center;min-height:24px;line-height:18px;}
.qt-security-summary-value b{color:#101828;font-size:12.5px;line-height:18px;overflow-wrap:anywhere;}
.qt-summary-chip{box-sizing:border-box;justify-content:center;min-width:88px;min-height:24px;}
.qt-security-subhead{display:flex;align-items:center;justify-content:space-between;gap:var(--qt-security-space);min-height:36px;margin-bottom:var(--qt-security-space)}.qt-security-subhead h4{margin:0;}
.qt-security-limit-row{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;padding:var(--qt-security-space) 0;border-top:0;box-shadow:inset 0 1px 0 var(--line);font-size:12px;}
.qt-security-limit-row form{margin:0;flex-shrink:0}.qt-security-load-more{display:block;margin:10px auto 0;}
.qt-security-limit-copy{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;gap:3px;min-width:0;line-height:17px;}
.qt-security-limit-copy b{color:var(--text);font-weight:600;}.qt-security-limit-copy span{color:var(--text-muted);}
.qt-security-limit-copy .qt-security-hold-note{color:#B54708;font-weight:600;}
.qt-security-drawer .qt-security-empty{box-sizing:border-box;width:100%;margin:12px 0 0;padding:11px 12px;line-height:18px;}
@media(max-width:900px){.qt-security-issues{grid-template-columns:1fr}.qt-security-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.drawer.qt-security-drawer{width:100vw;max-width:100vw;}}
@media(max-width:560px){.qt-security-summary-grid{grid-template-columns:1fr}.qt-security-subhead,.qt-security-limit-row{align-items:flex-start;flex-direction:column;}}
/* ============================================================================
P3-C0 M31 — Refund table/detail parity additions
Shared `.debt-detail-drawer`, `.detail-*`, `.ct-ls-*`, `.btn-chitiet` and
`.th-sap` rules remain the visual authority; only Refund form/content needs
local layout rules here.
========================================================================== */
.ht-list .sem-text,.ht-list .sem-id{white-space:normal;}
.page-hoantien{width:100%;max-width:100%;min-width:0;overflow-x:clip;}
.page-hoantien .ht-list{width:100%;max-width:100%;min-width:0;overflow:hidden;}
.page-hoantien .ht-list .bang-scroll{width:100%;max-width:100%;min-width:0;overflow:visible;}
@media(max-width:1000px){
.page-hoantien .ht-list .bang-scroll{overflow-x:auto;overflow-y:visible;}
.page-hoantien .ht-list table.data thead th{position:static;}
}
@media(max-width:900px){
.page-content-hoantien{width:100%;max-width:100vw;overflow-x:hidden;}
.page-content-hoantien .page-hoantien{width:100%;max-width:100%;}
}
.ht-id{font-weight:600;color:var(--navy);}
.ht-list-primary,.ht-list-amount{font-weight:600;color:var(--text);}
.ht-list-code .muted{margin-top:2px;font-size:11.5px;}
.ht-list-refund{min-width:210px;line-height:1.4;}
.ht-list-refund > * + *{margin-top:2px;}
.ht-transfer-line{max-width:360px;color:var(--text-muted);font-size:12px;overflow-wrap:anywhere;}
.ht-kpi-money{font-size:18px;}
.ht-error{color:var(--red);}
.ht-toolbar-controls{display:flex;flex:1 1 560px;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;}
.ht-toolbar-controls select{max-width:210px;}
.ht-toolbar-export{margin-left:auto;}
.ht-drawer .detail-label{font-weight:500;}
.ht-drawer .detail-value{font-weight:400;}
.ht-drawer .detail-row--long .detail-value{font-weight:400;}
.ht-drawer .detail-business-value{font-weight:650;}
.ht-drawer .ct-ls-sub{font-weight:400;}
#ht-drawer-title{gap:4px;}
#ht-drawer .detail-header-secondary{box-sizing:border-box;align-self:flex-start;width:max-content;max-width:100%;padding:3px 8px;border-radius:999px;font-weight:700;line-height:1.3;}
#ht-drawer .detail-header-secondary--waiting{background:var(--orange-tint);color:var(--orange-dark);}
#ht-drawer .detail-header-secondary--unknown{background:var(--tim-tint);color:var(--tim);}
#ht-drawer .detail-header-secondary--completed{background:var(--green-tint);color:var(--green);}
.ht-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 12px;min-width:0;}
.ht-form-grid > label,.ht-complete-form > label{display:block;min-width:0;color:var(--text-muted);font-size:12px;font-weight:500;}
.ht-form-grid > label > span,.ht-complete-form > label > span{display:block;margin-bottom:5px;}
.ht-form-grid input,.ht-form-grid textarea,.ht-complete-form input{
box-sizing:border-box;width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--text);font:inherit;font-size:13px;line-height:1.4;
}
.ht-form-grid input,.ht-complete-form input{height:38px;padding:0 11px;}
.ht-form-grid textarea{height:84px;min-height:84px;max-height:84px;padding:9px 11px;resize:none;overflow-y:auto;overflow-wrap:anywhere;}
.ht-form-grid input:focus,.ht-form-grid textarea:focus,.ht-complete-form input:focus{border-color:var(--teal);outline:2px solid rgba(5,150,105,.12);outline-offset:0;}
.ht-form-grid .wide{grid-column:1/-1;}
.ht-code-type{display:flex;align-items:flex-end;gap:0;min-width:0;margin:0;padding:0;border:0;}
.ht-code-type legend{display:block;width:100%;margin:0 0 5px;color:var(--text-muted);font-size:12px;font-weight:500;}
.ht-code-type label{position:relative;display:inline-flex;flex:1 1 0;min-width:0;cursor:pointer;}
.ht-code-type input[type="radio"]{position:absolute;opacity:0;pointer-events:none;}
.ht-code-type label span{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:38px;border:1px solid var(--line);background:var(--white);color:var(--text-muted);font-size:12.5px;font-weight:700;}
.ht-code-type label:first-of-type span{border-radius:8px 0 0 8px;}
.ht-code-type label:last-of-type span{margin-left:-1px;border-radius:0 8px 8px 0;}
/* SH/NSH selected semantics: SH=cobalt blue, NSH=violet. No teal/navy/green.
Geometry, height, radius and typography are shared; only the selected color
differs by position (SH is always the first option, NSH the second). */
.ht-code-type label:first-of-type input:checked + span{position:relative;z-index:1;border-color:#2563EB;background:#EFF6FF;color:#2563EB;}
.ht-code-type label:last-of-type input:checked + span{position:relative;z-index:1;border-color:#7C3AED;background:#F5F3FF;color:#7C3AED;}
.ht-code-type label:first-of-type input:focus-visible + span{outline:2px solid rgba(37,99,235,.30);outline-offset:1px;}
.ht-code-type label:last-of-type input:focus-visible + span{outline:2px solid rgba(124,58,237,.32);outline-offset:1px;}
.ht-form-buttons{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:14px;}
.ht-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:38px;padding:0;}
.ht-actions form{display:flex;align-items:center;margin:0;}
.ht-actions .btn,.ht-form-buttons .btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:38px;min-height:38px;padding:0 14px;border-radius:8px;line-height:1;}
.page-hoantien .detail-section--workflow > .detail-disclosure-body{margin-top:0;padding:12px 9px;}
#ht-drawer .detail-section--workflow + .detail-disclosure{margin-top:0;}
.page-hoantien .ht-actions .ht-state-action{border-color:var(--state-border)!important;box-sizing:border-box!important;height:40px!important;min-height:40px!important;padding:0 16px!important;border-style:solid!important;border-width:1px!important;border-radius:10px!important;background:var(--white)!important;color:var(--state-color)!important;box-shadow:none!important;transform:none!important;font-weight:700!important;transition:background .14s,border-color .14s,color .14s,box-shadow .14s!important;}
.page-hoantien .ht-actions .ht-state-action:hover:not(:disabled){border-color:var(--state-border)!important;background:var(--state-hover)!important;color:var(--state-active)!important;box-shadow:0 2px 8px var(--state-shadow)!important;}
.page-hoantien .ht-actions .ht-state-action:active:not(:disabled){border-color:var(--state-color)!important;background:var(--state-active-bg)!important;color:var(--state-active)!important;box-shadow:none!important;}
.page-hoantien .ht-actions .ht-state-action:focus-visible{outline:2px solid var(--state-ring);outline-offset:2px;box-shadow:none!important;}
.page-hoantien .ht-actions .ht-state-unknown{--state-color:#7C3AED;--state-border:#8B5CF6;--state-hover:#F5F3FF;--state-active-bg:#EDE9FE;--state-active:#6D28D9;--state-ring:rgba(124,58,237,.38);--state-shadow:rgba(124,58,237,.14);}
.page-hoantien .ht-actions .ht-state-waiting{--state-color:#EA580C;--state-border:#F97316;--state-hover:#FFF7ED;--state-active-bg:#FFEDD5;--state-active:#C2410C;--state-ring:rgba(234,88,12,.34);--state-shadow:rgba(234,88,12,.14);}
.page-hoantien .ht-actions .ht-return-btn{--state-color:#2563EB;--state-border:#2563EB;--state-hover:#EFF6FF;--state-active-bg:#DBEAFE;--state-active:#1D4ED8;--state-ring:rgba(37,99,235,.34);--state-shadow:rgba(37,99,235,.14);}
.ht-save-btn{border:1px solid #15803D;background:#15803D;color:#fff;box-shadow:0 1px 2px rgba(21,128,61,.18);}
.ht-save-btn:hover:not(:disabled){background:#116B34;border-color:#116B34;}
.ht-save-btn:disabled{border-color:#15803D!important;background:#15803D!important;color:#fff!important;box-shadow:none;cursor:not-allowed;opacity:.55;}
.ht-complete-btn{border:1px solid #15803D;background:#15803D;color:#fff;box-shadow:0 1px 2px rgba(21,128,61,.18);}
.ht-complete-btn:hover:not(:disabled){background:#116B34;border-color:#116B34;}
.ht-complete-btn:disabled{border-color:#15803D!important;background:#15803D!important;color:#fff!important;box-shadow:none;cursor:not-allowed;opacity:.55;}
.ht-inline-error{margin-top:9px;color:var(--red);font-size:12px;font-weight:500;line-height:1.4;}
.ht-complete-form input{margin-top:0;}
/* RF06-RF01: "Thay đổi trạng thái" row — two equal-width buttons that use the
full available row width (fluid 1fr columns, not fixed 190px), so no unused
right-side space remains. Stacks to one column on narrow widths. */
.page-hoantien .detail-section--workflow .ht-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.page-hoantien .detail-section--workflow .ht-actions form{margin:0;}
.page-hoantien .detail-section--workflow .ht-actions .ht-state-action{width:100%!important;}
@media(max-width:620px){.page-hoantien .detail-section--workflow .ht-actions{grid-template-columns:1fr;}}
@media(max-width:620px){
.ht-toolbar-controls{flex-basis:100%;align-items:stretch;}
.ht-toolbar-controls select{flex:1 1 100%;max-width:none;}
.ht-toolbar-export{margin-left:0;}
.ht-form-grid{grid-template-columns:1fr;}
.ht-form-grid .wide{grid-column:auto;}
.ht-actions{flex-direction:column;align-items:stretch;}
.ht-actions .btn{width:100%;}
}
/* UI-01: từ 1600px trở lên, sidebar rộng 232px (topbar/content/footer tự căn theo biến). */
@media (min-width:1600px){ :root{ --sidebar-w:232px; } }
::selection{background:#FF660033;}
/* --- 2) RESET & NỀN CHUNG --- */
*{box-sizing:border-box;}
html{overflow-y:scroll;}
body{
margin:0; background:var(--bg); color:var(--text);
font-family:var(--font); -webkit-font-smoothing:antialiased; line-height:1.55;
font-size:14px;
}
h1,h2,h3{margin:0; color:var(--text); font-weight:700;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}
button,input,select,textarea{font-family:var(--font);}
/* Ô tìm kiếm: cả nội dung đã nhập và placeholder màu xám đều rút gọn bằng …
khi chiều rộng không đủ, không làm vỡ bố cục thanh công cụ. */
input[type=search]{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
input[type=search]::placeholder{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
input:focus-visible, select:focus-visible, button:focus-visible, textarea:focus-visible, a:focus-visible{
outline:2px solid var(--navy); outline-offset:1px;
}
.ic{width:20px; height:20px; flex-shrink:0;}
/* --- 3) TOPBAR --- */
/* LƯỢT 2: topbar chỉ còn tiêu đề trang + khối user. Logo & ô chọn kỳ nằm ở sidebar. */
.topbar{
height:var(--topbar-h); background:var(--white); border-bottom:1px solid var(--line);
display:flex; align-items:center; justify-content:space-between; gap:16px;
width:calc(100% - var(--sidebar-w)); margin-left:var(--sidebar-w);
padding:0 32px; position:sticky; top:0; z-index:40;
}
.tb-left{display:flex; align-items:center; gap:12px; min-width:0;}
.mobile-nav-trigger,.mobile-nav-head,.mobile-nav-backdrop{display:none;}
/* Tiêu đề trang trên topbar — chữ cam đậm (demo) */
.tb-tieude{
font-size:23px; font-weight:800; color:var(--orange); letter-spacing:-.4px;
margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tb-right{display:flex; align-items:center; gap:12px;}
/* ===== LƯỢT 3: Ô TÌM KIẾM + NÚT NHẬP DỮ LIỆU trên topbar (theo demo) ===== */
.tb-tim{position:relative; width:260px; flex-shrink:1; min-width:150px;}
.tb-tim-ico{
position:absolute; left:12px; top:50%; transform:translateY(-50%);
display:flex; align-items:center; color:var(--text-mo); pointer-events:none;
}
.tb-tim-ico .ic{width:17px; height:17px;}
.tb-tim input[type=search]{
width:100%; height:40px; border:1px solid var(--line); border-radius:10px;
padding:0 12px 0 36px; font-size:13.5px; background:var(--bg-soft); color:var(--text);
transition:border-color .15s, box-shadow .15s, background .15s;
}
.tb-tim input[type=search]::placeholder{color:var(--text-mo); }
.tb-tim input[type=search]:hover{border-color:var(--orange);}
.tb-tim input[type=search]:focus{
outline:none; background:var(--white); border-color:var(--orange);
box-shadow:0 0 0 3px rgba(255,102,0,.15);
}
/* Nút Nhập dữ liệu trên topbar */
/* Nút Nhập dữ liệu — số đo lấy ĐÚNG từ demo: cao 40, padding 0 18, gap 8,
bo 10, chữ 13.5/700, bóng nhẹ. */
.tb-nhap{
height:40px; padding:0 18px; gap:8px; border-radius:10px; flex-shrink:0;
font-size:13.5px; font-weight:700;
box-shadow:0 2px 8px rgba(16,24,40,.16);
}
.tb-nhap .ic{width:17px; height:17px;}
/* REVIEW V2 (H9): "Nhập dữ liệu" và "Nhập XML" dùng CHUNG class .tb-nhap (đã có
sẵn từ trước, không phải class riêng của module Tiền mặt) → gắn đúng cảm giác
tương tác của nút "Ghi nhận" (.tm-btn) tại đây, một nguồn duy nhất cho cả hai
nút, có specificity cao hơn .btn:hover chung nên không bị ghi đè. */
/* UI-01: bỏ translateY để hover KHÔNG dịch chuyển nút; chỉ đổi nền/bóng. */
.tb-nhap:not(:disabled):hover{
background:var(--orange-dark); box-shadow:0 6px 16px rgba(255,102,0,.28);
}
.tb-nhap:not(:disabled):active{
background:#C94F00; box-shadow:0 3px 8px rgba(255,102,0,.22);
}
/* Vạch ngăn giữa nhóm thao tác và khối người dùng */
.tb-vach{width:1px; height:30px; background:var(--line); flex-shrink:0;}
/* Màn hình hẹp: giấu bớt cho khỏi tràn topbar */
@media (max-width:1200px){ .tb-tim{width:190px;} }
@media (max-width:1000px){ .tb-nhap .tb-nhap-chu{display:none;} .tb-nhap{padding:0 12px;} }
@media (max-width:900px){ .topbar{width:100%; margin-left:0;} }
@media (max-width:820px){ .tb-tim{display:none;} }
.tb-home{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text-muted);}
.tb-home:hover{color:var(--navy);}
.tb-home .ic{width:17px; height:17px;}
/* LƯỢT 6 — KHỐI NGƯỜI DÙNG theo đúng ảnh mẫu Lam gửi:
nút VIỀN TRẮNG bo 10px, cao 40px (bằng ô tìm & nút Nhập dữ liệu);
avatar là Ô VUÔNG BO GÓC 30px, nền GRADIENT navy→cam. */
.tb-avatar{
width:30px; height:30px; border-radius:8px; flex-shrink:0;
background:linear-gradient(135deg, var(--navy), var(--orange));
color:#fff; font-weight:700; font-size:13px;
display:flex; align-items:center; justify-content:center;
}
.tb-user-txt{display:flex; flex-direction:column; text-align:left; line-height:1.2;}
.tb-user-txt .ten{font-weight:700; font-size:12.5px; color:var(--text); white-space:nowrap;}
.tb-user-txt .vt{font-size:10.5px; color:var(--text-muted); white-space:nowrap;}
.tb-logout{
padding:8px 16px; border-radius:var(--radius-sm); background:var(--orange); color:#fff;
font-weight:700; font-size:13px;
}
.tb-logout:hover{background:var(--orange-dark);}
/* --- 4) KHUNG SIDEBAR + NỘI DUNG --- */
.app-shell{display:flex; align-items:flex-start; min-height:100vh;}
.sidebar{
width:var(--sidebar-w); flex-shrink:0;
background:var(--white); color:var(--text);
border-right:1px solid #E5E7EB;
position:fixed; top:0; left:0; /* LƯỢT 2: chạy từ đỉnh vì logo nằm trong sidebar */
height:100vh; padding:0;
display:flex; flex-direction:column; overflow-y:auto; z-index:45;
}
.sidebar::-webkit-scrollbar{width:8px;}
.sidebar::-webkit-scrollbar-thumb{background:#D5DAE3; border-radius:8px; border:2px solid #F5F7FA;}
.sidebar::-webkit-scrollbar-thumb:hover{background:#B9C0CD;}
/* --- LƯỢT 2: LOGO + TÊN HỆ THỐNG ở đầu sidebar --- */
/* SỬA (vòng 3): chiều cao khối logo = ĐÚNG --topbar-h (64px) để đường kẻ dưới
logo THẲNG HÀNG với đường kẻ dưới topbar bên phải (Lam khoanh đỏ ở ảnh).
Dùng height cố định + box-sizing:border-box → không lệch dù chữ dài/ngắn. */
.side-brand{
display:flex; align-items:center; gap:11px;
height:var(--topbar-h); padding:0 20px; flex-shrink:0;
border-bottom:1px solid #EEF0F4;
transition:opacity .15s;
}
.side-brand:hover{opacity:.82;}
/* vòng 5: logo 34 → 40px. align-items:center của .side-brand canh logo theo cả
hàng 64px; vì khối chữ cũng canh giữa hàng đó nên logo tự nằm ĐÚNG GIỮA 2 dòng
"ĐIỆN LỰC ADP" và "Quản lý công nợ". */
.side-brand img{width:36px; height:36px; object-fit:contain; flex-shrink:0;}
/* SỬA (vòng 4): line-height 1.15 làm 2 dòng dính nhau. Dùng gap 2px + line-height
riêng từng dòng → "Quản lý công nợ" tách khỏi "ĐIỆN LỰC ADP", vẫn cân giữa khối. */
.side-brand-ten{display:flex; flex-direction:column; gap:2px; min-width:0;}
.side-brand-ten .full{font-weight:800; font-size:14.5px; color:var(--navy); letter-spacing:.2px; line-height:1.2;}
.side-brand-ten .sub{font-size:11px; color:var(--orange); font-weight:700; letter-spacing:.1px; line-height:1.25;}
/* --- LƯỢT 2: THẺ CHỌN KỲ LÀM VIỆC trong sidebar --- */
/* SỬA (vòng 2): cân đối lại theo góp ý của Lam.
- 2 select CHIA ĐÔI đều nhau (mỗi ô 50%) thay vì 84px cứng → không lệch.
- Chevron căn đúng mép phải, padding trái/phải cân, chữ không bị mũi tên đè.
- Chip trạng thái LUÔN hiện: "Hiện tại" (xanh) hoặc "Kỳ cũ"/"Kỳ sau" (xám/cam)
→ không còn khoảng trống trơ trọi khi xem tháng khác. */
.side-ky{padding:14px; border-bottom:1px solid #EEF0F4;}
.side-ky .ky-chon{
background:var(--navy-tint); border:1px solid var(--navy-line);
border-radius:12px; padding:12px 8px; display:block; margin:0;
}
/* Hàng nhãn: nhãn co được, chip không bao giờ bị bóp méo (188px chỗ trống,
nhãn ~102px + chip ~71px → vừa; gán min-width:0 + flex-shrink cho chắc). */
.ky-dau{display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:9px;}
.ky-dau .ky-nhan{min-width:0; overflow:hidden; text-overflow:ellipsis;}
.ky-dau .ky-chip{flex-shrink:0;}
/* SỬA (vòng 4): chữ 10px → 11px theo yêu cầu Lam.
Icon lệch tâm là do line-height:1 — chữ in hoa cao ~8px trong khi icon 14px,
nên hộp chữ và hộp icon không cùng tâm. Bỏ line-height:1, cho line-height
bằng đúng chiều cao icon (14px) → CHỮ VÀ ICON CHUNG MỘT TÂM. */
/* vòng 5: icon 14 → 16px theo yêu cầu Lam.
QUY TẮC: line-height của .ky-nhan phải LUÔN BẰNG chiều cao .ky-icon thì chữ
và icon mới chung một tâm. Đổi cỡ icon → nhớ đổi line-height cho khớp. */
.ky-nhan{
font-size:10px; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
color:var(--navy); display:inline-flex; align-items:center; gap:6px;
line-height:14px; white-space:nowrap;
}
.ky-icon{
display:inline-flex; align-items:center; justify-content:center;
width:14px; height:14px; color:var(--orange); flex-shrink:0;
}
.ky-icon .ic{width:14px; height:14px; display:block;}
/* Chip trạng thái kỳ — luôn hiển thị, đổi màu theo kỳ đang xem */
.ky-chip{
font-size:10px; font-weight:700; padding:0 8px; border-radius:999px;
display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
height:18px; line-height:1; /* vòng 4: cao cố định → cùng tâm với nhãn */
color:var(--green); background:var(--green-tint);
}
.ky-chip i{width:5px; height:5px; border-radius:50%; background:currentColor; display:inline-block; flex-shrink:0;}
.ky-chip.ky-cu{color:var(--text-muted); background:var(--line-2);}
.ky-chip.ky-sau{color:var(--orange); background:var(--orange-tint);}
/* 2 select chia đôi — dùng grid để KHÔNG lệch dù nội dung dài ngắn khác nhau */
/* UI-01.1: bỏ 2 cột cứng (100px 76px) — dễ tràn ở sidebar hẹp. Ô Tháng nhận phần
co giãn còn lại (minmax(0,1fr) → không đẩy tràn grid); ô Năm giữ bề rộng vừa đủ
cho "2026" + chevron. Tự vừa sidebar 224/232px, KHÔNG giảm cỡ chữ, KHÔNG ellipsis,
KHÔNG che tràn, KHÔNG nới sidebar. */
.ky-selects{display:grid; grid-template-columns:minmax(96px,1fr) 76px; gap:6px;}
.ky-chon select{
width:100%; min-width:0; height:38px;
border:1px solid var(--line); border-radius:9px; background-color:var(--white);
font-size:12.5px; font-weight:700; color:var(--text); cursor:pointer;
/* Rule chevron toàn hệ ép padding-right:30px !important → chữ bị cắt trong ô
hẹp. Ghi đè lại vừa đủ chỗ cho mũi tên 12px + khoảng hở. */
padding-left:9px !important; padding-right:25px !important;
background-position:right 7px center !important;
text-overflow:clip;
transition:border-color .12s, box-shadow .12s;
}
.ky-chon select:hover{border-color:var(--navy);}
.ky-chon select:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,102,0,.15);}
.side-menu{display:flex; flex-direction:column; gap:3px; padding:8px 14px; flex:1;}
/* Tiêu đề nhóm menu (mờ, chữ nhỏ in hoa) */
.side-nhom{
font-size:10px; font-weight:800; color:#98A0AE;
text-transform:uppercase; letter-spacing:.9px; padding:12px 12px 6px;
}
.side-nhom:not(:first-child){padding-top:16px;}
/* HOST FIX 03.2 (§5): tinh chỉnh item sidebar.
- .side-ico trở thành Ô VUÔNG BO TRÒN 28px (trước là icon trần 19px) để trạng
thái active có thể "bọc icon trắng trong ô nền cam" mà KHÔNG đổi cấu trúc
HTML (vẫn ).
- Ở trạng thái thường ô này trong suốt, icon xám dịu → sidebar vẫn nhẹ, các
item vẫn thống nhất; chỉ item active mới "sáng" lên.
- padding item nới nhẹ (9→8px dọc, 10px ngang) cho cân với ô icon 28px. */
/* UI-01: hàng menu cao 38px, bo 8px, icon 17px KHÔNG bọc ô nền riêng.
Viền trong suốt sẵn ở MỌI mục để trạng thái active thêm viền mà không xê dịch. */
.side-link{
display:flex; align-items:center; gap:11px; height:38px; padding:0 9px;
border-radius:8px; border:1px solid transparent;
font-size:13.5px; font-weight:600; color:#485061;
transition:background .14s, color .14s, border-color .14s; position:relative;
}
.side-ico{
flex-shrink:0; color:#98A0AE;
display:flex; align-items:center; justify-content:center;
transition:color .14s;
}
.side-ico .ic{width:17px; height:17px;}
/* HOVER — chỉ áp cho mục CHƯA chọn: nền xám nhạt, chữ + icon navy; không nâng, không bóng. */
.side-link:not(.active):hover{background:var(--bg-soft); color:var(--navy);}
.side-link:not(.active):hover .side-ico{color:var(--navy);}
/* ===== TRẠNG THÁI ACTIVE =====
Nền cam rất nhạt (chuyển sắc nhẹ trái→phải) · viền trong mờ (thẻ mềm) · icon CAM ·
chữ NAVY 600. KHÔNG bóng nổi, KHÔNG transform. Mục active đứng yên khi rê chuột. */
.side-link.active{
background:linear-gradient(90deg,#FFEBDD,#FFF6EF);
border-color:rgba(255,102,0,.20);
color:var(--navy); font-weight:600;
}
.side-link.active .side-ico{color:var(--orange);}
/* Thanh cam trái: 3px rộng, 22px cao (hàng 38px → chừa 8px mỗi đầu = căn giữa),
bo tròn hai đầu, không kéo hết chiều cao mục. */
.side-link.active::before{
content:""; display:block; position:absolute; left:0; top:8px;
width:3px; height:22px; border-radius:3px; background:var(--orange);
}
/* FOCUS bàn phím — viền NAVY riêng, khác hẳn accent cam của active. */
.side-link:focus-visible{outline:2px solid var(--navy); outline-offset:-2px;}
.side-foot{display:flex;align-items:center;flex:0 0 var(--footer-row-h);height:var(--footer-row-h);margin-top:auto;padding:0 14px;border-top:1px solid var(--line);}
.side-foot .side-link{width:100%;padding:0 9px;} /* khớp đệm mới của .side-link */
.content{flex:1; min-width:0; padding:26px 32px 40px; margin-left:var(--sidebar-w);}
/* --- 5) TIÊU ĐỀ TRANG --- */
/* LƯỢT 2: tiêu đề chính đã chuyển lên TOPBAR (.tb-tieude). H1 trong .page-head
của từng trang được ẨN THỊ GIÁC (vẫn còn trong DOM cho trình đọc màn hình,
nên KHÔNG cần sửa 10 file trang → tránh rủi ro). Các nút/chú thích cạnh H1
vẫn hiển thị bình thường.
Muốn hiện lại H1 trên thân trang: thêm class "co-h1" vào .page-head đó. */
.page-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px;}
.page-head h1{
position:absolute; width:1px; height:1px; margin:-1px; padding:0;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.page-head.co-h1 h1{
position:static; width:auto; height:auto; margin:0; overflow:visible;
clip:auto; white-space:normal; font-size:23px; color:var(--orange); font-weight:800; letter-spacing:-.4px;
}
.page-head p{margin:4px 0 0; color:var(--text-muted); font-size:13.5px;}
/* Trang nào chỉ có mỗi H1 (không nút) thì .page-head rỗng → bỏ khoảng trống thừa */
.page-head:empty{display:none; margin:0;}
/* HOST FIX 02 (10) — TIỆN ÍCH DÙNG CHUNG: .page-head--gon dành cho trang mà
.page-head KHÔNG còn nội dung hiển thị (chỉ còn H1 đã ẩn cho trình đọc màn
hình, nên :empty không bắt được). Thu về 0 để cụm KPI bắt đầu ĐÚNG vị trí
chuẩn của trang Thu tiền mặt (trang chuẩn không có .page-head). */
.page-head--gon{margin-bottom:0;}
/* --- 6) NÚT CHUẨN (flat) --- */
.btn{
display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:1px solid transparent;
padding:9px 16px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:700;
transition:background .14s, border-color .14s, color .14s, box-shadow .14s, transform .14s;
white-space:nowrap;
}
.btn .ic{width:16px; height:16px;}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--navy-2);}
.btn-cam{background:var(--orange); color:#fff;}
.btn-cam:hover{background:var(--orange-dark);}
.btn-vien{background:var(--white); color:var(--navy); border-color:var(--line);}
.btn-vien:hover{border-color:var(--navy); background:var(--bg-soft);}
.btn.mini{padding:5px 11px; font-size:12px; border-radius:7px;}
button.mini{line-height:1.3;}
/* H9 (Đợt 2) — ROLLOUT hệ hiệu ứng nút DÙNG CHUNG cho MỌI .btn (giống cảm giác
"Ghi nhận"/"Xuất Excel"/"Nhận bàn giao & gạch nợ"): nổi nhẹ + shadow khi hover,
về vị trí khi active, vòng focus bàn phím, disabled KHÔNG dịch chuyển. KHÔNG
đổi MÀU của bất kỳ biến thể nào — chỉ chuyển động/độ nổi. Các nút có hiệu ứng
RIÊNG mạnh hơn (.btn-xuat, .tm-btn, .btn-lo, .gn-nhom …) có specificity cao hơn
nên vẫn GIỮ hiệu ứng riêng của chúng, không bị rule chung này đè. */
/* UI-01: hover/active KHÔNG dịch chuyển phần tử — chỉ đổi bóng (bỏ translateY). */
.btn:hover{ box-shadow:0 4px 12px rgba(16,24,40,.13); }
.btn:active{ box-shadow:0 2px 6px rgba(16,24,40,.11); }
.btn:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.btn:disabled, .btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.btn:disabled:hover, .btn[disabled]:hover{ transform:none !important; box-shadow:none !important; }
/* UI-01 — BIẾN THỂ NÚT DÙNG CHUNG (nền cho UI-02/03; KHÔNG đổi nút của trang nào).
Màu theo VAI TRÒ: xanh lá = hoàn tất/gạch nợ · đỏ đặc = Xóa · trắng-viền-đỏ = Hoàn tác.
Hover chỉ đổi màu/viền, không dịch chuyển. */
.btn-green{ background:var(--green); color:#fff; }
.btn-green:hover{ background:#12813B; }
.btn-do{ background:var(--red); color:#fff; } /* Xóa — đỏ đặc */
.btn-do:hover{ background:#B91C1C; }
.btn-hoantac{ background:var(--white); color:var(--red); border-color:#F1B9B9; } /* Hoàn tác — trắng, viền/chữ đỏ */
.btn-hoantac:hover{ background:var(--red-tint); border-color:var(--red); }
/* Trạng thái LOADING dùng chung: giữ nguyên bề rộng, ẩn icon và hiện vòng xoay,
không dịch chuyển chữ. Vòng xoay chỉ QUAY tại chỗ (không đổi vị trí nút/icon). */
.btn.dang-tai{ cursor:progress; pointer-events:none; }
.btn.dang-tai > .ic, .btn.dang-tai > svg{ visibility:hidden; }
.btn.dang-tai::before{
content:""; width:15px; height:15px; border-radius:50%;
border:2px solid currentColor; border-top-color:transparent;
animation:btn-xoay .7s linear infinite;
}
@keyframes btn-xoay{ to{ transform:rotate(360deg); } }
/* Nút chỉ-icon (Lọc / Bỏ lọc trên thanh bộ lọc). Vuông, cao bằng input/select
cùng hàng (~40px), chiều ngang tự cân đối, icon canh giữa. */
.btn-icon{
flex:0 0 auto; width:36px; height:36px; padding:0; /* lượt 7: khớp 36px */
display:inline-flex; align-items:center; justify-content:center;
border-radius:var(--radius-sm); cursor:pointer;
}
.btn-icon svg{width:18px; height:18px;}
.btn-icon.mini{width:32px; height:32px;}
.btn-icon.mini svg{width:16px; height:16px;}
/* LƯỢT 7: thanh lọc theo demo — MỌI ô cao 36px (demo dùng 36; ô tìm 40px đã dời
lên topbar nên trong thanh lọc không còn ô nào cần 40px).
Sửa số 36 ở ĐÂY thì phải sửa cả .zns-oNgay / .zns-ngay-wrap bên dưới, vì 2 chỗ
đó ghi cứng chiều cao — không sẽ thò ra khỏi hàng. */
.loc-bar input[type=search], .loc-bar input[type=text], .loc-bar select, .loc-bar .btn{height:36px;}
/* --- 7) THẺ KHỐI (card) --- */
.card{
background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
padding:16px 18px; box-shadow:var(--shadow-card); margin-bottom:16px;
}
/* --- 8) THẺ KPI (thanh tổng) --- */
/* LƯỢT 4: đổi sang DẢI KPI LIỀN KHUNG theo demo — 4 ô nằm trong MỘT thẻ trắng,
ngăn nhau bằng đường kẻ mảnh (thay vì 4 thẻ rời có khe hở).
Làm HOÀN TOÀN BẰNG CSS: giữ nguyên HTML .tong-bar > .kpi của cả 8 trang
(index, nsh, danhba, import, quantri, zns, tienmat, phathanh) → không đụng
vào các id mà đồng bộ đa tab đang bám (tg-dathu-can, tg-conno...). */
.tong-bar{
display:grid; grid-template-columns:repeat(4,1fr); gap:0;
background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
overflow:hidden; margin-bottom:24px; box-shadow:var(--shadow-card);
}
.tong-bar-3{grid-template-columns:repeat(3,1fr);}
/* HOST FIX 02 (9) — biến thể 5 ô cho KPI kết quả đọc file XML (Tổng file / Đọc
được / Hợp lệ / Trùng / Lỗi). Bổ sung MỚI, không ảnh hưởng các trang đang dùng
.tong-bar (4 ô) hay .tong-bar-3. */
.tong-bar-5{grid-template-columns:repeat(5,1fr);}
/* Sáu KPI chuẩn dùng chung cho hai màn nhập hóa đơn SH/NSH. */
.tong-bar-6{grid-template-columns:repeat(6,minmax(0,1fr));}
/* Ô KPI: bỏ viền/nền/bo góc riêng, chỉ còn đường kẻ ngăn bên phải */
.kpi{
background:transparent; border:0; border-radius:0; box-shadow:none;
border-right:1px solid var(--line-2);
padding:16px 18px; display:flex; align-items:center; gap:13px; min-width:0;
}
.kpi:last-child{border-right:0;}
/* Màn hình hẹp: 2 cột (rồi 1 cột) — ô đầu mỗi hàng phải bỏ kẻ phải cho đúng */
@media (max-width:1100px){
.tong-bar{grid-template-columns:repeat(2,1fr);}
.tong-bar-3{grid-template-columns:repeat(3,1fr);}
.tong-bar > .kpi:nth-child(2n){border-right:0;}
.tong-bar > .kpi:nth-child(-n+2){border-bottom:1px solid var(--line-2);}
}
@media (max-width:620px){
.tong-bar, .tong-bar-3{grid-template-columns:1fr;}
.tong-bar > .kpi{border-right:0; border-bottom:1px solid var(--line-2);}
.tong-bar > .kpi:last-child{border-bottom:0;}
}
/* Icon tròn 44px + vòng sáng mờ quanh (demo) thay cho ô vuông bo góc */
.kpi-ic{
width:44px; height:44px; border-radius:50%; flex-shrink:0; border:0;
display:flex; align-items:center; justify-content:center;
}
.kpi-ic .ic, .kpi-ic svg{width:21px !important; height:21px !important;}
.kpi-ic.i-blue{background:var(--blue-tint); color:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,.07);}
.kpi-ic.i-tim{background:var(--tim-tint); color:var(--tim); box-shadow:0 0 0 4px rgba(124,58,237,.07);}
.kpi-ic.i-green{background:var(--green-tint); color:var(--green); box-shadow:0 0 0 4px rgba(22,163,74,.07);}
.kpi-ic.i-red{background:var(--red-tint); color:var(--red); box-shadow:0 0 0 4px rgba(220,38,38,.07);}
.kpi-ic.i-cam{background:var(--orange-tint); color:var(--orange); box-shadow:0 0 0 4px rgba(255,102,0,.07);}
.kpi-txt{min-width:0;}
.kpi-nhan{font-size:12px; color:var(--text-muted); font-weight:600; margin-bottom:2px;}
.kpi-so{font-size:22px; font-weight:800; line-height:1.15; letter-spacing:-.5px;}
.kpi-so.c-blue{color:var(--blue);} .kpi-so.c-tim{color:var(--tim);}
.kpi-so.c-green{color:var(--green);} .kpi-so.c-red{color:var(--red);}
.kpi-so.c-cam{color:var(--orange-dark);}
.kpi-so.c-cam{color:var(--orange);}
/* KPI có giá trị ghép nhiều phần (vd "180 / 45 / 42"): giữ trên 1 hàng, co chữ
vừa bề ngang ô để không bị xuống dòng. */
.kpi-so-bo{ white-space:nowrap; font-size:clamp(16px, 1.5vw, 22px); }
.kpi-don{font-size:11px; color:var(--text-mo); font-weight:600; margin-top:2px;}
.kpi-tien-do{margin-top:8px; height:6px; background:var(--line); border-radius:99px; overflow:hidden; position:relative;}
.kpi-tien-do > i{position:absolute; left:0; top:0; bottom:0; background:var(--blue); border-radius:99px;}
.kpi-pct{font-size:11.5px; color:var(--text-muted); font-weight:700; margin-left:8px;}
/* Thanh tổng kiểu cũ (2-3 ô đơn giản, dùng ở danh bạ...) vẫn chạy */
.tong-o{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px 18px; box-shadow:var(--shadow-card);}
.tong-o .nhan{font-size:12.5px; color:var(--text-muted); font-weight:600;}
.tong-o .so{font-size:22px; font-weight:800; color:var(--navy); margin-top:2px;}
.tong-o.xanh .so{color:var(--green);}
.tong-o.do .so{color:var(--red);}
/* --- 9) BỘ LỌC (dồn trên 1 hàng, ô tìm co giãn) --- */
.loc-bar{display:flex; align-items:center; gap:8px; flex-wrap:nowrap; margin-bottom:16px;}
.loc-bar input[type=search], .loc-bar input[type=text]{
flex:1 1 auto; min-width:150px;
padding:0 12px; border:1px solid var(--line); border-radius:8px;
font-size:12.5px; background:var(--white); color:var(--text);
}
/* Demo: select cao 36, bo 8, chữ 12.5/600, chừa 30px bên phải cho chevron */
.loc-bar select{
flex:0 0 auto;
padding:0 12px; border:1px solid var(--line); border-radius:8px;
font-size:12.5px; font-weight:600; color:var(--text); background-color:var(--white); cursor:pointer;
}
.loc-bar .btn{flex:0 0 auto; border-radius:8px; font-size:12.5px; font-weight:600; padding:0 13px;}
/* Nút viền trên thanh lọc (Bỏ lọc / Xuất Excel) — theo demo: nền trắng, viền
mảnh, chữ xám; hover đổi nền + đậm viền. */
.loc-bar .btn-vien{color:var(--text-muted); border-color:var(--line);}
.loc-bar .btn-vien:hover{background:var(--bg-soft); border-color:#D5DAE3; color:var(--text);}
/* ===== NÚT XUẤT EXCEL / XUẤT BÁO CÁO — class .btn-xuat =====
LƯỢT 8: trước đây dùng selector theo href `[href^="xuatfile.php"]` — HỎNG với
2 trang: Phát hành dùng