/* ==========================================================================
   LangGo Careers — Trang "Chính sách phúc lợi"
   Dùng lại biến :root, thang chữ (--fs-*) và font Reddit Sans khai trong shell.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Khoảng cách dọc giữa các card, dùng chung cho MỌI cụm trong trang.

   Trước đây mỗi cụm một kiểu: cơ hội phát triển 20px, văn hoá 18px, lộ trình
   16px, còn thu nhập & đãi ngộ là 30px — nhìn từ trên xuống nhịp giãn cách cứ
   nhảy loạn.

   Chọn 30px vì cụm "Thu nhập và đãi ngộ" là cụm DUY NHẤT không đổi được: 6 card
   ở đó đặt tuyệt đối theo `top` cứng (14/116/218) để khớp cung nét đứt đã vẽ sẵn
   trong ảnh nền, xê dịch là lệch khỏi cung. Lấy đúng con số của nó làm chuẩn thì
   ba cụm còn lại giãn ra cho khớp mà không phải đụng vào toạ độ nào.
   -------------------------------------------------------------------------- */
:root {
    --benefits-card-gap: 30px;

    /* Khoảng cách dọc GIỮA CÁC KHỐI lớn: Đào tạo và phát triển / Thu nhập và đãi
       ngộ / Văn hóa và work-life / Lộ trình và thăng tiến.

       Trước đây mỗi khối tự đặt padding trên–dưới một kiểu nên khoảng hở thực tế
       giữa chúng lần lượt là 120px (64 đáy + 56 đỉnh), rồi 64px, rồi 32px — lệch
       nhau tới bốn lần.

       Nay một quy tắc duy nhất: mọi khối `padding-top: 0` và `padding-bottom:
       var(--benefits-section-gap)`, nên khoảng hở giữa hai khối bất kỳ luôn đúng
       bằng biến này. Sửa một dòng là cả trang giãn/thu theo. */
    --benefits-section-gap: 64px;
}

/* --------------------------------------------------------------------------
   SECTION 1 — Banner
   Ảnh nền chiếm trọn khổ, chữ nằm đè bên trái. Một lớp phủ trắng chuyển dần từ
   trái sang trong suốt giữ cho chữ đọc được dù ảnh phía sau sáng tối thế nào.
   -------------------------------------------------------------------------- */
.benefits-banner {
    position: relative;
    display: flex;
    align-items: center;
    /* Tỉ lệ bản design (1920x700); chưa có ảnh thì khối vẫn giữ đúng chiều cao */
    aspect-ratio: 1920 / 700;
    min-height: 320px;
    font-family: var(--font-shell);
    background: #fff;
    overflow: hidden;
}

/* Ảnh nền dùng thẻ <img> thật (không dùng background-image) */
.benefits-banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.benefits-banner__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Lớp phủ trắng mờ dần về phải, nằm giữa ảnh và chữ */
.benefits-banner__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .82) 34%, rgba(255, 255, 255, 0) 62%);
}

.benefits-banner__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1293px;
    margin-inline: auto;
    padding-inline: 20px;
}

.benefits-banner__text {
    max-width: 620px;
}

/* Nới khoảng cách giữa 3 dòng tiêu đề cho thoáng, không dính sát nhau */
.benefits-banner__eyebrow {
    margin: 0 0 16px;
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 1);
}

.benefits-banner__title {
    margin: 0 0 12px;
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
    color: rgba(222, 0, 0, 1);
}

.benefits-banner__subtitle {
    margin: 0;
    /* Nằm giữa cỡ dòng 1 và dòng 2, đúng bậc thang trong bản design */
    font-size: calc(var(--fs-h2) * 1.35);
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    color: rgba(222, 0, 0, 1);
}

.benefits-banner__desc {
    margin: 28px 0 0;
    font-size: var(--fs-lead);
    font-weight: 500;
    line-height: 1.5;
    color: rgba(0, 0, 0, 1);
}

@media (max-width: 991px) {
    .benefits-banner { aspect-ratio: 4 / 3; }
    /* Màn hẹp thì phủ trắng gần kín để chữ không đè lên mặt người trong ảnh */
    .benefits-banner__bg::after {
        background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .9) 60%, rgba(255, 255, 255, .55) 100%);
    }
    .benefits-banner__text { max-width: none; }
    .benefits-banner__desc { margin-top: 20px; }
}

/* --------------------------------------------------------------------------
   SECTION 2 — 3 con số nổi bật
   Nền đỏ, 3 cột ngăn nhau bằng vạch dọc mảnh. Con số là ẢNH (chữ số mạ vàng),
   không phải text, nên chỉ cần canh chiều cao cho 3 ảnh bằng nhau.
   -------------------------------------------------------------------------- */
