:root{color:#172b27;background:#f2f5f4;font-family:Inter,Noto Sans Thai,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}.page{grid-template-columns:230px 1fr;min-height:100vh;display:grid}aside{color:#fff;background:#103c34;align-content:start;gap:8px;padding:32px 24px;display:grid}aside h2{margin:0 0 35px;font-size:23px}aside h2 span{color:#6ad5b2;font-weight:400;display:block}aside a{color:#acd0c5;border-radius:10px;padding:12px 14px}aside a.active{color:#fff;background:#ffffff16;font-weight:700}section{width:100%;max-width:1500px;padding:35px}header{justify-content:space-between;align-items:center;display:flex}header small,.panel small{letter-spacing:.13em;color:#70827d;font-weight:700}h1{margin:5px 0;font-size:32px}.live{color:#13815f;background:#dff5ed;border-radius:20px;padding:8px 12px}.filters{gap:8px;margin:25px 0;display:flex}.filters button{color:#52645f;background:#fff;border:1px solid #dce5e2;border-radius:9px;padding:9px 14px}.grid{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.grid article,.panel{background:#fff;border:1px solid #e1e8e6;border-radius:16px;padding:20px}.grid article{border-top:4px solid}.grid article.green{border-top-color:#32a881}.grid article.blue{border-top-color:#4f8dc8}.grid article.violet{border-top-color:#836fc5}.grid article.orange{border-top-color:#d89345}.grid strong{margin:10px 0;font-size:29px;display:block}.grid span{color:#84928e;font-size:12px}.panel{min-height:340px;margin-top:16px}.panel h3{color:#334944;margin:6px 0}.chart{border-bottom:1px solid #dce5e2;align-items:end;gap:16px;height:230px;margin-top:26px;padding:0 18px;display:flex}.chart i{height:var(--h,50%);background:linear-gradient(#45ae8d,#b9e5d7);border-radius:8px 8px 0 0;flex:1}.chart i:nth-child(2n){--h:70%}.chart i:nth-child(3n){--h:42%}.chart i:nth-child(5n){--h:85%}@media (width<=900px){.page{grid-template-columns:1fr}aside{display:none}.grid{grid-template-columns:repeat(2,1fr)}section{padding:20px}}