/* Trang Chính sách nhân sự – điện thoại (≤ 575.98px) theo đúng Figma "Chính sách nhân sự Mobile" (node 4:1240, khung 360px).
   Nạp SAU typography.css (selector "html body .x") → mọi selector bắt đầu bằng "html body.cs-page" để thắng.
   Các component dùng chung (Fanpage, Tiêu đề section, Đãi ngộ) chỉ đổi trong phạm vi trang này. */
@media (max-width: 575.98px) {
    /* ----- Dải Fanpage (4:1243). Banner giữ tỉ lệ ảnh như trang Việc làm (360px → cao 115 đúng Figma, màn rộng hơn không bị cắt) ----- */
    html body.cs-page .cmp-fanpage {
        height: 18px;
        min-height: 18px;
        padding: 0 12px;
        gap: 4px;
        background: #001484;
    }

    html body.cs-page .cmp-fanpage__icon {
        width: 13px;
        height: 13px;
    }

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

    /* ----- Tiêu đề trang + đoạn mở đầu (4:1249, 4:1250) ----- */
    html body.cs-page .policy-section {
        padding: 0;
        margin: 0;
    }

    html body.cs-page h1.policy-title.csns-title,
    html body.cs-page h1.policy-title.csns-title span {
        margin: 0;
        padding: 0 27px;
        font-size: 16px;
        font-weight: 900;
        line-height: normal;
        color: #034EA2;
        text-align: center;
    }

    html body.cs-page h1.policy-title.csns-title {
        margin-top: 14px;
    }

        html body.cs-page h1.policy-title.csns-title span {
            padding: 0;
        }

    html body.cs-page .policy-content-container {
        margin: 5px 0 0;
        padding: 0 27px;
    }

    html body.cs-page .policy-content-container .policy-content {
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: normal;
        color: #000;
        text-align: justify;
    }

    /* ----- Khối "Môi trường làm việc tốt nhất" (4:1251–4:1254): 360×348, bo 15 ----- */
    html body.cs-page .moi-truong-tot-nhat-background {
        margin: 11px 0 0;
        padding: 0;
    }

    html body.cs-page .moi-truong-tot-nhat-container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 11px 0 12px;
        border-radius: 15px;
        background: linear-gradient(180deg, rgba(0, 120, 255, .2) 0%, rgba(3, 76, 158, .2) 100%), #034EA2;
    }

    html body.cs-page .moi-truong-tot-nhat-header {
        margin: 0;
        padding: 0 27px;
        font-size: 14px;
        font-weight: 900;
        line-height: normal;
        color: #fff;
        text-align: center;
    }

    html body.cs-page .moi-truong-tot-nhat-image {
        width: auto;
        margin: 6px 6px 0;
        padding: 0;
    }

        html body.cs-page .moi-truong-tot-nhat-image img {
            display: block;
            width: 100%;
            height: 208px;
            object-fit: cover;
            border-radius: 10px;
        }

    html body.cs-page .moi-truong-tot-nhat-content {
        margin: 8px 0 0;
        padding: 0 27px;
        font-size: 14px;
        font-weight: 700;
        line-height: normal;
        color: #fff;
        text-align: justify;
    }

    /* ----- Chiến lược nhân sự + Chính sách triển khai đồng bộ (4:1255–4:1327) ----- */
    html body.cs-page .chien-luoc-container {
        display: block;
        margin: 15px 0 0;
        padding: 0 27px;
    }

    html body.cs-page .chien-luoc-left,
    html body.cs-page .chien-luoc-right {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    html body.cs-page .chien-luoc-container h2 {
        margin: 0 0 5px;
        font-size: 16px;
        font-weight: 900;
        line-height: normal;
        color: #034EA2;
    }

    html body.cs-page .chien-luoc-right {
        margin-top: 20px;
    }

        html body.cs-page .chien-luoc-right h2 {
            max-width: 165px; /* Figma ngắt "Chính sách nhân sự / được triển khai đồng bộ" */
            margin-bottom: 6px;
        }

    html body.cs-page .chien-luoc-strategy-item,
    html body.cs-page .chinh-sach-strategy-item {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0;
        padding: 0;
    }

        html body.cs-page .chien-luoc-strategy-item + .chien-luoc-strategy-item {
            margin-top: 8px;
        }

        html body.cs-page .chien-luoc-strategy-item img,
        html body.cs-page .chinh-sach-strategy-item img {
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            margin: 0;
        }

        html body.cs-page .chien-luoc-strategy-item p,
        html body.cs-page .chinh-sach-strategy-item p {
            margin: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: normal;
            color: #000;
            text-align: justify;
        }

    /* Ô 5 mục: 1 hàng, nền rgba(3,78,162,.05), bo 10, cao 76 */
    html body.cs-page .chien-luoc-box {
        margin: 0;
        padding: 9px 0;
        border-radius: 10px;
        background: rgba(3, 78, 162, .05);
    }

    /* Nhãn 14px không vừa 5 cột (~49px ở 320) → 3 ô hàng trên, 2 ô hàng dưới căn giữa */
    html body.cs-page .chien-luoc-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px 0;
        align-items: start;
    }

        html body.cs-page .chien-luoc-grid > .chien-luoc-item {
            grid-column: span 2;
        }

            html body.cs-page .chien-luoc-grid > .chien-luoc-item:nth-child(4) {
                grid-column: 2 / span 2;
            }

    html body.cs-page .chien-luoc-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 0;
        margin: 0;
        padding: 0 2px;
    }

        html body.cs-page .chien-luoc-item img {
            width: auto;
            height: 26px;
            margin: 0;
        }

        html body.cs-page .chien-luoc-item p {
            margin: 7px 0 0;
            font-size: 14px;
            font-weight: 700;
            line-height: normal;
            color: #272443;
            text-align: center;
        }

    html body.cs-page .chien-luoc-content {
        margin: 8px 0 0;
        padding: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: normal;
        color: #000;
        text-align: center;
    }

    /* ----- Tiêu đề section (4:1334–4:1365): thanh cao 27, ô cam 26, chữ 16 Black ----- */
    html body.cs-page .cmp-tieude {
        width: 100%;
        max-width: none;
        height: 27px;
        margin: 20px 0 12px;
        padding: 0 27px;
    }

        html body.cs-page .cmp-tieude::after {
            left: 27px;
            right: 27px;
        }

    html body.cs-page .cmp-tieude__tag {
        left: 27px;
        height: 27px;
        gap: 7px;
        padding: 0 4px 0 0;
        background: #0256B3;
    }

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

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

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

    /* ----- Danh sách dưới các tiêu đề section ----- */
    html body.cs-page .chinh-sach-tuyen-dung-content-container {
        margin: 0;
        padding: 0 27px;
    }

        html body.cs-page .chinh-sach-strategy-item + .chinh-sach-strategy-item {
            margin-top: 14px;
        }

    html body.cs-page .dao-tao-content {
        margin: 0 0 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: normal;
        color: #000;
        text-align: justify;
    }

        html body.cs-page .chinh-sach-strategy-item + .dao-tao-content {
            margin: 10px 0 0;
        }

    /* ----- Lương, thưởng & phúc lợi (4:1241, 4:1404–4:1480): khung 308, bo 18, 2 cột có đường chia ----- */
    html body.cs-page .luong-thuong-compact {
        padding: 0 27px;
    }

        html body.cs-page .luong-thuong-compact .benefits__inner {
            margin: 0;
            padding: 0;
            border-radius: 18px;
            background: rgba(3, 78, 162, .03);
        }

        html body.cs-page .luong-thuong-compact .benefits__grid.benefits__grid--lines {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0 !important;
            background: none;
        }

        html body.cs-page .luong-thuong-compact .luong-thuong-card {
            flex-direction: column;
            align-items: center;
            gap: 0;
            min-height: 0;
            height: auto;
            margin: 0;
            padding: 11px 6px 12px;
            border: 0;
            border-bottom: 1px dashed rgba(3, 78, 162, .3);
            text-align: center;
        }

            html body.cs-page .luong-thuong-compact .luong-thuong-card:nth-child(odd) {
                border-right: 1px dashed rgba(3, 78, 162, .3);
            }

            html body.cs-page .luong-thuong-compact .luong-thuong-card:nth-last-child(-n+2) {
                border-bottom: 0;
            }

        html body.cs-page .luong-thuong-compact .luong-thuong-icon {
            flex: 0 0 auto;
            width: auto;
            height: 36px;
            margin: 0 0 8px;
        }

            html body.cs-page .luong-thuong-compact .luong-thuong-icon img {
                width: auto;
                height: 36px;
            }

        html body.cs-page .luong-thuong-compact .thuong-luong-content {
            text-align: center;
        }

        html body.cs-page .luong-thuong-compact .benefit-card__title {
            margin: 0 0 5px;
            font-size: 14px;
            font-weight: 900;
            line-height: normal;
            color: #272443;
            text-align: center;
            text-transform: uppercase;
        }

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

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

                html body.cs-page .luong-thuong-compact .luong-thuong-text span + span {
                    margin-top: 8px;
                }

    /* Đoạn cuối (4:1486) + ảnh New World (4:1485: 358×254, bo 10) */
    html body.cs-page .luong-thuong-compact + .policy-section .policy-content-container {
        margin-top: 12px;
    }

    html body.cs-page .newworld-wrapper {
        margin: 27px 0 40px;
        padding: 0 0 0 2px;
    }

    html body.cs-page .newworld-image {
        display: block;
        width: 358px;
        max-width: 100%;
        height: 254px;
        object-fit: cover;
        border-radius: 10px;
    }
}