/* ==========================================================================
   LangGo Careers — Trang "Về chúng tôi"
   Dùng lại biến :root, thang chữ (--fs-*) và font Reddit Sans khai trong shell.css.
   ========================================================================== */

.about-banner,
.about-intro {
    font-family: var(--font-shell);
    color: rgba(0, 0, 0, 1);
}

:root {
    /* Ảnh nền section "Lịch sử hình thành" tràn xuống đè lên section kế dưới bao
       nhiêu px. Section dưới cộng đúng ngần này vào padding-top để chữ không bị che. */
    --history-bleed: 120px;
}

/* --------------------------------------------------------------------------
   SECTION 1 — Banner
   Ảnh nền toàn khổ, 2 dòng chữ nằm đè ở phần trên.
   -------------------------------------------------------------------------- */
.about-banner {
    position: relative;
    display: flex;
    justify-content: center;
    /* Tỉ lệ bản design (1920x845). Chưa có ảnh thì vẫn giữ khối cao vừa phải
       và rơi về nền đỏ để 2 dòng chữ trắng luôn đọc được. */
    aspect-ratio: 1920 / 845;
    min-height: 260px;
    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) */
.about-banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

/* Đặt tuyệt đối chứ không dùng padding-top: % — padding theo % tính trên CHIỀU
   NGANG của khối cha, nên trên màn rộng chữ bị đẩy tụt xuống giữa banner.
   `top` theo % thì tính trên chiều cao, đúng cái mình cần. */
.about-banner__inner {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 100%;
    max-width: 1293px;
    padding-inline: 20px;
    text-align: center;
}

.about-banner__title {
    margin: 0 0 6px;
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
}

.about-banner__sub {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
}

/* Vế nhấn màu vàng ở cuối dòng 2 */
.about-banner__sub span {
    color: #FDDA35;
}

@media (max-width: 600px) {
    .about-banner { aspect-ratio: 4 / 3; }
    .about-banner__inner { top: 7%; }
}

/* --------------------------------------------------------------------------
   SECTION 2 — Giới thiệu + số liệu + sứ mệnh/tầm nhìn
   Nền là hoạ tiết mạng lưới xanh nhạt, dùng thẻ <img> thật (không background-image).
   -------------------------------------------------------------------------- */
.about-intro {
    position: relative;
    padding: 56px 20px 88px;
    background: #fff;
    overflow: hidden;
}

/* Hoạ tiết chỉ nằm ở CHÂN section: neo đáy, giữ nguyên tỉ lệ ảnh (không kéo giãn),
   phần thừa phía trên bị section cắt bằng overflow: hidden. */
.about-intro__bg {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

.about-intro__bg img {
    display: block;
    width: 100%;
    height: auto;
}

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

.about-intro__eyebrow {
    margin: 0 0 6px;
    font-size: var(--fs-h3);
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 1);
}

.about-intro__title {
    margin: 0 0 40px;
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    color: rgba(199, 7, 7, 1);
}

/* ---------- Card giới thiệu: ảnh trái · chữ phải ---------- */
.about-intro__card {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    padding: 24px 40px 24px 24px;
    border-radius: 17px;
    background: rgba(249, 249, 249, 1);
    box-shadow: 3px 4px 19.3px 0 rgba(0, 0, 0, .25);
}

/* Chưa có ảnh thì phần chữ chiếm trọn card */
.about-intro__card--no-photo {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px 40px;
}

/* Ảnh người đứng chạm đáy card: kéo tụt đúng bằng padding-bottom của card để
   mép dưới ảnh trùng mép dưới card, không để hở một dải nền xám. */
.about-intro__media {
    align-self: end;
    margin-bottom: -24px;
}

.about-intro__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.about-intro__text p {
    margin: 0;
    /* Cùng cỡ và cùng màu với .about-team__points — hai khối chữ nội dung chính
       của trang, lớn hơn một nấc so với câu dẫn (--fs-lead). */
    font-size: var(--fs-h3);
    font-weight: 500;
    line-height: 1.65;
    color: rgba(0, 0, 0, 1);
}

/* ---------- Sứ mệnh · Tầm nhìn ---------- */
.about-pillars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    max-width: 1210px;
    margin: 72px auto 0;
}

