/* CROSS 2026 – page sections. Depends on tokens in base.css. */

/* ---------- Section heads ---------- */
.x-head {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.x-head > * {
	max-width: 50rem;
	margin-block: 0;
}

.x-head__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	font-size: var(--x-fs-h2) !important;
	line-height: 1.08;
	letter-spacing: -0.012em;
}

/* Vietnamese stacks its diacritics above and below: display lines get a little more leading. */
:lang(vi) .x-head__title,
:lang(vi) .x-cta__title {
	line-height: 1.14;
}

.x-head__lead {
	max-width: 40rem;
	margin-top: 1.1rem !important;
	font-size: var(--x-fs-lead);
	color: var(--x-text);
}

.is-dark .x-head__title {
	color: #fff;
}

.is-dark .x-head__lead {
	color: rgba(255, 255, 255, 0.78);
}

.x-center {
	text-align: center;
}

.x-section > .x-link,
.x-section .x-link.x-center {
	margin-top: 2rem;
}

/* Two sections in a row on the same background read as one block, so the second one only needs a short top
   padding (the first one's bottom padding already sets the gap). The contact cards keep their own, smaller
   padding. */
.x-section.has-paper-background-color + .x-section.has-paper-background-color:not(.x-contact-section),
.x-section.has-paper-deep-background-color + .x-section.has-paper-deep-background-color {
	padding-top: var(--wp--preset--spacing--40) !important;
}

/* ---------- Hero ---------- */
.x-hero {
	overflow: hidden;
}

/* Copy and CTA on the left, the AI chat phone on the right. Below 960px: h1, lead, chips, the CTA block, then the
   phone, so the CTA, the Zalo link and the proof row end inside the first phone screen. */
.x-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "copy" "cta" "visual";
	gap: 1.75rem;
	align-items: start;
}

.x-hero__grid > * {
	margin: 0 !important;
}

@media (min-width: 960px) {
	.x-hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
		grid-template-areas: "copy visual" "cta visual";
		/* The phone is taller than the copy: the spare height goes under the CTA, not between the lead and the CTA. */
		grid-template-rows: auto 1fr;
		column-gap: clamp(2.5rem, 5vw, 5rem);
		row-gap: 1.75rem;
	}
}

.x-hero__copy { grid-area: copy; }
.x-hero__visual { grid-area: visual; align-self: center; }
.x-hero__cta { grid-area: cta; }

.x-hero__visual .m-ai-chat {
	--m-ai-chat-w: 330px;
}

@media (max-width: 959px) {
	.x-hero__visual .m-ai-chat {
		--m-ai-chat-w: 300px;
	}
}

.x-hero__title {
	margin: 0;
	font-size: var(--x-fs-display) !important;
	line-height: 1.02;
	letter-spacing: -0.015em;
}

:lang(vi) .x-hero__title {
	line-height: 1.1;
}

/* The lead says what CROSS does (the same for every industry). The case line under it keeps the height of its tallest
   industry: every span sits in one grid cell and the hidden ones stay in the layout (visibility: hidden also hides them
   from screen readers), so switching never moves the chips, the CTA or the phone. Without JS the default industry's
   span is the visible one. */
.x-hero__lead {
	max-width: 36rem;
	margin-top: 1.25rem;
	font-size: var(--x-fs-lead);
	color: var(--x-ink);
	text-wrap: pretty;
}

.x-hero__case {
	display: grid;
	max-width: 36rem;
	margin: 0.75rem 0 0;
	font-size: var(--x-fs-body);
	color: var(--x-text);
}

.x-hero__case > span {
	grid-area: 1 / 1;
	text-wrap: pretty;
}

.x-hero__case > span[data-ind-panel][hidden] {
	display: block !important;
	visibility: hidden;
}

/* A pointer switch crossfades the new lead, chat and example (site.js adds .is-entering); keyboard switches are instant. */
.is-entering {
	animation: x-ind-in 180ms var(--x-ease-out);
}

@keyframes x-ind-in {
	from {
		opacity: 0;
	}
}

.x-actions {
	gap: 0.7rem;
	margin-top: 0;
}

.x-hero__cta > .x-actions {
	margin-top: 0.5rem;
}

@media (max-width: 600px) {
	.x-actions .wp-block-button {
		flex: 1 1 100%;
	}

	.x-actions .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}

}

/* Trust line: plain text, no badges or check pills. Every item starts with a "·" in a fixed gutter; the row is
   pulled left by one gutter and clipped there, so a wrapped line never starts with a stray dot. */
.x-proof {
	--x-proof-sep: 1.1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0;
	margin: 1.2rem 0 0 calc(-1 * var(--x-proof-sep));
	font-size: var(--x-fs-small);
	color: var(--x-text);
	/* Leaves 0.35rem of the gutter visible for the link's focus ring; the dot sits further left. */
	clip-path: inset(-0.5rem -0.5rem -0.5rem calc(var(--x-proof-sep) - 0.35rem));
}

.x-proof > * {
	display: inline-grid;
	grid-template-columns: var(--x-proof-sep) auto;
}

.x-proof > *::before {
	content: "·";
	display: inline-block;
	width: var(--x-proof-sep);
	text-align: center;
	color: var(--x-muted);
	text-decoration: none;
}

.x-proof a {
	color: var(--x-ink);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The week-1 refund is a full sentence (the same words as the guarantee cards), so it gets a line of its own. */
.x-proof > .x-proof__refund {
	flex-basis: 100%;
	max-width: 40rem;
	text-wrap: pretty;
}

/* One chip per tool: generic category icon + plain name, no brand marks. */
.x-tools__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.x-tools__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.75rem;
	border: 1px solid var(--x-line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--x-ink);
}

.x-tools__item .x-icon {
	--x-icon-size: 1rem;
	vertical-align: 0;
	color: var(--x-muted);
}

/* ---------- Pain: the "night" beat on ink ---------- */
/* The h2 runs the full width above the split (two lines at 1440), then the list beside the 22:47 lock screen. The
   phone and the morning cards run taller than the list, which stays in view while they scroll past. */
.x-pain__grid {
	gap: clamp(2rem, 5vw, 5rem) !important;
	align-items: flex-start !important;
}

@media (min-width: 782px) {
	.x-pain__grid > .wp-block-column:first-child {
		position: sticky;
		top: calc(var(--x-header-h) + 2rem);
		padding-top: clamp(0.5rem, 2vw, 2rem);
	}
}

.x-pain.is-dark .x-pain__list li {
	color: rgba(255, 255, 255, 0.88);
}

.x-pain.is-dark .x-pain__list .x-icon {
	color: rgba(255, 255, 255, 0.6);
}

/* ---------- Calculator ---------- */
.x-calc {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius);
	box-shadow: var(--x-shadow);
}

@media (min-width: 960px) {
	.x-calc {
		grid-template-columns: 1.1fr 0.9fr;
		column-gap: 3rem;
	}

	.x-calc__presets {
		grid-column: 1 / -1;
	}
}

.x-calc__presets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.x-chip {
	padding: 0.55rem 1rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--x-ink);
	background: var(--x-paper);
	border: 1px solid var(--x-line);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.x-chip:hover {
	border-color: var(--x-ink);
}

.x-chip.is-on {
	color: #fff;
	background: var(--x-ink);
	border-color: var(--x-ink);
}

.x-calc__inputs {
	display: grid;
	gap: 1.25rem;
}

.x-range {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0.5rem 1rem;
	font-size: 0.95rem;
	color: var(--x-text);
}

.x-range output {
		font-size: 0.95rem;
	color: var(--x-ink);
}

.x-range input {
	grid-column: 1 / -1;
	width: 100%;
	height: 28px;
	margin: 0;
	background: transparent;
	accent-color: var(--x-primary);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.x-range input::-webkit-slider-runnable-track {
	height: 6px;
	background: linear-gradient(90deg, var(--x-primary) var(--fill, 50%), var(--x-paper-deep) var(--fill, 50%));
	border-radius: 6px;
}

.x-range input::-webkit-slider-thumb {
	width: 24px;
	height: 24px;
	margin-top: -9px;
	background: #fff;
	border: 2px solid var(--x-primary);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(21, 18, 27, 0.25);
	-webkit-appearance: none;
	appearance: none;
}

.x-range input::-moz-range-track {
	height: 6px;
	background: var(--x-paper-deep);
	border-radius: 6px;
}

.x-range input::-moz-range-progress {
	height: 6px;
	background: var(--x-primary);
	border-radius: 6px;
}

.x-range input::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: #fff;
	border: 2px solid var(--x-primary);
	border-radius: 50%;
}

.x-calc__result {
	position: relative;
	align-self: start;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	color: #fff;
	background: var(--x-deep);
	border-radius: var(--x-radius-sm);
	overflow: hidden;
}

.x-calc__result p {
	margin: 0;
}

.x-calc__label {
		font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.75);
}

.x-calc__big {
	margin: 0.35rem 0 0.4rem !important;
	font-family: var(--x-font-display);
	font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.012em;
	font-variant-numeric: tabular-nums;
}

.x-calc__sub {
	color: rgba(255, 255, 255, 0.85);
}

.x-chip .x-icon {
	width: 1.1rem;
	height: 1.1rem;
	margin-right: 0.4rem;
	vertical-align: -0.2em;
}

.x-calc__fine {
	margin-top: 1rem !important;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
}

/* The users slider names the package (data.bundle_for_users, the same rule as the pricing selector and the industry
   examples); "người dùng" is defined once, right under it. */
.x-calc__users {
	margin: -0.6rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--x-muted);
}

.x-calc__pkg {
	margin-top: 0.9rem !important;
	padding-top: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.x-calc__pkg a {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Calculator chips: the full industry name, a short one on phones (the long names wrapped to two lines there). */
.x-chip__short {
	display: none;
}

@media (max-width: 599px) {
	.x-calc__presets .x-chip__long {
		display: none;
	}

	.x-calc__presets .x-chip__short {
		display: inline;
	}
}

/* Mockup wrappers */
.x-mock {
	min-width: 0;
}

/* "Mock-up · sample data" caption under a mockup (mockup_block(note=True)), with the optional pause/replay button. */
.x-mock__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 0.6rem;
	margin: 0.75rem 0 0;
	font-family: var(--x-font-body);
	font-size: var(--x-fs-meta);
	line-height: 1.4;
	color: var(--x-muted);
	text-align: center;
}

.is-dark .x-mock__note {
	color: rgba(255, 255, 255, 0.72);
}

/* Icon only (its aria-label says pause or replay): a 32px ring with a 44px hit area. site.js wires it. */
.x-mock__ctl {
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--x-ink);
	background: transparent;
	border: 1px solid var(--x-line);
	border-radius: 50%;
	cursor: pointer;
}

.x-mock__ctl::before {
	content: "";
	position: absolute;
	inset: -6px;
}

.x-mock__ctl .x-icon {
	width: 16px;
	height: 16px;
	color: currentColor;
}

@media (hover: hover) and (pointer: fine) {
	.x-mock__ctl:hover {
		border-color: var(--x-ink);
	}

	.is-dark .x-mock__ctl:hover {
		border-color: #fff;
	}
}

.is-dark .x-mock__ctl {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.3);
}

html:not(.js) .x-mock__ctl {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.x-mock__ctl {
		display: none;
	}
}

.x-pain__list {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.x-pain__list li {
	display: grid;
	grid-template-columns: 1.5rem 1fr;
	gap: 0.85rem;
	align-items: start;
	font-size: var(--x-fs-body);
	color: var(--x-text);
}

.x-pain__list .x-icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--x-ink);
}

/* ---------- Plans: two white cards and the recommended one as a maroon field ---------- */
.x-plans {
	display: grid;
	gap: 1.25rem;
	align-items: stretch;
}

.x-plans > * {
	margin: 0;
}

@media (min-width: 980px) {
	/* Side by side, the recommended card grows upwards by the height of its first line ("Khuyên dùng"), so its
	   content starts level with the other two cards. */
	.x-plans {
		grid-template-columns: repeat(3, 1fr);
		padding-top: 2rem;
	}

	.x-plans > .x-plan.is-featured {
		margin-top: -2rem;
	}
}

.x-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.4rem, 2.5vw, 2rem);
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
}

.x-plan > * {
	margin-block: 0;
}

/* The recommended plan is the one maroon field ("act here"): white text, secondary lines at 78% white (6.9:1). Its
   "Khuyên dùng" is a plain first line, no band and no pill. */
.x-plan.is-featured {
	padding-top: calc(clamp(1.4rem, 2.5vw, 2rem) + 2rem);
	color: #fff;
	background: var(--x-primary);
	border-color: var(--x-primary);
}

