/* zoom img */
.img-z {
  width: auto;
  height: auto;
  overflow: hidden;
  margin: 0 auto;
  transition: transform 0.5s ease, opacity 0.5s ease;
  background-color: rgb(255, 255, 255);
}

.img-z img {
  width: 100%;
  opacity: 1;
  transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.img-z:hover img {
  transform: scale(1.05);
  opacity: 0.6;

}

.type {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 1s steps(40, end);
  border-right: px solid #ffffff83;
}

.type2 {
  overflow: hidden;
  white-space: wrap;
  animation: typing 2.5s steps(40, end);
  border-right: px solid #ffffff83;
}

@keyframes typing {
  from {
    width: 0;
    box-shadow: inset -3px 0px 0px 0px #f8f9fa;

  }

  to {
    width: 20%;
    box-shadow: inset -3px 0px 0px 0px #f8f9fa;

  }

  20% {
    border-right: none;
    /* Make the border disappear at the end of animation */
  }
}

.facts {
  /* position: relative; */
  margin-top: -200px;
  z-index: 1;
  bottom: -20px;
}

@media only screen and (max-width: 768px) {
  .facts {
    margin-top: 0px;
  }
}

/* dropdown */
.dropdowns {
  position: relative;
  display: inline-block;
}

.dropdown-contents {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 350px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  left: 10%;
  /* จัดตำแหน่งให้อยู่ตรงกลางแนวนอน */
  transform: translateX(-50%);
  /* ให้ตำแหน่งอยู่ตรงกลางแนวนอน */
}

.dropdown-contents .cols-4 {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 20px;
  padding: 20px;
}

.dropdown-contents a {
  color: black;
  padding: 10px 7px;
  text-decoration: none;
  display: block;
}

.dropdown-contents a:hover {
  color: #0066ff;
  background-color: #f1f1f1;
}

/* ปรับให้ dropdown-contents มีความกว้างตาม grid-cols */
.dropdowns:hover .dropdown-contents {
  display: block;
  width: max-content;
  /* กำหนดให้กว้างตามเนื้อหา */
  white-space: nowrap;
  /* ไม่ให้ข้อความขึ้นบรรทัดใหม่ */
}

.sc {
  transform: scale(0.75);
}

.carousel {
  position: relative;
}

.carousel img {
  height: 300px;
  /* กำหนดความสูงของรูปเป็น 300px */
  width: auto;
  /* ทำให้ความกว้างของรูปเป็น auto */
  object-fit: cover;
  /* การปรับขนาดรูปให้เต็ม container โดยที่ไม่เกินหรือขาด */
}

.carousel .slick-slide {
  opacity: 0.7;
  /* ทำให้รูปใน carousel เป็นสีมืด */
  transition: opacity 0.3s ease;
  /* ทำให้การเปลี่ยน slide เคลื่อนไหวอย่างนุ่มนวล */
}

.carousel .slick-center {
  opacity: 1;
  /* ทำให้รูปที่อยู่ตรงกลางของ carousel เป็นสีสว่าง */
}

/* เพิ่มสไตล์เพื่อป้องกันการทับสีชมพูบนรูปที่ไม่ได้อยู่ตรงกลาง */
.carousel .slick-slide:not(.slick-center) img {
  filter: grayscale(10%) brightness(50%) blur(2px);
  /* ทำให้รูปที่ไม่ใช่ตรงกลางเป็นสีเทาและมืดลง */
}

.img-opcity {
  background-color: #ffff;
  opacity: 0.5;

}

.btn-z {
  margin-top: 150px;
  transform: scale(1.25);
}

.tab-content {
  display: none;
}

.tab-content.show {
  display: block;
}