/* ทะเบียนคุมวัสดุ — ธีมน้ำเงินกรมท่า + ฟ้า #8CC1FF · ฟอนต์ Sarabun (ฝังในโปรแกรม ใช้ออฟไลน์ได้) */
@font-face{font-family:"Sarabun";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/sarabun-thai-400-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Sarabun";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/sarabun-thai-500-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Sarabun";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/sarabun-thai-600-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Sarabun";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/sarabun-thai-700-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Sarabun";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/sarabun-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sarabun";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/sarabun-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sarabun";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/sarabun-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sarabun";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/sarabun-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --navy:#0c2748; --navy2:#12345f; --navy3:#1b4a80;
  --brand:#2b7ad8; --brand-d:#1f63b8; --brand-x:#154a8f; --sky:#8CC1FF; --sky-l:#eaf3ff; --sky-m:#cfe3fb;
  --bg:#f3f6fb; --card:#fff; --line:#e1e8f2; --line2:#ccd7e6; --tx:#18263a; --mut:#66768d; --mut2:#8b99ad;
  --ok:#12805c; --ok-bg:#e0f5ec; --warn:#b45f06; --warn-bg:#fdf0d9; --bad:#c62f2f; --bad-bg:#fde8e8;
  --r:12px; --sh:0 1px 2px rgba(12,39,72,.05),0 4px 14px rgba(12,39,72,.06);
  --font:"Sarabun","Leelawadee UI","Tahoma","Noto Sans Thai",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);font-size:14.5px;line-height:1.5;color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:14.5px;color:inherit}
a{color:var(--brand-d)}
.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

