/* css/banner.css */

/* ปรับแต่ง Container ของ Slide */
.main-banner-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #f8f9fa; /* สีพื้นหลังระหว่างรอรูปโหลด */
}

/* บังคับขนาดรูปภาพให้พอดีและไม่เพี้ยน */
.banner-img {
    width: 100%;
    height: auto;
    object-fit: cover; /* สำคัญ: ทำให้รูปไม่เบี้ยวถ้ายืดหด */
    display: block;
}

/* (Optional) ปรับแต่ง Caption หากต้องการ */
.carousel-caption {
    background: rgba(0, 0, 0, 0.3); /* พื้นหลังดำจางๆ ให้อ่านตัวหนังสือออก */
    padding: 1rem;
    border-radius: 8px;
    bottom: 20%;
}

/* Mobile Adjustments (ถ้าต้องการกำหนดความสูงขั้นต่ำในมือถือ) */
@media (max-width: 767px) {
    .banner-img {
        min-height: 300px; /* กันไม่ให้แบนเนอร์เล็กเกินไปในมือถือ */
    }
}