/* =====================================================
   ABOUT — Style Sync Guide (Home system)
   corporate-editorial · Be Vietnam Pro · brand/neutral
===================================================== */

body.page-about {
	--brand-50: #F4FCFE;
	--brand-100: #EAF8FD;
	--brand-200: #D0F1FB;
	--brand-300: #AEE6F8;
	--brand-400: #75D5F3;
	--brand-500: #2ABEEC;
	--brand-600: #23A0C6;
	--brand-700: #1D81A0;
	--brand-800: #17677F;
	--brand-900: #114C5E;
	--brand-950: #0B313D;

	--neutral-50: #F8F8F9;
	--neutral-100: #F1F1F3;
	--neutral-200: #E1E0E4;
	--neutral-300: #CCCAD1;
	--neutral-400: #A7A5B0;
	--neutral-500: #787486;
	--neutral-600: #656171;
	--neutral-700: #524F5B;
	--neutral-800: #413F48;
	--neutral-900: #302E36;
	--neutral-950: #1F1E23;

	--color-ink: var(--neutral-950);
	--color-ink-70: var(--neutral-600);
	--color-bg: #FFFFFF;
	--color-surface: var(--neutral-50);
	--color-brand: var(--brand-500);
	--color-accent: var(--brand-600);
	--color-accent-hover: var(--brand-700);
	--color-line: var(--neutral-200);
	--color-inverse: #FFFFFF;

	--type-display: clamp(40px, 5.2vw, 72px);
	--type-h1: clamp(36px, 5vw, 56px);
	--type-h2: clamp(24px, 2.8vw, 32px);
	--type-h3: clamp(20px, 1.6vw, 22px);
	--type-body-lg: clamp(18px, 1.4vw, 20px);
	--type-body: 16px;
	--type-caption: 13px;
	--type-stat: clamp(40px, 4vw, 56px);
	--type-section-lead: clamp(22px, 2.6vw, 32px);

	--about-pad: clamp(20px, 4vw, 56px);
	--about-max: 1280px;
	--about-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--about-space: clamp(72px, 10vw, 120px);

	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font);
}

body.page-about .h2-nav:not(.is-scrolled) {
	border-bottom-color: transparent;
	background: transparent;
}

.about-page {
	font-family: var(--font);
}

.about-page .container {
	max-width: var(--about-max);
	padding-left: var(--about-pad);
	padding-right: var(--about-pad);
}

.about-page .cyan,
.about-hero-em,
.about-title-lead {
	color: var(--color-brand);
}

/* —— Shared type —— */
.about-eyebrow {
	display: inline-block;
	font-size: var(--type-caption);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.4;
	color: var(--color-brand);
	text-transform: uppercase;
}

.about-section--light .about-eyebrow {
	color: var(--color-accent);
}

.about-page :is(h2, h3.taj-h2) {
	font-family: inherit;
	font-size: var(--type-h1);
	font-weight: 800;
	line-height: 1.2;
	min-height: 0;
	text-transform: uppercase;
	color: inherit;
}

.about-section-lead {
	margin: 0;
	font-size: var(--type-section-lead);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--color-brand);
}

.about-section-lead span {
	display: block;
}

.about-page h3 {
	font-family: inherit;
	font-size: var(--type-h3);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
}

/* =====================================================
   1. HERO — full-bleed dark (Home composition)
===================================================== */
.about-hero {
	position: relative;
	isolation: isolate;
	width: 100%;
	display: grid;
	overflow: hidden;
	background: #1F1E23;
	color: var(--color-inverse);
}

.about-hero-media {
	position: relative;
	grid-area: 1 / 1;
	z-index: 0;
	width: 100%;
	aspect-ratio: 2 / 1;
	min-height: 100%;
	pointer-events: none;
}

.about-hero-media :is(img, video) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
	display: block;
}

.about-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg,
			rgba(8, 8, 12, 0.72) 0%,
			rgba(8, 8, 12, 0.35) 38%,
			rgba(8, 8, 12, 0.12) 58%,
			rgba(8, 8, 12, 0.28) 100%),
		linear-gradient(180deg,
			rgba(8, 8, 12, 0.45) 0%,
			transparent 28%,
			transparent 62%,
			rgba(8, 8, 12, 0.55) 100%);
}

