/*
 * FreshBrand Service Pages — layout, type and motion of the block-built
 * service page. Shared by the front end (.svc-body, set by the plugin
 * template) and the block editor canvas (.editor-styles-wrapper).
 * Source design: _bmad-output/service-pages/mockup/tai-dinh-vi.html (approved),
 * then fitted to the theme's own system (user review 22/10/2026):
 *
 *   - colours: theme tokens only (--primary, --qode-main-color, --text-light,
 *     --bg-light, --white), so dark mode follows the theme;
 *   - type: theme --fluid-* sizes only; headings Inter 800, -0.02em (theme);
 *   - grid: every margin, padding and gap is a multiple of the theme's
 *     --rhythm-unit (1.4rem = 14px); line-heights are the theme's; the side
 *     gutter is the theme's --unit-space-res, so text lines up with the logo;
 *   - label | content rows align on the first baseline;
 *   - no divider lines, no left bars, no positive letter-spacing.
 */

.svc-body,
.editor-styles-wrapper {
	/* Grid unit and spacing steps (1u = 14px). */
	--svc-u: var(--rhythm-unit, 1.4rem);
	--svc-s2: calc(var(--svc-u) * 2);
	--svc-s3: calc(var(--svc-u) * 3);
	--svc-s4: calc(var(--svc-u) * 4);
	--svc-s6: calc(var(--svc-u) * 6);
	--svc-section: calc(var(--svc-u) * 12);
	--svc-module: var(--svc-s6);
	--svc-gutter: var(--unit-space-res, 2.8rem);
	--svc-gap: var(--svc-s2);
	--svc-maxw: 160rem;

	/* Theme colours. */
	--svc-ink: var(--qode-main-color, #000);
	--svc-ink-2: var(--text-light, #71717a);
	--svc-accent: var(--primary, #00f);
	/* Accent used as text (links, step numbers): #00f on the dark
	   skin's black is unreadable, so it takes the theme's own dark-skin
	   accent there (--fbi-accent, #7070ff, set by the theme on body). */
	--svc-accent-text: var(--svc-accent);
	--svc-band: var(--bg-light, #f5f5f5);
	--svc-on-accent: var(--white, #fff);
	/* Closing band: the theme's ink and its opposite — black in the light
	   skin, white in the dark skin (body.qodef-skin--dark swaps both). */
	--svc-on-ink: var(--qode-main-opposite-color, #fff);

	/* Theme type sizes, one per role (fallbacks = the theme's own values,
	   for the editor canvas where the theme sheet isn't loaded). */
	--svc-hero: clamp(4.8rem, 9vw, 18rem); /* theme .fb-headline */
	--svc-h2: var(--fluid-36-56, clamp(3.6rem, 3.11456rem + 1.2945vw, 5.6rem));
	--svc-h3: var(--fluid-24-32, clamp(2.4rem, 2.20583rem + .5178vw, 3.2rem));
	--svc-lead: var(--fluid-24-32, clamp(2.4rem, 2.20583rem + .5178vw, 3.2rem));
	--svc-h4: var(--fluid-18-24, clamp(1.8rem, 1.65437rem + .3883vw, 2.4rem));
	--svc-body-size: var(--fluid-17-20, clamp(1.7rem, 1.62718rem + .1942vw, 2rem));
	--svc-small: var(--fluid-14-16, clamp(1.4rem, 1.35146rem + .1294vw, 1.6rem));
	/* Theme line-heights: text = --line-height (1.333); headings 1.2 (theme
	   h1–h4) and 1.1 for the large bold ones (theme .headline--style-2). */
	--svc-lh-text: var(--line-height, 1.333);
	--svc-lh-lead: var(--line-height, 1.333);
	--svc-lh-sub: 1.25;
	--svc-lh-head: 1.15;

	--svc-ease: var(--ease-smooth, cubic-bezier(.23, 1, .32, 1));
}

body.qodef-skin--dark .svc-body {
	--svc-accent-text: var(--fbi-accent, #7070ff);
}

@media (max-width: 48em) {
	.svc-body,
	.editor-styles-wrapper {
		--svc-section: calc(var(--svc-u) * 8);
		--svc-module: var(--svc-s4);
	}
}

@media (max-width: 34.3125em) {
	.svc-body,
	.editor-styles-wrapper {
		--svc-h3: var(--fluid-20-28, clamp(2rem, 1.80583rem + .5178vw, 2.8rem));
		--svc-lead: var(--fluid-20-28, clamp(2rem, 1.80583rem + .5178vw, 2.8rem));
	}
}

/* ---------- Page frame ---------- */

/* Classic themes wrap group content in an inner container; let the group's
   children sit straight in its grid either way. */
.svc-body .wp-block-group__inner-container {
	display: contents;
}

/* The theme's main.min.css gives every group a bottom margin. */
.svc-body .wp-block-group {
	margin-bottom: 0;
}

.svc-body > * {
	box-sizing: border-box;
	max-width: var(--svc-maxw);
	margin-inline: auto;
	padding-inline: var(--svc-gutter);
}

.svc-body > .alignfull {
	max-width: none;
	padding-inline: 0;
}

.svc-body .alignfull .svc-section {
	box-sizing: border-box;
	max-width: var(--svc-maxw);
	margin-inline: auto;
	padding-inline: var(--svc-gutter);
}

.svc-body > .svc-section,
.svc-body > .svc-story,
.svc-body > .svc-related,
.svc-body > .svc-how {
	margin-block: var(--svc-section);
}

.svc-body > .svc-closing {
	margin-block: var(--svc-section) 0;
}

.svc-body h1,
.svc-body h2,
.svc-body h3,
.svc-body p,
.svc-body figure,
.svc-body ul,
.svc-body li {
	margin: 0;
}

.svc-body ul {
	padding: 0;
	list-style: none;
}

/* The theme sets p/ul/li line-height (`html p`); text inherits the role's. */
.svc-body p,
.svc-body ul,
.svc-body li {
	line-height: inherit;
}

.svc-body h1,
.svc-body h2,
.svc-body h3 {
	font-family: var(--font-body, "Inter", sans-serif);
	font-weight: 800;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--svc-ink);
	text-wrap: balance;
}

.svc-body a {
	color: inherit;
	text-decoration: none;
}

.svc-body a:focus-visible {
	outline: 2px solid var(--svc-accent-text);
	outline-offset: 4px;
}

.svc-body img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Grid ---------- */
.svc-section,
.svc-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--svc-gap);
	align-items: first baseline;
}

.svc-section .svc-label,
.svc-side {
	grid-column: 1 / span 3;
}

.svc-main {
	grid-column: 4 / span 8;
	min-width: 0;
}

.svc-wide {
	grid-column: 4 / -1;
	min-width: 0;
}

.svc-section .svc-map {
	grid-column: 1 / -1;
	margin-top: var(--svc-module);
}

@media (max-width: 48em) {
	.svc-section,
	.svc-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--svc-s2);
	}

	.svc-section .svc-label,
	.svc-side,
	.svc-main,
	.svc-wide,
	.svc-section .svc-map {
		grid-column: 1 / -1;
	}
}

/* ---------- Type roles ---------- */
.svc-body .svc-label,
.svc-body .svc-en,
.svc-body .svc-who,
.svc-body .wp-block-image figcaption,
.svc-rail,
.svc-card-meta,
.svc-body .svc-map-when {
	font-size: var(--svc-small);
	line-height: var(--svc-lh-text);
	letter-spacing: 0;
}

.svc-body .svc-label {
	font-weight: 600;
	color: var(--svc-ink-2);
}


.svc-body .svc-lead,
.svc-body .svc-thesis,
.svc-body .svc-pull {
	font-size: var(--svc-lead);
	font-weight: 400;
	line-height: var(--svc-lh-lead);
	letter-spacing: -.02em;
	color: var(--svc-ink);
	text-wrap: balance;
}

.svc-body .svc-lead,
.svc-body .svc-thesis {
	max-width: 32ch;
}

.svc-body .svc-text,
.svc-body .svc-point p,
.svc-body .svc-step p,
.svc-body .svc-rows li {
	font-size: var(--svc-body-size);
	line-height: var(--svc-lh-text);
	color: var(--svc-ink-2);
	max-width: 64ch;
	text-wrap: pretty;
}

.svc-body .svc-text + .svc-text {
	margin-top: var(--svc-s2);
}

.svc-body strong {
	font-weight: 700;
	color: var(--svc-ink);
}

/* ---------- 1 · Mở đầu ---------- */
.svc-body > .svc-hero {
	padding-top: var(--svc-s4);
}

.svc-rail {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0 var(--svc-s2);
	margin-bottom: var(--svc-s4);
	color: var(--svc-ink-2);
}

.svc-rail .svc-crumb b {
	font-weight: 600;
	color: var(--svc-ink);
}

.svc-rail .svc-groups {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--svc-s2);
}

.svc-rail .svc-groups a {
	transition: color .3s var(--svc-ease);
}

.svc-rail a:hover,
.svc-rail .svc-groups [aria-current] a {
	color: var(--svc-accent-text);
}

.svc-rail .svc-groups [aria-current] a {
	font-weight: 600;
}

/* Title: the theme's hero headline (.fb-headline, the old /dich-vu/ hero) —
   display face, uppercase, outlined words with one solid part. One line per
   "|" of the block's format; line boxes round up to the 14px grid. */
.svc-body .svc-title {
	font-family: var(--font-display, var(--font-body, sans-serif));
	font-size: var(--svc-hero);
	/* 1.25em: a mark under one line (Ị, Ụ) clears the marks over the next (Â, Ự). */
	line-height: 1.25;
	line-height: round(up, 1.25em, var(--svc-u));
	letter-spacing: -.04em;
	text-transform: uppercase;
}

.svc-title .svc-tl {
	display: block;
}

/* Uppercase stacked marks (Ổ, Ớ, Ễ) rise well above the cap height, and the
   acute of Ế, Ố hangs past the last letter's advance (tighter still with the
   negative tracking), so the mask opens up and sideways. */
.svc-title .svc-wm {
	padding: .4em .2em .1em;
	margin: -.4em -.2em -.1em;
}

/* The theme's .text-outline: a 1px stroke that fills in on hover. */
.svc-title .svc-outline {
	color: transparent;
	-webkit-text-stroke: 1px var(--svc-ink);
	transition: color .6s var(--svc-ease), -webkit-text-stroke-color .6s var(--svc-ease);
}

.svc-title .svc-outline:hover {
	color: var(--svc-ink);
	-webkit-text-stroke-color: transparent;
}

.svc-hero .svc-grid {
	margin-top: var(--svc-s4);
}

.svc-body .svc-en {
	color: var(--svc-ink-2);
}

.svc-body .svc-en strong {
	font-weight: 600;
}

/* The first half of the opening pair is secondary (italic in the editor). */
.svc-body .svc-thesis em {
	font-style: normal;
	color: var(--svc-ink-2);
}

.svc-hero .svc-text {
	margin-top: var(--svc-s2);
}

/* Phương pháp: the portfolio's opening statement under the intro. */
.svc-body .svc-hero .svc-pull {
	margin-block: var(--svc-s4) 0;
}

.svc-body .svc-hero-media {
	margin-top: var(--svc-module);
}

/* Full-width images 2:1; smaller project images 2560 × 1580 (the
   project pages' card ratio). */
.svc-hero-media img,
.svc-story-media img {
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

/* The theme forces captions to 13px / 10px margin (!important). */
.svc-body .wp-block-image figcaption {
	margin: var(--svc-u) 0 0 !important;
	font-size: var(--svc-small) !important;
	line-height: var(--svc-lh-text) !important;
	color: var(--svc-ink-2);
	text-align: left;
}

/* ---------- 2 · Góc nhìn ---------- */
.svc-view .svc-lead {
	max-width: none;
	margin-bottom: var(--svc-s3);
}

.svc-body .svc-stance {
	margin-top: var(--svc-s4);
	font-size: var(--svc-lead);
	font-weight: 800;
	line-height: var(--svc-lh-lead);
	letter-spacing: -.02em;
	max-width: 30ch;
	color: var(--svc-ink);
	text-wrap: balance;
}

.svc-body .svc-stance strong {
	font-weight: 800;
	color: var(--svc-accent-text);
}

/* ---------- 3 · Khi nào ---------- */
.svc-when .svc-lead {
	max-width: 22ch;
	margin-bottom: var(--svc-s4);
}

.svc-points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--svc-s4) var(--svc-gap);
}

