/* ============================================================
   Trang Nộp hồ sơ – /ung-tuyen/{id} (Views/DanhSachCongViec/NopHoSo.cshtml)
   Figma: trang riêng, tiêu đề giữa, cột trái (Ảnh / Vị trí / Khu vực / Hình thức làm việc),
   cột phải các phần I–IV có thanh tiêu đề xanh. Form dùng chung Templates/UngTuyen/_Form (wizard 4 bước).
   Style ô nhập dùng chung với popup cũ: themes/VNVC/css/apply-modal.css (selector .nophs-page).
   Breakpoint như các trang khác: 1200 / 992 / 768.
   ============================================================ */

.nophs-page {
    background: #F5F8FC;
    padding: 32px 0 64px;
}

.nophs-page__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.nophs-page__title {
    margin: 0 0 24px;
    color: #0B4BB3;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
}

.nophs-page__card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, .08);
    padding: 24px 32px 8px;
}

/* Popup cũ cuộn trong khung 78vh – trang riêng cuộn theo trang */
.nophs-page .addemployee__form {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
}

.nophs-page .ajax-form-body {
    padding: 0 !important;
    overflow: visible !important; /* overflow hidden (mobile) làm thanh bước không dính được */
}

/* ---- 2 cột: trái thông tin ứng tuyển, phải các bước ---- */
.nophs-page .nophs-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.nophs-page .nophs-aside {
    position: sticky;
    top: calc(var(--nophs-header, 100px) + 16px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 16px;
}

    .nophs-page .nophs-aside > .data-field {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }


/* 1 trang dài: 4 phần I–IV liền nhau, cách nhau rõ ràng */
.nophs-page .nophs-step + .nophs-step {
    margin-top: 16px;
}

/* Tiêu đề phần I–IV: thanh xanh, chữ trắng in hoa (Figma) */
.nophs-page .nophs-title {
    width: 100%;
    margin: 8px 0 16px !important;
    padding: 10px 16px !important;
    background: #0B4BB3 !important;
    color: #fff !important;
    font-size: 18px !important;
    text-transform: uppercase !important;
    border: 0 !important;
    border-radius: 6px !important;
}

/* ================= Quy tắc bố cục ô nhập =================
   - Lưới 2 cột; ô dài (họ tên, số nhà, nơi cấp, ghi chú, bảng nhiều dòng) cả hàng
   - Hàng có đúng 3 ô cùng loại (Họ tên / Phòng ban / Mối quan hệ, 3 mức lương…) → 3 cột
   - Bước 1 theo thứ tự Figma (JS trong Templates/UngTuyen/_Form) */
.nophs-page .nophs-grid {
    row-gap: 4px;
}

    .nophs-page .nophs-grid > .nophs-f {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
        padding-left: 8px;
        padding-right: 8px;
    }

        .nophs-page .nophs-grid > .nophs-f.nophs-f--full {
            flex-basis: 100%;
            max-width: 100%;
            width: 100%;
        }

        /* 1 hàng 3 cột chia đều: Tỉnh/TP – Phường/Xã – Số nhà; Số – Ngày cấp – Nơi cấp (CCCD / CMND) */
        .nophs-page .nophs-grid > .nophs-f.nophs-f--3 {
            flex: 0 0 33.3333%;
            max-width: 33.3333%;
            width: 33.3333%;
        }

/* Tiêu đề phụ thống nhất: "Bằng cấp", "Ngoại ngữ", "Phần mềm"… ở các bước 2–4 */
.nophs-page .nophs-sub,
.nophs-page .nophs-step .label-blue,
.nophs-page .nophs-step .label-blue-bg {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 8px 8px !important;
    padding: 0 0 6px 10px !important;
    background: none !important;
    border: 0 !important;
    border-left: 3px solid #F7941D !important;
    border-radius: 0 !important;
    color: #0B4BB3 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    text-transform: none !important;
}

.nophs-page .nophs-sub {
    flex: 0 0 calc(100% - 16px);
    max-width: calc(100% - 16px);
    padding-top: 0 !important;
}

.nophs-page .nophs-grid > .nophs-sub:first-child {
    margin-top: 4px !important;
}

/* Mục con của "Các khóa đào tạo ngắn hạn" (Ngoại ngữ, Phần mềm/Ứng dụng, Sở thích…): nhỏ hơn, thụt vào, gạch xanh nhạt */
.nophs-page .nophs-step .label-blue-bg {
    margin: 8px 8px 6px 20px !important;
    border-left-color: #93B4E8 !important;
    color: #334155 !important;
    font-size: 14px !important;
}

/* ================= Bảng nhiều dòng (Bằng cấp, Chuyên khoa, CCHN, Ngoại ngữ, Phần mềm, Sở thích, Công ty…) =================
   Bảng rộng hết khung, tiêu đề được xuống dòng (bảng 5 cột CCHN không tràn), nút xoá dạng icon gọn */
.nophs-page .nophs-step table.Inline {
    width: 100%;
    table-layout: auto; /* không dùng fixed: chân bảng colspan="20" làm bảng bị chia 20 cột */
    margin-bottom: 0;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    white-space: normal !important;
}

    .nophs-page .nophs-step table.Inline th,
    .nophs-page .nophs-step table.Inline td {
        border: 0 !important;
        border-bottom: 1px solid #EEF2F7 !important;
        padding: 8px 6px !important;
        vertical-align: middle;
        white-space: normal;
    }

    .nophs-page .nophs-step table.Inline thead th {
        background: #F5F8FC;
        color: #334155;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
    }

        .nophs-page .nophs-step table.Inline thead th label {
            margin: 0;
            font-weight: 600;
        }

        .nophs-page .nophs-step table.Inline thead th:first-child,
        .nophs-page .nophs-step table.Inline tbody td:first-child {
            width: 44px !important;
            text-align: center;
        }

    .nophs-page .nophs-step table.Inline tbody td .form-control,
    .nophs-page .nophs-step table.Inline tbody td .select2-container {
        width: 100% !important;
    }

    /* Nút xoá dòng: icon đỏ viền, không khối đỏ đặc; icon nằm chính giữa nút */
    .nophs-page #UngTuyen .nophs-step table.Inline .btn-danger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px !important;
        padding: 0 !important;
        line-height: 1 !important;
        background: #fff !important;
        border: 1px solid #FCA5A5 !important;
        color: #DC2626 !important;
        border-radius: 8px !important;
    }

        .nophs-page #UngTuyen .nophs-step table.Inline .btn-danger:hover {
            background: #FEF2F2 !important;
        }

    .nophs-page .nophs-step table.Inline tfoot td {
        border-bottom: 0 !important;
        padding: 10px !important;
    }

