:root{
  --red:#E3161B; --red-d:#B80F13; --red-t:#FDECEC;
  --ink:#141414; --ink2:#3A3A3A; --muted:#6F6B66; --line:#E7E3DE; --bg:#F6F4F1; --card:#FFFFFF;
  --yellow:#F5C518; --yellow-t:#FFF6D6;
  --green:#127A3E; --green-t:#E3F4EA; --blue:#1F5FAE; --blue-t:#E6EFFA; --teal:#0E7470; --teal-t:#DFF3F1;
  --amber:#9A5B00; --amber-t:#FFF1D6;
  --r:12px; --r-sm:8px;
  --side:236px;
  font-family:'IBM Plex Sans Thai',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.55}
h1,h2,h3,h4{font-family:'Kanit','IBM Plex Sans Thai',sans-serif;font-weight:600;margin:0;line-height:1.3}
h1{font-size:24px} h3{font-size:17px;margin-bottom:12px} h4{font-size:15px;margin:18px 0 10px}
a{color:inherit}
p{margin:0 0 8px}
.muted{color:var(--muted)} .small{font-size:13px}
.ic{width:20px;height:20px;flex:none} .ic.sm{width:14px;height:14px}

/* boot / login */
.boot{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:12px;color:var(--muted)}
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--ink)}
.login-card{width:100%;max-width:380px;background:var(--card);border-radius:18px;padding:28px 24px;text-align:center;display:grid;gap:14px}
.login-card img{margin:0 auto}
.login-card h1{font-size:26px}
.login-card .fld{text-align:left}

