:root {
  color-scheme: light;
  --ink: #17251f;
  --muted: #5b6c63;
  --line: #d4dfd9;
  --paper: #ffffff;
  --surface: #f2f6f3;
  --brand: #08633f;
  --brand-dark: #06452d;
  --brand-soft: #e1f2e9;
  --gold: #8a620c;
  --gold-soft: #fff5d8;
  --red: #a23535;
  --red-soft: #fae9e8;
  --blue: #1f5f8b;
  --blue-soft: #e6f1f8;
  --purple: #684b92;
  --purple-soft: #eee9f5;
  --shadow: 0 18px 48px rgba(20, 64, 43, .12);
  font-family: "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; background: radial-gradient(circle at 8% 8%, rgba(8,99,63,.07), transparent 27rem), radial-gradient(circle at 92% 20%, rgba(218,167,45,.08), transparent 24rem), var(--surface); color: var(--ink); line-height: 1.5; }
a { color: inherit; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #e1a824; outline-offset: 3px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 1000; padding: 10px 14px; background: #fff; color: #111; border-radius: 6px; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-top: 4px solid #9b2622; border-bottom: 1px solid var(--line); box-shadow: 0 7px 24px rgba(20, 49, 36, .08); backdrop-filter: blur(12px); }
.header-inner { width: min(1220px, calc(100% - 32px)); min-height: 78px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.public-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.public-brand img { width: 52px; height: 52px; padding: 3px; background: #fff; border: 1px solid #ead9a9; border-radius: 50%; object-fit: cover; box-shadow: 0 5px 14px rgba(91,44,28,.13); }
.public-brand span { display: grid; gap: 2px; }
.public-brand strong { font-size: .96rem; color: #7b211d; letter-spacing: .025em; }
.public-brand small { color: var(--muted); }
.login-link { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 15px; border: 1px solid #b6d4c4; border-radius: 999px; background: #f6fbf8; color: var(--brand); font-weight: 700; text-decoration: none; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.login-link:hover { background: var(--brand-soft); }
.login-link:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(8,99,63,.12); }
.public-nav { background: linear-gradient(110deg, var(--brand-dark), var(--brand) 58%, #0b7550); color: #fff; }
.public-nav > div { width: min(1220px, calc(100% - 32px)); margin: 0 auto; display: flex; gap: 8px 26px; overflow-x: auto; scrollbar-width: thin; }
.public-nav a { flex: 0 0 auto; min-height: 42px; display: inline-flex; align-items: center; text-decoration: none; border-bottom: 3px solid transparent; }
.public-nav a:hover, .public-nav a:focus-visible { border-bottom-color: #f0c95a; }

main { width: min(1220px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 40px; }
.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .4fr); align-items: center; gap: 36px; min-height: 312px; padding: clamp(28px, 4vw, 50px); background: linear-gradient(128deg, #073f2b 0%, #08633f 58%, #16805a 100%); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; box-shadow: var(--shadow); }
.hero::before { content: ""; position: absolute; z-index: -1; width: 390px; height: 390px; right: -115px; top: -185px; border: 74px solid rgba(255,255,255,.07); border-radius: 50%; }
.hero::after { content: ""; position: absolute; z-index: -1; width: 280px; height: 280px; left: 43%; bottom: -235px; border: 52px solid rgba(236,190,64,.10); border-radius: 50%; }
.hero-copy { position: relative; z-index: 1; }
.hero h1 { max-width: 760px; margin: 12px 0 10px; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.12; letter-spacing: -.025em; }
.hero p { max-width: 740px; margin: 0; color: rgba(255,255,255,.82); font-size: 1.08rem; }
.public-pill, .eyebrow { display: inline-flex; color: var(--brand); font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.hero .public-pill { padding: 7px 11px; background: rgba(255,255,255,.11); color: #ffde84; border: 1px solid rgba(255,222,132,.32); border-radius: 999px; }
.release-card { position: relative; z-index: 1; display: grid; gap: 6px; padding: 24px; background: rgba(255, 255, 255, .97); color: var(--ink); border: 1px solid rgba(255,255,255,.7); border-radius: 18px; box-shadow: 0 20px 42px rgba(3,36,23,.24); }
.release-card::before { content: "KỲ BÁO CÁO"; width: fit-content; padding: 4px 8px; background: var(--brand-soft); color: var(--brand-dark); border-radius: 999px; font-size: .67rem; font-weight: 800; letter-spacing: .09em; }
.release-card > span, .release-card small { color: var(--muted); }
.release-card strong { color: var(--brand-dark); font-size: 2rem; line-height: 1.15; }
.release-card .release-source { margin-top: 8px; padding-top: 9px; color: #6d5317; border-top: 1px dashed #d7c78d; font-weight: 700; }
code { padding: 1px 5px; background: #edf1ef; border-radius: 4px; font-family: Consolas, monospace; font-size: .88em; }

.system-notice { margin-top: 14px; padding: 15px 18px; border: 1px solid; border-radius: 10px; }
.system-notice strong { display: block; margin-bottom: 2px; }
.system-notice p { margin: 0; }
.notice-warning { background: var(--gold-soft); border-color: #e7c465; color: #654600; }
.notice-danger { background: var(--red-soft); border-color: #e2aaa7; color: #812c2c; }
.notice-demo { background: #fff0c6; border-color: #dcae35; color: #654500; box-shadow: inset 5px 0 0 #ba7c00; }
.notice-source { display: flex; align-items: flex-start; gap: 13px; background: linear-gradient(110deg, #e7f5ed, #f8fbf9); border-color: #acd5bd; color: #174e35; box-shadow: 0 8px 26px rgba(20,64,43,.07); }
.notice-source-icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; background: var(--brand); color: #fff; border-radius: 50%; font-weight: 800; box-shadow: 0 5px 14px rgba(8,99,63,.2); }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.summary-grid article { position: relative; overflow: hidden; min-height: 144px; display: grid; align-content: center; gap: 5px; padding: 20px; background: linear-gradient(145deg, #fff, #fbfdfc); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 6px 18px rgba(24,65,46,.045); transition: transform .18s ease, box-shadow .18s ease; }
.summary-grid article::after { content: ""; position: absolute; width: 70px; height: 70px; right: -35px; bottom: -35px; background: currentColor; border-radius: 50%; opacity: .035; }
.summary-grid article:hover { transform: translateY(-3px); box-shadow: 0 13px 28px rgba(24,65,46,.1); }
.summary-grid article:first-child { border-top: 4px solid var(--brand); }
.summary-grid article:nth-child(2) { border-top: 4px solid var(--blue); }
.summary-grid article:nth-child(3) { border-top: 4px solid var(--purple); }
.summary-grid article:nth-child(4) { border-top: 4px solid #9b6f10; }
.summary-grid article:nth-child(5) { border-top: 4px solid #d07a12; }
.summary-grid article:nth-child(6) { border-top: 4px solid var(--red); }
.summary-grid-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.summary-grid span, .summary-grid p { color: var(--muted); }
.summary-grid strong { font-size: 2rem; line-height: 1.1; }
.summary-grid strong small { font-size: .9rem; font-weight: 500; }
.summary-grid p { margin: 2px 0 0; font-size: .85rem; }
.report-facts { border-top: 5px solid var(--brand); }
.report-fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.report-fact-grid article { min-height: 132px; display: grid; align-content: center; gap: 5px; padding: 17px; background: linear-gradient(145deg, #f8fcfa, #fff); border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: 12px; }
.report-fact-grid article:nth-child(3n+1) { border-top-color: var(--gold); }
.report-fact-grid article:nth-child(3n+2) { border-top-color: var(--brand); }
.report-fact-grid article:nth-child(3n) { border-top-color: var(--purple); }
.report-fact-grid article.report-fact-alert { background: linear-gradient(145deg, #fff5f2, #fff); border-top-color: var(--red); }
.report-fact-grid span, .report-fact-grid p { color: var(--muted); }
.report-fact-grid strong { font-size: 1.8rem; line-height: 1.1; }
.report-fact-grid strong small { font-size: .82rem; font-weight: 550; }
.report-fact-grid p { margin: 1px 0 0; font-size: .83rem; }
.report-fact-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.report-fact-details details { padding: 10px 12px; background: #f7faf8; border: 1px solid var(--line); border-radius: 8px; }
.report-fact-details summary { color: var(--brand-dark); font-weight: 700; cursor: pointer; }
.report-fact-details p { margin: 8px 0 0; color: var(--muted); line-height: 1.55; }
.report-reconciliation { margin: 12px 0 0; padding: 11px 13px; color: #654d12; background: #fff9e8; border-left: 3px solid var(--gold); border-radius: 6px; font-size: .84rem; }

.panel { margin-top: 16px; padding: clamp(20px, 3vw, 30px); background: rgba(255,255,255,.97); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 28px rgba(29, 62, 47, .06); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-heading h2 { margin: 4px 0 0; font-size: clamp(1.3rem, 2.7vw, 1.8rem); line-height: 1.25; }
.data-badge, .result-count { padding: 6px 10px; background: var(--brand-soft); border-radius: 999px; color: var(--brand-dark); font-size: .83rem; white-space: nowrap; }
.section-intro { margin: -7px 0 18px; color: var(--muted); }
.heading-note { max-width: 760px; margin: 7px 0 0; color: var(--muted); }

.public-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.public-chart-card { min-width: 0; padding: 21px; background: linear-gradient(150deg, #fbfdfc, #f6faf8); border: 1px solid var(--line); border-radius: 15px; transition: border-color .18s ease, box-shadow .18s ease; }
.public-chart-card:hover { border-color: #b4d2c2; box-shadow: 0 10px 24px rgba(24,65,46,.07); }
.public-chart-wide { grid-column: 1 / -1; }
.chart-card-heading { margin-bottom: 17px; }
.chart-card-heading > span { color: var(--brand); font-size: .72rem; font-weight: 750; letter-spacing: .07em; }
.chart-card-heading h3 { margin: 4px 0 0; font-size: 1.12rem; }
.donut-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 20px; }
.public-donut { position: relative; width: 176px; aspect-ratio: 1; display: grid; place-items: center; }
.public-donut svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.public-donut circle { fill: none; stroke-width: 15; }
.donut-base { stroke: #e3ebe7; }
.donut-segment { stroke-linecap: butt; }
.donut-orange { stroke: #d07a12; }
.donut-green { stroke: #16825a; }
.donut-blue { stroke: #2a6fa1; }
.donut-purple { stroke: #7550a1; }
.donut-red { stroke: #b34848; }
.public-donut > div { position: relative; z-index: 1; display: grid; text-align: center; }
.public-donut > div strong { font-size: 2.1rem; line-height: 1; }
.public-donut > div span { color: var(--muted); font-size: .82rem; }
.chart-legend { display: grid; gap: 9px; }
.chart-legend > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 7px; border-bottom: 1px dashed #d8e2dc; }
.chart-legend > div > span { min-width: 0; display: flex; align-items: center; gap: 8px; color: #3c5146; font-size: .85rem; }
.chart-legend strong, .band-chart strong, .status-chart strong { display: flex; align-items: baseline; gap: 5px; }
.chart-legend small, .band-chart small, .status-chart small { color: var(--muted); font-size: .72rem; font-weight: 500; }
.swatch { flex: 0 0 11px; width: 11px; height: 11px; display: inline-block; border-radius: 3px; background: #aeb8b3; }
.swatch-orange { background: #d07a12; }
.swatch-green { background: #16825a; }
.swatch-blue { background: #2a6fa1; }
.swatch-purple { background: #7550a1; }
.swatch-gold { background: #d6a61c; }
.swatch-red { background: #b34848; }
.swatch-neutral { background: #c8d0cc; border: 1px solid #98a69f; }

.stage-reach-chart, .band-chart, .status-chart { display: grid; gap: 10px; }
.officer-chart-heading { align-items: end; display: flex; justify-content: space-between; gap: 18px; }
.officer-chart-heading > div > span { color: var(--brand); font-size: .72rem; font-weight: 750; letter-spacing: .07em; }
.officer-chart-heading p { max-width: 460px; margin: 0; color: var(--muted); font-size: .82rem; text-align: right; }
.officer-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: -4px 0 13px; padding: 0 0 12px; border-bottom: 1px dashed #d8e2dc; list-style: none; }
.officer-chart-legend li { display: inline-flex; align-items: center; gap: 5px; color: #496056; font-size: .75rem; font-weight: 650; }
.officer-chart-legend i, .officer-stage-chip i { flex: 0 0 10px; width: 10px; height: 10px; display: inline-block; background: var(--stage-color); border-radius: 3px; }
.officer-chart { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.officer-card { min-width: 0; display: grid; gap: 10px; padding: 14px; background: #fff; border: 1px solid #d8e3dd; border-radius: 11px; box-shadow: 0 3px 10px rgba(24,65,46,.035); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.officer-card:hover, .officer-card:focus-within { transform: translateY(-1px); border-color: #b6cec1; box-shadow: 0 8px 18px rgba(24,65,46,.08); }
.officer-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.officer-card-name { min-width: 0; color: #28483a; font-size: .91rem; font-weight: 750; text-decoration-color: #a8c7b7; text-underline-offset: 3px; }
.officer-card-name:hover { color: var(--brand); text-decoration-color: currentColor; }
.officer-card-heading strong { flex: 0 0 auto; display: flex; align-items: baseline; gap: 4px; color: var(--brand-dark); font-size: 1.15rem; line-height: 1; }
.officer-card-heading small { color: var(--muted); font-size: .7rem; font-weight: 500; }
.officer-stage-bar { width: 100%; min-width: 0; height: 14px; display: block; overflow: hidden; background: #e4ebe7; border: 1px solid #d5dfda; border-radius: 999px; }
.officer-stage-segment { fill: var(--stage-color); stroke: #fff; stroke-width: .035; }
.officer-stage-breakdown { display: flex; flex-wrap: wrap; gap: 6px; }
.officer-stage-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 29px; padding: 4px 7px; background: #f8faf9; color: #40564c; border: 1px solid #d9e2de; border-left: 3px solid var(--stage-color); border-radius: 6px; font-size: .73rem; text-decoration: none; }
.officer-stage-chip:hover { background: #eef5f1; border-color: #b9ccc2; border-left-color: var(--stage-color); }
.officer-stage-chip b { color: #31483d; font-size: .72rem; }
.officer-stage-chip span { white-space: nowrap; }
.stage-reach-chart > div, .band-chart-row, .status-chart > a { display: grid; grid-template-columns: minmax(145px, .8fr) minmax(110px, 1fr) 52px; align-items: center; gap: 10px; }
.stage-reach-chart > div > span { min-width: 0; display: grid; }
.stage-reach-chart b { color: var(--brand-dark); font-size: .8rem; }
.stage-reach-chart small { overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.stage-reach-chart strong, .band-chart-row > strong, .status-chart > a > strong { justify-self: end; }
.stage-reach-chart progress, .band-chart progress, .status-chart progress { width: 100%; height: 12px; overflow: hidden; border: 0; border-radius: 999px; background: #e2e9e5; color: var(--brand); }
.stage-reach-chart progress::-webkit-progress-bar, .band-chart progress::-webkit-progress-bar, .status-chart progress::-webkit-progress-bar { background: #e2e9e5; border-radius: 999px; }
.stage-reach-chart progress::-webkit-progress-value, .status-chart progress::-webkit-progress-value { background: var(--brand); border-radius: 999px; }
.stage-reach-chart progress::-moz-progress-bar, .status-chart progress::-moz-progress-bar { background: var(--brand); border-radius: 999px; }
.band-chart-row > span { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.progress-green::-webkit-progress-value { background: #16825a !important; }
.progress-blue::-webkit-progress-value { background: #2a6fa1 !important; }
.progress-gold::-webkit-progress-value { background: #d6a61c !important; }
.progress-red::-webkit-progress-value { background: #b34848 !important; }
.progress-green::-moz-progress-bar { background: #16825a !important; }
.progress-blue::-moz-progress-bar { background: #2a6fa1 !important; }
.progress-gold::-moz-progress-bar { background: #d6a61c !important; }
.progress-red::-moz-progress-bar { background: #b34848 !important; }
.status-chart > a { padding: 4px 2px; border-radius: 7px; text-decoration: none; }
.status-chart > a:hover { background: #edf4f0; }
.chart-empty { color: var(--muted); }
.chart-method-note { margin: 16px 0 0; padding: 12px 14px; background: var(--surface); color: var(--muted); border-left: 4px solid var(--brand); border-radius: 6px; font-size: .86rem; }

.map-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-bottom: 14px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; }
.map-summary > div { min-height: 94px; display: grid; align-content: center; gap: 2px; padding: 14px; background: #f8fbf9; }
.map-summary span, .map-summary small { color: var(--muted); font-size: .78rem; }
.map-summary strong { font-size: 1.55rem; }
.map-filter-grid { display: grid; grid-template-columns: 1.1fr repeat(4, minmax(140px, .7fr)); gap: 10px; margin-bottom: 14px; padding: 13px; background: var(--surface); border-radius: 10px; }
.map-filter-grid label { display: grid; gap: 5px; color: #3c5146; font-size: .82rem; font-weight: 650; }
.map-filter-grid input, .map-filter-grid select { min-width: 0; width: 100%; min-height: 42px; padding: 8px 10px; background: var(--paper); color: var(--ink); border: 1px solid #aebfb6; border-radius: 7px; }
.public-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: stretch; }
.public-map-shell { position: relative; min-width: 0; overflow: hidden; background: linear-gradient(160deg, #edf4f0, #f8fbf9); border: 1px solid var(--line); border-radius: 12px; }
.public-spatial-map { min-height: 610px; display: grid; place-items: center; }
.public-spatial-map svg { width: 100%; height: 610px; display: block; touch-action: none; }
.map-loading { display: grid; gap: 4px; padding: 28px; text-align: center; }
.map-loading span { color: var(--muted); }
.map-feature { stroke: #ffffff; stroke-width: 1.1; vector-effect: non-scaling-stroke; cursor: default; transition: opacity .15s ease, fill .15s ease, stroke-width .15s ease; }
.map-feature { cursor: pointer; }
.map-feature:hover, .map-feature:focus { stroke: #17251f; stroke-width: 2.2; outline: none; }
.map-band-high { fill: #16825a; }
.map-band-medium { fill: #2a6fa1; }
.map-band-low { fill: #e0ae1f; }
.map-band-critical { fill: #b34848; }
.map-band-neutral { fill: #cad2ce; }
.map-feature[data-tracked="0"] { fill-opacity: .58; }
.map-feature[data-tracked="1"] { fill-opacity: .88; }
.map-feature.is-map-hidden { display: none; }
.map-feature.is-map-search-match { stroke: #151515; stroke-width: 3; }
.map-controls { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; gap: 5px; padding: 5px; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 5px 16px rgba(22,50,37,.12); }
.map-controls button { min-width: 36px; min-height: 36px; padding: 5px 9px; background: #fff; color: var(--ink); border: 1px solid #b7c6be; border-radius: 6px; cursor: pointer; }
.map-controls button:last-child { font-size: .78rem; }
.map-controls button:hover { background: var(--brand-soft); }
.map-source { position: absolute; left: 12px; bottom: 49px; max-width: calc(100% - 24px); padding: 6px 9px; background: rgba(255,255,255,.94); color: #3b5146; border: 1px solid var(--line); border-radius: 6px; font-size: .75rem; }
.map-source[data-tone="error"] { background: var(--red-soft); color: #812c2c; border-color: #e2aaa7; }
.map-legend { position: absolute; left: 12px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 7px 12px; max-width: calc(100% - 24px); padding: 7px 10px; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 7px; font-size: .72rem; }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-detail { min-width: 0; padding: 19px; background: #f8fbf9; border: 1px solid var(--line); border-radius: 12px; }
.map-detail h3 { margin: 7px 0 8px; font-size: 1.2rem; }
.map-detail p { margin: 0 0 14px; color: var(--muted); }
.map-detail dl { display: grid; gap: 9px; margin: 15px 0; }
.map-detail dl div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 7px; border-bottom: 1px dashed #ccd8d1; }
.map-detail dt { color: var(--muted); }
.map-detail dd { margin: 0; text-align: right; font-weight: 650; }
.map-detail .button { width: 100%; }

.stage-list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.stage-item { min-height: 132px; display: grid; align-content: space-between; gap: 3px; padding: 13px; border: 1px solid var(--line); border-top: 4px solid var(--stage-color, var(--brand)); border-radius: 10px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.stage-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30, 63, 48, .10); }
.stage-item span, .stage-item small { color: var(--muted); font-size: .78rem; }
.stage-item strong { font-size: 1.9rem; }
/* Tiến độ thấp → cao: đỏ → cam → vàng → xanh. */
.stage-1 { --stage-color: #b42318; }
.stage-2 { --stage-color: #c2410c; }
.stage-3 { --stage-color: #b45309; }
.stage-4 { --stage-color: #806500; }
.stage-5 { --stage-color: #557a0b; }
.stage-6 { --stage-color: #147a54; }
.stage-7 { --stage-color: #0b5d3b; }

.filter-form { display: grid; grid-template-columns: minmax(210px, 1.3fr) repeat(4, minmax(130px, .62fr)) auto auto; gap: 10px; align-items: end; margin-bottom: 18px; padding: 14px; background: var(--surface); border-radius: 10px; }
.filter-form label { display: grid; gap: 5px; color: #3c5146; font-size: .85rem; font-weight: 600; }
.filter-form input, .filter-form select { width: 100%; min-height: 43px; padding: 9px 10px; background: var(--paper); color: var(--ink); border: 1px solid #aebfb6; border-radius: 7px; }
.button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; border: 1px solid transparent; border-radius: 8px; font-weight: 650; text-decoration: none; cursor: pointer; }
.button-primary { background: linear-gradient(110deg, var(--brand-dark), var(--brand)); color: #fff; border-color: var(--brand); box-shadow: 0 5px 14px rgba(8,99,63,.14); }
.button-primary:hover { background: var(--brand-dark); }
.button-light { background: var(--paper); color: var(--ink); border-color: #aebfb6; }

.public-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.public-table { width: 100%; border-collapse: collapse; }
.public-table th, .public-table td { padding: 13px 12px; border-bottom: 1px solid #e3eae6; text-align: left; vertical-align: middle; }
.public-table thead th { background: #edf4f0; color: #42564b; font-size: .78rem; letter-spacing: .035em; text-transform: uppercase; }
.public-table tbody tr:last-child > * { border-bottom: 0; }
.public-table tbody tr:hover { background: #fafcfb; }
.public-table th strong, .public-table td strong { display: block; }
.public-table th small, .public-table td small { display: block; color: var(--muted); margin-top: 2px; font-weight: 400; }
.priority-ranking { overflow: hidden; border-top: 5px solid #a23535; }
.priority-ranking .section-heading { align-items: center; }
.ranking-all-link { color: var(--brand-dark); font-weight: 750; text-decoration: none; }
.ranking-table-wrap { box-shadow: inset 0 0 0 1px rgba(162,53,53,.04); }
.ranking-table { min-width: 1080px; }
.directory .public-table { min-width: 1260px; }
.public-rank-badge { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 50%; font-weight: 800; box-shadow: 0 4px 10px rgba(31,95,139,.18); }
.public-rank-badge.rank-1 { background: #a23535; }
.public-rank-badge.rank-2 { background: #ce7110; }
.public-rank-badge.rank-3 { background: #9a7415; }
.public-rank-badge.rank-other { background: #4c7186; }
.ranking-priority-row > * { background: linear-gradient(90deg, rgba(250,233,232,.55), rgba(255,255,255,0)); }
.ranking-priority-row:hover > * { background: #fff7f5 !important; }
.ranking-commune-link { color: inherit; text-decoration: none; }
.ranking-commune-link:hover strong { color: var(--brand); text-decoration: underline; }
.ranking-reason { display: inline-flex; max-width: 220px; padding: 5px 8px; border-radius: 7px; font-size: .78rem; font-weight: 700; line-height: 1.35; }
.ranking-reason.tone-danger { color: #8c3030; background: var(--red-soft); }
.ranking-reason.tone-warning { color: #765400; background: var(--gold-soft); }
.ranking-reason.tone-blue { color: #164f76; background: var(--blue-soft); }
.ranking-reason.tone-success { color: var(--brand-dark); background: var(--brand-soft); }
.ranking-reason.tone-neutral { color: #56645d; background: #ecefed; }
.ranking-disclaimer, .ranking-method-public { margin: 14px 0 0; padding: 11px 13px; color: var(--muted); background: #f7faf8; border-left: 3px solid #b98c21; border-radius: 6px; font-size: .84rem; }
.ranking-method-public { margin: 0 0 16px; }
.progress-value { min-width: 115px; display: grid; gap: 5px; }
.progress-value progress { width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: 999px; background: #e1e8e4; color: var(--brand); }
.progress-value progress::-webkit-progress-bar { background: #e1e8e4; border-radius: 999px; }
.progress-value progress::-webkit-progress-value { background: var(--brand); border-radius: 999px; }
.progress-value progress::-moz-progress-bar { background: var(--brand); border-radius: 999px; }
.status { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: .78rem; font-weight: 650; }
.status-success { background: var(--brand-soft); color: var(--brand-dark); }
.status-info { background: var(--blue-soft); color: #164f76; }
.status-warning { background: var(--gold-soft); color: #765400; }
.status-danger { background: var(--red-soft); color: #8c3030; }
.status-purple { background: var(--purple-soft); color: #573d7d; }
.status-muted { background: #ecefed; color: #56645d; }
.detail-link { color: var(--brand); font-weight: 650; text-underline-offset: 3px; white-space: nowrap; }
.empty-state { padding: 34px; text-align: center; background: var(--surface); border-radius: 10px; }
.empty-state strong { font-size: 1.1rem; }
.empty-state p { margin: 4px 0 0; color: var(--muted); }

.commune-detail { border-top: 5px solid var(--brand); }
.close-detail { color: var(--brand); font-weight: 650; }
.commune-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 9px; }
.commune-summary article { min-height: 110px; display: grid; align-content: center; gap: 4px; padding: 14px; background: var(--surface); }
.commune-summary article > span, .commune-summary small { color: var(--muted); }
.commune-summary article > strong:not(.status) { font-size: 1.55rem; }
.commune-summary .officer-name { font-size: 1.12rem !important; line-height: 1.25; }
.public-summary { margin-top: 14px; padding: 15px; background: #f4f8f6; border-left: 4px solid var(--brand); }
.public-summary p { margin: 4px 0 0; }
.subheading { margin: 24px 0 12px; font-size: 1.05rem; }
.lifecycle { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.lifecycle li { min-height: 128px; display: grid; align-content: start; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; }
.stage-number { width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid #99aaa1; border-radius: 50%; font-weight: 700; }
.lifecycle li div { display: grid; gap: 4px; }
.lifecycle li small { color: var(--muted); }
.lifecycle-completed { background: #edf7f1; }
.lifecycle-completed .stage-number { background: var(--brand); border-color: var(--brand); color: #fff; }
.lifecycle-in_progress { background: #fff7df; border-color: #dfc36f !important; }
.lifecycle-in_progress .stage-number { background: #a9770c; border-color: #a9770c; color: #fff; }

.history-timeline { margin: 0; padding: 0; list-style: none; }
.history-timeline li { position: relative; display: grid; grid-template-columns: 145px 18px minmax(0, 1fr); gap: 12px; }
.history-timeline li:not(:last-child) { padding-bottom: 18px; }
.history-timeline li::before { content: ""; position: absolute; top: 15px; bottom: -5px; left: 154px; width: 2px; background: #c7d5cd; }
.history-timeline li:last-child::before { display: none; }
.timeline-date { display: grid; align-content: start; text-align: right; }
.timeline-date small { color: var(--muted); }
.timeline-node { z-index: 1; width: 14px; height: 14px; margin-top: 4px; background: var(--brand); border: 3px solid #d8eee2; border-radius: 50%; }
.history-timeline article { padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.history-timeline article > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.history-timeline article p { margin: 6px 0; }
.history-timeline article > small { display: block; margin-top: 5px; color: var(--muted); }

.version-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.version-card { display: grid; align-content: start; gap: 14px; padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.version-active { border-color: var(--brand); box-shadow: inset 0 4px 0 var(--brand); }
.version-card > div:first-child { display: grid; gap: 2px; }
.version-card > div:first-child > span { color: var(--gold); font-size: .72rem; font-weight: 750; letter-spacing: .07em; }
.version-card > div:first-child > strong { font-size: 1.35rem; }
.version-card > div:first-child > small { color: var(--muted); }
.version-card dl { display: grid; gap: 7px; margin: 0; }
.version-card dl div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed #ccd7d1; }
.version-card dt { color: var(--muted); }
.version-card dd { margin: 0; text-align: right; }
.version-card p { margin: 0; color: var(--muted); }

.public-boundary { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 18px; background: #eaf3ee; border: 1px solid #c9dbd1; border-radius: 12px; }
.public-boundary > div:first-child { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; background: var(--brand); color: #fff; border-radius: 50%; }
.public-boundary h2 { margin: 0; font-size: 1.02rem; }
.public-boundary p { margin: 3px 0 0; color: #45594e; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px max(16px, calc((100% - 1220px) / 2)); background: #13271e; color: #fff; }
.site-footer div { display: grid; gap: 2px; }
.site-footer span, .site-footer p { color: #c4d3cb; }
.site-footer p { margin: 0; }

@media (max-width: 1020px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-map-layout { grid-template-columns: 1fr; }
  .map-detail { min-height: 190px; }
  .map-filter-grid { grid-template-columns: 1fr 1fr; }
  .stage-list, .lifecycle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filter-form { grid-template-columns: 1fr 1fr; }
  .filter-form .search-field { grid-column: 1 / -1; }
  .commune-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .version-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 148px; }
  .header-inner { min-height: 70px; }
  .public-brand img { width: 44px; height: 44px; }
  .public-brand strong { font-size: .82rem; }
  .public-brand small { display: none; }
  .login-link { padding: 8px 10px; font-size: .82rem; }
  .public-nav > div { gap: 20px; }
  main { width: min(100% - 20px, 1220px); padding-top: 14px; }
  .hero { grid-template-columns: 1fr; gap: 18px; padding: 22px; border-radius: 13px; }
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .summary-grid article { min-height: 118px; padding: 14px; }
  .report-fact-details { grid-template-columns: 1fr; }
  .stage-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 7px; }
  .stage-item { flex: 0 0 150px; scroll-snap-align: start; }
  .section-heading { flex-direction: column; }
  .result-count, .data-badge { white-space: normal; }
  .filter-form { grid-template-columns: 1fr; }
  .filter-form .search-field { grid-column: auto; }
  .public-table-wrap { overflow: visible; border: 0; }
  .public-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .public-table, .public-table tbody, .public-table tr, .public-table th, .public-table td { display: block; width: 100%; }
  .ranking-table, .directory .public-table { min-width: 0; }
  .public-table tbody { display: grid; gap: 10px; }
  .public-table tr { padding: 13px; border: 1px solid var(--line); border-radius: 10px; }
  .public-table th, .public-table td { display: grid; grid-template-columns: minmax(88px, .35fr) minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px dashed #dce4df; }
  .public-table tr > *:last-child { border-bottom: 0; }
  .public-table th::before, .public-table td::before { content: attr(data-label); color: var(--muted); font-size: .78rem; font-weight: 500; }
  .progress-value { min-width: 0; }
  .detail-link { white-space: normal; }
  .lifecycle { grid-template-columns: 1fr; }
  .lifecycle li { min-height: auto; grid-template-columns: auto 1fr; align-items: start; }
  .commune-summary { grid-template-columns: 1fr 1fr; }
  .history-timeline li { grid-template-columns: 1fr; gap: 7px; padding-left: 23px; }
  .history-timeline li::before { left: 6px; top: 12px; }
  .timeline-node { position: absolute; left: 0; top: 2px; }
  .timeline-date { text-align: left; }
  .history-timeline article > div { align-items: flex-start; flex-direction: column; }
  .version-list { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; }
  .public-chart-grid { grid-template-columns: 1fr; }
  .officer-chart { grid-template-columns: 1fr; }
  .officer-chart-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .officer-chart-heading p { text-align: left; }
  .donut-layout { grid-template-columns: 160px minmax(0, 1fr); }
  .public-donut { width: 156px; }
  .map-summary { grid-template-columns: 1fr 1fr; }
  .map-filter-grid { grid-template-columns: 1fr; }
  .public-spatial-map, .public-spatial-map svg { min-height: 510px; height: 510px; }
  .map-controls { flex-wrap: wrap; max-width: calc(100% - 24px); }
  .map-controls button { min-height: 44px; min-width: 44px; }
  .map-source { bottom: 79px; }
  .map-legend { gap: 5px 9px; }
}

@media (max-width: 430px) {
  .header-inner { width: calc(100% - 20px); }
  .public-brand img { width: 38px; height: 38px; }
  .public-brand strong { max-width: 155px; font-size: .73rem; }
  .login-link span { display: none; }
  .summary-grid { grid-template-columns: 1fr; }
  .report-fact-grid { grid-template-columns: 1fr; }
  .commune-summary { grid-template-columns: 1fr; }
  .panel { padding: 16px; }
  .donut-layout { grid-template-columns: 1fr; justify-items: center; }
  .chart-legend { width: 100%; }
  .stage-reach-chart > div, .band-chart-row, .status-chart > a { grid-template-columns: minmax(105px, .9fr) minmax(70px, 1fr) 44px; gap: 7px; }
  .stage-reach-chart small { max-width: 115px; }
  .map-summary { grid-template-columns: 1fr; }
  .public-spatial-map, .public-spatial-map svg { min-height: 455px; height: 455px; }
  .map-source { position: static; margin: 8px; }
  .map-legend { position: static; margin: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage-item, .map-feature { transition: none; }
}

@media (forced-colors: active) {
  .swatch { border: 1px solid CanvasText; }
  .officer-chart-legend i, .officer-stage-chip i { border: 1px solid CanvasText; }
  .officer-stage-segment { fill: Canvas; stroke: CanvasText; }
  .officer-stage-chip { border-color: CanvasText; }
  .map-feature { stroke: CanvasText; }
  .map-feature[data-tracked="1"] { fill: Highlight; }
  .map-feature[data-tracked="0"] { fill: Canvas; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .filter-form, .close-detail, .button { display: none !important; }
  body { background: #fff; }
  main { width: 100%; padding: 0; }
  .panel, .hero, .summary-grid article { break-inside: avoid; box-shadow: none; }
  .version-list { grid-template-columns: 1fr 1fr; }
}