.about-hero-frame {
	position: relative;
	grid-area: 1 / 1;
	z-index: 2;
	width: 100%;
	max-width: var(--about-max);
	margin: 0 auto;
	padding: calc(var(--h2-nav-h, 72px) + clamp(12px, 2vw, 36px)) var(--about-pad) clamp(28px, 3vw, 48px);
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	justify-items: center;
	align-items: center;
	gap: clamp(16px, 2vw, 28px);
	height: auto;
	min-height: 100%;
}

.about-hero-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	align-self: center;
	justify-self: start;
	min-width: 0;
	width: min(920px, 100%);
	max-width: min(920px, 100%);
	padding-top: 0;
}

.about-hero-copy h1 {
	margin: 0;
	min-height: 0;
	line-height: 1.08;
	font-family: var(--font);
	font-size: clamp(28px, 4.6vw, 60px);
	font-weight: 800;
	text-transform: uppercase;
	color: #1F1E23;
	text-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

.about-hero-copy p,
.about-hero-tagline {
	margin: clamp(8px, 1.4vw, 20px) 0 0;
	font-size: clamp(15px, 1.8vw, 28px);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: #1F1E23;
}

.about-hero-copy p + p {
	margin-top: 0.4em;
}

.about-hero-aside {
	justify-self: end;
	align-self: end;
	min-width: 0;
	width: min(420px, 100%);
	max-width: 420px;
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.4vw, 16px);
	padding-bottom: 0;
}

.about-hero-proof {
	margin: 0;
	font-size: clamp(13px, 1.15vw, 16px);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.about-hero-proof p {
	margin: 0;
}

.about-hero-proof p + p {
	margin-top: 0.6em;
}

.about-hero-proof a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.about-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 100%;
}

.about-hero-actions .h2-btn {
	max-width: 100%;
}


/* =====================================================
   2. ORIGIN — full-bleed world communication
===================================================== */
.about-origin {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(96px, 14vw, 160px) 0;
	background: #e8f2fb;
	color: var(--color-ink);
}

.about-origin-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.about-origin-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
	display: block;
	transform: scale(1);
}

.about-origin-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg,
			rgba(232, 242, 251, 0.72) 0%,
			rgba(232, 242, 251, 0.35) 38%,
			rgba(232, 242, 251, 0.08) 58%,
			transparent 78%),
		linear-gradient(180deg,
			rgba(232, 242, 251, 0.28) 0%,
			transparent 35%,
			transparent 70%,
			rgba(232, 242, 251, 0.35) 100%);
}

.about-origin-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--about-max);
	margin: 0 auto;
	padding: 0 var(--about-pad);
}

.about-origin-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	max-width: 34em;
	padding: 8px 0;
}

.about-origin-copy :is(h2, h3.taj-h2) {
	margin: 0 0 4px;
	font-size: clamp(48px, 7.5vw, 64px);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: var(--color-ink);
	max-width: none;
}

.about-origin-lead {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-ink);
}

.about-origin-statement {
	margin: 12px 0 0;
	padding-top: 20px;
	background: linear-gradient(
		90deg,
		rgba(42, 190, 236, 0) 0%,
		#2abeec 40%,
		rgba(42, 190, 236, 0) 100%
	) top left / min(220px, 100%) 1px no-repeat;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--color-ink);
}

.about-origin-copy > p:last-child {
	margin: 0;
	font-size: var(--type-body-lg);
	font-weight: 400;
	line-height: 1.65;
	color: var(--color-ink-70);
	max-width: 42ch;
}