.x-plan__badge {
	position: absolute;
	top: clamp(1.4rem, 2.5vw, 2rem);
	left: clamp(1.4rem, 2.5vw, 2rem);
	font-size: var(--x-fs-small);
	font-weight: 700;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.8);
}

.x-plan__name {
	font-family: var(--x-font-body);
	font-size: var(--x-fs-h3);
	font-weight: 700;
	color: var(--x-ink);
}

.x-plan__for {
	margin-top: 0.35rem !important;
	font-size: var(--x-fs-small);
	color: var(--x-text);
}

/* Home cards: "Đến 10 người dùng" is the plan's subtitle, on the same step as its name (a small line right above the
   big figure would read as an eyebrow). */
.x-plan.is-compact .x-plan__for {
	margin-top: 0.15rem !important;
	font-size: var(--x-fs-lead);
	line-height: 1.3;
}

/* The setup fee is a secondary line under the year-one total (decision D4: the total is the card's biggest number);
   space separates them, no rule. */
.x-plan__price {
	margin-top: 0.75rem !important;
	font-size: var(--x-fs-body);
	font-weight: 700;
	line-height: 1.4;
	color: var(--x-ink);
}

.x-plan.is-featured .x-plan__name,
.x-plan.is-featured .x-plan__price,
.x-plan.is-featured .x-plan__year b {
	color: #fff;
}

.x-plan.is-featured .x-plan__for,
.x-plan.is-featured .x-plan__year,
.x-plan.is-featured .x-plan__year small,
.x-plan.is-featured .x-plan__about,
.x-plan.is-featured .x-plan__label,
.x-plan.is-featured .x-plan__after,
.x-plan.is-featured .x-plan__time,
.x-plan.is-featured .x-plan__monthly,
.x-plan.is-featured .x-check li {
	color: rgba(255, 255, 255, 0.78);
}

.x-plan.is-featured .x-plan__retail {
	color: #fff;
}

.x-plan.is-featured .x-plan__time {
	background: rgba(255, 255, 255, 0.1);
}

.x-plan.is-featured .x-check li::before {
	background: #fff;
}

.x-plan.is-featured :focus-visible {
	outline-color: #fff;
}

.x-plan__retail {
	margin-top: 0.45rem !important;
	font-size: 0.9rem;
	color: var(--x-mint);
	font-weight: 600;
}

.x-plan__time {
	margin-top: 1rem !important;
	padding: 0.5rem 0.75rem;
	font-size: 0.85rem;
	color: var(--x-ink);
	background: var(--x-paper);
	border-radius: 8px;
}

.x-plan .x-check {
	margin-top: 1.25rem !important;
	margin-bottom: 1.25rem !important;
}

/* In a stretched card the spare height goes above the fine print, so the note and the button stay together
   at the bottom. */
.x-plan__monthly {
	margin-top: auto !important;
	padding-top: 1rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--x-muted);
}

/* Side by side, each row lines up across the three cards, even where a card has no saving line. Full cards (pricing):
   name, fit, year one, setup, year two, saving, timeline, checklist, fine print. Compact cards (home): name, fit,
   year one, setup, year two, highlights. */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 980px) {
		.x-plans {
			grid-template-rows: repeat(9, auto);
			row-gap: 0;
		}

		.x-plans > .x-plan {
			display: grid;
			grid-row: span 9;
			grid-template-rows: subgrid;
			row-gap: 0;
		}

		.x-plan__name { grid-row: 1; }
		.x-plan__for { grid-row: 2; }
		.x-plan__year { grid-row: 3; }
		.x-plan__price { grid-row: 4; }
		.x-plan__after { grid-row: 5; align-self: start; }
		.x-plan__retail { grid-row: 6; }
		.x-plan__time { grid-row: 7; align-self: start; }
		.x-plan .x-check { grid-row: 8; align-self: start; }

		.x-plan__monthly {
			grid-row: 9;
			margin-top: 0 !important;
		}

		.x-plans.is-compact {
			grid-template-rows: repeat(6, auto);
		}

		.x-plans.is-compact > .x-plan {
			grid-row: span 6;
		}

		.x-plans.is-compact .x-plan .x-check { grid-row: 6; }
	}
}

.x-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	margin-top: 2.5rem;
	padding: 1.1rem 1.4rem;
	background: #fff;
	border: 1px dashed rgba(21, 18, 27, 0.25);
	border-radius: var(--x-radius-sm);
}

.x-note > * {
	margin: 0;
}

.x-note__text {
	max-width: 46rem;
}

/* Home: the "start small" line under the year-one totals, closer to the cards than the pricing page's note. */
.x-note--small {
	margin-top: 1.25rem;
	font-size: 0.95rem;
}

/* ---------- Lists with icons ---------- */
.x-check {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.x-check li {
	position: relative;
	padding-left: 1.7rem;
	font-size: 0.95rem;
}

.x-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 1.1rem;
	height: 1.1rem;
	background: var(--x-mint);
	mask: var(--x-i-check) center / contain no-repeat;
}

/* Plan cards: the highlight marks are ink (small marks carry no accent); white in the maroon card. */
.x-plan .x-check li::before {
	background: var(--x-ink);
}

.is-dark .x-check li::before {
	background: #fff;
}

.x-check--big li {
	padding: 0.9rem 0 0.9rem 2.2rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--x-ink);
	border-bottom: 1px solid var(--x-line);
}

.x-check--big li::before {
	top: 1.1rem;
	width: 1.3rem;
	height: 1.3rem;
	background: var(--x-primary);
}

.x-deliver {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: x-deliver;
}

.x-deliver li {
	counter-increment: x-deliver;
	display: grid;
	grid-template-columns: 2.4rem 1fr;
	align-items: start;
	padding: 0.9rem 1rem;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
}

.x-deliver li::before {
	content: counter(x-deliver, decimal-leading-zero);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--x-primary);
	padding-top: 0.15rem;
}

/* A filled dot on the dashed line; an empty ring read like an unticked radio button. */

.x-guarantees {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: 0.75rem;
	margin: 3rem 0 0;
	padding: 0;
	list-style: none;
}

.x-guarantee {
	display: grid;
	grid-template-columns: 2rem 1fr;
	gap: 0.75rem;
	align-items: start;
	padding: 1.1rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--x-ink);
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
}

.x-guarantee__icon {
	--x-icon-size: 2rem;
}

/* Home, right under the rollout: the guarantees as an unboxed list (4 / 2 / 1 columns), so the timeline, the week-1
   flag and the guarantees read as one infographic. */
.x-process .x-guarantees {
	grid-template-columns: minmax(0, 1fr);
	gap: 0 2rem;
	margin-top: 2rem;
}

.x-process .x-guarantee {
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 0.75rem;
	padding: 1rem 0 0.75rem;
	font-size: var(--x-fs-body);
	font-weight: 400;
	color: var(--x-text);
	background: none;
	border: 0;
	border-top: 1px solid var(--x-line);
	border-radius: 0;
}

.x-process .x-guarantee__icon {
	width: 24px;
	height: 24px;
	color: var(--x-ink);
}

@media (min-width: 600px) {
	.x-process .x-guarantees {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 1.25rem;
	}

	.x-process .x-guarantee {
		padding-top: 0;
		border-top: 0;
	}
}

/* Phones: the four industry pills (calculator presets and these tabs) form a compact 2×2 grid instead of
   four ragged rows. */
@media (max-width: 599px) {
	.x-calc__presets {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.x-calc__presets .x-chip {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.4rem;
		padding: 0.6rem;
		font-size: 0.875rem;
		line-height: 1.25;
		text-align: center;
	}

	.x-calc__presets .x-chip .x-icon {
		margin-right: 0;
	}
}

/* ---------- FAQ ---------- */
.x-faq-grid {
	gap: clamp(2rem, 5vw, 5rem) !important;
}

/* With trust facts (home): head, questions and facts in one grid. Phones read head, questions, facts; from 782px the
   facts sit under the head, beside the questions. */
.x-faq-grid.is-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "head" "faqs" "facts";
	gap: 2rem !important;
}

.x-faq-grid.is-grid > * {
	min-width: 0;
	margin: 0 !important;
}

.x-faq-grid.is-grid > .x-head { grid-area: head; }
.x-faq-grid.is-grid > .x-faqs { grid-area: faqs; align-self: start; }
.x-faq-grid.is-grid > .x-faq-facts { grid-area: facts; }

.x-faq-facts .x-trust {
	margin-top: 0;
}

@media (min-width: 782px) {
	.x-faq-grid.is-grid {
		grid-template-columns: 38% minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "head faqs" "facts faqs";
		column-gap: clamp(2rem, 5vw, 5rem) !important;
		row-gap: 1.75rem !important;
	}
}

.x-faqs {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--x-line);
}

.x-faqs > * {
	margin: 0;
}

.x-faq {
	border-bottom: 1px solid var(--x-line);
}

.x-faq summary {
	position: relative;
	padding: 1.2rem 3rem 1.2rem 0;
	font-family: var(--x-font-body);
	font-size: var(--x-fs-body);
	font-weight: 700;
	color: var(--x-ink);
	list-style: none;
	cursor: pointer;
}

.x-faq summary::-webkit-details-marker {
	display: none;
}

.x-faq summary::after {
	content: "";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	width: 1.6rem;
	height: 1.6rem;
	margin-top: -0.8rem;
	background:
		linear-gradient(var(--x-ink), var(--x-ink)) center / 12px 2px no-repeat,
		linear-gradient(var(--x-ink), var(--x-ink)) center / 2px 12px no-repeat;
	border: 1px solid var(--x-line);
	border-radius: 50%;
	transition: transform var(--x-dur-ui) var(--x-ease-out), background-color 150ms ease;
}

.x-faq[open] summary::after {
	transform: rotate(45deg);
	background-color: var(--x-paper-deep);
}

/* Press: only the sign answers (the row itself does not move). */
.x-faq summary:active::after {
	transform: scale(0.9);
}

.x-faq[open] summary:active::after {
	transform: rotate(45deg) scale(0.9);
}

.x-faq > p {
	max-width: 36rem;
	margin: 0;
	padding: 0 0 1.4rem;
	font-size: var(--x-fs-body);
	color: var(--x-text);
}

/* The answer fades in a few pixels; the height is never animated. */
.x-faq[open] > p {
	animation: x-faq-in var(--x-dur-ui) var(--x-ease-out);
}

@keyframes x-faq-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

/* ---------- Latest posts as an editorial list ---------- */

.x-postlist .wp-block-post-template {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--x-line);
}

.x-postlist__row {
	display: grid !important;
	grid-template-columns: 6.5rem 1fr;
	gap: 0.25rem 1.25rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--x-line);
}

.x-postlist__row > * {
	margin: 0 !important;
}

.x-postlist__date {
	grid-row: span 2;
		font-size: 0.78rem;
	color: var(--x-muted);
	padding-top: 0.25rem;
}

.x-postlist__title {
	font-family: var(--x-font-body);
	font-size: 1.15rem !important;
	font-weight: 700;
	line-height: 1.3;
}

.x-postlist__title a {
	color: var(--x-ink);
	text-decoration: none;
	background: linear-gradient(var(--x-primary), var(--x-primary)) left bottom / 0 2px no-repeat;
	transition: background-size 0.35s var(--x-ease), color 0.2s;
}

.x-postlist__title a:hover {
	color: var(--x-primary);
	background-size: 100% 2px;
}

.x-postlist__cat {
	font-size: 0.8rem;
	color: var(--x-muted);
}

.x-postlist__cat a {
	color: inherit;
	text-decoration: none;
}

/* ---------- Final CTA + form ---------- */
/* overflow: clip (not hidden) so the band is not a scroll container and the form below can stick. */
.x-cta {
	position: relative;
	overflow: hidden;
	overflow: clip;
	isolation: isolate;
	background: var(--x-ink) !important;
}

/* The form starts level with the heading it belongs to, not centred against the taller left column. */
.x-cta__grid {
	align-items: flex-start !important;
	gap: clamp(2rem, 5vw, 5rem) !important;
}

/* Side by side on screens tall enough to show the whole form, it stays in view while the steps scroll past. */
@media (min-width: 782px) and (min-height: 780px) {
	.x-cta__grid > .wp-block-column:last-child {
		position: sticky;
		top: calc(var(--x-header-h) + 1.5rem);
	}
}

/* The title runs the full width above the steps and the form (two lines in VI and EN). */
.x-cta__head {
	margin-bottom: clamp(2rem, 4vw, 3rem) !important;
}

.x-cta__head > * {
	max-width: 50rem;
}

