/*===============================*/
/*           FONT FACES         */
/*===============================*/

.carousel-wrapper1 {
  position: relative;
  width: 100%;
  height: 63vh; /* หรือความสูงที่ต้องการ */
  overflow: hidden;
  background: #fff;
  top: -14rem;
  margin-bottom: 24rem;
}

.scroll-container {
  position: relative;
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scroll-container::-webkit-scrollbar {
  display: none;
}

.scroll-track {
  display: flex;
  align-items: center;
  height: 100%;

  gap: 40px;
}

.scroll-track img {
  height: 435px;
}

.scroll-container {
  cursor: grab;
}

.scroll-container.active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}


.blur-overlay {
  position: absolute;
  top: 0;
  width: 640px;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  backdrop-filter: blur(10px); /* คุณสามารถปรับค่า blur ได้ */
  background: rgba(255, 255, 255, 0.1); /* เลือกความขุ่นนิดหน่อย */
}

.blur-overlay.left {
  left: 0;

  /* 🔥 ไล่เบลอ: ซ้ายเบลอมาก → ขวาเบลอน้อย */
  -webkit-mask-image: linear-gradient(to right, black 0%, transparent 80%);
  mask-image: linear-gradient(to right, black 0%, transparent 100%);
}

.blur-overlay.right {
  right: 0;

  /* 🔥 ไล่เบลอ: ซ้ายเบลอน้อย → ขวาเบลอมาก */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 100%);
}

@media (max-width: 768px) {
  .carousel-wrapper1 {
    height: 40vh; /* ลดความสูงลงให้พอดีกับหน้าจอเล็ก */
  }

  .scroll-track {
    gap: 20px; /* ลดช่องว่างระหว่างรูปภาพ */
  }

  .scroll-track img {
    height: 240px; /* ลดขนาดภาพให้เหมาะกับหน้าจอ */
  }

  .blur-overlay {
    width: 120px; /* ลดความกว้างของกรอบเบลอลง */
    backdrop-filter: blur(6px); /* เบลอเบาลงเล็กน้อยในจอเล็ก */
  }

  .blur-overlay.left {
    -webkit-mask-image: linear-gradient(to right, black 0%, transparent 70%);
    mask-image: linear-gradient(to right, black 0%, transparent 70%);
  }

  .blur-overlay.right {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 100%);
  }

.scroll-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* เพิ่มสำหรับ iOS */
}
}

.carousel-wrapper1 {
    margin-bottom: 1rem;
}

@media (min-width: 992px) and (max-width: 1199px) {
.carousel-wrapper1 {
    position: relative;
    width: 100%;
    height: 67vh;
    overflow: hidden;
    background: #fff;
    top: -18rem;
    margin-bottom: 24rem;
}
}

@media (min-width: 1200px) and (max-width: 1599px) {
.scroll-track img {
    height: 396px;
    margin-top: -2rem;
}
}

@media (min-width: 769px) and (max-width: 991px) {
.scroll-track img {
    height: 17rem;
}

.blur-overlay {
    width: 10rem;
    }

.carousel-wrapper1 {
    height: 19rem;
    top: -16rem;
}
}