/* About / Gioi thieu page layout */

/* ========== Hero ========== */
/* Nền + màu chữ inverse lấy từ .hero / .hero-bg (theme.css). Chỉ layout trang. */
.about-hero{
	--about-hero-cool: color-mix(in srgb,var(--color-brand-muted) 32%,#9b8af5);
	position:relative;
	overflow:hidden;
	isolation:isolate
}
.about-hero-bg{
	position:absolute;inset:0;z-index:-1;
	animation:aboutHeroDrift 18s ease-in-out infinite alternate
}
@keyframes aboutHeroDrift{
	from{filter:saturate(1);transform:scale(1)}
	to{filter:saturate(1.04);transform:scale(1.015)}
}
.about-hero::before,
.about-hero::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	pointer-events:none
}
.about-hero::before{
	background:radial-gradient(ellipse 58% 52% at 48% 46%, color-mix(in srgb,var(--color-brand-muted) 16%,transparent), transparent 68%)
}
.about-hero::after{
	background:radial-gradient(120% 100% at 50% 42%, transparent 44%, color-mix(in srgb,var(--color-bg-inverse) 46%,transparent) 100%)
}
.about-hero-visual{
	position:absolute;
	top:0;right:0;bottom:0;
	width:58%;
	z-index:0;
	pointer-events:none;
	user-select:none;
	opacity:.24;
	background:
		radial-gradient(ellipse 70% 62% at 18% 52%, color-mix(in srgb,var(--color-brand-muted) 42%,transparent), transparent 58%),
		radial-gradient(ellipse 62% 78% at 86% 10%, color-mix(in srgb,var(--about-hero-cool) 34%,transparent), transparent 56%);
	-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%);
	mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%)
}
[data-theme="dark"] .about-hero-visual{
	background:url("../images/about/about-hero-growth-bg.webp") no-repeat;
	background-size:cover;
	background-position:12% 46%
}

.about-hero-main{
	position:relative;
	z-index:1;
	padding:clamp(3.5rem,7vw,5.75rem) 0 clamp(2.25rem,4vw,3.5rem)
}
.about-hero-copy{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:clamp(.7rem,1.6vw,1.1rem);
	max-width:46rem;
	width:100%;
	margin-inline:auto;
	text-align:center;
	position:relative;
	z-index:1
}
.about-hero .eyebrow{margin:0}
.about-hero h1{
	margin:0;
	font-size:clamp(2.35rem,5vw,3.5rem);
	line-height:1.08;
	font-weight:800;
	letter-spacing:-.025em;
	text-wrap:unset;
	max-width:none;
	text-align:center
}
.about-hero-dek{
	margin:0;
	max-width:38rem;
	font-family:var(--font-display);
	font-size:clamp(1.2rem,2.3vw,1.5rem);
	font-weight:700;
	line-height:1.35;
	letter-spacing:-.01em;
	text-wrap:pretty;
	color:var(--color-brand-muted)
}
.about-hero-accent{
	background:linear-gradient(118deg,var(--color-brand) 0%,var(--color-brand-muted) 48%,var(--color-text-brand) 100%);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-box-decoration-break:clone;
	box-decoration-break:clone;
	color:var(--color-brand-muted);
	-webkit-text-fill-color:transparent
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
	.about-hero-accent{color:var(--color-brand-muted);-webkit-text-fill-color:unset}
}
.about-hero .lead{
	margin:0 auto;
	max-width:40rem;
	font-size:clamp(1.06rem,2vw,1.2rem);
	line-height:1.65;
	text-wrap:pretty;
	text-align:center
}
.about-hero .hero-actions{
	margin-top:.15rem;
	justify-content:center;
	gap:.65rem
}
.about-hero .btn{
	padding:.58rem 1.05rem;
	font-size:.9rem;
	font-weight:600
}
/* Stats strip - compact closing band */
.about-stats{
	position:relative;
	z-index:1;
	border-top:1px solid var(--color-border);
	background:var(--color-bg-elevated);
	color:var(--color-text)
}
.about-stats-inner{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:0;
	align-items:stretch
}
.about-stat{
	display:flex;
	align-items:center;
	gap:.8rem;
	padding:.95rem 1rem;
	border-right:1px solid var(--color-border)
}
.about-stat:last-child{border-right:0}
.about-stat-ic{
	flex:0 0 auto;
	align-self:center;
	width:2.75rem;height:2.75rem;
	display:grid;place-items:center;
	color:var(--color-brand-muted);
	opacity:.82
}
.about-stat-ic svg{width:1.75rem;height:1.75rem;display:block}
.about-stat > div{
	display:flex;
	flex-direction:column;
	justify-content:center;
	min-width:0
}
.about-stat strong{
	display:block;
	font-family:var(--font-display);
	font-size:1.05rem;
	font-weight:800;
	line-height:1.1;
	color:var(--color-text)
}
.about-stat span{
	display:block;
	margin-top:.1rem;
	font-size:.78rem;
	color:var(--color-text-secondary);
	line-height:1.25
}