/* =====================================================
   3. PHILOSOPHY — dark
===================================================== */
.about-philosophy {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: var(--about-space) 0;
	background: linear-gradient(180deg, #1F1E23 0%, #1F1E23 100%);
	color: var(--color-inverse);
	text-align: center;
}

/* Uniform cyan grid — same motif as CTA, one continuous spacing (no seam). */
.about-philosophy-dots {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.about-philosophy-dots__grid {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		circle,
		rgba(var(--cyan-rgb, 42, 190, 236), 0.48) 1.2px,
		transparent 1.45px
	);
	background-size: 14px 14px;
	background-position: center;
	background-repeat: repeat;
	-webkit-mask-image: linear-gradient(
		180deg,
		transparent 0%,
		rgba(0, 0, 0, 0.55) 12%,
		#000 28%,
		#000 72%,
		rgba(0, 0, 0, 0.55) 88%,
		transparent 100%
	);
	mask-image: linear-gradient(
		180deg,
		transparent 0%,
		rgba(0, 0, 0, 0.55) 12%,
		#000 28%,
		#000 72%,
		rgba(0, 0, 0, 0.55) 88%,
		transparent 100%
	);
}

.about-philosophy-inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 0 var(--about-pad);
}

.about-philosophy :is(h2, h3.taj-h2) {
	margin: 0;
	color: var(--color-inverse);
}

.about-philosophy .about-section-lead {
	color: var(--color-brand);
	max-width: 22em;
}

.about-philosophy-lines {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 8px;
	width: 100%;
}

.about-reveal-line {
	margin: 0;
	font-size: var(--type-h2);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--color-inverse);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s var(--about-ease), transform 0.7s var(--about-ease);
}

.about-philosophy-lines.is-in .about-reveal-line:nth-child(1) { transition-delay: 0s; opacity: 1; transform: none; }
.about-philosophy-lines.is-in .about-reveal-line:nth-child(2) { transition-delay: 0.16s; opacity: 1; transform: none; }
.about-philosophy-lines.is-in .about-reveal-line:nth-child(3) { transition-delay: 0.32s; opacity: 1; transform: none; }

.about-philosophy-note {
	margin: 0 auto;
	font-size: var(--type-body-lg);
	font-weight: 400;
	line-height: 1.6;
	color: var(--neutral-300);
	max-width: 48ch;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.7s ease 0.48s, transform 0.7s ease 0.48s;
}

.about-philosophy-lines.is-in .about-philosophy-note {
	opacity: 1;
	transform: none;
}

/* =====================================================
   4. VALUES — light
===================================================== */
.about-values {
	position: relative;
	padding: var(--about-space) 0;
	overflow: hidden;
	background: var(--color-bg);
	color: var(--color-ink);
}

.about-values-intro {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: end;
	margin-bottom: clamp(40px, 5vw, 64px);
}

.about-values-intro :is(h2, h3.taj-h2) {
	margin: 0 0 18px;
	color: #1F1E23;
}

.about-values-intro p {
	margin: 0;
	font-size: var(--type-body);
	line-height: 1.6;
	color: var(--color-ink-70);
	max-width: 52ch;
}

/* =====================================================
   5. DIFF — dark
===================================================== */
.about-diff {
	position: relative;
	padding: var(--about-space) 0;
	overflow: hidden;
	background: var(--neutral-950);
	color: var(--color-inverse);
}

.about-diff-intro {
	max-width: 820px;
	margin: 0 0 clamp(40px, 5vw, 64px);
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.about-diff-intro :is(h2, h3.taj-h2) {
	margin: 0;
	min-height: 0;
	color: var(--color-inverse);
}

.about-diff-intro :is(h2, h3.taj-h2) + :is(h2, h3.taj-h2) {
	margin-top: 0;
}

.about-diff-intro .about-section-lead {
	color: var(--color-inverse);
}

.about-diff-intro p {
	margin: 18px 0 0;
	font-size: var(--type-body);
	line-height: 1.6;
	color: var(--neutral-300);
	max-width: 58ch;
}

.about-diff-intro p + p {
	margin-top: 0.4em;
}

/* —— Expand image panels —— */
.about-expand-row {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: stretch;
	min-height: 440px;
}

.about-expand-card {
	position: relative;
	flex: 1 1 0%;
	min-width: 0;
	border-radius: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 12px;
	padding: 32px 24px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: flex-grow 0.55s var(--about-ease), box-shadow 0.45s ease;
	outline: none;
	color: var(--color-inverse);
}

.about-expand-card:hover,
.about-expand-card:focus-visible,
.about-expand-card.is-open {
	flex-grow: 1.55;
	box-shadow: 0 24px 60px rgba(31, 30, 35, 0.35);
}

.about-expand-card:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 3px;
}

