/* ===========================
   Hero Slide (Complete / Absolute Pagination)
   =========================== */

/* Container */
.hero-banner {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #000;
  margin-top: 0px;
}

/* Height */
@media (min-width: 1200px) { .hero-banner { height: auto; } }
@media (min-width: 992px) and (max-width: 1199px) { .hero-banner { height: auto; } }
@media (min-width: 768px) and (max-width: 991px) { .hero-banner { margin-top: 30px; } }
@media (max-width: 767px) { .hero-banner { margin-top: 30px; } }

/* Swiper */
.hero-swiper {
  position: relative;   /* สำคัญ! เพื่อให้ absolute อ้างอิง container */
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-swiper .swiper-wrapper { height: 100%; }

.hero-swiper .swiper-slide {
  height: 100%;
  position: relative;
  cursor: pointer;
}

/* ภาพ background */
.hero-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===========================
   Pagination (NOT FIXED)
   =========================== */
.hero-swiper .swiper-pagination {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 18px !important;     /* ระยะจากล่าง */
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px !important;        /* ระยะช่องว่างระหว่างจุด */
  z-index: 999;
  width: auto !important;
  pointer-events: auto;
  /* ป้องกันการตัด overflow ของแท่งเมื่อ active */
  overflow: visible;
  box-sizing: content-box;
}

/* bullet (inactive) - small circle */
.hero-swiper .swiper-pagination-bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ffffff;
  opacity: 1;
  border-radius: 50%;
  margin: 0 !important;
  box-sizing: content-box;
  transition:
    width 280ms cubic-bezier(.2,.8,.2,1),
    border-radius 240ms cubic-bezier(.2,.8,.2,1),
    background 180ms ease,
    transform 200ms ease;
  cursor: pointer;
}

/* active bullet -> long bar */
.hero-swiper .swiper-pagination-bullet-active {
  width: 30px;    /* ความยาวแท่งที่ต้องการ */
  height: 8px;    /* ความสูงเท่าจุด */
  border-radius: 6px; /* ลบความกลมมุมให้เป็นแท่งมน */
  background: #0f6f6d;
  transform: none;
}

/* ปรับขนาดบนมือถือ */
@media (max-width: 767px) {
  .hero-swiper .swiper-pagination {
    bottom: 12px !important;
    gap: 5px !important;
  }
  .hero-swiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
  }
  .hero-swiper .swiper-pagination-bullet-active {
    width: 20px; /* ลดความยาวบนมือถือ ให้เหมาะสม */
    height: 8px;
    border-radius: 5px;
  }
}