/* ═══════════════════════════════════════════════
   ระบบบริหารหอพัก — รูปแบบหน้าจอ
   ขนาดตัวอักษรฐาน 16px อ่านง่ายบนทุกหน้าจอ
   ═══════════════════════════════════════════════ */
:root{
  --p:#0B2C63;--p2:#123B7E;--p3:#1B4FA0;--pl:#EEF2F9;
  --a:#D81E5B;--al:#FDEEF3;
  --bg:#F7F8FA;--c:#fff;--b:#E3E6EC;--b2:#CFD4DE;
  --t1:#111827;--t2:#4B5563;--t3:#7C8595;
  --ok:#0E7C4A;--okl:#E7F4EE;--wn:#B4690E;--wnl:#FDF3E4;--er:#C0392B;--erl:#FCEDEB;
  --r:12px;--rs:9px;
  --s1:0 1px 2px rgba(17,24,39,.05);
  --s2:0 1px 3px rgba(17,24,39,.07),0 8px 24px -8px rgba(17,24,39,.10);
  --s3:0 12px 40px -12px rgba(11,44,99,.28);
  --nav:262px;--rail:68px;--top:62px;--bn:66px;--sb:env(safe-area-inset-bottom,0px);
  /* ขนาดตัวอักษร */
  --fs:16px;--fs-sm:14.5px;--fs-xs:13px;--fs-lg:18px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;font-size:100%}
body{background:var(--bg);color:var(--t1);font-size:var(--fs);line-height:1.65;
  font-family:'Sarabun','Noto Sans Myanmar','Noto Sans Khmer',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea,table{font-family:inherit}
svg{display:block;flex-shrink:0}
a{color:inherit;text-decoration:none}
.i14{width:15px;height:15px}.i16{width:17px;height:17px}.i18{width:19px;height:19px}
.i20{width:21px;height:21px}.i22{width:24px;height:24px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:9px}
code{background:var(--bg);padding:2px 7px;border-radius:5px;font-size:.92em;border:1px solid var(--b);
  font-family:ui-monospace,Menlo,monospace;word-break:break-all}

/* ── แถบข้าง ── */
#side{position:fixed;left:0;top:0;bottom:0;width:var(--nav);z-index:60;background:var(--p);color:#fff;
  display:flex;flex-direction:column;transition:transform .24s,width .22s}
.sd-h{padding:14px 15px;display:flex;align-items:center;gap:11px;min-height:var(--top);
  border-bottom:1px solid rgba(255,255,255,.09)}
.sd-lg{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.14);display:grid;
  place-items:center;flex-shrink:0;overflow:hidden}