.x-cta__title {
	margin: 0;
	font-size: var(--x-fs-h2) !important;
	line-height: 1.08;
	color: #fff;
}

.x-cta__lead {
	margin-top: 0;
	font-size: var(--x-fs-body);
	color: rgba(255, 255, 255, 0.78);
}

/* What the call gives: the <ol> keeps the order; position carries it (no number discs), a light rule above each. */
.x-next {
	display: grid;
	gap: 0;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.x-next li {
	padding-block: 0.75rem;
	font-size: var(--x-fs-body);
	color: rgba(255, 255, 255, 0.88);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.x-cta__phone {
	max-width: 360px;
	margin-top: 2rem;
}

/* On one column the phone would sit between the steps and the form (and add a screen of height), so phones skip it. */
@media (max-width: 781px) {
	.x-cta__phone {
		display: none;
	}
}

/* Wide screens (home): the phone stands beside the heading and the steps instead of under them, so the left column is
   about as tall as the form and no blank band opens under the form. */
@media (min-width: 1200px) {
	.x-cta__grid.has-visual > .wp-block-column:first-child {
		flex-basis: 60% !important;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 280px;
		grid-template-rows: repeat(2, auto) 1fr;
		column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
		align-content: start;
	}

	.x-cta__grid.has-visual > .wp-block-column:last-child {
		flex-basis: 40% !important;
	}

	.x-cta__grid.has-visual > .wp-block-column:first-child > * {
		grid-column: 1;
		margin-block: 0;
	}

	.x-cta__grid.has-visual > .wp-block-column:first-child > .x-next {
		margin-top: 1rem;
	}

	.x-cta__grid.has-visual > .wp-block-column:first-child > .x-cta__phone {
		grid-column: 2;
		grid-row: 1 / -1;
		margin-top: 0;
	}

	.x-cta__grid.has-visual .x-cta__phone .m-morning-report {
		--m-morning-report-w: 280px;
	}
}

.x-form__alt {
	margin-top: 0.5rem !important;
	font-size: var(--x-fs-small);
	color: var(--x-muted);
}

.x-form {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--x-ink);
	background: var(--x-paper);
	border-radius: 22px;
}

.x-form > * {
	margin-block: 0;
}

.x-form__title {
	margin-bottom: 1.25rem !important;
	font-family: var(--x-font-body) !important;
	font-size: var(--x-fs-h3) !important;
	font-weight: 700 !important;
	color: var(--x-ink) !important;
}

.x-form a {
	color: var(--x-primary) !important;
}

.x-form .wpcf7 form > p {
	margin: 0 0 1rem;
}

.x-field {
	display: block;
	font-size: var(--x-fs-small);
	font-weight: 700;
}

.x-field__label {
	display: block;
	margin-bottom: 0.35rem;
}

.x-form input[type="text"],
.x-form input[type="tel"],
.x-form input[type="email"],
.x-form select {
	box-sizing: border-box;
	width: 100%;
	padding: 0.9rem 1rem;
	font: inherit;
	font-weight: 400;
	color: var(--x-ink);
	background: #fff;
	border: 1px solid #d8d2c9;
	border-radius: 12px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

/* Text fields: a maroon border and halo on focus. The submit button keeps the site's 2px maroon ring. */
.x-form input:not([type="submit"]):focus,
.x-form select:focus,
.x-form textarea:focus {
	outline: none;
	border-color: var(--x-primary);
	box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.22);
}

.x-form .wpcf7-submit {
	width: 100%;
	padding: 1rem;
	font: inherit;
	font-weight: 700;
	color: #fff;
	background: var(--x-primary);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.x-form .wpcf7-submit:hover {
	background: var(--x-crimson);
}

.x-form .wpcf7-submit:focus-visible {
	outline: 2px solid var(--x-primary);
	outline-offset: 3px;
}

.x-form form:not(.submitting) .wpcf7-spinner {
	display: none;
}

.x-form-note {
	font-size: var(--x-fs-meta);
	color: var(--x-muted);
}

.x-form .wpcf7-not-valid-tip {
	margin-top: 0.3rem;
	font-size: 0.8rem;
	color: #b00020;
}

.x-form .wpcf7 form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	border-radius: 10px;
}

/* ---------- Inner pages ---------- */
/* Top-aligned, so the heading sits at the same height on every service page whatever the mockup's height. */
.x-page-hero__grid {
	align-items: flex-start !important;
	gap: clamp(2rem, 4vw, 4rem) !important;
}

@media (min-width: 782px) {
	.x-page-hero__grid > .wp-block-column:first-child {
		padding-top: clamp(0rem, 3vw, 2.5rem);
	}
}

.x-crumbs {
	margin: 0 0 1.25rem;
		font-size: 0.78rem;
	color: var(--x-muted);
}

.x-crumbs a {
	color: inherit;
	text-decoration: none;
}

.x-crumbs a:hover {
	color: var(--x-primary);
}

.x-page-hero__title {
	max-width: 20ch;
	margin: 0;
	font-size: clamp(2.2rem, 1.3rem + 3vw, 4rem) !important;
	line-height: 1.04;
	letter-spacing: -0.015em;
}

.x-page-hero__lead {
	max-width: 40rem;
	margin-top: 1.4rem;
	font-size: 1.15rem;
	color: var(--x-text);
}

/* .x-actions drops the flow gap; give the hero buttons their own room under the lead. */
.x-page-hero .x-actions {
	margin-top: 1.75rem;
}

@media (max-width: 600px) {
	.x-page-hero__lead {
		font-size: 1.0625rem;
	}

	.x-page-hero .x-actions {
		margin-top: 1.25rem;
	}
}

.x-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 2.25rem 0 0;
	border-top: 1px solid var(--x-line);
}

.x-facts div {
	flex: 1 1 10rem;
	padding: 1rem 1.25rem 0 0;
}

.x-facts dt {
		font-size: 0.72rem;
	color: var(--x-muted);
}

.x-facts dd {
	margin: 0.25rem 0 0;
	font-weight: 700;
	color: var(--x-ink);
}

/* Stacked hero: the facts share one row so the mockup below comes into the first screen. */
@media (max-width: 781px) {
	.x-facts {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		column-gap: 0.75rem;
		margin-top: 1.5rem;
	}

	.x-facts div {
		padding: 0.75rem 0 0;
	}

	.x-facts dd {
		font-size: 0.875rem;
		line-height: 1.3;
	}
}

.x-split {
	gap: clamp(2rem, 5vw, 5rem) !important;
}

.x-spec {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: 0.75rem;
	margin: 0;
}

.x-spec div {
	padding: 1.25rem;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
}

.x-spec__icon {
	--x-icon-size: 1.8rem;
	margin-bottom: 0.6rem;
}

/* Careers: five roles as 3 + 2 rather than 4 + one card alone on a row. */
@media (min-width: 900px) {
	.x-roles .x-spec {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.x-roles .x-spec > div {
		grid-column: span 2;
	}

	.x-roles .x-spec > div:nth-child(4):nth-last-child(2),
	.x-roles .x-spec > div:nth-child(5):last-child {
		grid-column: span 3;
	}
}

.x-spec dt {
	font-family: var(--x-font-body);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--x-ink);
}

.x-spec dd {
	margin: 0.4rem 0 0;
	color: var(--x-text);
}

.x-spec--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.x-muted-note {
	max-width: 44rem;
	margin-top: 1.5rem;
	font-size: 0.9rem;
	color: var(--x-muted);
}

.x-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
	overflow: hidden;
}

.x-table caption {
	padding: 0 0 0.75rem;
	text-align: left;
	font-weight: 700;
}

.x-table th,
.x-table td {
	padding: 0.95rem 1.1rem;
	text-align: left;
	vertical-align: baseline;
	border-bottom: 1px solid var(--x-line);
}

.x-table tr:last-child th,
.x-table tr:last-child td {
	border-bottom: 0;
}

.x-table th {
	font-weight: 600;
	color: var(--x-ink);
}

.x-table th small {
	display: block;
	margin-top: 0.2rem;
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--x-muted);
}

/* The price is what people scan for: bolder and a touch larger than the item name, on the name's baseline. */
.x-table td {
	font-size: 1.2rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--x-ink);
	white-space: nowrap;
	text-align: right;
}

/* Service pages: keep each price close to its item instead of 1,240px away. */
.x-svc-prices .x-table {
	max-width: 52rem;
}

.x-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 0.75rem;
}

.x-contact__card {
	display: grid;
	align-content: start;
	gap: 0.3rem;
	padding: 1.4rem;
	color: var(--x-ink);
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius);
	transition: transform 0.25s var(--x-ease), box-shadow 0.25s, border-color 0.2s;
}

.x-contact__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--x-shadow);
	border-color: var(--x-ink);
}

.x-contact__card .x-icon {
	width: 1.8rem;
	height: 1.8rem;
	margin-bottom: 0.3rem;
}

/* Zalo is a second way in, not the main path (decision D10): a white card like the others, its colour on the icon only. */
.x-contact__card.is-zalo .x-icon {
	color: #0068ff;
}

.x-contact__card span {
		font-size: 0.75rem;
	color: var(--x-muted);
}

.x-contact__card b {
	font-family: var(--x-font-body);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.x-contact__card small {
	color: var(--x-muted);
}

/* ---------- Blog & single posts ---------- */
.x-article .wp-block-post-title {
	font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem);
	line-height: 1.08;
}

.x-article__meta {
	gap: 0.75rem;
		font-size: 0.8rem;
	color: var(--x-muted);
}

.x-article .wp-block-post-terms a {
	text-decoration: none;
}

.x-article .wp-block-post-featured-image img {
	border-radius: var(--x-radius);
}

.x-article .wp-block-post-content {
	font-size: 1.0625rem;
}

/* The serif is only for headings of 28px and up; smaller article headings use the body face. */
.x-article .wp-block-post-content :is(h3, h4, h5, h6) {
	font-family: var(--x-font-body);
	font-weight: 700;
}

.x-article .wp-block-post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* Under each old post: its related service and the booking link (functions.php). */
.x-post-cta {
	margin-top: var(--wp--preset--spacing--50);
	padding: 1.25rem 1.5rem;
	background: var(--x-paper-deep);
	border-radius: var(--x-radius);
}

.x-post-cta__kicker {
	margin: 0 0 0.25rem;
	font-size: 0.8rem;
	color: var(--x-muted);
}

.x-post-cta__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	margin: 0;
	font-weight: 700;
}

.x-post-cta__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.x-blog-grid {
	gap: 1.25rem;
}

.x-blog-card {
	height: 100%;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius);
	transition: transform 0.25s var(--x-ease), box-shadow 0.25s;
}

.x-blog-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--x-shadow);
}

.x-blog-card > * {
	margin-block: 0;
	padding-inline: 1.25rem;
}

.x-blog-card > .wp-block-post-featured-image {
	padding: 0;
}

.x-blog-card .wp-block-post-title {
	margin-top: 1rem;
	font-family: var(--x-font-body);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.x-blog-card .wp-block-post-title a {
	color: var(--x-ink);
	text-decoration: none;
}

.x-blog-card .wp-block-post-date {
	margin: 0.6rem 0 1.25rem;
		font-size: 0.78rem;
	color: var(--x-muted);
}

.x-story > p,
.x-apply > p {
	max-width: 46rem;
}

/* ---------- Mobile price tables: one column per row ---------- */
@media (max-width: 560px) {
	.x-table,
	.x-table tbody,
	.x-table tr,
	.x-table th,
	.x-table td {
		display: block;
		width: auto;
	}

	.x-table tr {
		padding: 0.85rem 1rem;
		border-bottom: 1px solid var(--x-line);
	}

	.x-table tr:last-child {
		border-bottom: 0;
	}

	.x-table th,
	.x-table td {
		padding: 0;
		border: 0;
		text-align: left;
	}

	.x-table td {
		margin-top: 0.35rem;
		white-space: normal;
	}
}

/* ---------- About page: the name's story beside the emblem it explains ---------- */
.x-story__grid {
	align-items: center !important;
	gap: clamp(1.5rem, 4vw, 4rem) !important;
}

.x-story__grid p {
	max-width: 40rem;
}

.x-story__emblem {
	display: grid;
	place-items: center;
	margin: 0;
}

.x-story__emblem img {
	display: block;
	width: min(100%, 340px);
	height: auto;
}

@media (max-width: 781px) {
	.x-story__emblem img {
		width: 200px;
	}
}

/* ---------- S1a: page structures ---------- */

/* Hub pages (services, industries): hero chooser card, one linked row per service or industry. */
.x-chooser {
	margin: 0;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius);
	box-shadow: var(--x-shadow);
}

