/*
 * VMHNĐS — layout, header, footer and shared components.
 * ---------------------------------------------------------------------------
 * Every value here is either a design token (var(--vm-…)) or a number taken
 * directly from the approved Claude Design components. The React components in
 * the design system styled themselves with inline style objects; each of those
 * became one class below, with the same declarations.
 *
 * Source map:
 *   .vm-header   ← SiteHeader.jsx      .vm-btn      ← Button.jsx
 *   .vm-footer   ← SiteFooter.jsx      .vm-iconbtn  ← IconButton.jsx
 *   .vm-logo     ← Logo.jsx            .vm-input    ← Input.jsx
 *   .vm-tag      ← Tag.jsx             .vm-badge    ← Badge.jsx
 *   .vm-icon     ← Icon.jsx            .vm-card     ← Card.jsx
 *
 * Contents
 *   1. Page scaffolding and layout
 *   2. Editorial primitives
 *   3. Controls: buttons, icon buttons, inputs, tags, badges, cards
 *   4. Site header
 *   5. Site footer
 *   6. Provisional listing (replaced in step 3)
 *   7. Pagination and empty states
 *   8. Responsive
 */

/* ==========================================================================
   1. Page scaffolding and layout
   ========================================================================== */

:root {
	/* Side gutter; narrows on small screens (see §8). */
	--vm-gutter: var(--gutter-lg);        /* 40px */
	--vm-section-y: var(--section-y);     /* 96px */
	--vm-header-h: 76px;

	/*
	 * ACCESSIBILITY OVERRIDE.
	 *
	 * The design system sets --text-faint to --vm-ink-500 (#767c92). Measured
	 * against the paper ground that is 3.87:1, and 4.14:1 on white — under the
	 * 4.5:1 WCAG AA minimum for body-size text. It carries every date, reading
	 * time, meta row and archive excerpt on the site, so it matters.
	 *
	 * #6b7188 is the nearest step that passes: 4.52:1 on paper, 4.84:1 on
	 * white. It stays clearly lighter than --text-muted (6.17:1), so the
	 * three-level text hierarchy the design intends is preserved.
	 *
	 * Overridden here rather than edited in tokens.css, so tokens.css stays a
	 * verbatim copy of the design system and this decision stays visible.
	 */
	--text-faint: #6b7188;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
video {
	max-width: 100%;
	height: auto;
}

/*
 * Older excerpts have bare URLs run together with the text
 * ("…Hà Nộihttps://maps.app.goo.gl/EsgqmdCRx9N9CrSv7"). Without this they push
 * the whole page sideways on a phone.
 */
body {
	overflow-wrap: break-word;
}

.vm-shell {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	background: var(--surface-page);
}

.vm-main {
	flex: 1;
}

.vm-container {
	max-width: var(--container-xl);        /* 1280px */
	margin-inline: auto;
	padding-inline: var(--vm-gutter);
}

/* Vertical rhythm between full-width bands. */
.vm-section {
	padding-top: var(--vm-section-y);
}

.vm-section--last {
	padding-bottom: var(--vm-section-y);
}

/* A full-width band on the deep ink ground. */
.vm-band--ink {
	background: var(--surface-ink);
	color: var(--text-inverse);
}

/* Accessibility -------------------------------------------------------- */

.vm-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.vm-skip-link {
	/*
	 * fixed, not absolute: an absolutely positioned skip link is placed against
	 * the page rather than the viewport, so once the reader has scrolled it
	 * reveals itself somewhere off-screen above them.
	 */
	position: fixed;
	z-index: 100;
	top: -100px;
	left: var(--vm-gutter);
	padding: 12px 20px;
	border-radius: var(--radius-control);
	background: var(--color-brand);
	color: var(--vm-white);
	font: var(--type-ui);
	text-decoration: none;
	transition: top var(--dur-fast) var(--ease-out);
}

.vm-skip-link:focus {
	top: 12px;
	color: var(--vm-white);
}

/* ==========================================================================
   2. Editorial primitives
   ========================================================================== */

/* The brand's structural signature: a 48×3px clay rule above a title. */
.vm-rule {
	width: 48px;
	height: var(--border-rule);
	background: var(--accent-clay);
}

.vm-eyebrow {
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--text-accent);
}

.vm-meta {
	font: var(--type-meta);
	letter-spacing: var(--tracking-wide);
	color: var(--text-faint);
}

/* Used by the 404 page. */
.vm-pagehead__title {
	margin: var(--space-4) 0 0;
	font: var(--weight-semibold) clamp(30px, 4vw, 52px) / var(--leading-tight) var(--font-display);
	letter-spacing: var(--tracking-tightest);
	color: var(--text-strong);
	text-wrap: balance;
}

/* Icon — a Lucide SVG painted as a mask so it inherits currentColor.
   Size and mask-image are set inline by vmhnds_icon(). */
.vm-icon {
	display: inline-block;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-position: center;
	        mask-position: center;
}

/* ==========================================================================
   3. Controls
   ========================================================================== */

/* Button ---------------------------------------------------------------- */

.vm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border: var(--border-hairline) solid transparent;
	border-radius: var(--radius-control);
	font: var(--weight-semibold) var(--text-sm) / 1.2 var(--font-sans);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition-control), transform var(--dur-instant) var(--ease-out);
}

.vm-btn:active {
	transform: translateY(1px);
}

.vm-btn--sm {
	gap: 6px;
	padding: 7px 14px;
	font: var(--weight-semibold) var(--text-xs) / 1.2 var(--font-sans);
}