/* Khung bảng: bỏ thanh cuộn ngang bao ngoài (bảng đã co theo khung) */
.nophs-page .nophs-step .data-field[style*="overflow"] {
    overflow: visible !important;
}

/* Bỏ các đường kẻ đen dày giữa các mục (đã có tiêu đề phụ) */
.nophs-page .nophs-step hr.border-dark {
    display: none;
}

/* Ô nhập 2 cột trong cột phải (Figma), ô rộng (col-12, bảng nhiều dòng) giữ nguyên */
@media (min-width: 768px) {
    .nophs-page .nophs-step .data-field.col-lg-3,
    .nophs-page .nophs-step .data-field.col-lg-4,
    .nophs-page .nophs-step .data-field.col-md-3,
    .nophs-page .nophs-step .data-field.col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 768px) {
    .nophs-page .nophs-step .nophs-row-3 > .data-field[class*="col-"] {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

/* Ô chọn không tràn khung, chữ dài cắt "…" (data-field là grid → cần min-width 0), cả cột trái và các bước */
.nophs-page .data-field,
.nophs-page .data-field .col,
.nophs-page .data-field .col-12 {
    min-width: 0;
}

.nophs-page .data-field {
    grid-template-columns: minmax(0, 1fr);
}

.nophs-page .select2-container {
    max-width: 100%;
}

.nophs-page .nophs-aside .select2-container {
    width: 100% !important;
}

/* Ô chọn dùng theme select2 mặc định (Khu vực ứng tuyển…) cao bằng các ô theme bootstrap */
.nophs-page .select2-container--default .select2-selection--single {
    height: 42px !important; /* theme chung ép 38px */
    display: flex;
    align-items: center;
    border: 1px solid #DDE3EC;
    border-radius: 8px;
}

    .nophs-page .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
        padding-left: 12px;
    }

    .nophs-page .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px !important;
    }

.nophs-page .select2-selection__rendered {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ================= Màu nút thống nhất =================
   Chính (Tải hình ảnh, Tiếp tục, Ứng tuyển): cam VNVC
   Phụ (Quay lại, Huỷ): viền xanh, nền trắng
   Thêm dòng (+ Thêm học tập, + Thêm công ty…): nền xanh nhạt, chữ xanh */
.nophs-page {
    --nophs-cam: #F7941D;
    --nophs-cam-dam: #E5830C;
    --nophs-xanh: #0B4BB3;
    --nophs-xanh-nhat: #EAF1FC;
}

    .nophs-page #UngTuyen .btn {
        height: 44px;
        padding: 0 20px;
        border-radius: 8px !important;
        font-size: 15px;
        font-weight: 700;
        box-shadow: none !important;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }

    .nophs-page #UngTuyen .js-step-next,
    .nophs-page #UngTuyen #btn-ungtuyen,
    .nophs-page #UngTuyen .nophs-aside .btn-primary {
        background: var(--nophs-cam) !important;
        border: 1px solid var(--nophs-cam) !important;
        color: #fff !important;
    }

        .nophs-page #UngTuyen .js-step-next:hover,
        .nophs-page #UngTuyen #btn-ungtuyen:hover,
        .nophs-page #UngTuyen .nophs-aside .btn-primary:hover {
            background: var(--nophs-cam-dam) !important;
            border-color: var(--nophs-cam-dam) !important;
            filter: none;
        }

    .nophs-page #UngTuyen .js-step-prev,
    .nophs-page #UngTuyen #ungtuyen-btn__group .btn-outline-primary {
        background: #fff !important;
        border: 1px solid var(--nophs-xanh) !important;
        color: var(--nophs-xanh) !important;
    }

        .nophs-page #UngTuyen .js-step-prev:hover,
        .nophs-page #UngTuyen #ungtuyen-btn__group .btn-outline-primary:hover {
            background: var(--nophs-xanh-nhat) !important;
        }

    /* Nút thêm dòng (Thêm bằng cấp, Thêm chuyên khoa…, Thêm công ty): viên thuốc cam nhỏ, chữ trắng căn giữa (Figma) */
    .nophs-page #UngTuyen .nophs-step .btn-primary:not(.js-step-next),
    .nophs-page #UngTuyen .nophs-step .btn-sm.btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 28px !important;
        padding: 0 16px !important;
        background: var(--nophs-cam) !important;
        border: 0 !important;
        border-radius: 999px !important;
        color: #fff !important;
        font-size: 13px;
        font-weight: 700;
        line-height: 1 !important;
    }

        .nophs-page #UngTuyen .nophs-step .btn-primary:not(.js-step-next):hover {
            background: var(--nophs-cam-dam) !important;
        }

        .nophs-page #UngTuyen .nophs-step .btn-primary:not(.js-step-next) .fa-plus {
            display: none;
        }

    /* Nút Xoá dòng giữ đỏ nhưng cùng bo góc */
    .nophs-page #UngTuyen .nophs-step .btn-danger {
        height: 32px;
        padding: 0 12px;
        font-size: 13px;
    }