.about-pillar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 260px ở bản design 1920; co theo màn hình để card không rỗng ruột ở 1440 */
    min-height: clamp(150px, 13.5vw, 260px);
    padding: 28px 40px;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .18);
}

.about-pillar__title {
    margin: 0 0 16px;
    font-size: var(--fs-h3);
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    color: rgba(199, 7, 7, 1);
}

.about-pillar__text {
    margin: 0;
    font-size: var(--fs-lead);
    font-weight: 500;
    line-height: 1.5;
    color: rgba(199, 7, 7, 1);
}

@media (max-width: 991px) {
    .about-intro { padding: 40px 16px 56px; }
    .about-intro__title { margin-bottom: 28px; }
    .about-intro__card { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; }
    .about-intro__media { margin-bottom: -20px; }
    .about-pillars { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 44px; }
    .about-pillar { min-height: 0; padding: 24px 20px; }
}


/* --------------------------------------------------------------------------
   SECTION 3 — Lịch sử hình thành và phát triển
   Nền đỏ, 2 hàng mốc thời gian; hàng dưới lệch phải nửa cột đúng bản design.
   -------------------------------------------------------------------------- */
.about-history {
    position: relative;
    /* Nổi lên trên section kế dưới để phần ảnh nền tràn xuống không bị nền trắng
       của section đó phủ mất. */
    z-index: 1;
    padding: 64px 20px 72px;
    font-family: var(--font-shell);
}

/* Ảnh nền dùng thẻ <img> thật (không dùng background-image) */
/* Tràn xuống dưới đáy section đúng --history-bleed.
   Ảnh (1920x862) hiện NGUYÊN TỈ LỆ, rộng hết khổ và neo mép dưới nên đường cong
   trắng ở đáy ảnh luôn nằm đúng chỗ tràn — không dùng object-fit: cover vì cover
   phóng ảnh lên cho vừa chiều cao rồi cắt mất hai bên. */
.about-history__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: calc(var(--history-bleed) * -1);
    left: 0;
    z-index: 0;
    pointer-events: none;
}

.about-history__bg img {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
}

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

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

.about-history__sub {
    max-width: 820px;
    margin: 0 auto;
    font-size: var(--fs-lead);
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: rgba(255, 255, 255, 1);
}

.about-history__rows {
    /* Kích thước viên thuốc quyết định luôn vị trí gạch nối và chấm vàng,
       nên gom vào biến để 3 chỗ không lệch nhau khi đổi cỡ. */
    --history-pill-w: clamp(110px, 8.8vw, 170px);
    --history-pill-h: clamp(38px, 2.9vw, 56px);

    margin-top: 56px;
}

.history-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.history-row + .history-row {
    margin-top: 40px;
}

/* Hàng 2 lệch phải nửa cột (25% / 2) */
.history-row--offset {
    transform: translateX(12.5%);
}

.history-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: 4px;
}

.history-step__time {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-width: var(--history-pill-w);
    height: var(--history-pill-h);
    padding-inline: 20px;
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1;
    color: rgba(199, 7, 7, 1);
    box-shadow: 0 3px 10px rgba(87, 0, 0, .28);
}

.history-step__text {
    margin: 14px 0 0;
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, 1);
}

/* Gạch đứt nối sang mốc kế tiếp — canh đúng giữa viên thuốc */
.history-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--history-pill-h) / 2);
    left: calc(50% + var(--history-pill-w) / 2 + 10px);
    width: calc(100% - var(--history-pill-w) - 20px);
    border-top: 2px dashed rgba(255, 255, 255, .8);
}

