/* Thành phần dùng chung: thẻ, nút, ô nhập, bảng, hộp thoại */
/* ----- vùng nội dung ----- */
.page { padding:22px 24px 40px; max-width:1600px; margin:0 auto; display:grid; gap:var(--gap); align-content:start; }
.banner { background:var(--warning-050); color:var(--warning-ink); border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; }
.banner.err { background:var(--danger-050); color:var(--danger-600); }
.view { display:grid; gap:var(--gap); }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); min-width:0; overflow:hidden; }
.panel-head { display:flex; flex-wrap:wrap; gap:10px 14px; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--border); }
.panel-head h2 { font-size:15px; font-weight:600; }
.panel-head .tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.panel-body { padding:16px 18px; }
.hint { color:var(--text-2); font-size:13px; max-width:75ch; }
.empty { text-align:center; color:var(--text-3); padding:28px 12px; font-size:13px; }
.sub { color:var(--text-3); font-size:12px; }

/* ----- nút, ô nhập, bộ lọc ----- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 14px; border-radius:var(--radius-sm); border:1px solid var(--border-2); background:var(--surface); color:var(--text); font-size:13px; font-weight:500; white-space:nowrap; text-decoration:none; transition:background .15s, border-color .15s; }
.btn:hover { background:var(--surface-2); }
.btn.primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.btn.primary:hover { background:var(--primary-600); }
.btn.danger:hover, .btn.armed { border-color:var(--danger); color:var(--danger-600); background:var(--danger-050); }
.btn.sm { height:30px; padding:0 10px; font-size:12px; }
.btn:disabled { opacity:.55; cursor:default; }
input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], input[type="tel"], select, textarea { border:1px solid var(--border-2); background:var(--surface); border-radius:var(--radius-sm); padding:0 12px; min-height:34px; min-width:0; width:100%; font-size:13px; }
textarea { padding:8px 12px; }
input:focus, select:focus, textarea:focus { border-color:var(--info); outline:none; }
input[type="search"] { width:240px; max-width:100%; }
/* Quy tắc chung (anh chốt 13/10/2026): một hàng nút chọn (thẻ, bộ lọc) luôn nằm trên một hàng, không xuống dòng; thiếu chỗ thì vuốt ngang */
.chips { display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chips > * { flex:none; white-space:nowrap; }
.chips { padding:4px; margin:-4px; } /* chừa chỗ cho bóng / viền của nút đang chọn, không bị cắt khi cuộn ngang */
.dr-lab { margin-bottom:8px; font-size:12px; }
.chip { height:30px; padding:0 14px; border-radius:99px; border:1px solid var(--border-2); background:var(--surface); color:var(--text-2); font-size:13px; }
.chip[aria-pressed="true"] { background:var(--primary-050); border-color:var(--primary); color:var(--primary-600); font-weight:500; }
.chip .c { opacity:.75; margin-left:5px; font-variant-numeric:tabular-nums; }

/* ----- thẻ số liệu ----- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--gap); }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:16px 18px; display:flex; align-items:center; gap:14px; min-width:0; text-decoration:none; color:inherit; }
a.kpi:hover { border-color:var(--border-2); background:var(--surface-2); }
.kpi__icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none; }
.kpi__icon svg { width:22px; height:22px; }
.kpi > div:last-child { min-width:0; }
.kpi .v { font-size:22px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kpi .l { color:var(--text-2); font-size:12.5px; margin-top:6px; }
.i-red { background:var(--danger-050); color:var(--danger); } .i-amber { background:var(--warning-050); color:var(--warning); }
.i-grey { background:var(--muted-bg); color:var(--text-2); } .i-blue { background:var(--info-050); color:var(--info); } .i-green { background:var(--success-050); color:var(--success); }
/* thẻ biểu đồ ở Tổng quan: vành khuyên bên trái, bảng số liệu bên phải */
.chart { display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px; align-items:center; }
.donut svg { display:block; width:150px; height:150px; }
.donut circle { transition:stroke-width .15s; }
.donut circle[data-tip]:hover { stroke-width:13; }
.d-num { font:700 22px var(--font); fill:var(--text); }
.d-lab { font:500 8px var(--font); fill:var(--text-3); }
.c-rows { display:grid; gap:2px; min-width:0; }
.c-row { display:grid; grid-template-columns:minmax(0,1fr) 56px 68px; gap:14px; align-items:center; width:100%; padding:9px 10px; border:0; border-radius:8px; background:none; text-align:left; font-size:13.5px; }
.c-row:hover { background:var(--surface-2); }
.c-row b { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.c-row .p { color:var(--text-3); font-size:12.5px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width:480px) { .chart { grid-template-columns:minmax(0,1fr); justify-items:center; } .c-rows { width:100%; } }
#tip { position:fixed; z-index:70; pointer-events:none; background:var(--text); color:#fff; font-size:12.5px; padding:6px 10px; border-radius:6px; white-space:nowrap; transform:translate(-50%, calc(-100% - 10px)); }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:var(--gap); }
.todo { list-style:none; margin:0; padding:0; }
.todo li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:12px 18px; border-bottom:1px solid var(--border); }
.todo li:last-child { border-bottom:0; }
.todo .sub { grid-column:2; }
/* biển số bấm được (Tổng quan): rê chuột thì biển nổi lên */
.plate-btn { border:0; background:none; padding:0; cursor:pointer; border-radius:6px; transition:transform .12s, box-shadow .12s; }
.plate-btn:hover, .plate-btn:focus-visible { transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,.18); }