/* Thanh nút cuối trên trang: không kéo tràn mép như trong popup */
.nophs-page .ajax-form-action {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ---- Popup nộp thành công ---- */
.nophs-thanks {
    border: 0;
    border-radius: 16px;
    text-align: center;
}

    .nophs-thanks .modal-body {
        padding: 32px 28px 28px;
    }

.nophs-thanks__img {
    width: 120px;
    height: auto;
    margin-bottom: 12px;
}

.nophs-thanks__title {
    margin: 0 0 8px;
    color: #0B4BB3;
    font-size: 22px;
    font-weight: 800;
}

.nophs-thanks__text {
    margin: 0 0 20px;
    color: #334155;
    font-size: 15px;
}

.nophs-thanks__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.nophs-thanks__btn {
    min-width: 130px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 21px;
    font-weight: 700;
    text-decoration: none;
}

.nophs-thanks__btn--outline {
    border: 1px solid #0B4BB3;
    color: #0B4BB3;
    background: #fff;
}

    .nophs-thanks__btn--outline:hover {
        background: #EFF6FF;
        color: #0B4BB3;
    }

.nophs-thanks__btn--primary {
    border: 0;
    background: #F7941D;
    color: #fff;
}

    .nophs-thanks__btn--primary:hover {
        filter: brightness(1.05);
        color: #fff;
    }

/* ---- ≥1200 (Figma "Nộp hồ sơ PC", khung 1440): vùng form rộng ~1344 (cột trái ~326 + 2 cột ô nhập)
   để ô nhập cao 60 không bị "ú" – trước đây khung 1280 làm mỗi ô chỉ còn ~415px ---- */
@media (min-width: 1200px) {
    .nophs-page__inner {
        max-width: 1440px;
    }

    .nophs-page__card {
        padding-left: 24px;
        padding-right: 24px;
    }

    .nophs-page .nophs-layout {
        grid-template-columns: 326px minmax(0, 1fr);
    }
}

/* ---- 992–1199: cột trái hẹp hơn ---- */
@media (max-width: 1199.98px) {
    .nophs-page .nophs-layout {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 28px;
    }
}

/* ---- <992: 1 cột, thông tin ứng tuyển lên trên (ảnh + 3 ô dàn ngang) ---- */
@media (max-width: 991.98px) {
    .nophs-page .nophs-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .nophs-page .nophs-aside {
        position: static;
        display: grid;
        grid-template-columns: 200px repeat(2, minmax(0, 1fr));
        column-gap: 16px;
    }

        .nophs-page .nophs-aside > .data-field[data-field-name="HinhAnh"] {
            grid-row: span 2;
        }
}

/* ---- Mobile ---- */
@media (max-width: 767.98px) {
    .nophs-page {
        padding: 16px 0 40px;
    }

    .nophs-page__inner {
        padding: 0 16px;
    }

    .nophs-page__title {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .nophs-page__card {
        padding: 16px 16px 4px;
        border-radius: 12px;
    }

    .nophs-page .nophs-aside {
        display: flex;
    }

        .nophs-page .nophs-aside > .data-field[data-field-name="HinhAnh"] {
            max-width: 220px;
            margin: 0 auto;
        }


    .nophs-page .nophs-title {
        font-size: 16px !important;
    }

    .nophs-page .data-field[class*="col-"],
    .nophs-page .nophs-grid > .nophs-f,
    .nophs-page .nophs-grid > .nophs-f.nophs-f--3,
    .nophs-page .nophs-grid > .nophs-f.nophs-f--3[data-field-name^="NoiCap"],
    .nophs-page .nophs-grid > .nophs-f.nophs-f--3[data-field-name^="SoNha"],
    .nophs-page .nophs-step .nophs-row-3 > .data-field[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .nophs-thanks__actions {
        flex-direction: column;
    }
}

/* ================= Cột trái theo Figma =================
   Khung ảnh viền nhạt bo góc, nút "Tải hình ảnh" viên thuốc cam, ô nhập nền xanh nhạt */
.nophs-page .nophs-aside [data-field-name="HinhAnh"] .row {
    margin: 0;
}

.nophs-page .nophs-aside [data-field-name="HinhAnh"] .row > div[style*="aspect-ratio"] {
    max-width: 190px !important;
    aspect-ratio: 3 / 4 !important;
    border: 1px solid #DCE3EE;
    border-radius: 12px;
    background: #F8FAFC !important;
    overflow: hidden;
}

.nophs-page #UngTuyen .nophs-aside #uploadImageBtn,
.nophs-page #UngTuyen .nophs-aside #removeImageBtn {
    width: auto !important;
    min-width: 0;
    height: 32px;
    margin-top: 10px !important;
    padding: 0 18px;
    border-radius: 16px !important;
    font-size: 13px;
}

/* Ô ở cột trái: nền trắng + viền như các ô khác (nền xanh nhạt trước đây trông như bị khoá);
   rê chuột / đang mở → viền xanh; ô thật sự bị khoá vẫn xám */
.nophs-page .nophs-aside .form-control,
.nophs-page .nophs-aside .select2-container--bootstrap .select2-selection,
.nophs-page .nophs-aside .select2-selection {
    background: #fff !important;
    border: 2px solid #D9E3F9 !important; /* cùng kiểu ô nhập form (Figma) */
    border-radius: 10px !important;
    color: #1E293B;
    cursor: pointer;
}

    .nophs-page .nophs-aside .select2-selection:hover,
    .nophs-page .nophs-aside .select2-container--open .select2-selection,
    .nophs-page .nophs-aside .select2-container--focus .select2-selection,
    .nophs-page .nophs-aside .form-control:focus {
        border-color: #2E90FA !important;
        box-shadow: 0 0 0 3px rgba(46, 144, 250, .15) !important;
    }

    .nophs-page .nophs-aside .select2-container--disabled .select2-selection,
    .nophs-page .nophs-aside .form-control:disabled {
        background: #F1F5F9 !important;
        border-color: #E2E8F0 !important;
        color: #94A3B8;
        cursor: not-allowed;
    }

/* ================= Căn thẳng hàng trong cột phải =================
   Ô nhập, bảng, thanh nút nằm trong khung (lề 7.5px của .row/.col) → thanh tiêu đề I–IV và tiêu đề mục cũng thu về đúng khung đó */
.nophs-page .nophs-step .nophs-title {
    flex: 0 0 calc(100% - 15px);
    width: calc(100% - 15px);
    max-width: calc(100% - 15px);
    margin-left: 7.5px !important;
    margin-right: 7.5px !important;
}

.nophs-page .nophs-step .label-blue,
.nophs-page .nophs-step .label-blue-bg {
    flex: 0 0 auto;
    width: calc(100% - 15px);
    max-width: calc(100% - 15px);
    margin-left: 7.5px !important;
    margin-right: 7.5px !important;
}

/* Mục con (Ngoại ngữ, Phần mềm…): thụt vào so với mục cha */
.nophs-page .nophs-step .label-blue-bg {
    width: calc(100% - 27.5px);
    max-width: calc(100% - 27.5px);
    margin-left: 20px !important;
}

/* Tiêu đề mục theo Figma: chữ xanh đậm, không thanh màu; mục con (Ngoại ngữ…) có thanh nền xanh nhạt */
.nophs-page .nophs-step .label-blue {
    padding: 0 !important;
    border: 0 !important;
    font-size: 16px !important;
}

.nophs-page .nophs-step .label-blue-bg {
    padding: 5px 12px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: #DCE6F7 !important;
    color: #0B4BB3 !important;
    font-size: 14px !important;
    margin-left: 7.5px !important;
    width: calc(100% - 15px);
    max-width: calc(100% - 15px);
}

/* Ô chứa nút xoá (th đầu mỗi dòng): căn giữa cả 2 chiều, icon không lệch */
.nophs-page .nophs-step table.Inline tbody > tr > th:first-child {
    width: 48px !important;
    padding: 8px 6px !important;
    text-align: center;
    vertical-align: middle !important;
    border: 0 !important;
    border-bottom: 1px solid #EEF2F7 !important;
    background: none;
}

    .nophs-page .nophs-step table.Inline .btn-danger i {
        margin: 0;
        font-size: 13px;
        line-height: 1;
    }

/* Bước 3 – Quá trình làm việc: ô "Thời gian công tác" gồm Từ – Đến trên 1 dòng */
.nophs-page .nophs-tu-den {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: 6px;
}

    .nophs-page .nophs-tu-den > div {
        min-width: 0;
    }

.nophs-page .nophs-tu-den__gach {
    line-height: 42px;
    color: #94A3B8;
}


/* Bước 3 – nhóm mức lương: nhãn dài/ngắn khác nhau → ô nhập luôn thẳng hàng ở đáy */
.nophs-page .nophs-row-luong {
    align-items: flex-start;
}

/* Ô ngắn (chọn ngày, Mối quan hệ) hẹp lại ~1/3, ô bên trái ~2/3: nhãn dài ("Mức lương thử việc mong muốn VNĐ (Gross)")
   nằm 1 dòng → 2 ô nhập thẳng hàng. Áp cho: Mức lương / Thời gian nhận việc; Họ tên / Mối quan hệ; Vị trí / Thời gian */
@media (min-width: 768px) {
    .nophs-page #UngTuyen .row > [data-field-name="MucLuongThuViecDeXuat"],
    .nophs-page #UngTuyen .row > [data-field-name="HoVaTenNguoiThanGioiThieu"],
    .nophs-page #UngTuyen .row > [data-field-name="ChucVuDaLamViecVNVC"] {
        flex: 0 0 66.6667%;
        max-width: 66.6667%;
    }

    .nophs-page #UngTuyen .row > [data-field-name="NgayDuKienNhanViec"],
    .nophs-page #UngTuyen .row > [data-field-name="MoiQuanHeNguoiThanGioiThieu"],
    .nophs-page #UngTuyen .row > [data-field-name="ThoiGianDaLamViecVNVC"] {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

/* Bước 3 – mỗi công ty 1 khối 2 cột có nhãn (Figma); tối đa 2 công ty */
/* Không khung viền quanh từng công ty – design không có (#270800) */
.nophs-page .nophs-cty {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

/* "Công ty 1/2": cùng kiểu thanh nhóm "Ngoại ngữ", "Phần mềm/Ứng dụng" (.label-blue-bg) */
.nophs-page .nophs-cty__dau {
    display: flex;
    align-items: center;
    min-height: 36px;
    margin: 8px 0 4px; /* + lề trên nhãn 8 = cách 12 như thanh nhóm → bảng */
    padding: 5px 12px;
    border-radius: 4px;
    background: #DCE6F7;
    color: #0B4BB3;
    font-size: var(--nophs-fs-nhan);
    font-weight: 700;
    line-height: 26px;
}

/* Nút xoá công ty: cùng kiểu nút xoá dòng (chỉ icon, ô viền đỏ 32px), mép phải hàng nhãn đầu như các bảng nhiều dòng */
.nophs-page .nophs-cty__luoi {
    position: relative;
}

/* Chứng chỉ tập huấn ATTC: nút xoá mép phải hàng nhãn như khối Công ty */
.nophs-page .nophs-attc {
    position: relative;
}

    .nophs-page .nophs-attc > .nophs-cty__xoa {
        right: 7.5px; /* trong lề .row */
    }

.nophs-page .nophs-cty__xoa {
    position: absolute;
    top: 6px;
    right: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #fff;
    border: 1px solid #FCA5A5;
    border-radius: 8px;
    color: #DC2626;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
}

    .nophs-page .nophs-cty__xoa:hover {
        background: #FEF2F2;
        color: #DC2626;
        text-decoration: none;
    }

.nophs-page .nophs-cty__luoi {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
}

.nophs-page .nophs-cty__o {
    min-width: 0;
    padding-bottom: 8px;
}

    .nophs-page .nophs-cty__o > .control-label {
        display: block;
        padding: 0;
        margin: 8px 0 6px;
    }

.nophs-page .nophs-btn-them {
    margin-top: 4px;
}

/* Bước cuối: ô "Chọn file upload" (FileHoSo) bên trái, Quay lại | Huỷ | Nộp hồ sơ bên phải (#272641).
   Bố cục trái/phải + mobile xuống hàng riêng: apply-modal.css (.nophs-btngroup); ở đây chỉ căn giữa theo hàng nút */
.nophs-page #ungtuyen-btn__group > [data-field-name="FileHoSo"]:not(.nophs-btncol) {
    align-self: center;
    margin-bottom: 0 !important;
}

    .nophs-page #ungtuyen-btn__group > [data-field-name="FileHoSo"] .form-group {
        flex-wrap: nowrap;
        gap: 12px;
        margin: 0;
        align-items: center;
    }

        /* Nhãn + nút rộng theo nội dung (cột col-4/col-8 làm nhãn dính sát nút ở màn hẹp) */
        .nophs-page #ungtuyen-btn__group > [data-field-name="FileHoSo"] .form-group > [class*="col-"] {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
            padding: 0;
        }

    .nophs-page #ungtuyen-btn__group > [data-field-name="FileHoSo"] .btn-addemployee__upload {
        margin-top: 0;
    }

    /* "Chọn file upload" + chữ nút cùng font/cỡ/màu với nhãn form (mobile 14px: mobile/nop-ho-so.css) */
    .nophs-page #UngTuyen #ungtuyen-btn__group .label-uploadfile,
    .nophs-page #UngTuyen #ungtuyen-btn__group .customFile-label {
        font-family: inherit;
        font-size: var(--nophs-fs-nhan);
        font-weight: 400;
        line-height: 1.4; /* = nhãn form (20px / 28px) */
        color: #000;
    }

    /* Chữ nút / tên tệp đã chọn: rộng hơn mặc định 120px để vừa cỡ 20px; JS đã rút gọn tên ở giữa, CSS "…" chỉ là chốt chặn */
    .nophs-page #UngTuyen #ungtuyen-btn__group .customFile-label {
        max-width: 300px;
    }

    /* Tệp đã chọn (nop-ho-so.js mục 3): [📎 tên….pdf  1,2 MB] [×] + dòng lỗi định dạng */
    .nophs-page #ungtuyen-btn__group > [data-field-name="FileHoSo"]:not(.nophs-btncol) {
        max-width: 600px;
    }

    .nophs-page #ungtuyen-btn__group > [data-field-name="FileHoSo"] .custom-file {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
        width: auto;
        height: auto;
    }

    .nophs-page #ungtuyen-btn__group .nophs-tep--da-chon .btn-addemployee__upload {
        border-color: #034EA2;
        background: #F2F6FC;
    }

    .nophs-page #ungtuyen-btn__group .nophs-tep-dung-luong {
        margin-left: 6px;
        font-size: .8em;
        color: #6B7280;
        white-space: nowrap;
    }

    .nophs-page #ungtuyen-btn__group .nophs-tep-xoa {
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #6B7280;
        font-size: 24px;
        line-height: 1;
    }

        .nophs-page #ungtuyen-btn__group .nophs-tep-xoa:hover {
            background: #FDECEC;
            color: #DC2626;
        }

        .nophs-page #ungtuyen-btn__group .nophs-tep-xoa[hidden] {
            display: none;
        }

    .nophs-page #ungtuyen-btn__group .nophs-tep-loi {
        flex-basis: 100%;
        color: #DC3545;
        font-size: var(--nophs-fs-loi);
    }