.svc-point {
	display: grid;
	gap: var(--svc-u);
	align-content: start;
}

.svc-body .svc-point h3,
.svc-body .svc-step h3 {
	font-size: var(--svc-h3);
	line-height: var(--svc-lh-sub);
	max-width: 22ch;
}

.svc-body .svc-point p {
	max-width: 48ch;
}

.svc-body .svc-point .svc-point-link {
	font-size: var(--svc-small);
	font-weight: 600;
}

.svc-point-link a,
.svc-body .svc-more a {
	color: var(--svc-accent-text);
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .4s var(--svc-ease);
}

.svc-point-link a:hover,
.svc-body .svc-more a:hover {
	background-size: 100% 1px;
}

@media (max-width: 48em) {
	.svc-points {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- 4 · Cách làm ---------- */
.svc-body > .svc-how {
	background: var(--svc-band);
	padding-block: var(--svc-section);
}

.svc-how .svc-lead {
	max-width: 28ch;
	margin-bottom: var(--svc-module);
}

.svc-steps {
	display: grid;
	gap: var(--svc-module);
	counter-reset: svc-step;
}

/* Number | question on one baseline; the text and choices below the question.
   The number gets the question's line box (so it never sets the row's
   height) and is moved by the difference of the two baselines inside that
   box: (size_q - size_n) × (ascent - descent) / 2, Inter = 0.3638. */
.svc-step {
	counter-increment: svc-step;
	display: grid;
	grid-template-columns: calc(var(--svc-u) * 6) minmax(0, 1fr);
	column-gap: var(--svc-gap);
	row-gap: var(--svc-u);
	align-items: start;
}

.svc-step::before {
	content: counter(svc-step, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1;
	font-size: var(--svc-h2);
	font-weight: 800;
	line-height: calc(var(--svc-h3) * var(--svc-lh-sub));
	letter-spacing: -.02em;
	color: var(--svc-accent-text);
	font-variant-numeric: tabular-nums;
	translate: 0 calc((var(--svc-h3) - var(--svc-h2)) * .3638);
}

.svc-step > *,
.svc-step > .wp-block-group__inner-container > * {
	grid-column: 2;
}

/* Phương pháp: the chapter name sits over the question (row 1), so the
   number moves down to the question's row. */
.svc-step--tagged::before {
	grid-row: 2;
}

.svc-body .svc-step .svc-step-tag {
	font-size: var(--svc-small);
	font-weight: 600;
	color: var(--svc-ink-2);
}

.svc-body .svc-step .svc-pull {
	margin-block: var(--svc-s2);
	font-size: var(--svc-lead);
	line-height: var(--svc-lh-lead);
	color: var(--svc-ink);
	max-width: 32ch;
}

/* A lead followed by a paragraph: the paragraph takes the gap to the steps. */
.svc-how .svc-lead:has(+ .svc-text) {
	margin-bottom: var(--svc-s2);
}

.svc-how .svc-lead + .svc-text {
	margin-bottom: var(--svc-module);
}

/* The link after the steps starts where their text does (past the number). */
.svc-body .svc-how .svc-more {
	margin-top: var(--svc-module);
	padding-left: calc(var(--svc-u) * 6 + var(--svc-gap));
}

@media (max-width: 48em) {
	.svc-body .svc-how .svc-more {
		padding-left: 0;
	}
}

.svc-body .svc-step p {
	max-width: 60ch;
}

.svc-body .svc-step h3 {
	max-width: 32ch;
}

.svc-choices {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--svc-s2) var(--svc-gap);
	margin-top: var(--svc-u);
}

.svc-body .svc-step .svc-choice {
	font-size: var(--svc-small);
	line-height: var(--svc-lh-text);
	color: var(--svc-ink-2);
}

.svc-body .svc-choice strong {
	display: block;
	font-size: var(--svc-h4);
	font-weight: 800;
	line-height: var(--svc-lh-sub);
	letter-spacing: -.02em;
}

@media (max-width: 64em) {
	.svc-choices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 48em) {
	.svc-step {
		grid-template-columns: minmax(0, 1fr);
	}

	.svc-step > *,
	.svc-step > .wp-block-group__inner-container > *,
	.svc-step::before {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ---------- 5 · Doanh nghiệp nắm trong tay ---------- */
.svc-assets .svc-lead {
	max-width: 26ch;
	margin-bottom: var(--svc-s4);
}

.svc-body .svc-asset-list {
	display: grid;
	gap: var(--svc-s2);
}

.svc-body .svc-asset-list li {
	font-size: var(--svc-h4);
	line-height: var(--svc-lh-text);
	letter-spacing: -.01em;
	max-width: 44ch;
	color: var(--svc-ink);
	text-wrap: pretty;
}

.svc-body .svc-asset-list li em {
	font-style: normal;
	color: var(--svc-ink-2);
}

/* ---------- 6 · Câu chuyện thực tế ---------- */
.svc-body .svc-story-media {
	overflow: hidden;
	clip-path: inset(0 var(--svc-cx, 0%) 0 var(--svc-cx, 0%));
}

.svc-story-media figcaption {
	box-sizing: border-box;
	max-width: var(--svc-maxw);
	margin-inline: auto !important;
	padding-inline: var(--svc-gutter);
}

.svc-story .svc-section {
	margin-top: var(--svc-module);
}

.svc-body .svc-who {
	color: var(--svc-ink-2);
}

.svc-body .svc-who strong {
	display: block;
	font-weight: 600;
}

.svc-story .svc-side .svc-label {
	margin-bottom: var(--svc-u);
}

.svc-body .svc-story-title,
.svc-body .svc-closing-title {
	font-size: var(--svc-h2);
	line-height: var(--svc-lh-head);
	max-width: 16ch;
}

.svc-body .svc-story-title {
	margin-bottom: var(--svc-s3);
}

.svc-body .svc-pull {
	margin-block: var(--svc-s4);
	max-width: 32ch;
	text-indent: -.4em;
}

.svc-body .svc-more {
	font-size: var(--svc-small);
	font-weight: 600;
	line-height: var(--svc-lh-text);
}

/* The story's "Xem toàn bộ dự án" link sat flush under the last paragraph. */
.svc-body .svc-story .svc-more {
	margin-top: var(--svc-s2);
}

/* ---------- Project images inside the sections ----------
   A row of 2 or 3 images (story, assets, a step) and one image on top of
   each "Khi nào" case; all at the project cards' 2560 × 1580.
   .svc-body prefix: the row is a group, and ".svc-body .wp-block-group"
   zeroes its bottom margin, which left the next paragraph touching it. */
.svc-body .svc-media {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--svc-gap);
	margin-block: var(--svc-s4);
}

/* .svc-body prefix: same weight as the row rule above, or it never applies. */
.svc-body .svc-media--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.svc-step .svc-media {
	margin-block: var(--svc-s2) 0;
}

.svc-assets .svc-media {
	margin-bottom: 0;
}

.svc-media img,
.svc-point-media img {
	width: 100%;
	aspect-ratio: 2560 / 1580;
	object-fit: cover;
}

/* Old 2:1 portfolio images carry a FRESHBRAND mark in the bottom-left
   corner, out to 11.7% of the width (build.py and the projects block add
   the class to exactly-2:1 images). They stay centred and are enlarged
   10%: the 2560 × 1580 crop then starts at 13.2% of the width, past the
   mark. Cropping from the right hid it too but pushed every centred logo
   off the middle. `scale` (not transform) so the cards' hover zoom adds to it. */
.svc-body .svc-crop-end {
	overflow: hidden;
}

.svc-body .svc-crop-end img {
	object-position: 50% 50%;
	scale: 1.1;
}

/* Images open enlarged on click (service.js adds .svc-zoom); linked ones
   follow their link. Both answer the pointer like the project cards. Only
   the uncaptioned row and point images zoom: a hero or story image would
   cover its caption. */
.svc-body .svc-zoom {
	cursor: zoom-in;
}

.svc-body .svc-media figure,
.svc-body .svc-point-media {
	overflow: hidden;
}

.svc-body .svc-media img,
.svc-body .svc-point-media img {
	transition: transform .8s var(--svc-ease);
}

@media (hover: hover) {
	.svc-body .svc-media figure:hover img,
	.svc-body .svc-point-media:hover img {
		transform: scale(1.04);
	}
}

/* The figure clips its image, so the focus ring goes on the figure. */
.svc-body figure:has(.svc-zoom:focus-visible),
.svc-body figure:has(> a:focus-visible) {
	outline: 2px solid var(--svc-accent-text);
	outline-offset: 3px;
}

.svc-body .svc-zoom:focus-visible,
.svc-body figure > a:focus-visible {
	outline: none;
}

.svc-body .svc-point .svc-point-media {
	margin-bottom: var(--svc-u);
}

@media (max-width: 48em) {
	.svc-body .svc-media,
	.svc-body .svc-media--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- 7 · Dự án liên quan ---------- */
.svc-related > .svc-label,
.svc-related > .wp-block-group__inner-container > .svc-label {
	margin-bottom: var(--svc-s2);
}

.svc-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--svc-s4) var(--svc-gap);
}

.svc-card {
	display: grid;
	gap: var(--svc-u);
	align-content: start;
}

/* fb-porfolio adds a video thumbnail (absolutely placed) to projects that
   have one: the frame holds it. */
.svc-card-ph {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 2560 / 1580;
	margin-bottom: var(--svc-u);
	background: var(--svc-band);
}

.svc-card-ph img,
.svc-card-ph video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--svc-ease);
}