.x-chooser__title {
	margin: 0 0 0.5rem;
	font-family: var(--x-font-body);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--x-ink);
}

.x-chooser__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.x-chooser__list li + li {
	border-top: 1px solid var(--x-line);
}

.x-chooser__item {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr) 1.25rem;
	gap: 0.9rem;
	align-items: center;
	padding: 0.85rem 0.25rem;
	color: inherit;
	text-decoration: none;
}

.x-chooser__icon {
	--x-icon-size: 2.75rem;
	box-sizing: border-box;
	padding: 0.55rem;
	color: var(--x-primary);
	background: var(--x-paper-deep);
	border-radius: 10px;
}

.x-chooser__text b {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--x-ink);
	transition: color 0.2s;
}

.x-chooser__text small {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--x-muted);
}

.x-chooser__go {
	--x-icon-size: 1.25rem;
	color: var(--x-primary);
	transition: transform 0.2s var(--x-ease);
}

.x-chooser__item:hover b {
	color: var(--x-primary);
}

.x-chooser__item:hover .x-chooser__go {
	transform: translateX(3px);
}

/* Service pages: deliverables carry an icon instead of a number. */
.x-deliver--icons li {
	grid-template-columns: 1.6rem minmax(0, 1fr);
	column-gap: 0.85rem;
}

.x-deliver--icons li::before {
	content: none;
	display: none;
}

.x-deliver__icon {
	--x-icon-size: 1.5rem;
	color: var(--x-primary);
}

/* The one thing CROSS will not promise sits apart from the three it does. */
.x-spec > .is-no {
	background: transparent;
	border-style: dashed;
	border-color: rgba(21, 18, 27, 0.28);
}

.x-spec > .is-no .x-spec__icon {
	color: var(--x-crimson);
}

/* Details and prices share one paper-deep band; a rule marks where the prices start. */

.x-svc-licence__title {
	margin: var(--wp--preset--spacing--50) 0 0.75rem;
	font-family: var(--x-font-body);
	font-size: 1.25rem;
	font-weight: 700;
}

.x-table td small {
	display: block;
	margin-top: 0.2rem;
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--x-muted);
}

/* About hero: the chain a customer travels, with what CROSS sets up at each joint. */
.x-joints {
	--x-joints-rail: calc(1rem + 1px + 1.375rem);
	max-width: 30rem;
	margin: 0 auto;
}

.x-joints__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.x-joints__part {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: 0.9rem;
	align-items: center;
	padding: 0.8rem 1rem;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
	box-shadow: var(--x-shadow-sm);
}

.x-joints__icon {
	--x-icon-size: 2.75rem;
	box-sizing: border-box;
	padding: 0.55rem;
	color: var(--x-ink);
	background: var(--x-paper-deep);
	border-radius: 10px;
}

.x-joints__part small {
	display: block;
	font-size: 0.8125rem;
	color: var(--x-muted);
}

.x-joints__part b {
	display: block;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--x-ink);
}

.x-joints__joint {
	position: relative;
	padding: 0.85rem 0 0.85rem calc(var(--x-joints-rail) + 1.1rem);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--x-primary);
}

.x-joints__joint::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--x-joints-rail) - 1px);
	width: 2px;
	background: var(--x-primary);
}

.x-joints__joint::after {
	content: "";
	position: absolute;
	top: 50%;
	left: var(--x-joints-rail);
	width: 0.9rem;
	height: 0.9rem;
	background: var(--x-primary);
	border: 3px solid var(--x-paper);
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--x-primary);
	transform: translate(-50%, -50%);
}

.x-joints figcaption {
	margin-top: 1.1rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--x-ink);
}

/* About story: the head lead and the paragraph under it read as one text. */
.x-story .x-head {
	margin-bottom: 1.1rem;
}

.x-story .x-head__lead {
	max-width: 46rem;
	color: var(--x-text);
}

/* Careers: the apply button and the plain address under it. */
.x-apply .x-actions {
	margin-top: 0.5rem;
}

.x-apply__alt {
	margin-top: 1rem;
	font-size: 0.95rem;
	color: var(--x-muted);
}

/* ==========================================================================================================
   Home v4 (simplification plan): industry chips, mockups that explain, system map + service cards, industry
   examples on paper, compact plan cards with year-one totals, rollout + guarantees, trust facts.
   ========================================================================================================== */

/* ---------- Industry chips (hero) and industry tabs ---------- */
.x-ind-chips,
.x-ind-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.x-hero__chips {
	margin: 1.75rem 0 0;
}

/* Hero chips: pills. The industry example's tabs are text tabs (C13), so the two controls do not repeat each other.
   Colour changes take 150ms (ease), so a tapped chip never passes through grey; the press scales (base.css). */
.x-ind-chip,
.x-ind-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	padding: 0.5rem 1rem;
	font: inherit;
	font-size: var(--x-fs-small);
	font-weight: 700;
	line-height: 1.2;
	color: var(--x-ink);
	text-align: left;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: 999px;
	cursor: pointer;
}

.x-ind-chip .x-icon,
.x-ind-tab .x-icon {
	--x-icon-size: 1.15rem;
	color: var(--x-ink);
}

@media (hover: hover) and (pointer: fine) {
	.x-ind-chip:hover {
		border-color: var(--x-ink);
	}

	.x-ind-tab:hover {
		color: var(--x-ink);
	}
}

.x-ind-chip[aria-pressed="true"] {
	color: #fff;
	background: var(--x-ink);
	border-color: var(--x-ink);
}

.x-ind-chip[aria-pressed="true"] .x-icon {
	color: #fff;
}

.x-ind-tab {
	padding: 0.5rem 0.1rem;
	color: var(--x-text);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
}

.x-ind-tab .x-icon {
	--x-icon-size: 18px;
	width: 18px;
	height: 18px;
}

.x-ind-tab[aria-selected="true"] {
	color: var(--x-ink);
	border-bottom-color: var(--x-ink);
}

.x-ind-tabs__list {
	gap: 0.25rem 1.75rem;
}

/* Up to 959px: a 2 × 2 grid ("Dịch vụ & tư vấn" no longer sits alone on a row); long names wrap instead of being cut. */
@media (max-width: 959px) {
	.x-ind-chips,
	.x-ind-tabs__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.x-ind-chip {
		padding: 0.45rem 0.7rem;
		border-radius: 14px;
	}

	.x-ind-tabs__list {
		column-gap: 1rem;
	}
}

/* Wide screens: a wider copy column so the four industry chips sit on one row beside the phone. */
@media (min-width: 1200px) {
	.x-hero__grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(330px, 0.6fr);
	}
}

.x-hero__visual > .x-mock__note {
	margin-top: 0.6rem;
}

/* ---------- A mockup with its "Để ý:" line and numbered points outside it ---------- */
.x-explain {
	container-type: inline-size;
}

.x-explain__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem 2.5rem;
	align-items: center;
}

@container (min-width: 1000px) {
	.x-explain__in {
		grid-template-columns: minmax(0, 1fr) minmax(12rem, 14rem);
	}
}

.x-explain__mock {
	min-width: 0;
}

.x-explain__aside > * {
	margin: 0;
}

.x-explain__notice {
	font-size: var(--x-fs-small);
	line-height: 1.45;
	color: var(--x-ink);
}

.x-explain__notice b {
	color: var(--x-primary);
}

.x-explain__points {
	display: grid;
	gap: 0.75rem;
	padding: 0;
	list-style: none;
	counter-reset: x-pt;
}

.x-explain__notice + .x-explain__points {
	margin-top: 1rem;
}

.x-explain__points li {
	counter-increment: x-pt;
	display: grid;
	grid-template-columns: 1.9rem 1fr;
	gap: 0.7rem;
	align-items: center;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--x-ink);
}

.x-explain__points li::before {
	content: counter(x-pt);
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	font-size: 0.875rem;
	color: #fff;
	background: var(--x-primary);
	border-radius: 50%;
}

/* Narrow: the points read as a row of three under the mockup when there is room, else a list. */
@container (min-width: 600px) and (max-width: 999px) {
	.x-explain__points {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.is-dark .x-explain__notice {
	color: rgba(255, 255, 255, 0.86);
}

.is-dark .x-explain__notice b {
	color: #fff;
}

/* ---------- How the system runs: map, four steps, four service cards ---------- */
.x-sysmap {
	min-width: 0;
}

/* Home: the map is the section's full-width centrepiece, without a frame (its inner padding keeps room for the rails). */
.x-how .x-sysmap .m-system-map {
	background: none;
	border: 0;
	border-radius: 0;
}

.x-pins {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem 1.5rem;
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.x-pins {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.x-pins {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.x-pins li {
	display: grid;
	grid-template-columns: 1.9rem 1fr;
	gap: 0.7rem;
	align-items: start;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--x-ink);
}

.x-pins__n {
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: #fff;
	background: var(--x-primary);
	border-radius: 50%;
}

.x-svc-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.x-svc-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}
}

@media (min-width: 1000px) {
	.x-svc-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Phones: the 3D object sits left of the text, so a card is one short row. From 600px it sits on top. */
.x-svc-card {
	position: relative;
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 0.9rem;
	align-items: center;
	padding: 0.9rem 1rem;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
	transition: border-color 150ms ease, transform var(--x-dur-fast) var(--x-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.x-svc-card:hover {
		border-color: var(--x-ink);
	}
}

.x-svc-card:focus-within {
	border-color: var(--x-ink);
}

.x-svc-card:has(a:active) {
	transform: scale(0.98);
	transition-duration: var(--x-dur-press);
}

.x-svc-card .m-illus-3d {
	width: 76px;
	margin: 0;
}

@media (min-width: 600px) {
	/* align-content: start keeps the object, the name and the text at the top of a stretched card, so every name in a
	   row starts at the same height. */
	.x-svc-card {
		grid-template-columns: 1fr;
		align-items: start;
		align-content: start;
		padding: 1.25rem 1.25rem 1.4rem;
	}

	.x-svc-card .m-illus-3d {
		width: 104px;
	}
}

.x-svc-card__body > * {
	margin: 0;
}

.x-svc-card__pins {
	display: flex;
	gap: 0.3rem;
	margin-bottom: 0.45rem !important;
}

.x-svc-card__pins i {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	font-size: 0.8125rem;
	font-style: normal;
	font-weight: 700;
	color: var(--x-primary);
	background: var(--x-paper-deep);
	border-radius: 50%;
}

.x-svc-card__name {
	font-family: var(--x-font-body);
	font-size: var(--x-fs-h3) !important;
	font-weight: 700;
	line-height: 1.25;
}

/* The name is the card's one link; it covers the whole card. */
.x-svc-card__name a {
	color: var(--x-ink);
	text-decoration: none;
}

.x-svc-card__name a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.x-svc-card__name a::after {
	content: "";
	display: inline-block;
	width: 0.95em;
	height: 0.95em;
	margin-left: 0.35rem;
	vertical-align: -0.12em;
	background: var(--x-ink);
	mask: var(--x-i-arrow) center / contain no-repeat;
	transition: transform var(--x-dur-ui) var(--x-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.x-svc-card:hover .x-svc-card__name a::after {
		transform: translateX(3px);
	}
}

.x-svc-card__name a:focus-visible {
	outline: none;
}

.x-svc-card:has(a:focus-visible) {
	outline: 2px solid var(--x-primary);
	outline-offset: 3px;
}

.x-svc-card__text {
	margin-top: 0.35rem !important;
	font-size: var(--x-fs-body);
	line-height: 1.45;
	color: var(--x-text);
	text-wrap: pretty;
}

/* ---------- Home: the four services as an unboxed lineup under the map ----------
   The 3D renders at poster size on one baseline (4 across from 1000px, 2 × 2 from 600px); on phones one short row per
   service (object left, text right) under a light rule. The name stays the one link and covers the item. */
.x-how .x-svc-cards {
	gap: 0;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.x-how .x-svc-card {
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 1rem;
	padding: 1rem 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--x-line);
	border-radius: 0;
}

.x-how .x-svc-card .m-illus-3d {
	width: 88px;
}

.x-how .x-svc-card:has(a:focus-visible) {
	outline-offset: 4px;
	border-radius: 12px;
}

@media (min-width: 600px) {
	.x-how .x-svc-cards {
		gap: 2.5rem 2rem;
	}

	.x-how .x-svc-card {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
		padding: 0;
		border-top: 0;
	}

	.x-how .x-svc-card .m-illus-3d {
		width: 150px;
	}

	.x-how .x-svc-card__text {
		max-width: 34ch;
	}
}

@media (min-width: 1000px) {
	.x-how .x-svc-card {
		grid-template-rows: 184px auto;
	}

	.x-how .x-svc-card .m-illus-3d {
		align-self: end;
		width: clamp(150px, 13vw, 184px);
	}

	.x-how .x-svc-card__text {
		max-width: 28ch;
	}
}

/* Home, four across: room for a two-line name in every card, so the sentences under them line up too. */
@media (min-width: 1000px) {
	.x-svc-cards:not(.x-hub-cards) .x-svc-card__name {
		min-height: 2.5em;
	}

	/* The home lineup sets each name on the foot of that two-line slot, so a one-line name sits right on its sentence
	   instead of a blank line above it (the names share a baseline, the sentences still line up). */
	.x-how .x-svc-card__name {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
}

/* ---------- Example for your industry (paper, synced with the hero chips) ---------- */
.x-ind-tabs__list {
	margin-bottom: 1.25rem;
}

.x-ind-panel {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem 2.5rem;
	align-items: center;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius);
}

.x-ind-panel__art .m-illus-3d {
	width: 120px;
	margin: 0;
}

/* Stacked panel: the object only identifies the industry (the chips above name it), so it stays small and does not
   open a blank row above the steps. (.is-md: the component's own container-relative width has the same specificity
   and loads later.) Home: steps first, then the object beside the result line, as the industries page's bands do. */
@media (max-width: 781px) {
	.x-ind-panel__art .m-illus-3d.is-md,
	.x-ind-tabs .x-ind-panel__art .m-illus-3d {
		width: 72px;
	}

	.x-ind-tabs .x-ind-panel {
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 0.85rem;
		row-gap: 0;
	}

	.x-ind-tabs .x-ind-panel__body {
		display: contents;
	}

	.x-ind-tabs .x-ind-flow {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.x-ind-tabs .x-ind-panel__art {
		grid-column: 1;
		grid-row: 2;
		align-self: center;
		margin-top: 1rem;
	}

	.x-ind-tabs .x-ind-panel__result {
		grid-column: 2;
		grid-row: 2;
		align-self: center;
		margin-top: 1rem !important;
	}

	.x-ind-tabs .x-ind-panel__plan {
		grid-column: 1 / -1;
		grid-row: 3;
		padding-left: 0;
	}
}

@media (min-width: 782px) {
	.x-ind-panel {
		grid-template-columns: 200px minmax(0, 1fr);
	}

	.x-ind-panel__art .m-illus-3d {
		width: 200px;
		margin: 0 auto;
	}
}

.x-ind-panel__body > * {
	margin: 0;
}

/* Five numbered icon steps: a row on wide screens, a short vertical list on phones. */
.x-ind-flow {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem;
	padding: 0;
	list-style: none;
	counter-reset: x-step;
}

.x-ind-flow li {
	counter-increment: x-step;
	position: relative;
	display: grid;
	grid-template-columns: 2.75rem 1fr;
	gap: 0.75rem;
	align-items: center;
	font-size: 0.975rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--x-ink);
}

.x-ind-flow__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--x-paper-deep);
	border-radius: 50%;
}

.x-ind-flow__icon .x-icon {
	--x-icon-size: 1.35rem;
	color: var(--x-primary);
}

.x-ind-flow__icon::after {
	content: counter(x-step);
	position: absolute;
	top: -0.2rem;
	left: -0.2rem;
	display: grid;
	place-items: center;
	width: 1.2rem;
	height: 1.2rem;
	font-size: 0.72rem;
	font-weight: 700;
	color: #fff;
	background: var(--x-primary);
	border-radius: 50%;
}

@media (min-width: 1000px) {
	.x-ind-flow {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 1rem;
	}

	.x-ind-flow li {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 0.6rem;
	}

	/* A thin connector from each step's icon to the next. */
	.x-ind-flow li:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 1.375rem;
		left: 3.25rem;
		right: -0.5rem;
		height: 2px;
		background: repeating-linear-gradient(90deg, var(--x-line) 0 6px, transparent 6px 10px);
	}
}

.x-ind-panel__result {
	position: relative;
	margin-top: 1.4rem !important;
	padding-left: 1.75rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--x-ink);
}

.x-ind-panel__result::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.25rem;
	height: 1.25rem;
	background: var(--x-mint);
	mask: var(--x-i-check) center / contain no-repeat;
}