.vm-btn--primary {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: var(--text-inverse);
}

.vm-btn--primary:hover,
.vm-btn--primary:focus-visible {
	background: var(--color-brand-hover);
	border-color: var(--color-brand-hover);
	color: var(--text-inverse);
}

.vm-btn--secondary {
	background: transparent;
	border: var(--border-medium) solid var(--border-brand);
	color: var(--text-brand);
}

.vm-btn--secondary:hover,
.vm-btn--secondary:focus-visible {
	background: var(--color-brand-soft);
	color: var(--text-brand);
}

.vm-btn--ghost {
	background: transparent;
	color: var(--text-body);
}

.vm-btn--ghost:hover,
.vm-btn--ghost:focus-visible {
	background: var(--vm-ink-100);
	color: var(--text-body);
}

.vm-btn--inverse {
	background: var(--vm-white);
	border-color: var(--vm-white);
	color: var(--vm-blue-900);
}

.vm-btn--inverse:hover,
.vm-btn--inverse:focus-visible {
	background: var(--vm-blue-100);
	border-color: var(--vm-blue-100);
	color: var(--vm-blue-900);
}

/* Icon button ----------------------------------------------------------- */

.vm-iconbtn {
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border: var(--border-hairline) solid transparent;
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--text-body);
	cursor: pointer;
	transition: var(--transition-control);
}

.vm-iconbtn:hover {
	background: var(--vm-ink-100);
	color: var(--text-body);
}

.vm-iconbtn--outline {
	background: var(--surface-card);
	border-color: var(--border-default);
	color: var(--text-brand);
}

.vm-iconbtn--outline:hover {
	background: var(--vm-blue-50);
	border-color: var(--border-brand);
}

/* Input ----------------------------------------------------------------- */

.vm-input {
	width: 100%;
	padding: 11px 14px;
	border: var(--border-hairline) solid var(--border-default);
	border-radius: var(--radius-input);
	background: var(--surface-card);
	color: var(--text-strong);
	font: var(--weight-regular) var(--text-sm) / 1.4 var(--font-sans);
	outline: none;
	transition: var(--transition-control);
}

.vm-input:focus {
	border-color: var(--border-brand);
	box-shadow: var(--shadow-focus);
}

/*
 * The rule above sets `outline: none` on inputs (inherited from the design
 * system's Input component), which leaves keyboard users with only a soft 38%
 * ring. Put the standard outline back for keyboard focus specifically; a mouse
 * click still gets the quieter treatment.
 */
.vm-input:focus-visible {
	outline: var(--border-medium) solid var(--focus-ring);
	outline-offset: 2px;
}

.vm-input-wrap {
	position: relative;
	display: flex;
	flex: 1;
	min-width: 0;
}

.vm-input-wrap > .vm-icon {
	position: absolute;
	top: 50%;
	left: 13px;
	color: var(--text-faint);
	pointer-events: none;
	transform: translateY(-50%);
}

.vm-input--icon {
	padding-left: 40px;
}

.vm-searchform {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* Tag and badge --------------------------------------------------------- */

.vm-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: var(--border-hairline) solid var(--border-default);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--text-brand);
	font: var(--type-meta);
	letter-spacing: var(--tracking-wide);
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition-control);
}

.vm-tag:hover {
	background: var(--vm-blue-50);
	color: var(--text-brand);
}

.vm-tag[aria-current],
.vm-tag--active {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: var(--text-inverse);
}

.vm-badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: var(--radius-xs);
	background: var(--vm-blue-100);
	color: var(--vm-blue-800);
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
}

/* These three, and the .vm-tone--* set below, are composed in PHP as
   "vm-badge--<?php echo vmhnds_term_tone( $term ); ?>", so a plain text search
   of the templates will not find them. They are in use. */
.vm-badge--clay { background: var(--vm-clay-100); color: var(--vm-clay-800); }
.vm-badge--lake { background: var(--vm-lake-100); color: var(--vm-lake-800); }
.vm-badge--gold { background: var(--vm-gold-100); color: var(--vm-gold-700); }

/* Card ------------------------------------------------------------------ */

.vm-card {
	padding: var(--space-6);
	border: var(--border-hairline) solid var(--border-subtle);
	border-radius: var(--radius-card);
	background: var(--surface-card);
	color: var(--text-body);
}

/* ==========================================================================
   4. Site header
   ========================================================================== */

.vm-header {
	position: sticky;
	z-index: 30;
	top: 0;
	border-bottom: var(--border-hairline) solid var(--border-subtle);
	background: rgba(250, 247, 241, .9);
	-webkit-backdrop-filter: var(--blur-glass);
	        backdrop-filter: var(--blur-glass);
}

.vm-header__bar {
	display: flex;
	min-height: var(--vm-header-h);
	align-items: center;
	gap: var(--space-7);
}

/* Logo lockup ----------------------------------------------------------- */

.vm-logo {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
}

.vm-logo__seal {
	object-fit: contain;
}

.vm-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.vm-logo__name {
	font: var(--weight-bold) 15px / 1.15 var(--font-display);
	letter-spacing: var(--tracking-tight);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--vm-blue-600);
}

.vm-logo__sub {
	margin-top: 5px;
	font: var(--weight-medium) 9px / 1 var(--font-sans);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--text-muted);
}

.vm-logo--white .vm-logo__name { color: var(--vm-white); }
.vm-logo--white .vm-logo__sub  { color: rgba(255, 255, 255, .72); }

