/* Component dùng chung "LƯU Ý VỀ TRANG TUYỂN DỤNG" – Views/Shared/_LuuYTuyenDung.cshtml
   Giao diện chuẩn theo khối Lưu ý của Trang chủ (requirement Trang chủ 4.8).
   Không phụ thuộc Bootstrap / CSS từng trang để hiển thị giống nhau ở mọi trang. */

/* Font + cỡ chữ cố định bằng px: trang Liên hệ có layout/cỡ gốc (rem) khác các trang còn lại,
   CSS chung của layout lại ép font cho p/li → khai báo rõ ở đây để mọi trang giống nhau. */
.cmp-luuy {
    margin: 24px 0;
    color: #212529;
    text-align: left;
}

.cmp-luuy,
.cmp-luuy *,
.cmp-luuy *::before,
.cmp-luuy *::after {
    box-sizing: border-box;
}

/* Trang không bọc component trong .container (vd Liên hệ – layout riêng):
   tự tạo khung giống hệt .container của layout chung (lề 7.5px; rộng tối đa theo mốc
   540 / 720 / 960 / 1440px) để vị trí khối bằng các trang khác. Trang đã có .container không bị ảnh hưởng. */
:not(.container) > .cmp-luuy {
    margin-left: auto;
    margin-right: auto;
    padding-left: 7.5px;
    padding-right: 7.5px;
}

@media (min-width: 576px) {
    :not(.container) > .cmp-luuy { max-width: 540px; }
}

@media (min-width: 768px) {
    :not(.container) > .cmp-luuy { max-width: 720px; }
}

@media (min-width: 992px) {
    :not(.container) > .cmp-luuy { max-width: 960px; }
}

@media (min-width: 1200px) {
    :not(.container) > .cmp-luuy { max-width: 1440px; }
}

.cmp-luuy__title {
    color: #e6232a;
    line-height: 1.2;
    margin: 0 0 48px; /* 24px + nửa vòng tròn đỏ nhô lên khỏi ô */
    padding: 0;
}

/* PC 3 cột · tablet 2 cột (ô 3 chiếm cả hàng) · mobile 1 cột */
.cmp-luuy__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
}

.cmp-luuy__box {
    position: relative;
    /* Đỏ trong suốt 10% (theo Figma): nền trắng ra hồng nhạt, nền xanh trang Việc làm ra hồng tím */
    background: rgba(230, 35, 42, .1);
    border-radius: 16px;
    padding: 36px 20px 20px;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}
.cmp-luuy__box p {
    margin: 0 0 16px;
}

.cmp-luuy__box p:last-child {
    margin-bottom: 0;
}

.cmp-luuy__box .cmp-luuy__lead {
    margin-bottom: 8px;
}

.cmp-luuy__box ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc inside;
    text-align: center;
}

.cmp-luuy__box li {
    margin-bottom: 4px;
}

/* Vòng tròn đỏ dấu X (theo Figma): thẳng mép trái ô, tâm nằm trên mép trên ô */
.cmp-luuy__icon {
    position: absolute;
    top: -24px;
    left: 0;
    width: 48px;
    height: 48px;
    background: #e6232a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cmp-luuy__icon svg {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: #fff;
        stroke-width: 3.6;
        stroke-linecap: round;
    }

@media (max-width: 991.98px) {
    .cmp-luuy__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cmp-luuy__box:nth-child(3) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .cmp-luuy__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* Design mobile: tiêu đề căn giữa, vòng tròn X thụt vào trong ô */
    .cmp-luuy__title {
        margin-bottom: 40px;
        text-align: center;
    }

    .cmp-luuy__icon {
        top: -20px;
        left: 12px;
        width: 40px;
        height: 40px;
    }

    .cmp-luuy__box {
        padding-top: 32px;
    }

    .cmp-luuy__title {
    }
}