.nophs-page #ungtuyen-btn__group {
    justify-content: flex-end;
    padding-left: 0 !important;
    padding-right: 0 !important; /* thẳng mép phải với nút Tiếp tục ở các bước trước */
}

@media (max-width: 767.98px) {
    .nophs-page .nophs-cty__luoi {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Ô chỉ chọn trên lịch (Thời gian công tác): readonly nhưng không xám như ô bị khoá */
/* readonly chỉ để không gõ tay – site.css chặn click mọi input[readonly] (pointer-events:none !important) → mở lại để bấm mở lịch */
.nophs-page .nophs-chi-chon[readonly] {
    background: #fff !important;
    cursor: pointer;
    pointer-events: auto !important;
}

/* Bước 4 – ô đồng ý xử lý dữ liệu cá nhân (ngay trên nút Huỷ / Nộp hồ sơ) */
.nophs-page .nophs-dong-y .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 0;
}

    .nophs-page .nophs-dong-y .form-check-input {
        position: static;
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin: 2px 0 0;
        cursor: pointer;
    }

    .nophs-page .nophs-dong-y .form-check-label {
        font-size: 15px;
        line-height: 22px;
        color: #334155;
        cursor: pointer;
    }

        .nophs-page .nophs-dong-y .form-check-label a {
            color: #0052A3;
            text-decoration: underline;
        }

/* ================= Cỡ chữ trang Nộp hồ sơ (theo yêu cầu) =================
   Tiêu đề trang 40 · Phần I–IV 32 · Mục (Bằng cấp chính, Chuyên khoa I/II, Quá trình làm việc…) 26 · đều đậm;
   nhãn ô nhập 24 thường đen (Figma "Nộp hồ sơ PC" node 4:13513), thông báo lỗi cùng cỡ nhãn. Màn nhỏ thu nhỏ theo tỉ lệ để không tràn. */
.nophs-page {
    --nophs-fs-trang: 40px;
    --nophs-fs-phan: 32px;
    --nophs-fs-muc: 26px;
    --nophs-fs-nhan: 20px; /* nhãn 20 như nội dung (#270800) */
    --nophs-fs-loi: min(var(--nophs-fs-nhan), 20px); /* dòng báo lỗi: tối đa 20px (cỡ body desktop), màn nhỏ theo cỡ nhãn */
}

.nophs-page .nophs-page__title {
    font-size: var(--nophs-fs-trang);
    font-weight: 700;
}

.nophs-page .nophs-title {
    font-size: var(--nophs-fs-phan) !important;
    font-weight: 700 !important;
    line-height: 1.25;
}

/* Figma: Roboto Black, line-height 100%, #034EA2 (cỡ 26 – giảm 4px cân với nhãn ô 20) */
.nophs-page .nophs-step .label-blue {
    color: #034EA2 !important;
    font-size: var(--nophs-fs-muc) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* Mục con (Ngoại ngữ, Phần mềm/Ứng dụng…) dưới "Các khóa đào tạo ngắn hạn" */
.nophs-page .nophs-step .label-blue-bg {
    font-size: var(--nophs-fs-nhan) !important;
    font-weight: 700 !important;
}

/* font-weight !important: site.css ép '.form-group > label' 600 !important */
.nophs-page #UngTuyen label.col-form-label:not(.label-blue):not(.label-blue-bg),
.nophs-page #UngTuyen table.Inline thead th,
.nophs-page #UngTuyen table.Inline thead th label,
.nophs-page #UngTuyen .nophs-cty__o > .col-form-label,
.nophs-page #UngTuyen input[type="radio"] + label {
    font-size: var(--nophs-fs-nhan);
    font-weight: 400 !important;
    line-height: 1.3;
}

.nophs-page #UngTuyen .field-validation-error,
.nophs-page #UngTuyen .field-validation-error span,
.nophs-page #UngTuyen label.error,
.nophs-page #UngTuyen .nophs-loi-bang-cap {
    font-size: var(--nophs-fs-loi);
    line-height: 1.3;
}

