/* ==========================================================================
   ลิงก์แชร์สินค้า  ส่วนที่หน้า p.php กับหน้ารอ p_go.php ใช้ร่วมกัน
   css/p_share.css                                        14 ต.ค. 2569
   (เจ้าของสั่งทำปุ่มสั่งซื้อจากลิงก์แชร์แบบไม่ต้องล็อกอิน)
   ★ ไฟล์กลาง ไม่มี CSS ฝังในหน้า ★
   ========================================================================== */
:root{
  --pq-brand:#ff5c00; --pq-brand-ink:#c43f00; --pq-brand-wash:#fff5ec; --pq-brand-line:#ffd9bf;
  --pq-ink:#141a22; --pq-ink-2:#3a4250; --pq-muted:#6a7482; --pq-faint:#9aa4b2;
  --pq-line:#e9ecf1; --pq-bg:#f7f8fa; --pq-ok:#1f9d55; --pq-ok-wash:#eefaf2;
}

/* ---------- กล่องราคารวมบนหน้าสินค้า ---------- */
.pq-all{
  margin:14px 0 0;padding:14px 15px;border-radius:16px;
  background:linear-gradient(135deg,var(--pq-brand-wash),#fff 70%);
  box-shadow:0 0 0 1px var(--pq-brand-line),0 10px 26px -22px rgba(255,92,0,.65)
}
.pq-all-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pq-all-h span{font-size:12.5px;font-weight:700;color:var(--pq-brand-ink)}
.pq-all-h em{font-style:normal;font-size:11.5px;color:var(--pq-muted)}
.pq-all-n{display:flex;align-items:baseline;gap:7px;margin:4px 0 0}
.pq-all-n b{font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--pq-ink)}
.pq-all-n i{font-style:normal;font-size:13px;font-weight:600;color:var(--pq-muted)}
.pq-all-u{margin:7px 0 0;font-size:11.5px;line-height:1.55;color:var(--pq-muted)}
.pq-all-u b{color:var(--pq-ink-2)}

/* แถวแจกแจงราคา  กดดูได้ ปิดไว้ก่อน */
.pq-brk{margin:9px 0 0;border-top:1px dashed var(--pq-brand-line);padding-top:9px}
.pq-brk summary{
  list-style:none;cursor:pointer;font-size:12px;font-weight:700;color:var(--pq-brand-ink);
  display:inline-flex;align-items:center;gap:6px
}
.pq-brk summary::-webkit-details-marker{display:none}
.pq-brk summary::after{content:"▾";font-size:10px;transition:transform .15s ease}
.pq-brk[open] summary::after{transform:rotate(180deg)}
.pq-brk dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;margin:9px 0 0;font-size:12px}
.pq-brk dt{color:var(--pq-muted)}
.pq-brk dd{margin:0;text-align:right;font-weight:600;color:var(--pq-ink-2)}
.pq-brk dd.t{color:var(--pq-brand-ink)}

/* ---------- ป้ายพรีออเดอร์ ---------- */
.pq-pre{
  margin:12px 0 0;padding:11px 13px;border-radius:14px;background:var(--pq-bg);
  box-shadow:0 0 0 1px var(--pq-line);font-size:12px;line-height:1.6;color:var(--pq-ink-2)
}
.pq-pre b{color:var(--pq-ink)}
.pq-pre ul{margin:6px 0 0;padding:0 0 0 17px}
.pq-pre li{margin:2px 0}