.svc-card:hover .svc-card-ph img,
.svc-card:hover .svc-card-ph video {
	transform: scale(1.04);
}

/* Project names are written every which way (HADUCO, Lasuco): one case. */
.svc-card-meta {
	color: var(--svc-ink-2);
	text-transform: uppercase;
}

.svc-card-title {
	font-size: var(--svc-h4);
	font-weight: 800;
	line-height: var(--svc-lh-sub);
	letter-spacing: -.02em;
	color: var(--svc-ink);
	text-wrap: balance;
}

/* Arrow: the theme's textual-button arrow (qodef-svg--arrow-button-simple,
   "→ Cơ hội làm việc"), as a mask in the colour of the text it follows.
   .5em tall, the icon's 34.9 × 15 proportions. The shaft runs out on hover
   as in that button: the head is pinned right and the box widens from 72%
   (the button's 10px clip of 34.9) to the whole arrow, on the button's
   easing. */
.svc-arrow,
.svc-rows strong::after,
.svc-body .svc-layer h3 a::after,
.svc-body .svc-more a::after {
	--svc-arrow-w: calc(.5em * 2.3264);
	content: "";
	display: inline-block;
	width: calc(var(--svc-arrow-w) * .72);
	height: .5em;
	margin-left: .4em;
	vertical-align: .02em;
	background: currentColor;
	-webkit-mask: var(--svc-arrow-icon) right center / auto 100% no-repeat;
	mask: var(--svc-arrow-icon) right center / auto 100% no-repeat;
	transition: width .42s cubic-bezier(.44, .73, .35, .97);
}

