:root {
    --vnpt-blue: #005bab;
    --vnpt-dark: #073b70;
    --blue-50: #eff7ff;
    --blue-100: #dbeeff;
    --slate-950: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --slate-50: #f8fafc;
    --green: #16865b;
    --green-50: #ecfdf5;
    --orange: #d97706;
    --orange-50: #fff7ed;
    --red: #dc3545;
    --red-50: #fff1f2;
    --shadow: 0 8px 28px rgba(15, 23, 42, .07);
    --radius: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--slate-50);
    color: var(--slate-800);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

body.modal-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, .btn, select, input[type="file"] { cursor: pointer; }

.topbar {
    min-height: 64px;
    padding: 10px clamp(18px, 3vw, 48px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(115deg, #03477f, var(--vnpt-blue) 55%, #0879ca);
    color: #fff;
    box-shadow: 0 5px 18px rgba(1, 60, 112, .22);
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 52px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.48);
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .7px;
}

.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; letter-spacing: .25px; line-height: 1.25; }
.brand small { color: rgba(255,255,255,.77); margin-top: 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; }

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}
.topbar-actions form { margin: 0; }

.updated {
    display: flex;
    align-items: center;
    gap: 10px;
}

.updated small, .updated strong { display: block; }
.updated small { color: rgba(255,255,255,.72); font-size: 11px; }
.updated strong { font-size: 13px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #5ee2a0; box-shadow: 0 0 0 5px rgba(94,226,160,.14); }

.nav-tabs {
    min-height: 47px;
    padding: 0 clamp(18px, 3vw, 48px);
    display: flex;
    align-items: stretch;
    gap: 28px;
    background: #fff;
    border-bottom: 1px solid var(--slate-200);
}

.nav-tabs a {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--slate-500);
    font-size: 13px;
    font-weight: 650;
}

.nav-tabs a.active { color: var(--vnpt-blue); }
.nav-tabs a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--vnpt-blue);
}

.page-shell {
    width: min(1880px, 100%);
    margin: 0 auto;
    padding: 18px clamp(16px, 2.3vw, 38px) 42px;
}

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.eyebrow {
    margin: 0 0 6px;
    color: var(--vnpt-blue) !important;
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: 1.5px;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 6px; color: var(--slate-950); font-size: clamp(24px, 2vw, 31px); line-height: 1.2; letter-spacing: -.5px; }
.page-heading p { margin-bottom: 0; color: var(--slate-500); }

