:root{
  --bg:#eaeeec; --panel:#fff; --panel2:#f5f8f6;
  --ink:#0e1f19; --muted:#5c6b66; --faint:#8a9994;
  --line:#d5dedа; --line2:#e4eae7;
  --green:#00693e; --green-d:#004a2c; --green-l:#2e8f6b; --green-p:#9cc4b4;
  --plum:#7a2e5c; --amber:#b07d12; --slate:#4a6572;
  --r:3px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans Thai","Noto Sans Thai",Sarabun,"Leelawadee UI",Tahoma,sans-serif;
  font-size:15px; line-height:1.65; font-feature-settings:"tnum" 0;
}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.01em; line-height:1.3}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer}
.wrap{max-width:1240px; margin:0 auto; padding:0 18px}

/* ---------- masthead ---------- */
.mast{background:var(--green-d); color:#eaf3ee; padding:20px 0 0}
.mast .wrap{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; justify-content:space-between}
.brand .eyebrow{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#8fbfa8; margin-bottom:5px}
.brand h1{font-size:20px; color:#fff}
.brand .sub{font-size:12.5px; color:#a9cbbb; margin-top:3px}
.fy{text-align:right}
.fy b{display:block; font-size:30px; line-height:1; color:#fff}
.fy span{font-size:11.5px; letter-spacing:.14em; color:#8fbfa8}

/* agency chips */
.agencies{display:flex; gap:2px; margin-top:18px; overflow-x:auto; scrollbar-width:none}
.agencies::-webkit-scrollbar{display:none}
.ag{
  flex:0 0 auto; border:0; background:#0a5735; color:#a9cbbb; padding:11px 18px 12px;
  border-radius:var(--r) var(--r) 0 0; text-align:left; white-space:nowrap;
  border-bottom:3px solid transparent;
}
.ag small{display:block; font-size:11px; letter-spacing:.08em; opacity:.8}
.ag b{font-size:14.5px; font-weight:600}
.ag[aria-selected=true]{background:var(--bg); color:var(--ink); border-bottom-color:var(--amber)}
.ag[aria-selected=true] small{color:var(--muted)}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); margin:20px 0 0; overflow:hidden}
.stat{background:var(--panel); padding:13px 15px 14px}
.stat .k{font-size:11.5px; letter-spacing:.06em; color:var(--muted); margin-bottom:2px}
.stat .v{font-size:21px; font-weight:700; line-height:1.15; letter-spacing:-.02em}
.stat .u{font-size:11.5px; color:var(--faint); margin-top:1px}
.stat.pct .v{color:var(--green)}

/* ---------- mission ---------- */
.mission{background:var(--panel); border:1px solid var(--line); border-top:0;
  border-radius:0 0 var(--r) var(--r); padding:14px 15px; font-size:13.5px; color:var(--muted)}
.mission b{color:var(--ink); font-weight:600}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:0; margin:22px 0 0; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto; background:none; border:0; padding:9px 15px 10px; color:var(--muted);
  font-size:13.5px; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap}
.tab[aria-selected=true]{color:var(--green-d); font-weight:600; border-bottom-color:var(--green)}
.tab:focus-visible,.ag:focus-visible,.node:focus-visible{outline:2px solid var(--amber); outline-offset:1px}

/* ---------- ruler (signature) ---------- */
.ruler{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  margin:18px 0; padding:12px 14px 14px}
.crumbs{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; font-size:12.5px; margin-bottom:9px}
.crumbs button{background:none; border:0; padding:0; color:var(--green); text-decoration:underline;
  text-underline-offset:2px; font-size:12.5px}
.crumbs .sep{color:var(--faint)}
.crumbs .now{color:var(--ink); font-weight:600}
.bars{display:grid; gap:5px}
.barline{display:grid; grid-template-columns:78px 1fr; gap:10px; align-items:center}
.barline .lv{font-size:10.5px; letter-spacing:.08em; color:var(--faint); text-align:right}
.track{position:relative; height:16px; background:var(--panel2); border:1px solid var(--line2); border-radius:2px; overflow:hidden}
.seg{position:absolute; top:0; bottom:0; background:var(--green-p)}
.seg.on{background:var(--green)}
.track .cap{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:10.5px; color:var(--muted)}

/* ---------- drill layout ---------- */
.split{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:16px; align-items:start}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r)}
.card > h3{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  padding:11px 14px; border-bottom:1px solid var(--line2); font-weight:600}
.cardbody{padding:14px}

.nodes{display:flex; flex-direction:column}
.node{display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line2);
  padding:10px 14px 11px}