.svc-body,
.editor-styles-wrapper {
	--svc-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.8962 15'%3E%3Crect y='6.25' width='33' height='1.5'/%3E%3Cpath d='M 29.5837 3.64 C 27.3962 1.68 25.8337 0 25.8337 0 h -0.9375 a 60.295 60.295 0 0 0 3.4375 5.04 L 29.8962 7 L 28.3337 8.96 A 60.295 60.295 0 0 0 24.8963 14 h 0.9375 s 1.5625 -1.68 3.75 -3.64 a 13.2224 13.2224 0 0 1 5.3125 -3.08 V 6.72 A 13.2224 13.2224 0 0 1 29.5837 3.64 Z'/%3E%3C/svg%3E");
}

.svc-card:hover .svc-arrow,
.svc-rows a:hover strong::after,
.svc-body .svc-layer h3 a:is(:hover, :focus-visible)::after,
.svc-body .svc-more a:is(:hover, :focus-visible)::after,
.svc-hub-item h3 a:is(:hover, :focus-visible) .svc-arrow,
.svc-hub-next a:is(:hover, :focus-visible) .svc-arrow,
.svc-portfolio:is(:hover, :focus-visible) .svc-arrow {
	width: var(--svc-arrow-w);
}

@media (max-width: 64em) {
	.svc-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- 8 · Bài toán phía sau ---------- */
.svc-next .svc-lead {
	margin-bottom: var(--svc-s4);
}

.svc-body .svc-rows {
	display: grid;
	gap: var(--svc-s3);
}

.svc-body .svc-rows li {
	max-width: 52ch;
}

.svc-rows a,
.svc-rows .svc-row-soon {
	display: inline-block;
}

.svc-body .svc-rows strong {
	display: inline-block;
	margin-bottom: var(--svc-u);
	font-size: var(--svc-h2);
	font-weight: 800;
	line-height: var(--svc-lh-head);
	letter-spacing: -.02em;
	transition: color .3s var(--svc-ease), transform .4s var(--svc-ease);
}

/* A sibling page not published yet: same type, no arrow, no hover. */
.svc-rows .svc-row-soon strong::after {
	content: none;
}

.svc-rows a:hover strong {
	color: var(--svc-accent-text);
}

.svc-map > .svc-label {
	margin-bottom: var(--svc-s2);
}

.svc-map-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--svc-s4) var(--svc-gap);
}

