@tailwind base;
@tailwind components;
@tailwind utilities;

/* เพิ่ม CSS ของคุณในนี้ */
html {
  scroll-behavior: smooth;
}
body {
  
  box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, button, a, label, input{
  font-family: 'IBM Plex Sans Thai', sans-serif;
}
p{
  font-family: "IBM Plex Sans Thai Looped", sans-serif;

}

#contactForm input{
  height: 32px;
}
.bg-green-light{
  background: #71cc9833;
}

/* VDO */
.video-slide {
  min-width: 90%; /* แสดงวิดีโอหลัก 90%, เหลือ 10% ให้ถัดไปโผล่ */
  margin-right: 10px;
}
.swiper{
  min-height: 50vh;
}
.swiper-pagination{
  transform: translate3d(0, 28px, 0);
}

/* ปุ่มควบคุม Swiper */
.swiper-button-next,
.swiper-button-prev {
  color: #00826a !important; /* สีเริ่มต้น */
  transition: color 0.3s ease; /* เพิ่มความนุ่มนวลตอนเปลี่ยนสี */
  opacity: .7;
}

/* เมื่อ hover ให้เปลี่ยนเป็นสีหลัก */
.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #00826a;
  opacity: 1;
}

/* ขนาดของลูกศร */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 20px;
}

/* จุด pagination */
.swiper-pagination-bullet {
  background: #ebf5ef; /* สีเริ่มต้น */
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: #00826a !important; /* สีเมื่อถูกเลือก */
}

@media (max-width: 1024px){
  .video-slide {
    min-width: 45%; /* 2 วิดีโอใน 100% + margin */
    margin-right: 10px;
  }
  .swiper{
    min-height:32vh !important;
  }
}

@media (max-width: 400px){
  .video-slide {
    min-width: 45%; /* 2 วิดีโอใน 100% + margin */
    margin-right: 10px;
  }
  .swiper{
    min-height:62vh !important;
  }
}