/* Minification failed. Returning unminified contents.
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,16): run-time error CSS1039: Token not allowed after unary operator: '-about-hero-zoom'
(32,30): run-time error CSS1039: Token not allowed after unary operator: '-web-container'
(32,53): run-time error CSS1039: Token not allowed after unary operator: '-about-hero-zoom'
(33,35): run-time error CSS1039: Token not allowed after unary operator: '-web-container-pad'
(33,62): run-time error CSS1039: Token not allowed after unary operator: '-about-hero-zoom'
(57,21): run-time error CSS1039: Token not allowed after unary operator: '-web-display-md'
(58,23): run-time error CSS1039: Token not allowed after unary operator: '-web-display-md-lh'
(61,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(68,22): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(69,21): run-time error CSS1039: Token not allowed after unary operator: '-h1-cap'
(72,17): run-time error CSS1039: Token not allowed after unary operator: '-web-yellow'
(77,29): run-time error CSS1039: Token not allowed after unary operator: '-h1-cap'
(103,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(104,22): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(116,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(121,17): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(141,26): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(158,17): run-time error CSS1039: Token not allowed after unary operator: '-web-yellow'
(175,17): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(183,17): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(188,16): run-time error CSS1039: Token not allowed after unary operator: '-x'
(189,17): run-time error CSS1039: Token not allowed after unary operator: '-r'
(190,15): run-time error CSS1039: Token not allowed after unary operator: '-y'
(194,22): run-time error CSS1039: Token not allowed after unary operator: '-web-primary-dark'
(195,17): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(208,69): run-time error CSS1039: Token not allowed after unary operator: '-ah-in'
(212,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(217,69): run-time error CSS1039: Token not allowed after unary operator: '-ah-in'
(217,122): run-time error CSS1039: Token not allowed after unary operator: '-ah-in'
(221,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(225,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(241,85): run-time error CSS1039: Token not allowed after unary operator: '-ah-o'
(241,148): run-time error CSS1039: Token not allowed after unary operator: '-ah-o'
(245,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(249,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(253,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(257,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(261,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(265,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(269,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(273,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(281,34): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(379,34): run-time error CSS1039: Token not allowed after unary operator: '-about-hero-zoom'
(384,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(385,22): run-time error CSS1039: Token not allowed after unary operator: '-vm-bg'
(386,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-section'
(395,18): run-time error CSS1039: Token not allowed after unary operator: '-web-space-section'
(415,22): run-time error CSS1039: Token not allowed after unary operator: '-vm-bg'
(430,52): run-time error CSS1039: Token not allowed after unary operator: '-web-primary-900'
(430,82): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(488,21): run-time error CSS1039: Token not allowed after unary operator: '-web-display-lg'
(489,23): run-time error CSS1039: Token not allowed after unary operator: '-web-display-lg-lh'
(508,21): run-time error CSS1039: Token not allowed after unary operator: '-web-display-xs'
(509,23): run-time error CSS1039: Token not allowed after unary operator: '-web-display-xs-lh'
(511,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(548,68): run-time error CSS1039: Token not allowed after unary operator: '-vm-in'
(552,73): run-time error CSS1039: Token not allowed after unary operator: '-vm-in'
(556,74): run-time error CSS1039: Token not allowed after unary operator: '-vm-in'
(556,102): run-time error CSS1039: Token not allowed after unary operator: '-vm-i'
(560,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(564,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(577,22): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(632,21): run-time error CSS1039: Token not allowed after unary operator: '-x'
(633,20): run-time error CSS1039: Token not allowed after unary operator: '-y'
(634,22): run-time error CSS1039: Token not allowed after unary operator: '-w'
(635,23): run-time error CSS1039: Token not allowed after unary operator: '-h'
(636,19): run-time error CSS1039: Token not allowed after unary operator: '-z'
(682,21): run-time error CSS1039: Token not allowed after unary operator: '-hl'
(683,22): run-time error CSS1039: Token not allowed after unary operator: '-hw'
(689,29): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(704,21): run-time error CSS1039: Token not allowed after unary operator: '-cx'
(705,20): run-time error CSS1039: Token not allowed after unary operator: '-cy'
(706,19): run-time error CSS1039: Token not allowed after unary operator: '-z'
(707,50): run-time error CSS1039: Token not allowed after unary operator: '-rot'
(732,27): run-time error CSS1030: Expected identifier, found '.'
(732,57): run-time error CSS1031: Expected selector, found ')'
(732,57): run-time error CSS1025: Expected comma or open brace, found ')'
(759,25): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-sm'
(781,20): run-time error CSS1039: Token not allowed after unary operator: '-ay'
(801,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(802,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md-lh'
(804,17): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(812,17): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(830,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(831,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md-lh'
(833,17): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(845,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm'
(846,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm-lh'
(848,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-800'
(862,30): run-time error CSS1039: Token not allowed after unary operator: '-web-space-section'
(870,32): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(871,25): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm'
(872,27): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm-lh'
(874,21): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(878,25): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(883,27): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(903,22): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(905,29): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-card'
(906,26): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(917,26): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(925,32): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-300'
(927,26): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(928,21): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-700'
(937,39): run-time error CSS1039: Token not allowed after unary operator: '-rise-delay'
(937,106): run-time error CSS1039: Token not allowed after unary operator: '-rise-delay'
(954,5): run-time error CSS1030: Expected identifier, found '.'
(954,35): run-time error CSS1031: Expected selector, found ')'
(954,35): run-time error CSS1025: Expected comma or open brace, found ')'
(960,5): run-time error CSS1030: Expected identifier, found '.'
(960,35): run-time error CSS1031: Expected selector, found ')'
(960,35): run-time error CSS1025: Expected comma or open brace, found ')'
(992,66): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(1023,25): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-card'
(1027,62): run-time error CSS1039: Token not allowed after unary operator: '-sh'
(1027,115): run-time error CSS1039: Token not allowed after unary operator: '-sh'
(1027,169): run-time error CSS1039: Token not allowed after unary operator: '-sh'
(1027,224): run-time error CSS1039: Token not allowed after unary operator: '-sh'
(1076,25): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-sm'
(1154,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-30'
(1159,20): run-time error CSS1039: Token not allowed after unary operator: '-web-header-h'
(1159,42): run-time error CSS1039: Token not allowed after unary operator: '-web-container-pad'
(1159,69): run-time error CSS1039: Token not allowed after unary operator: '-i'
(1159,83): run-time error CSS1039: Token not allowed after unary operator: '-stack-step'
(1160,35): run-time error CSS1039: Token not allowed after unary operator: '-web-header-h'
(1160,57): run-time error CSS1039: Token not allowed after unary operator: '-web-container-pad'
(1160,92): run-time error CSS1039: Token not allowed after unary operator: '-stack-n'
(1160,117): run-time error CSS1039: Token not allowed after unary operator: '-stack-step'
(1161,36): run-time error CSS1039: Token not allowed after unary operator: '-web-header-h'
(1161,58): run-time error CSS1039: Token not allowed after unary operator: '-web-container-pad'
(1161,93): run-time error CSS1039: Token not allowed after unary operator: '-stack-n'
(1161,118): run-time error CSS1039: Token not allowed after unary operator: '-stack-step'
(1175,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-section'
(1180,26): run-time error CSS1039: Token not allowed after unary operator: '-about-timeline-content'
(1180,62): run-time error CSS1039: Token not allowed after unary operator: '-web-container-pad'
(1184,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1185,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1187,21): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-width'
(1189,23): run-time error CSS1039: Token not allowed after unary operator: '-tl-lead'
(1191,19): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-row-gap'
(1197,20): run-time error CSS1039: Token not allowed after unary operator: '-tl-axis'
(1200,27): run-time error CSS1039: Token not allowed after unary operator: '-tl-lead'
(1200,44): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-dot'
(1201,38): run-time error CSS1039: Token not allowed after unary operator: '-web-primary-200'
(1207,20): run-time error CSS1039: Token not allowed after unary operator: '-tl-axis'
(1224,20): run-time error CSS1039: Token not allowed after unary operator: '-tl-axis'
(1226,24): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-dot'
(1227,33): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-row-gap'
(1227,59): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-dot'
(1228,38): run-time error CSS1039: Token not allowed after unary operator: '-web-primary-200'
(1237,52): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-dot'
(1238,26): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-col-gap'
(1276,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(1280,21): run-time error CSS1039: Token not allowed after unary operator: '-web-display-md'
(1281,23): run-time error CSS1039: Token not allowed after unary operator: '-web-display-md-lh'
(1286,17): run-time error CSS1039: Token not allowed after unary operator: '-web-yellow'
(1290,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(1293,17): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(1309,17): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-dot'
(1310,18): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-dot'
(1329,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(1332,17): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(1343,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm'
(1344,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm-lh'
(1346,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-900'
(1352,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1353,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1357,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1358,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1363,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1367,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1374,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1387,15): run-time error CSS1030: Expected identifier, found '.'
(1387,45): run-time error CSS1031: Expected selector, found ')'
(1387,45): run-time error CSS1025: Expected comma or open brace, found ')'
(1409,38): run-time error CSS1030: Expected identifier, found '.'
(1409,68): run-time error CSS1031: Expected selector, found ')'
(1409,68): run-time error CSS1025: Expected comma or open brace, found ')'
(1414,32): run-time error CSS1030: Expected identifier, found '.'
(1414,52): run-time error CSS1031: Expected selector, found ')'
(1414,52): run-time error CSS1025: Expected comma or open brace, found ')'
(1429,28): run-time error CSS1039: Token not allowed after unary operator: '-web-yellow'
(1454,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1459,25): run-time error CSS1039: Token not allowed after unary operator: '-web-display-md'
(1460,27): run-time error CSS1039: Token not allowed after unary operator: '-web-display-md-lh'
(1465,25): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xl'
(1466,27): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xl-lh'
(1474,23): run-time error CSS1039: Token not allowed after unary operator: '-web-space-section'
(1479,23): run-time error CSS1039: Token not allowed after unary operator: '-web-space-12'
(1498,29): run-time error CSS1039: Token not allowed after unary operator: '-web-space-12'
(1502,23): run-time error CSS1039: Token not allowed after unary operator: '-web-space-section'
(1507,23): run-time error CSS1039: Token not allowed after unary operator: '-web-space-16'
(1515,26): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(1540,23): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(1550,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1551,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1552,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1557,37): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-dot'
(1558,26): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(1559,23): run-time error CSS1039: Token not allowed after unary operator: '-web-space-2'
 */