.about-expand-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(31, 30, 35, 0.08) 0%,
		rgba(31, 30, 35, 0.5) 48%,
		rgba(31, 30, 35, 0.92) 100%
	);
	pointer-events: none;
}

.about-expand-overlay--teal {
	background: linear-gradient(
		180deg,
		rgba(35, 160, 198, 0.35) 0%,
		rgba(31, 30, 35, 0.45) 42%,
		rgba(31, 30, 35, 0.92) 100%
	);
}

.about-expand-card h3 {
	position: relative;
	margin: 0;
	font-size: var(--type-h3);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-inverse);
	text-align: left;
}

.about-expand-body {
	position: relative;
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transform: translateY(10px);
	transition:
		grid-template-rows 0.55s var(--about-ease),
		opacity 0.45s ease 0.08s,
		transform 0.45s ease 0.08s;
}

.about-expand-body p {
	margin: 0;
	overflow: hidden;
	min-height: 0;
	font-size: 15px;
	line-height: 1.6;
	text-align: left;
	color: var(--neutral-300);
}

.about-expand-card:hover .about-expand-body,
.about-expand-card:focus-visible .about-expand-body,
.about-expand-card.is-open .about-expand-body {
	grid-template-rows: 1fr;
	opacity: 1;
	transform: none;
}

/* =====================================================
   6. METHOD (legacy safety)
===================================================== */
.about-method {
	padding: var(--about-space) 0;
	background: var(--neutral-950);
	color: var(--color-inverse);
}

.about-method-intro {
	max-width: 790px;
	margin: 0 auto 64px;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.about-method-intro p {
	margin: 0;
	font-size: var(--type-body);
	line-height: 1.6;
	color: var(--neutral-300);
}

.about-process {
	position: relative;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 960px;
	display: flex;
	flex-direction: column;
}

.about-process::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 20px;
	bottom: 20px;
	width: 2px;
	margin-left: -1px;
	background: linear-gradient(
		180deg,
		transparent,
		var(--color-brand) 12%,
		var(--color-brand) 88%,
		transparent
	);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 1.1s var(--about-ease);
}

.about-process.is-drawn::before {
	transform: scaleY(1);
}

.about-process-step {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 60px 1fr;
	align-items: flex-start;
	padding-bottom: 44px;
}

.about-process-node {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	grid-column: 2;
}

.about-process-node span {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--neutral-950);
	box-shadow: inset 0 0 0 2px var(--color-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--color-brand);
}

.about-process-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 4px;
}

.about-process-side--spacer {
	visibility: hidden;
	pointer-events: none;
}

.about-process-step--right .about-process-side:not(.about-process-side--spacer) {
	grid-column: 3;
	padding-left: 40px;
	align-items: flex-start;
	text-align: left;
}

.about-process-step--right .about-process-side--spacer { grid-column: 1; }

.about-process-step--left .about-process-side:not(.about-process-side--spacer) {
	grid-column: 1;
	padding-right: 40px;
	align-items: flex-end;
	text-align: right;
}

.about-process-step--left .about-process-side--spacer { grid-column: 3; }

.about-process-label {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	background: var(--color-accent);
	padding: 10px 22px;
	font-size: var(--type-caption);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--color-inverse);
	width: fit-content;
}

.about-process-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
}

.about-process-step--left .about-process-chips {
	justify-content: flex-end;
}

.about-process-chips span {
	border-radius: 999px;
	background: rgba(42, 190, 236, 0.1);
	box-shadow: inset 0 0 0 1px rgba(42, 190, 236, 0.28);
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 400;
	color: var(--neutral-300);
}

/* =====================================================
   7. TEAM — light surface
===================================================== */
.about-team {
	padding: var(--about-space) 0 clamp(48px, 6vw, 72px);
	background: var(--color-surface);
	color: var(--color-ink);
}

.about-team-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
	gap: 20px;
	align-items: center;
}

