/* ============================================================
   Form "Nộp hồ sơ ứng tuyển" – trang /ung-tuyen (Views/DanhSachCongViec/NopHoSo.cshtml).
   Scope chung: .nophs-page (popup #tuyenDung1 / #nophoso cũ đã bỏ). Chỉ trình bày, không đổi field/logic.
   ============================================================ */

/* --- Khung form + cuộn --- */
.nophs-page .addemployee__form {
    max-height: 78vh;
    overflow-y: auto;
    padding: 8px 24px 8px;
}

.nophs-page .card-body {
    padding: 0 !important;
    min-height: 0 !important;
}

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

/* ====== QUAN TRỌNG: căn TRÁI (bản cũ left, không center) ====== */
.nophs-page .addemployee__form,
.nophs-page .addemployee__form .ajax-form-body,
.nophs-page .addemployee__form .data-field,
.nophs-page .addemployee__form .form-group,
.nophs-page .addemployee__form .control-label,
.nophs-page .addemployee__form .row,
.nophs-page .addemployee__form td,
.nophs-page .addemployee__form th {
    text-align: left !important;
}

/* --- Tiêu đề section: chữ xanh, không bar, có gạch dưới nhạt --- */
.nophs-page .nophs-title,
.nophs-page .label-blue-bg {
    background: transparent !important;
    background-color: transparent !important;
    color: #0B4BB3 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-align: left !important;
    text-transform: none !important;
    border: 0 !important;
    border-bottom: 2px solid #E2E9F5 !important;
    border-radius: 0 !important;
    padding: 0 0 8px !important;
    margin: 24px 0 16px !important;
    box-shadow: none !important;
}

/* --- Field --- */
.nophs-page .data-field {
    margin-bottom: 12px;
}

.nophs-page .control-label {
    color: #334155;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* --- Input / select --- */
.nophs-page .form-control {
    height: 42px;
    border: 1px solid #DDE3EC;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .nophs-page textarea.form-control {
        height: auto;
        min-height: 80px;
    }

    .nophs-page .form-control:focus {
        border-color: #2E90FA;
        box-shadow: 0 0 0 3px rgba(46, 144, 250, .18);
        outline: none;
    }

.nophs-page .select2-container--bootstrap .select2-selection--single,
.nophs-page .select2-selection {
    height: 42px !important;
    border: 1px solid #DDE3EC !important;
    border-radius: 8px !important;
    display: flex;
    align-items: center;
}

    .nophs-page .select2-selection__rendered {
        line-height: 40px !important;
    }

    .nophs-page .select2-selection__arrow {
        height: 40px !important;
    }

/* --- Upload ảnh --- */
.nophs-page .cms-field-image {
    border: 1px dashed #C7D2E4;
    border-radius: 12px;
    padding: 12px;
}

/* --- Nút xanh: Tải hình ảnh, + Thêm..., Nộp hồ sơ --- */
.nophs-page .addemployee__form .btn-primary,
.nophs-page .btn-trove__cusstom,
.nophs-page .btn-ungtuyen__custom {
    background: #1E40AF !important;
    background-color: #1E40AF !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600;
    transition: filter .15s ease, transform .1s ease;
}

    .nophs-page .addemployee__form .btn-primary:hover,
    .nophs-page .btn-trove__cusstom:hover,
    .nophs-page .btn-ungtuyen__custom:hover {
        filter: brightness(1.08);
        color: #fff !important;
    }

    .nophs-page .addemployee__form .btn-primary:active {
        transform: translateY(1px);
    }

.nophs-page .cms-field-image .btn-primary {
    width: 100%;
}

/* --- Thanh nút cuối: dính đáy, gọn --- */
.nophs-page .ajax-form-action {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 18px -24px 0;
    padding: 14px 24px;
    background: #fff;
    border-top: 1px solid #E7ECF3;
    z-index: 2;
}

.nophs-page .btn-huy__custom {
    min-width: 110px;
    height: 44px;
    border-radius: 8px;
    font-weight: 700;
    border: 1px solid #2563EB;
    background: #fff;
    color: #1D4ED8;
}

    .nophs-page .btn-huy__custom:hover {
        background: #EFF6FF;
    }

.nophs-page .ajax-form-action .btn-ungtuyen__custom {
    min-width: 150px;
    height: 44px;
}

/* --- Mobile: field 1 cột --- */
@media (max-width: 767.98px) {
    .nophs-page .addemployee__form {
        max-height: none;
        padding: 8px 14px;
    }

    .nophs-page .ajax-form-action {
        margin: 16px -14px 0;
        padding: 12px 14px;
    }

    .nophs-page .data-field[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ============================================================
   Form nộp hồ sơ dạng 4 bước (wizard) – dựng bằng JS trong Templates/UngTuyen/_Form.cshtml
   Không đổi field: chỉ chia 4 phần I–IV thành 4 bước, kiểm tra lỗi theo từng bước.
   ============================================================ */
#UngTuyen .nophs-steps {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: 8px;
    margin: 0 -20px 16px;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid #E7ECF3;
    list-style: none;
}

#UngTuyen .nophs-steps__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: #64748B;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: default;
}

    #UngTuyen .nophs-steps__item::after {
        content: "";
        flex: 1 1 auto;
        height: 2px;
        min-width: 12px;
        background: #E2E8F0;
        border-radius: 2px;
    }

    #UngTuyen .nophs-steps__item:last-child::after {
        display: none;
    }