/* Chấm vàng giữa đường nối, mũi tên chỉ sang mốc kế tiếp */
.history-step:not(:last-child)::before {
    content: "\f054"; /* chevron-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    color: rgba(219, 31, 31, 1);
    position: absolute;
    top: calc(var(--history-pill-h) / 2 - 13px);
    left: 100%;
    transform: translateX(-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(180deg, #FDDA35 0%, #FE9C2B 100%);
    box-shadow: 0 2px 6px rgba(87, 0, 0, .3);
}

@media (max-width: 991px) {
    /* Ảnh nền (1920x862, neo mép dưới, giữ nguyên tỉ lệ) co về bề ngang mobile
       thì chỉ còn cao ~175px ở đáy — phần trên section mất nền đỏ và chữ trắng
       biến mất. Thay bằng đúng gradient đỏ .about-values của careers.langmaster. */
    .about-history__bg { display: none; }

    .about-history {
        padding: 44px 16px 56px;
        background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    }

    /* Không còn ảnh tràn xuống nên section kế dưới bỏ luôn phần padding bù */
    .about-values { --history-bleed: 0px; }

    .about-history__rows { margin-top: 36px; }
    .history-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
    /* Xếp 2 cột thì gạch nối ngang và chấm vàng không còn đúng chỗ */
    .history-row--offset { transform: none; }
    .history-row + .history-row { margin-top: 32px; }
    .history-step:not(:last-child)::after,
    .history-step:not(:last-child)::before { display: none; }
}

/* --------------------------------------------------------------------------
   MOBILE (<=600px) — mốc lịch sử thành TIMELINE DỌC kiểu .roadmap-track
   (homepage.css @600px): viên thuốc năm đóng vai icon ở cột trái, mô tả bên
   phải, nối nhau bằng gạch đứt DỌC + chevron vàng chỉ xuống.

   Đoạn nối tính theo chiều cao THẬT của từng mốc (height: calc(100% - ...))
   chứ không phải một con số cố định — mô tả dài ngắn khác nhau nên số cố định
   là lệch ngay.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .about-history__rows {
        --history-pill-w: 96px;
        --history-pill-h: 34px;
        /* Khoảng hở giữa 2 mốc, dùng cả cho chiều dài đoạn nối */
        --history-gap: 26px;

        max-width: 480px;
        margin-inline: auto;
    }

    .history-row { grid-template-columns: minmax(0, 1fr); gap: var(--history-gap); }
    .history-row + .history-row { margin-top: var(--history-gap); }

    .history-step {
        display: grid;
        grid-template-columns: var(--history-pill-w) 1fr;
        align-items: start;
        column-gap: 16px;
        padding: 0;
        text-align: left;
    }

    .history-step__time {
        width: var(--history-pill-w);
        min-width: 0;
        font-size: 15px;
    }

    .history-step__text {
        margin: 0;
        padding-top: 6px;
        font-size: 15px;
        line-height: 1.5;
    }

    /* Gạch đứt DỌC chạy từ đáy viên thuốc xuống viên thuốc kế tiếp.
       Đặt trên mọi mốc rồi tắt ở mốc cuối cùng, vì :not(:last-child) chỉ xét
       trong từng .history-row nên chỗ nối giữa 2 hàng sẽ bị hụt. */
    .about-history .history-step::after {
        content: "";
        display: block;
        position: absolute;
        top: var(--history-pill-h);
        left: calc(var(--history-pill-w) / 2);
        width: 0;
        height: calc(100% - var(--history-pill-h) + var(--history-gap));
        border-top: 0;
        border-left: 2px dashed rgba(255, 255, 255, .8);
    }

    /* Chevron vàng nằm giữa khoảng hở, chỉ xuống mốc kế tiếp */
    .about-history .history-step::before {
        content: "078"; /* chevron-down */
        display: grid;
        top: calc(100% + var(--history-gap) / 2);
        left: calc(var(--history-pill-w) / 2);
        transform: translate(-50%, -50%);
        width: 24px;
        height: 24px;
        font-size: 10px;
    }

    .about-history .history-row:last-child .history-step:last-child::after,
    .about-history .history-row:last-child .history-step:last-child::before {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   SECTION 4 — 6 giá trị cốt lõi
   Bê nguyên cấu trúc about-values__grid của careers Langmaster: chữ trái ·
   ảnh vòng tròn giữa · chữ phải. Ảnh `value-ring.png` đã vẽ sẵn 6 ô tròn,
   mũi nhọn và chấm trên đường nét đứt, nên 6 icon chỉ việc đặt vào đúng ô.
   -------------------------------------------------------------------------- */
.about-values {
    font-family: var(--font-shell);
    /* Cộng thêm phần ảnh nền section trên tràn xuống, nếu không chữ bị che */
    padding: calc(64px + var(--history-bleed)) 20px 76px;
    background: #fff;
    color: rgba(0, 0, 0, 1);
    overflow: hidden;
}

.about-values__inner {
    width: 100%;
    max-width: 1293px;
    margin-inline: auto;
}

.about-values__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(12px, 1.6vw, 30px);
}

