/* Điện thoại (≤ 575.98px) theo Figma Mobile – viec-lam.
   Figma "Việc làm Mobile" (node 425:2557, khung 360px). File nạp ở _LayoutPublic cho mọi trang →
   mọi selector gắn class chỉ có ở trang Việc làm (.vieclam-bg / body:has(.vieclam-bg--top)) để không ảnh hưởng trang khác. */
@media (max-width: 575.98px) {
    /* ----- Dải Fanpage (425:13094): cao 18, nền #001484, chữ 9 Black ----- */
    html body:has(.vieclam-bg--top) .cmp-fanpage {
        height: 18px;
        min-height: 18px;
        padding: 0 12px;
        gap: 4px;
        background: #001484;
    }

    html body:has(.vieclam-bg--top) .cmp-fanpage__icon {
        width: 13px;
        height: 13px;
    }

    html body:has(.vieclam-bg--top) .cmp-fanpage__text,
    html body:has(.vieclam-bg--top) .cmp-fanpage__link {
        font-size: 9px;
        font-weight: 900;
        line-height: normal;
    }

    /* ----- Khung trên (425:13169): lề 16, các khối cách nhau 20 ----- */
    /* Tiêu đề cách dải Fanpage 40 (padding, không dùng margin để nền xanh nhạt phủ kín) */
    html body .vieclam-bg--top {
        padding: 40px 0 0;
    }

    html body .vieclam-bg > .container,
    html body .vieclam-bg ~ .container,
    html body .vieclam-bg--top > .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    html body .vieclam-bg--top .job__heading {
        margin: 0 0 10px;
        padding: 0;
        font-size: 16px;
        font-weight: 900;
        line-height: normal;
        color: #034EA2;
    }

    /* Ô tìm kiếm (425:13141): nền #0256B3, padding 16, bo 10; ô nhập + nút cao 50, bo 14 */
    html body .vieclam-bg--top .cmp-timkiem {
        gap: 10px;
        padding: 16px;
        border-radius: 10px;
        background: #0256B3;
    }

    html body .vieclam-bg--top .cmp-timkiem__o-nhap {
        height: 50px;
        padding: 0 10px;
        border-radius: 14px;
        background: #F8FAFC;
    }

    html body .vieclam-bg--top .cmp-timkiem__input {
        font-size: 14px;
        line-height: normal;
    }

        html body .vieclam-bg--top .cmp-timkiem__input::placeholder {
            color: #878787;
        }

    html body .vieclam-bg--top .cmp-timkiem__btn {
        height: 50px;
        padding: 0 10px;
        border-radius: 14px;
        background: #0095FF;
        font-size: 14px;
        font-weight: 600;
        line-height: normal;
    }

    /* Hàng địa điểm + Bộ lọc (425:13161): ô chọn cao 40, bo 14, chữ 16 SemiBold #0256B3 */
    html body .vieclam-bg .vieclam-mobilebar {
        gap: 10px;
        height: auto;
        margin: 20px 0 0;
    }

    html body .vieclam-bg #diaDiemMobileSlot .select2-selection {
        height: 40px !important;
        padding: 0 10px;
        border: 0;
        border-radius: 14px;
        background: #F8FAFC !important;
    }

    html body .vieclam-bg #diaDiemMobileSlot .select2-selection__rendered {
        margin: 0;
        padding: 0 28px 0 0;
        font-size: 16px;
        font-weight: 600;
        line-height: 40px !important;
        color: #0256B3;
    }

    html body .vieclam-bg #diaDiemMobileSlot .select2-selection__arrow {
        height: 40px !important;
    }

    html body .vieclam-bg #btnToggleFilter {
        flex: 0 0 86px;
        width: 86px;
        gap: 10px;
        padding: 0;
        font-size: 16px;
        font-weight: 700;
        line-height: normal;
        color: #0356B4;
    }

        html body .vieclam-bg #btnToggleFilter .joblist__filter-icon {
            width: 25px;
            height: 23px;
        }

    /* Dòng kết quả (425:13147): 16 SemiBold #808080, số cam, từ khoá nghiêng xanh */
    html body .vieclam-bg .joblist__result {
        min-height: 0;
        margin: 0;
        padding: 20px 0 0;
        font-size: 16px;
        font-weight: 600;
        line-height: normal;
        color: #808080;
    }

        html body .vieclam-bg .joblist__result-line,
        html body .vieclam-bg .joblist__result-num,
        html body .vieclam-bg .joblist__result-kw {
            font-size: 16px;
            font-weight: 600;
            line-height: normal;
        }

    /* Nút sắp xếp (425:13148): cao 40, viền 1 #808080, bo 4, chữ 14 SemiBold #808080 */
    html body .vieclam-bg .joblist__toolbar {
        margin: 20px 0 0;
    }

    html body .vieclam-bg .joblist__sorts {
        gap: 10px;
    }

    html body .vieclam-bg .joblist__pill {
        height: 40px;
        gap: 10px;
        padding: 10px;
        border: 1px solid #808080;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 600;
        line-height: normal;
        color: #808080;
    }

    /* ----- Danh sách thẻ (425:13170): cách khung trên 20, thẻ cách nhau 10 ----- */
    html body .vieclam-bg #jobGrid {
        margin: 20px 0 0;
        row-gap: 10px;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }

        html body .vieclam-bg #jobGrid > .job-item {
            margin: 0;
            padding: 0 !important;
        }

    /* Thẻ việc làm (412:12167): nền trắng, padding 10, bo 10, các phần cách nhau 16 */
    html body .vieclam-bg #jobGrid .job-card.job-card--filter {
        padding: 10px;
        border-radius: 10px;
        background: #fff;
    }

    html body .vieclam-bg #jobGrid .job-card--filter .job-card__title {
        margin: 0 0 16px;
        font-size: 14px;
        font-weight: 700;
        line-height: normal;
        color: #0356B4;
    }

    html body .vieclam-bg #jobGrid .job-card__hot + .job-card__title {
        padding-right: 60px;
    }

    /* Nhãn HOT (412:12360): nền #EE9532, bo 4, padding 4, chữ 14 Bold */
    html body .vieclam-bg #jobGrid .job-card__hot {
        top: 10px;
        right: 10px;
        gap: 6px;
        padding: 4px;
        border-radius: 4px;
        background: #EE9532;
        font-size: 14px;
        font-weight: 700;
        line-height: normal;
    }

        html body .vieclam-bg #jobGrid .job-card__hot svg {
            width: 14px;
            height: 17px;
        }

    html body .vieclam-bg #jobGrid .job-card--filter .job-card__info {
        gap: 10px;
        margin: 0;
    }

    html body .vieclam-bg #jobGrid .job-card--filter .job-card__row {
        gap: 14px !important;
        margin: 0;
    }

        html body .vieclam-bg #jobGrid .job-card--filter .job-card__row:last-child {
            gap: 12px !important;
        }

        html body .vieclam-bg #jobGrid .job-card--filter .job-card__row span:not(.job-card__ico) {
            font-size: 14px;
            font-weight: 400;
            line-height: normal;
            color: #000;
        }

    html body .vieclam-bg #jobGrid .job-card__ico {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
    }

    html body .vieclam-bg #jobGrid .job-card--filter .job-card__meta {
        gap: 10px;
        margin: 16px 0 0;
    }

    html body .vieclam-bg #jobGrid .job-card--filter .job-card__pill {
        padding: 4px 6px;
        border-radius: 20px;
        background: #E8F3FF;
        font-size: 14px;
        font-weight: 400;
        line-height: normal;
        color: #0356B4;
    }

    /* Phân trang (425:13651): nút tròn 40, cách nhau 10, chữ 16 Bold */
    html body .vieclam-bg .joblist__pager {
        gap: 10px;
        padding: 10px 0 0;
    }

    html body .vieclam-bg .joblist__page {
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50px;
        background: #fff;
        font-size: 16px;
        font-weight: 700;
        line-height: 40px;
        color: #808080;
    }

        html body .vieclam-bg .joblist__page.is-active {
            background: #F7941D;
            color: #fff;
        }

    /* ----- Hotline / Email / Fanpage (425:13671): nền #0356B4, padding 10, bo 10, cách nhau 10, chữ 16 Black ----- */
    html body .vieclam-bg .vieclam-lienhe {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }

    html body .vieclam-bg .vieclam-lienhe__card {
        margin: 0;
        padding: 10px;
        border-radius: 10px;
        background: #0356B4;
        font-size: 16px;
        font-weight: 900;
        line-height: normal;
        color: #fff;
    }

        html body .vieclam-bg .vieclam-lienhe__card .vieclam-lienhe__title,
        html body .vieclam-bg .vieclam-lienhe__card .vieclam-lienhe__title a {
            margin: 0 0 10px;
            font-size: 16px;
            font-weight: 900;
            line-height: normal;
            color: #fff;
        }

        html body .vieclam-bg .vieclam-lienhe__card ul {
            margin: 0;
            padding: 0 0 0 24px;
        }

        html body .vieclam-bg .vieclam-lienhe__card li,
        html body .vieclam-bg .vieclam-lienhe__card li a {
            font-size: 16px;
            font-weight: 900;
            line-height: normal;
            color: #fff;
        }

    html body .vieclam-bg .vieclam-lienhe__card--fanpage,
    html body .vieclam-bg .vieclam-lienhe__card--fanpage a {
        font-size: 16px;
        font-weight: 900;
        line-height: normal;
        text-align: left;
    }

    /* ----- Quy trình (425:13723): 1 cột, thẻ cao 120 – hình 122×100 bên trái, chữ giữa bên phải ----- */
    html body .vieclam-bg .cmp-quytrinh {
        margin-top: 20px;
    }

    html body .vieclam-bg .cmp-quytrinh__grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    html body .vieclam-bg .cmp-quytrinh__card {
        width: 100%;
        max-width: none;
        grid-column: auto;
        justify-self: stretch;
        height: 120px;
        min-height: 0;
        margin: 0;
        padding: 10px;
        border-radius: 18px;
        background: rgba(3, 78, 162, .03);
        text-align: center;
    }

        /* thắng rule "thẻ lẻ cuối nằm giữa, rộng 50%" của component (bố cục 2 cột) */
        html body .vieclam-bg .cmp-quytrinh--sat-le .cmp-quytrinh__grid > .cmp-quytrinh__card:last-child:nth-child(odd) {
            width: 100%;
            justify-self: stretch;
        }

    html body .vieclam-bg .cmp-quytrinh__icon-wrap {
        flex: 0 0 122px;
        width: 122px;
        height: 100px;
        margin: 0;
    }

    html body .vieclam-bg .cmp-quytrinh__icon {
        width: 122px;
        height: 100px;
        object-fit: contain;
    }

    /* Thẻ gồm icon + tên + mô tả (anh em cùng cấp) → grid: icon cột trái, tên + mô tả căn giữa cột phải */
    html body .vieclam-bg .cmp-quytrinh__card {
        display: grid;
        grid-template-columns: 122px minmax(0, 1fr);
        grid-template-rows: 1fr auto auto 1fr;
        column-gap: 20px;
        row-gap: 4px;
    }

        html body .vieclam-bg .cmp-quytrinh__card .cmp-quytrinh__icon-wrap {
            grid-column: 1;
            grid-row: 1 / 5;
            align-self: center;
        }

        html body .vieclam-bg .cmp-quytrinh__card .cmp-quytrinh__name {
            grid-column: 2;
            grid-row: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            margin: 0;
        }

        html body .vieclam-bg .cmp-quytrinh__card .cmp-quytrinh__desc {
            grid-column: 2;
            grid-row: 3;
            margin: 0;
        }

    html body .vieclam-bg .cmp-quytrinh__step,
    html body .vieclam-bg .cmp-quytrinh__title {
        font-size: 16px;
        font-weight: 900;
        line-height: normal;
        color: #034EA2;
    }

    html body .vieclam-bg .cmp-quytrinh__desc,
    html body .vieclam-bg .cmp-quytrinh__line {
        font-size: 14px;
        font-weight: 400;
        line-height: normal;
        color: #000;
        text-align: center;
    }

    html body .vieclam-bg .cmp-quytrinh__more {
        margin-top: 20px;
    }

    html body .vieclam-bg .cmp-quytrinh__btn {
        height: 45px;
        padding: 10px 20px;
        border-radius: 60px;
        background: #F7941D;
        font-size: 16px;
        font-weight: 600;
        line-height: normal;
        text-transform: uppercase;
    }

    /* ----- Lưu ý (425:14356): tiêu đề 16 Black #E71E26, ô cao 140, padding 20, bo 18, cách nhau 40 ----- */
    html body .vieclam-bg .cmp-luuy {
        margin-top: 40px;
    }

    html body .vieclam-bg .cmp-luuy__title {
        margin: 0 0 24px;
        font-size: 16px;
        font-weight: 900;
        line-height: normal;
        color: #E71E26;
        text-transform: uppercase;
    }

    html body .vieclam-bg .cmp-luuy__grid {
        gap: 40px;
    }

    html body .vieclam-bg .cmp-luuy__box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 140px;
        padding: 20px;
        border-radius: 18px;
        background: rgba(231, 30, 38, .1);
        text-align: center;
    }

        html body .vieclam-bg .cmp-luuy__box p,
        html body .vieclam-bg .cmp-luuy__box li,
        html body .vieclam-bg .cmp-luuy__box strong {
            margin: 0;
            font-size: 16px;
            line-height: normal;
            color: #000;
        }

        html body .vieclam-bg .cmp-luuy__box ul {
            margin: 0;
            padding: 0;
            list-style-position: inside;
        }

    html body .vieclam-bg .cmp-luuy__icon {
        left: 14px;
        top: -20px;
        width: 40px;
        height: 40px;
    }
}