.about-team-description {
	margin: 36px 0;
	font-size: var(--type-body);
	line-height: 1.6;
	color: var(--color-ink-70);
}

.about-team-copy {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.about-team-copy :is(h2, h3.taj-h2) {
	margin: 0;
	color: #1F1E23;
}

.about-team-media {
	margin: 0;
}

.about-team-media img {
	width: 100%;
	aspect-ratio: 1440 / 700;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

.about-team-stats {
	border-radius: 0;
	background: var(--color-bg);
	box-shadow: inset 0 0 0 1px var(--color-line);
	padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 48px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 48px);
	align-items: center;
}

.about-team-stats-lead {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.about-team-stats h3 {
	margin: 0;
	font-size: var(--type-h2);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--color-ink);
}

.about-team-stats-data {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.about-team-count {
	margin: 0;
	font-size: var(--type-stat);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--color-ink);
}

.about-team-count strong {
	font-size: inherit;
	font-weight: 600;
	color: var(--color-brand);
}

/* "85++" đập theo nhịp tim (2 nhịp ngắn rồi nghỉ); trái tim chỉ ôm phần số, viền trái tim lan ra. */
.about-team-count strong {
	position: relative;
	z-index: 0;
	display: inline-block;
	margin: 1.4em 0.4em 0 0;
	vertical-align: middle;
	transform-origin: center center;
	animation: about-team-beat 1.4s ease-in-out infinite;
}

.about-team-count-num {
	position: relative;
	z-index: 0;
	display: inline-block;
}

.about-team-count-num::before,
.about-team-count-num::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(100% + 1.3em);
	aspect-ratio: 24 / 22;
	translate: -50% -44%;
	pointer-events: none;
	z-index: -1;
}

.about-team-count-num::before {
	background: radial-gradient(circle at 50% 45%, rgba(var(--cyan-rgb, 42, 190, 236), 0.32) 35%, rgba(var(--cyan-rgb, 42, 190, 236), 0.14) 80%);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.3 10.4 19.8C4.6 14.6.8 11.1.8 6.8.8 3.3 3.5.7 6.9.7c1.9 0 3.8.9 5.1 2.4C13.3 1.6 15.2.7 17.1.7c3.4 0 6.1 2.6 6.1 6.1 0 4.3-3.8 7.8-9.6 13Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.3 10.4 19.8C4.6 14.6.8 11.1.8 6.8.8 3.3 3.5.7 6.9.7c1.9 0 3.8.9 5.1 2.4C13.3 1.6 15.2.7 17.1.7c3.4 0 6.1 2.6 6.1 6.1 0 4.3-3.8 7.8-9.6 13Z'/%3E%3C/svg%3E") center / contain no-repeat;
	animation: about-team-halo 1.4s ease-in-out infinite;
}

.about-team-count-num::after {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.3 10.4 19.8C4.6 14.6.8 11.1.8 6.8.8 3.3 3.5.7 6.9.7c1.9 0 3.8.9 5.1 2.4C13.3 1.6 15.2.7 17.1.7c3.4 0 6.1 2.6 6.1 6.1 0 4.3-3.8 7.8-9.6 13Z' fill='none' stroke='rgb(42,190,236)' stroke-width='.9' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / contain no-repeat;
	filter: drop-shadow(0 0 6px rgba(var(--cyan-rgb, 42, 190, 236), 0.5));
	animation: about-team-ping 1.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes about-team-beat {
	0%,
	40%,
	100% {
		transform: scale(1);
	}

	12% {
		transform: scale(1.08);
	}

	26% {
		transform: scale(1.04);
	}
}

@keyframes about-team-halo {
	0%,
	40%,
	100% {
		opacity: 0.5;
		transform: scale(0.92);
	}

	12% {
		opacity: 1;
		transform: scale(1.06);
	}

	26% {
		opacity: 0.85;
		transform: scale(1);
	}
}

@keyframes about-team-ping {
	0% {
		opacity: 0.95;
		transform: scale(1);
	}

	70% {
		opacity: 0;
		transform: scale(1.6);
	}

	70.01%,
	100% {
		opacity: 0;
		transform: scale(1);
	}
}

.about-team-breakdown-label {
	display: block;
	margin-bottom: 10px;
	font-size: var(--type-caption);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink);
}