.page-gioi-thieu {
    background: #FFFCEA;
}

.page-gioi-thieu {
    --about-team-content: var(--web-contact-content);
    --about-timeline-content: var(--web-ecosystem-content);
    --about-tl-width: 1072px;
    --about-tl-col-gap: 21px;
    --about-tl-row-gap: 25px;
    --about-tl-dot: 30px;
    --about-hero-zoom: min(1, calc((100vh - var(--web-header-h)) / 900px));
}


.about-hero {
    position: relative;
    min-height: 900px;
    zoom: var(--about-hero-zoom);
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #FFFCEA;
    background-image: url('../../../Public/vietasoft/assets/images/about/hero-bg-bitmap.png'), url('../../../Public/vietasoft/assets/images/about/hero-bg-swoosh.png'), url('../../../Public/vietasoft/assets/images/about/hero-bg-glass.png');
    background-position: center top, 37.55% top, center top;
    background-size: cover, 78.12% 100%, cover;
    background-repeat: no-repeat;
}

    .about-hero > .web-container {
        max-width: calc(var(--web-container) / var(--about-hero-zoom));
        padding-inline: calc(var(--web-container-pad) / var(--about-hero-zoom));
    }

.about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 713fr) minmax(0, 633fr);
    column-gap: clamp(32px, calc(32px + (100vw - 1200px) * 0.42), min(183px, 12%));
    align-items: center;
    position: relative;
    z-index: 1;
}