/* ---------- ปุ่มสั่งซื้อ ---------- */
.pq-cta{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;box-sizing:border-box;
  margin:13px 0 0;padding:15px 18px;border:0;border-radius:14px;
  background:linear-gradient(180deg,#ff8a3d,#ff5c00);color:#fff;
  font-family:inherit;font-size:15.5px;font-weight:800;text-decoration:none;cursor:pointer;
  box-shadow:0 12px 26px -14px rgba(255,92,0,.9);transition:transform .12s ease,box-shadow .12s ease
}
.pq-cta:hover{transform:translateY(-1px);box-shadow:0 16px 30px -14px rgba(255,92,0,.95);color:#fff;text-decoration:none}
.pq-cta:active{transform:translateY(0)}
.pq-cta svg{width:19px;height:19px;flex:none}
.pq-cta-s{display:block;margin:7px 0 0;font-size:11.5px;line-height:1.5;text-align:center;color:var(--pq-muted)}
.pq-cta-s b{color:var(--pq-ok)}

/* ==========================================================================
   หน้ารอระหว่างเตรียมรายการ  p_go.php
   ========================================================================== */
body.pgo{
  margin:0;min-height:100vh;display:grid;place-items:center;padding:24px 16px;
  background:var(--pq-bg);color:var(--pq-ink);
  font-family:"IBM Plex Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
.pgo-box{
  width:100%;max-width:430px;padding:30px 22px 26px;border-radius:20px;background:#fff;text-align:center;
  box-shadow:0 0 0 1px var(--pq-line),0 24px 50px -34px rgba(16,18,23,.5)
}
.pgo-logo{height:40px;width:auto;margin:0 0 14px}
.pgo-ring{display:grid;place-items:center;margin:4px 0 16px}
.pgo-ring span{
  display:block;width:42px;height:42px;border-radius:50%;
  border:3px solid var(--pq-brand-line);border-top-color:var(--pq-brand);
  animation:pgoSpin .9s linear infinite
}
@keyframes pgoSpin{to{transform:rotate(360deg)}}
.pgo-t{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em}
.pgo-s{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:var(--pq-muted);min-height:2.6em}
.pgo-li{
  margin:16px 0 0;padding:12px 14px 12px 30px;border-radius:14px;background:var(--pq-bg);
  text-align:left;font-size:12px;line-height:1.65;color:var(--pq-ink-2)
}
.pgo-li li{margin:3px 0}
.pgo-li b{color:var(--pq-ink)}
.pgo-err{
  margin:16px 0 0;padding:12px 14px;border-radius:14px;background:#fff4f4;
  box-shadow:0 0 0 1px #ffd9d9;font-size:13px;line-height:1.6;color:#b4232a;font-weight:600
}
.pgo-back{display:inline-block;margin:14px 0 0;font-size:13px;font-weight:700;color:var(--pq-brand-ink);text-decoration:none}
.pgo-back:hover{text-decoration:underline}
body.pgo.is-err .pgo-ring{display:none}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body.pgo{background:#12151a;color:#eef1f5}
  :root:not([data-theme="light"]) .pgo-box{background:#1a1f27;box-shadow:0 0 0 1px #2a313b,0 24px 50px -34px #000}
  :root:not([data-theme="light"]) .pgo-li{background:#20262f;color:#cfd6e0}
  :root:not([data-theme="light"]) .pgo-li b{color:#fff}
}

/* ==========================================================================
   หน้าเตรียมลิงก์ไปโพสขาย  dashboard/share_post.php        14 ต.ค. 2569
   ========================================================================== */
body.spz{
  margin:0;min-height:100vh;display:grid;place-items:start center;padding:22px 16px 40px;
  background:var(--pq-bg);color:var(--pq-ink);
  font-family:"IBM Plex Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
.spz-box{width:100%;max-width:440px;box-sizing:border-box;padding:20px 18px 22px;border-radius:20px;background:#fff;
  box-shadow:0 0 0 1px var(--pq-line),0 24px 50px -34px rgba(16,18,23,.5)}
.spz-hd{display:flex;align-items:center;gap:11px;margin:0 0 15px}
.spz-logo{height:34px;width:auto}
.spz-hd b{display:block;font-size:16px;font-weight:800;line-height:1.3}
.spz-hd small{display:block;margin-top:1px;font-size:11.5px;color:var(--pq-muted)}

.spz-item{display:flex;align-items:center;gap:11px;padding:11px;border-radius:14px;background:var(--pq-bg);margin:0 0 14px}
.spz-im{flex:none;width:54px;height:54px;border-radius:11px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--pq-line)}
.spz-im img{width:100%;height:100%;object-fit:cover;display:block}
.spz-tx{min-width:0}
.spz-tx b{display:block;font-size:13px;font-weight:700;line-height:1.45;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.spz-tx em{display:block;margin-top:2px;font-style:normal;font-size:12px;font-weight:700;color:var(--pq-brand-ink)}

.spz-body{text-align:center;padding:12px 0 6px}
.spz-s{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--pq-muted)}

.spz-why{margin:0 0 12px;padding:11px 13px;border-radius:13px;background:#fff8ec;
  box-shadow:0 0 0 1px #f3e2c3;font-size:12.5px;line-height:1.65}
.spz-bill{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;margin:0 0 11px;font-size:13px}
.spz-bill dt{color:var(--pq-muted)}
.spz-bill dd{margin:0;text-align:right;font-weight:700}
.spz-bill dt.t,.spz-bill dd.t{padding-top:9px;border-top:1px dashed var(--pq-line);font-size:15px;color:var(--pq-brand-ink)}
.spz-note{margin:10px 2px 0;font-size:11.5px;line-height:1.6;color:var(--pq-muted);text-align:center}
.spz-x{display:block;width:100%;margin:10px 0 0;padding:0;border:0;background:none;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--pq-muted);text-align:center;text-decoration:none;cursor:pointer}
.spz-x:hover{color:var(--pq-ink)}

.spz-ok{margin:0 0 12px;padding:11px 13px;border-radius:13px;background:var(--pq-ok-wash);
  box-shadow:0 0 0 1px #c7ecd7;font-size:13px;font-weight:700;color:#0f6b3d;text-align:center}
.spz-thumbs{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:0 0 13px}
.spz-thumbs img{width:62px;height:62px;border-radius:10px;object-fit:cover;box-shadow:0 0 0 1px var(--pq-line)}
.spz-link input{width:100%;height:44px;padding:0 12px;border-radius:11px;border:1.5px solid var(--pq-line);
  font-family:inherit;font-size:12.5px;background:var(--pq-bg);color:var(--pq-ink-2)}
.spz-link input:focus{outline:none;border-color:var(--pq-brand);box-shadow:0 0 0 3px rgba(255,92,0,.1)}

.spz-qr{text-align:center}
.spz-qr-h{margin:0 0 11px;font-size:14px;font-weight:700}
.spz-qr-h b{color:var(--pq-brand-ink);font-size:19px}
.spz-qr-im{display:grid;place-items:center;padding:10px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--pq-line)}
.spz-qr-im img{width:100%;max-width:260px;height:auto;display:block}
.spz-qr-s{margin:11px 0 0;font-size:12px;line-height:1.6;color:var(--pq-muted)}

/* ---------- หน้าตั้งค่าสินค้าก่อนโพสขาย  ส่วนที่เพิ่ม 14 ต.ค. 2569 ---------- */
.spz-sec{margin:0 0 15px;padding:13px;border-radius:15px;background:var(--pq-bg);box-shadow:0 0 0 1px var(--pq-line)}
.spz-lb{display:block;margin:0 0 7px;font-size:12.5px;font-weight:700;color:var(--pq-ink)}
/* ★ กับดักกรอบเพี้ยน ★ (14 ต.ค. 2569)  ช่องกรอกกว้าง 100% บวกขอบกับระยะขอบใน
   กล่องจึงกว้างเกินกรอบไป 27px แถบเลื่อนกับมุมมนโผล่ออกนอกกรอบ
   แก้ด้วย box-sizing ทั้งกล่อง ไม่ใช่เฉพาะช่องนี้ จะได้ไม่เจออีกกับช่องอื่น */
.spz-box, .spz-box *, .spz-box *::before, .spz-box *::after{box-sizing:border-box}
.spz-in{display:block;width:100%;padding:10px 12px;border:1.5px solid var(--pq-line);border-radius:11px;background:#fff;
  font-family:inherit;font-size:13.5px;line-height:1.55;color:var(--pq-ink);resize:vertical;
  min-height:62px;max-height:160px;overflow:auto}
.spz-in:focus{outline:none;border-color:var(--pq-brand);box-shadow:0 0 0 3px rgba(255,92,0,.1)}
.spz-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;flex-wrap:wrap}
.spz-hint{font-size:11.5px;line-height:1.5;color:var(--pq-muted)}
.spz-hint.is-ok{color:var(--pq-ok);font-weight:600}
.spz-btn{flex:none;padding:8px 14px;border:1px solid var(--pq-brand-line);border-radius:999px;background:#fff;
  font-family:inherit;font-size:12px;font-weight:700;color:var(--pq-brand-ink);cursor:pointer}
.spz-btn:hover{background:var(--pq-brand-wash)}
.spz-btn[disabled]{opacity:.55;cursor:not-allowed}

.spz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:4px}
.spz-th{position:relative;padding:0;border:0;border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;
  box-shadow:0 0 0 1px var(--pq-line);aspect-ratio:1/1}
.spz-th img{width:100%;height:100%;object-fit:cover;display:block}
/* ป้ายอยู่มุมบน รูปที่ทำแล้วมักมีตัวหนังสือไทยอยู่ขอบล่าง ป้ายที่มุมล่างเลยทับกัน (14 ต.ค. 2569) */
.spz-th span{position:absolute;left:5px;top:5px;padding:2px 7px;border-radius:999px;
  font-size:10px;font-weight:700;background:rgba(255,255,255,.92);color:var(--pq-ink-2)}
.spz-th.ai span{background:rgba(31,157,85,.92);color:#fff}
.spz-th.cn{cursor:default;opacity:.72}
.spz-th.cn span{background:rgba(20,26,34,.78);color:#fff}
.spz-th.on{box-shadow:0 0 0 2.5px var(--pq-brand)}
.spz-th.on span{background:var(--pq-brand);color:#fff}

.spz-comm{margin:0 0 15px;padding:14px;border-radius:15px;
  background:linear-gradient(135deg,var(--pq-ok-wash),#fff 70%);box-shadow:0 0 0 1px #c7ecd7}
.spz-comm-h{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;font-weight:700;color:#0f6b3d}
.spz-comm-h em{font-style:normal;padding:2px 9px;border-radius:999px;background:#0f8a4f;color:#fff;font-size:11.5px}
.spz-comm-n{display:flex;align-items:baseline;gap:7px;margin:5px 0 0}
.spz-comm-n b{font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:#0f6b3d}
.spz-comm-n i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--pq-muted)}

/* รูปที่เลือกไว้ให้ระบบแปลเป็นไทย                           14 ต.ค. 2569 */
.spz-th.cn{cursor:pointer}
.spz-th.cn:hover{opacity:1}
.spz-th.pick{opacity:1;box-shadow:0 0 0 2.5px var(--pq-ok)}
.spz-th.pick span{background:var(--pq-ok);color:#fff}

/* เลือกภาษาบนรูป + กล่องเงื่อนไขการโพสขาย                  14 ต.ค. 2569 */
.spz-lang{display:flex;align-items:center;gap:7px;margin:0 0 12px;flex-wrap:wrap}
.spz-lang>span{font-size:12px;font-weight:700;color:var(--pq-muted);margin-right:2px}
.spz-lang button{padding:7px 15px;border:1.5px solid var(--pq-line);border-radius:999px;background:#fff;
  font-family:inherit;font-size:12.5px;font-weight:700;color:var(--pq-ink-2);cursor:pointer}
.spz-lang button.on{border-color:var(--pq-brand);background:var(--pq-brand-wash);color:var(--pq-brand-ink)}

.spz-terms{margin:0 0 15px;padding:13px 14px;border-radius:15px;background:#fff;
  box-shadow:0 0 0 1px var(--pq-line)}
.spz-terms>b{display:block;margin-bottom:8px;font-size:13px;font-weight:800;color:var(--pq-ink)}
.spz-terms ul{margin:0;padding:0 0 0 18px}
.spz-terms li{margin:5px 0;font-size:12px;line-height:1.7;color:var(--pq-muted)}
.spz-terms li b{color:var(--pq-ink)}

/* รูปภาษาจีนที่ต้องทำให้ครบ  ปลดติ๊กไม่ได้ */
.spz-th.req{box-shadow:0 0 0 2.5px var(--pq-brand)}
.spz-th.req span{background:var(--pq-brand);color:#fff}

/* ป้ายบอกเจ้าของรูปของสินค้า                                14 ต.ค. 2569 */
.spz-own{margin:0 0 15px;padding:12px 14px;border-radius:14px;font-size:12.5px;line-height:1.65}
.spz-own b{display:block;margin-bottom:2px;font-size:13px}
.spz-own.is-lock{background:#eef4ff;box-shadow:0 0 0 1px #cfe0ff;color:#1b3f7a}
.spz-own.is-mine{background:var(--pq-ok-wash);box-shadow:0 0 0 1px #c7ecd7;color:#0f6b3d}
.spz-hd .spz-bd{color:var(--pq-brand-ink);font-weight:800}

/* ==========================================================================
   หน้าสอนใช้งาน PTCARGO affiliate  dashboard/share_howto.php   14 ต.ค. 2569
   ★ ภาพในหน้าเป็นภาพหน้าจอจริงของระบบ (bm/howto/real) ★
   ========================================================================== */
body.hw .hw-box{max-width:520px}
.hw-sum{margin:0 0 18px;padding:12px;border-radius:16px;background:var(--pq-bg);box-shadow:0 0 0 1px var(--pq-line);text-align:center}
.hw-sum img{width:100%;height:auto;display:block;border-radius:12px}
.hw-sum p{margin:9px 0 0;font-size:12px;line-height:1.6;color:var(--pq-muted)}

.hw-steps{list-style:none;margin:0;padding:0;counter-reset:hw}
.hw-step{position:relative;margin:0 0 16px;padding:15px 15px 16px;border-radius:16px;background:#fff;
  box-shadow:0 0 0 1px var(--pq-line),0 10px 24px -22px rgba(16,18,23,.5)}
.hw-head{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.hw-no{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(160deg,#ff8a3d,#ff5c00);color:#fff;font-size:14px;font-weight:800}
.hw-head b{font-size:15.5px;font-weight:800;line-height:1.35;color:var(--pq-ink)}
.hw-tx{margin:0 0 12px;font-size:13px;line-height:1.8;color:var(--pq-ink-2)}
.hw-shot{margin:0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--pq-line)}
.hw-shot img{width:100%;height:auto;display:block}
.hw-go{display:inline-block;margin:12px 0 0;padding:9px 16px;border-radius:999px;
  background:var(--pq-brand-wash);color:var(--pq-brand-ink);font-size:12.5px;font-weight:700;text-decoration:none}
.hw-go:hover{background:#ffe9d8}
body.hw .spz-terms{margin-top:4px}
body.hw .pq-cta{margin-top:16px}

/* ==========================================================================
   หน้าตั้งค่าสินค้า  เก็บขอบเทาออก                           14 ต.ค. 2569
   (เจ้าของทักว่า "ทำไมมันเป็นขอบเทา ๆ แบบนี้" · "มันยังเป็นเหมือนเดิมอยู่เลย")
   เดิมเป็นการ์ดเทาซ้อนบนกล่องขาว แล้วกล่องขาววางบนพื้นเทาอีกชั้น เห็นเป็นกรอบเทาสามชั้น
   แก้เป็นพื้นขาวทั้งหน้า แบ่งส่วนด้วยเส้นบาง ๆ แทน  บนมือถือเต็มจอไม่เหลือขอบ
   ★ ไม่แตะหน้าสอนใช้งาน (body.hw) ที่ตั้งใจให้เป็นการ์ดลอย ★
   ========================================================================== */
body.spz:not(.hw){background:#fff}
body.spz:not(.hw) .spz-box{
  max-width:560px;padding:18px 16px 28px;border-radius:0;box-shadow:none;background:#fff
}
body.spz:not(.hw) .spz-item{
  background:#fff;border-radius:14px;box-shadow:0 0 0 1px var(--pq-line)
}
body.spz:not(.hw) .spz-sec{
  margin:0;padding:16px 0;border-radius:0;background:transparent;box-shadow:none;
  border-top:1px solid var(--pq-line)
}
body.spz:not(.hw) .spz-sec + .spz-sec{border-top:1px solid var(--pq-line)}
body.spz:not(.hw) .spz-comm{margin:16px 0 0;border-radius:16px}
body.spz:not(.hw) .spz-terms{margin:16px 0 0;border-radius:16px;box-shadow:0 0 0 1px var(--pq-line)}
body.spz:not(.hw) .spz-own{margin:14px 0 0;border-radius:16px}
body.spz:not(.hw) .spz-in{background:#fff}
body.spz:not(.hw) .spz-pay{margin-top:14px;padding:14px;border-radius:16px;background:var(--pq-bg)}
body.spz:not(.hw) .spz-qr{margin-top:14px;padding:14px;border-radius:16px;background:var(--pq-bg)}
@media (min-width:600px){
  body.spz:not(.hw){padding:26px 16px 40px;background:var(--pq-bg)}
  body.spz:not(.hw) .spz-box{border-radius:20px;box-shadow:0 0 0 1px var(--pq-line),0 24px 50px -34px rgba(16,18,23,.5)}
}


/* ==========================================================================
   เอากรอบใหญ่ ๆ ออกจากหน้าตั้งค่าสินค้า                      14 ต.ค. 2569
   (เจ้าของสั่ง "กรอบสีเขียว สีเทาใหญ่ ๆ ให้เอาออก")
   กล่องส่วนแบ่งกับกล่องเงื่อนไขเดิมเป็นแผ่นสีเต็มใบ ดูหนักและกินพื้นที่
   เปลี่ยนเป็นบรรทัดธรรมดาคั่นด้วยเส้นบาง ๆ  เก็บสีไว้แค่ตัวเลขกับคำสำคัญ
   ========================================================================== */
body.spz:not(.hw) .spz-comm{
  margin:16px 0 0;padding:14px 0 0;border-radius:0;background:none;box-shadow:none;
  border-top:1px solid var(--pq-line)
}
body.spz:not(.hw) .spz-comm-h{color:var(--pq-ink)}
body.spz:not(.hw) .spz-comm-h em{background:none;color:var(--pq-ok);font-weight:800;padding:0;font-size:13px}
body.spz:not(.hw) .spz-terms{
  margin:14px 0 0;padding:14px 0 0;border-radius:0;background:none;box-shadow:none;
  border-top:1px solid var(--pq-line)
}
body.spz:not(.hw) .spz-own{
  margin:12px 0 0;padding:0;border-radius:0;background:none !important;box-shadow:none !important;
  font-size:12px;line-height:1.7;color:var(--pq-muted)
}
body.spz:not(.hw) .spz-own b{display:inline;font-size:12px;color:var(--pq-ink)}
body.spz:not(.hw) .spz-pay{background:none;padding:14px 0 0;border-top:1px solid var(--pq-line);border-radius:0}
body.spz:not(.hw) .spz-why{background:none;box-shadow:none;padding:0;margin-bottom:10px}
body.spz:not(.hw) .spz-qr{background:none;padding:14px 0 0;border-top:1px solid var(--pq-line);border-radius:0}

/* ปุ่มท้ายหน้าสอนใช้งานเคยไปทับลิงก์ด้านล่าง  เว้นระยะให้ชัด (14 ต.ค. 2569) */
body.hw .pq-cta{margin:20px 0 0}
body.hw .spz-x{margin:16px 0 4px;padding:6px 0}

/* ==========================================================================
   หน้าสอนใช้งานเอาพื้นเทากับกรอบออกให้หมด        14 ต.ค. 2569
   (เจ้าของสั่ง "แก้รูปใหม่ด้วยให้ไม่มีขอบเทา")
   เดิมหน้านี้เป็นการ์ดขาวลอยบนพื้นเทา และทุกขั้นเป็นการ์ดซ้อนอีกชั้น
   เห็นเป็นกรอบเทารอบภาพหน้าจอ  เปลี่ยนเป็นขาวทั้งหน้า แบ่งขั้นด้วยเส้นบาง
   ========================================================================== */
body.spz.hw{background:#fff}
body.spz.hw .hw-box{max-width:560px;padding:18px 16px 28px;border-radius:0;box-shadow:none;background:#fff}
body.spz.hw .hw-sum{margin:0 0 6px;padding:0;border-radius:0;background:none;box-shadow:none}
body.spz.hw .hw-sum img{border-radius:14px}
body.spz.hw .hw-step{margin:0;padding:18px 0;border-radius:0;background:none;box-shadow:none;
  border-top:1px solid var(--pq-line)}
body.spz.hw .hw-shot{border-radius:14px;box-shadow:none;background:none}
body.spz.hw .hw-shot img{border-radius:14px}

/* ช่วงล่างหน้าแชร์โฉมใหม่ (เจ้าของสั่ง 14 ต.ค. 2569 "ออกแบบช่วงล่างใหม่ให้สวยกว่านี้")
   สามข้อหลักเรียงเป็นแถวไอคอน แทนกล่องหัวข้อ+บุลเล็ตที่ยาวเกินไป */
.pq-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 0}
.pq-facts span{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 7px;
  border-radius:14px;background:var(--pq-bg);text-align:center;
  font-size:10.5px;line-height:1.45;color:var(--pq-muted)}
.pq-facts b{display:block;font-size:12.5px;font-weight:800;color:var(--pq-ink)}
.pq-facts svg{width:20px;height:20px;color:var(--pq-brand)}
.pq-pre-n{margin:9px 2px 0;font-size:11.5px;line-height:1.6;color:var(--pq-muted);text-align:center}

/* ---------- แว่นขยายดูรูปใหญ่ ---------- */
.spz-th{position:relative}
.spz-zoom{position:absolute;top:5px;right:5px;z-index:3;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--pq-ink-2);
  box-shadow:0 1px 4px rgba(16,24,40,.28);cursor:zoom-in}
.spz-zoom svg{width:15px;height:15px;display:block}
.spz-zoom:hover{background:#fff;color:var(--pq-brand)}
.spz-zoom:active{transform:scale(.92)}

/* ---------- ลิงก์ยังล็อกอยู่ รูปยังทำไม่ครบ ---------- */
.spz-lock{margin:0 0 9px;padding:9px 11px;border-radius:11px;background:#fff6ec;
  box-shadow:0 0 0 1px var(--pq-brand-line);font-size:12px;line-height:1.55;color:#9a4a00}
.spz-lock b{font-weight:800}
.spz-sec.is-lock .spz-link{opacity:.45}
.spz-sec.is-lock .pq-cta{opacity:.5;cursor:not-allowed;box-shadow:none}
.spz-sec.is-lock #spOpen{opacity:.45;pointer-events:none}
.pq-cta:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

/* ---------- ชุดรูปแยก 3 กลุ่ม (14 ต.ค. 2569 เจ้าของสั่ง "แยกกันให้ชัดเจน") ----------
   .spz-grp(.is-ai) > .spz-grp-h + .spz-grid · ป้าย .spz-tag · ปุ่มบนรูป .spz-acts > .spz-a(.on|.is-del) · ชื่อตัวเลือก .spz-nm */
.spz-grp{margin:10px 0 0;padding:11px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--pq-line)}
.spz-grp.is-ai{background:linear-gradient(135deg,var(--pq-ok-wash),#fff 70%);box-shadow:0 0 0 1px #c7ecd7}
.spz-grp-h{display:flex;flex-direction:column;gap:1px;margin:0 0 8px}
.spz-grp-h b{font-size:13px;font-weight:800;color:var(--pq-ink)}
.spz-grp.is-ai .spz-grp-h b{color:#0f6b3d}
.spz-grp-h small{font-size:11px;line-height:1.45;color:var(--pq-muted)}
.spz-grp .spz-grid{margin-top:0}
/* ป้ายมุมซ้ายบน  แว่นขยายมุมขวาบน  (เดิมใช้ span เหมือนกันจนแว่นขยายทับป้าย) */
.spz-th .spz-tag{position:absolute;left:5px;top:5px;z-index:2;max-width:calc(100% - 40px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:2px 7px;border-radius:999px;font-size:10px;font-weight:700;background:rgba(255,255,255,.92);color:var(--pq-ink-2)}
.spz-th span.spz-zoom{left:auto;right:5px;padding:0;background:rgba(255,255,255,.92);color:var(--pq-ink-2)}
.spz-th span.spz-zoom:hover{background:#fff;color:var(--pq-brand)}
.spz-th.ai .spz-tag{background:rgba(31,157,85,.92);color:#fff}
.spz-th.cn .spz-tag{background:rgba(20,26,34,.78);color:#fff}
.spz-th.on .spz-tag{background:var(--pq-brand);color:#fff}
.spz-th.pick .spz-tag{background:var(--pq-ok);color:#fff}
.spz-th.req .spz-tag{background:var(--pq-brand);color:#fff}
.spz-th.ai.pick{box-shadow:0 0 0 2.5px var(--pq-brand)}
.spz-th.ai.pick .spz-tag{background:var(--pq-brand)}
.spz-th.opt.done{opacity:.6}
.spz-th.opt .spz-tag{background:rgba(43,108,176,.88)}
.spz-th.opt.pick .spz-tag{background:var(--pq-ok)}
.spz-nm{position:absolute;left:0;right:0;bottom:0;padding:10px 6px 4px;font-style:normal;font-size:10px;font-weight:600;line-height:1.25;color:#fff;
  text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.72));overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.spz-acts{position:absolute;left:4px;right:4px;bottom:4px;z-index:3;display:flex;gap:4px}
.spz-a{flex:1 1 0;min-width:0;padding:4px 0;border:0;border-radius:8px;background:rgba(255,255,255,.94);
  font-family:inherit;font-size:10.5px;font-weight:700;color:var(--pq-ink);cursor:pointer;box-shadow:0 1px 3px rgba(16,24,40,.25)}
.spz-a:hover{background:#fff;color:var(--pq-brand)}
.spz-a.on{background:var(--pq-brand);color:#fff}
.spz-a.is-del{color:#c53030}
.spz-a.is-del.on{background:#c53030;color:#fff}
.spz-a[disabled]{opacity:.6;cursor:default}
.spz-grp.is-ai .spz-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}

/* ---------- วิธีการ 3 ขั้น + ข้อดี (14 ต.ค. 2569) ---------- */
.spz-how{margin:0 0 15px;padding:14px;border-radius:15px;background:linear-gradient(135deg,var(--pq-brand-wash),#fff 75%);box-shadow:0 0 0 1px var(--pq-brand-line)}
.spz-how-h{display:block;margin:0 0 10px;font-size:14px;font-weight:800;color:var(--pq-brand-ink)}
.spz-how-s{list-style:none;counter-reset:spzh;margin:0 0 12px;padding:0;display:grid;gap:8px}
.spz-how-s li{counter-increment:spzh;position:relative;display:flex;flex-direction:column;padding-left:34px;min-height:24px;font-size:12px;line-height:1.45;color:var(--pq-muted)}
.spz-how-s li::before{content:counter(spzh);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--pq-brand);color:#fff;font-size:12px;font-weight:800}
.spz-how-s b{font-size:13px;color:var(--pq-ink)}
.spz-how-sub{display:block;margin:0 0 7px;padding-top:10px;border-top:1px dashed var(--pq-brand-line);font-size:12.5px;font-weight:800;color:var(--pq-ink)}
.spz-how-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px}
.spz-how-g li{position:relative;padding-left:20px;font-size:12px;line-height:1.45;font-weight:600;color:var(--pq-ink)}
.spz-how-g li::before{content:"";position:absolute;left:0;top:2px;width:14px;height:14px;border-radius:50%;
  background:var(--pq-ok-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d55' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/9px no-repeat}
@media (max-width:420px){ .spz-how-g{grid-template-columns:minmax(0,1fr)} }

/* ---------- รายละเอียดสินค้า ---------- */
.spz-det{min-height:200px;line-height:1.6;white-space:pre-wrap}
.spz-row-b{display:inline-flex;gap:6px;flex-wrap:wrap}

/* ---------- เงื่อนไขการนำสินค้าไปโพสขาย  การ์ดไอคอน (14 ต.ค. 2569 "แต่งใหม่ให้สวย") ---------- */
.spz-terms-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0 0 10px}
.spz-terms-h small{flex:none}
.spz-terms-h b{font-size:14px;font-weight:800;color:var(--pq-ink)}
.spz-terms-h small{font-size:11px;color:var(--pq-muted)}
.spz-terms ul.spz-tm{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.spz-terms .spz-tm li{display:flex;align-items:flex-start;gap:10px;margin:0;padding:11px 12px;border-radius:13px;
  background:var(--pq-bg);box-shadow:0 0 0 1px var(--pq-line);font-size:12px;line-height:1.5;color:var(--pq-muted)}
.spz-tm-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--pq-brand-wash);color:var(--pq-brand)}
.spz-tm-ic svg{width:19px;height:19px}
.spz-tm-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.spz-terms .spz-tm-tx b{font-size:13px;font-weight:800;line-height:1.35;color:var(--pq-ink)}
.spz-tm-tx small{font-size:11.5px;line-height:1.5;color:var(--pq-muted)}
.spz-terms .spz-tm li.is-hi{background:linear-gradient(135deg,var(--pq-brand-wash),#fff 80%);box-shadow:0 0 0 1px var(--pq-brand-line)}
.spz-terms .spz-tm li.is-hi b{color:var(--pq-brand-ink)}
.spz-terms .spz-tm li.is-ok{background:linear-gradient(135deg,var(--pq-ok-wash),#fff 80%);box-shadow:0 0 0 1px #c7ecd7}
.spz-terms .spz-tm li.is-ok .spz-tm-ic{background:#fff;color:var(--pq-ok)}
.spz-terms .spz-tm li.is-ok b{color:#0f6b3d}
@media (max-width:520px){ .spz-terms ul.spz-tm{grid-template-columns:minmax(0,1fr)} }

/* ---------- การ์ดส่วนแบ่งที่จะได้  (14 ต.ค. 2569 แต่งใหม่ให้สวย อ่านง่าย) ----------
   ทับกฎ "เอากรอบใหญ่ออก" เดิม  ใช้การ์ดเบา ๆ ใบเดียว รวมป้ายเจ้าของรูปไว้ข้างใน */
body.spz .spz-comm,body.spz:not(.hw) .spz-comm{margin:16px 0 0;padding:14px;border:0;border-radius:16px;
  background:linear-gradient(135deg,var(--pq-ok-wash),#fff 75%);box-shadow:0 0 0 1px #c7ecd7}
.spz-comm-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.spz-comm-l{min-width:0}
.spz-comm-k{display:block;font-size:12.5px;font-weight:700;color:#0f6b3d}
.spz-comm .spz-comm-n{margin:2px 0 0}
.spz-comm .spz-comm-n b{font-size:32px;color:#0f6b3d}
.spz-comm-pct{flex:none;padding:4px 11px;border-radius:999px;background:#0f8a4f;color:#fff;font-style:normal;font-size:13px;font-weight:800}
.spz-comm-sp{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.spz-comm-sp li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border-radius:11px;background:#fff;
  box-shadow:0 0 0 1px #d8f0e2;font-size:12.5px;color:var(--pq-ink)}
.spz-comm-sp li span{min-width:0}
.spz-comm-sp li b{flex:none;font-weight:800;color:#0f8a4f}
body.spz .spz-comm .spz-own,body.spz:not(.hw) .spz-comm .spz-own{display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:8px 11px;border-radius:11px;
  font-size:12px;line-height:1.5;font-weight:600}
body.spz .spz-comm .spz-own::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
body.spz .spz-comm .spz-own.is-mine{background:#0f8a4f !important;color:#fff}
body.spz .spz-comm .spz-own.is-lock{background:#eef4ff !important;color:#1b3f7a;box-shadow:0 0 0 1px #cfe0ff !important}
.spz-comm-f{margin:8px 0 0;font-size:11.5px;line-height:1.5;color:var(--pq-muted)}

/* ---------- ลากรูปขึ้นไปใช้เอง / ลากสลับลำดับ (14 ต.ค. 2569) ---------- */
.spz-th[draggable="true"]{cursor:grab}
.spz-th.is-drag{opacity:.45}
.spz-th.is-tgt{box-shadow:0 0 0 3px var(--pq-brand) !important}
.spz-grp.is-ai.is-drop{box-shadow:0 0 0 2px #1f9d55;outline:2px dashed #1f9d55;outline-offset:3px}
.spz-grp.is-ai.is-over{background:linear-gradient(135deg,#d9f4e5,#fff 70%)}
.spz-ai-empty{margin:0;padding:22px 12px;border:2px dashed #b9e6cc;border-radius:12px;text-align:center;font-size:12px;line-height:1.5;color:#0f6b3d;background:#fff}
.spz-acts.is-top{top:36px;bottom:auto}
.spz-a.is-use{background:#1f9d55;color:#fff}
.spz-a.is-use:hover{background:#0f8a4f;color:#fff}
.spz-th.raw .spz-tag{background:rgba(20,26,34,.78)}
div.spz-th{display:block}

/* จุดแดงบนรูปที่ตรวจเจอภาษาจีน  บอกว่าใบนี้ควรสั่งแปล (14 ต.ค. 2569) */
.spz-th.has-cn{box-shadow:0 0 0 2px #ef4444}
.spz-th.has-cn .spz-tag{display:inline-flex;align-items:center;gap:4px}
.spz-th.has-cn .spz-tag::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px #fff}
.spz-th.has-cn.pick{box-shadow:0 0 0 2.5px var(--pq-ok)}

/* ชื่อ/รายละเอียดสินค้าในหน้าตั้งค่า  โชว์อย่างเดียว ไม่ให้แก้ (เจ้าของสั่ง 15 ต.ค. 2569
   "ไม่ต้องมีให้แก้ไขหรือบันทึกซ้ำ ทั้งชื่อและรายละเอียด") */
.spz-view{margin:6px 0 0;font-size:14px;line-height:1.75;color:var(--pq-ink);white-space:pre-line;word-break:break-word}
.spz-view.is-det{max-height:360px;overflow:auto;padding:12px 13px;border-radius:14px;
  background:var(--pq-bg);font-size:13.5px;line-height:1.85;color:var(--pq-ink-2)}

/* ==========================================================================
   สัญญาณบอกว่าระบบกำลังแก้ไขรูปใบไหนอยู่   dashboard/share_post.php   16 ต.ค. 2569
   เจ้าของสั่ง "รูปไหนกำลังแก้ไขให้มีสัญญาณบอกด้วย"
   เดิมมีแต่บรรทัดข้างบนบอกว่า "กำลังแปลรูปเป็นไทย 2 / 5" แต่ไม่รู้ว่าใบไหน
   ทำเป็นแผ่นคลุมทับรูปใบนั้น + วงหมุน  ใบที่ยังรอคิวขึ้นจาง ๆ กำกับว่า "รอคิว"

   ★ ต้องเป็น .spz-th .spz-work ★ กฎ .spz-th span (0,1,1) ดันป้ายไปมุมซ้ายบน
     ถ้าตั้งชื่อคลาสเดียวแผ่นคลุมจะหดไปเป็นป้ายเล็ก ๆ ที่มุมแทน
   ========================================================================== */
.spz-th.is-making{ box-shadow:0 0 0 3px var(--pq-brand) !important; }
.spz-th.is-making .spz-tag{ background:var(--pq-brand) !important; color:#fff; }
.spz-th.is-wait{ box-shadow:0 0 0 2px var(--pq-brand-line) !important; }

/* แผ่นคลุมเต็มรูป  วางทับทุกอย่างรวมทั้งชื่อตัวเลือกกับปุ่มบนรูป */
.spz-th .spz-work{
  position:absolute; left:0; right:0; top:0; bottom:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:4px; background:rgba(255,255,255,.84); cursor:default;
  border-radius:inherit; box-sizing:border-box;
}
/* ป้ายมุมบนต้องลอยเหนือแผ่นคลุม ไม่งั้นโดนฝ้าขาวกลบจนอ่านไม่ออก
   ★ ซ่อนแว่นขยายตอนกำลังทำ ★ กดดูใหญ่ไม่ได้อยู่แล้วเพราะมีแผ่นคลุมทับ
   และป้ายจะได้กว้างเต็มช่อง ไม่โดนตัดเป็น "กำลัง…" (ช่องรูปกว้างแค่ 84px) */
.spz-th.is-making .spz-tag,
.spz-th.is-wait .spz-tag{ z-index:6; max-width:calc(100% - 12px); }
.spz-th.is-making .spz-zoom,
.spz-th.is-wait .spz-zoom{ display:none; }
.spz-th .spz-work .spz-spin{
  flex:none; display:block; width:22px; height:22px; border-radius:50%;
  border:2.5px solid var(--pq-brand-line); border-top-color:var(--pq-brand);
  animation:pgoSpin .8s linear infinite;
}
/* ใบที่ยังไม่ถึงคิว จางกว่า หมุนช้ากว่า ไม่ให้แย่งสายตาจากใบที่กำลังทำจริง */
.spz-th.is-wait .spz-work{ background:rgba(255,255,255,.72); }
.spz-th.is-wait .spz-work .spz-spin{
  width:16px; height:16px; border-width:2px;
  border-color:var(--pq-line); border-top-color:var(--pq-muted);
  animation-duration:1.6s;
}
/* ระบบลดการเคลื่อนไหวให้ไว้ ก็ไม่ต้องหมุน แต่ยังต้องเห็นว่าใบไหนกำลังทำ */
@media (prefers-reduced-motion:reduce){
  .spz-th .spz-work .spz-spin{ animation:none; border-top-color:var(--pq-brand); }
}

/* ============================================================================
   ★★ ป้าย "ต้องทำ" ต้องเป็นสีส้มแบบเดียวกันทั้งหมด ★★
   เจ้าของสั่ง 18 ต.ค. 2569 "ต้องทำ ทำให้เป็นสีส้มแบบเดียวกันทั้งหมด
                             จะแยกเป็น 2 แบบให้งงทำไม"

   ของเดิมป้ายใบเดียวกันออกมาได้ถึงสามสี เพราะกฎสามชุดแย่งกันเขียนทับ
     .spz-th.req       ส้ม   ← ความหมายจริงของใบนี้
     .spz-th.pick      เขียว ← มาทีหลัง ทับส้ม
     .spz-th.opt       ฟ้า   ← มาทีหลังอีก ทับทั้งคู่
   ผลคือรูปสไตล์ขึ้นป้ายส้มขอบเขียว ส่วนรูปตัวเลือกขึ้นป้ายเขียวขอบส้ม
   ทั้งที่ทั้งสองกลุ่มแปลว่าเรื่องเดียวกันเป๊ะ ๆ คือ "ระบบจะแปลรูปนี้ให้"

   ★ ก้อนนี้อยู่ท้ายไฟล์เพื่อให้ชนะทุกกฎข้างบน ★ ห้ามแทรกกฎสีของ .req ไว้ที่อื่นอีก
   ใบไหนเป็น req ก็ส้มล้วน ไม่ว่าจะพ่วง pick / opt / has-cn มาด้วยหรือไม่
   ========================================================================== */
.spz-th.req,
.spz-th.req.pick,
.spz-th.req.opt,
.spz-th.req.has-cn,
.spz-th.req.has-cn.pick{box-shadow:0 0 0 2.5px var(--pq-brand)}

.spz-th.req .spz-tag,
.spz-th.req.pick .spz-tag,
.spz-th.req.opt .spz-tag,
.spz-th.req.opt.pick .spz-tag,
.spz-th.req.has-cn .spz-tag{background:var(--pq-brand);color:#fff}

/* จุดแดง "มีภาษาจีน" ไม่ต้องขึ้นบนใบที่เขียนว่าต้องทำอยู่แล้ว
   เป็นเหตุผลของป้ายนั้นในตัว ใส่ซ้ำกลายเป็นสีที่สามบนใบเดียว */
.spz-th.req.has-cn .spz-tag::before{display:none}

/* ---------- ปุ่มบนรูปพร้อมโพส: ย้ายตำแหน่ง · ตั้งปก · สั่งแปลเอง (19 ต.ค. 2569) ----------
   กดตัวรูป = ดูรูปใหญ่  ไม่ย้ายไปเป็นปกแล้ว (เจ้าของสั่ง)  มือถือลากไม่ได้ จึงมีปุ่มลูกศร */
.spz-a.is-mv{flex:0 0 26px;font-size:11px}
.spz-a.is-cov{color:var(--pq-brand)}
.spz-acts.is-top .spz-a.is-tr{flex:0 0 auto;padding:4px 10px}
.spz-a.is-tr{color:var(--pq-brand)}
.spz-a.is-tr.on{background:var(--pq-brand);color:#fff}