/* ==========================================================================
   หน้าบิลนำเข้า เว็บใหม่ (import-detail.html) โฉม A1 · 3 พ.ย. 2569 · ไฟล์ css ไฟล์เดียว
   รวมชิ้นของเว็บเก่าที่ขึ้นจริงชุดเดียวกับหน้าบิลนำเข้าเว็บเก่า: pt-hist-xl.css (.hxl .xl-*) + pt-order-detail-xl.css (.odx) + pt-ship-detail-xl.css (.shx)
   ตัววาด js/pt-import-detail-xl.js · แก้หน้าตาให้แก้ที่เว็บเก่าแล้วรวมไฟล์นี้ใหม่ จะได้เหมือนกันทั้งสองเว็บ
   ========================================================================== */

/* ---------- จาก pt-hist-xl.css (เว็บเก่า) ---------- */
/* ==========================================================================
   หน้าประวัติ 6 หน้าแบบตาราง Excel  (order / ship / reciever / recharge / transfer / helppay _history.php)
   เจ้าของผ่าน mockup 3 พ.ย. 2569 (_delivery/mockup_history_xl_20261103) · ตัววาด js/pt-hist-xl.js
   ชิ้นส่วนชุดเดียวกับต้นแบบเว็บใหม่ (pt-shop.css หมวด sp-* และ .xl-*) ย้ายมาแบบครอบด้วย .hxl ทั้งหมด
   จึงไม่ไปชนกฎของหน้าอื่นในเว็บเก่า (ไม่มี #searchfrm ไม่พึ่งกฎ .pt-ui #searchfrm ใน ptcargo.css)
   กล่องติดคลาส nx-wrap ด้วย เพื่อพ้นกฎมือถือ #page-wrapper button/input{min-height:44px} ใน ptcargo.css (ปุ่มเล็กในแถวกำหนดขนาดเอง)
   ========================================================================== */
.hxl{--sp-brand:#f26b1d;--sp-brand-ink:#c94f0c;--sp-brand-soft:#fff1e8;--sp-price:#e8461e;--sp-ok:#16a05d;--sp-ok-soft:#e6f6ee;--sp-wait:#c27c0e;--sp-wait-soft:#fff5e0;--sp-bad:#d43b2f;--sp-bad-soft:#fdecea;--sp-info:#1748b8;--sp-info-soft:#eef4ff;--sp-bg:#f4f4f6;--sp-card:#fff;--sp-line:#ececf0;--sp-line-2:#dcdce2;--sp-soft-line:#ffd3b8;--sp-ink:#1d1f24;--sp-ink-2:#5b616b;--sp-mute:#8b919b;--sp-note-ink:#7a5308;
  display:flex;flex-direction:column;gap:10px;min-width:0;color:var(--sp-ink);font-size:13.5px;line-height:1.45}
:root[data-theme="dark"] .hxl{--sp-brand:#ff7a2e;--sp-brand-ink:#ffa86b;--sp-brand-soft:#3a2416;--sp-price:#ff6d40;--sp-ok:#45d08e;--sp-ok-soft:#143326;--sp-wait:#f0b54a;--sp-wait-soft:#3a2d12;--sp-bad:#ff7a70;--sp-bad-soft:#3c1f1d;--sp-info:#7fb0ff;--sp-info-soft:#1b2a40;--sp-bg:#111216;--sp-card:#1b1d23;--sp-line:#2a2d35;--sp-line-2:#3b3f4a;--sp-soft-line:#3b3f4a;--sp-ink:#eceef2;--sp-ink-2:#b4b9c3;--sp-mute:#8a909b;--sp-note-ink:#f0d08a}
.hxl *,.hxl *::before,.hxl *::after{box-sizing:border-box}
.hxl a{text-decoration:none}
.hxl-wait{margin:0;padding:24px 8px;text-align:center;color:var(--sp-mute)}

/* หัวหน้า: ลิงก์รองหลายอัน (สรุปรายการ · ออเดอร์ร้านจีน) */
.pt-hs .hxl-acts{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- แท็บสถานะแถบเดียว (sp-tabs) ---------- */
.hxl-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;background:var(--sp-card);border:1px solid var(--sp-line);border-radius:12px;padding:0 4px}
.hxl-tabs::-webkit-scrollbar{display:none}
.hxl-tabs a{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:11px 12px;font-size:14px;color:var(--sp-ink-2);white-space:nowrap}
.hxl-tabs a:hover{color:var(--sp-brand)}
.hxl-tabs a.is-on{color:var(--sp-brand);font-weight:700}
.hxl-tabs a.is-on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2.5px;border-radius:3px 3px 0 0;background:var(--sp-brand)}
.hxl-tabs i{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--sp-bad);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.hxl-body{display:flex;flex-direction:column;gap:10px;min-width:0}

/* ---------- ปุ่ม ป้าย ช่องติ๊ก (sp-btn / sp-pill / sp-check) ---------- */
.hxl .sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px;border-radius:8px;border:1px solid var(--sp-line-2);background:var(--sp-card);color:var(--sp-ink);font:inherit;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;text-decoration:none}
.hxl .sp-btn:hover{border-color:var(--sp-brand);color:var(--sp-brand)}
.hxl .sp-btn.is-pri,.hxl .sp-btn.is-pri:hover,.hxl .sp-btn.is-pri:focus{background:var(--sp-brand);border-color:var(--sp-brand);color:#fff;text-decoration:none}
.hxl .sp-btn.is-sm{min-height:32px;padding:0 12px;font-size:13px;border-radius:7px}
.hxl .sp-btn.is-full{width:100%}
.hxl .sp-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.hxl .sp-pill{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--sp-bg);color:var(--sp-ink-2)}
.hxl .sp-pill.is-ok{background:var(--sp-ok-soft);color:var(--sp-ok)}
.hxl .sp-pill.is-wait{background:var(--sp-wait-soft);color:var(--sp-wait)}
.hxl .sp-pill.is-bad{background:var(--sp-bad-soft);color:var(--sp-bad)}
.hxl .sp-pill.is-info{background:var(--sp-info-soft);color:var(--sp-info)}
.hxl .sp-check{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:400;cursor:pointer}
.hxl .sp-check input{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin:0;border:1.5px solid var(--sp-line-2);border-radius:5px;background:var(--sp-card);display:grid;place-content:center;cursor:pointer;flex:0 0 auto}
.hxl .sp-check input:checked,.hxl .sp-check input:indeterminate{background:var(--sp-brand);border-color:var(--sp-brand)}
.hxl .sp-check input:checked::after{content:"";width:10px;height:6px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.hxl .sp-check input:indeterminate::after{content:"";width:10px;height:2.2px;background:#fff}
.hxl .sp-note{margin:0;font-size:12px;color:var(--sp-mute);line-height:1.55}
.hxl .sp-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 16px;text-align:center;background:var(--sp-card);border:1px solid var(--sp-line);border-radius:12px}
.hxl .sp-empty b{font-size:15px}
.hxl .sp-empty span{font-size:13px;color:var(--sp-mute)}

/* ---------- ช่องค้น (xl-f) ---------- */
.hxl .xl-f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:end;margin:0}
.hxl .xl-f small{display:none;margin:0 0 4px;font-size:12px;font-weight:600;color:var(--sp-ink-2)}
.hxl .xl-fq,.hxl .xl-fd{display:flex;flex-direction:column;min-width:0;margin:0;font-weight:400}
.hxl .xl-in{display:flex;align-items:center;gap:7px;height:40px;padding:0 11px;border:1px solid var(--sp-line);border-radius:10px;background:var(--sp-card);color:var(--sp-ink);font:inherit;font-size:13.5px;min-width:0}
.hxl .xl-in>.fa{width:16px;flex:none;color:var(--sp-brand);text-align:center}
.hxl .xl-in input{flex:1 1 auto;min-width:0;height:100%;border:0;outline:0;background:transparent;color:inherit;font:inherit;padding:0;box-shadow:none}
.hxl .xl-in:focus-within{border-color:var(--sp-brand)}
.hxl .xl-dbtn{width:100%;cursor:pointer;text-align:left}
.hxl .xl-dbtn span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sp-ink-2)}
.hxl .xl-dbtn i.xl-car{font-style:normal;color:var(--sp-mute);font-size:11px}
.hxl .xl-dbtn.is-on{border-color:var(--sp-brand);background:var(--sp-brand-soft)}
.hxl .xl-dbtn.is-on span{color:var(--sp-brand-ink)}
.hxl .xl-dd{display:none;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;align-items:center}
.hxl .xl-dd em{font-style:normal;font-size:12.5px;color:var(--sp-ink-2)}
.hxl .xl-fd{display:contents}
.hxl .xl-f .xl-dd{grid-column:1/-1}
.hxl .xl-f.is-dopen .xl-dd{display:grid}
.hxl .xl-go{display:none}
.hxl .xl-clr{display:none;border:0;background:none;color:var(--sp-info);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:0 4px;height:40px}
.hxl .xl-f.is-dopen .xl-clr:not([hidden]){display:block;grid-column:1/-1;justify-self:end;height:28px}
.hxl .xl-f .xl-n{display:none}
.hxl .xl-sb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--sp-ink-2)}
.hxl .xl-sb[hidden]{display:none}
.hxl .xl-sel{margin:0;font-weight:400}
.hxl .xl-sel select{border:0;background:none;color:var(--sp-info);font:inherit;font-weight:600;padding:2px 0;cursor:pointer}
.hxl .xl-sb .xl-n{margin-left:auto;color:var(--sp-mute);font-size:12px}
.hxl .xl-box{display:flex;flex-direction:column;gap:10px;min-width:0}
@media (min-width:1024px){
  .hxl .xl-f{display:flex;flex-wrap:wrap;gap:12px;padding:12px 14px;border:1px solid var(--sp-line);border-radius:12px;background:var(--sp-card)}
  .hxl .xl-f small{display:block}
  .hxl .xl-fq{flex:0 1 280px}
  .hxl .xl-fd{display:flex}
  .hxl .xl-dbtn{display:none}
  .hxl .xl-dd{display:grid;grid-template-columns:150px auto 150px}
  .hxl .xl-go{display:inline-flex;height:40px;padding:0 24px;align-self:flex-end}
  .hxl .xl-clr:not([hidden]){display:block;align-self:flex-end}
  .hxl .xl-f .xl-n{display:block;margin-left:auto;align-self:center;font-size:13px;color:var(--sp-ink-2)}
  .hxl .xl-sb{display:none}
}