@media (max-width: 991.98px) {
    .nophs-page {
        --nophs-fs-trang: 32px;
        --nophs-fs-phan: 26px;
        --nophs-fs-muc: 22px;
        --nophs-fs-nhan: 20px;
    }
}

@media (max-width: 575.98px) {
    .nophs-page {
        --nophs-fs-trang: 24px;
        --nophs-fs-phan: 20px;
        --nophs-fs-muc: 18px;
        --nophs-fs-nhan: 16px;
    }
}

/* select gốc của select2 (ẩn, position:absolute rộng theo khung) không kéo tràn ngang trang */
.nophs-page .nophs-step table.Inline td {
    position: relative;
}


/* ================= Ô nhập theo Figma "Nộp hồ sơ PC" =================
   Nhãn Roboto 24/400 đen, cách ô 10px; ô cao 60, chữ 24 đen, nền trắng, viền 2px #D9E3F9 bo 10;
   ô chọn đã có giá trị nền #E2E9F7, mũi tên ▼ #034EA2 20px; chưa chọn: chữ nghiêng #6981B7; dấu * đỏ #E71E26.
   Màn nhỏ thu nhỏ theo biến (≤991: 20, ≤575: 16). */
.nophs-page {
    /* Figma: ô cao 60 cho chữ 24. Chữ đã giảm còn 20 → thu ô theo cùng tỉ lệ 20/24: cao 50, bo 8 (giữ tỉ lệ Figma, ô gọn hơn) */
    --nophs-o-cao: 50px;
    --nophs-o-bo: 8px;
    --nophs-o-fs: 20px; /* chữ trong ô nhập 20 */
    --nophs-placeholder: #6981B7; /* màu chữ gợi ý theo Figma */
}

@media (max-width: 991.98px) {
    .nophs-page {
        --nophs-o-cao: 44px;
        --nophs-o-fs: 20px;
    }
}

@media (max-width: 575.98px) {
    .nophs-page {
        --nophs-o-cao: 44px;
        --nophs-o-fs: 16px;
    }
}

.nophs-page #UngTuyen label.col-form-label:not(.label-blue):not(.label-blue-bg) {
    min-height: 28px;
    margin-bottom: 10px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 28px;
    color: #000000;
}

.nophs-page #UngTuyen .required::after,
.nophs-page #UngTuyen label .text-danger {
    color: #E71E26;
}