.about-team-breakdown ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.about-team-breakdown li {
	position: relative;
	padding-left: 18px;
	font-size: var(--type-body);
	line-height: 1.5;
	color: var(--color-ink-70);
}

.about-team-breakdown li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-brand);
}

/* =====================================================
   8. TRUST — white
===================================================== */
.about-trust {
	padding: clamp(40px, 5vw, 64px) 0 var(--about-space);
	background: var(--color-bg);
	color: var(--color-ink);
}

.about-trust-intro {
	max-width: 780px;
	margin: 0 0 clamp(36px, 5vw, 56px);
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.about-trust-intro :is(h2, h3.taj-h2) {
	margin: 0;
	color: var(--color-ink);
}

.about-trust-intro p {
	margin: 0;
	font-size: var(--type-body);
	line-height: 1.6;
	color: var(--color-ink-70);
	max-width: 58ch;
}

.about-trust-marquee {
	position: relative;
	overflow: hidden;
	width: 100%;
	mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.about-trust-marquee-track {
	display: flex;
	width: max-content;
	animation: about-trust-scroll var(--about-trust-duration, 36s) linear infinite;
	will-change: transform;
}

.about-trust-marquee:hover .about-trust-marquee-track {
	animation-play-state: paused;
}

.about-trust-marquee-set {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-right: 20px;
	flex-shrink: 0;
}

.about-trust-logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 88px;
	padding: 16px 20px;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
}

.about-trust-logo img {
	max-width: 100%;
	max-height: 48px;
	width: auto;
	height: auto;
	object-fit: contain;
}

@keyframes about-trust-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* CTA uses the shared home-2 component. */

body.page-services,
body.page-careers,
body.page-insights {
	background: var(--h2-bg, #1F1E23);
	--cyan: #2abeec;
	--cyan-dim: #1aa8d4;
	--cyan-glow: rgba(42, 190, 236, 0.35);
	--text-muted: #b8b6bd;
	--radius: 0px;
	--radius-lg: 0px;
}

body.page-projects {
	background: #1F1E23 url('../images/bg.png') top center / 100% 100% no-repeat;
	--cyan: #2abeec;
	--cyan-dim: #1aa8d4;
	--cyan-glow: rgba(42, 190, 236, 0.35);
	--text-muted: #b8b6bd;
	--radius: 0px;
	--radius-lg: 0px;
}

/* =====================================================
   Responsive
===================================================== */
@media (max-width: 1024px) {
	.about-hero-copy h1 {
		font-size: clamp(28px, 4.6vw, 56px);
	}

	.about-team-top,
	.about-values-intro {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.about-origin-copy {
		max-width: 28em;
	}

	.about-origin-scrim {
		background:
			linear-gradient(90deg,
				rgba(232, 242, 251, 0.88) 0%,
				rgba(232, 242, 251, 0.55) 42%,
				rgba(232, 242, 251, 0.12) 68%,
				transparent 88%),
			linear-gradient(180deg,
				rgba(232, 242, 251, 0.35) 0%,
				transparent 30%,
				transparent 65%,
				rgba(232, 242, 251, 0.45) 100%);
	}

	.about-expand-row {
		flex-wrap: wrap;
		min-height: 0;
	}

	.about-expand-card {
		flex: 1 1 calc(50% - 8px);
		min-height: 280px;
	}

	.about-team-stats {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media (min-width: 1200px) {
	.about-hero-frame {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
		grid-template-rows: 1fr auto;
		align-items: end;
		justify-items: stretch;
		column-gap: clamp(40px, 5vw, 80px);
	}

	.about-hero-copy {
		grid-column: 1;
		grid-row: 2;
		align-self: end;
		justify-self: start;
		width: auto;
		max-width: 720px;
	}

	.about-hero-aside {
		grid-column: 2;
		grid-row: 2;
		align-self: end;
		justify-self: end;
		width: 100%;
		max-width: 420px;
	}
}

@media (max-width: 900px) {
	.about-hero-frame {
		gap: clamp(16px, 2vw, 20px);
		padding-top: calc(var(--h2-nav-h, 72px) + clamp(12px, 2vw, 16px));
		padding-bottom: clamp(28px, 3vw, 36px);
	}

	.about-hero-copy {
		align-self: center;
		justify-self: start;
		width: 100%;
		max-width: 100%;
	}

	.about-hero-copy h1 {
		font-size: clamp(36px, 10.3vw, 54px);
	}

	.about-hero-aside {
		align-self: stretch;
		justify-self: stretch;
		width: 100%;
		max-width: none;
	}

	.about-hero-media :is(img, video) {
		object-position: 72% center;
	}
}

@media (max-width: 767px) {
	.about-hero-media {
		aspect-ratio: auto;
		min-height: 100vh;
		min-height: 100svh;
	}

	.about-hero-frame {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 88px 1fr;
		align-content: stretch;
		align-items: stretch;
		gap: 0;
		min-height: 100vh;
		min-height: 100svh;
		padding-top: calc(var(--h2-nav-h, 72px) + 12px);
	}

	.about-hero-copy {
		grid-column: 1;
		grid-row: 1;
		align-self: end;
		justify-self: start;
		width: 100%;
		max-width: 100%;
	}

	.about-hero-copy h1 {
		font-size: clamp(36px, 10.3vw, 54px);
	}

	.about-hero-aside {
		grid-column: 1;
		grid-row: 3;
		align-self: start;
		justify-self: start;
		width: 100%;
		max-width: none;
	}
}

@media (max-width: 768px) {
	body.page-about {
		--type-caption: 12px;
	}

	.about-hero-frame {
		padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
		min-width: 0;
	}

	.about-hero-copy {
		padding-top: 0;
		padding-bottom: 0;
		min-width: 0;
		width: 100%;
		max-width: 100%;
	}

	.about-hero-copy h1 {
		font-size: clamp(36px, 10.3vw, 54px);
		max-width: 100%;
	}

	.about-hero-copy p,
	.about-hero-tagline {
		font-size: 17px;
	}

	.about-hero-aside {
		min-width: 0;
		max-width: 100%;
		padding-bottom: 0;
	}

	.about-hero-actions {
		flex-wrap: wrap;
		gap: 12px;
		width: 100%;
	}

	.about-hero-actions .h2-btn {
		flex: 1 1 auto;
		padding-left: 20px;
		padding-right: 20px;
	}

	.about-origin,
	.about-values,
	.about-diff,
	.about-method,
	.about-team,
	.about-philosophy {
		padding-top: 72px;
		padding-bottom: 72px;
	}

	.about-origin-media img {
		object-position: 72% center;
	}

	.about-origin-copy {
		max-width: 100%;
	}

	.about-origin-copy :is(h2, h3.taj-h2) {
		font-size: var(--type-h1);
	}

	.about-origin-scrim {
		background:
			linear-gradient(180deg,
				rgba(232, 242, 251, 0.82) 0%,
				rgba(232, 242, 251, 0.55) 45%,
				rgba(232, 242, 251, 0.35) 100%),
			linear-gradient(90deg,
				rgba(232, 242, 251, 0.55) 0%,
				transparent 70%);
	}

	.about-expand-card {
		flex: 1 1 100%;
		min-height: 240px;
	}

	.about-expand-card:hover,
	.about-expand-card:focus-visible,
	.about-expand-card.is-open {
		flex-grow: 1;
	}

	.about-process::before {
		left: 28px;
		margin-left: 0;
	}

	.about-process-step {
		grid-template-columns: 56px 1fr;
		gap: 0 16px;
	}

	.about-process-side--spacer {
		display: none;
	}

	.about-process-node {
		grid-column: 1;
		justify-content: flex-start;
	}

	.about-process-step--left .about-process-side:not(.about-process-side--spacer),
	.about-process-step--right .about-process-side:not(.about-process-side--spacer) {
		grid-column: 2;
		padding: 4px 0 0;
		align-items: flex-start;
		text-align: left;
	}

	.about-process-step--left .about-process-chips {
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.about-hero-copy h1,
	.about-hero-copy p,
	.about-hero-tagline,
	.about-hero-aside,
	.about-reveal-line,
	.about-philosophy-note,
	.about-expand-card,
	.about-expand-body,
	.about-process::before,
	.about-origin-media img,
	.about-team-count strong,
	.about-team-count-num::before,
	.about-team-count-num::after {
		transition: none !important;
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	.about-expand-body {
		grid-template-rows: 1fr;
	}

	.about-trust-marquee-track {
		animation: none;
	}

	/* Không chạy thì chỉ cần 1 bộ logo để cuộn tay. */
	.about-trust-marquee-set[aria-hidden="true"],
	.about-trust-logo.is-repeat {
		display: none;
	}

	.about-trust-marquee {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		mask-image: none;
		-webkit-mask-image: none;
	}
}

/* Ảnh nền riêng cho mobile (inline style nên cần !important) */
@media (max-width: 767px) {
	.about-expand-card.has-mobile-bg {
		background-image: var(--about-card-bg-mobile) !important;
	}
}

/* Mobile hero: tiêu đề giữ nguyên chỗ; khối đoạn phụ + nút dồn xuống đáy, chừa chỗ cho nút cookie (trái) và nút chat (phải). */
@media (max-width: 767px) {
	.about-hero-aside {
		align-self: end;
		margin-bottom: 80px;
	}
}

/* =====================================================
   Ảnh tỉ lệ cố định — cao theo chiều rộng (không theo px/vh)
   để zoom trình duyệt hay màn hình độ phân giải thấp không làm đổi vùng cắt ảnh.
===================================================== */

/* Origin: section 16:9, chữ canh giữa theo chiều dọc. Chữ dài hơn khung thì section tự cao thêm. */
@media (min-width: 768px) {
	.about-origin {
		display: flex;
		align-items: center;
		/* min-height thay vì aspect-ratio: chữ dài hơn khung luôn đẩy section cao thêm. */
		min-height: 56.25vw;
		padding-top: clamp(48px, 6vw, 96px);
		padding-bottom: clamp(48px, 6vw, 96px);
	}
}

/* Tiêu đề + dòng dẫn: desktop vẫn là 2 mục trong cột chữ như cũ. */
.about-origin-head {
	display: contents;
}

/* Mobile: ảnh là khối 16:9 phía trên; tiêu đề + dòng dẫn đè lên đáy ảnh, phần chữ còn lại nằm dưới ảnh. */
@media (max-width: 767px) {
	.about-origin {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		padding-top: 0;
	}

	.about-origin-media,
	.about-origin-scrim {
		grid-area: 1 / 1;
		position: relative;
		inset: auto;
		aspect-ratio: 16 / 9;
	}

	.about-origin-media img {
		object-position: center center;
	}

	.about-origin-scrim {
		background: linear-gradient(90deg,
			rgba(232, 242, 251, 0.85) 0%,
			rgba(232, 242, 251, 0.55) 45%,
			rgba(232, 242, 251, 0) 80%);
	}

	.about-origin-inner,
	.about-origin-copy {
		display: contents;
	}

	.about-origin-head {
		grid-area: 1 / 1;
		z-index: 2;
		align-self: center;
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 0 var(--about-pad);
	}

	.about-origin-copy > p {
		margin-left: var(--about-pad);
		margin-right: var(--about-pad);
	}

	/* Mobile không cần dòng kẻ xanh phía trên. */
	.about-origin-statement {
		margin-top: 32px;
		padding-top: 0;
		background: none;
	}

	.about-origin-copy > p:last-child {
		margin: 18px var(--about-pad) 0;
	}
}

/* Thẻ Values / Why: chiều cao theo chiều rộng hàng; hover vẫn nới rộng thẻ như cũ. */
@media (min-width: 1025px) {
	.about-expand-row {
		min-height: 0;
		aspect-ratio: 32 / 11;
	}
}

@media (max-width: 1024px) {
	.about-expand-card {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 767px) {
	.about-expand-card {
		aspect-ratio: 4 / 3;
	}
}