/* ---------- ตาราง (xl-t) ---------- */
.hxl .xl-tw{background:var(--sp-card);border:1px solid var(--sp-line);border-radius:10px;overflow-x:auto}
.hxl .xl-t{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums;margin:0}
.hxl .xl-t th,.hxl .xl-t td{border:1px solid var(--sp-soft-line);padding:0 5px;height:42px;white-space:nowrap;vertical-align:middle;line-height:1.2}
.hxl .xl-t tr>:first-child{border-left:0}
.hxl .xl-t tr>:last-child{border-right:0}
.hxl .xl-t thead th{border-top:0;background:var(--sp-bg);color:var(--sp-ink-2);font-size:12px;font-weight:700;height:38px}
.hxl .xl-t tfoot td{border-bottom:0;background:var(--sp-bg);font-weight:700;height:40px}
.hxl .xl-t thead th.is-sort{background:var(--sp-brand-soft);color:var(--sp-brand-ink)}
.hxl .xl-sort{display:inline-flex;align-items:center;gap:3px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:0;white-space:nowrap}
.hxl .xl-sort i{font-style:normal;font-size:10px;color:var(--sp-mute)}
.hxl .is-sort .xl-sort i{color:var(--sp-brand)}
.hxl .xl-t .is-l{text-align:left}
.hxl .xl-t .is-r{text-align:right}
.hxl .xl-t .is-c{text-align:center;width:1%;padding:0 4px}
.hxl .xl-t tbody tr:nth-child(even) td{background:var(--sp-bg)}
.hxl .xl-t tbody tr.is-owe td{background:var(--sp-brand-soft)}
.hxl .xl-t tbody tr:hover td{background:var(--sp-info-soft)}
.hxl .xl-t td.is-due{color:var(--sp-bad);font-weight:700}
.hxl .xl-t td.is-back{color:var(--sp-ok);font-weight:700}
.hxl .xl-t td.is-zero{color:var(--sp-mute)}
.hxl .xl-t td.is-paid{color:var(--sp-ok)}
.hxl .xl-t .sp-check{justify-content:center}
.hxl .xl-no{font-weight:700;color:var(--sp-info)}
.hxl .xl-no:hover{text-decoration:underline}
.hxl .xl-na{font-size:12px;color:var(--sp-mute)}
.hxl .xl-trk{font-weight:700;letter-spacing:.02em}
.hxl a.xl-trk{color:var(--sp-info)}
.hxl .xl-pr{display:inline-flex;align-items:center;gap:6px;color:inherit}
.hxl .xl-pr img{width:30px;height:30px;border-radius:6px;object-fit:cover;background:var(--sp-bg);flex:none}
.hxl .xl-pr a{display:inline-flex}
.hxl .xl-cr{display:inline-flex;align-items:center;gap:8px}
.hxl .sp-opt-logo{width:26px;height:26px;flex:0 0 auto;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;font-weight:800;font-size:9px;color:#fff;background:var(--sp-ink-2)}
.hxl .sp-opt-logo img{width:100%;height:100%;object-fit:contain;display:block}
.hxl .sp-opt-logo.is-img{width:36px;height:36px;border-radius:0;background:none;border:0}
.hxl .xl-ib{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--sp-line);background:var(--sp-card);color:var(--sp-ink-2);cursor:pointer;padding:0;vertical-align:middle;font-size:15px}
.hxl .xl-ib:hover{border-color:var(--sp-brand);color:var(--sp-brand)}
.hxl .xl-ib.is-off{opacity:.38}
.hxl .xl-pay{display:inline-flex;align-items:center;justify-content:center;width:62px;height:30px;padding:0;font-size:12.5px;font-weight:700;border-radius:8px;margin:0 auto;border:1.5px solid var(--sp-info);color:var(--sp-info);background:var(--sp-card);cursor:pointer;font-family:inherit}
.hxl .xl-pay:hover{color:var(--sp-info);text-decoration:none;background:var(--sp-info-soft)}
.hxl .xl-pay.is-pri,.hxl .xl-pay.is-pri:hover,.hxl .xl-pay.is-pri:focus{background:var(--sp-brand);border-color:var(--sp-brand);color:#fff}
.hxl .hx-clip{display:inline-block;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.hxl .hx-clip.is-s{max-width:100px}
.hxl .hx-clip.is-m{max-width:104px}
.hxl .hx-clip.is-xs{max-width:84px}
.hxl .hx-sub.hx-clip.is-xs{max-width:64px}
.hxl .hx-clip:hover{color:var(--sp-info)}
.hxl .hx-more{margin-left:4px;font-size:11.5px;font-weight:700;color:var(--sp-mute)}
.hxl .hx-sub{color:var(--sp-ink-2)}
.hxl .hx-dt{display:inline-flex;flex-direction:column;line-height:1.25}
.hxl .hx-dt small{font-size:11px;color:var(--sp-mute)}
.hxl .xl-more{align-self:stretch}

/* ---------- การ์ดมือถือ (sp-billc) ---------- */
.hxl .sp-billc{display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--sp-card);border:1px solid var(--sp-line);border-radius:12px}
.hxl .sp-billc.is-owe{border-color:var(--sp-soft-line)}
.hxl .sp-billc-h{display:flex;align-items:center;gap:8px}
.hxl .sp-billc-h .xl-no{flex:1 1 auto;min-width:0;font-size:15px}
.hxl .sp-billc-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;padding-top:10px;border-top:1px dashed var(--sp-line)}
.hxl .hx-cb{display:flex;align-items:flex-end;gap:10px;min-width:0}
.hxl .hx-cb-l{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--sp-ink-2)}
.hxl .hx-cb-l b{color:var(--sp-ink);font-weight:600}
.hxl .hx-cb-l>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hxl .hx-cb-l .xl-pr img{width:40px;height:40px}
.hxl .cx-money{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:0 0 auto;text-align:right}
.hxl .cx-money p{display:flex;align-items:baseline;justify-content:flex-end;gap:8px;margin:0;font-size:12.5px;color:var(--sp-ink-2)}
.hxl .cx-money p span{white-space:nowrap}
.hxl .cx-money p b{font-weight:600;font-size:13.5px;color:var(--sp-ink);white-space:nowrap}
.hxl .cx-money p.is-paid b{color:var(--sp-ok)}
.hxl .cx-money p.is-left{margin-top:2px}
.hxl .cx-money p.is-left span{font-weight:700;color:var(--sp-ink)}
.hxl .cx-money p.is-left b{font-weight:800;font-size:20px;line-height:1.2}
.hxl .cx-money p.is-due b{color:var(--sp-bad)}
.hxl .cx-money p.is-zero b{color:var(--sp-ok)}
.hxl .cx-money p.is-back b{color:var(--sp-info)}