.nophs-page #UngTuyen input.form-control,
.nophs-page #UngTuyen textarea.form-control,
.nophs-page #UngTuyen .select2-container .select2-selection--single {
    height: var(--nophs-o-cao) !important;
    padding: 0 16px;
    background: #FFFFFF !important;
    border: 2px solid #D9E3F9 !important; /* Figma "Frame input": nền trắng, viền 2px #D9E3F9, bo 10 (thu theo tỉ lệ → 8) */
    border-radius: var(--nophs-o-bo) !important;
    color: #000000;
    font-size: var(--nophs-o-fs) !important;
}

.nophs-page #UngTuyen textarea.form-control {
    height: auto !important;
    min-height: calc(var(--nophs-o-cao) * 2);
    padding: 12px 16px;
}

.nophs-page #UngTuyen .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0 !important;
    padding-right: 28px;
    font-size: var(--nophs-o-fs) !important;
    line-height: calc(var(--nophs-o-cao) - 4px) !important; /* trừ viền 2px trên + dưới */
}

.nophs-page #UngTuyen .select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(var(--nophs-o-cao) - 4px) !important;
    right: 8px;
}

/* Quy tắc chữ gợi ý (nhất quán toàn form, #270369 – vừa vào form không hiện chú thích sẵn):
   - Ô nhập và ô chọn chưa chọn: để trống (nhãn đã nói rõ cần nhập/chọn gì) – chữ gợi ý "Nhập …" / "Chọn …" ẩn;
   - Riêng cặp "Từ ngày / Đến ngày" (không có nhãn riêng từng ô) vẫn hiện gợi ý xanh nghiêng. */
.nophs-page #UngTuyen input.form-control::placeholder,
.nophs-page #UngTuyen textarea.form-control::placeholder,
.nophs-page #UngTuyen select[data-trong] + .select2 .select2-selection__rendered,
.nophs-page #UngTuyen .select2-selection__placeholder {
    color: transparent !important;
}

.nophs-page #UngTuyen .nophs-tu-den input.form-control::placeholder {
    color: var(--nophs-placeholder) !important;
    font-style: italic;
}

/* Lưới ô nhập: ô cùng hàng thẳng hàng khi nhãn dài xuống 2 dòng (nhãn dồn đáy, ô nhập ngay dưới) */
.nophs-page .nophs-grid > .nophs-f {
    display: flex !important;
    flex-direction: column;
}

    .nophs-page .nophs-grid > .nophs-f > .form-group {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }

        .nophs-page .nophs-grid > .nophs-f > .form-group > label.col-form-label {
            flex: 0 0 auto;
            margin-top: auto;
            max-width: 100%;
        }

        .nophs-page .nophs-grid > .nophs-f > .form-group > .col {
            flex: 0 0 auto;
        }

/* ================= Bảng nhiều dòng → lưới ô 2 cột (Figma, không dùng bảng) =================
   JS (nop-ho-so.js) gắn class nophs-bang-luoi + nhãn .nophs-td-nhan cho từng ô; tiêu đề cột ẩn. */
.nophs-page .nophs-step table.nophs-bang-luoi,
.nophs-page .nophs-step table.nophs-bang-luoi > tbody,
.nophs-page .nophs-step table.nophs-bang-luoi > tfoot,
.nophs-page .nophs-step table.nophs-bang-luoi > tfoot > tr,
.nophs-page .nophs-step table.nophs-bang-luoi > tfoot > tr > td {
    display: block;
    width: 100%;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    overflow: visible;
}

.nophs-page .nophs-step table.nophs-bang-luoi > thead {
    display: none;
}

.nophs-page .nophs-step table.nophs-bang-luoi > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    position: relative;
    padding: 0 0 16px;
}

    .nophs-page .nophs-step table.nophs-bang-luoi > tbody > tr + tr {
        padding-top: 16px;
        border-top: 1px dashed #D8E2F9;
    }

    /* Nút xoá dòng: góc phải trên của dòng (ngang nhãn ô cột 2) */
    .nophs-page .nophs-step table.nophs-bang-luoi > tbody > tr > th:first-child {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
    }


    .nophs-page .nophs-step table.nophs-bang-luoi > tbody > tr > td {
        display: flex;
        flex-direction: column;
        width: auto !important;
        min-width: 0;
        max-width: none !important;
        padding: 0 !important;
        border: 0 !important;
        white-space: normal;
    }

        .nophs-page .nophs-step table.nophs-bang-luoi > tbody > tr > td > * {
            width: 100% !important;
            max-width: 100%;
        }

.nophs-page #UngTuyen table.nophs-bang-luoi .nophs-td-nhan {
    flex: 0 0 auto;
    margin-top: auto;
    white-space: normal;
}

.nophs-page .nophs-step table.nophs-bang-luoi > tfoot > tr > td {
    padding: 0 !important;
}

@media (max-width: 575.98px) {
    .nophs-page .nophs-step table.nophs-bang-luoi > tbody > tr {
        grid-template-columns: minmax(0, 1fr);
    }
}

.nophs-page #UngTuyen table.nophs-bang-luoi > tbody > tr > td:nth-of-type(2n) > .nophs-td-nhan {
    padding-right: 40px;
}

/* Tiêu đề mục cách ô nhập bên dưới; nút "Thêm …" theo Figma (cam, cao 36, chữ 16 đậm) */
.nophs-page .nophs-step .label-blue {
    margin-bottom: 16px !important;
}

.nophs-page #UngTuyen .nophs-step .btn-primary:not(.js-step-next) {
    height: 36px !important;
    padding: 0 18px !important;
    font-size: 16px;
}

/* Nút Nộp hồ sơ khi chưa tick đồng ý: mờ, không bấm được */
.nophs-page #UngTuyen #btn-ungtuyen:disabled {
    opacity: .5;
    cursor: not-allowed;
}

    .nophs-page .nophs-step table.nophs-bang-luoi > tbody > tr + tr > th:first-child {
        top: 16px;
    }

/* Figma: CCHN – "Nơi thực hành trước đăng ký hành nghề" cả hàng */
.nophs-page .nophs-step [data-field-name="DangKyHanhNghes"] table.nophs-bang-luoi > tbody > tr > td:nth-of-type(5) {
    grid-column: 1 / -1;
}

/* Figma: tiêu đề mục có dấu * đứng đầu ("* Chứng chỉ hành nghề…", "* Chứng chỉ tập huấn ATTC", "* Các khóa đào tạo ngắn hạn") */
.nophs-page .nophs-step .label-blue.nophs-muc-sao {
    display: block !important;
}

    .nophs-page .nophs-step .label-blue.nophs-muc-sao::before {
        content: "* ";
    }

