/* ==========================================================================
   contact-modal.css — CHỈ phần hộp thoại (modal) của form Liên hệ dùng chung.
   ==========================================================================

   VÌ SAO TÁCH RA (#40):

   contact.css là stylesheet của TOÀN TRANG Liên hệ, không phải của riêng modal.
   Nó chứa .contact-container, .contact-banner, .contact-description, .contact-list,
   .contact-item, .contact-socials, .contact-locations và cả `header { position: relative }`.

   Trang Về chúng tôi › Thiết bị cũng dùng lớp .contact-description cho khối mô tả ở
   section Contact Us của riêng nó (AboutEquipment.cshtml). Nạp nguyên contact.css vào
   trang đó thì — vì nạp SAU bundle AboutUsEquipment-css và cùng độ đặc hiệu (0,1,0) —
   quy tắc của contact.css thắng theo thứ tự:

       AboutUsEquipment.css:24   .contact-description { width: 297px; font-size: 14px }
       contact.css:54 + @media   .contact-description { display:flex; width:100%; flex-direction:row }
                                 .contact-description p { width: 50% }

   ⇒ khối mô tả đang là một cột 297px bung thành full-width hai cột, thấy ngay khi mở
   trang, không cần mở modal.

   File này giữ đúng phần modal — mọi selector đều nằm dưới .contact-modal (trừ hai khối
   trạng thái form mà contact-us.js gán trực tiếp: .btn-submit:disabled và input.invalid).
   Không có quy tắc nào chạm tới bố cục trang, nên nạp được vào bất kỳ trang nào có modal.

   THỨ TỰ NẠP: contact.css rồi mới tới contact-modal.css (xem ContactUs.cshtml) — giữ
   đúng thứ tự tương đối như khi hai phần còn nằm chung một file, để cascade không đổi.
   ========================================================================== */

.btn-submit:disabled {
  opacity: 0.5;         /* Làm mờ nút */
  cursor: not-allowed;  /* Đổi con trỏ chuột */
  pointer-events: none; /* Ngăn tương tác */
}

input.invalid, textarea.invalid {
    border: 1px solid #fff; /* viền trắng */
}

    input.invalid::after, textarea.invalid::after {
        content: "Please fill out this field";
        position: absolute;
        background: #fff;
        color: #000; /* chữ đen trên nền trắng */
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 12px;
    }

.u-form-kit form .contact-modal {
    animation-duration: 1s;
    background-color: var(--modal-color);
    z-index: 999999;
}

.contact-modal {
    animation-duration: 1s;
    background-color: var(--modal-color);
    z-index: 999999;
}

    .contact-modal .modal-content {
        background-color: var(--modal-color);
    }

    .contact-modal h2 {
        font-size: 54px;
        font-weight: 300;
        text-transform: uppercase;
        line-height: 65px;
        color: var(--white-color);
    }

    .contact-modal .modal-body {
        padding-top: 0;
        padding-bottom: 0;
        width: 100%;
    }

        .contact-modal .modal-body .modal-body-content {
            display: flex;
            flex-direction: column;
            gap: 39px;
            margin-top: 120px;
            margin-bottom: 102px;
            justify-content: center;
            align-items: center;
        }

            .contact-modal .modal-body .modal-body-content form {
                display: flex;
                flex-direction: column;
            }

                .contact-modal .modal-body .modal-body-content form .form-item {
                    margin-bottom: 21px;
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    gap: 7px;
                }

                    .contact-modal .modal-body .modal-body-content form .form-item label {
                        font-weight: 300;
                        line-height: 1.4em;
                        text-transform: uppercase;
                    }

    .contact-modal .btn-close {
        position: absolute;
        top: 27px;
        right: 88%;
        font-size: 14px;
        opacity: 1;
        z-index: 1;
    }

    .contact-modal form .form-item {
        color: var(--white-color);
    }


        .contact-modal form .form-item label {
            width: 10%;
        }

        .contact-modal form .form-item.required label::after {
            content: "*";
            color: var(--href-color);
            margin-left: 0.5rem;
        }

        .contact-modal form .form-item .form-item-ipt {
            background-color: #ffffff;
            color: #000;
            height: 40px;
            border: 1px solid #69727d;
            outline: unset;
            font-weight: 300;
            line-height: 1.4em;
            width: 100%;
            max-width: 550px;
        }

        .contact-modal form .form-item textarea.form-item-ipt {
            min-height: 40px;
            height: auto;
            font-weight: 300;
            line-height: 1.4em;
        }

    .contact-modal form .form-item {
        display: flex;
        margin-bottom: 15px; /* khoảng cách giữa các hàng */
    }

        .contact-modal form .form-item label {
            min-width: 120px; /* giữ label cố định bên trái */
            margin: 0;
        }

        .contact-modal form .form-item .form-item-ipt {
            flex: 1; /* input chiếm phần còn lại bên phải */
        }

    .contact-modal form .btn-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        line-height: 28px;
        border-style: solid;
        border-width: 0px 0px 0px 0px;
        padding: 6px 20px 6px 20px;
        background: url("https://www.coteccons.vn/wp-content/uploads/2022/08/Vector-118-10.png") top left no-repeat;
        background-size: contain;
        width: fit-content;
        color: var(--white-color);
        margin-bottom: 21px;
        margin-top: 14px;
    }

        .contact-modal form .btn-submit svg {
            width: 14px;
            transition: .3s;
        }

        .contact-modal form .btn-submit:hover svg {
            transform: rotate(45deg);
            transition: .3s;
            margin-left: 10px;
        }

.modal-body-content {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

.modal-body-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .modal-body-content h2,
    .modal-body-content form {
        width: 100%;
        max-width: 650px;
    }

/* ===================================================================
   Ô "Hồ sơ" — wrapper tự dựng thay cho nút "Chọn tệp" của trình duyệt (#124)
   ===================================================================
   Khác trang Tuyển dụng: ở đây wrapper mang sẵn class .form-item-ipt nên đã
   thừa hưởng nền trắng, viền #69727d, height 40px và flex:1 của luật phía trên
   — không phải khai lại bảng màu. Phần dưới chỉ lo bố cục bên trong.

   Toàn bộ phần này trước đây là style NỘI TUYẾN trong Razor. */
.contact-modal form .form-item .form-item-ipt.custom-file-wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0;
}

    .contact-modal form .form-item .custom-file-wrapper input[type="file"] {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

    .contact-modal form .form-item .custom-file-wrapper .btn-choose-file {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 15px;
        background-color: #e9ecef;
        border-right: 1px solid #69727d;
        color: #333;
        white-space: nowrap;
        z-index: 1;
    }

    .contact-modal form .form-item .custom-file-wrapper .js-file-name {
        padding-left: 15px;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 1;
    }

    /* Xem ghi chú cùng luật ở Career.css: input giấu bằng opacity:0 nên vòng
       focus mặc định vô hình, người dùng bàn phím mất dấu khi Tab tới ô này. */
    .contact-modal form .form-item .custom-file-wrapper:focus-within {
        outline: 2px solid var(--href-color);
        outline-offset: 2px;
    }