/* Primary navigation ---------------------------------------------------- */

.vm-header__nav {
	display: flex;
	margin-left: auto;
	align-items: center;
}

/* The nav carries `hidden` in the markup so it starts collapsed on phones.
   Above the mobile breakpoint it is always shown, so we override that here. */
.vm-header__nav[hidden] {
	display: flex;
}

.vm-nav {
	display: flex;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-6);
	list-style: none;
}

.vm-nav a {
	display: block;
	padding-bottom: 3px;
	border-bottom: var(--border-medium) solid transparent;
	color: var(--text-body);
	font: var(--type-ui);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: var(--transition-control);
}

.vm-nav a:hover {
	color: var(--link-hover);
}

.vm-nav .current-menu-item > a,
.vm-nav .current_page_item > a,
.vm-nav .current-menu-ancestor > a,
.vm-nav .current_page_parent > a,
.vm-nav .current-post-ancestor > a {
	border-bottom-color: var(--accent-clay);
	color: var(--text-brand);
}

/* Tools cluster --------------------------------------------------------- */

.vm-header__tools {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--space-2);
	padding-left: var(--space-4);
	border-left: var(--border-hairline) solid var(--border-subtle);
}

/* Each toggle holds two icons and shows one, based on its own state. */
.vm-header__toggle .vm-icon--close { display: none; }
.vm-header__toggle[aria-expanded="true"] .vm-icon--open { display: none; }
.vm-header__toggle[aria-expanded="true"] .vm-icon--close { display: inline-block; }
.vm-header__toggle[aria-expanded="true"] { background: var(--vm-ink-100); }

.vm-header__burger {
	display: none;
}

/* Search panel ---------------------------------------------------------- */

.vm-header__search {
	border-top: var(--border-hairline) solid var(--border-subtle);
	background: var(--surface-card);
}

.vm-header__search .vm-searchform {
	padding-block: var(--space-4);
}

/* Without JavaScript nothing can be toggled, so show the search and the menu
   permanently and hide the controls that would do nothing. */
.no-js .vm-header__search[hidden] { display: block; }
.no-js .vm-header__nav[hidden]    { display: flex; }
.no-js .vm-header__toggle         { display: none; }

/* ==========================================================================
   5. Site footer
   ========================================================================== */

.vm-footer {
	background: var(--surface-ink);
	color: var(--text-inverse);
}

.vm-footer__inner {
	padding-block: var(--space-11) var(--space-7);   /* 80px / 32px */
}

.vm-footer__grid {
	display: grid;
	/* min() keeps the brand column from forcing the grid wider than the screen. */
	grid-template-columns: minmax(min(260px, 100%), 1.4fr) repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: var(--space-9);
}

.vm-footer__mission {
	max-width: 34ch;
	margin: var(--space-5) 0 0;
	font: var(--weight-regular) var(--text-sm) / var(--leading-body) var(--font-serif);
	color: var(--text-inverse-muted);
}

.vm-footer__socials {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

.vm-footer__social {
	display: inline-flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	border: var(--border-hairline) solid var(--border-inverse);
	border-radius: var(--radius-control);
	color: var(--vm-white);
	transition: var(--transition-control);
}

.vm-footer__social:hover {
	background: rgba(255, 255, 255, .12);
	color: var(--vm-white);
}

.vm-footer__coltitle {
	margin: 0 0 var(--space-4);
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--vm-blue-300);
}

.vm-footer__list {
	display: flex;
	margin: 0;
	padding: 0;
	flex-direction: column;
	gap: var(--space-3);
	list-style: none;
}

.vm-footer__list a,
.vm-footer__contact {
	font: var(--weight-regular) var(--text-sm) / 1.5 var(--font-sans);
	color: var(--vm-white);
	text-decoration: none;
	opacity: .86;
}

/* Links on the ink ground stay white — the global clay hover would not carry
   enough contrast here — and pick up an underline instead. */
.vm-footer__list a:hover,
.vm-footer__contact a:hover {
	opacity: 1;
	color: var(--vm-white);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.vm-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.vm-footer__contactrow {
	display: flex;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.vm-footer__bottom {
	display: flex;
	margin-top: var(--space-10);
	padding-top: var(--space-6);
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-6);
	border-top: var(--border-hairline) solid var(--border-inverse);
	font: var(--weight-regular) var(--text-2xs) / 1.4 var(--font-sans);
	color: var(--text-inverse-muted);
}

/* ==========================================================================
   7. Pagination and empty states
   ========================================================================== */

.vm-pagination {
	margin-top: var(--space-11);
}

.vm-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
}

.vm-pagination .page-numbers {
	display: inline-flex;
	min-width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border: var(--border-hairline) solid var(--border-subtle);
	border-radius: var(--radius-control);
	color: var(--text-body);
	font: var(--weight-semibold) var(--text-sm) / 1 var(--font-sans);
	text-decoration: none;
	transition: var(--transition-control);
}

.vm-pagination .page-numbers:hover {
	border-color: var(--border-default);
	color: var(--text-brand);
}

.vm-pagination .page-numbers.current {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: var(--text-inverse);
}

.vm-pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--text-faint);
}

.vm-empty {
	padding-block: var(--space-10);
	text-align: center;
	color: var(--text-muted);
	font: var(--type-lede);
}

.vm-empty .vm-icon {
	color: var(--text-faint);
}

.vm-empty .vm-searchform {
	max-width: 480px;
	margin-inline: auto;
	text-align: left;
}