.node:last-child{border-bottom:0}
.node:hover{background:var(--panel2)}
.node[aria-current=true]{background:#eef5f1; box-shadow:inset 3px 0 0 var(--green)}
.node .top{display:flex; gap:10px; align-items:baseline; justify-content:space-between}
.node .nm{font-size:13.5px; line-height:1.45; min-width:0}
.node .amt{font-size:13.5px; font-weight:600; white-space:nowrap; letter-spacing:-.01em}
.node .meta{display:flex; gap:7px; align-items:center; margin-top:5px}
.node .mini{flex:1; height:4px; background:var(--line2); border-radius:2px; overflow:hidden}
.node .mini i{display:block; height:100%; background:var(--green-l)}
.node .pc{font-size:11px; color:var(--faint); width:44px; text-align:right}
.chev{color:var(--faint); font-size:11px; margin-left:4px}

.pill{display:inline-block; font-size:10.5px; padding:1px 6px; border-radius:9px;
  border:1px solid currentColor; vertical-align:2px; margin-inline-end:5px; font-weight:600}
.pill.k{color:var(--slate)}
.pill.s{color:var(--plum)}
.pill.n{color:var(--amber)}

/* ---------- detail ---------- */
.dt-head{padding:14px 14px 12px; border-bottom:1px solid var(--line2)}
.dt-head .code{font-size:11px; letter-spacing:.1em; color:var(--faint)}
.dt-head h2{font-size:16.5px; margin-top:3px}
.dt-figs{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line2)}
.dt-figs div{background:var(--panel); padding:10px 14px}
.dt-figs .k{font-size:11px; color:var(--muted)}
.dt-figs .v{font-size:15.5px; font-weight:700; letter-spacing:-.01em}
.sec{padding:13px 14px; border-top:1px solid var(--line2)}
.sec h4{margin:0 0 6px; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:600}
.sec p{margin:0; font-size:13.5px; color:#26382f}
.strat{background:#fbf5f8; border-top:1px solid #ecd9e4}
.strat h4{color:var(--plum)}
.strat dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:3px 12px; font-size:13px}
.strat dt{color:var(--plum); font-weight:600; white-space:nowrap}
.strat dd{margin:0}

table{width:100%; border-collapse:collapse; font-size:13px}
th,td{text-align:left; padding:7px 9px; border-bottom:1px solid var(--line2); vertical-align:top}
th{font-size:11px; letter-spacing:.06em; color:var(--muted); font-weight:600; white-space:nowrap}
td.n,th.n{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tr.tot td{border-top:2px solid var(--ink); border-bottom:0; font-weight:700}
.swatch{display:inline-block; width:9px; height:9px; border-radius:2px; margin-inline-end:7px; vertical-align:0}

/* stacked composition bar */
.stack{display:flex; height:22px; border-radius:2px; overflow:hidden; border:1px solid var(--line2); margin-bottom:9px}
.stack i{display:block; height:100%}
.legend{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--muted)}

/* KPI */
.kpi{border-bottom:1px solid var(--line2); padding:10px 0}
.kpi:last-child{border-bottom:0}
.kpi .nm{font-size:13px; margin-bottom:6px}
.kpi .yrs{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line2);
  border:1px solid var(--line2); border-radius:2px; overflow:hidden}
.kpi .yr{background:var(--panel2); padding:4px 6px; text-align:center}
.kpi .yr.cur{background:#e7f2ec}
.kpi .yr b{display:block; font-size:13px; font-weight:700}
.kpi .yr span{font-size:10px; color:var(--faint)}
.kpi .unit{font-size:11px; color:var(--faint)}

.empty{padding:26px 14px; text-align:center; color:var(--faint); font-size:13px}
.note{font-size:12px; color:var(--faint); margin-top:5px}
footer{padding:26px 0 40px; font-size:12px; color:var(--faint)}
footer b{color:var(--muted)}
.hide{display:none !important}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.grid4 > div{background:var(--panel); padding:12px 14px}
.st{display:inline-block; font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600; white-space:nowrap}
.st-ok{background:#e4f1ea; color:#00693e}
.st-diff{background:#fbeede; color:#8a5d00}
.st-plan{background:#f3e8ef; color:var(--plum)}
.st-ord{background:#e6edf1; color:var(--slate)}
.st-none{background:#eef0ef; color:var(--faint)}
.alert{border:1px solid #e6c9a8; background:#fdf6ec; border-radius:var(--r);
  padding:12px 14px; margin:18px 0 0; font-size:13.5px}
.alert b{color:#8a5d00}
.swot{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line2)}
.swot > div{background:var(--panel); padding:11px 14px}
.swot h5{margin:0 0 5px; font-size:12px; letter-spacing:.06em; color:var(--muted); font-weight:600}
.swot ul{margin:0; padding-inline-start:17px; font-size:13px; color:#26382f}
.filters{display:flex; flex-wrap:wrap; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line2)}
.filters button{background:var(--panel2); border:1px solid var(--line); border-radius:12px;
  padding:3px 11px; font-size:12.5px; color:var(--muted)}
.filters button[aria-pressed=true]{background:var(--green-d); border-color:var(--green-d); color:#fff}
td.neg{color:#a13a2a} td.pos{color:var(--green)}
@media (max-width:900px){ .grid2{grid-template-columns:1fr} .grid4{grid-template-columns:1fr 1fr}
  .swot{grid-template-columns:1fr} }

@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .dt-figs{grid-template-columns:1fr}
  .fy{text-align:left}
  .barline{grid-template-columns:60px 1fr}
}
@media (prefers-reduced-motion:no-preference){
  .seg,.node .mini i,.stack i{transition:width .28s ease, left .28s ease}
}

/* ---- server-rendered additions ---- */
.node{cursor:pointer; text-decoration:none; color:inherit}
a.node{display:block}
.crumbs a{color:var(--green); text-decoration:underline; text-underline-offset:2px; font-size:12.5px}
.filters a{background:var(--panel2); border:1px solid var(--line); border-radius:12px;
  padding:3px 11px; font-size:12.5px; color:var(--muted); text-decoration:none}
.filters a[aria-pressed=true]{background:var(--green-d); border-color:var(--green-d); color:#fff}
.searchbar{display:flex; gap:7px; padding:9px 14px; border-bottom:1px solid var(--line2)}
.searchbar input{flex:1; padding:6px 9px; border:1px solid var(--line); border-radius:3px;
  font:inherit; font-size:13px; background:var(--panel2)}
.searchbar button{padding:6px 14px; border:1px solid var(--green-d); background:var(--green-d);
  color:#fff; border-radius:3px; font-size:13px}
.apihint{font-size:12px; color:var(--faint); margin-top:6px}
.apihint code{background:var(--panel2); border:1px solid var(--line2); border-radius:3px; padding:1px 5px}