.benefits-stats {
    position: relative;
    padding: 56px 20px 60px;
    font-family: var(--font-shell);
    background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    overflow: hidden;
}

/* Ảnh nền dùng thẻ <img> thật (không dùng background-image) */
.benefits-stats__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.benefits-stats__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.benefits-stats__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 1293px;
    margin-inline: auto;
}

.benefits-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 20px;
    text-align: center;
}

/* Vạch dọc ngăn cách, mờ dần hai đầu */
.benefits-stat + .benefits-stat {
    border-left: 1px solid;
    border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
    border-image-slice: 1;
}

.benefits-stat__num {
    display: block;
    width: auto;
    height: clamp(64px, 6vw, 115px);
    object-fit: contain;
}

.benefits-stat__unit {
    margin: 6px 0 0;
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: rgba(255, 244, 184, 1);
    /* Design ghi box-shadow, nhưng đây là chữ nên phải dùng text-shadow —
       box-shadow sẽ đổ bóng quanh khối chữ chứ không theo nét chữ. */
    text-shadow: 0px 2px 2.9px rgba(0, 0, 0, 0.59);
}

.benefits-stat__desc {
    margin: 20px 0 0;
    font-size: var(--fs-lead);
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 1);
}

/* Mobile giữ nguyên 3 cột ngang như design, chỉ co ảnh số và chữ lại; vạch ngăn
   vẫn là vạch DỌC nên không cần đổi hướng như bản xếp chồng trước đây. */
@media (max-width: 767px) {
    .benefits-stats { padding: 40px 12px 44px; }

    .benefits-stats__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .benefits-stat { padding-inline: clamp(6px, 2.4vw, 16px); }

    .benefits-stat__num { height: clamp(38px, 11vw, 64px); }

    .benefits-stat__unit {
        margin-top: 4px;
        font-size: clamp(11px, 3vw, 15px);
    }

    .benefits-stat__desc {
        margin-top: 12px;
        font-size: clamp(11px, 3vw, 15px);
        line-height: 1.35;
    }
}

/* --------------------------------------------------------------------------
   SECTION 3 — Đào tạo và phát triển
   Ruột là khung `benefits-opp` bê từ trang Chính sách phúc lợi của careers
   Langmaster: ảnh nhân vật bên trái, danh sách pill card xếp bậc thang bên phải.
   Phần bọc ngoài (tiêu đề section + card trắng bo góc) là của bản design LangGo.
   -------------------------------------------------------------------------- */
.benefits-training {
    position: relative;
    /* Khối đầu tiên giữ padding-top để tách khỏi dải "Con số nói lên tất cả" phía
       trên, nhưng dùng cùng biến để nhịp thống nhất từ đầu tới cuối trang. */
    padding: var(--benefits-section-gap) 20px var(--benefits-section-gap);
    font-family: var(--font-shell);
    background: #fff;
    overflow: hidden;
}

/* Ảnh nền dùng thẻ <img> thật (không dùng background-image) */
.benefits-training__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.benefits-training__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.benefits-training__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1293px;
    margin-inline: auto;
}

.benefits-training__heading {
    margin: 0 0 32px;
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 1);
}

/* ---------- Khung benefits-opp ---------- */
.benefits-opp {
    padding: 32px clamp(20px, 3vw, 48px) 40px;
    border-radius: 24px;
    background: rgba(249, 249, 249, .92);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    overflow: hidden;
}

.benefits-opp__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0 0 8px;
    font-size: var(--fs-h3);
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 1);
}

.benefits-opp__arrow {
    flex: 0 0 auto;
    width: auto;
    height: .58em;
}

/* Cột ảnh khoá cứng 602px. Trước đây chia theo tỉ lệ fr, nhưng ô lưới mặc định
   `min-width: auto` nên cột danh sách không co xuống dưới bề rộng pill card
   (705px + độ thụt) — nó ăn hết chỗ và bóp cột ảnh còn ~330px. */
.benefits-opp__body {
    display: grid;
    grid-template-columns: 602px minmax(0, 1fr);
    align-items: center;
    gap: 0;
    margin-top: 24px;
}

/* Chưa có ảnh nhân vật thì danh sách chiếm trọn khung */
.benefits-opp__body--no-photo {
    grid-template-columns: minmax(0, 1fr);
}

/* Khối ảnh người (PNG nền trong) — đứng chạm đáy card: kéo tụt đúng bằng
   padding-bottom của .benefits-opp để mép dưới ảnh trùng mép dưới card, không
   hở một dải nền xám dưới chân. */
