/* style.css */

/* ปรับขนาด carousel และ background */
#myCarousel {
    margin-bottom: 4rem;
}

.carousel-item {
    height: 70vh;
    /* เต็มความสูงหน้าจอ */
    position: relative;
}

.full-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.carousel-caption {
    position: absolute;
    bottom: 5%;
    /* หรือจะใช้ 10%, 2rem แล้วแต่สวยงาม */
    left: 5%;
    right: 5%;
    z-index: 2;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.5);
    /* ใส่พื้นหลังให้ตัวหนังสือเด่น */
    padding: 20px;
    border-radius: 10px;
}

.carousel-item img {
    max-height: 600px;
    /* ปรับตามความเหมาะสม */
    object-fit: cover;
    /* ตัดภาพให้พอดี ถ้าเกิน */
    width: 100%;
}

/* ข้อความด้านซ้ายหรือขวา */
.carousel-caption.text-start {
    left: 3rem;
    right: auto;
    text-align: left;
}

.carousel-caption.text-end {
    right: 3rem;
    left: auto;
    text-align: right;
}

/* ปรับให้ carousel indicators อยู่ต่ำลง */
.carousel-indicators {
    bottom: 1rem;
}

/* เพิ่มความสวยงามให้ปุ่ม */
.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}