.about-hero-text {
    display: flex;
    flex-direction: column;
}

@media (min-width: 993px) {
    .about-hero-text {
        container-type: inline-size;
    }
}

.about-hero-eyebrow {
    font-size: var(--web-display-md);
    line-height: var(--web-display-md-lh);
    letter-spacing: -0.72px;
    font-weight: 600;
    color: var(--web-gray-600);
}

.about-hero-title {
    --h1-cap: 50px;
    display: flex;
    flex-direction: column;
    margin-top: var(--web-space-3);
    font-size: var(--h1-cap);
    line-height: 1.3;
    font-weight: 800;
    color: var(--web-yellow);
}

@media (min-width: 993px) {
    .about-hero-title {
        font-size: min(var(--h1-cap), 7.59cqi);
    }
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .about-hero-title-line1,
    .about-hero-title-line2 {
        background-image: linear-gradient(100deg, transparent 44%, rgba(255, 255, 255, .7) 50%, transparent 56%), linear-gradient(90deg, var(--web-yellow) 0%, var(--web-yellow-mid) 33.654%, var(--web-yellow) 100%);
        background-size: 250% 100%, 100% 100%;
        background-position: 100% 0, 0 0;
        background-repeat: no-repeat;
        /* 🪤 T12 — B105 đo thấy "PHÂN" (mất huyền) ở 1201×1000 khi chữ co còn 43.8px: dấu
              chồng của "Ầ"/"Ề" chỉ VỪA KHÍT mép hộp dòng, làm tròn pixel là rơi ra ngoài nền.
              Nới hộp lên 0.3em rồi kéo ngược — chữ không xê dịch, dấu luôn có nền để lộ. */
        padding-top: 0.3em;
        margin-top: -0.3em;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.about-hero-lead {
    display: flex;
    flex-wrap: wrap;
    gap: var(--web-space-3);
    margin-top: var(--web-space-3);
    font-size: min(30px, calc(4.19cqi - 0.51px));
    line-height: 1.2667;
}

.about-hero-lead-muted,
.about-hero-lead-brand {
    white-space: nowrap;
}

.about-hero-lead-muted {
    font-weight: 600;
    color: var(--web-gray-600);
}

.about-hero-lead-brand {
    font-weight: 700;
    color: var(--web-primary);
}


.about-ring {
    container-type: inline-size;
    position: relative;
    width: 100%;
    max-width: 633px;
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: 50%;
    background: rgba(244, 247, 255, 0.43);
}

    .about-ring::before {
        content: '';
        position: absolute;
        inset: 15.25%;
        border-radius: 50%;
        background: var(--web-white);
    }

.about-ring-inner {
    position: absolute;
    left: 50%;
    top: 30.56%;
    width: 56.33%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1;
}

.about-ring-count {
    font-size: 13.79cqw;
    line-height: 1.3;
    font-weight: 700;
    color: var(--web-yellow);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .about-ring-count {
        background-image: linear-gradient(90deg, #FFD400 0%, #FFDB2C 33.654%, #FFD400 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.about-ring-label {
    font-size: 4.389cqw;
    line-height: 1.3;
    font-weight: 900;
    color: var(--web-primary);
}

.about-ring-sub {
    margin-top: 0.75cqw;
    font-size: 3.764cqw;
    line-height: 1.267;
    font-weight: 700;
    color: var(--web-primary);
}

.about-ring-pill {
    position: absolute;
    left: var(--x, auto);
    right: var(--r, auto);
    top: var(--y);
    z-index: 2;
    padding: 1.58cqw 2.21cqw;
    border-radius: 1.9cqw;
    background: var(--web-primary-dark);
    color: var(--web-white);
    font-size: max(12px, 2.844cqw);
    line-height: 1.21;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    filter: drop-shadow(8px 7px 7.95px rgba(0, 0, 0, .11));
}


@media (prefers-reduced-motion: no-preference) {
    .about-hero-eyebrow,
    .about-hero-lead {
        animation: about-rise .8s cubic-bezier(.22, 1, .36, 1) var(--ah-in, 0ms) both;
    }

    .about-hero-lead {
        --ah-in: 270ms;
    }

    .about-hero-title-line1,
    .about-hero-title-line2 {
        animation: about-rise .8s cubic-bezier(.22, 1, .36, 1) var(--ah-in) both, about-glint 1.2s ease-in-out calc(var(--ah-in) + 1s) both;
    }

    .about-hero-title-line1 {
        --ah-in: 90ms;
    }

    .about-hero-title-line2 {
        --ah-in: 180ms;
    }

    .about-ring {
        animation: about-ring-in 1s cubic-bezier(.22, 1, .36, 1) 150ms both;
    }

        .about-ring::before {
            animation: about-core-in 1s cubic-bezier(.22, 1, .36, 1) 300ms both;
        }

    .about-ring-inner {
        animation: about-ring-text-in .7s cubic-bezier(.22, 1, .36, 1) 450ms both;
    }

    .about-ring-pill {
        animation: about-pill-in .6s cubic-bezier(.22, 1, .36, 1) calc(700ms + var(--ah-o) * 70ms) both, about-pill-float 6s ease-in-out calc(var(--ah-o) * -.75s) infinite;
    }

        .about-ring-pill:nth-of-type(1) {
            --ah-o: 0;
        }

        .about-ring-pill:nth-of-type(3) {
            --ah-o: 1;
        }

        .about-ring-pill:nth-of-type(4) {
            --ah-o: 2;
        }

        .about-ring-pill:nth-of-type(6) {
            --ah-o: 3;
        }

        .about-ring-pill:nth-of-type(7) {
            --ah-o: 4;
        }

        .about-ring-pill:nth-of-type(8) {
            --ah-o: 5;
        }

        .about-ring-pill:nth-of-type(5) {
            --ah-o: 6;
        }

        .about-ring-pill:nth-of-type(2) {
            --ah-o: 7;
        }

    .about-ring::after {
        content: '';
        position: absolute;
        inset: 15.25%;
        border-radius: 50%;
        border: 1.5px solid var(--web-primary);
        opacity: 0;
        pointer-events: none;
        animation: about-ripple 4.5s ease-out 1.6s infinite;
    }

    .about-ring.about-ring--wait,
    .about-ring.about-ring--wait::before,
    .about-ring.about-ring--wait::after,
    .about-ring.about-ring--wait > * {
        animation-play-state: paused;
    }
}

@keyframes about-rise {
    from {
        opacity: 0;
        translate: 0 32px;
    }
}

@keyframes about-ring-in {
    from {
        opacity: 0;
        scale: .9;
    }
}

@keyframes about-core-in {
    from {
        opacity: 0;
        scale: .6;
    }
}

@keyframes about-ring-text-in {
    from {
        opacity: 0;
        translate: 0 3cqw;
    }
}

@keyframes about-pill-in {
    0% {
        opacity: 0;
        scale: .6;
    }

    60% {
        opacity: 1;
        scale: 1.06;
    }

    100% {
        opacity: 1;
        scale: 1;
    }
}

@keyframes about-pill-float {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -.95cqw;
    }
}

@keyframes about-glint {
    from {
        background-position: 100% 0, 0 0;
    }

    to {
        background-position: 0% 0, 0 0;
    }
}

@keyframes about-ripple {
    0% {
        opacity: .35;
        scale: 1;
    }

    40% {
        opacity: 0;
        scale: 1.44;
    }

    100% {
        opacity: 0;
        scale: 1.44;
    }
}


.about-stats {
    margin: calc(-73.92px * var(--about-hero-zoom) - 150px) auto 37px;
}


.about-vm {
    --vm-bg: #FFFEF5;
    background: var(--vm-bg);
    padding: var(--web-space-section) 0;
}

.vm-grid {
    display: grid;
    grid-template-columns: minmax(0, 731.717fr) minmax(0, 434fr);
    column-gap: 32px;
    align-items: start;
    max-width: 1197.717px;
    margin: var(--web-space-section) auto;
}

.vm-item--vision {
    display: grid;
    grid-template-columns: minmax(0, 265.717fr) minmax(0, 434fr);
    column-gap: 32px;
    align-items: start;
}

.vm-item--mission {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.vm-photo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--vm-bg);
    box-shadow: 2.675px 3.567px 3.567px rgba(0, 0, 0, .25);
}

    .vm-photo img {
        position: absolute;
        max-width: none;
        mix-blend-mode: multiply;
    }

    .vm-photo::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(90.36deg, var(--web-primary-900) 0.62%, var(--web-primary) 112.33%);
        mix-blend-mode: soft-light;
        pointer-events: none;
    }

    .vm-photo::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        border: 3.567px solid #203987;
        pointer-events: none;
    }