.svc-map-group {
	display: grid;
	align-content: start;
}

.svc-body .svc-map-group h3 {
	font-size: var(--svc-h4);
	line-height: var(--svc-lh-sub);
}

/* The group's description belongs to its heading, apart from the list. It
   stays at the small size while the services run at body size, so it never
   reads as one of the (grey) services below. */
.svc-body .svc-map-when {
	color: var(--svc-ink-2);
	margin-bottom: var(--svc-s2);
	max-width: 18ch;
}

/* Services at body size, one theme list step apart (theme li: .7rem). */
.svc-map-group li {
	font-size: var(--svc-body-size);
	line-height: var(--svc-lh-text);
	letter-spacing: 0;
}

.svc-map-group ul {
	display: grid;
	gap: var(--space-sm, .7rem);
}

/* One meaning per look: link = ink (a line runs out under it on hover);
   no page yet = grey text; this page = accent. */
.svc-map-soon {
	color: var(--svc-ink-2);
}

.svc-body .svc-map-link {
	color: var(--svc-ink);
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .4s var(--svc-ease);
}

.svc-body .svc-map-link:hover,
.svc-body .svc-map-link:focus-visible {
	color: var(--svc-ink);
	background-size: 100% 1px;
}

.svc-map-here {
	color: var(--svc-accent-text);
	font-weight: 600;
}

