/* Điện thoại (≤ 575.98px) theo Figma Mobile – nop-ho-so.
   Trang Nộp hồ sơ (/ung-tuyen) theo đúng Figma "Nộp hồ sơ Mobile" (node 4:2830, khung 440px): lề 15px, nhãn 14px,
   ô cao 37 bo 7, thanh phần I–IV 20px Black nền #034EA2 bo 7, ảnh 130×130 + 3 ô chọn bên phải, nút viên thuốc cao 26.
   File nạp cho mọi trang của _LayoutPublic → mọi selector gắn .nophs-page; nop-ho-so.css (nạp sau, có !important)
   nên selector ở đây thêm "html body" và giữ !important ở đúng các thuộc tính file gốc đã dùng. */
@media (max-width: 575.98px) {
    /* ----- Thang chữ / ô nhập của form (biến dùng trong nop-ho-so.css) ----- */
    html body .nophs-page {
        --nophs-fs-trang: 24px;
        --nophs-fs-phan: 20px;
        --nophs-fs-muc: 20px;
        --nophs-fs-nhan: 14px;
        --nophs-fs-loi: 14px;
        --nophs-o-cao: 37px;
        --nophs-o-fs: 14px;
        padding: 12px 0 40px;
        background: #fff;
    }

    html body .nophs-page .nophs-page__inner {
        padding: 0 15px;
    }

    /* Tiêu đề trang: 24px ExtraBold #034EA2, line-height 30, cách khối ảnh 24px */
    html body .nophs-page .nophs-page__title {
        margin: 0 0 24px;
        color: #034EA2;
        font-size: 24px;
        font-weight: 800;
        line-height: 30px;
        text-align: center;
    }

    html body .nophs-page .nophs-page__card {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Lề nội dung đúng 15px như Figma: bỏ lề âm của .row và padding ngang của cột Bootstrap trong form */
    html body .nophs-page #UngTuyen .container-fluid,
    html body .nophs-page #UngTuyen [class*="col"] {
        padding-left: 0;
        padding-right: 0;
    }

    html body .nophs-page #UngTuyen .row {
        margin-left: 0;
        margin-right: 0;
    }

    html body .nophs-page #UngTuyen .nophs-grid > .data-field {
        padding-left: 0;
        padding-right: 0;
    }

    /* Ô nhập nằm dưới nhãn (cột .col chiếm trọn hàng, không chen cạnh nhãn khi cột hết padding) */
    html body .nophs-page #UngTuyen .form-group.row > label.col-12 ~ .col {
        flex: 0 0 100%;
        max-width: 100%;
    }

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

    /* ----- Khối đầu: ảnh 130×130 bên trái, Vị trí / Khu vực / Hình thức bên phải (rộng 264, cách 16) ----- */
    html body .nophs-page .nophs-layout {
        gap: 21px;
    }

    html body .nophs-page .nophs-aside {
        display: grid;
        grid-template-columns: 130px minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 9px;
        align-items: start;
        padding-top: 0;
    }

        html body .nophs-page .nophs-aside > .data-field {
            grid-column: 2;
            margin: 0;
            padding: 0;
        }

            html body .nophs-page .nophs-aside > .data-field[data-field-name="HinhAnh"] {
                grid-column: 1;
                grid-row: 1 / span 3;
                max-width: 130px;
                margin: 3px 0 0;
            }

    html body .nophs-page .nophs-aside [data-field-name="HinhAnh"] .col,
    html body .nophs-page .nophs-aside [data-field-name="HinhAnh"] .row,
    html body .nophs-page .nophs-aside [data-field-name="HinhAnh"] .row > div {
        padding: 0;
        margin: 0;
    }

    html body .nophs-page .nophs-aside [data-field-name="HinhAnh"] .row > div[style*="aspect-ratio"] {
        width: 130px;
        max-width: 130px !important;
        height: 130px;
        aspect-ratio: 1 / 1 !important;
        border: 2px solid #D9E3F9;
        border-radius: 10px;
        background: #fff !important;
    }

        html body .nophs-page .nophs-aside [data-field-name="HinhAnh"] .row > div[style*="aspect-ratio"] img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

    /* Nút "Tải hình ảnh": cam, cao 26, bo 40, chữ 14 Black, cách khung ảnh 4px */
    html body .nophs-page #UngTuyen .nophs-aside #uploadImageBtn,
    html body .nophs-page #UngTuyen .nophs-aside #removeImageBtn {
        min-width: 0; /* rộng theo chữ (#271169) */
        height: 26px;
        margin-top: 4px !important;
        padding: 0 10px;
        border-radius: 40px !important;
        font-size: 14px !important;
        font-weight: 900;
        line-height: 1;
    }

    /* ----- Nhãn: 14px thường, đen, line-height normal, cách ô 10px ----- */
    html body .nophs-page #UngTuyen label.col-form-label:not(.label-blue):not(.label-blue-bg),
    html body .nophs-page #UngTuyen .nophs-cty__o > .col-form-label,
    html body .nophs-page #UngTuyen table.Inline thead th,
    html body .nophs-page #UngTuyen table.Inline thead th label,
    html body .nophs-page #UngTuyen input[type="radio"] + label {
        min-height: 0;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 400 !important;
        line-height: normal;
        color: #000;
    }

    /* Ô "Chọn file upload" (#272641): cùng cỡ nhãn mobile */
    html body .nophs-page #UngTuyen #ungtuyen-btn__group .label-uploadfile,
    html body .nophs-page #UngTuyen #ungtuyen-btn__group .customFile-label {
        font-size: 14px;
        line-height: normal;
    }

    /* Như các ô khác ở mobile: nhãn trên (cách 10px), ô chọn tệp rộng hết khung, cao 37, viền 2px #D9E3F9, bo 7;
       giữ nguyên bố cục ở mọi trạng thái (chưa chọn / đã chọn / báo lỗi) */
    html body .nophs-page #ungtuyen-btn__group > [data-field-name="FileHoSo"] .form-group {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

        html body .nophs-page #ungtuyen-btn__group > [data-field-name="FileHoSo"] .form-group > [class*="col-"] {
            width: 100%;
            text-align: left;
        }

    html body .nophs-page #ungtuyen-btn__group > [data-field-name="FileHoSo"] .custom-file {
        width: 100%;
        flex-wrap: wrap;
    }

    html body .nophs-page #ungtuyen-btn__group .btn-addemployee__upload {
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-start;
        height: var(--nophs-o-cao, 37px);
        padding: 0 16px;
        border: 2px solid #D9E3F9;
        border-radius: 7px;
    }

    html body .nophs-page #UngTuyen #ungtuyen-btn__group .customFile-label {
        flex: 0 1 auto;
        min-width: 0;
        max-width: none;
    }

    html body .nophs-page #ungtuyen-btn__group .nophs-tep-dung-luong {
        flex: 0 0 auto; /* không co: tên tệp co + "…" trước */
        margin-left: auto;
        padding-left: 8px;
    }

    /* ----- Ô nhập / ô chọn: cao 37, viền 2px #D9E3F9, bo 7, chữ 14 ----- */
    html body .nophs-page #UngTuyen input.form-control,
    html body .nophs-page #UngTuyen textarea.form-control,
    html body .nophs-page #UngTuyen .select2-container .select2-selection--single {
        padding: 0 16px;
        border-radius: 7px !important;
        font-size: 14px !important;
    }

    html body .nophs-page #UngTuyen textarea.form-control {
        padding: 10px 16px;
    }

    html body .nophs-page .nophs-aside .form-control,
    html body .nophs-page .nophs-aside .select2-container--bootstrap .select2-selection,
    html body .nophs-page .nophs-aside .select2-selection {
        border-radius: 7px !important;
    }

    html body .nophs-page #UngTuyen .select2-container .select2-selection--single .select2-selection__rendered {
        padding-right: 24px !important;
        font-size: 14px !important;
        line-height: 33px !important;
    }

    html body .nophs-page #UngTuyen .select2-container .select2-selection--single .select2-selection__arrow {
        height: 33px !important;
    }

    /* Khoảng cách giữa các ô (đáy ô → nhãn kế tiếp 16px) */
    html body .nophs-page #UngTuyen .nophs-step .data-field > .form-group.item-field {
        margin-bottom: 16px;
    }

    /* ----- Thanh tiêu đề phần I–IV: nền #034EA2, bo 7, padding 7/19, chữ 20 Black trắng ----- */
    html body .nophs-page .nophs-step .nophs-title,
    html body .nophs-page .nophs-title {
        margin: 0 0 16px !important;
        padding: 7px 19px !important;
        border-radius: 7px !important;
        background: #034EA2 !important;
        color: #fff !important;
        font-size: 20px !important;
        font-weight: 900 !important;
        line-height: normal !important;
        text-transform: uppercase;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    html body .nophs-page .nophs-step + .nophs-step {
        margin-top: 24px;
    }

    /* Mục con (* Chuyên Khoa I, * Chứng chỉ hành nghề…): 20px Black #034EA2 */
    html body .nophs-page .nophs-step .label-blue,
    html body .nophs-page .nophs-step .label-blue-bg {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100%;
        flex: 0 0 100%;
    }

    html body .nophs-page .nophs-step .label-blue {
        color: #034EA2 !important;
        font-size: 20px !important;
        font-weight: 900 !important;
        line-height: normal !important;
    }

    /* Nhóm (Ngoại ngữ, Phần mềm/Ứng dụng…, Công ty 1/2): thanh nền #D9E3F9 cao 37 bo 7, chữ 14 Bold #034EA2 */
    html body .nophs-page .nophs-step .label-blue-bg,
    html body .nophs-page .nophs-cty__dau {
        display: flex;
        align-items: center;
        min-height: 37px;
        padding: 0 15px !important;
        border-radius: 7px !important;
        background: #D9E3F9 !important;
        color: #034EA2 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: normal !important;
    }

    /* ----- Nút thêm dòng (Thêm bằng cấp, Thêm chuyên khoa…, Thêm công ty): cam, cao 26, bo 40, chữ 14 Black ----- */
    html body .nophs-page #UngTuyen .nophs-step .btn-primary:not(.js-step-next),
    html body .nophs-page #UngTuyen .nophs-step .btn-sm.btn-primary {
        height: 26px !important;
        padding: 0 10px !important;
        border-radius: 40px !important;
        font-size: 14px !important;
        font-weight: 900;
    }

    /* ----- Nút cuối Hủy / Nộp hồ sơ: 109×26, bo 40, chữ 14 Black, dồn phải, cách nhau 14px ----- */
    html body .nophs-page #UngTuyen #ungtuyen-btn__group {
        justify-content: flex-end;
        gap: 14px;
    }

        html body .nophs-page #UngTuyen #ungtuyen-btn__group > .nophs-btncol {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
        }

    html body .nophs-page #UngTuyen #ungtuyen-btn__group .btn {
        flex: 0 0 auto;
        width: auto; /* rộng theo chữ, đệm 2 bên bằng nhau (#271169) */
        max-width: none;
        height: 26px;
        padding: 0 16px;
        border-radius: 40px !important;
        font-size: 14px !important;
        font-weight: 900;
        line-height: 1;
    }

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

    html body .nophs-page #UngTuyen #btn-ungtuyen {
        background: #F7941D !important;
        border-color: #F7941D !important;
    }

    /* Ô đồng ý điều khoản: chữ 14 */
    html body .nophs-page .nophs-dong-y .form-check-label,
    html body .nophs-page .nophs-dong-y .form-check-label a,
    html body .nophs-page .nophs-dong-y .form-check-label strong {
        font-size: 14px;
        line-height: normal;
    }
}

/* Nút xoá dòng (thùng rác) trong bảng: 24px để không đè lên ô nhập ngay dưới nhãn đầu dòng (nhãn 14 + cách 10 = 27px) */
@media (max-width: 575.98px) {
    html body .nophs-page #UngTuyen .nophs-step table.Inline .btn-danger,
    html body .nophs-page #UngTuyen .nophs-cty__xoa {
        width: 24px;
        height: 24px !important;
        border-radius: 6px !important;
    }

        html body .nophs-page #UngTuyen .nophs-step table.Inline .btn-danger i,
        html body .nophs-page #UngTuyen .nophs-cty__xoa i {
            font-size: 11px;
        }
}

/* Dòng "Tôi xác nhận đã đọc và đồng ý…" trên điện thoại: chữ 14 (typography.css ép 16 !important cho .form-check-label) */
@media (max-width: 575.98px) {
    html body .nophs-page #UngTuyen .nophs-dong-y .form-check-label,
    html body .nophs-page #UngTuyen .nophs-dong-y .form-check-label * {
        font-size: 14px !important;
    }
}