.logo-img{
    border-radius: 50%;
}


.carousel-item img {
    height: 600px; /* <--- กำหนดความสูงที่ต้องการ */
    width: 100%; /* <--- ทำให้รูปภาพกว้างเต็มพื้นที่ของ carousel-item */
    object-fit: cover; /* <--- สำคัญ: ครอบคลุมพื้นที่โดยรักษาสัดส่วน (อาจมีการครอป) */
    object-position: center; /* <--- จัดตำแหน่งเนื้อหาในรูปภาพให้อยู่ตรงกลาง */
}
 /* CSS สำหรับควบคุมขนาดรูปภาพใน Carousel */
    /* คุณควรย้ายโค้ด CSS นี้ไปที่ไฟล์ .css ของคุณเอง */

    /* ส่วนนี้ควบคุมขนาดของรูปภาพจริง */
    .carousel-item img {
        height: 500px; /* กำหนดความสูงที่ต้องการ */
        max-width: 80%; /* <--- กำหนดความกว้างสูงสุดของรูปภาพให้เป็น 80% ของ parent */
                          /* คุณสามารถเปลี่ยนค่านี้ได้ตามต้องการ เช่น 70%, 50% */
        object-fit: contain; /* <--- เปลี่ยนจาก cover เป็น contain เพื่อให้รูปภาพทั้งหมดแสดงในกรอบ */
                              /* ถ้าคุณใช้ cover รูปภาพจะถูกครอปถ้าสัดส่วนไม่พอดีกับ height/width ที่กำหนด */
        object-position: center; /* ทำให้เนื้อหาในรูปภาพอยู่ตรงกลาง */
        margin: 0 auto; /* <--- ใช้ margin auto เพื่อจัดกึ่งกลางรูปภาพในแนวนอน (ทำงานกับ d-block) */
    }

    /* ส่วนนี้ควบคุมการจัดวางเนื้อหา (รวมถึงรูปภาพและ carousel-caption) ภายใน carousel-item */
    .carousel-item {
        min-height: 600px; /* กำหนดความสูงขั้นต่ำของแต่ละสไลด์ */
        display: flex; /* <--- ใช้ Flexbox เพื่อจัดเรียงลูกๆ (รูปภาพ, container) */
        flex-direction: column; /* <--- จัดเรียงลูกๆ ในแนวตั้ง (รูปภาพอยู่บน, caption อยู่ล่าง) */
        align-items: center; /* <--- จัดลูกๆ ให้อยู่กึ่งกลางในแนวนอน */
        justify-content: center; /* <--- จัดลูกๆ ให้อยู่กึ่งกลางในแนวตั้ง (ถ้ามีพื้นที่ว่าง) */
        text-align: center; /* จัดข้อความใน caption ให้ตรงกลาง */
    }

    /* เพื่อให้ข้อความใน caption อ่านง่ายขึ้นบนรูปภาพ */
    .carousel-caption h1,
    .carousel-caption p {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    }

    /* ปรับตำแหน่งของ carousel-caption ให้ยืดหยุ่นขึ้น */
    .carousel-caption {
        position: relative; /* <--- เปลี่ยนเป็น relative หรือ static */
        bottom: auto;
        left: auto;
        right: auto;
        padding-bottom: 1.25rem;
        padding-top: 1.25rem;
        width: 100%; /* ทำให้ caption กว้างเต็มพื้นที่ */
        max-width: 960px; /* หรือความกว้าง container ของ Bootstrap */
        margin-left: auto;
        margin-right: auto;
        color: #fff; /* ตรวจสอบให้แน่ใจว่าข้อความเป็นสีขาว */
    }

    .carousel-caption .col-md-6 {
        margin-left: auto;
        margin-right: auto;
    }

    /* ในไฟล์ assets/css/style.css */

/* สำหรับปุ่ม "เข้าสู่ระบบ" (Outline Button) */
.custom-red-outline-btn {
    color: #dc3545; /* สีข้อความ */
    border-color: #dc3545; /* สีขอบ */
    background-color: transparent; /* พื้นหลังโปร่งใส */
}

.custom-red-outline-btn:hover,
.custom-red-outline-btn:focus,
.custom-red-outline-btn:active {
    color: #ffffff; /* สีข้อความเมื่อ hover/focus/active */
    background-color: #dc3545; /* สีพื้นหลังเมื่อ hover/focus/active */
    border-color: #dc3545; /* สีขอบเมื่อ hover/focus/active */
}

/* สำหรับปุ่ม "สมัคร" (Solid Button) */
.custom-red-btn {
    color: #ffffff; /* สีข้อความ */
    background-color: #dc3545; /* สีพื้นหลัง */
    border-color: #dc3545; /* สีขอบ */
}

.custom-red-btn:hover,
.custom-red-btn:focus,
.custom-red-btn:active {
    color: #ffffff; /* สีข้อความเมื่อ hover/focus/active */
    background-color: #c82333; /* สีพื้นหลังเมื่อ hover/focus/active (สีแดงเข้มขึ้น) */
    border-color: #bd2130; /* สีขอบเมื่อ hover/focus/active (สีแดงเข้มขึ้น) */
}

/* คุณอาจจะต้องเพิ่ม !important ถ้า Bootstrap default มีความสำคัญสูงกว่า */
/* ตัวอย่าง:
.custom-red-outline-btn {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}
*/

/* ถ้าคุณยังไม่ได้ทำ ให้ Header เป็นสีขาวทั้งหมดตามที่คุยกันก่อนหน้านี้ */
.header a,
.header .nav-link,
.header .navbar-nav .nav-link {
    color: #ffffff !important;
}

/* ปรับสี placeholder ของ input search และข้อความใน input */
.header .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}
.header .form-control {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}