/* ==========================================================================
   About page (Về chúng tôi) — dựng theo ảnh thiết kế
   Dùng chung :root + .shell từ shell.css
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Section 1: Banner                                                          */
/* -------------------------------------------------------------------------- */
.about-banner {
    width: 100%;
}

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

/* -------------------------------------------------------------------------- */
/* Section 2: Giới thiệu                                                       */
/* -------------------------------------------------------------------------- */
.about-intro {
    font-family: var(--font-shell);
    padding: 72px 0 0;
}

.about-intro__head {
    text-align: center;
    margin: 0 auto;
}

.about-intro__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0;
    font-size: clamp(24px, 5vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 1);
}

.about-intro__arrow {
    flex: 0 0 auto;
    height: .55em;
    width: auto;
}

.about-intro__title {
    margin: 2px 0 0;
    padding: .06em 0;
    font-size: clamp(20px, 3.1vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    text-transform: uppercase;
    background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.about-intro__sub {
    max-width: none;
    margin: 20px auto 0;
    font-size: clamp(16px, 2.4vw, 22px);
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    color: rgba(80, 80, 80, 1);
}

.about-intro__body {
    display: grid;
    grid-template-columns: 586px 1fr;
    align-items: center;
    gap: 56px;
    margin-top: 48px;
}

.about-intro__media img {
    display: block;
    width: 586px;
    max-width: 100%;
    height: auto;
}

.about-intro__text p {
    margin: 0 0 22px;
    font-size: clamp(16px, 2.4vw, 22px);
    font-weight: 400;
    line-height: 1.6;
    text-align: justify;
    color: rgba(80, 80, 80, 1);
}

.about-intro__text p:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
    .about-intro { padding: 56px 0 40px; }
    .about-intro__title { white-space: normal; }
    .about-intro__sub { white-space: normal; }
    .about-intro__body { grid-template-columns: 1fr; gap: 32px; }
    .about-intro__media { text-align: center; }
    .about-intro__media img { margin: 0 auto; }
}

@media (max-width: 560px) {
    .about-intro__eyebrow { gap: 10px; }
}

/* -------------------------------------------------------------------------- */
/* Section 3: Stats band (giống home stats-section)                           */
/* -------------------------------------------------------------------------- */
.stats-section {
    position: relative;
    z-index: 2;
}

.stats-section__bg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1784 / 454;
}

.stats {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px clamp(48px, 7vw, 120px);
    text-align: center;
}

.stat {
    flex: 0 0 auto;
    padding: 6px 4px;
}

.stat__num {
    font-family: "SVN-Gilroy", var(--font-shell);
    font-weight: 800;
    font-size: clamp(50px, 6.2vw, 86px);
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(180deg, #FDDA35 36.06%, #FE9C2B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.stat__label {
    margin-top: 10px;
    font-family: "SVN-Gilroy", var(--font-shell);
    font-weight: 500;
    font-size: clamp(15px, 1.6vw, 22px);
    line-height: 1.3;
    color: #fff;
}

@media (max-width: 600px) {
    .stats-section { background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%); }
    .stats-section__bg { display: none; }
    .stats { position: static; padding: 40px 16px; gap: 28px 0; }
    .stat { flex-basis: 45%; }
}

/* -------------------------------------------------------------------------- */
/* Section 4: Tầm nhìn & Sứ mệnh                                               */
/* -------------------------------------------------------------------------- */
.about-vm {
    position: relative;
    z-index: 1;
    margin-top: -7vw;
    font-family: var(--font-shell);
}

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

/* Cô gái cầm laptop (PNG nền trong) — ảnh gốc 1114x742, ~58% bề ngang nền */
.about-vm__person {
    position: absolute;
    right: 2%;
    bottom: 0;
    width: 58%;
    height: auto;
    z-index: 1;
}

/* 2 icon badge ~106x106 (5.52vw = 106/1920 để bám tỷ lệ nền) */
.about-vm__icon {
    position: absolute;
    z-index: 2;
    width: 5.52vw;
    height: auto;
}

.about-vm__icon--1 { top: 16%; right: 41%; }
.about-vm__icon--2 { top: 52%; right: 11%; }

.about-vm__cards {
    position: absolute;
    top: 50%;
    left: 16%;
    transform: translateY(-50%);
    /* z-index: auto để từng card tự xếp lớp so với person */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5em; /* 33px @ base 22px */
    /* base = cỡ mô tả 22px (= 1.146vw @ 1920), scale theo nền, chặn min/max */
    font-size: clamp(13px, 1.146vw, 22px);
}