/* Story journey - 3 chặng */
.story-section{
	--story-rail: 3.25rem;
	--story-rail-gap: .9rem;
	--story-rail-x: calc(var(--story-rail) - .32rem);
	position:relative;
	overflow-x:clip;
	background:var(--color-bg-subtle);
	border-top:1px solid var(--color-border);
	border-bottom:1px solid var(--color-border)
}
[data-theme="dark"] .story-section{
	background:var(--color-bg-subtle);
	border-color:rgba(250,250,249,.08)
}
.story-layout{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:clamp(1.75rem,3.5vw,3rem);
	align-items:start
}
.story-intro{
	position:sticky;
	top:6rem;
	padding-block:.25rem;
	max-width:none
}
.story-intro .eyebrow{
	display:inline-block;
	margin:0 0 .7rem;
	visibility:visible
}
.story-intro h2{
	margin:0 0 .85rem;
	font-size:clamp(1.55rem,2.4vw,2.15rem);
	line-height:1.18;
	color:var(--color-text);
	max-width:none;
	text-wrap:pretty;
	word-break:normal;
	overflow-wrap:normal;
	hyphens:none
}
.story-lead{
	margin:0;
	max-width:none;
	color:color-mix(in srgb,var(--color-text-secondary) 72%,var(--color-text));
	font-size:1rem;
	line-height:1.62;
	text-wrap:unset;
	word-break:normal;
	overflow-wrap:normal;
	hyphens:none
}
[data-theme="dark"] .story-lead{
	color:color-mix(in srgb,var(--color-text-secondary) 82%,var(--color-text))
}

