.border-bottom-divider {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* --- CUSTOM CONTACT FORM STYLING --- */

/* 1. Style chung cho các ô Input & Textarea */
.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form input[type="tel"],
.custom-contact-form textarea {
    height: auto;
    padding-top: 1.125rem !important;
    padding-bottom: 1.125rem !important;
    padding-left: 1.5rem !important;

    font-size: var(--fs-16) !important;
    font-weight: var(--fw-regular) !important;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 0;
    box-shadow: none !important;
    margin-bottom: 1rem;
    color: #333;
}

/* 2. Style cho nút Submit */
.custom-contact-form input[type="submit"] {
    background-color: var(--fs-color-secondary, #9e5b43) !important;

    color: var(--color-light-text, #fff) !important;

    font-size: var(--fs-15) !important;
    font-weight: var(--fw-semibold) !important;

    padding-top: .675rem !important;
    padding-bottom: .675rem !important;

    padding-left: 1.875rem !important;
    padding-right: 1.875rem !important;

    border: none !important;
    border-radius: 0.25rem;
    text-transform: none;
    min-width: 120px;
    transition: opacity 0.3s ease;
}

.custom-contact-form input[type="submit"]:hover {
    opacity: 0.9;
    box-shadow: 0 0.25rem .675rem rgba(0, 0, 0, 0.15);
}

.custom-contact-form p {
    margin-bottom: 0;
}



/* --- FIX LAYOUT: TRÁI CONTAINER - PHẢI TRÀN VIỀN --- */

/* --- FIX LAYOUT: HALF-CONTAINER (RESPONSIVE CHUẨN) --- */

/* GIAI ĐOẠN 1: Màn hình to (PC/Laptop > 1200px) 
   Chỉ áp dụng công thức căn lề khi màn hình lớn hơn Container
*/
@media (min-width: 1200px) {
    .col-fix-padding-left .col-inner {
        /* Công thức căn chuẩn theo Container 1170px */
        padding-left: calc((100vw - 1170px) / 2 + 15px) !important;
        padding-right: 100px !important;

        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }
}

/* GIAI ĐOẠN 2: Laptop nhỏ & Tablet (850px -> 1199px)
   Lúc này màn hình bé hơn 1170px, ta bỏ công thức calc, 
   chỉ padding nhẹ 30px cho đẹp, không cần ép thẳng hàng Logo nữa.
*/
@media (min-width: 850px) and (max-width: 1199px) {
    .col-fix-padding-left .col-inner {
        padding-left: 30px !important;
        /* Padding an toàn */
        padding-right: 30px !important;

        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }
}

/* GIAI ĐOẠN 3: Mobile (Dưới 850px)
   Xếp chồng 2 cột lên nhau.
*/
@media (max-width: 849px) {

    /* Cột Form: Reset padding về mặc định */
    .col-fix-padding-left .col-inner {
        padding: 40px 15px !important;
    }

    /* Cột Ảnh: Bắt buộc phải set chiều cao (Vì nó là background) */
    /* Lưu ý: Bạn cần chắc chắn cột ảnh nằm ngay sau cột form trong HTML */
    .col-fix-padding-left+.col {
        min-height: 300px;
        /* Chiều cao ảnh trên mobile */
    }
}