.about-vm__card {
    position: relative;
    width: 28.68em; /* 631px @ base 22px */
    max-width: 100%;
    background: #fff;
    border-radius: 1.1em;
    padding: 1.1em 1.5em;
    box-shadow: 0 .9em 2.2em rgba(0, 0, 0, .14);
}

/* Card Tầm nhìn nằm TRÊN người; card Sứ mệnh thụt vào & người đè lên */
.about-vm__card--vision { z-index: 3; }
.about-vm__card--mission { z-index: 0; margin-left: 3em; }

.about-vm__title {
    margin: 0 0 .35em;
    font-size: 1.818em; /* 40px @ base 22px */
    line-height: 1.3;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.about-vm__text {
    margin: 0;
    font-size: 1em; /* 22px */
    font-weight: 400;
    line-height: 1.3;
    color: rgba(80, 80, 80, 1);
}

@media (max-width: 768px) {
    .about-vm { margin-top: 0; height: 250px; overflow: hidden; }
    .about-vm__bg { height: 100%; object-fit: cover; }
    /* Giữ bố cục như PC (nền + cô gái + 2 icon), chỉ co chữ card theo viewport */
    .about-vm__cards {
        left: 3%;
        gap: 1.2em;
        font-size: clamp(10px, 2vw, 22px);
    }
    /* line-height rộng hơn để dấu tiếng Việt (TẦM, NHÌN, SỨ MỆNH) không bị cắt */
    .about-vm__title { line-height: 1.2; padding-top: .1em; }
    /* Card ngắn chiều ngang lại để chừa chỗ cho ảnh to hơn */
    .about-vm__card { width: 18em; }
    .about-vm__card--mission { margin-left: 2.5em; }
    /* To ảnh người + icon lên, giữ bố cục 3 ảnh như PC */
    .about-vm__person { width: 85%; right: -18%; }
    .about-vm__icon { width: 8vw; }
    .about-vm__icon--1 { top: 25%; right: 32%; }
    .about-vm__icon--2 { right: 0%; }
}

/* -------------------------------------------------------------------------- */
/* Section 5: 6 Giá trị cốt lõi                                                */
/* -------------------------------------------------------------------------- */
.about-values {
    font-family: var(--font-shell);
    padding: 64px 0 76px;
    background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    color: #fff;
    overflow: hidden;
}

.about-values__title {
    margin: 0 0 40px;
    text-align: center;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
}

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

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

/* Center radial: ring là khung; vòng tròn "6" ở giữa, 6 icon đặt vào 6 ô của ring */
.about-values__center {
    position: relative;
    width: clamp(300px, 40vw, 574px);
}

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

.about-values__circle {
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #F2F0F0;
    text-align: center;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}

.about-values__num {
    font-size: clamp(50px, 6.3vw, 90px);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.about-values__label {
    margin-top: 2px;
    font-size: clamp(22px, 2.8vw, 40px);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 1);
}

/* 6 glyph icon đặt giữa 6 ô tròn của ring */
.about-values__icon {
    position: absolute;
    z-index: 2;
    width: 8%;
    height: auto;
    transform: translate(-50%, -50%);
}

.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%; }

/* Value text (cột ngoài) */
.value {
    padding-bottom: 14px;
    border-bottom: 1.5px dashed rgba(37, 37, 37, 1);
}

.value--left { text-align: left; margin-left: clamp(-70px, -4vw, -20px); }
.value--right { text-align: right; margin-right: clamp(-70px, -4vw, -20px); }

/* Item 1 (trên) & 3 (dưới) kéo vào gần tâm → tạo đường cong theo ring */
.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));
}

.value__name {
    margin: 0 0 8px;
    font-size: clamp(16px, 1.45vw, 20px);
    font-weight: 700;
    line-height: 1.25;
    background: linear-gradient(180deg, #FDDA35 36.06%, #FE9C2B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.value__desc {
    margin: 0;
    font-size: clamp(14px, 1.3vw, 18px);
    font-weight: 400;
    line-height: 1.55;
    color: rgba(255, 255, 255, 1);
}

@media (max-width: 991px) {
    .about-values { padding: 52px 0 60px; }
    .about-values__grid {
        grid-template-columns: 1fr;
        gap: 32px;
        max-width: 560px;
        margin: 0 auto;
        justify-items: center;
    }
    .about-values__col { gap: 28px; width: 100%; }
    .about-values__center { order: -1; width: clamp(280px, 80vw, 460px); }
    .value--left,
    .value--right { text-align: left; }
    /* Bỏ độ lệch ngang uốn cong theo ring (chỉ cần trên PC) để các item đều nhau */
    .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;
    }
    .value--left { margin-left: 0; }
    .value--right { margin-right: 0; }
}