.story-journey{
	position:relative;
	min-width:0;
	max-width:none;
	width:100%;
	justify-self:stretch
}
/* Một đường timeline liên tục: 01 → quote */
.story-journey::before{
	content:"";
	position:absolute;
	left:var(--story-rail-x);
	top:1.35rem;
	bottom:2.4rem;
	width:2px;
	margin-left:-1px;
	border-radius:999px;
	background:linear-gradient(
		180deg,
		var(--color-brand) 0%,
		color-mix(in srgb,var(--color-brand) 45%,#64748b) 52%,
		color-mix(in srgb,var(--color-brand) 20%,#0f766e) 100%
	);
	opacity:.42;
	pointer-events:none;
	z-index:0
}
[data-theme="dark"] .story-journey::before{
	opacity:.5;
	background:linear-gradient(
		180deg,
		var(--color-brand-muted) 0%,
		color-mix(in srgb,var(--color-brand) 55%,#94a3b8) 55%,
		color-mix(in srgb,var(--color-brand) 25%,#14b8a6) 100%
	)
}

.story-timeline{
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
	display:flex;
	flex-direction:column;
	gap:1.1rem
}

.story-stage{
	position:relative;
	z-index:1;
	display:grid;
	grid-template-columns:var(--story-rail) minmax(0,1fr);
	gap:var(--story-rail-gap);
	align-items:start;
	padding:0
}
.story-stage-marker{
	position:relative;
	z-index:2;
	display:block;
	width:var(--story-rail);
	height:2.45rem;
	margin-top:.7rem;
	align-self:start;
	overflow:visible
}
/* Chấm mốc trên đường rail - số nằm bên trái, không bị đường cắt */
.story-stage-marker::after{
	content:"";
	position:absolute;
	left:var(--story-rail-x);
	top:50%;
	translate:-50% -50%;
	width:.58rem;
	height:.58rem;
	border-radius:50%;
	background:var(--color-brand);
	box-shadow:0 0 0 .3rem var(--color-bg-subtle);
	z-index:2;
	pointer-events:none
}
[data-theme="dark"] .story-stage-marker::after{
	background:var(--color-brand-muted);
	box-shadow:0 0 0 .3rem var(--color-bg-subtle)
}
.story-stage-num{
	position:absolute;
	left:0;
	right:1.2rem;
	top:50%;
	translate:0 -50%;
	z-index:1;
	font-family:var(--font-display);
	font-size:clamp(1.95rem,2.45vw,2.45rem);
	font-weight:800;
	line-height:1;
	letter-spacing:-.03em;
	color:var(--color-brand);
	opacity:.44;
	user-select:none;
	pointer-events:none;
	text-align:right
}
[data-theme="dark"] .story-stage-num{
	color:var(--color-brand-muted);
	opacity:.4
}

.story-stage-body{
	min-width:0;
	background:var(--color-bg-elevated);
	border:1px solid color-mix(in srgb,var(--color-border) 82%,transparent);
	border-radius:calc(var(--radius) - 2px);
	box-shadow:0 4px 14px rgba(28,25,23,.028);
	padding:1.05rem 1.15rem;
	transition:border-color .2s ease,box-shadow .2s ease
}
.story-stage-body h3{
	margin:0 0 .4rem;
	font-size:1.12rem;
	color:var(--color-text)
}
.story-stage-body p{
	margin:0;
	color:color-mix(in srgb,var(--color-text-secondary) 68%,var(--color-text));
	font-size:.96rem;
	line-height:1.58;
	text-wrap:pretty
}
[data-theme="dark"] .story-stage-body{
	background:color-mix(in srgb,var(--color-bg-elevated) 78%,#ffffff);
	border:1px solid rgba(250,250,249,.08);
	box-shadow:none;
	padding:1.05rem 1.15rem
}
[data-theme="dark"] .story-stage-body p{
	color:color-mix(in srgb,var(--color-text-secondary) 88%,var(--color-text))
}
@media (hover:hover) and (min-width:901px){
	.story-stage:hover .story-stage-body{
		border-color:color-mix(in srgb,var(--color-brand) 28%,var(--color-border));
		box-shadow:0 6px 18px rgba(28,25,23,.04)
	}
	[data-theme="dark"] .story-stage:hover .story-stage-body{
		background:color-mix(in srgb,var(--color-bg-elevated) 70%,#ffffff);
		border-color:rgba(250,250,249,.12);
		box-shadow:none;
		margin-inline:0;
		padding-inline:1.15rem
	}
}

.story-stage--accent::after{
	content:"";
	position:absolute;
	inset:8% 4% auto auto;
	width:min(14rem,55%);
	height:65%;
	border-radius:50%;
	background:radial-gradient(circle,var(--color-brand-subtle),transparent 72%);
	opacity:.75;
	pointer-events:none;
	z-index:0
}
[data-theme="dark"] .story-stage--accent::after{opacity:.55;filter:blur(1px)}
.story-stage--accent .story-stage-marker,
.story-stage--accent .story-stage-body{position:relative;z-index:1}

/* Quote thẳng hàng với card (cột nội dung) */
.story-quote{
	position:relative;
	z-index:1;
	margin:1.1rem 0 0 calc(var(--story-rail) + var(--story-rail-gap));
	padding:.95rem 1.15rem;
	border:0;
	border-radius:calc(var(--radius) - 2px);
	background:color-mix(in srgb,var(--color-brand-subtle) 55%,var(--color-bg-elevated));
	color:var(--color-text)
}
.story-quote::before{
	content:"";
	position:absolute;
	left:calc(-1 * (var(--story-rail) + var(--story-rail-gap)) + var(--story-rail-x) - .32rem);
	top:50%;
	translate:0 -50%;
	width:.64rem;
	height:.64rem;
	border-radius:50%;
	background:var(--color-brand);
	box-shadow:
		0 0 0 .28rem var(--color-bg-subtle),
		0 0 0 .45rem color-mix(in srgb,var(--color-brand) 20%,transparent);
	z-index:2
}
.story-quote p{
	margin:0;
	font-size:.98rem;
	line-height:1.55;
	font-style:italic;
	text-wrap:pretty;
	color:var(--color-text)
}
[data-theme="dark"] .story-quote{
	background:color-mix(in srgb,var(--color-brand) 10%,var(--color-bg-elevated));
	border:1px solid rgba(250,250,249,.06)
}
[data-theme="dark"] .story-quote::before{
	box-shadow:
		0 0 0 .28rem var(--color-bg-subtle),
		0 0 0 .45rem color-mix(in srgb,var(--color-brand) 24%,transparent)
}
[data-theme="dark"] .story-quote p{
	color:color-mix(in srgb,var(--color-text-secondary) 70%,var(--color-text))
}
/* ACD meaning - PC: chevron ngang; mobile: chevron doc + muc tieu */
.acd-meaning{
	overflow-x:clip;
	background:var(--color-bg-subtle)
}
[data-theme="dark"] .acd-meaning{
	background:color-mix(in srgb,var(--color-brand) 8%,var(--color-bg))
}
.acd-meaning .section-head p + p{margin-top:.7rem}
.acd-panel{
	--acd-letter: 2.7rem;
	--acd-pad-y: 1.25rem;
	--acd-pad-x: 1.35rem;
	--acd-gap: .8rem;
	--acd-chev: 1.65rem;
	--acd-stem: 1.5rem;
	display:flex;
	flex-direction:column;
	align-items:stretch
}
.acd-panel-track{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	align-items:stretch
}
.acd-node{
	position:relative;
	flex:1 1 0;
	min-width:0;
	display:grid;
	grid-template-columns:var(--acd-letter) minmax(0,1fr);
	column-gap:var(--acd-gap);
	align-items:center;
	padding:var(--acd-pad-y) calc(var(--acd-pad-x) + var(--acd-chev)) var(--acd-pad-y) var(--acd-pad-x);
	background:var(--color-bg-elevated);
	clip-path:polygon(
		0 0,
		calc(100% - var(--acd-chev)) 0,
		100% 50%,
		calc(100% - var(--acd-chev)) 100%,
		0 100%,
		var(--acd-chev) 50%
	);
	filter:drop-shadow(0 0 .8px var(--color-border-strong))
}
.acd-node:nth-child(1){z-index:3}
.acd-node:nth-child(2){z-index:2}
.acd-node:nth-child(3){z-index:1}
.acd-node:first-child{
	clip-path:polygon(
		0 0,
		calc(100% - var(--acd-chev)) 0,
		100% 50%,
		calc(100% - var(--acd-chev)) 100%,
		0 100%
	)
}
.acd-node + .acd-node{
	margin-left:calc(var(--acd-chev) * -.55);
	padding-left:calc(var(--acd-pad-x) + var(--acd-chev) * .35)
}
.acd-node:nth-child(even){
	background:color-mix(in srgb,var(--color-brand-subtle) 92%,var(--color-bg-elevated))
}
.acd-letter{
	grid-column:1;
	align-self:center;
	width:var(--acd-letter);height:var(--acd-letter);
	display:grid;place-items:center;
	border-radius:50%;
	background:color-mix(in srgb,var(--color-bg-elevated) 70%,transparent);
	border:1.5px solid var(--color-brand);
	color:var(--color-brand);
	font-family:var(--font-display);
	font-size:1.28rem;
	font-weight:800;
	line-height:1;
	position:relative;
	z-index:2
}
.acd-node-copy{
	grid-column:2;
	min-width:0
}
.acd-node-copy h3{
	margin:0;
	font-size:1.12rem;
	line-height:1.25;
	color:var(--color-text)
}
.acd-node-copy p{
	margin:.4rem 0 0;
	color:var(--color-text-secondary);
	font-size:.95rem;
	line-height:1.5;
	text-wrap:pretty
}
.acd-goal{
	position:relative;
	margin:var(--acd-stem) 0 0;
	padding:1.15rem 1.4rem 1.25rem;
	text-align:center;
	border-radius:var(--radius);
	background:color-mix(in srgb,var(--color-brand-subtle) 92%,var(--color-bg-elevated));
	border:1px solid color-mix(in srgb,var(--color-brand) 22%,var(--color-border));
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:.28rem
}
.acd-goal::before{
	content:"";
	position:absolute;
	left:50%;
	bottom:100%;
	height:var(--acd-stem);
	border-left:2px dotted color-mix(in srgb,var(--color-brand) 55%,var(--color-border));
	transform:translateX(-50%)
}
.acd-goal-label{
	font-size:.75rem;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--color-text-secondary)
}
.acd-goal-title{
	font-family:var(--font-display);
	font-size:clamp(1.55rem,3.6vw,2.2rem);
	font-weight:800;
	letter-spacing:.04em;
	line-height:1.2;
	text-transform:uppercase;
	color:var(--color-brand)
}
[data-theme="dark"] .acd-letter{
	color:var(--color-brand-muted);
	border-color:var(--color-brand-muted)
}
[data-theme="dark"] .acd-node{
	filter:drop-shadow(0 0 .8px var(--color-border))
}
[data-theme="dark"] .acd-node:nth-child(even){
	background:color-mix(in srgb,var(--color-brand) 18%,var(--color-bg-elevated))
}
[data-theme="dark"] .acd-goal{
	background:color-mix(in srgb,var(--color-brand) 16%,var(--color-bg-elevated));
	border-color:color-mix(in srgb,var(--color-brand) 28%,transparent)
}
[data-theme="dark"] .acd-goal-title{
	color:var(--color-brand-muted)
}
[data-theme="dark"] .acd-goal::before{
	border-left-color:color-mix(in srgb,var(--color-brand-muted) 50%,var(--color-border))
}

.why-deep{background:var(--color-bg-inverse);color:var(--color-text-inverse)}
.why-deep .section-head h2{color:#ffffff}
.why-deep .section-head p{color:var(--color-text-inverse-muted)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.why-card{padding:1.15rem 0 0;border-top:2px solid var(--color-brand)}
.why-card .n{font-family:var(--font-display);font-size:.85rem;color:var(--color-brand-muted);font-weight:700;display:inline}
.why-card strong{display:inline;font-family:var(--font-display);font-size:1.2rem;margin-left:.4rem}
.why-card span{display:block;color:var(--color-text-inverse-muted);font-size:.92rem;line-height:1.5;text-align:justify;text-wrap:pretty;hyphens:auto}

/* Linh vuc hoat dong - luoi 2x2, scoped */
.focus-areas{background:var(--color-bg-subtle)}
[data-theme="dark"] .focus-areas{background:var(--color-bg)}
.focus-areas .section-head{margin-bottom:clamp(1.35rem,2.6vw,2rem)}
.focus-areas .section-head.center p:not(.eyebrow){max-width:min(100%,72rem)}
.focus-grid{
	list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
	grid-auto-rows:1fr;
	gap:clamp(1rem,1.8vw,1.35rem);align-items:stretch
}
.focus-grid > li{min-width:0;display:flex}
.focus-card{
	position:relative;overflow:hidden;
	display:flex;flex-direction:column;
	flex:1;width:100%;
	padding:1.4rem 1.45rem 1.2rem;
	border-radius:var(--radius);
	background:
		linear-gradient(165deg,var(--color-brand-subtle),transparent 38%),
		var(--color-bg-elevated);
	border:1px solid var(--color-border-strong);
	box-shadow:var(--color-shadow);
	color:var(--color-text);
	text-decoration:none;
	isolation:isolate;
	transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease
}
a.focus-card:hover{color:var(--color-text)}
.focus-card-num{
	position:absolute;right:.55rem;bottom:.2rem;z-index:0;
	font-family:var(--font-display);
	font-size:clamp(6.4rem,12vw,8.6rem);
	font-weight:800;line-height:.82;letter-spacing:-.06em;
	color:var(--color-brand);opacity:.13;
	pointer-events:none;user-select:none
}
.focus-card .focus-head{
	position:relative;z-index:1;
	display:flex;align-items:center;gap:.75rem;
	margin:0 0 .7rem
}
.focus-card .ic{
	flex:0 0 auto;width:2.7rem;height:2.7rem;border-radius:12px;
	display:grid;place-items:center;
	background:var(--color-brand-subtle);
	border:1px solid color-mix(in srgb,var(--color-brand) 32%,transparent);
	color:var(--color-brand)
}
[data-theme="dark"] .focus-card .ic{
	background:color-mix(in srgb, var(--color-brand) 16%, var(--color-bg-elevated));
	border-color:color-mix(in srgb, var(--color-brand) 32%, var(--color-border));
	color:var(--color-brand-muted)
}
.focus-card .ic svg,.focus-card .ic img{width:1.32rem;height:1.32rem;display:block;object-fit:contain}
.focus-card h3{
	margin:0;min-width:0;flex:1;
	font-size:1.22rem;line-height:1.28;
	text-wrap:balance;color:var(--color-text)
}
.focus-title-keep{white-space:nowrap}
.focus-card > p:not(.focus-caps){
	position:relative;z-index:1;
	margin:0;flex:1;
	color:var(--color-text-secondary);
	font-size:.94rem;line-height:1.55;
	text-wrap:pretty
}
.focus-card .focus-caps{
	position:relative;z-index:1;
	flex:0 0 auto;margin-top:1rem;padding-top:.85rem;padding-right:3.5rem;
	border-top:1px solid var(--color-border);
	color:var(--color-text-tertiary);
	font-size:.8rem;font-weight:600;line-height:1.5;
	letter-spacing:.01em
}
.focus-card:focus{outline:none}
.focus-card:focus-visible{
	outline:2px solid var(--color-brand);
	outline-offset:3px
}
.focus-cta{
	margin:clamp(1.35rem,2.5vw,1.9rem) 0 0;
	text-align:center
}
.focus-cta a{
	display:inline-flex;align-items:center;gap:.35rem;
	font-weight:700;font-size:.95rem;
	color:var(--color-text-brand);
	border-radius:4px
}
.focus-cta a:hover{color:var(--color-brand-hover)}
.focus-cta a:focus-visible{
	outline:2px solid var(--color-brand);
	outline-offset:4px
}
[data-theme="dark"] .focus-card{
	background:var(--color-bg-elevated);
	border-color:var(--color-border-strong);
	box-shadow:var(--color-shadow)
}
[data-theme="dark"] .focus-card-num{
	color:var(--color-brand-muted);opacity:.16
}
[data-theme="dark"] .focus-card .ic{
	color:var(--color-brand-muted);
	border-color:color-mix(in srgb,var(--color-brand) 38%,transparent)
}
[data-theme="dark"] .focus-card > p:not(.focus-caps){
	color:var(--color-text-secondary)
}
[data-theme="dark"] .focus-card .focus-caps{
	color:var(--color-text-tertiary);
	border-top-color:var(--color-border)
}
@media (hover:hover){
	.focus-card:hover{
		transform:translateY(-3px);
		border-color:color-mix(in srgb,var(--color-brand) 48%,var(--color-border));
		box-shadow:
			var(--color-shadow),
			0 0 20px color-mix(in srgb,var(--color-brand) 14%,transparent)
	}
	[data-theme="dark"] .focus-card:hover{
		border-color:color-mix(in srgb,var(--color-brand) 42%,transparent);
		box-shadow:
			var(--color-shadow),
			0 0 20px color-mix(in srgb,var(--color-brand) 16%,transparent)
	}
}

.cta-band{padding-top:0}
.cta-inner .hero-actions{justify-content:center}
.section + .section{border-top:1px solid var(--color-border)}
.why-deep{border-top-color:rgba(250,250,249,.12)}

@media (max-width:1100px){
	.about-hero h1{font-size:clamp(2.1rem,3.8vw,2.85rem)}
	.about-hero-visual{width:52%;opacity:.2}
}
@media (max-width:860px){
	.about-hero-main{padding:2.5rem 0 2rem}
	.about-hero-copy{max-width:36rem}
	.about-hero-visual{
		top:auto;left:auto;right:-6%;bottom:0;
		width:62%;height:48%;
		opacity:.16;
		background-position:36% 72%;
		-webkit-mask-image:radial-gradient(90% 85% at 92% 100%,#000 18%,transparent 74%);
		mask-image:radial-gradient(90% 85% at 92% 100%,#000 18%,transparent 74%)
	}
	.about-stats-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
	.about-stat:nth-child(2n){border-right:0}
	.about-stat:nth-child(1),
	.about-stat:nth-child(2){border-bottom:1px solid var(--color-border)}
}
@media (max-width:900px){
	.story-section{
		--story-rail: 2.05rem;
		--story-rail-gap: .85rem;
		--story-rail-x: calc(var(--story-rail) / 2)
	}
	.story-layout{
		grid-template-columns:1fr;
		gap:.55rem
	}
	.story-intro{
		position:static;
		top:auto;
		max-width:none;
		padding-block:0
	}
	.story-intro .eyebrow{
		display:inline-block;
		margin:0 0 .55rem
	}
	.story-intro h2{
		max-width:none;
		margin:0 0 .7rem
	}
	.story-lead{max-width:none}
	.story-journey{
		max-width:none;
		padding-inline-end:.65rem
	}
	.story-journey::before{
		top:.95rem;
		bottom:1.55rem;
		opacity:.5
	}
	[data-theme="dark"] .story-journey::before{opacity:.55}
	.story-timeline{gap:1.75rem}
	.story-stage{
		grid-template-columns:var(--story-rail) minmax(0,1fr);
		gap:var(--story-rail-gap);
		padding:0
	}
	.story-stage-marker{
		width:var(--story-rail);
		height:var(--story-rail);
		min-height:0;
		margin-top:.35rem;
		border-radius:50%;
		background:var(--color-brand);
		box-shadow:0 0 0 4px color-mix(in srgb,var(--color-brand) 20%,transparent)
	}
	.story-stage-marker::after{display:none}
	[data-theme="dark"] .story-stage-marker{
		background:var(--color-brand);
		box-shadow:0 0 0 4px color-mix(in srgb,var(--color-brand) 22%,transparent)
	}
	.story-stage-num{
		position:static;
		right:auto;
		top:auto;
		translate:none;
		display:grid;
		place-items:center;
		width:100%;
		height:100%;
		font-size:.68rem;
		font-weight:800;
		letter-spacing:0;
		opacity:1;
		color:var(--text-on-accent)
	}
	[data-theme="dark"] .story-stage-num{
		opacity:1;
		color:var(--color-bg)
	}
	.story-stage-body{
		padding:1.05rem 1.1rem;
		background:var(--color-bg-elevated);
		border:1px solid color-mix(in srgb,var(--color-border) 85%,transparent);
		border-radius:calc(var(--radius) - 2px);
		box-shadow:0 4px 12px rgba(28,25,23,.03)
	}
	[data-theme="dark"] .story-stage-body{
		background:color-mix(in srgb,var(--color-bg-elevated) 78%,#ffffff);
		border:1px solid rgba(250,250,249,.08);
		border-radius:calc(var(--radius) - 2px);
		box-shadow:none;
		padding:1.05rem 1.1rem
	}
	.story-stage--accent::after{display:none}
	.story-quote{
		margin:1.35rem 0 0 calc(var(--story-rail) + var(--story-rail-gap));
		padding:.8rem .95rem;
		background:color-mix(in srgb,var(--color-brand-subtle) 55%,var(--color-bg-elevated))
	}
	.story-quote::before{
		left:calc(-1 * (var(--story-rail) + var(--story-rail-gap)) + var(--story-rail-x) - .3rem);
		top:50%;
		translate:0 -50%;
		width:.6rem;
		height:.6rem;
		box-shadow:
			0 0 0 .22rem var(--color-bg-subtle),
			0 0 0 .38rem color-mix(in srgb,var(--color-brand) 20%,transparent)
	}
	.story-quote p{
		font-size:.92rem;
		line-height:1.48
	}
	[data-theme="dark"] .story-quote{
		background:color-mix(in srgb,var(--color-brand) 10%,var(--color-bg-elevated));
		border:1px solid rgba(250,250,249,.06);
		border-radius:calc(var(--radius) - 2px);
		padding:.8rem .95rem
	}
	[data-theme="dark"] .story-quote::before{
		box-shadow:
			0 0 0 .22rem var(--color-bg-subtle),
			0 0 0 .38rem color-mix(in srgb,var(--color-brand) 24%,transparent)
	}
	.acd-panel{
		--acd-letter: 3.05rem;
		--acd-pad-y: 1.45rem;
		--acd-pad-x: 1.25rem;
		--acd-gap: .85rem;
		--acd-chev: clamp(2.15rem, 9vw, 2.75rem);
		--acd-stem: 1.25rem;
		--acd-min-h: 10.5rem
	}
	.acd-panel-track{
		flex-direction:column
	}
	.acd-node,
	.acd-node:first-child{
		flex:none;
		width:100%;
		min-height:var(--acd-min-h);
		align-items:center;
		margin-left:0;
		padding:var(--acd-pad-y) var(--acd-pad-x) calc(var(--acd-pad-y) + var(--acd-chev));
		clip-path:polygon(
			0 0,
			100% 0,
			100% calc(100% - var(--acd-chev)),
			50% 100%,
			0 calc(100% - var(--acd-chev))
		);
		filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--color-brand) 42%,var(--color-border-strong)))
	}
	[data-theme="dark"] .acd-node,
	[data-theme="dark"] .acd-node:first-child{
		filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--color-brand-muted) 55%,var(--color-border)))
	}
	.acd-node + .acd-node{
		flex:none;
		width:100%;
		margin-left:0;
		margin-top:calc(var(--acd-chev) * -.72);
		min-height:calc(var(--acd-min-h) + var(--acd-chev));
		align-items:center;
		padding:calc(var(--acd-pad-y) + var(--acd-chev)) var(--acd-pad-x) calc(var(--acd-pad-y) + var(--acd-chev));
		clip-path:polygon(
			0 0,
			50% var(--acd-chev),
			100% 0,
			100% calc(100% - var(--acd-chev)),
			50% 100%,
			0 calc(100% - var(--acd-chev))
		)
	}
	.acd-letter{
		align-self:center;
		font-size:1.48rem
	}
	.acd-node-copy{align-self:center}
	.acd-goal{padding:1.05rem 1.15rem 1.15rem}
	.acd-goal-title{font-size:clamp(1.28rem,6.4vw,1.7rem)}
	.why-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
	.about-hero-main{padding:1.85rem 0 1.45rem}
	.about-hero-copy{max-width:none;gap:.75rem}
	.about-hero h1{font-size:clamp(2.05rem,7.4vw,2.45rem);line-height:1.1}
	.about-hero-dek{max-width:22em;font-size:1.14rem}
	.about-hero .lead{max-width:none;font-size:1.05rem}
	.about-hero .hero-actions{gap:.5rem;width:auto;justify-content:center}
	.about-hero .btn{padding:.52rem .95rem;font-size:.86rem}
	.about-hero-bg{animation:none}
	.about-hero-visual{opacity:.13;height:38%;width:70%}
	.about-stats-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
	.about-stat{padding:.8rem .75rem;gap:.65rem;align-items:center}
	.about-stat-ic{width:2.45rem;height:2.45rem}
	.about-stat-ic svg{width:1.55rem;height:1.55rem}
	.about-stat strong{font-size:.98rem}
	.about-stat span{font-size:.74rem}
	.acd-panel{
		--acd-letter: 2.9rem;
		--acd-pad-y: 1.4rem;
		--acd-pad-x: 1.15rem;
		--acd-min-h: 10.1rem
	}
	.acd-letter{font-size:1.4rem}
	.acd-node-copy h3{font-size:1.05rem}
	.acd-node-copy p{font-size:.9rem}
}
@media (max-width:720px){
	.focus-grid{grid-template-columns:1fr;gap:.85rem;grid-auto-rows:auto}
	.focus-card{padding:1.15rem 1.1rem 1rem}
	.focus-card-num{font-size:clamp(5.6rem,28vw,7.2rem);right:.45rem;bottom:.15rem}
	.focus-card h3{font-size:1.14rem}
	.focus-card > p:not(.focus-caps){font-size:.9rem}
	.focus-card .focus-caps{
		font-size:.78rem;margin-top:.8rem;padding-top:.7rem;padding-right:3rem
	}
	.focus-cta{margin-top:1.15rem}
}
@media (max-width:560px){
	.why-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
	.about-hero-bg{animation:none}
	.story-stage,
	.story-stage-body{transition:none}
	.focus-card{transition:none}
	.focus-card:hover{transform:none}
}

/* FSE: Gutenberg wrappers (preview HTML khong co .wp-block-*) */
.about-hero > .wp-block-html:has(.about-hero-bg),
.about-hero > .wp-block-html:has(.hero-bg),
.about-hero > .wp-block-html:has(.about-hero-visual){
	position:absolute;
	inset:0;
	margin:0;
	width:100%;
	max-width:none;
	pointer-events:none;
	z-index:0
}
.about-stat > .wp-block-html,
.story-stage > .wp-block-html,
.acd-node > .wp-block-html,
.why-card > .wp-block-html{
	display:contents
}
.about-stat > p{
	display:flex;
	flex-direction:column;
	justify-content:center;
	min-width:0;
	margin:0
}
.why-card > p:has(strong){
	display:inline;
	margin:0;
	font-family:var(--font-display);
	font-size:1.2rem
}
.why-card > p:has(strong) strong{margin-left:.4rem}
.why-card > p:not(:has(strong)){
	display:block;
	margin:.3rem 0 0;
	color:var(--color-text-inverse-muted);
	font-size:.92rem;
	line-height:1.5;
	text-align:justify;
	text-wrap:pretty;
	hyphens:auto
}
.why-deep .wp-block-heading{color:#ffffff}
.focus-grid > .wp-block-group,
.focus-grid > .wp-block-html{
	min-width:0;
	display:flex
}
.about-hero-copy > .wp-block-heading,
.about-hero-copy > p,
.story-intro > .wp-block-heading,
.story-intro > p,
.section-head > .wp-block-heading,
.section-head > p,
.cta-inner > .wp-block-heading,
.cta-inner > p,
.story-stage-body > .wp-block-heading,
.story-stage-body > p,
.acd-node-copy > .wp-block-heading,
.acd-node-copy > p{
	margin-block-start:0
}