/* ป้ายโฆษณาแบบสไลด์  mockup_shop/ads-slot.css  (24 ต.ค. 2569)  คู่กับ ads-slot.js
   ใช้โทเคนของ pt-shop.css (--sp-*) ถ้ามี · หน้าโซนเกม/มินิเกมไม่มี pt-shop ใช้ค่าสำรองในวงเล็บ
   กรอบป้าย 3:1 ตายตัว (aspect-ratio) โครงตอนรอโหลดสูงเท่าของจริง หน้าไม่กระตุก */
.ad-slot{--ad-or:#ee4d2d;--ad-or-d:#c43e22;--ad-ink:var(--sp-ink,#1d1f24);--ad-mute:var(--sp-mute,#8b919b);--ad-line:var(--sp-line,#ececf0);--ad-card:var(--sp-card,#fff);
  position:relative;display:flex;flex-direction:column;gap:0;min-width:0;color:var(--ad-ink)}
.ad-slot:not(.sp-sec){background:transparent}
.ad-h{display:flex;align-items:center;gap:8px;height:22px;min-width:0;margin-bottom:10px}
.ad-h b{flex:1;min-width:0;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-more{flex:none;font-size:12.5px;font-weight:500;color:#c94f0c;text-decoration:none;white-space:nowrap}
.ad-tag{flex:none;display:inline-block;font-size:10.5px;font-weight:600;line-height:16px;padding:0 6px;border-radius:4px;border:1px solid var(--ad-tagl,#e6e8ec);color:var(--ad-tagc,#6b7180);background:var(--ad-tagb,#f5f6f8);font-style:normal}
.ad-sl{position:relative;min-width:0}
.ad-tr{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:10px;overscroll-behavior-x:contain}
.ad-tr::-webkit-scrollbar{display:none}
.ad-it{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.ad-slot .adb{position:relative;display:block;width:100%;aspect-ratio:3/1;border-radius:10px;overflow:hidden;background:var(--sp-bg,#f2f3f5);container-type:inline-size;text-decoration:none;color:inherit}
.ad-slot .adb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.adb-tag{position:absolute;left:1.6cqw;top:1.6cqw;z-index:1;font-size:max(9px,2.6cqw);font-weight:600;line-height:1;font-style:normal;padding:.8cqw 1.6cqw;border-radius:1.2cqw;background:rgba(0,0,0,.45);color:#fff}
.ad-slot .adb.is-sk{background:linear-gradient(90deg,var(--sp-bg,#f2f3f5) 0%,var(--ad-line) 50%,var(--sp-bg,#f2f3f5) 100%) 0 0/200% 100%;animation:ad-sk 1.4s linear infinite}
@keyframes ad-sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.ad-slot .adb.is-sk{animation:none}}
/* ป้ายที่ว่าง */
.ad-slot .adb.vac{display:flex;align-items:center;gap:3.5cqw;padding:0 4.5cqw;background:repeating-linear-gradient(135deg,#fff7f3 0 14px,#fff1ea 14px 28px);border:2px dashed #f4a58f;color:#1d1f24}
.adb.vac .adb-ic{flex:none;width:19cqw;height:19cqw;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 8px rgba(238,77,45,.18)}
.adb.vac .adb-ic svg{width:12cqw;height:12cqw;fill:none;stroke:var(--ad-or-d);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.adb.vac .adb-ic svg .c{fill:#ffe1d6}
.adb.vac .adb-ic svg .f{fill:#ffb59d}
.adb.vac .adb-vt{flex:1;min-width:0;display:flex;flex-direction:column}
.adb.vac .adb-vt small{font-size:3.9cqw;color:var(--ad-or-d);font-weight:600;line-height:1.2}
.adb.vac .adb-vt b{font-size:6.4cqw;line-height:1.14;font-weight:700;margin-top:.6cqw}
.adb.vac .adb-vt b em{font-style:normal;color:var(--ad-or)}
.adb.vac .adb-vt span{display:inline-flex;align-self:flex-start;align-items:center;gap:1cqw;margin-top:1.8cqw;font-size:4cqw;font-weight:700;line-height:1;color:#fff;background:var(--ad-or);border-radius:999px;padding:1.8cqw 3.2cqw;box-shadow:0 3px 10px rgba(238,77,45,.3)}
.adb.vac .adb-vt span svg{width:3.6cqw;height:3.6cqw;fill:none;stroke:#fff;stroke-width:2.4}
@container (max-width:200px){.adb.vac .adb-vt small,.adb.vac .adb-vt span{display:none}.adb.vac .adb-vt b{font-size:9.5cqw}}
/* บรรทัดใต้ป้าย */
.ad-by{display:flex;align-items:center;gap:6px;height:18px;margin-top:6px;font-size:12px;color:var(--ad-mute);white-space:nowrap;min-width:0}
.ad-by b{color:var(--ad-ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ad-by-s{flex:none}
.ad-by.vac .ad-by-s{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}
.ad-lk{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:3px;font-weight:600;color:var(--ad-or);text-decoration:none}
.ad-lk svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ad-by.is-sk i{display:block;width:40%;height:10px;border-radius:5px;background:var(--ad-line)}
.ad-dots{display:flex;justify-content:center;gap:5px;height:6px;margin-top:6px}
.ad-dots i{width:6px;height:6px;border-radius:3px;background:#d3d6dd;transition:width .2s,background .2s}
.ad-dots i.on{width:16px;background:var(--ad-or)}
.ad-dots.is-one{visibility:hidden}
/* ในกล่อง "ชำระสำเร็จ" */
.ad-slot.is-pay{margin-top:10px}
.ad-slot.is-pop{margin-top:12px;padding-top:12px;border-top:1px dashed var(--ad-line)}
/* หน้าโซนเกม (พื้นเข้ม) */
.ad-slot.is-dark{--ad-ink:#fff;--ad-mute:#8a909b;--ad-line:#2a2d35;--ad-tagb:transparent;--ad-tagl:#3a3d46;--ad-tagc:#8a909b;padding:12px;border-radius:12px;background:#14161b}
.ad-slot.is-dark .ad-dots i{background:#3a3f4b}
.ad-slot.is-dark .ad-dots i.on{background:var(--ad-or)}
.ad-slot.is-dark .adb{background:#1f2229}
/* มินิเกม: แถบชื่อร้านใต้แถวคะแนน (กดไม่ได้) */
.ad-strip{flex:none;position:relative;display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,#14161b,#1b1e25);pointer-events:none;font-size:12.5px;color:#9aa0ab;white-space:nowrap;overflow:hidden}
.ad-strip .ad-st{position:absolute;left:12px;right:96px;top:0;bottom:0;display:flex;align-items:center;gap:6px;opacity:0;transform:translateY(4px);min-width:0}
.ad-strip .ad-st.on{opacity:1;transform:none;transition:opacity .4s,transform .4s}
.ad-strip .ad-st b{color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ad-strip .ad-st-k{flex:none}
.ad-strip .ad-st.vac b{color:#ffb7a3}
.ad-strip .ad-st i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;border:1px dashed #7a4a3d}
.ad-strip .ad-st i svg{width:14px;height:14px;fill:none;stroke:#ffb7a3;stroke-width:1.6}
.ad-strip .ad-tag{margin-left:auto;background:transparent;border-color:#3a3d46;color:#8a909b}
.ad-strip .ad-st-lg{flex:none;width:22px;height:22px;border-radius:6px;overflow:hidden;background:#2a2d35}
.ad-strip .ad-st-lg img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
@media (prefers-reduced-motion:reduce){.ad-strip .ad-st{transition:none}}
/* ในการ์ดเริ่ม/พัก/จบของมินิเกม */
.ad-slot.is-game{margin-top:12px}
.ad-slot.is-game .ad-h b{font-size:13px}
/* ในกล่องชำระสำเร็จของ app-shell (ใต้ปุ่มตกลง) */
.ad-slot.is-inbox{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(0,0,0,.12);width:100%}
/* ช่องที่ใส่หลังหน้าวาดเสร็จ (บิลโฉม nbl/npy) */
.nbl-tail .ad-slot.is-late,.npy-main .ad-slot.is-late{margin-top:12px}
/* โลโก้ร้าน (ไม่บังคับ) ข้าง "สนับสนุนโดย" และในแถบระหว่างเล่น */
.ad-lgi{flex:none;width:18px;height:18px;border-radius:5px;overflow:hidden;background:var(--sp-bg,#f2f3f5)}
.ad-lgi img{width:100%;height:100%;object-fit:cover;display:block}
.ad-strip .ad-st-lg.is-logo img{object-position:center}
/* ป้ายตัวอย่างที่เห็นเฉพาะเจ้าของ (ยังไม่ขึ้นจริง) */
.adb-pv{position:absolute;right:1.6cqw;top:1.6cqw;z-index:1;font-size:max(9px,2.6cqw);font-weight:700;line-height:1;font-style:normal;padding:.9cqw 1.8cqw;border-radius:1.2cqw;background:#fff3c4;color:#7c5a00;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.ad-strip .ad-st-pv{flex:none;font-style:normal;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:4px;background:#fff3c4;color:#7c5a00}
/* ป้ายที่ว่างบนพื้นมืด (โซนเกม): ตัวหนังสือเดิมสีดำกลืนพื้น เห็นแค่ราคา (1 พ.ย. 2569) */
.ad-slot.is-dark .adb.vac{color:#fff}
.ad-slot.is-dark .adb.vac .adb-vt small{color:#ffb7a3}