.benefits-opp__media {
    position: relative;
    align-self: end;
    margin-bottom: -40px;
    text-align: center;
}

.benefits-opp__media img {
    display: block;
    /* Cỡ ảnh bản design: 602x625 */
    width: 602px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Danh sách pill card xếp so le sang phải */
/* Kéo danh sách sang trái để pill card nằm sát và đè lên mép ảnh nhân vật.
   z-index cho pill vẽ trên ảnh; số px tính theo bản design 1920 rồi quy ra vw. */
.benefits-opp__list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--benefits-card-gap);
    margin: 0 0 0 calc(-130 * 1vw / 19.2);
    padding: 0;
    list-style: none;
}

.opp-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    /* Ôm vừa chữ thay vì rộng cứng 705px — dòng ngắn không còn thừa khoảng trắng */
    width: fit-content;
    max-width: 100%;
    min-height: 64px;
    padding: 0 28px 0 0;
    border-radius: 68px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 1px 6px 0 rgba(219, 31, 31, .24);
    /* Đường cong: mỗi card có độ thụt riêng (--opp-indent, px ở bản 1920). Quy ra
       vw (1vw = 19.2px ở 1920) nên ở 1920 đúng số design, màn hẹp thì co lại đều. */
    margin-left: calc(var(--opp-indent, 0) * 1vw / 19.2);
}

.opp-card__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 1);
    background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    color: rgba(255, 255, 255, 1);
    font-size: 22px;
    box-shadow: 0 2px 7.2px 0 rgba(0, 0, 0, .25);
}

.opp-card__icon img {
    width: 50%;
    height: 50%;
    object-fit: contain;
}

.opp-card__text {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.3;
    color: rgba(0, 0, 0, 1);
}

@media (max-width: 991px) {
    .benefits-training { padding: var(--benefits-section-gap) 16px var(--benefits-section-gap); }
    .benefits-opp__body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .benefits-opp__media { margin-bottom: 0; }
    .benefits-opp__list { margin-left: 0; }
    /* max-width thay cho width cứng: dòng cũ ép đúng 420px nên máy hẹp hơn khoảng
       452px (420 + padding 16×2) là ảnh đẩy ngang ra ngoài, cuộn ngang cả trang.
       Trước đó hai dòng còn khai `width: 100%` rồi bị chính dòng này ghi đè. */
    .benefits-opp__media img { width: 100%; max-width: 420px; height: auto; }
    /* Căn giữa cả ảnh lẫn list cho khỏi lệch ở dải tablet */
    .benefits-opp__list { align-items: center; }
    .opp-card { margin-left: 0; }
}

@media (max-width: 560px) {
    .benefits-opp__title { gap: 10px; }
    .opp-card { gap: 12px; min-height: 58px; padding-right: 18px; }
    .opp-card__icon { width: 56px; height: 56px; font-size: 18px; }
}

/* --------------------------------------------------------------------------
   SECTION 4 — Thu nhập và đãi ngộ
   Dựng theo `benefits-comp` của careers Langmaster: ảnh trung tâm, các card đặt
   tuyệt đối quanh ảnh. Khác ở chỗ có 6 card (3 mỗi bên) thay vì 4, và vị trí
   từng card lấy từ biến --comp-top / --comp-offset thay vì class cứng lt/lm/rt/rm.
   -------------------------------------------------------------------------- */
.benefits-comp {
    padding: 0 20px var(--benefits-section-gap);
    font-family: var(--font-shell);
    background: #fff;
    overflow: hidden;
}

/* Bọc trong card giống khối "Đào tạo và phát triển" phía trên. Không có
   padding-bottom để nhân vật đứng chạm đáy card. */
.benefits-comp__inner {
    width: 100%;
    max-width: 1293px;
    margin-inline: auto;
    padding: 32px clamp(20px, 3vw, 48px) 0;
    border-radius: 24px;
    background: rgba(249, 249, 249, .92);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    overflow: hidden;
}

.benefits-comp__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 1);
}

.benefits-comp__arrow {
    flex: 0 0 auto;
    width: auto;
    height: .58em;
}

/* Khung chứa: ảnh giữa + 6 card đặt quanh.
   6 card đặt tuyệt đối nên không đóng góp chiều cao; min-height chỉ cần đủ chứa
   hàng card cuối (218px + 72px chiều cao) cho trường hợp chưa có ảnh nhân vật.
   Để cao hơn thì khung thừa ra một dải trống dưới ảnh và ảnh không chạm đáy card. */