/* ==========================================================================
   8. Responsive
   ==========================================================================
   The design's grids use auto-fit and reflow on their own. What needs explicit
   handling is the gutter, the vertical rhythm and the header.
   ========================================================================== */

@media (max-width: 1080px) {
	:root {
		--vm-gutter: var(--space-7);        /* 32px */
	}
}

/* Below this width the horizontal nav can no longer sit beside the lockup. */
@media (max-width: 900px) {

	.vm-header__bar {
		gap: var(--space-4);
	}

	.vm-header__burger {
		display: inline-flex;
	}

	.vm-header__tools {
		margin-left: auto;
	}

	/* The menu drops out of the bar and hangs below the header. */
	.vm-header__nav,
	.vm-header__nav[hidden] {
		display: none;
	}

	.vm-header__nav:not([hidden]),
	.no-js .vm-header__nav[hidden] {
		position: absolute;
		display: block;
		z-index: 1;
		top: 100%;
		right: 0;
		left: 0;
		padding: var(--space-2) var(--vm-gutter) var(--space-5);
		border-bottom: var(--border-hairline) solid var(--border-subtle);
		background: var(--surface-page);
		box-shadow: var(--shadow-md);
	}

	.vm-nav {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
	}

	.vm-nav li {
		border-bottom: var(--border-hairline) solid var(--border-subtle);
	}

	.vm-nav li:last-child {
		border-bottom: 0;
	}

	.vm-nav a {
		padding: var(--space-4) 0;
		border-bottom: 0;
	}

	.vm-nav .current-menu-item > a,
	.vm-nav .current_page_item > a,
	.vm-nav .current-menu-ancestor > a,
	.vm-nav .current_page_parent > a,
	.vm-nav .current-post-ancestor > a {
		border-bottom: 0;
		color: var(--text-brand);
	}
}

@media (max-width: 780px) {
	:root {
		--vm-section-y: var(--section-y-sm);   /* 56px */
	}

	/*
	 * Below this width the four footer columns cannot fit side by side; left
	 * as a grid they push the whole page sideways. One column each.
	 */
	.vm-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}

	.vm-footer__inner {
		padding-block: var(--space-10) var(--space-6);
	}
}

@media (max-width: 560px) {
	:root {
		--vm-gutter: var(--space-5);           /* 20px */
	}

	.vm-searchform {
		flex-wrap: wrap;
	}

	.vm-searchform .vm-btn {
		width: 100%;
	}

	.vm-footer__bottom {
		gap: var(--space-2);
	}
}

/* The lockup's second line is what breaks first on very narrow phones. */
@media (max-width: 380px) {
	.vm-logo__name {
		font-size: 13px;
	}

	.vm-logo__seal {
		width: 38px !important;
		height: 38px !important;
	}
}

/* ==========================================================================
   9. The article page                                    (added in step 2)
   ==========================================================================
   Ported from the approved "Bài viết" artboard:
     .vm-breadcrumb  ← Breadcrumb.jsx     .vm-frame     ← MediaFrame.jsx
     .vm-byline      ← AuthorByline.jsx   .vm-cardlink  ← ArticleCard.jsx
     .vm-sectionhead ← SectionHeading.jsx
   ========================================================================== */

.vm-article__head {
	padding-top: var(--space-8);
}

/* Breadcrumb ------------------------------------------------------------ */

.vm-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	font: var(--type-meta);
	letter-spacing: var(--tracking-wide);
}

.vm-breadcrumb a {
	color: var(--text-brand);
	text-decoration: none;
}

.vm-breadcrumb a:hover {
	color: var(--link-hover);
}

.vm-breadcrumb__current {
	color: var(--text-muted);
}

.vm-breadcrumb__sep {
	display: flex;
	color: var(--text-faint);
}

/* Title block ----------------------------------------------------------- */

.vm-article__headgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	align-items: end;
	gap: var(--space-9);
	margin-top: var(--space-8);
}

.vm-article__kicker {
	margin: var(--space-4) 0 0;
}

.vm-article__title {
	margin: var(--space-3) 0 0;
	font: var(--weight-semibold) clamp(30px, 4.2vw, 54px) / 1.08 var(--font-display);
	letter-spacing: var(--tracking-tightest);
	color: var(--text-strong);
	text-wrap: balance;
}

.vm-article__standfirst {
	padding-bottom: 6px;
}

.vm-article__standfirst p {
	max-width: 46ch;
	margin: 0;
	font: var(--type-lede);
	color: var(--text-muted);
	text-wrap: pretty;
}

/* Byline and tools ------------------------------------------------------ */

.vm-article__metabar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	margin-top: var(--space-8);
	padding: var(--space-5) 0;
	border-top: var(--border-hairline) solid var(--border-subtle);
	border-bottom: var(--border-hairline) solid var(--border-subtle);
}

.vm-article__tools {
	display: flex;
	gap: var(--space-2);
}

.vm-byline {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.vm-byline__avatar {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--radius-circle);
	background: var(--vm-blue-100);
	color: var(--vm-blue-500);
}

.vm-byline__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vm-byline__text {
	min-width: 0;
}

.vm-byline__name {
	display: block;
	font: var(--weight-semibold) var(--text-sm) / 1.3 var(--font-sans);
	color: var(--text-strong);
}

.vm-byline--lg .vm-byline__name {
	font-size: var(--text-base);
}

