/* GMT แอปพนักงาน — mobile-first, โทนเขียว Green Moto */
/* สีทั้งหมดมาจาก /theme.css (แหล่งเดียว) — เดิมประกาศ :root ซ้ำที่นี่ ทำให้เขียวเพี้ยนคนละเฉดกับหน้าย่อย */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
input { font: inherit; }
[hidden] { display: none !important; }

/* ── login ── */
#view-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card {
  background: var(--card); border-radius: 16px; padding: 32px 24px;
  width: 100%; max-width: 360px; text-align: center;
  box-shadow: 0 4px 24px rgba(20, 71, 44, .12);
}
.login-card .logo { font-size: 42px; }
.login-card h1 { margin: 4px 0 0; font-size: 24px; color: var(--green); }
.login-card .sub { margin: 2px 0 20px; color: var(--mut); font-size: 14px; }
.login-card label { display: block; text-align: left; font-size: 13px; color: var(--mut); margin-bottom: 12px; }
.login-card input {
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; font-size: 16px;
}
.login-card input:focus { outline: 2px solid var(--green); border-color: transparent; }
.login-card button[type=submit] {
  width: 100%; padding: 12px; margin-top: 4px; border: 0; border-radius: 10px;
  background: var(--green); color: #fff; font-size: 16px; font-weight: 600;
}
.login-card button[type=submit]:disabled { opacity: .6; }
.err { color: var(--err); font-size: 14px; margin: 10px 0 0; }