.x-ind-panel__plan {
	margin-top: 0.6rem !important;
	padding-left: 1.75rem;
	font-size: 0.95rem;
	color: var(--x-muted);
}

.x-ind-panel__plan b {
	color: var(--x-ink);
}

/* ---------- Plan cards: the year-one total as the biggest number, its assumption (D4) ---------- */
.x-plan__year {
	margin-top: 1.35rem !important;
	line-height: 1.35;
	color: var(--x-text);
}

/* Pricing page only: home prints "Chưa gồm VAT và tiền quảng cáo" once, as the plans lead. */
.x-plan__label {
	display: block;
	font-size: var(--x-fs-meta);
	font-weight: 600;
	color: var(--x-muted);
}

.x-plan__year b {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--x-font-display);
	font-size: var(--x-fs-h2);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.015em;
	color: var(--x-ink);
}

.x-plan__year small {
	display: block;
	margin-top: 0.45rem;
	font-size: var(--x-fs-meta);
	color: var(--x-muted);
}

/* "khoảng" / "từ khoảng" before the figure: small body face, so the serif stays for the number itself. */
.x-plan__about {
	font-family: var(--x-font-body);
	font-size: var(--x-fs-meta);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--x-text);
}

.x-plan__after {
	margin-top: 0.35rem !important;
	font-size: var(--x-fs-body);
	line-height: 1.45;
	color: var(--x-text);
	text-wrap: pretty;
}

.x-plan .x-check li {
	font-size: var(--x-fs-body);
}

.x-plan.is-compact .x-check {
	margin-top: 1.1rem !important;
	margin-bottom: 0 !important;
}

.x-plans__fine {
	max-width: 40rem;
	margin: 1.5rem 0 0 !important;
	font-size: var(--x-fs-meta);
	color: var(--x-muted);
}