.vm-byline__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
	font: var(--weight-regular) var(--text-xs) / 1.4 var(--font-sans);
	color: var(--text-faint);
}

/* Media frame ----------------------------------------------------------- */

.vm-frame {
	margin: 0;
}

.vm-frame__box {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-image);
	background: var(--vm-paper-3);
}

.vm-frame__box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/*
 * The honest placeholder from the design system: a 45° hatch and a label,
 * rather than a grey box pretending to be a photograph. Fifteen of the site's
 * existing posts have no featured image and land here.
 */
.vm-frame__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* On the hatched --vm-paper-3 ground, ink-500 measures 3.24:1. */
	color: var(--text-muted);
	background: repeating-linear-gradient(45deg, var(--vm-paper-3) 0 10px, var(--vm-paper-2) 10px 20px);
}

.vm-frame__placeholder span {
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
}

.vm-frame__caption {
	margin-top: var(--space-3);
	font: var(--weight-regular) var(--text-xs) / 1.5 var(--font-sans);
	color: var(--text-faint);
}

.vm-frame__credit {
	opacity: .8;
}

.vm-article__hero {
	margin-top: var(--space-8);
}

/* Body ------------------------------------------------------------------ */

.vm-article__body {
	max-width: var(--container-xl);
	margin-inline: auto;
	padding: var(--space-11) var(--vm-gutter) 0;
}

/* Tags — present, but deliberately quiet. Only 13 of 78 posts carry any. */
.vm-article__tags {
	display: flex;
	max-width: 720px;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-10) auto 0;
	padding-top: var(--space-6);
	border-top: var(--border-hairline) solid var(--border-subtle);
}

.vm-article__tagslabel {
	margin-right: var(--space-2);
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--text-faint);
}

.vm-tag--quiet {
	border-color: var(--border-subtle);
	color: var(--text-muted);
}

.vm-tag--quiet:hover {
	border-color: var(--border-default);
	color: var(--text-brand);
}

/* Author card ----------------------------------------------------------- */

.vm-article__author {
	max-width: 720px;
	margin: var(--space-8) auto 0;
}

.vm-authorcard {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	align-items: center;
	gap: var(--space-6);
	padding: var(--space-7);
}

.vm-authorcard__bio {
	margin: var(--space-4) 0 0;
	font: var(--weight-regular) var(--text-base) / var(--leading-body) var(--font-serif);
	color: var(--text-muted);
}

.vm-authorcard__action {
	display: flex;
	justify-content: flex-end;
}

/* Ink call-to-action band ----------------------------------------------- */

.vm-article__cta {
	margin-top: var(--space-12);
	padding-block: var(--space-11);
}

.vm-article__ctagrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	align-items: center;
	gap: var(--space-9);
}

.vm-article__ctatitle {
	margin: var(--space-4) 0 0;
	font: var(--weight-semibold) var(--text-3xl) / 1.18 var(--font-display);
	letter-spacing: var(--tracking-tightest);
	color: var(--vm-white);
	text-wrap: balance;
}

.vm-article__ctatext {
	max-width: 48ch;
	margin: var(--space-4) 0 0;
	font: var(--weight-regular) var(--text-base) / var(--leading-body) var(--font-serif);
	color: var(--text-inverse-muted);
	text-wrap: pretty;
}

.vm-article__ctaaction {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--space-4);
}

/* Section heading ------------------------------------------------------- */

.vm-sectionhead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-8);
	margin-bottom: var(--space-8);
}

.vm-sectionhead__text {
	min-width: 0;
	max-width: var(--measure-narrow);
}

.vm-sectionhead__text .vm-eyebrow {
	margin: var(--space-3) 0 0;
}

.vm-sectionhead__title {
	margin: var(--space-3) 0 0;
	font: var(--type-h2);
	letter-spacing: var(--tracking-tight);
	color: var(--text-strong);
}

.vm-sectionhead__desc {
	max-width: var(--measure-body);
	margin: var(--space-4) 0 0;
	font: var(--type-lede);
	color: var(--text-muted);
}

.vm-sectionhead__action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 4px;
	border-bottom: var(--border-medium) solid currentColor;
	color: var(--text-brand);
	font: var(--type-ui);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

/* Article card ---------------------------------------------------------- */

.vm-cardgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-9) var(--gutter);
}

.vm-cardlink {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	color: inherit;
	text-decoration: none;
}

.vm-cardlink__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-image);
}

.vm-cardlink__media .vm-frame__box {
	transition: transform var(--dur-slow) var(--ease-out);
}

.vm-cardlink:hover .vm-frame__box {
	transform: scale(1.03);
}

.vm-cardlink__text {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
}

.vm-cardlink__title {
	font: var(--weight-semibold) var(--text-xl) / var(--leading-snug) var(--font-display);
	letter-spacing: var(--tracking-tight);
	color: var(--text-strong);
	text-wrap: pretty;
}

.vm-cardlink:hover .vm-cardlink__title {
	text-decoration: underline;
	text-decoration-color: var(--accent-clay);
	text-decoration-thickness: 2px;
	text-underline-offset: .16em;
}

.vm-cardlink__excerpt {
	font: var(--weight-regular) var(--text-sm) / var(--leading-body) var(--font-serif);
	color: var(--text-muted);
}

.vm-cardlink__meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: auto;
	padding-top: var(--space-2);
	font: var(--type-meta);
	letter-spacing: var(--tracking-wide);
	color: var(--text-faint);
}

.vm-cardlink__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
}