/* ── กล่องถาม AI บน Home ── */
.askbox { margin: 14px 14px 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.askrow { display: flex; gap: 8px; }
.askrow input { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.askrow button { border: 0; border-radius: 10px; background: var(--green); color: #fff; font-weight: 700; padding: 0 18px; }
.askrow button:disabled { opacity: .55; }
#askLog:not(:empty) { margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.ask-q { align-self: flex-end; background: var(--green-pale); border-radius: 12px 12px 2px 12px; padding: 8px 12px; font-size: 14px; max-width: 85%; }
.ask-a { align-self: flex-start; background: var(--bg); border-radius: 12px 12px 12px 2px; padding: 8px 12px; font-size: 14px; max-width: 92%; white-space: pre-wrap; }

/* ── หน้า Home: เมนูหลัก ── */
#view-home { max-width: none; margin: 0; min-height: 100vh; padding: 0; }
.homegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px 14px; }
.tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 16px 16px; text-align: left; min-height: 128px;
  box-shadow: 0 2px 10px rgba(20, 71, 44, .06);
}
.tile:active { background: var(--green-pale); }
.tile-ic { font-size: 30px; line-height: 1; }
.tile-t { font-size: 16.5px; font-weight: 700; color: var(--green-dark); margin-top: 4px; }
.tile-s { font-size: 12px; color: var(--mut); line-height: 1.45; }
.tile-badge {
  display: inline-block; background: var(--err); color: #fff; font-weight: 700;
  font-size: 11px; border-radius: 999px; padding: 1px 8px; margin-left: 2px;
}
@media (min-width: 560px) { .homegrid { grid-template-columns: 1fr 1fr; padding: 24px 16px; } }

/* ── โครงหน้าหลัก ── */
#view-main, #view-bill, #view-bills,
#view-docs, #view-report, #view-inv, #view-label,
#view-users, #view-reqs, #view-linecust, #view-cancels, #view-exim,
#view-pricelist, #view-market { max-width: 1200px; margin: 0 auto; padding-bottom: 40px; }
/* จัดการคำสั่งซื้อ = เต็มความกว้างจอ (แบบ BigSeller) */
#view-orders { max-width: none; margin: 0; padding: 0 14px 40px; }
.ordlayout { display: flex; gap: 12px; align-items: flex-start; }
/* ⑱ แถบแท็บซ้ายเลื่อนหาย (เจ้าของทัก 25 ส.ค.69 "scroll ลงมาแล้วเมนูของขาดถูกเลื่อนหายไป")
   จอนี้มีหัวจอ sticky **ซ้อนกันสองชั้น** ที่กินขอบบนอยู่ก่อนแล้ว:
     ① #gnav (แถบเมนูบนสุดของแอป) — position:sticky top:0 · สูง 56px (.appbar-in height)
     ② .topbar ของ #view-orders — position:sticky top:56px **z-index:10** สูงอีก ~48px
   ⇒ ขอบบนที่ว่างจริง = 56 + ความสูง .topbar ≈ 104px · ของเดิมตั้ง top:66px (เลขจากยุคที่ยังไม่มีชั้น ②)
     แถบเลยไปหยุดใต้ .topbar ซึ่ง z-index สูงกว่า = แท็บบนสุด (⛔ ของขาด) ถูกทับหายไปเลย
   ⇒ ค่าจริงวัดตอน runtime แล้วยัดเป็นตัวแปร CSS (ordSyncStickyTop ใน app.js — วัด .topbar จริง
     ไม่ฮาร์ดโค้ดเลขซ้ำสองที่) · เลขในนี้เป็นค่าสำรองตอน JS ยังไม่ทำงาน = 56 + 48 + เว้น 8
   max-height + overflow-y: แถบยาวเกินจอ (แท็บ 13 อัน + เส้นคั่น) ต้องเลื่อนในตัวเองได้ ไม่ใช่ล้นออกไป
   ⚠ overscroll-behavior:contain = เลื่อนสุดแถบแล้วห้ามไปลากหน้าหลักต่อ (ต้นเหตุอาการจอสั่น) */
.ordside { flex: none; width: 198px; position: sticky; top: var(--ordside-top, 112px); max-height: var(--ordside-max, calc(100vh - 124px)); overflow-y: auto; overscroll-behavior: contain; background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 7px; }
.ordside button { display: flex; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); padding: 8px 10px; border-radius: 9px; cursor: pointer; text-align: left; }
.ordside button:hover { background: var(--bg); }
.ordside button.on { background: var(--green-pale); color: var(--green-dark); font-weight: 800; }
.ordside .cnt { color: var(--mut); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: auto; }
/* ไอคอนนำหน้าชื่อคิว — เกาะติดตัวอักษร (ไม่งั้น space-between ดันชื่อไปกลางปุ่ม) */
.ordside button { justify-content: flex-start; }
.ordside button .ic { margin-top: 1px; }
.ordside button.on .cnt { color: var(--green-dark); }
.ordside .sep { border-top: 1px solid var(--line); margin: 5px 4px; }
.ordmain { flex: 1; min-width: 0; }
.ordbulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--green-pale); border: 1.5px solid var(--green); border-radius: 11px; padding: 8px 12px; margin: 0 12px 8px; font-size: 13.5px; }
.ordlisthead { display: flex; align-items: center; gap: 10px; margin: 0 12px 8px; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; font-size: 13.5px; }
.ordlisthead input[type=checkbox] { width: 17px; height: 17px; vertical-align: -3px; }
.ordlisthead .chip { text-decoration: none; }
/* หน้าต่างยืนยัน + นัดรถเข้ารับ (แบบ Big — เปลือกรอ backend RTS) */
.mpcf-ovl { position: fixed; inset: 0; background: rgba(15,25,18,.55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 80; }
.mpcf { background: #fff; border-radius: 15px; width: min(640px, 96vw); max-height: 90vh; overflow: auto; padding: 18px; }
.mpcf h3 { margin: 0 0 12px; font-size: 17px; }
.mpcf-grp { border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; margin-bottom: 10px; }
.mpcf-h { margin-bottom: 8px; }
.mpcf-row { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.mpcf-row label { display: flex; flex-direction: column; gap: 4px; color: var(--mut); font-weight: 600; }
.mpcf-row select, .mpcf-row input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font: inherit; background: #fff; }
.ord-chk { width: 17px; height: 17px; flex: none; align-self: center; }
@media (max-width: 900px) {
  .ordlayout { display: block; }
  /* จอแคบ = แถบนอน ไม่เกาะขอบบนแล้ว ⇒ ต้องปลด max-height ของทรง sticky ทิ้ง (ไม่งั้นแถวเดียวโดนบีบ) */
  .ordside { position: static; width: auto; display: flex; overflow-x: auto; overflow-y: visible; max-height: none; gap: 2px; margin-bottom: 10px; padding: 5px; }
  .ordside button { white-space: nowrap; width: auto; }
  .ordside .sep { display: none; }
}

/* ── หน้าลูกค้า: master-detail (ลิสต์ซ้าย · รายละเอียดขวา บน desktop) ── */
#view-custs { max-width: 1200px; margin: 0 auto; padding-bottom: 40px; }
.cust-detail-hint { color: var(--mut); text-align: center; padding: 48px 16px; font-size: 14px; }
.pcard.sel, .doccard.sel { outline: 2px solid var(--green); }
.custs-detail-col { display: none; } /* มือถือ: ใช้ modal แทน (โชว์เฉพาะ desktop) */
@media (min-width: 900px) {
  .custs-detail-col { display: block; }
  .custs-layout { display: flex; gap: 16px; align-items: flex-start; padding: 8px 10px 0; }
  .custs-list-col { flex: 0 0 400px; min-width: 0; }
  .custs-list-col .searchwrap { position: static; padding: 0 0 4px; }
  .custs-list-col .list { padding: 0; }
  .custs-detail-col { flex: 1; min-width: 0; position: sticky; top: 104px; max-height: calc(100vh - 116px); overflow-y: auto; }
  /* ฟอร์มลูกค้าเมื่อ dock ขวา = กล่องปกติ ไม่ใช่ overlay */
  #custDetailCol #custSheet {
    position: static; max-width: none; width: auto; border-radius: 14px;
    max-height: none; padding: 16px; border: 1px solid var(--line);
    box-shadow: 0 2px 10px rgba(20, 71, 44, .07);
  }
  #custDetailCol #custSheet .closebtn { display: none; }
}

/* ── หน้าออเดอร์ Platform (marketplace) ── */
.mkt-sum { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px 14px 4px; }
@media (min-width: 720px) { .mkt-sum { grid-template-columns: 1fr 1fr; } }
.mkt-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: 0 2px 8px rgba(20,71,44,.05); }
.mkt-card-h { font-size: 15px; font-weight: 700; color: var(--green-dark); display: flex; align-items: center; gap: 8px; }
.mkt-rows { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 8px; }
.mkt-rows > div { background: var(--bg); border-radius: 8px; padding: 6px 8px; text-align: center; }
.mkt-rows span { display: block; font-size: 11px; color: var(--mut); }
.mkt-rows b { font-size: 15px; color: var(--green-dark); }
.mkt-rows small { display: block; font-size: 10.5px; color: var(--mut); }
.mkt-net { margin-top: 8px; font-size: 13px; }
.mkt-net b { color: var(--green-dark); }
.mkt-sync { margin-top: 4px; font-size: 11px; color: var(--mut); }
.mkt-alert { margin: 10px 14px 0; border-radius: 10px; padding: 9px 12px; font-size: 13px; font-weight: 600; }
.mkt-alert.err { background: #fdecea; color: var(--err); }
.mkt-alert.warn { background: #fff3d6; color: var(--amber); cursor: pointer; }
.mkt-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--err); display: inline-block; flex-shrink: 0; }
.mkt-dt { flex: 1; font-size: 11.5px; color: var(--mut); }
.mkt-dt input { display: block; width: 100%; margin-top: 3px; padding: 7px 9px; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.mkt-settle { background: var(--green-pale); border: 1px solid #c4dccf; border-radius: 10px; padding: 8px 12px; font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; }
.mkt-settle b { font-size: 15px; }

/* ── การ์ดลากไฟล์บิล (บนสุดหน้ารับบิล — อ้างอิงของเดิม) ── */
.billdrop { padding: 12px 14px 0; }
.manual-new { display: block; width: 100%; margin: 8px 0 4px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.manual-new:hover { border-color: var(--green); color: var(--green); background: var(--green-pale); }
.drop {
  border: 2px dashed var(--line); border-radius: 12px; padding: 20px 16px;
  text-align: center; color: var(--mut); font-size: 14px; cursor: pointer;
  background: var(--card); transition: border-color .15s, background .15s, color .15s;
}
.drop u { color: var(--green); text-decoration-thickness: 1.5px; }
.drop small { display: block; margin-top: 5px; font-size: 12px; color: var(--mut); }
.drop.hot { border-color: var(--green); background: var(--green-pale); color: var(--green-dark); }
.drop.hot small { color: var(--green-dark); }
.drop.scanning { border-style: solid; border-color: var(--green); background: var(--green-pale); color: var(--green-dark); cursor: default; animation: dropPulse 1.1s ease-in-out infinite; }
.drop.scanning small { color: var(--green-dark); }
@keyframes dropPulse { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
.topbar {
  position: sticky; top: 56px; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  background: var(--card); color: var(--ink); padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}
.topbar .brand { font-weight: 700; font-size: 16px; color: var(--green-dark); }
.topbar .whoami { flex: 1; font-size: 13px; color: var(--mut); text-align: right; }
.topbar .ghost {
  background: var(--green-pale); color: var(--green-dark); border: 0;
  border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600;
}

.bl-net { font-size: 12.5px; color: var(--green-dark); font-weight: 700; white-space: nowrap; }
/* การ์ดลากไฟล์ใบกำกับที่ตามมา (หน้ารายละเอียดบิลซื้อ) */
.attach-drop { margin-top: 8px; border: 2px dashed var(--line); border-radius: 12px; padding: 16px; text-align: center; font-size: 14px; color: var(--ink); cursor: pointer; background: var(--bg); }
.attach-drop small { display: block; font-size: 12px; color: var(--mut); margin-top: 3px; }
.attach-drop:hover, .attach-drop.hot { border-color: var(--green); background: var(--green-pale); }
.attach-drop.scanning { border-color: var(--amber); color: var(--amber); font-weight: 700; pointer-events: none; }
.attach-wrap { margin-top: 8px; }
.attach-modes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 6px; }
.attach-mode { font-size: 13px; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 5px; }
.attach-mode small { color: var(--mut); }
.attach-wrap .attach-drop { margin-top: 0; }
.nav-lite .appmain, .nav-lite .apphamb { display: none !important; }
.custprice.buyer-warn { border: 1.5px solid var(--amber); background: #fdf3d3; }
.custprice.buyer-warn .cp-head { color: var(--amber); }
.ocr-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.ocr-row input[type="file"] { flex: 1; min-width: 0; }
.ocr-row .addcart { flex: none; white-space: nowrap; }
.viewbill-btn { display: inline-block; margin: 2px 0 10px; padding: 9px 16px; border: 1px solid var(--green); background: var(--green-pale); color: var(--green-dark); border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.cp-detail { display: block; font-size: 12px; color: var(--mut); font-weight: 400; margin-top: 1px; }
.sup-row { display: flex; gap: 8px; align-items: center; }
.sup-row input { flex: 1; min-width: 0; }
.sup-row .chip { flex: none; white-space: nowrap; }
/* badge ประเภทบิลในลิสต์รวม + ตารางย่อ (รายละเอียดบิลค่าใช้จ่าย) */
.badge.kd-goods { background: var(--green-pale); color: var(--green-dark); }
.badge.kd-exp { background: #e2ecfa; color: #1e5aa8; }
table.mini { width: 100%; border-collapse: collapse; font-size: 13px; }
table.mini th { background: #f7faf8; color: var(--mut); font-size: 12px; text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.mini td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.mini .num { text-align: right; font-variant-numeric: tabular-nums; }
/* ฟอร์มค่าใช้จ่ายในโมดัลเปิดบิล — รายบรรทัด + ผังบัญชี */
.exp-row { display: grid; grid-template-columns: 1fr 92px 1.3fr auto auto auto; gap: 6px; align-items: center; margin-top: 6px; }
.exp-row input, .exp-row select, .exp-row .acct-btn { padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; background: #fff; min-width: 0; }
.exp-row .acct-btn { text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-row .acct-btn:hover { border-color: var(--green); }
.exp-row .acct-btn.acct-empty { border-color: var(--amber); background: #fdf7e3; }
.acctmenu { position: fixed; z-index: 60; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 26px rgba(10,25,17,.22); padding: 8px; max-height: 320px; }
.acctmenu input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; margin-bottom: 6px; }
.acctmenu #acctMenuList { overflow-y: auto; }
.acctmenu .cp-item { padding: 7px 8px; border-radius: 7px; cursor: pointer; font-size: 13.5px; }
.acctmenu .cp-item:hover { background: var(--green-pale); }
.exp-row .exp-amt { text-align: right; }
.exp-vc { display: flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; }
.exp-del { border: 1px solid var(--line); background: #fff; color: var(--err); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-family: inherit; }
@media (max-width: 720px){ .exp-row { grid-template-columns: 1fr 1fr; } }
/* รายการจับคู่ SKU ไม่ได้ (รับบิล) — ปุ่มจับคู่ต่อบรรทัด + picker inline */
.um-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; background: var(--card); }
.um-row.on { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.um-info { font-size: 13.5px; min-width: 0; }
.um-pick { border: 0; background: var(--green); color: #fff; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit; }
.um-row.on .um-pick { background: var(--green-pale); color: var(--green-dark); }
.um-picker { grid-column: 1 / -1; }
.um-picker .bf-pick, .bf-pick { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; font-family: inherit; background: var(--bg); }
.segtabs { display: flex; gap: 8px; padding: 12px 14px 2px; }
.segtab { flex: 1; border: 1px solid var(--line); background: var(--card); border-radius: 11px; padding: 11px; font-size: 15px; font-weight: 700; cursor: pointer; color: var(--ink); font-family: inherit; }
.segtab.on { background: var(--green); color: #fff; border-color: var(--green); }
.searchwrap { padding: 12px 14px 4px; background: var(--bg); position: sticky; top: 100px; z-index: 9; }
#searchBox {
  width: 100%; padding: 11px 14px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
#searchBox:focus { outline: 2px solid var(--green); border-color: transparent; }
.selrow { display: flex; gap: 8px; margin-top: 8px; }
.selrow select {
  flex: 1; min-width: 0; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
}
.selrow select:focus { outline: 2px solid var(--green); border-color: transparent; }
.chiprow { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.chip {
  border: 1px solid var(--line); background: var(--card); color: var(--mut);
  border-radius: 999px; padding: 5px 14px; font-size: 13px; white-space: nowrap;
}
.chip.on { background: var(--green); border-color: var(--green); color: #fff; }

.meta { padding: 6px 16px; font-size: 12.5px; color: var(--mut); }

/* ── รายการสินค้า ── */
.list { padding: 0 12px; display: flex; flex-direction: column; gap: 8px; }
.pcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; cursor: pointer;
}
.pcard:active { background: var(--green-pale); }
.pcard .pname { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.pcard .pline { margin-top: 2px; font-size: 12px; color: var(--mut); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pcard .pspec { margin-top: 3px; font-size: 12px; display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; color: var(--mut); }
.pcard .pspec .spx { color: var(--ink); font-weight: 600; background: var(--green-pale); border-radius: 6px; padding: 1px 8px; }
.badge {
  display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: var(--green-pale); color: var(--green); font-weight: 600;
}
.badge.set { background: #fff3d6; color: var(--amber); }
.badge.service { background: #e8e6fb; color: #4a3fae; }
.pricegrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px;
}
.pricegrid .pc { background: var(--bg); border-radius: 8px; padding: 4px 6px; text-align: center; }
.pricegrid .pc .t { font-size: 10px; color: var(--mut); }
.pricegrid .pc .v { font-size: 13.5px; font-weight: 700; color: var(--green-dark); }
.pricegrid.pack3 { grid-template-columns: repeat(3, 1fr); }
.pricegrid.pack3 .pc .v { font-size: 15px; }
/* โชว์ราคาเทียร์เดียว (เลือกจาก dropdown หน้าค้นหา) */
.pricegrid.one { grid-template-columns: 1fr; }
.pricegrid.one .pc.big { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; }
.pricegrid.one .pc.big .t { font-size: 12px; }
.pricegrid.one .pc.big .v { font-size: 18px; }

/* ── ใบราคาช่าง: การ์ดเลือกหมวด ── */
.pl-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
.pl-cat {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 14px; text-align: left; box-shadow: 0 2px 10px rgba(20, 71, 44, .06);
}
.pl-cat:active { background: var(--green-pale); }
.pl-cat .plc-t { font-size: 15.5px; font-weight: 700; color: var(--green-dark); }
.pl-cat .plc-s { font-size: 12px; color: var(--mut); }

.morebtn {
  display: block; margin: 14px auto; padding: 9px 26px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--green);
  font-weight: 600;
}
.empty { text-align: center; color: var(--mut); padding: 40px 0; }

/* ── modal รายละเอียด ── */
.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 25, 17, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  position: relative; background: var(--card); width: 100%; max-width: 720px;
  border-radius: 18px 18px 0 0; padding: 18px 16px 28px;
  max-height: 88vh; overflow-y: auto;
}
@media (min-width: 720px) {
  .modal { align-items: center; }
  .sheet { border-radius: 18px; }
}
.sheet-wide { max-width: 980px; }
/* ช่องกรอกการชำระเงิน (บิลซื้อ + ค่าใช้จ่าย) */
.paysec { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg); }
.paysec .d-sec { margin-top: 0; }
.seg2 { display: flex; gap: 6px; margin-bottom: 8px; }
.seg2b { flex: 1; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.seg2b.on { border-color: var(--green); background: var(--green-pale); color: var(--green-dark); }
.paygrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.paygrid label { display: flex; flex-direction: column; font-size: 12.5px; color: var(--mut); gap: 3px; }
.paygrid input, .paygrid select { padding: 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--card); color: var(--ink); }
@media (max-width: 560px) { .paygrid { grid-template-columns: 1fr; } }
.pay-whton { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); margin: 8px 0 4px; cursor: pointer; }
#payWhtBox { margin-top: 2px; }
.pay-whtprev { font-size: 12.5px; color: var(--mut); align-self: center; }
.pay-whtprev b { color: var(--ink); font-variant-numeric: tabular-nums; }
.closebtn {
  position: absolute; top: 10px; right: 10px;
  border: 0; background: var(--bg); color: var(--mut);
  width: 32px; height: 32px; border-radius: 999px; font-size: 15px;
}
.d-name { font-size: 17px; font-weight: 700; margin: 2px 36px 2px 0; line-height: 1.35; }
.d-sub { font-size: 12.5px; color: var(--mut); margin-bottom: 10px; }
.d-sec { font-size: 13px; font-weight: 700; color: var(--green); margin: 14px 0 6px; }
.bf-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.bf-tab { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 6px 11px; font-size: 13px; font-weight: 600; cursor: pointer; color: #3a423d; display: flex; align-items: center; gap: 7px; font-family: inherit; }
.bf-tab.on { background: var(--green); color: #fff; border-color: var(--green); }
.bf-tab span { opacity: .6; font-weight: 700; }
.bf-tab span:hover { opacity: 1; }
.mkt-filt { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 0 0 10px; }
.mkt-frow { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.mkt-frow:last-child { border-bottom: 0; }
.mkt-flab { flex: 0 0 66px; font-size: 12.5px; color: var(--mut); padding-top: 6px; }
.mkt-frow > .chiprow { flex: 1; margin: 0; gap: 6px; }
.mkt-frow-search { align-items: center; }
.mkt-frow-search input[type=search] { flex: 1; min-width: 160px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.mkt-custom { display: inline-flex; align-items: center; gap: 6px; }
.mkt-custom input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.chip .cnt { opacity: .65; margin-left: 3px; font-weight: 400; }
.chip.on .cnt { opacity: .95; }

/* ── shell home (top nav + dropdown + dashboard) ── */
/* sticky ต้องอยู่ที่ #gnav (ลูกตรงของ body) — เดิมใส่ที่ .appbar ซึ่งพ่อ (#gnav) สูงเท่าตัวแถบพอดี เลยไม่มีระยะให้เกาะ แถบหลุดตอน scroll */
#gnav { position: sticky; top: 0; z-index: 50; }
.appbar { background: var(--pri-d); color: #fff; }
.appbar-in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 4px; padding: 0 14px; height: 56px; }
.applogo { border: 0; background: none; padding: 0; cursor: pointer; margin-right: 8px; flex: none; }
.applogo img { height: 38px; display: block; border-radius: 5px; }
.appmain { display: flex; gap: 1px; overflow: visible; }
.appmain .mtab { background: none; border: 0; color: #dfeee6; font-family: inherit; font-size: 14px; font-weight: 600; padding: 8px 11px; border-radius: 9px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.appmain .mtab:hover { background: rgba(255,255,255,.1); color: #fff; }
.appmain .mtab.on { background: var(--green, var(--pri)); color: #fff; }
.appmain .mtab .ca { font-size: 9px; opacity: .65; }
.appspacer { flex: 1; }
.apptool { background: rgba(255,255,255,.1); border: 0; color: #eaf5ef; min-width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 15px; padding: 0 8px; }
.apptool:hover { background: rgba(255,255,255,.2); }
.appuser { color: #cfe6d8; font-size: 13px; white-space: nowrap; margin: 0 4px; }
.appwrap { max-width: 1200px; margin: 0 auto; padding: 16px 14px 70px; }
#appDrops { position: relative; max-width: 1200px; margin: 0 auto; }
.appdrop { position: absolute; top: 4px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(20,40,28,.16); padding: 8px; min-width: 280px; max-width: min(620px,92vw); display: none; z-index: 60; }
.appdrop.show { display: block; }
.appdrop-grid { display: grid; grid-template-columns: repeat(2, minmax(180px,1fr)); gap: 2px; }
@media (max-width: 720px){ .appdrop-grid { grid-template-columns: 1fr; } }
/* ── แฮมเบอร์เกอร์ + แผงเมนูมือถือ ── */
.apphamb { display: none; background: rgba(255,255,255,.14); border: 0; color: #fff; width: 38px; height: 38px; border-radius: 9px; font-size: 19px; align-items: center; justify-content: center; }
.appmobile { display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; background: var(--card); z-index: 55; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 40px; }
.appmobile.show { display: block; }
.amgrp { border-bottom: 1px solid var(--line); padding: 4px 0 6px; }
.amh { font-size: 12px; font-weight: 800; color: var(--green-dark); letter-spacing: .04em; padding: 10px 16px 3px; }
.amit { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: 0; font-family: inherit; font-size: 15px; color: var(--ink); padding: 11px 16px; text-align: left; text-decoration: none; cursor: pointer; }
.amit:active { background: var(--bg); }
.amit .ic { width: 24px; text-align: center; font-size: 16px; flex: none; }
@media (max-width: 720px){
  .appmain, .appuser { display: none; }
  .apphamb { display: inline-flex; }
  .appbar-in { gap: 6px; }
}
/* ── popup แชทถาม AI (ลอย global) ── */
.askpop { position: fixed; top: 64px; right: 14px; width: 372px; max-width: calc(100vw - 20px); height: min(70vh, 560px); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 44px rgba(20,40,28,.24); display: none; flex-direction: column; z-index: 65; overflow: hidden; }
.askpop.show { display: flex; }
.askpop-h { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: var(--green-dark); color: #fff; font-weight: 700; font-size: 14px; flex: none; }
.askx { background: rgba(255,255,255,.16); border: 0; color: #fff; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 12px; }
.askpop #askLog { flex: 1; overflow-y: auto; padding: 12px; margin: 0; }
.askpop #askLog:not(:empty) { max-height: none; margin: 0; }
.askpop #askLog:empty::before { content: "ถามเรื่องสินค้า สต็อก ราคา ได้เลย 🙂"; color: var(--mut); font-size: 13px; }
.askpop .askrow { padding: 10px; border-top: 1px solid var(--line); flex: none; }
@media (max-width: 720px){ .askpop { top: auto; bottom: 12px; right: 8px; left: 8px; width: auto; height: 68vh; } }
.ditem2 { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: 10px; cursor: pointer; text-align: left; background: none; border: 0; width: 100%; font-family: inherit; text-decoration: none; color: var(--ink, #1c211e); }
.ditem2:hover { background: var(--bg, #f1f4f2); }
.ditem2 .ic { width: 32px; height: 32px; border-radius: 9px; background: var(--green-bg, var(--pri-pale)); display: grid; place-items: center; font-size: 16px; flex: none; }
.ditem2 .t { font-weight: 700; font-size: 13.5px; color: var(--ink, #1c211e); }
.ditem2 .t small { display: block; font-size: 11px; color: var(--mut, #7a857e); font-weight: 400; line-height: 1.3; margin-top: 1px; }
.appscrim { position: fixed; inset: 0; z-index: 40; display: none; }
.appscrim.show { display: block; }
/* dashboard */
/* home launcher (role ที่ไม่ใช่ admin/บัญชี) — ปุ่มใหญ่กดง่าย */
.launcher { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.lbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 16px; cursor: pointer; font-family: inherit; text-align: left; transition: border-color .12s, box-shadow .12s; }
.lbtn:hover { border-color: var(--green); box-shadow: 0 4px 16px rgba(20,60,40,.12); }
.lbtn .lic { font-size: 32px; line-height: 1; color: var(--pri); }
.lbtn .lic .ic { width: 30px; height: 30px; }   /* ไอคอนเส้นจาก shell.js */
.lbtn .lt { font-weight: 800; font-size: 16.5px; color: var(--ink); }
.lbtn .ld { font-size: 12.5px; color: var(--mut); }
.dash-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 800px){ .dash-kpis { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px){ .dash-kpis { grid-template-columns: 1fr; } }
.dkpi { background: var(--card,#fff); border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px; }
.dkpi .l { font-size: 12.5px; color: var(--mut,#7a857e); font-weight: 600; }
.dkpi .v { font-size: 24px; font-weight: 800; margin-top: 5px; font-variant-numeric: tabular-nums; }
.dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 13px; }
@media (max-width: 820px){ .dash-grid { grid-template-columns: 1fr; } }
.dpanel { background: var(--card,#fff); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.dpanel-h { padding: 12px 15px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14.5px; display: flex; }
.dpanel-h .r { margin-left: auto; font-size: 12px; color: var(--mut,#7a857e); font-weight: 600; }
.dpanel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dpanel td, .dpanel th { padding: 8px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.dpanel td.num, .dpanel th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dpanel tr:last-child td { border-bottom: 0; }
.donut2 { width: 108px; height: 108px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative; }
.donut2::after { content: ""; position: absolute; inset: 19px; border-radius: 50%; background: var(--card,#fff); }
.donut2 .m { position: relative; z-index: 1; font-size: 11px; color: var(--mut); text-align: center; }
.donut2 .m b { display: block; font-size: 15px; color: var(--ink); }
.uc { text-align: center; color: var(--mut,#7a857e); padding: 44px 20px; background: var(--card,#fff); border: 1px dashed var(--line); border-radius: 13px; }
.uc .big { font-size: 44px; margin-bottom: 10px; }
.uc b { color: var(--ink); font-size: 17px; }
table.tiers { width: 100%; border-collapse: collapse; }
table.tiers td { padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
table.tiers td:last-child { text-align: right; font-weight: 700; color: var(--green-dark); }
table.tiers tr.hl td { background: var(--green-pale); }
.kv { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.kv span b { color: var(--mut); font-weight: 400; margin-right: 4px; }
.comp { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.comp .csku { color: var(--mut); font-size: 12px; }
/* รูปย่อสินค้าต่อรายการในบิล (popup รับบิล) */
.comp.blrow { align-items: flex-start; }
.blimg {
  width: 46px; height: 46px; flex-shrink: 0; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); cursor: zoom-in;
}
.blimg.blimg-none {
  display: flex; align-items: center; justify-content: center;
  color: var(--mut); font-size: 12px; cursor: default;
}
/* ปุ่มดูรูปบิล/ใบกำกับ ใน popup + หน้ารวม */
.billview, .billview-list {
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--ink); font-size: 13px; padding: 6px 12px;
}
/* คิวออกไฟล์ BIG/PEAK ใน popup */
.wf-tracks { display: flex; flex-direction: column; gap: 6px; }
.wf-track { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.wf-track .wf-lb { font-weight: 700; color: var(--green-dark); min-width: 42px; }
.wf-track .dc-sub { font-size: 11.5px; color: var(--mut); }
.wfq {
  margin-left: auto; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font-size: 12.5px; padding: 5px 10px;
}
.wfq:disabled { opacity: .55; }
.admincost {
  margin-top: 4px; background: #fff8e1; border: 1px solid #f0e0a8;
  border-radius: 10px; padding: 8px 12px; font-size: 13.5px;
}
.spin { text-align: center; color: var(--mut); padding: 24px 0; }

/* ── ราคาลูกค้ารายนี้ (ใน detail) ── */
.custprice {
  margin-top: 10px; background: var(--green-pale); border: 1px solid #c4dccf;
  border-radius: 10px; padding: 10px 12px;
}
.custprice .cp-head { font-size: 13px; font-weight: 700; color: var(--green); margin-bottom: 6px; }
.custprice input {
  width: 100%; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
.custprice input:focus { outline: 2px solid var(--green); border-color: transparent; }
.custprice select {
  width: 100%; margin-top: 6px; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.custprice select:focus { outline: 2px solid var(--green); border-color: transparent; }
.cp-results { margin-top: 4px; }
.cp-results .cp-item {
  padding: 7px 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; margin-top: 4px; font-size: 13.5px; cursor: pointer;
}
.cp-results .cp-item:active { background: var(--green-pale); }
.cp-results .cp-item .cp-sub { font-size: 11.5px; color: var(--mut); }
.cp-picked { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-picked .cp-name { font-size: 14px; font-weight: 600; }
.cp-picked .cp-x {
  border: 0; background: var(--card); color: var(--mut); border-radius: 999px;
  width: 24px; height: 24px; font-size: 12px; line-height: 1;
}
/* บล็อกสถานะลูกค้าที่เลือก (ในหน้าเปิดบิล) */
.cust-stat { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.cust-stat .cs { background: var(--card); border: 1px solid #c4dccf; border-radius: 8px; padding: 5px 10px; font-size: 12.5px; }
.cust-stat .cs b { color: var(--green-dark); font-weight: 700; }
.cust-stat .cs .cs-lb { color: var(--mut); font-size: 11px; display: block; }
.cust-stat .cs.vat { background: #fff8e1; border-color: #f0e0a8; }

.cp-price { margin-top: 6px; font-size: 15px; }
.cp-price b { font-size: 20px; color: var(--green-dark); }
.cp-note { margin-top: 4px; font-size: 12px; color: var(--amber); }

/* ── ตะกร้า / ใบเสนอราคา ── */
.cartbar {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 40; border: 0; border-radius: 999px;
  background: var(--green); color: #fff; font-size: 15px; font-weight: 600;
  padding: 12px 22px; box-shadow: 0 4px 16px rgba(20, 71, 44, .35);
}
.cartnum {
  display: inline-block; background: #fff; color: var(--green);
  border-radius: 999px; min-width: 22px; padding: 1px 6px; text-align: center; font-size: 13px;
}
/* ── ผลค้นในหน้าเปิดบิล (กด + เพิ่มลงบิล) ── */
.addresults { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
/* หน้าขาย: แบ่งซ้าย (หลัก 3/4) · ขวา (ค้นหา+ผลพร้อมรูป 1/4) */
.billsplit { display: grid; grid-template-columns: 3fr 1fr; gap: 16px; align-items: start; }
/* คอลัมน์ค้นหาขวา: สูงพอดีจอ (sticky) — ผลค้นเลื่อนภายใน, แถบเปลี่ยนหน้าติดล่าง */
.billside { position: sticky; top: 8px; max-height: calc(100vh - 16px); display: flex; flex-direction: column; min-height: 0; }
.billside .searchwrap { position: static; top: auto; padding: 12px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.billside .selrow { flex-direction: column; align-items: stretch; gap: 6px; }
.billside .selrow select, .billside .chk-chip { width: 100%; box-sizing: border-box; }
.billside .addresults { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.searchpager { display: none; }
.billside .searchpager:not(:empty) { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 6px; }
.searchpager .pgbtn { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1; padding: 4px 12px; cursor: pointer; }
.searchpager .pgbtn:disabled { opacity: .4; cursor: default; }
.searchpager .pgmid { font-size: 12px; color: var(--mut); }
/* การ์ดผลค้นหา (มีรูป) ในคอลัมน์ขวา */
.addcardp { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 6px 8px; cursor: pointer; }
.addcardp:hover { border-color: var(--green); }
.addcardp .ap-img { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: #fff; }
.addcardp .ap-body { min-width: 0; display: block; }
.addcardp .ap-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.addcardp .ap-sub { font-size: 10.5px; color: var(--mut); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.addcardp .ap-price { font-size: 12px; font-weight: 700; color: var(--green-dark); margin-top: 2px; display: block; }
.addcardp .ap-tier { font-size: 10px; color: var(--mut); font-weight: 400; margin-left: 3px; }
.addcardp .ap-add { font-size: 20px; font-weight: 700; color: var(--green); padding: 0 4px; }
@media (max-width: 900px) {
  .billsplit { grid-template-columns: 1fr; }
  .billside { position: static; max-height: none; }
  .billside .searchwrap { flex: none; }
  .billside .addresults { flex: none; max-height: 46vh; }
  .billside .selrow { flex-direction: row; }
}
.addrow {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2px 12px;
  text-align: left; width: 100%; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card);
}
.addrow:active { background: var(--green-pale); }
.addrow .ar-name { font-weight: 600; font-size: 14.5px; }
.addrow .ar-sub { grid-column: 1; font-size: 11.5px; color: var(--mut); }
.addrow .ar-price { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-weight: 700; font-size: 15px; color: var(--green-dark); }
.addrow .ar-price .ar-tier { display: block; font-weight: 400; font-size: 10.5px; color: var(--mut); }
.addrow .ar-add { grid-column: 3; grid-row: 1 / span 2; color: var(--green); font-weight: 700; font-size: 13.5px; white-space: nowrap; }

/* ราคา/ยอดในรายการบิล */
.cl-price { display: block; margin-top: 2px; font-size: 12.5px; color: var(--green-dark); }
.cl-price b { font-size: 13.5px; }
/* สรุปยอด: ซ้าย=รายละเอียด (ส่วนลดท้ายบิล) · ขวา=กล่องน้ำเงินเข้ม ยอดสุทธิ (แบบ Peak) */
.carttotal { margin-top: 10px; padding-top: 12px; border-top: 2px solid var(--line); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.carttotal b { color: var(--green-dark); }
.carttotal .ct-left { flex: 1; min-width: 240px; }
.carttotal .cl-sub, .cl-sub { font-size: 11px; color: var(--mut); font-weight: 400; margin-top: 2px; }
.carttotal .ct-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.carttotal .ct-neg { color: var(--err); font-weight: 700; }
.ct-grandbox { background: #2c3157; color: #fff; border-radius: 14px; padding: 14px 22px; display: flex; flex-direction: column; align-items: flex-end; min-width: 220px; }
.ct-grandbox .ct-gl { font-size: 12px; opacity: .85; }
.ct-grandbox .ct-gv { font-size: 25px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.ct-grandbox .ct-gu { font-size: 13px; font-weight: 500; opacity: .85; }
.ct-row.billdisc input { width: 78px; text-align: right; padding: 5px 6px; font-size: 13.5px; border: 1px solid var(--line); border-radius: 8px; }
.ct-row.billdisc button, .cldisc .cl-dt {
  min-width: 42px; padding: 4px 8px; border: 1px solid var(--green); border-radius: 8px;
  background: var(--green-pale); color: var(--green-dark); font-size: 13px; font-weight: 700;
}
/* ในตะกร้าตาราง: ช่องราคาให้ input เต็มคอลัมน์ ปุ่ม ↺ + ราคาเทียร์เดิมตกลงบรรทัดล่าง (ไม่เบียดช่องกรอก) */
.cartline .clprice { margin-top: 0; flex-wrap: wrap; row-gap: 2px; justify-content: flex-end; }
.cartline .cldisc { margin-top: 0; flex-wrap: nowrap; }
.cartline .clprice .cl-up, .cartline .cldisc .cl-dv { width: 100%; min-width: 0; }
/* ช่องส่วนลดต่อบรรทัด */
.cldisc { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; color: var(--mut); }
.cldisc .cl-dv {
  width: 66px; text-align: right; padding: 4px 6px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 8px;
}
/* ช่องปรับราคา/หน่วยต่อบรรทัด (default = ราคาเทียร์) */
.clprice { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; flex-wrap: wrap; }
.clprice .cl-lab { font-size: 11.5px; color: var(--mut); }
.clprice .cl-up {
  width: 84px; text-align: right; padding: 4px 6px; font-size: 13.5px; font-weight: 700;
  color: var(--green-dark); border: 1px solid var(--line); border-radius: 8px;
}
.clprice .cl-up.edited { border-color: var(--amber); background: #fff8e6; }
.clprice .cl-upreset { border: 0; background: none; color: var(--amber); font-size: 14px; padding: 0 2px; cursor: pointer; }
.clprice .cl-tierhint { color: var(--mut); font-size: 11px; }
.clprice .cl-x { color: var(--green-dark); }
.clprice .cl-x b { font-size: 13.5px; }

/* ── รับบิล: สถานะสี + ตรวจหัวบิล + สรุปยอด + แก้ไข ── */
.flagdot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.flag-green { background: #22a24c; }
.flag-yellow { background: #e6a700; }
.flag-red { background: #e5484d; }
.flag-gray { background: #b6bdc4; }
.statusbanner { margin: 8px 0; padding: 9px 12px; border-radius: 10px; border-left: 4px solid var(--line); background: var(--bg); }
.statusbanner .sb-head { font-size: 14px; }
.statusbanner .sb-list { margin: 4px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--mut); }
.statusbanner.flag-green { background: #eaf7ee; border-left-color: #22a24c; }
.statusbanner.flag-yellow { background: #fff7e0; border-left-color: #e6a700; }
.statusbanner.flag-red { background: #fdecec; border-left-color: #e5484d; }
.statusbanner.flag-gray { background: var(--bg); border-left-color: #b6bdc4; }
.mini-ok { color: #22a24c; font-weight: 700; font-size: 11.5px; }
.mini-bad { color: var(--err); font-weight: 700; font-size: 11.5px; }
.mini-warn { color: var(--mut); font-weight: 400; font-size: 11px; }
.billsum { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.billsum .bs-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; padding: 2px 0; }
.billsum .bs-row.grand { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.billsum .bs-row.grand b { font-size: 17px; color: var(--green-dark); }
.billsum .bs-row.bs-check { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--line); }
.billsum .bs-row.bs-check.ok { color: var(--green-dark); }
.billsum .bs-row.bs-check.bad { color: var(--err); font-weight: 700; }
.billsum .bs-row.bs-check.bad b { color: var(--err); }
.be-line.be-nomatch { border-left: 3px solid var(--err); padding-left: 6px; }
.be-amt { font-size: 12.5px; font-weight: 700; color: var(--green-dark); white-space: nowrap; font-variant-numeric: tabular-nums; align-self: center; }
.be-drag { cursor: grab; color: var(--mut); font-size: 18px; line-height: 1; padding: 0 2px; user-select: none; flex: none; touch-action: none; }
.be-drag:active { cursor: grabbing; }
.be-line.be-dragging { opacity: .45; }
.be-line.be-over { border-top: 2px solid var(--green); }
/* หน้าแก้ไข: รายการกระชับ ใช้ความสูงน้อยลง */
.be-line { padding: 5px 0; gap: 4px 5px; }
.be-line .bl-info { flex: 1 1 100%; margin-bottom: 1px; }
.be-line .bl-name { font-size: 13px; }
.be-line .bl-lab { font-size: 10.5px; }
.be-line input[type=number] { padding: 4px 6px; width: 62px; font-size: 13px; }
.be-line .be-drag { align-self: center; }
.be-line .cl-dt, .be-line .cl-del, .be-line .be-remap, .be-line .be-skuedit { padding: 3px 6px; font-size: 12px; }
/* สรุปยอดหน้าแก้ไข */
.besum { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--bg); }
.besum-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; font-size: 13.5px; }
.besum-row + .besum-row { border-top: 1px dashed var(--line); }
.besum-row.grand { font-size: 16px; font-weight: 800; color: var(--green-dark); border-top: 1.5px solid var(--line); margin-top: 2px; padding-top: 7px; }
.besum-row b { font-variant-numeric: tabular-nums; }
.besum-in { display: flex; gap: 4px; align-items: center; }
.besum-in input { width: 110px; text-align: right; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; font-variant-numeric: tabular-nums; }
.be-note { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; }
.be-remap { border: 0; background: none; font-size: 15px; padding: 4px; cursor: pointer; }
.be-skuedit { border: 0; background: none; color: var(--green); font-size: 13px; padding: 0 4px; cursor: pointer; }
/* รหัสซัพหน้าชื่อสินค้าในหน้ารับบิล */
.supcode { font-weight: 700; color: var(--green-dark); background: var(--green-pale); padding: 0 6px; border-radius: 6px; font-size: 12px; margin-right: 2px; }
.hdrchk { margin-top: 6px; font-size: 12.5px; }
.hdrchk .linkx, .linkx { border: 0; background: none; color: var(--mut); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0 4px; }
#pdfPop { cursor: default; }
#pdfPopFrame { width: 92vw; height: 88vh; border: 0; border-radius: 8px; background: #fff; }

/* ── ใบปะหน้า: form ซ้าย + preview ขวา ── */
.label-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.label-preview .lp-title { font-size: 12.5px; color: var(--mut); margin-bottom: 8px; text-align: center; }
.lbl-paper {
  width: 100%; max-width: 420px; aspect-ratio: 3 / 2; margin: 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0,0,0,.1); padding: 4%; display: flex; flex-direction: column;
  color: #111; font-family: "Segoe UI", "Leelawadee UI", sans-serif;
}
.lbl-paper .lp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.lbl-paper .lp-sender { font-size: 12px; line-height: 1.3; }
.lbl-paper .lp-ship { border: 1px solid #000; padding: 3px 8px; font-size: 14px; font-weight: 700; white-space: nowrap; text-align: center; } /* กรอบบาง (เจ้าของปรับ 22 ส.ค.69) */
/* ㉔ กล่องผู้รับ = ขวาล่าง ไม่เต็มความกว้าง (70% ≈ 96mm ของพื้นที่พิมพ์ 138mm — ตรงกับ shiplabel.js) */
.lbl-paper .lp-bot { flex: 1; display: flex; justify-content: flex-end; align-items: flex-start; margin-top: 10%; min-height: 0; } /* กล่องผู้รับขวาบน เว้น ~1 ซม ใต้กรอบขนส่ง (เจ้าของปรับ 22 ส.ค.69 — ต้องตรงทรง shiplabel.js) */
.lbl-paper .lp-recv { width: 70%; max-height: 100%; box-sizing: border-box; border: 2.5px solid #000; border-radius: 6px; padding: 4%; overflow: hidden; }
.lbl-paper .lp-n { font-weight: 800; font-size: 19px; line-height: 1.15; }
.lbl-paper .lp-a { margin-top: 6px; font-size: 15px; line-height: 1.25; }
.lbl-paper .lp-p { margin-top: 6px; font-weight: 700; font-size: 15px; }
/* ㉔ แท็บผู้ติดต่อ (ลูกค้า / Supplier / ผู้รับของ) + บล็อกผู้รับของบนหน้าเปิดบิล */
.contacttabs { margin: 0 0 10px; }
.recipbox { margin-top: 10px; }
.recipbox .cp-x { margin-left: auto; border: 0; background: none; color: var(--pri2); font: inherit; font-size: 12.5px; cursor: pointer; }
.recipacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.recipacts .chip { cursor: pointer; }
.recipnew { margin-top: 10px; }
.recipnew > summary { cursor: pointer; font-size: 13px; color: var(--pri2); padding: 4px 0; }
.recipnew .formgrid { margin-top: 8px; }
#recipForm { margin-top: 12px; }
#shipSenderBox { margin-bottom: 12px; }
/* ㊷ พรีวิวใบปะหน้า (22 ส.ค.69) — iframe ขนาดใบจริง แล้วย่อทั้งกรอบด้วย transform
   ⚠ ต้องเป็น transform ไม่ใช่ย่อ font/ขนาดกล่อง: auto-fit ในใบวัดจาก scrollHeight ของกระดาษจริง
     ย่อ layout เมื่อไหร่ = ตัวอักษรบนพรีวิวถูกย่อคนละรอบกับใบที่พิมพ์ออกมา (พรีวิวโกหก)
   ขนาดจริง (150×100 มม.) ตั้งจาก app.js ที่อ่าน GmtShipLabel.SIZE — ที่นี่ไม่ฮาร์ดโค้ดเลข */
.lblprev { overflow: hidden; margin: 4px 0 12px; }
.lblprev-in { transform-origin: top left; width: max-content; }
.lblprev iframe { display: block; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.cp-item.recip { position: relative; padding-right: 30px; }
.cp-item.recip .rc-name { font-weight: 600; }
.cp-item .cp-del { position: absolute; top: 6px; right: 6px; border: 0; background: none; color: var(--err); font-size: 13px; padding: 2px 5px; cursor: pointer; }
@media (max-width: 720px) {
  .label-wrap { grid-template-columns: 1fr; }
  .label-preview { order: -1; } /* มือถือ: โชว์ preview ก่อนฟอร์ม */
}

/* filter หน้ารับบิล */
#billFilterBox input[type="search"] { margin-top: 8px; }
.billtop { display: flex; gap: 10px; align-items: center; }
.billtop #billTabChips { flex: 1; min-width: 0; }
.billsearch { flex: none; width: 280px; max-width: 42%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; background: var(--card); }
.billsearch:focus { outline: 2px solid var(--green); border-color: transparent; }
@media (max-width: 720px) { .billtop { flex-direction: column; align-items: stretch; } .billsearch { width: auto; max-width: none; } }
.bigbtn {
  display: block; width: 100%; margin-top: 14px; padding: 13px;
  border: 0; border-radius: 10px; background: var(--green); color: #fff;
  font-size: 16px; font-weight: 700;
}
.bigbtn:disabled { opacity: .55; }
.bigbtn.alt { background: var(--card); color: var(--green-dark); border: 1.5px solid var(--green); margin-top: 0; font-size: 14.5px; }
.badge.stk { background: var(--bg); color: var(--mut); }
.prow { display: flex; gap: 10px; align-items: flex-start; }
.pimg { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); flex-shrink: 0; background: var(--bg); cursor: zoom-in; }
/* แกลเลอรีรูป R2 ในหน้า detail สินค้า */
.pd-images { display: flex; gap: 8px; overflow-x: auto; margin: 10px 0; }
.pd-images:empty { display: none; margin: 0; }
.pd-thumb { width: 88px; height: 88px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: zoom-in; flex-shrink: 0; }

/* ไลท์บ็อกซ์รูปสินค้า */
.imgzoom { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.imgzoom img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 8px; background: #fff; }
.imgzoom .closebtn { position: absolute; top: 14px; right: 16px; color: #fff; background: rgba(255,255,255,.15); }
.imgzoom-empty { color: #fff; font-size: 15px; }
.pbody { flex: 1; min-width: 0; }
.pcard.pinactive { opacity: .55; }
.chk-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.chk-chip input { width: auto; margin: 0; }
.badge.stk-in { background: var(--green-pale); color: var(--green-dark); font-weight: 700; }
.badge.stk-out { background: #fdecea; color: var(--err); }
/* แถวหัวเอกสารขาย (เลขที่เอกสาร / วันที่ออก / วันที่ใช้ได้ถึง) แบบ Peak */
.salemeta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-bottom: 12px; }
.salemeta .sm-field { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }
.salemeta .sm-field label { font-size: 11.5px; color: var(--mut); font-weight: 600; }
.salemeta .sm-field label small { font-weight: 400; }
.salemeta .sm-field input { border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13.5px; font-family: inherit; }
.salemeta .sm-auto { border: 1px dashed var(--line); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; color: var(--mut); background: var(--bg); }
@media (max-width: 560px) { .salemeta { justify-content: stretch; } .salemeta .sm-field { flex: 1; min-width: 120px; } }
/* คำสั่งซื้อทั้งหมด (ทุกช่องทาง) — แถวแบบ BigSeller */
.ordfilter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ordfilter #ordSearch { flex: 1; min-width: 220px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.ordfilter #ordRange { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; background: var(--card); }
.doccard.ordrow {
  display: grid;
  grid-template-columns: 20px 150px minmax(180px, 1fr) 110px 110px 110px 120px;
  gap: 12px; align-items: start;
}
.ordrow .ord-no { font-weight: 700; font-size: 13px; margin-top: 3px; word-break: break-all; }
.ordrow .ord-items { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ordrow .ord-item { display: flex; gap: 8px; align-items: flex-start; }
/* ── ㊶ (เจ้าของสั่ง 26 ส.ค.69) จำนวนต้องอ่านออกจากระยะไกลตอนหยิบของ ──────────────────
   ตัวเลขชิดขวาสุดของแถว · เกิน 1 ตีวงกลม (คนแพ็คสแกนตาหาวงกลม = "ใบนี้ต้องหยิบหลายชิ้น")
   ⚠ ตัวเลข 1 **ไม่ตีวง** โดยตั้งใจ — ใบส่วนใหญ่เป็น 1 ชิ้น ตีวงหมดจะไม่เหลือจุดสะดุดตา */
.ordrow .ord-iqty { margin-left: auto; flex: none; align-self: center; font-size: 15px; font-weight: 800;
  color: var(--dark, #16281d); min-width: 22px; text-align: center; line-height: 1; }
.ordrow .ord-iqty.many { display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 5px; border-radius: 999px;
  border: 2px solid var(--green, #157a44); color: var(--green, #157a44); background: var(--tint, #eaf5ee); }
/* ㊶ᴮ (27 ส.ค.69) ชนิดของที่ต้องหยิบ ย้ายจากแคปซูลท้ายชื่อ → ไอคอนหลังเลขจำนวน
   📦 ยกลัง · 🎁 จัดชุด — อยู่ติดเลขเพราะคนแพ็คอ่านที่เลขอยู่แล้ว ส่วนชื่อสินค้าสะอาดขึ้น */
.ordrow .ord-iqwrap { margin-left: auto; flex: none; align-self: center;
  display: flex; align-items: center; gap: 5px; }
.ordrow .ord-iqwrap .ord-iqty { margin-left: 0; }
.ordrow .ord-qkind { font-size: 15px; line-height: 1; flex: none; width: 18px; text-align: center; }
.ordrow .ord-img { width: 34px; height: 34px; object-fit: contain; border-radius: 5px; background: #fff; border: 1px solid var(--line); flex: none; }
.ordrow .ord-itxt { min-width: 0; }
.ordrow .ord-iname { font-size: 12.5px; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ordrow .ord-isub { font-size: 11px; color: var(--mut); margin-top: 1px; }
.ordrow .ord-amt { text-align: right; font-size: 14px; font-weight: 700; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.ordrow .ord-recv, .ordrow .ord-time { font-size: 12px; }
.ordrow .ord-st { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.doccard.ordrow[data-oid] { cursor: pointer; }
.doccard.ordrow[data-oid]:hover { border-color: var(--green); }
.billsum .bs-row b.ct-neg { color: var(--err); }
#ordDetailBody .pkrow .blimg { width: 38px; height: 38px; }
.ordrow .ord-act { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ordrow .ord-act button { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 12.5px; padding: 5px 12px; cursor: pointer; }
.ordrow .ord-act button[data-oact="confirm"] { border-color: var(--green); background: var(--green-pale); color: var(--green-dark); font-weight: 600; }
.ordrow .ord-act button[data-oact="cancel"] { color: var(--err); border-color: var(--err); }
@media (max-width: 900px) {
  .doccard.ordrow { grid-template-columns: 20px 1fr 1fr; }
  .ordrow .ord-items { grid-column: 1 / -1; }
}
/* ค้นบริษัทจากเลขผู้เสียภาษี (ฟอร์มลูกค้า) — แบบ Peak/Dobybot */
.taxlookup { border: 1px solid var(--green); background: var(--green-pale); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.taxlookup .tl-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.taxlookup .tl-row label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--green-dark); }
.taxlookup .tl-row label:first-child { flex: 1; min-width: 180px; }
.taxlookup .tl-row input { border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13.5px; font-weight: 400; width: 100%; box-sizing: border-box; }
.taxlookup .tl-row #tlBranch { width: 84px; }
.taxlookup .tl-row .addcart { width: auto; padding: 7px 16px; margin: 0; }
.taxlookup .cp-results { margin-top: 8px; max-height: 260px; overflow-y: auto; }
.taxlookup .cp-results:empty { margin-top: 0; }
/* หัวบิลขาย (ข้อมูลลูกค้า) แบบ Peak — section + label/value */
.billhdr { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--card); margin-bottom: 12px; }
.bh-sectitle { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--green-dark); }
.bh-check { width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.bh-sectitle .cp-x { margin-left: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--mut); font-size: 12px; padding: 4px 10px; cursor: pointer; width: auto; }
.bh-custname { font-size: 20px; font-weight: 800; margin: 8px 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bh-detail { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 13px; align-items: baseline; }
.bh-detail .bh-lb { color: var(--mut); font-size: 12.5px; white-space: nowrap; }
.bh-detail .bh-vat { grid-column: 1 / -1; margin-top: 6px; color: var(--green-dark); font-weight: 600; font-size: 12.5px; }
@media (max-width: 560px) { .bh-detail { grid-template-columns: 1fr; gap: 2px 0; } .bh-detail .bh-lb { margin-top: 6px; } }
/* ตะกร้าขายแบบตาราง Peak: รูป | สินค้า | จำนวน | ราคา/หน่วย | ส่วนลด | ภาษี | จำนวนเงิน | ลบ */
.cartline {
  display: grid;
  grid-template-columns: 46px minmax(140px, 1fr) 108px 150px 110px 44px 108px 28px;
  align-items: center; gap: 10px; padding: 8px 4px;
  border-bottom: 1px dashed var(--line);
}
.cartline-head { border-bottom: 1px solid var(--line); padding-bottom: 6px; font-size: 11.5px; color: var(--mut); font-weight: 600; }
.cartline-head .clh-c { text-align: center; }
.cartline-head .clh-r { text-align: right; }
.cartline .cl-img { width: 46px; height: 46px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--line); }
.cartline .cl-info { min-width: 0; }
.cartline .cl-name { font-size: 13px; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cartline .cl-sku { font-size: 11px; color: var(--mut); margin-top: 1px; }
.cartline .clcell { display: flex; align-items: center; gap: 4px; }
.cartline .cl-vat { justify-content: center; font-size: 12.5px; color: var(--mut); }
.cartline .cl-amt { justify-content: flex-end; text-align: right; font-size: 13px; }
.cartline .cl-amt b { color: var(--green-dark); font-size: 14px; }
@media (max-width: 700px) {
  .cartline { grid-template-columns: 40px 1fr auto; grid-auto-flow: row; }
  .cartline-head { display: none; }
  .cartline .clcell, .cartline .qtybox { grid-column: 2 / -1; justify-content: flex-start; }
}
.qtybox { display: flex; align-items: center; gap: 6px; }
.qtybox button {
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); font-size: 16px; line-height: 1;
}
.qtybox input {
  width: 44px; text-align: center; padding: 5px 2px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px;
}
.cl-del { border: 0; background: none; color: var(--err); font-size: 15px; padding: 4px; }
.cart-ok {
  margin-top: 12px; background: var(--green-pale); border: 1px solid #c4dccf;
  border-radius: 10px; padding: 12px; text-align: center; font-size: 15px;
}
.cart-ok b { font-size: 18px; color: var(--green-dark); }

/* ── ฟอร์มคีย์บิลซื้อ ── */
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 8px; }
.formgrid label { font-size: 12.5px; color: var(--mut); }
.formgrid input, .formgrid select {
  display: block; width: 100%; margin-top: 3px; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.formgrid label.chk { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink); grid-column: span 2; }
.formgrid label.chk input { width: auto; margin: 0; }
.bl-line { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.bl-line .bl-info { flex: 1 1 100%; min-width: 0; }
.bl-line .bl-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.bl-line .bl-sku { font-size: 11.5px; color: var(--mut); }
.bl-line input[type=number] {
  width: 84px; padding: 7px 8px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px;
}
.bl-line .bl-lab { font-size: 11.5px; color: var(--mut); }
.bl-line label.bl-free { font-size: 12.5px; display: flex; align-items: center; gap: 4px; }
.chkline { font-size: 12px; }
.badge.ck-ตรง { background: var(--green-pale); color: var(--green); }
.badge.ck-warn { background: #fff3d6; color: var(--amber); }
/* ตรวจราคาบิลซื้อ (เจ้าของเคาะ 4 ก.ย.69 ค่ำ): แถวราคาไม่ตรงกับบิลก่อน = ชมพู ทุก role · จัดเก็บไม่ได้จนกว่า Admin ยืนยัน */
.badge.ck-pink { background: #fce4ec; color: #c2185b; }
.pkrow.price-pending { background: rgba(233, 30, 99, .10); box-shadow: inset 4px 0 0 #e91e63; }
.doccard {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px;
}
.doccard .dc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doccard .dc-no { font-weight: 700; font-size: 14px; }
.doccard .dc-contact { font-size: 13px; margin-top: 2px; }
.doccard .dc-sub { font-size: 12px; color: var(--mut); margin-top: 2px; }
.doccard .dc-total { font-size: 15px; font-weight: 700; color: var(--green-dark); text-align: right; }
.doccard .dc-vatnote { font-size: 10.5px; font-weight: 400; color: var(--mut); }
.doccard .dc-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.doccard .dc-actions { margin-top: 8px; display: flex; gap: 8px; }
.doccard .dc-actions button, .doccard .dc-actions a {
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--ink); font-size: 13px; padding: 6px 12px; text-decoration: none;
}
/* ── การ์ดลิสต์เอกสารแบบแถวเดียว 6 คอลัมน์ (10 ส.ค.69 เจ้าของสั่งจากหน้า "ใบลดหนี้/เพิ่มหนี้ขาย":
      "จัดรูปใบรายการให้ใช้พื้นที่ต่อ 1 แถวน้อยลง") ──
   เลขที่ · ป้ายชนิด+สถานะ · คู่ค้า · วันที่ · ยอด · ปุ่ม
   ใช้โครงเดียวกับ .billrow ที่ทำไว้ก่อนหน้า (grid คอลัมน์คงที่ ยืดเฉพาะช่องคู่ค้า → ยอดตรงแนวกันทุกแถว)
   เดิมการ์ดซ้อน 3 ชั้นสูง ~4 บรรทัด · ตอนนี้แถวเดียว ~40px เห็นได้มากกว่าเดิมเกือบ 3 เท่าต่อจอ */
.doccard.docrow {
  display: grid;
  grid-template-columns: 152px 138px minmax(130px, 1fr) 126px 118px auto;
  gap: 10px; align-items: center; padding: 7px 12px;
}
.docrow[data-idx] { cursor: pointer; }
.docrow[data-idx]:hover { border-color: var(--green); }
.docrow .dc-idcell, .docrow .dc-when, .docrow .dc-contact { min-width: 0; }
/* display:block จำเป็นกับ .dc-no — ellipsis ไม่ทำงานกับ inline (เดิม .dc-no เป็น span ในแถว dc-top) */
.docrow .dc-no { display: block; font-size: 13.5px; }
.docrow .dc-badges { display: flex; flex-wrap: wrap; gap: 4px; align-content: center; }
.docrow .dc-when { font-size: 12.5px; }
/* บรรทัดรองในช่อง (เลขออเดอร์ / เลขใบกำกับ / "อ่านอย่างเดียว") — ตัวเล็กใต้ตัวหลัก ไม่ขึ้นบรรทัดใหม่
   ยาวเกินช่อง = ตัดด้วย … แล้วอ่านเต็มจาก title ตอนชี้ (markup ใส่ title ให้ทุกจุดที่ตัดได้) */
.docrow .dc-sub { display: block; margin-top: 0; font-size: 11px; }
.docrow .dc-no, .docrow .dc-sub, .docrow .dc-contact {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.docrow .dc-contact { margin-top: 0; }
.docrow .dc-total { font-size: 14.5px; }
.docrow .dc-actions { margin-top: 0; flex-wrap: wrap; justify-content: flex-end; }
.docrow .dc-actions button, .docrow .dc-actions a { font-size: 12.5px; padding: 4px 10px; }
@media (max-width: 900px) {
  .doccard.docrow { grid-template-columns: 1fr auto; gap: 5px 10px; }
  .docrow .dc-contact { grid-column: 1 / -1; }
  .docrow .dc-badges { grid-column: 1 / -1; }
  .docrow .dc-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
/* การ์ดลิสต์บิลแบบ 6 คอลัมน์ (จุด+GM/EXP · วันที่/เลขที่ · ซัพ · ยอด · สถานะ · ปุ่ม) */
.doccard.billrow {
  display: grid;
  /* คอลัมน์คงที่ทุกใบ (เหลือแค่ซัพยืดหยุ่น) → ยอดตรงแนวเดียวกัน · สถานะแคบ BIG/PEAK ห่อบรรทัดใหม่ */
  grid-template-columns: 150px 145px minmax(120px, 1fr) 130px 150px 140px;
  gap: 12px; align-items: center;
}
.billrow .bc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.billrow .bc-no { font-weight: 700; font-size: 14px; }
.billrow .bc-name { font-size: 13px; font-weight: 600; }
.billrow .bc-sub { font-size: 11.5px; color: var(--mut); margin-top: 1px; }
.billrow .bc-total { font-size: 15px; font-weight: 700; color: var(--green-dark); text-align: right; }
.billrow .bc-status { display: flex; flex-wrap: wrap; gap: 4px; align-content: center; }
.billrow .bc-act { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.billrow .bc-act button {
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--ink); font-size: 12.5px; padding: 5px 10px; cursor: pointer;
}
@media (max-width: 860px) {
  .doccard.billrow { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .billrow .bc-sup { grid-column: 1 / -1; }
  .billrow .bc-total { text-align: left; }
  .billrow .bc-act { grid-column: 1 / -1; justify-content: flex-start; }
}
/* หัวบิลหน้ารายละเอียด (แบบ Peak) */
.bhd { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--card); }
.bhd-row1 { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.bhd-idwrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bhd-no { font-size: 22px; font-weight: 800; color: var(--ink); }
.bhd-exp { font-size: 14px; color: var(--mut); font-weight: 600; }
.badge.doccap { background: var(--green-pale); color: var(--green); }
.bhd-datewrap { display: flex; gap: 18px; text-align: right; }
.bhd-datewrap .bhd-lbl { display: block; font-size: 11px; color: var(--mut); }
.bhd-datewrap b { font-size: 14px; }
.bhd-sup { margin-top: 10px; }
.bhd-supname { font-size: 19px; font-weight: 700; color: var(--green-dark); }
.bhd-supfull { font-size: 13px; color: var(--mut); margin-top: 1px; }
.bhd-price { font-size: 12.5px; color: var(--mut); margin-top: 4px; }
.bhd-buyer { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--mut); margin-top: 8px; }
.bhd-ref { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 600; }
.bhd-ref input { flex: 1; min-width: 180px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 400; }
.bhd-note { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; resize: vertical; }
.saved-ok { outline: 2px solid var(--green); }
/* รายการแบบตาราง Peak */
.pktbl { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pkrow { display: grid; grid-template-columns: minmax(0, 1fr) 56px 96px 74px 48px 92px 108px; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); }
/* ตารางรายการบิลซื้อ (3 ก.ย.69): จำนวน · ราคาตั้ง · ส่วนลด · ราคา/หน่วย · ภาษี · หัก ณ ที่จ่าย · จำนวนเงิน — จออื่นที่ใช้ .pkrow ยัง 7 คอลัมน์เดิม */
.bill-lines .pkrow { grid-template-columns: minmax(0, 1fr) 56px 96px 74px 96px 48px 92px 108px; }
.pk-list { color: var(--mut); }
.pkrow:first-child { border-top: none; }
.pkhead { background: var(--bg); font-size: 11.5px; color: var(--mut); font-weight: 600; }
.pk-desc { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.pk-descbody { min-width: 0; flex: 1; }
.pk-name { font-size: 13px; font-weight: 600; line-height: 1.35; }
.pk-sub { font-size: 11.5px; color: var(--mut); margin-top: 2px; }
.pk-num { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.pk-mid { text-align: center; font-size: 12.5px; color: var(--mut); }
.pk-amt { text-align: right; font-size: 14px; font-weight: 700; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.pk-actions { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.pk-actions button { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 12px; padding: 4px 10px; cursor: pointer; }
@media (max-width: 820px) {
  .pktbl { overflow-x: auto; }
  .pkrow { min-width: 640px; }
  .bill-lines .pkrow { min-width: 740px; }
  .bhd-datewrap { text-align: left; }
}
.badge.st-draft { background: #eee; color: #666; }
.badge.st-approved { background: var(--green-pale); color: var(--green); }
.badge.st-paid { background: #e0f0ff; color: #17538a; }
.badge.st-cancelled { background: #fde3e1; color: var(--err); }

/* ป้ายบอกว่า "ระบบตัดสินฐานราคาจากอะไร" ใต้ช่องฐานราคาในบิล (รับบิลซื้อ) */
.whytag { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.35; font-weight: 600; }
.whytag.calc { color: var(--green-dark); }
.whytag.weak { color: var(--mut); font-weight: 500; }
.whytag.warn { color: var(--err); }

/* ── แก้ทุน/ราคา หลายตัว (เครื่องมือ) — ตารางกว้าง เลื่อนแนวนอนได้ หัวตารางค้าง ── */
.bp-verwrap { background: #fdf7e3; border: 1px solid var(--amber); border-radius: 10px; padding: 9px 11px; margin-top: 10px; }
.bp-verrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.bp-verrow label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.bp-verrow input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; background: #fff; }
.bp-verwrap .meta { margin-top: 5px; }
.bp-tablewrap { overflow-x: auto; margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.bp-tbl { border-collapse: collapse; font-size: 12.5px; min-width: 900px; width: 100%; }
.bp-tbl th { position: sticky; top: 0; background: var(--green-pale); color: var(--green-dark); font-weight: 600;
  text-align: right; padding: 7px 6px; white-space: nowrap; border-bottom: 1px solid var(--line); z-index: 1; }
.bp-tbl th:first-child, .bp-tbl td:first-child { text-align: left; }
.bp-tbl td { padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bp-tbl tbody tr:hover { background: #f7faf8; }
.bp-tbl input, .bp-tbl select { padding: 5px 6px; border: 1px solid var(--line); border-radius: 7px; font-size: 12.5px;
  font-family: inherit; background: #fff; text-align: right; min-width: 0; }
.bp-tbl input:focus, .bp-tbl select:focus { outline: 2px solid var(--green); outline-offset: -1px; }
.bp-tbl input.dirty, .bp-tbl select.dirty { background: #fdf7e3; border-color: var(--amber); }   /* ช่องที่แก้แล้ว */
.bp-tbl input:disabled { background: #f1f4f2; color: var(--mut); }
.bp-sku { font-family: ui-monospace, monospace; font-size: 11.5px; }
.bp-nm { color: var(--mut); font-size: 11px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.bp-cost-old { color: var(--mut); }
.bp-cost-new { font-weight: 600; }
.bp-up { color: var(--amber); font-size: 11px; }
.bp-down { color: var(--green-dark); font-size: 11px; }
.bp-loss { color: var(--err); font-weight: 600; }
.bp-ok { color: var(--green-dark); }
.bp-thin { color: var(--amber); }
.bp-pend { background: var(--green-pale); color: var(--green-dark); border-radius: 6px; padding: 1px 5px; font-size: 10.5px; }
.bp-foot { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-top: 10px; z-index: 2; }
.bp-modal { position: fixed; inset: 0; background: rgba(10,25,17,.45); z-index: 70; display: flex; align-items: center; justify-content: center; padding: 14px; }
.bp-modal-in { background: var(--card); border-radius: 12px; width: min(760px, 100%); max-height: 86vh; display: flex; flex-direction: column; }
.bp-modal-h { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.bp-modal-h b { font-size: 15px; }
.bp-modal-h .ghost { margin-left: auto; }
.bp-modal-b { overflow-y: auto; padding: 11px 13px; }
.bp-modal-f { display: flex; gap: 8px; justify-content: flex-end; padding: 11px 13px; border-top: 1px solid var(--line); }
@media (max-width: 720px) { .bp-nm { max-width: 130px; } }
.bp-nosupbox:not(:empty) { background: #fdf0ef; border: 1px solid var(--err); border-radius: 10px; padding: 9px 11px; margin-top: 10px; }
.bp-nosupbox .meta { margin-top: 3px; }
.bp-nosup { color: var(--err); font-weight: 500; }
.bp-hint { color: var(--mut); font-weight: 400; cursor: help; font-size: 10px; }
.bp-supsel { padding: 2px 4px; border: 1px solid var(--amber); border-radius: 6px; font-size: 11px;
  font-family: inherit; background: #fdf7e3; max-width: 150px; }
.bp-supsel.dirty { border-color: var(--green); background: var(--green-pale); }
.bp-primary { background: var(--green-pale); color: var(--green-dark); border-radius: 6px; padding: 1px 5px; font-size: 10.5px; white-space: nowrap; }
.bp-setprim { border: 1px solid var(--line); background: #fff; color: var(--green-dark); border-radius: 6px;
  padding: 1px 6px; font-size: 10.5px; font-family: inherit; cursor: pointer; white-space: nowrap; }
.bp-setprim:hover { border-color: var(--green); background: var(--green-pale); }
.bp-setprim:disabled { opacity: .5; cursor: default; }
/* ช่อง "ราคา/หน่วย (สุทธิ)" ในฟอร์มแก้ไขบิล = ค่าคำนวณ อ่านอย่างเดียว */
.be-line input.be-net[readonly] { background: var(--bg); color: var(--green-dark); font-weight: 700; border-style: dashed; cursor: default; }

/* บันทึกคำสั่งซื้อ (timeline ใน popup รายละเอียดออเดอร์) */
.ordlog { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.ordlog-row { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; align-items: flex-start; }
.ordlog-row + .ordlog-row { border-top: 1px dashed var(--line); }
.ordlog-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-top: 5px; flex: none; }
.ordlog-sub { font-size: 11.5px; color: var(--mut); margin-top: 1px; }
.tracklink { font-size: 12px; font-weight: 700; color: var(--green-dark); text-decoration: none; border: 1px solid var(--green); border-radius: 7px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; }

/* กำหนดช่วงวันเอง + ชุดกรองที่บันทึกไว้ (หน้าคำสั่งซื้อ) */
#ordCustomDates { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--mut); }
#ordCustomDates input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; font: inherit; background: #fff; }
#ordSavedChips .chip [data-orddel] { margin-left: 4px; color: var(--mut); font-weight: 400; }
#ordSavedChips .chip:hover [data-orddel] { color: var(--err); }
#ordSaveFilter { white-space: nowrap; }

/* คัดกรองแบบ BigSeller (หน้าคำสั่งซื้อ) — แถวมีป้ายกำกับซ้าย */
.ordfw { display: flex; flex-direction: column; gap: 7px; }
.of-row { display: flex; align-items: flex-start; gap: 10px; }
.of-lab { flex: none; width: 76px; font-size: 12.5px; color: var(--mut); font-weight: 700; padding-top: 7px; }
.of-row .chiprow { flex: 1; margin: 0; flex-wrap: wrap; overflow-x: visible; } /* ตัวเลือกยาว → ขึ้นบรรทัดใหม่ ไม่ต้อง scroll */
.of-row select { padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; font: inherit; background: #fff; font-size: 13px; }
.of-row input[type=search] { flex: 1; min-width: 160px; }
@media (max-width: 640px) { .of-lab { width: 100%; padding-top: 0; } .of-row { flex-wrap: wrap; gap: 5px; } }
/* ⑱ ชิปร้านที่ตัวกรองปัจจุบันเหลือ 0 ใบ (เจ้าของสั่ง 25 ส.ค.69: "ต้องเห็นครบทุกร้านตลอดเวลา")
   จาง = บอกว่ากองนี้ว่าง · แต่ยังกดได้จริง (ไม่ใส่ pointer-events:none / ไม่ disabled)
   ⚠ ผูกกับ #ordChanChips เท่านั้น — แถวโลจิสติกส์/การพิมพ์ยังใช้กติกาเดิม (ไม่มีของ = ไม่มีปุ่ม)
   ⚠ .on ต้องทับกลับเป็นทึบ ไม่งั้นเลือกร้านที่ว่างแล้วมองไม่ออกว่าตอนนี้ยืนอยู่ร้านไหน */
#ordChanChips .chip.zero { opacity: .45; }
#ordChanChips .chip.zero:hover, #ordChanChips .chip.zero.on { opacity: 1; }

/* หน้าคำสั่งซื้อ: ตัวกรองไหลตาม scroll (คงแถบบนไว้แค่ appbar+topbar) + แถบแบ่งหน้า */
.searchwrap.ordfw { position: static; }
.ordpager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; flex-wrap: wrap; }
.ordpager .op-ctrl { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.ordpager select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 12.5px; background: #fff; }
/* ปุ่ม/ตัวเลือกแบ่งหน้ามาตรฐานใหม่ (24 ก.ค.69 — พบ N รายการ · 50/หน้า · หน้า x / y · ← →) */
.op-btn { min-width: 38px; padding: 6px 8px; border: 1.5px solid #14532d; border-radius: 12px; background: #fff; font: inherit; font-size: 15px; cursor: pointer; color: #14532d; line-height: 1.2; }
.op-btn:disabled { opacity: .35; cursor: default; }
.op-btn:not(:disabled):hover { background: #f0fdf4; }
.op-pagewrap { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink); white-space: nowrap; }
.op-page { padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 13px; background: #fff; font-weight: 600; cursor: pointer; }
.op-slash { color: var(--mut); font-variant-numeric: tabular-nums; }
.op-info { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--mut); padding: 0 6px; white-space: nowrap; }
.ordpager.op-bottom { border-top: 1px solid var(--line); margin-top: 8px; }

/* ⑰ กล่อง "ยกเลิกออเดอร์" ที่ยิงเข้าแพลตฟอร์มจริง (role admin)
   2 สีนี้แยกกันมีเหตุผล: ผลลัพธ์ 'pushed' (ร้านรับคำสั่งแล้วแต่อ่านกลับยังไม่ยืนยันว่าใบตาย)
   ต้องได้สีเตือน ไม่ใช่สีเขียว — ไม่งั้นคนอ่านว่า "จบแล้ว" แล้วเลิกตามต่อ ทั้งที่ใบอาจยังอยู่ */
.ordc-warn { background: #fff8e8; border: 1px solid #f0dfb2; color: #8a6a1f; border-radius: 9px; padding: 9px 12px; font-size: 13px; margin-bottom: 10px; }
.ordc-ok { background: var(--pri-pale, #f0fdf4); border: 1px solid #cfe6da; color: var(--green-dark, #14532d); border-radius: 9px; padding: 9px 12px; font-size: 13px; margin-bottom: 10px; }

/* สีร้านตามแพลตฟอร์ม + ชิปขนส่งหน้าเลขพัสดุ (เจ้าของสั่ง 22 ส.ค.69) */
.badge.pfm-shopee { background: #EE4D2D; color: #fff; }
.badge.pfm-lazada { background: #1B64F0; color: #fff; } /* 22 ส.ค.69 เจ้าของขอสว่างขึ้น — กรมท่าเดิมเพี้ยนไปทาง TikTok เทา */
.badge.pfm-tiktok { background: #3A3A3A; color: #fff; }
.car-chip { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 800; line-height: 1.6; }

/* ช่องทางของเราเอง + ป้ายฝากส่ง (เจ้าของสั่ง 22 ส.ค.69 รอบสอง) */
.badge.pfm-store { background: var(--green, #0B7A55); color: #fff; }
.badge.pfm-line { background: #06C755; color: #fff; }
.badge.pfm-woo { background: #7F54B3; color: #fff; }
.badge.drop-mark { background: #FDF3D7; color: #8a6100; border: 1px solid #E8C56A; margin-left: 4px; }