.about-values__col {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(30px, 4.4vw, 72px);
}

/* ---------- Vòng tròn giữa ---------- */
.about-values__center {
    position: relative;
    width: clamp(300px, 40vw, 574px);
}

.about-values__ring {
    display: block;
    width: 100%;
    height: auto;
}

/* Lõi xám chứa số 6 + chữ "Giá trị cốt lõi" */
.about-values__core {
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 48%;
    aspect-ratio: 1;
    margin: 0;
    border-radius: 50%;
    background: #F2F0F0;
    text-align: center;
}

.about-values__num {
    font-size: clamp(38px, 4.2vw, 80px);
    font-weight: 800;
    line-height: 1;
    color: rgba(199, 7, 7, 1);
}

.about-values__label {
    font-size: var(--fs-h3);
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 1);
}

/* 6 icon đặt vào đúng tâm 6 ô tròn đã vẽ sẵn trên ảnh ring */
.about-values__icon {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 7.5%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    color: rgba(199, 7, 7, 1);
    font-size: clamp(14px, 1.7vw, 26px);
}

.about-values__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.about-values__icon--1 { top: 11.5%; left: 18.5%; }
.about-values__icon--2 { top: 48.5%; left: 8.5%; }
.about-values__icon--3 { top: 84.5%; left: 18.5%; }
.about-values__icon--4 { top: 11.5%; left: 81.5%; }
.about-values__icon--5 { top: 48.5%; left: 91.5%; }
.about-values__icon--6 { top: 84.5%; left: 82%; }

/* ---------- Khối chữ 2 bên ---------- */
.value {
    padding-bottom: 12px;
    border-bottom: 1.5px dashed rgba(37, 37, 37, .45);
}

.value__name {
    margin: 0 0 8px;
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: 1.3;
    color: rgba(199, 7, 7, 1);
}

.value__desc {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.55;
    color: rgba(0, 0, 0, 1);
}

/* Mục trên & dưới thụt vào để 3 khối uốn theo đường cong của vòng tròn */
.about-values__col--left .value:first-child,
.about-values__col--left .value:last-child {
    transform: translateX(clamp(14px, 2.4vw, 46px));
}

.about-values__col--right .value:first-child,
.about-values__col--right .value:last-child {
    transform: translateX(clamp(-46px, -2.4vw, -14px));
}

@media (max-width: 991px) {
    .about-values { padding: calc(48px + var(--history-bleed)) 16px 56px; }
    .about-values__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        max-width: 560px;
        margin-inline: auto;
        justify-items: center;
    }
    .about-values__col { gap: 26px; width: 100%; }
    .about-values__center { order: -1; width: clamp(280px, 80vw, 460px); }
    /* Bỏ độ lệch uốn theo vòng tròn (chỉ có nghĩa khi xếp 3 cột) */
    .about-values__col--left .value:first-child,
    .about-values__col--left .value:last-child,
    .about-values__col--right .value:first-child,
    .about-values__col--right .value:last-child {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   SECTION 5 — Đội ngũ giảng viên và nhân sự
   Trái là danh sách gạch đầu dòng, phải là collage 6 ảnh xếp theo lưới 4x3.
   -------------------------------------------------------------------------- */
.about-team {
    position: relative;
    padding: 56px 20px 72px;
    font-family: var(--font-shell);
    background: #fff;
    color: rgba(0, 0, 0, 1);
    overflow: hidden;
}

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

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

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

.about-team__title {
    margin: 0 0 40px;
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    color: rgba(199, 7, 7, 1);
}

.about-team__body {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 3.4vw, 64px);
}