.vm-photo--vision {
    aspect-ratio: 265.717 / 535;
}

    .vm-photo--vision img {
        width: 175.59%;
        height: 109.01%;
        left: -37.79%;
        top: -8.97%;
    }

.vm-photo--mission {
    width: 78.044%;
    aspect-ratio: 338.711 / 305;
    box-shadow: 2.408px 3.211px 3.211px rgba(0, 0, 0, .25);
}

    .vm-photo--mission::after {
        border-width: 3.211px;
    }

    .vm-photo--mission img {
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

.vm-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-inline: 12px;
}

.vm-title {
    width: fit-content;
    /* 🪤 Chữ gradient (background-clip: text) chỉ được TÔ trong hộp phần tử. Dấu chồng của
          "Ầ" (mũ + huyền) nhô lên trên hộp dòng 60 -> phần nhô ra trong suốt: đo được hiện
          "TÂM NHÌN" thay vì "TẦM NHÌN". Nới hộp lên trên 0.3em rồi kéo ngược bằng margin âm:
          đủ chỗ cho dấu, vị trí chữ không đổi pixel nào. Chữ gradient có dấu chồng ở chỗ
          khác thì kiểm cùng bẫy này. */
    padding-top: 0.3em;
    margin-top: -0.3em;
    font-size: var(--web-display-lg);
    line-height: var(--web-display-lg-lh);
    letter-spacing: -0.96px;
    font-weight: 700;
    white-space: nowrap;
    color: #203987;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .vm-title {
        background-image: linear-gradient(92.78deg, var(--web-primary-900) 0.62%, var(--web-primary) 112.33%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.vm-desc {
    max-width: 410px;
    font-size: var(--web-display-xs);
    line-height: var(--web-display-xs-lh);
    font-weight: 600;
    color: var(--web-gray-600);
}

.vm-brand {
    font-weight: 800;
    letter-spacing: -0.48px;
    color: #0E5E30;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .vm-brand {
        background-image: linear-gradient(18.06deg, #0E5E30 0%, #23DA71 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

@keyframes vm-wipe {
    from {
        clip-path: inset(100% 0 0 0);
    }

    to {
        clip-path: inset(-12px);
    }
}

@keyframes vm-settle {
    from {
        scale: 1.18;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .vm-photo {
        animation: vm-wipe 1.1s cubic-bezier(.77, 0, .175, 1) var(--vm-in, 0ms) both;
    }

        .vm-photo img {
            animation: vm-settle 1.6s cubic-bezier(.22, 1, .36, 1) var(--vm-in, 0ms) both;
        }

    .vm-text > * {
        animation: about-rise .8s cubic-bezier(.22, 1, .36, 1) calc(var(--vm-in, 0ms) + 350ms + var(--vm-i, 0) * 110ms) both;
    }

    .vm-desc {
        --vm-i: 1;
    }

    .vm-item--mission {
        --vm-in: 200ms;
    }

    .vm-item.is-vm-wait .vm-photo,
    .vm-item.is-vm-wait .vm-photo img,
    .vm-item.is-vm-wait .vm-text > * {
        animation-play-state: paused;
    }
}



.dn-team {
    background: var(--web-white);
}

.dn-scene {
    position: relative;
    isolation: isolate;
    overflow: visible;
    padding-top: 150px;
}

    .dn-scene .web-container {
        margin-top: 120px
    }

    .dn-scene::before,
    .dn-scene::after {
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        pointer-events: none;
    }

    .dn-scene::before {
        background: url('../../../Public/vietasoft/assets/images/about/doi-ngu/nen-do-thi.jpg') center / cover no-repeat;
        opacity: .06;
        mix-blend-mode: multiply;
    }

    .dn-scene::after {
        background: linear-gradient(to top, rgba(40, 66, 151, 1) -3.541%, rgba(40, 66, 151, .766) 0.871%, rgba(40, 66, 151, .563) 5.284%, rgba(40, 66, 151, .391) 9.696%, rgba(40, 66, 151, .25) 14.109%, rgba(40, 66, 151, .141) 18.521%, rgba(40, 66, 151, .063) 22.933%, rgba(40, 66, 151, .016) 27.345%, rgba(40, 66, 151, 0) 31.758%);
    }

.dn-hint {
    display: none;
}


.dn-stage-wrap {
    padding-top: 5px;
    overflow: hidden
}

.dn-stage {
    position: relative;
    width: 1448px;
    height: 403.785px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    overflow: visible;
}

.dn-person {
    position: absolute;
    left: calc(var(--x) * 1px);
    top: calc(var(--y) * 1px);
    width: calc(var(--w) * 1px);
    height: calc(var(--h) * 1px);
    z-index: var(--z);
    pointer-events: none;
    outline: none;
}

.dn-photo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    transform-origin: 50% 100%;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.dn-tint {
    position: absolute;
    inset: 0;
    background: #77A1FD;
    mix-blend-mode: color;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transform-origin: 50% 100%;
    opacity: 0;
    transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
    pointer-events: none;
}

.dn-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .364) 0, rgba(0, 0, 0, .325) 10px, rgba(0, 0, 0, .246) 20px, rgba(0, 0, 0, .146) 30px, rgba(0, 0, 0, .063) 40px, rgba(0, 0, 0, .019) 50px, rgba(0, 0, 0, 0) 60px);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transform-origin: 50% 100%;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
    pointer-events: none;
}

.dn-hit {
    position: absolute;
    top: 4%;
    bottom: 0;
    left: calc(var(--hl) * 1px);
    width: calc(var(--hw) * 1px);
    border-radius: 12px;
    pointer-events: auto;
}

.dn-person:focus-visible .dn-hit {
    outline: 3px solid var(--web-primary);
    outline-offset: 2px;
}

.dn-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.dn-glow {
    position: absolute;
    left: calc(var(--cx) * 1px);
    top: calc(var(--cy) * 1px);
    z-index: var(--z);
    transform: translate(-50%, -50%) rotate(var(--rot));
    pointer-events: none;
}

    .dn-glow img {
        display: block;
        max-width: none;
    }

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .dn-hit {
        cursor: pointer;
    }
}

.dn-stage.has-current .dn-person:not(.is-current) .dn-tint,
.dn-stage.is-picked .dn-person:not(.is-active) .dn-tint {
    opacity: 1;
}

.dn-stage .dn-person.is-current,
.dn-stage .dn-person.is-active {
    z-index: 30;
}

.dn-person.is-current :is(.dn-photo, .dn-shade, .dn-tint),
.dn-person.is-active :is(.dn-photo, .dn-shade, .dn-tint) {
    transform: scale(var(--hover-zoom, 1.06));
}

.dn-floor {
    position: absolute;
    left: -239px;
    top: -0.21px;
    width: 1922px;
    height: 404px;
    z-index: 35;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 80.46%, rgba(191, 191, 191, .165) 84.50%, rgba(128, 128, 128, .33) 88.53%, rgba(64, 64, 64, .495) 92.57%, rgba(0, 0, 0, .66) 96.60%);
    opacity: .68;
    filter: blur(2px);
    pointer-events: none;
}


