/* assets/css/nhf/home-banners.css — R99 ป้ายหมุนเวียนหน้าแรก (มือถือ) จากหลังบ้าน new-mgmt (docs/task/52 ; new-mgmt docs/front/BANNERS/01-spec.md §1 "ขนาดบนจอ")
   เสิร์ฟผ่าน /_css/<NHF_CSS_VER>/home-banners.css (utils/nhf-css.ts) — โหลดจาก components/nhf/HomeBanners.vue เฉพาะหน้าแรกที่มีป้าย ≥ 1 ใบ ; โหลดหลัง theme-override.css
   - กล่องเดิม `.col-12.lrimg > .image-container` (มุมโค้ง var(--nhf-r) / เงา / พื้น #111 / ระยะ 8 px จาก theme-override.css ชุดเดิม) + **อัตราส่วน 3:1 คงที่** (390 px → 130 px)
     ด้วย padding-bottom 33.3333 % (ไม่พึ่ง aspect-ratio — เครื่องเก่าใช้ได้) ; ทุกใบเท่ากัน รูปครอปด้วย object-fit: cover ; ความสูงของรูปจริงไม่มีผล
   - ราง = flex + overflow-x auto + scroll-snap (ปัดนิ้วได้โดยไม่ต้องมี JS) ซ่อน scrollbar ; ใบละเต็มกว้าง ; จุดบอกตำแหน่ง = ปุ่มโซนแตะ 48×48 (จุดมองเห็น 8 px / ใบที่เลือก 20 px) ซ้อนขอบล่างกลาง
   - แถวนี้เป็น d-lg-none อยู่แล้ว (จอ ≥ 992 px ไม่แสดง) — PC เหมือนเดิม */
#section-content .row.p-1.d-block.d-lg-none > .col-12.lrimg.nhf-hb > .image-container.nhf-hb__box,
.nhf-hb > .nhf-hb__box {
  position: relative;
  display: block;
  width: 100%;
  height: 0 !important;
  padding: 0 0 33.3333% !important;
  overflow: hidden;
  background: #111;
}
.nhf-hb__track {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nhf-hb__track::-webkit-scrollbar { display: none; width: 0; height: 0; }
.nhf-hb__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: block;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  -webkit-tap-highlight-color: transparent;
}
.nhf-hb__slide:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.nhf-hb__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
}
.nhf-hb__dots {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  z-index: 2;
}
.nhf-hb__dot {
  width: 48px;
  min-width: 48px;
  height: 48px;
  margin: 0;
  padding: 0 0 7px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.nhf-hb__dot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 0 3px rgba(0, 0, 0, .65);
  transition: width .2s ease, background-color .2s ease;
}
.nhf-hb__dot.is-on::before { width: 20px; background: #fff; }
.nhf-hb__dot:focus-visible { outline: 2px solid #fff; outline-offset: -8px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  .nhf-hb__track { scroll-behavior: auto; }
  .nhf-hb__dot::before { transition: none; }
}