@media (max-width: 74.9375em) {
	.svc-map-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 34.3125em) {
	.svc-map-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Trang tổng /dich-vu/ (fb-service/hub) ----------
   One section per group: the portfolio's words (side + name + lead), then
   service | what the client gets, on one baseline, 9 columns of the wide
   column (4 for the name, 5 for the text). */
.svc-body > .svc-hub {
	display: grid;
	gap: var(--svc-section);
	margin-block: var(--svc-section);
}

/* Every section with an anchor (hub groups, a page's extra titled sections
   that Insights posts link to) lands clear of the sticky header. */
.svc-body section[id] {
	scroll-margin-top: calc(var(--svc-s6) + var(--svc-s2));
}

.svc-body .svc-hub-name {
	font-size: var(--svc-h2);
	line-height: var(--svc-lh-head);
	margin-bottom: var(--svc-s2);
}

.svc-hub-group .svc-lead {
	margin-bottom: var(--svc-s4);
}

.svc-body .svc-hub-list,
.svc-body .svc-layers {
	display: grid;
	gap: var(--svc-s3);
}

.svc-hub-item,
.svc-layer {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	column-gap: var(--svc-gap);
	row-gap: var(--svc-u);
	align-items: first baseline;
}

.svc-body .svc-hub-item h3,
.svc-body .svc-layer h3 {
	grid-column: 1 / span 4;
	font-size: var(--svc-h3);
	line-height: var(--svc-lh-sub);
}

.svc-hub-about,
.svc-layer-about {
	grid-column: 5 / -1;
	min-width: 0;
}

.svc-body .svc-hub-about p,
.svc-body .svc-layer-about p {
	max-width: 52ch;
	font-size: var(--svc-body-size);
	line-height: var(--svc-lh-text);
	color: var(--svc-ink-2);
	text-wrap: pretty;
}

.svc-body .svc-hub-about .svc-hub-also {
	margin-top: var(--svc-u);
	font-size: var(--svc-small);
	text-wrap: balance;
}

/* "Bắt đầu từ đâu": the link to Tư vấn sits apart from the paragraph. */
.svc-start .svc-more {
	margin-top: var(--svc-s3);
}

/* Same looks as the rest of the page: a service with a page is ink with an
   ink arrow (both accent on hover, like "Bài toán phía sau"); one without a
   page yet is grey, no arrow; a part with its own anchor is ink and draws a
   line on hover. */
.svc-body .svc-hub-item h3 a,
.svc-body .svc-layer h3 a {
	color: var(--svc-ink);
	transition: color .3s var(--svc-ease);
}

.svc-body .svc-hub-item h3 a:hover,
.svc-body .svc-hub-item h3 a:focus-visible,
.svc-body .svc-layer h3 a:hover,
.svc-body .svc-layer h3 a:focus-visible {
	color: var(--svc-accent-text);
}

.svc-hub-soon {
	color: var(--svc-ink-2);
}

.svc-body .svc-hub-also a,
.svc-body .svc-hub-next a {
	color: var(--svc-ink);
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .4s var(--svc-ease);
}

.svc-body .svc-hub-also a:hover,
.svc-body .svc-hub-also a:focus-visible,
.svc-body .svc-hub-next a:hover,
.svc-body .svc-hub-next a:focus-visible {
	background-size: 100% 1px;
}

/* The portfolio's line into the next group. */
.svc-body .svc-hub-next {
	margin-top: var(--svc-module);
	max-width: 40ch;
	font-size: var(--svc-h4);
	font-weight: 600;
	line-height: var(--svc-lh-sub);
	letter-spacing: -.01em;
	color: var(--svc-ink);
	text-wrap: balance;
}

/* Phương pháp: five layers in the hub's name | text row. The layer's
   question leads its text, one step up and in ink. */
.svc-body .svc-layers {
	margin-block: var(--svc-module);
}

.svc-think .svc-lead {
	margin-bottom: var(--svc-s3);
}

.svc-body .svc-layer-about .svc-layer-q {
	margin-bottom: var(--svc-u);
	font-size: var(--svc-h4);
	font-weight: 600;
	line-height: var(--svc-lh-sub);
	letter-spacing: -.01em;
	color: var(--svc-ink);
	text-wrap: balance;
}

@media (max-width: 48em) {
	.svc-hub-item,
	.svc-layer {
		grid-template-columns: minmax(0, 1fr);
	}

	.svc-body .svc-hub-item h3,
	.svc-hub-about,
	.svc-body .svc-layer h3,
	.svc-layer-about {
		grid-column: 1 / -1;
	}
}

/* ---------- Kêu gọi liên hệ (fb-service/cta) ---------- */

/* Closing band: the theme ink (black; white in the dark skin). */
.svc-body > .svc-closing {
	background: var(--svc-ink);
	color: var(--svc-on-ink);
	padding-block: var(--svc-section);
}

.svc-body .svc-closing .svc-label,
.svc-body .svc-closing .svc-closing-title,
.svc-body .svc-closing-lead,
.svc-body .svc-closing .svc-portfolio {
	color: var(--svc-on-ink);
}

.svc-body .svc-closing-lead {
	max-width: 46ch;
	margin-top: var(--svc-s2);
	font-size: var(--svc-body-size);
	line-height: var(--svc-lh-text);
}

/* Mid-page row: the page's own lead size, then the same two actions. */
.svc-body .svc-ask .svc-lead {
	max-width: 36ch;
}

/* Button + portfolio link on one 4u band. */
.svc-body .svc-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--svc-s2) var(--svc-s4);
	margin-top: var(--svc-s4);
}