#app{display:flex;min-height:100vh}
/* แถบเมนูซ้าย */
#sidebar{width:262px;flex:none;background:linear-gradient(180deg,var(--navy) 0%,#0a2140 100%);color:#d6e4f7;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;transition:margin-left .22s}
.brand{display:flex;align-items:center;gap:12px;padding:20px 20px 18px;text-decoration:none;color:#fff}
.logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(145deg,var(--sky),#5aa2f2);display:grid;place-items:center;box-shadow:0 4px 12px rgba(140,193,255,.35)}
.logo svg{width:24px;height:24px;stroke:var(--navy);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand b{display:block;font-size:17px;font-weight:700;letter-spacing:.2px;line-height:1.2}
.brand small{display:block;font-size:12px;color:#93b4dc;font-weight:400}
.sb-close{display:none;position:absolute;top:10px;right:12px;border:0;background:none;font-size:28px;color:#b7cdea;cursor:pointer}
#nav{padding:6px 12px 12px;flex:1}
#nav .sec{padding:16px 10px 6px;font-size:11.5px;color:#7f9fca;letter-spacing:.6px;font-weight:600}
#nav a{display:flex;align-items:center;gap:12px;padding:9px 12px;margin:2px 0;color:#cddff5;text-decoration:none;border-radius:9px;font-weight:500;transition:background .15s,color .15s}
#nav a:hover{background:rgba(255,255,255,.07);color:#fff}
#nav a.on{background:rgba(140,193,255,.18);color:#fff;box-shadow:inset 3px 0 0 var(--sky)}
#nav a.on .i{stroke:var(--sky)}
.sb-foot{padding:14px 20px;font-size:12px;color:#7f9fca;border-top:1px solid rgba(255,255,255,.08);line-height:1.6}
.sb-foot .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#37d39a;margin-right:6px;box-shadow:0 0 0 3px rgba(55,211,154,.2)}

/* ส่วนเนื้อหา */
#main{flex:1;min-width:0;display:flex;flex-direction:column}
#topbar{display:flex;align-items:center;gap:14px;padding:12px 28px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;min-height:66px}
#burger{border:1px solid var(--line);background:#fff;border-radius:10px;width:40px;height:40px;cursor:pointer;display:grid;place-items:center;color:var(--navy3)}
#burger:hover{background:var(--sky-l)}
.titles{flex:1;min-width:0}
#topbar h1{font-size:20px;font-weight:700;margin:0;color:var(--navy);line-height:1.25}
#pageSub{font-size:13px;color:var(--mut);margin-top:1px}
#orgName{color:var(--navy3);font-size:13px;font-weight:600;background:var(--sky-l);border:1px solid var(--sky-m);padding:6px 12px;border-radius:99px;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#orgName:empty{display:none}
#content{padding:24px 28px 40px;max-width:1560px;width:100%}
#banner:empty{display:none}
.banner{margin:16px 28px 0;padding:11px 16px;border-radius:12px;background:var(--warn-bg);border:1px solid #f1d49a;color:#7a4504;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* การ์ด */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:18px;box-shadow:var(--sh)}
.card h2{margin:0 0 14px;font-size:16.5px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:9px}
.card h2 .i{color:var(--brand)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.grid>.card{margin-bottom:0}
.stat{display:flex;gap:16px;align-items:center;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-26px;top:-26px;width:96px;height:96px;border-radius:50%;background:var(--sky-l);opacity:.7}
.stat .ic{width:48px;height:48px;border-radius:13px;background:var(--sky-l);color:var(--brand);display:grid;place-items:center;flex:none;z-index:1}
.stat .ic .i{width:24px;height:24px}
.stat .tx{z-index:1;min-width:0}
.stat .n{font-size:26px;font-weight:700;color:var(--navy);line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat .l{color:var(--mut);font-size:13px}
.stat.warn .ic{background:var(--warn-bg);color:var(--warn)} .stat.warn::after{background:var(--warn-bg)} .stat.warn .n{color:var(--warn)}
.stat.ok .ic{background:var(--ok-bg);color:var(--ok)} .stat.ok::after{background:var(--ok-bg)}

/* ฟอร์ม */
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.f{display:flex;flex-direction:column;gap:5px;min-width:150px}
.f.w2{min-width:250px;flex:2} .f.w3{min-width:330px;flex:3} .f.s{min-width:96px;max-width:130px}
.f label{font-size:12.5px;color:var(--mut);font-weight:500}
.f label .req{color:var(--bad)}
input[type=text],input[type=number],input[type=date],input[type=file],select,textarea{border:1px solid var(--line2);border-radius:9px;padding:8px 11px;background:#fff;min-width:0;width:100%;transition:border-color .15s,box-shadow .15s}
input::placeholder{color:var(--mut2)}
input:hover,select:hover{border-color:#a9bbd3}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(43,122,216,.18)}
input[readonly]{background:#f3f6fb}
.btn{border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:9px;padding:8px 16px;cursor:pointer;white-space:nowrap;font-weight:600;display:inline-flex;align-items:center;gap:7px;text-decoration:none;transition:background .15s,box-shadow .15s,transform .05s}
.btn:hover{background:var(--brand-d);box-shadow:0 2px 8px rgba(43,122,216,.3)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(43,122,216,.3)}
.btn.o{background:#fff;color:var(--brand-d);border-color:var(--line2)} .btn.o:hover{background:var(--sky-l);border-color:var(--sky);box-shadow:none}
.btn.d{background:var(--bad);border-color:var(--bad)} .btn.d:hover{background:#a82424;box-shadow:0 2px 8px rgba(198,47,47,.3)}
.btn.g{background:var(--ok);border-color:var(--ok)} .btn.g:hover{background:#0d6b4d;box-shadow:0 2px 8px rgba(18,128,92,.3)}
.btn.sm{padding:4px 11px;font-size:13px;font-weight:500}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ตาราง */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:11px;background:#fff}
table.t{width:100%;border-collapse:collapse}
table.t th{background:#f4f8fd;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;font-size:12.5px;color:var(--navy3);font-weight:600;letter-spacing:.2px}
table.t td{padding:9px 12px;border-bottom:1px solid #eef2f8;vertical-align:top}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr:hover td{background:#f8fbff}
table.t .r{text-align:right;font-variant-numeric:tabular-nums} table.t .c{text-align:center}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.b-in,.b-ok{background:var(--ok-bg);color:var(--ok)} .b-out{background:var(--warn-bg);color:var(--warn)} .b-open{background:#e6ecff;color:#3a4fb0}
.b-low{background:var(--bad-bg);color:var(--bad)} .b-off{background:#e9edf3;color:#5b6a7e}
.muted{color:var(--mut)} .small{font-size:12.5px}
.pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:12px;color:var(--mut)}
.hint{background:var(--sky-l);border:1px solid var(--sky-m);border-radius:10px;padding:10px 14px;margin:10px 0;color:#1a4a82}
.err{background:var(--bad-bg);border:1px solid #f3bcbc;border-radius:10px;padding:10px 14px;margin:10px 0;color:#972222}
.empty{text-align:center;color:var(--mut);padding:26px 10px}

/* ช่องเลือกวัสดุ + วันที่ */
.pick{position:relative}
.pick-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:#fff;border:1px solid var(--brand);border-radius:11px;max-height:280px;overflow-y:auto;box-shadow:0 12px 32px rgba(12,39,72,.18);min-width:340px}
.pick-list div{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f4fa}
.pick-list div:hover,.pick-list div.on{background:var(--sky-l)}
.pick-list .code{color:var(--brand-d);font-weight:700;margin-right:8px}
.dt{display:flex;gap:6px;position:relative} .dt input[type=text]{flex:1}
.dt .cal{border:1px solid var(--line2);background:#fff;border-radius:9px;width:40px;cursor:pointer;color:var(--brand);display:grid;place-items:center} .dt .cal:hover{background:var(--sky-l)}
.dt input[type=date]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}

/* กล่องโต้ตอบและแจ้งเตือน */
#overlay{position:fixed;inset:0;background:rgba(10,28,52,.5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
#overlay[hidden]{display:none}
#modal{background:#fff;border-radius:16px;max-width:780px;width:100%;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(8,24,48,.4)}
#modal.wide{max-width:1000px}
#modalHead{padding:16px 22px;font-weight:700;font-size:17px;color:var(--navy);border-bottom:1px solid var(--line)}
#modalBody{padding:18px 22px;overflow-y:auto;flex:1}
#modalFoot{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:#fafcff;border-radius:0 0 16px 16px}
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:11px 20px;border-radius:12px;z-index:70;max-width:90vw;box-shadow:0 8px 28px rgba(8,24,48,.35);font-weight:500}
#toast.bad{background:var(--bad)} #toast.ok{background:var(--ok)}
#toast[hidden]{display:none}
#busy{position:fixed;inset:0;background:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;z-index:80}
#busy[hidden]{display:none}
.spin{width:36px;height:36px;border:4px solid var(--sky-m);border-top-color:var(--brand);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

@media (max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  #sidebar{position:fixed;left:0;top:0;z-index:40;margin-left:-280px;box-shadow:6px 0 28px rgba(0,0,0,.3)}
  body.sb-open #sidebar{margin-left:0}
  .sb-close{display:block}
  .g3,.g2,.g4{grid-template-columns:1fr}
  #content{padding:14px 14px 32px} #topbar{padding:10px 14px} .banner{margin:12px 14px 0} #orgName{display:none}
  .card{padding:16px}
}
@media (min-width:901px){ body.sb-hide #sidebar{margin-left:-262px} }

/* หน้าเข้าสู่ระบบ + ชิปผู้ใช้ (โหมดฐานข้อมูลกลาง) */
#gate{position:fixed;inset:0;z-index:90;background:radial-gradient(1200px 600px at 20% -10%,#1b4a80 0%,transparent 60%),linear-gradient(160deg,var(--navy) 0%,#0a2140 100%);display:grid;place-items:center;padding:20px}
#gate[hidden]{display:none}
.gate-card{width:100%;max-width:420px;background:#fff;border-radius:18px;padding:34px 32px 28px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.gate-logo{width:60px;height:60px;margin:0 auto 14px;border-radius:16px;background:linear-gradient(145deg,var(--sky),#5aa2f2);display:grid;place-items:center;box-shadow:0 6px 18px rgba(90,162,242,.45)}
.gate-logo svg{width:34px;height:34px;stroke:var(--navy);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gate-card h1{margin:0;font-size:24px;color:var(--navy)}
.gate-sub{margin:2px 0 18px;color:var(--mut)}
.gate-msg{color:var(--tx);margin:10px 0 18px}
.gate-btn{width:100%;justify-content:center;padding:11px 16px;font-size:15.5px;margin-top:6px}
.gate-fine{margin:14px 0 0;font-size:12.5px;color:var(--mut2)}
.gate-spin{width:34px;height:34px;margin:10px auto 0;border:3px solid var(--sky-m);border-top-color:var(--brand);border-radius:50%;animation:gspin .8s linear infinite}
@keyframes gspin{to{transform:rotate(360deg)}}
#userChip{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--navy3)}
#userChip .who{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
#userChip .st{width:9px;height:9px;border-radius:50%;flex:none}
.st-ok{background:#37d39a;box-shadow:0 0 0 3px rgba(55,211,154,.2)} .st-wait{background:#e0a21a;box-shadow:0 0 0 3px rgba(224,162,26,.2)}
.st-off{background:#8b99ad;box-shadow:0 0 0 3px rgba(139,153,173,.25)} .st-bad{background:var(--bad);box-shadow:0 0 0 3px rgba(198,47,47,.2)}
@media (max-width:900px){ #userChip .who{display:none} }

/* โลโก้หน่วยงาน */
.logo.custom{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);padding:3px;overflow:hidden}
.logo img{width:100%;height:100%;object-fit:contain;display:block}
.logo-box{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo-prev{width:84px;height:84px;border:1px dashed var(--line2);border-radius:12px;display:grid;place-items:center;background:#fafcff;overflow:hidden}
.logo-prev img{max-width:100%;max-height:100%;object-fit:contain}

/* ===== รอบปรับหน้าตา (3 พ.ย. 2569): โลโก้ใหม่ · หน้าหลักมีกราฟ · หน้าล็อกอิน ===== */
.logo{background:none;box-shadow:0 6px 16px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.08);overflow:hidden;width:44px;height:44px;border-radius:12px}
.logo img{display:block;width:100%;height:100%}
.hero{background:linear-gradient(120deg,#0c2748 0%,#1b4a80 62%,#2b7ad8 130%);color:#fff;border:0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative;overflow:hidden;margin-bottom:18px;padding:22px 26px}
.hero::before{content:"";position:absolute;right:-30px;top:-40px;width:260px;height:260px;background:url("logo.svg") center/contain no-repeat;opacity:.1;transform:rotate(-8deg)}
.hero>*{position:relative}
.hero .hi{font-size:21px;font-weight:700;line-height:1.3}
.hero .hs{color:#b9d2f1;font-size:13.5px;margin-top:2px}
.hero .quick{display:flex;gap:10px;flex-wrap:wrap}
.hero .btn{background:#fff;color:var(--navy);border-color:#fff;display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600}
.hero .btn:hover{background:#eaf3ff}
.hero .btn.o{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)}
.hero .btn.o:hover{background:rgba(255,255,255,.22)}
.charts{margin-top:18px}
.charts .card h2{margin-bottom:10px}
.ch-donut{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ch-donut svg{width:140px;height:140px;flex:none}
.ch-donut path{transition:opacity .15s} .ch-donut path:hover{opacity:.8}
.dn-v{font:700 17px var(--font);fill:var(--navy)} .dn-l{font:11px var(--font);fill:var(--mut)}
.ch-donut ul{list-style:none;margin:0;padding:0;flex:1;min-width:130px}
.ch-donut li{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px}
.ch-donut li i,.ch-key i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.ch-donut .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-bars{width:100%;height:auto;display:block}
.ch-bars .gl{stroke:#e6edf7;stroke-width:1} .ch-bars .ax{font:9.5px var(--font);fill:var(--mut2)}
.ch-key{display:flex;gap:16px;justify-content:center;font-size:12.5px;color:var(--mut);margin-top:4px}
.ch-key span{display:inline-flex;align-items:center;gap:6px}
.ch-empty{color:var(--mut);text-align:center;padding:34px 10px;font-size:13.5px}
.ch-ok{display:flex;align-items:center;gap:10px;color:var(--ok);background:var(--ok-bg);border-radius:10px;padding:14px 16px;font-size:13.5px}
.lowbars{list-style:none;margin:0;padding:0}
.lowbars li{margin:0 0 12px}
.lb2{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:4px}
.lb2 span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lb2 b{color:var(--warn);font-weight:600;white-space:nowrap}
.pbar{height:8px;background:var(--warn-bg);border-radius:6px;overflow:hidden} .pbar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#f2a93b,#e0566b)}
.onboard{text-align:center;padding:26px 22px 30px}
.empty-art{width:190px;max-width:60%;height:auto;margin:0 auto 6px;display:block}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left}
.step{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--tx);background:linear-gradient(180deg,#fff,var(--sky-l));transition:transform .15s,box-shadow .15s,border-color .15s}
.step:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--sky)}
.step .n{position:absolute;right:14px;top:10px;font-size:34px;font-weight:800;color:var(--sky-m);line-height:1}
.step .ic{width:42px;height:42px;border-radius:12px;background:var(--brand);color:#fff;display:grid;place-items:center}
.step b{color:var(--navy);font-size:15.5px} .step small{color:var(--mut);font-size:12.5px;line-height:1.4}
@media (max-width:900px){.steps{grid-template-columns:1fr}.hero{padding:18px}}
/* หน้าล็อกอิน */
#gate{background:radial-gradient(900px 500px at 12% -8%,#2b7ad8 0%,transparent 60%),radial-gradient(700px 420px at 100% 110%,#12a58c55 0%,transparent 60%),linear-gradient(160deg,#0c2748 0%,#081d3a 100%);overflow:auto}
.gate-card{position:relative}
.gate-mark{width:84px;height:84px;margin:-70px auto 12px;display:block;border-radius:22px;box-shadow:0 14px 34px rgba(12,39,72,.45),0 0 0 6px #fff}
.gate-card h1{margin:6px 0 2px;font-size:25px;color:var(--navy)}
.gate-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 6px;text-align:center}
.gate-feats div{background:var(--sky-l);border-radius:12px;padding:10px 6px;font-size:11.5px;line-height:1.3;color:var(--navy);font-weight:600}
.gate-feats svg{display:block;margin:0 auto 4px;width:22px;height:22px;stroke:var(--brand);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gate-by{margin-top:14px;font-size:11.5px;color:var(--mut2)}
@media (max-width:560px){
  .g4{grid-template-columns:1fr 1fr!important;gap:10px}
  .stat{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}
  .stat .n{font-size:20px}
  .hero .hi{font-size:18px}
}

/* ===== หน้าแรกสำหรับผู้เยี่ยมชม + หน้าหน่วยงานที่ใช้ระบบ (landing.js) ===== */
#land{position:fixed;inset:0;z-index:95;background:#fff;overflow:auto;color:var(--tx)}
#land[hidden]{display:none}
.ld-wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.ld-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.ld-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);font-weight:700;font-size:17px}
.ld-brand img{border-radius:9px}
.ld-bar nav{display:flex;align-items:center;gap:6px}
.ld-bar nav a{padding:8px 12px;border-radius:9px;color:var(--mut);text-decoration:none;font-weight:600;font-size:14px}
.ld-bar nav a:hover,.ld-bar nav a.on{background:var(--sky-l);color:var(--navy)}
.ld-hero{background:radial-gradient(900px 420px at 85% -10%,#2b7ad8 0%,transparent 60%),linear-gradient(160deg,#0c2748 0%,#081d3a 100%);color:#fff;padding:54px 0 60px}
.ld-hero.small{padding:34px 0 38px}
.ld-hero .ld-wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}
.ld-hero-tx{max-width:620px}
.ld-hero h1{margin:10px 0 12px;font-size:36px;line-height:1.25;font-weight:800}
.ld-hero.small h1{font-size:27px;margin:0 0 6px}
.ld-hero p{margin:0 0 20px;color:#c4d8f2;font-size:16px;line-height:1.65}
.ld-hero.small p{margin:0;font-size:15px}
.ld-pill{display:inline-block;background:rgba(140,193,255,.18);color:#a9d0ff;border:1px solid rgba(140,193,255,.35);padding:4px 12px;border-radius:999px;font-size:13px;font-weight:600}
.ld-hero-art img{border-radius:48px;box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 8px rgba(255,255,255,.07);transform:rotate(-4deg)}
.ld-cta{display:flex;gap:12px;flex-wrap:wrap}
.ld-cta.c{justify-content:center;margin-top:22px}
.btn.lg{padding:13px 22px;font-size:16px;border-radius:12px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center}
.ld-hero .btn.o{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.4)}
.ld-note{margin-top:14px;color:#a9c4e6;font-size:13.5px} .ld-note a{color:#8cc1ff}
.ld-sec{padding:46px 0}.ld-sec.alt{background:var(--bg)}
.ld-sec h2{margin:0 0 22px;font-size:24px;color:var(--navy);text-align:center}
.ld-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ld-feat{border:1px solid var(--line);border-radius:16px;padding:20px;background:#fff;box-shadow:var(--sh)}
.ld-feat .ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,var(--sky-l),var(--sky-m));color:var(--brand);margin-bottom:12px}
.ld-feat .ic svg{width:24px;height:24px}
.ld-feat b{display:block;font-size:16px;color:var(--navy);margin-bottom:4px}.ld-feat p{margin:0;color:var(--mut);font-size:14px;line-height:1.55}
.ld-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ld-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px}
.ld-step .n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;margin-bottom:10px}
.ld-step b{display:block;color:var(--navy);margin-bottom:4px}.ld-step p{margin:0;color:var(--mut);font-size:14px;line-height:1.55}
.ld-step code{background:var(--sky-l);padding:1px 6px;border-radius:6px;font-size:12.5px;word-break:break-all}
.ld-box{margin:22px auto 0;max-width:760px;background:var(--sky-l);border:1px solid var(--sky-m);border-radius:14px;padding:16px 20px;text-align:center;color:var(--navy);line-height:1.7}
.ld-box.c{margin-top:26px}
.ld-who{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ld-card{border:1px solid var(--line);border-radius:16px;padding:20px;background:#fff}.ld-card.ok{border-color:#9bd9c0;background:linear-gradient(180deg,#fff,var(--ok-bg))}
.ld-card b{display:block;font-size:16px;color:var(--navy);margin-bottom:6px}.ld-card p{margin:0;color:var(--mut);font-size:14px;line-height:1.55}
.ld-tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.ld-tools input{flex:1;min-width:220px;padding:11px 14px;border:1px solid var(--line2);border-radius:11px}.ld-tools select{padding:11px 12px;border:1px solid var(--line2);border-radius:11px;background:#fff}
.ld-orgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.ld-org{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:20px 14px;border:1px solid var(--line);border-radius:16px;text-decoration:none;color:var(--tx);background:#fff;transition:transform .15s,box-shadow .15s,border-color .15s}
.ld-org:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--sky)}
.ld-org img{width:72px;height:72px;object-fit:contain;margin-bottom:6px}.ld-org b{color:var(--navy);font-size:15px;line-height:1.35}.ld-org small{color:var(--mut);font-size:12px}
.ld-foot{background:#1b2a63;color:#c9d6f2;font-size:14px;line-height:1.6;padding:44px 20px 22px}
.ld-foot-in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.ld-fbrand img{display:block;margin-bottom:14px;height:auto}.ld-fbrand p{margin:0 0 10px;color:#c9d6f2;max-width:360px}.ld-fbrand small{color:#93a6d6}
.ld-fcol h4{margin:0 0 12px;color:#fff;font-size:15px}.ld-fcol a{display:block;color:#c9d6f2;text-decoration:none;padding:4px 0}.ld-fcol a:hover{color:#fff;text-decoration:underline}
.ld-foot-bot{max-width:1100px;margin:30px auto 0;padding-top:18px;border-top:1px solid #ffffff26;display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;font-size:12.5px;color:#93a6d6}
.ld-foot-bot a{color:#c9d6f2}
@media (max-width:860px){.ld-foot-in{grid-template-columns:1fr 1fr}.ld-fbrand{grid-column:1/-1}}
@media (max-width:480px){.ld-foot-in{grid-template-columns:1fr}}
@media (max-width:860px){
  .ld-hero{padding:34px 0 40px}.ld-hero h1{font-size:27px}.ld-hero-art{display:none}
  .ld-feats,.ld-steps,.ld-who{grid-template-columns:1fr}
  .ld-brand span{display:none}.ld-bar nav a{padding:8px 6px;white-space:nowrap;font-size:13px}.ld-login{white-space:nowrap}
}

.ld-foot-top{display:flex;gap:12px;align-items:center;max-width:760px}
.ld-foot a{color:#9fd0ff;text-decoration:none}.ld-foot a:hover{text-decoration:underline}
.ld-foot-links{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;max-width:820px;padding-top:12px;border-top:1px solid #ffffff1f;width:100%}
.ld-foot-links span{color:#8faacf;font-size:12.5px;width:100%;text-align:center}
.ld-foot-note{max-width:760px;text-align:center;font-size:12px}
.gate-by a{color:inherit;text-decoration:underline}