/* Minification failed. Returning unminified contents.
(5,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,14): run-time error CSS1039: Token not allowed after unary operator: '-about-hero-zoom'
(36,24): run-time error CSS1039: Token not allowed after unary operator: '-web-container'
(36,47): run-time error CSS1039: Token not allowed after unary operator: '-about-hero-zoom'
(37,29): run-time error CSS1039: Token not allowed after unary operator: '-web-container-pad'
(37,56): run-time error CSS1039: Token not allowed after unary operator: '-about-hero-zoom'
(53,19): run-time error CSS1039: Token not allowed after unary operator: '-web-display-md'
(54,21): run-time error CSS1039: Token not allowed after unary operator: '-web-display-md-lh'
(57,15): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(61,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,20): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(65,19): run-time error CSS1039: Token not allowed after unary operator: '-h1-cap'
(68,15): run-time error CSS1039: Token not allowed after unary operator: '-web-yellow'
(71,43): run-time error CSS1039: Token not allowed after unary operator: '-h1-cap'
(98,13): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(99,20): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(105,56): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(106,56): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(125,20): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(142,15): run-time error CSS1039: Token not allowed after unary operator: '-web-yellow'
(159,15): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(166,15): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(171,15): run-time error CSS1039: Token not allowed after unary operator: '-x'
(172,15): run-time error CSS1039: Token not allowed after unary operator: '-r'
(173,13): run-time error CSS1039: Token not allowed after unary operator: '-y'
(177,20): run-time error CSS1039: Token not allowed after unary operator: '-web-primary-dark'
(178,15): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(191,65): run-time error CSS1039: Token not allowed after unary operator: '-ah-in'
(193,35): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(197,65): run-time error CSS1039: Token not allowed after unary operator: '-ah-in'
(198,55): run-time error CSS1039: Token not allowed after unary operator: '-ah-in'
(200,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(201,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(208,81): run-time error CSS1039: Token not allowed after unary operator: '-ah-o'
(209,58): run-time error CSS1039: Token not allowed after unary operator: '-ah-o'
(211,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(212,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(213,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(214,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(215,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(216,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(217,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(218,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(225,30): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(261,45): run-time error CSS1039: Token not allowed after unary operator: '-about-hero-zoom'
(265,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(266,20): run-time error CSS1039: Token not allowed after unary operator: '-vm-bg'
(276,16): run-time error CSS1039: Token not allowed after unary operator: '-web-space-section'
(294,20): run-time error CSS1039: Token not allowed after unary operator: '-vm-bg'
(307,46): run-time error CSS1039: Token not allowed after unary operator: '-web-primary-900'
(307,76): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(351,19): run-time error CSS1039: Token not allowed after unary operator: '-web-display-lg'
(352,21): run-time error CSS1039: Token not allowed after unary operator: '-web-display-lg-lh'
(369,19): run-time error CSS1039: Token not allowed after unary operator: '-web-display-xs'
(370,21): run-time error CSS1039: Token not allowed after unary operator: '-web-display-xs-lh'
(372,15): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(389,64): run-time error CSS1039: Token not allowed after unary operator: '-vm-in'
(392,65): run-time error CSS1039: Token not allowed after unary operator: '-vm-in'
(396,26): run-time error CSS1039: Token not allowed after unary operator: '-vm-in'
(396,54): run-time error CSS1039: Token not allowed after unary operator: '-vm-i'
(398,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(399,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(408,29): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(414,21): run-time error CSS1039: Token not allowed after unary operator: '-web-space-section'
(455,19): run-time error CSS1039: Token not allowed after unary operator: '-x'
(456,18): run-time error CSS1039: Token not allowed after unary operator: '-y'
(457,20): run-time error CSS1039: Token not allowed after unary operator: '-w'
(458,21): run-time error CSS1039: Token not allowed after unary operator: '-h'
(459,17): run-time error CSS1039: Token not allowed after unary operator: '-z'
(508,19): run-time error CSS1039: Token not allowed after unary operator: '-hl'
(509,20): run-time error CSS1039: Token not allowed after unary operator: '-hw'
(514,27): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(529,19): run-time error CSS1039: Token not allowed after unary operator: '-cx'
(530,18): run-time error CSS1039: Token not allowed after unary operator: '-cy'
(531,17): run-time error CSS1039: Token not allowed after unary operator: '-z'
(532,48): run-time error CSS1039: Token not allowed after unary operator: '-rot'
(546,27): run-time error CSS1030: Expected identifier, found '.'
(546,57): run-time error CSS1031: Expected selector, found ')'
(546,57): run-time error CSS1025: Expected comma or open brace, found ')'
(574,23): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-sm'
(595,18): run-time error CSS1039: Token not allowed after unary operator: '-ay'
(604,19): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(605,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md-lh'
(607,15): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(614,15): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(630,19): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(631,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md-lh'
(633,15): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(641,19): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm'
(642,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm-lh'
(644,15): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-800'
(652,35): run-time error CSS1039: Token not allowed after unary operator: '-web-space-section'
(659,28): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(660,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm'
(661,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm-lh'
(663,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(665,30): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(668,23): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(682,18): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(684,25): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-card'
(685,22): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(692,22): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(699,28): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-300'
(701,22): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(702,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-700'
(711,37): run-time error CSS1039: Token not allowed after unary operator: '-rise-delay'
(712,63): run-time error CSS1039: Token not allowed after unary operator: '-rise-delay'
(718,5): run-time error CSS1030: Expected identifier, found '.'
(718,35): run-time error CSS1031: Expected selector, found ')'
(718,35): run-time error CSS1025: Expected comma or open brace, found ')'
(724,5): run-time error CSS1030: Expected identifier, found '.'
(724,35): run-time error CSS1031: Expected selector, found ')'
(724,35): run-time error CSS1025: Expected comma or open brace, found ')'
(743,62): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(773,23): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-card'
(777,60): run-time error CSS1039: Token not allowed after unary operator: '-sh'
(778,57): run-time error CSS1039: Token not allowed after unary operator: '-sh'
(779,58): run-time error CSS1039: Token not allowed after unary operator: '-sh'
(780,59): run-time error CSS1039: Token not allowed after unary operator: '-sh'
(825,23): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-sm'
(887,37): run-time error CSS1039: Token not allowed after unary operator: '-web-space-30'
(890,18): run-time error CSS1039: Token not allowed after unary operator: '-web-header-h'
(890,40): run-time error CSS1039: Token not allowed after unary operator: '-web-container-pad'
(890,67): run-time error CSS1039: Token not allowed after unary operator: '-i'
(890,81): run-time error CSS1039: Token not allowed after unary operator: '-stack-step'
(891,33): run-time error CSS1039: Token not allowed after unary operator: '-web-header-h'
(891,55): run-time error CSS1039: Token not allowed after unary operator: '-web-container-pad'
(892,28): run-time error CSS1039: Token not allowed after unary operator: '-stack-n'
(892,53): run-time error CSS1039: Token not allowed after unary operator: '-stack-step'
(893,34): run-time error CSS1039: Token not allowed after unary operator: '-web-header-h'
(893,56): run-time error CSS1039: Token not allowed after unary operator: '-web-container-pad'
(894,28): run-time error CSS1039: Token not allowed after unary operator: '-stack-n'
(894,53): run-time error CSS1039: Token not allowed after unary operator: '-stack-step'
(906,17): run-time error CSS1039: Token not allowed after unary operator: '-web-space-section'
(909,50): run-time error CSS1039: Token not allowed after unary operator: '-about-timeline-content'
(909,86): run-time error CSS1039: Token not allowed after unary operator: '-web-container-pad'
(912,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(913,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(915,19): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-width'
(917,21): run-time error CSS1039: Token not allowed after unary operator: '-tl-lead'
(919,17): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-row-gap'
(925,14): run-time error CSS1039: Token not allowed after unary operator: '-tl-axis'
(928,21): run-time error CSS1039: Token not allowed after unary operator: '-tl-lead'
(928,38): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-dot'
(929,32): run-time error CSS1039: Token not allowed after unary operator: '-web-primary-200'
(935,14): run-time error CSS1039: Token not allowed after unary operator: '-tl-axis'
(952,14): run-time error CSS1039: Token not allowed after unary operator: '-tl-axis'
(954,18): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-dot'
(955,27): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-row-gap'
(955,53): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-dot'
(956,32): run-time error CSS1039: Token not allowed after unary operator: '-web-primary-200'
(962,48): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-dot'
(963,22): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-col-gap'
(984,13): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(987,19): run-time error CSS1039: Token not allowed after unary operator: '-web-display-md'
(988,21): run-time error CSS1039: Token not allowed after unary operator: '-web-display-md-lh'
(993,15): run-time error CSS1039: Token not allowed after unary operator: '-web-yellow'
(996,19): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(999,15): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(1015,15): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-dot'
(1016,16): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-dot'
(1033,19): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(1036,15): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(1045,19): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm'
(1046,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm-lh'
(1048,15): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-900'
(1053,18): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1053,36): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1054,18): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1054,36): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1056,53): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1057,53): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1061,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1070,15): run-time error CSS1030: Expected identifier, found '.'
(1070,45): run-time error CSS1031: Expected selector, found ')'
(1070,45): run-time error CSS1025: Expected comma or open brace, found ')'
(1088,38): run-time error CSS1030: Expected identifier, found '.'
(1088,68): run-time error CSS1031: Expected selector, found ')'
(1088,68): run-time error CSS1025: Expected comma or open brace, found ')'
(1089,32): run-time error CSS1030: Expected identifier, found '.'
(1089,52): run-time error CSS1031: Expected selector, found ')'
(1089,52): run-time error CSS1025: Expected comma or open brace, found ')'
(1098,26): run-time error CSS1039: Token not allowed after unary operator: '-web-yellow'
(1110,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1111,31): run-time error CSS1039: Token not allowed after unary operator: '-web-display-md'
(1111,67): run-time error CSS1039: Token not allowed after unary operator: '-web-display-md-lh'
(1113,31): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xl'
(1113,64): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xl-lh'
(1120,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-section'
(1124,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-12'
(1133,41): run-time error CSS1039: Token not allowed after unary operator: '-web-space-12'
(1134,35): run-time error CSS1039: Token not allowed after unary operator: '-web-space-section'
(1136,67): run-time error CSS1039: Token not allowed after unary operator: '-web-space-16'
(1140,40): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(1149,76): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(1155,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1156,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1157,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1162,33): run-time error CSS1039: Token not allowed after unary operator: '-about-tl-dot'
(1163,22): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(1164,19): 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: 150px 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 0;
}
.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: clip;
  padding-top: var(--web-space-section);
}
.dn-scene::before,
.dn-scene::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 -0.89% -4.2% -0.83%;
  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; }

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