.vm-cardlink__time {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* Article responsive ---------------------------------------------------- */

@media (max-width: 900px) {

	.vm-article__headgrid {
		gap: var(--space-6);
	}

	.vm-article__standfirst {
		padding-bottom: 0;
	}

	.vm-article__body {
		padding-top: var(--space-9);
	}

	.vm-authorcard__action {
		justify-content: flex-start;
	}

	.vm-article__ctaaction {
		justify-content: flex-start;
	}
}

@media (max-width: 640px) {

	.vm-article__metabar {
		align-items: flex-start;
		gap: var(--space-4);
	}

	/*
	 * The article body's own mobile sizes live in prose.css, which loads after
	 * this file — putting them here would lose to its `font:` shorthand.
	 */

	.vm-authorcard {
		padding: var(--space-6);
	}
}

/* ==========================================================================
   10. The archive                                        (added in step 3)
   ==========================================================================
   Ported from the approved "Kho bài viết" artboard. One design serves the
   archive, category, year, month, author and search listings.
   ========================================================================== */

/* Head ------------------------------------------------------------------ */

.vm-archive__head {
	padding-top: var(--space-9);
}

.vm-archive__headgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	align-items: end;
	gap: var(--space-9);
}

.vm-archive__title {
	margin: var(--space-4) 0 0;
	font: var(--weight-semibold) clamp(30px, 4vw, 52px) / 1.08 var(--font-display);
	letter-spacing: var(--tracking-tightest);
	color: var(--text-strong);
	text-wrap: balance;
}

.vm-archive__desc {
	max-width: 52ch;
	margin: var(--space-4) 0 0;
	font: var(--weight-regular) var(--text-lg) / var(--leading-body) var(--font-serif);
	color: var(--text-muted);
	text-wrap: pretty;
}

.vm-archive__search {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.vm-archive__counts {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-4);
	font: var(--type-meta);
	letter-spacing: var(--tracking-wide);
	color: var(--text-faint);
}

/* Category band — shared with the homepage ------------------------------ */

.vm-filterband {
	margin-top: var(--space-9);
	border-top: var(--border-hairline) solid var(--border-subtle);
	border-bottom: var(--border-hairline) solid var(--border-subtle);
	background: var(--surface-card);
}

.vm-filterband__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5);
	padding-block: var(--space-5);
}

.vm-filterband__label {
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--text-faint);
}

.vm-filterband__chips {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* Two-column body ------------------------------------------------------- */

.vm-archive__body {
	padding-top: var(--space-10);
	padding-bottom: var(--vm-section-y);
}

.vm-archive__layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-10);
}

.vm-archive__main {
	flex: 3 1 520px;
	min-width: 0;
}

.vm-archive__aside {
	display: flex;
	flex: 1 1 240px;
	min-width: 0;
	flex-direction: column;
	gap: var(--space-8);
}

/* Lead story ------------------------------------------------------------ */

.vm-lead {
	margin-bottom: var(--space-2);
	padding-bottom: var(--space-8);
	border-bottom: var(--border-rule) solid var(--border-strong);
}

.vm-lead__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	align-items: start;
	gap: var(--space-7);
	margin-top: var(--space-5);
}

.vm-lead__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-image);
}

.vm-lead__media .vm-frame__box {
	transition: transform var(--dur-slow) var(--ease-out);
}

.vm-lead:hover .vm-frame__box {
	transform: scale(1.03);
}

.vm-lead__title {
	margin: 0;
	font: var(--weight-semibold) var(--text-2xl) / 1.2 var(--font-display);
	letter-spacing: var(--tracking-tightest);
	text-wrap: balance;
}

.vm-lead__title a {
	color: var(--text-strong);
	text-decoration: none;
}

.vm-lead__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--accent-clay);
	text-decoration-thickness: 2px;
	text-underline-offset: .16em;
}

.vm-lead__excerpt {
	margin: var(--space-4) 0 0;
	font: var(--weight-regular) var(--text-base) / var(--leading-body) var(--font-serif);
	color: var(--text-muted);
	text-wrap: pretty;
}

.vm-lead__meta {
	margin: var(--space-4) 0 0;
	font: var(--type-meta);
	letter-spacing: var(--tracking-wide);
	color: var(--text-faint);
}

/* Month groups ---------------------------------------------------------- */

.vm-group {
	margin-top: var(--space-9);
}

.vm-group__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: var(--border-hairline) solid var(--border-strong);
}

.vm-group__title {
	margin: 0;
	font: var(--weight-semibold) var(--text-xl) / 1.2 var(--font-display);
	letter-spacing: var(--tracking-tight);
	color: var(--text-strong);
}

.vm-group__count {
	font: var(--type-meta);
	letter-spacing: var(--tracking-wide);
	color: var(--text-faint);
	white-space: nowrap;
}

/* A row ----------------------------------------------------------------- */

.vm-row {
	display: grid;
	grid-template-columns: minmax(72px, 100px) minmax(0, 1fr);
	align-items: baseline;
	gap: 12px var(--space-6);
	padding: 18px 0;
	border-bottom: var(--border-hairline) solid var(--border-subtle);
	text-decoration: none;
}

.vm-row__day {
	font: var(--type-meta);
	letter-spacing: var(--tracking-wide);
	color: var(--text-faint);
}

.vm-row__body {
	min-width: 0;
}

.vm-row__title {
	display: block;
	font: var(--weight-semibold) var(--text-lg) / 1.3 var(--font-display);
	letter-spacing: var(--tracking-tight);
	color: var(--text-strong);
	text-wrap: pretty;
}

