:root{ --ink:#111; --mut:#8a8a8a; --line:#111; --soft:#e7e7e7; --red:#d92c20; --orange:#f5820b; }
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Anuphan',system-ui,sans-serif;background:#fff;color:var(--ink);font-size:14.5px;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:'Prompt',sans-serif}
button{font-family:inherit;cursor:pointer;background:none;border:0}
input,select{font-family:inherit;font-size:14.5px;color:var(--ink)}
a{color:inherit}

.lbl{font-size:11px;letter-spacing:.22em;color:var(--mut);font-weight:600;text-transform:uppercase}
.chip{display:inline-block;padding:3px 10px;font-size:11.5px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.chip.solid{background:var(--ink);color:#fff}
.chip.line{border:1px solid var(--ink);color:var(--ink)}
.chip.gray{border:1px solid #c9c9c9;color:var(--mut)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;font-weight:700;font-size:14px;border:1px solid var(--ink);background:#fff;color:var(--ink)}
.btn.solid{background:var(--ink);color:#fff}
.navbadge{display:inline-block;min-width:18px;text-align:center;background:var(--ink);color:#fff;font-size:11px;font-weight:700;padding:1px 5px;margin-left:6px;vertical-align:2px}
.buyh{font-size:16px;font-weight:700;margin:10px 0;display:flex;align-items:center;gap:10px}
.incoming{font-size:11px;font-weight:700;color:#BF7A15;margin-top:2px;letter-spacing:.02em;white-space:nowrap}
.buypo{border:1px solid #ddd;margin-bottom:10px;background:#fff}
.buypo.done{opacity:.62}
.buypo-h{display:flex;align-items:center;gap:14px;padding:12px 16px;cursor:pointer;flex-wrap:wrap}
.buypo-h .caret{width:12px;color:var(--mut)}
.btn.sm{padding:6px 12px;font-size:12.5px;font-weight:600}
.btn.ghostline{border-color:#ccc;color:#555}
.btn:disabled{opacity:.35;cursor:default}
.circle{width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:17px;background:#fff;flex:none}
.circle.sm{width:34px;height:34px;font-size:14px}
.uline{width:100%;border:0;border-bottom:1px solid var(--ink);padding:9px 2px;background:transparent;outline:none}
.uline::placeholder{color:#b5b5b5}
select.uline{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23111'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;padding-right:20px}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- header ---------- */
header{display:flex;align-items:center;justify-content:space-between;padding:20px 40px;border-bottom:1px solid var(--ink)}
.brand{display:flex;align-items:center;gap:14px}
.brand .mark{background:var(--ink);color:#fff;font-family:'Prompt';font-weight:900;font-size:19px;padding:7px 12px;letter-spacing:.02em}
.brand .t1{font-family:'Prompt';font-weight:800;font-size:18px;letter-spacing:.04em}
.brand .t2{color:var(--mut);font-size:13px;margin-left:8px;font-weight:500}
nav{display:flex;align-items:center;gap:26px;font-weight:600;font-size:14.5px}
nav a{text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent}
nav a.on{border-bottom-color:var(--ink)}
nav a.mut{color:var(--mut);font-weight:500}

.wrap{max-width:1520px;margin:0 auto;padding:34px 40px 80px}

/* ---------- page head ---------- */
.phead h1{font-size:46px;font-weight:900;line-height:1.12;margin:10px 0 10px;letter-spacing:.01em}
.phead p{color:#555;max-width:640px;line-height:1.7}
.hrow{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}

/* ---------- toolbar ---------- */
.toolbar{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;margin:30px 0 0;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.toolbar .count{font-family:'Prompt';font-weight:700;font-size:16px;white-space:nowrap;padding-bottom:9px}
.toolbar .f{display:flex;flex-direction:column;gap:4px}
.toolbar .f .lbl{font-size:10px}
.toolbar input[type=text]{min-width:250px}
.toolbar select{min-width:150px;max-width:210px}
.toolbar .grow{flex:1}
#qclear{position:absolute;right:0;bottom:5px;border:none;background:none;font-size:13px;line-height:1;cursor:pointer;color:var(--mut);padding:5px 6px;display:none}
#qclear:hover{color:var(--ink)}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse}
.tablewrap{overflow-x:auto}
.tablewrap table{min-width:980px}
/* sticky: แถบค้นหา+filter และหัวคอลัมน์ค้างตอน scroll (หน้าสินค้า) */
.stickybar{position:sticky;top:0;background:#fff;z-index:30}
.stickyhead{overflow-x:clip} /* clip ไม่สร้าง scroll container — sticky ใน thead ถึงทำงาน */
.stickyhead thead th{position:sticky;top:var(--sticktop,96px);background:#fff;z-index:20;box-shadow:0 1px 0 var(--ink)} /* border-collapse ทำเส้นใต้หายตอนเกาะ ใช้ shadow แทน */
th{font-family:'Anuphan';font-size:10.5px;letter-spacing:.18em;color:var(--mut);font-weight:600;text-transform:uppercase;text-align:left;padding:14px 12px 10px;border-bottom:1px solid var(--ink);white-space:nowrap}
th.num{text-align:right}
td{padding:13px 12px;border-bottom:1px solid var(--soft);vertical-align:middle}
tbody tr{cursor:pointer}
tbody tr:hover{background:#f7f7f7}
.thumb{width:46px;height:46px;object-fit:cover;border:1px solid #ddd;display:block;background:#fafafa}
.thumb.blank{background:#f2f2f2}
.pname{font-family:'Prompt';font-weight:700;font-size:15px;line-height:1.35;max-width:330px}
.psku{color:var(--mut);font-size:12px;margin-top:2px;letter-spacing:.04em}
.cat{font-size:13px}.cat .sub{color:var(--mut);font-size:12px}
.stk{font-family:'Prompt';font-weight:700;font-size:15px}
.onl{display:inline-block;background:var(--ink);color:#fff;font-family:'Prompt';font-weight:800;font-size:8.5px;letter-spacing:.1em;line-height:1;padding:3px 5px;margin:1px 3px 1px 0;vertical-align:middle}
.subav{font-family:'Anuphan';font-size:10.5px;font-weight:600;color:var(--mut);margin-top:2px;white-space:nowrap}
.subav.neg{color:var(--red)}
.stk.neg{color:var(--red)}
.whcmp{font-family:'Anuphan';font-size:12.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.whcmp.grey{color:var(--mut)}
.whcmp.green{color:#1a8a3a}
.whcmp.red{color:var(--red);font-weight:800}
.whalert{border:1px solid var(--red);color:var(--red);background:#fff;font-family:'Anuphan';font-weight:700;font-size:12px;padding:7px 13px;cursor:pointer;white-space:nowrap;letter-spacing:.04em}
.whalert:hover{background:var(--red);color:#fff}
.whm-sub{color:var(--mut);font-size:13px;margin:0 0 6px}
#bundlemodal,#accessmodal,#logmodal,#fzmodal,#histmodal,#countmodal{position:fixed;inset:0;background:rgba(15,15,15,.5);display:none;align-items:flex-start;justify-content:center;z-index:50;overflow:auto;padding:36px 18px}
#bundlemodal .box,#accessmodal .box,#logmodal .box,#fzmodal .box,#histmodal .box,#countmodal .box{background:#fff;border:1px solid var(--ink);width:640px;max-width:100%;padding:0;box-shadow:0 20px 60px rgba(0,0,0,.35)}
#histmodal .tablewrap table{min-width:0}
#fzmodal .tablewrap table{min-width:0}#fzmodal .pname{white-space:normal;word-break:break-word}
#countmodal .tablewrap table{min-width:0}
#cnt1list tr,#cnt2list tr{cursor:pointer}
.applog{text-align:center;padding:26px 0 44px}
.applog a{color:var(--mut);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px dotted var(--mut)}
.applog a:hover{color:var(--ink);border-bottom-color:var(--ink)}
#loglist td{vertical-align:top}#loglist .psku{white-space:normal}
#acclist td{vertical-align:middle}.accrole{border:1px solid #c9c9c9;padding:4px 6px;font-family:'Prompt';font-size:12px}.accdel{cursor:pointer;color:var(--mut);font-size:16px}.accdel:hover{color:var(--red)}
#bundlemodal .tablewrap table{min-width:0}
.brow{display:flex;gap:14px;margin-bottom:14px}
.bcompbar{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--soft);padding-top:12px;margin-top:4px}
.bavail{font-family:'Prompt';font-weight:700;font-size:15px}
.baddwrap{position:relative;margin-top:10px}
.bresults{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--ink);max-height:230px;overflow:auto;z-index:5;display:none;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.bresults .ritem{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--soft)}
.bresults .ritem:hover{background:#faf7f2}.bresults .ritem .s{color:var(--mut);font-size:12px}
.bmfoot{display:flex;gap:10px;align-items:center;margin-top:18px}
.btn.danger{border:1px solid var(--red);color:var(--red)}
.btn.danger:hover{background:var(--red);color:#fff}
.bqty{width:72px;text-align:right;font-variant-numeric:tabular-nums;border:1px solid #c9c9c9;padding:5px 7px;font-family:'Prompt';font-weight:600}
.brm{cursor:pointer;color:var(--mut);font-size:18px;line-height:1}.brm:hover{color:var(--red)}
#b_complist td{vertical-align:middle}
.whtrig{cursor:pointer;border-bottom:1px dashed transparent}
.whtrig:hover{border-bottom-color:var(--mut)}
#whpop{position:fixed;z-index:60;display:none;width:280px;max-height:62vh;overflow:auto;background:#fff;border:1px solid var(--ink);box-shadow:0 16px 44px rgba(0,0,0,.28);font-family:'Anuphan',sans-serif}
#whpop .whp-h{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:#fff;padding:8px 12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;position:sticky;top:0}
#whpop .whp-x{cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
#whpop .whp-sku{font-family:'Prompt';font-weight:700;font-size:13px;padding:8px 12px 2px;word-break:break-all}
#whpop .whp-total{padding:0 12px 8px;font-size:12px;color:var(--mut);border-bottom:1px solid var(--soft)}
#whpop .whp-total b{color:var(--ink);font-size:13px}
#whpop .whp-list{padding:4px 0}
#whpop .whp-wh{padding:6px 12px;border-bottom:1px solid var(--soft)}
#whpop .whp-wh:last-child{border-bottom:0}
#whpop .whp-wh-h{display:flex;justify-content:space-between;gap:8px;font-family:'Prompt';font-weight:600;font-size:13px}
#whpop .whp-hub{font-size:9px;background:var(--ink);color:#fff;padding:1px 5px;vertical-align:middle;margin-left:4px;letter-spacing:.05em}
#whpop .whp-bin{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--mut);padding:1px 0 1px 10px}
#whpop .whp-bin b{color:#555;font-weight:600}
#whpop .whp-load,#whpop .whp-empty{padding:14px 12px;color:var(--mut);font-size:12px}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink)}
th .arr{color:var(--ink);font-size:11px}
tfoot td{border-top:2px solid var(--ink);border-bottom:0;padding:15px 12px;font-size:13px;background:#fafafa}
tfoot b{font-family:'Prompt';font-weight:700;color:var(--ink)}
.rowchk,#checkall{width:16px;height:16px;cursor:pointer;accent-color:var(--ink)}
.rownum{color:var(--mut);font-size:12px;font-variant-numeric:tabular-nums}
.bulkbar{display:none;align-items:center;gap:16px;background:var(--ink);color:#fff;padding:12px 20px}
.bulkbar.on{display:flex}
.bulkbar .n{font-family:'Prompt';font-weight:700}
.bulkbar select{background:#fff;color:var(--ink);padding:8px 10px;border:0;font-size:13.5px;max-width:280px}
.bulkbar .sp{margin-left:auto;display:flex;gap:10px}
.bulkbar .wbtn{border:1px solid #fff;color:#fff;padding:8px 14px;font-weight:700;font-size:13px}
.bulkbar .wbtn.solid{background:#fff;color:var(--ink)}
.pager{display:flex;align-items:center;gap:14px;justify-content:flex-end;padding:18px 2px}
.pager .info{color:var(--mut);font-size:13px;margin-right:auto}
.sq{width:38px;height:38px;border:1px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:16px;background:#fff}
.sq:disabled{border-color:#ccc;color:#ccc}

/* ---------- categories ---------- */
.catgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--ink);margin-top:30px}
.cpanel{min-height:420px}
.cpanel:not(:last-child){border-right:1px solid var(--ink)}
.prodrow{display:flex;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--soft);cursor:pointer}
.prodrow:hover{background:#f7f7f7}
.prodrow .pi{width:38px;height:38px;object-fit:cover;border:1px solid #ddd;background:#fafafa;flex:none}
.prodrow .pn{font-family:'Prompt';font-weight:600;font-size:13.5px;line-height:1.3}
.prodrow .ps{color:var(--mut);font-size:11.5px}
.prodrow .pr{margin-left:auto;text-align:right;flex:none}
.prodrow .pr .b{font-family:'Prompt';font-weight:700;font-size:13.5px}
.prodrow .pr .s{color:var(--mut);font-size:11.5px;white-space:nowrap}
.cpanel .ph{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--ink)}
.cpanel .ph .t{font-family:'Prompt';font-weight:800;font-size:16px}
.clist{max-height:64vh;overflow:auto}
.citem{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--soft);cursor:pointer;border-left:4px solid transparent}
.citem:hover{background:#f7f7f7}
.citem.on{border-left-color:var(--ink);background:#f4f4f4}
.citem .n{font-family:'Prompt';font-weight:700;font-size:15.5px}
.citem .meta{color:var(--mut);font-size:12.5px;margin-top:3px}
.cact{display:flex;gap:8px;align-items:center;flex:none}
.grip{color:#c4c4c4;font-size:15px;cursor:grab;flex:none;user-select:none;letter-spacing:1px}
.citem[draggable=true]{cursor:grab}
.citem.dragging{opacity:.35}
.cpanel.dropok{outline:2px dashed var(--ink);outline-offset:-7px;background:#fafafa}
.citem.dropinto{outline:2px dashed var(--ink);outline-offset:-4px;background:#f0f0f0}
.dots{display:inline-flex;gap:5px;align-items:center;flex:none;padding:2px 0}
.dot{width:12px;height:12px;border-radius:50%;border:1.5px solid #cfcfcf;cursor:pointer;transition:.12s;flex:none}
.dot:hover{border-color:var(--orange);transform:scale(1.15)}
.dot.on{background:var(--orange);border-color:var(--orange)}
.blabel{display:inline-block;margin-top:4px;font-size:11px;font-weight:700;color:var(--orange);letter-spacing:.02em}
.pfoot{padding:12px 20px;border-top:1px solid var(--soft);font-size:12.5px;color:var(--mut);font-weight:600;background:#fafafa;position:sticky;bottom:0}
.pfoot b{color:var(--ink);font-family:'Prompt'}
body.dnd .dnd-hint{display:block}
.dnd-hint{display:none;padding:11px 20px;border-bottom:1px solid var(--soft);color:var(--mut);font-size:12.5px;background:#fafafa}

/* ---------- modal ---------- */
#modal,#catmodal{position:fixed;inset:0;background:rgba(15,15,15,.5);display:none;align-items:flex-start;justify-content:center;z-index:50;overflow:auto;padding:36px 18px}
#modal .box,#catmodal .box{background:#fff;border:1px solid var(--ink);width:900px;max-width:100%;padding:0;box-shadow:0 20px 60px rgba(0,0,0,.35)}
/* กล่อง modal: อยู่กลางจอเมื่อเตี้ยกว่าจอ, ชิดขอบบน (เลื่อนดูได้) เมื่อสูงกว่าจอ — หัว modal ไม่หลุดจอ */
#modal .box,#catmodal .box,#countmodal .box,#bundlemodal .box,#accessmodal .box,#logmodal .box,#fzmodal .box,#histmodal .box{margin:auto 0}
#catmodal .box{width:480px}
.mh{display:flex;justify-content:space-between;align-items:center;padding:18px 26px;border-bottom:1px solid var(--ink)}
.mh h3{font-size:20px;font-weight:800}
.mbody{padding:26px}
.stockbar{display:flex;gap:44px;align-items:center;border:1px solid var(--ink);padding:16px 22px;margin-bottom:26px;flex-wrap:wrap}
.stockbar b{font-family:'Prompt';font-size:26px;font-weight:800;display:block;line-height:1.1}
.stockbar b.neg{color:var(--red)}
.stockbar .u{font-size:12px;color:var(--mut)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px}
.f label{display:block;margin-bottom:5px}
.sect{margin-top:30px;border-top:1px solid var(--ink);padding-top:16px}
.rowline{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--soft);font-size:13.5px}
.rowline:last-child{border-bottom:0}
.mfoot{display:flex;justify-content:flex-end;gap:12px;padding:20px 26px;border-top:1px solid var(--ink)}
.imgprev{width:104px;height:104px;object-fit:cover;border:1px solid var(--ink);background:#fafafa;flex:none}

/* ---------- login ---------- */
#login{min-height:100vh;display:none;flex-direction:column}
#login .mid{flex:1;display:flex;align-items:center;justify-content:center}
#login .card{width:420px;max-width:90vw}
#login h1{font-size:52px;font-weight:900;margin:12px 0 34px}
#login .go{display:flex;align-items:center;gap:14px;margin-top:34px;font-family:'Prompt';font-weight:700;font-size:17px;cursor:pointer}
#login .err{color:var(--red);margin-top:16px;min-height:22px;font-weight:600}
#login .foot{color:var(--mut);font-size:12.5px;margin-top:30px;line-height:1.7}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 26px;font-size:14px;font-weight:600;display:none;z-index:100}
@media(max-width:1000px){
  header{padding:16px 18px}.wrap{padding:24px 18px 60px}
  .phead h1{font-size:34px}.catgrid{grid-template-columns:1fr}
  .cpanel:not(:last-child){border-right:0;border-bottom:1px solid var(--ink)}
  .grid2{grid-template-columns:1fr}
}