/* Điện thoại (≤ 575.98px) theo Figma Mobile – trang-chu.
   Trang chủ theo Figma "Trang chủ Mobile" (node 411:11503, khung 360px; nội dung rộng 328 = lề 16).
   File nạp cho mọi trang → mọi selector gắn .home-page (chỉ có ở Trang chủ); banner/Fanpage nằm ngoài .home-page
   nên dùng body:has(.home-page). Component dùng chung chỉ đổi trong phạm vi trang này. */
@media (max-width: 575.98px) {
    /* ----- Dải Fanpage 18 (411:11942). Banner giữ tỉ lệ ảnh như trang Việc làm (360px → cao 115 đúng Figma, không cắt nút "Ứng tuyển ngay") ----- */
    html body:has(.home-page) .cmp-fanpage {
        height: 18px;
        min-height: 18px;
        padding: 0 12px;
        gap: 4px;
        background: #001484;
    }

    html body:has(.home-page) .cmp-fanpage__icon {
        width: 13px;
        height: 13px;
    }

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

    html body .home-page {
        padding: 0 16px;
    }

    /* ----- Dải xanh nhạt #E8F3FF: Tìm kiếm + Vị trí HOT (411:1011, 425:312: lề trên 40, cách nhau 40) ----- */
    html body .home-page .home-band {
        margin: 0 -16px !important; /* thắng .my-4 */
        padding: 40px 16px 20px;
        background: #E8F3FF;
    }

    html body .home-page .home-search {
        margin: 0;
        padding: 0;
        background: none;
    }

    html body .home-page .home-search__title {
        margin: 0 0 10px;
        font-size: 16px;
        font-weight: 900;
        line-height: normal;
        color: #034EA2;
        text-align: center;
    }

    html body .home-page .home-search .cmp-timkiem {
        gap: 10px;
        padding: 16px;
        border-radius: 10px;
        background: #0256B3;
    }

    html body .home-page .home-search .cmp-timkiem__o-nhap,
    html body .home-page .home-search .cmp-timkiem__btn {
        height: 50px;
        padding: 0 10px;
        border-radius: 14px;
    }

    html body .home-page .home-search .cmp-timkiem__input,
    html body .home-page .home-search .cmp-timkiem__btn {
        font-size: 14px;
        line-height: normal;
    }

        html body .home-page .home-search .cmp-timkiem__input::placeholder {
            color: #878787;
        }

    html body .home-page .home-search .cmp-timkiem__btn {
        font-weight: 600;
        background: #0095FF;
    }

    /* Vị trí HOT (411:11253): tiêu đề 16 Black, tab 14 Bold p10 bo 10, thẻ cách nhau 10 */
    html body .home-page .home-hot {
        margin: 40px 0 0;
        padding: 0;
    }

    html body .home-page .home-hot__tag {
        display: flex;
        justify-content: center;
        height: auto;
        margin: 0 0 10px;
        padding: 0;
        background: none;
    }

        html body .home-page .home-hot__tag .section-tag__icon-box {
            display: none;
        }

        html body .home-page .home-hot__tag .section-tag__text {
            padding: 0;
            font-size: 16px;
            font-weight: 900;
            line-height: normal;
            color: #034EA2;
            text-align: center;
        }

    html body .home-page .home-hot__tabs {
        justify-content: center;
        flex-wrap: nowrap;
        gap: 10px;
        margin: 0 0 10px;
    }

    html body .home-page .home-hot__tab {
        padding: 10px;
        border: 0;
        border-radius: 10px;
        background: #fff;
        font-size: 14px;
        font-weight: 700;
        line-height: normal;
        color: #808080;
        box-shadow: none;
    }

        html body .home-page .home-hot__tab.is-active {
            background: #0356B4;
            color: #fff;
        }

    html body .home-page .home-hot__grid {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        margin: 0;
    }

    html body .home-page .home-hot__item {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    /* Thẻ việc làm (412:12040): nền trắng, p10, bo 10, các khối cách 16 */
    html body .home-page .home-hot .job-card {
        position: relative;
        gap: 16px;
        padding: 10px;
        border: 0;
        border-radius: 10px;
        background: #fff;
        box-shadow: none;
    }

    html body .home-page .home-hot .job-card__title {
        display: flex;
        align-items: center;
        min-height: 25px; /* canh giữa với nhãn HOT (Figma items-center) */
        margin: 0;
        padding-right: 64px;
        font-size: 14px;
        font-weight: 700;
        line-height: normal;
        color: #0356B4;
    }

    html body .home-page .home-hot .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;
        color: #fff;
        text-transform: uppercase;
    }

        html body .home-page .home-hot .job-card__hot svg {
            width: 14px;
            height: 17px;
        }

    html body .home-page .home-hot .job-card__info {
        gap: 10px;
        margin: 0;
    }

    html body .home-page .home-hot .job-card__row {
        gap: 14px !important;
        margin: 0;
    }

        html body .home-page .home-hot .job-card__row:last-child {
            gap: 12px !important;
        }

        html body .home-page .home-hot .job-card__row span:not(.job-card__ico) {
            font-size: 14px;
            font-weight: 400;
            line-height: normal;
            color: #000;
        }

    html body .home-page .home-hot .job-card__ico {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        color: #0356B4;
    }

    html body .home-page .home-hot .job-card__meta {
        gap: 10px;
        margin: 0;
    }

    html body .home-page .home-hot .job-card__pill {
        padding: 4px 6px;
        border-radius: 20px;
        background: #E8F3FF;
        font-size: 14px;
        font-weight: 400;
        line-height: normal;
        color: #0356B4;
    }

    /* Nút "Xem tất cả" / "Xem thêm" (411:11275, 414:15605): cam #F7941D, cao 45, px20, bo 60, 16 SemiBold */
    html body .home-page .home-hot__more {
        margin: 10px 0 0;
    }

    html body .home-page .btn-xem-tatca,
    html body .home-page .cmp-quytrinh__btn {
        display: inline-flex;
        align-items: center;
        height: 45px;
        padding: 0 20px;
        border-radius: 60px;
        background: #F7941D;
        font-size: 16px;
        font-weight: 600;
        line-height: normal;
        color: #fff;
        text-transform: uppercase;
    }

    /* ----- Tiêu đề section (412:12397…): thanh cao 27 (tự giãn khi 2 dòng), ô cam 26, chữ 16 Black, cách nội dung 20 ----- */
    /* tiêu đề ngay sau dải xanh: dải đã chừa 20 → cách nút "Xem tất cả" đúng 40 */
    html body .home-page .cmp-tieude:has(+ .cmp-quytrinh) {
        margin-top: 20px !important;
    }

    html body .home-page .cmp-tieude {
        width: 100%;
        max-width: none;
        height: auto;
        margin: 40px 0 20px;
        padding: 0;
    }

        html body .home-page .cmp-tieude::after {
            left: 1px;
            right: 1px;
        }

    html body .home-page .cmp-tieude__tag {
        position: relative;
        left: 0;
        display: inline-flex;
        align-items: flex-start;
        gap: 7px;
        height: auto;
        min-height: 27px;
        max-width: 100%;
        padding: 0 8px 0 0;
        background: #0256B3;
        white-space: normal;
        overflow: visible;
    }

    html body .home-page .cmp-tieude__icon-box {
        flex: 0 0 26px;
        width: 26px;
        height: 27px;
        background: #F6921E;
    }

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

    html body .home-page .cmp-tieude__text {
        padding: 5px 0 3px;
        font-size: 16px;
        font-weight: 900;
        line-height: normal;
        letter-spacing: 0;
    }

    /* "GIỚI THIỆU VỀ HỆ THỐNG TIÊM CHỦNG VNVC": Figma ngắt 2 dòng (chữ rộng 197, thanh cao 51) */
    html body .home-page .cmp-tieude:has(+ .row .intro-box3) .cmp-tieude__text {
        max-width: 197px;
        white-space: normal;
    }

    /* ----- Quy trình (414:14346): 1 cột, thẻ cao 120, p10, bo 18, ảnh 122×100 bên trái, cách 20 ----- */
    html body .home-page .cmp-quytrinh {
        margin: 0;
    }

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

    html body .home-page .cmp-quytrinh__card {
        grid-column: auto !important;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 20px;
        height: 120px;
        min-height: 0;
        margin: 0;
        padding: 10px;
        border-radius: 18px;
        background: rgba(3, 78, 162, .03);
    }

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

        html body .home-page .cmp-quytrinh__icon-wrap img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

    /* ảnh bên trái; tên + mô tả xếp dọc, canh giữa theo chiều cao thẻ (cách nhau 4) */
    html body .home-page .cmp-quytrinh__card,
    html body .home-page .cmp-quytrinh__grid > .cmp-quytrinh__card:last-child:nth-child(odd) {
        display: grid;
        grid-template-columns: 122px minmax(0, 1fr);
        grid-template-rows: 1fr auto auto 1fr;
        column-gap: 20px;
        row-gap: 0;
        width: auto;
        justify-self: stretch;
    }

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

        html body .home-page .cmp-quytrinh__card .cmp-quytrinh__name {
            grid-row: 2;
            grid-column: 2;
        }

        html body .home-page .cmp-quytrinh__card .cmp-quytrinh__desc {
            grid-row: 3;
            grid-column: 2;
            margin-top: 4px;
        }

    html body .home-page .cmp-quytrinh__name .cmp-quytrinh__step::after {
        content: none;
    }

    html body .home-page .cmp-quytrinh__step,
    html body .home-page .cmp-quytrinh__title {
        display: block;
        font-size: 16px;
        font-weight: 900;
        line-height: normal;
        color: #034EA2;
        text-align: center;
    }

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

    html body .home-page .cmp-quytrinh__more {
        margin: 20px 0 0;
        padding: 0;
    }

    /* ----- Đãi ngộ & phúc lợi (414:15641): icon 80, chữ cách 20; tiêu đề 16 Black #272443, mô tả 14 canh đều ----- */
    html body .home-page .luong-thuong-compact {
        padding: 0;
    }

        html body .home-page .luong-thuong-compact .benefits__inner {
            margin: 0;
        }

        html body .home-page .luong-thuong-compact .benefits__grid.benefits__grid--lines {
            gap: 20px !important;
        }

        html body .home-page .luong-thuong-compact .luong-thuong-card {
            gap: 20px;
            margin: 0;
        }

        html body .home-page .luong-thuong-compact .luong-thuong-icon {
            flex: 0 0 80px;
            width: 80px;
            height: 80px;
            margin: 0;
            align-items: center;
            justify-content: center;
        }

            html body .home-page .luong-thuong-compact .luong-thuong-icon img {
                width: 72px;
                height: 75px;
                object-fit: contain;
            }

        html body .home-page .luong-thuong-compact .benefit-card__title {
            margin: 0 0 8px;
            font-size: 16px;
            font-weight: 900;
            line-height: normal;
            color: #272443;
            text-transform: uppercase;
        }

        html body .home-page .luong-thuong-compact .luong-thuong-text,
        html body .home-page .luong-thuong-compact .luong-thuong-text span {
            margin: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: normal;
            color: #000;
            text-align: justify;
        }

            html body .home-page .luong-thuong-compact .luong-thuong-text {
                gap: 0;
            }

            html body .home-page .luong-thuong-compact .luong-thuong-text span {
                display: block;
            }

    /* ----- Lưu ý (414:15931): tiêu đề đỏ 16 Black, hộp nền rgba(231,30,38,.1) cao ≥140, p20, bo 18, cách 40 ----- */
    html body .home-page .cmp-luuy {
        margin: 40px 0 0;
    }

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

    html body .home-page .cmp-luuy__grid {
        gap: 40px;
    }

    html body .home-page .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);
    }

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

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

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

    html body .home-page .cmp-luuy__box li {
        margin: 0;
    }

    /* ----- Môi trường làm việc tốt nhất (414:15836): dải #0256B4 tràn ngang, px16 py40 ----- */
    html body .home-page .row:has(> .col-12 > .achievement-enviroment) {
        margin: 0 -16px; /* tràn hết bề ngang màn */
    }

        html body .home-page .row:has(> .col-12 > .achievement-enviroment) > .col-12 {
            padding: 0;
        }

    html body .home-page .achievement-enviroment {
        width: auto;
        margin: 40px 0 0;
        padding: 40px 16px;
        background: #0256B4;
    }

    html body .home-page .achievement-enviroment .achievement__title {
        margin: 0 -4px 20px; /* dòng 1 "…TỐT NHẤT" rộng ~330px: nới 4px mỗi bên để giữ 2 dòng như Figma */
        font-size: 16px;
        font-weight: 900;
        line-height: normal;
        color: #fff;
        text-align: center;
    }

    html body .home-page .pic-achievement {
        margin: 0 0 10px;
        border-radius: 10px;
        overflow: hidden;
    }

        html body .home-page .pic-achievement img {
            display: block;
            width: 100%;
            aspect-ratio: 1260 / 759;
            object-fit: cover;
            border-radius: 10px;
        }

    html body .home-page .achievement-enviroment .achievement__content {
        font-size: 16px;
        font-weight: 700;
        line-height: normal;
        color: #fff;
        text-align: justify;
    }

    html body .home-page .achievement-enviroment .achievement__subtitle {
        margin: 20px 0 10px;
        font-size: 16px;
        font-weight: 700;
        line-height: normal;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
    }

    /* ----- Giới thiệu (414:15925…): đoạn 16 canh đều đen, tiêu đề nhỏ 16 Bold #034EA2, chú thích ảnh 16 canh giữa ----- */
    html body .home-page .intro,
    html body .home-page .intro-tag,
    html body .home-page .intro__content,
    html body .home-page .intro-grid,
    html body .home-page .story {
        padding-left: 0;
        padding-right: 0;
    }

    html body .home-page .intro__content {
        margin: 0 0 10px;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* 6 ảnh giới thiệu: lưới 2 cột cách 10, ảnh 405:260 bo 10 (414:15856) */
    html body .home-page .intro-grid:has(> .intro-box) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

        html body .home-page .intro-grid:has(> .intro-box) .intro-box {
            grid-column: auto !important;
            grid-row: auto !important;
        }

        html body .home-page .intro-grid:has(> .intro-box) .intro-box,
        html body .home-page .intro-grid:has(> .intro-box) .intro-box img {
            width: 100%;
            height: auto;
            margin: 0;
        }

        html body .home-page .intro-grid:has(> .intro-box) .intro-box img {
            display: block;
            aspect-ratio: 405 / 260;
            object-fit: cover;
        }

    html body .home-page .intro__content p,
    html body .home-page .intro__content p.highlight {
        font-size: 16px;
        line-height: normal;
        color: #000;
        text-align: justify;
    }

    html body .home-page .intro__content p.highlight {
        font-weight: 700;
    }

    /* các khối con của Giới thiệu cách nhau 20, tiêu đề nhỏ cách ảnh 10 (425:309) */
    html body .home-page .intro-tag {
        margin: 20px 0 0;
    }

    html body .home-page .intro-tag p {
        margin: 0 0 10px;
        font-size: 16px;
        font-weight: 700;
        line-height: normal;
        color: #034EA2;
    }

    html body .home-page .intro-box2 p.pt-3,
    html body .home-page .intro-box3 p.pt-3 {
        padding-top: 16px !important;
        font-size: 16px;
        font-weight: 400;
        line-height: normal;
        color: #000;
    }

    html body .home-page .intro-box2 p.pt-3 {
        text-align: center;
    }

    html body .home-page .intro-box img,
    html body .home-page .intro-box2 img,
    html body .home-page .intro-box3 img {
        border-radius: 10px;
    }

    /* Ảnh đối tác (414:15913): 2 cột cách 10, ảnh 303:207 bo 10; ảnh rộng (col-6) chiếm cả hàng 622:207 */
    html body .home-page .r-img.no-gutters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row dense; /* 2 ảnh nhỏ + 1 ảnh rộng như Figma */
        gap: 10px;
        margin: 0;
    }

        html body .home-page .r-img.no-gutters > [class*="col-"] {
            max-width: none;
            width: auto;
            padding: 0;
        }

        html body .home-page .r-img.no-gutters > .col-6 {
            grid-column: 1 / -1;
        }

        html body .home-page .r-img.no-gutters img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 303 / 207;
            object-fit: cover;
            border-radius: 10px;
        }

        html body .home-page .r-img.no-gutters > .col-6 img {
            aspect-ratio: 622 / 207;
        }

    /* ----- Hình thành & phát triển (693:12261): năm 32 Black #034EA2, nội dung 16 đen, "Xem thêm" 12 #0256B3 ----- */
    html body .home-page .year-block__badge__col-left p,
    html body .home-page .year-block__badge__col-right p,
    html body .home-page .year-block-2018__badge__col-right p {
        font-size: 32px;
        font-weight: 900;
        line-height: normal;
        color: #034EA2;
    }

    html body .home-page .year-block__title {
        font-size: 16px;
        font-weight: 700;
        line-height: normal;
        color: #000;
    }

    html body .home-page .year-block__desc {
        font-size: 16px;
        font-weight: 400;
        line-height: normal;
        color: #000;
    }

    html body .home-page .formation__more-text {
        font-size: 12px;
        font-weight: 400;
        line-height: normal;
        color: #0256B3;
    }

    /* ----- Câu chuyện VNVC (425:281): lưới 2×2 cách 10; thẻ nền rgba(3,78,162,.1), cao 250, p10, bo 10, cách 12;
       ảnh 599:381 bo 10; chữ 16 Bold đen canh giữa. Điện thoại không trượt (track đứng yên, ẩn nút ‹ ›) ----- */
    html body .home-page .story,
    html body .home-page .story-grid,
    html body .home-page .story-slider {
        display: block;
        width: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    html body .home-page .story-track {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: auto;
        transform: none !important;
    }

    html body .home-page .story-nav {
        display: none;
    }

    html body .home-page .story-box2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        grid-column: auto !important;
        flex: none;
        width: auto;
        min-width: 0;
        height: 250px;
        margin: 0;
        padding: 10px;
        border-radius: 10px;
        background: rgba(3, 78, 162, .1);
    }

        html body .home-page .story-box2 .story-link {
            display: block;
            width: 100%;
        }

        html body .home-page .story-box2 img {
            display: block;
            width: 100%;
            height: auto;
            padding: 0;
            aspect-ratio: 599 / 381;
            object-fit: cover;
            border-radius: 10px;
        }

        html body .home-page .story-box2 p {
            margin: 0;
            font-size: 16px;
            font-weight: 700;
            line-height: normal;
            color: #000;
            text-align: center;
        }

    html body .home-page .story-box3 {
        width: auto;
        margin: 20px 0 0;
    }

        html body .home-page .story-box3 img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 10px;
        }
}