:root{
  --bg:#fff; --fg:#111; --muted:#666; --card:#ffffff; --border:#e6e6e6; --pill:#f5f7fb;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; line-height:1.6;
  font-family:'Kanit','Sarabun','Tahoma','Segoe UI','Noto Sans Thai',sans-serif;
  background:var(--bg); color:var(--fg);
}
.container{max-width:1100px; margin:0 auto; padding:16px}
h1{font-size:clamp(20px,2.4vw,28px); margin:0 0 8px}
.section-title{font-size:clamp(16px,2vw,20px)}
.kpi{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 16px}
.pill{background:var(--pill); border:1px solid var(--border); padding:8px 12px; border-radius:999px; font-size:14px}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; align-items:stretch}
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px}
.card > b{display:block; margin-bottom:8px}
.chartbox{position:relative; width:100%; height:260px}
.chartbox canvas{display:block; width:100% !important; height:100% !important}
.table{width:100%; border-collapse:collapse; font-size:14px}
.table th,.table td{border-bottom:1px solid var(--border); padding:8px; text-align:left; white-space:nowrap}
.controls{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 16px}
.controls select,.controls input{flex:1 1 220px; min-width:180px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:14px}
#list{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.link{display:inline-block; padding:8px 10px; border:1px solid var(--border); border-radius:10px; text-decoration:none}
.small{color:var(--muted); font-size:12px}
footer.small{margin-top:18px}
@media (max-width:640px){
  .pill{font-size:13px}
  .table th,.table td{padding:6px}
  .controls select,.controls input{min-width:140px}
  .chartbox{height:220px}
}