.timeline-col.timeline-exhibit {
	--journey-card-width: min(420px, calc(34vw));
	--journey-image-height: clamp(180px, calc(calc(100svh) - var(--journey-header-height, 48px) - 260px), 260px);
	--journey-meta-height: 76px;
	--journey-revenue-shift: -14px;
	--journey-track-height: calc(calc(100svh) - var(--journey-header-height, 48px) - 70px);
	--journey-row-height: calc((calc(100svh) - 90px - var(--journey-header-height, 48px)) / 2);
	--journey-gap: 0px;
	--journey-red: var(--vermilion, #176a9e);
	--journey-gold: var(--gold-deep, #db8b16);
	--journey-paper: var(--washi, #f1f8fc);
	--journey-axis: calc(var(--journey-row-height) + 32px);
}

.timeline-exhibit:not(.is-started) .timeline-heading {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	max-width: none;
}

.timeline-exhibit:not(.is-started) .timeline-heading__title { font-size: 44px; line-height: 1.3; }
.timeline-exhibit:not(.is-started) .timeline-heading__eyebrow { text-align: center; }
.timeline-exhibit:not(.is-started) .timeline-exhibit__viewport,
.timeline-exhibit:not(.is-started) .timeline-exhibit__controls,
.timeline-exhibit:not(.is-started) .timeline-exhibit__progress { visibility: hidden; }
.timeline-exhibit.is-started .timeline-heading__eyebrow { display: none; }
.timeline-exhibit.is-started .timeline-heading {
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	justify-content: center;
	text-align: center;
	margin: 0 auto;
	padding: 0;
	max-width: none;
	pointer-events: none;
}
.timeline-exhibit.is-started .timeline-heading__title { font-size: 24px; line-height: 1.2; }

.journey-buffer {
	display: none;
	position: absolute;
	top: calc(var(--journey-track-height) - var(--journey-image-height) - var(--journey-meta-height) + var(--journey-revenue-shift));
	left: calc(max(24px, (var(--timeline-screen-width, calc(100vw)) - var(--journey-card-width)) / 2) - min(480px, max(0px, (var(--timeline-screen-width, calc(100vw)) - var(--journey-card-width)) / 2)) - 8px);
	width: min(480px, max(0px, (var(--timeline-screen-width, calc(100vw)) - var(--journey-card-width)) / 2));
	height: var(--journey-image-height);
	overflow: hidden;
	border-radius: 6px;
	pointer-events: none;
	filter: grayscale(0.16) saturate(0.88) blur(2px);
	clip-path: none;
	opacity: 0.9;
}

.journey-buffer img { width: 100%; height: 100%; object-fit: cover; }
.timeline-preview__image img { opacity: 0; transition: opacity 320ms ease, filter 550ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.timeline-preview__image.is-image-ready img { opacity: 1; }
.journey-route { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; transition: opacity 250ms ease; }
.timeline-exhibit.is-started:not(.is-entry-ready) .journey-route { opacity: 0; }
.journey-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.journey-road__shoulder { stroke: #dcecf2; stroke-width: 56; }
.journey-road__border { stroke: #a8c8d8; stroke-width: 46; }
.journey-road__surface { stroke: #e7f3f7; stroke-width: 40; }
.journey-road__centerline { stroke: #fff; stroke-width: 3; stroke-dasharray: 24 20; }
.journey-route__progress { stroke: var(--journey-gold); stroke-width: 4; opacity: 0.92; }
/* Cuder thay cho chấm đỏ: lớp riêng nằm trên các thẻ; JS đặt translate để chân chạm tâm mặt đường.
   Ở toàn cảnh cả track bị thu nhỏ nên phóng Cuder lên cho còn nhìn rõ. */
.journey-route__tip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 64px;
	height: 72px;
	pointer-events: none;
	transform-origin: 50% 88%;
	transition: scale 800ms cubic-bezier(0.22, 1, 0.36, 1), opacity 250ms ease;
}
.journey-cuder { display: flex; align-items: flex-end; justify-content: center; }
.journey-cuder__image { display: block; width: auto; height: calc(100% - 4px); max-width: none; object-fit: contain; object-position: center bottom; transform-origin: 50% 100%; }
.timeline-exhibit.is-walking .journey-cuder__image { animation: journey-cuder-step 360ms ease-in-out infinite alternate; }
.timeline-exhibit.is-walking-back .journey-cuder__image { animation-direction: alternate-reverse; }
.timeline-exhibit.is-overview .journey-route__tip { scale: 2.6; }
.timeline-exhibit.is-started:not(.is-entry-ready) .journey-route__tip { opacity: 0; }

@keyframes journey-cuder-step {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50% { transform: translateY(-3px) rotate(3deg); }
}

/* Toàn cảnh: cả dải mốc thu vào một khung; bấm vào là phóng về kích thước thật, bắt đầu từ mốc đầu. */
.timeline-exhibit .timeline-exhibit__track {
	transform-origin: 0 50%;
	transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.timeline-exhibit.is-overview .timeline-exhibit__track {
	transform: translateX(var(--journey-overview-x, 0px)) scale(var(--journey-overview-scale, 1)) !important;
}
.timeline-exhibit.is-overview .timeline-exhibit__viewport { overflow: hidden; cursor: zoom-in; }
.timeline-exhibit.is-overview .timeline-preview__open { pointer-events: none; }
.timeline-exhibit.is-overview .timeline-exhibit__controls,
.timeline-exhibit.is-overview .timeline-exhibit__progress { visibility: hidden; }

.timeline-exhibit__modes { display: contents; }
.journey-mode {
	position: absolute;
	z-index: 6;
	display: none;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 1px solid var(--journey-red);
	border-radius: 999px;
	background: var(--journey-paper);
	color: var(--journey-red);
	font: 700 15px/1.2 var(--font-body);
	cursor: pointer;
	box-shadow: 0 6px 16px -8px rgba(17, 66, 99, 0.28);
	transition: background 180ms ease, color 180ms ease;
}
.journey-mode svg { width: 18px; height: 18px; flex: none; }
.journey-mode:hover,
.journey-mode:focus-visible { background: var(--journey-red); color: #fff; }
.journey-mode--start { left: 50%; bottom: 28px; transform: translateX(-50%); padding: 12px 26px; font-size: 16px; background: var(--journey-red); color: #fff; }
.journey-mode--start:hover,
.journey-mode--start:focus-visible { background: var(--vermilion-dark, #164e73); }
.journey-mode--overview { top: 16px; right: 24px; }
.timeline-exhibit.is-overview .journey-mode--start,
.timeline-exhibit.is-started:not(.is-overview) .journey-mode--overview { display: inline-flex; }

.journey-decoration {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.journey-decoration--cloud {
	width: 150px;
	height: auto;
	opacity: 0.68;
}

.journey-decoration--cloud-a {
	left: calc(var(--journey-card-width) * 1.2);
	top: 13%;
}

.journey-decoration--cloud-b {
	left: calc(var(--journey-card-width) * 7.9);
	top: 72%;
	width: 124px;
	opacity: 0.5;
}

.journey-decoration--lantern {
	filter: drop-shadow(0 5px 8px rgba(243, 200, 75, 0.24));
}

.journey-decoration--lantern-a {
	left: calc(var(--journey-card-width) * 5.8);
	top: 14%;
}

.journey-decoration--lantern-b {
	left: calc(var(--journey-card-width) * 7.3);
	top: 67%;
}

.journey-decoration--blossom-a {
	left: calc(var(--journey-card-width) * 4.7);
	top: 71%;
}

.journey-decoration--blossom-b {
	left: calc(var(--journey-card-width) * 8.8);
	top: 12%;
}

.js .timeline-col.timeline-exhibit {
	width: var(--timeline-screen-width, 100%);
	margin-left: 0;
	scroll-margin-top: var(--journey-header-height, 48px);
	height: calc(calc(100svh) - var(--journey-header-height, 48px));
}

.js .timeline-exhibit__pin {
	position: relative;
	top: auto;
	display: block;
	height: auto;
	padding: 12px 0 10px;
	box-sizing: border-box;
	height: 100%;
}

.timeline-exhibit .timeline-heading {
	max-width: 1200px;
	margin: 0 auto 12px;
	padding-inline: 72px;
	align-items: center;
}

.timeline-exhibit .timeline-heading__intro {
	font-size: 12px;
}

.timeline-exhibit #timeline-current {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.timeline-exhibit .timeline-heading__eyebrow,
.timeline-exhibit__scroll-hint,
.timeline-preview__kind {
	letter-spacing: 0;
}

.timeline-exhibit .timeline-heading__title {
	font-size: 20px;
}

.timeline-exhibit__toolbar {
	gap: 16px;
	padding: 12px 0;
}

.timeline-exhibit__controls {
	position: absolute;
	z-index: 5;
	top: 50%;
	left: 20px;
	right: 20px;
	justify-content: space-between;
	margin: 0;
	pointer-events: none;
}

.timeline-exhibit__controls button {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
	border-color: #b8b5ac;
	background: var(--journey-paper);
	pointer-events: auto;
	transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.timeline-exhibit__controls button svg {
	width: 22px;
	height: 22px;
}

.timeline-exhibit__controls button:not(:disabled):hover {
	background: var(--journey-red);
	border-color: var(--journey-red);
	color: #fff;
}

.timeline-exhibit__controls button:disabled {
	opacity: 0.35;
	cursor: default;
}

.timeline-exhibit__counter strong {
	font-size: 28px;
	min-width: 4ch;
}

.js .timeline-exhibit__viewport,
.timeline-exhibit__viewport {
    outline: none;
	position: relative;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: none;
	overscroll-behavior-x: contain;
	background: transparent;
}

.js .timeline-exhibit__track,
.timeline-exhibit__track {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(var(--journey-card-width) / 2 + 2px);
	grid-template-rows: var(--journey-track-height);
	gap: 0 var(--journey-gap);
	box-sizing: content-box;
	width: max-content;
	height: var(--journey-track-height);
	padding-top: 0;
	padding-right: max(24px, calc((var(--timeline-screen-width, calc(100vw)) - var(--journey-card-width)) / 2));
	padding-bottom: 0;
	padding-left: max(24px, calc((var(--timeline-screen-width, calc(100vw)) - var(--journey-card-width)) / 2));
	transform: none !important;
	will-change: auto;
}

.timeline-exhibit__track::before,
.timeline-exhibit__track::after {
	display: none;
	top: var(--journey-axis);
	left: var(--timeline-axis-start, 0px);
	height: 2px;
}

.timeline-exhibit__track::before {
	width: var(--timeline-axis-length, 100%);
	background: #b8d2de;
}

.timeline-exhibit__track::after {
	width: var(--timeline-line-length, 0px);
	background: var(--journey-red);
	transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.timeline-exhibit__tip {
	display: none;
	position: absolute;
	z-index: 3;
	top: calc(var(--journey-axis) - 4px);
	left: var(--timeline-tip, 0px);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--journey-red);
	box-shadow: 0 0 0 5px rgba(243, 200, 75, 0.24);
	transform: translateX(-50%);
	transition: left 700ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.timeline-preview {
	position: relative;
	z-index: 1;
	grid-row: 1;
	width: var(--journey-card-width);
	opacity: 1;
	scroll-snap-align: center;
}

@media (min-width: 768px) {
	.js .timeline-exhibit__track .timeline-preview {
		width: var(--journey-card-width);
	}
}

.timeline-preview__node {
	top: var(--journey-axis);
	left: calc(50% - 6px);
	width: 12px;
	height: 12px;
	border-color: var(--journey-paper);
	background: var(--journey-red);
	transition: background 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}

.timeline-preview:not(.is-reached) .timeline-preview__node {
	background: #bfd5df;
}

.timeline-preview.is-active .timeline-preview__node {
	transform: scale(1.6);
	box-shadow: 0 0 0 2px var(--journey-paper), 0 0 0 4px var(--journey-red);
}

.timeline-preview__year {
	position: static;
	display: block;
	padding: 0;
	font-size: 30px;
	line-height: 36px;
	background: transparent;
	transition: color 300ms ease;
}

.timeline-preview.is-active .timeline-preview__year {
	color: var(--journey-red);
}

.timeline-preview__open {
	max-height: none;
	height: calc(var(--journey-image-height) + var(--journey-meta-height));
	transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1), opacity 650ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--journey-enter-delay, 0ms);
}

.timeline-exhibit:not(.is-started) .timeline-preview__open {
	transform: translateX(72px);
	opacity: 0;
}

.timeline-exhibit:not(.is-started) .timeline-preview.is-revenue .timeline-preview__open {
	transform: translateX(72px) translateY(var(--journey-revenue-shift));
}

.timeline-exhibit.is-started .timeline-preview__open { opacity: 1; }

.timeline-preview.is-leadership .timeline-preview__open {
	top: 62px;
	justify-content: flex-end;
}

.timeline-exhibit.is-started .timeline-preview.is-leadership .timeline-preview__open { transform: translateX(0); }

.timeline-preview.is-revenue .timeline-preview__open {
	top: auto;
	bottom: 0;
	justify-content: flex-start;
	transform: translateX(0) translateY(var(--journey-revenue-shift));
}

@media (min-width: 768px) {
	.js .timeline-exhibit__track:has(.timeline-preview.is-finale) {
		--journey-finale-card-width: clamp(630px, calc(74.1vw), 1014px);
		--journey-finale-image-height: clamp(300px, calc(48svh), 460px);
		--journey-finale-offset: 48px;
		--journey-finale-track-padding: calc(max(24px, calc((var(--timeline-screen-width, calc(100vw)) - var(--journey-card-width)) / 2)) + max(0px, calc((var(--timeline-screen-width, calc(100vw)) - var(--journey-finale-card-width)) / 2 - var(--journey-finale-offset))));
		padding-right: var(--journey-finale-track-padding);
	}

	.js .timeline-exhibit__track:has(.timeline-preview.is-finale)::before {
		display: block;
		left: 100%;
		top: 0;
		width: max(0px, calc(var(--journey-finale-offset) + (var(--journey-finale-card-width) + var(--timeline-screen-width, calc(100vw))) / 2 - var(--journey-card-width) - 4px - var(--journey-finale-track-padding)));
		height: 1px;
		visibility: hidden;
	}

	.js .timeline-exhibit__track .timeline-preview.is-finale {
		width: calc(var(--journey-finale-card-width) + var(--journey-finale-offset) + var(--journey-finale-offset));
	}

	.timeline-preview.is-finale .timeline-preview__open {
		top: 50%;
		bottom: auto;
		left: var(--journey-finale-offset);
		width: var(--journey-finale-card-width);
		height: calc(var(--journey-finale-image-height) + var(--journey-meta-height));
		max-height: none;
		transform: translateY(-50%);
		justify-content: flex-start;
	}

	.timeline-exhibit:not(.is-started) .timeline-preview.is-finale .timeline-preview__open {
		transform: translateX(72px) translateY(-50%);
	}

	.timeline-exhibit.is-started .timeline-preview.is-finale .timeline-preview__open {
		transform: translateY(-50%);
	}

	.timeline-preview.is-finale .timeline-preview__image {
		display: block;
		height: var(--journey-finale-image-height);
		min-height: var(--journey-finale-image-height);
	}

	.timeline-preview.is-finale .timeline-preview__node {
		left: 0;
	}
}

.timeline-preview__connector {
	height: 32px;
	transform: translateX(-50%) scaleY(0);
	opacity: 0;
}

.timeline-preview.is-leadership .timeline-preview__connector {
	bottom: -32px;
	transform-origin: bottom;
}

.timeline-preview.is-revenue .timeline-preview__connector {
	top: -32px;
	transform-origin: top;
}

.timeline-preview.is-reached .timeline-preview__connector {
	transform: translateX(-50%) scaleY(1);
	opacity: 1;
}

.timeline-preview__card {
	position: relative;
	z-index: 2;
	width: 100%;
	box-shadow: none;
	background: transparent;
	border: 0;
}

.timeline-preview.is-leadership .timeline-preview__card,
.timeline-preview.is-revenue .timeline-preview__card {
	transform: none;
}

.timeline-preview__image {
	border: 5px solid var(--journey-gold);
	border-radius: 10px;
	height: var(--journey-image-height);
	min-height: var(--journey-image-height);
	aspect-ratio: auto;
	background: #eef6f9;
	clip-path: none;
	overflow: hidden;
}

.timeline-preview__image img {
	object-fit: cover;
	transform: scale(1.015);
}

.timeline-preview__kind {
	top: 12px;
	left: 12px;
	font-size: 10px;
	padding: 5px 8px;
}

.timeline-preview__image-placeholder > span:first-child {
	font-size: 48px;
}

.timeline-preview__image-placeholder > span:last-child {
	font-size: 12px;
}

.timeline-preview__copy {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	height: var(--journey-meta-height);
	box-sizing: border-box;
	padding: 10px 0 0;
	text-align: center;
}

.timeline-preview__copy > :not(.timeline-preview__node) {
	position: relative;
	top: -6px;
}

.timeline-preview.is-leadership .timeline-preview__copy { grid-row: 1; padding: 0 0 10px; }
.timeline-preview.is-leadership .timeline-preview__node { top: var(--journey-axis); bottom: auto; }
.timeline-preview__metric { align-items: center; }
.timeline-preview__metric .timeline-preview__chairman { font-size: 24px; }
.timeline-preview__term { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-soft, #6b5a4a); }
.timeline-preview.is-leadership { --journey-meta-height: 94px; }

/* CEO và doanh thu cùng năm dùng chung một cột và một node: thẻ "paired" chỉ nhận click trên chính thẻ của nó. */
.timeline-preview.is-paired { pointer-events: none; }
.timeline-preview.is-paired .timeline-preview__open { pointer-events: auto; }
.timeline-preview.is-paired .timeline-preview__node { display: none; }
.timeline-exhibit.is-overview .timeline-preview.is-paired .timeline-preview__open { pointer-events: none; }
/* Hai thẻ chung cột phải nhỏ lại để đường đi lọt vào khe giữa ảnh CEO (trên) và ảnh doanh thu (dưới). */
.timeline-preview.has-pair { --journey-image-height: clamp(120px, calc(var(--journey-track-height) * 0.26), 190px); }
.timeline-preview.has-pair .timeline-preview__open { top: 54px; }
.timeline-preview.is-paired .timeline-preview__year { display: none; }
.timeline-preview.is-paired { --journey-image-height: clamp(130px, calc(var(--journey-track-height) * 0.28), 220px); }

/* Ảnh CEO đặt trên khung hình viên gạch nghiêng của logo FPT: nền cam theo đúng hình, ảnh cắt cùng hình và lùi vào trong. */
.timeline-preview.is-leadership .timeline-preview__image {
	--fpt-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 128' preserveAspectRatio='none'%3E%3Cpath d='M34 0H95Q100 0 99.4 5L88 106Q85.6 128 64 128H5Q-0.6 128 0 123L10.4 22Q12.6 0 34 0Z'/%3E%3C/svg%3E");
	position: relative;
	border: 0;
	border-radius: 0;
	background: var(--journey-gold);
	-webkit-mask: var(--fpt-tile) center / 100% 100% no-repeat;
	mask: var(--fpt-tile) center / 100% 100% no-repeat;
}
.timeline-preview.is-leadership .timeline-preview__image img {
	position: absolute;
	inset: 6px;
	width: calc(100% - 12px);
	height: calc(100% - 12px);
	-webkit-mask: var(--fpt-tile) center / 100% 100% no-repeat;
	mask: var(--fpt-tile) center / 100% 100% no-repeat;
}
.timeline-preview.is-finale .timeline-preview__metric { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.timeline-preview.is-finale .timeline-preview__secondary { grid-column: 1 / -1; }

.js .timeline-preview__title,
.timeline-preview__title {
	font-size: 19px;
	line-height: 1.25;
}

.timeline-preview__metric {
	gap: 4px;
}

.timeline-preview.is-leadership .timeline-preview__placeholder-label {
	display: none;
}

.timeline-preview__metric strong {
	font-size: 22px;
	line-height: 1.15;
}

.timeline-preview__metric strong small {
	font-size: 12px;
}

.timeline-preview__metric > span,
.timeline-preview__secondary {
	font-size: 12px;
	line-height: 1.5;
}

.timeline-preview__oku,
.timeline-preview.is-finale .timeline-preview__oku {
	font-size: 28px !important;
}

.timeline-preview__expand {
	width: auto;
	height: auto;
	border-radius: 0;
	border: 0;
	border-top: 1px solid #ddd9cf;
	font-size: 12px;
	padding-top: 8px;
}

.timeline-preview.is-finale .timeline-preview__card {
	background: transparent;
}

.timeline-preview.is-active .timeline-preview__image {
	animation: none;
}

.timeline-preview.is-active .timeline-preview__copy {
	animation: none;
}

.timeline-preview.is-active .timeline-preview__image img {
	animation: none;
}

.timeline-exhibit__progress span {
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes journey-image-reveal {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0); }
}

@keyframes journey-copy-reveal {
	from { opacity: 0.4; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes journey-image-settle {
	from { transform: scale(1.065); }
	to { transform: scale(1.015); }
}

@media (min-width: 768px) and (max-height: 740px) {
	.timeline-col.timeline-exhibit {
		--journey-image-height: clamp(180px, calc(calc(100svh) - var(--journey-header-height, 48px) - 260px), 260px);
		--journey-revenue-shift: 0px;
		--journey-track-height: calc(calc(100svh) - var(--journey-header-height, 48px) - 40px);
	}

	.timeline-exhibit .timeline-heading__title {
		font-size: 22px;
	}

	.timeline-preview.is-leadership .timeline-preview__open { top: 42px; }

	.timeline-exhibit .timeline-heading__eyebrow {
		margin-bottom: 4px;
	}

	.js .timeline-preview__title {
		font-size: 15px;
	}

	.timeline-preview__metric strong {
		font-size: 22px;
	}

	.timeline-preview__metric > span,
	.timeline-preview__secondary {
		font-size: 10px;
	}

	.timeline-preview__oku,
	.timeline-preview.is-finale .timeline-preview__oku {
		font-size: 28px !important;
	}

	.timeline-preview__copy {
		gap: 1px;
	}

	.timeline-preview__expand {
		font-size: 10px;
		padding-top: 4px;
	}
}

@media (max-width: 767px) {
	.js .timeline-col.timeline-exhibit {
		height: auto;
	}

	.js .timeline-col.timeline-exhibit:not(.is-started) { height: calc(calc(100svh) - var(--journey-header-height, 48px)); }
	.js .timeline-exhibit:not(.is-started) .timeline-exhibit__pin { height: 100%; }
	.js .timeline-exhibit:not(.is-started) .timeline-exhibit__viewport { display: none; }
	.timeline-exhibit:not(.is-started) .timeline-heading { padding-inline: 20px; align-items: center; }
	.timeline-exhibit:not(.is-started) .timeline-heading__title { font-size: 24px; text-align: center; }
	.journey-buffer { display: none; }
	.journey-route,
	.journey-route__tip { display: none; }
	.journey-decoration { display: none; }
	.timeline-exhibit.is-started .timeline-heading { align-items: center; }
	.timeline-exhibit.is-started .timeline-heading__title { font-size: 20px; }
	.timeline-exhibit.is-started .timeline-heading { position: relative; inset: auto; margin: 0; max-width: none; padding-inline: 20px; pointer-events: auto; }

	.js .timeline-exhibit__pin {
		height: auto;
	}

	.timeline-col.timeline-exhibit {
		--journey-image-height: 180px;
	}

	.timeline-exhibit .timeline-heading {
		align-items: start;
		flex-direction: column;
		gap: 12px;
		padding-inline: 20px;
	}

	.timeline-exhibit__controls {
		display: none;
	}

	.js .timeline-exhibit__viewport {
		overflow: visible;
		scroll-snap-type: none;
		padding: 16px 20px 20px;
	}

	.js .timeline-exhibit__track {
		display: flex;
		flex-direction: column;
		gap: 40px;
		width: 100%;
		height: auto;
		padding: 0 0 0 28px;
		box-sizing: border-box;
	}

	.timeline-exhibit__track::before,
	.timeline-exhibit__track::after {
		display: block;
		top: var(--timeline-axis-start, 0px);
		left: 0;
		width: 2px;
	}

	.timeline-exhibit__track::before {
		height: var(--timeline-axis-length, 100%);
	}

	.timeline-exhibit__track::after {
		height: var(--timeline-line-length, 0px);
		transition-property: height;
	}

	.timeline-exhibit__tip {
		display: block;
		left: 1px;
		top: calc(var(--timeline-tip, 0px) - 4px);
		transition-property: top;
	}

	/* Giữ chân Cuder trên trục dọc khi timeline chuyển sang mobile. */
	.timeline-exhibit__tip.journey-cuder {
		width: 64px;
		height: 96px;
		top: calc(var(--timeline-tip, 0px) - 54px);
		border-radius: 0;
		background: none;
		box-shadow: none;
	}
	.timeline-exhibit__tip.journey-cuder .journey-cuder__image { height: calc(100% - 2px); }
	.journey-mode { display: none !important; }

	.timeline-preview {
		display: block;
		height: auto;
		width: 100%;
		scroll-margin-top: 68px;
	}

	.timeline-preview__node {
		top: 24px;
		left: -33px;
	}

	.timeline-preview.is-leadership .timeline-preview__node { top: 24px; bottom: auto; }
	.timeline-preview.is-revenue .timeline-preview__open { transform: none; }
	.timeline-exhibit.is-started .journey-buffer { animation: none; clip-path: none; }

	.timeline-preview__year {
		position: relative;
		display: block;
		top: auto;
		padding: 8px 0 12px;
		font-size: 22px;
		line-height: 24px;
	}

	.timeline-preview.is-leadership .timeline-preview__open,
	.timeline-preview.is-revenue .timeline-preview__open {
		position: relative;
		top: auto;
		bottom: auto;
		height: auto;
		max-height: none;
	}

	.timeline-exhibit.is-started .timeline-preview__open {
		transform: translateX(0);
		opacity: 1;
	}

	.timeline-exhibit:not(.is-started) .timeline-preview.is-revenue .timeline-preview__open { transform: translateX(72px); }

	.timeline-preview__connector {
		display: none;
	}

	.timeline-preview__card {
		display: flex;
		flex-direction: column;
	}

	.timeline-preview__copy {
		order: 0;
		height: auto;
		min-height: var(--journey-meta-height);
		padding-block: 12px;
		gap: 8px;
	}

	.timeline-preview__image { order: 1; }

	.timeline-exhibit .timeline-heading__title {
		font-size: 28px;
	}

	.timeline-exhibit__legend {
		font-size: 9px;
	}

	.timeline-exhibit__controls button {
		width: 44px;
		height: 44px;
	}

	.timeline-preview__metric strong {
		font-size: 24px;
	}

	.timeline-preview__oku,
	.timeline-preview.is-finale .timeline-preview__oku {
		font-size: 34px !important;
	}
}

@media (max-width: 380px) {
	.timeline-exhibit:not(.is-started) .timeline-heading__title { font-size: 20px; }
}

@media (max-width: 340px) {
	.timeline-exhibit:not(.is-started) .timeline-heading__title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.timeline-exhibit__track::after,
	.timeline-exhibit__tip,
	.timeline-exhibit__progress span,
	.timeline-preview__connector,
	.timeline-preview__node {
		transition: none;
	}
	.journey-cuder__image { animation: none !important; }

	.timeline-preview.is-active .timeline-preview__image,
	.timeline-preview.is-active .timeline-preview__image img,
	.timeline-preview.is-active .timeline-preview__copy {
		animation: none;
	}

	.timeline-exhibit.is-started .journey-buffer { animation: none; clip-path: none; }
	.timeline-preview__image img { transition: none; }
	.timeline-preview__open { transition: none; }
}