.sd-lg img{width:100%;height:100%;object-fit:cover}
.sd-nm{min-width:0;flex:1}
.sd-nm b{display:block;font-size:14.5px;font-weight:600;line-height:1.3;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sd-nm span{display:block;font-size:11.5px;opacity:.58;font-weight:300}
.sd-s{flex:1;overflow-y:auto;padding:11px 9px}
.grp{font-size:11px;font-weight:600;letter-spacing:.09em;opacity:.45;padding:14px 11px 6px;text-transform:uppercase}
.grp:first-child{padding-top:3px}
.nv{display:flex;align-items:center;gap:12px;padding:11px 11px;border-radius:var(--rs);cursor:pointer;
  color:rgba(255,255,255,.82);font-size:15px;border:0;background:none;width:100%;text-align:left;
  margin-bottom:2px;min-height:46px;position:relative;transition:.14s}
.nv:hover{background:rgba(255,255,255,.09);color:#fff}
.nv.on{background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.nv.on::before{content:'';position:absolute;left:-9px;top:9px;bottom:9px;width:3px;background:var(--a);
  border-radius:0 3px 3px 0}
.nv .lb{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv .bdg{background:var(--a);color:#fff;font-size:11px;font-weight:700;padding:1px 8px;border-radius:20px}
.sd-f{padding:9px;border-top:1px solid rgba(255,255,255,.09)}
.uch{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--rs);
  background:rgba(255,255,255,.08);cursor:pointer;width:100%;border:0;text-align:left;color:#fff;transition:.14s}
.uch:hover{background:rgba(255,255,255,.15)}
.uch .ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:14px;
  font-weight:600;flex-shrink:0;background:var(--p3);overflow:hidden}
.uch .ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.uch .m{flex:1;min-width:0}
.uch .m b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uch .m span{display:block;font-size:11.5px;opacity:.62;font-weight:300}

/* ── แถบบน ── */
#topb{position:fixed;top:0;left:var(--nav);right:0;height:var(--top);z-index:50;
  background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--b);
  display:flex;align-items:center;gap:11px;padding:0 18px;transition:left .22s}
.ib{width:40px;height:40px;border-radius:var(--rs);border:1px solid transparent;background:none;
  cursor:pointer;display:grid;place-items:center;color:var(--t2);flex-shrink:0;transition:.14s}
.ib:hover{background:var(--pl);color:var(--p)}
.tt{flex:1;min-width:0}
.tt h1{font-size:17px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt p{font-size:12.5px;color:var(--t3);font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#main{margin-left:var(--nav);padding-top:var(--top);min-height:100vh;transition:margin-left .22s}
.wrap{max-width:1420px;margin:0 auto;padding:22px}
#ov{display:none;position:fixed;inset:0;background:rgba(10,16,32,.42);z-index:59}
#ov.on{display:block}
#bn{display:none;position:fixed;bottom:0;left:0;right:0;z-index:55;background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px);border-top:1px solid var(--b);padding-bottom:var(--sb)}
#bn .in{display:flex;height:var(--bn)}
#bn button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;cursor:pointer;color:var(--t3);font-size:11.5px;font-weight:500;
  position:relative;padding:6px 2px}
#bn button.on{color:var(--p)}
#bn button.on::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:30px;height:3px;background:var(--a);border-radius:0 0 3px 3px}
body.rail #side{width:var(--rail)}
body.rail .sd-nm,body.rail .nv .lb,body.rail .nv .bdg,body.rail .grp,body.rail .uch .m{display:none}
body.rail .nv,body.rail .uch,body.rail .sd-h{justify-content:center;padding-left:0;padding-right:0}
body.rail #main,body.rail #topb{margin-left:var(--rail)}
body.rail #topb{left:var(--rail)}

/* ── ตัวเลือกเดือน / ภาษา ── */
.mpk{display:flex;align-items:center;flex-shrink:0;border:1px solid var(--b);border-radius:var(--rs);
  background:var(--c);position:relative}
.mpk button{border:0;background:none;cursor:pointer;color:var(--t2);display:grid;place-items:center;
  width:34px;height:40px;transition:.14s}
.mpk button:hover:not(:disabled){background:var(--pl);color:var(--p)}
.mpk button:disabled{opacity:.3;cursor:not-allowed}
.mpk .cur{padding:0 11px;height:40px;display:flex;align-items:center;gap:7px;cursor:pointer;
  border-left:1px solid var(--b);border-right:1px solid var(--b);min-width:124px;justify-content:center}
.mpk .cur:hover{background:var(--pl)}
.mpk .cur b{font-size:14.5px;font-weight:600;white-space:nowrap}
.pop{position:absolute;top:calc(100% + 7px);right:0;background:var(--c);border:1px solid var(--b);
  border-radius:var(--r);box-shadow:var(--s3);padding:9px;z-index:120;max-height:360px;
  overflow-y:auto;display:none}
.pop.on{display:block}
.myr{font-size:11.5px;font-weight:600;color:var(--t3);letter-spacing:.05em;padding:9px 9px 6px}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;min-width:238px}
.mitem{border:1px solid transparent;background:none;padding:10px 5px;border-radius:7px;font-size:14px;
  cursor:pointer;color:var(--t1);position:relative;transition:.14s}
.mitem:hover:not(:disabled){background:var(--pl)}
.mitem.on{background:var(--p);color:#fff;font-weight:600}
.mitem.fut::after{content:'';position:absolute;top:5px;right:7px;width:6px;height:6px;border-radius:50%;
  background:var(--wn)}
.mitem:disabled{opacity:.28;cursor:not-allowed}
.mfoot{border-top:1px solid var(--b);margin-top:8px;padding:9px 9px 3px;font-size:12px;color:var(--t3);
  font-weight:300;display:flex;align-items:center;gap:7px}
.mfoot i{width:6px;height:6px;border-radius:50%;background:var(--wn);flex-shrink:0}
.lang{display:flex;align-items:center;gap:7px;border:1px solid var(--b);background:var(--c);
  border-radius:var(--rs);padding:0 12px;height:40px;cursor:pointer;font-size:14px;font-weight:500;
  color:var(--t1);position:relative;flex-shrink:0}
.lang:hover{background:var(--pl)}
.langpop{min-width:196px}
.langpop button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;
  padding:11px 12px;border-radius:7px;cursor:pointer;font-size:14.5px;color:var(--t1);text-align:left}
.langpop button:hover{background:var(--pl)}
.langpop button.on{background:var(--p);color:#fff;font-weight:600}
.langpop .fg2{font-size:11px;font-weight:700;background:var(--b);color:var(--t2);border-radius:4px;
  padding:2px 5px;min-width:26px;text-align:center}
.langpop button.on .fg2{background:rgba(255,255,255,.22);color:#fff}

/* ── หัวข้อหน้า / การ์ด ── */
.phd{display:flex;align-items:flex-start;gap:15px;margin-bottom:20px;flex-wrap:wrap}
.phd .x{flex:1;min-width:230px}
.phd h2{font-size:22px;font-weight:600;letter-spacing:-.01em}
.phd p{font-size:14.5px;color:var(--t2);font-weight:300;margin-top:2px}
.card{background:var(--c);border:1px solid var(--b);border-radius:var(--r);margin-bottom:18px;overflow:hidden}
.card-h{padding:15px 17px;border-bottom:1px solid var(--b);display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.card-h h3{font-size:16px;font-weight:600;flex:1;min-width:140px}
.card-h .mt{font-size:13.5px;color:var(--t3);font-weight:300}
.card-b{padding:17px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px}
.kpi{background:var(--c);border:1px solid var(--b);border-radius:var(--r);padding:17px 18px;transition:.16s}
.kpi:hover{border-color:var(--b2);box-shadow:var(--s2)}
.kpi .kh{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.kpi .kl{font-size:14px;color:var(--t2)}
.kpi .ki{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--pl);color:var(--p3)}
.kpi.a .ki{background:var(--al);color:var(--a)}.kpi.g .ki{background:var(--okl);color:var(--ok)}
.kpi .kv{font-size:25px;font-weight:600;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi.a .kv{color:var(--a)}.kpi.g .kv{color:var(--ok)}
.kpi .kn{font-size:13px;color:var(--t3);margin-top:4px;font-weight:300}

/* ── ตาราง ── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
thead th{background:var(--bg);color:var(--t2);padding:12px 14px;text-align:left;font-weight:600;
  font-size:13.5px;white-space:nowrap;border-bottom:1px solid var(--b);position:sticky;top:0;z-index:2}
tbody td{padding:12px 14px;border-bottom:1px solid var(--b);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FBFCFD}
tfoot td{padding:13px 14px;background:var(--bg);font-weight:600;border-top:1px solid var(--b2)}
.n{text-align:right;font-variant-numeric:tabular-nums}
.rm{display:inline-grid;place-items:center;min-width:31px;height:31px;border-radius:7px;background:var(--pl);
  color:var(--p);font-weight:600;font-size:14px;padding:0 8px;border:1px solid #DBE3F0}
.pn{font-size:15px;line-height:1.35}
.ps{font-size:12.5px;color:var(--t3);font-weight:300}
.mut{color:var(--t3);font-weight:300}
.neg{color:var(--a);font-weight:600}

/* ── ฟอร์ม / ปุ่ม ── */
input[type=number],input[type=text],input[type=password],input[type=date],input[type=email],
input[type=tel],input[type=url],select,textarea{
  font-size:15px;padding:11px 13px;border:1px solid var(--b);border-radius:var(--rs);width:100%;
  background:var(--c);color:var(--t1);min-height:46px;transition:.15s;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--p3);box-shadow:0 0 0 3px rgba(27,79,160,.1)}
input.bad{border-color:var(--er);background:var(--erl)}
input.wrn{border-color:var(--wn);background:var(--wnl)}
input:disabled,select:disabled,textarea:disabled{background:var(--bg);color:var(--t3)}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--p);cursor:pointer;min-height:0}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
textarea{min-height:86px;resize:vertical;line-height:1.65}
.fg{margin-bottom:16px}
.fg label{display:block;font-size:14px;font-weight:500;color:var(--t2);margin-bottom:7px}
.hp{font-size:13px;color:var(--t3);font-weight:300;margin-top:6px;line-height:1.6;display:block}
.btn{font-size:15px;font-weight:500;padding:11px 18px;border-radius:var(--rs);border:1px solid transparent;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  min-height:46px;transition:.15s}
.b1{background:var(--p);color:#fff}.b1:hover{background:var(--p2)}
.b2{background:var(--a);color:#fff}.b2:hover{background:#BE1850}
.b3{background:var(--c);color:var(--t1);border-color:var(--b)}.b3:hover{background:var(--bg);border-color:var(--b2)}
.b5{background:var(--c);color:var(--er);border-color:#F2C9C4}.b5:hover{background:var(--erl)}
.sm{padding:8px 13px;font-size:13.5px;min-height:38px}
.btn:disabled{opacity:.42;cursor:not-allowed}
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.spacer{flex:1}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:17px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:15px}

/* ── ป้าย / แจ้งเตือน ── */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:20px;font-size:13px;
  font-weight:500;white-space:nowrap;border:1px solid transparent}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.p-ok{background:var(--okl);color:var(--ok);border-color:#C4E5D4}
.p-wn{background:var(--wnl);color:var(--wn);border-color:#EFDBB6}
.p-er{background:var(--erl);color:var(--er);border-color:#F0C8C3}
.p-in{background:var(--pl);color:var(--p3);border-color:#D5DFF0}
.p-gy{background:var(--bg);color:var(--t3);border-color:var(--b)}
.p-a{background:var(--al);color:var(--a);border-color:#F5CDDC}
.alert{padding:13px 15px;border-radius:var(--rs);font-size:14.5px;display:flex;gap:10px;
  align-items:flex-start;margin-bottom:15px;line-height:1.6}
.al-er{background:var(--erl);color:#8C2A1F;border:1px solid #F2C9C4}
.al-ok{background:var(--okl);color:#0A5C37;border:1px solid #BFE3D0}
.al-wn{background:var(--wnl);color:#7C4A08;border:1px solid #EDD8B0}
.al-in{background:var(--pl);color:#0E2F63;border:1px solid #D3DEF0}
.lnk{font-size:14.5px;color:var(--p3);font-weight:500;background:none;border:0;cursor:pointer;padding:0}
.lnk:hover{text-decoration:underline}
.emp{padding:46px 22px;text-align:center;color:var(--t3)}
.emp .ei{width:52px;height:52px;border-radius:13px;background:var(--bg);display:grid;place-items:center;
  margin:0 auto 13px;color:var(--b2)}
.emp p{font-size:15px;font-weight:500;color:var(--t2)}
.emp span{font-size:13.5px;font-weight:300}

/* ── ขั้นตอนงาน ── */
.fbar{height:8px;background:var(--b);border-radius:20px;overflow:hidden;margin-bottom:20px}
.fbar i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),#14A05F);border-radius:20px;
  transition:.5s}
.flow{display:grid;grid-template-columns:repeat(6,1fr)}
.fstep{position:relative;padding:0 5px;text-align:center;cursor:pointer;background:none;border:0}
.fstep .fl,.fstep .fr{position:absolute;top:19px;height:2px;background:var(--b);z-index:0}
.fstep .fl{left:0;right:50%}.fstep .fr{left:50%;right:0}
.fstep:first-child .fl,.fstep:last-child .fr{display:none}
.fstep.done .fl,.fstep.done .fr,.fstep.now .fl{background:var(--ok)}
.fstep .fc{width:38px;height:38px;border-radius:50%;background:var(--c);border:2px solid var(--b);
  display:grid;place-items:center;margin:0 auto 9px;position:relative;z-index:1;font-size:15px;
  font-weight:600;color:var(--t3);transition:.18s}
.fstep.done .fc{background:var(--ok);border-color:var(--ok);color:#fff}
.fstep.now .fc{border-color:var(--p);color:var(--p);box-shadow:0 0 0 4px rgba(11,44,99,.1)}
.fstep .ft{font-size:13.5px;line-height:1.4;color:var(--t2)}
.fstep.done .ft,.fstep.now .ft{color:var(--t1);font-weight:500}
.fstep .fs{font-size:12px;color:var(--t3);font-weight:300;display:block;margin-top:3px}

/* ── มิเตอร์แบบการ์ด ── */
.mcs{display:none}
.mc{background:var(--c);border:1px solid var(--b);border-left:4px solid var(--b2);border-radius:var(--r);
  padding:15px;margin-bottom:12px}
.mc.ok{border-left-color:var(--ok)}.mc.wn{border-left-color:var(--wn)}
.mc.er{border-left-color:var(--er);background:#FFFCFC}
.mch{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.mch .z{flex:1;min-width:0}
.mch .z b{display:block;font-size:15px;font-weight:500}
.mcr{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.mf{background:var(--bg);border:1px solid var(--b);border-radius:var(--rs);padding:11px 12px}
.mf .fl2{font-size:13px;color:var(--t2);font-weight:500;margin-bottom:7px;display:flex;
  justify-content:space-between;gap:7px}
.mf .fl2 em{font-style:normal;font-weight:400;color:var(--t3);font-size:12.5px}
.mf .fu{font-size:13px;margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:7px}
.mf .fu b{font-size:16px;font-variant-numeric:tabular-nums}
.mck{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t2);cursor:pointer}

/* ── อัปโหลด ── */
.up{border:1.5px dashed var(--b2);border-radius:var(--r);padding:22px;text-align:center;cursor:pointer;
  background:var(--bg);transition:.16s}
.up:hover{border-color:var(--p3);background:var(--pl)}
.up.has{padding:14px;border-style:solid;background:var(--c)}
.up-pv{max-width:100%;max-height:190px;margin:0 auto 12px;border-radius:var(--rs);display:block;
  border:1px solid var(--b);background:#fff}
.up-ic{width:44px;height:44px;border-radius:11px;background:var(--pl);color:var(--p3);display:grid;
  place-items:center;margin:0 auto 11px}
.up p{font-size:14.5px;font-weight:500}
.up span{font-size:13px;color:var(--t3);font-weight:300}
.slip{border:1px solid var(--b);border-radius:var(--rs);overflow:hidden;background:var(--bg)}
.slip img{width:100%;max-height:280px;object-fit:contain;display:block;background:#fff}
.slipbar{padding:10px 13px;display:flex;align-items:center;gap:10px;font-size:13px;border-top:1px solid var(--b)}

/* ── กล่องข้อความ ── */
.mk{position:fixed;inset:0;background:rgba(10,16,32,.5);z-index:200;padding:16px;overflow-y:auto;display:none}
.mk.on{display:block}
.md{background:var(--c);border-radius:var(--r);max-width:680px;margin:32px auto;overflow:hidden;box-shadow:var(--s3)}
.md.wide{max-width:960px}
.md .mh{padding:16px 18px;border-bottom:1px solid var(--b);display:flex;align-items:center;gap:12px}
.md .mh h3{font-size:16.5px;font-weight:600;flex:1}
.md .mb{padding:18px;max-height:70vh;overflow-y:auto}
.md .mf2{padding:15px 18px;border-top:1px solid var(--b);display:flex;gap:10px;justify-content:flex-end;
  background:var(--bg);flex-wrap:wrap}
#tst{position:fixed;bottom:calc(var(--bn) + 22px + var(--sb));left:50%;
  transform:translateX(-50%) translateY(18px);background:var(--t1);color:#fff;padding:13px 20px;
  border-radius:11px;font-size:15px;z-index:300;box-shadow:0 8px 26px rgba(0,0,0,.3);max-width:92vw;
  display:flex;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:.25s}
#tst.on{opacity:1;transform:translateX(-50%) translateY(0)}
#tst.er{background:var(--er)}

/* ── แท็บ / อื่น ๆ ── */
.tabs2{display:flex;gap:3px;border-bottom:1px solid var(--b);margin-bottom:18px;overflow-x:auto}
.tabs2 button{border:0;background:none;padding:12px 17px;font-size:15px;font-weight:500;color:var(--t2);
  cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px;transition:.15s}
.tabs2 button.on{color:var(--p);border-bottom-color:var(--p);font-weight:600}
.seg{display:flex;background:var(--pl);padding:5px;border-radius:11px;margin-bottom:18px;gap:4px;max-width:560px}
.seg button{flex:1;border:0;background:none;padding:11px;border-radius:8px;font-size:15px;
  font-weight:500;color:var(--t2);cursor:pointer;transition:.16s}
.seg button.on{background:var(--c);color:var(--p);box-shadow:var(--s1);font-weight:600}
.kv{display:flex;justify-content:space-between;gap:13px;padding:10px 0;border-bottom:1px solid var(--b);
  font-size:14.5px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--t2);font-weight:300}
.kv .v{font-weight:500;text-align:right;word-break:break-word}
.bar-p{height:8px;background:var(--b);border-radius:20px;overflow:hidden;margin:9px 0 5px}
.bar-p i{display:block;height:100%;background:var(--p3);border-radius:20px;transition:.4s}
.stat{display:flex;align-items:flex-end;gap:8px;height:96px}
.stat .c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.stat i{background:var(--p3);border-radius:6px 6px 0 0;min-height:3px;display:block}
.stat i.hi{background:var(--a)}
.statl{display:flex;gap:8px;margin-top:9px}
.statl div{flex:1;text-align:center;font-size:12.5px;color:var(--t3);font-weight:300}
.statl b{display:block;font-size:14px;color:var(--t1);font-weight:600}
.steps{counter-reset:st}
.step{display:flex;gap:14px;padding-bottom:20px;position:relative}
.step:last-child{padding-bottom:0}
.step::before{counter-increment:st;content:counter(st);width:30px;height:30px;border-radius:50%;
  background:var(--p);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:600;
  flex-shrink:0;z-index:1}
.step::after{content:'';position:absolute;left:15px;top:34px;bottom:0;width:1.5px;background:var(--b)}
.step:last-child::after{display:none}
.step .sc{flex:1;min-width:0;padding-top:3px}
.step .sc b{font-size:15px;font-weight:600;display:block;margin-bottom:5px}
.step .sc p{font-size:14px;color:var(--t2);font-weight:300;line-height:1.7}
.pager{display:flex;align-items:center;gap:9px;padding:14px 17px;border-top:1px solid var(--b);flex-wrap:wrap;
  font-size:13.5px}
.pager .pg{display:flex;gap:5px}
.pager .pg button{min-width:38px;height:38px;border:1px solid var(--b);background:var(--c);
  border-radius:8px;cursor:pointer;font-size:14px;color:var(--t1)}
.pager .pg button.on{background:var(--p);color:#fff;border-color:var(--p);font-weight:600}
.pager .pg button:disabled{opacity:.4;cursor:not-allowed}
.combo{position:relative}
.combolist{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--c);border:1px solid var(--b);
  border-radius:var(--rs);box-shadow:var(--s2);max-height:250px;overflow-y:auto;z-index:130;display:none}
.combolist.on{display:block}
.combolist button{display:block;width:100%;border:0;background:none;padding:11px 13px;text-align:left;
  cursor:pointer;font-size:14.5px;border-bottom:1px solid var(--b)}
.combolist button:last-child{border-bottom:0}
.combolist button:hover{background:var(--pl)}
.combolist .cs{font-size:12.5px;color:var(--t3);display:block}
.dbmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:15px}
.dbcard{border:1px solid var(--b);border-radius:var(--r);overflow:hidden;background:var(--c)}
.dbcard .dh{padding:13px 15px;background:var(--pl);border-bottom:1px solid var(--b);display:flex;
  align-items:center;gap:10px}
.dbcard .dh b{font-size:14.5px;font-weight:600;flex:1}
.dbcard .db2{padding:13px 15px;font-size:14px;color:var(--t2);font-weight:300;line-height:1.75}
.dbcard .dcols{padding:0 15px 14px}
.dbcard .dcols span{display:inline-block;background:var(--bg);border:1px solid var(--b);border-radius:6px;
  padding:3px 8px;font-size:12.5px;margin:3px 4px 0 0;font-family:ui-monospace,Menlo,monospace}
.arrow{text-align:center;color:var(--t3);font-size:13px;padding:8px 0;font-weight:300}
.capgrid{display:grid;grid-template-columns:1fr repeat(3,96px);font-size:14.5px}
.capgrid>div{padding:11px 14px;border-bottom:1px solid var(--b);display:flex;align-items:center}
.capgrid .hd2{background:var(--bg);font-weight:600;font-size:13.5px;color:var(--t2)}
.capgrid .ctr{justify-content:center}
.capgrid .sec{grid-column:1/-1;background:var(--pl);font-weight:600;font-size:13.5px;color:var(--p);
  padding:10px 14px}
@media(max-width:640px){.capgrid{grid-template-columns:1fr repeat(3,64px);font-size:13px}
  .capgrid>div{padding:10px 7px}}

/* ── หน้าเข้าสู่ระบบ ── */
.auth{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  padding:26px 18px;overflow-y:auto;background:var(--bg)}
.auth.hid{display:none}
.abox{width:100%;max-width:430px}
.abrand{text-align:center;margin-bottom:28px}
.abrand .lg{width:68px;height:68px;border-radius:19px;background:var(--p);display:grid;place-items:center;
  margin:0 auto 16px;overflow:hidden;box-shadow:var(--s2)}
.abrand .lg img{width:100%;height:100%;object-fit:cover}
.abrand h1{font-size:23px;font-weight:600;letter-spacing:-.01em}
.abrand p{font-size:14.5px;color:var(--t2);font-weight:300;margin-top:4px}
.acard{background:var(--c);border:1px solid var(--b);border-radius:16px;padding:24px;box-shadow:var(--s2)}
.aseg{display:flex;background:var(--bg);padding:5px;border-radius:11px;margin-bottom:22px;gap:4px}
.aseg button{flex:1;border:0;background:none;padding:11px 7px;border-radius:8px;font-size:14.5px;
  font-weight:500;color:var(--t2);cursor:pointer;transition:.16s;display:flex;align-items:center;
  justify-content:center;gap:7px}
.aseg button.on{background:var(--c);color:var(--p);box-shadow:var(--s1);font-weight:600}
.gwrap{display:flex;justify-content:center;min-height:48px}
.gnote{text-align:center;font-size:14px;color:var(--t2);font-weight:300;line-height:1.75;margin-top:18px}
.pw{position:relative}
.pw .eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;
  cursor:pointer;color:var(--t3);padding:7px;border-radius:7px}
.afoot{text-align:center;font-size:13px;color:var(--t3);font-weight:300;margin-top:22px;line-height:1.9}
.alangs{display:flex;justify-content:center;gap:6px;margin-top:16px;flex-wrap:wrap}
.alangs button{border:1px solid var(--b);background:var(--c);border-radius:20px;padding:6px 14px;
  font-size:13.5px;cursor:pointer;color:var(--t2);display:flex;align-items:center;gap:6px;transition:.14s}
.alangs button.on{background:var(--p);color:#fff;border-color:var(--p);font-weight:500}
.prof{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid var(--b);
  border-radius:var(--rs);margin-bottom:18px;background:var(--bg)}
.prof img{width:48px;height:48px;border-radius:50%;flex-shrink:0}
.prof .pv{width:48px;height:48px;border-radius:50%;background:var(--p3);color:#fff;display:grid;
  place-items:center;font-weight:600;font-size:19px;flex-shrink:0}
.prof b{display:block;font-size:15px;font-weight:600}
.prof span{font-size:13px;color:var(--t2);font-weight:300;word-break:break-all}


/* ── โลโก้กดได้ (แตะ 5 ครั้งเปิดโหมดผู้ดูแล) ── */
.abrand .lg{cursor:default;user-select:none;-webkit-user-select:none}

/* ── ปุ่มขั้นสูงในแท็บตั้งค่า ── */
.tabs2 button[onclick*="techOn"]{font-size:13px;font-weight:400}

/* ── แถวเมนูในกล่องตั้งค่า ── */
.setrow{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid var(--b);
  border-radius:var(--rs);margin-bottom:10px;cursor:pointer;transition:.15s;background:var(--c)}
.setrow:hover{border-color:var(--p3);background:var(--pl)}
.setrow:last-child{margin-bottom:0}
.setrow .si{width:40px;height:40px;border-radius:10px;background:var(--pl);color:var(--p3);
  display:grid;place-items:center;flex-shrink:0}
.setrow:hover .si{background:var(--p);color:#fff}
.setrow .sc2{flex:1;min-width:0}
.setrow .sc2 b{display:block;font-size:15px;font-weight:600;line-height:1.4}
.setrow .sc2 span{display:block;font-size:13px;color:var(--t2);font-weight:300;line-height:1.5}
.setrow .sa{color:var(--t3);flex-shrink:0}

/* ── ปุ่มเลือกภาษาในหน้าเข้าสู่ระบบ ── */
.alangs .fg2{font-size:11px;font-weight:700;background:var(--b);color:var(--t2);
  border-radius:4px;padding:2px 5px;min-width:26px;text-align:center;line-height:1.4}
.alangs button.on .fg2{background:rgba(255,255,255,.24);color:#fff}

/* ── ปุ่มแท็บเข้าสู่ระบบ ── */
.aseg button svg{flex-shrink:0}

/* ── การพิมพ์ ── */
#pa{display:none}
.pbill{background:#fff;color:#000;font-size:9.6pt;line-height:1.42;padding:6mm 6mm 5mm;
  display:flex;flex-direction:column;height:100%}
.pbill .ph2{display:flex;align-items:center;gap:3mm;border-bottom:.6mm solid #0B2C63;
  padding-bottom:2mm;margin-bottom:2.4mm}
.pbill .ph2 img{width:13mm;height:13mm;object-fit:contain;flex-shrink:0}
.pbill .ph2 .pt{flex:1;min-width:0}
.pbill .ph2 b{font-size:11pt;font-weight:700;display:block;line-height:1.3;color:#0B2C63}
.pbill .ph2 span{font-size:7.4pt;font-weight:400;color:#333;display:block;line-height:1.4}
.pbill table{width:100%;border-collapse:collapse;font-size:8.6pt}
.pbill th{background:#EEF2F9;color:#0B2C63;padding:1.1mm 1.6mm;border:.2mm solid #B9C2D2;
  font-weight:700;text-align:left}
.pbill td{padding:.9mm 1.6mm;border:.2mm solid #B9C2D2}
.pbill .rt{text-align:right;font-variant-numeric:tabular-nums}
.pbill .sub2{color:#555;font-size:7.6pt}
.pbill .tot2 td{background:#0B2C63;color:#fff;font-weight:700;font-size:10.5pt;border-color:#0B2C63}
.pbill .foot2{margin-top:auto;padding-top:2mm;display:flex;gap:4mm;align-items:flex-start}
.pbill .note2{flex:1;font-size:7pt;color:#444;line-height:1.55}
.pbill .qz{width:40mm;flex-shrink:0;text-align:center;border:.3mm solid #B9C2D2;border-radius:1.5mm;
  padding:2mm;background:#FAFBFC}
.pbill .qz img{width:34mm;height:34mm;object-fit:contain;display:block;margin:0 auto 1.2mm;background:#fff}
.pbill .qz .qph{width:34mm;height:34mm;border:.3mm dashed #B9C2D2;border-radius:1mm;display:grid;
  place-items:center;margin:0 auto 1.2mm;font-size:6.6pt;color:#888;text-align:center;padding:2mm}
.pbill .qz b{font-size:8.4pt;display:block;line-height:1.35}
.pbill .qz span{font-size:7.4pt;color:#444;display:block}
.psum{background:#fff;color:#000;padding:7mm 7mm 5mm;font-size:8.4pt}
.psum h1{font-size:13pt;font-weight:700;text-align:center;color:#0B2C63}
.psum .sh{font-size:9pt;text-align:center;margin-bottom:3.5mm;color:#333}
.psum .slogo{display:flex;align-items:center;justify-content:center;gap:3mm;margin-bottom:1.5mm}
.psum .slogo img{width:12mm;height:12mm;object-fit:contain}
.psum table{width:100%;border-collapse:collapse;font-size:7.8pt}
.psum th{background:#EEF2F9;color:#0B2C63;border:.2mm solid #A9B4C6;padding:1mm 1.4mm;font-weight:700}
.psum td{border:.2mm solid #A9B4C6;padding:.75mm 1.4mm}
.psum .rt{text-align:right;font-variant-numeric:tabular-nums}
.psum .ct{text-align:center}
.psum tfoot td{background:#0B2C63;color:#fff;font-weight:700;font-size:8.6pt}
.psum .sf{margin-top:3mm;font-size:7.2pt;color:#555;display:flex;justify-content:space-between}
.pqr{background:#fff;color:#000;text-align:center;padding:16mm 10mm}
.pqr img.lg2{width:26mm;height:26mm;object-fit:contain;margin:0 auto 4mm;display:block}
.pqr h1{font-size:17pt;font-weight:700;color:#0B2C63;margin-bottom:2mm}
.pqr .qs{font-size:11pt;color:#444;margin-bottom:7mm}
.pqr img.qr2{width:105mm;height:105mm;object-fit:contain;margin:0 auto;display:block;
  border:.4mm solid #ddd;padding:3mm;background:#fff}
.pqr .pp2{font-size:14pt;font-weight:700;margin-top:6mm}
.pqr .nm2{font-size:12pt;color:#333}
@media print{
  html,body{background:#fff!important;margin:0!important;padding:0!important}
  #side,#topb,#bn,#ov,.mk,#tst,#main,.auth{display:none!important}
  #pa{display:block!important}
  .psheet{page-break-after:always;break-after:page;display:flex;gap:0}
  .psheet:last-child{page-break-after:auto;break-after:auto}
  .psheet.land{width:297mm;height:209mm}
  .psheet.land .pbill{width:148.5mm;border-right:.2mm dashed #ccc}
  .psheet.land .pbill:last-child{border-right:0}
  .psheet.port{width:210mm;min-height:296mm;display:block}
  .pbill,.psum,.pqr{page-break-inside:avoid;break-inside:avoid}
}

/* ── จอเล็ก ── */
@media(max-width:1180px) and (min-width:861px){
  #side{width:var(--rail)}
  .sd-nm,.nv .lb,.nv .bdg,.grp,.uch .m{display:none}
  .nv,.uch,.sd-h{justify-content:center;padding-left:0;padding-right:0}
  #main,#topb{margin-left:var(--rail)}
  #topb{left:var(--rail)}
}
@media(max-width:860px){
  :root{--fs:16px}
  #side{transform:translateX(-100%);width:min(300px,86vw);box-shadow:var(--s3)}
  body.drw #side{transform:none}
  #main{margin-left:0;padding-bottom:calc(var(--bn) + var(--sb))}
  #topb{left:0;padding:0 13px}
  .wrap{padding:16px 13px}
  #bn{display:block}
  .tt p{display:none}
  .phd h2{font-size:20px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px}
  .kpi{padding:15px}.kpi .kv{font-size:22px}
  .grid2,.grid3{grid-template-columns:1fr}
  .mtbl{display:none}.mcs{display:block}
  thead th,tbody td{padding:11px 10px;font-size:14px}
  .mpk .cur{min-width:104px}
  .flow{grid-template-columns:1fr}
  .fstep{display:flex;align-items:flex-start;gap:13px;text-align:left;padding:0 0 16px 0}
  .fstep .fl,.fstep .fr{display:none}
  .fstep::after{content:'';position:absolute;left:18px;top:38px;bottom:0;width:2px;background:var(--b)}
  .fstep:last-child::after{display:none}
  .fstep.done::after{background:var(--ok)}
  .fstep .fc{margin:0;flex-shrink:0}
  .fstep .fx{flex:1;padding-top:7px}
}
@media(max-width:400px){.mcr{grid-template-columns:1fr}}