/* ---------- Danh sách gạch đầu dòng ---------- */
.about-team__points {
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-team__points li {
    position: relative;
    padding-left: 24px;
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: 1.5;
    color: rgba(0, 0, 0, 1);
}

.about-team__points li + li {
    margin-top: 14px;
}

/* Dấu chấm tự vẽ để dòng thứ 2 thụt đều theo dòng đầu */
.about-team__points li::before {
    content: "";
    position: absolute;
    top: .62em;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 1);
}

/* ---------- Ảnh ghép đội ngũ ---------- */
.about-team__collage img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    .about-team { padding: 40px 16px 56px; }
    .about-team__title { margin-bottom: 28px; }
    .about-team__body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 600px) {
    /* Tiêu đề có sẵn <br> chia 2 vế, nhưng --fs-h2 (23px ở màn hẹp) làm mỗi vế
       lại tự xuống dòng thành 4 dòng lệch nhau. Khoá cỡ chữ theo bề ngang màn
       hình (4.7vw ≈ đủ chỗ cho vế dài nhất, 30 ký tự in hoa) để đúng 2 dòng. */
    .about-team__title {
        font-size: clamp(15px, 4.7vw, 26px);
        line-height: 1.3;
    }
}

/* --------------------------------------------------------------------------
   SECTION 6 — Chứng nhận từ các tổ chức uy tín
   Khung (nền 2 lớp, lưới, card) bê nguyên .why-section ở trang chủ — xem why.css.
   Ở đây chỉ còn phần riêng: card chứa ảnh và mảng trắng bo cong phía dưới.
   -------------------------------------------------------------------------- */

/* Ảnh top chỉ chiếm nửa trên khung nền. Bên trang chủ là `flex: 1 1 50%` —
   flex-grow 1 vô hại khi có ảnh bottom chia phần, nhưng còn một mình thì nó nở
   chiếm trọn 100% và ảnh bị phóng kéo ra cả section. Khoá `flex: 0 0 50%`. */
.about-cert .why-bg__top {
    flex: 0 0 50%;
}

/* 3 card 417px + 2 khe 24px = 1299px, rộng hơn max-width 1293 của .why-inner nên
   card thứ 3 bị đẩy xuống hàng dưới — nới khung riêng cho section này. */
.about-cert .why-inner {
    max-width: 1320px;
}

/* Ô ảnh 417x417: chỉ mượn cách xếp hàng của .why-card, còn phần trang trí của
   card (nền trắng, bo góc, đổ bóng, hiệu ứng hover, chỗ chừa cho huy hiệu icon)
   đều gỡ hết — ở đây chỉ có mỗi tấm ảnh.
   Nhân đôi class để thắng độ ưu tiên: why.css nạp SAU about.css nên nếu chỉ dùng
   .why-card--photo thì các thuộc tính của .why-card vẫn đè lên. */
.why-card.why-card--photo {
    flex: 0 0 417px;
    width: 417px;
    height: 417px;
    min-height: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    transition: none;
    overflow: hidden;
}

.why-card.why-card--photo:hover {
    transform: none;
    box-shadow: none;
}

.why-card--photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Khối chứa logo đối tác · ghi chú · nút vàng, nằm ngay dưới 3 ảnh chứng nhận.
   Không có nền và không bo góc — chỉ là một khối trong suốt. */
.about-cert__panel {
    position: relative;
    z-index: 1;
    margin-top: 20px;
    padding: 60px 20px 44px;
}

.about-cert__panel-inner {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    text-align: center;
}

/* ---------- Logo đối tác ---------- */
.about-cert__partners {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(24px, 3vw, 56px);
}

.about-cert__partners img {
    display: block;
    width: auto;
    height: 110px;
    object-fit: contain;
}

.about-cert__note {
    max-width: 1125px;
    margin: 24px auto 0;
    font-family: var(--font-shell);
    /* Về đúng thang chữ chung của site: --fs-lead là cỡ dành cho câu dẫn/ghi chú
       (1920: 24px, 1440: 18px). Đặt cứng 36px thì dòng này gần bằng tiêu đề
       section (--fs-h2) nên nhìn nặng hơn hẳn phần còn lại của trang. */
    font-size: var(--fs-lead);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
    color: rgba(0, 0, 0, 1);
}