#UngTuyen .nophs-steps__num {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
    background: #fff;
    font-size: 13px;
}

#UngTuyen .nophs-steps__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#UngTuyen .nophs-steps__item.is-done {
    color: #0B4BB3;
    cursor: pointer;
}

    #UngTuyen .nophs-steps__item.is-done .nophs-steps__num {
        border-color: #0B4BB3;
        background: #0B4BB3;
        color: #fff;
    }

    #UngTuyen .nophs-steps__item.is-done::after {
        background: #0B4BB3;
    }

#UngTuyen .nophs-steps__item.is-active {
    color: #0B4BB3;
}

    #UngTuyen .nophs-steps__item.is-active .nophs-steps__num {
        border-color: #0B4BB3;
        color: #0B4BB3;
        box-shadow: 0 0 0 4px rgba(11, 75, 179, .12);
    }

#UngTuyen .nophs-step[hidden] {
    display: none !important;
}

#UngTuyen .nophs-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin: 24px 0 8px;
    padding-top: 16px;
    border-top: 1px solid #E7ECF3;
}

    #UngTuyen .nophs-nav__info {
        margin-right: auto;
        color: #64748B;
        font-size: 14px;
    }

    #UngTuyen .nophs-nav .btn {
        min-width: 120px;
    }

/* Bước cuối: Upload CV | Quay lại | Huỷ | Ứng tuyển – nút rộng theo chữ, không xuống dòng */
#UngTuyen .nophs-btngroup > .data-field.nophs-btncol {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}

    #UngTuyen .nophs-btngroup > .nophs-btncol .btn {
        min-width: 110px;
        white-space: nowrap;
    }

#UngTuyen .nophs-btngroup > .col-12:first-child:empty {
    display: none;
}

#UngTuyen .nophs-btngroup > [data-field-name="FileHoSo"]:not(.nophs-btncol) {
    flex: 0 1 auto;
    width: auto;
    max-width: 420px;
    margin: 0 auto 0 0 !important;
}

/* Tablet: chỉ hiện số + tên bước đang đứng */
@media (max-width: 991.98px) {
    #UngTuyen .nophs-steps__item:not(.is-active) .nophs-steps__text {
        display: none;
    }

    #UngTuyen .nophs-steps__item:not(.is-active) {
        flex: 0 0 auto;
    }

    #UngTuyen .nophs-steps__item.is-active {
        flex: 1 1 auto;
    }
}

/* Mobile: thanh điều hướng cố định cuối form, nút chia đôi */
@media (max-width: 575.98px) {
    #UngTuyen .nophs-steps {
        margin: 0 -12px 12px;
        padding: 10px 12px;
    }

    #UngTuyen .nophs-nav {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: 16px -12px 0;
        padding: 12px;
        background: #fff;
        box-shadow: 0 -6px 16px rgba(15, 23, 42, .08);
    }

        #UngTuyen .nophs-nav__info {
            display: none;
        }

        #UngTuyen .nophs-nav .btn {
            flex: 1 1 0;
            min-width: 0;
        }
}

/* Mobile – bước cuối: upload CV 1 hàng, 3 nút chia đều 1 hàng */
@media (max-width: 767.98px) {
    #UngTuyen .nophs-btngroup {
        flex-wrap: wrap;
        gap: 10px;
    }

        #UngTuyen .nophs-btngroup > [data-field-name="FileHoSo"]:not(.nophs-btncol) {
            flex: 0 0 100%;
            max-width: 100%;
            margin: 0 !important;
        }

        #UngTuyen .nophs-btngroup > .data-field.nophs-btncol {
            flex: 1 1 0;
            min-width: 0;
        }

            #UngTuyen .nophs-btngroup > .nophs-btncol .btn {
                width: 100%;
                min-width: 0;
                padding-left: 4px;
                padding-right: 4px;
            }
}