/* Mục con (Ngoại ngữ, Phần mềm/Ứng dụng, Sở thích…): thanh xanh nhạt, chữ đậm cỡ nhãn ô; bỏ đường kẻ đậm giữa các mục */
.nophs-page .nophs-step .label-blue-bg {
    font-size: var(--nophs-fs-nhan) !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
}

.nophs-page .nophs-step hr.border-dark {
    display: none;
}

/* "Mục tiêu phát triển nghề nghiệp": ô riêng dưới nút "Thêm sở thích, điểm mạnh/yếu" (JS dời ra sau bảng Sở thích), rộng full, cao bằng ô nhập */
.nophs-page .nophs-muc-tieu {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    margin-top: 16px;
    padding: 0 !important;
}

    .nophs-page .nophs-muc-tieu > .form-group {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        margin: 0;
    }

        .nophs-page .nophs-muc-tieu > .form-group > label.col-form-label {
            flex: 0 0 auto;
            margin-top: auto;
            padding: 0;
        }

        .nophs-page .nophs-muc-tieu > .form-group > .col {
            flex: 0 0 auto;
            padding: 0;
        }

.nophs-page #UngTuyen .nophs-muc-tieu textarea.form-control {
    min-height: var(--nophs-o-cao);
    height: var(--nophs-o-cao) !important;
    resize: vertical;
}

/* Dòng trong lưới: ô canh đầu hàng (ô Mục tiêu cạnh Điểm yếu thẳng hàng); nút "Thêm …" không xuống dòng */
.nophs-page .nophs-step table.nophs-bang-luoi > tbody > tr {
    align-items: start;
}

.nophs-page #UngTuyen table.nophs-bang-luoi .nophs-td-nhan,
.nophs-page .nophs-muc-tieu > .form-group > label.col-form-label {
    margin-top: 0;
}

/* Các nút "Thêm …" (bằng cấp, chuyên khoa, chứng chỉ, ngoại ngữ, phần mềm, sở thích, công ty): rộng theo chữ, khoảng đệm 2 bên
   bằng nhau (#271169); không giới hạn theo ô chứa (ô bảng chỉ rộng 250px) để chữ dài không bị cắt */
.nophs-page #UngTuyen .nophs-step .btn-primary:not(.js-step-next),
.nophs-page #UngTuyen .nophs-btn-them {
    width: auto !important;
    max-width: none !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
    justify-content: center;
    white-space: nowrap;
}

/* Figma "Nộp hồ sơ PC": ô chọn ĐÃ có giá trị → chữ đen, nền xanh nhạt #E2E9F7 (ô chưa chọn giữ nền trắng + chữ gợi ý nghiêng);
   ô bị khoá (vd Phường/Xã khi chưa chọn tỉnh) giữ kiểu xám của select2. data-trong do nop-ho-so.js đánh dấu. */
.nophs-page #UngTuyen select:not([data-trong]) + .select2:not(.select2-container--disabled) .select2-selection {
    background: #E2E9F7 !important;
}

.nophs-page #UngTuyen select:not([data-trong]) + .select2 .select2-selection__rendered {
    color: #000000 !important;
}

/* Mũi tên ▼ đặc #034EA2 (asset Figma "Polygon 2") thay tam giác xám của select2.
   Cỡ theo chữ trong ô (chữ 20 → mũi tên 14; điện thoại 10) – 20px trông to so với chữ */
.nophs-page {
    --nophs-mui-ten: 14px;
}

@media (max-width: 575.98px) {
    .nophs-page {
        --nophs-mui-ten: 10px;
    }
}

.nophs-page #UngTuyen .select2-container .select2-selection__arrow {
    width: var(--nophs-mui-ten);
    right: 14px !important;
}

    .nophs-page #UngTuyen .select2-container .select2-selection__arrow b {
        width: var(--nophs-mui-ten);
        height: var(--nophs-mui-ten);
        margin: calc(var(--nophs-mui-ten) / -2) 0 0 calc(var(--nophs-mui-ten) / -2);
        border: 0 !important;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 20L1.33975 5L18.6603 5L10 20Z' fill='%23034EA2'/%3E%3C/svg%3E") center / contain no-repeat;
    }

/* 992–1199: khung hẹp (ô ~308px) → chữ 24 làm nhãn xuống 2 dòng; dùng 20 như tablet. Chỉ áp trong khoảng này để không đè mốc ≤991 / ≤575 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .nophs-page {
        --nophs-fs-nhan: 20px;
        --nophs-o-fs: 20px;
    }
}

/* Chữ trong ô chọn chừa chỗ cho mũi tên ▼ (rộng 20, cách phải 14) – chữ dài không đè lên mũi tên */
.nophs-page #UngTuyen .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 48px !important;
}

/* Hàng nhiều ô: các cột canh trên (nhãn đều 1 dòng) → ô nhập thẳng hàng; dòng báo lỗi chỉ kéo dài phía dưới,
   không đẩy lệch ô của cột bên cạnh */
.nophs-page #UngTuyen .data-field > .form-group.item-field {
    align-content: start;
}

/* Hàng 3 cột (địa chỉ, CCCD): cột 1/3, nhãn dài có thể xuống 2 dòng → chừa sẵn 2 dòng, chữ dồn đáy để ô nhập vẫn thẳng hàng */
@media (min-width: 768px) {
    .nophs-page #UngTuyen .nophs-f--3 label.col-form-label:not(.label-blue):not(.label-blue-bg) {
        display: flex;
        align-items: flex-end;
        min-height: 2lh;
    }
}

/* ===== Nút + dòng đồng ý đồng bộ cỡ với ô nhập (#270369, Figma "Nộp hồ sơ PC" 4:13513) =====
   ≥1200: Tải hình ảnh 168×36 & "Thêm …" cao 36 – chữ 20 Black; Huỷ / Nộp hồ sơ cao 50 = ô nhập, chữ 22 Bold
   (Figma 58 / chữ 32 quá to so với ô đã thu 20/24); dòng đồng ý chữ 20 như nội dung. 576–1199: thu nhỏ theo nhãn (24 → 20). Điện thoại: css/mobile/nop-ho-so.css. */