/* -------------------------------------------------------------------------- */
/* Section 6: Hành trình phát triển (timeline)                                */
/* -------------------------------------------------------------------------- */
.history {
    font-family: var(--font-shell);
    padding: 64px 0 76px;
}

.history__title {
    margin: 0 0 48px;
    padding: .08em 0;
    text-align: center;
    font-size: clamp(23px, 3.4vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.history__grid {
    display: grid;
    grid-template-columns: 1fr clamp(380px, 40vw, 517px);
    align-items: center;
    gap: clamp(24px, 4vw, 60px);
}

/* Timeline */
.history__item {
    position: relative;
    display: grid;
    grid-template-columns: 75px 1fr;
    column-gap: 32px;
    padding-bottom: 26px;
}

.history__item:last-child { padding-bottom: 0; }

/* đường dọc nối các mốc */
.history__item::before {
    content: "";
    position: absolute;
    left: 89px;
    top: 7px;
    bottom: -7px;
    width: 1.5px;
    background: rgba(219, 31, 31, .35);
}

.history__item:last-child::before { display: none; }

/* chấm tròn trên đường */
.history__item::after {
    content: "";
    position: absolute;
    left: 85px;
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand);
}

.history__year {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 25px;
    border-radius: 20px;
    background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.history__desc {
    margin: 0;
    padding-left: 18px;
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 500;
    line-height: 1.5;
    text-align: justify;
    color: rgba(37, 37, 37, 1);
}

.history__media img {
    display: block;
    width: 100%;
    max-width: 517px;
    height: auto;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .history { padding: 52px 0 60px; }
    .history__grid { grid-template-columns: 1fr; gap: 36px; }
    .history__media { order: -1; }
}

@media (max-width: 480px) {
    .history__item { grid-template-columns: 75px 1fr; column-gap: 20px; }
    .history__item::before { left: 83px; }
    .history__item::after { left: 79px; }
    .history__desc { padding-left: 14px; }
}

/* -------------------------------------------------------------------------- */
/* Section 7: Tự hào về con người Langmaster                                   */
/* -------------------------------------------------------------------------- */
.proud {
    position: relative;
    font-family: var(--font-shell);
    padding: 56px 0 72px;
}

@media (max-width: 991px) {
    .proud { padding-top: 0; padding-bottom: 40px; }
    .proud__bg { display: none; }
    .proud__eyebrow { text-align: center; }
}

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

.proud > .shell {
    position: relative;
    z-index: 1;
}

.proud__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 0 48px;
    font-size: clamp(22px, 2.8vw, 32px);
    font-weight: 800;
    text-transform: uppercase;
    color: #9D0B0F;
}

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

/* Card "con người" đồng bộ với trang chủ (homepage.css .proud-grid/.proud-card) */
.proud-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 40px;
    isolation: isolate;
}

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

.proud-card__avatar {
    position: absolute;
    top: -44px;
    left: 50%;
    margin-left: -44px;
    width: 88px;
    height: 88px;
    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;
    object-fit: cover;
    border-radius: 50%;
}

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

.proud-card__role {
    margin: 0 0 14px;
    font-size: 13px;
    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;
    transform: translateY(-50%);
    width: 30px;
    height: auto;
}

.proud-card__quote {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
}

@media (max-width: 860px) {
    .proud-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto 40px; gap: 56px; }
}

/* Khối video iMac + playlist */
.proud-video {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 516px;
    align-items: start;
    margin-top: 64px;
}

.proud-video__player {
    position: relative;
    /* vùng màn hình đen của monitor.png (giống section culture ở home) */
    --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);
    overflow: hidden;
    background: #000;
}

.proud-video__screen iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.proud-video__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 573px;
    overflow-y: scroll;
    padding: 6px 12px 6px 6px; /* chừa chỗ cho viền active + scrollbar */
    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;
    object-fit: cover;
    border-radius: 7px;
}

.proud-video__caption {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #252525;
}

@media (max-width: 860px) {
    .proud-video { grid-template-columns: 1fr; gap: 20px; }
    .proud-video__list { height: auto; max-height: 480px; }
}