/* Text links are maroon ("act here"). */
.x-plans__fine a {
	font-weight: 700;
	color: var(--x-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.x-plans__cta {
	margin-top: 1.5rem;
}

.x-plans__cta > * {
	margin-block: 0;
}

.x-plans__cta .x-zalo-link {
	margin-top: 0.25rem;
}

/* Home: one foot row under the cards. Fine print with its details link on the left, the CTA and Zalo on the right
   (closes the void that sat to the right of a stacked CTA). Phones: fine print, then the CTA, left-aligned. */
.x-plans__foot {
	display: grid;
	gap: 1.5rem 2rem;
	margin-top: 1.5rem;
}

.x-plans__foot > * {
	margin: 0 !important;
}

@media (min-width: 782px) {
	.x-plans__foot {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: 2rem;
	}

	.x-plans__foot .x-plans__cta {
		display: grid;
		justify-items: end;
		text-align: right;
	}
}

/* Tablets: a stacked card would leave its right half empty; it gets two inner columns instead (name, fit, year one,
   setup | year two, highlights). */
@media (min-width: 600px) and (max-width: 979px) {
	.x-plans.is-compact > .x-plan {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-auto-rows: min-content;
		column-gap: clamp(1.5rem, 4vw, 2.5rem);
		align-content: start;
	}

	.x-plan.is-compact > .x-plan__name { grid-area: 1 / 1; }
	.x-plan.is-compact > .x-plan__for { grid-area: 2 / 1; }
	.x-plan.is-compact > .x-plan__year { grid-area: 3 / 1; }
	.x-plan.is-compact > .x-plan__price { grid-area: 4 / 1; }
	.x-plan.is-compact > .x-plan__after { grid-area: 1 / 2 / 3 / 3; margin-top: 0 !important; }
	.x-plan.is-compact > .x-check { grid-area: 3 / 2 / 5 / 3; margin-top: 1.35rem !important; }
}

/* ---------- Four weeks + guarantees ---------- */
.x-rollout {
	min-width: 0;
}

@media (min-width: 1000px) {
	.x-process .x-guarantees {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Trust facts beside the FAQ ---------- */
.x-trust {
	display: grid;
	gap: 0;
	margin: 1.75rem 0 0;
	border-top: 1px solid var(--x-line);
}

.x-trust div {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 0.75rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--x-line);
}

.x-trust dt {
	font-size: var(--x-fs-small);
	color: var(--x-text);
}

.x-trust dd {
	margin: 0;
	font-size: var(--x-fs-body);
	font-weight: 600;
	color: var(--x-ink);
}

.x-trust a {
	color: var(--x-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Touch: 44px-tall targets. The padding is taken back by a negative margin, so the text keeps its line and the rows
   their height. */
@media (pointer: coarse) {
	.x-trust a,
	.x-proof a {
		display: inline-block;
		padding-block: 0.65rem;
		margin-block: -0.65rem;
	}
}

/* ---------- Booking band ---------- */
.x-cta__phone .x-explain__in {
	justify-items: start;
}

.x-cta__phone .x-explain__mock {
	width: 100%;
	max-width: 340px;
}

.x-form__hint {
	margin-top: 0.35rem !important;
	font-size: var(--x-fs-meta);
	color: var(--x-muted);
}

.x-form .x-zalo-link {
	margin-top: 0.5rem;
}

/* ---------- Home on phones: shorter page (plan budget ≈ 14 screens) ---------- */
@media (max-width: 599px) {
	/* A tighter vertical rhythm than the 4.5rem section preset, on the home page only (budget: 14 phone screens). */
	.x-main:has(.x-hero) .x-section:not(.x-hero) {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}

	.x-hero__visual .m-ai-chat {
		--m-ai-chat-w: 288px;
	}

	.x-how .x-svc-cards {
		margin-top: 1.75rem;
	}

	.x-main:has(.x-hero) .x-head,
	.x-main:has(.x-hero) .x-cta__head {
		margin-bottom: 1.5rem !important;
	}

	/* The FAQ head sits in a grid: the grid gap spaces it. */
	.x-main:has(.x-hero) .x-faq-grid.is-grid > .x-head {
		margin-bottom: 0 !important;
	}

	.x-faq-grid.is-grid {
		gap: 1.5rem !important;
	}

	.x-process .x-guarantee {
		padding: 0.85rem 0 0.6rem;
	}

	.x-hero__grid {
		gap: 1.25rem;
	}

	.x-pins {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.9rem 0.75rem;
	}

	.x-pins li {
		grid-template-columns: 1fr;
		gap: 0.4rem;
		font-size: 0.9375rem;
	}

	.x-ind-panel {
		gap: 0.75rem;
	}

	.x-plan.is-compact {
		padding: 1.15rem 1.15rem 1.25rem;
	}

	.x-plan.is-compact.is-featured {
		padding-top: calc(1.15rem + 2rem);
	}

	.x-plan.is-compact .x-plan__badge {
		top: 1.15rem;
		left: 1.15rem;
	}

	.x-plan.is-compact .x-plan__year {
		margin-top: 0.9rem !important;
	}
}

/* Narrow phones: a smaller object leaves the service sentence room for fewer lines, and the sections a little less air
   (the text runs longer here). */
@media (max-width: 359px) {
	.x-main:has(.x-hero) .x-section:not(.x-hero) {
		padding-top: 1.75rem !important;
		padding-bottom: 1.75rem !important;
	}

	.x-main:has(.x-hero) .x-head,
	.x-main:has(.x-hero) .x-cta__head {
		margin-bottom: 1.25rem !important;
	}

	.x-how .x-svc-card {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 0.85rem;
	}

	.x-how .x-svc-card .m-illus-3d {
		width: 64px;
	}
}

/* Phones: the system and rollout sections follow sections that end on a small line (the "Mô phỏng" caption, the Zalo
   link); a little more air above their titles keeps that line with its own section. */
@media (max-width: 599px) {
	.x-main:has(.x-hero) .x-section.x-how,
	.x-main:has(.x-hero) .x-section.x-process {
		padding-top: 2.75rem !important;
	}
}

/* Industry steps (industries page): two columns between phones and the five-across row. */
@media (min-width: 360px) and (max-width: 999px) {
	.x-ind-flow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem 1rem;
	}

	.x-ind-flow li {
		grid-template-columns: 2.5rem 1fr;
		font-size: 0.9375rem;
	}

	.x-ind-flow li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.x-ind-flow__icon {
		width: 2.5rem;
		height: 2.5rem;
	}
}

/* ---------- Home: the industry example as one poster per industry ----------
   No card. From 960px the 3D object (large) beside the steps, the result and the plan line; below, the vertical flow
   as before. The steps hang on one continuous ink line, each marked by its ink icon in a paper-deep circle that breaks
   the line; the <ol> keeps the order (no counters, no dashed connectors). */
.x-ind-tabs .x-ind-panel {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

/* 0.75rem between the 32px markers leaves enough of the line showing to read as one line, not as dashes. */
.x-ind-tabs .x-ind-flow {
	position: relative;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

.x-ind-tabs .x-ind-flow::before {
	content: "";
	position: absolute;
	top: 1rem;
	bottom: 1rem;
	left: calc(1rem - 1px);
	width: 2px;
	background: rgba(21, 18, 27, 0.18);
}

.x-ind-tabs .x-ind-flow li {
	grid-template-columns: 2rem minmax(0, 1fr);
	gap: 0.85rem;
	align-items: center;
	font-size: var(--x-fs-body);
	font-weight: 600;
	color: var(--x-ink);
}

.x-ind-tabs .x-ind-flow li:last-child:nth-child(odd) {
	grid-column: auto;
}

.x-ind-tabs .x-ind-flow li::after,
.x-ind-tabs .x-ind-flow__icon::after {
	content: none;
	display: none;
}

.x-ind-tabs .x-ind-flow__icon {
	width: 2rem;
	height: 2rem;
	background: var(--x-paper-deep);
}

.x-ind-tabs .x-ind-flow__icon .x-icon {
	--x-icon-size: 20px;
	width: 20px;
	height: 20px;
	color: var(--x-ink);
}

.x-ind-tabs .x-ind-panel__result {
	padding-left: 0;
	font-size: var(--x-fs-h3);
	font-weight: 700;
	line-height: 1.3;
	color: var(--x-ink);
}

.x-ind-tabs .x-ind-panel__result::before {
	content: none;
}

.x-ind-tabs .x-ind-panel__plan {
	padding-left: 0;
	font-size: var(--x-fs-body);
	color: var(--x-text);
}

@media (min-width: 782px) and (max-width: 959px) {
	.x-ind-tabs .x-ind-panel__art .m-illus-3d {
		width: 200px;
	}
}

@media (min-width: 960px) {
	.x-ind-tabs .x-ind-panel {
		grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
		gap: clamp(2rem, 4vw, 4rem);
		align-items: center;
	}

	.x-ind-tabs .x-ind-panel__art .m-illus-3d {
		width: clamp(300px, 28vw, 380px);
		margin: 0 auto;
	}

	.x-ind-tabs .x-ind-flow li {
		font-size: var(--x-fs-lead);
	}
}

/* ==========================================================================================================
   Inner pages v4 (simplification plan §5): service-page template, AI "when … then …" chains and the comparison,
   Bitrix24 daily use, technical detail block, price options, pricing year-one selector, per-service groups, vendor
   table, industries bands, services hub. All class names are new or modifiers, so the home page is unaffected.
   ========================================================================================================== */

/* ---------- Hero: small 3D badge above the H1 (phone-mockup pages) or the large 3D as the visual ---------- */
.x-page-hero__badge {
	margin: 0 0 0.75rem;
}

.x-page-hero__badge .m-illus-3d.is-sm {
	width: 96px;
	margin: 0;
}

/* The large object: the WebP carries about a quarter of transparent margin on each side, so the box is drawn larger than
   the object looks. Side by side it is centred against the copy (min-height: 100% never resolved: the column has no
   definite height). */
.x-page-hero__art {
	display: grid;
	place-items: center;
}

.x-page-hero__art .m-illus-3d.is-lg {
	width: min(100%, 540px);
}

@media (min-width: 782px) {
	.x-page-hero__grid > .wp-block-column:has(.x-page-hero__art) {
		align-self: center;
	}

	/* The page also passes its object as the small badge; side by side the large one stands in for it. */
	.x-page-hero__grid:has(.x-page-hero__art) .x-page-hero__badge {
		display: none;
	}
}

/* Stacked hero: the large object gives way to the small badge between the crumbs and the H1, as on the phone-mockup
   pages, so every service page opens the same way and the H1 comes first. */
@media (max-width: 781px) {
	.x-page-hero__grid > .wp-block-column:has(.x-page-hero__art) {
		display: none;
	}

	.x-page-hero__badge .m-illus-3d.is-sm {
		width: 80px;
	}
}

/* ---------- A phone mockup with its "Để ý:" line and points beside it ---------- */
.x-svc-chat .m-ai-chat {
	--m-ai-chat-w: 340px;
}

.x-mock--phone .x-explain__mock {
	justify-self: center;
	width: 100%;
	max-width: 350px;
}

.x-mock--phone .x-explain__points {
	grid-template-columns: minmax(0, 1fr) !important;
}

@container (min-width: 560px) {
	.x-mock--phone.x-explain .x-explain__in {
		grid-template-columns: minmax(0, 350px) minmax(11rem, 18rem);
		justify-content: start;
	}

	.x-mock--phone .x-explain__mock {
		justify-self: start;
	}

	/* In a hero column the aside's 18rem cap squeezed the phone to about 260px (and into its narrow-phone styles, which
	   cut the customer's first message). The phone track fills first; the aside takes what is left. */
	.x-page-hero .x-mock--phone.x-explain .x-explain__in {
		grid-template-columns: minmax(0, 340px) minmax(10rem, 1fr);
	}
}

/* ---------- Section head with a small 3D object after it ---------- */
/* The text keeps the content edge every other head and the mockup below share; the object sits to its right. */
.x-head-art {
	display: grid;
	grid-template-columns: fit-content(50rem) 112px;
	justify-content: start;
	gap: 1.5rem;
	align-items: center;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.x-head-art .m-illus-3d.is-sm {
	width: 112px;
	margin: 0;
}

.x-head-art__text {
	max-width: 50rem;
}

.x-head-art__text > * {
	margin-block: 0;
}

/* Phones: the object above the kicker, its transparent margin pulled back so the visible object starts at the edge;
   the heading keeps the full width. */
@media (max-width: 599px) {
	.x-head-art {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.25rem;
	}

	.x-head-art .m-illus-3d.is-sm {
		order: -1;
		width: 72px;
		margin-left: -14px;
	}
}

/* ---------- AI page: one automation = one "when … then …" chain ---------- */
.x-chains {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.x-chains {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

.x-chain {
	padding: 1.1rem 1.2rem;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
}

.x-chain p {
	display: grid;
	grid-template-columns: 2.4rem minmax(0, 1fr);
	gap: 0.8rem;
	align-items: center;
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--x-ink);
}

.x-chain p > .x-icon {
	--x-icon-size: 2.4rem;
	box-sizing: border-box;
	padding: 0.55rem;
	color: var(--x-primary);
	background: var(--x-paper-deep);
	border-radius: 50%;
}

.x-chain b {
	color: var(--x-primary);
}

.x-chain__then {
	margin-top: 0.85rem !important;
	padding-top: 0.85rem;
	border-top: 1px dashed var(--x-line);
}

.x-chain__then > .x-icon {
	color: #fff !important;
	background: var(--x-primary) !important;
}

.x-connects {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.x-connects__label {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--x-ink);
}

.x-connects .x-tools__list {
	justify-content: flex-start;
}

/* ---------- AI page: evening receptionist vs the assistant ---------- */
.x-vs {
	display: grid;
	gap: 0.75rem;
}

@media (min-width: 782px) {
	.x-vs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}
}

.x-vs__col {
	padding: 1.25rem 1.4rem 1.4rem;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
}

.x-vs__col.is-person {
	background: transparent;
	border-style: dashed;
	border-color: rgba(21, 18, 27, 0.28);
}

.x-vs__col.is-bot {
	border: 2px solid var(--x-primary);
}

.x-vs__title {
	margin: 0 0 0.75rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--x-ink);
}

.x-vs__col ul {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.x-vs__col li {
	position: relative;
	padding-left: 1.6rem;
	font-size: 0.975rem;
	line-height: 1.45;
	color: var(--x-text);
}

.x-vs__col li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1rem;
	height: 1rem;
	background: var(--x-muted);
	mask: var(--x-i-x) center / contain no-repeat;
}

.x-vs__col.is-bot li::before {
	background: var(--x-mint);
	mask-image: var(--x-i-check);
}

.x-vs__col.is-bot li:last-child {
	padding-top: 0.6rem;
	padding-left: 0;
	font-weight: 600;
	color: var(--x-ink);
	border-top: 1px dashed var(--x-line);
}

.x-vs__col.is-bot li:last-child::before {
	content: none;
}

.x-svc-extra .x-note {
	margin-top: 1.5rem;
}

/* ---------- Bitrix24: what a rep does each day ---------- */
.x-daily {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: x-daily;
}

@media (min-width: 782px) {
	.x-daily {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

.x-daily li {
	counter-increment: x-daily;
	position: relative;
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	column-gap: 0.9rem;
	row-gap: 0.2rem;
	align-items: start;
	align-content: start; /* a card stretched to the row's height keeps its text at the top */
	padding: 1.1rem 1.2rem;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
}

.x-daily__icon {
	position: relative;
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--x-paper-deep);
	border-radius: 50%;
}

.x-daily__icon .x-icon {
	--x-icon-size: 1.35rem;
	color: var(--x-primary);
}

.x-daily__icon::after {
	content: counter(x-daily);
	position: absolute;
	top: -0.2rem;
	left: -0.2rem;
	display: grid;
	place-items: center;
	width: 1.2rem;
	height: 1.2rem;
	font-size: 0.72rem;
	font-weight: 700;
	color: #fff;
	background: var(--x-primary);
	border-radius: 50%;
}

.x-daily b {
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--x-ink);
}

.x-daily li > span:last-child {
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--x-text);
}

.x-daily__after {
	margin-top: 1.5rem !important;
}

.x-daily__after li {
	font-size: 1rem;
}

/* ---------- Technical detail, collapsed (for the IT person) ---------- */
.x-tech {
	margin: 0;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
}

.x-tech > summary {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.05rem 3.5rem 1.05rem 1.2rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--x-ink);
	list-style: none;
	cursor: pointer;
}

.x-tech > summary::-webkit-details-marker {
	display: none;
}

.x-tech > summary::after {
	content: "";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	width: 1.6rem;
	height: 1.6rem;
	margin-top: -0.8rem;
	background:
		linear-gradient(var(--x-ink), var(--x-ink)) center / 12px 2px no-repeat,
		linear-gradient(var(--x-ink), var(--x-ink)) center / 2px 12px no-repeat;
	border: 1px solid var(--x-line);
	border-radius: 50%;
	transition: transform 0.3s var(--x-ease);
}

.x-tech[open] > summary::after {
	transform: rotate(45deg);
}

.x-tech__icon {
	--x-icon-size: 1.5rem;
	color: var(--x-muted);
}

.x-tech__body {
	padding: 0.25rem 1.2rem 1.4rem;
}

.x-tech__body > * {
	margin-block: 0;
}

.x-tech__body > * + * {
	margin-top: 1.25rem;
}

.x-tech__text {
	max-width: 50rem;
	color: var(--x-text);
}

.x-tech .x-mock + .x-mock {
	margin-top: 2rem;
}

.x-tech__list li {
	font-size: 0.975rem;
}

/* ---------- Service pages: 2–3 price options ---------- */
.x-opts {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 782px) {
	.x-opts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

.x-opt {
	display: flex;
	flex-direction: column;
	padding: 1.2rem 1.3rem 1.3rem;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
}

.x-opt > p {
	margin: 0;
}

.x-opt__name {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--x-ink);
}

.x-opt__price {
	margin-top: 0.6rem !important;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	color: var(--x-ink);
}

.x-opt__note {
	margin-top: 0.3rem !important;
	font-size: 0.875rem;
	color: var(--x-muted);
}

.x-opt__note.is-empty {
	display: none;
}

.x-opt__use {
	margin-top: auto !important;
	padding-top: 0.9rem;
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--x-text);
}

.x-opt__use b {
	color: var(--x-ink);
}

/* Side by side, the four rows (name, price, note, "dùng khi") line up across the cards whatever wraps: a two-line
   name or a missing note no longer pushes one card's price or "dùng khi" below its neighbours'. */
@media (min-width: 782px) {
	@supports (grid-template-rows: subgrid) {
		.x-opt {
			display: grid;
			grid-row: span 4;
			grid-template-rows: subgrid;
			row-gap: 0;
			align-content: start;
		}

		.x-opt__note.is-empty {
			display: block;
			margin: 0 !important;
		}

		.x-opt__use {
			margin-top: 0 !important;
		}
	}
}

.x-svc-prices .x-opts + * {
	margin-top: 1.5rem;
}

/* The licence table is its own topic: more air above its title than above a plain link. */
.x-svc-prices .x-opts + .x-svc-licence__title {
	margin-top: clamp(2.25rem, 4vw, 3rem);
}

/* Licence and "dùng khi" tables: a header row; the text columns read as text, the price column as a figure. */
.x-table thead th {
	padding-block: 0.7rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--x-muted);
	background: var(--x-paper);
}

.x-table td.x-table__use,
.x-table td.x-table__users {
	font-size: 0.95rem;
	font-weight: 400;
	white-space: normal;
	text-align: left;
	color: var(--x-text);
}

.x-table thead th:last-child {
	text-align: right;
}

.x-table--use th[scope="row"] {
	width: 38%;
}

@media (max-width: 560px) {
	.x-table thead {
		display: none;
	}

	.x-table td.x-table__use::before {
		content: attr(data-label) ": ";
		font-weight: 700;
		color: var(--x-ink);
	}

	.x-table--use th[scope="row"] {
		width: auto;
	}
}

/* ---------- Pricing: year-one selector (radio sizes; :has shows the chosen size, no JS needed) ---------- */
.x-y1 {
	container-type: inline-size;
	padding: clamp(1.1rem, 2.5vw, 1.75rem);
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius);
	box-shadow: var(--x-shadow);
}

.x-y1__sizes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.x-y1__legend {
	margin-bottom: 0.7rem;
	padding: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--x-ink);
}

