:root{--navy:#0B1F3A;--emerald:#0E7C66;--gold:#D8A23A;--white:#fff;--bg:#F5F8FA;--text:#1F2933;--muted:#657385;--border:#E5EAF0;--success:#0FA968;--warning:#E8A317;--danger:#D64B4B;--info:#2878FF}*{box-sizing:border-box;margin:0;padding:0}body{font-family:"Sarabun",Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}a{text-decoration:none;color:inherit}.demo-app{min-height:100vh;display:grid;grid-template-columns:220px 1fr}.sidebar{background:var(--navy);color:#fff;padding:18px}.sidebar img{width:150px;margin-bottom:16px}.sidebar h2{color:var(--gold);font-size:19px;line-height:1.2;margin-bottom:4px}.sidebar p{font-size:12px;color:rgba(255,255,255,.72);margin-bottom:18px}.nav-item{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);margin-bottom:8px}.nav-item.active{background:rgba(216,162,58,.18);color:var(--gold);font-weight:800}.main{padding:20px}.topbar{background:#fff;border:1px solid var(--border);border-radius:22px;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.topbar h1{font-size:28px;color:var(--navy);line-height:1.2}.topbar p{font-size:14px;color:var(--muted);margin-top:4px}.badge{padding:8px 12px;border-radius:999px;background:#e9f7f1;color:var(--emerald);font-size:12px;font-weight:800}.toolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}.tool-group{display:flex;gap:10px;flex-wrap:wrap}.tool-chip{padding:9px 12px;border-radius:12px;background:#fff;border:1px solid var(--border);font-size:13px;font-weight:700;color:var(--navy)}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.card{background:#fff;border:1px solid var(--border);border-radius:22px;padding:18px;box-shadow:0 10px 24px rgba(11,31,58,.05)}.stat span{font-size:13px;color:var(--muted)}.stat strong{display:block;font-size:30px;color:var(--navy);margin:6px 0}.stat small{color:var(--emerald);font-weight:800}.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}h3{color:var(--navy);font-size:21px;margin-bottom:14px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--border);font-size:14px;white-space:nowrap}th{background:#f8fafc;color:var(--navy)}.status{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}.success{color:var(--success);background:rgba(15,169,104,.12)}.warning{color:var(--warning);background:rgba(232,163,23,.13)}.danger{color:var(--danger);background:rgba(214,75,75,.12)}.info{color:var(--info);background:rgba(40,120,255,.12)}.note{margin-top:16px;padding:14px;border-radius:16px;background:rgba(216,162,58,.12);border:1px solid rgba(216,162,58,.22);color:#725717;font-size:14px}.chart-box{height:300px}.drill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}.drill-item{padding:14px;border-radius:16px;background:#f8fafc;border:1px solid var(--border)}.drill-item strong{display:block;font-size:22px;color:var(--navy)}.drill-item span{font-size:12px;color:var(--muted)}.data-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.data-card{padding:16px;border-radius:18px;background:#f8fafc;border:1px solid var(--border)}.data-card h4{font-size:14px;color:var(--muted);margin-bottom:6px}.data-card strong{font-size:28px;color:var(--navy)}@media (max-width:900px){.demo-app{grid-template-columns:1fr}.sidebar{display:none}.stat-grid,.grid-2,.grid-3,.data-cards,.drill-grid{grid-template-columns:1fr}}

html,body{width:100%;max-width:100%;overflow-x:hidden}.main{overflow-x:hidden}.chart-box canvas{width:100% !important;height:100% !important}


/* =========================
   DASHBOARD DEMO EMBED RESPONSIVE
========================= */
.demo-app{
  min-height:100vh;
}

@media (max-width:620px){
  .main{padding:12px}
  .topbar{
    border-radius:18px;
    padding:14px;
    align-items:flex-start;
    flex-direction:column;
  }
  .topbar h1{font-size:22px}
  .topbar p{font-size:12px}
  .toolbar{gap:8px}
  .tool-chip{font-size:11px;padding:7px 9px}
  .card{border-radius:18px;padding:14px}
  .stat strong{font-size:24px}
  .chart-box{height:240px}
}