/* มือถือ: ชุดการ์ดยาว ๆ กลายเป็นแถบปัดซ้ายขวา (เจ้าของสั่ง 16 ก.ย. 2569)
   ใช้กับ container ที่ติด data-mslider — จอกว้างยังเป็น grid เดิมทุกอย่าง
   ปุ่มลูกศรมาจาก /assets/mslider.js (โชว์เฉพาะจอแคบ) */
.ms-wrap{position:relative}
.ms-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;
  border-radius:50%;border:1px solid #D9C28F;background:#fff;color:#8a6d2f;
  font-size:1.3rem;line-height:1;display:none;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 6px 16px rgba(14,26,43,.25)}
.ms-nav:disabled{opacity:.3;cursor:default}
.ms-prev{left:-4px}
.ms-next{right:-4px}
/* โคลนหัว/ท้ายของแถบวนไม่รู้จบ (data-msloop) — โผล่เฉพาะตอนเป็นแถบเลื่อนบนจอแคบ
   จอกว้างเป็น grid ต้องซ่อน ไม่งั้นการ์ดงอกซ้ำ */
.ms-clone{display:none}
@media (max-width:760px){
  .ms-nav{display:flex}
  /* justify-content ต้อง flex-start เสมอ: คลาสเดิมบางตัว (.steps) เป็น center
     พอกลายเป็นแถบเลื่อน เนื้อหาจะถูกดันออกสองข้างเป็น scrollLeft ติดลบ
     การ์ดใบแรกหายถาวร (ผู้ตรวจอิสระ 16 ก.ย. 2569 · วัดจริงที่ 320px) */
  [data-mslider]{display:flex !important;grid-template-columns:none !important;
    justify-content:flex-start !important;align-items:stretch;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scrollbar-width:none;gap:14px !important;padding-bottom:6px}
  [data-mslider]::-webkit-scrollbar{display:none}
  [data-msloop] .ms-clone{display:block}
  [data-mslider] > *{flex:0 0 82%;max-width:82%;scroll-snap-align:center;
    grid-column:auto !important;box-sizing:border-box}
}