/* ---------- แถบล่างชำระรวม / ยืนยันรับของ (sp-bar) ---------- */
.hxl .sp-bar{position:fixed;left:0;right:0;bottom:0;z-index:1040;background:var(--sp-card);border-top:1px solid var(--sp-line);box-shadow:0 -6px 18px rgba(20,22,30,.06);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))}
.hxl .sp-bar[hidden]{display:none}
.hxl .sp-bar-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:10px}
.hxl .sp-bar-sum{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.hxl .sp-bar-sum span{font-size:12px;color:var(--sp-ink-2)}
.hxl .sp-bar-sum b{font-size:19px;color:var(--sp-price);font-variant-numeric:tabular-nums}
.hxl .sp-bar .sp-btn{min-height:44px;padding:0 18px}
.hxl.has-bar{padding-bottom:72px}
/* มือถือ ≤768: อยู่เหนือแถบเมนูล่าง .pt-dock (58px) · จอคอม ≥768: ไม่ทับเมนูซ้าย .pt-side (250px / ย่อ 70px) */
@media (max-width:768px){.hxl .sp-bar{bottom:calc(58px + env(safe-area-inset-bottom,0px));padding-bottom:8px}}
@media (min-width:769px){body:not(.mini-navbar):not(.canvas-menu) .hxl .sp-bar{left:250px}body.mini-navbar .hxl .sp-bar{left:70px}}
/* ปุ่มแชทลอยขึ้นพ้นแถบ (แบบเดียวกับหน้า .pt-recv) */
body:has(.hxl.has-bar) .pt-rp-fab,body:has(.hxl.has-bar) .pt-ch-fab{transform:translateY(-70px)}

/* ---------- กล่องข้อความกลาง (แทน alert) ---------- */
.hxl .hxl-say{position:fixed;left:12px;right:12px;bottom:84px;z-index:1060;display:flex;align-items:flex-start;gap:10px;padding:12px 44px 12px 14px;border-radius:12px;border:1px solid var(--sp-line-2);background:var(--sp-card);color:var(--sp-ink);font-size:13.5px;line-height:1.5;box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
.hxl .hxl-say div{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;word-break:break-word}
.hxl .hxl-say b{font-size:14px}
.hxl .hxl-say.is-warn{background:var(--sp-wait-soft);color:var(--sp-note-ink);border-color:var(--sp-wait)}
.hxl .hxl-say.is-info{background:var(--sp-info-soft);border-color:var(--sp-info)}
.hxl .hxl-say.is-bad{background:var(--sp-bad-soft);color:var(--sp-bad);border-color:var(--sp-bad)}
.hxl .hxl-say-x{position:absolute;top:6px;right:6px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer}
@media (max-width:768px){.hxl .hxl-say{bottom:150px}}
@media (min-width:1024px){.hxl .hxl-say{left:50%;right:auto;width:min(560px,calc(100vw - 48px));transform:translateX(-50%)}}

/* มือถือ: ช่องกรอก 16px กันไอโฟนซูมจอตอนแตะ (แทนกฎกลางที่ nx-wrap ไม่โดน) */
@media (max-width:1023px){.hxl .xl-in input,.hxl .xl-sel select{font-size:16px}}
/* ปุ่มหัวหน้า (สรุปรายการ · ออเดอร์ร้านจีน) ชิดขวา ปุ่มเล็กขาวแบบเดียวกับปุ่มในตาราง */
.pt-hs .pt-hist-head .hxl-acts{flex:0 0 auto;justify-content:flex-end;gap:6px}
.pt-hs .hxl-acts .pt-hist-act{height:32px;padding:0 12px;gap:6px;border-radius:8px;font-size:13px;font-weight:600;background:#fff;color:#16181d;border:1px solid #e5e7eb}
.pt-hs .hxl-acts .pt-hist-act:hover,.pt-hs .hxl-acts .pt-hist-act:focus{background:#fff;border-color:#ee4d2d;color:#ee4d2d}
.pt-hs .hxl-acts .pt-hist-act i{font-size:13px;color:#6b7280}
@media (max-width:767px){.pt-hs .pt-hist-head{flex-wrap:wrap}.pt-hs .pt-hist-head .hxl-acts{flex:1 1 100%;justify-content:flex-start}}
/* เว้นช่องว่างเหนือหัวข้อหน้า (เจ้าของสั่ง 3 พ.ย. 2569) */
.pt-hs .pt-hist-head{padding-top:18px}
@media (max-width:767px){.pt-hs .pt-hist-head{padding-top:12px}}

/* ---------- หน้าประวัติ 6 หน้า: กันป้าย/ปุ่ม/เลขบิลตัดบรรทัดแล้วล้นหรือทับกัน (3 พ.ย. 2569 รอบ 2) ----------
   ครอบด้วย .hxl[data-k] = เฉพาะหน้า *_history.php  (หน้า order_detail / shipment_detail ใช้ .hxl แต่ไม่มี data-k จึงไม่โดน)
   ข้อความยาวตัดท้าย ข้อความเต็มอยู่ใน title · ตัวเลขเงินไม่ตัดกลาง */
.hxl[data-k] .sp-billc-h .xl-no{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hxl[data-k] .sp-pill{display:inline-block;line-height:22px;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.hxl[data-k] .sp-billc-h .sp-pill{flex:0 1 auto;min-width:0;max-width:62%}
.hxl[data-k] .xl-t .sp-pill{max-width:150px}
.hxl[data-k] .sp-billc-f .sp-btn,.hxl[data-k] .xl-pay,.hxl[data-k] .cx-money b,.hxl[data-k] .xl-t .is-r{white-space:nowrap}
@media (max-width:360px){.hxl[data-k] .sp-pill{font-size:11px;padding:0 6px}.hxl[data-k] .sp-billc-f .sp-btn{padding:0 9px}}
/* บรรทัดข้อมูลในการ์ด: ค่ายาว (ชื่อบัญชี) ตัดท้ายในกรอบของตัวเอง ไม่ล้นไปใต้ช่องยอดเงิน */
.hxl[data-k] .hx-cb-l>span:has(>b){display:flex;align-items:baseline;gap:4px;min-width:0}
.hxl[data-k] .hx-cb-l>span>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hxl[data-k] .hx-cb-l>span.is-num{flex-wrap:wrap;white-space:normal}
.hxl[data-k] .hx-cb-l>span.is-num>b{overflow:visible;text-overflow:clip;word-break:keep-all}

/* ---------- จาก pt-order-detail-xl.css (เว็บเก่า) ---------- */
/* ==========================================================================
   หน้าบิลสั่งซื้อ order_detail.php โฉมใหม่  (เจ้าของผ่าน mockup แบบ A1 · 3 พ.ย. 2569 · _delivery/mockup_order_detail_xl_20261103)
   โครงและการจัดวางแบบหน้ารายละเอียดออเดอร์ 1688 ใช้คลาสจริงของ pt-shop.css (npy-* nbl-* sp-*) ผ่าน inc/nx_page.php
   ตาราง Excel ใช้ชิ้นของหน้าประวัติที่ขึ้นจริง (css/pt-hist-xl.css .hxl .xl-*)  ไฟล์นี้เป็นไฟล์เสริมไฟล์เดียว ครอบด้วย .odx
   ตัววาด js/pt-order-detail-xl.js · ส่วนเดิมของหน้า (QC/ไลน์/รายการนำเข้า/กล่องยกเลิก) ใช้ css/ptcargo.css เดิมใต้ .pt-odo #odt-root
   ========================================================================== */

/* หัวการ์ด: ขวาบน ปุ่มพิมพ์/ใบเสร็จ/อื่นๆ เหนือกล่องแจ้ง */
.odx .odx-hacts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;padding:8px 14px 10px}
.odx .odx-hacts .sp-btn .fa{font-size:13px}
@media (min-width:1024px){
  .odx .nbl-hero .nbl-hr{gap:10px;align-self:start}
  .odx .odx-hacts{padding:0}
  .odx .nbl-hero .nbl-nx{border-radius:12px}
}

/* การ์ดข้อมูล/งวด: กล่องรายการ + กล่องสรุปแยกกัน · ค่า ¥ ตัวหลัก ฿ ตัวเล็กบรรทัดสอง */
.odx .nbl-card{display:flex;flex-direction:column;gap:8px}
.odx .nbl-card .nbl-bh{margin-bottom:0}
.odx .npy-kv b{font-variant-numeric:tabular-nums}
.odx .odx-yb{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.3}
.odx .odx-yb small{font-size:12px;font-weight:400;color:var(--sp-ink-2)}
.odx .odx-yb small.is-mute{color:var(--sp-mute)}
.odx .npy-kv b.is-tot .odx-yb small{font-weight:600;color:var(--sp-ink)}
.odx .npy-kv b.is-paid,.odx .npy-kv b.is-back,.odx .npy-kv b.is-back small,.odx .npy-kv b.is-zero{color:var(--sp-ok)}
.odx .npy-kv b.is-due{color:var(--sp-bad);font-size:15px}
.odx .odx-sum{border:1px solid var(--sp-line);background:var(--sp-card)}
.odx .odx-lbl{display:flex;flex-direction:column;gap:2px}
.odx .odx-codsub{display:block;font-size:12px;color:var(--sp-ink-2)}
.odx .odx-codsub .odx-chip{margin:0 2px}
.odx .nbl-snote.odx-l{text-align:left}
.odx .nbl-side-b .npy-kv b.is-tot.is-zero{color:var(--sp-ok)}
.odx button.odx-lk{font-size:13.5px}

/* การ์ดตาราง: ตารางชิดขอบการ์ด */
.odx .odx-tcard > .xl-tw{margin:2px -14px -12px;border:0;border-top:1px solid var(--sp-line);border-radius:0 0 14px 14px;overflow:hidden}
@media (min-width:1024px){.odx .odx-tcard > .xl-tw{margin:2px -18px -14px}}

/* แถบล่างมือถือ (ปุ่มชำระ/ยกเลิก) · จอคอมใช้ปุ่มในการ์ดขวา */
.odx .odx-bar .sp-bar-in .sp-btn{min-height:44px}
@media (min-width:1024px){.odx .odx-bar{display:none}.hxl.odx.has-bar{padding-bottom:0}}

/* ---------- ตารางอ่านง่าย (ต่อจาก .xl-t ของ pt-hist-xl.css) — เจ้าของสั่ง 3 พ.ย. 2569 ----------
   พื้นขาวล้วน ไม่มีแถวสลับสี · เส้นบางเทาอ่อนคั่นทั้งแถวและคอลัมน์ (แบบ Excel) · ค่าอยู่ใต้คอลัมน์ของมันเสมอ
   หัวคอลัมน์/แถวหัวร้าน/แถวรวม เด่นด้วยตัวหนาและเส้นคั่น ไม่ใช้พื้นสี · ตัวเลข tabular-nums ชิดขวา */
.odx .xl-t{font-size:13.5px;font-variant-numeric:tabular-nums}
.odx .xl-t th,.odx .xl-t td{border:0;border-bottom:1px solid var(--sp-line);border-right:1px solid var(--sp-line);padding:0 10px;height:46px;background:var(--sp-card)}
.odx .xl-t tr > :last-child{border-right:0}
.odx .xl-t thead th{height:40px;background:var(--sp-card);color:var(--sp-ink);font-size:13px;font-weight:700;border-bottom:2px solid var(--sp-line-2)}
.odx .xl-t tbody tr:nth-child(even) td,.odx .xl-t tbody tr:hover td,.odx .xl-t tfoot td{background:var(--sp-card)}
.odx .xl-t tr > :first-child{padding-left:14px}
.odx .xl-t tr > :last-child{padding-right:14px}
.odx .xl-t td.is-wrap{white-space:normal;line-height:1.4;padding-top:9px;padding-bottom:9px}
.odx .xl-t td.is-mute,.odx .xl-t .is-mute{color:var(--sp-mute);font-weight:400}
.odx .xl-t td .sp-pill{vertical-align:middle}
.odx .xl-t .odx-sm{display:block;font-size:12px;font-weight:400;color:var(--sp-mute);white-space:normal}
.odx .xl-t .xl-ib{width:32px;height:32px;font-size:14px}
.odx .xl-t b{font-weight:700}
/* แถวหัวกลุ่ม (งวด / ร้าน): ตัวหนา เส้นเข้มคั่นด้านบน */
.odx .xl-t tbody tr.is-grp td{height:44px;font-weight:700;color:var(--sp-ink);border-top:1.5px solid var(--sp-line-2);padding-top:10px;padding-bottom:10px}
.odx .xl-t tbody tr.is-grp:first-child td{border-top:0}
/* แถวรวม: ตัวหนา · แถวยอดย่อยไม่มีเส้นคั่นกันเอง */
.odx .xl-t tr.is-sub td,.odx .xl-t tr.is-stot td{font-weight:700;color:var(--sp-ink)}
.odx .xl-t tr.is-pay td,.odx .xl-t tr.is-left td,.odx .xl-t tr.is-ssum td{height:34px;color:var(--sp-ink-2)}
.odx .xl-t tr.is-sub td,.odx .xl-t tr.is-pay td,.odx .xl-t tr.is-ssum:not(.is-stot) td{border-bottom:0}
.odx .xl-t tr.is-left td{font-weight:700;color:var(--sp-ink)}
.odx .xl-t tr.is-ssum.is-first td{border-top:1px dashed var(--sp-line-2)}
.odx .xl-t tbody tr.is-out td,.odx .xl-t tbody tr.is-out .odx-pn b,.odx .xl-t tbody tr.is-out .odx-pn small{color:var(--sp-mute)}
.odx .xl-t tbody tr.is-out .odx-pn img{filter:grayscale(1);opacity:.5}
.odx .xl-t tbody tr.is-out td s{color:var(--sp-mute);font-weight:400}
.odx .xl-t td s.odx-sm{text-align:right}
/* ท้ายตาราง: ยอดรวมใหญ่ชัด */
.odx .xl-t tfoot td{height:42px;font-weight:700;color:var(--sp-ink);border-bottom:0}
.odx .xl-t tfoot tr:first-child td{border-top:1.5px solid var(--sp-line-2)}
.odx .xl-t tfoot tr.is-tot td{font-size:14.5px}
.odx .xl-t tfoot tr.is-big td{height:52px;font-size:16px}
.odx .xl-t tfoot tr.is-big td.is-w-num{font-size:21px;font-weight:800}
.odx .xl-t td.is-due{color:var(--sp-bad)}
.odx .xl-t td.is-paid{color:var(--sp-ok)}
.odx .xl-t td.is-zero{color:var(--sp-ok)}
.odx .xl-t td.is-back{color:var(--sp-ok)}
.odx .xl-t.is-money tbody td.is-r{width:1%;min-width:96px}
/* ความกว้างคอลัมน์คงที่ */
.odx .xl-t .is-w-seq{width:52px}
.odx .xl-t .is-w-q{width:76px}
.odx .xl-t .is-w-num{width:112px}
.odx .xl-t .is-w-opt{width:150px;max-width:150px}
.odx .xl-t .is-w-rf{width:118px}
.odx .xl-t .is-w-act{width:52px}
.odx .xl-t .odx-seq{color:var(--sp-mute);font-weight:400;font-style:normal;font-size:12.5px}
.odx .xl-t i.odx-seq{margin-right:5px}
.odx .odx-nmrow{display:flex;align-items:baseline;min-width:0}
/* ตัวเลือก: ข้อความยาวตัดท้าย กดดูเต็ม · ลิงก์รูปเป็นรูปเล็ก */
.odx .xl-t .odx-oclip{max-width:128px;color:var(--sp-ink-2)}
.odx .odx-oimg{width:32px;height:32px;border-radius:5px;object-fit:cover;vertical-align:middle;border:1px solid var(--sp-line);background:var(--sp-bg)}
.odx small .odx-oimg{width:22px;height:22px}
.odx small .odx-oclip{max-width:100%;font-size:12.5px}
/* โอนคืน: ยืนยันแล้ว ¥ เขียว + ฿ เล็ก · รอคืนเงิน ยอด + ป้าย */
.odx .odx-rf{display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px}
.odx .odx-rf .odx-sm{text-align:right}
.odx .xl-t .is-back,.odx .xl-t b.is-back{color:var(--sp-ok)}
.odx .xl-t .odx-rfm{color:var(--sp-ok);text-align:right}
.odx .odx-chip.is-wait{border-color:var(--sp-wait);color:var(--sp-wait)}
.odx .odx-chip.is-short{border-color:var(--sp-wait);color:var(--sp-wait);font-weight:600}
.odx .odx-chip.is-cod{border-color:var(--sp-info);color:var(--sp-info);font-weight:700;margin-right:4px}
.odx .odx-codv{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;white-space:nowrap;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:help}
.odx .odx-codv .odx-sm{display:inline}
.odx .xl-t .odx-codsub{display:block;margin-top:2px}
.odx .odx-codsub .odx-chip{margin:0 2px}
.odx .xl-t td s.odx-sm,.odx .xl-t td s{color:var(--sp-mute);font-weight:400}
/* มือถือ/จอคอม: คอลัมน์เต็มเฉพาะจอคอม · ชิ้นแทนเฉพาะมือถือ */
@media (max-width:1023px){
  .hxl.odx .is-pc{display:none}
  .odx .xl-t{font-size:13.5px}
  .odx .xl-t th,.odx .xl-t td{padding:0 8px}
  .odx .xl-t tr > :first-child{padding-left:12px}
  .odx .xl-t tr > :last-child{padding-right:12px}
  .odx .xl-t td{height:auto;padding-top:10px;padding-bottom:10px}
  .odx .xl-t tr.is-pay td,.odx .xl-t tr.is-left td,.odx .xl-t tr.is-ssum td{padding-top:6px;padding-bottom:6px}
  .odx .xl-t.is-money tbody td.is-r{min-width:0}
  .odx .xl-t .is-w-num{width:92px}
  .odx .xl-t .is-w-act{width:44px}
  .odx .xl-t tfoot tr.is-big td.is-w-num{font-size:19px}
}
@media (min-width:1024px){.hxl.odx .is-m{display:none}}

/* ช่องสินค้า: รูป 48 + ชื่อ 2 บรรทัด + ตัวเลือกบรรทัดเทา + ป้ายประเภท (เฉพาะที่ไม่ใช่ ทั่วไป) */
.odx .odx-pn{display:flex;align-items:center;gap:12px;min-width:0}
.odx .odx-pn > a,.odx .odx-pn > span.odx-im{flex:0 0 auto;display:inline-flex}
.odx .odx-pn img,.odx .odx-pn .odx-im{width:48px;height:48px;border-radius:8px;object-fit:cover;background:var(--sp-bg);border:1px solid var(--sp-line)}
.odx .odx-pn > div{min-width:0;display:flex;flex-direction:column;gap:3px}
.odx .odx-pn b{font-weight:600;color:var(--sp-ink);white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;line-height:1.4}
.odx .odx-pn a.odx-nm{color:inherit}
.odx .odx-pn a.odx-nm:hover b{color:var(--sp-info)}
.odx .odx-pn small{font-size:12.5px;color:var(--sp-mute);white-space:normal}
.odx .odx-pn small.odx-calc{color:var(--sp-ink-2)}
.odx .odx-tags{display:flex;flex-wrap:wrap;gap:4px}
.odx .odx-chip{display:inline-block;padding:0 7px;border-radius:999px;border:1px solid var(--sp-line-2);font-size:11.5px;line-height:18px;color:var(--sp-ink-2);white-space:nowrap}
.odx .odx-chip.is-out{border-color:var(--sp-line-2);color:var(--sp-mute);font-weight:600}
.odx .odx-pn small.odx-opt img{width:22px;height:22px;border-radius:4px;object-fit:cover;vertical-align:middle;border:1px solid var(--sp-line)}
.odx .xl-t td.odx-x{color:var(--sp-ink-2)}
@media (min-width:1024px){.odx .odx-pn{min-width:220px}}

/* ปุ่มที่หน้าตาเป็นลิงก์ตัวเลข (เลขออเดอร์ร้านจีน → เปิดกล่องในหน้า) */
.odx button.odx-lk{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--sp-info);cursor:pointer;word-break:break-all;text-align:left}

/* แถบหัวร้าน: ป้ายเว็บ · ชื่อร้านตัวหนา · จำนวนรายการ · เลขพัสดุจีน */
.odx .odx-shop{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14.5px}
.odx .odx-site{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:4px;background:var(--sp-brand);color:#fff;font-size:11px;font-weight:800;letter-spacing:.03em}
.odx .odx-shop em{font-style:normal;font-weight:400;font-size:13px;color:var(--sp-ink-2)}
.odx .odx-shop em + em::before{content:"·";margin-right:10px;color:var(--sp-mute)}
.odx .odx-shop em.is-none{color:var(--sp-mute)}

/* ข้อมูลบิล: บริการเสริม + หมายเหตุ */
.odx .odx-on{color:var(--sp-ok);font-weight:600}
.odx .odx-off{color:var(--sp-mute);font-weight:400}
.odx .odx-notes{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.odx .odx-notes li{display:flex;gap:8px;font-size:13.5px;line-height:1.5;color:var(--sp-ink-2)}
.odx .odx-notes li .fa{flex:none;margin-top:3px;color:var(--sp-wait)}

/* ปุ่มแสดงแถวที่เหลือ (บิลใหญ่) */
.odx .odx-more{display:flex;justify-content:center;padding:8px}

/* ---------- กล่อง <dialog> (หัวล็อก · เนื้อเลื่อน · ปุ่มล่าง) ---------- */
dialog.odx-dlg{width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:14px;background:var(--sp-card,#fff);color:var(--sp-ink,#1d1f24);box-shadow:0 24px 60px -20px rgba(0,0,0,.45);font:inherit;font-size:13.5px}
dialog.odx-dlg[open]{display:flex;flex-direction:column}
dialog.odx-dlg::backdrop{background:rgba(17,18,22,.45)}
dialog.odx-dlg form{display:flex;flex-direction:column;min-height:0;margin:0}
.odx-dlg .odx-dh{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--sp-line)}
.odx-dlg .odx-dh b{flex:1 1 auto;font-size:15px}
.odx-dlg .odx-dx{width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--sp-ink-2);font-size:20px;line-height:1;cursor:pointer}
.odx-dlg .odx-db{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:14px}
.odx-dlg .odx-df{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid var(--sp-line)}
.odx-dlg .odx-df .sp-btn.is-bad{background:var(--sp-bad);border-color:var(--sp-bad);color:#fff}
.odx-dlg .odx-db p{margin:0;color:var(--sp-ink-2)}
.odx-dlg .odx-menu{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:1px solid var(--sp-line);border-radius:10px;overflow:hidden}
.odx-dlg .odx-menu li + li{border-top:1px solid var(--sp-line)}
.odx-dlg .odx-menu a,.odx-dlg .odx-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:12px;border:0;background:none;color:var(--sp-ink);font:inherit;text-align:left;cursor:pointer}
.odx-dlg .odx-menu a:hover,.odx-dlg .odx-menu button:hover{background:var(--sp-bg)}
.odx-dlg .odx-menu .fa{width:18px;text-align:center;color:var(--sp-ink-2)}
.odx-dlg .odx-menu small{display:block;font-size:12px;color:var(--sp-mute)}
.odx-dlg .xl-t{font-size:13px}
.odx-dlg .xl-t td{height:38px}
.odx-dlg .xl-tw{overflow:hidden}
.odx-dlg .odx-hero{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:var(--sp-bg)}
.odx-dlg .odx-hero img{width:96px;height:64px;object-fit:cover;border-radius:8px;flex:none}
.odx-dlg .odx-hero div{display:flex;flex-direction:column}
.odx-dlg .odx-hero span{font-size:12.5px;color:var(--sp-ink-2)}
.odx-dlg .odx-cn{font-size:12.5px;color:var(--sp-ink-2)}
.odx-dlg .odx-cn b{display:block;font-weight:600;color:var(--sp-ink)}
.odx-dlg .odx-rs{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.odx-dlg .odx-rs label{display:flex;align-items:center;gap:8px;margin:0;padding:9px 10px;border:1px solid var(--sp-line);border-radius:8px;font-weight:400;cursor:pointer}
.odx-dlg .odx-rs label:has(input:checked){border-color:var(--sp-brand);background:var(--sp-brand-soft)}
.odx-dlg .odx-rs input{accent-color:var(--sp-brand);margin:0}
.odx-dlg textarea{width:100%;min-height:64px;padding:8px 10px;border:1px solid var(--sp-line-2);border-radius:8px;font:inherit;font-size:16px;resize:vertical;box-sizing:border-box}
.odx-dlg textarea[hidden]{display:none}
@media (max-width:600px){
  dialog.odx-dlg{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:14px 14px 0 0;max-height:88dvh}
  .odx-dlg .odx-df .sp-btn{flex:1 1 0}
}

/* A: แถวป้ายข้อมูลบิลใต้สถานะ · หัวอยู่คอลัมน์ซ้าย กล่องยอดเงินขวา */
.odx .odx-chips{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0}
.odx .odx-chips .odx-chip{font-size:12px;line-height:20px;color:var(--sp-ink-2)}
.odx .nbl-hero.odx-hero-a{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0}
.odx .nbl-hero.odx-hero-a .nbl-hl{padding:12px 14px 2px}
.odx .nbl-hero.odx-hero-a .nbl-hr{display:flex;flex-direction:column;gap:0}
.odx .nbl-hero.odx-hero-a .nbl-nx{border-radius:0}
.odx .nbl-hero.odx-hero-a .odx-hacts{order:-1;padding:8px 14px}
@media (min-width:1024px){
  .odx .nbl-hero.odx-hero-a .nbl-hl{padding:16px 20px 4px}
  .odx .nbl-hero.odx-hero-a .odx-hacts{position:absolute;top:12px;right:16px;padding:0}
  .odx .nbl-hero.odx-hero-a{position:relative}
  .odx .nbl-hero.odx-hero-a .nbl-hr{align-self:stretch}
  .odx .nbl-hero.odx-hero-a .nbl-cp{margin-right:250px}
}
.odx .nbl-mh .sp-btn{margin-left:auto}
.odx .nbl-side-b .nbl-mh{display:flex}
.odx .npy-kv.odx-plines{gap:8px 10px}
.odx .npy-kv b.odx-pline{font-weight:400}
.odx .odx-psum{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:2px 10px;font-variant-numeric:tabular-nums}
.odx .odx-psum .is-mute{color:var(--sp-mute)}
.odx .odx-psum b.is-due{color:var(--sp-bad)}
.odx .odx-psum b.is-zero{color:var(--sp-ok)}
.odx .odx-psum .odx-warn{color:var(--sp-wait)}
.odx-dlg .odx-dh4{margin:4px 0 0;font-size:14px;font-weight:700}
/* ---------- แถวรวมร้าน (แบบ A1: แถวเดียวต่อร้าน) ---------- */
.odx .odx-mbtn.sp-btn{min-height:28px;padding:0 10px;font-size:12.5px;font-weight:600}
.odx .odx-sm{font-variant-numeric:tabular-nums}
/* 1: แถวเดียวต่อร้าน */
.odx .odx-sfl{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 10px}
.odx .odx-sfl .odx-mbtn{margin-right:auto}
.odx .odx-slab{font-weight:700;color:var(--sp-ink)}
.odx .xl-t tr.is-sone td{border-top:1px dashed var(--sp-line-2);padding-top:8px;padding-bottom:8px}
.odx .xl-t tr.is-sone td .odx-sm{white-space:normal}
/* ชื่อสินค้า (pro_name): ไทยบรรทัดแรก จีนตัวเล็กเทาบรรทัดสอง · ตัวเลือกทุกตัวคั่นด้วยจุด */
.odx .odx-pn a.odx-nm{display:flex;flex-direction:column;gap:1px;min-width:0}
.odx .odx-pn .odx-cnn{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;color:var(--sp-mute);white-space:normal;word-break:break-all}
.odx .odx-opts{display:inline;color:var(--sp-ink-2);white-space:normal}
.odx .xl-t td.is-w-opt{white-space:normal;line-height:1.4}

/* ---------- ตารางสินค้า: แถบชื่อร้าน → หัวคอลัมน์ของร้าน (ติดรายการ) · ตัวเปลี่ยนภาษา · ตัวเรียง (3 พ.ย. 2569) ---------- */
/* หัวคอลัมน์: พื้นน้ำเงินจางโทนเดียวกับหน้า 1688 (เจ้าของอนุญาตเฉพาะแถวหัวคอลัมน์) */
.odx .xl-t thead th,.odx .xl-t tr.odx-hrow th{background:var(--npy-c2,#eaf1ff);color:var(--npy-navy,#0b2a6e);font-size:13px;font-weight:700;height:38px;border-bottom:1.5px solid #c9d8f5;border-right-color:#d6e2f7}
.odx .xl-t tr.odx-hrow:hover th{background:var(--npy-c2,#eaf1ff)}
.odx .xl-t thead th.is-sort,.odx .xl-t tr.odx-hrow th.is-sort{background:#dce8fd;color:#0b2a6e}
.odx .xl-t .xl-sort{color:inherit;font-weight:700}
.odx .xl-t .xl-sort i{color:#7f97c4}
.odx .xl-t th.is-sort .xl-sort i{color:#1748b8}
.odx .xl-t tr.odx-hrow th.is-r .xl-sort{flex-direction:row}
/* ตัวเปลี่ยนภาษา (segmented) ในหัวการ์ด */
.odx .nbl-bh{flex-wrap:wrap}
.odx .odx-seg{display:inline-flex;margin-left:auto;border:1px solid var(--sp-line-2);border-radius:8px;overflow:hidden}
.odx .odx-seg button{min-width:44px;height:28px;padding:0 10px;border:0;border-left:1px solid var(--sp-line-2);background:var(--sp-card);color:var(--sp-ink-2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.odx .odx-seg button:first-child{border-left:0}
.odx .odx-seg button[aria-pressed="true"]{background:#1748b8;color:#fff}
.odx .nbl-bh .odx-seg + .nbl-bhs{margin-left:10px}
.odx .odx-sb{margin:0}
@media (max-width:1023px){.odx .odx-seg{margin-left:0}.odx .nbl-bh .odx-seg + .nbl-bhs{margin-left:auto}}
/* เลขออเดอร์ร้านจีนในแถบชื่อร้าน */
.odx .odx-ord{display:inline-flex;align-items:center;gap:4px;min-width:0;font-size:13px}
.odx .odx-ord > small{color:var(--sp-ink-2)}
.odx .odx-ord .odx-lk.hx-clip{max-width:140px}
.odx .odx-cpi{display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:none;cursor:pointer}
.odx .odx-cpi img{width:14px;height:14px}
.odx .odx-chip.is-okc{border-color:var(--sp-ok);color:var(--sp-ok);font-weight:600}
@media (max-width:1023px){.odx .odx-ord{flex-wrap:wrap}.odx .odx-ord .odx-lk.hx-clip{max-width:96px}.odx .odx-shop{min-width:0}}
.odx .odx-tv{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px}.odx .odx-stmt .odx-chip.is-cod{margin:0 4px 0 0}


/* ---------- เฉพาะหน้าจริงบนเว็บเก่า ---------- */
.odx .nbl-nx.odx-note span{white-space:pre-line}
.odx .odx-legacy{min-width:0}
.odx .odx-legacy #odt-root{gap:14px}
.odx .odx-legacy #odt-root:empty{display:none}
.odx #odx-notes{display:none}
.odx-dlg .odx-olist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border:1px solid var(--sp-line);border-radius:10px}
.odx-dlg .odx-olist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px 10px;font-size:13px}
.odx-dlg .odx-olist li + li{border-top:1px solid var(--sp-line)}
.odx-dlg .odx-olist small{grid-column:1;color:var(--sp-mute)}
.odx-dlg .odx-olist .odx-oq{grid-column:2;grid-row:1;font-variant-numeric:tabular-nums}
.odx .odx-pn > div{overflow:hidden}
.odx .odx-hship{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.3}
.odx .odx-hship small.odx-sm{display:block;font-weight:400}
/* จอคอมเล็ก (เมนูซ้ายกินที่) ย่อช่องชื่อ/ตัวเลือกไม่ให้ตารางล้น */
@media (min-width:1024px) and (max-width:1279px){.odx .odx-pn{min-width:160px}.odx .xl-t .is-w-opt{width:118px;max-width:118px}.odx .xl-t .odx-oclip{max-width:100px}}

/* ---------- มือถือเป็นตารางย่อ (เจ้าของสั่ง 3 พ.ย. 2569 "ทุกความกว้างเป็นตาราง") ---------- */
.odx .odx-pn .odx-more2{flex:0 0 auto;align-self:flex-start;margin-left:auto;width:28px;height:28px}
@media (max-width:1023px){
  .odx .xl-t.is-prod .is-w-seq{width:30px;padding-left:6px;padding-right:4px}
  .odx .xl-t.is-prod .is-w-q{width:44px}
  .odx .xl-t.is-prod .is-w-num{width:74px}
  .odx .xl-t.is-prod .is-w-rf{width:62px}
  .odx .xl-t.is-prod tr > :first-child{padding-left:6px}
  .odx .xl-t.is-prod .odx-pn{gap:8px}
  .odx .xl-t.is-prod .odx-pn img,.odx .xl-t.is-prod .odx-pn .odx-im{width:40px;height:40px}
  .odx .odx-rfm{display:none}
  .odx .xl-t.is-prod .xl-sort{font-size:12px}
}
@media (max-width:599px){.odx .xl-t.is-prod .odx-pn{flex-wrap:wrap}.odx .xl-t.is-prod .odx-pn img,.odx .xl-t.is-prod .odx-pn .odx-im{width:34px;height:34px}.odx .xl-t.is-prod .odx-pn > div{flex:1 1 90px}}

/* ---------- รายการนำเข้า (ตารางเดิม pt_import_table) เป็นตารางทุกความกว้าง ----------
   ปิดผังการ์ดของหน้าเดิม (container query imt) เฉพาะหน้านี้ · 600–1023 เลื่อนในกล่องตาราง ตรึงลำดับ+ห่อ · <600 ย่อคอลัมน์ */
.odx .odx-legacy #odt-root .odt-itwrap{container-type:normal;overflow-x:auto}
.odx .odx-legacy #odt-root .odt-itable{display:table;width:100%;min-width:0;border-collapse:collapse;table-layout:auto}
.odx .odx-legacy #odt-root .odt-itable thead{display:table-header-group}
.odx .odx-legacy #odt-root .odt-itable tbody{display:table-row-group}
.odx .odx-legacy #odt-root .odt-itable tfoot{display:table-footer-group}
.odx .odx-legacy #odt-root .odt-itable colgroup{display:table-column-group}
.odx .odx-legacy #odt-root .odt-itable tr,.odx .odx-legacy #odt-root .odt-itable tbody tr,.odx .odx-legacy #odt-root .odt-itable tfoot tr{display:table-row;position:static;padding:0;grid-template-areas:none}
.odx .odx-legacy #odt-root .odt-itable td,.odx .odx-legacy #odt-root .odt-itable th,.odx .odx-legacy #odt-root .odt-itable tbody td,.odx .odx-legacy #odt-root .odt-itable tfoot td{display:table-cell;position:static;margin:0;width:auto;min-height:0;padding:8px 10px;text-align:left;vertical-align:middle;border:0;border-bottom:1px solid var(--sp-line);border-right:1px solid var(--sp-line);background:var(--sp-card);font-size:13px}
.odx .odx-legacy #odt-root .odt-itable tbody td[data-l]::before,.odx .odx-legacy #odt-root .odt-itable tfoot td[data-l]::before{content:none}
.odx .odx-legacy #odt-root .odt-itable td.c-amt,.odx .odx-legacy #odt-root .odt-itable th.r,.odx .odx-legacy #odt-root .odt-itable td.c-dim,.odx .odx-legacy #odt-root .odt-itable td.c-how{text-align:right}
.odx .odx-legacy #odt-root .odt-itable td.i{color:var(--sp-mute);text-align:center;font-size:12.5px}
.odx .odx-legacy #odt-root .odt-itable thead th{background:var(--npy-c2,#eaf1ff);color:var(--npy-navy,#0b2a6e);font-weight:700;border-bottom:1.5px solid #c9d8f5;border-right-color:#d6e2f7;white-space:nowrap}
.odx .odx-legacy #odt-root .odt-itable tfoot td{font-weight:700;border-top:1.5px solid var(--sp-line-2)}
.odx .odx-legacy #odt-root .odt-itable tfoot td:empty{display:table-cell}
.odx .odx-legacy #odt-root .odt-itable .isub{display:block;white-space:nowrap;text-align:inherit}
.odx .odx-legacy #odt-root .odt-itable tr > :last-child{border-right:0}
@media (min-width:600px) and (max-width:1023px){
  .odx .odx-legacy #odt-root .odt-itable{min-width:880px}
  .odx .odx-legacy #odt-root .odt-itable td.i,.odx .odx-legacy #odt-root .odt-itable th:first-child{position:sticky;left:0;z-index:1}
  .odx .odx-legacy #odt-root .odt-itable td.c-box,.odx .odx-legacy #odt-root .odt-itable th:nth-child(2){position:sticky;left:36px;z-index:1}
  .odx .odx-legacy #odt-root .odt-itable td.i{min-width:36px;width:36px}
}
@media (max-width:599px){
  .odx .odx-legacy #odt-root .odt-itable colgroup{display:none}
  .odx .odx-legacy #odt-root .odt-itable td.c-box .ibox{display:block}
  .odx .odx-legacy #odt-root .odt-itable td.c-box .bn{word-break:break-all}
  .odx .odx-legacy #odt-root .odt-itable td.c-trk,.odx .odx-legacy #odt-root .odt-itable th:nth-child(3),
  .odx .odx-legacy #odt-root .odt-itable td.c-how,.odx .odx-legacy #odt-root .odt-itable th:nth-child(5),
  .odx .odx-legacy #odt-root .odt-itable td.c-act,.odx .odx-legacy #odt-root .odt-itable th:nth-child(8){display:none}
  .odx .odx-legacy #odt-root .odt-itable td,.odx .odx-legacy #odt-root .odt-itable th{padding:7px 6px;font-size:12.5px}
  .odx .odx-legacy #odt-root .odt-itable .isub{white-space:normal}
  .odx .odx-legacy #odt-root .odt-itable .ibox .th{display:none}
  .odx .odx-legacy #odt-root .odt-itable td.c-arr .tag{white-space:normal}
}
@media (max-width:599px){
  .odx .xl-t.is-prod tr.odx-hrow th{white-space:normal;font-size:11.5px;padding:4px 3px;line-height:1.2}
  .odx .xl-t.is-prod tr.odx-hrow .xl-sort{white-space:normal;font-size:11.5px}
  .odx .xl-t.is-prod tr.odx-hrow .xl-sort i{display:none}
  .odx .xl-t.is-prod td{font-size:12.5px;padding-left:4px;padding-right:4px}
  .odx .xl-t.is-prod .is-w-seq{width:24px}
  .odx .xl-t.is-prod .is-w-q{width:34px}
  .odx .xl-t.is-prod .is-w-num{width:66px}
  .odx .xl-t.is-prod .is-w-rf{width:52px}
  .odx .xl-t.is-prod tfoot tr.is-big td.is-w-num{font-size:14px}
  .odx .xl-t.is-prod tfoot tr.is-big td{font-size:13px}
  .odx .xl-t.is-prod .odx-sfl{justify-content:flex-start}
  .odx .xl-t.is-prod .odx-mbtn.sp-btn{padding:0 8px}
}
@media (max-width:599px){
  .odx .odx-legacy #odt-root .odt-itable td.c-arr .tag,.odx .odx-legacy #odt-root .odt-itable td.c-arr span{white-space:normal;font-size:11px;padding:2px 6px;line-height:1.3}
  .odx .odx-legacy #odt-root .odt-itable td.c-arr .shd-dlv{margin-top:3px}
  .odx .odx-legacy #odt-root .odt-itable .isub{font-size:11px}
  .odx .odx-legacy #odt-root .odt-itable td.c-box .bn{font-size:12.5px}
  .odx .odx-legacy #odt-root .odt-itable tfoot td{white-space:normal}
  .odx .odx-legacy #odt-root .odt-itable td.c-amt .amt{font-size:12.5px}
}
@media (max-width:599px){.odx .odx-legacy #odt-root .odt-itable tfoot td.c-trk,.odx .odx-legacy #odt-root .odt-itable tfoot td.c-how,.odx .odx-legacy #odt-root .odt-itable tfoot td.c-act,.odx .odx-legacy #odt-root .odt-itable tbody td.c-trk,.odx .odx-legacy #odt-root .odt-itable tbody td.c-how,.odx .odx-legacy #odt-root .odt-itable tbody td.c-act{display:none}}
@media (max-width:599px){.odx .odx-legacy #odt-root .odt-itable td,.odx .odx-legacy #odt-root .odt-itable th,.odx .odx-legacy #odt-root .odt-itable tbody td,.odx .odx-legacy #odt-root .odt-itable tfoot td{padding:6px 4px;font-size:12px}.odx .odx-legacy #odt-root .odt-itable td.c-arr .tag{padding:2px 4px}}
@media (max-width:599px){.odx .xl-t.is-prod .odx-mbtn.sp-btn{white-space:normal;min-height:26px;height:auto;padding:3px 6px;font-size:11.5px;line-height:1.2;text-align:left}}

/* ---------- ป้าย/ช่องหลายบรรทัด จอแคบ: ไม่ตัดบรรทัดจนกรอบล้น (3 พ.ย. 2569) ---------- */
.odx .odx-tshort{display:none}
.odx .odx-chip,.odx .sp-pill,.odx .odx-legacy #odt-root .odt-itable .tag{white-space:nowrap}
.odx .odx-pn small.odx-opt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:100%;overflow:hidden;white-space:normal;word-break:break-word;line-height:1.35}
.odx .odx-pn small.odx-opt .odx-opts{white-space:normal}
.odx .odx-pn small.odx-opt .odx-oclip{display:inline;max-width:none;overflow:visible;white-space:normal;text-align:left}
.odx .odx-pn .odx-tags{row-gap:3px}
@media (max-width:599px){
  .odx .odx-legacy #odt-root .odt-itable td.c-arr .tag,.odx .odx-legacy #odt-root .odt-itable td.c-arr .tag span{white-space:nowrap;font-size:11px;line-height:18px;padding:0 6px;display:inline-block}
  .odx .odx-legacy #odt-root .odt-itable td.c-arr .tag .odx-tfull{display:none}
  .odx .odx-legacy #odt-root .odt-itable td.c-arr .tag .odx-tshort{display:inline;padding:0}
  .odx .odx-legacy #odt-root .odt-itable td.c-arr .shd-dlv{display:block;margin-top:4px}
  .odx .odx-legacy #odt-root .odt-itable td.c-box .ibox{display:flex;flex-direction:column;gap:2px}
  .odx .odx-legacy #odt-root .odt-itable td.c-box .bt{display:flex;flex-direction:column;gap:2px}
  .odx .odx-legacy #odt-root .odt-itable td.c-dim{line-height:1.35}
  .odx .odx-legacy #odt-root .odt-itable td.c-dim .isub{margin-top:2px}
  .odx .odx-legacy #odt-root .odt-itable .amt{white-space:nowrap}
  .odx .odx-chip{font-size:11px;padding:0 5px}
}

/* ---------- จาก pt-ship-detail-xl.css (เว็บเก่า) ---------- */
/* ==========================================================================
   หน้าบิลนำเข้า shipment_detail.php โฉมใหม่ (เจ้าของผ่าน mockup แบบ A1 · 3 พ.ย. 2569 · _delivery/mockup_ship_detail_xl_20261103)
   ต่อจากชิ้นของหน้าบิลสั่งซื้อ A1 (css/pt-order-detail-xl.css .odx · อ่านอย่างเดียว) + pt-shop.css + css/pt-hist-xl.css
   ไฟล์เสริมไฟล์เดียว มีเฉพาะชิ้นที่บิลนำเข้าต้องใช้เพิ่ม ครอบด้วย .shx · ตัววาด js/pt-ship-detail-xl.js
   ========================================================================== */

/* รหัสท้ายเลขบิล (-EK -S -A -B -QC) ตัวเทาติดเลขบิล */
.shx .shx-sfx{margin-left:1px;color:var(--sp-mute);font-weight:600;cursor:help}

/* ขั้นตอน 4 ขั้น (ชิ้นกลาง .nbl-stp ออกแบบไว้ 5 ขั้น) */
.shx .nbl-stp.shx-s4{grid-template-columns:repeat(4,minmax(0,1fr))}
.shx .nbl-stp.shx-s4:before,.shx .nbl-stp.shx-s4>i{left:12.5%}
.shx .nbl-stp.shx-s4:before{right:12.5%}
.shx .nbl-stp.shx-s4>i.w1{width:25%}
.shx .nbl-stp.shx-s4>i.w2{width:50%}
.shx .nbl-stp.shx-s4>i.w3{width:75%}

/* กล่องยอดเงิน: บรรทัดยอดย่อ */
.shx .npy-kv.shx-plines b{font-weight:600}
.shx .npy-kv b.is-mute{color:var(--sp-mute);font-weight:400}

/* ป้ายสถานะห่อ (ต่อจาก .odx-chip) */
.shx .odx-chip.shx-info{border-color:var(--sp-info);color:var(--sp-info);font-weight:600}
.shx .odx-chip.shx-due{border-color:var(--sp-bad);color:var(--sp-bad);font-weight:600}
.shx .odx-chip.is-wait{font-weight:600}
.shx .odx-chip.shx-xpt{margin-left:6px;font-size:11px;line-height:16px}
.shx .odx-chip.shx-subc{margin-left:6px;font-weight:600}
.shx .shx-arr{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px}
.shx .shx-arr.is-m{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 6px;margin-top:2px}
.shx .shx-arr.is-m .odx-sm{display:inline}

/* ตารางรายการนำเข้า: ไม่ตัดบรรทัด กว้างไม่พอเลื่อนได้เฉพาะในกล่องตาราง · ลำดับ+ห่อ ตรึงซ้าย */
.shx .odx-tcard > .xl-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.shx .xl-t.shx-t td,.shx .xl-t.shx-t th{white-space:nowrap}
.shx .xl-t .shx-w-kg{width:84px}
.shx .xl-t .shx-w-sm{width:92px}
.shx .xl-t .shx-w-ck{width:40px}
.shx .xl-t .shx-w-n2{width:112px}
.shx .shx-box > div{white-space:nowrap}
.shx .shx-bn{border:0;background:none;padding:0;font:inherit;cursor:pointer;text-align:left}
.shx .shx-bn:hover .xl-trk{text-decoration:underline}
@media (max-width:1023px){.shx .shx-box > div{white-space:normal}.shx .shx-ph{width:34px;height:34px}.shx .shx-box{gap:8px}.shx .shx-bn .xl-trk::after{content:" ⋯";color:var(--sp-mute);font-weight:400}}
.shx .shx-l1{flex-wrap:nowrap}
.shx .shx-ext .odx-sm{white-space:normal;text-align:right;max-width:120px}
@media (min-width:1024px){
  .shx .xl-t.shx-t{font-size:13px}
  .shx .xl-t.shx-t th,.shx .xl-t.shx-t td{padding-left:7px;padding-right:7px}
  .shx .xl-t.shx-t .is-w-num,.shx .xl-t.shx-t .shx-w-n2{width:auto}
  .shx .xl-t .shx-box .odx-sm,.shx .xl-t .shx-arr .odx-sm{white-space:nowrap}
  .shx .xl-t.shx-t .shx-stk1{position:sticky;left:0;z-index:2}
  .shx .xl-t.shx-t .shx-stk2{position:sticky;left:52px;z-index:2;box-shadow:1px 0 0 var(--sp-line)}
}
@media (max-width:1023px){
  .shx .xl-t.shx-t .shx-stk2{white-space:normal}
}
/* ช่องห่อ: รูปกล่อง 40 + ใบแปะ + รหัสย่อย + × n กล่อง · ประเภท · ขึ้นตู้ */
.shx .shx-box{display:flex;align-items:center;gap:10px;min-width:0}
.shx .shx-box > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.shx .shx-l1{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0}
.shx .shx-ph{position:relative;flex:none;display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--sp-line);border-radius:8px;background:var(--sp-bg);color:var(--sp-mute);font-size:16px;cursor:zoom-in}
.shx .shx-ph.is-none{cursor:help}
.shx .shx-ph img{width:100%;height:100%;border-radius:7px;object-fit:cover}
.shx .shx-phn{position:absolute;right:-5px;bottom:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--sp-ink);color:#fff;font-size:10.5px;font-style:normal;font-weight:700;line-height:17px;text-align:center}
.shx .shx-kb,.shx .shx-more{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:0 7px;height:20px;border:1px solid var(--sp-line-2);border-radius:999px;background:none;color:var(--sp-info);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
.shx .shx-kb[aria-expanded="true"] .fa,.shx .shx-more[aria-expanded="true"] .fa{transform:rotate(180deg)}
/* เลขพัสดุจีนหลายเลข */
.shx .shx-trk{display:inline-flex;flex-wrap:wrap;align-items:center}
.shx .shx-trkall{display:flex;flex-direction:column;flex-basis:100%;gap:2px;margin-top:3px}
.shx .shx-trkall[hidden]{display:none}
/* แถวรายกล่องในห่อ */
.shx .xl-t tr.shx-krow td{height:34px;color:var(--sp-ink-2);font-size:12.5px}
.shx .shx-kid{padding-left:50px}
.shx .shx-kid .odx-seq{margin-right:6px}
.shx .shx-ext{display:inline-flex;flex-direction:column;align-items:flex-end}
.shx .shx-ft{display:inline-flex;flex-direction:column}
@media (max-width:1023px){.shx .shx-kid{padding-left:0}.shx .shx-ft .odx-sm{display:block}}

/* แถบกรอง (ของเดิม) */
.shx .xl-sb.shx-fil{display:flex;flex-wrap:wrap;margin:0}
.shx .shx-fil .xl-in{flex:1 1 280px;max-width:420px;height:36px}
.shx .shx-fil .xl-in input{font-size:16px}
@media (min-width:1024px){.shx .shx-fil .xl-in input{font-size:13.5px}}

/* กล่อง: ชำระรายพัสดุ · รูปกล่อง · ตัวเลือกวิธีรับ */
.odx-dlg .shx-ck{width:18px;height:18px;margin:0;accent-color:var(--sp-brand)}
.odx-dlg .shx-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.odx-dlg .shx-gal figure{margin:0;display:flex;flex-direction:column;gap:4px}
.odx-dlg .shx-gal img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;border:1px solid var(--sp-line);background:var(--sp-bg)}
.odx-dlg .shx-gal figcaption{font-size:12px;color:var(--sp-ink-2)}
.odx-dlg .odx-rs label span{display:flex;flex-direction:column}
.odx-dlg .sp-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

/* เอกสาร A4 (template เดิม) ไม่กินที่บนจอ */
.pt-ui.shx-print{margin:0;padding:0;min-height:0}
/* ห่อที่ยังไม่ถึงไทย ยอดจาง · ห่อหาย/บิลยกเลิก แถวจาง */
.shx .xl-t .shx-mut{color:var(--sp-mute);font-weight:400}
.shx .odx-chip.shx-forgot{border-color:var(--sp-bad);color:var(--sp-bad)}
@media (max-width:1023px){.shx .xl-t tfoot tr.is-big td.is-w-num{font-size:16px}.shx .xl-t .is-w-num{width:auto}.shx .shx-l1{flex-wrap:wrap}.shx .shx-kb{margin-left:0}.shx .xl-t.shx-t .shx-w-kg{width:auto}.shx .xl-t.shx-t thead th .xl-sort{white-space:normal}.shx .xl-t.shx-t th,.shx .xl-t.shx-t td{padding-left:6px;padding-right:6px}}
/* คิว · ชิ้น: จอกว้างตั้งแต่ 1440 เป็นคอลัมน์ของตัวเอง · แคบกว่านั้น (รวมจอคอม 1280 ที่มีเมนูซ้าย และมือถือ) เป็นบรรทัดใต้ กก. ในคอลัมน์เดียวกัน */
.shx .xl-t.shx-t tr > .shx-w-seq{width:52px;min-width:52px;max-width:52px;box-sizing:border-box;padding-left:4px;padding-right:4px}
@media (max-width:1439px){.shx .xl-t .shx-xw{display:none}}
@media (min-width:1440px){.shx .xl-t .shx-nw{display:none}}
/* ช่องห่อ: บรรทัดย่อยตัดบรรทัดได้เฉพาะระหว่างท่อน ไม่ตัดกลางคำ/ตัวเลข · ระยะบรรทัดพอ (เจ้าของแจ้งจากมือถือ PT129580 · 3 พ.ย. 2569) */
.shx .xl-t .shx-box .shx-ln{white-space:normal;line-height:1.5}
.shx .shx-nb{white-space:nowrap}
.shx .shx-box > div{gap:3px}
/* ป้ายสถานะไม่ตัดบรรทัด กรอบไม่ล้น ไม่ทับบรรทัดข้างบน */
.shx .shx-arr .odx-chip{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
.shx .shx-arr{max-width:100%;min-width:0}
@media (max-width:1023px){
  .shx .shx-arr.is-m{margin-top:3px}
  .shx .shx-arr.is-m .odx-chip{font-size:11px;line-height:18px;padding:0 7px}
  .shx .shx-ph.is-none{display:none}
  .shx .shx-ph{width:32px;height:32px}
  .shx .xl-t .shx-box .shx-l1{row-gap:3px}
  .shx .xl-t.shx-t td{padding-top:11px;padding-bottom:11px;vertical-align:top}
  .shx .xl-t.shx-t td.is-r{vertical-align:middle}
}
.shx .shx-how{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.3}
.shx .shx-how .odx-sm{line-height:1.3}
.shx .xl-t.shx-t th .xl-sort{white-space:nowrap}
/* จอ 1024–1439 (รวมจอคอม 1280 ที่มีเมนูซ้าย): ไม่มีคอลัมน์ ⋯ · เลขห่อมี ⋯ ต่อท้ายให้รู้ว่ากดได้ · ยอดรวมท้ายตารางเล็กลงให้พอดีช่อง */
@media (min-width:1024px) and (max-width:1439px){.shx .shx-bn .xl-trk::after{content:" ⋯";color:var(--sp-mute);font-weight:400}.shx .xl-t.shx-t tfoot tr.is-big td.is-w-num{font-size:18px}.shx .xl-t.shx-t .shx-arr .odx-chip{font-size:11.5px}}
/* หัวบิลจอ 1024–1439: กล่องหัวแคบ ปุ่มพิมพ์/ใบเสร็จ/อื่นๆ ลงมาอยู่แถวของตัวเอง เลขบิลไม่ถูกบีบตัดบรรทัด */
.shx .nbl-ht .npy-num{white-space:nowrap}
@media (min-width:1024px) and (max-width:1439px){.shx .nbl-hero.odx-hero-a .nbl-cp{margin-right:0}.shx .nbl-hero.odx-hero-a .odx-hacts{position:static;justify-content:flex-start;padding:6px 20px 10px}}
.shx .shx-ts{display:none}
@media (max-width:1439px){.shx .shx-tl{display:none}.shx .shx-ts{display:inline}}

/* ---------- เฉพาะเว็บใหม่ ---------- */
.shx .shx-fa{display:none}   /* เว็บใหม่ไม่มีชุดไอคอน fa · ปุ่มเหลือข้อความ */
.hxl.shx{display:flex;flex-direction:column;gap:14px}