.benefits-comp__stage {
    position: relative;
    min-height: calc(290 * 1vw / 19.2);
    margin-top: 16px;
}

.benefits-comp__visual {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1028px;
    /* Đẩy xuống 415px (bản 1920) để đỉnh đầu nhân vật nằm DƯỚI hàng card thứ 3;
       ảnh 1028x639 có sẵn khoảng trống chứa cung nét đứt ở 35% phía trên.
       Dùng padding chứ không dùng margin-top: margin của con đầu tiên sẽ bị "gộp"
       ra ngoài và đẩy tụt cả khung xuống, kéo theo 6 card đặt tuyệt đối. */
    padding-top: calc(105 * 1vw / 19.2);
    margin: 0 auto;
}

.benefits-comp__visual img {
    display: block;
    width: 100%;
    height: auto;
}

.comp-card {
    position: absolute;
    z-index: 2;
    top: calc(var(--comp-top) * 1vw / 19.2);
    display: flex;
    align-items: center;
    gap: 14px;
    width: 423px;
    max-width: 40%;
    min-height: 72px;
    border-radius: 68px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 1px 6px 0 rgba(219, 31, 31, .24);
}

/* Card trái: icon nằm bên phải (hướng vào giữa), chữ canh phải */
.comp-card--left {
    left: var(--comp-offset);
    flex-direction: row-reverse;
    padding-left: 22px;
    text-align: right;
}

/* Card phải: icon bên trái, chữ canh trái */
.comp-card--right {
    right: var(--comp-offset);
    padding-right: 22px;
    text-align: left;
}

.comp-card__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 1);
    background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    color: rgba(255, 255, 255, 1);
    font-size: 24px;
    box-shadow: 0 2px 7.2px 0 rgba(0, 0, 0, .25);
}

.comp-card__icon img {
    width: 50%;
    height: 50%;
    object-fit: contain;
}

.comp-card__text {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.35;
    color: rgba(0, 0, 0, 1);
}

@media (max-width: 991px) {
    .benefits-comp { padding: 0 16px var(--benefits-section-gap); }
    .benefits-comp__inner { padding: 24px 16px 0; }
    /* Màn hẹp: bỏ đặt tuyệt đối, xếp dọc ảnh trên - card dưới */
    .benefits-comp__stage {
        display: flex;
        flex-direction: column;
        gap: var(--benefits-card-gap);
        max-width: 560px;
        min-height: 0;
        margin-inline: auto;
    }
    .benefits-comp__visual { order: -1; max-width: none; padding-top: 0; margin: 24px 0 8px; }
    .comp-card,
    .comp-card--left,
    .comp-card--right {
        position: static;
        width: 100%;
        max-width: none;
        flex-direction: row;
        padding: 0 18px 0 0;
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   SECTION 5 — Văn hóa và work-life
   Card trắng, 6 viên thuốc nền đỏ xếp lưới 2 cột.
   -------------------------------------------------------------------------- */
.benefits-culture {
    padding: 0 20px var(--benefits-section-gap);
    font-family: var(--font-shell);
    background: #fff;
}

.benefits-culture__inner {
    width: 100%;
    max-width: 1293px;
    margin-inline: auto;
    padding: 32px clamp(20px, 3vw, 48px) 40px;
    border-radius: 24px;
    background: rgba(249, 249, 249, .92);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
}

.benefits-culture__title,
.benefits-path__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0 0 28px;
    font-size: var(--fs-h3);
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 1);
}

.benefits-culture__arrow,
.benefits-path__arrow {
    flex: 0 0 auto;
    width: auto;
    height: .58em;
}

.culture-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    gap: var(--benefits-card-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cỡ viên thuốc theo bản design: 547x69 */
.culture-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 547px;
    max-width: 100%;
    height: 69px;
    padding: 10px 28px;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    color: rgba(255, 255, 255, 1);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 2px 7.2px 0 rgba(0, 0, 0, .25);
}

/* --------------------------------------------------------------------------
   SECTION 6 — Lộ trình và thăng tiến
   Card trắng, danh sách viên thuốc trắng có huy hiệu tick đỏ bên trái, ảnh
   nhân vật bên phải đứng chạm đáy card.
   -------------------------------------------------------------------------- */
.benefits-path {
    padding: 0 20px var(--benefits-section-gap);
    font-family: var(--font-shell);
    background: #fff;
}

.benefits-path__inner {
    width: 100%;
    max-width: 1293px;
    margin-inline: auto;
    /* Không padding-bottom để ảnh nhân vật chạm đáy card */
    padding: 32px clamp(20px, 3vw, 48px) 0;
    border-radius: 24px;
    background: rgba(249, 249, 249, .92);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    overflow: hidden;
}