.vm-row:hover .vm-row__title {
	text-decoration: underline;
	text-decoration-color: var(--accent-clay);
	text-decoration-thickness: 2px;
	text-underline-offset: .16em;
}

.vm-row__excerpt {
	display: block;
	margin-top: 6px;
	font: var(--weight-regular) var(--text-base) / var(--leading-body) var(--font-serif);
	color: var(--text-faint);
	text-wrap: pretty;
}

.vm-row__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: 10px;
	font: var(--weight-medium) var(--text-2xs) / 1.5 var(--font-sans);
}

.vm-row__topic {
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-accent);
}

.vm-row__time {
	letter-spacing: var(--tracking-wide);
	color: var(--text-faint);
}

/* Aside ----------------------------------------------------------------- */

.vm-aside__title,
.vm-asidecard__title {
	margin: 0;
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--text-faint);
}

.vm-aside__title {
	padding-bottom: var(--space-3);
	border-bottom: var(--border-hairline) solid var(--border-strong);
}

.vm-years {
	display: flex;
	flex-direction: column;
}

.vm-years__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: var(--border-hairline) solid var(--border-subtle);
	text-decoration: none;
	transition: var(--transition-control);
}

.vm-years__item:hover {
	opacity: .7;
}

.vm-years__label {
	font: var(--weight-semibold) var(--text-base) / 1.3 var(--font-display);
	letter-spacing: var(--tracking-tight);
	color: var(--text-strong);
}

.vm-years__item.is-current .vm-years__label {
	/* clay-500 measures 4.11:1 at this size; --text-accent (clay-700) is the
	   same hue one step darker and passes AA. The bar below stays clay-500 —
	   it is decoration, not text. */
	color: var(--text-accent);
}

.vm-years__right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vm-years__bar {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: var(--vm-ink-200);
}

.vm-years__item.is-current .vm-years__bar {
	background: var(--accent-clay);
}

.vm-years__count {
	font: var(--type-meta);
	letter-spacing: var(--tracking-wide);
	color: var(--text-faint);
	white-space: nowrap;
}

.vm-asidecard {
	padding: var(--space-6);
}

.vm-asidecard__text {
	margin: var(--space-3) 0 var(--space-5);
	font: var(--weight-regular) var(--text-sm) / var(--leading-body) var(--font-sans);
	color: var(--text-muted);
}

.vm-asidecard__list {
	display: flex;
	margin: 0;
	padding: 0;
	flex-direction: column;
	list-style: none;
}

.vm-asidecard__list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding: 10px 0;
	border-top: var(--border-hairline) solid var(--border-subtle);
	font: var(--weight-medium) var(--text-sm) / 1.4 var(--font-sans);
	text-decoration: none;
}

.vm-asidecard__count {
	font: var(--type-meta);
	color: var(--text-faint);
}

/* Archive responsive ---------------------------------------------------- */

@media (max-width: 900px) {

	.vm-archive__layout {
		gap: var(--space-9);
	}

	/* The rail stops being a rail and becomes two blocks under the list. */
	.vm-archive__aside {
		flex-direction: row;
		flex-wrap: wrap;
		flex-basis: 100%;
		gap: var(--space-7);
	}

	.vm-years,
	.vm-asidecard {
		flex: 1 1 260px;
	}
}

@media (max-width: 560px) {

	/* Date above the headline rather than beside it. */
	.vm-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	/*
	 * With the chips wrapping onto three lines, a vertically centred label
	 * floats beside the middle row. Put it on its own line instead.
	 */
	.vm-filterband__bar {
		align-items: flex-start;
		gap: var(--space-3);
	}

	.vm-filterband__chips {
		flex-basis: 100%;
	}

	.vm-archive__counts {
		flex-direction: column;
		gap: 4px;
	}

	.vm-lead__grid {
		gap: var(--space-5);
	}
}

/* ==========================================================================
   11. The homepage                                       (added in step 4)
   ==========================================================================
   Ported from the approved "Trang chủ" artboard. Every block here is filled by
   a Posts query — see front-page.php.
   ========================================================================== */

/* Hero ------------------------------------------------------------------ */

.vm-hero {
	padding-top: var(--space-9);
}

/*
 * The headline column is deliberately a little wider than the image column, so
 * the lead reads as a story with a picture rather than a picture with a caption.
 */
.vm-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-9);
}

.vm-hero__kicker {
	margin: var(--space-4) 0 0;
}

.vm-hero__title {
	margin: var(--space-3) 0 0;
	font: var(--weight-semibold) clamp(32px, 4.4vw, 56px) / 1.08 var(--font-display);
	letter-spacing: var(--tracking-tightest);
	text-wrap: balance;
}

.vm-hero__title a {
	color: var(--text-strong);
	text-decoration: none;
}

.vm-hero__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--accent-clay);
	text-decoration-thickness: 3px;
	text-underline-offset: .16em;
}

.vm-hero__lede {
	max-width: 46ch;
	margin: var(--space-5) 0 0;
	font: var(--type-lede);
	color: var(--text-muted);
	text-wrap: pretty;

	/* Hold the lede to about three lines whatever the excerpt's length. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6);
	margin-top: var(--space-6);
}

.vm-hero__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-image);
}

.vm-hero__media .vm-frame__box {
	transition: transform var(--dur-slow) var(--ease-out);
}

.vm-hero__media:hover .vm-frame__box {
	transform: scale(1.03);
}

/* The three links under the hero ---------------------------------------- */

/*
 * The homepage grid shows six cards, so it wants three columns rather than the
 * four that a 260px minimum gives at full width — four would leave a ragged
 * row of two underneath.
 */
.vm-cardgrid--home {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.vm-hero__more {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-7);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: var(--border-rule) solid var(--border-strong);
}

.vm-minilink {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
}

.vm-minilink__kicker {
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--text-accent);
}