.x-y1__size {
	position: relative;
	display: block;
	cursor: pointer;
}

.x-y1__size input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.x-y1__size > span {
	display: grid;
	gap: 0.15rem;
	height: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.8rem;
	background: var(--x-paper);
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.x-y1__size b {
	font-size: 0.95rem;
	line-height: 1.25;
	color: var(--x-ink);
}

.x-y1__size small {
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--x-muted);
}

.x-y1__size:hover > span {
	border-color: var(--x-ink);
}

.x-y1__size input:checked + span {
	background: var(--x-ink);
	border-color: var(--x-ink);
}

.x-y1__size input:checked + span b,
.x-y1__size input:checked + span small {
	color: #fff;
}

.x-y1__size input:focus-visible + span {
	outline: 2px solid var(--x-primary);
	outline-offset: 2px;
}

@container (max-width: 459px) {
	.x-y1__sizes {
		grid-template-columns: minmax(0, 1fr);
	}

	.x-y1__size > span {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: baseline;
		column-gap: 0.5rem;
		padding: 0.6rem 0.8rem;
	}
}

.x-y1__outs {
	margin-top: 1.25rem;
}

.x-y1__out {
	display: none;
}

.x-y1:has(input[value="khoi-dong"]:checked) [data-y1="khoi-dong"],
.x-y1:has(input[value="tang-toc"]:checked) [data-y1="tang-toc"],
.x-y1:has(input[value="doanh-nghiep"]:checked) [data-y1="doanh-nghiep"] {
	display: block;
}

/* Without :has every size shows, one under the other, and the buttons are hidden. */
@supports not selector(:has(*)) {
	.x-y1__out {
		display: block;
	}

	.x-y1__out + .x-y1__out {
		margin-top: 1.25rem;
		padding-top: 1.25rem;
		border-top: 1px solid var(--x-line);
	}

	.x-y1__sizes {
		display: none;
	}
}

.x-y1__out > p {
	margin: 0;
}

.x-y1__label {
	font-size: 0.9rem;
	color: var(--x-muted);
}

.x-y1__total {
	margin: 0.2rem 0 0.9rem !important;
	font-family: var(--x-font-display);
	font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.1rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.012em;
	font-variant-numeric: tabular-nums;
	color: var(--x-ink);
}

.x-y1__bar {
	display: flex;
	height: 1.25rem;
	overflow: hidden;
	background: var(--x-paper);
	border-radius: 6px;
}

.x-y1__seg + .x-y1__seg {
	border-left: 2px solid #fff;
}

.x-y1__seg.is-once,
.x-y1__parts .is-cross > span::before {
	background: var(--x-primary);
}

.x-y1__seg.is-upkeep {
	background: #b46a6a;
	background: color-mix(in srgb, var(--x-primary) 55%, #fff);
}

.x-y1__seg.is-vendor,
.x-y1__parts .is-vendor > span::before {
	background: var(--x-muted);
}

.x-y1__parts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 1rem;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
}

.x-y1__parts li {
	display: grid;
	gap: 0.1rem;
	align-content: start;
}

.x-y1__parts span {
	font-size: 0.875rem;
	color: var(--x-text);
}

.x-y1__parts span::before {
	content: "";
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	margin-right: 0.4rem;
	vertical-align: -0.05em;
	border-radius: 2px;
}

.x-y1__parts b {
	font-size: 1.2rem;
	font-variant-numeric: tabular-nums;
	color: var(--x-ink);
}

.x-y1__parts small {
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--x-muted);
}

@container (max-width: 359px) {
	.x-y1__parts {
		grid-template-columns: minmax(0, 1fr);
	}
}

.x-y1__after {
	margin-top: 1rem !important;
	padding-top: 0.85rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--x-ink);
	border-top: 1px dashed var(--x-line);
}

.x-y1__plan {
	margin-top: 0.3rem !important;
	font-size: 0.95rem;
	color: var(--x-text);
}

.x-y1__plan a {
	font-weight: 700;
	color: var(--x-primary);
}

.x-y1__fine,
.x-y1__users {
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--x-muted);
}

.x-y1__fine {
	margin-top: 0.6rem !important;
}

/* "Người dùng = …" sits right under the user-count buttons it defines (decision D2); the figures follow below a rule. */
.x-y1__users {
	margin: 0.6rem 0 0;
}

.x-y1 .x-y1__outs {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--x-line);
}

/* ---------- Pricing: leak funnel + short calculator ---------- */
/* A <form> is content-box: without this the card's padding pushes it past the 1240px column. */
.x-calc.is-short {
	box-sizing: border-box;
}

.x-funnel {
	min-width: 0;
	max-width: 1000px;
}

.x-why .x-funnel + * {
	margin-top: clamp(2rem, 4vw, 3rem);
}

/* "Giờ thử với số của anh/chị": the bridge between the example and the calculator, close to the calculator. */
.x-why .x-calc__bridge + * {
	margin-top: 0.75rem;
}

.x-calc.is-short .x-calc__fine {
	font-size: 0.8125rem;
}

.x-calc.is-short .x-calc__sub {
	margin-top: 0.4rem !important;
}

.x-funnel__after {
	max-width: 46rem;
	margin-top: 1.5rem;
	font-size: 1rem;
	color: var(--x-text);
}

.x-funnel__after a {
	font-weight: 700;
	color: var(--x-primary);
}

/* ---------- Pricing: per-service prices, four collapsed groups ---------- */
.x-pgroup {
	margin: 0;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
}

.x-pgroup + .x-pgroup {
	margin-top: 0.75rem;
}

.x-pgroup > summary {
	position: relative;
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) auto;
	gap: 0.25rem 0.85rem;
	align-items: center;
	padding: 1rem 3.5rem 1rem 1.2rem;
	list-style: none;
	cursor: pointer;
}

.x-pgroup > summary::-webkit-details-marker {
	display: none;
}

.x-pgroup > summary::after {
	content: "";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	width: 1.6rem;
	height: 1.6rem;
	margin-top: -0.8rem;
	background:
		linear-gradient(var(--x-ink), var(--x-ink)) center / 12px 2px no-repeat,
		linear-gradient(var(--x-ink), var(--x-ink)) center / 2px 12px no-repeat;
	border: 1px solid var(--x-line);
	border-radius: 50%;
	transition: transform 0.3s var(--x-ease);
}

.x-pgroup[open] > summary::after {
	transform: rotate(45deg);
}

.x-pgroup__icon {
	--x-icon-size: 1.75rem;
	color: var(--x-primary);
}

.x-pgroup__name {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--x-ink);
}

.x-pgroup__meta {
	font-size: 0.9rem;
	color: var(--x-muted);
	white-space: nowrap;
}

@media (max-width: 599px) {
	.x-pgroup > summary {
		grid-template-columns: 1.75rem minmax(0, 1fr);
	}

	.x-pgroup__meta {
		grid-column: 2;
		white-space: normal;
	}
}

.x-pgroup__body {
	padding: 0 1.2rem 1.2rem;
}

.x-pgroup .x-table {
	border-radius: var(--x-radius-sm);
}

.x-pgroup .x-link {
	margin-top: 0.9rem;
}

/* ---------- Pricing: vendor fees with a total per size ---------- */
.x-vendor-wrap {
	overflow-x: auto;
}

.x-vendor {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
}

.x-vendor th,
.x-vendor td {
	padding: 0.85rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--x-line);
}

.x-vendor thead th {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--x-muted);
	background: var(--x-paper);
}

/* Each package column names its user range under the package (decision D2). */
.x-vendor thead th small {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
}

.x-vendor tbody th b {
	display: block;
	font-size: 1rem;
	color: var(--x-ink);
}

.x-vendor tbody th small {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--x-muted);
}

.x-vendor td {
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--x-ink);
	white-space: nowrap;
}

.x-vendor tfoot th,
.x-vendor tfoot td {
	font-weight: 700;
	color: var(--x-ink);
	background: var(--x-paper);
}

.x-vendor tfoot tr:last-child th,
.x-vendor tfoot tr:last-child td {
	border-bottom: 0;
}

/* Phones: each fee is a card; the three sizes become labelled rows. */
@media (max-width: 700px) {
	.x-vendor,
	.x-vendor tbody,
	.x-vendor tfoot,
	.x-vendor tr,
	.x-vendor th,
	.x-vendor td {
		display: block;
		width: auto;
	}

	.x-vendor thead {
		display: none;
	}

	.x-vendor tr {
		padding: 0.85rem 1rem;
		border-bottom: 1px solid var(--x-line);
	}

	.x-vendor th,
	.x-vendor td {
		padding: 0;
		border: 0;
	}

	.x-vendor td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		margin-top: 0.35rem;
		white-space: normal;
	}

	.x-vendor td::before {
		content: attr(data-label);
		font-weight: 400;
		color: var(--x-text);
	}

	.x-vendor tfoot tr {
		background: var(--x-paper);
	}
}

/* ---------- Pricing: after the free support ---------- */
.x-after {
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)) !important;
}

.x-after-section .x-spec + * {
	margin-top: 1.5rem;
}

.x-promises .x-guarantees {
	margin-top: 0;
}

/* ---------- Industries: one band per industry ---------- */
.x-ind-band .x-head {
	margin-bottom: 1.5rem;
}

/* Direct children of a section are capped at 1240px on their content box: keep padding and borders inside it. */
.x-ind-band__card,
.x-tech,
.x-pgroup {
	box-sizing: border-box;
}

