@import"https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700&display=swap";:root,html,body,button,input,select,textarea,table{font-family:Sarabun,sans-serif;font-size:15px}:root{--n:#001D58;--n2:#00164A;--p:#EC186E;--l:#D5D9E0;--bg:#F4F4F6;--sidebar:#0A1633;--sidebarHover:#152552;color:#111827;background:var(--bg);--sbW:248px;--sbWc:64px}*{box-sizing:border-box}body{margin:0}button{cursor:pointer}.is-hidden{display:none!important}.screen{position:fixed;inset:0}#gate{background:var(--n);display:grid;place-items:center;padding:20px}.login{position:relative;width:460px;max-width:100%;background:#fff;border-top:6px solid var(--p);border-radius:10px;padding:30px 32px 46px;box-shadow:0 20px 60px #00000040}.loginBrand{display:flex;align-items:center;gap:14px;margin-bottom:26px}.hero{width:40px;height:40px;object-fit:contain}.login h1{font-size:22px;line-height:1.25;color:var(--n);margin:0}#gbtn{display:flex;justify-content:center;min-height:44px}.linklike{background:none;border:0;color:#8a93a2;font-size:12px;margin-top:16px;text-decoration:underline}.login footer{position:absolute;left:32px;right:32px;bottom:10px;display:flex;justify-content:space-between;color:#a0a7b2;font-size:11px}#app{--w:var(--sbW)}#app.collapsed{--w:var(--sbWc)}aside{position:fixed;inset:0 auto 0 0;width:var(--w);background:var(--sidebar);color:#c7d0e4;padding:12px 10px;display:flex;flex-direction:column;transition:width .18s ease;overflow:hidden;z-index:5}main{margin-left:var(--w);transition:margin-left .18s ease;min-height:100vh}.brand{display:flex;align-items:center;gap:10px;padding:6px 6px 18px;color:#fff;font-weight:700}.burger{background:transparent;border:0;color:#fff;font-size:20px;line-height:1;padding:6px;border-radius:0}.burger:hover{background:var(--sidebarHover)}.brandLogo{width:30px;height:30px;object-fit:contain;flex:0 0 auto}.brandText{font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden}#app.collapsed .brandText{display:none}nav{display:grid;gap:2px;overflow:auto}.navItem{display:flex;align-items:center;gap:12px;border:0;background:transparent;color:#c7d0e4;text-align:left;padding:11px 12px;border-left:4px solid transparent;white-space:nowrap;border-radius:0}.navItem:hover{background:var(--sidebarHover);color:#fff}.navItem.active{background:var(--n);color:#fff;border-left-color:var(--p)}.ni-icon{width:22px;text-align:center;flex:0 0 auto;font-size:16px}#app.collapsed .ni-text{display:none}#app.collapsed .navItem{justify-content:flex-start}#logout{margin-top:auto;border-top:1px solid #ffffff1a}#app.collapsed .navItem{position:relative}#app.collapsed .navItem:hover:after{content:attr(data-label);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:#111827;color:#fff;padding:5px 9px;font-size:12px;white-space:nowrap;z-index:30;border-radius:0}header{height:76px;background:#fff;border-bottom:1px solid var(--l);padding:12px 24px;display:flex;align-items:center;gap:8px}header>div{margin-right:auto}header h1{margin:0;color:var(--n);font-size:21px}header input{height:40px;border:1px solid var(--l);border-radius:0;padding:0 10px}.primary{background:var(--n);color:#fff;border:0;border-radius:0;padding:10px 14px}.primary:hover{background:var(--n2)}.content{padding:24px}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.kpi,.panel{background:#fff;border:1px solid var(--l);border-radius:0}.kpi{padding:16px;border-top:4px solid var(--n)}.kpi:nth-child(2n){border-top-color:var(--p)}.kpi strong{display:block;font-size:27px;color:var(--n)}.panel{margin-top:14px}.panelHead{padding:14px;border-bottom:1px solid var(--l);display:flex;justify-content:space-between}.panelHead h2{margin:0;color:var(--n);font-size:17px}.table{overflow:auto}table{width:100%;border-collapse:collapse}th{background:#f2f4f7;text-align:left;padding:10px}td{padding:11px 10px;border-top:1px solid #EAECF0}tbody tr{cursor:pointer}tbody tr:hover{background:#f8fafc}.badge-h{display:inline-block;padding:2px 8px;color:#fff;font-size:12px}.h-green{background:#15803d}.h-amber{background:#a16207}.h-red{background:#b91c1c}dialog{border:0;border-top:6px solid var(--p);border-radius:10px;width:560px;max-width:calc(100% - 30px);padding:0}dialog::backdrop{background:#001d5877}#form{padding:22px;max-height:88vh;overflow:auto}#form h2{color:var(--n);margin:0 0 6px}.field{display:block;margin:14px 0}.field .flabel{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#374151;margin-bottom:5px}.field input,.field select,.field textarea{width:100%;padding:10px;border:1px solid var(--l);border-radius:0;background:#fff}.field textarea{min-height:70px;resize:vertical}.req{color:var(--p)}.info{display:inline-flex;width:16px;height:16px;border-radius:50%;background:#e5e7eb;color:#374151;font-size:11px;align-items:center;justify-content:center;cursor:help;position:relative;font-weight:700}.info:hover:after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:#111827;color:#fff;padding:6px 9px;font-size:11px;white-space:nowrap;z-index:40;border-radius:0}#form footer{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--l)}#cancel{background:#fff;border:1px solid var(--l);border-radius:0;padding:10px 14px}.overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#001d588c;backdrop-filter:blur(2px);padding:20px}.loadbox{background:#fff;border-radius:10px;padding:34px 46px;box-shadow:0 24px 70px #001d5873;text-align:center}.loadbox p{margin:18px 0 0;color:var(--n);font-weight:600;font-size:14px}.ldio{display:inline-block;position:relative;width:64px;height:64px}.ldio div{box-sizing:border-box;position:absolute;width:52px;height:52px;margin:6px;border:6px solid var(--p);border-radius:50%;animation:ldio 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--p) transparent transparent transparent}.ldio div:nth-child(1){animation-delay:-.45s}.ldio div:nth-child(2){animation-delay:-.3s}.ldio div:nth-child(3){animation-delay:-.15s}@keyframes ldio{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.errbox{background:#fff;border-radius:10px;border-top:6px solid #B91C1C;width:min(420px,100%);padding:28px;text-align:center;box-shadow:0 24px 70px #001d5873}.errIcon{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:#fee2e2;color:#b91c1c;font-size:30px;font-weight:900;display:grid;place-items:center}.errbox h3{margin:0 0 8px;color:var(--n);font-size:19px}.errbox p{margin:0 0 20px;color:#4b5563;font-size:14px;white-space:pre-line;line-height:1.6}.errbox .primary{width:100%;height:44px}#toast{position:fixed;right:20px;bottom:20px;background:var(--n);color:#fff;border-left:5px solid var(--p);padding:12px;opacity:0;transition:opacity .2s;z-index:220}#toast.show{opacity:1}@media(max-width:760px){:root{--sbW:64px}#app{--w:var(--sbW)}#app:not(.collapsed) .brandText,#app:not(.collapsed) .ni-text{display:none}.kpis{grid-template-columns:1fr 1fr}.content{padding:14px}}