/* ==========================================================================
   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);
    }

/* Riêng popup TUYỂN DỤNG dùng nền vàng cho khớp form "Nắm bắt cơ hội" ở trang Tuyển dụng
   (Career.css:493 — .application-form { background-color: #F5BA42 }).
   ────────────────────────────────────────────────────────────────────────────
   Mục tiêu: hai form nhìn Y HỆT nhau. Mọi giá trị dưới đây CHÉP NGUYÊN từ Career.css chứ
   không tự quy đổi — sai một chữ số alpha là lệch mà mắt rất khó bắt.

   Nhãn và mũi tên nút GỬI KHÔNG có luật nào ở đây vì đo ra đã trùng sẵn: nhãn trắng 300
   uppercase 16px ở cả hai, mũi tên cyan #5FD1C1 ở cả hai.

   KHÔNG sửa biến --modal-color: biến đó khai ở style.css:7 và v2/style.css:10, dùng chung
   cho CẢ BẢY popup của trang Liên hệ lẫn popup Thiết bị bên trang Giới thiệu — đổi nó là
   nhuộm vàng tất cả.

   Bám vào ô ẩn .isCareerForm mà ContactUs.cshtml đã phát ra sẵn (giá trị do isCareerCard
   quyết định), nên KHÔNG phải sửa view hay JS. Đã kiểm trên trang thật: 7 popup, đúng 1
   popup khớp.

   ⚠️ Cờ isCareerCard nhận diện theo TÊN THẺ trong CMS ("tuyển dụng" / "career"). BA đổi tên
   thẻ thành thứ khác là nền vàng lặng lẽ biến mất — nhưng cùng cờ đó đang quyết định luồng
   gửi mail, nên rủi ro này có sẵn chứ không do luật này thêm vào. */
.contact-modal:has(.isCareerForm[value="true"]),
.contact-modal:has(.isCareerForm[value="true"]) .modal-content {
    background-color: #F5BA42;
}

/* Dấu * của ô bắt buộc: mặc định là var(--href-color) = #5FD1C1 (cyan) — hợp trên nền navy,
   nhưng trên nền vàng thì vừa chìm vừa lệch với form "Nắm bắt cơ hội", nơi dấu * là #B86054
   (Career.css:557). Lấy đúng mã đó cho hai form nhìn như một.
   Vẫn khoanh trong .contact-modal:has(.isCareerForm) nên sáu popup navy còn lại giữ nguyên
   dấu * cyan — đó là màu nhấn thương hiệu của chúng, không phải lỗi. */
.contact-modal:has(.isCareerForm[value="true"]) form .form-item.required label::after {
    color: #B86054;
}

/* Ô nhập: bên kia là trắng MỜ không viền, bên này đang trắng đặc kèm viền xám #69727d.
   Chép từ Career.css:562-570. */
.contact-modal:has(.isCareerForm[value="true"]) form .form-item .form-item-ipt {
    background-color: #FFFFFF59;
    color: var(--gray-1);
    border: unset;
}

/* Ô chọn tệp CV: cùng bộ với ô nhập, riêng nút "Chọn tệp" đậm hơn một nấc để tách khỏi
   phần tên tệp. Chép từ Career.css:885-921 (wrapper #FFFFFF59, nút #FFFFFF8C). */
.contact-modal:has(.isCareerForm[value="true"]) form .form-item .custom-file-wrapper {
    background-color: #FFFFFF59;
    color: var(--gray-1);
    border: unset;
}

.contact-modal:has(.isCareerForm[value="true"]) form .form-item .custom-file-wrapper .btn-choose-file {
    background-color: #FFFFFF8C;
    border-right: 1px solid #FFFFFF8C;
    color: var(--gray-1);
}

/* Nút GỬI: cái "viền" bên form kia KHÔNG phải border mà là ảnh nền border.png, và chữ là
   #1B1B1B chứ không phải trắng. Chép từ Career.css:597-602, giữ nguyên !important vì luật
   gốc có — bỏ đi là thua các luật nền của .btn-readmore.
   Ảnh nằm ở /assets/img/Careers/ nhưng đó là đường dẫn wwwroot dùng chung, không phải thứ
   riêng của trang Tuyển dụng. */
.contact-modal:has(.isCareerForm[value="true"]) form .btn-submit {
    background: url("/assets/img/Careers/border.png") center no-repeat !important;
    background-size: 100% 100% !important;
    border: none !important;
    color: #1B1B1B !important;
}

    .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;
    }