/* layout */
.layout{min-height:100vh}
.side{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--ink);color:#fff;display:flex;flex-direction:column;padding:18px 12px}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px 18px}
.brand img{border-radius:50%;background:#fff}
.brand b{font-family:'Kanit',sans-serif;font-size:18px;display:block;line-height:1.1}
.brand small{color:#bbb;font-size:12px}
.nav{display:grid;gap:4px}
.nav-a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;color:#d6d6d6;font-family:'Kanit',sans-serif;font-weight:500;background:none;border:0;font-size:15px;cursor:pointer;width:100%;text-align:left}
.nav-a:hover{background:#262626;color:#fff}
.nav-a.on{background:var(--red);color:#fff}
.side-foot{margin-top:auto;border-top:1px solid #2c2c2c;padding-top:12px;display:grid;gap:6px}
.who{padding:0 12px;font-weight:600;font-size:14px}
.who small{display:block;color:#999;font-weight:400}
.topbar,.tabbar{display:none}
.main{margin-left:var(--side);padding:28px 32px 48px;max-width:calc(var(--side) + 1240px)}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{display:flex;align-items:center;gap:8px}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}
.back{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff}

/* card */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px;min-width:0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.card-head h3{margin:0}
.count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--bg);font-size:13px;margin-left:4px}
.accent-card{border:2px solid var(--red)}
.alert-card{border-color:#F3C2C3;background:#FFF9F9}
.alert-card h3{display:flex;align-items:center;gap:8px;color:var(--red-d)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
.grid2>.card{margin-bottom:0}
.grid2:has(>.card){gap:16px;margin-bottom:16px}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.kpi small{color:var(--muted);display:block;font-size:13px}
.kpi b{font-family:'Kanit',sans-serif;font-size:28px;font-weight:600;display:block;line-height:1.25}
.kpi span{color:var(--muted);font-size:12px}
.kpi.warn{border-color:var(--red);background:var(--red-t)} .kpi.warn b{color:var(--red-d)}
.kpi.accent{border-color:var(--yellow);background:var(--yellow-t)}
.stats3{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:8px}
.stats3>div{background:var(--bg);border-radius:var(--r-sm);padding:12px 14px}
.stats3 small{color:var(--muted);display:block}
.stats3 b{font-family:'Kanit',sans-serif;font-size:22px;font-weight:600}

/* period */
.period{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.segs{display:inline-flex;background:var(--bg);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.seg{border:0;background:none;padding:6px 12px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink2);min-height:32px}
.seg.on{background:var(--ink);color:#fff}
.range{display:flex;gap:6px;align-items:center}
.range input{padding:6px 8px}

/* badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;vertical-align:middle}
.t-amber{background:var(--amber-t);color:var(--amber)} .t-blue{background:var(--blue-t);color:var(--blue)}
.t-gray{background:#EEE;color:#555} .t-red{background:var(--red-t);color:var(--red-d)}
.t-green{background:var(--green-t);color:var(--green)} .t-teal{background:var(--teal-t);color:var(--teal)}
.t-dark{background:var(--ink);color:#fff} .t-late{background:var(--red);color:#fff} .t-soon{background:var(--yellow);color:var(--ink)}

/* job list */
.jlist{display:grid;gap:8px}
.jrow{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;background:#fff;transition:border-color .15s}
.jrow:hover{border-color:var(--ink)}
.jr-main{min-width:0}
.jr-code{font-weight:700;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.jr-label{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jr-meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.jr-side{text-align:right;display:grid;align-content:start;flex:none}
.jr-side small{color:var(--muted)}
.empty{text-align:center;padding:32px 16px;color:var(--muted);display:grid;gap:12px;justify-items:center}
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.filters .fld{margin:0;min-width:180px}
.filters .grow{flex:1}

/* forms */
.form{display:grid;gap:4px}
.fld{display:grid;gap:6px;margin-bottom:12px;min-width:0}
.fld>span{font-weight:600;font-size:14px}
.fld.inline{grid-template-columns:auto 1fr;align-items:center;margin:12px 0 0}
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid #CFCAC4;border-radius:var(--r-sm);padding:9px 11px;width:100%;min-height:42px}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
input:disabled,select:disabled{background:var(--bg);color:var(--muted)}
.err-text{color:var(--red-d)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;min-height:0}
.chip span{display:inline-block;padding:8px 14px;border:1px solid #CFCAC4;border-radius:22px;background:#fff;font-size:14px}
.chip input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.form-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:8px}
.drop{display:block;border:1.5px dashed #CFCAC4;border-radius:var(--r-sm);padding:18px;text-align:center;cursor:pointer;color:var(--ink2);background:var(--bg)}
.drop input{display:none}
.drop span{display:inline-flex;gap:8px;align-items:center}
.flist{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.fchip{display:flex;align-items:center;gap:6px;background:var(--bg);border-radius:20px;padding:4px 6px 4px 12px;font-size:13px}

/* items */
.item{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:8px}
.item-head{display:flex;justify-content:space-between;gap:12px}
.item-head small{display:block;color:var(--muted)}
.item-r{display:flex;align-items:center;gap:6px;flex:none}
.sizes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sizes span{display:inline-flex;gap:6px;align-items:baseline;background:var(--bg);border-radius:6px;padding:3px 9px;font-weight:600}
.sizes small{color:var(--muted);font-weight:500}
.item-add{background:var(--bg);border-radius:var(--r-sm);padding:16px;margin-top:12px}
.ia-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.item-add .segs{background:#fff}
.size-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.size-grid label{display:grid;gap:2px;text-align:center}
.size-grid small{font-weight:700}
.size-grid input{text-align:center;padding:8px 4px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;padding:9px 16px;min-height:42px;border-radius:var(--r-sm);border:1px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--bg)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-d)}
.btn.dark{background:var(--ink);color:#fff}
.btn.ghost{border-color:#CFCAC4}
.btn.danger{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.danger-ghost{border-color:#F0B5B6;color:var(--red-d)}
.btn.block{width:100%;margin-top:8px}
.btn.sm{min-height:34px;padding:5px 12px;font-size:14px}
.btn.lg{min-height:48px;padding:10px 28px;font-size:16px}
.btn.loading{opacity:.7;pointer-events:none}
.btn:focus-visible,.seg:focus-visible,.nav-a:focus-visible,.icon-btn:focus-visible,.jrow:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:none;color:inherit;cursor:pointer}
.icon-btn:hover{background:rgba(0,0,0,.06)}
.icon-btn.sm{width:28px;height:28px}
.spin{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* detail */
.job-head .jh-top{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.jh-label{font-size:18px;font-weight:600;margin-bottom:12px}
.detail{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.col-side{position:sticky;top:16px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 8px}
.dl dt{color:var(--muted)} .dl dd{margin:0;overflow-wrap:anywhere}
.dl.cols{grid-template-columns:repeat(3,auto 1fr)}
.prose{white-space:normal;background:var(--bg);border-radius:var(--r-sm);padding:12px 14px}
.big-money{font-family:'Kanit',sans-serif;font-size:32px;font-weight:600;margin-bottom:8px}
.fin{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.fin>div{background:var(--bg);border-radius:var(--r-sm);padding:10px}
.fin small{display:block;color:var(--muted);font-size:12px}
.fin b{font-family:'Kanit',sans-serif;font-size:17px}
.fin .hl{background:var(--red-t)} .fin .hl b{color:var(--red-d)}
.fin .ok{background:var(--green-t)} .fin .ok b{color:var(--green)}
.pay-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.pay-list li{display:flex;gap:8px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:6px;font-size:14px;flex-wrap:wrap}
.pay-list a{font-size:13px}
.bank{margin-top:10px;font-size:14px}
.bank summary{cursor:pointer;font-weight:600;padding:6px 0}
.checks{list-style:none;padding:0;margin:8px 0;display:grid;gap:4px}
.checks li{padding-left:26px;position:relative;color:var(--muted)}
.checks li::before{content:'';position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;border:2px solid #CFCAC4}
.checks li.done{color:var(--ink)}
.checks li.done::before{background:var(--green);border-color:var(--green)}
.alert{background:var(--red-t);color:var(--red-d);border-radius:var(--r-sm);padding:10px 12px}
.alert.info{background:var(--yellow-t);color:var(--ink)}
.alert.ok{background:var(--green-t);color:var(--green)}

.stepper{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.stepper li{display:grid;gap:6px;justify-items:center;text-align:center;position:relative}
.stepper li::after{content:'';position:absolute;top:16px;left:calc(50% + 20px);right:calc(-50% + 20px);height:2px;background:var(--line)}
.stepper li:last-child::after{display:none}
.stepper li.done::after{background:var(--red)}
.stepper .dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:2px solid #CFCAC4;background:#fff;font-weight:700;color:var(--muted)}
.stepper li.done .dot{background:var(--red);border-color:var(--red);color:#fff}
.stepper li.next .dot{border-color:var(--ink);color:var(--ink)}
.stepper b{font-size:13px;line-height:1.3}
.stepper small{display:block;color:var(--muted);font-size:11.5px}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:10px}
.gallery>p{grid-column:1/-1}
.tile{position:relative;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.tile a{display:grid;text-decoration:none}
.tile img,.ftype{width:100%;aspect-ratio:1;object-fit:cover;background:var(--bg)}
.ftype{display:grid;place-content:center;justify-items:center;gap:4px;color:var(--muted)}
.ftype .ic{width:30px;height:30px}
.tile span{font-size:12px;padding:6px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-x{position:absolute;top:4px;right:4px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.uploader{display:flex;gap:8px;flex-wrap:wrap}
.uploader label{cursor:pointer}

.timeline{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.timeline>li{border-left:2px solid var(--line);padding-left:14px}
.timeline small{color:var(--muted)}
.timeline ul{margin:4px 0 0;padding-left:18px;font-size:14px;color:var(--ink2)}

.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:13px}
.r{text-align:right}

.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.fcard{margin:0} .fcard.off{opacity:.65}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.cred{background:var(--bg);padding:14px;border-radius:var(--r-sm);white-space:pre-wrap;font-family:inherit;font-size:15px;margin:0 0 8px}

/* modal / toast */
dialog{border:0;border-radius:16px;padding:22px;width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto}
dialog::backdrop{background:rgba(20,20,20,.55)}
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;display:grid;gap:8px;z-index:100;width:min(420px,calc(100vw - 32px))}
.toast{background:var(--ink);color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.2);transition:opacity .3s}
.toast.ok{background:var(--green)} .toast.err{background:var(--red-d)}
.toast.out{opacity:0}

/* ---------- mobile ---------- */
@media (max-width:1100px){
  .detail{grid-template-columns:1fr}
  .col-side{position:static;order:-1}
  .dl.cols{grid-template-columns:auto 1fr}
}
@media (max-width:900px){
  .side{display:none}
  .topbar{display:flex;position:sticky;top:0;z-index:20;align-items:center;justify-content:space-between;background:var(--ink);color:#fff;padding:8px 8px 8px 16px}
  .topbar .brand{padding:0}
  .main{margin-left:0;padding:16px 16px calc(88px + env(safe-area-inset-bottom))}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .tabbar .nav-a{flex-direction:column;gap:2px;justify-content:center;color:var(--muted);font-size:11.5px;padding:6px 2px;text-align:center;min-height:52px}
  .tabbar .nav-a.on{background:none;color:var(--red)}
  h1{font-size:20px}
  .grid2,.grid3{grid-template-columns:1fr}
  .card{padding:16px}
  .stepper{grid-template-columns:1fr;gap:0}
  .stepper li{grid-template-columns:32px 1fr;justify-items:start;text-align:left;align-items:center;gap:12px;padding-bottom:14px}
  .stepper li::after{top:34px;bottom:-2px;left:15px;right:auto;width:2px;height:auto}
  .fin b{font-size:15px}
  .filters .fld{min-width:0;flex:1 1 140px}
  .form-actions .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =================== รอบ 2 =================== */
.sec-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 10px}
.sec-title h2{font-size:17px}
.topbar .brand small{display:block;color:#bbb;font-size:11.5px;font-weight:400;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* KPI with icon */
.kpi-card .kpis{margin:0}
.kpi{display:flex;gap:12px;align-items:flex-start}
.kpi>div{min-width:0}
.kpi b{font-size:22px}
.kpi-ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--bg);color:var(--ink2)}
.kpi.warn .kpi-ic{background:#fff;color:var(--red-d)}
.kpi.accent .kpi-ic{background:#fff}

/* pipeline cards */
.pipe{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-bottom:16px}
.pc{--c:var(--ink2);--ct:#F1F0EE;text-align:left;font:inherit;color:var(--ink);background:linear-gradient(180deg,var(--ct),#fff 70%);border:1.5px solid color-mix(in srgb,var(--c) 35%,#fff);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:4px;cursor:pointer;min-height:150px;transition:transform .12s, box-shadow .12s}
.pc:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.pc.on{border-color:var(--c);box-shadow:0 0 0 2px var(--c) inset}
.pc-top{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:11.5px;color:var(--muted)}
.pc-urg{background:var(--red);color:#fff;border-radius:10px;padding:1px 7px;font-weight:600;white-space:nowrap}
.pc-ok{background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 7px;white-space:nowrap}
.pc-name{font-size:14px;line-height:1.3;min-height:36px}
.pc-num{font-family:'Kanit',sans-serif;font-size:30px;font-weight:600;color:var(--c);line-height:1.1}
.pc-num small{font-size:12px;color:var(--muted);font-family:'IBM Plex Sans Thai',sans-serif;font-weight:400}
.pc-bar{height:4px;border-radius:2px;background:#E8E5E1;overflow:hidden;margin-top:auto}
.pc-bar i{display:block;height:100%;background:var(--c)}
.pc-foot{font-size:11px;color:var(--muted)}
.pc.t-amber{--c:#B76E00;--ct:#FFF4DC} .pc.t-blue{--c:#1F5FAE;--ct:#E9F1FB} .pc.t-orange{--c:#D9580E;--ct:#FFEEE2}
.pc.t-yellow{--c:#A88400;--ct:#FFF9D9} .pc.t-red{--c:#D3141A;--ct:#FDECEC} .pc.t-green{--c:#127A3E;--ct:#E4F5EA} .pc.t-dark{--c:#141414;--ct:#EEEDEB}

/* job table */
.list-card .filters{align-items:center}
.search{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;border:1px solid #CFCAC4;border-radius:var(--r-sm);padding:0 10px;background:#fff}
.search input{border:0;outline:0;padding:9px 0;min-height:44px}
.search:focus-within{outline:2px solid var(--ink)}
.filters select{width:auto;min-width:180px}
.chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;min-height:40px}
.chk input{width:20px;height:20px;min-height:0;accent-color:var(--red)}
.jt{display:grid;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.jt-head,.jt-row{display:grid;grid-template-columns:84px minmax(150px,1.5fr) minmax(90px,.8fr) minmax(90px,1fr) 92px 90px 120px minmax(150px,1.2fr);gap:10px;align-items:center;padding:10px 14px}
.jt-row.shop,.jt:has(.jt-row.shop) .jt-head{grid-template-columns:80px minmax(140px,1.4fr) minmax(90px,.9fr) 80px minmax(90px,1fr) 88px 88px 118px minmax(150px,1.2fr)}
.jt-row>span{min-width:0}
.c-stage .badge{white-space:normal}
.jt-head{background:var(--ink);color:#fff;font-size:12.5px;font-weight:600}
.jt-row{border-top:1px solid var(--line);text-decoration:none;background:#fff;font-size:14px}
.jt-row:hover{background:#FAF9F7}
.c-code{display:grid;min-width:0}
.c-code small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-type{display:flex;flex-wrap:wrap;gap:4px}
.tag{background:var(--bg);border-radius:6px;padding:1px 7px;font-size:12px;white-space:nowrap}
.c-bal.hl{color:var(--red-d);font-weight:700}
.c-due{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.chip-due{font-size:11.5px;font-weight:600;border-radius:10px;padding:1px 8px;white-space:nowrap}
.t-calm{background:var(--blue-t);color:var(--blue)}
.c-stage{display:grid;gap:4px;justify-items:start}
.bar{width:100%;max-width:140px;height:5px;border-radius:3px;background:#E8E5E1;overflow:hidden}
.bar i{display:block;height:100%;background:var(--red)}
.m-only{display:none}
.alert-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:8px 0;border-top:1px solid #F6D3D4;text-decoration:none;font-size:14px}

/* วันรับสินค้า (hero) */
.due-hero{display:flex;align-items:center;gap:14px;border-radius:16px;padding:16px 18px;margin-bottom:16px;background:var(--ink);color:#fff}
.due-hero.t-soon{background:var(--yellow);color:var(--ink)}
.due-hero.t-late{background:var(--red);color:#fff}
.due-hero.t-calm{background:var(--ink);color:#fff}
.dh-ic{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.dh-ic .ic{width:26px;height:26px}
.due-hero small{display:block;font-size:13px;opacity:.85}
.due-hero b{font-family:'Kanit',sans-serif;font-size:26px;font-weight:600;line-height:1.2;display:block}
.dh-sub{display:block;font-size:12.5px;opacity:.85;margin-top:2px}
.dh-count{margin-left:auto;text-align:center;font-size:12.5px;line-height:1.2;background:rgba(255,255,255,.16);border-radius:12px;padding:8px 12px;flex:none}
.dh-count b{font-size:28px}

/* คำขอปรับราคา */
.price-req{border:2px solid var(--yellow);background:var(--yellow-t)}
.price-req h3{display:flex;gap:8px;align-items:center}
.pr-row{display:flex;gap:10px;align-items:baseline;font-family:'Kanit',sans-serif;font-size:22px;margin-bottom:8px}
.pr-row span:first-child{text-decoration:line-through;color:var(--muted);font-size:18px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* stepper (กดได้) */
.step-btn{all:unset;display:grid;justify-items:center;gap:6px;text-align:center;cursor:pointer;width:100%;border-radius:10px;padding:4px 2px}
span.step-btn{cursor:default}
button.step-btn:hover .dot{border-color:var(--ink)}
button.step-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.stepper li.now .dot{box-shadow:0 0 0 4px var(--red-t)}
.st-text{display:grid}

/* รายการสินค้า (มุมมองอ่าน) */
.iv{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:10px}
.iv-head{display:flex;align-items:center;gap:10px}
.iv-no{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.iv-total{margin-left:auto;font-weight:700;white-space:nowrap}
.iv-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px;margin-top:10px}
.iv-sizes div{background:var(--bg);border-radius:8px;text-align:center;padding:6px 4px;display:grid}
.iv-sizes small{color:var(--muted);font-weight:600;font-size:12px}
.iv-sizes b{font-size:17px}
.iv-nosize{margin:8px 0 0;color:var(--muted)}
.iv-grand{text-align:right;padding-top:4px}

/* ไฟล์แบบมีเลข */
.nfiles{display:grid;gap:8px;margin-bottom:6px}
.nf{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 8px 6px 6px;background:#fff}
.nf-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none}
.nf-thumb{position:relative;width:56px;height:56px;border-radius:8px;overflow:hidden;flex:none;background:var(--bg)}
.nf-thumb img,.nf-thumb .ftype{width:100%;height:100%;object-fit:cover}
.nf-thumb .ftype .ic{width:22px;height:22px}
.nf-no{position:absolute;left:3px;top:3px;min-width:20px;height:20px;border-radius:10px;background:var(--ink);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.nf-text{display:grid;min-width:0}
.nf-text small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nf-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.add-file{border-style:dashed;border-color:var(--ink2);min-height:48px;cursor:pointer}
.add-file.loading{opacity:.6;pointer-events:none}

/* ฟอร์มกลุ่มสินค้า */
.grp{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--bg)}
.grp-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.grp-total{margin-left:auto;font-weight:700}
.grp-row{display:flex;gap:12px}
.grp-row .grow{flex:1}
.grp-row .unit{width:110px}
.grp .size-grid{grid-template-columns:repeat(7,1fr);margin-top:8px}
.qty-only{max-width:220px;margin-top:8px}
.grand{font-family:'Kanit',sans-serif;font-size:17px;color:var(--red-d)}
.sticky-actions{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 30%);padding:16px 0 8px;z-index:5}

/* ปุ่มหลักติดขอบล่าง (มือถือ) */
.cta-bar{display:none}

@media (max-width:1280px){ .pipe{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:1100px){
  .jt-head{display:none}
  .jt{border:0;gap:10px;overflow:visible}
  .jt-row,.jt-row.shop{grid-template-columns:1fr auto;grid-template-areas:"code stage" "fac fac" "qty due" "type type" "pay bal";border:1px solid var(--line);border-radius:12px;padding:12px 14px;gap:6px 10px}
  .c-date{display:none}
  .c-code{grid-area:code} .c-fac{grid-area:fac;color:var(--muted);font-size:13px} .c-qty{grid-area:qty} .c-type{grid-area:type}
  .c-pay{grid-area:pay} .c-bal{grid-area:bal;text-align:right} .c-due{grid-area:due;align-items:flex-end;text-align:right} .c-stage{grid-area:stage;justify-items:end}
  .c-stage .bar{width:90px}
  .m-only{display:inline}
}
@media (max-width:900px){
  .pipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px 16px;padding:0 16px 4px;gap:10px}
  .pc{flex:0 0 46%;scroll-snap-align:start;min-height:140px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{padding:12px;gap:8px}
  .kpi-ic{width:32px;height:32px}
  .kpi b{font-size:18px}
  .kpi span{display:none}
  .grp .size-grid{grid-template-columns:repeat(4,1fr)}
  .grp-row{flex-direction:column;gap:0}
  .grp-row .unit{width:100%}
  .layout.has-cta .main{padding-bottom:calc(160px + env(safe-area-inset-bottom))}
  .cta-bar{display:block;position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:19;padding:10px 16px;background:linear-gradient(transparent,rgba(246,244,241,.96) 25%)}
  .cta-bar .btn{box-shadow:0 6px 18px rgba(227,22,27,.3);min-height:52px;font-size:16px}
  .due-hero{padding:14px}
  .due-hero b{font-size:21px}
  .dh-ic{display:none}
  .dh-count b{font-size:24px}
  .btn{min-height:46px}
  .btn.sm{min-height:40px}
  .icon-btn.sm{width:36px;height:36px}
  .stepper li{display:block}
  .stepper li::after{left:19px}
  .stepper .step-btn{grid-template-columns:32px 1fr;justify-items:start;text-align:left;align-items:center;gap:12px;padding:6px 4px}
  .stepper li{padding-bottom:6px}
  .sticky-actions{bottom:calc(64px + env(safe-area-inset-bottom))}
  .filters select{width:100%}
  .alert-row{grid-template-columns:1fr auto}
  .alert-row span:nth-child(2){display:none}
}
@media (max-width:900px){ #toasts{bottom:calc(140px + env(safe-area-inset-bottom))} }

/* =================== รอบ 3: แกลเลอรี + ดูภาพเต็มจอ =================== */
.fblock{display:grid;gap:10px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.gt{position:relative;margin:0;display:grid;gap:6px;min-width:0}
.gt-img{all:unset;cursor:zoom-in;position:relative;display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.gt-img:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.gt-img img{width:100%;height:100%;object-fit:cover;display:block}
.gt-img .nf-no{left:8px;top:8px;min-width:26px;height:26px;border-radius:13px;font-size:13px}
.gt figcaption{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gt-x{position:absolute;top:6px;right:6px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.gt-add{cursor:pointer;aspect-ratio:1;border:2px dashed #BDB7B0;border-radius:12px;background:#fff;display:grid;place-items:center;text-align:center;color:var(--ink2)}
.gt-add:hover{border-color:var(--ink);color:var(--ink)}
.gt-add:focus-within{outline:3px solid var(--red);outline-offset:2px}
.gt-add-in{display:grid;justify-items:center;gap:4px;padding:8px}
.gt-add-in .ic{width:30px;height:30px}
.gt-add-in small{color:var(--muted);font-size:12px}
.gt-add.loading{opacity:.7;pointer-events:none}
.fblock>.btn{justify-self:start}
.new-tag{color:var(--green)}

.no-scroll{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;background:#0b0b0b;display:grid;grid-template-columns:64px 1fr 64px;grid-template-rows:1fr auto;align-items:center}
.lb-stage{grid-column:1/-1;grid-row:1;display:grid;place-items:center;height:100%;padding:56px 12px 8px;touch-action:pinch-zoom}
.lb-stage img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;border-radius:6px}
.lb-x{position:absolute;top:10px;right:10px;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2}
.lb-nav{grid-row:1;z-index:2;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;justify-self:center}
.lb-prev{grid-column:1}
.lb-next{grid-column:3}
.lb-next .ic{transform:rotate(180deg)}
.lb-bar{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px calc(14px + env(safe-area-inset-bottom));color:#ddd;font-size:14px}
.lb-bar .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.lb-x:focus-visible,.lb-nav:focus-visible{outline:2px solid #fff}

@media (max-width:900px){
  .gal{grid-template-columns:1fr 1fr;gap:10px}
  .lb-nav{display:none}
  .lb-stage img{max-height:calc(100vh - 120px)}
  .lb-bar{font-size:13px}
}
.lb-nav[hidden]{display:none}