:root{--bg:#eaf0f4;--surface:#fff;--surface-2:#f5f8fa;--surface-3:#eef3f6;--border:#dce5ec;--border-strong:#c5d2dc;--ink:#0f2438;--ink-2:#46586a;--ink-3:#7c8d9c;--ink-inv:#eef6fb;--brand:#0e7c9b;--brand-2:#0a6182;--brand-ink:#063d54;--brand-tint:#e3f1f6;--brand-tint-2:#cfe7ef;--teal:#0e9b8a;--teal-tint:#e0f4f1;--green:#1c9d63;--green-tint:#e2f3ea;--amber:#e0922a;--amber-tint:#fbeede;--red:#d34a4d;--red-tint:#fae3e3;--g1:#1fa97a;--g2:#6bbe4e;--g3a:#f2c53d;--g3b:#f0973e;--g4:#e8743b;--g5:#d9484b;--r-sm:7px;--r:11px;--r-lg:16px;--r-xl:22px;--sh-sm:0 1px 2px rgba(15,36,56,.06),0 1px 1px rgba(15,36,56,.04);--sh:0 1px 3px rgba(15,36,56,.07),0 6px 18px -8px rgba(15,36,56,.12);--sh-lg:0 12px 36px -10px rgba(15,36,56,.22);--font-th:"IBM Plex Sans Thai","IBM Plex Sans",system-ui,sans-serif;--font-num:"IBM Plex Sans","IBM Plex Sans Thai",system-ui,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,monospace}*{box-sizing:border-box}body,html{margin:0;padding:0}body{font-family:var(--font-th);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.num{font-family:var(--font-num);font-feature-settings:"tnum" 1}.mono{font-family:var(--font-mono)}button{font-family:inherit;cursor:pointer}::-moz-selection{background:var(--brand-tint-2)}::selection{background:var(--brand-tint-2)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#c2d0da;border-radius:20px;border:3px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#a9bcc8;background-clip:content-box}.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}.sidebar{background:linear-gradient(177deg,#0b3a4f,#0a3145 60%,#082636);color:#cfe3ec;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:0}.sb-brand{display:flex;justify-content:center;align-items:center;padding:16px 14px}.sb-brand-wide{background:#fff;border-radius:14px;padding:11px 14px;box-shadow:0 3px 12px #0826364d}.sb-logo-full{display:block;height:108px;width:auto;max-width:100%}.sb-brand-mini{display:none}.sb-mark{width:40px;height:40px;border-radius:11px;background:linear-gradient(140deg,var(--teal),var(--brand));display:grid;place-items:center;flex:none;box-shadow:0 4px 14px -2px #0e9b8a80}.sb-title{font-weight:600;font-size:14px;color:#fff;line-height:1.25;letter-spacing:.1px}.sb-sub{font-size:11px;color:#7fa6b8;letter-spacing:.2px;margin-top:1px}.sb-nav{padding:6px 12px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}.sb-group{font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;color:#5f8497;padding:15px 10px 6px;font-weight:700}.sb-group:first-child{padding-top:4px}.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:#bcd4df;font-size:13.5px;font-weight:500;border:none;background:transparent;width:100%;text-align:left;transition:background .16s,color .16s;position:relative}.nav-item:hover{background:#ffffff0f;color:#fff}.nav-item:hover svg{opacity:1}.nav-item.active{background:linear-gradient(100deg,#0e9b8a4d,#0e7c9b24);color:#fff;font-weight:600}.nav-item.active:before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--teal)}.nav-item.active svg{opacity:1;color:#5fe3c8}.nav-item svg{flex:none;opacity:.88}.nav-item .lbl{flex:1}.nav-badge{font-size:11px;background:#ffffff1f;padding:1px 7px;border-radius:20px;font-family:var(--font-num);min-width:22px;text-align:center}.nav-item.active .nav-badge{background:#5fe3c838;color:#bff3e8}.sb-foot{padding:14px 16px;border-top:1px solid hsla(0,0%,100%,.08);font-size:11px;color:#6f93a4;display:flex;align-items:center;gap:9px}.sb-foot .dot{width:7px;height:7px;border-radius:50%;background:#36d399;box-shadow:0 0 0 3px #36d3992e}.main{min-width:0;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:30;background:#ffffffdb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:13px 26px;display:flex;align-items:center;gap:16px}.tb-titlewrap{min-width:0}.tb-crumb{font-size:11.5px;color:var(--ink-3);font-weight:500}.tb-title{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.2px;line-height:1.2}.tb-spacer{flex:1}.tb-filter{display:flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:7px 11px;font-size:13px;color:var(--ink-2);font-weight:500}.tb-filter select{border:none;background:transparent;font-family:inherit;font-size:13px;color:var(--ink);font-weight:600;outline:none;cursor:pointer}.tb-search{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:7px 12px;width:230px;color:var(--ink-3)}.tb-search input{border:none;background:transparent;outline:none;font-family:inherit;font-size:13px;width:100%;color:var(--ink)}.tb-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px;flex:none}.content{padding:24px 26px 60px;max-width:1480px;width:100%}.section-row{display:flex;align-items:center;gap:12px;margin:26px 2px 14px}.section-row:first-child{margin-top:4px}.section-title{font-size:15px;font-weight:600;color:var(--ink)}.section-sub{font-size:12px;color:var(--ink-3)}.section-line{flex:1;height:1px;background:var(--border)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}.card-pad{padding:18px 20px}.card-head{display:flex;align-items:center;gap:10px;padding:16px 20px 0}.card-head h3{font-size:14px;font-weight:600;margin:0;color:var(--ink)}.card-head .sub{font-size:12px;color:var(--ink-3)}.card-head .spacer{flex:1}.grid{display:grid;gap:16px}.g-kpi{grid-template-columns:repeat(4,1fr)}.g-2{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}.g-5{grid-template-columns:repeat(5,1fr)}.kpi{position:relative;overflow:hidden}.kpi .kpi-top{display:flex;align-items:center;gap:9px;margin-bottom:10px}.kpi-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}.kpi-label{font-size:12.5px;color:var(--ink-2);font-weight:500}.kpi-val{font-size:30px;font-weight:600;letter-spacing:-1px;line-height:1;color:var(--ink)}.kpi-unit{font-size:13px;color:var(--ink-3);font-weight:500;margin-left:4px}.kpi-foot{display:flex;gap:6px;margin-top:10px;font-size:12px;color:var(--ink-3)}.kpi-foot,.trend{align-items:center}.trend{display:inline-flex;gap:3px;font-weight:600;font-family:var(--font-num);padding:1px 6px;border-radius:6px}.trend.up{color:#127a4e;background:var(--green-tint)}.trend.down{color:#b53d40;background:var(--red-tint)}.trend.neutral{color:var(--ink-2);background:var(--surface-3)}.badge{gap:5px;font-size:12px;padding:2px 9px;line-height:1.55}.badge,.stage-pill{display:inline-flex;align-items:center;font-weight:600;border-radius:20px}.stage-pill{gap:6px;font-size:12.5px;padding:2px 10px 2px 8px;color:#fff;font-family:var(--font-num)}.stage-dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px #ffffff80}.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:3px 9px;border-radius:7px;background:var(--surface-3);color:var(--ink-2);border:1px solid var(--border)}.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1}.tbl td{padding:11px 14px;border-bottom:1px solid var(--surface-3);color:var(--ink);vertical-align:middle}.tbl tbody tr{transition:.1s;cursor:pointer}.tbl tbody tr:hover{background:var(--brand-tint)}.tbl tbody tr:last-child td{border-bottom:none}.tbl .num{font-family:var(--font-num)}.pbar{height:8px;background:var(--surface-3);overflow:hidden}.pbar,.pbar>span{border-radius:20px}.pbar>span{display:block;height:100%}.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);font-weight:500;font-size:13px;padding:7px 13px;border-radius:9px;transition:.14s}.btn:hover{border-color:var(--border-strong);color:var(--ink)}.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn.primary:hover{background:var(--brand-2)}.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:3px;gap:2px}.seg button{border:none;background:transparent;color:var(--ink-2);font-size:12.5px;font-weight:500;padding:5px 12px;border-radius:7px;transition:.12s}.seg button.on{background:var(--surface);color:var(--brand-2);box-shadow:var(--sh-sm);font-weight:600}.divider{height:1px;background:var(--border);margin:0}.muted{color:var(--ink-3)}.flex{display:flex}.center{align-items:center}.between{justify-content:space-between}.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.wrap{flex-wrap:wrap}.fade-in{animation:fade .4s ease}@keyframes fade{0%{transform:translateY(8px)}to{transform:none}}.legend{display:flex;flex-wrap:wrap;gap:10px 16px}.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}.legend-sw{width:11px;height:11px;border-radius:3px;flex:none}.tooltip{position:fixed;z-index:100;background:#0f2438;color:#fff;font-size:12px;padding:7px 10px;border-radius:8px;pointer-events:none;box-shadow:var(--sh-lg);white-space:nowrap;transform:translate(-50%,-120%);line-height:1.45}.tooltip b{font-family:var(--font-num)}@media(max-width:1100px){.app{grid-template-columns:72px 1fr}.nav-badge,.nav-item span.lbl,.sb-brand-wide,.sb-foot span,.sb-group,.sb-sub,.sb-title{display:none}.sb-brand-mini{display:grid;place-items:center;width:100%}.sb-brand{padding:14px 0}.nav-item{justify-content:center}.g-4,.g-5,.g-kpi{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.app{grid-template-columns:58px 1fr}.sb-brand{padding:16px 0;justify-content:center}.sb-mark{width:34px;height:34px}.sb-nav{padding:6px 7px}.sb-foot{justify-content:center;padding:12px 6px}.content{padding:16px 13px 48px}.content .grid{grid-template-columns:1fr!important;gap:13px}.content .grid>*{min-width:0}.card-pad.flex{flex-wrap:wrap;justify-content:center}.card{overflow-x:auto}.topbar{flex-wrap:wrap;padding:10px 14px;gap:9px 10px}.tb-spacer{display:none}.tb-titlewrap{order:1;flex:1 1 60%;min-width:0}.tb-crumb,.tb-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tb-title{font-size:16px}.topbar>button.btn{order:2}.tb-avatar{order:3}.tb-filter{order:4;flex:1 1 auto}.tb-search{order:5;flex:2 1 150px;width:auto;min-width:0}.section-row{flex-wrap:wrap;margin:20px 2px 12px}.section-row .seg{flex:1 1 100%;overflow-x:auto}.card-head{flex-wrap:wrap}.kpi-val{font-size:26px}}