.dn-card {
    position: absolute;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: min(361px, calc(100% - 32px));
    padding: 12px;
    border-radius: var(--web-radius-sm);
    background: rgba(255, 255, 255, .84);
    -webkit-backdrop-filter: blur(7.3px);
    backdrop-filter: blur(7.3px);
    box-shadow: 2px 4px 4.1px rgba(0, 0, 0, .15);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    pointer-events: none;
}

    .dn-card.is-on {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .25s ease, transform .25s ease;
    }

.dn-card-tip {
    position: absolute;
    top: calc(var(--ay, 40px) - 10.5px);
    display: block;
}

.dn-card[data-side="right"] .dn-card-tip {
    left: -21.62px;
    transform: rotate(-90deg);
}

.dn-card[data-side="left"] .dn-card-tip {
    left: calc(100% - 2.62px);
    transform: rotate(90deg);
}

.dn-card-name {
    margin: 0;
}

.dn-card-hon {
    display: block;
    font-size: var(--web-text-md);
    line-height: var(--web-text-md-lh);
    font-weight: 600;
    color: var(--web-primary);
}

.dn-card-full {
    display: block;
    font-size: 30px;
    line-height: 38px;
    font-weight: 700;
    color: var(--web-primary);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .dn-card-full {
        padding-top: .3em;
        margin-top: -.3em;
        background-image: linear-gradient(97.33deg, #091E63 0%, var(--web-primary) 26.6%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.dn-card-role {
    margin: 0;
    text-wrap: balance;
    font-size: var(--web-text-md);
    line-height: var(--web-text-md-lh);
    font-weight: 600;
    color: var(--web-primary);
}

.dn-card-role-vi,
.dn-card-role-en {
    display: inline-block;
}

.dn-card-bio {
    margin: 0;
    padding-left: 21px;
    list-style: disc;
    font-size: var(--web-text-sm);
    line-height: var(--web-text-sm-lh);
    font-weight: 500;
    color: var(--web-gray-800);
}


.dn-panel {
    display: none;
}

@media not all and (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .dn-card {
        display: none;
    }

    .dn-team {
        padding-bottom: var(--web-space-section);
    }

    .dn-hint {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: calc(-1 * var(--web-space-4)) 0 0;
        font-size: var(--web-text-sm);
        line-height: var(--web-text-sm-lh);
        font-weight: 500;
        color: var(--web-gray-600);
    }

        .dn-hint .bi {
            color: var(--web-primary);
            font-size: 16px;
        }

    .dn-stage-wrap {
        padding-top: var(--web-space-6);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

        .dn-stage-wrap::-webkit-scrollbar {
            display: none;
        }

    .dn-hit {
        cursor: pointer;
    }

    .dn-panel {
        display: flex;
        flex-direction: column;
        gap: 4px;
        max-width: 560px;
        margin: var(--web-space-6) auto 0;
        padding: 20px 20px 22px;
        border-radius: var(--web-radius-card);
        background: var(--web-white);
        box-shadow: 0 12px 32px -12px rgba(16, 24, 40, .2), 0 0 0 1px rgba(16, 24, 40, .05);
    }

        .dn-panel:empty {
            display: none;
        }

    .dn-panel-nav {
        display: flex;
        gap: 8px;
        margin-top: var(--web-space-3);
    }

    .dn-panel-btn {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--web-gray-300);
        border-radius: 50%;
        background: var(--web-white);
        color: var(--web-gray-700);
        cursor: pointer;
    }
}


.dn-stage--rise .dn-person {
    opacity: 0;
    transform: translateY(35%);
    transition: opacity .6s ease var(--rise-delay, 0ms), transform .9s cubic-bezier(.22, 1, .36, 1) var(--rise-delay, 0ms);
}

.dn-stage--rise.is-in .dn-person {
    opacity: 1;
    transform: none;
}

.dn-stage--rise .dn-glow {
    opacity: 0;
    transition: opacity .8s ease .45s;
}

.dn-stage--rise.is-in .dn-glow {
    opacity: 1;
}

:is(.dn-head--rise, .tl-head--rise) :is(.section-badge, .section-title > span, .section-subtitle) {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .6s ease var(--head-delay, 0ms), transform .8s cubic-bezier(.22, 1, .36, 1) var(--head-delay, 0ms);
}

:is(.dn-head--rise, .tl-head--rise).is-in :is(.section-badge, .section-title > span, .section-subtitle) {
    opacity: 1;
    transform: none;
}


.dn-list {
    display: none;
}

@media (max-width: 768px) {
    .dn-team--list .dn-stage-wrap,
    .dn-team--list .dn-hint,
    .dn-team--list .dn-panel,
    .dn-team--list .dn-scene::before,
    .dn-team--list .dn-scene::after {
        display: none;
    }

    .dn-scene {
        padding-top: 24px
    }

        .dn-scene .web-container {
            margin-top: 0
        }

    .dn-team.dn-team--list {
        position: relative;
        isolation: isolate;
        overflow: clip;
        padding-bottom: 0;
        background: linear-gradient(90.21deg, #F8F8F8 0.1%, var(--web-white) 83.3%);
    }

    .dn-team--list::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: url('../../../Public/vietasoft/assets/images/about/doi-ngu/nen-do-thi.jpg') 51.77% 0 / auto 100% no-repeat;
        opacity: .06;
        mix-blend-mode: multiply;
        pointer-events: none;
    }

    .dn-list {
        display: grid;
        justify-items: center;
        gap: 40px;
        margin: 0;
        padding: 0 0 32px;
        list-style: none;
    }
}

.dn-item {
    position: relative;
    width: 100%;
    max-width: 480px;
    container-type: inline-size;
    overflow: hidden;
    border: 1px solid #EEEEEE;
    border-radius: var(--web-radius-card);
    background: linear-gradient(to bottom, rgba(252, 252, 252, .7), rgba(252, 252, 252, .56));
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 16px 35px rgba(21, 32, 30, calc(.04 * var(--sh, 1))), 0 63px 63px rgba(0, 0, 0, calc(.04 * var(--sh, 1))), 0 142px 85px rgba(0, 0, 0, calc(.02 * var(--sh, 1))), 0 252px 101px rgba(0, 0, 0, calc(.01 * var(--sh, 1)));
    text-align: left;
}

    .dn-item::before {
        content: '';
        display: block;
        aspect-ratio: 375 / 542;
    }

.dn-item-photo {
    position: absolute;
    inset: 3px;
    overflow: hidden;
    border-radius: 12px;
    background: #F6F7FA;
}

    .dn-item-photo img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: 50% 0;
    }

    .dn-item-photo::after {
        content: '';
        position: absolute;
        inset: 0;
        border: .5px solid rgba(124, 139, 137, .27);
        border-radius: inherit;
        pointer-events: none;
    }

.dn-item-info {
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: 2;
    padding: clamp(12px, 5.333cqi, 20px);
}

.dn-item-panel {
    display: flex;
    flex-direction: column;
    padding: clamp(8px, 3.2cqi, 12px);
    border-radius: var(--web-radius-sm);
    background: rgba(255, 255, 255, .84);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 -1px 5.8px rgba(255, 255, 255, .3);
    color: #13308E;
    text-shadow: 0 .139px .417px rgba(0, 0, 0, .3), 0 .555px 1.389px rgba(0, 0, 0, .15), 0 -.555px 6.526px rgba(255, 255, 255, .7);
}

.dn-item-name {
    margin: 0 0 4px;
    color: inherit;
}

.dn-item-hon {
    display: block;
    font-size: clamp(14px, 4.267cqi, 16px);
    line-height: 1.5;
    font-weight: 500;
}

.dn-item-full {
    display: block;
    font-size: clamp(24px, 8cqi, 30px);
    line-height: 1.2667;
    font-weight: 700;
}

.dn-item-role {
    margin: 0;
    font-size: clamp(14px, 4.267cqi, 16px);
    line-height: 1.5;
    font-weight: 600;
}

.dn-item-role-en {
    display: inline-block;
}

.dn-item-bio {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: clamp(12px, 3.733cqi, 14px);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -.02em;
}

    .dn-item-bio li::before {
        content: '- ';
    }

/* Cụm nút liên hệ nổi LÁNH ĐI khi danh sách thẻ đang trên màn (06/10, Designer chọn):
      cột nút gọi · Zalo · Messenger + linh vật đứng đúng mép phải-dưới, che cuối dòng
      chức danh + giới thiệu (chữ thẻ nằm sát đáy). JS gắn `dn-fab-lanh` lên <body> khi
      bật thẻ chồng, `dn-an-fab` khi danh sách giao với màn; cuộn qua là hiện lại.
      Chỉ đổi ở trang này — KHÔNG đụng components.css (dùng chung 15 trang, R6). Khối
      `.contact-fab` gốc không có transform/transition riêng nên gán ở đây không đè gì.
      ⚠ KHI PORT: cùng loại móc với `data-nav-open` (components.css) — gắn theo cơ chế
      của trang thật. */
body.dn-fab-lanh .contact-fab {
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}

body.dn-fab-lanh.dn-an-fab .contact-fab {
    opacity: 0;
    visibility: hidden;
    transform: translateX(24px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

.dn-nowrap {
    white-space: nowrap;
}

.dn-list.dn-list--stack {
    gap: var(--web-space-30);
}

.dn-list--stack .dn-item {
    position: sticky;
    top: calc(var(--web-header-h) + var(--web-container-pad) + var(--i, 0) * var(--stack-step, 8px));
    max-height: calc(100vh - var(--web-header-h) - var(--web-container-pad) - 20px - (var(--stack-n, 9) - 1) * var(--stack-step, 8px));
    max-height: calc(100svh - var(--web-header-h) - var(--web-container-pad) - 20px - (var(--stack-n, 9) - 1) * var(--stack-step, 8px));
    transform-origin: 50% 0;
}

@media (prefers-reduced-motion: reduce) {
    .dn-photo, .dn-card, .dn-card.is-on {
        transition: none;
    }
}



.about-timeline {
    position: relative;
    padding: var(--web-space-section) 0;
    background: url('../../../Public/vietasoft/assets/images/about/timeline-bg.png') center / cover no-repeat;
}

.about-timeline-container {
    max-width: calc(var(--about-timeline-content) + 2 * var(--web-container-pad));
}

.about-timeline-track {
    --tl-axis: 50%;
    --tl-lead: 125px;
    position: relative;
    width: min(var(--about-tl-width), 100%);
    margin-inline: auto;
    padding-top: var(--tl-lead);
    display: grid;
    row-gap: var(--about-tl-row-gap);
}

    .about-timeline-track::before {
        content: '';
        position: absolute;
        left: var(--tl-axis);
        transform: translateX(-1px);
        top: 26.8px;
        height: calc(var(--tl-lead) + var(--about-tl-dot) / 2 - 26.8px);
        border-left: 2px dashed var(--web-primary-200);
    }

    .about-timeline-track::after {
        content: '';
        position: absolute;
        left: var(--tl-axis);
        transform: translateX(-50%);
        top: 8.7px;
        width: 20.1032px;
        height: 18.1234px;
        background: url('../../../Public/vietasoft/assets/icons/about/timeline-arrow-up.svg') center / contain no-repeat;
    }

.about-tl-item {
    position: relative;
    display: grid;
    align-items: start;
}

    .about-tl-item::before {
        content: '';
        position: absolute;
        left: var(--tl-axis);
        transform: translateX(-1px);
        top: calc(var(--about-tl-dot) / 2);
        bottom: calc(-1 * (var(--about-tl-row-gap) + var(--about-tl-dot) / 2));
        border-left: 2px dashed var(--web-primary-200);
    }

    .about-tl-item:last-child::before {
        content: none;
    }

@media (min-width: 1100px) {
    .about-tl-item {
        grid-template-columns: minmax(0, 1fr) var(--about-tl-dot) minmax(0, 1fr);
        column-gap: var(--about-tl-col-gap);
    }

    .about-tl-head {
        grid-area: 1 / 1;
    }

    .about-tl-dot {
        grid-area: 1 / 2;
    }

    .about-tl-card {
        grid-area: 1 / 3;
    }

    .about-tl-head {
        align-items: flex-end;
        text-align: right;
    }

    .about-tl-item:nth-child(even) .about-tl-head {
        grid-area: 1 / 3;
        align-items: flex-start;
        text-align: left;
    }

    .about-tl-item:nth-child(even) .about-tl-card {
        grid-area: 1 / 1;
    }

    .about-tl-head {
        min-height: 84px;
    }
}

.about-tl-head {
    display: flex;
    flex-direction: column;
    gap: var(--web-space-3);
}

.about-tl-year {
    font-size: var(--web-display-md);
    line-height: var(--web-display-md-lh);
    letter-spacing: -0.72px;
    font-weight: 700;
    /* ⚠ A11Y: #FFD400 trên nền sáng ~1.5:1, KHÔNG đạt AA — cùng loại lệch có chủ
          đích với H1 hero (ghi chú nội bộ của Designer). Bản port nên dùng --web-yellow-800. */
    color: var(--web-yellow);
}

.about-tl-phase {
    font-size: var(--web-text-md);
    line-height: 1.21;
    font-weight: 700;
    color: var(--web-primary);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .about-tl-phase {
        background-image: linear-gradient(96.043deg, var(--web-primary) 24%, var(--web-primary-900) 135.71%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.about-tl-dot {
    position: relative;
    z-index: 1;
    width: var(--about-tl-dot);
    height: var(--about-tl-dot);
}

    .about-tl-dot img {
        position: absolute;
        left: -5.2494px;
        top: -2.9989px;
        width: 40.909px;
        height: 40.909px;
        max-width: none;
    }

.about-tl-card {
    width: 100%;
    padding: 10px 0;
    border-radius: 14.078px;
}

.about-tl-title {
    font-size: var(--web-text-md);
    line-height: 1.21;
    font-weight: 700;
    color: var(--web-primary);
}

.about-tl-list,
.about-tl-list ul {
    list-style: disc;
    padding-left: 21px;
}

.about-tl-list {
    margin: 10px 0 0;
    font-size: var(--web-text-sm);
    line-height: var(--web-text-sm-lh);
    font-weight: 500;
    color: var(--web-gray-900);
    text-align: justify;
}


.about-tl-head {
    --tl-from: -40px;
    --tl-d: 120ms;
}

.about-tl-card {
    --tl-from: 40px;
    --tl-d: 220ms;
}

@media (min-width: 1100px) {
    .about-tl-item:nth-child(even) > .about-tl-head {
        --tl-from: 40px;
    }

    .about-tl-item:nth-child(even) > .about-tl-card {
        --tl-from: -40px;
    }
}

@media (max-width: 1099px) {
    .about-tl-item > .about-tl-head,
    .about-tl-item > .about-tl-card {
        --tl-from: 24px;
    }
}

.about-timeline {
    overflow-x: clip;
}

.tl--rise .about-tl-dot {
    scale: 0;
    transition: scale .55s cubic-bezier(.34, 1.56, .64, 1);
}

.tl--rise :is(.about-tl-head, .about-tl-card) {
    opacity: 0;
    translate: var(--tl-from) 0;
    transition: opacity .6s ease var(--tl-d), translate .8s cubic-bezier(.22, 1, .36, 1) var(--tl-d);
}

.tl--rise .about-tl-item::before,
.tl--rise::before {
    clip-path: inset(100% 0 0 0);
    transition: clip-path .7s cubic-bezier(.65, 0, .35, 1) .25s;
}

.tl--rise::after {
    opacity: 0;
    translate: 0 12px;
    transition: opacity .5s ease .85s, translate .6s cubic-bezier(.22, 1, .36, 1) .85s;
}

.tl--rise .about-tl-item.is-in > .about-tl-dot {
    scale: 1;
}

.tl--rise .about-tl-item.is-in > :is(.about-tl-head, .about-tl-card) {
    opacity: 1;
    translate: none;
}

.tl--rise .about-tl-item:has(+ .about-tl-item.is-in)::before,
.tl--rise.is-in::before {
    clip-path: inset(0);
}

.tl--rise.is-in::after {
    opacity: 1;
    translate: none;
}

.tl--rise .about-tl-item.is-current > .about-tl-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--web-yellow);
    pointer-events: none;
    animation: tl-ping 2.4s ease-out infinite;
}

@keyframes tl-ping {
    0% {
        opacity: .9;
        scale: 1;
    }

    55% {
        opacity: 0;
        scale: 2.2;
    }

    100% {
        opacity: 0;
        scale: 2.2;
    }
}


@media (max-width: 1200px) {
    .about-hero-title {
        --h1-cap: 42px;
        line-height: 1.2857;
    }

    .vm-title {
        font-size: var(--web-display-md);
        line-height: var(--web-display-md-lh);
        letter-spacing: -0.72px;
    }

    .vm-desc {
        font-size: var(--web-text-xl);
        line-height: var(--web-text-xl-lh);
    }
}

@media (max-width: 992px) {
    .about-hero {
        min-height: 0;
        zoom: 1;
        padding: var(--web-space-section) 0;
    }

    .about-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--web-space-12);
        justify-items: center;
        text-align: center;
    }

    .about-hero-text {
        align-items: center;
    }

    .about-hero-lead {
        justify-content: center;
        font-size: min(30px, calc(4.19vw - 3.9px));
    }

    .about-ring {
        max-width: 480px;
    }

    .about-stats {
        margin: 0 auto var(--web-space-12);
    }

    .about-vm {
        padding: var(--web-space-section) 0;
    }

    .vm-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--web-space-16);
        max-width: 720px;
    }

    .vm-item--vision,
    .vm-item--mission {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: var(--web-space-8);
        align-items: center;
    }

    .vm-photo--vision {
        aspect-ratio: 4 / 5;
    }

        .vm-photo--vision img {
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 100%;
        }

    .vm-photo--mission {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .vm-item--vision,
    .vm-item--mission {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--web-space-6);
    }

    .vm-photo {
        max-width: 400px;
    }
}

@media (max-width: 1099px) {
    .about-timeline-track {
        --tl-axis: calc(var(--about-tl-dot) / 2);
        --tl-lead: 56px;
        --about-tl-row-gap: var(--web-space-8);
        max-width: 560px;
    }

    .about-tl-item {
        grid-template-columns: var(--about-tl-dot) minmax(0, 1fr);
        column-gap: var(--web-space-4);
        row-gap: var(--web-space-2);
    }

    .about-tl-dot {
        grid-area: 1 / 1 / span 2 / auto;
    }

    .about-tl-head {
        grid-area: 1 / 2;
    }

    .about-tl-card {
        grid-area: 2 / 2;
        padding: 0;
    }
}

@media (max-width: 768px) {
    .about-hero-eyebrow {
        font-size: 24px;
        line-height: 32px;
    }

    .about-hero-title {
        font-size: min(32px, calc(7.5vw - 4.5px));
        line-height: 1.3125;
    }

    .about-hero-lead {
        font-size: clamp(13px, calc(4.19vw - 2.9px), 20px);
    }

    .about-ring {
        max-width: 360px;
    }

    .about-tl-list {
        text-align: left;
    }
}