/* ---------- Nút vàng ---------- */
/* Cùng khuôn với nút vàng .about-ready__btn--gold ở khối CTA cuối trang */
.about-cert__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 26px;
    padding: 12px 32px;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #FDDA35 36.06%, #FE9C2B 100%);
    border: 3px solid rgba(255, 255, 255, 1);
    color: rgba(219, 31, 31, 1);
    font-size: var(--fs-body);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    transition: transform .2s var(--ease);
}

.about-cert__cta:hover {
    transform: translateY(-2px);
    color: rgba(219, 31, 31, 1);
}

@media (max-width: 991px) {
    .about-cert__panel { margin-top: 36px; padding: 36px 16px 32px; }
}

/* --------------------------------------------------------------------------
   SECTION 7 — Tự hào về con người IELTS LangGo
   Bê từ careers Langmaster: card "con người" + khối video khung màn hình kèm
   playlist. Khác ở chỗ playlist hỗ trợ cả YouTube lẫn mp4 (CMS đang lưu mp4/S3).
   -------------------------------------------------------------------------- */
.proud {
    position: relative;
    padding: 56px 20px 72px;
    font-family: var(--font-shell);
}

.proud__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

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

.proud__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 0 48px;
    font-size: var(--fs-h2);
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    color: rgba(219, 31, 31, 1);
}

.proud__arrow {
    flex: 0 0 auto;
    width: auto;
    height: .6em;
}

/* ---------- Card "con người" ---------- */
.proud-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    isolation: isolate;
}

.proud-card {
    position: relative;
    margin-top: 44px;
    padding: 56px 28px 28px;
    border-radius: 18px;
    background: #fff;
    text-align: center;
    color: #41464f;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

.proud-card__avatar {
    position: absolute;
    top: -44px;
    left: 50%;
    width: 88px;
    height: 88px;
    margin-left: -44px;
    border-radius: 50%;
}

/* Vòng gradient nền — nửa dưới chui sau card (z-index âm), ảnh vẫn nổi phía trên */
.proud-card__avatar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: linear-gradient(180deg, #FDDA35 0%, #FE9C2B 100%);
}

.proud-card__avatar img {
    position: relative;
    display: block;
    width: 82px;
    height: 82px;
    margin: 3px;
    border-radius: 50%;
    object-fit: cover;
}

.proud-card__name {
    margin: 0 0 6px;
    font-size: var(--fs-body);
    font-weight: 800;
    color: var(--brand);
}

.proud-card__role {
    margin: 0 0 14px;
    font-size: var(--fs-small);
    font-style: italic;
    color: #8a8f98;
}

/* Hình quote — góc trái, đè giữa cạnh trên của card */
.proud-card__quotemark {
    position: absolute;
    top: 0;
    left: 24px;
    width: 30px;
    height: auto;
    transform: translateY(-50%);
}

.proud-card__quote {
    margin: 0;
    font-size: var(--fs-small);
    line-height: 1.6;
}

/* ---------- Video khung màn hình + playlist ---------- */
.proud-video {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 470px;
    align-items: start;
    gap: 24px;
    margin-top: 64px;
}

.proud-video__player {
    position: relative;
    /* Thu nhỏ khung màn hình lại, canh giữa trong cột của nó */
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    /* vùng màn hình đen của monitor.png (giống khối video ở trang chủ) */
    --vt: 3%;
    --vl: 9%;
    --vw: 82%;
    --vh: 61%;
}

.proud-video__frame {
    display: block;
    width: 100%;
    height: auto;
}

.proud-video__screen {
    position: absolute;
    top: var(--vt);
    left: var(--vl);
    width: var(--vw);
    height: var(--vh);
    background: #000;
    overflow: hidden;
}

.proud-video__screen iframe,
.proud-video__screen video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.proud-video__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 520px;
    padding: 6px 12px 6px 6px; /* chừa chỗ cho viền active + thanh cuộn */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--brand) #eee;
}

.proud-video__list::-webkit-scrollbar { width: 8px; }
.proud-video__list::-webkit-scrollbar-track { background: #eee; border-radius: 4px; }
.proud-video__list::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 4px; }

.proud-video__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
    transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}

.proud-video__item:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
}