/* Category accent colours, from vmhnds_term_tone(). */
.vm-tone--brand { color: var(--vm-blue-700); }
.vm-tone--clay  { color: var(--vm-clay-700); }
.vm-tone--lake  { color: var(--vm-lake-600); }
.vm-tone--gold  { color: var(--vm-gold-700); }

.vm-minilink__title {
	font: var(--weight-semibold) var(--text-lg) / 1.25 var(--font-display);
	letter-spacing: var(--tracking-tight);
	color: var(--text-strong);
	text-wrap: pretty;
}

.vm-minilink:hover .vm-minilink__title {
	text-decoration: underline;
	text-decoration-color: var(--accent-clay);
	text-decoration-thickness: 2px;
	text-underline-offset: .16em;
}

.vm-minilink__date {
	font: var(--type-meta);
	letter-spacing: var(--tracking-wide);
	color: var(--text-faint);
}

/* "Đọc tiếp trong kho" ---------------------------------------------------
   A plain index under the card grid: no images, no badges, smaller headlines
   and a tighter rhythm, so it reads as a quiet tail rather than a second
   editorial section competing with the one above it. */

.vm-more .vm-sectionhead {
	margin-bottom: var(--space-6);
}

.vm-newslist {
	display: flex;
	flex-direction: column;
}

.vm-newsrow {
	display: grid;
	grid-template-columns: minmax(110px, 130px) minmax(0, 1fr);
	gap: 4px var(--space-6);
	padding: var(--space-4) 0;
	border-top: var(--border-hairline) solid var(--border-subtle);
	text-decoration: none;
}

.vm-newsrow:last-child {
	border-bottom: var(--border-hairline) solid var(--border-subtle);
}

.vm-newsrow__date {
	font: var(--type-meta);
	letter-spacing: var(--tracking-wide);
	color: var(--text-faint);
}

.vm-newsrow__title {
	font: var(--weight-semibold) var(--text-base) / 1.35 var(--font-display);
	letter-spacing: var(--tracking-tight);
	color: var(--text-strong);
	text-wrap: pretty;
}

.vm-newsrow:hover .vm-newsrow__title {
	text-decoration: underline;
	text-decoration-color: var(--accent-clay);
	text-decoration-thickness: 2px;
	text-underline-offset: .16em;
}

/* "Về chúng tôi" band ---------------------------------------------------- */

.vm-about {
	margin-top: var(--vm-section-y);
	padding-block: var(--space-11);
}

.vm-about__inner {
	max-width: var(--container-lg);
}

.vm-about__eyebrow {
	margin: var(--space-4) 0 0;
	color: var(--text-inverse-muted);
}

.vm-about__title {
	margin: var(--space-3) 0 0;
	font: var(--weight-semibold) var(--text-3xl) / 1.18 var(--font-display);
	letter-spacing: var(--tracking-tightest);
	color: var(--vm-white);
	text-wrap: balance;
}

.vm-about__text {
	max-width: 62ch;
	margin: var(--space-5) 0 var(--space-7);
	font: var(--weight-regular) var(--text-base) / var(--leading-body) var(--font-serif);
	color: var(--text-inverse-muted);
	text-wrap: pretty;
}

/* Homepage responsive ---------------------------------------------------- */

@media (max-width: 900px) {

	.vm-hero {
		padding-top: var(--space-8);
	}

	.vm-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: var(--space-7);
	}

	/* Lead image above the headline reads better than beside it on a tablet. */
	.vm-hero__media {
		order: -1;
	}

}

@media (max-width: 560px) {

	.vm-hero__more {
		gap: var(--space-6);
		margin-top: var(--space-8);
	}

	.vm-hero__actions {
		gap: var(--space-4);
	}

	.vm-hero__actions .vm-btn {
		width: 100%;
	}

	/* Date above the headline, as in the archive rows. */
	.vm-newsrow {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   12. Pages                                              (refined in step 6)
   ==========================================================================
   "Về chúng tôi" and any other ordinary WordPress Page. The page's own
   Gutenberg content supplies everything below the heading; these rules only
   size and space it.
   ========================================================================== */

/* One picture, clearly wider than the 720px reading column, not a banner. */
.vm-page__hero {
	max-width: 1000px;
	margin-top: var(--space-7);
	padding-inline: 0;
}

.vm-article--page .vm-article__head {
	padding-top: var(--space-9);
}

.vm-article--page .vm-article__headgrid {
	margin-top: var(--space-6);
}

.vm-article--page .vm-article__body {
	padding-top: var(--space-9);
	padding-bottom: var(--vm-section-y);
}

/* A page's standfirst is its introductory statement — a little more present
   than an article's, since there is no byline under it. */
.vm-article--page .vm-article__standfirst p {
	max-width: 42ch;
	color: var(--text-body);
}

@media (max-width: 1080px) {
	.vm-page__hero {
		padding-inline: var(--vm-gutter);
	}
}

@media (max-width: 900px) {
	.vm-article--page .vm-article__body {
		padding-top: var(--space-8);
	}
}