.btn {
    min-height: 38px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible { outline: 3px solid rgba(0,91,171,.2); outline-offset: 2px; }
.btn-primary { background: var(--vnpt-blue); color: #fff; box-shadow: 0 5px 14px rgba(0,91,171,.18); }
.btn-primary:hover { background: #004f96; }
.btn-success { background: var(--green); color: #fff; box-shadow: 0 5px 14px rgba(22,134,91,.18); }
.btn-light { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28); color: #fff; }
.btn-light:hover { background: rgba(255,255,255,.2); }
.btn-ghost { color: var(--slate-600); border-color: var(--slate-200); background: #fff; }
.btn-icon { font-size: 16px; line-height: 1; }
.btn-large { width: 100%; min-height: 47px; font-size: 14px; }

.alert {
    margin-bottom: 18px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid;
    border-radius: 10px;
    font-weight: 600;
}

.alert > span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: #fff; font-weight: 800; }
.alert.success { background: var(--green-50); border-color: #a7f3d0; color: #047857; }
.alert.success > span { background: var(--green); }
.alert.error { background: var(--red-50); border-color: #fecdd3; color: #be123c; }
.alert.error > span { background: var(--red); }

.filter-card {
    margin-bottom: 18px;
    padding: 15px 16px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(15,23,42,.035);
}

.filter-card label, .form-field { display: grid; gap: 6px; min-width: 190px; }
.filter-card label > span, .form-field > span { color: var(--slate-600); font-size: 11px; font-weight: 750; }
.filter-card select, .filter-card input, .form-field input {
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid var(--slate-300);
    border-radius: 8px;
    background: #fff;
    color: var(--slate-800);
}
.search-field { flex: 1; }

.kpi-grid {
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.kpi-card {
    position: relative;
    min-height: 102px;
    padding: 15px 17px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    box-shadow: 0 4px 18px rgba(15,23,42,.045);
}

.kpi-card::after { content: ""; position: absolute; width: 110px; height: 110px; border-radius: 50%; right: -52px; top: -47px; opacity: .09; background: currentColor; }
.kpi-card.blue { color: var(--vnpt-blue); }
.kpi-card.indigo { color: #4f46e5; }
.kpi-card.green { color: var(--green); }
.kpi-card.orange { color: var(--orange); }
.kpi-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 11px; background: currentColor; color: #fff; font-size: 19px; font-weight: 800; }
.kpi-card span { display: block; color: var(--slate-500); font-size: 12px; font-weight: 650; }
.kpi-card strong { display: block; color: var(--slate-950); font-size: 24px; line-height: 1.15; margin-top: 3px; }
.kpi-card small { grid-column: 2; margin-top: -13px; color: currentColor; font-weight: 650; }

.report-card, .upload-card, .history-card {
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.report-card { overflow: hidden; }
.report-card-head {
    padding: 17px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--slate-200);
}
.report-card-head h2, .section-title h2 { margin: 0 0 3px; color: var(--slate-950); font-size: 17px; }
.report-card-head p, .section-title p { margin: 0; color: var(--slate-500); font-size: 12px; }
.report-card-head h1 { margin: 0 0 4px; font-size: 22px; }
.report-card-head .eyebrow { margin-bottom: 3px; }
.report-head-actions { display: flex; align-items: center; gap: 10px; }
.report-card-title { display: flex; align-items: center; gap: 10px; }
.report-card-title h2 { margin: 0; }
.result-count { padding: 5px 10px; border-radius: 999px; background: var(--blue-50); color: var(--vnpt-blue); font-size: 11px; font-weight: 750; white-space: nowrap; }

.compact-toolbar {
    padding: 12px 18px;
    display: grid;
    grid-template-columns: minmax(205px, .9fr) minmax(150px, .55fr) minmax(260px, 1.5fr) auto auto;
    align-items: end;
    gap: 10px;
    background: #f8fbfe;
    border-bottom: 1px solid var(--slate-200);
}
.compact-toolbar label { min-width: 0; display: grid; gap: 4px; }
.compact-toolbar label > span { color: var(--slate-500); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .45px; }
.compact-toolbar select, .compact-toolbar input {
    width: 100%;
    min-height: 37px;
    padding: 7px 10px;
    border: 1px solid var(--slate-300);
    border-radius: 8px;
    background: #fff;
    color: var(--slate-800);
    font-size: 12px;
}

.table-scroll { width: 100%; overflow-x: auto; overflow-y: visible; max-height: none; }
.report-table { border-collapse: separate; border-spacing: 0; color: var(--slate-700); font-size: 12px; }
.report-table th, .report-table td { padding: 10px 9px; border-bottom: 1px solid var(--slate-200); vertical-align: middle; }
.report-table thead th { position: sticky; z-index: 4; text-align: center; background: #f4f8fc; color: #17324d; font-weight: 750; line-height: 1.3; }
.report-table thead small { color: inherit; font-size: 9px; font-weight: 600; opacity: .75; }
.report-table tbody tr:hover td { background: #f7fbff; }
.report-table tbody tr:last-child td { border-bottom: 0; }
.report-table .sticky-col { position: sticky; z-index: 3; background: #fff; }
.report-table thead .sticky-col { z-index: 7; background: #f4f8fc; }
.index-col { left: 0; width: 60px; min-width: 60px; }
.area-col { left: 60px; width: 176px; min-width: 176px; box-shadow: 5px 0 8px -8px rgba(15,23,42,.35); }
.area-name { display: block; color: var(--slate-950); font-size: 13px; }
.area-col small { display: block; margin-top: 3px; color: var(--slate-500); font-size: 10px; }
.number { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.emphasize { color: var(--vnpt-blue); font-size: 13px; }
.text-center { text-align: center; }

.rank-badge {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--slate-100);
    color: var(--slate-500);
    font-size: 11px;
    font-weight: 800;
}
.rank-badge.rank-1 { background: linear-gradient(145deg, #ffe08a, #f5b224); color: #7a4a00; box-shadow: 0 3px 8px rgba(245,178,36,.4); }
.rank-badge.rank-2 { background: linear-gradient(145deg, #e6ebf1, #b9c4d0); color: #3a4553; box-shadow: 0 3px 8px rgba(148,163,184,.4); }
.rank-badge.rank-3 { background: linear-gradient(145deg, #f0c8a4, #d1985f); color: #5a3210; box-shadow: 0 3px 8px rgba(209,152,95,.4); }

.btn-detail { min-width: 106px; min-height: 32px; padding: 6px 9px; color: var(--vnpt-blue); background: var(--blue-50); border-color: #bfdbfe; font-size: 11px; }
.btn-detail:hover { background: var(--blue-100); }
.btn-detail span { font-size: 18px; line-height: 0; }

.empty-state { padding: 42px !important; text-align: center; color: var(--slate-500); }
.empty-state span, .empty-state strong, .empty-state small { display: block; }
.empty-state span { color: var(--slate-400); font-size: 30px; }
.empty-state strong { margin-top: 8px; color: var(--slate-700); font-size: 14px; }
.empty-state small { margin-top: 3px; }

.table-note {
    padding: 11px 18px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    background: var(--slate-50);
    border-top: 1px solid var(--slate-200);
    color: var(--slate-500);
    font-size: 10px;
}
.table-note span { display: inline-flex; align-items: center; gap: 5px; }
.table-note small { margin-left: auto; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot.good { background: var(--green); }
.dot.warn { background: var(--orange); }
.dot.danger { background: var(--red); }

/* Bảng tổng hợp: mỗi chỉ số có một cột riêng (không lồng nhiều số trong một ô)
   và được nhóm lại bằng dải màu tiêu đề để dễ định vị theo giai đoạn xử lý. */
.report-table-clean { width: max(100%, 1680px); table-layout: fixed; border-top: 1px solid var(--slate-200); }
.report-table-clean th, .report-table-clean td { padding: 10px 12px; }
.report-table-clean thead tr:first-child th { top: 0; height: 38px; }
.report-table-clean thead tr:nth-child(2) th { top: 38px; height: 34px; }
.report-table-clean thead th {
    background: #f3f7fb;
    border-bottom: 1px solid #dde8f1;
    color: #3a4d63;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .35px;
}
.report-table-clean thead .group-band { font-size: 10.5px; letter-spacing: .6px; }
.report-table-clean thead .sub-head { font-size: 9.5px; font-weight: 700; }
.report-table-clean thead .band-a { background: #e6f1fd; color: #175f9e; }
.report-table-clean thead .band-b { background: #e5f8f0; color: #0f7d5e; }
.report-table-clean thead .band-c { background: #fdf1e0; color: #a85e05; }
.report-table-clean thead .sync-head { background: var(--vnpt-blue); color: #fff; font-size: 11px; }

.report-table-clean tbody tr:nth-child(even) td { background: #fafcfe; }
.report-table-clean tbody tr:hover td { background: #eef6fd; }
.report-table-clean tbody .index-col { text-align: center; }

.report-table-clean .col-scale { width: 150px; }
.report-table-clean .col-stat { width: 116px; }
.report-table-clean .col-sync { width: 140px; }
.report-table-clean .col-cks { width: 122px; }
.report-table-clean .col-detail { width: 108px; }

.report-table-clean .grp-start { border-left: 1px solid var(--slate-200); }
.report-table-clean .sync-primary { background: #f0f8ff !important; box-shadow: inset 3px 0 0 var(--vnpt-blue); }

/* Ô thống kê dùng chung cho mọi cột chỉ số: một con số nổi bật + chú thích nhỏ,
   thay cho việc nhồi nhiều thanh tiến độ chồng chéo gây rối mắt. */
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.stat-value { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-value.good { color: var(--green); }
.stat-value.warn { color: var(--orange); }
.stat-value.danger { color: var(--red); }
.stat-caption { color: var(--slate-500); font-size: 9.5px; line-height: 1.3; }
.stat-bar { width: 100%; max-width: 108px; height: 5px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: var(--slate-200); }
.stat-bar span { display: block; height: 100%; border-radius: inherit; }
.stat-bar .good { background: var(--green); }
.stat-bar .warn { background: var(--orange); }
.stat-bar .danger { background: var(--red); }
.sync-primary .stat-value { font-size: 18px; }
.sync-primary .stat-bar { max-width: 122px; height: 6px; }

.scale-cell { display: grid; gap: 4px; }
.scale-cell span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--slate-500); font-size: 10px; }
.scale-cell strong { color: var(--slate-800); font-size: 12px; font-variant-numeric: tabular-nums; }
.scale-cell span:last-child strong { color: var(--vnpt-blue); font-size: 13px; }
.table-note > strong { color: var(--vnpt-blue); font-size: 10px; }

footer {
    min-height: 54px;
    padding: 12px clamp(18px, 3vw, 48px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: #fff;
    border-top: 1px solid var(--slate-200);
    color: var(--slate-500);
    font-size: 11px;
}

/* Modal */
.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.58); backdrop-filter: blur(3px); }
.modal-panel {
    position: absolute;
    inset: 3.5vh 2.5vw;
    margin: auto;
    width: min(1500px, 95vw);
    height: min(900px, 93vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 25px 80px rgba(15,23,42,.32);
}
.modal-header {
    padding: 18px 22px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--slate-200);
}
.modal-header h2 { margin: 0 0 3px; color: var(--slate-950); font-size: 21px; }
.modal-header p { margin-bottom: 0; color: var(--slate-500); font-size: 12px; }
.modal-close { width: 36px; height: 36px; border: 1px solid var(--slate-200); border-radius: 9px; background: #fff; color: var(--slate-500); font-size: 25px; line-height: 1; }
.modal-close:hover { color: var(--red); background: var(--red-50); border-color: #fecdd3; }
.modal-summary { padding: 12px 22px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; background: #f8fbff; border-bottom: 1px solid var(--slate-200); }
.modal-kpi { padding: 10px 12px; border: 1px solid #dce8f3; border-radius: 9px; background: #fff; }
.modal-kpi span { display: block; color: var(--slate-500); font-size: 10px; }
.modal-kpi strong { color: var(--slate-950); font-size: 16px; font-variant-numeric: tabular-nums; }
.modal-tools { padding: 12px 22px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--slate-200); }
.modal-search { flex: 1; max-width: 460px; min-height: 38px; padding: 0 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--slate-300); border-radius: 8px; }
.modal-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--slate-800); }
#modal-count { color: var(--slate-500); font-size: 11px; font-weight: 650; }
.modal-content { flex: 1; overflow: auto; background: var(--slate-50); }
.loading { height: 180px; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--slate-500); }
.loading span { width: 28px; height: 28px; border: 3px solid var(--blue-100); border-top-color: var(--vnpt-blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.commune-card { margin: 12px 14px; overflow: hidden; border: 1px solid var(--slate-200); border-radius: 11px; background: #fff; box-shadow: 0 3px 12px rgba(15,23,42,.035); }
.commune-head { width: 100%; padding: 13px 15px; display: grid; grid-template-columns: minmax(190px,1.4fr) repeat(5, minmax(90px,.7fr)) 26px; gap: 12px; align-items: center; border: 0; background: #fff; color: var(--slate-700); text-align: left; }
.commune-head:hover { background: #f8fbff; }
.commune-name strong, .commune-name small { display: block; }
.commune-name strong { color: var(--slate-950); font-size: 13px; }
.commune-name small { margin-top: 2px; color: var(--slate-500); font-size: 10px; }
.commune-metric span, .commune-metric strong { display: block; }
.commune-metric span { color: var(--slate-500); font-size: 9px; text-transform: uppercase; letter-spacing: .3px; }
.commune-metric strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.chevron { color: var(--vnpt-blue); font-size: 20px; transition: transform .18s ease; }
.commune-card.expanded .chevron { transform: rotate(90deg); }
.school-list { display: none; border-top: 1px solid var(--slate-200); }
.commune-card.expanded .school-list { display: block; }
.school-table { width: 100%; min-width: 1120px; border-collapse: collapse; font-size: 11px; }
.school-table th, .school-table td { padding: 9px 10px; border-bottom: 1px solid var(--slate-200); text-align: right; vertical-align: middle; }
.school-table th { position: sticky; top: 0; background: #eef5fb; color: #27445f; font-size: 9px; text-transform: uppercase; letter-spacing: .25px; }
.school-table th:nth-child(-n+3), .school-table td:nth-child(-n+3) { text-align: left; }
.school-table tr:last-child td { border-bottom: 0; }
.school-table tr:hover td { background: #f9fcff; }
.school-title strong, .school-title small { display: block; }
.school-title strong { color: var(--slate-800); }
.school-title small { color: var(--slate-500); }
.mini-rate { display: inline-block; min-width: 48px; padding: 2px 5px; border-radius: 5px; background: var(--slate-100); color: var(--slate-700); font-weight: 700; text-align: center; }
.mini-rate.good { background: var(--green-50); color: var(--green); }
.mini-rate.warn { background: var(--orange-50); color: var(--orange); }
.mini-rate.danger { background: var(--red-50); color: var(--red); }

/* Upload */
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(310px, .7fr); gap: 18px; align-items: start; }
.upload-card, .history-card { padding: 22px; }
.section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.section-title.compact { margin-bottom: 10px; }
.step-number { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--blue-50); color: var(--vnpt-blue); font-weight: 800; }
.upload-form { display: grid; gap: 14px; }
.form-field b, .file-drop b { color: var(--red); }
.form-field small { color: var(--slate-500); font-size: 10px; }
.file-drop {
    min-height: 84px;
    padding: 13px 14px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    border: 1px dashed #a9c9e5;
    border-radius: 11px;
    background: #fbfdff;
    transition: border .15s, background .15s;
}
.file-drop:hover { border-color: var(--vnpt-blue); background: var(--blue-50); }
.file-drop.has-file { border-style: solid; border-color: var(--green); background: var(--green-50); }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop strong, .file-drop small { display: block; }
.file-drop strong { color: var(--slate-800); font-size: 13px; }
.file-drop small { margin-top: 3px; color: var(--slate-500); font-size: 10px; }
.file-drop em { padding: 6px 10px; border: 1px solid var(--slate-300); border-radius: 7px; color: var(--vnpt-blue); background: #fff; font-size: 10px; font-style: normal; font-weight: 750; }
.file-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--green); font-size: 10px; font-weight: 800; }
.file-icon.orange { background: var(--orange); }
.file-icon.gray { background: var(--slate-500); }
.file-drop.optional { border-color: var(--slate-300); }
.upload-note { padding: 13px 15px; border-radius: 10px; background: var(--slate-50); border: 1px solid var(--slate-200); color: var(--slate-600); }
.upload-note strong { color: var(--slate-800); font-size: 12px; }
.upload-note ul { margin: 7px 0 0; padding-left: 18px; font-size: 11px; }
.upload-note li + li { margin-top: 3px; }
.history-list { max-height: 650px; overflow: auto; }
.history-item { position: relative; min-height: 96px; padding: 12px 30px 12px 30px; display: block; border-radius: 9px; }
.history-item:hover { background: var(--slate-50); }
.history-line { position: absolute; left: 12px; top: 32px; bottom: -14px; width: 1px; background: var(--slate-200); }
.history-item:last-child .history-line { display: none; }
.history-dot { position: absolute; left: 8px; top: 23px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--slate-400); box-shadow: 0 0 0 2px var(--slate-300); }
.history-dot.latest { background: var(--green); box-shadow: 0 0 0 3px #bbf7d0; }
.history-body strong, .history-body small, .history-body em { display: block; }
.history-body strong { color: var(--slate-800); font-size: 12px; }
.history-body small { color: var(--slate-500); font-size: 10px; }
.history-body em { margin-top: 5px; overflow: hidden; color: var(--slate-500); font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.history-arrow { position: absolute; right: 10px; top: 34px; color: var(--slate-400); font-size: 20px; }
.skip-badge { display: inline-block; margin-top: 5px; padding: 2px 6px; border-radius: 5px; background: var(--orange-50); color: var(--orange); font-size: 9px; font-weight: 700; }

/* Đăng nhập trang cập nhật */
.auth-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 20%, rgba(0, 91, 171, .16), transparent 34%),
        radial-gradient(circle at 85% 85%, rgba(22, 134, 91, .1), transparent 30%),
        #f4f8fc;
}
.auth-shell { min-height: 100vh; padding: 24px; display: grid; place-items: center; }
.auth-card {
    width: min(470px, 100%);
    padding: 30px;
    border: 1px solid #d9e5ef;
    border-radius: 18px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 24px 70px rgba(15, 45, 75, .14);
}
.auth-brand { display: flex; align-items: center; gap: 12px; color: var(--vnpt-dark); }
.auth-brand .brand-mark { color: #fff; background: linear-gradient(135deg, var(--vnpt-dark), var(--vnpt-blue)); }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand strong { font-size: 14px; letter-spacing: .2px; }
.auth-brand small { color: var(--slate-500); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.auth-heading { margin: 28px 0 20px; display: flex; align-items: flex-start; gap: 14px; }
.auth-heading h1 { margin-bottom: 6px; font-size: 23px; }
.auth-heading p:last-child { margin: 0; color: var(--slate-500); font-size: 12px; }
.auth-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: var(--blue-50); color: var(--vnpt-blue); font-size: 23px; font-weight: 800; }
.auth-form { display: grid; gap: 14px; }
.auth-form .form-field { min-width: 0; }
.auth-form input[type="password"] { cursor: text; }
.auth-back { display: block; margin-top: 18px; color: var(--slate-500); font-size: 11px; text-align: center; }
.auth-back:hover { color: var(--vnpt-blue); }

@media (max-width: 1100px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-card { flex-wrap: wrap; }
    .search-field { min-width: 280px; }
    .compact-toolbar { grid-template-columns: 1fr 1fr; }
    .compact-toolbar .toolbar-search { grid-column: 1 / -1; }
    .compact-toolbar .btn { justify-self: start; }
    .admin-grid { grid-template-columns: 1fr; }
    .history-list { max-height: none; }
    .modal-summary { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .commune-head { grid-template-columns: minmax(190px,1.4fr) repeat(3, minmax(90px,.7fr)) 26px; }
    .commune-head .hide-tablet { display: none; }
}

@media (max-width: 720px) {
    .topbar { padding: 11px 15px; }
    .brand-mark { width: 45px; height: 38px; font-size: 12px; }
    .brand strong { font-size: 13px; }
    .brand small { display: none; }
    .updated { display: none; }
    .topbar .btn { padding: 7px 9px; font-size: 11px; }
    .nav-tabs { padding: 0 15px; gap: 20px; overflow-x: auto; }
    .nav-tabs a { white-space: nowrap; }
    .page-shell { padding: 20px 12px 34px; }
    .page-heading { align-items: stretch; flex-direction: column; }
    .page-heading .btn { align-self: flex-start; }
    .filter-card { display: grid; grid-template-columns: 1fr 1fr; }
    .filter-card label, .filter-card .search-field { min-width: 0; }
    .search-field { grid-column: 1 / -1; }
    .kpi-grid { grid-template-columns: 1fr; }
    .kpi-card { min-height: 102px; }
    .report-card-head { align-items: flex-start; }
    .report-head-actions { align-items: flex-end; flex-direction: column; }
    .compact-toolbar { grid-template-columns: 1fr; }
    .compact-toolbar .toolbar-search { grid-column: auto; }
    .table-note small { width: 100%; margin-left: 0; }
    footer { align-items: flex-start; flex-direction: column; gap: 4px; }
    .modal-panel { inset: 0; width: 100vw; height: 100vh; border-radius: 0; }
    .modal-header, .modal-tools { padding-left: 14px; padding-right: 14px; }
    .modal-summary { padding: 10px 14px; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .commune-card { margin: 9px; }
    .commune-head { grid-template-columns: 1fr 70px 26px; }
    .commune-head .hide-mobile { display: none; }
    .upload-card, .history-card { padding: 15px; }
    .file-drop { grid-template-columns: auto 1fr; }
    .file-drop em { grid-column: 2; justify-self: start; }
    .auth-shell { padding: 14px; }
    .auth-card { padding: 22px 18px; }
}