/* The theme's button keeps its own height; its row is one 4u band. */
.svc-body .svc-cta {
	display: flex;
	align-items: center;
	min-height: var(--svc-s4);
	margin: 0;
}

/* The theme's pulse ring (.inv-btn-wrapper::before) needs the wrapper to
   hug the button; the magnetic hover moves the link inside it (service.js). */
.svc-body .svc-cta .inv-btn-wrapper {
	margin: 0;
}

.svc-body .svc-cta .wp-block-button__link {
	position: relative;
	z-index: 1;
	letter-spacing: 0;
	transition: background-color .3s var(--svc-ease), color .3s var(--svc-ease), border-color .3s var(--svc-ease);
}

/* On the ink band the button inverts; hover turns brand blue, like the
   theme's own CTA button (#magnetic-btn). */
.svc-body .svc-closing .svc-cta .wp-block-button__link {
	background: var(--svc-on-ink);
	color: var(--svc-ink);
	border-color: var(--svc-on-ink);
}

.svc-body .svc-cta .wp-block-button__link:hover,
.svc-body .svc-cta .wp-block-button__link:focus-visible,
.svc-body .svc-closing .svc-cta .wp-block-button__link:hover,
.svc-body .svc-closing .svc-cta .wp-block-button__link:focus-visible {
	background: var(--svc-accent);
	color: var(--svc-on-accent);
	border-color: var(--svc-accent);
}

/* Portfolio: a plain link — ink text with the arrow, a line runs out on
   hover (same look as every other link on the page). */
.svc-body .svc-portfolio {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	color: var(--svc-ink);
	font-size: var(--svc-body-size);
	font-weight: 600;
	line-height: var(--svc-lh-text);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .4s var(--svc-ease);
}

.svc-body .svc-portfolio:hover,
.svc-body .svc-portfolio:focus-visible {
	color: inherit;
	background-size: 100% 1px;
}

/* ---------- Motion ---------- */

/* Title: each word rises from below its own line on load. Padding keeps
   Vietnamese marks (Ố, Ạ) inside the mask. */
.svc-wm {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: .14em .02em .1em;
	margin: -.14em -.02em -.1em;
}

.svc-wm > span {
	display: inline-block;
	animation: svc-rise 1s var(--svc-ease) both;
	animation-delay: calc(120ms + var(--i, 0) * 80ms);
}

@keyframes svc-rise {
	from {
		transform: translateY(108%);
	}
}

.svc-body .svc-rail,
.svc-hero .svc-en,
.svc-hero .svc-thesis,
.svc-hero .svc-text,
.svc-hero .svc-pull {
	animation: svc-enter .9s var(--svc-ease) both;
}

.svc-hero .svc-thesis {
	animation-delay: 600ms;
}