.benefits-path__body {
    display: grid;
    /* Cột ảnh khoá cứng theo cỡ bản design 794x529; cột danh sách minmax(0,…)
       để nó co được, nếu không viên thuốc dài sẽ bóp cột ảnh nhỏ lại. */
    grid-template-columns: minmax(0, 1fr) 794px;
    align-items: end;
    gap: 0;
}

.benefits-path__body--no-photo {
    grid-template-columns: minmax(0, 1fr);
}

/* Kéo danh sách lấn sang phải để viên thuốc nằm đè lên mép ảnh; z-index để chúng
   vẽ trên ảnh. Số px theo bản design 1920 rồi quy ra vw. */
.path-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--benefits-card-gap);
    margin: 0 calc(-130 * 1vw / 19.2) 40px 0;
    padding: 0;
    list-style: none;
}

.path-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    max-width: 100%;
    min-height: 56px;
    padding: 8px 24px 8px 0;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 1px 6px 0 rgba(219, 31, 31, .24);
    /* So le nhẹ theo bản design; px ở bản 1920 quy ra vw */
    margin-left: calc(var(--path-indent, 0) * 1vw / 19.2);
}

.path-item__check {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 1);
    background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    box-shadow: 0 2px 7.2px 0 rgba(0, 0, 0, .25);
}

.path-item__text {
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.3;
    color: rgba(0, 0, 0, 1);
}

/* Đẩy ảnh sát mép phải card: kéo ra đúng bằng padding-inline của card */
.benefits-path__media {
    justify-self: end;
    margin-right: calc(clamp(20px, 3vw, 48px) * -1);
}

.benefits-path__media img {
    display: block;
    /* Cỡ ảnh bản design: 794x529 */
    width: 794px;
    max-width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    /* Màn hẹp thu nhịp lại cho đỡ rời rạc, nhưng vẫn một mức chung cho mọi cụm.
       Cụm thu nhập & đãi ngộ chuyển sang xếp dọc ở breakpoint riêng nên không
       còn bị ràng buộc bởi cung nét đứt, sửa ở đây là an toàn. */
    :root { --benefits-card-gap: 18px; --benefits-section-gap: 40px; }

    .benefits-culture { padding: 0 16px var(--benefits-section-gap); }
    .benefits-culture__inner { padding: 24px 16px 28px; }
    .culture-grid { grid-template-columns: minmax(0, 1fr); }
    .benefits-path { padding: 0 16px var(--benefits-section-gap); }
    .benefits-path__inner { padding: 24px 16px 0; }
    .benefits-path__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .path-list { margin-right: 0; }
    .benefits-path__media { justify-self: center; margin-right: 0; }
    .path-item { margin-left: 0; }
    .path-list { margin-bottom: 8px; }
    .benefits-path__media { max-width: 420px; margin-inline: auto; }
    /* Đẩy ảnh sát mép phải card: kéo ra đúng bằng padding-inline của card */
.benefits-path__media {
    justify-self: end;
    margin-right: calc(clamp(20px, 3vw, 48px) * -1);
}

.benefits-path__media img { width: 100%; }
}

/* --------------------------------------------------------------------------
   TABLET / LAPTOP NHỎ — dải 992–1200px

   Dải này trước đây KHÔNG có breakpoint nào, trong khi hai khối hai cột lại khoá
   cứng một cột bằng px. Tính ở bề ngang 992px:

     .benefits-path__body  = minmax(0,1fr) + 794px  ->  cột chữ còn ~98px
     .benefits-opp__body   = 602px + minmax(0,1fr)  ->  cột card còn ~350px

   Cột 98px thì mỗi dòng chữ vỡ thành vài ký tự — hỏng hẳn.

   Chuyển sang tỉ lệ `fr` lấy đúng theo bản thiết kế (403:794 ≈ 1:2 và 602:691 ≈
   0.9:1) nên dáng giữ nguyên mà co giãn được. Ảnh trong cột cũng phải bỏ bề ngang
   cứng, nếu không nó tràn ra khỏi cột vừa thu nhỏ.

   Dùng dạng khoảng (min-width 992) thay vì chỉ max-width: khối này nằm cuối file,
   nếu chỉ đặt max-width: 1200px nó sẽ đè luôn lên các ghi đè ở 991px phía trên và
   phá bố cục một cột của điện thoại.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1200px) {
    .benefits-opp__body {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    }

    .benefits-opp__media img {
        width: 100%;
        height: auto;
    }

    .benefits-path__body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .benefits-path__media img {
        width: 100%;
        height: auto;
    }
}