/* ===== ธีม: โทนเขียวน้ำทะเลอ่อน สบายตา เปลี่ยนสีหลักได้ที่ "ตั้งค่าระบบ" (--teal = สีหลักของระบบ) ===== */
[hidden]{display:none!important}
:root{--teal:#218c86;--amber:#f2b134;--coral:#d9534f;--blue:#3b82c4;--green:#2e9d6a;
 --bg:#f0f5f4;--card:#fff;--soft:#f6f9f8;--text:#1b2b2a;--muted:#667a79;--line:#e0e8e7;--shadow:0 1px 2px rgba(16,48,44,.05),0 6px 20px rgba(16,48,44,.06);
 --side:color-mix(in srgb,var(--teal) 32%,#08181a);--side-text:#c4dcd8;--side-active:#f6c453;--r:14px;--tint:color-mix(in srgb,var(--teal) 12%,transparent)}
:root[data-accent=blue]{--teal:#3a72c4}
:root[data-accent=violet]{--teal:#7559c4}
:root[data-accent=green]{--teal:#35935a}
:root[data-accent=rose]{--teal:#c9507a}
:root[data-accent=amber]{--teal:#b87a12}
:root[data-accent=slate]{--teal:#4d6577}
:root[data-theme=dark]{--bg:#0d1819;--card:#142324;--soft:#101d1e;--text:#e5f0ee;--muted:#8da5a2;--line:#243b3c;--shadow:0 1px 2px rgba(0,0,0,.3);--side:color-mix(in srgb,var(--teal) 22%,#050d0e)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0d1819;--card:#142324;--soft:#101d1e;--text:#e5f0ee;--muted:#8da5a2;--line:#243b3c;--shadow:0 1px 2px rgba(0,0,0,.3);--side:color-mix(in srgb,var(--teal) 22%,#050d0e)}}
:root[data-theme=dark] .paper,:root[data-theme=dark] .sheet{color-scheme:light}
/* เบราว์เซอร์รุ่นเก่าที่ไม่รองรับ color-mix: ใช้สีคงที่แทน เพื่อให้เมนูซ้ายและสีอ่อนยังแสดงถูกตามสีธีมที่เลือก */
@supports not (color:color-mix(in srgb,red,blue)){
 :root{--side:#16393a;--tint:rgba(33,140,134,.13)}
 :root[data-accent=blue]{--side:#1a2f4f;--tint:rgba(58,114,196,.13)}
 :root[data-accent=violet]{--side:#2b2250;--tint:rgba(117,89,196,.13)}
 :root[data-accent=green]{--side:#173a26;--tint:rgba(53,147,90,.13)}
 :root[data-accent=rose]{--side:#4a2030;--tint:rgba(201,80,122,.13)}
 :root[data-accent=amber]{--side:#463110;--tint:rgba(184,122,18,.13)}
 :root[data-accent=slate]{--side:#25323c;--tint:rgba(77,101,119,.13)}
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Prompt',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.55}
a{color:var(--teal)}
.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}
/* ----- โครงหน้า ----- */
.app{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
aside{background:var(--side);color:var(--side-text);padding:20px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;padding:2px 10px 18px;color:#fff;font-weight:600;font-size:17px;line-height:1.25}
.brand i{width:34px;height:34px;border-radius:10px;background:var(--amber);display:grid;place-items:center;color:#1a2a28;font-style:normal;font-weight:700;flex:none}
nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:inherit;text-decoration:none;transition:background .15s}
nav a:hover{background:rgba(255,255,255,.08)}
nav a.on{background:rgba(255,255,255,.13);color:var(--side-active);font-weight:500}
nav svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
nav small{display:block;margin:16px 12px 4px;font-size:12px;color:#86aaa4}
.me{margin-top:auto;display:flex;gap:10px;align-items:center;padding:12px 8px 4px;border-top:1px solid rgba(255,255,255,.12)}
.me b{display:block;color:#fff;font-weight:500;font-size:14px}.me span{font-size:12px}
.av{width:36px;height:36px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:600;flex:none}
.me button{margin-left:auto;padding:4px 10px;font-size:12px;background:transparent;color:inherit;border-color:rgba(255,255,255,.28);min-height:0}
main{padding:26px 32px 44px;min-width:0}
header.top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
h1{font-size:24px;font-weight:600;line-height:1.3}
header p,.sub,.muted{color:var(--muted);font-size:14px}
.tools,.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bar{margin-bottom:14px}
/* ----- ปุ่ม + ช่องกรอก ----- */
button,a.btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--text);padding:8px 14px;border-radius:11px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;transition:background .15s,border-color .15s,transform .05s}
button:hover,a.btn:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line));background:var(--tint)}
button:active{transform:translateY(1px)}
button.p{background:var(--teal);border-color:var(--teal);color:#fff}
button.p:hover{background:color-mix(in srgb,var(--teal) 88%,#000);border-color:transparent}
button.danger{color:var(--coral);border-color:color-mix(in srgb,var(--coral) 40%,var(--line))}
button.danger:hover{background:color-mix(in srgb,var(--coral) 12%,transparent)}
button.dg{background:var(--coral);border-color:var(--coral);color:#fff}
button:disabled{opacity:.55;cursor:wait}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
input,select,textarea{font:inherit;color:var(--text);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:9px 11px;width:100%;min-height:40px;transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--tint)}
input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--coral);box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 15%,transparent)}
input.s{background:var(--card);width:280px;max-width:100%}
input[readonly]{opacity:.75;background:color-mix(in srgb,var(--soft) 70%,var(--line))}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:var(--teal)}
.ferr{color:var(--coral);font-size:12px;line-height:1.3}
label{display:grid;gap:5px;font-size:13px;color:var(--muted);align-content:start}
label.wide{grid-column:1/-1}
.lb{font-size:13px;color:var(--muted);display:block;margin-bottom:4px}
/* ----- การ์ด ----- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
main>.card+.card,main>.help+.card{margin-top:16px}
.card h2{font-size:16px;font-weight:600;margin-bottom:2px}
.card .sub{margin-bottom:14px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.kpi{position:relative;padding:16px 18px}
.kpi span{color:var(--muted);font-size:13px;display:block}
.kpi strong{display:block;font-size:24px;font-weight:600;margin-top:2px;line-height:1.3}
.kpi small{color:var(--muted);font-size:12px}
.kpi .ki{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:10px;background:var(--tint);color:var(--teal);display:grid;place-items:center}
.kpi.hero{background:var(--teal);border-color:var(--teal);color:#fff}
.kpi.hero span,.kpi.hero small{color:rgba(255,255,255,.82)}
.kpi.hero .ki{background:rgba(255,255,255,.2);color:#fff}
.kpi.bad strong{color:var(--coral)}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:14px}
.grid.even{grid-template-columns:1fr 1fr}
.chart{position:relative;height:280px}
.cardhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cardhead .sub{margin:0}
.seg{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}
.seg button{border:0;background:none;padding:5px 14px;border-radius:9px;min-height:34px}
.seg button.on{background:var(--card);box-shadow:var(--shadow);color:var(--teal);font-weight:500}
.seg select{border:0;background:transparent;min-height:34px;padding:4px 8px;width:auto}
/* ----- ตาราง ----- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--muted);font-weight:500;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--soft)}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover td{background:color-mix(in srgb,var(--teal) 4%,transparent)}
tr:last-child td{border:0}
.num{text-align:right}th:has(+ th.num),td.num{text-align:right}
.acts{white-space:nowrap;text-align:right}
.acts button,.acts a.btn{padding:3px 10px;font-size:13px;margin-left:5px;min-height:34px}
.empty{text-align:center;color:var(--muted);padding:34px 10px}
.scroll{overflow-x:auto}
.tag{padding:2px 11px;border-radius:99px;font-size:12px;white-space:nowrap;display:inline-block}
.t-ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.t-wait{background:rgba(242,177,52,.2);color:#a56d00}
.t-ship{background:rgba(59,130,196,.16);color:var(--blue)}
.t-bad{background:rgba(217,83,79,.15);color:var(--coral)}
img.th{width:44px;height:44px;object-fit:cover;border-radius:9px;display:block}
body.staff [data-d]{display:none}
/* ----- กล่องแจ้งเตือนในหน้า ----- */
.note{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:11px 14px;margin-bottom:14px;font-size:14px;border:1px solid;background:var(--card)}
.note .ic{margin-top:2px}
.note.warn,.warn{background:color-mix(in srgb,var(--coral) 10%,var(--card));border-color:color-mix(in srgb,var(--coral) 45%,transparent)}
.warn{border:1px solid color-mix(in srgb,var(--coral) 45%,transparent);border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:14px}
.note.amber{background:color-mix(in srgb,var(--amber) 14%,var(--card));border-color:color-mix(in srgb,var(--amber) 55%,transparent)}
.note.ok,.okbox{background:color-mix(in srgb,var(--green) 12%,var(--card));border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.okbox{border:1px solid color-mix(in srgb,var(--green) 45%,transparent);border-radius:12px;padding:10px 14px;margin:14px 0 10px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
pre.code{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:14px;overflow-x:auto;font-size:13px;line-height:1.7}
/* ----- คำอธิบายหน้า (หน้านี้ทำอะไรได้บ้าง) ----- */
details.help{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;box-shadow:var(--shadow)}
details.help summary{cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 16px;list-style:none;font-weight:500}
details.help summary::-webkit-details-marker{display:none}
details.help summary .hi{width:30px;height:30px;border-radius:9px;background:var(--tint);color:var(--teal);display:grid;place-items:center}
details.help summary .chev{margin-left:auto;color:var(--muted);transition:transform .2s}
details.help[open] summary .chev{transform:rotate(180deg)}
.help .hg{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;padding:2px 16px 16px}
.help .hit{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--soft);font-size:13.5px;line-height:1.45}
.help .hit .t{width:30px;height:30px;border-radius:9px;background:var(--tint);color:var(--teal);display:grid;place-items:center;flex:none}
.help .hit b{display:block;font-weight:500}.help .hit span{color:var(--muted);font-size:13px}
/* ----- หน้าต่าง (dialog) พอดีจอ: มือถือขึ้นจากด้านล่าง ----- */
.modal{position:fixed;inset:0;background:rgba(8,20,22,.5);display:grid;place-items:center;padding:16px;z-index:40;backdrop-filter:blur(2px)}
.modal[hidden]{display:none}
.dlg{background:var(--card);border-radius:18px;width:min(740px,100%);max-height:min(92vh,92dvh);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.dlg.big{width:min(980px,100%)}
.dh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 22px;border-bottom:1px solid var(--line)}
.dh h2{font-size:18px;margin:0}
.dh .xx{border:0;background:none;padding:0;width:36px;min-height:36px;font-size:22px;line-height:1;color:var(--muted)}
.db{padding:18px 22px;overflow:auto;flex:1;min-height:0;overscroll-behavior:contain}
.act{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.dlg>.act,.dlg>form>.act{margin:0;padding:12px 22px;border-top:1px solid var(--line);background:var(--card)}
.dlg>form{display:flex;flex-direction:column;min-height:0;flex:1}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.fh{grid-column:1/-1;display:flex;gap:10px;align-items:center;padding-top:8px;margin-top:4px;border-top:1px dashed var(--line)}
.fh:first-child{border:0;margin:0;padding:0}
.fh .t{width:30px;height:30px;border-radius:9px;background:var(--tint);color:var(--teal);display:grid;place-items:center;flex:none}
.fh h3{font-size:15px;margin:0}.fh p{font-size:12.5px;color:var(--muted)}
.fg label[hidden]{display:none}
.vrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vrow select{width:auto;min-width:130px}.vrow input[type=number]{width:96px}
.vexp{color:var(--text);font-size:13.5px}
/* ----- แจ้งเตือนแบบเด้ง (สำเร็จ/ไม่สำเร็จ/เตือน/ข้อมูล) ----- */
.toasts{position:fixed;top:16px;right:16px;display:grid;gap:10px;z-index:80;width:min(390px,calc(100vw - 24px));pointer-events:none}
.tst{--k:var(--blue);pointer-events:auto;display:flex;gap:12px;align-items:flex-start;background:var(--card);color:var(--text);border:1px solid var(--line);border-left:5px solid var(--k);border-radius:13px;padding:12px 12px 12px 14px;box-shadow:0 12px 34px rgba(0,0,0,.2);animation:tin .25s ease-out}
.tst.ok{--k:#1f9d6a}.tst.err{--k:#d9534f}.tst.warn{--k:#d99a1b}.tst.info{--k:#3b82c4}
.tst .ti{width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--k) 16%,transparent);color:var(--k);display:grid;place-items:center;flex:none}
.tst .ti .ic{width:17px;height:17px;stroke-width:2.2}
.tst .tb{flex:1;min-width:0;font-size:14px}
.tst .tb b{display:block;font-weight:600}
.tst .tb span{color:var(--muted);word-break:break-word}
.tst button{border:0;background:none;min-height:0;padding:2px 6px;color:var(--muted);font-size:18px;line-height:1}
.tst.out{opacity:0;transform:translateX(24px);transition:.25s}
@keyframes tin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.cfm{width:min(420px,100%);padding:26px 24px 20px;text-align:center}
.cfm .ci{width:54px;height:54px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;background:color-mix(in srgb,var(--coral) 15%,transparent);color:var(--coral)}
.cfm .ci .ic{width:28px;height:28px}
.cfm h2{font-size:18px;margin-bottom:6px}.cfm p{color:var(--muted);font-size:14px}
.cfm .act{justify-content:center;margin-top:20px}
/* ----- เข้าสู่ระบบ ----- */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login form{width:min(390px,100%);display:grid;gap:14px;padding:26px 24px}
.login .brand{color:var(--text);padding:0}
#msg{color:var(--coral);font-size:14px;min-height:1.4em}
/* ----- สินค้า/รูป ----- */
.pv{width:72px;height:72px;object-fit:cover;border-radius:11px;border:1px solid var(--line)}
.imgbox{display:flex;gap:12px;align-items:center}
.imgbox input[type=file]{border:0;background:none;padding:0}
/* ----- รายการสินค้าในฟอร์ม: 1 สินค้า = 1 กล่อง ----- */
.items .ir{margin-bottom:10px;padding:10px 12px 12px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.items .ih{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px}
.items .ih b{font-weight:600;color:var(--text)}.items .ih .lt{margin-left:auto;color:var(--teal);font-weight:500}
.items .ih .x{padding:0;width:34px;min-height:34px;font-size:18px;line-height:1;color:var(--coral)}
.items .l1{display:grid;grid-template-columns:1fr 100px 130px;gap:8px;margin-bottom:8px}
.items .l2{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px}
.items label{font-size:12px}
.items .bar{margin:8px 0 0}
.items .il:empty{display:none}
body.nospec .l2,body.nospec .specs,body.nospec tr.sp,body.nospec .spec{display:none!important}
/* ----- กระดาษหน้างาน (job.html) ----- */
.paper{--card:#fff;--bg:#f2f5f4;--soft:#f6f9f8;--text:#1b2b2a;--muted:#5d6e6b;--line:#dde5e3;background:#fff;color:var(--text);border:1px solid var(--line);border-radius:10px;width:210mm;max-width:100%;min-height:297mm;padding:14mm;margin:0 auto 24px;box-shadow:var(--shadow)}
.paper input,.paper select,.paper textarea{background:var(--soft);color:var(--text)}
.paper h2{font-size:20px;margin-bottom:12px}.paper h3{font-size:16px;margin:0}
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.pg .w2{grid-column:span 2}.pg .w3{grid-column:1/-1}.pg .mb{align-self:end}
.paper>label.w3{margin-top:14px}
iframe.map{width:100%;height:220px;border:1px solid var(--line);border-radius:12px}
.sec{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.sh{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.sh .no{width:28px;height:28px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:600;flex:none}
.sh p{margin:2px 0 0;color:var(--muted);font-size:13px}
.sub-h{grid-column:1/-1;font-size:13.5px;font-weight:600;color:var(--text);padding-top:6px;border-top:1px dashed var(--line);display:flex;align-items:center;gap:7px}
.pg label[hidden]{display:none}
.docbox{border:1px dashed color-mix(in srgb,var(--teal) 40%,var(--line));border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--soft)}
.docbox>label.ck{display:flex;gap:9px;align-items:center;font-weight:500;color:var(--text);font-size:15px}
.docbox>label.ck input{width:18px;height:18px}.docbox .pg{margin-top:10px}.docbox .pg[hidden]{display:none}
.hint{color:var(--muted);font-size:13px;margin-top:6px}
.jt{font-size:13px}.jt input{padding:5px 6px;min-width:0;min-height:34px}.jt td{padding:4px}.jt th{padding:6px 4px;font-size:12px}
.jt tr.sp td{padding-top:0;border-bottom:1px solid var(--line)}
.jt td.empty{padding:26px 8px}
.specs{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:6px}
.disc{max-width:260px;margin-top:12px}
.sum{margin-left:auto;width:min(340px,100%);margin-top:12px}.sum div{display:flex;justify-content:space-between;padding:4px 0}
.sum .big{font-weight:600;font-size:17px;border-top:1px solid var(--line);padding-top:8px}
.profit-pos{color:var(--green)}.profit-neg{color:var(--coral)}
.alert{background:#fde8e4;border:1px solid #d9534f;color:#9b2c1a;border-radius:12px;padding:10px 14px;margin:10px 0;font-size:14px}
.alert[hidden]{display:none}
/* ----- ตัวเลือกสินค้า ----- */
.pick .res{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:12px;margin:10px 0}
.pick .res>div{display:flex;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.pick .res>div:hover{background:var(--tint)}.pick summary{cursor:pointer;margin:8px 0}
.pick .qa{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:6px}
.chk{display:inline-flex;gap:6px;align-items:center;font-size:14px;color:inherit}.chk[hidden]{display:none}
a.btn[hidden]{display:none}
/* ----- หน้าตั้งค่า / จัดการข้อมูล ----- */
.sw{display:flex;gap:10px;flex-wrap:wrap}
.sw label{position:relative;display:flex;grid-template:none;align-items:center;gap:8px;padding:7px 12px 7px 8px;border:1px solid var(--line);border-radius:99px;cursor:pointer;color:var(--text);font-size:13.5px}
.sw label:has(input:checked){border-color:var(--teal);background:var(--tint)}
.sw input{position:absolute;opacity:0;width:0}
.sw i{width:22px;height:22px;border-radius:50%;display:block}
.sw label:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.tg{display:flex;gap:10px;align-items:flex-start;color:var(--text);font-size:14px}
.tg input{width:20px;height:20px;margin-top:2px}.tg small{display:block;color:var(--muted);font-size:12.5px}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px}
.tabs button{white-space:nowrap}.tabs button[aria-selected=true]{background:var(--teal);border-color:var(--teal);color:#fff}
.tabs .n{font-size:12px;opacity:.8}
.kvl{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:6px 14px;font-size:14px}
.kvl b{color:var(--muted);font-weight:500;word-break:break-word}.kvl span{word-break:break-word}
/* ----- เอกสารพิมพ์: ขนาด ขอบ ฟอนต์ สี มาจาก "ตั้งค่าระบบ" ผ่านตัวแปร --pw --ph --pm --fs --pc --pf ----- */
body.doc{background:#e3e9e8;color:#000}
.bar.noprint{max-width:210mm;margin:16px auto}
.sheet{--pw:210mm;--ph:297mm;--pm:10mm;--fs:13px;--pc:#111111;--pf:'Prompt',system-ui,sans-serif;background:#fff;color:#000;font-family:var(--pf);width:var(--pw);min-height:var(--ph);max-width:100%;margin:0 auto 30px;padding:var(--pm);font-size:var(--fs);line-height:1.5;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.sheet small{color:#444}
.sheet .ph{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;border-bottom:2px solid var(--pc);padding-bottom:10px;margin-bottom:12px}
.sheet .ph .co{display:flex;gap:12px;align-items:center;min-width:0}
.sheet .ph .lg{max-width:60mm;object-fit:contain;display:block}
.sheet .pt .lg{margin:0 0 4px auto}.sheet .pt.L .lg{margin-left:0}
.sheet .ph h2{font-size:1.38em;line-height:1.3}.sheet .ph .ci div{font-size:.96em}
.sheet .pt{text-align:right}.sheet .pt.L{text-align:left}
.sheet h1{font-size:1.7em;line-height:1.25;color:var(--pc)}
.sheet .ph.ctr{flex-direction:column;align-items:center;text-align:center;gap:6px}.sheet .ph.ctr .pt{text-align:center}
.sheet .pm{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;margin-bottom:12px}
.sheet .bx{border:1px solid #888;border-radius:6px;padding:7px 11px}
.sheet .bx h4{font-size:1em;font-weight:700;color:var(--pc);border-bottom:1px solid #bbb;padding-bottom:3px;margin-bottom:5px}
.sheet .bx h5{font-size:.96em;font-weight:700;margin:6px 0 2px;padding-top:5px;border-top:1px dotted #bbb}
.sheet .kv{display:grid;grid-template-columns:max-content 1fr;gap:1px 10px;font-size:.96em}
.sheet .kv b{font-weight:700}.sheet .kv span{word-break:break-word}
.sheet .tw{overflow-x:auto}
.sheet table{width:100%;border-collapse:collapse}
.sheet table.it{font-size:.96em}.sheet table.it.c8{font-size:.88em}
.sheet table.it th,.sheet table.it td{padding:5px 7px;vertical-align:top;color:#000;background:none;border:0} /* ล้างเส้นพื้นฐานของตารางทั่วไปก่อน แล้วค่อยใส่เส้นตามรูปแบบที่เลือก */
.sheet table.it th{text-align:center;font-weight:700;white-space:nowrap}
.sheet table.it.h-shade th{background:color-mix(in srgb,var(--pc) 9%,#fff)}
.sheet table.it.h-solid th{background:var(--pc);color:#fff}
.sheet table.it td.num{text-align:right;white-space:nowrap}.sheet table.it td.ctr{text-align:center}
.sheet table.it tr.fill td{height:25px}.sheet table.it .w-no{width:12mm}
/* รูปแบบเส้นตาราง: เฉพาะแนวตั้ง (ค่าเริ่มต้น) / ตารางเต็ม / เฉพาะแนวนอน / ไม่มีเส้น */
.sheet table.l-vertical th,.sheet table.l-vertical td{border-left:1px solid #777;border-right:1px solid #777}
.sheet table.l-vertical thead th{border-top:1px solid #777;border-bottom:1px solid #777}
.sheet table.l-vertical tbody tr:last-child td{border-bottom:1px solid #777}
.sheet table.l-grid th,.sheet table.l-grid td{border:1px solid #777}
.sheet table.l-horizontal th,.sheet table.l-horizontal td{border-bottom:1px solid #bbb}
.sheet table.l-horizontal thead th{border-top:1px solid #777;border-bottom:1px solid #777}
.sheet table.l-none thead th{border-bottom:1px solid #777}
.sheet .pf{display:flex;justify-content:space-between;gap:18px;margin-top:12px}
.sheet .tt{width:46%}.sheet .tt td{border:0;border-bottom:1px solid #bbb;padding:4px 8px;background:none}
.sheet .bt{flex:1;font-weight:500}.sheet .bt p{font-weight:400;font-size:.96em;margin-top:4px}
.sheet tbody tr:hover td{background:none}.sheet .neg td{color:#b3261e}.sheet .alert{background:#fff;font-weight:500}
.sheet .ft{margin-top:12px;font-size:.92em;border-top:1px dashed #999;padding-top:6px;white-space:pre-line}
.sheet .sg{display:flex;justify-content:space-between;gap:20px;margin-top:auto;padding-top:56px;text-align:center}
.sheet .sg>div{flex:1;border-top:1px solid #000;margin:0 24px;padding-top:6px}
@page{size:A4;margin:10mm}
@media print{.noprint{display:none!important}body.doc{background:#fff}.sheet{margin:0;padding:0;box-shadow:none;width:auto;min-height:calc(var(--ph) - 2*var(--pm) - 2mm)}
 aside{display:none}.app{display:block}main{padding:0}.paper{box-shadow:none;border:0;min-height:0;width:auto;padding:0}.site .mapbtn,.site iframe,.site [data-delsite]{display:none!important}}
/* ----- กล่องเลือกที่เด้งใต้ช่องกรอก (ค้นหาลูกค้าเก่า / เลือกที่อยู่จากรหัสไปรษณีย์) ----- */
.has-pop{position:relative}
.pop{position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:50;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.2);max-height:280px;overflow:auto;color:var(--text)}
.pop-h{padding:8px 12px;font-size:12.5px;color:var(--muted);background:var(--soft);border-bottom:1px solid var(--line);position:sticky;top:0}
.pop-h.warn{color:var(--coral)}
.pop-i{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line);display:grid;gap:1px}
.pop-i:last-child{border:0}.pop-i b{font-weight:500;font-size:14px}.pop-i small{color:var(--muted);font-size:12.5px}
.pop-i:hover,.pop-i.on{background:var(--tint)}
/* ----- หลายหน้างาน ----- */
.site{border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;margin-bottom:10px;background:var(--soft)}
.site .ih{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px}.site .ih .sp-{flex:1}
.site .ih .x{padding:0 12px;min-height:34px}.site .ih .mapbtn{padding:3px 12px;min-height:34px;font-size:13px}
/* ----- ตั้งค่ารูปแบบใบพิมพ์ + ตัวอย่างสด ----- */
.pvgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:start}
.pvbox{position:sticky;top:12px}
.pvframe{background:#e3e9e8;border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative}
.pvframe .sheet{margin:0;transform-origin:top left;box-shadow:none;position:absolute;left:0;top:0;flex-shrink:0;max-width:none}
.pvbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
.pvbar select{width:auto}
.lgbox{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.lgbox img{max-height:48px;max-width:140px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:3px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 14px}
.cgrid input[type=color]{padding:2px;height:40px;cursor:pointer}
.subh{grid-column:1/-1;font-weight:600;font-size:14.5px;padding-top:6px;border-top:1px dashed var(--line);margin-top:4px}
/* ----- จอเล็ก (iPad / มือถือ) ----- */
@media(max-width:1100px){.pvgrid{grid-template-columns:1fr}.pvbox{position:static}.kpis{grid-template-columns:repeat(2,1fr)}.grid,.grid.even{grid-template-columns:1fr}.app{grid-template-columns:220px 1fr}main{padding:22px 20px 40px}}
@media(max-width:800px){
 body{font-size:15px}
 .app{grid-template-columns:1fr}
 aside{position:sticky;top:0;z-index:30;height:auto;flex-direction:row;overflow-x:auto;padding:8px 10px;align-items:center;gap:2px}
 .brand{padding:0 8px 0 4px}.brand span,nav small,.me{display:none}
 nav{display:flex;gap:2px}nav a{white-space:nowrap;padding:9px 12px}
 main{padding:16px 12px 30px}
 h1{font-size:21px}
 input,select,textarea{font-size:16px}
 .fg,.sgrid{grid-template-columns:1fr}
 .kpis{grid-template-columns:1fr 1fr;gap:10px}.kpi strong{font-size:20px}.kpi .ki{display:none}
 .pg{grid-template-columns:1fr}.pg .w2{grid-column:auto}
 .paper{padding:14px;min-height:0;border-radius:12px}
 .specs,.items .l2{grid-template-columns:1fr 1fr}.items .l1{grid-template-columns:1fr 90px 110px}
 .pick .qa{grid-template-columns:1fr 1fr}
 .modal{padding:0;place-items:end stretch}
 .dlg,.dlg.big{width:100%;max-height:94vh;max-height:94dvh;border-radius:20px 20px 0 0}
 .dh,.db,.dlg>.act,.dlg>form>.act{padding-left:16px;padding-right:16px}
 .toasts{top:10px;right:12px;left:12px;width:auto}
 .sheet{padding:14px;min-height:0}.sheet .pm{grid-template-columns:1fr}.sheet .ph{flex-direction:column}.sheet .pt{text-align:left}
 .sheet .pf{flex-direction:column}.sheet .tt{width:100%}.sheet .sg{padding-top:36px}
 .bar.noprint{margin:12px}
 /* ตารางรายการกลายเป็นการ์ด อ่านง่ายบนมือถือ */
 table.rt thead{display:none}
 table.rt,table.rt tbody,table.rt tr,table.rt td{display:block;width:100%}
 table.rt tr{border:1px solid var(--line);border-radius:12px;padding:6px 12px;margin-bottom:10px;background:var(--card)}
 table.rt td{display:flex;justify-content:space-between;gap:14px;border:0;padding:6px 0;text-align:right!important}
 table.rt td::before{content:attr(data-l);color:var(--muted);font-size:13px;text-align:left;flex:none}
 table.rt td.acts{justify-content:flex-end;flex-wrap:wrap;padding-top:10px;border-top:1px dashed var(--line);margin-top:4px}
 table.rt td.acts::before{display:none}
 table.rt td.empty{display:block;text-align:center!important}table.rt td.empty::before{display:none}
 table.rt tbody tr:hover td{background:none}
 /* ตารางรายการในหน้างาน */
 .jt thead{display:none}.jt,.jt tbody,.jt tr,.jt td{display:block;width:100%}
 .jt tr[data-i]:not(.sp){display:grid;grid-template-columns:1fr 1fr;gap:6px;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;padding:10px 10px 4px;margin-top:10px}
 .jt tr.sp{border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;padding:0 10px 10px}
 .jt tr[data-i]:not(.sp) td{padding:0;border:0}
 .jt tr[data-i]:not(.sp) td:first-child{display:none}
 .jt tr[data-i]:not(.sp) td:nth-child(2){grid-column:1/-1}
 .jt tr[data-i]:not(.sp) td[data-l]::before{content:attr(data-l);display:block;font-size:11.5px;color:var(--muted)}
 .jt tr[data-i]:not(.sp) td.num{text-align:left}
 .jt tr.sp td:first-child{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}