.svc-hero .svc-en {
	animation-delay: 650ms;
}

.svc-hero .svc-text {
	animation-delay: 750ms;
}

.svc-hero .svc-pull {
	animation-delay: 850ms;
}

@keyframes svc-enter {
	from {
		opacity: 0;
		transform: translateY(var(--svc-u));
		filter: blur(6px);
	}
}

/* Hero image opens upward on load. No scale or drift on the image: the
   figure also holds the caption, so a moved image would cover it. */
.svc-body .svc-hero-media {
	animation: svc-open 1.6s var(--svc-ease) .35s both;
}

@keyframes svc-open {
	from {
		clip-path: inset(22% 0 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

/* Scroll reveal (service.js): visible at rest (opacity .3), settles once. */
.svc-rv {
	transition: opacity .9s var(--svc-ease), transform 1s var(--svc-ease), filter .9s var(--svc-ease);
	transition-delay: var(--svc-d, 0ms);
}

.svc-rv.is-pre {
	opacity: .3;
	transform: translateY(var(--svc-s2));
	filter: blur(4px);
}

/* Stance: words brighten as it scrolls through the screen (service.js). */
.svc-stance .svc-sw {
	transition: color .35s var(--svc-ease);
}

.svc-stance.is-scrub .svc-sw {
	color: var(--svc-ink-2);
}

.svc-stance.is-scrub .svc-sw.is-on {
	color: var(--svc-ink);
}

.svc-stance.is-scrub strong .svc-sw.is-on {
	color: var(--svc-accent-text);
}

@media (prefers-reduced-motion: reduce) {
	.svc-body *,
	.svc-body *::before,
	.svc-body *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* Editor placeholder of a dynamic block with nothing to show. */
.svc-block-empty {
	padding: var(--svc-u);
	font-size: var(--svc-small);
	color: var(--svc-ink-2);
	background: var(--svc-band);
}

/* ---------- Ảnh phóng lớn (service.js) ----------
   Full screen in the page's own background (white, or black in the dark
   skin), so the image reads as on the page. The dialog sits inside
   .svc-body to inherit the tokens; it is in the top layer all the same. */
.svc-body .svc-viewer {
	box-sizing: border-box;
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--svc-on-ink);
	color: var(--svc-ink);
	overflow: hidden;
}

.svc-body .svc-viewer::backdrop {
	background: transparent;
}

.svc-body .svc-viewer[open] {
	animation: svc-view-fade .3s var(--svc-ease) both;
}

.svc-body .svc-viewer figure {
	position: absolute;
	inset: var(--svc-s6);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--svc-u);
	margin: 0;
}

.svc-body .svc-viewer img {
	display: block;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	animation: svc-view-in .6s var(--svc-ease) both;
}

/* The theme forces figcaptions to 13px / 13px, centred (!important). */
.svc-body .svc-viewer figcaption {
	display: flex;
	gap: var(--svc-s2);
	max-width: 64ch;
	margin: 0 !important;
	font-size: var(--svc-small) !important;
	line-height: var(--svc-lh-text) !important;
	text-align: left !important;
	color: var(--svc-ink-2);
}

.svc-body .svc-viewer-num {
	flex: none;
	font-variant-numeric: tabular-nums;
}

.svc-body .svc-viewer button {
	position: absolute;
	display: grid;
	place-items: center;
	width: var(--svc-s4);
	height: var(--svc-s4);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--svc-band);
	color: var(--svc-ink);
	cursor: pointer;
	transition: background-color .3s var(--svc-ease), color .3s var(--svc-ease);
}

.svc-body .svc-viewer button:hover {
	background: var(--svc-ink);
	color: var(--svc-on-ink);
}

.svc-body .svc-viewer button:focus-visible {
	outline: 2px solid var(--svc-accent-text);
	outline-offset: 3px;
}

.svc-body .svc-viewer svg {
	width: var(--svc-small);
	height: var(--svc-small);
}

.svc-body .svc-viewer-prev,
.svc-body .svc-viewer-next {
	top: calc(50% - var(--svc-s2));
}

.svc-body .svc-viewer-prev {
	left: var(--svc-u);
}

.svc-body .svc-viewer-next {
	right: var(--svc-u);
}

.svc-body .svc-viewer-close {
	top: var(--svc-u);
	right: var(--svc-u);
}

@keyframes svc-view-fade {
	from {
		opacity: 0;
	}
}

@keyframes svc-view-in {
	from {
		opacity: 0;
		transform: scale(.97);
	}
}

/* Phone: the image takes the width, arrows go under it. */
@media (max-width: 48em) {
	.svc-body .svc-viewer figure {
		inset: var(--svc-s6) var(--svc-u);
	}

	.svc-body .svc-viewer-prev,
	.svc-body .svc-viewer-next {
		top: auto;
		bottom: var(--svc-u);
	}

	.svc-body .svc-viewer-prev {
		left: calc(50% - var(--svc-s4) - var(--svc-u) / 2);
	}

	.svc-body .svc-viewer-next {
		right: calc(50% - var(--svc-s4) - var(--svc-u) / 2);
	}
}