@media (min-width: 576px) {
    .nophs-page {
        --nophs-nut-fs: 18px;
        --nophs-nut-cao: 32px;
        --nophs-nut-chinh-fs: 20px;
        --nophs-nut-chinh-cao: var(--nophs-o-cao); /* cao bằng ô nhập */
        --nophs-nut-chinh-dem: 24px;
        --nophs-dong-y-fs: 18px;
    }

    .nophs-page #UngTuyen .nophs-aside #uploadImageBtn,
    .nophs-page #UngTuyen .nophs-aside #removeImageBtn,
    .nophs-page #UngTuyen .nophs-step .btn-primary:not(.js-step-next),
    .nophs-page #UngTuyen .nophs-step .btn-sm.btn-primary {
        max-width: none; /* ô chứa nút "Thêm …" chỉ rộng 250px → chữ dài ("Thêm loại phần mềm/ứng dụng") bị cắt */
        white-space: nowrap;
        height: var(--nophs-nut-cao) !important;
        padding: 0 13px !important;
        border-radius: 32.5px !important;
        font-size: var(--nophs-nut-fs);
        font-weight: 900;
    }

    /* Cột chứa Huỷ / Nộp hồ sơ co theo nút (col-lg-1 / col-lg-2 hẹp hơn nút 212px) */
    .nophs-page #ungtuyen-btn__group > .data-field:has(> .btn, .btn) {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    /* Huỷ / Nộp hồ sơ: rộng theo chữ, khoảng đệm 2 bên bằng nhau (#271169) */
    .nophs-page #UngTuyen #ungtuyen-btn__group .btn {
        width: auto;
        padding: 0 var(--nophs-nut-chinh-dem);
        height: var(--nophs-nut-chinh-cao);
        border-radius: 32.5px !important;
        font-size: var(--nophs-nut-chinh-fs);
        font-weight: 700;
    }

    .nophs-page #UngTuyen #ungtuyen-btn__group .btn-outline-primary {
        border: 2px solid #D9E3F9 !important;
        color: #034EA2 !important;
    }

    /* "Chọn tệp tin…" cao bằng Huỷ / Nộp hồ sơ, viền như ô nhập → hàng nút cuối thẳng hàng.
       1 id: thấp hơn rule tệp đã chọn (.nophs-tep--da-chon) để viền xanh khi đã chọn vẫn thắng */
    .nophs-page #ungtuyen-btn__group .btn-addemployee__upload {
        height: var(--nophs-nut-chinh-cao);
        padding: 0 16px;
        border: 2px solid #D9E3F9;
        border-radius: var(--nophs-o-bo);
    }

    .nophs-page .nophs-dong-y .form-check-label {
        font-size: var(--nophs-dong-y-fs);
        line-height: 1.4;
        color: #000;
    }

        .nophs-page .nophs-dong-y .form-check-input {
            width: 20px;
            height: 20px;
            margin-top: 4px;
        }

    /* reCAPTCHA thẳng mép chữ dòng đồng ý: ô tích 20px + gap 10px (.form-check) */
    .nophs-page .nophs-dong-y .ungtuyen-captcha {
        padding-left: 30px;
    }
}

@media (min-width: 1200px) {
    .nophs-page {
        --nophs-nut-fs: 20px;
        --nophs-nut-cao: 36px;
        --nophs-nut-chinh-fs: 22px;
        --nophs-nut-chinh-dem: 28px;
        --nophs-dong-y-fs: 20px;
    }

}

/* ===== Lịch chọn ngày (daterangepicker) trên trang Nộp hồ sơ: chỉ đổi giao diện cho đồng bộ form, không đổi JS =====
   Lịch được gắn vào <body> (ngoài .nophs-page) → phạm vi body:has(.nophs-page, .ttuv-page) (.ttuv-page: trang Thông tin ứng viên). Bỏ lưới kẻ ô, ngày dạng ô bo tròn,
   màu chọn #034EA2, hôm nay cam #F7941D, ô tháng/năm viền #D9E3F9 như ô nhập. */
body:has(.nophs-page, .ttuv-page) .daterangepicker {
    padding: 12px;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(3, 78, 162, .18);
    font-family: Roboto, sans-serif;
}

    body:has(.nophs-page, .ttuv-page) .daterangepicker::before,
    body:has(.nophs-page, .ttuv-page) .daterangepicker::after {
        display: none;
    }

    body:has(.nophs-page, .ttuv-page) .daterangepicker .drp-calendar {
        max-width: none;
        padding: 0 !important;
    }

    body:has(.nophs-page, .ttuv-page) .daterangepicker .calendar-table {
        border: 0;
        background: transparent;
    }

        body:has(.nophs-page, .ttuv-page) .daterangepicker .calendar-table table {
            border-collapse: separate;
            border-spacing: 2px;
        }

        body:has(.nophs-page, .ttuv-page) .daterangepicker .calendar-table th,
        body:has(.nophs-page, .ttuv-page) .daterangepicker .calendar-table td {
            min-width: 36px;
            width: 36px;
            height: 34px !important;
            padding: 0 !important; /* CSS bảng của trang thêm padding → hàng ngày bị cao */
            border: 0 !important;
            border-radius: 8px;
            font-size: 14px;
            line-height: 34px !important;
            vertical-align: middle;
        }

    /* Thứ trong tuần */
    body:has(.nophs-page, .ttuv-page) .daterangepicker thead tr:last-child th {
        height: 28px;
        line-height: 28px;
        color: #6981B7;
        font-size: 12px;
        font-weight: 600;
    }

    /* Ngày */
    body:has(.nophs-page, .ttuv-page) .daterangepicker td.available {
        color: #1E293B;
    }

        body:has(.nophs-page, .ttuv-page) .daterangepicker td.available:hover,
        body:has(.nophs-page, .ttuv-page) .daterangepicker th.available:hover {
            background: #E8F3FF;
            color: #034EA2;
        }

    body:has(.nophs-page, .ttuv-page) .daterangepicker td.off,
    body:has(.nophs-page, .ttuv-page) .daterangepicker td.off.available,
    body:has(.nophs-page, .ttuv-page) .daterangepicker td.disabled {
        color: #B6C2D6;
        background: transparent;
    }

    body:has(.nophs-page, .ttuv-page) .daterangepicker td.today:not(.active) {
        color: #F7941D;
        font-weight: 700;
    }

    body:has(.nophs-page, .ttuv-page) .daterangepicker td.active,
    body:has(.nophs-page, .ttuv-page) .daterangepicker td.active:hover {
        background: #034EA2;
        color: #fff;
        font-weight: 700;
    }

    /* Hàng tháng/năm: mũi tên xanh, ô chọn tháng/năm như ô nhập */
    body:has(.nophs-page, .ttuv-page) .daterangepicker th.prev span,
    body:has(.nophs-page, .ttuv-page) .daterangepicker th.next span {
        border-color: #034EA2;
    }

    body:has(.nophs-page, .ttuv-page) .daterangepicker select.monthselect,
    body:has(.nophs-page, .ttuv-page) .daterangepicker select.yearselect {
        height: 30px;
        padding: 0 6px;
        border: 1px solid #D9E3F9;
        border-radius: 6px;
        background: #fff;
        color: #034EA2;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

        body:has(.nophs-page, .ttuv-page) .daterangepicker select.monthselect:focus,
        body:has(.nophs-page, .ttuv-page) .daterangepicker select.yearselect:focus {
            outline: none;
            border-color: #034EA2;
        }