@charset "UTF-8";
/* ส่วน "ร้านตัวอย่าง 9 ธุรกิจ" หน้าแรก v2 — เจ้าของเลือก B-γ จาก /lab/demos3 (30 ต.ค.) แต่ไม่ซูม: ถึงร้านไหน รางหยุดแล้วเลื่อนหน้าร้านจริงลงให้ดู
   html.dm-motion = GSAP ทำงาน (จอ ≥ 861px · ไม่ได้ตั้งลดการเคลื่อนไหว) · ไม่มีคลาสนี้ = รางปัดแนวนอนด้วยนิ้ว · ห้ามขอบสีด้านเดียว */
.dmB { background: var(--ink); color: #fff; }
.dmB__pin { position: relative; min-height: 100vh; display: grid; align-content: center; gap: 30px; overflow: hidden; padding: 96px 0 48px; }
.dmB__head { text-align: center; }
.dmB__head h2 { margin-top: 12px; font-size: clamp(30px, 3.8vw, 52px); color: #fff; }
.dmB__track { --cw: min(46vw, 620px); display: flex; gap: 6vw; padding: 20px calc(50vw - var(--cw) / 2) 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dm-motion .dmB__track { overflow: visible; will-change: transform; }
.dmB__card { position: relative; flex: none; width: var(--cw); scroll-snap-align: center; }
.dmB__word { position: absolute; left: -6%; top: -24%; font: 600 clamp(70px, 9vw, 150px)/1 var(--f-display); white-space: nowrap; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--c) 70%, #fff); opacity: .45; pointer-events: none; }
.dmB__media { position: relative; padding: 0 8% 9% 0; }
.dmB__laptop { border-radius: 8px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6); background: #fff; }
.dmB__laptop img, .dmB__phone img { display: block; width: 100%; height: auto; }
.dmB__phone { position: absolute; right: 0; bottom: 0; width: 23%; border-radius: 22px; border: 6px solid #000; overflow: hidden; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .7); }
.dmB__meta { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.dmB__meta > div { flex: 1; display: grid; }
.dmB__meta b { font: 600 22px var(--f-display); }
.dmB__meta small { color: rgba(255, 255, 255, .65); font-size: 14px; }
.dmB__n { font: 600 34px/1 var(--f-display); color: var(--c); filter: brightness(1.6); }
.dmB .btn--ghost { background: rgba(255, 255, 255, .1); color: #fff; }

.dmB__pin { grid-template-columns: minmax(0, 1fr); } /* รางกว้างหลายพันพิกเซลไม่ดันคอลัมน์ให้หัวข้อหลุดจอ */
.dmB__head .eyebrow { color: var(--gold); }
.dmB__head .lead { margin: 12px auto 0; color: rgba(255, 255, 255, .7); text-align: center; }
.dmB__word { top: -12%; }
.dmB__screen { position: relative; aspect-ratio: 1200 / 750; overflow: hidden; }
.dmB__screen img { will-change: transform; }
@media (max-width: 860px) {
  .dmB__pin { min-height: 0; }
  .dmB__track { --cw: 82vw; }
}