.proud-video__item.is-active {
    outline: 2px solid var(--brand);
}

.proud-video__thumb {
    flex: 0 0 auto;
    width: 112px;
    aspect-ratio: 16 / 10;
    border-radius: 7px;
    object-fit: cover;
}

/* Video mp4 chưa có ảnh đại diện trong CMS */
.proud-video__thumb--blank {
    display: grid;
    place-items: center;
    background: #f0f0f0;
    color: var(--brand);
    font-size: 20px;
}

.proud-video__caption {
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.35;
    color: rgba(0, 0, 0, 1);
}

@media (max-width: 991px) {
    .proud { padding: 40px 16px 56px; }
    .proud__bg { display: none; }
    .proud__eyebrow { margin-bottom: 32px; }
    .proud-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 460px; margin-inline: auto; }
    .proud-video { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
    .proud-video__list { max-height: 420px; }
}

/* --------------------------------------------------------------------------
   SECTION 8 — Quy trình tuyển dụng (partial dùng chung với trang chủ)
   Ở trang này section không có ảnh nền đỏ, nên chữ trắng của bản trang chủ phải
   đổi sang đỏ/đen mới đọc được. Chỉ áp qua modifier, trang chủ không đụng tới.
   -------------------------------------------------------------------------- */
.process-section--on-white .process-heading,
.process-section--on-white .process-step__pill {
    color: rgba(226, 0, 0, 1);
}

.process-section--on-white .process-step__caption,
.process-section--on-white .process-commit p {
    color: rgba(0, 0, 0, 1);
}

.process-section--on-white .process-commit p {
    font-size: 28px;
}

/* Đường nối giữa các bước: đổi từ gạch đứt trắng sang vạch liền 4px tô gradient
   mờ dần ở hai đầu. Bắt buộc có border-image-slice: 1, thiếu nó thì trình duyệt
   bỏ qua border-image và vạch không hiện. */
.process-section--on-white .process-step:not(:last-child)::after {
    border-top: 4px solid;
    border-image-source: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 50%, rgba(0, 0, 0, 0) 100%);
    border-image-slice: 1;
}

/* Trên mobile (<=767px) cụm 4 bước đổi sang timeline dọc và đường nối chuyển
   thành MỘT gạch đứt liền mạch vẽ bằng .process-steps::before — rule ngay trên
   nhắm .process-step::after nên không còn tác dụng, và gạch trắng mặc định thì
   vô hình trên nền trắng của trang này. Đổi sang gạch đứt đen mờ. */
@media (max-width: 767px) {
    .process-section--on-white .process-steps::before {
        border-left-color: rgba(0, 0, 0, .45);
    }

}

/* Khối CTA ngay dưới có ảnh nền trồi lên 120px (--ready-bg-rise) và đè lên đây,
   nên chừa thêm đúng ngần ấy để dòng cam kết không bị nuốt mất. */
.process-section--on-white .process-commit {
    padding-bottom: calc(26px + 120px);
}

/* Trên mobile khối CTA không còn trồi lên (--ready-bg-rise: 0, xem ready-cta.css)
   nên bỏ phần padding bù, không thì thừa ra một mảng trắng.
   Rule này BẮT BUỘC nằm sau rule ngay trên: hai selector cùng độ đặc hiệu
   (2 class), media query không cộng thêm điểm nào, nên thứ tự trong file mới là
   thứ quyết định — đặt trước là bị rule không-media ghi đè. */
@media (max-width: 767px) {
    .process-section--on-white .process-commit { padding-bottom: 26px; }
}

/* --------------------------------------------------------------------------
   Ô ảnh 417×417 trong lưới "Vì sao chọn LangGo" khoá cứng bằng
   `flex: 0 0 417px; width: 417px` nên KHÔNG co lại được. Máy hẹp hơn khoảng
   457px (417 + padding 20×2) là nó đẩy ngang ra ngoài khung, gây cuộn ngang cả
   trang. Cho phép co và giữ tỉ lệ vuông bằng aspect-ratio thay cho height cứng.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .why-card.why-card--photo {
        flex: 0 1 417px;
        width: 100%;
        max-width: 417px;
        height: auto;
        aspect-ratio: 1;
    }
}