/* ===== SWIPER FIXES FOR HERO SLIDER ===== */
/* CSS สำหรับแก้ไขปัญหาการทำงานของ swiper หลังจากที่เราปรับแต่ง hero slider */

/* เพิ่มความเร็วในการ fade effect */
.main-hero-slider-container .swiper-slide-active {
  transition-duration: 800ms !important;
  z-index: 1 !important;
}

/* ทำให้การเลื่อนภาพนุ่มนวล */
.main-hero-slider-container .swiper-wrapper {
  transition-timing-function: ease-out !important;
}

/* ปรับขนาดของปุ่มนำทาง */
.main-hero-slider-container .swiper-button-next,
.main-hero-slider-container .swiper-button-prev {
  width: 50px !important;
  height: 50px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 50% !important;
  color: #333 !important;
  font-weight: bold !important;
  transition: all 0.3s ease !important;
}

.main-hero-slider-container .swiper-button-next:hover,
.main-hero-slider-container .swiper-button-prev:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  transform: scale(1.1) !important;
}

.main-hero-slider-container .swiper-button-next:after,
.main-hero-slider-container .swiper-button-prev:after {
  font-size: 20px !important;
  font-weight: bold !important;
}

/* ปรับ pagination */
.main-hero-slider-container .swiper-pagination {
  bottom: 20px !important;
  z-index: 10 !important;
}

.main-hero-slider-container .swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  opacity: 0.7 !important;
  margin: 0 6px !important;
  transition: all 0.3s ease !important;
}

.main-hero-slider-container .swiper-pagination-bullet-active {
  background: white !important;
  opacity: 1 !important;
  transform: scale(1.2) !important;
}

/* แก้ไขปัญหา z-index เพื่อให้ navigation อยู่ด้านบนภาพเสมอ */
.main-hero-slider-container .swiper-button-next,
.main-hero-slider-container .swiper-button-prev,
.main-hero-slider-container .swiper-pagination {
  z-index: 10 !important;
}