:root {
  color-scheme: light;
  --blue: #087db2;
  --blue-dark: #00699e;
  --cyan: #4db8df;
  --navy: #173d59;
  --muted: #6d8798;
  --line: #dce8ee;
  --surface: #fff;
  --canvas: #f2f6f8;
  --green: #318d67;
  --gold: #b17d1b;
  --red: #b54f4b;
  font-family: "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--navy); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.topbar { height: 78px; display:flex; align-items:center; gap:14px; padding:0 28px; background:#e6f2f7; border-bottom:1px solid #d1e4ec; position:sticky; top:0; z-index:20; }
.menu-button { width:38px;height:38px;border:0;background:transparent;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:8px; }
.menu-button span { display:block;height:2px;width:20px;background:#567587;border-radius:2px; }
.brand-logo { height:46px;width:auto;object-fit:contain; }
.brand-mark { width:42px;height:42px;border-radius:50%;border:2px solid #397eaa;background:#fff;display:grid;place-items:center;color:#e35c68;font-size:28px;font-weight:700;box-shadow:inset 0 0 0 4px #edf7fb; }
.brand-copy { display:flex;flex-direction:column;gap:4px; }
.brand-copy strong { color:#355c75;font-size:12px;letter-spacing:.7px; }
.brand-copy small { color:#5283a1;font-size:8px;font-weight:700;letter-spacing:.8px; }
.topbar-right { margin-left:auto;display:flex;align-items:center;gap:9px; }
.data-badge,.source-chip { display:inline-flex;align-items:center;gap:7px;border:1px solid #eddba9;background:#fff6df;color:#896313;border-radius:99px;padding:8px 12px;font-weight:800;font-size:9px;letter-spacing:.3px; }
.data-badge i,.local-state i { display:inline-block;width:7px;height:7px;border-radius:50%;background:#e0a22f; }
.icon-button { width:34px;height:34px;border:1px solid #d2e3eb;background:white;border-radius:10px;color:#2c789e;font-weight:700; }
.app-shell { display:flex;min-height:calc(100vh - 78px); }
.sidebar { width:232px;flex:0 0 232px;background:#fff;padding:25px 14px 18px;border-right:1px solid #e1eaee;display:flex;flex-direction:column;gap:5px; }
.side-label,.eyebrow { color:#718b9b;font-size:9px;letter-spacing:1px;font-weight:800; }
.side-label { padding:5px 12px 12px; }
.nav-item { border:0;background:transparent;text-align:left;color:#597386;padding:12px;border-radius:10px;font-size:12px;display:flex;align-items:center;gap:11px; }
.nav-item:hover,.nav-item.active { background:#eaf5f9;color:#0879aa;font-weight:700; }
.nav-item.active { box-shadow:inset 3px 0 #158bbb; }
.nav-item b { margin-left:auto;background:#d9edf5;color:#0879aa;padding:2px 7px;border-radius:10px;font-size:10px; }
.nav-icon { width:19px;text-align:center;font-size:16px; }
.sidebar-divider { border-top:1px solid #e8eff3;margin:16px 6px 12px; }
.side-deadline { display:flex;align-items:flex-start;gap:10px;padding:8px 12px;color:#38576d;font-size:11px; }
.side-deadline small { display:block;color:#8aa0af;font-size:10px;margin-top:4px; }
.dot { width:8px;height:8px;border-radius:50%;margin-top:3px; }
.dot.blue { background:#1689bc; }.dot.gold { background:#e4a83b; }
.sidebar-footer { margin-top:auto;padding:14px 12px;background:#eef7fa;border-radius:12px;display:flex;flex-direction:column;gap:5px; }
.sidebar-footer strong { font-size:12px;color:#0877a7; }.sidebar-footer small { font-size:9px;color:#718b9b; }
.sidebar-footer .local-state { margin-top:6px;color:#4d8367; }.local-state i { background:#54a879;margin-right:5px; }
.main-content { min-width:0;flex:1;padding:28px clamp(20px,3vw,46px) 18px; }
.page-heading { display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 22px; }
h1 { font-size:24px;margin:7px 0 6px;color:#183f5c; }
.page-heading p { margin:0;color:#71899a;font-size:12px; }
.heading-actions { display:flex;align-items:center;gap:9px; }
.search-box { display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 10px;height:36px;color:#2681a7; }
.search-box input { border:0;outline:0;width:145px;font-size:11px;color:var(--navy); }
.button { border-radius:9px;border:1px solid transparent;padding:10px 13px;font-size:10px;font-weight:800;white-space:nowrap; }
.button.primary { background:var(--blue);color:white;box-shadow:0 3px 8px #087db230; }.button.primary:hover { background:var(--blue-dark); }
.button.outline { background:white;border-color:#d5e5ec;color:#167aa5; }.button.outline:hover { background:#edf7fb; }
.button.full-width { width:100%;margin-top:12px; }
.page-section { display:block; }.hidden { display:none!important; }
.metric-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px; }
.metric-card { min-height:115px;border-radius:16px;padding:17px 19px;position:relative;display:flex;flex-direction:column;box-shadow:0 5px 14px #345a7010; }
.metric-card.blue-card { color:white;background:linear-gradient(135deg,#0788ba,#006ca5); }
.metric-card.light-card { background:white;border:1px solid #e1ebef; }
.metric-label { font-size:9px;font-weight:800;letter-spacing:.7px;opacity:.8; }
.metric-card strong { font-size:28px;margin-top:8px;line-height:1; }.metric-card small { font-size:10px;opacity:.78;margin-top:5px; }
.metric-icon { position:absolute;right:15px;top:15px;width:30px;height:30px;border-radius:10px;background:#ffffff28;display:grid;place-items:center;font-weight:900; }
.green-icon { color:#34835f;background:#e8f5ed; }.gold-icon { color:#b17d1b;background:#fff4df; }.red-icon { color:#b54f4b;background:#faeae9; }
.panel { background:var(--surface);border:1px solid #e2ebef;border-radius:16px;padding:19px 21px;box-shadow:0 5px 16px #294a5a0b; }
.panel-heading { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px; }
.panel-heading h2,.scenario-panel h2,.rules-panel h2,.input-panel h2 { margin:5px 0 0;color:#173f5b;font-size:15px; }
.panel-heading.compact { margin-bottom:13px; }.progress-count { font-size:20px;color:#0782b3;font-weight:800; }
.staffing-overview { margin-bottom:16px; }
.comparison-cards { display:grid;grid-template-columns:1fr 34px 1fr 1fr;gap:12px;align-items:stretch; }
.comparison-card { border-radius:13px;padding:14px 15px;min-height:138px; }
.comparison-card.baseline { background:#f0f7fa;border:1px solid #e0edf2; }
.comparison-card.target { background:#eaf6fa;border:1px solid #d0e9f2; }
.comparison-card.excluded { background:#fbf8f1;border:1px solid #eee4c9; }
.card-kicker { color:#718b9b;font-size:8px;letter-spacing:.7px;font-weight:800; }
.big-number { font-size:25px;color:#183e5a;font-weight:800;margin-top:8px; }.big-number small { font-size:11px;font-weight:600;color:#7890a0; }
.comparison-card p { margin:5px 0 10px;color:#708899;font-size:10px;line-height:1.45; }
.micro-breakdown { color:#768d9b;font-size:9px; }.micro-breakdown span { font-weight:800;color:#167ca8; }.micro-breakdown b { padding:0 5px;color:#a6b6bf; }
.delta-pill { display:inline-block;padding:5px 8px;border-radius:20px;background:#e0f1e8;color:#367c57;font-size:9px;font-weight:800; }
.delta-pill.neutral { background:#f2ead7;color:#896c2d; }
.comparison-arrow { color:#83a5b7;font-size:22px;text-align:center;align-self:center; }
.notice { border-radius:10px;padding:11px 13px;font-size:10px;line-height:1.5;color:#6b8090;background:#f1f7fa;display:flex;gap:9px; }
.warning-notice { margin-top:13px;background:#fff8e9;border:1px solid #f0e1bd;color:#77663c; }
.notice strong { color:#775a1b; }.notice-symbol { flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:#f1d890;color:#735510;text-align:center;line-height:18px;font-weight:900; }
.overview-columns { display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-bottom:16px; }
.progress-track { height:7px;background:#e9f0f3;border-radius:9px;overflow:hidden; }.progress-track div { width:0%;height:100%;background:linear-gradient(90deg,#087db2,#58c1df);transition:width .25s; }
.milestones { display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:18px; }
.milestone { position:relative;padding-top:16px; }.milestone:before { content:"";position:absolute;left:0;right:0;top:4px;height:2px;background:#e1eaf0; }.milestone i { position:absolute;top:0;left:0;width:10px;height:10px;border:2px solid #b9c9d1;border-radius:50%;background:#fff;z-index:1; }.milestone.done i { background:#3fa77c;border-color:#3fa77c; }
.milestone b { display:block;font-size:9px;color:#35576e;line-height:1.35; }.milestone small { color:#879ba9;font-size:8px;display:block;margin-top:4px; }
.text-button { border:0;background:none;color:#1380a8;font-weight:800;font-size:10px; }
.issue-row { display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid #edf2f4; }.issue-icon { flex:0 0 24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:900; }.blue-issue { background:#e4f2f8;color:#1382ae; }.gold-issue { background:#fff4df;color:#ac7919; }.gray-issue { background:#eef2f4;color:#728693; }
.issue-row div { flex:1; }.issue-row b { display:block;font-size:10px;color:#35566d; }.issue-row small { display:block;font-size:9px;line-height:1.4;color:#8297a4;margin-top:3px; }.issue-row em { font-style:normal;font-size:8px;color:#9a7b39;background:#fbf5e8;padding:4px 6px;border-radius:8px;white-space:nowrap; }
.unit-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
.unit-tile { border:1px solid #e5edf1;border-radius:12px;padding:12px;cursor:pointer;transition:transform .15s,box-shadow .15s;background:#fff; }.unit-tile:hover { transform:translateY(-2px);box-shadow:0 7px 14px #315a7017; }
.unit-tile h3 { margin:0 0 5px;font-size:10px;color:#284d65; }.unit-tile p { margin:0;color:#8296a3;font-size:9px; }.unit-tile .tile-footer { display:flex;justify-content:space-between;align-items:center;margin-top:10px; }
.status-pill { border-radius:99px;padding:4px 8px;font-size:8px;font-weight:800;background:#f0f3f5;color:#72838e;white-space:nowrap; }.status-pill[data-status="Đang thực hiện"] { background:#e5f4ec;color:#317a55; }.status-pill[data-status="Chờ rà soát"] { background:#fff3dd;color:#916411; }.status-pill[data-status="Có vướng mắc"] { background:#fbe9e8;color:#a14845; }.status-pill[data-status="Hoàn tất"] { background:#e5f3ed;color:#28714f; }.status-pill[data-status="Chờ đơn vị bổ sung"] { background:#eaf1fa;color:#4c729e; }
.unit-tile .count { font-size:9px;color:#1680a9;font-weight:800; }
.filter-row { display:flex;gap:8px; }.filter-row select,.note-composer select,.composer-actions select { border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px;color:#49667b;font-size:10px; }
.units-list { display:flex;flex-direction:column; }.unit-row { display:grid;grid-template-columns:minmax(200px,1.6fr) 130px 150px 220px 36px;gap:12px;align-items:center;padding:11px 3px;border-top:1px solid #edf2f4; }.unit-row h3 { margin:0;color:#33576e;font-size:10px; }.unit-row small { display:block;color:#8b9eaa;font-size:9px;margin-top:4px; }.unit-row .owner-input { width:100%;border:1px solid #e2ebef;border-radius:7px;padding:7px;font-size:9px; }.unit-row select { border:1px solid #e2ebef;border-radius:7px;padding:7px;color:#567184;font-size:9px; }.unit-progress { height:6px;background:#e9eff2;border-radius:9px;overflow:hidden; }.unit-progress i { display:block;height:100%;background:#37a488; }
.work-list { display:grid;grid-template-columns:repeat(2,1fr);gap:10px; }.work-item { display:flex;align-items:center;gap:11px;border:1px solid #e8eef1;border-radius:10px;padding:12px; }.work-item input { accent-color:#1583ad;width:15px;height:15px; }.work-item span { flex:1;font-size:10px;color:#35566d; }.work-item small { color:#8498a5;font-size:9px; }
.staffing-layout { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(310px,.8fr);gap:15px;align-items:start; }.staff-table { border-collapse:collapse;width:100%;font-size:10px; }.staff-table th { text-align:left;color:#71899a;font-size:9px;letter-spacing:.4px;padding:10px 8px;background:#f2f8fa; }.staff-table td { padding:12px 8px;border-bottom:1px solid #edf2f4;color:#4c687a;vertical-align:top; }.staff-table td:first-child { font-weight:700;color:#34546a; }.staff-table .total-row td { background:#f6fafb;font-weight:800;color:#1e536e; }.staff-table td input { width:85px;border:1px solid #dce8ee;border-radius:7px;padding:6px;color:#31566d;font-size:10px; }.muted-cell { color:#94a4ad!important;font-style:italic; }
.staffing-footnote { margin-top:12px;color:#758b99;line-height:1.5;font-size:9px;background:#f4f8fa;padding:10px;border-radius:8px; }.source-chip { font-size:8px;padding:6px 9px; }.scenario-panel p { color:#758b99;font-size:10px;line-height:1.5; }.field-label { display:block;color:#668092;font-size:9px;font-weight:800;margin:12px 0 5px; }.number-input { width:100%;padding:9px 10px;border:1px solid #dbe7ec;border-radius:8px;color:#234d67;outline-color:#71b9d5;font-size:11px; }.allocation-fields { display:grid;gap:9px;margin-top:12px; }.allocation-fields label,.inputs-grid label { color:#5b7688;font-size:9px;font-weight:700; }.allocation-fields input,.inputs-grid input { display:block;width:100%;margin-top:5px;border:1px solid #dfe9ee;border-radius:8px;padding:8px;color:#31566d;font-size:10px; }
.allocation-total { display:flex;justify-content:space-between;align-items:center;padding:11px 0 5px;color:#718899;font-size:10px; }.allocation-total strong { color:#1a749c;font-size:13px; }.validation-message { border-radius:8px;padding:8px;background:#f2f6f8;color:#78909e;font-size:9px; }.validation-message.valid { background:#e9f5ed;color:#367a56; }.validation-message.invalid { background:#fff1df;color:#95651a; }
.scenario-divider { border-top:1px solid #e9eff2;margin:18px 0 16px; }.inline-input { display:flex;gap:7px;align-items:center; }.inline-input .number-input { flex:1; }.scenario-panel>small { display:block;margin-top:7px;line-height:1.4; }
.input-panel { margin-top:15px; }.inputs-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:13px; }.input-footer { display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:#8499a6;font-size:9px; }
.decision-layout { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,.7fr);gap:15px;align-items:start; }.note-composer { padding:13px;border:1px solid #e2ebef;border-radius:11px;background:#f8fbfc; }.note-composer select { width:100%; }.note-composer textarea { display:block;width:100%;resize:vertical;border:1px solid #dce7ec;border-radius:8px;padding:9px;font-size:10px;color:#34576d; }.composer-actions { display:flex;justify-content:space-between;gap:8px;margin-top:9px; }.composer-actions select { width:auto; }.notes-list { margin-top:12px; }.note-card { border-top:1px solid #e9eff2;padding:13px 2px; }.note-meta { display:flex;justify-content:space-between;color:#8799a5;font-size:9px; }.note-meta b { color:#42667c; }.note-card p { margin:7px 0;color:#496779;font-size:10px;line-height:1.5;white-space:pre-wrap; }.note-tag { color:#147ba4;background:#e8f5fa;padding:4px 7px;border-radius:10px;font-weight:700; }
.rules-panel ul { list-style:none;padding:0;margin:14px 0; }.rules-panel li { padding:9px 0;border-bottom:1px solid #edf2f4; }.rules-panel li b { display:block;color:#3e6278;font-size:10px; }.rules-panel li span { display:block;color:#8599a5;font-size:9px;margin-top:4px; }.rules-panel .notice { margin-top:14px; }
.app-footer { display:flex;justify-content:space-between;gap:10px;color:#8b9da8;font-size:9px;padding:18px 2px 0; }
.toast { position:fixed;right:24px;bottom:24px;z-index:50;padding:11px 16px;border-radius:10px;background:#17445e;color:white;font-size:11px;box-shadow:0 8px 24px #153d5433;opacity:0;transform:translateY(12px);transition:all .2s;pointer-events:none; }.toast.show { opacity:1;transform:translateY(0); }
 .unit-staffing-panel { margin-top:15px; }.unit-staffing-panel .panel-heading { align-items:center; }.unit-staffing-wrap { max-height:520px;overflow:auto;margin-top:12px; }.unit-staffing-table { min-width:1150px; }.unit-staffing-table th { position:sticky;top:0;z-index:1;text-align:center; }.unit-staffing-table thead tr:nth-child(2) th { top:31px; }.unit-staffing-table td input { width:58px; }.unit-staffing-table tfoot td { position:sticky;bottom:0;background:#eaf5f9;color:#1e536e;font-weight:800;padding:11px 8px; }
@media(max-width:1300px) { .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-heading{align-items:flex-start;flex-direction:column}.heading-actions{width:100%}.search-box{flex:1}.search-box input{width:100%}.comparison-cards{grid-template-columns:1fr 24px 1fr}.comparison-card.excluded{grid-column:1/-1}.overview-columns{grid-template-columns:1fr}.staffing-layout,.decision-layout{grid-template-columns:1fr} }
@media(max-width:1100px) { .metric-grid{grid-template-columns:repeat(2,1fr)}.comparison-cards{grid-template-columns:1fr 24px 1fr}.comparison-card.excluded{grid-column:1/-1}.overview-columns{grid-template-columns:1fr}.staffing-layout,.decision-layout{grid-template-columns:1fr}.unit-row{grid-template-columns:minmax(160px,1.4fr) 100px 130px 150px 25px} }
@media(max-width:760px) { .topbar{padding:0 13px;height:65px}.brand-copy strong{font-size:10px}.brand-copy small{font-size:7px}.data-badge{display:none}.sidebar{position:fixed;z-index:30;left:-250px;top:65px;bottom:0;transition:left .2s;box-shadow:8px 0 20px #1c43501a}.sidebar.open{left:0}.main-content{padding:20px 13px}.page-heading{align-items:flex-start;flex-direction:column}.heading-actions{width:100%}.search-box{flex:1}.search-box input{width:100%}.heading-actions .button{font-size:9px}.metric-grid{gap:8px}.metric-card{padding:13px;min-height:102px}.metric-card strong{font-size:24px}.comparison-cards{grid-template-columns:1fr}.comparison-arrow{transform:rotate(90deg)}.comparison-card.excluded{grid-column:auto}.unit-grid{grid-template-columns:repeat(2,1fr)}.panel{padding:15px}.panel-heading{align-items:flex-start;flex-direction:column}.panel-heading .button{align-self:flex-start}.filter-row{width:100%;flex-wrap:wrap}.filter-row select{flex:1}.unit-row{grid-template-columns:minmax(140px,1fr) 80px 110px 27px}.unit-row .owner-input{display:none}.unit-row select{grid-column:1/-1}.unit-row small{max-width:180px}.work-list{grid-template-columns:1fr}.inputs-grid{grid-template-columns:repeat(2,1fr)}.app-footer{flex-direction:column}.milestones{grid-template-columns:repeat(2,1fr);row-gap:12px}.milestone:before{right:20%}.table-wrap{overflow:auto}.staff-table{min-width:650px}.input-footer{align-items:flex-start;flex-direction:column;gap:9px} }