/* ----- bảng ----- */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
/* Quy tắc chung mọi bảng (anh chốt 13/10/2026): tên cột và số liệu từng cột đều nằm giữa, thẳng hàng với nhau; ô căn giữa theo chiều dọc */
th { text-align:center; font-weight:500; font-size:12px; color:var(--text-3); padding:12px 18px; border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:14px 18px; border-bottom:1px solid var(--border); vertical-align:middle; text-align:center; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:var(--surface-2); }
td.num, th.num { font-variant-numeric:tabular-nums; white-space:nowrap; }
td.act { white-space:nowrap; }
tr.click { cursor:pointer; }
td a { color:var(--info); }
/* biển số nền vàng: xe kinh doanh vận tải */
.plate { display:inline-block; background:var(--plate); color:var(--plate-ink); border:1.5px solid var(--plate-ink); border-radius:4px; padding:1px 7px; font-weight:700; font-size:13px; letter-spacing:.02em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.badge { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:99px; font-size:12px; font-weight:500; white-space:nowrap; }
.b-red { background:var(--danger-050); color:var(--danger-600); } .b-amber { background:var(--warning-050); color:var(--warning-ink); }
.b-green { background:var(--success-050); color:var(--success); } .b-grey { background:var(--muted-bg); color:var(--text-2); }
.item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; min-width:250px; }
.item + .item { margin-top:10px; }
.item .r { color:var(--text-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.item .r.red { color:var(--danger-600); font-weight:600; } .item .r.amber { color:var(--warning-ink); font-weight:600; }
.bar { grid-column:1 / -1; height:4px; border-radius:2px; background:var(--muted-bg); overflow:hidden; }
.bar i { display:block; height:100%; }

/* ----- định mức ----- */
.w-date { width:150px !important; }
.meter { display:inline-block; width:64px; height:6px; border-radius:3px; background:var(--muted-bg); overflow:hidden; vertical-align:middle; margin-right:8px; }
.meter i { display:block; height:100%; }
.form-foot { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; align-items:center; margin-top:14px; }

/* ----- hộp thoại & ngăn kéo ----- */
dialog { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); padding:0; width:min(560px, calc(100vw - 24px)); box-shadow:var(--shadow-lg); }
dialog::backdrop { background:rgba(20,24,33,.4); }
dialog.drawer { margin:0 0 0 auto; height:100vh; max-height:100vh; width:min(520px, 100vw); border-radius:0; border-width:0 0 0 1px; }
.dlg-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:16px 18px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface); z-index:1; }
.dlg-head h2 { font-size:16px; font-weight:600; }
.dlg-body { padding:16px 18px; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.dlg-body > * { min-width:0; }
dialog.drawer { overflow-x:hidden; }
.hist li.row { display:flex; gap:10px; align-items:flex-start; justify-content:space-between; }
.hist li.row > div { min-width:0; }
.dlg-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--border); }
.field { display:grid; gap:5px; min-width:0; align-content:start; } /* ô bên cạnh có dòng chữ thêm (vd. số tiền bằng chữ) thì không bị kéo cao */
.field > span, legend { font-size:12px; color:var(--text-2); font-weight:500; }
/* số tiền bằng chữ dưới ô tiền (như app ngân hàng) */
.field > .money-words { margin-top:-1px; font-size:12px; font-weight:400; font-style:italic; color:var(--text-3); line-height:1.35; }
.field > .money-words:empty { display:none; }
.two { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
fieldset { border:1px solid var(--border-2); border-radius:var(--radius-sm); padding:10px 12px; margin:0; min-width:0; }
.checks { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:6px 12px; }
.checks label, .radios label { display:flex; gap:8px; align-items:center; cursor:pointer; }
.checks .due { color:var(--danger-600); font-weight:600; }
input[type="checkbox"], input[type="radio"] { accent-color:var(--primary); }
.radios { display:flex; flex-wrap:wrap; gap:8px 18px; }
.dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 14px; font-size:13px; margin:0; }
.dl dt { color:var(--text-3); } .dl dd { margin:0; }
.sect h3, .dr-title { font-size:14px; font-weight:600; margin-bottom:10px; }
.dr-title { margin-bottom:0; }
.hist { list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:13px; }
.hist li { border-left:2px solid var(--border-2); padding-left:10px; }
.hist li.click { cursor:pointer; border-radius:0 8px 8px 0; padding-block:4px; }
.hist li.click:hover { background:var(--surface-2); border-left-color:var(--primary); }
.hist li .badge { margin-left:6px; vertical-align:middle; }
.thumbs { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.thumbs img { display:block; width:56px; height:56px; object-fit:cover; border-radius:6px; border:1px solid var(--border-2); }
.thumbs a:hover img { border-color:var(--info); }
input[type="file"] { font-size:13px; max-width:100%; }
.req { color:var(--danger-600); }
.en-p { display:inline-block; width:38px; text-align:right; font-variant-numeric:tabular-nums; }

/* ----- thẻ số liệu của báo cáo (kpiTile): tên nhỏ ở trên, số lớn, dòng phụ gọn ----- */
.kpi2 { align-items:flex-start; padding:16px 18px; font:inherit; text-align:left; color:inherit; }
button.kpi2 { cursor:pointer; width:100%; }
button.kpi2:hover { border-color:var(--border-2); background:var(--surface-2); }
.kpi2 .kb { min-width:0; flex:1; }
.kpi2 .kl { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); }
.kpi2 .kv { margin-top:6px; font-size:24px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kpi2 .kv small { margin-left:5px; font-size:13px; font-weight:500; color:var(--text-3); }
.kpi2 .ks { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:8px; font-size:12.5px; color:var(--text-3); line-height:1.35; }
.kd { padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; background:var(--muted-bg); color:var(--text-2); }
.kd-up { background:var(--info-050); color:var(--info); }
.kd-down { background:var(--warning-050); color:var(--warning-ink, var(--warning)); }
.kbar { display:block; height:6px; margin-top:10px; border-radius:3px; background:var(--muted-bg); overflow:hidden; }
.kbar i { display:block; height:100%; border-radius:inherit; background:currentColor; }
.kpi2 .kpi__icon.i-blue ~ .kb .kbar { color:var(--info); } .kpi2 .kpi__icon.i-green ~ .kb .kbar { color:var(--success); }
.kpi2 .kpi__icon.i-red ~ .kb .kbar { color:var(--danger); } .kpi2 .kpi__icon.i-amber ~ .kb .kbar { color:var(--warning); }
#log-month { width:auto; min-width:150px; }