:root{--ink:#13233F;--ledger:#2456A6;--soft:#E7EEF9;--marigold:#E4A11B;--paper:#F3F5F9;--line:#DCE3ED;--muted:#5D6B80;--danger:#B42318;--ok:#1D7A55;--r:8px;--font:"IBM Plex Sans Thai",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;font:15px/1.6 var(--font);color:var(--ink);background:var(--paper)}
a{color:var(--ledger)}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:var(--ink);color:#C9D3E3;overflow-y:auto;z-index:20}
.sb-brand{display:flex;gap:.7rem;align-items:center;padding:1.1rem 1.2rem;color:#fff;text-decoration:none;font-weight:600;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-brand i{font-size:1.6rem;color:var(--marigold)}
.sb-brand small{display:block;font-weight:400;color:#93A3BD;font-size:.78rem}
.sb-group{margin:1.1rem 1.2rem .3rem;font-size:.75rem;color:#7E8FAB}
.sidebar nav a{display:flex;gap:.7rem;align-items:center;padding:.5rem 1.2rem;color:#C9D3E3;text-decoration:none;border-left:3px solid transparent}
.sidebar nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.sidebar nav a.on{background:rgba(255,255,255,.08);color:#fff;border-left-color:var(--marigold)}
.sidebar nav a span{flex:1;display:flex;justify-content:space-between;align-items:center}
.pill{background:var(--marigold);color:var(--ink);border-radius:999px;font-size:.72rem;padding:0 .45rem}
.main{margin-left:248px;min-height:100vh}
.topbar{display:flex;align-items:center;gap:1rem;background:#fff;border-bottom:1px solid var(--line);padding:.75rem 1.75rem;position:sticky;top:0;z-index:10}
.topbar h1{font-size:1.2rem;margin:0}
.top-right{margin-left:auto;display:flex;gap:1.25rem;font-size:.9rem}
.top-right a{color:var(--ink);text-decoration:none}.top-right a:hover{color:var(--ledger)}
.sb-toggle{display:none;background:none;border:1px solid var(--line);border-radius:6px;font-size:1.3rem;cursor:pointer}
.content{padding:1.5rem 1.75rem 3rem;max-width:1280px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.4rem}
.card h2{font-size:1rem;margin:0 0 .9rem}
.btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--ledger);color:#fff;border:0;border-radius:6px;padding:.55rem 1rem;font:600 .92rem var(--font);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--ink)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}.btn-ghost:hover{background:var(--soft);color:var(--ink)}
.btn-link{background:none;color:var(--muted)}.btn-link:hover{background:none;color:var(--ink)}
.btn-block{width:100%;justify-content:center;padding:.7rem}
.alert{padding:.75rem 1rem;border-radius:var(--r);margin-bottom:1rem;border:1px solid}
.alert-success{background:#E6F4EE;border-color:#B5DCCB;color:#145A3E}
.alert-error{background:#FDECEA;border-color:#F5C2BC;color:var(--danger)}
.alert-warn{background:#FDF3DC;border-color:#F2D79A;color:#7A4A00}
.alert-info{background:var(--soft);border-color:#C3D4EF;color:var(--ink)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.search{display:flex;gap:.5rem;flex-wrap:wrap}
.search input,.search select{font:inherit;padding:.5rem .75rem;border:1px solid var(--line);border-radius:6px;background:#fff}
.search input{min-width:240px}
.table-card{padding:0;overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-weight:600;font-size:.85rem;color:var(--muted);padding:.7rem 1rem;border-bottom:1px solid var(--line);background:#FAFBFD;white-space:nowrap}
.table td{padding:.65rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tr:hover td{background:#FAFBFD}
.table td.primary{font-weight:500;max-width:420px}
.table td.primary a{color:var(--ink);text-decoration:none}.table td.primary a:hover{color:var(--ledger)}
.table .actions{text-align:right;white-space:nowrap;width:1%}
.table .actions form{display:inline}
.table .empty{text-align:center;color:var(--muted);padding:2.5rem}
.thumb{width:64px;height:40px;object-fit:cover;border-radius:4px}
.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:6px;border:0;background:none;color:var(--muted);cursor:pointer;text-decoration:none;font-size:1rem}
.icon-btn:hover{background:var(--soft);color:var(--ledger)}
.icon-btn.danger:hover{background:#FDECEA;color:var(--danger)}
.tag{display:inline-block;padding:.05rem .55rem;border-radius:999px;background:#EEF1F5;color:var(--muted);font-size:.8rem}
.tag-on{background:#E6F4EE;color:var(--ok)}.tag-warn{background:#FDF3DC;color:#7A4A00}
.muted{color:var(--muted);font-size:.88rem}
.help{color:var(--muted);font-size:.84rem;margin:.3rem 0 0}
.back{color:var(--muted);text-decoration:none;font-size:.9rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.25rem}
.form-grid.narrow{max-width:720px}
.field{grid-column:1/-1;margin-bottom:1.1rem}
.field.half{grid-column:span 1}
.field label{display:block;font-weight:500;margin-bottom:.3rem;font-size:.92rem}
.field input[type=text],.field input[type=email],.field input[type=url],.field input[type=number],.field input[type=date],.field input[type=datetime-local],.field input[type=password],.field select,.field textarea,.login input{width:100%;font:inherit;padding:.55rem .75rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ledger);outline:none;box-shadow:0 0 0 3px var(--soft)}
.req{color:var(--danger)}
.check{display:flex!important;align-items:center;gap:.5rem;font-weight:400!important;cursor:pointer}
.readonly{background:#FAFBFD;border:1px solid var(--line);border-radius:6px;padding:.55rem .75rem;min-height:2.4rem}
.current-file{display:flex;align-items:center;gap:1rem;margin-bottom:.5rem;padding:.5rem;background:#FAFBFD;border:1px dashed var(--line);border-radius:6px}
.current-file img{max-height:80px;border-radius:4px}
.icon-input{display:flex;align-items:center;gap:.6rem}.icon-input i{font-size:1.4rem;color:var(--ledger)}
.form-actions{grid-column:1/-1;display:flex;gap:.5rem;border-top:1px solid var(--line);padding-top:1rem;margin-top:.5rem}
.form-sec{grid-column:1/-1;font-size:1rem;border-bottom:1px solid var(--line);padding-bottom:.4rem;margin:1rem 0 1rem}
.form-sec:first-of-type{margin-top:0}
.rte{background:#fff;min-height:320px;font-size:1rem}
.ql-toolbar.ql-snow{border-radius:6px 6px 0 0;border-color:var(--line)!important;font-family:var(--font)}
.ql-container.ql-snow{border-radius:0 0 6px 6px;border-color:var(--line)!important;font-family:var(--font)!important;font-size:1rem}
.ql-editor{min-height:300px}
.pager{display:flex;gap:.3rem;margin-top:1rem;flex-wrap:wrap}
.pager a,.pager span{min-width:2.2rem;height:2.2rem;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:#fff;text-decoration:none;color:var(--ink)}
.pager .current{background:var(--ink);color:#fff}.pager .gap{border:0;background:none}
.greet{color:var(--muted);margin-top:0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1rem}
.kpi{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.1rem .9rem;text-decoration:none;color:var(--ink)}
.kpi i{grid-row:span 2;font-size:1.5rem;color:var(--ledger);background:var(--soft);width:48px;height:48px;display:grid;place-items:center;border-radius:10px}
.kpi span{font-size:.85rem;color:var(--muted)}.kpi strong{font-size:1.6rem;line-height:1.1}
.kpi:hover{border-color:var(--ledger)}
.quick{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.25rem}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.bars{display:flex;align-items:flex-end;gap:4px;height:150px;margin-bottom:.5rem}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.bar span{width:100%;background:var(--ledger);border-radius:3px 3px 0 0;min-height:2px}
.bar:last-child span{background:var(--marigold)}
.bar small{font-size:.68rem;color:var(--muted)}
.rank{margin:0;padding-left:1.2rem}.rank li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px solid var(--line)}
.rank a{color:var(--ink);text-decoration:none}
.plain{list-style:none;margin:0;padding:0}.plain li{padding:.45rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.plain small{display:block;color:var(--muted);font-size:.78rem}
.login{min-height:100vh;display:grid;place-items:center;background:var(--ink);padding:1rem}
.login-card{background:#fff;padding:2rem;border-radius:12px;width:min(400px,100%)}
.login-card label{display:block;font-weight:500;margin:.9rem 0 .3rem}
.login-card .btn{margin-top:1.25rem}
.login-brand{display:flex;gap:.8rem;align-items:center;margin-bottom:1.25rem}
.login-brand i{font-size:2rem;color:var(--ledger)}.login-brand small{display:block;color:var(--muted)}
.login .back{display:block;text-align:center;margin-top:1rem}
body:has(.login) .main{margin-left:0}
body:has(.login) .content{padding:0;max-width:none}
code{background:#EEF1F5;padding:0 .3rem;border-radius:4px}
@media (max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .2s}
  .sb-open .sidebar{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .main{margin-left:0}.sb-toggle{display:block}
  .top-right a:not(:last-child){display:none}
  .kpis,.dash-grid{grid-template-columns:1fr 1fr}
  .content{padding:1rem}
}
@media (max-width:600px){.kpis,.dash-grid,.form-grid{grid-template-columns:1fr}.field.half{grid-column:1/-1}}