/* Điện thoại (≤ 575.98px) theo Figma Mobile – chi-tiet-cong-viec.
   Figma "Chi tiết công việc Mobile" (node 447:14426, khung 430px). File nạp cho mọi trang (_LayoutPublic)
   → mọi selector gắn .ct-page (chỉ có ở Views/DanhSachCongViec/ChiTietCongViec.cshtml); banner nằm ngoài .ct-page
   nên dùng body:has(.ct-page). Bắt đầu bằng "html body" để thắng typography.css / chitietcongviec.css. */
@media (max-width: 575.98px) {
    /* ----- Banner (218:13788): cao 186, tên vị trí 34.7px Black trắng, lề trái 26 ----- */
    html body:has(.ct-page) .banner-job {
        height: 186px;
        min-height: 0;
    }

    /* Khung trong lấp đủ 186px; ảnh bám phải như Figma (phần người hiện đủ, cắt bớt nền xanh bên trái) */
    html body:has(.ct-page) .banner-job .banner__inner {
        height: 100%;
        aspect-ratio: auto;
        background-position: right center;
    }

    html body:has(.ct-page) .banner-job .label__vitri-congviec {
        padding: 0 0 12px;
        font-size: 34.727px !important;
        font-weight: 900;
        line-height: normal;
        color: #fff;
    }

    html body:has(.ct-page) .banner-job .label__vitri-congviec__wrap {
        left: 26px;
        right: 26px;
    }

    /* Nội dung cách 2 lề ~28px như Figma */
    html body .ct-page {
        padding-left: 28px;
        padding-right: 28px;
    }

        /* .row.p-2 (Bootstrap !important) → bỏ padding để khối nội dung bắt đầu đúng lề 28px */
        html body .ct-page > .row {
            padding: 0 !important;
        }

        html body .ct-page .ct-main {
            margin-top: 0;
        }

    /* ----- Tiêu đề khối: 21px Bold #0256B3 (Thông tin chung) / #0356B4 (Mô tả công việc) ----- */
    html body .ct-page .ct-heading {
        margin: 19px 0 7px;
        font-size: 21px !important;
        font-weight: 700;
        line-height: normal;
        color: #0256B3 !important;
    }

    html body .ct-page #ChiTietCongViec_I > .ct-heading {
        margin: 25px 0 5px;
        font-size: 21px !important;
        color: #0356B4 !important;
    }

    /* ----- Thông tin chung (218:13790–13800): nền #F7F9FC bo 7.8, dòng 37.8px, sọc #F3F3F3 ----- */
    html body .ct-page .recruitment__infor {
        padding: 0 0 16px;
        border-radius: 7.802px;
        background: #F7F9FC;
    }

    html body .ct-page .recruitment__infor-group {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        min-height: 37.8px;
        margin: 0;
        padding: 1.7px 15.5px 1.7px 15px;
        border: 0;
    }

        html body .ct-page .recruitment__infor-group:nth-child(even of .recruitment__infor-group) {
            background: #F3F3F3;
        }

        html body .ct-page .recruitment__infor-group:nth-child(odd of .recruitment__infor-group) {
            background: transparent;
        }

    html body .ct-page .recruitment__infor-inner,
    html body .ct-page .recruitment__infor-inner span {
        flex: 0 0 auto;
        font-size: 12px !important;
        font-weight: 700;
        line-height: 34.33px;
        color: #00499C;
        white-space: nowrap;
    }

    html body .ct-page .recruitment__infor-text,
    html body .ct-page .recruitment__infor-text * {
        font-size: 12px !important;
        font-weight: 400;
        line-height: 20.28px;
        color: #000;
    }

    html body .ct-page .recruitment__infor-text {
        flex: 1 1 auto;
        min-width: 0;
        padding: 7px 0;
        text-align: right;
    }

    /* Nút ỨNG TUYỂN NGAY (218:13796): 242.6×37.45, bo 78, #0356B4, chữ 21 Bold */
    html body .ct-page .recruitment__infor-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 242.643px;
        height: 37.45px;
        margin: 14px auto 0;
        padding: 0;
        border-radius: 78px;
        background: #0356B4;
        font-size: 21px;
        font-weight: 700;
        line-height: normal;
        color: #fff;
    }

    /* ----- Mô tả công việc (218:13807–13810): mục 14 Bold đen, dòng 12/14.17, cách 5.67, gạch đầu dòng tick cam 8.7 ----- */
    html body .ct-page #ChiTietCongViec_I {
        padding: 0 7.5px;
    }

        html body .ct-page #ChiTietCongViec_I > :not(.ct-heading),
        html body .ct-page #ChiTietCongViec_I > :not(.ct-heading) *:not(strong):not(b) {
            /* typography.css ép 16px !important + HTML CMS có cỡ chữ inline */
            font-size: 12px !important;
            line-height: 14.169px !important;
            color: #000;
        }

        html body .ct-page #ChiTietCongViec_I p {
            margin: 0 0 5.67px;
        }

            html body .ct-page #ChiTietCongViec_I p strong,
            html body .ct-page #ChiTietCongViec_I p b {
                font-size: 14px !important;
                font-weight: 700;
                line-height: normal;
                color: #000;
            }

        html body .ct-page #ChiTietCongViec_I li strong,
        html body .ct-page #ChiTietCongViec_I li b {
            font-size: 12px !important;
            line-height: 14.169px !important;
            color: #000;
        }

        html body .ct-page #ChiTietCongViec_I ul,
        html body .ct-page #ChiTietCongViec_I ol {
            margin: 5px 0 6px !important;
        }

            html body .ct-page #ChiTietCongViec_I ul > li {
                margin-bottom: 5.67px;
                padding-left: 13px;
            }

                html body .ct-page #ChiTietCongViec_I ul > li::before {
                    top: 2.8px;
                    left: 1px;
                    width: 8.7px;
                    height: 8.7px;
                }

    /* ----- Tiêu đề section (218:13814 / 218:13890): thanh cao 27.4, chữ 14 Bold trắng ----- */
    html body .ct-page .cmp-tieude {
        width: 100%;
        max-width: none;
        height: 27.4px;
        margin: 15px 0 9px;
        padding: 0;
    }

        html body .ct-page .cmp-tieude::after {
            left: 0;
            right: 0;
        }

    html body .ct-page .cmp-tieude__tag {
        left: 0;
        height: 27.4px;
        gap: 7.5px;
        padding: 0 10px 0 0;
    }

    html body .ct-page .cmp-tieude__icon-box {
        width: 26px;
        height: 27.4px;
    }

    html body .ct-page .cmp-tieude__icon {
        width: 16px;
        height: 17px;
    }

    html body .ct-page .cmp-tieude__text {
        font-size: 14px;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0;
    }

    /* ----- Công việc liên quan (218:13812–13888): khung rgba(3,78,162,.03) bo 7.8, thẻ trắng 168×107 bo 6 ----- */
    html body .ct-page .section-content--lienquan {
        padding: 4px 5px !important;
        border-radius: 7.83px !important;
        background: rgba(3, 78, 162, .03) !important;
    }

        html body .ct-page .section-content--lienquan > .row {
            margin: 0;
        }

        html body .ct-page .section-content--lienquan .row > [class*="col-"] {
            padding: 5.7px 6.7px !important;
        }

        html body .ct-page .section-content--lienquan .job-card.job-card--filter {
            position: relative;
            height: 107.448px;
            min-height: 0;
            padding: 5.65px 5.6px 5.2px 8.7px;
            border: 0;
            border-radius: 6.09px;
            background: #fff;
            box-shadow: none;
        }

        /* Figma thẻ không có nhãn HOT / pill số lượng – còn ngày */
        html body .ct-page .section-content--lienquan .job-card__hot,
        html body .ct-page .section-content--lienquan .job-card__meta {
            display: none;
        }

        html body .ct-page .section-content--lienquan .job-card__title {
            margin: 0 0 8.7px;
            padding: 0;
            overflow: hidden;
            font-size: 13.92px;
            font-weight: 900;
            line-height: normal;
            color: #000;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        html body .ct-page .section-content--lienquan .job-card__info {
            gap: 7.8px;
            min-height: 0;
            margin: 0;
        }

        html body .ct-page .section-content--lienquan .job-card__row {
            gap: 3.5px !important;
            margin: 0;
        }

            html body .ct-page .section-content--lienquan .job-card__row span:not(.job-card__ico) {
                overflow: hidden;
                font-size: 10.44px;
                font-weight: 400;
                line-height: normal;
                color: #000;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

        html body .ct-page .section-content--lienquan .job-card__ico {
            flex: 0 0 8.7px;
            width: 8.7px;
            height: 8.7px;
            margin-left: 0.9px;
            color: #F6921E;
        }

        /* Nút Xem ngay (218:13832): 65×15.7, bo 14, #0356B4, chữ 10.44 Black, góc phải dưới */
        html body .ct-page .section-content--lienquan .job-card__btn--mobile {
            position: absolute;
            right: 5.6px;
            bottom: 5.2px;
            width: 65.252px;
            height: 15.66px;
            margin: 0;
            padding: 0;
            border-radius: 14.138px;
            background: #0356B4;
            font-size: 10.44px;
            font-weight: 900;
            line-height: 15.66px;
            color: #fff;
            text-align: center;
        }

    /* Nút Xem thêm (218:13824 / 218:13827): 103×24.8, bo 29.8, #F6921E, chữ 14.7 Black, canh phải */
    html body .ct-page .newjob-home__btn-more,
    html body .ct-page .cmp-quytrinh__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 103.316px;
        height: 24.796px;
        padding: 0;
        border-radius: 29.847px;
        background: #F6921E;
        font-size: 14.694px;
        font-weight: 900;
        line-height: normal;
        color: #fff;
        text-transform: none;
    }

    html body .ct-page .newjob-home__btn-more {
        margin: 0;
    }

    html body .ct-page .row:has(> .col-12 > .row .newjob-home__btn-more) .col-12 {
        margin: 9px 0 0 !important;
        text-align: right !important;
    }

    html body .ct-page .cmp-quytrinh__more {
        justify-content: flex-end;
        margin: 13px 0 0;
        text-align: right;
    }

    /* Ảnh cuối trang: cách khối Lưu ý ~19px */
    html body .ct-page .ct-newworld {
        margin: 19px 0 0;
    }

    /* ----- Quy trình ứng tuyển (218:13899–14395): 1 cột, ảnh trái – chữ phải, nền rgba(3,78,162,.03) bo 12.75 ----- */
    html body .ct-page .cmp-quytrinh {
        padding: 0;
    }

    html body .ct-page .cmp-quytrinh__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    html body .ct-page .cmp-quytrinh__card {
        display: grid;
        grid-template-columns: 40% minmax(0, 1fr); /* 430px: ảnh ~172px như Figma */
        grid-template-rows: auto auto;
        align-items: center;
        min-height: 122px;
        margin: 0;
        padding: 8px 8px 8px 10px;
        border: 0;
        border-radius: 12.751px;
        background: rgba(3, 78, 162, .03);
        box-shadow: none;
        text-align: center;
    }

        html body .ct-page .cmp-quytrinh__card:first-child {
            min-height: 108px;
        }

        /* bỏ kiểu "thẻ 5 nằm giữa nửa bề rộng" của component (2 cột) */
        html body .ct-page .cmp-quytrinh__grid > .cmp-quytrinh__card:last-child:nth-child(odd) {
            grid-column: auto;
            justify-self: stretch;
            width: auto;
        }

    html body .ct-page .cmp-quytrinh__icon-wrap {
        grid-row: 1 / span 2;
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        margin: 0;
    }

    html body .ct-page .cmp-quytrinh__icon {
        width: auto;
        max-width: 153px;
        height: 80px;
        object-fit: contain;
    }

    html body .ct-page .cmp-quytrinh__name {
        display: flex;
        justify-content: center;
        gap: 4px;
        align-self: end;
        margin: 0;
    }

    html body .ct-page .cmp-quytrinh__step,
    html body .ct-page .cmp-quytrinh__title {
        font-size: 17.001px;
        font-weight: 900;
        line-height: normal;
        color: #034EA2;
        white-space: nowrap;
    }

    html body .ct-page .cmp-quytrinh__desc {
        align-self: start;
        max-width: 199px;
        margin: 3px auto 0;
    }

        html body .ct-page .cmp-quytrinh__desc,
        html body .ct-page .cmp-quytrinh__line {
            font-size: 14.167px;
            font-weight: 400;
            line-height: normal;
            color: #000;
        }

    html body .ct-page .cmp-quytrinh__line {
        display: block;
    }

    /* ----- Lưu ý (218:14532–14537): tiêu đề 12 Black đỏ, 3 ô 120×80 nền rgba(231,30,38,.1) bo 5.4, chữ 8px ----- */
    html body .ct-page .cmp-luuy {
        margin: 10px 0 0;
        padding: 0;
    }

    html body .ct-page .cmp-luuy__title {
        margin: 0 0 9px;
        text-align: left;
        font-size: 12px;
        font-weight: 900;
        line-height: normal;
        color: #E71E26;
        text-transform: uppercase;
    }

    html body .ct-page .cmp-luuy__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    html body .ct-page .cmp-luuy__box {
        position: relative;
        grid-column: auto;
        min-height: 80px;
        margin: 0;
        padding: 12.5px 5.4px 6px;
        border: 0;
        border-radius: 5.368px;
        background: rgba(231, 30, 38, .1);
    }

    html body .ct-page .cmp-luuy__icon {
        top: -7px;
        left: 2px;
        width: 14px;
        height: 14px;
    }

    html body .ct-page .cmp-luuy__box p,
    html body .ct-page .cmp-luuy__box ul {
        margin: 0;
        padding: 0;
    }

    html body .ct-page .cmp-luuy__box li {
        margin: 0;
        list-style-position: inside;
    }

        html body .ct-page .cmp-luuy__box,
        html body .ct-page .cmp-luuy__box * {
            font-size: 8px;
            line-height: normal;
            color: #000;
            text-align: center;
        }
}