/* Điện thoại (≤ 575.98px) theo Figma Mobile – Quy trình tuyển dụng (node 4:1668, khung 430px).
   File nạp cho mọi trang (_LayoutPublic) → mọi selector gắn .qttd-page.
   quytrinhtuyendung.css / component CSS nạp sau trong body → selector dạng "html body .qttd-page …" để thắng;
   !important chỉ dùng để đè class Bootstrap (mt-*, mb-*, my-*) vốn đã !important. */
@media (max-width: 575.98px) {
    /* Lề nội dung 28px như Figma: container 28, bỏ lề âm của .row và padding của cột */
    html body .qttd-page.container {
        padding-left: 28px;
        padding-right: 28px;
    }

    html body .qttd-page .row {
        margin-left: 0;
        margin-right: 0;
    }

    html body .qttd-page [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    /* ----- Tiêu đề trang (4:1669): 20.027px Black #0256B3, "&" 11.139px ----- */
    html body .qttd-page .header-text,
    html body .qttd-page .header-text strong {
        margin: 0;
        font-size: 20.027px;
        font-weight: 900;
        line-height: normal;
        color: #0256B3;
    }

    html body .qttd-page .header-text {
        padding: 11px 0 0;
    }

        html body .qttd-page .header-text .qttd-va {
            font-size: 11.139px;
        }

    html body .qttd-page .col-12.text-center.p-2 {
        padding: 0 !important;
    }

    /* ----- 5 thẻ bước (4:1874…): 179×199, cách 17 / 16, bo 12.751, nền rgba(3,78,162,.03) ----- */
    html body .qttd-page .cmp-quytrinh {
        margin: 15px 0 0;
        padding: 0;
    }

    html body .qttd-page .cmp-quytrinh__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 17px;
        margin: 0;
    }

    html body .qttd-page .cmp-quytrinh__card {
        min-height: 199px;
        margin: 0;
        padding: 14px 4px 10px;
        border-radius: 12.751px;
        background: rgba(3, 78, 162, .03);
    }

        html body .qttd-page .cmp-quytrinh__grid > .cmp-quytrinh__card:last-child:nth-child(odd) {
            width: calc(50% - 8.5px);
        }

    html body .qttd-page .cmp-quytrinh__icon-wrap,
    html body .qttd-page .cmp-quytrinh__icon {
        height: 86px;
    }

    html body .qttd-page .cmp-quytrinh__icon {
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

    html body .qttd-page .cmp-quytrinh__name {
        margin: 13px 0 0;
    }

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

    html body .qttd-page .cmp-quytrinh__desc {
        margin: 4px 0 0;
        font-size: 14px;
        font-weight: 400;
        line-height: normal;
        color: #000;
    }

    /* ----- Chữ nội dung: 12px / 14px, giãn chữ 0.36px, đen ----- */
    html body .qttd-page .text-20,
    html body .qttd-page .list-unstyled li {
        display: block;
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        letter-spacing: .36px;
        color: #000;
    }

    /* Tiêu đề nhỏ trong từng bước (Kênh hỗ trợ…, Hồ sơ ứng tuyển bao gồm…): 12px Bold */
    html body .qttd-page .text-bold.text-24 {
        display: block;
        font-size: 12px;
        font-weight: 700;
        line-height: 14px;
        letter-spacing: .36px;
        color: #000;
    }

    /* Đoạn giới thiệu dưới 5 thẻ (4:1670): cách thẻ 11px, cách tag Bước 1 8px */
    html body .qttd-page .col-12.my-4 {
        margin: 11px 0 0 !important;
    }

        html body .qttd-page .col-12.my-4 > .text-20 {
            letter-spacing: 0; /* 4:1670 không giãn chữ */
        }

    /* Khoảng cách giữa các khối trong bước */
    html body .qttd-page .row.mt-4 {
        margin-top: 4px !important;
    }

    html body .qttd-page .mb-3 {
        margin-bottom: 12px !important;
    }

    html body .qttd-page .col-12:has(> .text-20) + .col-12 > .text-bold.text-24 {
        margin-top: 8px;
    }

    /* ----- Tag "BƯỚC n | TÊN" (4:1673…): cao 20, ô cam 57 #F6921E, nền #0256B3, bo đáy 3.182, chữ 14 Bold ----- */
    html body .qttd-page .section-head--tagline {
        height: 20px;
        margin: 12px 0 0 !important;
        padding: 0;
    }

        html body .qttd-page .section-head--tagline::after {
            left: 2px;
            right: 0;
        }

    html body .qttd-page .section-head--tagline .section-tag {
        height: 20px;
        gap: 9px;
        padding: 0 9px 0 0;
        background: #0256B3;
        border-radius: 0 0 3.182px 3.182px;
    }

    html body .qttd-page .section-tag__yellow-box {
        width: 57px;
        height: 20px;
        padding: 0 4px;
        justify-content: flex-start;
        background: #F6921E;
        border-radius: 0 0 3.182px 3.182px;
    }

    html body .qttd-page .section-tag__text {
        font-size: 14px;
        font-weight: 700;
        line-height: normal;
        letter-spacing: .14px;
        color: #fff;
    }

    /* ----- Thẻ Hotline / Email (4:1725, 4:1726): 374×58, bo 4.774, cách nhau 9 ----- */
    html body .qttd-page .card-blue {
        height: auto;
        min-height: 58px;
        margin: 6px 0 9px;
        padding: 5px 10px 5px 21px;
        border-radius: 4.774px;
        background: #0256B3;
    }

        html body .qttd-page .card-blue h2 {
            margin: 0 0 1px;
            font-size: 14px;
            font-weight: 700;
            line-height: 15.59px;
            color: #fff;
        }

            html body .qttd-page .card-blue h2 img {
                width: 14px;
                height: 14px;
            }

        html body .qttd-page .card-blue ul {
            margin: 0;
            padding-left: 12px;
        }

        html body .qttd-page .card-blue li,
        html body .qttd-page .card-blue li a {
            font-size: 12px;
            font-weight: 400;
            line-height: 14px;
            color: #fff;
        }

    html body .qttd-page .col-lg-6:has(> .card-blue) {
        margin: 0;
    }

    /* ----- Danh sách có icon (4:1699…): lề chữ 40px, dòng 14 + cách 3.18 ----- */
    html body .qttd-page .list-unstyled {
        margin-top: 1px !important;
    }

        html body .qttd-page .list-unstyled li {
            margin-bottom: 3.18px !important;
        }

            html body .qttd-page .list-unstyled li:last-child {
                margin-bottom: 0 !important;
            }

            html body .qttd-page .list-unstyled li .text-warning {
                margin-right: 2px !important;
            }

            html body .qttd-page .list-unstyled li img {
                width: 10px;
                height: 10px;
                vertical-align: -1px;
            }

    /* ----- Bước 3 – 2 vòng phỏng vấn (4:1777): ô 52 cao, viền 0.955 #0256B3, nền #F7F9FC, icon xanh 65×52 ----- */
    html body .qttd-page .process-wrapper {
        margin: 0 39px 0 60px;
        padding: 0;
    }

    html body .qttd-page .step-box {
        min-height: 52px;
        border: .955px solid #0256B3;
        border-radius: 4.774px;
        background: #F7F9FC;
    }

    html body .qttd-page .step-icon {
        flex: 0 0 65px;
        width: 65px;
        min-height: 52px;
        border-radius: 4.774px;
    }

        html body .qttd-page .step-icon img {
            width: 40px;
            height: auto;
        }

    html body .qttd-page .step-content {
        padding: 6px 8px 6px 6px;
    }

        html body .qttd-page .step-content h3 {
            margin: 0 0 2px;
            font-size: 12px;
            font-weight: 700;
            line-height: 12px;
            letter-spacing: .36px;
            color: #0256B3;
        }

        html body .qttd-page .step-content p {
            font-size: 12px;
            font-weight: 400;
            line-height: 12px;
            color: #000;
        }

    html body .qttd-page .connector {
        height: 20px;
        margin-left: 12px;
        align-self: flex-start;
    }

        html body .qttd-page .connector span {
            width: 9px;
            height: 9px;
        }

    /* ----- Bước 4 – Điện thoại / Email (4:1764, 4:1766): chữ 19.125 / 18.456 Bold #0256B3 ----- */
    html body .qttd-page .row.text-center {
        margin: 6px 0 0;
    }

        html body .qttd-page .row.text-center > .col-3 {
            flex: 0 0 92px;
            max-width: 92px;
            padding: 0;
        }

            html body .qttd-page .row.text-center > .col-3:first-child {
                margin-left: 11px;
                margin-right: 9px;
            }

    html body .qttd-page .row.text-center .mb-2 {
        margin-bottom: 9px !important;
    }

    html body .qttd-page .qttd-kenh__img--phone {
        width: 44px;
        height: 45px;
    }

    html body .qttd-page .qttd-kenh__img--mail {
        width: 58px;
        height: 48px;
    }

    html body .qttd-page .text-blue {
        font-size: 19.125px;
        font-weight: 700;
        line-height: 19.921px;
        letter-spacing: .57px;
        color: #0256B3;
    }

    html body .qttd-page .row.text-center > .col-3 + .col-3 .text-blue {
        font-size: 18.456px;
    }

    html body .qttd-page .row.text-center + .text-20 {
        display: block;
        margin-top: 6px;
    }

    /* ----- Lưu ý (4:1706…): 3 ô 1 hàng, cao 83, nền rgba(231,30,38,.1), bo 5.728, chữ 8px ----- */
    html body .qttd-page .cmp-luuy {
        margin: 16px 0 24px;
    }

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

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

        html body .qttd-page .cmp-luuy__grid > .cmp-luuy__box {
            grid-column: auto;
        }

    html body .qttd-page .cmp-luuy__box {
        min-height: 83px;
        padding: 12px 4px 6px;
        border-radius: 5.728px;
        background: rgba(231, 30, 38, .1);
    }

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

            html body .qttd-page .cmp-luuy__box p,
            html body .qttd-page .cmp-luuy__box .cmp-luuy__lead {
                margin: 0;
            }

            html body .qttd-page .cmp-luuy__box strong {
                font-weight: 700;
            }

            html body .qttd-page .cmp-luuy__box ul {
                padding-left: 0;
            }

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

    html body .qttd-page .cmp-luuy__icon {
        top: -8px;
        left: 4px;
        width: 15.868px;
        height: 15.868px;
    }
}