/* --- Multi-Item Carousel CSS --- */
@media (max-width: 767px) {
    /* มือถือ: แสดงทีละ 1 (ค่าเริ่มต้น Bootstrap) */
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* คอมพิวเตอร์: แสดงทีละ 3 (33.33%) */
@media (min-width: 768px) {
    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(33.33%);
    }
    .carousel-inner .carousel-item-start.active, 
    .carousel-inner .carousel-item-prev {
      transform: translateX(-33.33%);
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
  transform: translateX(0);
}

/* ปรับแต่งปุ่มกด Slide ให้เห็นชัดขึ้นบนพื้นหลังขาว */
.carousel-control-prev, .carousel-control-next {
    width: 5%;
    background-color: rgba(53, 78, 53, 0.8); /* สีเขียวทหาร */
    border-radius: 50%;
    height: 40px;
    width: 40px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
}
.carousel-control-prev { left: -10px; }
.carousel-control-next { right: -10px; }

/* จัดระยะห่างการ์ดใน Carousel */
.carousel-item .col-md-4 {
    padding: 0 10px; 
}