.x-ind-band__card {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.x-ind-band .x-link {
	margin-top: 1.25rem;
}

/* Every band, phone or wide mockup, uses one layout: the mockup centred in the left track and the "Để ý:" notes in a
   right-hand column at the same place in all four bands (phones used to sit flush left with the right 40% empty, and
   the spa band had a third alignment). */
@container (min-width: 1000px) {
	.x-ind-band .x-explain__in {
		grid-template-columns: minmax(0, 1fr) minmax(13rem, 15rem);
	}
}

/* A phone needs less room than the wide mockups, so its bands take the same layout from a narrower width. */
@container (min-width: 760px) {
	.x-ind-band .x-mock--phone.x-explain .x-explain__in {
		grid-template-columns: minmax(0, 1fr) minmax(13rem, 15rem);
		justify-content: stretch;
	}

	.x-ind-band .x-mock--phone .x-explain__mock {
		justify-self: center;
	}
}

/* Manufacturing band: side by side, the before/after uses its HTML layout and the shorter "Hôm nay" panel is stretched
   to the "Sau" panel's height; its content sits in the middle instead of above an empty half. */
.x-ind-band .m-before-after__m--before {
	flex: 1;
	justify-content: center;
}

/* Stacked panel: the 3D object sits beside the result line instead of alone on a row of its own. */
@media (max-width: 781px) {
	.x-ind-band .x-ind-panel {
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 0.85rem;
		row-gap: 0;
	}

	.x-ind-band .x-ind-panel__body {
		display: contents;
	}

	.x-ind-band .x-ind-flow {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.x-ind-band .x-ind-panel__art {
		grid-column: 1;
		grid-row: 2;
		align-self: center;
		margin-top: 1rem;
	}

	.x-ind-band .x-ind-panel__art .m-illus-3d {
		width: 72px;
	}

	.x-ind-band .x-ind-panel__result {
		grid-column: 2;
		grid-row: 2;
		align-self: center;
		margin-top: 1rem !important;
	}

	.x-ind-band .x-ind-panel__plan {
		grid-column: 1 / -1;
		grid-row: 3;
		padding-left: 0;
	}
}

/* Two columns of steps: an odd last step spans both instead of sitting alone in half the width. */
@media (min-width: 360px) and (max-width: 999px) {
	.x-ind-band .x-ind-flow li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* ---------- Services hub: the map and four cards ---------- */
.x-hub-map .x-link {
	margin-top: 2rem;
}

.x-sysmap > .x-mock__note {
	margin-top: 0.6rem;
}

/* Four across: room for a two-line name in every card, so the sentences under them line up (as on the home page). */
@media (min-width: 1000px) {
	.x-hub-cards .x-svc-card__name {
		min-height: 2.5em;
	}
}

/* ---------- Service pages: the starting price under "Dành cho anh/chị nếu…" ---------- */
.x-fit__price {
	margin-top: 1.5rem !important;
	padding: 0.9rem 1.1rem;
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--x-text);
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
}

.x-fit__price b {
	color: var(--x-ink);
}

.x-fit__price a {
	font-weight: 700;
	color: var(--x-primary);
	white-space: nowrap;
}

/* Service showcase (wide mockup): a wider "Để ý:" column, so the points do not end on a one-word line. */
@container (min-width: 1000px) {
	.x-svc-show .x-explain__in {
		grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem);
	}
}

/* Short copy on the inner pages ends on more than one word; titles in a row of cards break evenly. */
.x-daily li > span:last-child,
.x-daily__after li,
.x-svc-detail .x-check li,
.x-svc-show .x-explain__points li,
.x-page-hero .x-explain__points li,
.x-ind-band .x-explain__points li,
.x-next li {
	text-wrap: pretty;
}

.x-spec dt {
	text-wrap: balance;
}

/* ---------- About: company facts in two columns on wide screens ---------- */
.x-trust--wide {
	max-width: 56rem;
	margin-top: 0;
}

@media (min-width: 782px) {
	.x-trust--wide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2.5rem;
	}
}

.x-trust--wide a {
	overflow-wrap: anywhere;
}

/* Hero facts labels at the 12px floor (they were 0.72rem = 11.5px). Only inner-page heroes use .x-facts. */
.x-facts dt {
	font-size: 0.75rem;
}

/* ---------- Businesses running on CROSS: anonymised client cards (data.CLIENTS) ----------
   Home (trust part, before the FAQ) and About: the full set, two columns on phones, four on wide screens, icon above
   the text. Industries page: each band's own cards under "Đang dùng ở:", icon beside the text. */
.x-clients {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1000px) {
	.x-clients {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.75rem;
	}
}

.x-client {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-width: 0;
	padding: clamp(0.8rem, 2vw, 1.1rem);
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
}

.x-client__icon {
	--x-icon-size: 1.5rem;
	flex: none;
	color: var(--x-primary);
}

.x-client__body {
	display: grid;
	gap: 0.3rem;
	min-width: 0;
}

/* No text-wrap: balance here: it broke "Phòng khám nha / khoa · TP. Hồ Chí Minh"; the no-break spaces in the label
   (components._client_label) make it wrap after the "·" instead. */
.x-client__label {
	font-size: 0.95rem;
	line-height: 1.3;
	color: var(--x-ink);
	overflow-wrap: break-word;
}

.x-client__need {
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--x-muted);
	text-wrap: pretty;
}

/* ---------- Home: the clients grouped by industry (components.client_groups) ----------
   Each group: the industry's 3D object, its name (the hero chip's words), then field · region labels. No boxes, no
   icons, no need lines. 4 across from 1000px, 2 × 2 from 600px; on phones the object sits left of the name and the
   groups are separated by space (no rules, no boxes). */
.x-client-groups {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 0;
}

.x-client-group {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: center;
	column-gap: 1rem;
	min-width: 0;
	padding-block: 0.75rem;
}

.x-client-groups .x-client-group .m-illus-3d {
	width: 64px;
	margin: 0;
}

.x-client-group__name {
	margin: 0;
	font-family: var(--x-font-body);
	font-size: var(--x-fs-h3) !important;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--x-ink);
}

.x-client-group__list {
	display: grid;
	grid-column: 1 / -1;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--x-fs-body);
	line-height: 1.4;
	color: var(--x-ink);
}

.x-client-group__list li {
	overflow-wrap: break-word;
	text-wrap: pretty;
}

@media (min-width: 600px) {
	.x-client-groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem 2rem;
	}

	.x-client-group {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		align-items: start;
		row-gap: 0.5rem;
		padding-block: 0;
	}

	.x-client-groups .x-client-group .m-illus-3d {
		width: 96px;
	}

	.x-client-group__list {
		margin-top: 0.25rem;
	}
}

@media (min-width: 1000px) {
	.x-client-groups {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Phones: a smaller object and tighter groups (page budget). */
@media (max-width: 599px) {
	.x-client-group {
		grid-template-columns: 56px minmax(0, 1fr);
	}

	.x-client-groups .x-client-group .m-illus-3d {
		width: 56px;
	}
}

@media (max-width: 359px) {
	.x-client-group {
		padding-block: 0.6rem;
	}
}

/* Home: the clients open the trust part; the FAQ follows after a clear gap (more than the 72px within which a short
   label would read as belonging to the FAQ title below it). */
.x-faq-before {
	margin-bottom: max(4.75rem, 6vw);
}

.x-faq-before .x-head,
.x-clients-section .x-head {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* Industries page: one band's cards, icon beside the text, as many columns as fit. */
.x-ind-clients {
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

.x-ind-clients__label {
	margin: 0 0 0.6rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--x-ink);
}

.x-clients--band {
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

.x-clients--band .x-client {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.75rem;
}

/* Industries hero: the one sentence about the client cards, under the lead. */
.x-page-hero__note {
	max-width: 36rem;
	margin-top: 0.85rem !important;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--x-muted);
}

/* =====================================================================================================================
   v4.1 (21/10/2026): five services, no published prices, the AI training page.
   ===================================================================================================================== */

/* ---------- Five service cards (home lineup and hub boxes) ----------
   Phones: one row per service (object left). From 600px a six-track grid: the two main lines (AI & automation, AI
   training) take three tracks each on the first row, the other three take two each on the second. From 1000px the main
   cards lay the object beside the text, so the first row reads as the lead. */
@media (min-width: 600px) {
	.x-svc-cards--five {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.x-svc-cards--five > .x-svc-card {
		grid-column: span 2;
	}

	.x-svc-cards--five > .x-svc-card.is-main {
		grid-column: span 3;
	}
}

@media (min-width: 1000px) {
	.x-svc-cards--five > .x-svc-card.is-main {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto;
		align-items: center;
		column-gap: 1.5rem;
	}

	.x-svc-cards--five > .x-svc-card.is-main .x-svc-card__name {
		min-height: 0;
		font-size: 1.5rem !important;
	}

	.x-how .x-svc-cards--five > .x-svc-card.is-main .m-illus-3d {
		align-self: center;
		width: clamp(150px, 14vw, 200px);
	}

	.x-how .x-svc-cards--five > .x-svc-card.is-main .x-svc-card__text {
		max-width: 44ch;
	}

	.x-how .x-svc-cards--five > .x-svc-card:not(.is-main) .x-svc-card__text {
		max-width: 34ch;
	}

	.x-hub-cards.x-svc-cards--five > .x-svc-card.is-main .m-illus-3d {
		width: 120px;
	}

	/* The home lineup's first row is taller than the second: a rule between them keeps the two groups apart. */
	.x-how .x-svc-cards--five {
		row-gap: 2rem;
	}

	.x-how .x-svc-cards--five > .x-svc-card:not(.is-main) {
		padding-top: 2rem;
		border-top: 1px solid var(--x-line);
	}
}

/* Hub: the first "Dành cho doanh nghiệp nào" situation under each card's sentence. */
.x-svc-card__fit {
	margin-top: 0.7rem !important;
	padding-top: 0.7rem;
	font-size: var(--x-fs-small);
	line-height: 1.45;
	color: var(--x-text);
	border-top: 1px dashed var(--x-line);
	text-wrap: pretty;
}

.x-svc-card__fit b {
	color: var(--x-ink);
}

/* ---------- Industry examples: the services an example runs on, linked (replaces the package-and-price line) -------- */
.x-uses {
	line-height: 1.5;
}

.x-uses__label {
	font-weight: 700;
	color: var(--x-ink);
}

.x-uses a {
	font-weight: 600;
	color: var(--x-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.x-uses a:hover {
	text-decoration-thickness: 2px;
}

/* ---------- "Ví dụ thực tế": before, what CROSS does, after ---------- */
.x-case {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	counter-reset: x-case;
}

@media (min-width: 782px) {
	.x-case {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

.x-case__step {
	display: grid;
	row-gap: 0.6rem;
	align-content: start;
	padding: 1.2rem 1.25rem 1.3rem;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
}

.x-case__step:last-child {
	border: 2px solid var(--x-mint);
}

.x-case__icon {
	--x-icon-size: 2.5rem;
	flex: none;
	box-sizing: border-box;
	padding: 0.6rem;
	color: var(--x-primary);
	background: var(--x-paper-deep);
	border-radius: 50%;
}

.x-case__step:last-child .x-case__icon {
	color: #fff;
	background: var(--x-mint);
}

.x-case dt {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--x-ink);
}

.x-case dd {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--x-text);
	text-wrap: pretty;
}

/* ---------- "Quy trình triển khai": four numbered steps, then the cost sentence ---------- */
@media (min-width: 782px) {
	.x-daily.x-daily--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.x-daily.x-daily--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.x-daily--4 li {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.6rem;
	}

	.x-daily--4 .x-daily__icon {
		grid-row: auto;
	}
}

.x-cost {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	max-width: 56rem;
	margin: 1.5rem 0 0 !important;
	padding: 1rem 1.25rem;
	font-size: var(--x-fs-body);
	font-weight: 600;
	line-height: 1.5;
	color: var(--x-ink);
	background: #fff;
	border: 1px dashed rgba(21, 18, 27, 0.25);
	border-radius: var(--x-radius-sm);
}

.x-cost__icon {
	--x-icon-size: 1.5rem;
	flex: none;
	color: var(--x-primary);
}

/* ---------- AI training: formats, programmes, data safety, what next ---------- */
.x-formats {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.x-formats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

.x-format {
	display: grid;
	align-content: start;
	gap: 0.45rem;
	padding: 1.3rem 1.3rem 1.4rem;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius-sm);
}

.x-format > p {
	margin: 0;
}

.x-format__icon {
	--x-icon-size: 2.6rem;
	box-sizing: border-box;
	margin-bottom: 0.35rem;
	padding: 0.6rem;
	color: var(--x-primary);
	background: var(--x-paper-deep);
	border-radius: 50%;
}

.x-format__name {
	font-size: var(--x-fs-h3);
	font-weight: 700;
	line-height: 1.25;
	color: var(--x-ink);
}

.x-format__len {
	font-size: var(--x-fs-small);
	font-weight: 600;
	color: var(--x-primary);
}

.x-format__text {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--x-text);
	text-wrap: pretty;
}

.x-safety li {
	font-weight: 500;
}

.x-next-svc {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.x-next-svc li {
	display: grid;
	gap: 0.2rem;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--x-line);
}

.x-next-svc span {
	font-size: var(--x-fs-small);
	color: var(--x-text);
}

.x-next-svc a {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--x-ink);
	text-decoration: none;
}

.x-next-svc a::after {
	content: "";
	display: inline-block;
	width: 0.95em;
	height: 0.95em;
	margin-left: 0.35rem;
	vertical-align: -0.12em;
	background: var(--x-primary);
	mask: var(--x-i-arrow) center / contain no-repeat;
	transition: transform var(--x-dur-ui) var(--x-ease-out);
}

.x-next-svc a:hover {
	color: var(--x-primary);
}

@media (hover: hover) and (pointer: fine) {
	.x-next-svc a:hover::after {
		transform: translateX(3px);
	}
}

/* A document mockup (prompt-library): the window keeps a readable width, its points beside it. */
.x-mock--doc .x-explain__mock {
	width: 100%;
	max-width: 620px;
	container-type: inline-size;
}

@container (min-width: 760px) {
	.x-mock--doc.x-explain .x-explain__in {
		grid-template-columns: minmax(0, 620px) minmax(12rem, 22rem);
		justify-content: start;
	}
}

/* Four cards never leave one alone on a row: 2 × 2 until there is room for 4 across. */
@media (min-width: 600px) and (max-width: 1099px) {
	.x-spec--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.x-spec--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}