/* ==========================================================================
   AMANKONG theme — main.css
   Mobile-first. Breakpoints: 768px (tablet), 1024px (desktop) — docs/03.
   Visual reference: docs/ui-reference/ref-1-home-category.webp,
                     docs/ui-reference/ref-2-video-detail.webp
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   PROVISIONAL: colour values are sampled from the Owner UI reference, not an
   approved Color System V1. Change them here only; never hard-code colours
   in components. docs/03 §9 green palette is historical, not brand primary.
   -------------------------------------------------------------------------- */
:root {
	/* 5.5 round 1 (Owner 01/10/2026, "công nghiệp chuyên nghiệp — máy thật, tin cậy");
	   round 1b: sizes + colours re-measured on MASTER UI ref-1 (compact, app-like).
	   Every text/background pair below passes WCAG AA (4.5:1) — numbers in docs/phien/02. */

	/* Brand: AMANKONG red = primary button, price, accent only. */
	--color-brand: #e31e24;          /* white text on it 4.69:1 */
	--color-brand-hover: #c4161c;
	--color-brand-strong: #c8161c;   /* red TEXT on light tints (5.1:1 on brand-soft) */
	--color-brand-soft: #fdecec;
	--color-on-brand: #ffffff;

	/* Navy + steel blue (new). */
	--color-navy: #0f1e33;           /* hero, footer; white text 16.7:1 */
	--color-navy-2: #17304f;         /* gradient partner for depth */
	--color-steel: #1b69d0;          /* links, icons, labels (ref-1 blue #1E6FD9, a touch darker for AA): 5.28 white, 4.77 on cta-soft */

	/* Secondary actions */
	--color-zalo: #0068ff;           /* Zalo blue, white text 4.9:1 */
	--color-zalo-hover: #0055d4;
	--color-link: var(--color-steel);
	--color-success: #157a41;        /* 5.4:1 on white — small text ("Tải", counts) */

	/* Neutrals */
	--color-heading: #0f1e33;
	--color-text: #1a2230;           /* 15.96:1 on white */
	--color-muted: #5b6675;          /* 5.83:1 on white, 5.38:1 on bg-soft */
	--color-muted-strong: #4a5563;
	--color-border: #e6eaf0;
	--color-border-strong: #c9d1db;
	--color-surface: #ffffff;
	--color-bg: #ffffff;
	--color-bg-soft: #f5f7fa;
	--color-cta-soft: #eef4fb;
	--color-media-bg: #dde3ea;
	--color-overlay: rgba(15, 30, 51, 0.55);
	--color-badge-bg: rgba(15, 30, 51, 0.85);

	/* Hero */
	--color-hero-bg: var(--color-navy);
	--color-hero-text: #ffffff;
	--color-hero-muted: #c5ceda;     /* 10.5:1 on navy */
	--color-hero-line: rgba(255, 255, 255, 0.28);

	/* Footer */
	--color-footer-bg: #1b2a41;      /* ref-1 footer navy */
	--color-footer-text: #c5ceda;    /* 10.5:1 on navy */
	--color-footer-heading: #ffffff;

	/* Typography. Be Vietnam Pro (OFL, self-hosted in assets/fonts/ once approved;
	   loaded only when the files exist — functions.php) with the system stack as fallback. */
	--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-heading: "Be Vietnam Pro", var(--font-system);
	--font-body: "Be Vietnam Pro", var(--font-system);
	--font-sans: var(--font-body);
	--font-display: "Barlow Semi Condensed", "Arial Narrow", var(--font-system); /* style C block titles (self-hosted 700) */
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;     /* 16 phones */
	--fs-h3: 1rem;       /* 16 */
	--fs-h2: 1.25rem;    /* 20 — block titles */
	--fs-h1: 1.375rem;   /* 22 — inner pages */
	--fs-display: 1.4375rem; /* 23 — homepage H1 on phones (condensed caps) */
	--lh-tight: 1.25;
	--lh-base: 1.5;
	--ls-heading: -0.015em;
	--ls-label: 0.08em;

	/* Spacing scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;

	/* Shape & depth */
	--radius-sm: 6px;
	--radius: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;
	--shadow-card: 0 1px 2px rgba(15, 30, 51, 0.05);
	--shadow-raised: 0 8px 24px rgba(15, 30, 51, 0.12);
	--shadow-btn: 0 2px 6px rgba(227, 30, 36, 0.28);
	--shadow-bar: 0 -2px 12px rgba(16, 24, 40, 0.08);

	/* Layout */
	--container-max: 1240px;
	--gutter: 16px;
	--header-h: 56px;
	--mobile-bar-h: 64px;
	--tap: 44px; /* U1 minimum touch target */
	--z-header: 50;
	--z-bar: 60;
	--z-drawer: 100;
}

@media (min-width: 768px) {
	:root {
		--gutter: 24px;
	}
}

@media (min-width: 1024px) {
	:root {
		--fs-base: 0.9375rem; /* 15 (ref-1) */
		--fs-h3: 1.0625rem;   /* 17 */
		--fs-h2: 1.375rem;    /* 22 — block titles */
		--fs-h1: 1.625rem;    /* 26 — inner pages */
		--fs-display: 2.5rem; /* 40 — homepage H1 (condensed caps) */
		--header-h: 72px;
	}
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	overflow-x: hidden;
}

body.is-locked {
	overflow: hidden;
}

/* Components set display (e.g. .btn), so enforce the hidden attribute. */
[hidden] {
	display: none !important;
}

img,
svg,
video,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 var(--space-3);
	color: var(--color-heading);
	font-family: var(--font-heading);
	line-height: var(--lh-tight);
	font-weight: 700;
	letter-spacing: var(--ls-heading);
}

h1 {
	font-weight: 700;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }

p {
	margin: 0 0 var(--space-4);
}

a {
	color: var(--color-link);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	font: inherit;
}

:focus-visible {
	outline: 2px solid var(--color-zalo);
	outline-offset: 2px;
}

.icon {
	width: 1.25em;
	height: 1.25em;
	flex-shrink: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: var(--space-2);
	top: -100px;
	z-index: 200;
	padding: var(--space-2) var(--space-4);
	background: var(--color-heading);
	color: #fff;
	border-radius: var(--radius-sm);
}

.skip-link:focus {
	top: var(--space-2);
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	padding-block: var(--space-6); /* 32 phones */
}

.section--soft {
	background: var(--color-bg-soft);
}

.section--tight {
	padding-block: var(--space-5);
}

/* Consecutive white sections: drop the doubled top padding. */
.section.section--flush-top {
	padding-top: 0;
}

@media (min-width: 1024px) {
	.section {
		padding-block: var(--space-7);
	}
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-3);
	margin-bottom: var(--space-4);
}

/* Optional filter chips: own row on mobile, inline after the title on desktop. */
.section-head__tabs {
	order: 3;
	flex-basis: calc(100% + var(--gutter) * 2);
}

@media (min-width: 1024px) {
	.section-head .section-head__tabs {
		order: 0;
		flex: 1 1 0;
		margin-inline: var(--space-4) 0;
		padding-inline: 0;
	}
}

/* Block titles: plain bold sentence case, 20–22 px (ref-1; the 5.5 red bar is gone). */
.section-head__title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 700;
}

.link-more {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	min-height: var(--tap);
	flex-shrink: 0;
	font-size: var(--fs-sm);
	font-weight: 500;
	white-space: nowrap;
}

.link-more .icon {
	width: 1em;
	height: 1em;
}

/* Responsive grid: set --cols-m / --cols-t / --cols-d inline to override. */
.grid {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(var(--cols-m, 2), minmax(0, 1fr));
}

@media (min-width: 768px) {
	.grid {
		gap: var(--space-4);
		grid-template-columns: repeat(var(--cols-t, 3), minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.grid {
		grid-template-columns: repeat(var(--cols-d, 4), minmax(0, 1fr));
	}
}

/* Grid that becomes a horizontal snap row below 768px.
   Card width on mobile: --scroll-w (default 70%). */
@media (max-width: 767.98px) {
	.grid--scroll-m {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
		margin-inline: calc(var(--gutter) * -1);
		padding: 2px var(--gutter) var(--space-1);
	}

	.grid--scroll-m::-webkit-scrollbar {
		display: none;
	}

	.grid--scroll-m > * {
		flex: 0 0 var(--scroll-w, 70%);
		scroll-snap-align: start;
	}
}

/* Horizontal scroller for mobile rows (chips, category strip). */
.scroller {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	margin-inline: calc(var(--gutter) * -1);
	padding-inline: var(--gutter);
}

.scroller::-webkit-scrollbar {
	display: none;
}

/* Main + sidebar (video detail). Stacks on mobile. */
.layout-aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-5);
}

@media (min-width: 1024px) {
	.layout-aside {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: var(--space-5);
		align-items: start;
	}
}

.stack > * + * {
	margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   4. Typography helpers
   -------------------------------------------------------------------------- */
.display {
	font-size: var(--fs-display);
	font-weight: 700;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.25;
}

.page-title {
	font-size: var(--fs-h1);
	font-weight: 700;
	margin-bottom: var(--space-2);
}

/* Small uppercase label (eyebrow) — prices, video labels, meta captions. */
.eyebrow {
	color: var(--color-steel);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.lead {
	color: var(--color-muted);
	font-size: var(--fs-base);
	max-width: 60ch;
}

.meta {
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.meta > * + *::before {
	content: "•";
	margin-inline: var(--space-2);
}

.prose {
	max-width: 72ch;
}

.stack-list {
	padding-left: var(--space-5);
}

.stack-list li {
	margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--tap);
	padding: 0 var(--space-5);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-heading);
	font-size: var(--fs-sm); /* 14 (ref-1) */
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover {
	text-decoration: none;
}

.btn--primary {
	background: var(--color-brand);
	color: var(--color-on-brand);
	box-shadow: var(--shadow-btn);
}

.btn--primary:hover {
	background: var(--color-brand-hover);
	box-shadow: 0 4px 12px rgba(227, 30, 36, 0.32);
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn--zalo {
	background: var(--color-zalo);
	color: #fff;
}

.btn--zalo:hover {
	background: var(--color-zalo-hover);
}

.btn--light {
	border-color: var(--color-border);
	color: var(--color-zalo);
}

.btn--light:hover {
	background: var(--color-bg-soft);
}

/* White-outline button on dark hero media. */
.btn--ghost {
	border-color: rgba(255, 255, 255, 0.85);
	background: transparent;
	color: #fff;
}

.btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* Outline button for light backgrounds (secondary action next to a primary). */
.btn--outline {
	border-color: var(--color-border);
	background: var(--color-surface);
	color: var(--color-heading);
}

.btn--outline:hover {
	background: var(--color-bg-soft);
}

.btn--sm {
	min-height: 36px;
	padding: 0 var(--space-4);
	font-size: var(--fs-sm);
}

.btn--block {
	width: 100%;
}

/* Square icon-only button with full touch target. */
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-heading);
	cursor: pointer;
}

.icon-btn .icon {
	width: 24px;
	height: 24px;
}

/* --------------------------------------------------------------------------
   6. Chips / tags
   -------------------------------------------------------------------------- */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill); /* pill tabs (ref-1) */
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--fs-sm);
	white-space: nowrap;
	text-decoration: none;
}

/* Extend the hit area to the 44px touch target without enlarging the chip. */
.chip::after {
	content: "";
	position: absolute;
	inset: -4px 0;
}

.chip:hover {
	border-color: var(--color-muted);
	text-decoration: none;
}

/* Selected tab: red text + light red outline (ref-1). */
.chip.is-active,
.chip[aria-current] {
	border-color: #f3b4b6;
	background: var(--color-brand-soft);
	color: var(--color-brand-strong);
	font-weight: 600;
}

.chip--soft {
	border-color: transparent;
	background: var(--color-bg-soft);
}

/* --------------------------------------------------------------------------
   7. Cards
   Base .card + variants: --category, --video, --doc, --product.
   -------------------------------------------------------------------------- */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
}

.card:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-raised);
	transform: translateY(-2px);
}

.card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-3);
}

.card__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 600; /* 14 / 600 (ref-1) */
	letter-spacing: 0;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card__desc {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--fs-xs);
	line-height: 1.4;
}

.card__meta {
	margin: 0;
	color: var(--color-muted);
	font-size: 0.875rem; /* 13 */
}

/* Price only from an approved WebApp record (ADR-021, docs/31). */
.card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--space-1);
	margin: 0;
	color: var(--color-brand);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere; /* long figures wrap inside narrow 2-column cards */
}

.card__price strong {
	font-family: var(--font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0;
}

.card__price-from {
	color: var(--color-muted-strong);
	font-weight: 400;
}

.card__price--contact {
	color: var(--color-muted-strong);
}

.card__price-vat {
	color: var(--color-muted-strong);
	font-size: var(--fs-xs);
}

.card__link {
	margin-top: auto;
	padding-top: var(--space-1);
	color: var(--color-link);
	font-size: 0.875rem; /* 13 */
	font-weight: 600;
}

/* Optional count after the link label: "(12)"; the unit shows only where a
   layout hides the label (see catalog). */
.card__count::before {
	content: "(";
}

.card__count::after {
	content: ")";
}

.card__count-unit {
	display: none;
}

/* Whole card clickable: put .card__stretched on the primary link. */
.card__stretched::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.card__stretched,
.card__stretched:hover {
	color: inherit;
	text-decoration: none;
}

@media (min-width: 1024px) {
	.card__body {
		padding: var(--space-4);
	}

	.card__title {
		font-size: var(--fs-sm); /* 14 */
	}

	.card__desc,
	.card__meta,
	.card__link {
		font-size: 0.875rem; /* 13 */
	}
}

/* Media frame: fixed aspect ratio, never overflows. */
.media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--color-media-bg);
	overflow: hidden;
}

.media--4x3 {
	aspect-ratio: 4 / 3;
}

.media > img,
.media > video,
.media > iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.media__badge {
	position: absolute;
	right: var(--space-2);
	bottom: var(--space-2);
	padding: 2px var(--space-2);
	border-radius: 4px;
	background: var(--color-badge-bg);
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.media__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-brand);
	color: #fff;
	transform: translate(-50%, -50%);
	box-shadow: var(--shadow-raised);
}

.media__play .icon {
	width: 28px;
	height: 28px;
	fill: currentColor;
	margin-left: 3px;
}

.media__empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--color-muted);
}

.media__empty .icon {
	width: 32px;
	height: 32px;
}

/* Video without poster: navy frame + white play + label (5.5 B2). */
.media__empty--video {
	align-content: center;
	gap: var(--space-2);
	background:
		radial-gradient(120% 90% at 85% 0%, rgba(31, 111, 178, 0.45), transparent 60%),
		linear-gradient(135deg, var(--color-navy-2), var(--color-navy));
	color: #ffffff;
}

.media__empty-play {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.media__empty-play .icon {
	width: 22px;
	height: 22px;
	margin-left: 3px;
	fill: currentColor;
}

.media__empty-label {
	color: var(--color-hero-muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.card:hover .media__empty-play {
	border-color: #ffffff;
	background: var(--color-brand);
}

/* Borderless card (video lists): image frame + text below. */
.card--plain {
	border: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.card--plain:hover {
	box-shadow: none;
}

.card--plain .media {
	border-radius: var(--radius);
}

.card--plain .card__body {
	padding: var(--space-2) 0 0;
}

.card--plain:hover .card__title {
	color: var(--color-brand);
}

.card--category .media,
.card--product .media {
	background: var(--color-bg-soft);
}

.card--category .media {
	aspect-ratio: 4 / 3;
}

/* Group descriptions are written for the group page; keep cards to 3 lines. */
.card--category .card__desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Real photos fill the card (locked ratios 01/10/2026, docs/04 §ảnh):
   group + product cards 4:3, cover, centred. Upload rule: machine in the
   middle with ~8% margin so the crop never cuts it. */
.card--category .media > img,
.card--product .media > img {
	object-fit: cover;
	object-position: center;
}

/* Product card: title row with chevron, "Liên hệ" CTA above the stretched link. */
.card__title--row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-2);
}

.card__title--row .icon {
	width: 1em;
	height: 1em;
	margin-top: 0.15em;
	color: var(--color-muted);
}

.card__cta {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 36px;
	margin-top: auto;
	color: var(--color-brand);
	font-size: var(--fs-sm);
	font-weight: 600;
}

/* Panel: bordered sidebar/aside block with a small heading. */
.panel {
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.panel__head {
	margin-bottom: var(--space-3);
}

.panel__title {
	margin: 0;
	font-size: var(--fs-h3);
	font-weight: 700;
}

.panel__sub {
	margin: 2px 0 0;
	color: var(--color-muted);
	font-size: var(--fs-xs);
}

/* Document card: horizontal file icon + name + size. */
.card--doc {
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3);
}

.card--doc .card__body {
	padding: 0;
}

.file-icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 48px;
	border-radius: 4px;
	background: var(--color-brand);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   8. Accordion (<details>)
   -------------------------------------------------------------------------- */
.accordion {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
}

.accordion + .accordion {
	margin-top: var(--space-2);
}

.accordion__summary {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 56px;
	padding: var(--space-3) var(--space-4);
	cursor: pointer;
	list-style: none;
}

.accordion__summary::-webkit-details-marker {
	display: none;
}

.accordion__icon {
	display: grid;
	place-items: center;
	color: var(--color-heading);
}

.accordion__icon .icon {
	width: 26px;
	height: 26px;
}

.accordion__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.accordion__title {
	color: var(--color-heading);
	font-weight: 600;
}

.accordion__desc {
	display: none;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.accordion__chevron {
	color: var(--color-heading);
	transition: transform 0.2s;
}

.accordion[open] .accordion__chevron {
	transform: rotate(180deg);
}

.accordion__panel {
	padding: var(--space-4);
	border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
	.accordion__desc {
		display: block;
	}
}

/* --------------------------------------------------------------------------
   9. Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb {
	font-size: var(--fs-xs);
	color: var(--color-muted);
}

.breadcrumb__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

/* One line that never widens the page: "Trang chủ" stays whole, the
   current page (repeated in the H1 below) shrinks first, then long middle
   levels ("Thiết bị làm đậu…"). Truncation is visual only; the full text
   stays in the DOM. */
.breadcrumb__item {
	display: flex;
	align-items: center;
	flex-shrink: 1;
	min-width: 0;
	white-space: nowrap;
}

.breadcrumb__item:first-child {
	flex-shrink: 0;
}

.breadcrumb__item:not(:first-child):not(:last-child) {
	flex-shrink: 1;
	min-width: 4em;
}

.breadcrumb__item:last-child {
	flex-shrink: 8;
	min-width: 4em;
}

/* Kept after the rules above (same specificity): short labels stay whole. */
.breadcrumb__item.breadcrumb__item--fixed:not(:last-child) {
	flex-shrink: 0;
	min-width: auto;
}

.breadcrumb__item > a,
.breadcrumb__item > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.breadcrumb__item:last-child span {
	color: var(--color-text);
}

.breadcrumb__item + .breadcrumb__item::before {
	content: "›";
	margin-inline: var(--space-2);
	color: var(--color-muted);
}

.breadcrumb a {
	color: var(--color-muted);
}

@media (min-width: 1024px) {
	.breadcrumb {
		font-size: var(--fs-sm);
	}
}

/* --------------------------------------------------------------------------
   10. Logo (official image assets/img/logo-amankong.png; .logo__mark is the old text fallback)
   -------------------------------------------------------------------------- */
.logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	min-height: var(--tap);
	text-decoration: none;
}

.logo:hover {
	text-decoration: none;
}

.logo__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5em 1.15em;
	border-radius: 50%;
	background: var(--color-brand);
	color: var(--color-on-brand);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.logo img {
	width: auto;
	max-height: 40px;
}

@media (min-width: 1024px) {
	.logo__mark {
		font-size: 1.125rem;
	}

	.logo img {
		max-height: 48px;
	}
}

/* --------------------------------------------------------------------------
   11. Header
   Mobile/tablet: menu | logo (centred) | search icon.
   Desktop (>=1024): logo | nav | search field | account button.
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

.admin-bar .site-header {
	top: 46px;
}

@media (min-width: 783px) {
	.admin-bar .site-header {
		top: 32px;
	}
}

.site-header__inner {
	display: grid;
	grid-template-columns: var(--tap) 1fr var(--tap);
	align-items: center;
	min-height: var(--header-h);
	gap: var(--space-2);
}

.site-header__inner > .logo {
	justify-self: center;
}

.primary-nav {
	display: none;
}

/* Mobile search panel drops below the bar when toggled. */
.site-header__search {
	display: none;
	grid-column: 1 / -1;
	grid-row: 2;
	padding-bottom: var(--space-3);
}

.site-header__search.is-open {
	display: block;
}

.site-header__search-btn {
	grid-column: 3;
	grid-row: 1;
}

/* Language switcher: in the drawer on mobile, in the bar from desktop. */
.lang-switch__list {
	display: flex;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lang-switch__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 32px;
	padding: 0 var(--space-2);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}

.lang-switch__link.is-current {
	background: var(--color-cta-soft);
}

.lang-switch--header {
	display: none;
}

.lang-switch--drawer {
	margin-top: var(--space-4);
}

/* Full menu from 1024 px (PC Kit V1 PC1, was 1100): the header compacts itself by real width (site.js .hd-c1–c4); below, ☰ + drawer. */
@media (min-width: 1024px) {
	.site-header__inner {
		display: flex;
		gap: var(--space-4);
	}

	.site-header__menu-btn,
	.site-header__search-btn {
		display: none;
	}

	.lang-switch--header {
		display: block;
	}

	.primary-nav {
		display: block;
		flex: 1;
		min-width: 0;
	}

	.site-header__search {
		display: block;
		flex-shrink: 1;
		width: clamp(180px, 22vw, 300px);
		padding: 0;
	}
}

.primary-nav__list {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1280px) {
	.primary-nav__list {
		gap: var(--space-5);
	}
}

.primary-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
	white-space: nowrap;
}

.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a {
	color: var(--color-brand);
	text-decoration: none;
}

/* Search form */
.search-form {
	position: relative;
	display: flex;
	align-items: center;
}

.search-form__input {
	width: 100%;
	min-height: var(--tap);
	padding: 0 var(--tap) 0 var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg-soft);
	color: var(--color-text);
	font: inherit;
	font-size: var(--fs-base); /* 16px prevents iOS zoom on focus */
}

.search-form__input::placeholder {
	color: var(--color-muted);
}

.search-form__submit {
	position: absolute;
	right: 0;
	display: grid;
	place-items: center;
	width: var(--tap);
	height: var(--tap);
	border: 0;
	background: transparent;
	color: var(--color-heading);
	cursor: pointer;
}

@media (min-width: 1024px) {
	.search-form__input {
		min-height: 40px;
		font-size: var(--fs-sm);
	}

	.search-form__submit {
		height: 40px;
	}
}

/* --------------------------------------------------------------------------
   12. Drawer (mobile menu)
   -------------------------------------------------------------------------- */
.drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
}

.drawer[hidden] {
	display: none;
}

.drawer__overlay {
	position: absolute;
	inset: 0;
	background: var(--color-overlay);
}

.drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	width: min(320px, 86vw);
	padding: var(--space-3) var(--gutter) var(--space-5);
	background: var(--color-surface);
	overflow-y: auto;
}

.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.drawer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.drawer__list a {
	display: flex;
	align-items: center;
	min-height: 48px;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-heading);
	font-weight: 500;
}

.drawer__list .current-menu-item > a {
	color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   13. CTA box
   -------------------------------------------------------------------------- */
.cta-box {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-cta-soft);
}

.cta-box__body {
	display: flex;
	gap: var(--space-3);
}

.cta-box__title {
	margin: 0 0 var(--space-1);
	color: var(--color-heading);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: var(--lh-tight);
}

.cta-box__text {
	margin: 0;
	color: var(--color-muted-strong);
}

.cta-box__actions {
	display: grid;
	gap: var(--space-2);
}

.cta-box__icon .icon {
	width: 36px;
	height: 36px;
	color: var(--color-zalo);
}

.cta-box--wide .cta-box__title {
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.cta-box--wide {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-6);
	}

	.cta-box--wide .cta-box__actions {
		grid-auto-flow: column;
		gap: var(--space-3);
	}

	.cta-box--wide .btn {
		min-height: 48px;
		padding-inline: var(--space-6);
	}
}

.cta-box--aside {
	border: 1px solid var(--color-border);
	background: var(--color-surface);
}

.cta-box--aside .cta-box__actions {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.cta-box--aside .btn {
	padding-inline: var(--space-2);
	font-size: var(--fs-sm);
	white-space: nowrap;
}

.cta-box--aside .btn .icon {
	display: none;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
	padding-block: var(--space-6);
	background: var(--color-footer-bg);
	color: var(--color-footer-text);
	font-size: var(--fs-sm);
}

.site-footer__inner {
	display: grid;
	gap: var(--space-5);
	justify-items: center;
	text-align: center;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

.site-footer__company p {
	margin: 0;
}

.site-footer__company-name {
	color: var(--color-footer-heading);
	font-weight: 600;
	text-transform: uppercase;
}

.site-footer__company .site-footer__line {
	margin-top: var(--space-1);
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

.site-footer__line a {
	color: inherit;
}

.site-footer__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__list {
	column-gap: var(--space-4);
}

/* Pipe separators only where the list stays on one line. */
@media (min-width: 1024px) {
	.site-footer__list {
		column-gap: 0;
	}

	.site-footer__list li + li::before {
		content: "|";
		margin-inline: var(--space-1);
		opacity: 0.5;
	}
}

.site-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding-inline: var(--space-1);
	color: var(--color-footer-text);
}

.site-footer__list a:hover {
	color: #fff;
}

.site-footer__meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
}

.site-footer__slogan {
	margin: 0;
	font-size: var(--fs-xs);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: var(--space-2) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-xs);
}

.site-footer__legal a {
	color: inherit;
}

.social-links {
	display: flex;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-links__item {
	display: grid;
	place-items: center;
	width: var(--tap);
	height: var(--tap);
	color: #fff;
}

.social-links__item .icon {
	width: 26px;
	height: 26px;
}

@media (min-width: 1024px) {
	.site-footer__inner {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"brand nav"
			"brand meta";
		align-items: center;
		gap: var(--space-2) var(--space-6);
		text-align: left;
	}

	.site-footer__brand {
		grid-area: brand;
		flex-direction: row;
	}

	.site-footer__nav {
		grid-area: nav;
		justify-self: end;
	}

	.site-footer__meta {
		grid-area: meta;
		flex-direction: row;
		justify-self: end;
		gap: var(--space-4);
	}
}

/* --------------------------------------------------------------------------
   15. Fixed mobile bar (bottom nav or CTA bar) — hidden from 1024px
   -------------------------------------------------------------------------- */
.mobile-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--z-bar);
	min-height: var(--mobile-bar-h);
	padding-bottom: env(safe-area-inset-bottom, 0);
	background: var(--color-surface);
	box-shadow: var(--shadow-bar);
	transition: transform 0.2s ease;
}

.mobile-bar.is-hidden {
	transform: translateY(100%);
}

body.has-mobile-bar {
	padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px));
}

.bottom-nav {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border-top: 1px solid var(--color-border);
}

.bottom-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: calc(var(--mobile-bar-h) - 1px); /* 1px border-top */
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-muted);
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
}

.bottom-nav__item:hover {
	text-decoration: none;
}

.bottom-nav__item.is-active {
	color: var(--color-brand);
}

.bottom-nav__item .icon {
	width: 22px;
	height: 22px;
}

/* 1–3 buttons: secondary ones (Gọi / Zalo / WhatsApp) size to content,
   the consult button takes the rest. */
.cta-bar {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding-inline: var(--gutter);
	padding-top: var(--space-2);
	padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
}

.cta-bar .btn {
	flex: 0 0 auto;
	padding-inline: var(--space-3);
}

.cta-bar .cta-bar__consult {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
}

/* Three buttons on a narrow phone: Gọi / Zalo / WhatsApp become 44px
   icon buttons; their label stays for screen readers. */
@media (max-width: 399.98px) {
	.cta-bar--compact .btn:not(.cta-bar__consult) {
		width: var(--tap);
		padding: 0;
	}

	.cta-bar--compact .cta-bar__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* Kept after the bar variants so it wins over their display value. */
@media (min-width: 1024px) {
	.mobile-bar {
		display: none;
	}

	body.has-mobile-bar {
		padding-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
   16. Homepage (front-page.php) — only what the shared primitives lack
   -------------------------------------------------------------------------- */

/* Hero: mobile = visual on top, then copy + CTAs; points from 1024px. */
/* Navy with depth so the real machine photo stands out (5.5). */
.hero {
	background:
		radial-gradient(120% 90% at 85% 10%, rgba(31, 111, 178, 0.28), transparent 60%),
		linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-2) 55%, var(--color-navy) 100%);
	background-color: var(--color-hero-bg);
	color: var(--color-hero-text);
	overflow: hidden;
}

.hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	padding-block: var(--space-5) var(--space-6);
}

.hero__media {
	order: -1;
	justify-self: center;
}

.hero__media img {
	width: auto;
	height: 160px;
	/* Soft side/bottom fade so the photo sits in the dark hero, no hard frame. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, #000 80%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, #000 80%, transparent);
	mask-composite: intersect;
}

/* Condensed bold caps, 3 even lines (ref-1): 23 px phones, 40 px desktop. */
.hero__title {
	margin: 0 0 var(--space-3);
	color: var(--color-hero-text);
	font-family: var(--font-display);
	font-size: var(--fs-display);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: uppercase;
}

.hero__title span {
	display: block;
}

.hero__text {
	max-width: 46ch;
	margin-bottom: var(--space-4);
	color: var(--color-hero-muted);
	font-size: var(--fs-base);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.hero__actions .btn {
	flex: 1 1 auto;
	padding-inline: var(--space-3);
	font-size: var(--fs-sm);
}

.hero__points {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.hero__inner {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		align-items: center;
		padding-block: var(--space-7);
	}

	.hero__inner--no-media {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero__media {
		order: 0;
	}

	.hero__media img {
		height: 280px;
	}

	.hero__title {
		font-size: var(--fs-display);
	}

	.hero__text {
		margin-bottom: var(--space-5);
		font-size: var(--fs-base);
	}

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

	.hero__actions .btn {
		flex: 0 0 auto;
		padding-inline: var(--space-5);
		font-size: var(--fs-base);
	}
}

@media (min-width: 1024px) {
	.hero__inner {
		grid-template-columns: minmax(0, 1fr) auto 210px;
		gap: var(--space-6);
		min-height: 420px;
	}

	.hero__inner--no-media {
		grid-template-columns: minmax(0, 1fr) 210px;
	}

	/* 5.5: bigger, bolder headline (32–46 px); long lines may wrap. */
	.hero__title {
		font-size: var(--fs-display);
	}

	.hero__media img {
		height: 300px;
	}

	.hero__points {
		display: grid;
		gap: var(--space-4);
		font-size: var(--fs-sm); /* 14 */
		line-height: 1.4;
	}

	.hero__points li {
		display: flex;
		align-items: center;
		gap: var(--space-3);
	}

	.hero__point-icon {
		display: grid;
		place-items: center;
		flex-shrink: 0;
		width: 36px;
		height: 36px;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 50%;
		background: rgba(31, 111, 178, 0.35);
		color: #ffffff;
	}

	.hero__points li {
		font-weight: 600;
	}

	.hero__point-icon .icon {
		width: 18px;
		height: 18px;
	}
}

@media (min-width: 1280px) {
	.hero__media img {
		height: 340px;
	}
}

/* Hero video card (video-first homepage). Overrides the masked machine photo. */
.hero__media--video {
	justify-self: stretch;
	width: 100%;
}

.hero-video {
	display: grid;
	gap: var(--space-1);
	color: var(--color-hero-text);
	text-decoration: none;
}

.hero-video__frame {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--color-media-bg);
	box-shadow: var(--shadow-raised);
}

.hero__media--video .hero-video__frame img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	-webkit-mask-image: none;
	mask-image: none;
}

.hero-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--color-brand);
	color: #fff;
	transform: translate(-50%, -50%);
	transition: transform 0.15s ease;
}

.hero-video__play .icon {
	width: 26px;
	height: 26px;
	margin-left: 4px;
	fill: currentColor;
}

.hero-video:hover .hero-video__play,
.hero-video:focus-visible .hero-video__play {
	transform: translate(-50%, -50%) scale(1.08);
}

.hero-video:focus-visible {
	outline: 2px solid var(--color-hero-text);
	outline-offset: 4px;
	border-radius: var(--radius);
}

.hero-video__duration {
	position: absolute;
	right: var(--space-2);
	bottom: var(--space-2);
	padding: 2px var(--space-2);
	border-radius: var(--radius-sm);
	background: var(--color-badge-bg);
	font-size: var(--fs-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.hero-video__label {
	margin-top: var(--space-2);
	color: var(--color-hero-muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hero-video__title {
	font-weight: 600;
	line-height: 1.25;
}

@media (min-width: 1024px) {
	.hero__media--video {
		width: clamp(320px, 30vw, 440px);
	}


}

@media (prefers-reduced-motion: reduce) {
	.hero-video__play {
		transition: none;
	}
}

/* Hero with the Settings photo (round 1b, ref-1): the photo fills the whole hero,
   a navy fade from the left keeps the white text readable, value points sit on
   the photo at the right. Phones: photo under a top-to-bottom fade, text on top. */
.hero--bg {
	position: relative;
	isolation: isolate;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-pos, center);
}

.hero--bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(15, 30, 51, 0.62) 0%, rgba(15, 30, 51, 0.9) 70%);
}

.hero__inner--bg {
	padding-block: var(--space-7) var(--space-6);
}

@media (min-width: 768px) {
	.hero--bg::before {
		background: linear-gradient(90deg, rgba(15, 30, 51, 0.94) 0%, rgba(15, 30, 51, 0.82) 40%, rgba(15, 30, 51, 0.35) 72%, rgba(15, 30, 51, 0.2) 100%);
	}

	.hero__inner--bg {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1024px) {
	.hero__inner--bg {
		grid-template-columns: minmax(0, 1fr) 250px;
		min-height: 400px;
	}

	/* Points on the photo: a dark glass panel keeps them readable on any image. */
	.hero__inner--bg .hero__points {
		align-self: center;
		padding: var(--space-4);
		border: 1px solid rgba(255, 255, 255, 0.14);
		border-radius: var(--radius);
		background: rgba(15, 30, 51, 0.62);
	}
}

/* Trust strip: 4 icon columns on mobile, icon + two lines from 768px. */
.trust {
	border-bottom: 1px solid var(--color-border);
}

.trust__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-4) 0;
	list-style: none;
}

.trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	text-align: center;
}

.trust__icon {
	color: var(--color-steel);
}

.trust__icon .icon {
	width: 26px;
	height: 26px;
}

.trust__text strong {
	display: block;
	color: var(--color-heading);
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1.25;
}

.trust__text span {
	display: none;
	color: var(--color-muted);
	font-size: var(--fs-xs);
}

@media (min-width: 768px) {
	.trust__item {
		flex-direction: row;
		gap: var(--space-3);
		text-align: left;
	}

	.trust__text strong {
		font-size: var(--fs-sm);
	}

	.trust__text span {
		display: block;
	}
}

@media (min-width: 1024px) {
	.trust__list {
		padding-block: var(--space-5);
	}

	.trust__icon .icon {
		width: 32px;
		height: 32px;
	}
}

/* Homepage group row (ref-1): small cards, photo on a light frame, name + blue link. */
.card--group .media {
	background: var(--color-bg-soft);
}

.card--group .card__body {
	gap: 2px;
	padding: var(--space-2) var(--space-3) var(--space-3);
}

/* 7 columns at 1366 = ~160 px cards: the longest name ("Thiết bị làm đậu phụ & sữa đậu nành")
   needs 3 lines — never cut a category name; 2-line space reserved so the row stays aligned. */
.card--group .card__title {
	-webkit-line-clamp: 3;
	min-height: 2.7em;
}

.card--group .card__meta {
	margin-top: auto;
}

.card--group .media__empty {
	color: var(--color-steel);
}

.card--group .media__empty .icon {
	width: 36px;
	height: 36px;
	opacity: 0.55;
}

.card--group .card__link {
	padding-top: 0;
	font-size: var(--fs-xs);
}

/* Why AMANKONG feature row. */
.why__list {
	margin: 0;
	padding: 0;
	list-style: none;
	row-gap: var(--space-5);
}

.feature__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--space-3);
	border-radius: 50%;
	background: var(--color-brand-soft);
	color: var(--color-brand);
}

.feature__title {
	margin: 0 0 var(--space-1);
	font-size: var(--fs-base);
}

.feature__text {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   17. Product catalog (page-san-pham.php)
   -------------------------------------------------------------------------- */
.catalog__title {
	margin-top: var(--space-3);
}

.catalog__intro {
	margin-bottom: var(--space-5);
}

/* Phones: 2 compact columns — name + count link, description hidden. */
@media (max-width: 767.98px) {
	.catalog__grid .card__desc,
	.catalog__grid .card__link-label {
		display: none;
	}

	/* "12 sản phẩm →" instead of "Xem sản phẩm (12) →". */
	.catalog__grid .card__link {
		color: var(--color-muted);
		white-space: nowrap;
	}

	.catalog__grid .card__count::before,
	.catalog__grid .card__count::after {
		content: none;
	}

	.catalog__grid .card__count-unit {
		display: inline;
	}

	.catalog__intro {
		font-size: var(--fs-sm);
	}
}

/* --------------------------------------------------------------------------
   18. Video detail (single-video.php)
   Below 1024px .vd__main/.vd__aside dissolve (display: contents) and the
   blocks follow the mobile reference order; from 1024px: main + sidebar.
   -------------------------------------------------------------------------- */
.video-detail {
	padding-bottom: var(--space-6);
}

.vd__crumbs {
	padding-block: var(--space-3);
}

.vd {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.vd__main,
.vd__aside {
	display: contents;
}

/* Phones (sketch V1 ảnh 10): video → series → topics → other videos → products → consult. */
.vd__top { order: 1; }
.vd__series { order: 2; }
.vd__topics { order: 3; }
.vd__aside > .video-list,
.vd__related { order: 4; }
.vd__discovery { order: 5; }
.vd__cta { order: 6; }

@media (min-width: 1024px) {
	.vd {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: var(--space-6);
		align-items: start;
	}

	.vd__main,
	.vd__aside {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	/* Columns follow DOM order again (series → CTA → topics in the sidebar). */
	.vd__main > *,
	.vd__aside > * {
		order: 0;
	}

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

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

/* Narrow desktops: the main column is ~570px, so 4-up cards become 2×2. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.vd__main .grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Player (16:9 via .media). */
.player__frame {
	border-radius: var(--radius);
	background: var(--color-heading);
}

.player__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-brand);
	color: #fff;
	box-shadow: var(--shadow-raised);
	transform: translate(-50%, -50%);
}

button.player__play {
	cursor: pointer;
}

button.player__play:hover {
	background: var(--color-brand-hover);
}

.player__play .icon {
	width: 26px;
	height: 26px;
	margin-left: 4px;
	fill: currentColor;
}

.player__duration {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	padding: 2px var(--space-2);
	border-radius: var(--radius-sm);
	background: var(--color-badge-bg);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.player__notice {
	position: absolute;
	bottom: var(--space-3);
	left: var(--space-3);
	padding: 2px var(--space-2);
	border-radius: var(--radius-sm);
	background: var(--color-badge-bg);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 600;
}

.player__empty {
	gap: var(--space-2);
	align-content: center;
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--fs-sm);
}

@media (min-width: 768px) {
	.player__play {
		width: 76px;
		height: 76px;
	}

	.player__play .icon {
		width: 32px;
		height: 32px;
	}
}

/* Title, meta, share. */
.vd__title {
	margin: var(--space-4) 0 var(--space-2);
	font-size: 1.25rem;
}

.vd__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	margin-bottom: var(--space-4);
}

.vd__meta {
	margin: 0;
}

@media (min-width: 1024px) {
	.vd__title {
		font-size: 1.5rem;
	}
}

/* Accordion bodies. */
.accordion__panel > :last-child {
	margin-bottom: 0;
}

.accordion__panel ol,
.accordion__panel ul:not([class]) {
	padding-left: var(--space-5);
}

.spec-list {
	margin: 0;
}

.spec-list__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-3);
	padding-block: var(--space-2);
	border-bottom: 1px solid var(--color-border);
}

.spec-list__row:last-child {
	border-bottom: 0;
}

.spec-list dt {
	color: var(--color-muted);
}

.spec-list dd {
	margin: 0;
	color: var(--color-heading);
	font-weight: 600;
}

.doc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.doc-list__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-2);
	border-bottom: 1px solid var(--color-border);
}

.doc-list__item:last-child {
	border-bottom: 0;
}

.doc-list .file-icon {
	width: 32px;
	height: 40px;
	font-size: 0.75rem;
}

.doc-list__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.doc-list__text a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: var(--color-heading);
	font-weight: 500;
}

.doc-list__access {
	color: var(--color-muted);
	font-size: var(--fs-xs);
}

/* Series list. */
.series__list {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.series__item {
	position: relative;
	display: grid;
	grid-template-columns: 18px 88px minmax(0, 1fr) 24px;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2);
	border-radius: var(--radius);
}

.series__item:hover {
	background: var(--color-bg-soft);
}

.series__item.is-current {
	background: var(--color-brand-soft);
}

.series__num {
	color: var(--color-muted);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.series__thumb {
	border-radius: var(--radius-sm);
}

.series__thumb .media__badge {
	right: 3px;
	bottom: 3px;
	padding: 0 4px;
	font-size: 0.75rem;
}

.series__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.series__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.25;
}

a.series__title:hover {
	color: var(--color-brand);
	text-decoration: none;
}

.is-current .series__title {
	color: var(--color-brand-strong);
	font-weight: 600;
}

.series__meta {
	color: var(--color-muted);
	font-size: var(--fs-xs);
}

.series__badge {
	color: var(--color-brand-strong); /* AA on the pink "now playing" row */
	font-size: var(--fs-xs);
	font-weight: 600;
}

.series__state {
	display: grid;
	place-items: center;
}

.series__state--viewed {
	color: var(--color-success);
}

.series__state--viewed .icon {
	width: 22px;
	height: 22px;
}

.series__state--current {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-brand);
	color: #fff;
}

.series__state--current .icon {
	width: 12px;
	height: 12px;
	margin-left: 2px;
	fill: currentColor;
}

@media (min-width: 1024px) {
	.series__item {
		grid-template-columns: 18px 96px minmax(0, 1fr) 24px;
	}
}

/* --------------------------------------------------------------------------
   19. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   20. Product Detail (single-san_pham.php) — Unit 05-B6
   -------------------------------------------------------------------------- */
.product-detail {
	padding: 24px 0 48px;
}

.pd__crumbs {
	margin-bottom: 16px;
}

.pd {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.pd__hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.pd__hero-figure {
	margin: 0;
	background: var(--color-surface-2, #f4f4f5);
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.pd__hero-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pd__hero-empty {
	aspect-ratio: 4 / 3;
	background: var(--color-surface-2, #f4f4f5);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pd__thumbs {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.pd__thumbs li {
	background: var(--color-surface-2, #f4f4f5);
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.pd__thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pd__info {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pd__title {
	font-size: 1.5rem; /* 22–26 (ref-1) */
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.pd__identity {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0;
	font-size: 0.875rem; /* 14 px */
	color: var(--color-muted-strong);
}

.pd__identity > div {
	display: flex;
	gap: 6px;
	align-items: baseline;
}

.pd__identity dt {
	font-weight: 700;
	color: var(--color-heading);
	margin: 0;
}

.pd__identity dd {
	margin: 0;
}

.pd__short {
	margin: 4px 0 0;
	color: var(--color-text, #1d1f24);
}

.pd__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 8px 0 0;
	padding: 12px 16px;
	border-left: 4px solid var(--color-brand);
	border-radius: 0 var(--radius-md, 6px) var(--radius-md, 6px) 0;
	background: var(--color-bg-soft);
}

.pd__price-label {
	color: var(--color-steel);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.pd__price-value {
	color: var(--color-brand);
	font-family: var(--font-heading);
	font-size: 1.875rem; /* 28–32 px */
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.pd__price-note {
	flex-basis: 100%;
	margin: 0;
	color: var(--color-muted-strong);
	font-size: var(--fs-sm);
}

.pd__price--contact .pd__price-label {
	color: var(--color-heading);
	font-weight: 600;
}

.pd__cats {
	margin: 4px 0 0;
}

.pd__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.pd__cta .btn {
	min-height: 44px;
}

/* Hotline / WhatsApp: same size as the buttons above, strong outline instead of a hairline. */
.pd__cta .btn--light {
	border: 2px solid var(--color-navy);
	color: var(--color-navy);
}

.pd__cta .btn--light:hover {
	background: var(--color-navy);
	color: #ffffff;
}

@media (min-width: 400px) {
	.pd__cta {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pd__cta .btn:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* Facts strip under the buttons (fills the empty right column on desktop). */
.pd__assure {
	display: grid;
	gap: 10px;
	margin: 20px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--color-border);
	list-style: none;
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.pd__assure li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pd__assure .icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--color-steel);
}

.pd__section-title {
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 16px;
}

/* Editor headings inside the description sit one level below the section title. */
.pd__description-body h2 {
	margin: 1.4em 0 0.5em;
	font-size: var(--fs-h3);
	font-weight: 700;
}

.pd__description-body h3 {
	margin: 1.2em 0 0.4em;
	font-size: 1.125rem;
	font-weight: 700;
}

.pd__specs-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Specs table and description share one readable column width. */
.pd__specs-wrap,
.pd__description-body.prose {
	max-width: 880px;
}

.pd__specs-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 480px;
	font-size: 1rem;
}

.pd__specs-table thead th {
	text-align: left;
	background: var(--color-navy);
	color: #ffffff;
	padding: 10px 12px;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	border-bottom: 0;
}

/* Light zebra rows; the label column is bold. */
.pd__specs-table tbody tr:nth-child(even) th,
.pd__specs-table tbody tr:nth-child(even) td {
	background: var(--color-bg-soft);
}

.pd__specs-table tbody th {
	text-align: left;
	color: var(--color-heading);
	font-weight: 700;
	padding: 10px 12px;
	border-bottom: 1px solid var(--color-border, #e0e0e5);
	background: transparent;
	white-space: nowrap;
}

.pd__specs-table tbody td {
	padding: 10px 12px;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border, #e0e0e5);
	vertical-align: top;
}

/* Value column reads first after the label. */
.pd__specs-table tbody td:first-of-type {
	color: var(--color-heading);
	font-weight: 600;
}

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

.pd__description-body :first-child {
	margin-top: 0;
}

.pd__gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.pd__gallery-item {
	margin: 0;
	background: var(--color-surface-2, #f4f4f5);
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.pd__gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pd__cta-final {
	margin-top: 8px;
}

@media (min-width: 768px) {
	.pd__hero {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: 28px;
	}

	.pd__gallery-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.pd__hero {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		gap: 40px;
	}

	.pd__gallery-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   21. Listing & hub pages (nhóm máy, thư viện, series, tài liệu, tìm kiếm)
   -------------------------------------------------------------------------- */
.term-hero {
	display: grid;
	gap: var(--space-4);
	margin-top: var(--space-3);
}

.term-hero .lead {
	margin-top: var(--space-2);
}

.term-hero__stats {
	margin-top: var(--space-3);
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.term-hero__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-media-bg);
	aspect-ratio: 16 / 9;
}

.term-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.term-series {
	margin-top: var(--space-4);
}

.term-series__label {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-muted);
}

/* Category page without products (owner 02/10): sentence + consult buttons. */
.term-empty__text {
	max-width: 52ch;
	margin: 0 auto var(--space-4);
	color: var(--color-text);
}

.term-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
}

/* "Đang cập nhật" on category cards: neutral label, not a link look. */
.card__status {
	align-self: flex-start;
	margin-top: auto;
	padding: 2px var(--space-2);
	border-radius: var(--radius-pill);
	background: var(--color-bg-soft);
	color: var(--color-muted-strong);
	font-size: var(--fs-xs);
	font-weight: 600;
}

.empty-state__action {
	margin: var(--space-4) 0 0;
	text-align: center;
}

.empty-state {
	margin: 0;
	padding: var(--space-6) var(--space-4);
	text-align: center;
	color: var(--color-muted);
	background: var(--color-bg-soft);
	border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
	.term-hero--media {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--space-6);
	}
}

.listing-page__title {
	margin-top: var(--space-3);
}

.listing-page__tabs {
	margin-top: var(--space-4);
}

.listing-page__grid {
	margin-top: var(--space-5);
}

.listing-page .empty-state {
	margin-top: var(--space-5);
}

/* Page numbers (the_posts_pagination). Tap targets ≥ 44px. */
.pagination {
	margin-top: var(--space-6);
}

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

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
	text-decoration: none;
	font-size: var(--fs-sm);
}

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

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

.pagination .page-numbers.dots {
	border-color: transparent;
}

/* Document detail (single-tai_lieu.php) */
.doc-detail {
	display: grid;
	gap: var(--space-5);
	margin-top: var(--space-3);
}

.doc-detail__media {
	display: grid;
	place-items: center;
	min-height: 180px;
	border-radius: var(--radius-lg);
	background: var(--color-bg-soft);
	overflow: hidden;
}

.doc-detail__media img {
	width: 100%;
	height: auto;
	display: block;
}

.doc-detail__icon {
	width: 88px;
	height: 108px;
	font-size: 0.875rem;
	border-radius: var(--radius);
}

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

.doc-detail__info .page-title {
	margin: 0;
}

.doc-detail__type {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--color-brand);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.doc-detail__access {
	cursor: default;
}

.doc-detail__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

.doc-detail__actions .btn {
	min-height: 44px;
}

.doc-detail__note {
	flex-basis: 100%;
	margin: 0;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.doc-detail__content {
	margin-top: var(--space-4);
}

@media (min-width: 768px) {
	.doc-detail {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		align-items: start;
		gap: var(--space-6);
	}
}

/* Series page + generic term / search groups */
.series-page__eyebrow {
	margin: var(--space-3) 0 var(--space-1);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--color-brand);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.series-page__list {
	max-width: 820px;
	margin-top: var(--space-5);
	padding: var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.listing-group {
	margin-top: var(--space-6);
}

.listing-group__title {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-h2);
}

.listing-group__pages {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-3);
}

.listing-group__pages a {
	font-weight: 600;
}

.listing-group__pages p {
	margin: var(--space-1) 0 0;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

/* Search + 404 */
.search-page__form {
	max-width: 560px;
	margin-top: var(--space-4);
}

.search-page__count {
	margin-top: var(--space-4);
	color: var(--color-muted);
}

.search-page__empty {
	margin-top: var(--space-5);
}

/* =====================================================================
   21b. Giải pháp + Về chúng tôi pages
   ===================================================================== */

.solutions-page__lead,
.about-page__lead {
	max-width: 62ch;
}

.solutions-page__intro {
	margin-top: var(--space-4);
}

.solutions {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 1024px) {
	.solutions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.solution {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-top: 4px solid var(--color-brand);
	border-radius: var(--radius);
	background: var(--color-surface);
}

.solution__label {
	margin: 0;
	color: var(--color-brand);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.solution__title {
	margin: 0;
	color: var(--color-heading);
	font-size: var(--fs-lg, 1.125rem);
	line-height: 1.25;
}

.solution__fit {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.solution__points {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.solution__points li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--fs-sm);
}

.solution__points .icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--color-success);
}

.solution__groups {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	margin: 0;
	font-size: var(--fs-sm);
}

.solution__groups span {
	color: var(--color-muted);
}

.solution__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-2);
}

.solutions__extra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-5);
	padding: var(--space-5);
	border-radius: var(--radius);
	background: var(--color-bg-soft);
}

.solutions__extra-title {
	margin: 0 0 var(--space-1);
	font-size: var(--fs-lg, 1.125rem);
}

.solutions__extra p {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.about-pillars {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.about-pillars {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.about-pillars {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.about-pillar {
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
}

.about-pillar__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--space-3);
	border-radius: 50%;
	background: var(--color-brand-soft);
	color: var(--color-brand);
}

.about-pillar__title {
	margin: 0 0 var(--space-1);
	color: var(--color-heading);
	font-weight: 700;
}

.about-pillar__text {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.about-page__story {
	max-width: 70ch;
	margin-top: var(--space-3);
}

.about-page__groups {
	margin-top: var(--space-3);
}

/* =====================================================================
   22. Lead request form + contact page (docs/13)
   ===================================================================== */

.contact-page__grid {
	display: grid;
	gap: var(--space-5);
	margin-top: var(--space-5);
}

.contact-page__form {
	min-width: 0;
}

.contact-page__direct {
	display: grid;
	gap: var(--space-3);
	align-content: start;
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg-soft);
}

.contact-page__direct-title {
	margin: 0;
	color: var(--color-heading);
	font-weight: 600;
}

.contact-page__line {
	margin: 0;
}

@media (min-width: 1024px) {
	.contact-page__grid {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

.lead-form {
	max-width: 720px;
}

.lead-form__form {
	display: grid;
	gap: var(--space-4);
}

.lead-form__source {
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	background: var(--color-cta-soft);
	font-size: var(--fs-sm);
}

.lead-form__hint {
	margin: 0 0 var(--space-4);
	font-size: var(--fs-sm);
}

.lead-form__row {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 768px) {
	.lead-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.lead-form__field,
.lead-form__group {
	display: grid;
	gap: var(--space-2);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.lead-form__label {
	padding: 0;
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.lead-form__req {
	color: var(--color-brand);
}

.lead-form__input {
	width: 100%;
	min-height: var(--tap);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
	font-size: var(--fs-base); /* 16px prevents iOS zoom on focus */
}

.lead-form__textarea {
	min-height: 96px;
	resize: vertical;
}

.lead-form__input:focus,
.lead-form__type input:focus-visible + span,
.lead-form__check input:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
}

.lead-form__types {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.lead-form__type {
	position: relative;
}

.lead-form__type input {
	position: absolute;
	opacity: 0;
}

.lead-form__type span {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0 var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--fs-sm);
	cursor: pointer;
}

.lead-form__type input:checked + span {
	border-color: var(--color-brand);
	background: var(--color-brand-soft);
	color: var(--color-brand-strong); /* AA on the pink tint */
	font-weight: 600;
}

.lead-form__check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	min-height: var(--tap);
	padding-top: var(--space-2);
	font-size: var(--fs-sm);
	cursor: pointer;
}

.lead-form__check input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--color-brand);
}

.lead-form__inline {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--space-4);
}

.lead-form__zalo {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

.lead-form__more {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.lead-form__more summary {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0 var(--space-4);
	color: var(--color-link);
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
}

.lead-form__more-body {
	display: grid;
	gap: var(--space-4);
	padding: 0 var(--space-4) var(--space-4);
}

.lead-form__extras {
	display: grid;
	gap: var(--space-1);
}

.lead-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lead-form__alert {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	background: var(--color-brand-soft);
	color: var(--color-brand-hover);
	font-size: var(--fs-sm);
}

.lead-form .has-error .lead-form__input,
.lead-form .has-error.lead-form__types .lead-form__type span {
	border-color: var(--color-brand);
}

.lead-form__done {
	padding: var(--space-5);
	border-radius: var(--radius);
	background: var(--color-cta-soft);
}

.lead-form__done-title {
	margin: 0 0 var(--space-2);
	color: var(--color-heading);
	font-size: var(--fs-lg, 1.125rem);
	font-weight: 700;
}

.search-page__empty p {
	margin: 0 0 var(--space-3);
}

.quick-links {
	justify-content: center;
	margin-top: var(--space-4);
}

.not-found__inner {
	max-width: 640px;
	text-align: center;
}

.not-found__inner .search-page__form {
	margin-inline: auto;
}

.not-found__code {
	margin: 0;
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   22. Knowledge (home.php / category.php / single.php — WordPress posts)
   -------------------------------------------------------------------------- */
.card--post .media > img {
	object-fit: cover;
}

.card--post .card__title {
	font-size: var(--fs-base);
}

/* No featured image: compact text card (no empty grey frame on phones). */
.card--post-text {
	border-top: 3px solid var(--color-brand);
}

.card--post .card__desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--fs-sm);
}

.article-page {
	padding-top: var(--space-3);
	padding-bottom: var(--space-6);
}

/* One comfortable reading column; related products and CTA use full width. */
.article {
	max-width: 760px;
	margin-inline: auto;
}

.article__title {
	margin: var(--space-4) 0 var(--space-2);
	font-size: var(--fs-h1);
	line-height: 1.25;
}

.article__meta {
	margin-bottom: var(--space-5);
}

/* Category as a small label above the title. */
.article__cat {
	display: inline-block;
	margin-top: var(--space-4);
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--color-cta-soft);
	color: var(--color-steel);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-decoration: none;
	text-transform: uppercase;
}

.article__cat + .article__title {
	margin-top: var(--space-2);
}

.article__head--band {
	margin-bottom: var(--space-5);
	padding: var(--space-4) var(--space-4) var(--space-1);
	border-top: 4px solid var(--color-brand);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	background: var(--color-bg-soft);
}

.article__head--band .article__meta {
	margin-bottom: var(--space-4);
}

.article__hero {
	margin: 0 0 var(--space-5);
}

.article__hero img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

/* Long-read typography (editor content): dark text, ~70 characters per line. */
.article-body {
	max-width: 70ch;
	color: var(--color-text);
	font-size: 1.125rem;
	line-height: 1.65;
	overflow-wrap: break-word;
}

@media (min-width: 1024px) {
	.article-body {
		font-size: 1.125rem; /* 18 px */
	}
}

.article-body > * + * {
	margin-top: 1em;
}

.article-body p {
	margin: 0;
}

.article-body h2,
.article-body h3,
.article-body h4 {
	margin: 1.8em 0 0.6em;
	line-height: 1.25;
}

.article-body h2 {
	margin-top: 2.2em;
	font-size: var(--fs-h2);
}

.article-body h3 {
	font-size: var(--fs-h3);
}

.article-body ul,
.article-body ol {
	padding-left: 1.4em;
}

.article-body li + li {
	margin-top: 0.4em;
}

.article-body a {
	color: var(--color-steel);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.article-body a:hover {
	color: var(--color-navy);
	text-decoration-thickness: 2px;
}

.article-body img,
.article-body video {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.article-body figure {
	margin-inline: 0;
}

.article-body figcaption {
	margin-top: var(--space-2);
	color: var(--color-muted);
	font-size: var(--fs-sm);
	text-align: center;
}

.article-body blockquote {
	margin-inline: 0;
	padding: var(--space-3) var(--space-4);
	border-left: 4px solid var(--color-brand);
	background: var(--color-bg-soft);
	border-radius: 0 var(--radius) var(--radius) 0;
}

/* Embedded videos (YouTube via youtube-nocookie) fill the column at 16:9. */
.article-body iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--radius);
}

/* Wide tables scroll inside themselves, never the page. */
.article-body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.article-body th,
.article-body td {
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	text-align: left;
}

.article__related {
	padding-bottom: 0;
}

@media (min-width: 1024px) {
	.article-page {
		padding-top: var(--space-4);
	}
}

/* --------------------------------------------------------------------------
   Touch targets ≥ 44 px on phones (6.2 BUG-E1). Where the row is tight the
   visual size stays and only the hit area grows (::after / padding offset by
   a negative margin); footer links get real 44 px rows. Desktop unchanged.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	/* Chips: 32 px pill + 6 px hit area above and below. Scroll rows get the
	   same room so the hit area is not clipped (no layout shift). */
	.chip::after {
		inset: -7px 0; /* from the padding box: 30 + 14 = 44 px incl. the 1 px border */
	}

	.scroller {
		padding-block: 6px;
		margin-block: -6px;
	}

	/* Wrapped chip rows: 12 px between rows so neighbouring hit areas meet, never overlap. */
	.chips {
		row-gap: 12px;
	}

	/* Article category label (24 px pill). */
	.article__cat {
		position: relative;
		margin-top: 20px;
	}

	.article__cat::after {
		content: "";
		position: absolute;
		inset: -10px 0;
	}

	/* VI / EN. */
	.lang-switch__link {
		min-height: var(--tap);
		min-width: var(--tap);
	}

	/* Breadcrumb: a real 44 px line (a negative-margin hit area gets covered by the
	   H1 / clipped by the title band). Still one line with "…" truncation. */
	.breadcrumb__item > a,
	.breadcrumb__item > span {
		line-height: var(--tap);
	}

	/* Footer contact + legal links: real 44 px rows. */
	.site-footer__line a,
	.site-footer__legal a {
		display: inline-flex;
		align-items: center;
		min-height: var(--tap);
	}

	.site-footer__legal {
		row-gap: 0;
	}
}

.skip-link {
	min-height: var(--tap);
	display: inline-flex;
	align-items: center;
}

/* ==========================================================================
   Layout V1 shared components (sketch docs/ui/phac-thao-v1, lot 1)
   ========================================================================== */

/* C1 "Xem thêm" — clamps only with html.js (no JS = all open). */
.js .collapse--text:not(.is-open) .collapse__body {
	max-height: calc(var(--collapse-lines, 4) * 1.65em);
	max-height: calc(var(--collapse-lines, 4) * 1lh);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(#000 55%, transparent);
	mask-image: linear-gradient(#000 55%, transparent);
}

.js .collapse--list:not(.is-open) .collapse__extra {
	display: none;
}

html:not(.js) .collapse__toggle {
	display: none;
}

.collapse__toggle {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	min-height: 40px;
	margin: var(--space-3) auto 0;
	padding: 0 var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-heading);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
}

.collapse__toggle:hover {
	border-color: var(--color-border-strong);
}

.collapse__toggle .icon {
	width: 16px;
	height: 16px;
	transition: transform 0.15s;
}

.collapse__toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

/* C3 shelves: one row that scrolls sideways (16:9 cards, or 9:16 shorts). */
.shelf + .shelf {
	margin-top: var(--space-6);
}

.shelf__row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 72%;
	gap: var(--space-3);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	margin-inline: calc(var(--gutter) * -1);
	padding: 2px var(--gutter) var(--space-2);
}

.shelf__row > * {
	scroll-snap-align: start;
}

.shelf--short .shelf__row {
	grid-auto-columns: 40%;
}

.card--short .media {
	aspect-ratio: 9 / 16;
}

@media (min-width: 768px) {
	.shelf__row {
		grid-auto-columns: calc((100% - 2 * var(--space-3)) / 3);
		margin-inline: 0;
		padding-inline: 0;
	}

	.shelf--short .shelf__row {
		grid-auto-columns: calc((100% - 4 * var(--space-3)) / 5);
	}
}

@media (min-width: 1024px) {
	.shelf__row {
		grid-auto-columns: calc((100% - 3 * var(--space-4)) / 4);
		gap: var(--space-4);
	}

	.shelf--short .shelf__row {
		grid-auto-columns: calc((100% - 5 * var(--space-4)) / 6);
	}
}

/* C6 document rows. */
.doc-row {
	min-height: 64px;
}

.doc-row .card__title {
	-webkit-line-clamp: 2;
}

.file-icon--pdf {
	background: var(--color-brand-soft);
	color: var(--color-brand-strong);
}

.file-icon--doc {
	background: var(--color-bg-soft);
	color: var(--color-steel);
}

.file-icon--doc .icon {
	width: 22px;
	height: 22px;
}

.file-icon--dwg,
.file-icon--dxf {
	background: var(--color-cta-soft);
	color: var(--color-steel);
}

.doc-row__access {
	margin-left: var(--space-1);
	padding: 0 var(--space-2);
	border-radius: var(--radius-pill);
	background: var(--color-bg-soft);
	color: var(--color-muted-strong);
	font-size: var(--fs-xs);
	font-weight: 600;
}

.doc-row__action {
	flex-shrink: 0;
	margin-left: auto;
	color: var(--color-success);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.doc-row--paid .doc-row__action {
	color: var(--color-brand-strong);
}

.doc-row--preview .doc-row__action {
	color: var(--color-steel);
}

/* C7 category navigation: sidebar on desktop, chips on phones. */
.cat-nav--sidebar {
	display: none;
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
}

.cat-nav__title {
	margin: 0 0 var(--space-2);
	color: var(--color-muted-strong);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.cat-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cat;
}

.cat-nav__link {
	display: flex;
	gap: var(--space-1);
	padding: 6px 0;
	color: var(--color-heading);
	font-weight: 600;
	counter-increment: cat;
}

.cat-nav__link::before {
	content: counter(cat) ".";
}

.cat-nav__item.is-empty .cat-nav__link {
	color: var(--color-muted);
	font-weight: 500;
}

.cat-nav__link.is-current,
.cat-nav__group.is-current {
	color: var(--color-brand-strong);
	font-weight: 700;
}

.cat-nav__count {
	color: var(--color-muted);
	font-weight: 400;
}

.cat-nav__groups {
	margin: 0 0 var(--space-1) var(--space-4);
	padding: 0;
	list-style: none;
}

.cat-nav__group {
	display: block;
	padding: 3px 0;
	font-size: var(--fs-sm);
}

.chip--empty {
	color: var(--color-muted);
}

@media (min-width: 1024px) {
	.cat-nav--sidebar {
		display: block;
	}

	.cat-nav--phone {
		display: none;
	}
}

/* C9 sticky section tabs (product page). */
.tabbar {
	position: sticky;
	top: var(--header-h);
	z-index: calc(var(--z-header) - 1);
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

.tabbar__list {
	margin-block: 0;
	list-style: none;
	gap: 0;
}

.tabbar__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: var(--tap);
	padding: 0 var(--space-3);
	border-bottom: 2px solid transparent;
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
	white-space: nowrap;
}

.tabbar__link[aria-current] {
	border-bottom-color: var(--color-brand);
	color: var(--color-brand-strong);
}

.tabbar__count {
	color: var(--color-muted);
	font-weight: 400;
}

/* html already pads for the header (scroll-padding-top); add the tab bar only. */
.tabbar ~ * [id] {
	scroll-margin-top: calc(var(--tap) + var(--space-2));
}

/* C8 "Sản phẩm ▾" panel. */
.site-header__inner {
	position: relative;
}

.menu-item--products {
	display: flex;
	align-items: center;
}

.menu-toggle {
	display: inline-grid;
	place-items: center;
	width: 28px;
	min-height: var(--tap);
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-heading);
	cursor: pointer;
}

.menu-toggle .icon {
	width: 16px;
	height: 16px;
	transition: transform 0.15s;
}

.menu-toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.primary-nav .menu-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: calc(var(--z-header) + 1);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: 0 0 var(--radius) var(--radius);
	background: var(--color-surface);
	box-shadow: var(--shadow-raised);
}

.menu-panel__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-4) var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav .menu-panel a {
	min-height: 32px;
}

.primary-nav .menu-panel__cat-link {
	color: var(--color-heading);
	font-weight: 700;
}

.menu-panel__groups {
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav .menu-panel__groups a {
	color: var(--color-muted-strong);
	font-weight: 500;
}

.menu-panel__status {
	display: block;
	color: var(--color-muted);
	font-size: var(--fs-xs);
}

/* Drawer: the panel opens inline under "Sản phẩm". */
.drawer__list .menu-item--products {
	flex-wrap: wrap;
	border-bottom: 1px solid var(--color-border);
}

.drawer__list .menu-item--products > a {
	flex: 1;
	border-bottom: 0;
}

.drawer__list .menu-toggle {
	width: var(--tap);
}

.drawer .menu-panel {
	flex-basis: 100%;
	padding: 0 0 var(--space-3) var(--space-3);
}

.drawer .menu-panel__list {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.drawer .menu-panel a {
	min-height: var(--tap);
	border-bottom: 0;
	font-size: var(--fs-sm);
}

.drawer .menu-panel__groups {
	margin: 0 0 0 var(--space-3);
}

.drawer .menu-panel__status {
	margin: -8px 0 var(--space-1);
}

/* Home: "Kiến thức & tài liệu" — three one-line rows. */
.link-rows {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* one-line rows truncate instead of widening the page */
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.link-row {
	display: block;
	min-height: var(--tap);
	padding: 0 var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 42px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.link-row:hover {
	border-color: var(--color-border-strong);
	text-decoration: none;
}

@media (min-width: 768px) {
	.link-rows {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-4);
	}
}

/* Home trust strip: one line of text on desktop (sketch V1 ảnh 1). */
@media (min-width: 1024px) {
	.trust__list {
		padding-block: var(--space-4);
	}

	.trust__icon {
		display: none;
	}

	.trust__item {
		display: block;
		text-align: left;
	}

	.trust__text strong,
	.trust__text span {
		display: inline;
	}

	.trust__text span::before {
		content: " · ";
	}
}

/* ==========================================================================
   Layout V1 lot 2 — video library, video detail, documents
   ========================================================================== */

/* Chips: 40 px pill on phones + 2 px hit area = 44 (6.2 E1, "32 px" risk closed). */
@media (max-width: 767.98px) {
	.chip {
		min-height: 40px;
	}

	.chip::after {
		inset: -3px 0; /* padding box 38 + 6 = 44 */
	}
}

/* Video detail: channel row, actions, summary. */
.vd__channel {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-2) 0 var(--space-3);
}

.vd__avatar {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-brand);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.vd__channel-text {
	display: grid;
}

.vd__channel-name {
	color: var(--color-heading);
	font-weight: 700;
}

.vd__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.vd__summary {
	margin-bottom: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius);
	background: var(--color-bg-soft);
}

.vd__summary p {
	margin: 0;
}

/* "Máy trong video". */
.machine-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
}

.machine-card__media {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 96px;
	height: 72px;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--color-bg-soft);
	color: var(--color-steel);
}

.machine-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.machine-card__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.machine-card__label {
	color: var(--color-muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.machine-card__title {
	color: var(--color-heading);
	font-weight: 700;
}

.machine-card__specs {
	color: var(--color-muted-strong);
	font-size: var(--fs-sm);
}

.machine-card__cta {
	flex-shrink: 0;
	margin-left: auto;
}

@media (max-width: 599.98px) {
	.machine-card__cta {
		display: none; /* the whole card is the link */
	}
}

/* Documents & drawings. */
.doc-rows {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.doc-rows--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3);
	}
}

@media (min-width: 1024px) {
	.doc-rows--grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.drawing-request {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-3);
	padding: var(--space-3);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius);
	background: #fffaf2;
}

.drawing-request__text {
	flex: 1 1 200px;
	margin: 0;
	color: var(--color-text);
	font-size: var(--fs-sm);
}

/* Side column: compact video list. */
.video-list__title {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-h3);
}

.video-list__items {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.video-list__item {
	position: relative;
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: var(--space-3);
	align-items: start;
}

.video-list__thumb {
	border-radius: var(--radius-sm);
}

.video-list__text {
	display: grid;
	gap: 2px;
}

.video-list__name {
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.25;
}

.video-list__meta {
	color: var(--color-muted);
	font-size: var(--fs-xs);
}


/* Video library: featured + shelves. */
.video-featured {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.video-featured__media {
	display: block;
	border-radius: var(--radius);
}

.video-featured__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-featured__badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	padding: 2px var(--space-2);
	border-radius: 4px;
	background: var(--color-brand);
	color: #ffffff;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.video-featured__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 64px;
	height: 44px;
	border-radius: 12px;
	background: var(--color-brand);
	color: #ffffff;
	transform: translate(-50%, -50%);
}

.video-featured__play .icon {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.video-featured__body {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
}

.video-featured__title {
	margin: 0 0 2px;
	font-size: var(--fs-h3);
	line-height: 1.25;
}

.video-featured__title a {
	color: var(--color-heading);
}

.video-featured__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
}

@media (min-width: 1024px) {
	.video-featured {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: var(--space-6);
		align-items: start;
	}

	.video-featured__media {
		grid-row: 1 / 4;
	}

	.video-featured__actions {
		grid-template-columns: none;
		grid-auto-flow: row;
		max-width: 320px;
	}
}

.video-shelves {
	margin-top: var(--space-6);
}

/* Document library. */
.doc-search {
	max-width: 640px;
	margin: var(--space-4) 0 var(--space-5);
}

.doc-block + .doc-block {
	margin-top: var(--space-6);
}

.doc-cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1024px) {
	.doc-cats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.doc-cat {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	height: 100%;
	min-height: 76px;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-heading);
}

.doc-cat:hover {
	border-color: var(--color-border-strong);
	text-decoration: none;
}

.doc-cat__name {
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.25;
}

.doc-cat__count {
	color: var(--color-success);
	font-size: var(--fs-xs);
	font-weight: 600;
}

/* Touch targets ≥ 44 px for the lot-2 controls (6.2 E1). */
.collapse__toggle {
	min-height: var(--tap);
}

.video-featured__title a {
	display: block;
	min-height: var(--tap);
}

@media (max-width: 767.98px) {
	.btn--sm {
		min-height: var(--tap);
	}
}

/* ==========================================================================
   Layout V1 lot 3 — product listing + product detail
   ========================================================================== */

/* Product card: one price line ("Liên hệ báo giá" by default). */
.card--product .card__title {
	-webkit-line-clamp: 2;
	min-height: 2.7em;
}

.card__price--quote {
	color: var(--color-brand-strong);
	font-size: var(--fs-sm);
	font-weight: 700;
}

/* Category column + grid (/san-pham/, /nhom-may/). */
.catalog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	margin-top: var(--space-4);
}

.catalog-layout__viewing {
	margin: 0 0 var(--space-3);
	color: var(--color-muted-strong);
	font-size: var(--fs-sm);
}

.catalog-layout__viewing strong {
	color: var(--color-heading);
}

@media (min-width: 1024px) {
	.catalog-layout {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: var(--space-6);
		align-items: start;
	}

	.catalog-layout__nav {
		position: sticky;
		top: calc(var(--header-h) + var(--space-4));
	}
}

/* Product detail — hero. */
.pd__thumbs {
	display: flex;
	gap: var(--space-2);
	margin: var(--space-2) 0 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
}

.pd__thumb {
	position: relative;
	display: block;
	width: 76px;
	height: 57px;
	padding: 0;
	overflow: hidden;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg-soft);
	cursor: pointer;
}

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

.pd__thumb.is-current {
	border-color: var(--color-brand);
}

.pd__thumb--video {
	background: var(--color-navy);
}

.pd__thumb-label {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 2px;
	background: rgba(15, 30, 51, 0.8);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
}

.pd__thumb-label .icon {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

.pd__identity span {
	font-weight: 700;
	color: var(--color-heading);
}

.pd__keyspecs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
}

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

.pd__keyspecs > div {
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	background: var(--color-bg-soft);
}

.pd__keyspecs dt {
	color: var(--color-muted-strong);
	font-size: var(--fs-xs);
}

.pd__keyspecs dd {
	margin: 0;
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.pd__price .pd__cta {
	flex-basis: 100%;
	margin-top: var(--space-2);
}

.pd__price-value--contact {
	color: var(--color-brand-strong);
	font-size: var(--fs-h3);
}

/* Product detail — tabs + sections + side column. */
.product-detail .tabbar {
	margin-top: var(--space-5);
}

.pd__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
	padding-top: var(--space-5);
}

.pd__aside {
	display: none;
}

@media (min-width: 1024px) {
	.pd__layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		align-items: start;
	}

	.pd__aside {
		position: sticky;
		top: calc(var(--header-h) + var(--tap) + var(--space-4));
		display: grid;
		gap: var(--space-4);
	}

	.pd__related {
		display: none; /* the side column lists the same group */
	}
}

.pd__section + .pd__section {
	margin-top: var(--space-7);
}

.pd__sub-title {
	margin: var(--space-5) 0 var(--space-3);
	font-size: var(--fs-h3);
}

.pd__fit {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.pd__fit {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pd__fit li {
	display: grid;
	gap: 2px;
	padding: var(--space-3);
	border-radius: var(--radius);
	background: var(--color-bg-soft);
	font-size: var(--fs-sm);
}

.pd__fit strong {
	color: var(--color-heading);
}

.pd__fit span {
	color: var(--color-muted-strong);
}

.pd__line {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 40%;
	gap: var(--space-3);
	margin: 0;
	padding: 2px 0 var(--space-2);
	overflow-x: auto;
	list-style: none;
}

@media (min-width: 768px) {
	.pd__line {
		grid-auto-columns: calc((100% - 3 * var(--space-3)) / 4);
	}
}

.pd__line-link {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-2);
	border: 2px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-heading);
}

.pd__line-link:hover {
	text-decoration: none;
	border-color: var(--color-border-strong);
}

.pd__line-step.is-current .pd__line-link {
	border-color: var(--color-brand);
}

.pd__line-name {
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.25;
}

.pd__line-here {
	color: var(--color-muted);
	font-size: var(--fs-xs);
}

.pd__faq {
	display: grid;
	gap: var(--space-2);
}

.pd__quote,
.pd__same {
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
}

.pd__quote {
	display: grid;
	gap: var(--space-2);
	background: var(--color-cta-soft);
	border-color: transparent;
}

.pd__quote-title {
	margin: 0;
	color: var(--color-heading);
	font-weight: 700;
}

.pd__quote-text {
	margin: 0 0 var(--space-1);
	color: var(--color-muted-strong);
	font-size: var(--fs-sm);
}

.pd__same-list {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-2) 0 0;
	padding: 0;
	list-style: none;
}

.pd__same-list a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--tap);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.pd__same-img {
	flex-shrink: 0;
	width: 56px;
	height: 42px;
	overflow: hidden;
	border-radius: 4px;
	background: var(--color-bg-soft);
}

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

/* Hero columns may shrink: the thumbnail strip scrolls instead of widening the page. */
.pd__media,
.pd__info {
	min-width: 0;
}

/* Home categories at the size of the video cards (owner UAT 02/10): 4:3 white frame,
   whole machine visible (contain), bigger name; "Xem tất cả sản phẩm" fills the row. */
.card--group .media {
	background: #ffffff;
	border-bottom: 1px solid var(--color-border);
}

.card--group .media img {
	object-fit: contain;
	padding: var(--space-2);
}

.home-groups .card--group .card__body {
	gap: var(--space-1);
	padding: var(--space-3) var(--space-4) var(--space-4);
}

.home-groups .card--group .card__title {
	font-size: var(--fs-base);
	font-weight: 700;
	-webkit-line-clamp: 2;
}

.card--more {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	padding: var(--space-4);
	border-style: dashed;
	background: var(--color-bg-soft);
	color: var(--color-steel);
	font-weight: 700;
	text-align: center;
}

.card--more:hover {
	text-decoration: none;
	color: var(--color-navy);
}

/* ==========================================================================
   Colour + hover / focus pass (owner UAT 02/10: "chỉ có đen và trắng …
   di chuột vào phải hiện lên"). Red #E31E24 stays the brand accent, Zalo
   blue for Zalo; adds an industrial navy/steel tint for alternating blocks.
   Every text pair ≥ 4.5:1. CSS only, 150–200 ms, reduced motion respected.
   ========================================================================== */

:root {
	--color-tint: #eef3f8;            /* blue-grey block background; muted text 5.0:1, red text 4.7:1 on it */
	--ease: 0.18s ease;
}

/* Alternating block backgrounds on the homepage. */
.section--tint {
	background: var(--color-tint);
}

/* Block titles: short red underline; "Xem tất cả ›" in the brand red. */
.section-head__title {
	position: relative;
	padding-bottom: 10px;
}

.section-head__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 3px;
	border-radius: 2px;
	background: var(--color-brand);
}

.link-more {
	color: var(--color-brand-strong);
	transition: color var(--ease);
}

.link-more:hover {
	color: var(--color-navy);
	text-decoration: none;
}

/* Keyboard focus: one clear ring everywhere. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--color-steel);
	outline-offset: 2px;
}

/* Main menu: red underline on hover / current. */
.primary-nav__list > li > a {
	position: relative;
	transition: color var(--ease);
}

.primary-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: 2px;
	border-radius: 1px;
	background: var(--color-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ease);
}

.primary-nav__list > li > a:hover::after,
.primary-nav__list > li > a:focus-visible::after,
.primary-nav__list > .current-menu-item > a::after,
.primary-nav__list > li.is-open > a::after {
	transform: scaleX(1);
}

.primary-nav__list > li.is-open > a {
	color: var(--color-brand);
}

/* "Sản phẩm ▾" panel: every row reacts. */
.menu-panel__cat-link,
.menu-panel__groups a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border-radius: var(--radius-sm);
	transition: background-color var(--ease), color var(--ease);
}

.primary-nav .menu-panel__cat-link {
	color: var(--color-brand-strong);
	font-weight: 700;
}

.menu-panel__cat-link::before {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-brand);
}

.primary-nav .menu-panel__groups a {
	color: var(--color-muted-strong);
	padding-left: 22px;
}

.menu-panel__groups a::after {
	content: "›";
	margin-left: auto;
	opacity: 0;
	transition: opacity var(--ease);
}

.primary-nav .menu-panel__cat-link:hover,
.primary-nav .menu-panel__cat-link:focus-visible,
.primary-nav .menu-panel__groups a:hover,
.primary-nav .menu-panel__groups a:focus-visible,
.drawer .menu-panel a:hover {
	background: var(--color-brand-soft);
	color: var(--color-brand-strong);
	text-decoration: none;
}

.menu-panel__groups a:hover::after,
.menu-panel__groups a:focus-visible::after {
	opacity: 1;
}

.menu-panel__status {
	padding-left: 22px;
}

.menu-panel__all {
	display: block;
	margin: var(--space-4) calc(var(--space-5) * -1) calc(var(--space-5) * -1);
	padding: var(--space-3) var(--space-5);
	border-radius: 0 0 var(--radius) var(--radius);
	background: var(--color-brand-soft);
	color: var(--color-brand-strong);
	font-weight: 700;
	transition: background-color var(--ease);
}

.menu-panel__all:hover {
	background: #fbdcdd;
	text-decoration: none;
}

.drawer .menu-panel__all {
	margin: var(--space-2) 0 0;
	border-radius: var(--radius-sm);
	min-height: var(--tap);
}

/* Cards (category, product, video, document, group): lift + border + red name. */
.card {
	transition: box-shadow var(--ease), border-color var(--ease), transform var(--ease);
}

.card:hover,
.card:focus-within {
	border-color: #f0b9bb;
	box-shadow: var(--shadow-raised);
	transform: translateY(-2px);
}

.card--plain:hover,
.card--plain:focus-within {
	box-shadow: none;
}

.card .card__title,
.card .card__title a {
	transition: color var(--ease);
}

.card:hover .card__title,
.card:hover .card__title a,
.card:focus-within .card__title a {
	color: var(--color-brand-strong);
}

.card--plain:hover .media,
.card--plain:focus-within .media {
	box-shadow: var(--shadow-raised);
}

/* Video thumbnails: red ▶ appears on hover. */
.card--video .media::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	border-radius: 50%;
	background: var(--color-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") 55% 50% / 22px no-repeat;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transform: scale(0.85);
	transition: opacity var(--ease), transform var(--ease);
	pointer-events: none;
}

.card--video:hover .media::after,
.card--video:focus-within .media::after {
	opacity: 1;
	transform: scale(1);
}

/* Placeholder frames already show a play button. */
.card--video .media:has(.media__empty--video)::after {
	display: none;
}

.card--more:hover,
.card--more:focus-visible {
	border-color: var(--color-brand);
	background: var(--color-brand-soft);
	color: var(--color-brand-strong);
}

.link-row {
	transition: border-color var(--ease), color var(--ease), background-color var(--ease);
}

.link-row:hover,
.link-row:focus-visible {
	border-color: #f0b9bb;
	background: var(--color-brand-soft);
	color: var(--color-brand-strong);
}

/* Chips + buttons. */
.chip {
	transition: border-color var(--ease), color var(--ease), background-color var(--ease);
}

.chip:hover,
.chip:focus-visible {
	border-color: #f0b9bb;
	color: var(--color-brand-strong);
}

.btn {
	transition: background-color var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.btn--outline:hover,
.btn--light:hover {
	border-color: var(--color-brand);
	color: var(--color-brand-strong);
}

.btn--zalo:hover {
	background: var(--color-zalo-hover);
}

/* Category column (/san-pham/, /nhom-may/). */
.cat-nav__link,
.cat-nav__group {
	margin-inline: -8px;
	padding-inline: 8px;
	border-left: 3px solid transparent;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}

.cat-nav__link:hover,
.cat-nav__group:hover,
.cat-nav__link:focus-visible,
.cat-nav__group:focus-visible {
	background: var(--color-bg-soft);
	color: var(--color-brand-strong);
	text-decoration: none;
}

.cat-nav__link.is-current,
.cat-nav__group.is-current {
	border-left-color: var(--color-brand);
	background: var(--color-brand-soft);
}

/* Phones: chips are a real 44 px (QA 07, 375 px). */
@media (max-width: 767.98px) {
	.chip {
		min-height: var(--tap);
	}

	.chip::after {
		inset: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.card,
	.card .card__title,
	.card--video .media::after,
	.btn,
	.chip,
	.link-row,
	.link-more,
	.primary-nav__list > li > a,
	.primary-nav__list > li > a::after,
	.menu-panel__cat-link,
	.menu-panel__groups a,
	.cat-nav__link,
	.cat-nav__group {
		transition: none;
	}

	.card:hover,
	.card:focus-within,
	.btn--primary:hover {
		transform: none;
	}
}

/* Panel rows are full width (beats `.primary-nav__list a { display: inline-flex }`). */
.primary-nav .menu-panel__cat-link,
.primary-nav .menu-panel__groups a,
.primary-nav .menu-panel__all {
	display: flex;
}

/* ==========================================================================
   Style C "Xanh than kỹ thuật" (sketch docs/ui/phac-thao-v2, owner 02/10)
   Navy #0F1B2D header / footer / page heads (32 px grid), navy 2 #16263D
   bands, red #E31E24 for actions, amber #F5A524 only as small accents,
   #F3F5F8 alternating blocks. Block titles: Barlow Semi Condensed caps with
   a number; names and text: Be Vietnam Pro sentence case. Corners 3–4 px.
   Contrast (checked): white / navy 17.1 · #B9C5D6 / navy 10.3 · #9FB0C6 /
   navy 8.0 · amber / navy 9.0 · red text uses #C8161C (5.6 white, 5.2 tint).
   ========================================================================== */

:root {
	--color-navy: #0f1b2d;
	--color-navy-2: #16263d;
	--color-navy-deep: #0a1320;
	--color-amber: #f5a524;
	--color-tint: #f3f5f8;
	--color-dark-text: #b9c5d6;
	--color-dark-muted: #9fb0c6;
	--color-dark-line: #2c3c55;
	--color-heading: #16202e;
	--color-hero-bg: var(--color-navy);
	--color-footer-bg: var(--color-navy);
	--color-footer-text: var(--color-dark-muted);
	--radius-sm: 3px;
	--radius: 4px;
	--radius-lg: 4px;
	--font-display: "Barlow Semi Condensed", "Arial Narrow", var(--font-system);
	--grid-lines: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

/* Block titles: number line + condensed caps (names inside cards stay sentence case). */
.section-head {
	align-items: flex-end;
}

.section-head__title {
	padding-bottom: 0;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.section-head__title::after {
	display: none;
}

.section-head__num {
	display: block;
	margin-bottom: 4px;
	color: var(--color-brand-strong);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
}

.link-more {
	font-weight: 700;
}

@media (min-width: 1024px) {
	.section-head__title {
		font-size: 1.875rem;
	}

	.section-head .section-head__tabs {
		align-self: flex-end;
	}
}

/* Cards: square-ish corners, coloured top border, lift 3 px + shadow + red name. */
.card {
	border-radius: var(--radius);
}

.card:hover,
.card:focus-within {
	transform: translateY(-3px);
	border-color: var(--color-border-strong);
	box-shadow: 0 10px 24px rgba(15, 27, 45, 0.14);
}

.card--group,
.card--product,
.card--category {
	border-top: 3px solid var(--color-navy);
}

.card--doc {
	border-top: 3px solid var(--color-brand);
}

.chip {
	border-radius: var(--radius-sm);
}

.chip.is-active,
.chip[aria-current] {
	border-color: var(--color-brand);
	background: var(--color-brand);
	color: #fff;
}

.chip.is-active:hover,
.chip[aria-current]:hover {
	color: #fff;
}

/* "Xem tất cả sản phẩm" tile: solid navy. */
.card--more,
.card--more:hover,
.card--more:focus-visible {
	border: 0;
	background: var(--color-navy);
	color: #fff;
}

.card--more:hover,
.card--more:focus-visible {
	background: var(--color-navy-2);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Top strip + dark header
   -------------------------------------------------------------------------- */
.topbar {
	display: none;
	background: var(--color-navy-deep);
	color: var(--color-dark-muted);
	font-size: 0.875rem;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 34px;
}

.topbar p {
	margin: 0;
}

.topbar__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.topbar__contact {
	display: flex;
	flex-shrink: 0;
	gap: var(--space-4);
}

.topbar a {
	color: #fff;
	font-weight: 600;
}

@media (min-width: 768px) {
	.topbar {
		display: block;
	}
}

.site-header {
	border-bottom: 0;
	background: var(--color-navy);
	color: #fff;
}

.site-header .icon-btn,
.site-header .menu-toggle,
.site-header .search-form__submit {
	color: #fff;
}

.site-header__quote {
	display: none;
	box-shadow: none;
}

.site-header .lang-switch__link {
	color: var(--color-dark-muted);
}

.site-header .lang-switch__link.is-current {
	background: transparent;
	color: #fff;
}

.site-header .lang-switch__link:hover {
	color: #fff;
}

.site-header .logo img {
	max-height: 40px;
	width: auto;
}

@media (min-width: 1024px) {
	.site-header .logo img {
		max-height: 46px;
	}

	.site-header__inner {
		gap: var(--space-5);
	}

	.site-header__quote {
		display: inline-flex;
		flex-shrink: 0;
	}

	.site-header__search {
		width: clamp(150px, 15vw, 230px);
	}

	.site-header .search-form__input {
		border-color: var(--color-dark-line);
		background: rgba(255, 255, 255, 0.06);
		color: #fff;
	}

	.site-header .search-form__input::placeholder {
		color: var(--color-dark-muted);
	}

	.primary-nav__list {
		gap: var(--space-5);
		height: 100%;
	}

	.primary-nav,
	.primary-nav__list > li {
		align-self: stretch;
	}

	.primary-nav__list > li {
		display: flex;
		align-items: center;
	}

	.site-header .primary-nav__list > li > a {
		align-self: stretch;
		color: #fff;
		font-size: 1rem;
	}

	.site-header .primary-nav__list > li > a:hover,
	.site-header .primary-nav__list > li.is-open > a,
	.site-header .primary-nav__list > .current-menu-item > a {
		color: #fff;
	}

	.primary-nav__list > li > a::after {
		bottom: 0;
		height: 3px;
		border-radius: 0;
	}

	.primary-nav .menu-toggle {
		width: 22px;
		color: var(--color-dark-muted);
	}
}

/* --------------------------------------------------------------------------
   Drop menus (header): full-width white panel, red top line, columns
   -------------------------------------------------------------------------- */
.menu-item--has-panel {
	display: flex;
	align-items: center;
}

.primary-nav .menu-panel {
	top: 100%;
	padding: 0;
	border: 0;
	border-top: 3px solid var(--color-brand);
	border-radius: 0;
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: 0 18px 40px rgba(10, 19, 32, 0.25);
}

.primary-nav .menu-panel__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5) var(--space-6);
	padding: var(--space-5) var(--space-5) 0;
}

.primary-nav .menu-panel--products .menu-panel__inner {
	display: block;
}

.menu-panel__col {
	min-width: 0;
}

.menu-panel__head {
	margin: 0 0 var(--space-2);
	color: var(--color-muted);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.menu-panel__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu-panel__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: 36px;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
	transition: background-color var(--ease), color var(--ease);
}

.menu-panel__row small {
	flex-shrink: 0;
	color: var(--color-muted);
	font-size: var(--fs-xs);
	font-weight: 500;
}

.menu-panel__row:hover,
.menu-panel__row:focus-visible,
.primary-nav .menu-panel__row:hover {
	background: var(--color-brand-soft);
	color: var(--color-brand-strong);
	text-decoration: none;
}

.menu-panel__feat {
	display: block;
	align-self: start;
	padding: var(--space-3);
	border-radius: var(--radius);
	background: var(--color-tint);
	color: var(--color-heading);
}

.menu-panel__feat img {
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: var(--space-2);
	border-radius: var(--radius-sm);
	object-fit: cover;
}

.menu-panel__feat-label {
	display: block;
	color: var(--color-brand-strong);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.menu-panel__feat-title {
	display: block;
	font-weight: 700;
	line-height: 1.25;
}

.menu-panel__feat:hover {
	color: var(--color-brand-strong);
	text-decoration: none;
}

.primary-nav .menu-panel__all {
	grid-column: 1 / -1;
	margin: var(--space-4) calc(var(--space-5) * -1) 0;
	padding: var(--space-3) var(--space-5);
	border-top: 1px solid var(--color-border);
	border-radius: 0;
	background: transparent;
	color: var(--color-brand-strong);
}

.primary-nav .menu-panel--products .menu-panel__all {
	margin-top: var(--space-5);
}

.primary-nav .menu-panel__all:hover {
	background: var(--color-brand-soft);
}

.primary-nav .menu-panel__row {
	display: flex;
}

/* Drawer: every panel opens inline under its item. */
.drawer__list > .menu-item--has-panel {
	flex-wrap: wrap;
	border-bottom: 1px solid var(--color-border);
}

.drawer__list > .menu-item--has-panel > a {
	flex: 1;
	border-bottom: 0;
}

.drawer .menu-panel__inner {
	display: grid;
	gap: var(--space-3);
}

.drawer .menu-panel__row {
	min-height: var(--tap);
	padding-inline: var(--space-2);
}

.drawer .menu-panel__feat {
	display: none;
}

.drawer__quote {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Page head (all listing pages): navy band, 32 px grid
   -------------------------------------------------------------------------- */
.phead {
	background-color: var(--color-navy);
	background-image: var(--grid-lines);
	background-size: 32px 32px;
	color: #fff;
}

.phead__inner {
	padding-block: var(--space-5) var(--space-6);
}

.phead .breadcrumb,
.phead .breadcrumb a,
.phead .breadcrumb__item + .breadcrumb__item::before {
	color: var(--color-dark-muted);
}

.phead .breadcrumb__item:last-child span {
	color: var(--color-dark-text);
}

.phead .breadcrumb a:hover {
	color: #fff;
}

.phead .breadcrumb {
	margin-bottom: var(--space-3);
}

.phead__eyebrow {
	margin: 0 0 var(--space-1);
	color: var(--color-amber);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.phead__title {
	margin: 0;
	color: #fff;
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.phead__desc,
.phead__meta {
	max-width: 64ch;
	margin: var(--space-2) 0 0;
	color: var(--color-dark-text);
}

.phead__meta {
	color: var(--color-dark-muted);
	font-size: var(--fs-sm);
}

@media (min-width: 1024px) {
	.phead__inner {
		padding-block: 30px 34px;
	}

	.phead__title {
		font-size: 2.25rem;
	}
}

/* --------------------------------------------------------------------------
   Homepage hero (C-1): navy grid, text left, framed photo right
   -------------------------------------------------------------------------- */
.hero--c {
	background-color: var(--color-navy);
	background-image: var(--grid-lines);
	background-size: 32px 32px;
}

.hero--c .hero__inner {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-5);
	min-height: 0;
	padding-block: var(--space-6);
}

.hero__kicker {
	margin: 0 0 var(--space-2);
	color: var(--color-amber);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hero--c .hero__title {
	font-family: var(--font-heading);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}

.hero--c .hero__text {
	color: var(--color-dark-text);
}

.hero--c .btn--ghost {
	border: 1.5px solid #fff;
	background: transparent;
	color: #fff;
}

.hero--c .btn--ghost:hover {
	background: #fff;
	color: var(--color-navy);
}

.hero--c .btn--primary .icon {
	width: 18px;
	height: 18px;
}

.hero__frame {
	position: relative;
	display: block;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--color-dark-line);
	border-radius: var(--radius);
	background: var(--color-navy-2);
	aspect-ratio: 16 / 10;
}

.hero__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-pos, center);
}

.hero__frame--video .hero-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
	.hero--c .hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--space-6);
		padding-block: var(--space-7);
	}

	.hero--c .hero__inner--no-media {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero--c .hero__title {
		font-size: 1.875rem;
	}
}

@media (min-width: 1024px) {
	.hero--c .hero__inner {
		gap: 40px;
		padding-block: 56px;
	}

	.hero--c .hero__title {
		font-size: var(--fs-display);
	}

	.hero--c .hero__text {
		font-size: 1.125rem;
	}
}

/* Dark trust strip (no promises; text comes from home-data). */
.trust {
	border-bottom: 0;
	background: var(--color-navy-2);
	color: #fff;
}

.trust__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	background: rgba(245, 165, 36, 0.15);
	color: var(--color-amber);
}

.trust__icon .icon,
.trust .trust__icon .icon {
	width: 20px;
	height: 20px;
}

.trust__text strong {
	color: #fff;
}

.trust__text span {
	color: var(--color-dark-muted);
}

/* --------------------------------------------------------------------------
   02 Video: 1 big + 3 small, floating player
   -------------------------------------------------------------------------- */
.vfeature {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
}

.vfeature__big {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	background: #0d1622;
	color: #fff;
	aspect-ratio: 16 / 9;
}

.vfeature__media,
.vfeature__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.vfeature__media img {
	object-fit: cover;
	transition: transform 0.3s ease;
}

.vfeature__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 64px;
	height: 46px;
	margin: -23px 0 0 -32px;
	border-radius: 12px;
	background: var(--color-brand);
	color: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.vfeature__play .icon {
	width: 22px;
	height: 22px;
}

.vfeature__cap {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: var(--space-6) var(--space-4) var(--space-3);
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
}

.vfeature__tag {
	display: block;
	color: #ffc4c6;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vfeature__title {
	display: block;
	font-weight: 700;
	line-height: 1.25;
}

.vfeature__big .media__badge {
	top: var(--space-2);
	bottom: auto;
}

.vfeature__big:hover,
.vfeature__big:focus-visible {
	text-decoration: none;
}

.vfeature__big:hover img {
	transform: scale(1.03);
}

.vfeature__list {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vfeature__item {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: var(--space-3);
	align-items: center;
	color: var(--color-heading);
}

.vfeature__thumb {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	background: #0d1622;
	aspect-ratio: 16 / 9;
	transition: box-shadow var(--ease);
}

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

.vfeature__thumb .media__badge {
	right: 4px;
	bottom: 4px;
	padding: 1px 6px;
}

.vfeature__noimg {
	display: grid;
	place-items: center;
	height: 100%;
	color: #fff;
}

.vfeature__name {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.25;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	transition: color var(--ease);
}

.vfeature__meta {
	display: block;
	margin-top: 2px;
	color: var(--color-muted);
	font-size: var(--fs-xs);
}

.vfeature__item:hover,
.vfeature__item:focus-visible {
	text-decoration: none;
}

.vfeature__item:hover .vfeature__name,
.vfeature__item:focus-visible .vfeature__name {
	color: var(--color-brand-strong);
}

.vfeature__item:hover .vfeature__thumb,
.vfeature__item:focus-visible .vfeature__thumb {
	box-shadow: 0 0 0 3px var(--color-brand);
}

@media (min-width: 768px) {
	.vfeature__item {
		grid-template-columns: 150px minmax(0, 1fr);
	}

	.vfeature__title {
		font-size: 1.125rem;
	}
}

@media (min-width: 1024px) {
	.vfeature {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: 20px;
	}

	.vfeature__list {
		align-content: start;
		gap: 14px;
	}

	.vfeature__title {
		font-size: 1.25rem;
	}

	.vfeature__name {
		font-size: 1rem;
	}
}

.vmodal {
	width: min(960px, calc(100vw - 24px));
	max-width: none;
	max-height: calc(100vh - 24px);
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: var(--color-navy);
	color: #fff;
	overflow: auto;
}

.vmodal::backdrop {
	background: rgba(5, 10, 18, 0.82);
}

.vmodal__head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
}

.vmodal__title {
	flex: 1;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vmodal__close {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.vmodal__close:hover {
	background: rgba(255, 255, 255, 0.1);
}

.vmodal__close .icon {
	width: 22px;
	height: 22px;
}

.vmodal__frame {
	background: #000;
	aspect-ratio: 16 / 9;
}

.vmodal__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.vmodal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4) var(--space-4);
}

.vmodal__actions .btn {
	flex: 1 1 200px;
}

.vmodal__actions .btn[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   03 Solutions · 04 Knowledge magazine · dark CTA band
   -------------------------------------------------------------------------- */
.sol-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
	border-top: 4px solid var(--color-amber);
}

.sol-card__label {
	margin: 0;
	color: var(--color-brand-strong);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sol-card__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.25;
}

.sol-card__title a {
	color: var(--color-heading);
	transition: color var(--ease);
}

.sol-card__text {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.sol-card__more {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-top: auto;
	padding-top: var(--space-2);
	color: var(--color-brand-strong);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.sol-card__more .icon {
	width: 1em;
	height: 1em;
}

.sol-card:hover .sol-card__title a,
.sol-card:focus-within .sol-card__title a {
	color: var(--color-brand-strong);
}

.mag {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
}

.mag__side {
	display: grid;
	align-content: start;
	gap: var(--space-3);
}

.mag__item {
	position: relative;
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	overflow: hidden;
}

.mag__media {
	display: block;
	min-height: 100%;
	background: var(--color-navy);
}

.mag__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mag__noimg {
	display: grid;
	place-items: center;
	height: 100%;
	min-height: 82px;
	background-image: var(--grid-lines);
	background-size: 16px 16px;
	color: var(--color-amber);
}

.mag__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: var(--space-3);
}

.mag__tag {
	color: var(--color-brand-strong);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mag__title {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.25;
}

.mag__title a {
	color: var(--color-heading);
	transition: color var(--ease);
}

.mag__text {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.mag__item:hover .mag__title a,
.mag__item:focus-within .mag__title a {
	color: var(--color-brand-strong);
}

.mag__item--big {
	grid-template-columns: minmax(0, 1fr);
}

.mag__item--big .mag__media img {
	aspect-ratio: 16 / 9;
}

.mag__item--big .mag__noimg {
	min-height: 0;
	aspect-ratio: 16 / 9;
	background-size: 32px 32px;
}

.mag__item--big .mag__body {
	padding: var(--space-4);
}

.mag__item--big .mag__title {
	font-size: 1.125rem;
}

@media (min-width: 768px) {
	.mag__item {
		grid-template-columns: 140px minmax(0, 1fr);
	}

	.mag__item--big {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1024px) {
	.mag {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: 20px;
	}

	.mag--single {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.mag__item--big .mag__title {
		font-size: 1.25rem;
	}

	.mag__title {
		font-size: 1rem;
	}
}

.cta-band {
	background: var(--color-navy-2);
	color: #fff;
}

.cta-box--band {
	padding: var(--space-6) 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.cta-box--band .cta-box__title {
	color: #fff;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.cta-box--band .cta-box__text {
	color: var(--color-dark-muted);
}

.cta-box--band .btn--light {
	border-color: transparent;
}

@media (min-width: 768px) {
	.cta-box--band {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.cta-box--band .cta-box__title {
		font-size: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   Dark footer, 4 columns (brand · Sản phẩm · Tìm hiểu · AMANKONG)
   -------------------------------------------------------------------------- */
.site-footer {
	padding-block: var(--space-6) var(--space-5);
	background: var(--color-navy);
	color: var(--color-dark-muted);
}

.site-footer__inner {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5) var(--space-4);
	justify-items: stretch;
	text-align: left;
}

.site-footer__brand {
	grid-column: 1 / -1;
	align-items: flex-start;
}

.site-footer__head {
	margin: 0 0 var(--space-1);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 700;
}

.site-footer__col .site-footer__list {
	display: grid;
	justify-content: start;
	column-gap: 0;
}

.site-footer__col .site-footer__list li + li::before {
	display: none;
}

.site-footer__col .site-footer__list a {
	min-height: 36px;
	padding-inline: 0;
	color: var(--color-dark-muted);
}

.site-footer__col .site-footer__list a:hover {
	color: #fff;
}

.site-footer__meta {
	grid-column: 1 / -1;
	align-items: flex-start;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-dark-line);
}

@media (max-width: 767.98px) {
	.site-footer__col .site-footer__list a {
		min-height: var(--tap);
	}
}

@media (min-width: 1024px) {
	.site-footer__inner {
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
		grid-template-areas: none;
		align-items: start;
		gap: var(--space-5) var(--space-6);
	}

	.site-footer__brand {
		grid-area: auto;
		grid-column: auto;
		flex-direction: column;
	}

	.site-footer__meta {
		grid-area: auto;
		grid-column: 1 / -1;
		flex-direction: row;
		justify-content: space-between;
		justify-self: stretch;
	}
}

/* --------------------------------------------------------------------------
   Phone bars: bottom tab bar + sticky CTA bar in style C
   -------------------------------------------------------------------------- */
.bottom-nav {
	border-top: 0;
	background: var(--color-navy);
}

.bottom-nav__item {
	color: var(--color-dark-muted);
}

.bottom-nav__item.is-active {
	color: #fff;
	box-shadow: inset 0 3px 0 var(--color-brand);
}

.cta-bar {
	border-top: 1px solid var(--color-border);
	background: var(--color-surface);
}

@media (prefers-reduced-motion: reduce) {
	.vfeature__media img,
	.menu-panel__row,
	.sol-card__title a,
	.mag__title a {
		transition: none;
	}

	.vfeature__big:hover img {
		transform: none;
	}
}

/* Style C trust strip: amber icon + two lines from 768 px (replaces the V1 one-line row). */
@media (min-width: 768px) {
	.trust .trust__item {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--space-3);
		text-align: left;
	}

	.trust .trust__icon {
		display: grid;
	}

	.trust .trust__text strong,
	.trust .trust__text span {
		display: block;
	}

	.trust .trust__text span::before {
		content: none;
	}
}

/* Beats `.primary-nav__list a { display: inline-flex }` for the featured series box. */
.primary-nav .menu-panel__feat {
	display: block;
	white-space: normal;
}

/* ==========================================================================
   Style C — lot B (sketch V2 C-2 video · C-3 documents · C-4 knowledge ·
   C-5 product · C-6 one video). Same tokens as lot A; AA pairs as lot A.
   ========================================================================== */

/* Shared bits ---------------------------------------------------------------- */
.btn--navy {
	background: var(--color-navy);
	color: #fff;
}

.btn--navy:hover {
	background: var(--color-navy-2);
	color: #fff;
}

.btn .icon {
	flex-shrink: 0;
}

/* Labelled filter rows: "THEO MÁY  [chip] [chip]" (C-2 / C-3). */
.filter-rows {
	display: grid;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

.filter-rows__row {
	display: grid;
	gap: var(--space-1);
	min-width: 0;
}

.filter-rows__label {
	color: var(--color-muted);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.filter-rows__chips {
	display: flex;
	gap: var(--space-2);
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	margin-inline: calc(var(--gutter) * -1);
	padding: 2px var(--gutter);
}

.filter-rows__chips::-webkit-scrollbar {
	display: none;
}

.filter-rows__chips .chip {
	flex-shrink: 0;
}

.chip__count {
	margin-left: 4px;
	font-size: 0.75rem;
	font-weight: 500;
	opacity: 0.8;
}

@media (min-width: 768px) {
	.filter-rows__row {
		grid-template-columns: 110px minmax(0, 1fr);
		align-items: center;
		gap: var(--space-3);
	}

	.filter-rows__chips {
		flex-wrap: wrap;
		overflow: visible;
		margin-inline: 0;
		padding: 0;
	}
}

/* Navy chip strip under the header (C-6 "Thư viện video ›", C-5 breadcrumb). */
.cbar {
	background: var(--color-navy-2);
	color: var(--color-dark-muted);
	font-size: var(--fs-sm);
}

.cbar__inner {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 48px;
	overflow-x: auto;
	scrollbar-width: none;
	white-space: nowrap;
}

.cbar__inner::-webkit-scrollbar {
	display: none;
}

.cbar__home {
	flex-shrink: 0;
	margin-right: var(--space-2);
	color: #fff;
	font-weight: 700;
}

.cbar .chip {
	flex-shrink: 0;
	border-color: var(--color-dark-line);
	background: transparent;
	color: #dfe7f1;
}

.cbar .chip:hover {
	border-color: #fff;
	color: #fff;
}

.cbar .chip.is-active {
	border-color: var(--color-brand);
	background: var(--color-brand);
	color: #fff;
}

.cbar--crumbs .breadcrumb {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--color-dark-muted);
}

.cbar--crumbs .breadcrumb a,
.cbar--crumbs .breadcrumb__item + .breadcrumb__item::before {
	color: var(--color-dark-muted);
}

.cbar--crumbs .breadcrumb a:hover {
	color: #fff;
}

.cbar--crumbs .breadcrumb__item:last-child span {
	color: #fff;
	font-weight: 700;
}

/* Numbered accordions (C-6 "01 Bài viết · 02 Thông số · 03 Tài liệu"). */
.accordion {
	border-radius: var(--radius);
}

.accordion__num {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-sm);
	background: var(--color-navy);
	color: var(--color-amber);
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
}

.accordion__num + .accordion__text .accordion__title {
	font-family: var(--font-display);
	font-size: 1.125rem;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* Dark "Mua bản vẽ" / drawing request band (C-5 / C-6). */
.buy-band {
	display: grid;
	gap: var(--space-3);
	align-items: center;
	margin-top: var(--space-3);
	padding: var(--space-4);
	border-radius: var(--radius);
	background: var(--color-navy);
	color: #fff;
}

.buy-band__text {
	margin: 0;
	min-width: 0;
}

.buy-band__label {
	display: block;
	color: var(--color-dark-muted);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.buy-band__title {
	display: block;
	font-weight: 700;
	overflow-wrap: anywhere;
}

@media (min-width: 600px) {
	.buy-band {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

/* Document rows: a real button sits above the row link. */
.doc-row__btn {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	white-space: nowrap;
}

.doc-row__btn .icon {
	width: 16px;
	height: 16px;
}

/* --------------------------------------------------------------------------
   C-2 Video library
   -------------------------------------------------------------------------- */
.vlib-feat {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
}

.vlib-feat__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	background: #0d1622;
	aspect-ratio: 16 / 9;
}

.vlib-feat__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.vlib-feat__main:hover .vlib-feat__media img {
	transform: scale(1.02);
}

.vlib-feat__cap {
	padding-top: var(--space-3);
}

.vlib-feat__tag {
	margin: 0;
	color: var(--color-brand-strong);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vlib-feat__title {
	margin: 4px 0;
	font-size: 1.125rem;
	line-height: 1.25;
}

.vlib-feat__title a {
	color: var(--color-heading);
}

.vlib-feat__title a:hover {
	color: var(--color-brand-strong);
	text-decoration: none;
}

.vlib-feat__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

@media (min-width: 1024px) {
	.vlib-feat {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: 20px;
	}

	.vlib-feat--single {
		grid-template-columns: minmax(0, 1fr);
	}

	.vlib-feat__title {
		font-size: 1.25rem;
	}
}

/* Series cards: first video + "N video ▶ Xem cả bộ" panel. */
.series-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-top: 3px solid var(--color-navy);
}

.series-card__media {
	position: relative;
	display: block;
	background: #0d1622;
	aspect-ratio: 16 / 9;
}

.series-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.series-card__count {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 38%;
	background: rgba(15, 27, 45, 0.88);
	color: #fff;
	font-size: var(--fs-sm);
	text-align: center;
}

.series-card__count span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--fs-xs);
}

.series-card__count .icon {
	width: 14px;
	height: 14px;
}

.series-card__body {
	display: grid;
	gap: 4px;
	padding: var(--space-3) var(--space-4) var(--space-4);
}

/* --------------------------------------------------------------------------
   C-6 One video
   -------------------------------------------------------------------------- */
.video-detail .vd {
	padding-top: var(--space-4);
}

.vd__summary {
	border-radius: var(--radius);
	background: var(--color-tint);
}

.vd__accordions .accordion + .accordion {
	margin-top: 0;
	border-top: 0;
	border-radius: 0;
}

.vd__accordions .accordion:first-child {
	border-radius: var(--radius) var(--radius) 0 0;
}

.vd__accordions .accordion:last-child {
	border-radius: 0 0 var(--radius) var(--radius);
}

.machine-card {
	margin-top: var(--space-4);
	border-left: 3px solid var(--color-amber);
	border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   C-3 Documents
   -------------------------------------------------------------------------- */
.phead__search {
	display: flex;
	max-width: 620px;
	margin-top: var(--space-4);
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: #fff;
}

.phead__search input {
	flex: 1;
	min-width: 0;
	min-height: var(--tap);
	padding: 0 var(--space-4);
	border: 0;
	background: #fff;
	color: var(--color-text);
	font: inherit;
	font-size: var(--fs-base);
}

.phead__search input::placeholder {
	color: var(--color-muted);
}

.phead__search .btn {
	border-radius: 0;
	box-shadow: none;
}

.phead__search .btn .icon {
	width: 18px;
	height: 18px;
}

.drawing-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-top: 3px solid var(--color-brand);
}

/* Blueprint frame: picture on a blue drawing grid (or the grid alone). */
.drawing-card__media {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	background-color: #0e3a63;
	background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
	background-size: 20px 20px;
	aspect-ratio: 4 / 3;
	color: rgba(255, 255, 255, 0.6);
}

.drawing-card__media img {
	width: 100%;
	height: 100%;
	padding: var(--space-4);
	object-fit: contain;
	filter: grayscale(1) invert(1) brightness(1.6) contrast(1.2);
	mix-blend-mode: screen;
	opacity: 0.6;
}

.drawing-card__media > .icon {
	width: 56px;
	height: 56px;
}

.drawing-card__fmt {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 3px 8px;
	border-radius: var(--radius-sm);
	background: var(--color-amber);
	color: #111;
	font-size: 0.75rem;
	font-weight: 700;
}

.drawing-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: var(--space-3) var(--space-4);
}

.drawing-card__label {
	margin: 0;
	color: var(--color-brand-strong);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.drawing-card__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.25;
}

.drawing-card__list {
	margin: 0;
	padding-left: 18px;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.drawing-card__price {
	display: flex;
	justify-content: space-between;
	gap: var(--space-2);
	margin: auto 0 0;
	padding-top: var(--space-2);
	border-top: 1px dashed var(--color-border-strong);
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.drawing-card__price b {
	color: var(--color-brand-strong);
}

.drawing-card__actions {
	position: relative;
	z-index: 2;
	display: flex;
	gap: var(--space-2);
	padding: 0 var(--space-4) var(--space-4);
}

.drawing-card__actions .btn {
	flex: 1;
}

/* 3 steps (navy band). */
.steps-band {
	display: grid;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--color-navy);
	color: #fff;
	list-style: none;
	counter-reset: step;
}

.steps-band li {
	display: grid;
	gap: 4px;
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--color-dark-line);
	counter-increment: step;
}

.steps-band li:last-child {
	border-bottom: 0;
}

.steps-band li::before {
	content: counter(step, decimal-leading-zero);
	color: var(--color-amber);
	font-family: var(--font-display);
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1;
}

.steps-band span {
	color: var(--color-dark-muted);
	font-size: var(--fs-sm);
}

@media (min-width: 768px) {
	.steps-band {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.steps-band li {
		border-right: 1px solid var(--color-dark-line);
		border-bottom: 0;
	}

	.steps-band li:last-child {
		border-right: 0;
	}
}

.doc-cat {
	border-left: 3px solid var(--color-navy);
	border-radius: var(--radius);
}

.doc-cat--ask {
	border-left-color: var(--color-brand);
	color: var(--color-brand-strong);
}

.doc-cat--ask .doc-cat__count {
	color: var(--color-brand-strong);
}

.doc-detail__media.is-blank {
	min-height: 220px;
}

.doc-detail__head {
	margin: var(--space-3) 0 var(--space-1);
	color: var(--color-muted);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   C-4 Knowledge
   -------------------------------------------------------------------------- */
.card__tag {
	display: block;
	color: var(--color-brand-strong);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kn-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
}

.kn-top__big {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.kn-top__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.kn-top__body {
	display: grid;
	gap: 6px;
	padding: var(--space-4);
}

.kn-top__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.25;
}

.kn-top__title a {
	color: var(--color-heading);
	transition: color var(--ease);
}

.kn-top__big:hover .kn-top__title a,
.kn-top__big:focus-within .kn-top__title a {
	color: var(--color-brand-strong);
}

.kn-top__text {
	margin: 0;
	color: var(--color-muted);
}

.kn-top__side {
	display: grid;
	align-content: start;
	gap: var(--space-3);
}

.kn-pick {
	padding: var(--space-4);
	border-radius: var(--radius);
	background: var(--color-navy);
	color: #fff;
}

.kn-pick__title {
	margin: 0 0 var(--space-2);
	color: var(--color-amber);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kn-pick__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pick;
}

.kn-pick__list li {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-2) 0;
	border-top: 1px solid var(--color-dark-line);
	counter-increment: pick;
}

.kn-pick__list li::before {
	content: counter(pick, decimal-leading-zero);
	flex-shrink: 0;
	color: #ff6b70;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 700;
}

.kn-pick__list a {
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 600;
}

.kn-pick__list a:hover {
	color: var(--color-amber);
	text-decoration: none;
}

@media (min-width: 1024px) {
	.kn-top {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: 22px;
	}

	.kn-top__title {
		font-size: 1.25rem;
	}
}

/* Article: TOC inline on phones, sticky side column on desktop. */
.article-page .phead__title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}

.article-layout {
	padding-top: var(--space-5);
}

.article-page .article {
	max-width: 760px;
}

.toc {
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-amber);
	border-radius: var(--radius);
	background: var(--color-tint);
}

.toc--inline {
	margin-bottom: var(--space-5);
}

.toc__title {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.toc__list {
	margin: 0;
	padding: 0 var(--space-4) var(--space-3) calc(var(--space-4) + 18px);
	font-size: var(--fs-sm);
}

.toc__list li + li {
	margin-top: 6px;
}

.toc__list a {
	color: var(--color-heading);
}

.toc__list a:hover {
	color: var(--color-brand-strong);
}

.article-aside {
	display: none;
}

@media (min-width: 1100px) {
	.article-layout--toc {
		display: grid;
		grid-template-columns: minmax(0, 760px) 280px;
		justify-content: center;
		gap: var(--space-6);
	}

	.article-layout--toc .article {
		margin-inline: 0;
	}

	.article-layout--toc .toc--inline {
		display: none;
	}

	.article-aside {
		display: block;
	}

	.toc--side {
		position: sticky;
		top: calc(var(--header-h) + var(--space-4));
	}

	.article-page .phead__title {
		font-size: 1.875rem;
	}
}

/* --------------------------------------------------------------------------
   C-5 Product detail
   -------------------------------------------------------------------------- */
.pd__hero-figure {
	position: relative;
}

.pd__count {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 3px 9px;
	border-radius: var(--radius-sm);
	background: var(--color-navy);
	color: #fff;
	font-size: var(--fs-xs);
	font-variant-numeric: tabular-nums;
}

.pd__keyspecs > div {
	border-left: 3px solid var(--color-navy);
	border-radius: var(--radius-sm);
	background: var(--color-tint);
}

.pd__price {
	border-top: 3px solid var(--color-brand);
	border-radius: var(--radius);
}

.pd__price-value--contact {
	color: var(--color-brand-strong);
	font-family: var(--font-display);
	font-size: 1.25rem;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.pd__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	margin: var(--space-3) 0 0;
	font-size: var(--fs-sm);
	font-weight: 700;
}

.pd__links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--tap);
	color: var(--color-navy);
}

.pd__links a span {
	border-bottom: 2px solid var(--color-amber);
}

.pd__links a:hover {
	color: var(--color-brand-strong);
	text-decoration: none;
}

.pd__links .icon {
	width: 16px;
	height: 16px;
}

/* Sticky section bar: navy (C-5). */
.product-detail .tabbar {
	border-bottom: 0;
	background: var(--color-navy);
}

.product-detail .tabbar__link {
	border-bottom-width: 3px;
	color: #c9d6e5;
}

.product-detail .tabbar__link:hover {
	color: #fff;
	text-decoration: none;
}

.product-detail .tabbar__link[aria-current] {
	border-bottom-color: var(--color-brand);
	color: #fff;
}

.product-detail .tabbar__count {
	color: var(--color-dark-muted);
}

.pd__section-title,
.pd__section-title--sub {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.pd__section-title--sub {
	margin-top: var(--space-6);
}

.pd__fit li {
	border-top: 3px solid var(--color-amber);
	border-radius: var(--radius-sm);
	background: var(--color-tint);
}

.pd__line .media {
	position: relative;
}

.pd__line-num {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	padding: 2px 7px;
	border-radius: var(--radius-sm);
	background: var(--color-navy);
	color: var(--color-amber);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
}

/* Side column: short quote form (06) under a navy head. */
.qbox {
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
}

.qbox__head {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	background: var(--color-navy);
	color: #fff;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.qbox__body {
	padding: var(--space-4);
}

.pd__same-text {
	display: grid;
	min-width: 0;
}

.pd__same-name {
	font-weight: 600;
}

.pd__same-price {
	color: var(--color-brand-strong);
	font-size: var(--fs-xs);
	font-weight: 700;
}

/* Phones: the contact bar is the way to ask; the form stays on the full contact page. */
@media (max-width: 1023.98px) {
	.pd__aside .qbox {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vlib-feat__media img,
	.kn-top__title a {
		transition: none;
	}

	.vlib-feat__main:hover .vlib-feat__media img {
		transform: none;
	}
}

/* C-6 side column order: series → other videos → topics (phones follow the same order). */
.vd__aside > .video-list {
	order: 3;
}

.vd__topics {
	order: 4;
}

@media (min-width: 1024px) {
	.vd__aside > .video-list,
	.vd__topics {
		order: 0;
	}
}

/* Knowledge: room between the chips and the top block. */
.knowledge-page .listing-page__tabs {
	margin-bottom: var(--space-5);
}

/* C-5: the navy breadcrumb strip sits right under the header. */
.product-detail {
	padding-top: 0;
}

.product-detail > .cbar + .container {
	padding-top: var(--space-5);
}

/* ==========================================================================
   Mobile polish (owner UAT iPhone 02/10, FORM WEBSITE-UI-MOBILE-POLISH-DOC-V1-02):
   no empty frames, labels that do not look like buttons, button groups of
   equal height. Plus the 06 lead-form styles that were inline.
   ========================================================================== */

/* Small status badge: text label, not a button (≈24 px, light, no border / shadow). */
.tag-badge {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 8px;
	border-radius: var(--radius-sm);
	background: #eef1f5;
	color: var(--color-muted-strong);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.25;
}

/* Short file strip instead of an empty preview frame: ≤ 96 px phones, ≤ 140 px desktop. */
.doc-strip {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	max-height: 96px;
	padding: var(--space-3) var(--space-4);
	border-left: 3px solid var(--color-navy);
	border-radius: var(--radius-sm);
	background: var(--color-tint);
	overflow: hidden;
}

.doc-strip .file-icon {
	flex-shrink: 0;
}

.doc-strip__text {
	min-width: 0;
	color: var(--color-muted-strong);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.doc-strip--card {
	border-left: 0;
	border-radius: 0;
}

@media (min-width: 1024px) {
	.doc-strip {
		max-height: 140px;
	}
}

/* Button groups: phones = one column, full width, 48 px; desktop = one row, same height.
   Red action first, Zalo next, outline / light buttons last. */
.btn-stack,
.vd__actions,
.vlib-feat__actions,
.pd__cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2);
}

.btn-stack .btn,
.vd__actions .btn,
.vlib-feat__actions .btn,
.pd__cta .btn {
	width: 100%;
	min-height: 48px;
	margin: 0;
}

.vd__actions .btn--primary,
.pd__cta .btn--primary {
	order: -2;
}

.vd__actions .btn--zalo,
.pd__cta .btn--zalo {
	order: -1;
}

.pd__cta .btn:last-child:nth-child(odd) {
	grid-column: auto;
}

@media (min-width: 768px) {
	.btn-stack,
	.vd__actions,
	.vlib-feat__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.btn-stack .btn,
	.vd__actions .btn,
	.vlib-feat__actions .btn {
		width: auto;
	}
}

/* Document page: the file strip / badges / buttons first, picture after on phones. */
.doc-detail__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-3);
	margin: 0;
	font-size: var(--fs-sm);
}

.doc-detail__cat {
	color: var(--color-steel);
	font-weight: 600;
}

.doc-detail__cat:hover {
	color: var(--color-brand-strong);
}

.doc-detail__actions {
	margin-top: 0;
}

.doc-detail__includes .doc-detail__head {
	margin-top: 0;
}

.doc-detail__media {
	position: relative;
	display: block;
	min-height: 0;
	margin: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: #fff;
	aspect-ratio: 4 / 3;
}

.doc-detail__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.doc-detail-page .phead__desc {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

@media (max-width: 767.98px) {
	.doc-detail {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		margin-top: 0;
	}

	.doc-detail--image .doc-detail__media {
		order: 2;
		max-height: 50vh;
		width: 100%;
	}

	.doc-detail-page .phead__inner {
		padding-block: var(--space-4) var(--space-5);
	}

	.doc-detail-page .section--tight {
		padding-top: var(--space-4);
	}
}

@media (min-width: 768px) {
	.doc-detail:not(.doc-detail--image) {
		grid-template-columns: minmax(0, 1fr);
		max-width: 760px;
	}

	.doc-detail-page .phead__desc {
		-webkit-line-clamp: 3;
	}
}

/* Video page / product photo / player without anything to show: a short strip. */
.player--empty .player__frame {
	height: 96px;
	min-height: 0;
	aspect-ratio: auto;
}

.player--empty .player__empty {
	flex-direction: row;
	gap: var(--space-2);
}

.pd__hero-empty {
	height: 96px;
	min-height: 0;
	aspect-ratio: auto;
}

@media (min-width: 1024px) {
	.player--empty .player__frame,
	.pd__hero-empty {
		height: 140px;
	}
}

/* Contact buttons: Viber shows its number on a small second line, not a wrapped label. */
.contact-channel__text {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.25;
	min-width: 0;
}

.contact-channel__sub {
	font-size: 0.75rem;
	font-weight: 500;
	white-space: nowrap;
	opacity: 0.85;
}

/* 06 lead form — moved from inline styles (same look). */
.lead-form__chat {
	margin: 0 0 20px;
}

.lead-form__chat > .lead-form__label {
	margin: 0 0 8px;
}

.lead-form__chat-buttons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
}

.lead-form__chat > .lead-form__hint {
	margin: 12px 0 0;
}

.lead-form__title {
	margin: 0 0 8px;
	font-size: 1.25rem;
	font-weight: 700;
}

.lead-form__phone {
	display: flex;
	gap: 8px;
}

.lead-form__phone > select {
	flex: 0 0 auto;
	width: auto;
	max-width: 9.5em;
}

.lead-form__phone > input {
	flex: 1 1 auto;
	min-width: 0;
}

@media (min-width: 1024px) {
	.pd__cta {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
	}

	.pd__cta .btn {
		width: auto;
	}
}

/* Product categories: text links, not button-like chips (owner UAT 02/10). */
.pd__cats .chip,
.pd__cats .chip:hover {
	min-height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-steel);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.pd__cats .chip:hover {
	color: var(--color-brand-strong);
	text-decoration: underline;
}

@media (max-width: 767.98px) {
	.pd__cats .chip {
		min-height: var(--tap);
	}
}

/* Specs table fits the phone: no sideways scroll that hid the values (found in this pass). */
@media (max-width: 767.98px) {
	.pd__specs-table {
		min-width: 0;
		table-layout: fixed;
	}

	.pd__specs-table tbody th {
		width: 45%;
		white-space: normal;
	}

	.pd__specs-table tbody th,
	.pd__specs-table tbody td {
		overflow-wrap: anywhere;
	}
}

/* ==========================================================================
   Style C — soft & even pass (0.7.0, owner UAT 02/10: "chữ chưa tròn trịa …
   hình cứng, không có góc … bo tròn nhìn đẹp hơn"; values chosen by 01).
   Same colours and layout; only the scale, corners, shadows and spacing.
   Type scale: 12 · 14 · 16 (body) · 18 · 20 · 24 · 30 · 36 (H1 desktop; 28 phones).
   Weights 400 / 500 / 600 / 700. Line-height: body 1.65, headings 1.25, labels 1.4.
   Corners: cards 12 · buttons / inputs 10 · chips / badges pill · video / big pictures 14 · menus 12.
   ========================================================================== */

:root {
	--fs-xs: 0.75rem;     /* 12 */
	--fs-sm: 0.875rem;    /* 14 */
	--fs-base: 1rem;      /* 16 body */
	--fs-h3: 1rem;        /* 16 phones, 18 desktop */
	--fs-h2: 1.25rem;     /* 20 phones, 24 desktop */
	--fs-h1: 1.5rem;      /* 24 phones, 30 desktop (inner pages) */
	--fs-display: 1.75rem; /* 28 phones, 36 desktop */
	--lh-base: 1.65;
	--lh-tight: 1.25;
	--ls-heading: 0;
	--ls-label: 0.06em;
	--radius-sm: 10px;    /* buttons, inputs, selects */
	--radius: 12px;       /* cards, blocks, card pictures, menus */
	--radius-lg: 14px;    /* video frames, big pictures */
	--radius-pill: 999px; /* chips, badges, small pill buttons */
	--color-border: #e3e8ef;
	--shadow-card: 0 1px 2px rgba(15, 27, 45, 0.06);
	--shadow-raised: 0 10px 24px rgba(15, 27, 45, 0.12);
	--shadow-btn: none;
}

@media (min-width: 1024px) {
	:root {
		--fs-base: 1rem;
		--fs-h3: 1.125rem;
		--fs-h2: 1.5rem;
		--fs-h1: 1.875rem;
		--fs-display: clamp(1.875rem, 2.7vw, 2.25rem); /* 30 → 36 at 1366 */
	}
}

body {
	line-height: var(--lh-base);
	letter-spacing: 0;
}

h1,
h2,
h3,
h4 {
	line-height: var(--lh-tight);
}

/* Block titles (caps Barlow): one step smaller, tighter spacing — 20 phones / 24 desktop. */
.section-head__title,
.cta-box--band .cta-box__title {
	font-size: 1.25rem;
	letter-spacing: 0.01em;
	line-height: 1.25;
}

.pd__section-title,
.pd__section-title--sub {
	font-size: 1.25rem;
}

.accordion__num + .accordion__text .accordion__title,
.qbox__head {
	font-size: 1rem;
}

@media (min-width: 1024px) {
	.section-head__title,
	.cta-box--band .cta-box__title {
		font-size: 1.5rem;
	}
}

/* Page H1: 28 phones / 36 desktop. */
.phead__title {
	font-size: 1.75rem;
	letter-spacing: 0.01em;
	line-height: 1.25;
}

@media (min-width: 1024px) {
	.phead__title {
		font-size: 2.25rem;
	}
}

/* Small labels: caps, 0.06em, line-height 1.4. */
.section-head__num,
.phead__eyebrow,
.hero__kicker,
.card__tag,
.mag__tag,
.vfeature__tag,
.vlib-feat__tag,
.sol-card__label,
.drawing-card__label,
.buy-band__label,
.menu-panel__feat-label,
.filter-rows__label,
.kn-pick__title,
.tag-badge {
	line-height: 1.4;
}

/* Card names 600, block titles 700. */
.card__title,
.card__title a,
.vfeature__name,
.vfeature__title,
.vlib-feat__title,
.mag__title,
.kn-top__title,
.sol-card__title,
.drawing-card__title,
.machine-card__title,
.pd__same-name,
.series__title {
	font-weight: 600;
}

/* Cards: 12 px, 1 px border, light shadow; the colour line is a 3 px bar that follows the corners. */
.card {
	--card-accent: transparent;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

/* 3 px colour bar drawn above the card picture, clipped by the rounded corners. */
.card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	height: 3px;
	background: var(--card-accent);
	pointer-events: none;
}

.card:hover,
.card:focus-within {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-raised);
}

.card--plain,
.card--plain:hover,
.card--plain:focus-within {
	overflow: visible;
	border: 0;
	box-shadow: none;
}

.card :focus-visible {
	outline-offset: -3px;
}

.card--group,
.card--product,
.card--category,
.series-card {
	--card-accent: var(--color-navy);
	border-top: 1px solid var(--color-border);
}

.card--doc,
.drawing-card,
.card--post-text {
	--card-accent: var(--color-brand);
	border-top: 1px solid var(--color-border);
}

.sol-card {
	--card-accent: var(--color-amber);
	border-top: 1px solid var(--color-border);
}

.card--more,
.card--more:hover,
.card--more:focus-visible {
	border: 0;
	box-shadow: var(--shadow-card);
}

/* Other blocks with a colour line: same soft bar. */
.pd__price {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: inset 0 3px 0 var(--color-brand), var(--shadow-card);
}

.pd__fit li {
	border-top: 0;
	border-radius: var(--radius);
	box-shadow: inset 0 3px 0 var(--color-amber);
}

.solution {
	border-top: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: inset 0 3px 0 var(--color-brand), var(--shadow-card);
}

.pd__keyspecs > div,
.doc-strip,
.doc-cat,
.toc,
.machine-card {
	border-radius: var(--radius);
}

/* Pills: chips, badges, counters, small buttons. */
.chip,
.tag-badge,
.media__badge,
.card__status,
.doc-row__access,
.drawing-card__fmt,
.pd__count,
.pd__line-num,
.player__duration,
.hero-video__duration,
.video-featured__badge,
.collapse__toggle,
.btn--sm {
	border-radius: var(--radius-pill);
}

.media__badge {
	padding: 2px 8px;
}

.file-icon {
	border-radius: var(--radius-sm);
}

/* Video frames and big pictures: 14 px. */
.hero__frame,
.vfeature__big,
.vlib-feat__media,
.player__frame,
.pd__hero-figure,
.pd__hero-empty,
.doc-detail__media,
.vmodal,
.article__hero img {
	border-radius: var(--radius-lg);
}

.vfeature__thumb,
.mag__media,
.series__thumb,
.video-list__thumb,
.pd__thumb,
.pd__thumbs li,
.menu-panel__feat img {
	border-radius: var(--radius-sm);
}

/* Menus: 12 px panels, rows 10 px. */
.primary-nav .menu-panel {
	border-radius: 0 0 var(--radius) var(--radius);
	overflow: hidden;
}

.primary-nav .menu-panel__all {
	border-radius: 0;
}

.drawer__panel {
	border-radius: 0 var(--radius) var(--radius) 0;
}

/* Blocks / boxes on the 4-8 px grid; card padding 16 phones, 20 desktop. */
.card__body {
	padding: 16px;
}

.cta-box:not(.cta-box--band),
.panel,
.empty-state,
.qbox,
.vd__summary,
.kn-pick,
.buy-band,
.steps-band {
	border-radius: var(--radius);
}

@media (min-width: 1024px) {
	.card__body {
		padding: 16px 20px 20px;
	}
}

/* Buttons: 10 px corners, no heavy glow. */
.btn,
.icon-btn,
.search-form__input,
.lead-form__input,
.phead__search {
	border-radius: var(--radius-sm);
}

.btn--primary,
.btn--primary:hover {
	box-shadow: none;
}

/* ==========================================================================
   Desktop drop-downs — copied from 01's PROTOTYPE approved by the owner 02/10
   ("Ok giao diện menu"; FORM WEBSITE-DROPDOWN-ALIGN-TO-PROTOTYPE-V1-02).
   Values are the prototype's: sheet #F6F8FB, line #E6EBF1, corners 10 / 8,
   two-layer soft shadow, Be Vietnam Pro only, caps grey group heads with a
   small red icon, small text 12.5, pills #EDF1F6.
   0.8.1 (FORM WEBSITE-DROPDOWN-COMPACT-SPLITVIEW-IMPLEMENT-V1-01): text rows
   instead of tiles — products split-view, compact video, two-column knowledge.
   Phones keep the drawer (plain rows, no pictures).
   ========================================================================== */

:root {
	--dd-surface: #f6f8fb;
	--dd-line: #e6ebf1;
	--dd-r-panel: 10px;
	--dd-r-tile: 8px;
	--dd-shadow: 0 18px 40px rgba(10, 20, 34, 0.18), 0 2px 6px rgba(10, 20, 34, 0.06);
	--dd-tile-shadow: 0 1px 3px rgba(10, 20, 34, 0.08);
	--dd-muted: #5e6b7c;
	--dd-kid: #3c4859;
	--dd-pill: #edf1f6;
	--dd-pink: #fdf1f1;
}

@media (min-width: 1024px) {
	/* Nav: 15 / 600; the open item gets a light pill + 3 px red line under the header. */
	.site-header .primary-nav__list > li > a {
		font-family: var(--font-body);
		font-size: 0.9375rem;
		font-weight: 600;
	}

	.primary-nav__list > li.is-open > a::before {
		content: "";
		position: absolute;
		top: 50%;
		right: -30px;
		left: -12px;
		z-index: -1;
		height: 42px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.08);
		transform: translateY(-50%);
	}

	.site-header .primary-nav__list > li.is-open > a {
		color: #fff;
	}

	/* Page behind dims while a menu is open (prototype). */
	body.has-menu-open::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: calc(var(--z-header) - 1);
		background: rgba(10, 20, 34, 0.28);
		pointer-events: none;
	}

	/* Sheet. */
	.primary-nav .menu-panel {
		top: calc(100% + 10px);
		right: auto;
		left: 0;
		width: auto;
		max-width: 100%;
		padding: 0;
		border: 1px solid var(--dd-line);
		border-radius: var(--dd-r-panel);
		background: var(--dd-surface);
		box-shadow: var(--dd-shadow);
		color: var(--color-text);
		overflow: visible;
	}

	/* Hover bridge over the 10 px gap. */
	.primary-nav .menu-panel::before {
		content: "";
		position: absolute;
		top: -12px;
		right: 0;
		left: 0;
		height: 12px;
	}

	.primary-nav .menu-panel .menu-panel__inner {
		display: block;
		padding: 0;
	}

	.primary-nav .menu-panel a {
		min-height: 0;
		white-space: normal;
	}

	.primary-nav .menu-panel a:hover {
		text-decoration: none;
	}

	.dd-small {
		color: var(--dd-muted);
		font-size: 0.78125rem; /* 12.5 */
	}

	/* Group head: red icon + caps grey label (+ "Xem tất cả →"). */
	.dd-gh {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 0 10px;
		color: var(--dd-muted);
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.dd-gh .icon {
		width: 16px;
		height: 16px;
		color: var(--color-brand);
	}

	.dd-ghx {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.dd-ghx .dd-gh {
		margin: 0;
	}

	.primary-nav .dd-more {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 24px; /* WCAG 2.5.8 */
		color: var(--color-brand-strong);
		font-weight: 600;
	}

	.dd-ghx .dd-more {
		font-size: 0.8125rem;
	}

	.dd-more .icon {
		width: 16px;
		height: 16px;
	}

	.primary-nav .dd-more:hover {
		color: var(--color-navy);
	}

	.dd-foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 24px;
		border-top: 1px solid var(--dd-line);
		font-size: var(--fs-sm);
	}

	.dd-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dd-badge {
		padding: 2px 9px;
		border-radius: 999px;
		background: var(--dd-pill);
		color: var(--dd-muted);
		font-size: var(--fs-xs);
		white-space: nowrap;
	}

	/* Compact rows (FORM WEBSITE-DROPDOWN-COMPACT-SPLITVIEW-IMPLEMENT-V1-01, Quỳnh concept, owner OK 02/10):
	   text first — small icon · name · light count · chevron; 14–14.5 px, line-height 1.4–1.5. */
	.dd-cats,
	.dd-kidlist {
		display: grid;
		gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dd-lico {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		overflow: hidden;
		border: 1px solid var(--dd-line);
		border-radius: 8px;
		background: #fff;
		color: var(--dd-muted);
	}

	.dd-lico img {
		width: 28px;
		height: 28px;
		object-fit: contain;
	}

	.dd-lico .icon {
		width: 16px;
		height: 16px;
	}

	.dd-ico {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border-radius: 8px;
		background: var(--dd-pink);
		color: var(--color-brand-strong);
	}

	.dd-ico .icon {
		width: 16px;
		height: 16px;
	}

	.primary-nav .dd-line,
	.primary-nav .dd-cat {
		position: relative;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 5px 10px;
		border-radius: 8px;
		color: var(--color-heading);
		line-height: 1.5;
		transition: background-color var(--ease), box-shadow var(--ease);
	}

	.primary-nav .dd-line {
		min-height: 42px;
	}

	.dd-line > .icon,
	.dd-cat > .icon,
	.dd-kid .icon {
		flex-shrink: 0;
		width: 14px;
		height: 14px;
		color: var(--dd-muted);
		opacity: 0.6;
	}

	.dd-ln {
		flex: 1;
		min-width: 0;
		font-size: 0.875rem; /* 14 */
		font-weight: 500;
	}

	.dd-ct {
		display: grid;
		flex: 1;
		min-width: 0;
	}

	.dd-cn {
		font-size: 0.90625rem; /* 14.5 */
		font-weight: 600;
		line-height: 1.35;
	}

	.dd-cat .dd-small {
		line-height: 1.35;
	}

	/* Hover / focus / active: white row, navy text, red chevron; active category gets a thin red marker. */
	.primary-nav .dd-line:hover,
	.primary-nav .dd-line:focus-visible,
	.primary-nav .dd-cat:hover,
	.primary-nav .dd-cat:focus-visible,
	.primary-nav .dd-cat.is-active {
		background: #fff;
		box-shadow: var(--dd-tile-shadow);
		color: var(--color-navy);
	}

	.dd-cat.is-active::before {
		content: "";
		position: absolute;
		top: 9px;
		bottom: 9px;
		left: 0;
		width: 3px;
		border-radius: 2px;
		background: var(--color-brand);
	}

	.dd-cat.is-active > .icon,
	.dd-line:hover > .icon,
	.dd-line:focus-visible > .icon,
	.dd-kid:hover .icon {
		color: var(--color-brand);
		opacity: 1;
	}

	/* Products split-view: 7 categories left, groups of the active one right. */
	.dd-split {
		display: grid;
		grid-template-columns: 340px minmax(0, 1fr);
	}

	.dd-cats {
		padding: 12px;
		border-right: 1px solid var(--dd-line);
	}

	.dd-panes {
		min-width: 0;
		padding: 18px 22px;
	}

	.dd-pane__t {
		margin: 0 0 10px;
		color: var(--color-heading);
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.4;
	}

	.primary-nav .dd-kid {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-inline: -10px;
		padding: 7px 10px;
		border-radius: 8px;
		color: var(--dd-kid);
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.5;
	}

	.primary-nav .dd-kid:hover,
	.primary-nav .dd-kid:focus-visible {
		background: #fff;
		box-shadow: var(--dd-tile-shadow);
		color: var(--color-brand-strong);
	}

	.dd-pane__d {
		max-width: 38ch;
		margin: 0;
		color: var(--dd-muted);
		font-size: 0.875rem;
		line-height: 1.55;
	}

	.primary-nav .dd-pane__all {
		display: flex;
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid var(--dd-line);
		font-size: 0.875rem;
	}

	/* Video: one compact column (by machine · by purpose). Knowledge: two text columns. */
	.dd-stack {
		display: grid;
		gap: 10px;
		padding: 14px 12px 10px;
	}

	.dd-sec + .dd-sec {
		padding-top: 10px;
		border-top: 1px solid var(--dd-line);
	}

	.dd-kwrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	}

	.dd-col {
		min-width: 0;
		padding: 14px 12px 10px;
	}

	.dd-col + .dd-col {
		border-left: 1px solid var(--dd-line);
	}

	.dd-kwrap > .dd-col:only-child {
		grid-column: 1 / -1;
	}

	.dd-stack .dd-gh,
	.dd-kwrap .dd-gh {
		margin: 0 0 4px;
		padding: 0 10px;
	}
}

/* Desktop: each sheet sits under its own item and keeps its own width (650–750 / 380–460 / 500–600). */
@media (min-width: 1024px) {
	.primary-nav__list > .menu-item--products,
	.primary-nav__list > .menu-item--video,
	.primary-nav__list > .menu-item--knowledge {
		position: relative;
	}

	.primary-nav .menu-panel--products,
	.primary-nav .menu-panel--video,
	.primary-nav .menu-panel--knowledge {
		top: calc(100% + 10px);
		right: auto;
		max-width: none; /* the item is narrow; the sheet keeps its own width */
	}

	.primary-nav .menu-panel--products {
		left: -14px;
		width: 720px;
	}

	.primary-nav .menu-panel--video {
		left: -14px;
		width: 440px;
	}

	.primary-nav .menu-panel--knowledge {
		left: -76px;
		width: 600px;
	}
}

/* Header bits of the approved prototype: icon on "Báo giá", 260 px search from 1280. */
@media (min-width: 1024px) {
	.site-header__quote .icon {
		width: 18px;
		height: 18px;
	}
}

/* Wide desktop: 260 px search. */
@media (min-width: 1280px) {
	.site-header .site-header__search {
		width: 260px;
	}
}

/* Drawer (phones / tablets): plain rows — no pictures, 44 px targets. */
.drawer .dd-grid,
.drawer .dd-vwrap,
.drawer .dd-kwrap,
.drawer .dd-list,
.drawer .dd-kids {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.drawer .dd-thumb,
.drawer .dd-row img,
.drawer .dd-row__ph,
.drawer .dd-vth,
.drawer .dd-pack img,
.drawer .dd-pack__ph,
.drawer .dd-ico,
.drawer .dd-gh .icon,
.drawer .dd-kids .icon,
.drawer .dd-pd,
.drawer .dd-gap,
.drawer .dd-foot .dd-small,
.drawer .dd-more .icon {
	display: none;
}

.drawer .dd-tile__body {
	display: grid;
}

.drawer .dd-tn,
.drawer .dd-row,
.drawer .dd-vcard,
.drawer .dd-pack,
.drawer .dd-topic,
.drawer .dd-kids a,
.drawer .dd-more {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--tap);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.drawer .dd-kids a {
	padding-left: var(--space-3);
	color: var(--color-muted-strong);
	font-weight: 500;
}

.drawer .dd-tile .dd-small {
	margin-top: -8px;
	color: var(--color-muted);
	font-size: var(--fs-xs);
}

.drawer .dd-gh {
	margin: var(--space-2) 0 0;
	color: var(--color-muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.drawer .dd-ghx {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.drawer .dd-ghx .dd-more {
	color: var(--color-brand-strong);
	font-size: var(--fs-xs);
}

.drawer .dd-badge,
.drawer .dd-vtext .dd-small {
	margin-left: auto;
	color: var(--color-muted);
	font-size: var(--fs-xs);
	font-weight: 400;
}

.drawer .dd-vtext {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--space-2);
}

.drawer .dd-pack__text {
	display: block;
}

.drawer .dd-foot .dd-more {
	color: var(--color-brand-strong);
}

@media (prefers-reduced-motion: reduce) {
	.dd-line,
	.dd-cat {
		transition: none;
	}
}

/* ==========================================================================
   Homepage — approved prototype (docs/ui/prototype/proto-home.html, owner
   02/10; FORM WEBSITE-HOMEPAGE-PROTOTYPE-IMPLEMENT-L2-02). Values copied from
   the prototype: page #F6F8FB, sentence-case 22/700 block titles, no "01 /"
   numbers, no caps Barlow on the homepage. Phones / tablets derived from the
   same system (no phone prototype).
   ========================================================================== */

.home--proto {
	--hp-surface: #f6f8fb;
	--hp-line: #e6ebf1;
	--hp-muted: #5e6b7c;
	--hp-pink: #fdf1f1;
	background: var(--hp-surface);
}

/* Hero: full-bleed photo + dark gradient from the left. */
.hero--photo {
	position: relative;
	overflow: hidden;
	background: #0b1626;
	background-image: none;
	color: #fff;
}

.hero--photo.hero--no-photo {
	background-color: var(--color-navy);
	background-image: var(--grid-lines);
	background-size: 32px 32px;
}

.hero--photo .hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0; /* the older .hero__bg rule puts it at -2, under the section background */
	max-width: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-pos, 70% 45%);
}

.hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Phone: text spans the full width, so the photo is dimmed evenly. */
	background: linear-gradient(180deg, rgba(9, 17, 30, 0.8) 0%, rgba(9, 17, 30, 0.88) 100%);
}

@media (min-width: 768px) {
	.hero--photo::before {
		background: linear-gradient(90deg, rgba(9, 17, 30, 0.94) 0%, rgba(9, 17, 30, 0.82) 38%, rgba(9, 17, 30, 0.25) 75%, rgba(9, 17, 30, 0.1) 100%);
	}
}

.hero--photo .hero__inner {
	position: relative;
	z-index: 2;
	display: block;
	min-height: 0;
	padding-block: 40px 76px;
}

.hero--photo .hero__kicker {
	margin: 0;
	color: #ff6b70;
	font-size: 0.78125rem; /* 12.5 */
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hero--photo .hero__title {
	max-width: 620px;
	margin: 10px 0 14px;
	color: #fff;
	font-family: var(--font-body);
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
}

.hero--photo .hero__text {
	max-width: 560px;
	margin: 0 0 26px;
	color: #d6dee8;
	font-size: 1rem;
	line-height: 1.6;
}

.hero--photo .hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hero--photo .hero__actions .btn {
	gap: 8px;
	min-height: 46px;
	padding: 0 20px;
	border-radius: 8px;
	font-size: 0.9375rem;
	font-weight: 600;
}

.hero--photo .btn--ghost {
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	background: transparent;
	color: #fff;
}

.hero--photo .btn--ghost:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.hero--photo .btn .icon {
	width: 18px;
	height: 18px;
}

@media (min-width: 768px) {
	.hero--photo .hero__inner {
		padding-block: 58px 0;
		height: 430px;
	}

	.hero--photo .hero__title {
		font-size: 2.875rem; /* 46 */
	}

	.hero--photo .hero__text {
		font-size: 1.03125rem; /* 16.5 */
	}
}

/* Trust card floating over the hero edge. */
.trust--card {
	position: relative;
	z-index: 3;
	margin-top: -46px;
	border: 0;
	background: transparent;
	color: var(--color-text);
}

.trust--card .trust__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	max-width: 1100px;
	margin: 0 auto;
	padding: 8px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 14px 34px rgba(10, 20, 34, 0.14);
}

.trust--card .trust__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 10px;
	text-align: left;
}

.trust--card .trust__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hp-pink);
	color: var(--color-brand-strong);
}

.trust--card .trust__icon .icon {
	width: 19px;
	height: 19px;
}

.trust--card .trust__text strong {
	display: block;
	color: var(--color-heading);
	font-size: 0.875rem;
	font-weight: 600;
}

.trust--card .trust__text span {
	display: block;
	color: var(--hp-muted);
	font-size: 0.75rem;
}

.trust--card .trust__text span::before {
	content: none;
}

/* Phone: icon above the text so each half-width cell keeps its width for words. */
@media (max-width: 767.98px) {
	.trust--card .trust__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.trust--card .trust__icon {
		width: 34px;
		height: 34px;
	}

	.trust--card .trust__icon .icon {
		width: 17px;
		height: 17px;
	}
}

@media (min-width: 1024px) {
	.trust--card .trust__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding: 18px 8px;
	}

	.trust--card .trust__item {
		padding: 0 18px;
	}

	.trust--card .trust__item + .trust__item {
		border-left: 1px solid var(--hp-line);
	}

	.trust--card .trust__text strong {
		font-size: 0.90625rem; /* 14.5 */
	}

	.trust--card .trust__text span {
		font-size: 0.78125rem; /* 12.5 */
	}
}

/* Section rhythm + heads (sentence case, 22/700, red "Xem tất cả →"). */
.hsec {
	padding-top: 30px;
}

.hsec__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.hsec__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-body);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.hsec__more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: var(--tap);
	color: var(--color-brand-strong);
	font-size: 0.84375rem; /* 13.5 */
	font-weight: 600;
	white-space: nowrap;
}

a.hsec__more:hover {
	color: var(--color-navy);
	text-decoration: none;
}

.hsec__more .icon {
	width: 15px;
	height: 15px;
}

@media (min-width: 1024px) {
	.hsec__title {
		font-size: 1.375rem; /* 22 */
	}

	.hsec__more {
		min-height: 24px; /* WCAG 2.5.8 minimum on pointer screens */
	}
}

.hcats,
.hvlist,
.hsols,
.hposts {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Categories: one row of 8 on desktop. */
.hcats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.hcats > li {
	display: flex;
	min-width: 0;
}

.hcat {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 10px 12px 12px;
	border: 1px solid var(--hp-line);
	border-radius: 10px;
	background: #fff;
	color: var(--color-heading);
	transition: box-shadow var(--ease), border-color var(--ease);
}

.hcat:hover {
	border-color: var(--color-border-strong);
	box-shadow: 0 8px 20px rgba(15, 27, 45, 0.1);
	text-decoration: none;
}

.hcat__im {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 78px;
}

.hcat__im img {
	max-width: 100%;
	max-height: 78px;
	object-fit: contain;
}

.hcat__name {
	min-height: 35px;
	font-size: 0.84375rem; /* 13.5 */
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.hcat:hover .hcat__name {
	color: var(--color-brand-strong);
}

.hcat__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	margin-top: auto;
	color: var(--hp-muted);
	font-size: 0.75rem;
}

.hcat__meta .icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	color: var(--color-brand-strong);
}

.hcat--all {
	align-items: center;
	justify-content: center;
	border: 0;
	background: #eef2f7;
	text-align: center;
}

.hcat--all .hcat__ic {
	color: #3a4c66;
}

.hcat--all .hcat__ic .icon {
	width: 40px;
	height: 40px;
	stroke-width: 1.4;
}

.hcat--all .hcat__name {
	min-height: 0;
	color: var(--color-brand-strong);
}

.hcat--all .hcat__meta {
	justify-content: center;
	margin-top: 0;
}

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

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

/* Videos + solutions: two columns from 1024. */
.hduo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
}

.hduo__col {
	min-width: 0;
}

.hvbig {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid var(--hp-line);
	border-radius: 10px;
	background: #fff;
	color: var(--color-heading);
}

.hvbig:hover,
.hvrow:hover,
.hsol:hover,
.hpost:hover {
	border-color: var(--color-border-strong);
	box-shadow: 0 8px 20px rgba(15, 27, 45, 0.1);
	text-decoration: none;
}

.hvth {
	position: relative;
	display: block;
	overflow: hidden;
	background: #0d1622;
}

.hvth img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hvbig .hvth {
	aspect-ratio: 16 / 9;
}

.hplay {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(15, 27, 45, 0.75);
}

.hplay::after {
	content: "";
	margin-left: 3px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 13px solid #fff;
}

.hplay--sm {
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border-width: 1.5px;
}

.hplay--sm::after {
	margin-left: 2px;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 8px;
}

.hvbig__tx {
	display: grid;
	gap: 8px;
	padding: 16px;
}

.hvbig__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

.hvbig__line {
	color: var(--hp-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.hmeta {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--hp-muted);
	font-size: 0.75rem;
}

.hmeta .icon {
	width: 13px;
	height: 13px;
}

.hvlist {
	display: grid;
	gap: 8px;
	margin-top: 10px;
}

.hvrow {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 7px;
	border: 1px solid var(--hp-line);
	border-radius: 10px;
	background: #fff;
	color: var(--color-heading);
}

.hvrow .hvth {
	height: 62px;
	border-radius: 6px;
}

.hvrow__tx {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.hvrow__title {
	font-size: 0.84375rem;
	font-weight: 600;
	line-height: 1.35;
}

.hvbig:hover .hvbig__title,
.hvrow:hover .hvrow__title,
.hsol:hover .hsol__name,
.hpost:hover .hpost__title {
	color: var(--color-brand-strong);
}

.hsols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.hsols > li {
	display: flex;
	min-width: 0;
}

.hsol {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 10px 12px 14px;
	border: 1px solid var(--hp-line);
	border-radius: 10px;
	background: #fff;
	color: var(--color-heading);
}

.hsol__im {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 92px;
	border-radius: 8px;
	background: #f3f6fa;
}

.hsol__im img {
	max-width: 90%;
	max-height: 84px;
	object-fit: contain;
}

.hsol__name {
	font-size: 0.875rem;
	font-weight: 600;
}

.hsol__desc {
	min-height: 54px;
	color: var(--hp-muted);
	font-size: 0.78125rem;
	line-height: 1.45;
}

.hsol__more {
	min-height: 0;
	margin-top: auto;
}

@media (min-width: 768px) {
	.hvbig {
		grid-template-columns: 270px minmax(0, 1fr);
	}

	.hvbig .hvth {
		height: 156px;
		aspect-ratio: auto;
	}

	.hsols {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.hduo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

/* Knowledge: 4 horizontal cards, the first one wider with a summary. */
.hposts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.hposts > li {
	display: flex;
	min-width: 0;
}

.hpost {
	display: grid;
	flex: 1;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 8px;
	border: 1px solid var(--hp-line);
	border-radius: 10px;
	background: #fff;
	color: var(--color-heading);
}

.is-first .hpost {
	grid-template-columns: 140px minmax(0, 1fr);
}

.hpost__im {
	display: block;
	height: 92px;
	overflow: hidden;
	border-radius: 7px;
	background: #eef2f7;
}

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

.hpost__tx {
	display: grid;
	gap: 5px;
	min-width: 0;
	justify-items: start;
}

.hpill {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.4;
}

.hpill--red {
	background: #fdecec;
	color: #b4141a;
}

.hpill--green {
	background: #e6f5ec;
	color: #17763f;
}

.hpill--blue {
	background: #e8f0fc;
	color: #1f57b8;
}

.hpill--grey {
	background: #eef1f5;
	color: #4a5563;
}

.hpost__title {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
}

.hpost__ex {
	color: var(--hp-muted);
	font-size: 0.75rem;
	line-height: 1.45;
}

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

@media (min-width: 1100px) {
	.hposts {
		grid-template-columns: 1.35fr 1fr 1fr 1fr;
	}

	.is-first .hpost {
		grid-template-columns: 170px minmax(0, 1fr);
	}
}

/* Dark photo call-to-action band. */
.hcta {
	position: relative;
	margin-top: 30px;
	background: #0b1626 var(--hcta-img, none) center / cover no-repeat;
	color: #fff;
}

.hcta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(9, 17, 30, 0.92), rgba(9, 17, 30, 0.7));
}

.hcta__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-block: 22px;
}

.hcta__title {
	margin: 0;
	color: #fff;
	font-family: var(--font-body);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.hcta__text {
	margin: 4px 0 0;
	color: #c7d2df;
	font-size: 0.875rem;
}

.hcta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hcta__actions .btn {
	min-height: 46px;
	padding: 0 20px;
	border-radius: 8px;
	font-size: 0.9375rem;
	font-weight: 600;
}

@media (min-width: 768px) {
	.hcta__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.hcta__title {
		font-size: 1.375rem;
	}
}

@media (max-width: 767.98px) {
	.hcta__actions .btn {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hcat {
		transition: none;
	}
}

/* ==========================================================================
   Product pages — approved prototype docs/ui/prototype/san-pham/ (owner
   "chốt bản mẫu sản phẩm" 02/10; FORM WEBSITE-PRODUCT-PAGES-V1-01).
   Values copied from sp.css / list.html / detail.html: page #F4F6F9, lines
   #E6EBF1, pink #FDF1F1, link blue #1F57B8, red #C8161C text, cards 10 /
   boxes 12, white 4:3 photos (contain), no caps condensed titles.
   ========================================================================== */

.sp-page {
	--sp-surface: #f4f6f9;
	--sp-line: #e6ebf1;
	--sp-ink: #16202e;
	--sp-muted: #5e6b7c;
	--sp-pink: #fdf1f1;
	--sp-blue: #1f57b8;
	--sp-red: #e31e24;
	--sp-red-d: #c8161c;
	--sp-zalo: #0068ff;
	--sp-icon: #3a4c66;
	background: var(--sp-surface);
	color: var(--sp-ink);
	padding-bottom: 32px;
}

.sp-page .icon {
	flex-shrink: 0;
}

/* Low hero: real workshop photo on the right, navy fade from the left. */
.spl-hero {
	position: relative;
	background: #0b1626 var(--spl-hero, none) 70% 50% / cover no-repeat;
	color: #fff;
}

.spl-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(9, 17, 30, 0.82), rgba(9, 17, 30, 0.93));
}

.spl-hero__in {
	position: relative;
	padding-block: 12px 34px;
}

.spl-hero .breadcrumb,
.spd-crumbs .breadcrumb {
	color: #b9c6d6;
	font-size: 0.8125rem;
}

.spl-hero .breadcrumb a,
.spl-hero .breadcrumb__item + .breadcrumb__item::before,
.spd-crumbs .breadcrumb a,
.spd-crumbs .breadcrumb__item + .breadcrumb__item::before {
	color: #b9c6d6;
}

.spl-hero .breadcrumb a:hover,
.spd-crumbs .breadcrumb a:hover {
	color: #fff;
}

.spl-hero .breadcrumb__item:last-child span,
.spd-crumbs .breadcrumb__item:last-child span {
	color: #fff;
	font-weight: 600;
}

.spl-hero__eb {
	margin: 14px 0 0;
	color: #ff6b70;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.spl-hero__t {
	margin: 6px 0 8px;
	color: #fff;
	font-family: var(--font-body);
	font-size: 1.5625rem; /* 25 */
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-wrap: balance;
}

.spl-hero__d {
	max-width: 560px;
	margin: 0;
	color: #d6dee8;
	font-size: 0.875rem;
	line-height: 1.6;
}

/* Layout: sidebar + main (desktop); phones: one column. */
.spl {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin-top: -18px;
}

.spl-side {
	display: none;
}

.spl-box {
	border: 1px solid var(--sp-line);
	border-radius: 12px;
	background: #fff;
}

.spl-cats {
	padding: 14px 10px 8px;
}

.spl-cats__h {
	margin: 2px 8px 10px;
	color: var(--sp-ink);
	font-size: 1rem;
	font-weight: 700;
}

.spl-ci {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto 14px;
	gap: 8px;
	align-items: center;
	min-height: 44px;
	padding: 8px;
	border-left: 3px solid transparent;
	border-radius: 9px;
	color: var(--sp-ink);
	font-size: 0.875rem;
	line-height: 1.35;
	text-decoration: none;
}

.spl-ci + .spl-ci {
	margin-top: 2px;
}

.spl-ci:hover {
	background: #f6f8fb;
	text-decoration: none;
}

.spl-ci__ic {
	display: flex;
	color: var(--sp-icon);
}

.spl-ci__ic .icon {
	width: 22px;
	height: 22px;
	stroke-width: 1.5;
}

.spl-ci__c {
	color: var(--sp-muted);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.spl-ci > .icon {
	width: 14px;
	height: 14px;
	color: #9aa7b6;
}

.spl-ci.is-on {
	border-left-color: var(--sp-red);
	background: var(--sp-pink);
	color: var(--sp-red-d);
	font-weight: 600;
}

.spl-ci.is-on .spl-ci__ic,
.spl-ci.is-on .spl-ci__c {
	color: var(--sp-red-d);
}

.spl-help {
	padding: 16px;
	border: 0;
	background: #f1f4f8;
}

.spl-help__h {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	font-size: 0.90625rem;
	font-weight: 700;
}

.spl-help__h .icon {
	width: 22px;
	height: 22px;
	color: var(--sp-icon);
}

.spl-help__p {
	margin: 6px 0 12px;
	color: var(--sp-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.spl-help__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--sp-red);
	border-radius: 9px;
	background: #fff;
	color: var(--sp-red-d);
	font-size: 0.875rem;
	font-weight: 600;
}

.spl-help__btn:hover {
	background: var(--sp-pink);
	color: var(--sp-red-d);
	text-decoration: none;
}

.spl-help__btn .icon {
	width: 18px;
	height: 18px;
}

/* Phones: "Danh mục sản phẩm" fold. */
.spl-mcat {
	border: 1px solid var(--sp-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(15, 27, 45, 0.08);
}

.spl-mcat > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 14px;
	font-size: 0.9375rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.spl-mcat > summary::-webkit-details-marker {
	display: none;
}

.spl-mcat > summary span {
	flex: 1;
	min-width: 0;
}

.spl-mcat > summary .icon {
	width: 20px;
	height: 20px;
}

.spl-mcat[open] > summary > .icon:last-child {
	transform: rotate(180deg);
}

.spl-mcat__list {
	padding: 0 8px 8px;
}

/* Bar: chips · sort · total. */
.spl-bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	margin: 12px 0;
}

.spl-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid #d5dce5;
	border-radius: 999px;
	background: #fff;
	color: var(--sp-ink);
	font-size: 0.84375rem;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
}

.spl-chip:hover {
	border-color: var(--sp-ink);
	text-decoration: none;
}

.spl-chip::-webkit-details-marker {
	display: none;
}

.spl-chip .icon {
	width: 15px;
	height: 15px;
}

.spl-chip.is-on {
	border-color: var(--sp-red);
	background: var(--sp-red);
	color: #fff;
	font-weight: 600;
}

.spl-bar > .spl-chip:not(.is-on),
.spl-dd,
.spl-total {
	display: none;
}

.spl-bar__sp {
	flex: 1;
}

.spl-dd {
	position: relative;
}

.spl-dd__list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	width: 300px;
	padding: 8px;
	border: 1px solid var(--sp-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 14px 34px rgba(15, 27, 45, 0.14);
}

.spl-sort {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--sp-muted);
	font-size: 0.84375rem;
}

.spl-sort label {
	display: none;
}

.spl-sort select {
	min-width: 0;
	min-height: 38px;
	padding: 0 32px 0 12px;
	border: 1px solid #d5dce5;
	border-radius: 9px;
	background: #fff;
	color: var(--sp-ink);
	font: inherit;
	font-size: 0.84375rem;
}

.js .spl-sort__go {
	display: none;
}

.spl-sort__go {
	min-height: 38px;
	padding: 0 12px;
	border: 1px solid #d5dce5;
	border-radius: 9px;
	background: #fff;
	font: inherit;
}

.spl-total {
	margin: 0;
	color: var(--sp-muted);
	font-size: 0.84375rem;
}

.spl-total b {
	color: var(--sp-ink);
}

/* Category blocks. */
.spl-blk {
	padding: 12px 10px;
	border: 1px solid var(--sp-line);
	border-radius: 12px;
	background: #fff;
}

.spl-blk + .spl-blk {
	margin-top: 16px;
}

.spl-blk--all {
	padding: 10px;
}

.spl-bh {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
	margin-bottom: 10px;
}

.spl-bh__ic,
.spl-bh__d {
	display: none;
}

.spl-bh__ic {
	padding-top: 2px;
	color: var(--sp-icon);
}

.spl-bh__ic .icon {
	width: 26px;
	height: 26px;
	stroke-width: 1.5;
}

.spl-bh__t {
	margin: 0;
	color: var(--sp-ink);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}

.spl-bh__d {
	margin: 3px 0 0;
	color: var(--sp-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.spl-all {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 24px;
	padding-top: 3px;
	color: var(--sp-blue);
	font-size: 0.84375rem;
	font-weight: 600;
	white-space: nowrap;
}

.spl-all .icon {
	width: 15px;
	height: 15px;
}

.spl-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

/* Card. */
.spc {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--sp-line);
	border-radius: 10px;
	background: #fff;
	transition: box-shadow 0.15s, border-color 0.15s;
}

.spc:hover {
	border-color: #cbd4df;
	box-shadow: 0 8px 22px rgba(15, 27, 45, 0.08);
}

.spc__im {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 8px;
	border-bottom: 1px solid #eef1f5;
	background: #fff;
	color: #c3ccd7;
}

.spc__im img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.spc__bd {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: 9px 9px 10px;
}

.spc__t {
	display: -webkit-box;
	min-height: 37px;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-family: var(--font-body);
	font-size: 0.84375rem;
	font-weight: 600;
	line-height: 1.38;
	letter-spacing: 0;
	text-transform: none;
}

.spc__link {
	color: var(--sp-ink);
}

.spc__link:hover {
	color: var(--sp-red-d);
	text-decoration: none;
}

/* The whole card follows the product link. */
.spc__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.spc__specs {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	color: var(--sp-muted);
	font-size: 0.75rem;
	line-height: 1.4;
	list-style: none;
}

.spc__specs li {
	display: grid;
	grid-template-columns: 15px minmax(0, 1fr);
	gap: 7px;
}

.spc__specs li:nth-child(2) {
	display: none;
}

.spc__specs .icon {
	width: 14px;
	height: 14px;
	margin-top: 2px;
	color: #7d8a9a;
}

.spc__specs b {
	color: #2e3a4a;
	font-weight: 500;
}

.spc__ft {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-top: auto;
	padding-top: 8px;
	border-top: 1px dashed var(--sp-line);
}

.spc__price {
	color: var(--sp-red-d);
	font-size: 0.84375rem;
	font-weight: 600;
}

.spc__price strong {
	font-size: 0.9375rem;
	font-weight: 700;
}

.spc__price small {
	display: block;
	color: var(--sp-muted);
	font-size: 0.6875rem;
	font-weight: 400;
}

.spc__from {
	font-weight: 500;
}

.spc__det {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--sp-blue);
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
}

.spc__det .icon {
	width: 14px;
	height: 14px;
}

/* "Chọn theo nhu cầu". */
.spl-need {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	margin-top: 16px;
	padding: 16px;
	border: 1px solid var(--sp-line);
	border-radius: 12px;
	background: #fff;
}

.spl-need__t {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.spl-need__d {
	margin: 4px 0 0;
	color: var(--sp-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.spl-needs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spl-nd {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	height: 100%;
	min-height: 56px;
	padding: 9px;
	border: 1px solid var(--sp-line);
	border-radius: 10px;
	color: var(--sp-ink);
}

.spl-nd:hover {
	border-color: #cbd4df;
	text-decoration: none;
}

.spl-nd img,
.spl-nd__ph {
	width: 40px;
	height: 34px;
	object-fit: contain;
}

.spl-nd__ph {
	display: grid;
	place-items: center;
	color: #9aa7b6;
}

.spl-nd b {
	display: block;
	font-size: 0.84375rem;
}

.spl-nd small {
	display: none;
	color: var(--sp-muted);
	font-size: 0.75rem;
	line-height: 1.4;
}

/* Category page extras (videos, documents) under the list keep their own blocks. */
.sp-page .section {
	background: transparent;
}

/* 320–359: one column, landscape card. */
@media (max-width: 359.98px) {
	.spl-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.spc {
		display: grid;
		grid-template-columns: 104px minmax(0, 1fr);
	}

	.spc__im {
		aspect-ratio: auto;
		height: 100%;
		min-height: 96px;
		border-right: 1px solid #eef1f5;
		border-bottom: 0;
	}

	.spc__t {
		min-height: 0;
	}
}

@media (min-width: 768px) {
	.spl-hero {
		background-position: 100% 40%;
		background-size: 62% auto;
	}

	.spl-hero::before {
		background: linear-gradient(90deg, #0b1626 0%, #0b1626 38%, rgba(11, 22, 38, 0.55) 60%, rgba(11, 22, 38, 0.1) 100%);
	}

	.spl-hero__in {
		padding-block: 18px 26px;
	}

	.spl-hero__t {
		font-size: 2.125rem; /* 34 */
	}

	.spl-hero__d {
		font-size: 0.96875rem; /* 15.5 */
	}

	.spl {
		margin-top: 24px;
	}

	.spl-bar {
		flex-wrap: wrap;
		gap: 10px;
		margin: 0 0 16px;
	}

	.spl-bar > .spl-chip:not(.is-on),
	.spl-dd,
	.spl-total {
		display: inline-flex;
	}

	.spl-total {
		display: block;
	}

	.spl-sort label {
		display: inline;
	}

	.spl-sort select {
		min-width: 130px;
	}

	.spl-mcat {
		box-shadow: none;
		margin-bottom: 12px;
	}

	.spl-blk {
		padding: 16px 16px 18px;
	}

	.spl-bh {
		grid-template-columns: 34px minmax(0, 1fr) auto;
		margin-bottom: 14px;
	}

	.spl-bh__ic,
	.spl-bh__d {
		display: block;
	}

	.spl-bh__t {
		font-size: 1.125rem;
	}

	.spl-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}

	.spc__bd {
		gap: 7px;
		padding: 11px 12px 12px;
	}

	.spc__t {
		min-height: 40px;
		font-size: 0.90625rem; /* 14.5 */
	}

	.spc__specs {
		font-size: 0.78125rem;
	}

	.spc__specs li:nth-child(2) {
		display: grid;
	}

	.spc__ft {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
	}

	.spl-needs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.spl-nd {
		grid-template-columns: 52px minmax(0, 1fr);
		padding: 10px 12px;
	}

	.spl-nd img,
	.spl-nd__ph {
		width: 52px;
		height: 42px;
	}

	.spl-nd small {
		display: block;
	}
}

@media (min-width: 1024px) {
	.spl {
		grid-template-columns: 268px minmax(0, 1fr);
	}

	/* Sticky on desktop only, own scroll, never over the footer (it is in the grid row). */
	.spl-side {
		position: sticky;
		top: 16px;
		display: flex;
		flex-direction: column;
		gap: 14px;
		max-height: calc(100vh - 32px);
		overflow: auto;
	}

	.spl-mcat {
		display: none;
	}

	.spl-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

}

/* Product detail (prototype detail.html). Phone order: photos → name → key specs → quote box → tabs → panels. */
.spd-crumbs {
	position: relative;
	background: #0b1626 var(--spl-hero, none) 70% 50% / cover no-repeat;
}

.spd-crumbs::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #0b1626 45%, rgba(11, 22, 38, 0.6) 75%, rgba(11, 22, 38, 0.35));
}

.spd-crumbs__in {
	position: relative;
	padding-block: 10px;
}

.spd-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	margin-top: 12px;
}

/* Gallery. */
.spd-gal {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.spd-main {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 14px;
	border: 1px solid var(--sp-line);
	border-radius: 12px;
	background: #fff;
}

.spd-main img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.spd-main__empty {
	color: #c3ccd7;
}

/* Caption of the photo in view (media caption): small, muted, at most 2 lines, under the photo. */
.spd-cap,
.spd-lb__cap {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--sp-muted, #5e6b7c);
	font-size: 0.8125rem;
	line-height: 1.4;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.spd-cap[hidden],
.spd-lb__cap[hidden] {
	display: none;
}

.spd-lb__cap {
	padding: 8px 4px 0;
}

@media (min-width: 768px) {
	.spd-cap {
		order: 3;
		grid-column: 2;
		margin-top: -4px;
	}

	/* One photo, no thumbs: photo and caption span the row. */
	.spd-main:has(+ .spd-cap:last-child),
	.spd-cap:last-child {
		grid-column: 1 / -1;
	}
}

.spd-nav,
.spd-zoom {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(15, 27, 45, 0.15);
	color: var(--sp-ink);
	cursor: pointer;
}

.spd-nav {
	top: 50%;
	transform: translateY(-50%);
}

.spd-nav--l {
	left: 10px;
}

.spd-nav--r {
	right: 10px;
}

.spd-zoom {
	top: 10px;
	right: 10px;
}

.spd-zoom .icon {
	width: 16px;
	height: 16px;
}

.spd-cnt {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--color-navy);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
}

.spd-thumbs {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.spd-th {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 54px;
	padding: 0;
	overflow: hidden;
	border: 1.5px solid var(--sp-line);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
}

.spd-th img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spd-th.is-current {
	border-color: var(--sp-red);
	box-shadow: 0 0 0 1px var(--sp-red);
}

.spd-th__pv {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 20, 34, 0.35);
	color: #fff;
}

.spd-th__pv .icon {
	width: 24px;
	height: 24px;
}

/* Info. */
.spd-cat {
	color: var(--sp-blue);
	font-size: 0.84375rem;
	font-weight: 500;
}

.spd-title {
	margin: 6px 0;
	color: var(--sp-ink);
	font-family: var(--font-body);
	font-size: 1.3125rem; /* 21 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	text-wrap: balance;
}

.spd-code {
	margin: 0;
	color: var(--sp-muted);
	font-size: 0.875rem;
}

.spd-code b {
	margin-left: 6px;
	color: var(--sp-ink);
	font-weight: 500;
	letter-spacing: 0.02em;
}

.spd-lead {
	margin: 10px 0 12px;
	color: #3a4757;
	font-size: 0.875rem;
	line-height: 1.65;
}

.spd-k4 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spd-k {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 8px;
	align-items: center;
	padding: 10px;
	border: 1px solid var(--sp-line);
	border-radius: 10px;
	background: #fff;
}

.spd-k .icon {
	width: 20px;
	height: 20px;
	color: var(--sp-icon);
	stroke-width: 1.5;
}

.spd-k small {
	display: block;
	color: var(--sp-muted);
	font-size: 0.78125rem;
}

.spd-k b {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.spd-share {
	display: none;
}

.spd-share:not([hidden]) {
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sp-muted);
	font: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
}

.spd-share__ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--sp-line);
	border-radius: 50%;
	background: #fff;
}

.spd-share__ic .icon {
	width: 16px;
	height: 16px;
}

/* Quote box. */
.spd-ask {
	padding: 14px;
	border: 1px solid var(--sp-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 26px rgba(15, 27, 45, 0.06);
}

.spd-ask__hd {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	margin: -14px -14px 12px;
	padding: 12px 14px;
	border-radius: 12px 12px 0 0;
	background: var(--sp-pink);
}

.spd-ask__hd .icon {
	width: 30px;
	height: 30px;
	color: var(--sp-red-d);
	stroke-width: 1.5;
}

.spd-ask__t {
	margin: 0;
	color: var(--sp-red-d);
	font-family: var(--font-body);
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.spd-ask__hd p {
	margin: 3px 0 0;
	color: var(--sp-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.spd-ask__pr {
	margin: 0 0 12px;
	color: var(--sp-muted);
	font-size: 0.8125rem;
}

.spd-ask__pr strong {
	display: block;
	color: var(--sp-red-d);
	font-size: 1.375rem;
}

.spd-ask__note {
	margin: -6px 0 12px;
	color: var(--sp-muted);
	font-size: 0.78125rem;
	line-height: 1.5;
}

.spd-ask__col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.spd-ask__q,
.spd-more {
	grid-column: 1 / -1;
}

.spd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	min-height: 46px;
	padding: 0 14px;
	border: 1.5px solid transparent;
	border-radius: 9px;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
}

.spd-btn:hover {
	text-decoration: none;
}

.spd-btn .icon {
	width: 18px;
	height: 18px;
}

.spd-btn--red {
	background: var(--sp-red);
	color: #fff;
}

.spd-btn--red:hover {
	background: var(--sp-red-d);
	color: #fff;
}

.spd-btn--line {
	border-color: #d5dce5;
	background: #fff;
	color: var(--sp-ink);
}

.spd-btn--line:hover {
	border-color: var(--sp-ink);
	color: var(--sp-ink);
}

.spd-ch--zalo .icon {
	color: var(--sp-zalo);
}

.spd-ch--whatsapp .icon {
	color: #128c4a;
}

.spd-ch__l {
	display: none;
}

.spd-more > summary::-webkit-details-marker {
	display: none;
}

.spd-more > summary {
	justify-content: space-between;
	font-size: 0.84375rem;
}

.spd-more__l {
	flex: 1;
	text-align: left;
}

.spd-more[open] > summary > .icon {
	transform: rotate(180deg);
}

.spd-more__list {
	display: grid;
	gap: 8px;
	margin-top: 8px;
}

.spd-more__list .spd-ch__l {
	display: inline;
}

.spd-more__list .spd-ch__s {
	display: none;
}

.spd-dots {
	display: flex;
	gap: 3px;
}

.spd-dots i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	color: #fff;
	font-size: 0.5625rem;
	font-style: normal;
	font-weight: 700;
}

/* Light sticky tabs (not navy, below the sticky header). */
.spd .tabbar {
	margin-top: 18px;
	border-bottom: 1px solid var(--sp-line);
	background: rgba(244, 246, 249, 0.96);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.spd .tabbar__link {
	min-height: 44px;
	padding: 0 10px;
	border-bottom: 3px solid transparent;
	color: #3a4757;
	font-size: 0.84375rem;
	font-weight: 500;
}

.spd .tabbar__link:hover {
	color: var(--sp-red-d);
	text-decoration: none;
}

.spd .tabbar__link[aria-current] {
	border-bottom-color: var(--sp-red);
	color: var(--sp-red-d);
	font-weight: 600;
}

/* Panels. */
.spd-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin-top: 12px;
}

.spd-pn {
	min-width: 0;
	padding: 14px;
	border: 1px solid var(--sp-line);
	border-radius: 12px;
	background: #fff;
}

/* Phone order of the FORM: video → documents → same group → real photos (description, specs before). */
.spd-pn--desc {
	order: 1;
}

.spd-pn--specs {
	order: 2;
}

.spd-pn--video {
	order: 3;
}

.spd-pn--docs {
	order: 4;
}

.spd-pn--rel {
	order: 5;
}

.spd-pn--photos {
	order: 6;
}

.spd-pn--more {
	order: 7;
}

.spd-ph {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.spd-ph h2 {
	flex: 1;
	margin: 0;
	color: var(--sp-ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.spd-ph > .icon {
	width: 24px;
	height: 24px;
	color: var(--sp-red-d);
}

.spd-desc {
	color: #3a4757;
	font-size: 0.90625rem;
	line-height: 1.7;
}

.spd-desc h2,
.spd-desc h3,
.spd-desc h4 {
	margin: 12px 0 6px;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

/* Videos. */
.spd-vbig {
	display: block;
	color: var(--sp-ink);
}

.spd-vbig:hover {
	color: var(--sp-red-d);
	text-decoration: none;
}

.spd-vbig__im,
.spd-vr__im {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 10px;
	background: #0d1622;
}

.spd-vbig__im {
	aspect-ratio: 16 / 9;
}

.spd-vbig__im img,
.spd-vr__im img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.92;
}

.spd-pl {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.spd-pl i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--sp-red);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.spd-pl i::after {
	content: "";
	margin-left: 4px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 16px solid #fff;
}

.spd-pl--sm i {
	width: 28px;
	height: 28px;
}

.spd-pl--sm i::after {
	margin-left: 2px;
	border-top-width: 6px;
	border-bottom-width: 6px;
	border-left-width: 9px;
}

.spd-vt {
	display: block;
	margin-top: 10px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
}

.spd-vl {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.spd-vr {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	color: var(--sp-ink);
}

.spd-vr:hover {
	color: var(--sp-red-d);
	text-decoration: none;
}

.spd-vr__im {
	height: 64px;
	border-radius: 7px;
}

.spd-vr b {
	font-size: 0.84375rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Documents + drawing box. */
.spd-doc {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) 44px;
	gap: 10px;
	align-items: center;
	padding: 10px 12px;
	border: 1px solid var(--sp-line);
	border-radius: 10px;
}

.spd-doc + .spd-doc {
	margin-top: 8px;
}

.spd-doc__ty {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 34px;
	height: 40px;
	padding-bottom: 6px;
	border-radius: 6px;
	background: #e5322d;
	color: #fff;
	font-size: 0.625rem;
	font-weight: 700;
}

.spd-doc__tx a {
	color: var(--sp-ink);
}

.spd-doc__tx b {
	display: block;
	font-size: 0.84375rem;
	font-weight: 600;
	line-height: 1.4;
}

.spd-doc__tx small {
	color: var(--sp-muted);
	font-size: 0.75rem;
}

.spd-doc__dl {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	color: var(--sp-icon);
}

.spd-doc__dl:hover {
	background: #f1f4f8;
}

.spd-draw {
	display: grid;
	gap: 10px;
	margin-top: 12px;
	padding: 14px;
	border-radius: 10px;
	background: var(--sp-pink);
}

.spd-pn--docs .spd-ph + .spd-draw {
	margin-top: 0;
}

.spd-draw__t {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0;
	color: var(--sp-red-d);
	font-size: 0.875rem;
	font-weight: 700;
}

.spd-draw__t .icon {
	width: 20px;
	height: 20px;
}

.spd-draw__p {
	margin: 0;
	color: #5a4a4a;
	font-size: 0.78125rem;
	line-height: 1.5;
}

.spd-draw__btn {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 9px;
	min-height: 44px;
	padding: 0 16px;
	border: 1.5px solid var(--sp-zalo);
	border-radius: 9px;
	background: #fff;
	color: var(--sp-zalo);
	font-size: 0.84375rem;
	font-weight: 600;
}

.spd-draw__btn:hover {
	background: #eef4ff;
	color: var(--sp-zalo);
	text-decoration: none;
}

.spd-draw__btn .icon {
	width: 16px;
	height: 16px;
}

/* Specs table. */
.spd-spec {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.spd-spec th,
.spd-spec td {
	padding: 11px 14px;
	border-bottom: 1px solid #eef1f5;
	vertical-align: top;
	text-align: left;
}

.spd-spec tr:nth-child(odd) th,
.spd-spec tr:nth-child(odd) td {
	background: #f8fafc;
}

.spd-spec th {
	width: 38%;
	color: var(--sp-muted);
	font-weight: 400;
}

.spd-spec td {
	font-weight: 500;
	overflow-wrap: anywhere;
}

/* Same group + real photos. */
.spd-rel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.spd-rel .spc__t {
	min-height: 0;
}

.spd-photos {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 8px;
	height: 220px;
}

.spd-photos a {
	display: block;
	overflow: hidden;
	border-radius: 9px;
	background: #e9edf2;
}

.spd-photos a:first-child {
	grid-row: 1 / 3;
}

.spd-photos a:nth-child(n + 4) {
	display: none;
}

.spd-photos img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spd-fit {
	margin: 0 0 16px;
	padding-left: 18px;
	font-size: 0.875rem;
	line-height: 1.6;
}

/* Zoom box. */
.spd-lb {
	width: min(96vw, 1100px);
	max-width: none;
	max-height: 92vh;
	padding: 12px;
	border: 0;
	border-radius: 12px;
	background: #fff;
}

.spd-lb::backdrop {
	background: rgba(10, 20, 34, 0.75);
}

.spd-lb img {
	display: block;
	width: 100%;
	max-height: calc(92vh - 72px);
	object-fit: contain;
}

.spd-lb__x {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(15, 27, 45, 0.15);
	cursor: pointer;
}

@media (max-width: 359.98px) {
	.spd-ask__col,
	.spd-k4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 768px) {
	.spd-crumbs {
		background-position: 100% 35%;
		background-size: 50% auto;
	}

	.spd-crumbs__in {
		padding-block: 13px;
	}

	.spd-top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 22px;
		margin-top: 22px;
	}

	.spd-ask {
		grid-column: 1 / -1;
	}

	.spd-gal {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.spd-main {
		order: 2;
		aspect-ratio: 4 / 3.2;
	}

	.spd-thumbs {
		flex-direction: column;
		order: 1;
		overflow: visible;
	}

	.spd-title {
		font-size: 1.5rem;
	}

	.spd-lead {
		margin: 12px 0 16px;
		font-size: 0.90625rem;
	}

	.spd-k {
		padding: 11px 12px;
		grid-template-columns: 24px minmax(0, 1fr);
		gap: 9px;
	}

	.spd-k .icon {
		width: 22px;
		height: 22px;
	}

	.spd-k small {
		font-size: 0.78125rem;
	}

	.spd-k b {
		font-size: 0.90625rem;
	}

	.spd-ask {
		padding: 16px;
		border-radius: 14px;
	}

	.spd-ask__hd {
		margin: -16px -16px 14px;
		padding: 14px 16px;
		border-radius: 14px 14px 0 0;
	}

	.spd-ask__col {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.spd-ch__l {
		display: inline;
	}

	.spd-ch__s {
		display: none;
	}

	.spd-btn {
		font-size: 0.90625rem;
	}

	.spd .tabbar {
		margin-top: 26px;
	}

	.spd .tabbar__link {
		padding: 0 14px;
		min-height: 50px;
		font-size: 0.90625rem;
	}

	.spd-body {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin-top: 18px;
	}

	.spd-pn {
		order: 0;
		padding: 18px;
	}

	.spd-pn--desc,
	.spd-pn--rel,
	.spd-pn--more,
	.spd-pn--specs,
	.spd-pn--photos,
	.spd-body--nov .spd-pn--docs {
		grid-column: 1 / -1;
	}

	.spd-ph h2 {
		font-size: 1.125rem;
	}

	.spd-rel {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
	}

	.spd-photos {
		grid-template-columns: 2fr 1fr 1fr;
		height: 300px;
	}

	.spd-photos--n3 {
		grid-template-columns: 1.7fr 1fr;
	}

	.spd-photos a:nth-child(n + 4) {
		display: block;
	}
}

/* Desktop: 3 columns on top (gallery · info · sticky quote box); panels 3 + 2 per row. */
@media (min-width: 1181px) {
	.spd-top {
		grid-template-columns: 440px minmax(0, 1fr) 312px;
	}

	.spd-ask {
		position: sticky;
		top: calc(var(--header-h) + 16px);
		grid-column: auto;
	}

	.spd-share:not([hidden]) {
		display: flex;
	}

	.spd-body {
		grid-template-columns: repeat(13, minmax(0, 1fr));
	}

	.spd-pn--desc {
		grid-column: span 4;
	}

	.spd-pn--video {
		grid-column: span 5;
	}

	.spd-pn--docs {
		grid-column: span 4;
	}

	.spd-body--nov .spd-pn--desc {
		grid-column: span 7;
	}

	.spd-body--nov .spd-pn--docs {
		grid-column: span 6;
	}

	/* DOM order: specs, same group, photos. With photos: specs | photos, same group below. */
	.spd-pn--specs {
		grid-column: span 7;
	}

	.spd-pn--rel {
		grid-column: span 6;
	}

	.spd-pn--rel .spd-rel {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.spd-body--photos .spd-pn--photos {
		grid-column: span 6;
		order: 1;
	}

	.spd-body--photos .spd-pn--rel {
		grid-column: 1 / -1;
		order: 2;
	}

	.spd-body--photos .spd-pn--rel .spd-rel {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.spd-pn--more {
		order: 3;
	}

	.spd-pn--specs {
		align-self: start;
	}
}

@media (min-width: 768px) and (max-width: 1180.98px) {
	.spd-share:not([hidden]) {
		display: flex;
	}
}

/* Description "Xem thêm" sits on the left like the prototype. */
.spd-pn .collapse__toggle {
	margin-inline: 0;
}

/* Touch targets on phones (≥ 44 px) and ≥ 24 px on pointer screens. */
.spd-cat,
.spl-all,
.spd-doc__tx a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

@media (max-width: 767.98px) {
	.spl-chip,
	.spl-sort select,
	.spl-sort__go,
	.spl-all,
	.spd-cat {
		min-height: 44px;
	}
}

@media (max-width: 359.98px) {
	.spl-bar {
		flex-wrap: wrap;
	}

	.spd-rel {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Exactly 4 real photos: the last one fills the row (no empty cell). */
@media (min-width: 768px) {
	.spd-photos--n4 a:nth-child(4) {
		grid-column: span 2;
	}
}

/* ==========================================================================
   Mobile detail (< 768 px) — product + video, approved prototype
   docs/ui/prototype/mobile-chi-tiet/ (owner 03/10; FORM WEBSITE-MOBILE-DETAIL-IMPLEMENT-V1-01).
   Spacing 4/8/12/16/24/32 (section 24, card 12–16); headings 17/700, body 14–15,
   meta 12–13; navy frame, red action, blue Zalo / links, light #F7F9FB surface.
   Desktop and tablet (≥ 768 px) keep 0.9.0: everything here is hidden there.
   ========================================================================== */

.mcrumb,
.mcv-wrap,
.mcv-stk,
.spd-shr,
.spd-sbox,
.spd-lead--m,
.spd-dcards,
.vd-metai,
.vmach,
.vm-sec,
.spc__det-m,
.tabbar__s,
.accordion__icon--m {
	display: none;
}

.mcv-sheet {
	--mcv-line: #e8ecf1;
	position: fixed;
	inset: auto 0 0;
	width: 100%;
	max-width: none;
	max-height: 85vh;
	margin: 0;
	padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
	border: 0;
	border-radius: 16px 16px 0 0;
	background: #fff;
	color: #16202e;
	overflow: auto;
}

.mcv-sheet::backdrop {
	background: rgba(10, 18, 30, 0.45);
}

@media (max-width: 767.98px) {
	.has-mcv {
		--mcv-red: #e31e24;
		--mcv-red-d: #c8161c;
		--mcv-ink: #16202e;
		--mcv-muted: #667385;
		--mcv-line: #e8ecf1;
		--mcv-blue: #1f57b8;
		--mcv-zalo: #0068ff;
		--mcv-surf: #f7f9fb;
	}

	/* The old contact bar is replaced on these two pages; the new one pads the body. */
	body.has-mcv .cta-bar {
		display: none;
	}

	body.has-mobile-bar.has-mcv {
		padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
	}

	/* One-line breadcrumb with a home icon. */
	.mcrumb {
		display: flex;
		align-items: center;
		gap: 6px;
		min-height: 44px;
		padding: 4px 16px;
		overflow: hidden;
		color: var(--mcv-muted);
		font-size: 0.8125rem;
		white-space: nowrap;
	}

	.mcrumb .icon {
		flex-shrink: 0;
		width: 15px;
		height: 15px;
	}

	.mcrumb a,
	.mcrumb span {
		color: var(--mcv-muted);
	}

	.mcrumb .mcrumb__sep {
		color: #a3aebb;
	}

	.mcrumb a.is-last {
		min-width: 0;
		overflow: hidden;
		color: var(--mcv-blue);
		font-weight: 500;
		text-overflow: ellipsis;
	}

	.spd-crumbs,
	.video-detail > .cbar {
		display: none;
	}

	/* In-page CTA block. */
	.mcv-wrap {
		display: block;
		margin-top: 16px;
	}

	.mcv-wrap--box {
		padding: 12px;
		border: 1px solid #f6dada;
		border-radius: 12px;
		background: #fdf2f2;
	}

	.mcv-qh {
		display: grid;
		grid-template-columns: 30px minmax(0, 1fr);
		gap: 8px;
		align-items: start;
		margin-bottom: 10px;
	}

	.mcv-qh .icon {
		width: 26px;
		height: 26px;
		color: var(--mcv-red-d);
		stroke-width: 1.6;
	}

	.mcv-qh__t {
		margin: 0;
		color: var(--mcv-red-d);
		font-size: 1.0625rem;
		font-weight: 700;
	}

	.mcv-qh__p {
		margin: 1px 0 0;
		color: #6b5a5a;
		font-size: 0.8125rem;
		line-height: 1.45;
	}

	.mcv {
		display: grid;
		gap: 8px;
	}

	.mcv-b {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 48px;
		padding: 0 12px;
		border: 1.5px solid transparent;
		border-radius: 10px;
		font-size: 0.96875rem;
		font-weight: 600;
		white-space: nowrap;
	}

	.mcv-b:hover {
		text-decoration: none;
	}

	.mcv-b .icon {
		width: 20px;
		height: 20px;
	}

	.mcv-b--red {
		background: var(--mcv-red);
		color: #fff;
	}

	.mcv-b--red:hover {
		background: var(--mcv-red-d);
		color: #fff;
	}

	.mcv-row {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		gap: 8px;
	}

	.mcv-b--line {
		min-height: 44px;
		border-color: #d7dee7;
		background: #fff;
		color: var(--mcv-ink);
		font-size: 0.9375rem;
		font-weight: 500;
	}

	.mcv-ch--zalo .icon {
		color: var(--mcv-zalo);
	}

	.mcv-ch--whatsapp .icon {
		color: #128c4a;
	}

	.mcv-oth {
		display: inline-flex;
		align-items: center;
		justify-self: center;
		gap: 4px;
		min-height: 44px;
		padding: 0 8px;
		border: 0;
		background: none;
		color: var(--mcv-muted);
		font: inherit;
		font-size: 0.84375rem;
		cursor: pointer;
	}

	.mcv-oth .icon {
		width: 14px;
		height: 14px;
	}

	/* Replacement sticky bar: only after the in-page block is out of view (site.js). */
	.mcv-stk {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: calc(var(--z-header) + 2);
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr);
		gap: 8px;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--mcv-line);
		background: #fff;
		box-shadow: 0 -6px 18px rgba(15, 27, 45, 0.06);
		transform: translateY(110%);
		transition: transform 0.2s;
	}

	.mcv-stk.is-shown {
		transform: none;
	}

	.mcv-stk .mcv-b {
		min-height: 48px;
	}

	.mcv-sq {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-width: 48px;
		height: 48px;
		padding: 0 12px;
		border: 1.5px solid #d7dee7;
		border-radius: 10px;
		color: #2e3a4a;
		font-size: 0.90625rem;
		font-weight: 500;
	}

	.mcv-sq:hover {
		text-decoration: none;
	}

	.mcv-sq .icon {
		width: 20px;
		height: 20px;
	}

	/* "Kênh liên hệ khác" sheet. */
	.mcv-sheet__grab {
		display: block;
		width: 40px;
		height: 4px;
		margin: 2px auto 10px;
		border-radius: 2px;
		background: #d5dce5;
	}

	.mcv-sheet__x {
		position: absolute;
		top: 6px;
		right: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 0;
		background: none;
		color: var(--mcv-muted);
		cursor: pointer;
	}

	.mcv-sheet__t {
		margin: 0 0 4px;
		font-size: 1.0625rem;
		font-weight: 700;
	}

	.mcv-sheet__p {
		margin: 0 0 8px;
		color: var(--mcv-muted);
		font-size: 0.8125rem;
	}

	.mcv-chs {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mcv-ch {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr) auto;
		gap: 12px;
		align-items: center;
		min-height: 56px;
		padding: 8px 0;
		border-bottom: 1px solid var(--mcv-line);
		color: var(--mcv-ink);
	}

	.mcv-chs li:last-child .mcv-ch {
		border-bottom: 0;
	}

	.mcv-ch:hover {
		text-decoration: none;
	}

	.mcv-ch__lg {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 10px;
		color: #fff;
	}

	.mcv-ch__lg .icon {
		width: 22px;
		height: 22px;
	}

	.mcv-ch__tx b {
		display: block;
		font-size: 0.9375rem;
		font-weight: 600;
	}

	.mcv-ch__tx small {
		color: var(--mcv-muted);
		font-size: 0.8125rem;
	}

	.mcv-ch__go {
		color: var(--mcv-blue);
		font-size: 0.84375rem;
		font-weight: 500;
	}

	.mcv-ch__qr {
		width: 56px;
		height: 56px;
		border: 1px solid var(--mcv-line);
		border-radius: 6px;
		object-fit: cover;
	}

	/* Round share button next to the title. */
	.spd-shr:not([hidden]) {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--mcv-line);
		border-radius: 50%;
		background: #fff;
		color: #4a5768;
		cursor: pointer;
	}

	.spd-shr .icon {
		width: 18px;
		height: 18px;
	}

	/* ----- Product detail ----- */
	.spd.sp-page {
		background: #fff;
	}

	.spd-top {
		margin-top: 0;
		gap: 0;
	}

	.spd-ask,
	.spd-k4,
	.spd-lead--d,
	.spd-nav,
	.spd-zoom,
	.spd-doc,
	.spd-draw,
	.spd .tabbar__item--hinh-anh {
		display: none;
	}

	.spd-gal {
		gap: 8px;
	}

	.spd-main {
		padding: 10px;
	}

	.spd-cnt {
		right: 10px;
		bottom: 10px;
		padding: 2px 9px;
		background: rgba(15, 27, 45, 0.85);
	}

	.spd-thumbs {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		overflow: visible;
	}

	.spd-thumbs li:nth-child(n + 6) {
		display: none;
	}

	.spd-th {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		border-radius: 7px;
	}

	.spd-info {
		padding-top: 16px;
	}

	.spd-cat {
		min-height: 0;
		color: var(--mcv-red-d);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	.spd-tt {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px;
		align-items: start;
		margin-top: 2px;
	}

	.spd-title {
		margin: 0;
		font-size: 1.375rem;
	}

	.spd-code {
		margin-top: 4px;
		font-size: 0.8125rem;
	}

	.spd-lead--m {
		display: -webkit-box;
		margin: 10px 0 0;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		color: #3d4a5b;
		font-size: 0.90625rem;
		line-height: 1.55;
	}

	.spd-lead:not(.spd-lead--d):not(.spd-lead--m) {
		margin: 10px 0 0;
		font-size: 0.90625rem;
		line-height: 1.55;
	}

	.spd-sbox {
		display: block;
		margin-top: 16px;
		padding: 12px 14px 10px;
		border: 1px solid #edf0f4;
		border-radius: 12px;
		background: var(--mcv-surf);
	}

	.spd-sbox__t {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 0 8px;
		font-size: 0.9375rem;
		font-weight: 700;
	}

	.spd-sbox__t .icon {
		width: 18px;
		height: 18px;
		color: #3a4c66;
	}

	.spd-slist,
	.spd .spd-spec {
		margin: 0;
	}

	.spd-slist div {
		display: grid;
		grid-template-columns: 42% minmax(0, 1fr);
		gap: 10px;
		padding: 9px 0;
		border-bottom: 1px solid #e9edf2;
	}

	.spd-slist div:last-child {
		border-bottom: 0;
	}

	.spd-slist dt {
		color: var(--mcv-muted);
		font-size: 0.84375rem;
	}

	.spd-slist dd {
		margin: 0;
		font-size: 0.90625rem;
		font-weight: 600;
		overflow-wrap: anywhere;
	}

	.spd-sbox__more {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		min-height: 44px;
		color: var(--mcv-blue);
		font-size: 0.84375rem;
		font-weight: 500;
	}

	.spd-sbox__more .icon {
		width: 14px;
		height: 14px;
	}

	/* Light tabs right under the sticky header; short labels; phone order. */
	.spd .tabbar {
		margin-top: 24px;
		background: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.spd .tabbar__list {
		display: flex;
	}

	.spd .tabbar__l {
		display: none;
	}

	.spd .tabbar__s {
		display: inline;
	}

	.spd .tabbar__link {
		padding: 0 10px;
		font-size: 0.875rem;
	}

	.spd .tabbar__item--mo-ta {
		order: 1;
	}

	.spd .tabbar__item--video {
		order: 2;
	}

	.spd .tabbar__item--thong-so {
		order: 3;
	}

	.spd .tabbar__item--tai-lieu {
		order: 4;
	}

	.spd .tabbar__item--cung-nhom {
		order: 5;
	}

	/* Sections: no card frame, 24 px apart. */
	.spd-body {
		gap: 24px;
		margin-top: 24px;
	}

	.spd-pn {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.spd-pn--video {
		order: 2;
	}

	.spd-pn--specs {
		order: 3;
	}

	.spd-ph {
		margin-bottom: 12px;
	}

	.spd-ph > .icon {
		display: none;
	}

	.spd-ph h2 {
		font-size: 1.0625rem;
	}

	.spd-ph .spl-all {
		min-height: 44px;
		padding-top: 0;
		font-size: 0.84375rem;
		font-weight: 500;
	}

	.spd-desc {
		font-size: 0.90625rem;
		line-height: 1.65;
	}

	/* Videos: one large + one small side by side. */
	.spd-pn--video {
		display: grid;
		grid-template-columns: 1.7fr 1fr;
		gap: 8px;
		align-items: start;
	}

	.spd-pn--video .spd-ph {
		grid-column: 1 / -1;
		margin-bottom: 4px;
	}

	.spd-pn--video .spd-vbig__im,
	.spd-vr__im {
		aspect-ratio: 16 / 10;
		height: auto;
		border-radius: 8px;
	}

	.spd-pn--video .spd-pl i {
		width: 40px;
		height: 40px;
	}

	.spd-pn--video .spd-pl i::after {
		margin-left: 3px;
		border-top-width: 8px;
		border-bottom-width: 8px;
		border-left-width: 12px;
	}

	.spd-vt,
	.spd-vr b {
		margin-top: 6px;
		color: #2e3a4a;
		font-size: 0.78125rem;
		font-weight: 500;
		line-height: 1.4;
	}

	.spd-vl {
		margin: 0;
	}

	.spd-vl li:nth-child(n + 2) {
		display: none;
	}

	.spd-vr {
		display: block;
	}

	.spd-vr b {
		display: block;
	}

	/* Specs table on the light surface. */
	.spd-pn--specs .collapse,
	.spd-pn--specs .spd-spec {
		border-radius: 12px;
	}

	.spd .spd-spec {
		border: 1px solid #edf0f4;
		border-collapse: separate;
		border-radius: 12px;
		background: var(--mcv-surf);
		overflow: hidden;
	}

	.spd .spd-spec th,
	.spd .spd-spec td,
	.spd .spd-spec tr:nth-child(odd) th,
	.spd .spd-spec tr:nth-child(odd) td {
		padding: 8px 16px;
		border-bottom: 1px solid #e9edf2;
		background: none;
		font-size: 0.875rem;
	}

	.spd .spd-spec th {
		width: 42%;
		color: var(--mcv-muted);
	}

	.spd .spd-spec td {
		font-weight: 600;
	}

	.spd .spd-spec tr:last-child th,
	.spd .spd-spec tr:last-child td {
		border-bottom: 0;
	}

	/* Documents: free document card(s) + paid drawing card (Zalo). */
	.spd-dcards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.spd-dcards--one {
		grid-template-columns: minmax(0, 1fr);
	}

	.spd-dc {
		display: grid;
		grid-template-columns: 36px minmax(0, 1fr) 14px;
		gap: 10px;
		align-items: center;
		min-height: 56px;
		padding: 12px;
		border: 1px solid var(--mcv-line);
		border-radius: 12px;
		color: var(--mcv-ink);
	}

	.spd-dc:hover {
		text-decoration: none;
	}

	.spd-dc__ic {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 9px;
	}

	.spd-dc__ic .icon {
		width: 20px;
		height: 20px;
	}

	.spd-dc--free .spd-dc__ic {
		background: #eaf1fc;
		color: var(--mcv-blue);
	}

	.spd-dc--buy .spd-dc__ic {
		background: #fdecec;
		color: var(--mcv-red-d);
	}

	.spd-dc--buy b {
		color: var(--mcv-red-d);
	}

	.spd-dc__tx b {
		display: block;
		font-size: 0.875rem;
	}

	.spd-dc__tx small {
		display: block;
		color: var(--mcv-muted);
		font-size: 0.75rem;
		line-height: 1.4;
		overflow-wrap: anywhere;
	}

	.spd-dc > .icon {
		width: 14px;
		height: 14px;
		color: #9aa7b6;
	}

	/* Same group: 3 compact cards. */
	.spd-rel {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.spd-rel .spc:nth-child(n + 4) {
		display: none;
	}

	.spd-rel .spc {
		display: flex;
		border-color: #e9edf2;
	}

	.spd-rel .spc__im {
		aspect-ratio: 1;
		height: auto;
		min-height: 0;
		padding: 6px;
		border-right: 0;
		border-bottom: 1px solid #eef1f5;
	}

	.spd-rel .spc__bd {
		gap: 2px;
		padding: 7px 7px 9px;
	}

	.spd-rel .spc__t {
		min-height: 34px;
		font-size: 0.78125rem;
	}

	.spd-rel .spc__ft {
		gap: 2px;
		padding-top: 2px;
		border-top: 0;
	}

	.spd-rel .spc__price {
		font-size: 0.75rem;
	}

	.spd-rel .spc__price strong {
		font-size: 0.75rem;
	}

	.spd-rel .spc__price small {
		display: none;
	}

	.spd-rel .spc__det {
		font-size: 0.71875rem;
		font-weight: 500;
	}

	.spc__det-m {
		display: inline;
	}

	.spc__det-d {
		display: none;
	}

	/* Real photos: three cells. */
	.spd-photos,
	.spd-photos--n3,
	.spd-photos--n4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: auto;
		height: auto;
		gap: 6px;
	}

	.spd-photos a,
	.spd-photos a:first-child {
		grid-row: auto;
		aspect-ratio: 4 / 3;
		border-radius: 8px;
	}

	/* ----- Video detail ----- */
	.video-detail .vd__channel,
	.video-detail .vd__actions,
	.video-detail .machine-card,
	.video-detail .vd__summary--derived,
	.video-detail .vd__discovery,
	.video-detail .vd__aside .video-list,
	.video-detail .vd__topics {
		display: none;
	}

	.vd-tt {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px;
		align-items: start;
		margin-top: 16px;
	}

	.vd-tt .vd__title {
		margin: 0;
		font-family: var(--font-body);
		font-size: 1.3125rem;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0;
		text-transform: none;
	}

	.vd-metai {
		display: flex;
		align-items: center;
		gap: 6px;
		margin: 4px 0 0;
		color: var(--mcv-muted);
		font-size: 0.8125rem;
	}

	.vd-metai .icon {
		width: 15px;
		height: 15px;
	}

	.vmach {
		display: block;
		margin-top: 16px;
		padding: 12px;
		border: 1px solid var(--mcv-line);
		border-radius: 12px;
	}

	.vmach__h {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 32px;
		margin-bottom: 8px;
		color: var(--mcv-ink);
		font-size: 0.96875rem;
		font-weight: 700;
	}

	.vmach__h .icon {
		width: 18px;
		height: 18px;
		color: #7d8a9a;
	}

	.vmach__in {
		display: grid;
		grid-template-columns: 100px minmax(0, 1fr);
		gap: 12px;
	}

	.vmach__im {
		display: flex;
		align-items: center;
		aspect-ratio: 1;
		padding: 6px;
		border: 1px solid #eef1f5;
		border-radius: 9px;
	}

	.vmach__im img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.vmach__t {
		display: block;
		font-size: 0.90625rem;
		font-weight: 600;
		line-height: 1.35;
	}

	.vmach__p {
		margin: 4px 0 8px;
		color: var(--mcv-muted);
		font-size: 0.8125rem;
		line-height: 1.45;
	}

	.vmach__bt {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}

	.vmach__a {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		min-height: 44px;
		padding: 0 9px;
		border-radius: 8px;
		font-size: 0.75rem;
		font-weight: 600;
		white-space: nowrap;
	}

	.vmach__a:hover {
		text-decoration: none;
	}

	.vmach__a .icon {
		width: 15px;
		height: 15px;
	}

	.vmach__a--q {
		background: #fdecec;
		color: var(--mcv-red-d);
	}

	.vmach__a--v {
		background: #eaf1fc;
		color: var(--mcv-blue);
	}

	/* Article as a plain section; specs / documents as thin bordered folds with a mono icon. */
	.video-detail .vd__accordions {
		margin-top: 24px;
	}

	.video-detail .accordion {
		margin-top: 8px;
		border: 1px solid var(--mcv-line);
		border-radius: 10px;
		background: #fff;
		box-shadow: none;
	}

	.video-detail .accordion__num {
		display: none;
	}

	.video-detail .accordion__icon--m {
		display: flex;
		color: #5a6879;
	}

	.video-detail .accordion__summary {
		min-height: 48px;
		padding: 0 12px;
	}

	.video-detail .accordion__title {
		font-family: var(--font-body);
		font-size: 0.90625rem;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
	}

	.video-detail .accordion--article {
		margin: 0 0 4px;
		border: 0;
	}

	.video-detail .accordion--article > .accordion__summary {
		min-height: 0;
		padding: 0 0 12px;
		pointer-events: none;
	}

	.video-detail .accordion--article .accordion__chevron,
	.video-detail .accordion--article .accordion__icon {
		display: none;
	}

	.video-detail .accordion--article .accordion__title {
		font-size: 1.0625rem;
		font-weight: 700;
	}

	.video-detail .accordion--article > .accordion__panel {
		padding: 0;
		font-size: 0.90625rem;
		line-height: 1.65;
	}

	.vm-sec {
		display: block;
		margin-top: 24px;
	}

	.vm-h {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 0 12px;
		font-family: var(--font-body);
		font-size: 1.0625rem;
		font-weight: 700;
		letter-spacing: 0;
		text-transform: none;
	}

	.vm-h a {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		min-height: 44px;
		color: var(--mcv-blue);
		font-size: 0.84375rem;
		font-weight: 500;
	}

	.vm-h a .icon {
		width: 14px;
		height: 14px;
	}

	.vm-vgrid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vm-vgrid a {
		display: block;
		color: var(--mcv-ink);
	}

	.vm-th {
		position: relative;
		display: block;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 8px;
		background: #1a2433;
	}

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

	.vm-vgrid b {
		display: block;
		margin-top: 5px;
		font-size: 0.84375rem;
		font-weight: 600;
		line-height: 1.35;
	}

	.vm-vgrid small {
		display: block;
		color: var(--mcv-muted);
		font-size: 0.75rem;
	}

	.vm-g3 {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.vm-c {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		border: 1px solid #e9edf2;
		border-radius: 10px;
		color: var(--mcv-ink);
	}

	.vm-c:hover {
		text-decoration: none;
	}

	.vm-c__im {
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 1;
		padding: 6px;
		border-bottom: 1px solid #eef1f5;
	}

	.vm-c__im img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.vm-c__bd {
		padding: 7px 7px 9px;
	}

	.vm-c b {
		display: -webkit-box;
		min-height: 34px;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 0.78125rem;
		font-weight: 600;
		line-height: 1.35;
	}

	.vm-c small {
		display: block;
		margin-top: 2px;
		color: var(--mcv-muted);
		font-size: 0.71875rem;
	}

	.vm-c__lk {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		margin-top: 4px;
		color: var(--mcv-blue);
		font-size: 0.71875rem;
		font-weight: 500;
		white-space: nowrap;
	}

	.vm-c__lk .icon {
		width: 12px;
		height: 12px;
	}
}

/* 320–359: Zalo / Gọi in the sticky bar become icons; 2 cards per row where 3 do not fit. */
@media (max-width: 359.98px) {
	.mcv-sq {
		width: 48px;
		padding: 0;
	}

	.mcv-sq .mcv-t {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.mcv-b--line {
		font-size: 0.875rem;
	}

	.spd-thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.spd-thumbs li:nth-child(n + 5) {
		display: none;
	}

	.spd-dcards {
		grid-template-columns: minmax(0, 1fr);
	}

	.spd-rel,
	.vm-g3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vmach__in {
		grid-template-columns: 84px minmax(0, 1fr);
	}
}

@media (max-width: 767.98px) {
	/* Mobile detail: "Xem thêm" as a blue text link (prototype .lk). */
	.spd-pn .collapse__toggle,
	.video-detail .accordion--article .collapse__toggle {
		gap: 3px;
		min-height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--mcv-blue);
		font-size: 0.84375rem;
		font-weight: 500;
	}
}

@media (max-width: 767.98px) {
	/* Mobile detail touch targets. */
	.mcrumb a,
	.mcrumb span {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.mcrumb {
		min-height: 0;
		padding-block: 0;
	}

	.spd-cat {
		display: inline-flex;
		align-items: center;
		min-height: 24px;
	}

	.vmach__h {
		min-height: 44px;
		margin-bottom: 4px;
	}
}

@media (max-width: 767.98px) {
	/* .vd__main is display: contents on phones (ordered flex): related + discovery come last. */
	.vm-rel {
		order: 20;
	}

	.vm-exp {
		order: 21;
	}
}

@media (max-width: 767.98px) {
	/* Mobile detail: sentence-case headings in Be Vietnam Pro (no caps condensed, no "01"). */
	.video-detail .accordion__num + .accordion__text .accordion__title {
		font-family: var(--font-body);
		font-size: 0.90625rem;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
	}

	.video-detail .accordion--article .accordion__num + .accordion__text .accordion__title {
		font-size: 1.0625rem;
		font-weight: 700;
	}
}

/* Desktop / tablet keep 0.9.0: the "Xem tất cả" of real photos is a phone link. */
@media (min-width: 768px) {
	.spd-pn--photos .spd-ph .spl-all {
		display: none;
	}
}

/* ==========================================================================
   Mobile homepage (< 768 px) — approved prototype docs/ui/prototype/mobile-trang-chu/
   home.html v2 (owner "Tốt trang chủ mobile" 03/10; FORM WEBSITE-MOBILE-HOMEPAGE-IMPLEMENT-V1-01).
   Order unchanged: hero · trust · categories · videos · solutions · knowledge · CTA.
   Desktop (≥ 768 px) keeps 0.8.x: everything here is hidden or scoped there.
   ========================================================================== */

.hero__bg-m,
.hcat-allm,
.hsol-dots,
.hcta__text--m {
	display: none;
}

@media (max-width: 767.98px) {
	.home--proto {
		--mcv-red: #e31e24;
		--mcv-red-d: #c8161c;
		--mcv-ink: #16202e;
		--mcv-muted: #667385;
		--mcv-line: #e8ecf1;
		--mcv-blue: #1f57b8;
		--mcv-zalo: #0068ff;
		--mcv-surf: #f7f9fb;
		background: #fff;
	}

	.mcv-sheet {
		--mcv-ink: #16202e;
		--mcv-muted: #667385;
		--mcv-blue: #1f57b8;
	}

	/* Hero: real photo on the upper half, copy below on navy. */
	.hero--photo .hero__bg,
	.hero__bg-m {
		position: relative;
		inset: auto;
		z-index: 0;
		display: block;
		width: 100%;
		height: 250px;
		object-fit: cover;
		object-position: 50% 45%;
	}

	.hero__bg-m + .hero__bg {
		display: none;
	}

	.hero--photo::before {
		top: 110px;
		bottom: auto;
		height: 140px;
		background: linear-gradient(rgba(11, 22, 38, 0), rgba(11, 22, 38, 0.7) 55%, #0b1626);
	}

	.hero--photo.hero--no-photo::before {
		content: none;
	}

	.hero--photo .hero__inner {
		margin-top: -28px;
		padding: 0 16px 16px;
	}

	.hero--photo.hero--no-photo .hero__inner {
		margin-top: 0;
		padding-top: 24px;
	}

	.hero--photo .hero__kicker {
		font-size: 0.75rem;
	}

	.hero--photo .hero__title {
		margin: 6px 0 8px;
		font-size: 1.6875rem; /* 27 */
		line-height: 1.22;
		text-wrap: balance;
	}

	.hero--photo .hero__text {
		display: -webkit-box;
		margin: 0 0 16px;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		color: #d2dbe6;
		font-size: 0.90625rem;
		line-height: 1.55;
	}

	.hero--photo .hero__actions {
		display: grid;
		gap: 8px;
	}

	.hero--photo .hero__actions .btn {
		justify-content: center;
		width: 100%;
		border-radius: 10px;
	}

	.hero--photo .hero__actions .btn--primary {
		min-height: 48px;
		font-size: 0.96875rem;
	}

	.hero--photo .hero__actions .btn--ghost {
		min-height: 44px;
		border-color: rgba(255, 255, 255, 0.55);
		font-weight: 500;
	}

	/* Trust: white block hanging under the hero, 2 columns, icon left, ≤ 2 lines each. */
	.trust--card {
		margin-top: 0;
		padding: 0 12px;
	}

	.trust--card .trust__list {
		gap: 12px 8px;
		padding: 16px;
		border: 1px solid var(--mcv-line);
		border-top: 0;
		border-radius: 0 0 12px 12px;
		box-shadow: none;
	}

	.trust--card .trust__item {
		display: grid;
		grid-template-columns: 30px minmax(0, 1fr);
		column-gap: 8px;
		align-items: start;
		padding: 0;
	}

	.trust--card .trust__icon {
		width: 30px;
		height: 30px;
	}

	.trust--card .trust__icon .icon {
		width: 15px;
		height: 15px;
	}

	.trust--card .trust__text strong {
		font-size: 0.8125rem;
		line-height: 1.3;
	}

	.trust--card .trust__text span {
		font-size: 0.75rem;
		line-height: 1.35;
	}

	/* Section heads 19/700, sections 24 apart. */
	.home--proto .hsec {
		padding-top: 24px;
	}

	.home--proto .hsec__head {
		margin-bottom: 12px;
	}

	.home--proto .hsec__title {
		font-size: 1.1875rem;
	}

	/* Categories: the first 4 on a light surface + "Xem tất cả N danh mục". */
	.home-cats .hsec__more {
		display: none;
	}

	.hcats {
		gap: 8px;
	}

	.hcats > li:nth-child(n + 5) {
		display: none;
	}

	.hcat {
		gap: 6px;
		padding: 8px 8px 12px;
		border: 0;
		border-radius: 12px;
		background: var(--mcv-surf);
	}

	.hcat__im {
		height: auto;
		aspect-ratio: 2 / 1;
		padding: 6px;
		border-radius: 9px;
		background: #fff;
	}

	.hcat__im img {
		max-height: 100%;
	}

	.hcat__name {
		min-height: 38px;
		padding: 0 4px;
		font-size: 0.875rem;
		line-height: 1.35;
	}

	.hcat__meta {
		padding: 0 4px;
	}

	.hcat__meta .icon {
		display: none;
	}

	.hcat-allm {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-height: 44px;
		margin-top: 8px;
		border-radius: 10px;
		background: #fdf1f1;
		color: var(--mcv-red-d);
		font-size: 0.875rem;
		font-weight: 600;
	}

	.hcat-allm:hover {
		text-decoration: none;
	}

	.hcat-allm .icon {
		width: 15px;
		height: 15px;
	}

	/* Videos: one large + two small side by side. */
	.hduo {
		gap: 24px;
	}

	.hvbig {
		border: 0;
		border-radius: 0;
		background: none;
	}

	.hvbig .hvth {
		border-radius: 12px;
	}

	.hvbig__tx {
		gap: 2px;
		padding: 8px 0 0;
	}

	.hvbig__title {
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 1.4;
	}

	.hvbig__line {
		display: none;
	}

	.hvlist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin-top: 12px;
	}

	.hvrow {
		display: block;
		padding: 0;
		border: 0;
		background: none;
	}

	.hvrow .hvth {
		height: auto;
		aspect-ratio: 16 / 9;
		border-radius: 9px;
	}

	.hvrow__tx {
		gap: 2px;
		margin-top: 6px;
	}

	.hvrow__title {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 0.8125rem;
		line-height: 1.38;
	}

	.hvbig:hover,
	.hvrow:hover {
		box-shadow: none;
	}

	/* Solutions: swipe row with snap, the next card peeking, position dots. */
	.hsols {
		display: flex;
		gap: 8px;
		margin: 0 calc(-1 * var(--gutter));
		padding: 0 var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 var(--gutter);
		scrollbar-width: none;
	}

	.hsols::-webkit-scrollbar {
		display: none;
	}

	.hsols > li {
		flex: 0 0 44%;
		scroll-snap-align: start;
	}

	.hsol {
		gap: 5px;
		padding: 0;
		border: 0;
		background: none;
	}

	.hsol__im {
		height: auto;
		aspect-ratio: 4 / 3;
		padding: 8px;
		border-radius: 10px;
		background: var(--mcv-surf);
	}

	.hsol__im img {
		max-width: 100%;
		max-height: 100%;
	}

	.hsol__desc {
		display: -webkit-box;
		min-height: 35px;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 0.78125rem;
		line-height: 1.4;
	}

	.hsol:hover {
		box-shadow: none;
	}

	.hsol-dots {
		display: flex;
		justify-content: center;
		gap: 5px;
		margin-top: 12px;
	}

	.hsol-dots i {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #cbd3dd;
	}

	.hsol-dots i.is-on {
		background: var(--mcv-red);
	}

	/* Knowledge: one featured (2:1 photo) + three compact rows. */
	.hposts {
		gap: 0;
	}

	.hpost {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 12px;
		align-items: center;
		padding: 12px 0;
		border: 0;
		border-top: 1px solid var(--mcv-line);
		border-radius: 0;
		background: none;
	}

	.hpost:hover {
		box-shadow: none;
	}

	.hpost__im {
		height: auto;
		aspect-ratio: 16 / 10;
		border-radius: 8px;
	}

	.hpost__title {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 0.875rem;
		line-height: 1.38;
	}

	.hpost__ex {
		display: none;
	}

	.hposts > li.is-first .hpost {
		display: block;
		padding: 0 0 12px;
		border-top: 0;
	}

	.hposts > li.is-first .hpost__im {
		aspect-ratio: 2 / 1;
		border-radius: 12px;
	}

	.hposts > li.is-first .hpost__tx {
		margin-top: 8px;
	}

	.hposts > li.is-first .hpost__title {
		font-size: 0.96875rem;
		line-height: 1.4;
	}

	.hpill {
		font-size: 0.71875rem;
	}

	/* CTA: question, one line, red "Yêu cầu tư vấn" + Zalo | Gọi (shared block, no sticky). */
	.hcta {
		margin-top: 32px;
	}

	.hcta::before {
		background: rgba(11, 22, 38, 0.88);
	}

	.hcta__inner {
		gap: 16px;
		padding-block: 24px;
	}

	.hcta__text--d,
	.hcta__actions {
		display: none;
	}

	.hcta__text--m {
		display: block;
	}

	.hcta .mcv-wrap {
		margin-top: 0;
	}

	.hcta .mcv-b--line {
		border-color: rgba(255, 255, 255, 0.35);
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
	}

	.hcta .mcv-ch--zalo .icon,
	.hcta .mcv-ch--whatsapp .icon {
		color: #fff;
	}

	.hcta .mcv-oth {
		color: #c9d4e1;
	}
}

@media (max-width: 359.98px) {
	.hero--photo .hero__title {
		font-size: 1.5rem;
	}

	.trust--card .trust__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.hcat__name {
		font-size: 0.8125rem;
	}

	.hsols > li {
		flex-basis: 62%;
	}

	.hpost {
		grid-template-columns: 84px minmax(0, 1fr);
	}
}

/* The <picture> around solution photos (phone-only source) must not change the desktop box. */
.hsol__im picture {
	display: contents;
}

/* ==========================================================================
   Documents (/tai-lieu/ + detail) — approved prototype docs/ui/prototype/tai-lieu/
   (FORM WEBSITE-DOCUMENT-UI-IMPLEMENT-V1-02, Quỳnh 4 locks). Values from tl.css:
   light hero, light-red selected chips, free first / paid after, one button per
   card, light 3-step strip, navy bottom band. Phones: dark compact hero, rows.
   ========================================================================== */

.tl-page {
	--tl-ink: #16202e;
	--tl-muted: #5e6b7c;
	--tl-line: #e6ebf1;
	--tl-surf: #f7f9fb;
	--tl-red: #e31e24;
	--tl-red-d: #c8161c;
	--tl-blue: #1f57b8;
	--tl-free: #17763f;
	--tl-freebg: #e8f5ec;
	--tl-zalo: #0068ff;
	background: #fff;
	color: var(--tl-ink);
}

.tl-page .icon {
	flex-shrink: 0;
}

/* Hero. */
.tl-hero {
	border-bottom: 1px solid var(--tl-line);
	background: linear-gradient(100deg, #f3f6fa 0%, #f3f6fa 55%, #e8eef5 100%);
}

.tl-hero__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	padding-block: 16px 24px;
}

.tl-hero .breadcrumb,
.tl-crumbs .breadcrumb {
	font-size: 0.8125rem;
}

.tl-hero .breadcrumb__item:last-child span,
.tl-crumbs .breadcrumb__item:last-child span {
	color: var(--tl-blue);
	font-weight: 500;
}

.tl-hero__eb {
	margin: 10px 0 0;
	color: var(--tl-red-d);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tl-hero__t {
	margin: 6px 0 8px;
	color: var(--tl-ink);
	font-family: var(--font-body);
	font-size: 1.5625rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-wrap: balance;
}

.tl-hero__p {
	max-width: 560px;
	margin: 0 0 16px;
	color: #4a5768;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.tl-search {
	display: flex;
	align-items: center;
	max-width: 560px;
	height: 48px;
	overflow: hidden;
	border: 1px solid #d5dce5;
	border-radius: 10px;
	background: #fff;
}

.tl-search > .icon {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 14px;
	color: #8a96a6;
}

.tl-search input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tl-ink);
	font: inherit;
	font-size: 0.875rem;
}

.tl-search input:focus {
	outline: none;
}

.tl-search:focus-within {
	border-color: var(--tl-blue);
	box-shadow: 0 0 0 3px rgba(31, 87, 184, 0.15);
}

.tl-search button {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 100%;
	padding: 0 18px;
	border: 0;
	background: var(--tl-red);
	color: #fff;
	font: inherit;
	font-size: 0.90625rem;
	font-weight: 600;
	cursor: pointer;
}

.tl-search button .icon {
	width: 16px;
	height: 16px;
}

.tl-hero__vis {
	position: relative;
	display: none;
	height: 230px;
}

.tl-hero__doc {
	position: absolute;
	top: 6px;
	right: 30px;
	z-index: 1;
	width: 150px;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 14px 30px rgba(15, 27, 45, 0.18);
	transform: rotate(3deg);
}

.tl-hero__doc--2 {
	top: 30px;
	right: 150px;
	z-index: 0;
	width: 140px;
	transform: rotate(-4deg);
}

.tl-hero__doc img {
	display: block;
	width: 100%;
	border-radius: 4px;
}

/* Filters. */
.tl-filt {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 0;
}

.tl-frow {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.tl-frow__l {
	display: none;
	min-width: 92px;
	color: var(--tl-muted);
	font-size: 0.8125rem;
	white-space: nowrap;
}

.tl-frow__chips {
	display: flex;
	gap: 8px;
	min-width: 0;
	margin: 0 calc(-1 * var(--gutter));
	padding: 0 var(--gutter);
	overflow-x: auto;
	scrollbar-width: none;
}

.tl-frow__chips::-webkit-scrollbar {
	display: none;
}

.tl-ch {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 5px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid #d5dce5;
	border-radius: 999px;
	background: #fff;
	color: var(--tl-ink);
	font-size: 0.84375rem;
	white-space: nowrap;
}

.tl-ch:hover {
	border-color: var(--tl-ink);
	text-decoration: none;
}

.tl-ch small {
	color: var(--tl-muted);
	font-size: 0.75rem;
}

.tl-ch.is-on {
	border-color: #f3b8b8;
	background: #fdecec;
	color: var(--tl-red-d);
	font-weight: 600;
}

.tl-ch.is-on small {
	color: var(--tl-red-d);
}

/* Sections. */
.tl-sec {
	padding-top: 24px;
}

.tl-sh {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.tl-sh__eb {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.tl-sh__eb--free {
	color: var(--tl-free);
}

.tl-sh__eb--paid {
	color: var(--tl-red-d);
}

.tl-sh__t {
	margin: 2px 0 0;
	color: var(--tl-ink);
	font-family: var(--font-body);
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.tl-sh__p {
	display: none;
	margin: 3px 0 0;
	color: var(--tl-muted);
	font-size: 0.84375rem;
}

.tl-sh__more {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	min-height: 44px;
	color: var(--tl-red-d);
	font-size: 0.84375rem;
	font-weight: 600;
	white-space: nowrap;
}

.tl-sh__more .icon {
	width: 14px;
	height: 14px;
}

/* Cards — phones: rows (thumb left, button right). */
.tl-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.tl-card {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 12px 0;
	border-top: 1px solid var(--tl-line);
}

.tl-card:last-child {
	border-bottom: 1px solid var(--tl-line);
}

.tl-card__th {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 3.6;
	overflow: hidden;
	border-radius: 8px;
	background: var(--tl-surf);
}

.tl-card__th img {
	width: 80%;
	border-radius: 3px;
	box-shadow: 0 8px 18px rgba(15, 27, 45, 0.16);
}

.tl-fmt {
	position: absolute;
	top: 8px;
	left: 8px;
	display: none;
	padding: 2px 7px;
	border: 1px solid #f3c9c9;
	border-radius: 5px;
	background: #fff;
	color: var(--tl-red-d);
	font-size: 0.6875rem;
	font-weight: 700;
}

.tl-ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	padding: 10px;
	color: #7d8a9a;
	font-size: 0.75rem;
	text-align: center;
}

.tl-ph .icon {
	width: 26px;
	height: 26px;
	color: #9aa7b6;
	stroke-width: 1.3;
}

.tl-ph > span {
	display: none;
}

.tl-ph--grid {
	background:
		repeating-linear-gradient(0deg, transparent 0 19px, #e6ebf1 19px 20px),
		repeating-linear-gradient(90deg, transparent 0 19px, #e6ebf1 19px 20px);
}

.tl-card__tx {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.tl-ty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--tl-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tl-demo {
	padding: 1px 6px;
	border-radius: 4px;
	background: #f5a524;
	color: #111;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.tl-card__t {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.38;
	letter-spacing: 0;
	text-transform: none;
}

.tl-card__t a {
	color: var(--tl-ink);
}

.tl-card__t a:hover {
	color: var(--tl-red-d);
	text-decoration: none;
}

.tl-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0;
	color: var(--tl-muted);
	font-size: 0.78125rem;
}

.tl-price {
	color: var(--tl-red-d);
	font-weight: 600;
}

.tl-act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 12px;
	border: 1.5px solid transparent;
	border-radius: 9px;
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
}

.tl-act:hover {
	text-decoration: none;
}

.tl-act .icon {
	width: 16px;
	height: 16px;
}

.tl-act.is-red {
	background: var(--tl-red);
	color: #fff;
}

.tl-act.is-red:hover {
	background: var(--tl-red-d);
	color: #fff;
}

.tl-act.is-line {
	border-color: #d5dce5;
	background: #fff;
	color: var(--tl-ink);
}

.tl-act__l {
	display: none;
}

.tl-empty .tl-act__l {
	display: inline;
}

.tl-empty {
	padding: 24px 0;
	color: var(--tl-muted);
}

/* "Cách nhận bản vẽ": light strip. */
.tl-proc {
	display: grid;
	gap: 12px;
	margin-top: 24px;
	padding: 16px;
	border-radius: 12px;
	background: var(--tl-surf);
}

.tl-proc__t {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.tl-proc ol {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-proc li {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}

.tl-proc i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1.5px solid #f3b8b8;
	border-radius: 50%;
	background: #fff;
	color: var(--tl-red-d);
	font-size: 0.8125rem;
	font-style: normal;
	font-weight: 700;
}

.tl-proc b {
	display: block;
	font-size: 0.875rem;
}

.tl-proc small {
	display: block;
	color: var(--tl-muted);
	font-size: 0.78125rem;
	line-height: 1.45;
}

/* Documents by category (only categories with documents). */
.tl-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-cats a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--tl-line);
	border-radius: 10px;
	color: var(--tl-ink);
	font-size: 0.875rem;
	font-weight: 500;
}

.tl-cats a:hover {
	border-color: #cbd4df;
	text-decoration: none;
}

.tl-cats small {
	color: var(--tl-free);
	font-size: 0.78125rem;
	font-weight: 600;
}

/* Bottom band. */
.tl-cta {
	margin-top: 32px;
	background: #0f1b2d;
	color: #fff;
}

.tl-cta__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	padding-block: 24px;
}

.tl-cta__t {
	margin: 0;
	color: #fff;
	font-family: var(--font-body);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.tl-cta__p {
	margin: 4px 0 0;
	color: #c9d4e1;
	font-size: 0.875rem;
}

.tl-cta__bts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.tl-cta__b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 18px;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	border-radius: 10px;
	color: #fff;
	font-size: 0.90625rem;
	font-weight: 600;
	white-space: nowrap;
}

.tl-cta__b:hover {
	border-color: #fff;
	color: #fff;
	text-decoration: none;
}

.tl-cta__b .icon {
	width: 17px;
	height: 17px;
}

.tl-cta__b--red {
	grid-column: 1 / -1;
	border-color: var(--tl-red);
	background: var(--tl-red);
}

.tl-cta__b--red:hover {
	background: var(--tl-red-d);
}

/* Detail. */
.tl-crumbs {
	padding: 12px 0;
}

.tl-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.tl-pv {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px;
	border-radius: 14px;
	background: var(--tl-surf);
}

.tl-pv img {
	width: 62%;
	max-width: 330px;
	border-radius: 4px;
	box-shadow: 0 16px 34px rgba(15, 27, 45, 0.2);
}

.tl-ph--big {
	min-height: 220px;
	border-radius: 10px;
}

.tl-ph--big > span,
.tl-ph--big .tl-pv__lk {
	display: inline-flex;
}

.tl-ph--big .icon {
	width: 40px;
	height: 40px;
}

.tl-pv__lk {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	color: var(--tl-blue);
	font-size: 0.84375rem;
	font-weight: 600;
}

.tl-pv__lk .icon {
	width: 14px;
	height: 14px;
}

.tl-info__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.tl-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.78125rem;
	font-weight: 700;
}

.tl-badge .icon {
	width: 14px;
	height: 14px;
}

.tl-badge--free {
	background: var(--tl-freebg);
	color: var(--tl-free);
}

.tl-badge--paid {
	background: #fdecec;
	color: var(--tl-red-d);
}

.tl-info .tl-ty {
	font-size: 0.78125rem;
}

.tl-tt {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: start;
	margin: 10px 0 8px;
}

.tl-info__t {
	margin: 0;
	color: var(--tl-ink);
	font-family: var(--font-body);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	text-wrap: balance;
}

.tl-info__lead {
	margin: 0 0 12px;
	color: #3d4a5b;
	font-size: 0.90625rem;
	line-height: 1.6;
}

.tl-mrow {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--tl-line);
	border-bottom: 1px solid var(--tl-line);
	color: var(--tl-muted);
	font-size: 0.84375rem;
}

.tl-mrow span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.tl-mrow .icon {
	width: 15px;
	height: 15px;
}

.tl-inc {
	display: grid;
	gap: 6px;
	margin: 12px 0 16px;
	padding: 0;
	font-size: 0.875rem;
	list-style: none;
}

.tl-inc li {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 8px;
}

.tl-inc .icon {
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: var(--tl-free);
}

.tl-dact {
	display: none;
	gap: 8px;
	max-width: 460px;
	margin-top: 16px;
}

.tl-dact__main {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	border-radius: 10px;
	background: var(--tl-red);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
}

.tl-dact__main:hover {
	background: var(--tl-red-d);
	color: #fff;
	text-decoration: none;
}

.tl-dact__main .icon {
	width: 18px;
	height: 18px;
}

.tl-dact__r {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.tl-dact__r a,
.tl-dact__r button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 8px;
	border: 1.5px solid #d5dce5;
	border-radius: 10px;
	background: #fff;
	color: var(--tl-ink);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
}

.tl-dact__r a:hover,
.tl-dact__r button:hover {
	border-color: var(--tl-ink);
	text-decoration: none;
}

.tl-dact__r .icon {
	width: 16px;
	height: 16px;
}

.tl-dact__r .mcv-ch--zalo .icon {
	color: var(--tl-zalo);
}

.tl-page .mcv-wrap {
	margin-top: 16px;
}

.tl-pinfo {
	max-width: 460px;
	margin-top: 12px;
	padding: 12px 16px;
	border: 1px solid #f6dada;
	border-radius: 10px;
	background: #fff6f6;
	color: #5a4a4a;
	font-size: 0.84375rem;
}

.tl-pinfo__t {
	margin: 0 0 4px;
	color: var(--tl-red-d);
	font-weight: 700;
}

.tl-pinfo ol {
	display: grid;
	gap: 3px;
	margin: 0;
	padding-left: 18px;
}

.tl-dsec {
	padding-top: 24px;
}

.tl-dsec__txt {
	max-width: 760px;
}

.tl-rel {
	display: flex;
	gap: 8px;
	margin: 0 calc(-1 * var(--gutter));
	padding: 0 var(--gutter);
	overflow-x: auto;
	scrollbar-width: none;
}

.tl-rel .spc {
	flex: 0 0 150px;
}

.tl-rel .spc__t {
	min-height: 0;
}

@media (max-width: 359.98px) {
	.tl-card {
		grid-template-columns: 60px minmax(0, 1fr) auto;
	}

	.tl-act {
		padding: 0 9px;
	}

	.tl-cta__bts {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Phones: dark compact hero. */
@media (max-width: 767.98px) {
	.tl-hero {
		border: 0;
		background: #0f1b2d;
		color: #fff;
	}

	.tl-hero .breadcrumb,
	.tl-hero .breadcrumb a,
	.tl-hero .breadcrumb__item + .breadcrumb__item::before {
		color: #b9c6d6;
	}

	.tl-hero .breadcrumb__item:last-child span {
		color: #fff;
	}

	.tl-hero__eb {
		color: #ff6b70;
	}

	.tl-hero__t {
		color: #fff;
	}

	.tl-hero__p {
		color: #c9d4e1;
		font-size: 0.875rem;
	}
}

@media (min-width: 768px) {
	.tl-hero__in {
		padding-block: 24px;
	}

	.tl-hero__in--pics {
		grid-template-columns: minmax(0, 1fr) 420px;
	}

	.tl-hero__vis {
		display: block;
	}

	.tl-hero__t {
		font-size: 2rem;
	}

	.tl-filt {
		padding: 16px 0;
	}

	.tl-frow__l {
		display: inline;
	}

	.tl-frow__chips {
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.tl-ch {
		min-height: 34px;
	}

	.tl-sh__t {
		font-size: 1.3125rem;
	}

	.tl-sh__p {
		display: block;
	}

	.tl-sh__more {
		min-height: 24px;
	}

	/* Cards: fixed 4-column track — 2 documents stay 2 cards, no stretched or fake cells. */
	.tl-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
	}

	.tl-card,
	.tl-card:last-child {
		display: flex;
		flex-direction: column;
		gap: 8px;
		align-items: stretch;
		padding: 0;
		border: 0;
	}

	.tl-card__th {
		aspect-ratio: 1 / 1;
		border-radius: 10px;
	}

	.tl-card__th img {
		width: 72%;
	}

	.tl-fmt {
		display: inline-block;
	}

	.tl-ph .icon {
		width: 40px;
		height: 40px;
	}

	.tl-ph > span {
		display: block;
	}

	.tl-card__t {
		min-height: 40px;
		font-size: 0.90625rem;
	}

	.tl-act {
		min-height: 40px;
		margin-top: auto;
		font-size: 0.875rem;
	}

	.tl-act__l {
		display: inline;
	}

	.tl-act__s {
		display: none;
	}

	/* Paid drawings: wide horizontal cards, two per row. */
	.tl-grid--paid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tl-grid--paid .tl-card {
		display: grid;
		grid-template-columns: 150px minmax(0, 1fr);
		grid-template-rows: auto auto;
		gap: 8px 16px;
		padding: 12px;
		border: 1px solid var(--tl-line);
		border-radius: 12px;
	}

	.tl-grid--paid .tl-card__th {
		grid-row: 1 / 3;
		min-height: 150px;
		aspect-ratio: auto;
	}

	.tl-grid--paid .tl-act {
		align-self: start;
		justify-self: start;
		padding: 0 18px;
	}

	.tl-proc {
		grid-template-columns: 200px minmax(0, 1fr);
		align-items: center;
		padding: 16px 24px;
	}

	.tl-proc ol {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.tl-cta__in {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.tl-cta__bts {
		display: flex;
		flex-wrap: wrap;
	}

	.tl-cta__b--red {
		order: -1;
	}

	/* Detail: two columns. */
	.tl-top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 32px;
		padding-top: 8px;
	}

	.tl-pv {
		min-height: 440px;
		padding: 24px;
	}

	.tl-pv img {
		width: min(330px, 80%);
	}

	.tl-ph--big {
		min-height: 380px;
	}

	.tl-info__t {
		font-size: 1.75rem;
	}

	.tl-info__lead {
		font-size: 0.9375rem;
	}

	.tl-dact {
		display: grid;
	}

	.tl-dsec {
		padding-top: 32px;
	}

	.tl-rel {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}
}

/* "Kênh liên hệ khác" sheet also on desktop (document detail "Kênh khác"): a centred box. */
.mcv-sheet {
	--mcv-ink: #16202e;
	--mcv-muted: #667385;
	--mcv-line: #e8ecf1;
	--mcv-blue: #1f57b8;
}

@media (min-width: 768px) {
	.mcv-sheet {
		inset: 0;
		width: min(420px, 92vw);
		max-height: 80vh;
		margin: auto;
		padding: 16px 20px 20px;
		border-radius: 14px;
	}

	.mcv-sheet__grab {
		display: none;
	}

	.mcv-sheet__x {
		position: absolute;
		top: 8px;
		right: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: 0;
		background: none;
		color: var(--mcv-muted);
		cursor: pointer;
	}

	.mcv-sheet__t {
		margin: 0 0 4px;
		font-size: 1.0625rem;
		font-weight: 700;
	}

	.mcv-sheet__p {
		margin: 0 0 8px;
		color: var(--mcv-muted);
		font-size: 0.8125rem;
	}

	.mcv-chs {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mcv-ch {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr) auto;
		gap: 12px;
		align-items: center;
		min-height: 56px;
		padding: 8px 0;
		border-bottom: 1px solid var(--mcv-line);
		color: var(--mcv-ink);
	}

	.mcv-chs li:last-child .mcv-ch {
		border-bottom: 0;
	}

	.mcv-ch:hover {
		text-decoration: none;
	}

	.mcv-ch__lg {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 10px;
		color: #fff;
	}

	.mcv-ch__lg .icon {
		width: 22px;
		height: 22px;
	}

	.mcv-ch__tx b {
		display: block;
		font-size: 0.9375rem;
		font-weight: 600;
	}

	.mcv-ch__tx small {
		color: var(--mcv-muted);
		font-size: 0.8125rem;
	}

	.mcv-ch__go {
		color: var(--mcv-blue);
		font-size: 0.84375rem;
		font-weight: 500;
	}

	.mcv-ch__qr {
		width: 56px;
		height: 56px;
		border: 1px solid var(--mcv-line);
		border-radius: 6px;
		object-fit: cover;
	}
}

/* Video detail on phones (0.9.1 follow-up): "Thông số kỹ thuật · Vật liệu: Inox", no gap before related. */
.accordion__desc-m {
	display: none;
}

@media (max-width: 767.98px) {
	.video-detail .accordion__desc-m {
		display: inline;
		color: var(--mcv-muted);
		font-size: 0.84375rem;
		font-weight: 500;
	}

	.video-detail .accordion__desc-m::before {
		content: " · ";
	}

	.video-detail .accordion__text {
		display: block;
	}

	.video-detail .accordion__title {
		display: inline;
	}

	.video-detail .vd > .vd__main > .vm-sec,
	.video-detail .vm-sec {
		margin-top: 0;
	}
}

/* Shared mobile block colours on the document pages. */
.tl-page {
	--mcv-red: #e31e24;
	--mcv-red-d: #c8161c;
	--mcv-ink: #16202e;
	--mcv-muted: #667385;
	--mcv-line: #e8ecf1;
	--mcv-blue: #1f57b8;
	--mcv-zalo: #0068ff;
	--mcv-surf: #f7f9fb;
}

/* The whole document card follows its title link (big tap target); the action button stays on top. */
.tl-card {
	position: relative;
}

.tl-card__t a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tl-act {
	position: relative;
	z-index: 1;
}

@media (max-width: 767.98px) {
	.vd__series--empty {
		display: none;
	}
}

/* ==========================================================================
   Knowledge list + article — approved mobile prototype docs/ui/prototype/kien-thuc/
   + Quỳnh PC description (FORM WEBSITE-KNOWLEDGE-UI-IMPLEMENT-V1-01). Reuses the
   document tokens (.tl-ch chips, .tl-search, .tl-sh heads, .tl-cta band).
   ========================================================================== */

.kt-page {
	--tl-ink: #16202e;
	--tl-muted: #5e6b7c;
	--tl-line: #e6ebf1;
	--tl-surf: #f7f9fb;
	--tl-red: #e31e24;
	--tl-red-d: #c8161c;
	--tl-blue: #1f57b8;
	--tl-free: #17763f;
	--tl-zalo: #0068ff;
	--mcv-red: #e31e24;
	--mcv-red-d: #c8161c;
	--mcv-ink: #16202e;
	--mcv-muted: #667385;
	--mcv-line: #e8ecf1;
	--mcv-blue: #1f57b8;
	--mcv-zalo: #0068ff;
	background: #fff;
	color: var(--tl-ink);
}

/* Topic labels: fixed colour per topic. */
.kt-tg {
	display: inline-block;
	font-size: 0.71875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kt-tg--c {
	color: #b4141a;
}

.kt-tg--v {
	color: #17763f;
}

.kt-tg--q {
	color: #1f57b8;
}

.kt-tg--x {
	color: var(--tl-muted);
}

.kt-dt {
	color: var(--tl-muted);
	font-size: 0.78125rem;
}

.kt-noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #e9edf2;
	color: #9aa7b6;
}

.kt-noimg .icon {
	width: 24px;
	height: 24px;
}

/* Hero: real photo + dark layer. */
.kt-hero {
	position: relative;
	background: #0b1626 var(--kt-hero, none) 60% 40% / cover no-repeat;
	color: #fff;
}

.kt-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 22, 38, 0.55), rgba(11, 22, 38, 0.92));
}

.kt-hero__in {
	position: relative;
	padding-block: 16px 24px;
}

.kt-hero .breadcrumb,
.kt-hero .breadcrumb a,
.kt-hero .breadcrumb__item + .breadcrumb__item::before {
	color: #c9d4e1;
	font-size: 0.78125rem;
}

.kt-hero .breadcrumb__item:last-child span {
	color: #fff;
}

.kt-hero__eb {
	margin: 12px 0 0;
	color: #ff6b70;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kt-hero__t {
	margin: 6px 0;
	color: #fff;
	font-family: var(--font-body);
	font-size: 1.5625rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	text-wrap: balance;
}

.kt-hero__p {
	max-width: 560px;
	margin: 0 0 16px;
	color: #d2dbe6;
	font-size: 0.875rem;
	line-height: 1.55;
}

.kt-search {
	border: 0;
}

/* Chips: one row, scrolls on phones without widening the page. */
.kt-chips {
	display: flex;
	gap: 8px;
	margin: 0 calc(-1 * var(--gutter));
	padding: 12px var(--gutter);
	overflow-x: auto;
	scrollbar-width: none;
}

.kt-chips::-webkit-scrollbar {
	display: none;
}

.kt-chips .tl-ch.is-on {
	border-color: var(--tl-red);
	background: var(--tl-red);
	color: #fff;
}

.kt-chips .tl-ch.is-on small {
	color: #fff;
}

.kt-sec {
	padding-top: 16px;
}

/* "Bài viết mới": the newest big + compact rows. */
.kt-new__grid {
	display: grid;
	gap: 8px;
}

.kt-top {
	display: block;
	overflow: hidden;
	border-radius: 12px;
	background: var(--tl-surf);
	color: var(--tl-ink);
}

.kt-top:hover {
	text-decoration: none;
}

.kt-top__im {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #e9edf2;
}

.kt-top__im img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kt-top__im .kt-tg {
	display: none;
}

.kt-top__bd {
	display: grid;
	gap: 6px;
	padding: 12px 16px 16px;
}

.kt-top__t {
	font-size: 1.0625rem;
	line-height: 1.38;
}

.kt-top:hover .kt-top__t {
	color: var(--tl-red-d);
}

.kt-top__p {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: #4a5768;
	font-size: 0.875rem;
	line-height: 1.55;
}

.kt-rows__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kt-row__a {
	display: grid;
	grid-template-columns: 116px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--tl-line);
	color: var(--tl-ink);
}

.kt-row__a:hover {
	text-decoration: none;
}

.kt-row__a:hover b {
	color: var(--tl-red-d);
}

.kt-row__im {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: #e9edf2;
}

.kt-row__im img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kt-row__tx {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.kt-row__tx b {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 0.90625rem;
	font-weight: 600;
	line-height: 1.38;
}

.kt-row__go {
	display: none;
}

.kt-rows .collapse__toggle {
	width: 100%;
	min-height: 44px;
	margin: 12px 0 0;
	border: 1.5px solid #d5dce5;
	border-radius: 10px;
	background: #fff;
	font-weight: 500;
}

/* Light link to the solutions page. */
.kt-sol {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	margin-top: 24px;
	padding: 12px 16px;
	border-radius: 10px;
	background: #fdf2f2;
	color: var(--tl-red-d);
}

.kt-sol:hover {
	text-decoration: none;
}

.kt-sol__tx b {
	display: block;
	font-size: 0.875rem;
}

.kt-sol__tx small {
	display: block;
	color: #6b5a5a;
	font-size: 0.78125rem;
}

.kt-sol__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0;
}

.kt-sol__btn .icon {
	width: 18px;
	height: 18px;
}

.kt-topics {
	display: none;
}

/* Article. */
.kt-crumbs {
	padding-top: 12px;
}

.kt-crumbs .breadcrumb {
	font-size: 0.78125rem;
}

.kt-ahd {
	padding-top: 8px;
}

.kt-ahd__t {
	margin: 6px 0;
	color: var(--tl-ink);
	font-family: var(--font-body);
	font-size: 1.5625rem;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: 0;
	text-transform: none;
	text-wrap: balance;
}

.kt-amt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--tl-muted);
	font-size: 0.78125rem;
}

.kt-amt .icon {
	width: 14px;
	height: 14px;
}

.kt-aimg {
	margin: 12px 0 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background: #e9edf2;
}

.kt-aimg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kt-toc {
	margin-top: 16px;
	border-radius: 10px;
	background: var(--tl-surf);
}

.kt-toc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding: 0 14px;
	font-size: 0.9375rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.kt-toc > summary::-webkit-details-marker {
	display: none;
}

.kt-toc > summary span {
	display: flex;
	align-items: center;
	gap: 8px;
}

.kt-toc .icon {
	width: 18px;
	height: 18px;
	color: #5a6879;
}

.kt-toc[open] > summary > .icon {
	transform: rotate(180deg);
}

.kt-toc ol {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0 14px 12px 34px;
	color: #3d4a5b;
	font-size: 0.875rem;
}

.kt-toc a {
	display: inline-block;
	padding: 4px 0;
	color: #3d4a5b;
}

.kt-toc__l3 {
	margin-left: 14px;
	list-style: circle;
}

.kt-abody {
	padding-top: 8px;
}

.kt-abody h2,
.kt-abody h3 {
	scroll-margin-top: calc(var(--header-h) + 16px);
}

.kt-asec {
	padding-top: 24px;
}

.kt-asec__t {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 12px;
	color: var(--tl-ink);
	font-family: var(--font-body);
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.kt-asec__t a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--tl-red-d);
	font-size: 0.84375rem;
	font-weight: 600;
}

.kt-asec .kt-rows__list .kt-row:first-child .kt-row__a {
	border-top: 1px solid var(--tl-line);
}

.kt-asec .spd-vbig,
.kt-asec .spd-vr {
	color: var(--tl-ink);
}

.kt-asec .spd-vl {
	display: grid;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.kt-mach {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.kt-mach .spc__t {
	min-height: 34px;
	font-size: 0.78125rem;
}

.kt-mach .spc__bd {
	padding: 7px 8px 9px;
}

.kt-mach .spc__price small {
	display: none;
}

.kt-mach .spc__im {
	aspect-ratio: 1;
}

/* Phones: the article sticky bar replaces the old 3-button bar; light, above nothing else. */
@media (max-width: 767.98px) {
	body.single-post .cta-bar {
		display: none;
	}

	.kt-mach .spc__det-m {
		display: inline;
	}

	.kt-mach .spc__det-d {
		display: none;
	}
}

@media (max-width: 359.98px) {
	.kt-row__a {
		grid-template-columns: 96px minmax(0, 1fr);
	}

	.kt-hero__t,
	.kt-ahd__t {
		font-size: 1.4375rem;
	}

	.kt-mach {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Desktop. */
@media (min-width: 768px) {
	.kt-hero {
		background-position: 100% 40%;
	}

	.kt-hero::before {
		background: linear-gradient(90deg, #0b1626 0%, rgba(11, 22, 38, 0.92) 40%, rgba(11, 22, 38, 0.45) 75%, rgba(11, 22, 38, 0.2) 100%);
	}

	.kt-hero__in {
		padding-block: 24px 32px;
	}

	.kt-hero__t {
		font-size: 2rem;
	}

	.kt-hero__p {
		font-size: 0.9375rem;
	}

	.kt-search {
		max-width: 520px;
	}

	.kt-chips {
		flex-wrap: wrap;
		margin: 0;
		padding: 16px 0 4px;
		overflow: visible;
	}

	.kt-chips .tl-ch {
		min-height: 36px;
	}

	.kt-sec {
		padding-top: 24px;
	}

	.kt-new__grid {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: 24px;
		align-items: start;
	}

	.kt-top__im .kt-tg {
		position: absolute;
		top: 12px;
		left: 12px;
		display: inline-block;
		padding: 3px 9px;
		border-radius: 999px;
		background: #fff;
	}

	.kt-top__bd > .kt-tg {
		display: none;
	}

	.kt-top__t {
		font-size: 1.25rem;
	}

	.kt-top__p {
		-webkit-line-clamp: 2;
	}

	.kt-row__a {
		grid-template-columns: 150px minmax(0, 1fr) 32px;
		padding: 12px 0;
	}

	.kt-row__go {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border: 1px solid var(--tl-line);
		border-radius: 50%;
		color: var(--tl-red-d);
	}

	.kt-row__go .icon {
		width: 15px;
		height: 15px;
	}

	.kt-rows__list > li:first-child .kt-row__a {
		padding-top: 0;
	}

	/* Landing: 3 rows beside the big one; a topic page lists every article there. */
	.kt-new:not(.kt-new--all) .kt-rows__list > li:nth-child(n + 4) {
		display: none;
	}

	.kt-new:not(.kt-new--all) .kt-rows .collapse__toggle {
		display: none;
	}

	.js .kt-new--all .kt-rows .collapse--list:not(.is-open) .collapse__extra {
		display: list-item;
	}

	.kt-new--all .kt-rows .collapse__toggle {
		display: none;
	}

	.kt-sol {
		margin-top: 32px;
		padding: 16px 24px;
	}

	.kt-sol__tx {
		display: flex;
		align-items: baseline;
		gap: 12px;
	}

	.kt-sol__tx b {
		font-size: 1rem;
	}

	.kt-sol__tx small {
		font-size: 0.875rem;
	}

	.kt-sol__btn {
		gap: 6px;
		min-height: 40px;
		padding: 0 16px;
		border: 1.5px solid var(--tl-red);
		border-radius: 8px;
		background: #fff;
		font-size: 0.875rem;
		font-weight: 600;
	}

	.kt-topics {
		display: block;
		padding-top: 32px;
	}

	.kt-topics__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.kt-col__h {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 8px;
		border-bottom: 2px solid var(--tl-line);
	}

	.kt-col__h a {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		color: var(--tl-red-d);
		font-size: 0.8125rem;
		font-weight: 600;
	}

	.kt-col__h .icon {
		width: 14px;
		height: 14px;
	}

	.kt-mini {
		display: grid;
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 12px;
		padding: 12px 0;
		border-bottom: 1px solid var(--tl-line);
		color: var(--tl-ink);
	}

	.kt-mini:hover {
		text-decoration: none;
	}

	.kt-mini:hover b {
		color: var(--tl-red-d);
	}

	.kt-mini__im {
		display: block;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		border-radius: 8px;
		background: #e9edf2;
	}

	.kt-mini__im img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.kt-mini__tx {
		display: grid;
		gap: 4px;
		align-content: start;
		min-width: 0;
	}

	.kt-mini__tx b {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 0.875rem;
		line-height: 1.38;
	}

	.kt-mini__tx small {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		color: var(--tl-muted);
		font-size: 0.78125rem;
		line-height: 1.45;
	}

	/* Article: one reading column. */
	.kt-article__in {
		max-width: 808px;
	}

	.kt-ahd__t {
		font-size: 2rem;
	}

	.kt-amt {
		font-size: 0.84375rem;
	}

	.kt-toc {
		margin-top: 24px;
	}

	.kt-asec {
		padding-top: 32px;
	}

	.kt-asec .spd-vbig__im {
		aspect-ratio: 16 / 9;
	}

	.kt-asec .spd-vl {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kt-mach {
		gap: 12px;
	}
}

/* Article videos: 1 large + compact rows (thumb 120 left), not the product page pair. */
.kt-asec .spd-vr {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
}

.kt-asec .spd-vr__im {
	aspect-ratio: 16 / 9;
	height: auto;
}

.kt-asec .spd-vl li:nth-child(n + 2) {
	display: block;
}

.kt-asec .spd-vr b {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Play buttons and shared product-card colours on knowledge pages. */
.kt-page {
	--sp-red: #e31e24;
	--sp-red-d: #c8161c;
	--sp-ink: #16202e;
	--sp-muted: #5e6b7c;
	--sp-line: #e6ebf1;
	--sp-blue: #1f57b8;
}

/* Product cards on document pages (0.9.3 follow-up): same colours as the product pages. */
.tl-page {
	--sp-red: #e31e24;
	--sp-red-d: #c8161c;
	--sp-ink: #16202e;
	--sp-muted: #5e6b7c;
	--sp-line: #e6ebf1;
	--sp-blue: #1f57b8;
}

/* ==========================================================================
   About page — approved prototype docs/ui/prototype/gioi-thieu/gt.html
   (FORM WEBSITE-ABOUT-IMPLEMENT-V1-01). Reuses .tl-ch chips, .tl-sh heads, .tl-cta band.
   ========================================================================== */

.ab-page {
	--tl-ink: #16202e;
	--tl-muted: #5e6b7c;
	--tl-line: #e6ebf1;
	--tl-surf: #f7f9fb;
	--tl-red: #e31e24;
	--tl-red-d: #c8161c;
	--tl-blue: #1f57b8;
	--tl-zalo: #0068ff;
	--mcv-red: #e31e24;
	--mcv-red-d: #c8161c;
	--mcv-ink: #16202e;
	--mcv-muted: #667385;
	--mcv-line: #e8ecf1;
	--mcv-blue: #1f57b8;
	--mcv-zalo: #0068ff;
	--sp-red: #e31e24;
	--sp-red-d: #c8161c;
	background: #fff;
	color: var(--tl-ink);
}

.ab-page .icon {
	flex-shrink: 0;
}

/* Hero: real photo (phones: DDP-CHUNG-IMAGE-029 on top, text below), dark layer. */
.ab-hero {
	position: relative;
	background: #0b1626 var(--ab-hero-m, var(--ab-hero, none)) 50% 30% / cover no-repeat;
	color: #fff;
}

.ab-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 22, 38, 0.45), rgba(11, 22, 38, 0.92));
}

.ab-hero__in {
	position: relative;
	padding-block: 12px 24px;
}

.ab-hero .breadcrumb,
.ab-hero .breadcrumb a,
.ab-hero .breadcrumb__item + .breadcrumb__item::before {
	color: #c9d4e1;
	font-size: 0.78125rem;
}

.ab-hero .breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.ab-hero .breadcrumb__item:last-child span {
	color: #fff;
}

.ab-hero__t {
	margin: 90px 0 8px;
	color: #fff;
	font-family: var(--font-body);
	font-size: 1.6875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-wrap: balance;
}

.ab-hero__p {
	max-width: 560px;
	margin: 0 0 16px;
	color: #d6dee8;
	font-size: 0.90625rem;
	line-height: 1.6;
}

.ab-vbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--tl-red);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
}

.ab-vbtn:hover {
	background: var(--tl-red-d);
	color: #fff;
	text-decoration: none;
}

.ab-vbtn i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
}

.ab-vbtn i::after {
	content: "";
	margin-left: 2px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid var(--tl-red);
}

/* Sections. */
.ab-sec {
	padding-top: 24px;
}

.ab-sec__t {
	margin: 0;
	color: var(--tl-ink);
	font-family: var(--font-body);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}

.ab-sec__p {
	margin: 4px 0 16px;
	color: var(--tl-muted);
	font-size: 0.875rem;
}

/* Values — phones: compact rows. */
.ab-vals {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--tl-line);
	list-style: none;
}

.ab-val {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--tl-line);
}

.ab-val__ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fdf1f1;
	color: var(--tl-red-d);
}

.ab-val__ic .icon {
	width: 19px;
	height: 19px;
}

.ab-val__tx b {
	display: block;
	margin-bottom: 2px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

.ab-val__tx span {
	display: block;
	color: var(--tl-muted);
	font-size: 0.84375rem;
	line-height: 1.5;
}

/* Categories — one row that scrolls on phones without widening the page. */
.ab-chips {
	display: flex;
	gap: 8px;
	margin: 0 calc(-1 * var(--gutter));
	padding: 0 var(--gutter) 2px;
	overflow-x: auto;
	scrollbar-width: none;
}

.ab-chips::-webkit-scrollbar {
	display: none;
}

/* Videos — phones: horizontal scroll, ~72% cards. */
.ab-page .tl-sh {
	align-items: center;
	margin-bottom: 12px;
}

.ab-vids {
	display: flex;
	gap: 12px;
	margin: 0 calc(-1 * var(--gutter));
	padding: 0 var(--gutter) 2px;
	overflow-x: auto;
	scroll-padding-inline: var(--gutter);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.ab-vids::-webkit-scrollbar {
	display: none;
}

.ab-vc {
	display: block;
	flex: 0 0 72%;
	min-width: 0;
	color: var(--tl-ink);
	scroll-snap-align: start;
}

.ab-vc:hover {
	color: var(--tl-ink);
	text-decoration: none;
}

.ab-vc__th {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 10px;
	background: #101a28;
}

.ab-vc__th img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ab-vc__pl {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ab-vc__pl i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(15, 27, 45, 0.7);
}

.ab-vc__pl i::after {
	content: "";
	margin-left: 3px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 12px solid #fff;
}

.ab-vc__t {
	display: block;
	margin: 8px 0 2px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
}

.ab-vc__m {
	color: var(--tl-muted);
	font-size: 0.78125rem;
}

/* Workshop photo + company facts. */
.ab-comp {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 24px;
	overflow: hidden;
	border-radius: 14px;
	background: var(--tl-surf);
}

.ab-comp__ph {
	position: relative;
	min-height: 200px;
	background: #0b1626 var(--ab-shop, none) center / cover no-repeat;
}

.ab-comp__ph .ab-vbtn {
	position: absolute;
	bottom: 16px;
	left: 16px;
}

.ab-comp__in {
	padding: 16px;
}

.ab-comp__in .ab-sec__t {
	margin-bottom: 8px;
}

.ab-info {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-info__r {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--tl-line);
}

.ab-info__r:last-child {
	border-bottom: 0;
}

.ab-info__ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: #fdf1f1;
	color: var(--tl-red-d);
}

.ab-info__ic .icon {
	width: 17px;
	height: 17px;
}

.ab-info__tx {
	min-width: 0;
	overflow-wrap: anywhere;
}

.ab-info__tx small {
	display: block;
	color: var(--tl-muted);
	font-size: 0.78125rem;
}

.ab-info__tx b {
	display: block;
	font-size: 0.90625rem;
	font-weight: 600;
	line-height: 1.4;
}

.ab-info__nw {
	white-space: nowrap;
}

.ab-info__lk {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--tl-blue);
	font-size: 0.8125rem;
	font-weight: 600;
}

@media (max-width: 767.98px) {
	.ab-page .tl-sh .ab-sec__t {
		font-size: 1.125rem;
	}
}

/* Desktop. */
@media (min-width: 768px) {
	.ab-hero {
		background-image: var(--ab-hero, none);
		background-position: 60% 50%;
	}

	.ab-hero::before {
		background: linear-gradient(90deg, rgba(11, 22, 38, 0.92) 0%, rgba(11, 22, 38, 0.75) 45%, rgba(11, 22, 38, 0.25) 100%);
	}

	.ab-hero__in {
		padding-block: 16px 32px;
	}

	.ab-hero__t {
		margin-top: 12px;
		font-size: 2.375rem;
	}

	.ab-hero__p {
		font-size: 1rem;
	}

	.ab-sec {
		padding-top: 32px;
	}

	.ab-sec__t {
		font-size: 1.375rem;
	}

	.ab-vals {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
		border: 0;
	}

	.ab-val {
		display: block;
		padding: 16px;
		border: 1px solid var(--tl-line);
		border-radius: 12px;
	}

	.ab-val__ic {
		margin-bottom: 12px;
	}

	.ab-val__tx b {
		font-size: 0.96875rem;
	}

	.ab-chips {
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.ab-chips .tl-ch {
		min-height: 36px;
	}

	.ab-vids {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.ab-comp {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 24px;
		margin-top: 32px;
	}

	.ab-comp__ph {
		min-height: 340px;
	}

	.ab-comp__in {
		padding: 24px 24px 24px 0;
	}

	.ab-comp__in .ab-sec__t {
		margin-bottom: 12px;
	}
}

@media (max-width: 359.98px) {
	.ab-hero__t {
		font-size: 1.5rem;
	}

	.ab-vc {
		flex-basis: 80%;
	}

	/* Keep Zalo | Gọi side by side under the red button (no two full-width buttons of equal weight). */
	.ab-page .tl-cta__bts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Video without a poster (owner UAT 04/10/2026, FORM WEBSITE-UAT-FIX-ABSOLUTE-DATE-NOPOSTER-V1-01):
   light neutral box over the whole thumbnail frame (covers the dark frame and play mark).
   ========================================================================== */

.vnp {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px;
	border: 1px solid #e6ebf1;
	border-radius: inherit;
	background: #f4f6f9;
	color: #8a97a8;
	text-align: center;
}

.vnp .icon {
	width: 22px;
	height: 22px;
}

.vnp__t {
	color: #5e6b7c;
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.3;
}

/* ==========================================================================
   AMAN Mobile UI Kit V1 — P1 product list on phones (docs/ui/prototype/mobile-kit-v1/,
   FORM WEBSITE-MOBILE-KIT-P1-PRODUCT-LIST-V1-01). Kit tokens (--mk-*) are used only by the new
   components; desktop (>= 768 px) keeps 0.9.x unchanged.
   ========================================================================== */

.sp-page {
	--mk-red: #d71920;
	--mk-red-d: #b4141a;
	--mk-ink: #162232;
	--mk-ink2: #3a4757;
	--mk-muted: #4a5666;
	--mk-line: #e3e7ed;
	--mk-bg: #f3f5f8;
	--mk-paper: #fff;
	--mk-r: 8px;
	--mk-r2: 12px;
}

.mk-pl,
.spl-hero__dm,
.spl-hero__tm {
	display: none;
}

@media (max-width: 767.98px) {
	/* Light compact head (the same hero element, so one H1). */
	.spl-hero {
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.spl-hero::before,
	.spl-hero__eb,
	.spl-hero__d {
		display: none;
	}

	.spl-hero__in {
		padding: 12px var(--gutter) 4px;
	}

	.spl-hero .breadcrumb {
		overflow: hidden;
		color: var(--mk-muted);
		font-size: 0.75rem;
		line-height: 16px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.spl-hero .breadcrumb ol,
	.spl-hero .breadcrumb ul {
		flex-wrap: nowrap;
		overflow: hidden;
	}

	.spl-hero .breadcrumb a,
	.spl-hero .breadcrumb__item + .breadcrumb__item::before {
		color: var(--mk-muted);
	}

	.spl-hero .breadcrumb__item:last-child {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.spl-hero .breadcrumb__item:last-child span {
		color: var(--mk-ink2);
		font-weight: 500;
	}

	.spl-hero__t {
		margin: 4px 0 2px;
		color: var(--mk-ink);
		font-size: 1.5rem;
		line-height: 30px;
	}

	.spl-hero__dm {
		display: -webkit-box;
		margin: 0;
		overflow: hidden;
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.spl-pc,
	.spl-hero__td {
		display: none;
	}

	.spl-hero__tm {
		display: inline;
	}

	.mk-pl {
		display: block;
		--mcv-red: var(--mk-red);
		--mcv-red-d: var(--mk-red-d);
		--mcv-ink: var(--mk-ink);
		--mcv-muted: var(--mk-muted);
		--mcv-line: var(--mk-line);
		--mcv-blue: #1f57b8;
		--mcv-zalo: #0068ff;
		background: var(--mk-bg);
		color: var(--mk-ink);
		font-size: 0.875rem;
		line-height: 20px;
	}

	.mk-search {
		padding: 12px var(--gutter) 0;
		background: var(--mk-paper);
	}

	.mk-search label {
		display: flex;
		align-items: center;
		gap: 8px;
		height: 44px;
		padding: 0 12px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r);
		background: var(--mk-bg);
		color: var(--mk-muted);
	}

	.mk-search .icon {
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
	}

	.mk-search input {
		flex: 1;
		min-width: 0;
		height: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--mk-ink);
		font: inherit;
		font-size: 1rem;
		outline: 0;
		-webkit-appearance: none;
		appearance: none;
	}

	.mk-search label:focus-within {
		border-color: var(--mk-ink2);
	}

	.mk-chips {
		display: flex;
		gap: 8px;
		padding: 4px var(--gutter);
		overflow-x: auto;
		border-bottom: 1px solid var(--mk-line);
		background: var(--mk-paper);
		scrollbar-width: none;
	}

	.mk-chips::-webkit-scrollbar {
		display: none;
	}

	/* 36 px pill inside a 44 px tap area. */
	.mk-chip {
		position: relative;
		z-index: 0;
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		gap: 6px;
		min-height: 44px;
		padding: 0 14px;
		border: 0;
		background: transparent;
		color: var(--mk-ink);
		font: inherit;
		font-size: 0.8125rem;
		font-weight: 500;
		line-height: 18px;
		white-space: nowrap;
		cursor: pointer;
	}

	.mk-chip::before {
		content: "";
		position: absolute;
		inset: 4px 0;
		z-index: -1;
		border: 1px solid var(--mk-line);
		border-radius: 999px;
		background: var(--mk-paper);
	}

	.mk-chip:hover {
		color: var(--mk-ink);
		text-decoration: none;
	}

	.mk-chip small {
		color: var(--mk-muted);
		font-size: 0.75rem;
	}

	.mk-chip .icon {
		width: 16px;
		height: 16px;
	}

	.mk-chip.is-on {
		color: #fff;
		font-weight: 600;
	}

	.mk-chip.is-on::before {
		border-color: var(--mk-red);
		background: var(--mk-red);
	}

	.mk-chip.is-on small {
		color: #fff;
	}

	.mk-sec {
		padding: 16px var(--gutter) 0;
	}

	.mk-list {
		display: grid;
		gap: 12px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mk-mc__a {
		display: grid;
		grid-template-columns: clamp(120px, 35vw, 136px) minmax(0, 1fr);
		gap: 12px;
		align-items: center;
		min-height: 44px;
		padding: 12px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r);
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.mk-mc__a:hover {
		color: var(--mk-ink);
		text-decoration: none;
	}

	.mk-mc__im {
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		border-radius: var(--mk-r);
		background: #fff;
		color: var(--mk-muted);
	}

	.mk-mc__im img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		transform: scale(1.18);
	}

	.mk-mc__im.is-cover img {
		object-fit: cover;
		transform: none;
	}

	.mk-mc__im .icon {
		width: 28px;
		height: 28px;
	}

	.mk-mc__bd {
		min-width: 0;
	}

	.mk-mc__t {
		display: -webkit-box;
		overflow: hidden;
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 21px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.mk-mc__sp {
		display: block;
		margin-top: 4px;
		overflow: hidden;
		color: var(--mk-ink2);
		font-size: 0.8125rem;
		line-height: 18px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.mk-mc__pr {
		display: block;
		margin-top: 6px;
		color: var(--mk-red-d);
		font-size: 0.875rem;
		font-weight: 600;
		line-height: 20px;
	}

	.mk-mc__pr small {
		display: block;
		color: var(--mk-muted);
		font-size: 0.75rem;
		font-weight: 400;
		line-height: 16px;
	}

	.mk-mc__pr--q {
		color: var(--mk-ink);
	}

	.mk-pl .collapse__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		width: 100%;
		min-height: 44px;
		margin-top: 4px;
		border: 0;
		background: none;
		color: var(--mk-muted);
		font: inherit;
		font-size: 0.875rem;
	}

	.mk-pl .collapse__toggle .icon {
		width: 16px;
		height: 16px;
	}

	.mk-empty {
		padding: 8px 0;
		color: var(--mk-muted);
		text-align: center;
	}

	.mk-empty p {
		margin: 0 0 12px;
	}

	.mk-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 48px;
		padding: 0 16px;
		border: 1.5px solid transparent;
		border-radius: var(--mk-r);
		font: inherit;
		font-size: 0.875rem;
		font-weight: 600;
		cursor: pointer;
	}

	.mk-btn:hover {
		text-decoration: none;
	}

	.mk-btn--line {
		display: inline-flex;
		border-color: #cbd3dd;
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.mk-btn--red {
		width: 100%;
		margin-top: 16px;
		background: var(--mk-red);
		color: #fff;
	}

	/* Consult block: white Kit card (the shared mobile-convert component). */
	.mk-cta {
		padding-bottom: 24px;
	}

	.mk-cta .mcv-wrap--box {
		margin-top: 8px;
		padding: 16px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
	}

	.mk-cta .mcv-qh {
		display: block;
		margin-bottom: 12px;
	}

	.mk-cta .mcv-qh .icon {
		display: none;
	}

	.mk-cta .mcv-qh__t {
		color: var(--mk-ink);
		font-size: 1.125rem;
		line-height: 24px;
	}

	.mk-cta .mcv-qh__p {
		margin-top: 4px;
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
	}

	.mk-cta .mcv-b {
		border-radius: var(--mk-r);
		font-size: 0.875rem;
	}

	.mk-cta .mcv-b--line {
		border-color: #cbd3dd;
	}

	/* Filter sheet. */
	.mk-sheet__h {
		margin: 12px 0 4px;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.mk-opt {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 48px;
		border-bottom: 1px solid var(--mk-line);
		color: var(--mk-ink);
		font-size: 0.9375rem;
	}

	.mk-opt input {
		width: 20px;
		height: 20px;
		margin: 0;
		accent-color: var(--mk-red);
	}

	.mk-opt small {
		margin-left: auto;
		color: var(--mk-muted);
		font-size: 0.8125rem;
	}
}

/* Kit V1 P1 follow-up (FORM WEBSITE-MOBILE-KIT-P1-PRODUCT-LIST-FIX-V1-02): "MẪU" on demo machine cards (same look as documents). */
@media (max-width: 767.98px) {
	.mk-demo {
		display: inline-block;
		margin-bottom: 4px;
		padding: 0 6px;
		border-radius: 4px;
		background: #f5a524;
		color: #111;
		font-size: 0.75rem;
		font-weight: 700;
		line-height: 16px;
		letter-spacing: 0.04em;
	}
}

/* ==========================================================================
   AMAN Mobile UI Kit V1 — P2 video library on phones (FORM WEBSITE-MOBILE-KIT-P2-VIDEO-LIST-V1-01).
   Reuses the P1 Kit tokens and components (.mk-search, .mk-chips, .mk-sec, .mk-cta, .mk-empty).
   ========================================================================== */

.video-library {
	--mk-red: #d71920;
	--mk-red-d: #b4141a;
	--mk-ink: #162232;
	--mk-ink2: #3a4757;
	--mk-muted: #4a5666;
	--mk-line: #e3e7ed;
	--mk-bg: #f3f5f8;
	--mk-paper: #fff;
	--mk-r: 8px;
	--mk-r2: 12px;
}

.phead__dm {
	display: none;
}

@media (max-width: 767.98px) {
	/* Light compact head (same page-head element, one H1). */
	.video-library .phead {
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.video-library .phead__inner {
		padding: 12px var(--gutter) 4px;
	}

	.video-library .phead__eyebrow,
	.video-library .phead__desc {
		display: none;
	}

	.video-library .phead .breadcrumb {
		margin: 0;
		overflow: hidden;
		color: var(--mk-muted);
		font-size: 0.75rem;
		line-height: 16px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.video-library .phead .breadcrumb a,
	.video-library .phead .breadcrumb__item + .breadcrumb__item::before {
		color: var(--mk-muted);
	}

	.video-library .phead .breadcrumb__item:last-child span {
		color: var(--mk-ink2);
		font-weight: 500;
	}

	.video-library .phead__title {
		margin: 4px 0 2px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 30px;
		letter-spacing: 0;
		text-transform: none;
	}

	.video-library .phead__dm {
		display: block;
		margin: 0;
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
	}

	.video-library .vl-pc {
		display: none;
	}

	/* Video cards. */
	.mk-vc {
		display: block;
		min-width: 0;
		color: var(--mk-ink);
	}

	.mk-vc:hover {
		color: var(--mk-ink);
		text-decoration: none;
	}

	.mk-vc__th {
		position: relative;
		display: block;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: var(--mk-r);
		background: #e9edf2;
	}

	.mk-vc__th img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.mk-play {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
	}

	.mk-play i {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: 2px solid #fff;
		border-radius: 50%;
		background: rgba(15, 27, 45, 0.62);
	}

	.mk-play i::after {
		content: "";
		margin-left: 3px;
		border-top: 7px solid transparent;
		border-bottom: 7px solid transparent;
		border-left: 11px solid #fff;
	}

	.mk-vc--big .mk-play i {
		width: 48px;
		height: 48px;
	}

	.mk-vc--big .mk-play i::after {
		margin-left: 4px;
		border-top-width: 9px;
		border-bottom-width: 9px;
		border-left-width: 14px;
	}

	/* The neutral "no cover" box covers the play mark. */
	.mk-vc__th .vnp {
		z-index: 2;
	}

	.mk-vc__th .vnp__t {
		font-size: 0.75rem;
	}

	.mk-vc__t {
		display: -webkit-box;
		margin-top: 8px;
		overflow: hidden;
		font-size: 0.875rem;
		font-weight: 600;
		line-height: 18px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.mk-vc--big .mk-vc__t {
		font-size: 1rem;
		line-height: 22px;
	}

	.mk-vc__m {
		display: block;
		margin-top: 2px;
		overflow: hidden;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.mk-vg {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 12px;
		margin: 16px 0 0;
		padding: 0;
		list-style: none;
	}

	.mk-vsec {
		margin-top: 24px;
	}

	.mk-sh {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
	}

	.mk-sh__t {
		margin: 0;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.125rem;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: 0;
		text-transform: none;
	}

	.mk-sh__a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin: -12px 0;
		color: var(--mk-red-d);
		font-size: 0.8125rem;
		font-weight: 600;
		white-space: nowrap;
	}

	.mk-sh__a .icon {
		width: 14px;
		height: 14px;
	}

	.mk-vsec .mk-vg {
		margin-top: 12px;
	}
}

/* ==========================================================================
   AMAN Mobile UI Kit V1 — P3 document library + knowledge list on phones
   (FORM WEBSITE-MOBILE-KIT-P3-DOCS-KNOWLEDGE-LIST-V1-01). Reuses the P1/P2 Kit tokens and components.
   ========================================================================== */

.tl-list,
.kt-list {
	--mk-red: #d71920;
	--mk-red-d: #b4141a;
	--mk-ink: #162232;
	--mk-ink2: #3a4757;
	--mk-muted: #4a5666;
	--mk-line: #e3e7ed;
	--mk-bg: #f3f5f8;
	--mk-paper: #fff;
	--mk-r: 8px;
	--mk-r2: 12px;
}

/* Shared Kit head pieces: phone H1 wording + one-line description (hidden on desktop). */
.kit-tm,
.kit-dm {
	display: none;
}

@media (max-width: 767.98px) {
	.kit-tm {
		display: inline;
	}

	.kit-td {
		display: none;
	}

	.tl-list .kit-dm,
	.kt-list .kit-dm {
		display: -webkit-box;
		margin: 0;
		overflow: hidden;
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	/* Light compact heads (same hero element, one H1). */
	.tl-list .tl-hero,
	.kt-list .kt-hero {
		display: block;
		padding: 0;
		border: 0;
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.kt-list .kt-hero::before,
	.tl-list .tl-hero__eb,
	.tl-list .tl-hero__p,
	.tl-list .tl-search,
	.tl-list .tl-hero__vis,
	.kt-list .kt-hero__eb,
	.kt-list .kt-hero__p,
	.kt-list .kt-search {
		display: none;
	}

	.tl-list .tl-hero__in,
	.kt-list .kt-hero__in {
		display: block;
		padding: 12px var(--gutter) 4px;
	}

	.tl-list .tl-hero .breadcrumb,
	.kt-list .kt-hero .breadcrumb {
		margin: 0;
		overflow: hidden;
		color: var(--mk-muted);
		font-size: 0.75rem;
		line-height: 16px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.tl-list .tl-hero .breadcrumb a,
	.tl-list .tl-hero .breadcrumb__item + .breadcrumb__item::before,
	.kt-list .kt-hero .breadcrumb a,
	.kt-list .kt-hero .breadcrumb__item + .breadcrumb__item::before {
		color: var(--mk-muted);
	}

	.tl-list .tl-hero .breadcrumb__item:last-child span,
	.kt-list .kt-hero .breadcrumb__item:last-child span {
		color: var(--mk-ink2);
		font-weight: 500;
	}

	.tl-list .tl-hero__t,
	.kt-list .kt-hero__t {
		margin: 4px 0 2px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 30px;
		letter-spacing: 0;
		text-transform: none;
	}

	.tl-list .tl-pc,
	.tl-list > .tl-cta,
	.kt-list .kt-pc,
	.kt-list > .tl-cta {
		display: none;
	}

	/* Section heads: the P2 .mk-sh component, with room under it here. */
	.mk-tl .mk-sh {
		margin-bottom: 12px;
	}

	/* Document cards. */
	.mk-dlist,
	.mk-alist {
		display: grid;
		gap: 12px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mk-dc {
		position: relative;
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr) 44px;
		gap: 12px;
		align-items: center;
		padding: 12px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r);
		background: var(--mk-paper);
	}

	.mk-dc__pv {
		display: block;
		width: 64px;
		aspect-ratio: 3 / 4;
		overflow: hidden;
		border: 1px solid var(--mk-line);
		border-radius: 6px;
		background: #fff;
	}

	.mk-dc__pv img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top;
	}

	.mk-dc__ic {
		display: flex;
		align-items: center;
		justify-content: center;
		justify-self: center;
		width: 48px;
		height: 48px;
		border-radius: var(--mk-r);
		background: #eef2f8;
		color: var(--mk-ink2);
	}

	.mk-dc__ic .icon {
		width: 24px;
		height: 24px;
	}

	.mk-dc__bd {
		min-width: 0;
	}

	.mk-dc__tags {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-bottom: 4px;
	}

	.mk-dc__tags:empty {
		display: none;
	}

	.mk-tag {
		display: inline-block;
		padding: 0 8px;
		border-radius: 999px;
		background: #eef2f8;
		color: #1f57b8;
		font-size: 0.75rem;
		font-weight: 500;
		line-height: 18px;
	}

	.mk-dc .mk-demo {
		margin: 0;
		line-height: 18px;
	}

	.mk-dc__t {
		display: -webkit-box;
		overflow: hidden;
		color: var(--mk-ink);
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 21px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/* The whole card opens the document; the action button stays on top. */
	.mk-dc__t::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.mk-dc__t:hover {
		color: var(--mk-ink);
		text-decoration: none;
	}

	.mk-dc__m {
		display: block;
		margin-top: 2px;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.mk-dc__q {
		color: var(--mk-ink);
		font-weight: 600;
	}

	.mk-dl {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: var(--mk-r);
		background: var(--mk-red);
		color: #fff;
	}

	.mk-dl:hover {
		background: var(--mk-red-d);
		color: #fff;
	}

	.mk-dl .icon {
		width: 20px;
		height: 20px;
	}

	.mk-dl--line {
		border: 1.5px solid #cbd3dd;
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.mk-dl--line:hover {
		background: var(--mk-bg);
		color: var(--mk-ink);
	}

	/* Knowledge: featured article + rows. */
	.mk-topic {
		display: block;
		font-size: 0.75rem;
		font-weight: 600;
		line-height: 16px;
		letter-spacing: 0;
		text-transform: none;
	}

	.mk-topic--c {
		color: var(--mk-red-d);
	}

	.mk-topic--v {
		color: #17763f;
	}

	.mk-topic--q {
		color: #1f57b8;
	}

	.mk-topic--x {
		color: var(--mk-muted);
	}

	.mk-af {
		display: block;
		overflow: hidden;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.mk-af:hover,
	.mk-ac__a:hover {
		color: var(--mk-ink);
		text-decoration: none;
	}

	.mk-af__im {
		display: block;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: #e9edf2;
	}

	.mk-af__im img,
	.mk-ac__im img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.mk-af__bd {
		display: block;
		padding: 12px 16px 16px;
	}

	.mk-af__t {
		display: -webkit-box;
		margin-top: 4px;
		overflow: hidden;
		font-size: 1rem;
		font-weight: 600;
		line-height: 22px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.mk-af__p {
		display: -webkit-box;
		margin-top: 4px;
		overflow: hidden;
		color: var(--mk-ink2);
		font-size: 0.875rem;
		line-height: 20px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.mk-af__m,
	.mk-ac__m {
		display: block;
		margin-top: 4px;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.mk-alist {
		gap: 0;
		margin-top: 4px;
	}

	.mk-ac__a {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 12px;
		align-items: center;
		min-height: 44px;
		padding: 12px 0;
		border-bottom: 1px solid var(--mk-line);
		color: var(--mk-ink);
	}

	.mk-ac:last-child .mk-ac__a {
		border-bottom: 0;
	}

	.mk-ac__im {
		display: block;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: var(--mk-r);
		background: #e9edf2;
	}

	.mk-ac__im .kt-noimg,
	.mk-af__im .kt-noimg {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.mk-ac__bd {
		min-width: 0;
	}

	.mk-ac__t {
		display: -webkit-box;
		margin-top: 2px;
		overflow: hidden;
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 21px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/* Solutions link: one light row (no nested frame). */
	.mk-sol {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 56px;
		margin-top: 16px;
		padding: 8px 0;
		border-top: 1px solid var(--mk-line);
		border-bottom: 1px solid var(--mk-line);
		color: var(--mk-ink);
	}

	.mk-sol:hover {
		color: var(--mk-ink);
		text-decoration: none;
	}

	.mk-sol b {
		display: block;
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 21px;
	}

	.mk-sol small {
		display: block;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.mk-sol .icon {
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
		color: var(--mk-muted);
	}
}

/* ==========================================================================
   AMAN Mobile UI Kit V1 — P4 homepage + about on phones (FORM WEBSITE-MOBILE-KIT-P4-HOME-ABOUT-V1-01).
   Banner rule: clean 16:10 photo, no dark layer, no text on the photo; text and buttons below on white.
   Reuses the P1–P3 Kit tokens and components (.mk-vb video block, .mk-alist rows, mobile-convert).
   ========================================================================== */

.home--proto,
.ab-page {
	--mk-red: #d71920;
	--mk-red-d: #b4141a;
	--mk-ink: #162232;
	--mk-ink2: #3a4757;
	--mk-muted: #4a5666;
	--mk-line: #e3e7ed;
	--mk-bg: #f3f5f8;
	--mk-paper: #fff;
	--mk-r: 8px;
	--mk-r2: 12px;
}

/* Phone-only pieces, hidden on desktop. */
.mk-groups,
.mk-vb,
.mk-home-posts,
.hero__consult,
.ab-hero__pic,
.ab-mcta {
	display: none;
}

@media (max-width: 767.98px) {
	/* ---------- Shared Kit pieces used on these pages ---------- */
	.mk-groups {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mk-gc {
		display: grid;
		overflow: hidden;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r);
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.mk-gc:hover {
		color: var(--mk-ink);
		text-decoration: none;
	}

	.mk-gc__im {
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 4 / 3;
		background: #fff;
		color: var(--mk-ink2);
	}

	.mk-gc__im img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.mk-gc__im .icon {
		width: 32px;
		height: 32px;
	}

	.mk-gc__bd {
		display: block;
		padding: 8px 12px 12px;
	}

	.mk-gc__bd b {
		display: block;
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 21px;
	}

	.mk-gc__bd small {
		display: block;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.mk-vb {
		display: block;
	}

	.mk-vb .mk-vg {
		margin-top: 16px;
	}

	.mk-vb .mk-vc:first-child + .mk-vg,
	.mk-vb > .mk-vg:first-child {
		margin-top: 0;
	}

	.mk-home-posts {
		display: grid;
	}

	/* Consult card (mobile-convert box) on white. */
	.home--proto .mcv-wrap--box,
	.ab-mcta .mcv-wrap--box {
		padding: 16px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
	}

	.ab-mcta .mcv-qh {
		display: block;
		margin-bottom: 12px;
	}

	.ab-mcta .mcv-qh .icon {
		display: none;
	}

	.ab-mcta .mcv-qh__t {
		color: var(--mk-ink);
		font-size: 1.125rem;
		line-height: 24px;
	}

	.ab-mcta .mcv-qh__p {
		margin-top: 4px;
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
	}

	.home--proto .mcv-b,
	.ab-mcta .mcv-b {
		border-radius: var(--mk-r);
		font-size: 0.875rem;
	}

	/* ---------- Homepage ---------- */
	.home--proto {
		--mcv-red: var(--mk-red);
		--mcv-red-d: var(--mk-red-d);
		background: var(--mk-bg);
	}

	.home--proto .hero--photo {
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.home--proto .hero--photo::before,
	.home--proto .hero--kit .hero__bg-m,
	.home--proto .hero--photo .hero__kicker {
		display: none;
	}

	/* The hero <img> (art-directed to ddp-hero-087 on phones: srcset, eager, fetchpriority high), clean at 16:10.
	   Without that photo the older phone photo is shown the same way. */
	.home--proto .hero--kit .hero__pic {
		display: block;
	}

	.home--proto .hero--kit .hero__bg,
	.home--proto .hero--photo:not(.hero--kit) .hero__bg-m {
		position: static;
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		object-fit: cover;
		object-position: 50% 60%;
	}

	.home--proto .hero--photo .hero__inner,
	.home--proto .hero--photo.hero--no-photo .hero__inner {
		margin-top: 0;
		padding: 12px var(--gutter) 16px;
	}

	.home--proto .hero--photo .hero__title {
		margin: 6px 0 4px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.75rem;
		font-weight: 700;
		line-height: 34px;
		letter-spacing: 0;
		text-transform: none;
	}

	.home--proto .hero--photo .hero__text {
		margin: 0 0 12px;
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
	}

	.home--proto .hero--photo .hero__actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home--proto .hero--photo .hero__actions .btn {
		border-radius: var(--mk-r);
	}

	.home--proto .hero--photo .hero__actions .btn--primary {
		grid-column: 1 / -1;
		min-height: 48px;
		border-color: var(--mk-red);
		background: var(--mk-red);
		font-size: 0.875rem;
	}

	.home--proto .hero--photo .hero__actions .btn--ghost {
		display: inline-flex;
		min-height: 48px;
		padding: 0 12px;
		border: 1.5px solid #cbd3dd;
		background: var(--mk-paper);
		color: var(--mk-ink);
		font-size: 0.875rem;
		font-weight: 600;
	}

	.home--proto .hero--photo .hero__actions .btn--ghost .icon {
		width: 20px;
		height: 20px;
	}

	/* Trust: 2 × 2 on white, no nested frame. */
	.home--proto .trust--card {
		padding: 0;
		border-top: 1px solid var(--mk-line);
		border-bottom: 1px solid var(--mk-line);
		background: var(--mk-paper);
	}

	.home--proto .trust--card .container {
		padding: 0;
	}

	.home--proto .trust--card .trust__list {
		gap: 12px;
		padding: 16px var(--gutter);
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.home--proto .trust--card .trust__item {
		grid-template-columns: 32px minmax(0, 1fr);
		align-items: center;
	}

	.home--proto .trust--card .trust__icon {
		width: 32px;
		height: 32px;
	}

	.home--proto .trust--card .trust__icon .icon {
		width: 16px;
		height: 16px;
	}

	.home--proto .trust--card .trust__text strong {
		font-size: 0.8125rem;
		font-weight: 600;
		line-height: 18px;
	}

	.home--proto .trust--card .trust__text span {
		font-size: 0.75rem;
		line-height: 16px;
	}

	/* Section heads 18/24/700 sentence case + "Xem tất cả ›". */
	.home--proto .hsec {
		padding-top: 24px;
		background: transparent;
	}

	.home--proto .hsec__head {
		align-items: baseline;
		margin-bottom: 12px;
	}

	.home--proto .hsec__title {
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.125rem;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: 0;
		text-transform: none;
	}

	.home--proto .hsec__more {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin: -12px 0;
		color: var(--mk-red-d);
		font-size: 0.8125rem;
		font-weight: 600;
		text-transform: none;
	}

	.home--proto .hcats,
	.home--proto .hcat-allm,
	.home--proto .hvbig,
	.home--proto .hvlist,
	.home--proto .hposts {
		display: none;
	}

	.home--proto .mk-groups ~ .hcat-allm {
		display: none;
	}

	/* Without products in any group the old 4 tiles + button stay. */
	.home--proto .home-cats .container:not(:has(.mk-groups)) .hcats,
	.home--proto .home-cats .container:not(:has(.mk-groups)) .hcat-allm {
		display: grid;
	}

	/* Final consult block: the shared card on the page background (no dark photo band). */
	.home--proto .hcta {
		margin-top: 24px;
		padding: 0 var(--gutter) 24px;
		background: transparent;
		color: var(--mk-ink);
	}

	.home--proto .hcta::before {
		content: none;
	}

	.home--proto .hcta__inner {
		gap: 0;
		padding: 16px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
	}

	.home--proto .hcta__title {
		margin: 0 0 4px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.125rem;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: 0;
		text-transform: none;
	}

	.home--proto .hcta__text--m {
		margin: 0 0 12px;
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
	}

	.home--proto .hcta .mcv-b--line {
		border-color: #cbd3dd;
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.home--proto .hcta .mcv-ch--zalo .icon {
		color: #0068ff;
	}

	.home--proto .hcta .mcv-ch--whatsapp .icon {
		color: #128c4a;
	}

	.home--proto .hcta .mcv-oth {
		color: var(--mk-muted);
	}

	/* ---------- About ---------- */
	.ab-page {
		--mcv-red: var(--mk-red);
		--mcv-red-d: var(--mk-red-d);
		--mcv-ink: var(--mk-ink);
		--mcv-muted: var(--mk-muted);
		--mcv-line: var(--mk-line);
		--mcv-zalo: #0068ff;
	}

	.ab-hero {
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.ab-hero::before {
		content: none;
	}

	.ab-hero__pic {
		display: block;
	}

	.ab-hero__im {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		object-fit: cover;
		object-position: 50% 45%;
	}

	.ab-hero__in {
		padding: 12px var(--gutter) 16px;
	}

	.ab-hero .breadcrumb,
	.ab-hero .breadcrumb a,
	.ab-hero .breadcrumb__item + .breadcrumb__item::before {
		color: var(--mk-muted);
	}

	.ab-hero .breadcrumb {
		overflow: hidden;
		font-size: 0.75rem;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.ab-hero .breadcrumb__item:last-child span {
		color: var(--mk-ink2);
		font-weight: 500;
	}

	.ab-hero__t {
		margin: 4px 0 4px;
		color: var(--mk-ink);
		font-size: 1.75rem;
		line-height: 34px;
	}

	.ab-hero__p {
		margin-bottom: 12px;
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
	}

	.ab-hero .ab-vbtn {
		justify-content: center;
		width: 100%;
		min-height: 48px;
		border-radius: var(--mk-r);
		background: var(--mk-red);
		font-size: 0.875rem;
	}

	.ab-page .ab-sec__t {
		font-size: 1.125rem;
		line-height: 24px;
	}

	/* Values: 4 rows in ONE card. */
	.ab-vals {
		padding: 0 16px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
	}

	.ab-val {
		grid-template-columns: 36px minmax(0, 1fr);
	}

	.ab-val:last-child {
		border-bottom: 0;
	}

	.ab-val__ic {
		width: 36px;
		height: 36px;
	}

	.ab-val__ic .icon {
		width: 18px;
		height: 18px;
	}

	.ab-val__tx b {
		font-size: 0.9375rem;
		line-height: 21px;
	}

	.ab-val__tx span {
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
	}

	.ab-chips,
	.ab-vids {
		display: none;
	}

	.ab-page .ab-sec .tl-sh {
		align-items: baseline;
	}

	/* Workshop photo 4:3 + company facts in ONE card. */
	.ab-comp {
		gap: 16px;
		overflow: visible;
		border-radius: 0;
		background: transparent;
	}

	.ab-comp__ph {
		min-height: 0;
		aspect-ratio: 4 / 3;
		border-radius: var(--mk-r2);
	}

	.ab-comp__ph .ab-vbtn {
		display: none;
	}

	.ab-comp__in {
		padding: 0;
	}

	.ab-info {
		padding: 0 16px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
	}

	.ab-mcta {
		display: block;
		padding: 24px var(--gutter);
	}

	.ab-page > .tl-cta {
		display: none;
	}
}

/* Kit V1 P4 follow-up (FORM WEBSITE-MOBILE-KIT-P4-HOME-ABOUT-FIX-V1-02): one-line hero buttons and trust cells on phones. */
i.kit-td,
i.kit-tm {
	font-style: normal;
}

@media (max-width: 767.98px) {
	.home--proto .hero--photo .hero__actions .btn--ghost {
		gap: 8px;
		white-space: nowrap;
	}

	.home--proto .trust--card .trust__item {
		min-width: 0;
	}

	.home--proto .trust--card .trust__text {
		min-width: 0;
	}

	.home--proto .trust--card .trust__text strong,
	.home--proto .trust--card .trust__text > span {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

@media (max-width: 374.98px) {
	.home--proto .hero--photo .hero__actions .btn--ghost {
		gap: 6px;
		padding: 0 8px;
	}

	.home--proto .trust--card .trust__list {
		gap: 12px 8px;
	}
}

@media (max-width: 340.98px) {
	.home--proto .hero--photo .hero__actions .btn--ghost .icon {
		display: none;
	}
}

/* ==========================================================================
   AMAN Mobile UI Kit V1 — P5 product detail on phones (FORM WEBSITE-MOBILE-KIT-P5-PRODUCT-DETAIL-V1-01).
   Order: crumb → gallery → group · code, full name, summary → ONE price box → actions (sticky sentinel) →
   key specs → video → description (folded) → folds (specs, documents) → same group → photos → consult.
   ========================================================================== */

.spd-gc,
.spd-pbox,
.spd-vm,
.spd-relm,
.spd-pn--acc,
.spd-mcta {
	display: none;
}

@media (max-width: 767.98px) {
	.spd {
		background: var(--mk-bg);
	}

	.spd .tabbar,
	.spd-cat,
	.spd-code,
	.spd-k4,
	.spd-sbox__t,
	.spd-sbox__more {
		display: none;
	}

	/* Gallery: 16:11 white frame, counter, 64 × 48 thumbs. */
	.spd-top {
		gap: 0;
	}

	.spd-gal {
		padding-top: 8px;
	}

	.spd-main {
		aspect-ratio: 16 / 11;
		height: auto;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: #fff;
	}

	.spd-main img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.spd-cnt {
		right: 8px;
		bottom: 8px;
		padding: 2px 8px;
		border-radius: 999px;
		background: rgba(15, 27, 45, 0.7);
		color: #fff;
		font-size: 0.75rem;
		line-height: 16px;
	}

	.spd-thumbs .spd-th {
		width: 64px;
		height: 48px;
	}

	.spd-thumbs .spd-th img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Head: group · code, full name, summary, price, actions, key specs (in that order). */
	.spd-info {
		display: flex;
		flex-direction: column;
		padding: 8px 0 16px;
	}

	.spd-gc {
		display: block;
		order: 1;
		margin: 0;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.spd-tt {
		order: 2;
	}

	.spd-info .spd-title {
		display: block;
		margin: 4px 0 8px;
		overflow: visible;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 30px;
		letter-spacing: 0;
		text-transform: none;
		-webkit-line-clamp: unset;
	}

	.spd-lead {
		order: 3;
		margin: 0 0 12px;
		color: var(--mk-ink2);
		font-size: 0.875rem;
		line-height: 20px;
	}

	.spd-pbox {
		display: block;
		order: 4;
		margin: 0 0 12px;
		padding: 12px;
		border-radius: var(--mk-r);
		background: var(--mk-bg);
	}

	.spd-pbox__l {
		display: block;
		margin-bottom: 2px;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.spd-pbox__p {
		display: block;
		color: var(--mk-red-d);
		font-size: 1.125rem;
		font-weight: 600;
		line-height: 24px;
	}

	.spd-pbox__p--q {
		color: var(--mk-ink);
	}

	.spd-pbox__s {
		display: block;
		margin-top: 2px;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	/* English export note: one quieter line, so the main action still shows on the first screen. */
	.spd-pbox__s + .spd-pbox__s {
		font-size: 0.75rem;
		line-height: 16px;
	}

	.spd-pbox__s::first-letter {
		text-transform: uppercase;
	}

	.spd-info > .mcv-wrap {
		order: 5;
		margin: 0;
	}

	.spd-info .mcv-b {
		border-radius: var(--mk-r);
		font-size: 0.875rem;
	}

	/* Key specs as label / value rows, no frame. */
	.spd-info .spd-sbox {
		display: block;
		order: 6;
		margin: 8px 0 0;
		padding: 0;
		border: 0;
		background: transparent;
	}

	.spd-info .spd-slist,
	.spd-kv {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 6px 16px;
		margin: 0;
		font-size: 0.875rem;
		line-height: 20px;
	}

	.spd-info .spd-slist > div {
		display: contents;
	}

	.spd-info .spd-slist dt,
	.spd-kv dt {
		margin: 0;
		color: var(--mk-muted);
		font-weight: 400;
	}

	.spd-info .spd-slist dd,
	.spd-kv dd {
		margin: 0;
		color: var(--mk-ink);
		font-weight: 600;
		text-align: left;
	}

	.spd-share {
		order: 7;
	}

	/* Sections below: no frames, Kit heads, the FORM order. */
	.spd-body {
		gap: 24px;
		margin-top: 8px;
		padding-bottom: 8px;
	}

	.spd-pn {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.spd-ph {
		margin-bottom: 12px;
	}

	.spd-ph > .icon {
		display: none;
	}

	.spd-ph h2 {
		font-size: 1.125rem;
		line-height: 24px;
	}

	.spd-ph .spl-all {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin: -12px 0;
		color: var(--mk-red-d);
		font-size: 0.8125rem;
		font-weight: 600;
	}

	.spd-pn--video {
		order: 1;
	}

	.spd-pn--desc {
		order: 2;
	}

	.spd-pn--acc {
		display: block;
		order: 3;
	}

	.spd-pn--rel {
		order: 4;
	}

	.spd-pn--photos {
		order: 5;
	}

	.spd-pn--more {
		order: 6;
	}

	.spd-pn--specs,
	.spd-pn--docs,
	.spd-pn--dup,
	.spd-vbig,
	.spd-vl,
	.spd-rel {
		display: none;
	}

	.spd-pn--video {
		display: block;
	}

	.spd-vm,
	.spd-relm {
		display: block;
	}

	.spd-relm {
		display: grid;
	}

	/* Description: reading text, folded at about 4 lines. */
	.spd-pn--desc .collapse {
		--collapse-lines: 4 !important;
	}

	.spd-desc,
	.spd-desc p {
		color: #24303f;
		font-size: 1rem;
		line-height: 26px;
	}

	.spd-pn--desc .collapse__toggle {
		min-height: 44px;
		color: var(--mk-muted);
		font-size: 0.875rem;
	}

	/* Folds: one layer of cards. */
	.spd-ac {
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r);
		background: var(--mk-paper);
	}

	.spd-ac + .spd-ac {
		margin-top: 8px;
	}

	.spd-ac summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 52px;
		padding: 0 16px;
		color: var(--mk-ink);
		font-size: 0.9375rem;
		font-weight: 600;
		list-style: none;
		cursor: pointer;
	}

	.spd-ac summary::-webkit-details-marker {
		display: none;
	}

	.spd-ac summary::after {
		content: "";
		width: 8px;
		height: 8px;
		margin-top: -4px;
		border-right: 2px solid var(--mk-ink2);
		border-bottom: 2px solid var(--mk-ink2);
		transform: rotate(45deg);
	}

	.spd-ac[open] summary::after {
		margin-top: 4px;
		transform: rotate(-135deg);
	}

	.spd-ac .spd-kv,
	.spd-ac__bd {
		padding: 0 16px 16px;
	}

	.spd-ac__note {
		margin: 12px 0 0;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.spd-ac__lk {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		min-height: 44px;
		color: #1f57b8;
		font-size: 0.875rem;
		font-weight: 600;
	}

	.spd-ac__lk .icon {
		width: 14px;
		height: 14px;
	}

	.spd-ac__bd .mk-dlist + .spd-ac__note {
		margin-top: 12px;
	}

	/* Closing consult block. */
	.spd-mcta {
		display: block;
		padding: 16px var(--gutter) 24px;
	}

	.spd-mcta .mcv-wrap--box {
		padding: 16px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
	}

	.spd-mcta .mcv-qh {
		display: block;
		margin-bottom: 12px;
	}

	.spd-mcta .mcv-qh .icon {
		display: none;
	}

	.spd-mcta .mcv-qh__t {
		color: var(--mk-ink);
		font-size: 1.125rem;
		line-height: 24px;
	}

	.spd-mcta .mcv-qh__p {
		margin-top: 4px;
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
	}

	.spd-mcta .mcv-b {
		border-radius: var(--mk-r);
		font-size: 0.875rem;
	}

	/* Sticky bar on the product page: "Hỏi giá | Zalo | Gọi" (primary first). */
	body.single-san_pham .mcv-stk {
		grid-template-columns: minmax(0, 1fr) auto auto;
	}

	body.single-san_pham .mcv-stk .mcv-b--red {
		order: -1;
		border-radius: var(--mk-r);
		font-size: 0.875rem;
	}
}

/* ==========================================================================
   AMAN Mobile UI Kit V1 — P6 contact page on phones (FORM WEBSITE-MOBILE-KIT-P6-CONTACT-CTA-V1-01,
   Owner option A): red "Gửi yêu cầu tư vấn" first, Zalo | Gọi below, the form in Kit style (fields unchanged),
   company facts in one card. Desktop unchanged.
   ========================================================================== */

.contact-page {
	--mk-red: #d71920;
	--mk-red-d: #b4141a;
	--mk-ink: #162232;
	--mk-ink2: #3a4757;
	--mk-muted: #4a5666;
	--mk-line: #e3e7ed;
	--mk-bg: #f3f5f8;
	--mk-paper: #fff;
	--mk-r: 8px;
	--mk-r2: 12px;
	--tl-ink: #16202e;
	--tl-muted: #5e6b7c;
	--tl-line: #e6ebf1;
	--tl-red-d: #c8161c;
	--tl-blue: #1f57b8;
}

.ct-quick,
.ct-form-t,
.ct-info {
	display: none;
}

@media (max-width: 767.98px) {
	.contact-page {
		--mcv-red: var(--mk-red);
		--mcv-red-d: var(--mk-red-d);
		--mcv-ink: var(--mk-ink);
		--mcv-muted: var(--mk-muted);
		--mcv-line: var(--mk-line);
		--mcv-zalo: #0068ff;
		background: var(--mk-paper);
	}

	.contact-page > .section {
		padding-top: 12px;
	}

	.contact-page .breadcrumb {
		overflow: hidden;
		color: var(--mk-muted);
		font-size: 0.75rem;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.contact-page .page-title {
		margin: 4px 0 4px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 30px;
		letter-spacing: 0;
		text-transform: none;
	}

	.contact-page .lead {
		display: -webkit-box;
		margin: 0 0 16px;
		overflow: hidden;
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	/* Quick actions. */
	.ct-quick {
		display: block;
	}

	.ct-quick .mcv-wrap {
		margin: 0;
	}

	.ct-quick .mcv-b {
		border-radius: var(--mk-r);
		font-size: 0.875rem;
	}

	.ct-quick .mcv-b--line {
		min-height: 48px;
		border-color: #cbd3dd;
	}

	/* The form: its own chat row is replaced by the actions above; Kit heads and fields. */
	.contact-page .lead-form__chat {
		display: none;
	}

	.contact-page__grid {
		gap: 24px;
		margin-top: 24px;
	}

	.ct-form-t {
		display: block;
		margin: 0 0 12px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.125rem;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: 0;
		text-transform: none;
		scroll-margin-top: 72px;
	}

	.ct-form-t:focus {
		outline: 0;
	}

	.contact-page .lead-form {
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.contact-page .lead-form__label {
		color: var(--mk-ink);
		font-size: 0.875rem;
		font-weight: 600;
		line-height: 20px;
		text-transform: none;
	}

	.contact-page .lead-form__input {
		min-height: 44px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r);
		background: var(--mk-paper);
		color: var(--mk-ink);
		font-size: 1rem;
	}

	.contact-page .lead-form__types {
		gap: 0 8px;
	}

	/* Choice chips: 40 px pill inside a 44 px tap area (a form choice, may wrap to 2 rows). */
	.contact-page .lead-form__type span {
		min-height: 44px;
		padding: 0 14px;
		border: 0;
		background: transparent;
		color: var(--mk-ink);
		font-size: 0.875rem;
		position: relative;
		z-index: 0;
	}

	.contact-page .lead-form__type span::before {
		content: "";
		position: absolute;
		inset: 2px 0;
		z-index: -1;
		border: 1px solid var(--mk-line);
		border-radius: 999px;
		background: var(--mk-paper);
	}

	.contact-page .lead-form__type input:checked + span {
		background: transparent;
		color: #fff;
		font-weight: 600;
	}

	.contact-page .lead-form__type input:checked + span::before {
		border-color: var(--mk-red);
		background: var(--mk-red);
	}

	.contact-page .lead-form__submit {
		min-height: 48px;
		border-color: var(--mk-red);
		border-radius: var(--mk-r);
		background: var(--mk-red);
		font-size: 0.875rem;
		text-transform: none;
	}

	.contact-page .lead-form__alert,
	.contact-page .lead-form__done {
		padding: 12px;
		border: 0;
		border-radius: var(--mk-r);
		font-size: 0.875rem;
		line-height: 20px;
	}

	/* Company facts: one card (the old direct-contact box moves into it and the sheet). */
	.contact-page__direct {
		display: none;
	}

	.ct-info {
		display: block;
		margin-top: 24px;
	}

	.ct-info__t {
		margin: 0 0 12px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.125rem;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: 0;
		text-transform: none;
	}
}

/* ==========================================================================
   AMAN Mobile UI Kit V1 — P7 regression + clean-up on phones (FORM WEBSITE-MOBILE-KIT-P7-REGRESSION-CLEANUP-V1-01).
   ========================================================================== */

.search-page,
.video-detail,
.kt-article,
.tl-detail {
	--mk-red: #d71920;
	--mk-red-d: #b4141a;
	--mk-ink: #162232;
	--mk-ink2: #3a4757;
	--mk-muted: #4a5666;
	--mk-line: #e3e7ed;
	--mk-bg: #f3f5f8;
	--mk-paper: #fff;
	--mk-r: 8px;
	--mk-r2: 12px;
}

.spd-xnote {
	display: none;
}

@media (max-width: 767.98px) {
	/* 1. Product detail (EN): the export note under the actions. */
	.spd-info .spd-xnote {
		display: block;
		order: 6;
		margin: 8px 0 0;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.spd-info .spd-sbox {
		order: 7;
	}

	.spd-share {
		order: 8;
	}

	/* 2 + 3. Section heads with room under them (group page extras, search groups). */
	.mk-txx .mk-sh {
		margin-bottom: 12px;
	}

	.mk-txx .mk-sh__t small {
		color: var(--mk-muted);
		font-size: 0.8125rem;
		font-weight: 500;
	}

	.mk-txx .mk-vb .mk-vg,
	.mk-txx > .mk-vg {
		margin-top: 0;
	}

	.term-page .tx-pc {
		display: none;
	}

	/* 3. Search results page. */
	.search-page {
		--mcv-red: var(--mk-red);
		--mcv-red-d: var(--mk-red-d);
		--mcv-ink: var(--mk-ink);
		--mcv-muted: var(--mk-muted);
		--mcv-line: var(--mk-line);
		--mcv-zalo: #0068ff;
	}

	.search-page .phead {
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.search-page .phead__inner {
		padding: 12px var(--gutter) 4px;
	}

	.search-page .phead__eyebrow,
	.search-page .phead__desc,
	.search-page .sr-pc {
		display: none;
	}

	.search-page .phead .breadcrumb {
		margin: 0;
		overflow: hidden;
		color: var(--mk-muted);
		font-size: 0.75rem;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.search-page .phead .breadcrumb a,
	.search-page .phead .breadcrumb__item + .breadcrumb__item::before {
		color: var(--mk-muted);
	}

	.search-page .phead .breadcrumb__item:last-child span {
		color: var(--mk-ink2);
		font-weight: 500;
	}

	.search-page .phead__title {
		margin: 4px 0 2px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 30px;
		letter-spacing: 0;
		text-transform: none;
	}

	.search-page .phead__dm {
		display: block;
		margin: 0;
		overflow: hidden;
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.mk-sr .mk-alist {
		margin-top: 0;
	}

	.mk-srp {
		margin: 0;
		padding: 0;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r);
		background: var(--mk-paper);
		list-style: none;
	}

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

	.mk-srp a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 48px;
		padding: 0 16px;
		color: var(--mk-ink);
		font-size: 0.9375rem;
		font-weight: 600;
	}

	.mk-srp .icon {
		width: 16px;
		height: 16px;
		color: var(--mk-muted);
	}

	.mk-sr__hint {
		margin: 12px 0 4px;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		text-align: center;
	}

	.mk-sr__chips {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 8px;
	}

	.mk-sr .pagination {
		margin: 0;
	}

	/* 4. Video detail: "Máy trong video" = one link card with a chevron. */
	.vmach {
		padding: 0;
		border: 0;
		background: transparent;
	}

	.vmach .vmach__h {
		display: block;
		min-height: 0;
		margin: 0 0 12px;
		padding: 0;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.125rem;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: 0;
		text-transform: none;
	}

	.mk-mc--go .mk-mc__a {
		grid-template-columns: clamp(120px, 35vw, 136px) minmax(0, 1fr) 12px;
	}

	.mk-mc--go .mk-mc__a::after {
		content: "";
		width: 8px;
		height: 8px;
		border-top: 2px solid var(--mk-muted);
		border-right: 2px solid var(--mk-muted);
		transform: rotate(45deg);
	}

	/* 5. Article: one-line breadcrumb cut in the MIDDLE ("Trang chủ › … › Khi nào nên ch…"). */
	.kt-article .breadcrumb__list {
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
		white-space: nowrap;
	}

	.kt-article .breadcrumb__item {
		flex: 0 0 auto;
	}

	.kt-article .breadcrumb__item:not(:first-child):not(:last-child) {
		display: none;
	}

	.kt-article .breadcrumb__item:last-child {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.kt-article .breadcrumb__item:last-child:not(:nth-child(2))::before {
		content: "› … ›";
	}
}

/* P7 · 7 — phone sweep fixes (labels in sentence case, text ≥ 12 px, tap areas ≥ 44 px). */
@media (max-width: 767.98px) {
	/* Article: topic labels (sentence case, 12 px), table-of-contents links 44 px tall. */
	.kt-page .kt-tg {
		font-size: 0.75rem;
		letter-spacing: 0;
		text-transform: none;
	}

	.kt-toc a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0;
	}

	/* Video detail: product cards of the "related" rows, drawing band label. */
	.vm-c small,
	.vm-c__lk {
		font-size: 0.75rem;
	}

	.video-detail .buy-band__label {
		letter-spacing: 0;
		text-transform: none;
	}

	/* Document detail: type label + price note of related product cards. */
	.tl-detail .tl-ty {
		letter-spacing: 0;
		text-transform: none;
	}

	.tl-detail .spc__price small {
		font-size: 0.75rem;
	}

	/* 6. Document detail on the Kit text scale: body 14/20, meta 13/18. */
	.tl-detail .tl-info__lead,
	.tl-detail .tl-inc,
	.tl-detail .tl-pinfo {
		font-size: 0.875rem;
		line-height: 20px;
	}

	.tl-detail .tl-mrow {
		font-size: 0.8125rem;
		line-height: 18px;
	}
}

/* ==========================================================================
   AMAN PC UI Kit V1 — PC1: header (all pages, ≥ 1024 px) + product list
   (docs/ui/prototype/pc-kit-v1/, FORM WEBSITE-02-PC-KIT-V1-PC1-PRODUCT-LIST-HEADER-V1-01).
   Phones (Mobile Kit V1) and 768–1023 px are untouched.
   ========================================================================== */

@media (min-width: 1024px) {
	/* Order of the prototype: logo · menu · site search · VI / EN · [Liên hệ tư vấn]. */
	.site-header__inner {
		gap: 24px;
	}

	.site-header .logo {
		order: 1;
		flex-shrink: 0;
	}

	.primary-nav {
		order: 2;
	}

	.site-header__search,
	.site-header__search-btn {
		order: 3;
	}

	.lang-switch--header {
		order: 4;
		flex-shrink: 0;
	}

	.site-header__quote {
		order: 5;
		flex-shrink: 0;
		min-height: 44px;
		padding: 0 20px;
		border-color: var(--mk-red, #d71920);
		border-radius: 8px;
		background: var(--mk-red, #d71920);
		font-size: 0.9375rem;
		font-weight: 600;
	}

	.site-header .site-header__search {
		flex-shrink: 0;
		width: 240px;
	}

	.site-header .primary-nav__list {
		gap: 22px;
	}

	.site-header .primary-nav__list > li > a {
		font-size: 0.9375rem;
		white-space: nowrap;
	}

	/* While site.js measures (.hd-m), no transitions, so every step is read at its real size. */
	.site-header.hd-m,
	.site-header.hd-m * {
		transition: none !important;
	}

	/* Step 1: tighter gaps between menu items only (the 24 px between the header blocks always stays). */
	.site-header.hd-c1 .primary-nav__list {
		gap: 16px;
	}

	/* Step 2: search 180 px. */
	.site-header.hd-c2 .site-header__search {
		width: 180px;
	}

	/* Step 3: search becomes an icon; it opens the same site search under the header. */
	.site-header.hd-c3 .site-header__search {
		display: none;
	}

	.site-header.hd-c3 .site-header__search-btn {
		display: inline-flex;
		flex-shrink: 0;
	}

	.site-header.hd-c3 .site-header__search.is-open {
		position: absolute;
		top: 100%;
		right: var(--gutter);
		z-index: 5;
		display: block;
		width: 320px;
		padding: 12px;
		border-radius: 0 0 8px 8px;
		background: var(--color-navy);
	}

	/* Step 4 (only if still too narrow): the menu moves into the drawer. */
	.site-header.hd-c4 .primary-nav {
		display: none;
	}

	.site-header.hd-c4 .site-header__menu-btn {
		display: inline-flex;
		order: 0;
		flex-shrink: 0;
	}

	.site-header.hd-c4 .logo {
		margin-right: auto;
	}
}

/* PC1 · the Kit component base (defined for phones in P1) also from 1024 px, for the product list; overrides follow. */
@media (min-width: 1024px) {
	.mk-search {
		padding: 12px var(--gutter) 0;
		background: var(--mk-paper);
	}

	.mk-search label {
		display: flex;
		align-items: center;
		gap: 8px;
		height: 44px;
		padding: 0 12px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r);
		background: var(--mk-bg);
		color: var(--mk-muted);
	}

	.mk-search .icon {
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
	}

	.mk-search input {
		flex: 1;
		min-width: 0;
		height: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--mk-ink);
		font: inherit;
		font-size: 1rem;
		outline: 0;
		-webkit-appearance: none;
		appearance: none;
	}

	.mk-search label:focus-within {
		border-color: var(--mk-ink2);
	}

	.mk-chips {
		display: flex;
		gap: 8px;
		padding: 4px var(--gutter);
		overflow-x: auto;
		border-bottom: 1px solid var(--mk-line);
		background: var(--mk-paper);
		scrollbar-width: none;
	}

	.mk-chips::-webkit-scrollbar {
		display: none;
	}

	/* 36 px pill inside a 44 px tap area. */
	.mk-chip {
		position: relative;
		z-index: 0;
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		gap: 6px;
		min-height: 44px;
		padding: 0 14px;
		border: 0;
		background: transparent;
		color: var(--mk-ink);
		font: inherit;
		font-size: 0.8125rem;
		font-weight: 500;
		line-height: 18px;
		white-space: nowrap;
		cursor: pointer;
	}

	.mk-chip::before {
		content: "";
		position: absolute;
		inset: 4px 0;
		z-index: -1;
		border: 1px solid var(--mk-line);
		border-radius: 999px;
		background: var(--mk-paper);
	}

	.mk-chip:hover {
		color: var(--mk-ink);
		text-decoration: none;
	}

	.mk-chip small {
		color: var(--mk-muted);
		font-size: 0.75rem;
	}

	.mk-chip .icon {
		width: 16px;
		height: 16px;
	}

	.mk-chip.is-on {
		color: #fff;
		font-weight: 600;
	}

	.mk-chip.is-on::before {
		border-color: var(--mk-red);
		background: var(--mk-red);
	}

	.mk-chip.is-on small {
		color: #fff;
	}

	.mk-sec {
		padding: 16px var(--gutter) 0;
	}

	.mk-list {
		display: grid;
		gap: 12px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mk-mc__a {
		display: grid;
		grid-template-columns: clamp(120px, 35vw, 136px) minmax(0, 1fr);
		gap: 12px;
		align-items: center;
		min-height: 44px;
		padding: 12px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r);
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.mk-mc__a:hover {
		color: var(--mk-ink);
		text-decoration: none;
	}

	.mk-mc__im {
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		border-radius: var(--mk-r);
		background: #fff;
		color: var(--mk-muted);
	}

	.mk-mc__im img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		transform: scale(1.18);
	}

	.mk-mc__im.is-cover img {
		object-fit: cover;
		transform: none;
	}

	.mk-mc__im .icon {
		width: 28px;
		height: 28px;
	}

	.mk-mc__bd {
		min-width: 0;
	}

	.mk-mc__t {
		display: -webkit-box;
		overflow: hidden;
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 21px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.mk-mc__sp {
		display: block;
		margin-top: 4px;
		overflow: hidden;
		color: var(--mk-ink2);
		font-size: 0.8125rem;
		line-height: 18px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.mk-mc__pr {
		display: block;
		margin-top: 6px;
		color: var(--mk-red-d);
		font-size: 0.875rem;
		font-weight: 600;
		line-height: 20px;
	}

	.mk-mc__pr small {
		display: block;
		color: var(--mk-muted);
		font-size: 0.75rem;
		font-weight: 400;
		line-height: 16px;
	}

	.mk-mc__pr--q {
		color: var(--mk-ink);
	}

	.mk-pl .collapse__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		width: 100%;
		min-height: 44px;
		margin-top: 4px;
		border: 0;
		background: none;
		color: var(--mk-muted);
		font: inherit;
		font-size: 0.875rem;
	}

	.mk-pl .collapse__toggle .icon {
		width: 16px;
		height: 16px;
	}

	.mk-empty {
		padding: 8px 0;
		color: var(--mk-muted);
		text-align: center;
	}

	.mk-empty p {
		margin: 0 0 12px;
	}

	.mk-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 48px;
		padding: 0 16px;
		border: 1.5px solid transparent;
		border-radius: var(--mk-r);
		font: inherit;
		font-size: 0.875rem;
		font-weight: 600;
		cursor: pointer;
	}

	.mk-btn:hover {
		text-decoration: none;
	}

	.mk-btn--line {
		display: inline-flex;
		border-color: #cbd3dd;
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.mk-btn--red {
		width: 100%;
		margin-top: 16px;
		background: var(--mk-red);
		color: #fff;
	}


	.mk-demo {
		display: inline-block;
		margin-bottom: 4px;
		padding: 0 6px;
		border-radius: 4px;
		background: #f5a524;
		color: #111;
		font-size: 0.75rem;
		font-weight: 700;
		line-height: 16px;
		letter-spacing: 0.04em;
	}
}

/* PC1 · product list (/san-pham/, /nhom-may/<slug>/) from 1024 px: compact intro → one tools row → vertical card grid. */
.mk-tools {
	display: contents;
}

.mk-sort {
	display: none;
}

@media (min-width: 1024px) {
	.sp-page {
		--mk-band: max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter)));
	}

	/* Compact intro (same hero element, one H1). */
	.sp-page .spl-hero {
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.sp-page .spl-hero::before,
	.sp-page .spl-hero__eb,
	.sp-page .spl-hero__d,
	.sp-page .spl-hero__td {
		display: none;
	}

	.sp-page .spl-hero__tm {
		display: inline;
	}

	.sp-page .spl-hero__in {
		padding-block: 20px 4px;
	}

	.sp-page .spl-hero .breadcrumb,
	.sp-page .spl-hero .breadcrumb a,
	.sp-page .spl-hero .breadcrumb__item + .breadcrumb__item::before {
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.sp-page .spl-hero .breadcrumb__item:last-child span {
		color: var(--mk-ink2);
		font-weight: 500;
	}

	.sp-page .spl-hero__t {
		margin: 6px 0 4px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.875rem;
		font-weight: 700;
		line-height: 38px;
		letter-spacing: 0;
		text-transform: none;
	}

	.sp-page .spl-hero__dm {
		display: -webkit-box;
		margin: 0;
		overflow: hidden;
		color: var(--mk-muted);
		font-size: 0.9375rem;
		line-height: 22px;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.sp-page .spl-pc {
		display: none;
	}

	/* The Kit block, full-bleed background, content in the site width. */
	.sp-page .mk-pl {
		display: block;
		background: var(--mk-bg);
		color: var(--mk-ink);
		font-size: 0.9375rem;
		line-height: 22px;
	}

	.sp-page .mk-pl .mk-cta,
	.sp-page .mk-pl .mk-txx,
	.sp-page .mk-pl [data-sheet-open] {
		display: none;
	}

	/* Tools row: [local search 280–380] [chips] [sort], wraps by real width; chips never shrink their text. */
	.sp-page .mk-tools {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 16px;
		align-items: center;
		padding: 16px var(--mk-band) 20px;
		border-bottom: 1px solid var(--mk-line);
		background: var(--mk-paper);
	}

	.sp-page .mk-search {
		align-self: flex-start;
		flex: 0 0 clamp(280px, 28vw, 380px);
		padding: 0;
		background: transparent;
	}

	.sp-page .mk-search input {
		font-size: 0.9375rem;
	}

	.sp-page .mk-chips {
		flex: 1 1 0;
		min-width: 320px;
		flex-wrap: wrap;
		gap: 8px;
		padding: 0;
		overflow: visible;
		border: 0;
		background: transparent;
	}

	.sp-page .mk-chip {
		min-height: 38px;
		padding: 0 16px;
		font-size: 0.875rem;
	}

	.sp-page .mk-chip::before {
		inset: 0;
	}

	.sp-page .mk-chip:hover::before {
		border-color: #cbd3dd;
	}

	.sp-page .mk-chip.is-on:hover::before {
		border-color: var(--mk-red);
	}

	.sp-page .mk-sort {
		display: block;
		flex: 0 0 auto;
		align-self: flex-start;
	}

	.sp-page .mk-sort select {
		height: 40px;
		padding: 0 10px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r);
		background: var(--mk-paper);
		color: var(--mk-ink);
		font: inherit;
		font-size: 0.875rem;
	}

	/* Vertical card grid: 3 columns 1024–1199, 4 from 1200. */
	.sp-page .mk-pl .mk-sec {
		padding: 24px var(--mk-band) 40px;
	}

	.sp-page .mk-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}

	.sp-page .mk-mc__a {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		align-items: stretch;
		height: 100%;
		padding: 0;
		overflow: hidden;
		border-radius: var(--mk-r2);
	}

	.sp-page .mk-mc__a:hover {
		border-color: #cbd3dd;
	}

	.sp-page .mk-mc__im {
		border-bottom: 1px solid var(--mk-line);
		border-radius: 0;
	}

	.sp-page .mk-mc__im img {
		transform: scale(1.12);
	}

	.sp-page .mk-mc__im.is-cover img {
		transform: none;
	}

	.sp-page .mk-mc__bd {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 14px 16px 16px;
	}

	.sp-page .mk-mc .mk-demo {
		align-self: flex-start;
		margin: 0;
	}

	.sp-page .mk-mc__t {
		min-height: 44px;
		font-size: 1rem;
		line-height: 22px;
	}

	.sp-page .mk-mc__sp {
		margin: 0;
		font-size: 0.875rem;
		line-height: 20px;
	}

	.sp-page .mk-mc__pr {
		margin-top: auto;
		padding-top: 6px;
		font-size: 1rem;
		line-height: 22px;
	}

	.sp-page .mk-mc__pr small {
		font-size: 0.8125rem;
		line-height: 18px;
	}

	/* Desktop shows 12 cards before "Xem thêm" (phones 8). */
	.js .sp-page .mk-pl .collapse--list:not(.is-open) .mk-d12 {
		display: list-item;
	}

	.sp-page .mk-pl .collapse__toggle {
		width: auto;
		min-height: 44px;
		margin: 24px auto 0;
		padding: 0 20px;
		border: 1.5px solid #cbd3dd;
		border-radius: var(--mk-r);
		background: var(--mk-paper);
		color: var(--mk-ink);
		font-size: 0.9375rem;
		font-weight: 600;
	}

	.sp-page .mk-empty {
		padding: 24px 0;
	}
}

@media (min-width: 1200px) {
	.sp-page .mk-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   AMAN PC UI Kit V1 — PC2: video library (/video/, ?nhom_may=) + video detail, ≥ 1024 px
   (docs/ui/prototype/pc-kit-v1/ screens 4 + 5, FORM WEBSITE-02-PC-KIT-V1-PC2-VIDEO-V1-01).
   Phones (Mobile Kit V1) and 768–1023 px are untouched: every new block is hidden below 1024.
   ========================================================================== */
.vlx,
.vdr,
.vdx-rel {
	display: none;
}

@media (min-width: 1024px) {
	.video-library,
	.video-detail {
		--mk-band: max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter)));
	}

	/* --- Library: compact intro (same page-head element, one H1). --- */
	.video-library .phead {
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.video-library .phead__inner {
		padding-block: 20px 4px;
	}

	.video-library .phead__eyebrow,
	.video-library .phead__desc {
		display: none;
	}

	.video-library .phead .breadcrumb {
		margin: 0;
	}

	.video-library .phead .breadcrumb,
	.video-library .phead .breadcrumb a,
	.video-library .phead .breadcrumb__item + .breadcrumb__item::before {
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.video-library .phead .breadcrumb__item:last-child span {
		color: var(--mk-ink2);
		font-weight: 500;
	}

	.video-library .phead__title {
		margin: 6px 0 4px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.875rem;
		font-weight: 700;
		line-height: 38px;
		letter-spacing: 0;
		text-transform: none;
	}

	.video-library .phead__dm {
		display: block;
		margin: 0;
		overflow: hidden;
		color: var(--mk-muted);
		font-size: 0.9375rem;
		line-height: 22px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* The old desktop sections give way to the Kit block; the contextual band at the end stays. */
	.video-library .vl-pc {
		display: none;
	}

	.video-library .cta-band.vl-pc {
		display: block;
	}

	.video-library .mk-vl {
		display: block;
		background: var(--mk-bg);
		color: var(--mk-ink);
		font-size: 0.9375rem;
		line-height: 22px;
	}

	.video-library .mk-vl .mk-cta,
	.video-library .mk-vl .mk-sec > .mk-vc--big,
	.video-library .mk-vl .mk-sec > .mk-vsec,
	.video-library .mk-vl .mk-sec > .collapse {
		display: none;
	}

	/* Tools row: [local search 280–380] [chips with counts], wraps by real width; chips never shrink their text. */
	.video-library .mk-tools {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 16px;
		align-items: center;
		padding: 16px var(--mk-band) 20px;
		border-bottom: 1px solid var(--mk-line);
		background: var(--mk-paper);
	}

	.video-library .mk-search {
		flex: 0 0 clamp(280px, 28vw, 380px);
		padding: 0;
		background: transparent;
	}

	.video-library .mk-search input {
		font-size: 0.9375rem;
	}

	.video-library .mk-chips {
		flex: 1 1 0;
		flex-wrap: wrap;
		gap: 8px;
		min-width: 320px;
		padding: 0;
		overflow: visible;
		border: 0;
		background: transparent;
	}

	.video-library .mk-chip {
		min-height: 38px;
		padding: 0 16px;
		font-size: 0.875rem;
	}

	.video-library .mk-chip::before {
		inset: 0;
	}

	.video-library .mk-chip:hover::before {
		border-color: #cbd3dd;
	}

	.video-library .mk-chip.is-on:hover::before {
		border-color: var(--mk-red);
	}

	.video-library .mk-vl .mk-sec {
		padding: 28px var(--mk-band) 40px;
	}

	/* Featured: big 2/3 + 2 small stacked 1/3; below, a grid that follows the item count. */
	.vlx {
		display: block;
	}

	.vlx-feat {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: 24px;
		align-items: start;
	}

	.vlx-side {
		display: grid;
		gap: 20px;
		align-content: start;
	}

	.vlx-g {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px 20px;
		margin: 32px 0 0;
		padding: 0;
		list-style: none;
	}

	.vlx > .collapse:first-child .vlx-g {
		margin-top: 0;
	}

	/* 2 left = 1/2 + 1/2; 1 left keeps its column width (never stretched over the row). */
	.vlx-g--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vlx .collapse__toggle {
		display: flex;
		align-items: center;
		gap: 4px;
		width: auto;
		min-height: 44px;
		margin: 24px auto 0;
		padding: 0 20px;
		border: 1.5px solid #cbd3dd;
		border-radius: var(--mk-r);
		background: var(--mk-paper);
		color: var(--mk-ink);
		font: inherit;
		font-size: 0.9375rem;
		font-weight: 600;
	}

	.vlx .collapse__toggle .icon {
		width: 16px;
		height: 16px;
	}

	/* Video card (list, featured, related). */
	.vlx-c {
		display: block;
		min-width: 0;
		color: var(--mk-ink);
	}

	.vlx-c:hover {
		color: var(--mk-ink);
		text-decoration: none;
	}

	.vlx-c:hover .vlx-c__t {
		color: var(--mk-red-d);
	}

	.vlx-c .mk-vc__th {
		position: relative;
		display: block;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: var(--mk-r);
		background: #e9edf2;
	}

	.vlx-c .mk-vc__th img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.vlx-c .mk-vc__th .vnp {
		z-index: 2;
	}

	.vlx-c .mk-play {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
	}

	.vlx-c .mk-play i {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: 2px solid #fff;
		border-radius: 50%;
		background: rgba(15, 27, 45, 0.62);
	}

	.vlx-c .mk-play i::after {
		content: "";
		margin-left: 3px;
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
		border-left: 12px solid #fff;
	}

	.vlx-c--big .mk-play i {
		width: 56px;
		height: 56px;
	}

	.vlx-c--big .mk-play i::after {
		margin-left: 4px;
		border-top-width: 10px;
		border-bottom-width: 10px;
		border-left-width: 16px;
	}

	.vlx-c__t {
		display: -webkit-box;
		margin-top: 10px;
		overflow: hidden;
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 21px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.vlx-c--big .vlx-c__t {
		font-size: 1.125rem;
		line-height: 24px;
	}

	.vlx-c__m {
		display: block;
		margin-top: 2px;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	/* --- Detail: video 2/3 + rail 1/3, related full width below; no end band (LOCK contextual). --- */
	.video-detail .cbar,
	.video-detail .vd__channel,
	.video-detail .vd__actions,
	.video-detail .vd__summary,
	.video-detail .machine-card,
	.video-detail .vd__discovery,
	.video-detail .vd__series,
	.video-detail .vd__aside > .video-list,
	.video-detail .vd__topics {
		display: none;
	}

	.video-detail .mcrumb {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		align-items: center;
		padding: 16px var(--mk-band) 0;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.video-detail .mcrumb > .icon {
		width: 16px;
		height: 16px;
	}

	.video-detail .mcrumb a {
		color: var(--mk-muted);
	}

	.video-detail .mcrumb a.is-last {
		color: var(--mk-ink2);
		font-weight: 500;
	}

	.video-detail .vd {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: 32px;
		padding-top: 16px;
	}

	.video-detail .vd__main {
		gap: 0;
	}

	.video-detail .vd__top {
		display: block;
	}

	.video-detail .vd-tt {
		display: block;
		margin-top: 16px;
	}

	.video-detail .vd__title {
		margin: 0;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.75rem;
		font-weight: 700;
		line-height: 36px;
		letter-spacing: 0;
		text-transform: none;
	}

	.video-detail .vd-metai {
		display: flex;
		gap: 6px;
		align-items: center;
		margin: 4px 0 0;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.video-detail .vd-metai .icon {
		width: 16px;
		height: 16px;
	}

	/* Parts: "Bài viết kỹ thuật" reads as a section (16/26, ~72ch); specs / documents stay closed parts, sentence case. */
	.video-detail .vd__accordions {
		margin-top: 28px;
	}

	.video-detail .vd .accordion__title {
		font-family: var(--font-body);
		font-size: 1rem;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
	}

	.video-detail .accordion--article {
		border: 0;
		background: transparent;
	}

	.video-detail .accordion--article > .accordion__summary {
		padding: 0 0 12px;
		pointer-events: none;
	}

	.video-detail .accordion--article .accordion__num,
	.video-detail .accordion--article .accordion__chevron {
		display: none;
	}

	.video-detail .vd .accordion--article .accordion__title {
		color: var(--mk-ink);
		font-size: 1.375rem;
		font-weight: 700;
		line-height: 28px;
	}

	.video-detail .accordion--article > .accordion__panel {
		padding: 0;
	}

	.video-detail .accordion--article .prose {
		max-width: 72ch;
		color: #24303f;
		font-size: 1rem;
		line-height: 26px;
	}

	.video-detail .accordion--article > .accordion__panel {
		border-top: 0;
	}

	.video-detail .accordion--article .collapse__toggle {
		margin-left: 0;
	}

	/* The closed parts after the article form their own box. */
	.video-detail .vd__accordions .accordion--article + .accordion {
		margin-top: 24px;
		border-top: 1px solid var(--color-border);
		border-radius: var(--radius) var(--radius) 0 0;
	}

	.video-detail .vd__accordions .accordion--article + .accordion:last-child {
		border-radius: var(--radius);
	}

	/* Rail: [Hỏi giá máy trong video] + the machine card (whole card is the link). */
	.video-detail .vd__aside {
		gap: 20px;
	}

	.vdr {
		display: grid;
		gap: 20px;
	}

	.vdr-box {
		padding: 20px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.vdr-box__h {
		margin: 0 0 12px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.125rem;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: 0;
		text-transform: none;
	}

	.vdr .mk-btn {
		font-size: 0.9375rem;
	}

	.vdr .mk-btn .icon {
		width: 18px;
		height: 18px;
	}

	.vdr-q.mk-btn--red {
		margin-top: 0;
	}

	.vdr-q.mk-btn--red:hover {
		background: var(--mk-red-d);
		color: #fff;
	}

	.vdr-two {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-top: 10px;
	}

	.vdr-two .mk-btn--line {
		display: flex;
	}

	.vdr-two .mk-btn--line:hover {
		border-color: var(--mk-ink2);
		color: var(--mk-ink);
	}

	.vdr .mk-mc__a {
		grid-template-columns: 120px minmax(0, 1fr) 12px;
		gap: 16px;
		padding: 0;
		border: 0;
	}

	.vdr .mk-mc__a::after {
		content: "";
		width: 8px;
		height: 8px;
		border-top: 2px solid var(--mk-muted);
		border-right: 2px solid var(--mk-muted);
		transform: rotate(45deg);
	}

	.vdr .mk-mc__a:hover .mk-mc__t {
		color: var(--mk-red-d);
	}

	.vdr .mk-mc__t {
		font-size: 1rem;
		line-height: 22px;
	}

	/* Related videos: 4 columns (≥ 1200), 3 columns 1024–1199 (the 4th hidden). */
	.vdx-rel {
		display: block;
		padding: 40px 0 48px;
	}

	.vdx-rel__h {
		display: flex;
		gap: 12px;
		align-items: baseline;
		justify-content: space-between;
		margin-bottom: 16px;
	}

	.vdx-rel__h h2 {
		margin: 0;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.375rem;
		font-weight: 700;
		line-height: 28px;
		letter-spacing: 0;
		text-transform: none;
	}

	.vdx-rel__h a {
		display: inline-flex;
		gap: 2px;
		align-items: center;
		color: var(--mk-red-d);
		font-size: 0.875rem;
		font-weight: 600;
	}

	.vdx-rel__h a .icon {
		width: 16px;
		height: 16px;
	}

	.vdx-rel__g {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px 20px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vdx-rel__g > li:nth-child(n + 4) {
		display: none;
	}
}

@media (min-width: 1024px) and (max-width: 1040px) {
	.video-detail .vd {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	}
}

@media (min-width: 1200px) {
	.vdx-rel__g {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.vdx-rel__g > li:nth-child(n + 4) {
		display: list-item;
	}
}

/* ==========================================================================
   AMAN PC UI Kit V1 — PC3: documents (/tai-lieu/) + knowledge (/kien-thuc/, topics), ≥ 1024 px
   (docs/ui/prototype/pc-kit-v1/ screens 6 + 7, FORM WEBSITE-02-PC-KIT-V1-PC3-DOCS-KNOWLEDGE-V1-01).
   Phones and 768–1023 px keep .mk-tl / .mk-kt / .tl-pc / .kt-pc: the new blocks are hidden below 1024.
   ========================================================================== */
.tlx,
.ktx {
	display: none;
}

@media (min-width: 1024px) {
	.tl-list,
	.kt-list,
	.contact-page {
		--mk-red: #d71920;
		--mk-red-d: #b4141a;
		--mk-ink: #162232;
		--mk-ink2: #3a4757;
		--mk-muted: #4a5666;
		--mk-line: #e3e7ed;
		--mk-bg: #f3f5f8;
		--mk-paper: #fff;
		--mk-r: 8px;
		--mk-r2: 12px;
		--mk-band: max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter)));
	}

	/* --- Compact intro (same hero element, one H1): breadcrumb · H1 30/38 · one line. --- */
	.tl-list .tl-hero,
	.kt-list .kt-hero {
		border-bottom: 0;
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.kt-list .kt-hero::before,
	.tl-list .tl-hero__eb,
	.tl-list .tl-hero__p,
	.tl-list .tl-hero .tl-search,
	.tl-list .tl-hero__vis,
	.kt-list .kt-hero__eb,
	.kt-list .kt-hero__p,
	.kt-list .kt-hero .kt-search {
		display: none;
	}

	.tl-list .tl-hero__in,
	.kt-list .kt-hero__in {
		display: block;
		padding-block: 20px 4px;
	}

	.tl-list .tl-hero .breadcrumb,
	.tl-list .tl-hero .breadcrumb a,
	.tl-list .tl-hero .breadcrumb__item + .breadcrumb__item::before,
	.kt-list .kt-hero .breadcrumb,
	.kt-list .kt-hero .breadcrumb a,
	.kt-list .kt-hero .breadcrumb__item + .breadcrumb__item::before {
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.tl-list .tl-hero .breadcrumb,
	.kt-list .kt-hero .breadcrumb {
		margin: 0;
	}

	.tl-list .tl-hero .breadcrumb__item:last-child span,
	.kt-list .kt-hero .breadcrumb__item:last-child span {
		color: var(--mk-ink2);
		font-weight: 500;
	}

	.tl-list .tl-hero__t,
	.kt-list .kt-hero__t {
		margin: 6px 0 4px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.875rem;
		font-weight: 700;
		line-height: 38px;
		letter-spacing: 0;
		text-transform: none;
	}

	.tl-list .tl-hero__t .kit-td,
	.kt-list .kt-hero__t .kit-td {
		display: none;
	}

	.tl-list .tl-hero__t .kit-tm,
	.kt-list .kt-hero__t .kit-tm {
		display: inline;
	}

	.tl-list .tl-hero .kit-dm,
	.kt-list .kt-hero .kit-dm {
		display: block;
		margin: 0;
		overflow: hidden;
		color: var(--mk-muted);
		font-size: 0.9375rem;
		line-height: 22px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* The old desktop bodies give way to the Kit blocks (the closing band stays for PC6). */
	.tl-list .tl-pc,
	.kt-list .kt-pc {
		display: none;
	}

	.tlx,
	.ktx {
		display: block;
		background: var(--mk-bg);
		color: var(--mk-ink);
		font-size: 0.9375rem;
		line-height: 22px;
	}

	/* Tools row: [local search 280–380] [chips + counts], wraps by real width; chips never shrink their text. */
	.tlx-tools,
	.ktx-tools {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 16px;
		align-items: center;
		padding: 16px var(--mk-band) 20px;
		border-bottom: 1px solid var(--mk-line);
		background: var(--mk-paper);
	}

	.tlx .mk-search,
	.ktx .mk-search {
		flex: 0 0 clamp(280px, 28vw, 380px);
		padding: 0;
		background: transparent;
	}

	.tlx .mk-search input,
	.ktx .mk-search input {
		font-size: 0.9375rem;
	}

	.tlx .mk-chips,
	.ktx .mk-chips {
		flex: 1 1 0;
		flex-wrap: wrap;
		gap: 8px;
		align-items: center;
		min-width: 320px;
		padding: 0;
		overflow: visible;
		border: 0;
		background: transparent;
	}

	.tlx .mk-chip,
	.ktx .mk-chip {
		min-height: 38px;
		padding: 0 16px;
		font-size: 0.875rem;
	}

	.tlx .mk-chip::before,
	.ktx .mk-chip::before {
		inset: 0;
	}

	.tlx .mk-chip:hover::before,
	.ktx .mk-chip:hover::before {
		border-color: #cbd3dd;
	}

	.tlx .mk-chip.is-on:hover::before,
	.ktx .mk-chip.is-on:hover::before {
		border-color: var(--mk-red);
	}

	.tlx-sep {
		width: 1px;
		height: 24px;
		margin: 0 4px;
		background: var(--mk-line);
	}

	.tlx-body,
	.ktx-body {
		padding: 28px var(--mk-band) 48px;
	}

	.tlx-empty {
		padding: 24px 0;
		color: var(--mk-muted);
		text-align: center;
	}

	.tlx-empty p {
		margin: 0 0 12px;
	}

	.tlx-empty .mk-btn {
		display: inline-flex;
	}

	/* --- Documents. --- */
	.tlx-sec + .tlx-sec {
		margin-top: 40px;
	}

	.tlx-eb {
		margin: 0 0 2px;
		font-size: 0.8125rem;
		font-weight: 600;
		line-height: 18px;
	}

	.tlx-eb--free {
		color: #17763f;
	}

	.tlx-eb--paid {
		color: var(--mk-red-d);
	}

	.tlx-h {
		margin: 0 0 16px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.375rem;
		font-weight: 700;
		line-height: 28px;
		letter-spacing: 0;
		text-transform: none;
	}

	.tlx-p {
		margin: -12px 0 16px;
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
	}

	.tlx-g,
	.tlx-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.tlx-g--paid {
		align-items: start;
	}

	.tlx-g--paid .tlx-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.tlx-c {
		position: relative;
		display: grid;
		grid-template-columns: 80px minmax(0, 1fr) auto;
		gap: 16px;
		align-items: center;
		padding: 16px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
	}

	.tlx-c--paid {
		border-style: dashed;
	}

	.tlx-pv {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80px;
		aspect-ratio: 3 / 4;
		overflow: hidden;
		border: 1px solid var(--mk-line);
		border-radius: 6px;
		background: var(--mk-bg);
		color: var(--mk-muted);
	}

	.tlx-pv img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top;
	}

	.tlx-pv .icon {
		width: 24px;
		height: 24px;
	}

	.tlx-pv--lock {
		flex-direction: column;
		gap: 4px;
		background: repeating-linear-gradient(45deg, #f3f5f8 0 8px, #e9edf2 8px 16px);
		font-size: 0.75rem;
	}

	.tlx-c__bd {
		min-width: 0;
	}

	.tlx-tag {
		display: inline-block;
		margin: 0 6px 4px 0;
		padding: 1px 8px;
		border-radius: 999px;
		background: #eef2f8;
		color: #1f57b8;
		font-size: 0.75rem;
		font-weight: 500;
		line-height: 16px;
	}

	.tlx-tag--paid {
		background: #fdeeee;
		color: var(--mk-red-d);
	}

	.tlx-c__t {
		display: -webkit-box;
		overflow: hidden;
		color: var(--mk-ink);
		font-size: 1rem;
		font-weight: 600;
		line-height: 22px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/* The whole card follows its name; the button stays on top. */
	.tlx-c__t::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.tlx-c__t:hover {
		color: var(--mk-red-d);
		text-decoration: none;
	}

	.tlx-c__m {
		display: block;
		margin-top: 2px;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.tlx-act {
		position: relative;
		z-index: 1;
		min-height: 44px;
		white-space: nowrap;
	}

	.tlx-act.mk-btn--red {
		width: auto;
		margin-top: 0;
		padding: 0 20px;
		font-size: 0.9375rem;
	}

	.tlx-act.mk-btn--red:hover {
		background: var(--mk-red-d);
		color: #fff;
	}

	.tlx-act.mk-btn--line {
		display: inline-flex;
		font-size: 0.9375rem;
	}

	.tlx-act.mk-btn--line:hover {
		border-color: var(--mk-ink2);
		color: var(--mk-ink);
	}

	.tlx-act .icon {
		width: 18px;
		height: 18px;
	}

	.tlx-c .tl-demo {
		margin-bottom: 4px;
	}

	.tlx-proc {
		padding: 16px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
	}

	.tlx-proc__t {
		margin: 0 0 8px;
		color: var(--mk-ink);
		font-size: 1rem;
		font-weight: 600;
		line-height: 22px;
	}

	.tlx-proc ol {
		display: grid;
		gap: 10px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.tlx-proc li {
		display: grid;
		grid-template-columns: 28px minmax(0, 1fr);
		gap: 10px;
		align-items: start;
		color: var(--mk-ink2);
		font-size: 0.875rem;
		line-height: 20px;
	}

	.tlx-proc i {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: #fdeeee;
		color: var(--mk-red-d);
		font-style: normal;
		font-weight: 700;
	}

	/* --- Knowledge. --- */
	.ktx .mk-topic {
		display: block;
		font-size: 0.8125rem;
		font-weight: 600;
		line-height: 18px;
		letter-spacing: 0;
		text-transform: none;
	}

	.ktx .mk-topic--c {
		color: var(--mk-red-d);
	}

	.ktx .mk-topic--v {
		color: #17763f;
	}

	.ktx .mk-topic--q {
		color: #1f57b8;
	}

	.ktx .mk-topic--x {
		color: var(--mk-muted);
	}

	.ktx-m {
		display: block;
		margin-top: 2px;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.ktx-feat {
		display: grid;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: 28px;
		align-items: start;
	}

	.ktx-feat--solo {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	}

	.ktx-f {
		display: block;
		overflow: hidden;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.ktx-f:hover,
	.ktx-r:hover,
	.ktx-c:hover {
		color: var(--mk-ink);
		text-decoration: none;
	}

	.ktx-f:hover .ktx-f__t,
	.ktx-r:hover .ktx-r__t,
	.ktx-c:hover .ktx-c__t {
		color: var(--mk-red-d);
	}

	.ktx-f__im,
	.ktx-r__im,
	.ktx-c__im {
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: #e9edf2;
		color: var(--mk-muted);
	}

	.ktx-f__im img,
	.ktx-r__im img,
	.ktx-c__im img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ktx .kt-noimg .icon {
		width: 28px;
		height: 28px;
	}

	.ktx-f__bd {
		display: block;
		padding: 16px 20px 20px;
	}

	.ktx-f__t {
		display: -webkit-box;
		margin-top: 2px;
		overflow: hidden;
		font-size: 1.25rem;
		font-weight: 600;
		line-height: 28px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.ktx-f__p {
		display: -webkit-box;
		margin-top: 6px;
		overflow: hidden;
		color: var(--mk-ink2);
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.ktx-f .ktx-m {
		margin-top: 8px;
	}

	.ktx-side {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.ktx-r {
		display: grid;
		grid-template-columns: 160px minmax(0, 1fr);
		gap: 16px;
		align-items: center;
		padding: 14px 0;
		border-bottom: 1px solid var(--mk-line);
		color: var(--mk-ink);
	}

	.ktx-side > li:first-child .ktx-r {
		padding-top: 0;
	}

	.ktx-side > li:last-child .ktx-r {
		border-bottom: 0;
	}

	.ktx-r__im,
	.ktx-c__im {
		border-radius: var(--mk-r);
	}

	.ktx-r__bd {
		min-width: 0;
	}

	.ktx-r__t,
	.ktx-c__t {
		display: -webkit-box;
		overflow: hidden;
		font-size: 1rem;
		font-weight: 600;
		line-height: 22px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.ktx-g {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px 20px;
		margin: 32px 0 0;
		padding: 0;
		list-style: none;
	}

	.ktx-c {
		display: block;
		color: var(--mk-ink);
	}

	.ktx-c__im {
		margin-bottom: 10px;
	}

	.ktx .collapse__toggle {
		display: flex;
		align-items: center;
		gap: 4px;
		width: auto;
		min-height: 44px;
		margin: 24px auto 0;
		padding: 0 20px;
		border: 1.5px solid #cbd3dd;
		border-radius: var(--mk-r);
		background: var(--mk-paper);
		color: var(--mk-ink);
		font: inherit;
		font-size: 0.9375rem;
		font-weight: 600;
	}

	.ktx .collapse__toggle .icon {
		width: 16px;
		height: 16px;
	}

	.ktx-sol {
		margin-top: 32px;
	}

	/* --- Contact: why "Yêu cầu bản vẽ" is already chosen (arriving from a paid drawing). --- */
	.contact-page .ct-pre {
		margin: -4px 0 12px;
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
	}
}

/* PC3: the "already chosen" note on the contact page (any width; only shown when coming from a paid drawing). */
.contact-page .ct-pre {
	margin: 0 0 12px;
	color: #4a5666;
	font-size: 0.875rem;
	line-height: 20px;
}

/* ==========================================================================
   AMAN PC UI Kit V1 — PC4: homepage + about (/ve-chung-toi/), ≥ 1024 px
   (docs/ui/prototype/pc-kit-v1/ screens 1 + 8, FORM WEBSITE-02-PC-KIT-V1-PC4-HOME-ABOUT-V1-01).
   Phones (Type B, UAT passed) and 768–1023 px are untouched: the new pieces are hidden below 1024.
   ========================================================================== */
.hero__pc,
.ab-hero__pc,
.hkx,
.pcx {
	display: none;
}

@media (min-width: 1024px) {
	.home--proto,
	.ab-page {
		--mk-red: #d71920;
		--mk-red-d: #b4141a;
		--mk-red-s: #fdeeee;
		--mk-ink: #162232;
		--mk-ink2: #3a4757;
		--mk-muted: #4a5666;
		--mk-line: #e3e7ed;
		--mk-bg: #f3f5f8;
		--mk-paper: #fff;
		--mk-r: 8px;
		--mk-r2: 12px;
		--mk-band: max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter)));
	}

	.pcx {
		display: inline;
	}

	.pcx-n {
		display: none;
	}

	/* --- Type B hero: text left, CLEAN 16:10 photo right (radius 14, no dark layer, no photo under the text). --- */
	.home--proto .hero--pc,
	.ab-page .ab-hero {
		display: grid;
		grid-template-columns: var(--mk-band) minmax(0, 1fr) 48px minmax(0, 1.15fr) var(--mk-band);
		align-items: center;
		padding-block: 40px;
		overflow: visible;
		border-bottom: 1px solid var(--mk-line);
		background: var(--mk-paper);
		background-image: none;
		color: var(--mk-ink);
	}

	.home--proto .hero--pc::before,
	.ab-page .ab-hero::before,
	.home--proto .hero--pc > .hero__pic,
	.home--proto .hero--pc > .hero__bg,
	.home--proto .hero--pc > .hero__bg-m,
	.home--proto .hero--pc .hero__kicker,
	.ab-page .ab-hero__pic {
		display: none;
	}

	.home--proto .hero--pc .hero__inner,
	.ab-page .ab-hero__in {
		grid-row: 1;
		grid-column: 2;
		width: auto;
		max-width: none;
		height: auto;
		min-height: 0;
		margin: 0;
		padding: 0;
	}

	.hero__pc,
	.ab-hero__pc {
		display: block;
		grid-row: 1;
		grid-column: 4;
	}

	.hero__pc-im,
	.ab-hero__pc-im {
		display: block;
		width: 100%;
		max-width: none;
		height: auto;
		aspect-ratio: 16 / 10;
		border-radius: 14px;
		background: #e9edf2;
		object-fit: cover;
		object-position: 50% 60%;
	}

	.home--proto .hero--pc .hero__title,
	.ab-page .ab-hero__t {
		max-width: none;
		margin: 8px 0 12px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 2.5rem;
		font-weight: 700;
		line-height: 48px;
		letter-spacing: -0.01em;
		text-transform: none;
	}

	.home--proto .hero--pc .hero__text,
	.ab-page .ab-hero__p {
		max-width: 52ch;
		margin: 0 0 24px;
		color: var(--mk-ink2);
		font-size: 1.0625rem;
		line-height: 27px;
	}

	.home--proto .hero--pc .btn--ghost {
		border: 1.5px solid #cbd3dd;
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.home--proto .hero--pc .btn--ghost:hover {
		border-color: var(--mk-ink2);
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.ab-page .ab-hero .breadcrumb,
	.ab-page .ab-hero .breadcrumb a,
	.ab-page .ab-hero .breadcrumb__item + .breadcrumb__item::before {
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.ab-page .ab-hero .breadcrumb__item:last-child span {
		color: var(--mk-ink2);
		font-weight: 500;
	}

	/* --- Trust: 4 cells in one row (light red round icon · bold line · small line), no floating card. --- */
	.home--proto .trust--card {
		margin-top: 0;
		border-bottom: 1px solid var(--mk-line);
		background: var(--mk-paper);
	}

	.home--proto .trust--card .trust__list {
		gap: 20px;
		max-width: none;
		padding: 20px 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.home--proto .trust--card .trust__item {
		padding: 0;
	}

	.home--proto .trust--card .trust__item + .trust__item {
		border-left: 0;
	}

	.home--proto .trust--card .trust__icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--mk-red-s);
		color: var(--mk-red-d);
	}

	.home--proto .trust--card .trust__text strong {
		color: var(--mk-ink);
		font-size: 0.9375rem;
		line-height: 20px;
	}

	.home--proto .trust--card .trust__text span {
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	/* --- Product groups: 4-column cards (white 4:3 picture · name · "N máy"); "Xem tất cả" fills the last row. --- */
	.home--proto .hcats,
	.ab-page .mk-groups {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.home--proto .hcats__all {
		grid-column: span var(--hc-span, 1);
	}

	.ab-page .mk-groups > li:last-child:nth-child(4n + 1) {
		grid-column: span 4;
	}

	.ab-page .mk-groups > li:last-child:nth-child(4n + 2) {
		grid-column: span 3;
	}

	.ab-page .mk-groups > li:last-child:nth-child(4n + 3) {
		grid-column: span 2;
	}

	.home--proto .hcat,
	.ab-page .mk-gc {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 0;
		padding: 0;
		overflow: hidden;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
		box-shadow: none;
		color: var(--mk-ink);
	}

	.home--proto .hcat:hover,
	.ab-page .mk-gc:hover {
		border-color: #cbd3dd;
		box-shadow: none;
		color: var(--mk-ink);
		text-decoration: none;
	}

	.home--proto .hcat__im,
	.ab-page .mk-gc__im {
		display: flex;
		align-items: center;
		justify-content: center;
		height: auto;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background: #fff;
		color: var(--mk-ink2);
	}

	.home--proto .hcat__im img,
	.ab-page .mk-gc__im img {
		width: 100%;
		height: 100%;
		max-height: none;
		object-fit: contain;
	}

	.ab-page .mk-gc__im .icon {
		width: 40px;
		height: 40px;
	}

	.home--proto .hcat__name,
	.ab-page .mk-gc__bd b {
		display: block;
		padding: 12px 16px 0;
		color: var(--mk-ink);
		font-size: 1.0625rem;
		font-weight: 600;
		line-height: 24px;
	}

	.home--proto .hcat__meta,
	.ab-page .mk-gc__bd small {
		display: block;
		padding: 0 16px 16px;
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
	}

	.ab-page .mk-gc__bd {
		display: block;
	}

	.ab-page .mk-gc__bd b {
		padding: 12px 16px 0;
	}

	.home--proto .hcat__meta .icon {
		display: none;
	}

	.home--proto .hcat--all,
	.ab-page .mk-gc--all {
		align-items: center;
		justify-content: center;
		min-height: 100%;
		padding: 16px;
		text-align: center;
	}

	.ab-page .mk-gc--all .mk-gc__im {
		aspect-ratio: auto;
		background: transparent;
	}

	.home--proto .hcat--all .hcat__name,
	.home--proto .hcat--all .hcat__meta,
	.ab-page .mk-gc--all .mk-gc__bd b,
	.ab-page .mk-gc--all .mk-gc__bd small {
		padding-inline: 0;
	}

	.home--proto .hcat__ic {
		display: flex;
		color: var(--mk-ink2);
	}

	.home--proto .hcat__ic .icon {
		width: 40px;
		height: 40px;
	}

	.ab-page .ab-chips {
		display: none;
	}

	/* --- Homepage videos: the PC2 block (big 2/3 + 2 small 1/3); the old video + solutions pair gives way. --- */
	.home--proto .hduo {
		display: none;
	}

	.home--proto .hvx {
		display: block;
	}

	/* --- Knowledge: 3 cards. --- */
	.home--proto .hposts,
	.home--proto .mk-home-posts {
		display: none;
	}

	.hkx {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px 20px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hkx .mk-topic {
		display: block;
		font-size: 0.8125rem;
		font-weight: 600;
		line-height: 18px;
		letter-spacing: 0;
		text-transform: none;
	}

	.hkx .mk-topic--c {
		color: var(--mk-red-d);
	}

	.hkx .mk-topic--v {
		color: #17763f;
	}

	.hkx .mk-topic--q {
		color: #1f57b8;
	}

	.hkx .mk-topic--x {
		color: var(--mk-muted);
	}

	/* PC3 follow-up: two articles left = 1/2 + 1/2. */
	.ktx-g--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* --- About: values 4 cards one row · videos 4 / 3 columns · photo 4:3 + company box. --- */
	.ab-page .ab-vals {
		gap: 20px;
	}

	.ab-page .ab-val {
		padding: 20px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
	}

	.ab-page .ab-val__ic {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: var(--mk-red-s);
		color: var(--mk-red-d);
	}

	.ab-page .ab-val__tx b {
		display: block;
		margin-bottom: 4px;
		color: var(--mk-ink);
		font-size: 1.0625rem;
		line-height: 24px;
	}

	.ab-page .ab-val__tx span {
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 21px;
	}

	.ab-page .ab-vids {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px 20px;
	}

	.ab-page .ab-vc {
		color: var(--mk-ink);
	}

	.ab-page .ab-vc:hover {
		color: var(--mk-ink);
		text-decoration: none;
	}

	.ab-page .ab-vc:hover .ab-vc__t {
		color: var(--mk-red-d);
	}

	.ab-page .ab-comp {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 24px;
		align-items: start;
		margin-top: 40px;
		overflow: visible;
		border-radius: 0;
		background: transparent;
	}

	.ab-page .ab-comp__ph {
		min-height: 0;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		border-radius: var(--mk-r2);
	}

	.ab-page .ab-comp__ph .ab-vbtn {
		display: none;
	}

	.ab-page .ab-comp__in {
		padding: 24px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
	}

	.ab-page .ab-comp__in .ab-sec__t {
		font-size: 1.375rem;
		line-height: 28px;
	}

	.ab-page .ab-info__tx {
		min-width: 0;
	}

	.ab-page .ab-info__tx b {
		overflow-wrap: anywhere;
	}
}

@media (min-width: 1200px) {
	.ab-page .ab-vids {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

}

@media (min-width: 1024px) and (max-width: 1199.98px) {
	.ab-page .ab-vids > .ab-vc:nth-child(n + 4) {
		display: none;
	}
}

/* ==========================================================================
   AMAN PC UI Kit V1 — PC5: product detail, ≥ 1024 px
   (docs/ui/prototype/pc-kit-v1/ screen 3, FORM WEBSITE-02-PC-KIT-V1-PC5-PRODUCT-DETAIL-V1-01).
   Phones (P5, UAT passed) and 768–1023 px are untouched: the new pieces are hidden below 1024.
   ========================================================================== */
.spd-pcta,
.spd-ksum,
.spd-rail,
.spd-relm__4 {
	display: none;
}

@media (min-width: 1024px) {
	.spd {
		--mk-red: #d71920;
		--mk-red-d: #b4141a;
		--mk-red-s: #fdeeee;
		--mk-ink: #162232;
		--mk-ink2: #3a4757;
		--mk-muted: #4a5666;
		--mk-line: #e3e7ed;
		--mk-bg: #f3f5f8;
		--mk-paper: #fff;
		--mk-r: 8px;
		--mk-r2: 12px;
		background: var(--mk-bg);
	}

	/* Light crumb strip; no sticky tabs (every section is in view on the page). */
	.spd .spd-crumbs {
		border-bottom: 0;
		background: var(--mk-paper);
	}

	.spd .spd-crumbs::before,
	.spd .tabbar {
		display: none;
	}

	.spd .spd-crumbs .breadcrumb,
	.spd .spd-crumbs .breadcrumb a,
	.spd .spd-crumbs .breadcrumb__item + .breadcrumb__item::before {
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.spd .spd-crumbs .breadcrumb__item:last-child span {
		color: var(--mk-ink2);
		font-weight: 500;
	}

	.spd .spd-crumbs__in {
		padding-block: 16px 0;
	}

	/* --- Top on white: gallery (vertical 72 px thumbs + 4:3 photo) | conversion area. --- */
	.spd .spd-crumbs + .container {
		max-width: none;
		padding-inline: max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter)));
		border-bottom: 1px solid var(--mk-line);
		background: var(--mk-paper);
	}

	.spd .spd-top {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: 40px;
		margin-top: 0;
		padding-block: 20px 32px;
	}

	.spd .spd-ask,
	.spd .spd-k4,
	.spd .spd-sbox,
	.spd .spd-cat,
	.spd .spd-code,
	.spd .spd-info .mcv-wrap,
	.spd .spd-info .mcv {
		display: none;
	}

	.spd .spd-gal {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 12px;
	}

	.spd .spd-main {
		aspect-ratio: 4 / 3;
		padding: 0;
		border-color: var(--mk-line);
	}

	/* One photo, no video: no thumb column. */
	.spd .spd-main:only-child {
		grid-column: 1 / -1;
	}

	/* The thumbs never make the row taller than the photo; extra ones scroll. */
	.spd .spd-thumbs {
		height: 0;
		min-height: 100%;
		overflow-y: auto;
		scrollbar-width: thin;
	}

	.spd .spd-th {
		width: 72px;
		height: 54px;
		border-color: var(--mk-line);
		border-radius: 6px;
	}

	.spd .spd-th.is-current {
		border-color: var(--mk-red);
		box-shadow: none;
	}

	.spd .spd-cnt {
		right: 10px;
		bottom: 10px;
		padding: 2px 8px;
		background: rgba(15, 27, 45, 0.7);
		font-weight: 500;
	}

	.spd .spd-info {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.spd .spd-gc {
		display: block;
		margin: 0;
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
	}

	.spd .spd-title {
		margin: 6px 0 10px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.875rem;
		font-weight: 700;
		line-height: 38px;
		letter-spacing: 0;
		text-transform: none;
	}

	.spd .spd-info .spd-lead {
		display: -webkit-box;
		margin: 0 0 16px;
		overflow: hidden;
		color: var(--mk-ink2);
		font-size: 0.9375rem;
		line-height: 22px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.spd .spd-info .spd-lead--m {
		display: none;
	}

	/* Price box: label · 24/32 red price · VAT line (or "Liên hệ báo giá"). */
	.spd .spd-pbox {
		display: block;
		padding: 16px;
		border-radius: 10px;
		background: var(--mk-bg);
	}

	.spd .spd-pbox__l,
	.spd .spd-pbox__s {
		display: block;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.spd .spd-pbox__p {
		display: block;
		color: var(--mk-red-d);
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 32px;
	}

	.spd .spd-pbox__p--q {
		color: var(--mk-ink);
		font-size: 1.25rem;
		line-height: 28px;
	}

	.spd-pcta {
		display: grid;
		gap: 10px;
		margin-top: 16px;
	}

	.spd-pcta .mk-btn {
		min-height: 48px;
		font-size: 0.9375rem;
	}

	.spd-pcta .mk-btn .icon {
		width: 20px;
		height: 20px;
	}

	.spd-pcta__q.mk-btn--red {
		width: 100%;
		margin-top: 0;
	}

	.spd-pcta__q.mk-btn--red:hover {
		background: var(--mk-red-d);
		color: #fff;
	}

	.spd-pcta__two {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.spd-pcta__two .mk-btn--line {
		display: flex;
		min-width: 0;
	}

	.spd-pcta__two .mk-btn--line:hover {
		border-color: var(--mk-ink2);
		color: var(--mk-ink);
	}

	.spd-pcta__two .spd-ch__l {
		display: inline;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.spd-pcta__two .spd-ch__s {
		display: none;
	}

	.spd .spd-info .spd-xnote {
		display: block;
		margin: 10px 0 0;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	/* 3 quick specs: small cells, quieter than the price and the actions. */
	.spd-ksum {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		margin: 16px 0 0;
		padding: 0;
		list-style: none;
	}

	.spd-ksum li {
		min-width: 0;
		padding: 8px 12px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r);
	}

	.spd-ksum small {
		display: block;
		overflow: hidden;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.spd-ksum b {
		display: block;
		color: var(--mk-ink);
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 21px;
		overflow-wrap: anywhere;
	}

	/* --- Below: description + full specs (2/3) · rail (1/3); same group full width. --- */
	.spd .spd-body {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: 24px 32px;
		align-items: start;
		margin-top: 0;
		padding-block: 32px 40px;
	}

	.spd .spd-pn--video,
	.spd .spd-pn--docs,
	.spd .spd-pn--acc,
	.spd .spd-rel {
		display: none;
	}

	.spd .spd-body .spd-pn--desc,
	.spd .spd-body .spd-pn--specs {
		grid-column: 1;
		order: 0;
	}

	.spd .spd-body .spd-pn--rel,
	.spd .spd-body .spd-pn--photos,
	.spd .spd-body .spd-pn--more {
		grid-column: 1 / -1;
		order: 0;
	}

	.spd .spd-pn {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.spd .spd-ph {
		margin-bottom: 16px;
	}

	.spd .spd-ph > .icon {
		display: none;
	}

	.spd .spd-ph h2 {
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.375rem;
		font-weight: 700;
		line-height: 28px;
		letter-spacing: 0;
		text-transform: none;
	}

	.spd .spd-desc {
		max-width: 72ch;
		color: #24303f;
		font-size: 1rem;
		line-height: 26px;
	}

	.spd .spd-spec {
		max-width: 640px;
		border-top: 1px solid var(--mk-line);
	}

	.spd-rail {
		display: grid;
		grid-row: span 2;
		grid-column: 2;
		gap: 20px;
		order: 0;
	}

	.spd-rbox {
		padding: 20px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
	}

	.spd-rbox__h {
		margin: 0 0 12px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.125rem;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: 0;
		text-transform: none;
	}

	.spd-rdoc {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 8px 12px;
		align-items: start;
	}

	.spd-rdoc + .spd-rdoc {
		margin-top: 16px;
	}

	.spd-rdoc__pv {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		aspect-ratio: 3 / 4;
		overflow: hidden;
		border: 1px solid var(--mk-line);
		border-radius: 6px;
		background: var(--mk-bg);
		color: var(--mk-muted);
	}

	.spd-rdoc__pv img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top;
	}

	.spd-rdoc__pv .icon {
		width: 22px;
		height: 22px;
	}

	.spd-rdoc__tx {
		min-width: 0;
	}

	.spd-rdoc__tx a {
		display: -webkit-box;
		overflow: hidden;
		color: var(--mk-ink);
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 21px;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.spd-rdoc__tx small {
		display: block;
		margin-top: 2px;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.spd-rdoc__btn,
	.spd-rdraw__btn {
		display: flex;
		grid-column: 1 / -1;
		min-height: 44px;
		font-size: 0.9375rem;
	}

	.spd-rdoc__btn .icon,
	.spd-rdraw__btn .icon {
		width: 18px;
		height: 18px;
	}

	.spd-rdoc__btn:hover {
		border-color: var(--mk-ink2);
		color: var(--mk-ink);
	}

	.spd-rdraw {
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px dashed var(--mk-line);
	}

	.spd-rbox__h + .spd-rdraw {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.spd-rdraw p {
		margin: 0 0 10px;
	}

	.spd-rdraw b {
		display: block;
		color: var(--mk-red-d);
		font-size: 0.875rem;
		line-height: 20px;
	}

	.spd-rdraw small {
		display: block;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.spd-rdraw__btn.mk-btn--line {
		border-color: var(--mk-red);
		color: var(--mk-red-d);
	}

	.spd-rdraw__btn.mk-btn--line:hover {
		background: var(--mk-red-s);
		color: var(--mk-red-d);
	}

	/* Same group: the Kit vertical cards (PC1), 3 columns, 4 from 1200 (the 4th card hidden below). */
	.spd .spd-relm {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}

	.spd .spd-relm .spd-relm__4 {
		display: none;
	}
}

@media (min-width: 1200px) {
	.spd .spd-relm {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.spd .spd-relm .spd-relm__4 {
		display: list-item;
	}
}

/* Owner 04/10/2026: every product is shown, also without price / specs / text / photo — quiet "being updated"
   states instead of empty blocks (any width). A product without its own photo gets this neutral box. */
.pnoimg {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	height: 100%;
	padding: 8px;
	background: #eef1f5;
	color: #4a5666;
	font-size: 0.75rem;
	line-height: 16px;
	text-align: center;
}

.pnoimg .icon {
	width: 24px;
	height: 24px;
}

.spd-main__empty {
	display: flex;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 8px;
}

.spd-kempty {
	margin: 12px 0 0;
	color: #4a5666;
	font-size: 0.8125rem;
	line-height: 18px;
}

.spd-todo {
	margin: 0;
	color: #4a5666;
	font-size: 0.9375rem;
	line-height: 22px;
}

@media (max-width: 767.98px) {
	/* Phones: the "being updated" line sits where the key specs would be (after the actions). */
	.spd-info .spd-kempty {
		order: 7;
		margin: 8px 0 0;
	}
}

/* ==========================================================================
   AMAN PC UI Kit V1 — PC6: contact page + contextual closing band, ≥ 1024 px
   (docs/ui/prototype/pc-kit-v1/ screen 9 + README, FORM WEBSITE-02-PC-KIT-V1-PC6-CONTACT-ENDCTA-V1-01).
   Phones (P6 option A) and 768–1023 px keep their blocks: the new pieces are hidden below 1024.
   ========================================================================== */
.pcend,
.ct-pc {
	display: none;
}

@media (min-width: 1024px) {
	.pcend,
	.contact-page {
		--mk-red: #d71920;
		--mk-red-d: #b4141a;
		--mk-red-s: #fdeeee;
		--mk-ink: #162232;
		--mk-ink2: #3a4757;
		--mk-muted: #4a5666;
		--mk-line: #e3e7ed;
		--mk-bg: #f3f5f8;
		--mk-paper: #fff;
		--mk-r: 8px;
		--mk-r2: 12px;
	}

	/* --- Closing band: light strip, title 22/28 + one line (the number as small text) | red action · channels · more. --- */
	.hcta,
	.cta-band,
	.tl-cta,
	.video-library .cta-band.vl-pc {
		display: none;
	}

	.pcend {
		display: block;
		border-top: 1px solid var(--mk-line);
		border-bottom: 1px solid var(--mk-line);
		background: var(--mk-paper);
		color: var(--mk-ink);
	}

	.pcend__in {
		display: flex;
		flex-wrap: wrap;
		gap: 16px 24px;
		align-items: center;
		justify-content: space-between;
		padding-block: 28px;
	}

	.pcend__tx {
		min-width: 0;
	}

	.pcend__t {
		margin: 0 0 4px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.375rem;
		font-weight: 700;
		line-height: 28px;
		letter-spacing: 0;
		text-transform: none;
	}

	.pcend__p {
		margin: 0;
		color: var(--mk-muted);
		font-size: 0.9375rem;
		line-height: 22px;
	}

	.pcend__acts {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		align-items: center;
	}

	.pcend .mk-btn {
		min-height: 44px;
		padding: 0 20px;
		font-size: 0.9375rem;
		white-space: nowrap;
	}

	.pcend .mk-btn .icon {
		width: 18px;
		height: 18px;
	}

	.pcend__q.mk-btn--red {
		display: inline-flex;
		width: auto;
		margin: 0;
	}

	.pcend__q.mk-btn--red:hover {
		background: var(--mk-red-d);
		color: #fff;
	}

	.pcend__ch.mk-btn--line {
		display: inline-flex;
	}

	.pcend__ch.mk-btn--line:hover {
		border-color: var(--mk-ink2);
		color: var(--mk-ink);
	}

	.pcend__ch .spd-ch__l {
		display: none;
	}

	.pcend__ch .spd-ch__s {
		display: inline;
	}

	.pcend__more {
		padding: 0 4px;
		color: var(--mk-muted);
		font-size: 0.875rem;
	}

	.pcend__more:hover {
		color: var(--mk-ink);
	}

	/* --- Contact: compact intro → form card 2/3 + quick contact / company 1/3; no closing band here. --- */
	.contact-page {
		background: var(--mk-bg);
	}

	.contact-page > .section {
		padding-block: 20px 48px;
	}

	.contact-page .breadcrumb,
	.contact-page .breadcrumb a,
	.contact-page .breadcrumb__item + .breadcrumb__item::before {
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.contact-page .page-title {
		margin: 6px 0 4px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.875rem;
		font-weight: 700;
		line-height: 38px;
		letter-spacing: 0;
		text-transform: none;
	}

	.contact-page .lead {
		margin: 0 0 24px;
		color: var(--mk-muted);
		font-size: 0.9375rem;
		line-height: 22px;
	}

	.contact-page .ct-quick,
	.contact-page .contact-page__direct,
	.contact-page .ct-info,
	.contact-page .lead-form__chat {
		display: none;
	}

	.contact-page .contact-page__grid {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: 32px;
		align-items: start;
	}

	.contact-page .contact-page__form {
		padding: 24px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
	}

	.contact-page .ct-form-t {
		margin: 0 0 4px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.375rem;
		font-weight: 700;
		line-height: 28px;
		letter-spacing: 0;
		text-transform: none;
	}

	.contact-page .lead-form__label {
		color: var(--mk-ink);
		font-size: 0.875rem;
		font-weight: 600;
		line-height: 20px;
	}

	.contact-page .lead-form__input {
		min-height: 44px;
		border-color: var(--mk-line);
		border-radius: var(--mk-r);
	}

	.contact-page .lead-form__submit {
		min-height: 48px;
		border-color: var(--mk-red);
		border-radius: var(--mk-r);
		background: var(--mk-red);
		font-size: 0.9375rem;
		font-weight: 600;
	}

	.contact-page .lead-form__type span {
		min-height: 40px;
		padding: 0 16px;
		border-radius: 999px;
		font-size: 0.875rem;
	}

	.contact-page .lead-form__type input:checked + span {
		border-color: var(--mk-red);
		background: var(--mk-red);
		color: #fff;
		font-weight: 600;
	}

	.contact-page .lead-form__submit:hover {
		border-color: var(--mk-red-d);
		background: var(--mk-red-d);
	}

	.ct-pc {
		display: grid;
		gap: 20px;
	}

	.ct-pc__box {
		padding: 20px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-r2);
		background: var(--mk-paper);
	}

	.ct-pc__h {
		margin: 0 0 12px;
		color: var(--mk-ink);
		font-family: var(--font-body);
		font-size: 1.125rem;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: 0;
		text-transform: none;
	}

	.ct-pc__two {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.ct-pc__two .mk-btn--line {
		display: flex;
		min-height: 44px;
		font-size: 0.9375rem;
	}

	.ct-pc__two .mk-btn--line:hover {
		border-color: var(--mk-ink2);
		color: var(--mk-ink);
	}

	.ct-pc__two .spd-ch__l {
		display: none;
	}

	.ct-pc__two .spd-ch__s {
		display: inline;
	}

	.ct-pc__hot {
		display: block;
		margin-top: 10px;
		color: var(--mk-muted);
		font-size: 0.8125rem;
		line-height: 18px;
	}

	.ct-pc__more {
		margin-top: 8px;
	}

	.ct-pc__more > summary {
		color: var(--mk-muted);
		font-size: 0.875rem;
		line-height: 20px;
		cursor: pointer;
		list-style: none;
	}

	.ct-pc__more > summary::-webkit-details-marker {
		display: none;
	}

	.ct-pc__more[open] > summary {
		margin-bottom: 10px;
	}

	.ct-pc .ab-info {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.ct-pc .ab-info__r {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 14px;
		padding: 12px 0;
		border-bottom: 1px solid var(--mk-line);
	}

	.ct-pc .ab-info__r:last-child {
		border-bottom: 0;
	}

	.ct-pc .ab-info__ic {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--mk-red-s);
		color: var(--mk-red-d);
	}

	.ct-pc .ab-info__tx {
		min-width: 0;
	}

	.ct-pc .ab-info__tx small {
		display: block;
		color: var(--mk-muted);
		font-size: 0.8125rem;
	}

	.ct-pc .ab-info__tx b {
		display: block;
		color: var(--mk-ink);
		font-size: 0.9375rem;
		line-height: 21px;
		overflow-wrap: anywhere;
	}

	/* --- PC5 follow-ups: same group fills its rows; the description shows no duplicate spec list / empty "Xem thêm";
	   the big real photo uses the full file on PC (see single-san_pham.php). --- */
	.spd .spd-relm--n3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.spd .spd-relm--n2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.spd .spd-desc__dup {
		display: none;
	}

	.spd .spd-pn--desc .collapse--fits .collapse__body {
		max-height: none;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.spd .spd-pn--desc .collapse--fits .collapse__toggle {
		display: none;
	}
}

@media (min-width: 1200px) {
	.spd .spd-relm--n3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.spd .spd-relm--n2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   AMAN PC UI Kit V1 — PC7: regression clean-up (FORM WEBSITE-02-PC-KIT-V1-PC7-REGRESSION-CLEANUP-V1-01).
   One type family: titles use Be Vietnam Pro everywhere (the condensed title font is no longer loaded).
   From 1024 px: no capitals by transform, no text under 13 px, compact light page heads on the pages
   not redone yet (solutions, search). Phones keep their Kit (only the font family of the old head changes).
   ========================================================================== */
:root {
	--font-display: var(--font-body);
}

@media (min-width: 1024px) {
	html body * {
		text-transform: none !important;
	}

	/* Kit sizes: nothing under 13 px. */
	.kt-tg,
	.kt-dt,
	.tl-demo,
	.tl-badge,
	.tl-ty,
	.tl-ph span,
	.tlx-tag,
	.tlx-pv span,
	.vnp__t,
	.pnoimg__t,
	.ab-vc__m,
	.ab-info__tx small,
	.buy-band__label,
	.card__price-vat,
	.spc__price small,
	.contact-channel__sub,
	.mk-demo,
	.mk-chip small,
	.solution__label,
	.spd-cnt,
	.breadcrumb a,
	.breadcrumb span,
	.site-footer__slogan,
	.site-footer__legal a {
		font-size: 0.8125rem;
	}

	/* Page heads not redone yet (solutions, search): light compact intro, sentence case (video has its own). */
	.solutions-page .phead,
	.search-page .phead {
		background: #fff;
		background-image: none;
		color: #162232;
	}

	.solutions-page .phead__inner,
	.search-page .phead__inner {
		padding-block: 20px 8px;
	}

	.solutions-page .phead__eyebrow,
	.search-page .phead__eyebrow {
		display: none;
	}

	.solutions-page .phead .breadcrumb,
	.solutions-page .phead .breadcrumb a,
	.solutions-page .phead .breadcrumb__item + .breadcrumb__item::before,
	.search-page .phead .breadcrumb,
	.search-page .phead .breadcrumb a,
	.search-page .phead .breadcrumb__item + .breadcrumb__item::before {
		color: #4a5666;
		line-height: 18px;
	}

	.solutions-page .phead .breadcrumb,
	.search-page .phead .breadcrumb {
		margin: 0;
	}

	.solutions-page .phead .breadcrumb__item:last-child span,
	.search-page .phead .breadcrumb__item:last-child span {
		color: #3a4757;
		font-weight: 500;
	}

	.solutions-page .phead__title,
	.search-page .phead__title {
		margin: 6px 0 4px;
		color: #162232;
		font-family: var(--font-body);
		font-size: 1.875rem;
		font-weight: 700;
		line-height: 38px;
		letter-spacing: 0;
	}

	.solutions-page .phead__desc,
	.search-page .phead__desc {
		max-width: 72ch;
		margin: 0;
		color: #4a5666;
		font-size: 0.9375rem;
		line-height: 22px;
	}

	/* Search: card grids in 3 columns (Kit lists), so short result sets end on full rows more often. */
	.search-page .grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	/* Generic pages (foreign customers, privacy…): reading measure 16/26, ~72ch. */
	.site-main > .section > .container > article.prose {
		max-width: 72ch;
		font-size: 1rem;
		line-height: 26px;
	}

	.site-main > .section > .container > article.prose > h1 {
		font-size: 1.875rem;
		line-height: 38px;
	}

	/* Former condensed caps titles (cta boxes, block heads) keep their size but read as Kit headings. */
	.cta-box__title,
	.section-head__title {
		letter-spacing: 0;
	}
}

/* ==========================================================================
   PC backlog (FORM WEBSITE-02-MENU-EMPTY-GROUPS-AND-PC-BACKLOG-V1-01): Kit vertical machine cards on search
   and the document detail; the old cta boxes give way to the closing band (≥ 1024 px).
   ========================================================================== */
.pcx-cards {
	display: none;
}

@media (min-width: 1024px) {
	.solutions-page .cta-box,
	.search-page .cta-box,
	.not-found .cta-box,
	.pcx-old,
	.tl-rel {
		display: none;
	}

	.solutions-page .section:has(> .container > .cta-box:only-child) {
		display: none;
	}

	.pcx-cards {
		--mk-red: #d71920;
		--mk-red-d: #b4141a;
		--mk-ink: #162232;
		--mk-ink2: #3a4757;
		--mk-muted: #4a5666;
		--mk-line: #e3e7ed;
		--mk-paper: #fff;
		--mk-r: 8px;
		--mk-r2: 12px;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Columns follow the number of cards (no empty cells): 1 keeps a column width, 2 = halves. */
	.pcx-cards:has(> li:nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tl-page .pcx-cards > li:nth-child(n + 4) {
		display: none;
	}



	.pcx-cards .mk-mc__a {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		align-items: stretch;
		height: 100%;
		padding: 0;
		overflow: hidden;
		border-radius: var(--mk-r2);
	}

	.pcx-cards .mk-mc__a:hover {
		border-color: #cbd3dd;
	}

	.pcx-cards .mk-mc__im {
		border-bottom: 1px solid var(--mk-line);
		border-radius: 0;
	}

	.pcx-cards .mk-mc__im img {
		transform: scale(1.12);
	}

	.pcx-cards .mk-mc__im.is-cover img {
		transform: none;
	}

	.pcx-cards .mk-mc__bd {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 14px 16px 16px;
	}

	.pcx-cards .mk-mc .mk-demo {
		align-self: flex-start;
		margin: 0;
	}

	.pcx-cards .mk-mc__t {
		min-height: 44px;
		font-size: 1rem;
		line-height: 22px;
	}

	.pcx-cards .mk-mc__sp {
		margin: 0;
		font-size: 0.875rem;
		line-height: 20px;
	}

	.pcx-cards .mk-mc__pr {
		margin-top: auto;
		padding-top: 6px;
		font-size: 1rem;
		line-height: 22px;
	}

	.pcx-cards .mk-mc__pr small {
		font-size: 0.8125rem;
		line-height: 18px;
	}

}

@media (min-width: 1200px) {
	.tl-page .pcx-cards:has(> li:nth-child(4)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.tl-page .pcx-cards > li:nth-child(n + 4) {
		display: list-item;
	}
}

@media (min-width: 1024px) {
	/* Kit type scale on PC (13 · 14 · 15 · 16 · 18 · 20 · 22 …): the odd sizes left after PC7. */
	html body .tl-ty {
		font-size: 0.8125rem;
	}

	html body .hsec__more,
	html body .kt-amt span,
	html body .kt-amt time,
	html body .tl-mrow span,
	html body .spl-all,
	html body .tl-sh__more {
		font-size: 0.875rem;
	}

	html body .ab-info__nw,
	html body .ab-info__tx b,
	html body .kt-row__tx b,
	html body .spc__link {
		font-size: 0.9375rem;
	}

	html body .kt-asec__t {
		font-size: 1.125rem;
	}

	html body .tl-sh__t {
		font-size: 1.375rem;
	}
}

/* ==========================================================================
   PC floating "Liên hệ" (FORM WEBSITE-02-CONTACT-BUTTON-ZALO-MESSENGER-V1-01): ≥ 1024 px only.
   ========================================================================== */
.pcfab {
	display: none;
}

@media (min-width: 1024px) {
	.pcfab {
		position: fixed;
		right: 24px;
		bottom: 24px;
		z-index: 60;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 12px;
		transition: opacity 0.18s ease, transform 0.18s ease;
	}

	.pcfab__btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 48px;
		padding: 0 20px;
		border: 0;
		border-radius: 999px;
		background: #d71920;
		box-shadow: 0 6px 18px rgba(15, 27, 45, 0.22);
		color: #fff;
		font: inherit;
		font-size: 0.9375rem;
		font-weight: 600;
		cursor: pointer;
	}

	.pcfab__btn:hover,
	.pcfab.is-open .pcfab__btn {
		background: #b4141a;
	}

	.pcfab__btn .icon {
		width: 20px;
		height: 20px;
	}

	.pcfab__panel {
		width: 300px;
		padding: 16px;
		border: 1px solid #e3e7ed;
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 12px 32px rgba(15, 27, 45, 0.18);
		color: #162232;
	}

	.pcfab__panel[hidden] {
		display: none;
	}

	.pcfab__hd {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		margin-bottom: 8px;
	}

	.pcfab__t {
		margin: 0;
		font-size: 1rem;
		font-weight: 700;
		line-height: 22px;
	}

	.pcfab__x {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: -10px -10px -10px 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: #4a5666;
		cursor: pointer;
	}

	.pcfab__x:hover {
		background: #f3f5f8;
		color: #162232;
	}

	.pcfab__x .icon {
		width: 18px;
		height: 18px;
	}

	.pcfab__list {
		display: grid;
		gap: 8px;
		margin: 0 0 10px;
		padding: 0;
		list-style: none;
	}

	.pcfab__ch {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		padding: 0 14px;
		border: 1.5px solid #cbd3dd;
		border-radius: 8px;
		color: #162232;
		font-size: 0.9375rem;
		font-weight: 600;
		text-decoration: none;
	}

	.pcfab__ch:hover {
		border-color: #3a4757;
		color: #162232;
		text-decoration: none;
	}

	.pcfab__ch .icon {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
	}

	.pcfab__ch.spd-ch--zalo .icon {
		color: #0068ff;
	}

	.pcfab__ch.spd-ch--messenger .icon {
		color: #0084ff;
	}

	.pcfab__ch.spd-ch--whatsapp .icon {
		color: #25d366;
	}

	.pcfab__ch .spd-ch__s {
		display: none;
	}

	.pcfab__ch .spd-ch__l {
		display: inline;
	}

	.pcfab__q {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 48px;
		border-radius: 8px;
		background: #d71920;
		color: #fff;
		font-size: 0.9375rem;
		font-weight: 600;
		text-decoration: none;
	}

	.pcfab__q:hover {
		background: #b4141a;
		color: #fff;
		text-decoration: none;
	}

	.pcfab__q .icon {
		width: 18px;
		height: 18px;
	}

	.pcfab__btn:focus-visible,
	.pcfab__x:focus-visible,
	.pcfab__ch:focus-visible,
	.pcfab__q:focus-visible {
		outline: 3px solid #1f57b8;
		outline-offset: 2px;
	}

	/* Contact page quick box: Messenger under Zalo | Gọi. */
	.ct-pc__msg.mk-btn--line {
		display: flex;
		min-height: 44px;
		margin-top: 10px;
		font-size: 0.9375rem;
	}

	.ct-pc__msg .icon {
		width: 18px;
		height: 18px;
		color: #0084ff;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pcfab {
		transition: none;
	}
}

/* ==========================================================================
   Zalo gate page (template-zalo-gate.php, FORM WEBSITE-ZALO-GATE-PAGE-V1-01):
   one centred card · portrait QR card image (440–480 px on PC; title for screen readers only) as a link · red button · small fallback link.
   ========================================================================== */
.zalo-gate {
	padding: var(--space-5) 0 var(--space-7);
	background: var(--color-bg-soft);
}

.zg-card {
	max-width: 560px; /* hugs the portrait QR card (480) */
	margin: 0 auto;
	padding: 20px 16px 24px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	text-align: center;
}

.zg-qr {
	display: block;
	max-width: 480px;
	margin: 0 auto 16px;
	border-radius: var(--radius);
	overflow: hidden;
}

.zg-qr img {
	display: block;
	width: 100%;
	height: auto;
}

.zg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: 360px;
	min-height: 48px;
	padding: 10px 20px;
	border-radius: var(--radius-sm);
	background: #e31e24;
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
}

.zg-btn:hover,
.zg-btn:focus-visible {
	background: #c8161c;
	color: #fff;
	text-decoration: none;
}

.zg-btn .icon {
	width: 20px;
	height: 20px;
}

.zg-alt {
	margin: 12px 0 0;
	color: var(--color-muted);
	font-size: 0.875rem;
}

.zg-alt a {
	display: inline-block;
	padding: 6px 0;
	color: var(--color-link);
	text-decoration: underline;
}

.zg-content {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
	text-align: left;
}

@media (min-width: 768px) {
	.zalo-gate {
		padding: var(--space-6) 0 var(--space-7);
	}

	.zg-card {
		padding: 24px;
	}

	/* Short laptop screens: the card shrinks so the button stays on the first screen (never under 360 px). */
	.zg-qr {
		max-width: max(360px, min(480px, calc((100vh - 280px) * 0.8)));
	}
}

/* ==========================================================================
   Channel brand colours (FORM WEBSITE-BRAND-CHANNEL-COLORS-LANG-FLAGS-V1-01, owner 05/10:
   "màu đặc trưng của Zalo và của Messenger … để trắng này nó không hợp lý"). Replaces P6 "Zalo / Gọi light".
   Every channel button carries a key class (spd-ch--, mcv-ch--, cta-bar__, contact-channel--); this layer
   paints them from tokens and wins over the many older per-block white styles (hence !important, colours only).
   The red main action stays red. Text contrast on every fill ≥ 4.5:1 (WhatsApp / WeChat use dark ink).
   ========================================================================== */
:root {
	--c-zalo: #0068ff;
	--c-zalo-h: #0060eb;
	--c-call: #198247;   /* #1e9e57 a little deeper: white text 4.86:1 */
	--c-call-h: #177841;
	--c-messenger: linear-gradient(135deg, #0070e0 0%, #8a2be2 55%, #e0245e 100%); /* brand sweep, each stop ≥ 4.58:1 */
	--c-messenger-solid: #0070e0;
	--c-whatsapp: #25d366;
	--c-whatsapp-h: #22c25e;
	--c-whatsapp-ink: #0b3d1f;
	--c-viber: #6d5be6;  /* #7360f2 a little deeper: 4.90:1 */
	--c-viber-h: #6454d4;
	--c-wechat: #07c160;
	--c-wechat-h: #07b95c;
	--c-wechat-ink: #0b3d1f;
	--c-email: var(--color-navy);
	--c-email-h: #1b2d47;
	--c-chat: var(--color-steel); /* web chat: the brand blue, white text 5.28:1 (Owner 20/10: no black buttons / bubbles) */
}

a.spd-ch--zalo,
a.mcv-ch--zalo,
a.cta-bar__zalo,
a.contact-channel--zalo {
	background: var(--c-zalo) !important;
	border-color: transparent !important;
	color: #fff !important;
}

a.spd-ch--zalo:hover,
a.mcv-ch--zalo:hover,
a.cta-bar__zalo:hover,
a.contact-channel--zalo:hover {
	background: var(--c-zalo-h) !important;
	color: #fff !important;
}

a.spd-ch--zalo .icon,
a.mcv-ch--zalo .icon,
a.cta-bar__zalo .icon,
a.contact-channel--zalo .icon,
a.spd-ch--zalo :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.mcv-ch--zalo :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.cta-bar__zalo :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.contact-channel--zalo :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label) {
	color: #fff !important;
}

a.spd-ch--call,
a.mcv-ch--call,
a.cta-bar__call,
a.contact-channel--call {
	background: var(--c-call) !important;
	border-color: transparent !important;
	color: #fff !important;
}

a.spd-ch--call:hover,
a.mcv-ch--call:hover,
a.cta-bar__call:hover,
a.contact-channel--call:hover {
	background: var(--c-call-h) !important;
	color: #fff !important;
}

a.spd-ch--call .icon,
a.mcv-ch--call .icon,
a.cta-bar__call .icon,
a.contact-channel--call .icon,
a.spd-ch--call :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.mcv-ch--call :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.cta-bar__call :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.contact-channel--call :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label) {
	color: #fff !important;
}

a.spd-ch--messenger,
a.mcv-ch--messenger,
a.cta-bar__messenger,
a.contact-channel--messenger {
	background: var(--c-messenger) !important;
	border-color: transparent !important;
	color: #fff !important;
	background-origin: border-box !important;
}

a.spd-ch--messenger:hover,
a.mcv-ch--messenger:hover,
a.cta-bar__messenger:hover,
a.contact-channel--messenger:hover {
	filter: brightness(0.92);
	color: #fff !important;
}

a.spd-ch--messenger .icon,
a.mcv-ch--messenger .icon,
a.cta-bar__messenger .icon,
a.contact-channel--messenger .icon,
a.spd-ch--messenger :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.mcv-ch--messenger :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.cta-bar__messenger :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.contact-channel--messenger :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label) {
	color: #fff !important;
}

a.spd-ch--whatsapp,
a.mcv-ch--whatsapp,
a.cta-bar__whatsapp,
a.contact-channel--whatsapp {
	background: var(--c-whatsapp) !important;
	border-color: transparent !important;
	color: var(--c-whatsapp-ink) !important;
}

a.spd-ch--whatsapp:hover,
a.mcv-ch--whatsapp:hover,
a.cta-bar__whatsapp:hover,
a.contact-channel--whatsapp:hover {
	background: var(--c-whatsapp-h) !important;
	color: var(--c-whatsapp-ink) !important;
}

a.spd-ch--whatsapp .icon,
a.mcv-ch--whatsapp .icon,
a.cta-bar__whatsapp .icon,
a.contact-channel--whatsapp .icon,
a.spd-ch--whatsapp :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.mcv-ch--whatsapp :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.cta-bar__whatsapp :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.contact-channel--whatsapp :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label) {
	color: var(--c-whatsapp-ink) !important;
}

a.spd-ch--viber,
a.mcv-ch--viber,
a.cta-bar__viber,
a.contact-channel--viber {
	background: var(--c-viber) !important;
	border-color: transparent !important;
	color: #fff !important;
}

a.spd-ch--viber:hover,
a.mcv-ch--viber:hover,
a.cta-bar__viber:hover,
a.contact-channel--viber:hover {
	background: var(--c-viber-h) !important;
	color: #fff !important;
}

a.spd-ch--viber .icon,
a.mcv-ch--viber .icon,
a.cta-bar__viber .icon,
a.contact-channel--viber .icon,
a.spd-ch--viber :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.mcv-ch--viber :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.cta-bar__viber :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.contact-channel--viber :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label) {
	color: #fff !important;
}

a.spd-ch--wechat,
a.mcv-ch--wechat,
a.cta-bar__wechat,
a.contact-channel--wechat {
	background: var(--c-wechat) !important;
	border-color: transparent !important;
	color: var(--c-wechat-ink) !important;
}

a.spd-ch--wechat:hover,
a.mcv-ch--wechat:hover,
a.cta-bar__wechat:hover,
a.contact-channel--wechat:hover {
	background: var(--c-wechat-h) !important;
	color: var(--c-wechat-ink) !important;
}

a.spd-ch--wechat .icon,
a.mcv-ch--wechat .icon,
a.cta-bar__wechat .icon,
a.contact-channel--wechat .icon,
a.spd-ch--wechat :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.mcv-ch--wechat :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.cta-bar__wechat :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.contact-channel--wechat :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label) {
	color: var(--c-wechat-ink) !important;
}

a.spd-ch--email,
a.mcv-ch--email,
a.cta-bar__email,
a.contact-channel--email {
	background: var(--c-email) !important;
	border-color: transparent !important;
	color: #fff !important;
}

a.spd-ch--email:hover,
a.mcv-ch--email:hover,
a.cta-bar__email:hover,
a.contact-channel--email:hover {
	background: var(--c-email-h) !important;
	color: #fff !important;
}

a.spd-ch--email .icon,
a.mcv-ch--email .icon,
a.cta-bar__email .icon,
a.contact-channel--email .icon,
a.spd-ch--email :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.mcv-ch--email :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.cta-bar__email :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label),
a.contact-channel--email :is(.spd-ch__s, .spd-ch__l, .contact-channel__sub, .mcv-t, .cta-bar__label) {
	color: #fff !important;
}

@media (prefers-reduced-motion: no-preference) {
	:is(.spd-ch--zalo, .spd-ch--call, .spd-ch--messenger, .mcv-ch--zalo, .mcv-ch--call, .mcv-ch--messenger) {
		transition: background-color 0.15s ease, filter 0.15s ease;
	}
}

/* Language switcher flags (same FORM): flag 20 × 14 beside VI / EN; the current language gets a soft fill + line. */
.lang-switch__link {
	gap: 6px;
}

.lang-flag {
	display: inline-flex;
	flex-shrink: 0;
	width: 20px;
	height: 14px;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(15, 27, 45, 0.18);
}

.lang-flag svg {
	display: block;
	width: 100%;
	height: 100%;
}

.lang-switch__link.is-current {
	box-shadow: inset 0 0 0 1px rgba(15, 27, 45, 0.16);
}

.site-header .lang-switch__link.is-current {
	background: rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.site-header .lang-flag {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   Website chat (FORM WEBSITE-CHAT-UI-V1-02, prototype V3; inc/chat.php + assets/js/chat.js).
   Printed only while the chat is on (body.chat-on). Phones: contact bars become [Gọi][Zalo] squares +
   red "Chat tư vấn ngay"; a small round "Chat" button where there is no such bar. PC: "Chat tư vấn" pill
   opens a 380 x 580 window bottom right. Phones open the chat full screen.
   ========================================================================== */
.chat-fab {
	position: fixed;
	right: 16px;
	bottom: calc(var(--mobile-bar-h) + 12px + env(safe-area-inset-bottom, 0px));
	z-index: calc(var(--z-bar) + 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #e31e24;
	color: #fff;
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 6px 18px rgba(15, 27, 45, 0.25);
	cursor: pointer;
}

.chat-fab:hover {
	background: #c8161c;
}

.chat-fab .icon {
	width: 22px;
	height: 22px;
}

.chat-fab__l {
	display: none;
}

/* Bars that already carry the chat button (tablet contact bar; phone sticky bar once shown). */
body.mobile-bar--cta .chat-fab,
body.chat-is-open .chat-fab {
	display: none;
}

@media (max-width: 767.98px) {
	body.has-mcv .chat-fab {
		display: flex;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}

	body.has-mcv.mcv-stk-on .chat-fab,
	body.chat-is-open .chat-fab {
		display: none;
	}
}

@media (min-width: 1024px) {
	.chat-fab,
	body.mobile-bar--cta .chat-fab {
		right: 24px;
		bottom: 24px;
		display: flex;
		flex-direction: row;
		gap: 8px;
		width: auto;
		height: 48px;
		padding: 0 20px;
		border-radius: 999px;
		font-size: 0.9375rem;
	}

	body.chat-is-open .chat-fab {
		display: none;
	}

	.chat-fab .icon {
		width: 20px;
		height: 20px;
	}

	.chat-fab__l {
		display: inline;
	}

	.chat-fab__s {
		display: none;
	}
}

/* Contact bars with the chat: Gọi / Zalo as brand squares (label kept for screen readers). */
.mcv-stk--chat .chat-open .icon,
.cta-bar--chat .chat-open .icon {
	width: 20px;
	height: 20px;
}

.mcv-stk--chat,
body.single-san_pham .mcv-stk--chat {
	grid-template-columns: auto auto minmax(0, 1fr);
}

body.single-san_pham .mcv-stk--chat .mcv-b--red {
	order: 0;
}

.mcv-stk--chat .mcv-sq,
.cta-bar--chat .btn:not(.cta-bar__consult) {
	width: 48px;
	min-width: 48px;
	height: 48px;
	padding: 0;
}

.mcv-stk--chat .mcv-t,
.cta-bar--chat .cta-bar__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.mcv-stk--chat .chat-open,
.cta-bar--chat .chat-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	border: 0;
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* The chat window. */
.chat {
	--chat-ink: #16202e;
	--chat-mute: #5b6675;
	--chat-line: #e3e8ef;
	--chat-soft: #f3f5f8;
	--chat-head: var(--color-steel, #1b69d0); /* owner 19/10: the chat head in its own colour (white text 5.28:1) */
	position: fixed;
	inset: auto 24px 24px auto;
	z-index: 1000;
	width: 380px;
	max-width: calc(100vw - 32px);
	height: min(580px, calc(100vh - 48px));
	max-height: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--chat-line);
	border-radius: 14px;
	background: var(--chat-soft);
	color: var(--chat-ink);
	box-shadow: 0 14px 40px rgba(15, 27, 45, 0.25);
	overflow: hidden;
}

.chat[open] {
	display: flex;
	flex-direction: column;
}

.chat::backdrop {
	background: rgba(10, 18, 30, 0.45);
}

@media (max-width: 1023.98px) {
	/* The visible part of the screen (chat.js fit(): visualViewport), so the iOS keyboard / zoom never pushes it away. */
	.chat {
		inset: auto;
		top: var(--chat-top, 0);
		left: var(--chat-left, 0);
		width: var(--chat-w, 100%);
		max-width: none;
		height: var(--chat-vh, 100dvh);
		border: 0;
		border-radius: 0;
	}

	/* A strip the window does not reach (an in-app browser that reports the keyboard late) shows the chat colour, never the page. */
	.chat::backdrop {
		background: #f3f5f8;
	}
}

.chat__head {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
	padding: calc(10px + env(safe-area-inset-top, 0px)) 8px 10px 12px;
	background: var(--chat-head);
	color: #fff;
}

.chat__av {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #e31e24;
}

.chat__av .icon {
	width: 20px;
	height: 20px;
}

.chat__t {
	flex: 1;
	min-width: 0;
}

.chat__t h2 {
	margin: 0;
	color: #fff;
	font-size: 0.9375rem;
	line-height: 1.3;
	font-weight: 700;
}

.chat__t p {
	margin: 0;
	color: #c9d2df;
	font-size: 0.75rem;
	line-height: 1.35;
}

.chat__x {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.chat__x:hover {
	background: rgba(255, 255, 255, 0.12);
}

.chat__ctx {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--chat-line);
	background: #fff;
}

.chat__ctx img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	border: 1px solid var(--chat-line);
	border-radius: 6px;
	background: #fff;
}

.chat__ctx div {
	min-width: 0;
	color: var(--chat-mute);
	font-size: 0.75rem;
	line-height: 1.35;
}

.chat__ctx b {
	display: block;
	overflow: hidden;
	color: var(--chat-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.chat__log {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
	padding: 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.chat-note {
	margin: 0;
	padding: 0 8px;
	color: var(--chat-mute);
	font-size: 0.75rem;
	line-height: 1.4;
	text-align: center;
}

.chat-note a {
	color: inherit;
	text-decoration: underline;
}

/* Who is writing (theme 0.29.29): round avatar + name (+ a small grey "AI" chip for the assistant). */
.chat-who {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0 -2px 2px;
	color: var(--chat-mute);
	font-size: 0.75rem;
}

.chat-av {
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--color-steel, #1b69d0);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	object-fit: cover;
}

.chat-who__n {
	color: var(--chat-ink);
	font-weight: 600;
}

.chat-who__ai {
	padding: 1px 6px;
	border-radius: 999px;
	background: #e9edf2;
	color: #4a5565;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.chat-m {
	max-width: 86%;
	padding: 8px 11px;
	border-radius: 14px;
	font-size: 0.875rem;
	line-height: 1.45;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.chat-m--ai {
	align-self: flex-start;
	border: 1px solid var(--chat-line);
	border-bottom-left-radius: 4px;
	background: #fff;
}

.chat-m--me {
	align-self: flex-end;
	border-bottom-right-radius: 4px;
	background: var(--c-chat, #1b69d0);
	color: #fff;
}

.chat-m b {
	font-weight: 600;
}

.chat-typing {
	align-self: flex-start;
	padding: 8px 12px;
	border: 1px solid var(--chat-line);
	border-radius: 14px;
	background: #fff;
	color: var(--chat-mute);
	font-size: 0.8125rem;
}

.chat-sys {
	align-self: center;
	padding: 4px 10px;
	border-radius: 999px;
	background: #e6f4ec;
	color: #1d6b45;
	font-size: 0.75rem;
}

.chat-sys--warn {
	background: #fff5e0;
	color: #7a4f00;
}

/* Returning visitor (WEB-02-CHAT-RESUME-V1): "continuing the earlier conversation" / "deleted" — small, grey, not stressed. */
.chat-sys--soft {
	background: transparent;
	color: #5b6573;
}

.chat__forget {
	flex: none;
	align-self: center;
	min-height: 32px;
	padding: 4px 12px;
	border: 0;
	background: none;
	color: #5b6573;
	font: inherit;
	font-size: 0.75rem;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.chat__forget[hidden] {
	display: none;
}

.chat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.chat-chip {
	min-height: 36px;
	padding: 6px 12px;
	border: 1px solid var(--c-chat, #1b69d0);
	border-radius: 999px;
	background: #fff;
	color: var(--c-chat, #1b69d0);
	font-family: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
}

.chat-chip:hover {
	background: var(--chat-soft);
}

.chat-gos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-width: 92%;
}

.chat-go {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 14px;
	border-radius: 10px;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
}

.chat-go:hover {
	color: #fff;
	text-decoration: none;
	filter: brightness(0.92);
}

.chat-go--zalo {
	background: var(--c-zalo);
}

.chat-go--messenger {
	background: var(--c-messenger);
}

.chat-go--call {
	background: var(--c-call);
}

.chat-go--whatsapp,
.chat-go--whatsapp:hover {
	background: var(--c-whatsapp);
	color: var(--c-whatsapp-ink);
}

/* Fallback reply when the chat cannot answer (Owner B78 + 01 20/10): an AI bubble with [Gọi] (+ a link to the page form). */
.chat-fb {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.chat-fb__act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-top: 8px;
}

.chat-help__call {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--color-steel, #1b69d0);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.chat-help__form {
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--color-steel, #1b69d0);
	font-family: inherit;
	font-size: 0.8125rem;
	text-decoration: underline;
	cursor: pointer;
}

/* A message that is waiting to be sent again. */
.chat-pending {
	align-self: flex-end;
	margin: -2px 4px 4px;
	color: var(--chat-mute);
	font-size: 0.75rem;
}

.chat__in {
	display: flex;
	flex: none;
	gap: 8px;
	padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--chat-line);
	background: #fff;
}

.chat__in input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--chat-line);
	border-radius: 999px;
	background: var(--chat-soft);
	color: var(--chat-ink);
	font-family: inherit;
	font-size: 16px; /* at least 16 px for real: iOS zooms into smaller inputs (FORM WEB-02-CHAT-IPHONE-V1) */
}

/* Phone chat open: the page behind does not scroll (iOS would move the visual viewport under the window). */
html.chat-lock,
html.chat-lock body {
	overflow: hidden;
	overscroll-behavior: none;
}

.chat__in input:disabled {
	opacity: 0.6;
}

.chat__in button {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--c-chat, #1b69d0);
	color: #fff;
	cursor: pointer;
}

.chat__in button:disabled {
	opacity: 0.5;
}

.chat button:focus-visible,
.chat a:focus-visible,
.chat input:focus-visible,
.chat-fab:focus-visible {
	outline: 2px solid #1f57b8;
	outline-offset: 2px;
}

/* PC floating button, owner 05/10 ("đứng im thì không tốt", "kéo đến tận cuối trang nó mất"): always shown, the
   footer keeps room under it (button 48 + 24 px), and a soft ring spreads around it for ~2 s every ~6 s from ~3 s
   after load, with one small bounce the first time. site.js removes .is-nudge once it has been opened this session.
   No blinking; nothing moves with prefers-reduced-motion. */
@media (min-width: 1024px) {
	body:has(.pcfab, .chat-fab) .site-footer {
		padding-bottom: 72px;
	}

	.pcfab__btn.is-nudge {
		position: relative; /* ring anchor (the chat button is already fixed) */
	}

	.pcfab__btn.is-nudge,
	.chat-fab.is-nudge {
		animation: amk-nudge-pop 0.6s ease-out 3s 1 both;
	}

	.pcfab__btn.is-nudge::after,
	.chat-fab.is-nudge::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		box-shadow: 0 0 0 0 rgba(227, 30, 36, 0.55);
		pointer-events: none;
		animation: amk-nudge-ring 6s ease-out 3s infinite;
	}
}

@keyframes amk-nudge-ring {
	0% {
		box-shadow: 0 0 0 0 rgba(227, 30, 36, 0.55);
	}

	33% {
		box-shadow: 0 0 0 16px rgba(227, 30, 36, 0);
	}

	100% {
		box-shadow: 0 0 0 16px rgba(227, 30, 36, 0);
	}
}

@keyframes amk-nudge-pop {
	0%,
	100% {
		transform: scale(1);
	}

	40% {
		transform: scale(1.06);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pcfab__btn.is-nudge,
	.chat-fab.is-nudge,
	.pcfab__btn.is-nudge::after,
	.chat-fab.is-nudge::after {
		animation: none;
	}
}

/* ==========================================================================
   Landing page V2 (template-landing-v2.php, FORM WEB-02-LP-V2-THEME, docs/45, owner-approved mockup).
   Mobile first; from 768 px one centred column of 560 px, the bottom bar the same width. No site header / footer.
   ========================================================================== */
body.lp2-page {
	--lp-red: #e31e24;
	--lp-red-d: #c8161c;
	--lp-ink: #16202e;
	--lp-mute: #5b6675;
	--lp-line: #e3e8ef;
	--lp-soft: #f5f7fa;
	--lp-navy: #0f1e33;
	margin: 0;
	padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
	background: var(--lp-soft);
	color: var(--lp-ink);
}

.lp2-page .lp-top,
.lp2-page .lp,
.lp2-page .lp-bar {
	max-width: 560px;
	margin-inline: auto;
}

.lp-top {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	background: var(--lp-navy);
	color: #fff;
}

.lp-top__logo img {
	display: block;
	width: auto;
	height: 40px;
}

.lp-top__tag {
	font-size: 0.75rem;
	line-height: 1.3;
	color: #c9d2df;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.lp {
	background: #fff;
}

/* S1 */
.lp-hero {
	padding-bottom: 16px;
}

.lp-hero__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--lp-navy);
}

.lp-hero__poster,
.lp-proof__v img,
.lp-rel__v img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lp-hero__media::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 60%;
	background: linear-gradient(180deg, rgba(15, 30, 51, 0.85), rgba(15, 30, 51, 0));
	pointer-events: none;
	z-index: 1;
}

.lp-hero__media.is-playing::before {
	display: none;
}

.lp-hero__tx {
	position: relative;
	z-index: 2;
	padding: 16px;
	color: #fff;
}

.lp-hero__t {
	margin: 0;
	font-size: 1.625rem;
	line-height: 1.2;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.lp-hero__s {
	margin: 8px 0 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: #eef2f7;
}

.lp-play {
	position: absolute;
	left: 50%;
	top: 58%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	transform: translate(-50%, -50%);
	cursor: pointer;
}

.lp-play .icon {
	box-sizing: content-box;
	width: 30px;
	height: 30px;
	padding: 17px;
	border-radius: 50%;
	background: var(--lp-red);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.lp-play span {
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(15, 30, 51, 0.7);
}

.lp-play--sm {
	top: 50%;
}

.lp-play--sm .icon {
	width: 22px;
	height: 22px;
	padding: 13px;
}

[data-lp-video] iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.lp-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	margin: 16px 16px 0;
	padding: 10px 16px;
	border-radius: 12px;
	background: var(--lp-red);
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(227, 30, 36, 0.25);
}

.lp-cta:hover {
	background: var(--lp-red-d);
	color: #fff;
	text-decoration: none;
}

.lp-cta .icon {
	width: 20px;
	height: 20px;
}

.lp-micro {
	margin: 8px 16px 0;
	color: var(--lp-mute);
	font-size: 0.8125rem;
	text-align: center;
}

/* Sections */
.lp-sec {
	padding: 20px 16px;
	border-top: 8px solid var(--lp-soft);
}

body.lp2-page .lp-h {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding: 0;
	color: var(--lp-red);
	font-size: 1.0625rem;
	line-height: 1.3;
	font-weight: 800;
	text-transform: uppercase;
}

.lp-n {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--lp-red);
	color: #fff;
	font-size: 0.9375rem;
}

.lp-sub,
.lp-note {
	margin: 0 0 12px;
	color: var(--lp-mute);
	font-size: 0.875rem;
	line-height: 1.5;
}

.lp-note {
	margin: 12px 0 0;
}

.lp-foot {
	margin: 8px 0 0;
	color: var(--lp-ink);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* S2 */
.lp-cards__l {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-cards__l li {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 8px;
	border: 1px solid var(--lp-line);
	border-radius: 12px;
	text-align: center;
}

.lp-cards__l b {
	color: var(--lp-ink);
	font-size: 1rem;
	line-height: 1.25;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.lp-cards__l span {
	color: var(--lp-mute);
	font-size: 0.75rem;
	line-height: 1.35;
}

/* S3 */
.lp-proof__g {
	display: grid;
	gap: 8px;
}

.lp-proof__v,
.lp-rel__v {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background: var(--lp-navy);
}

.lp-proof__i {
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.lp-cap {
	margin: 8px 0 0;
	color: var(--lp-mute);
	font-size: 0.8125rem;
}

.lp-invite {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	margin-top: 12px;
	padding: 10px 14px;
	border: 1.5px solid var(--lp-red);
	border-radius: 999px;
	color: var(--lp-ink);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

.lp-invite span {
	flex: 1;
}

.lp-invite .icon {
	width: 20px;
	height: 20px;
	color: var(--lp-red);
}

.lp-invite:hover {
	background: #fff5f5;
	text-decoration: none;
}

/* S4 */
.lp-rel__l {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-rel__c {
	border: 1px solid var(--lp-line);
	border-radius: 12px;
	overflow: hidden;
}

.lp-rel__open {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 64px;
	padding: 8px 12px 8px 8px;
	border: 0;
	background: #fff;
	color: var(--lp-ink);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.lp-rel__open img {
	flex: none;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	background: var(--lp-soft);
}

.lp-rel__open > span,
.lp-chk > span {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.lp-rel__open b,
.lp-chk b {
	font-size: 0.9375rem;
	font-weight: 700;
}

.lp-rel__open small,
.lp-chk small {
	color: var(--lp-mute);
	font-size: 0.8125rem;
	line-height: 1.35;
}

.lp-rel__open .icon {
	flex: none;
	width: 18px;
	height: 18px;
	transition: transform 0.15s;
}

.lp-rel__open[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.lp-rel__p {
	display: grid;
	gap: 8px;
	padding: 0 12px 12px;
}

.lp-rel__p p {
	margin: 0;
	color: var(--lp-mute);
	font-size: 0.875rem;
}

.lp-rel__big {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.lp-chk {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 10px 12px;
	cursor: pointer;
}

.lp-chk input,
.lp-opt input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--lp-red);
}

.lp-chk--sm {
	padding: 6px 0 0;
	min-height: 44px;
	font-size: 0.9375rem;
	font-weight: 600;
}

.lp-rel__c--full {
	border-style: dashed;
	border-color: var(--lp-red);
}

/* S5 */
.lp-form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.lp-form fieldset[hidden] {
	display: none;
}

.lp-opts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
}

.lp-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 10px 12px;
	border: 1.5px solid var(--lp-line);
	border-radius: 12px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.lp-opt:has(input:checked) {
	border-color: var(--lp-red);
	background: #fff5f5;
}

.lp-step--2 {
	display: grid;
	gap: 12px;
	margin-top: 16px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--lp-line) !important;
}

.lp-h2 {
	margin: 0 0 4px;
	padding: 0;
	font-size: 1rem;
	font-weight: 800;
}

.lp-f {
	display: grid;
	gap: 4px;
	color: var(--lp-mute);
	font-size: 0.8125rem;
	font-weight: 600;
}

.lp-f input {
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--lp-line);
	border-radius: 10px;
	background: #fff;
	color: var(--lp-ink);
	font-family: inherit;
	font-size: 1rem;
}

.lp-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.lp-err {
	margin: 0;
	color: #b3141a;
	font-size: 0.875rem;
	font-weight: 600;
}

.lp-send {
	min-height: 54px;
	border: 0;
	border-radius: 12px;
	background: var(--lp-red);
	color: #fff;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	cursor: pointer;
}

.lp-send:hover {
	background: var(--lp-red-d);
}

.lp-send:disabled {
	opacity: 0.6;
}

.lp-done {
	margin: 0;
	padding: 16px;
	border-radius: 12px;
	background: #e6f4ec;
	color: #1d6b45;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
}

/* S6 */
.lp-q {
	border-bottom: 1px solid var(--lp-line);
}

.lp-q summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 10px 0;
	font-size: 0.9375rem;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.lp-q summary::-webkit-details-marker {
	display: none;
}

.lp-q summary .icon {
	flex: none;
	width: 18px;
	height: 18px;
	transition: transform 0.15s;
}

.lp-q[open] summary .icon {
	transform: rotate(180deg);
}

.lp-q p {
	margin: 0 0 12px;
	color: var(--lp-mute);
	font-size: 0.875rem;
	line-height: 1.55;
}

/* Fixed bottom bar: [Gọi] [Nhắn Zalo OA]. */
.lp-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 60;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	box-shadow: 0 -6px 18px rgba(15, 27, 45, 0.12);
}

.lp-bar--one {
	grid-template-columns: 1fr;
}

.lp-bar a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	border-radius: 12px;
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
	text-decoration: none;
}

.lp-bar a:hover {
	color: #fff;
	text-decoration: none;
}

.lp-bar .icon {
	width: 22px;
	height: 22px;
}

.lp-bar a span {
	white-space: nowrap;
}

/* Narrow phones (360–399 px): both buttons stay on one line (FIX1 after staging, 10/10). */
@media (max-width: 399.98px) {
	.lp-bar {
		gap: 6px;
		padding-inline: 6px;
	}

	.lp-bar a {
		gap: 6px;
		padding-inline: 6px;
		font-size: 0.875rem;
	}

	.lp-bar .icon {
		width: 18px;
		height: 18px;
	}
}

.lp-bar__call {
	background: var(--lp-red);
}

.lp-bar__zalo {
	background: var(--c-zalo, #0068ff);
}

.lp2-page a:focus-visible,
.lp2-page button:focus-visible,
.lp2-page input:focus-visible,
.lp2-page summary:focus-visible {
	outline: 2px solid #1f57b8;
	outline-offset: 2px;
}

@media (min-width: 768px) {
	body.lp2-page {
		background: #e9edf2;
	}

	.lp-bar {
		border-radius: 14px 14px 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-rel__open .icon,
	.lp-q summary .icon {
		transition: none;
	}
}

/* ==========================================================================
   One-model landing page (template-parts/landing-model.php, FORM WEB-02-LP-V8-MXD, owner-approved mockup v8).
   One column on phones (cards on a light grey page), a 720 px column on computers. Navy section bars, red accents,
   frames "ảnh thật — chụp sau" until the real photos arrive. Only bottom bar: [Ask the AI] [Sections].
   ========================================================================== */
body.lp2-model {
	--lpm-navy: #0b1f3a;
	--lpm-red: var(--lp-red, #e31e24);
	--lpm-bg: #eef1f4;
	--lpm-soft: #f4f6f8;
	--lpm-line: #dee3e8;
	--lpm-muted: #5d6b7b;
	background: var(--lpm-bg);
	color: #111d2f;
	padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
body.lp2-model .chat-fab { display: none; }
.lpm-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--lpm-line); }
.lpm-top__logo img { display: block; width: auto; height: 34px; }
.lpm-top__hot { display: flex; flex-direction: column; margin-left: auto; color: var(--lpm-navy); text-decoration: none; line-height: 1.15; text-align: right; }
.lpm-top__hot small { font-size: 11px; color: var(--lpm-muted); }
.lpm-top__hot b { font-size: 16px; font-weight: 800; white-space: nowrap; }
.lpm-top__ch { display: flex; gap: 6px; }
.lpm-ch { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lpm-soft); color: var(--lpm-navy); }
.lpm-ch .icon { width: 18px; height: 18px; }
.lpm-ch--call { background: #fdecec; color: var(--lpm-red); }
.lpm-ch--messenger { background: #e8f0fe; color: #0866ff; }
.lpm-ch--zalo { background: #e6f0ff; color: #0068ff; }
@media (max-width: 379.98px) {
	.lpm-top { gap: 6px; padding: 8px; }
	.lpm-top__logo img { height: 28px; }
	.lpm-top__hot b { font-size: 14px; }
	.lpm-ch { width: 32px; height: 32px; }
}

.lpm { max-width: 720px; margin: 0 auto; padding: 0 0 16px; }
.lpm-card { margin: 10px 10px 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(11, 31, 58, .07); }
.lpm-pad { padding: 16px; }
.lpm-h { margin: 0 0 12px; color: var(--lpm-navy); font-size: 22px; font-weight: 800; line-height: 1.12; text-transform: uppercase; letter-spacing: .01em; }
.lpm-h--red { color: var(--lpm-red); }
.lpm-h--sm { font-size: 19px; margin-bottom: 4px; }
.lpm-bar { margin: 0; padding: 12px 16px; background: var(--lpm-navy); color: #fff; font-size: 16px; font-weight: 800; line-height: 1.25; text-transform: uppercase; letter-spacing: .02em; }
.lpm-sub { margin: 0 0 12px; color: var(--lpm-muted); font-size: 13.5px; line-height: 1.45; }
.lpm-cap { margin: 8px 0 0; color: var(--lpm-muted); font-size: 13px; }

/* Picture frames until the real photo exists */
.lpm-wait { display: grid; place-items: center; min-height: 160px; padding: 14px; border: 1.5px dashed #c3ccd6; border-radius: 12px; background: repeating-linear-gradient(135deg, #f7f9fb 0 12px, #f1f4f7 12px 24px); color: var(--lpm-muted); font-size: 13px; font-weight: 600; text-align: center; }
.lpm-wait span { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.lpm-wait .icon { width: 26px; height: 26px; opacity: .7; }
.lpm-wait--tall { min-height: 100%; height: 100%; border-radius: 0; border-width: 0 0 0 1.5px; }
.lpm-wait--video { aspect-ratio: 16 / 9; min-height: 0; }
.lpm-wait--mach { min-height: 420px; }
.lpm-wait--cut { min-height: 300px; }
.lpm-wait--dim { width: 46%; min-height: 420px; margin: 0 auto; }
.lpm-demo { position: absolute; right: 6px; bottom: 6px; padding: 2px 7px; border-radius: 6px; background: rgba(11, 31, 58, .72); color: #fff; font-size: 10.5px; font-weight: 600; }

/* 01 Hero */
.lpm-hero { position: relative; display: grid; grid-template-columns: 1fr 42%; min-height: 470px; background: linear-gradient(180deg, #fbf6ee 0%, #f3e9da 100%); }
.lpm-hero__tx { position: relative; z-index: 1; padding: 20px 10px 18px 14px; }
.lpm-hero__t { margin: 0 0 10px; color: var(--lpm-red); font-size: 28px; font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.lpm-badge { display: inline-block; margin: 0 0 10px; padding: 4px 10px; border-radius: 6px; background: var(--lpm-red); color: #fff; font-size: 14px; font-weight: 700; }
.lpm-hero__s { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; line-height: 1.38; }
.lpm-stats { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lpm-stats li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 6px rgba(0, 0, 0, .06); }
.lpm-stats__i { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border: 2px solid var(--lpm-red); border-radius: 50%; color: var(--lpm-red); }
.lpm-stats__i .icon { width: 17px; height: 17px; }
.lpm-stats b { display: block; font-size: 16px; line-height: 1.15; }
.lpm-stats small { display: block; color: var(--lpm-muted); font-size: 12px; }
.lpm-hero__m { position: relative; overflow: hidden; }
.lpm-hero__m img { width: 100%; height: 100%; object-fit: cover; }
.lpm-hero__m .lp-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.lpm-ask { display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); margin: 12px 10px 0; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--lpm-red); color: #fff; font: inherit; font-size: 16px; font-weight: 700; text-align: left; text-decoration: none; box-shadow: 0 6px 16px rgba(232, 18, 27, .26); cursor: pointer; }
.lpm-ask span { flex: 1; }
.lpm-ask .icon { width: 22px; height: 22px; flex: none; }
.lpm-micro { margin: 8px 14px 0; color: var(--lpm-muted); font-size: 13px; text-align: center; }

/* 02 Video */
.lpm-vid { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #0b1f3a; }
.lpm-vid img, .lpm-vid iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.lpm-vid .lp-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.lpm-line { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 11px; border: 1.5px solid var(--lpm-navy); border-radius: 12px; background: #fff; color: var(--lpm-navy); font: inherit; font-size: 14.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
.lpm-line .icon { width: 18px; height: 18px; }

/* Video block under the hero (WEB-02-LP-VIDEO-BUNNY): portrait clip on a poster, "Xem video chi tiết" box. */
.lpm-vs { padding: 12px; background: #0b1f3a; }
.lpm-vs__f { position: relative; width: min(100%, calc(72svh * 9 / 16)); aspect-ratio: 9 / 16; margin: 0 auto; overflow: hidden; border-radius: 12px; background: #0b1f3a; }
.lpm-vs__f img, .lpm-vs__f iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.lpm-vs__t { margin: 2px 4px 10px; color: #fff; font-size: 18px; font-weight: 800; line-height: 1.2; text-align: center; }
.lpm-vs__f .lp-play { top: 50%; }
.lpm-vs__f--poster { background: #e6ebf2; }
.lpm-vs__f.is-wait .lp-play { visibility: hidden; animation: lpm-vs-show 0s 4s forwards; } /* shown when the poster is in; at the latest after 4 s */
@keyframes lpm-vs-show { to { visibility: visible; } }
.lpm-vs__more { max-width: 420px; margin: 10px auto 0; border-color: #fff; }
.lpm-vs > .lpm-vs__more:first-child { margin-top: 0; }
.lpm-vm { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 52px 8px calc(8px + env(safe-area-inset-bottom)); background: #000; }
.lpm-vm[hidden] { display: none; }
.lpm-vm__x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
.lpm-vm__x .icon { width: 22px; height: 22px; }
.lpm-vm__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lpm-vm__f { position: relative; }
.lpm-vm__f.is-tall { height: min(100%, calc((100vw - 16px) * 16 / 9)); aspect-ratio: 9 / 16; }
.lpm-vm__f.is-wide { width: min(100%, calc((100svh - 60px) * 16 / 9)); aspect-ratio: 16 / 9; }
.lpm-vm__f iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
html.lpm-vm-open, html.lpm-vm-open body { overflow: hidden; }

/* 03 Advantages */
.lpm-adv__l { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lpm-adv__l li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px; border: 1px solid #f6d9da; border-radius: 12px; background: #fff6f6; text-align: center; }
.lpm-adv__l .icon { width: 24px; height: 24px; color: var(--lpm-red); }
.lpm-adv__l b { color: var(--lpm-navy); font-size: 14px; line-height: 1.25; }
.lpm-adv__l span { color: var(--lpm-muted); font-size: 12px; line-height: 1.35; }

/* 04 Structure */
.lpm-feat { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 10px 16px 0; }
.lpm-feat small { color: var(--lpm-red); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lpm-feat b { color: var(--lpm-navy); font-size: 18px; }
.lpm-feat span { color: var(--lpm-muted); font-size: 13px; }
.lpm-mach { display: grid; grid-template-columns: 38% 1fr; align-items: center; gap: 10px; padding: 12px 12px 16px; background: linear-gradient(180deg, #fff, #f2f5f8); }
.lpm-mach > .lpm-wait, .lpm-mach__m { grid-column: 2; grid-row: 1; }
.lpm-mach__m { position: relative; display: block; }
.lpm-mach__img { display: block; width: 100%; height: auto; border-radius: 10px; }
.lpm-co { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; list-style: none; }
.lpm-co li { position: relative; display: flex; align-items: flex-start; gap: 7px; color: var(--lpm-navy); font-size: 13px; font-weight: 700; line-height: 1.3; }
.lpm-co li::after { content: ""; position: absolute; left: 100%; top: 10px; width: 14px; height: 1.5px; background: var(--lpm-red); }
.lpm-co i { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lpm-red); color: #fff; font-size: 12px; font-style: normal; }
.lpm-co li.is-hl span { color: var(--lpm-red); }
.lpm-co .lpm-co__tag span { padding: 5px 9px; border: 1px solid #9ec5ea; border-radius: 8px; background: #e6f1fb; color: #14558e; }

/* 04b Cross-section (the one SolidWorks picture) */
.lpm-cut { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; padding: 12px; background: linear-gradient(180deg, #fff, #f2f5f8); }
.lpm-cut > .lpm-wait { grid-column: 1 / -1; }
.lpm-cut__img { display: block; width: 100%; max-height: 520px; object-fit: contain; }
.lpm-cut__tags { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lpm-cut__tags li { padding: 6px 10px; border: 1.5px solid var(--lpm-red); border-radius: 10px; background: #fff; color: var(--lpm-navy); font-size: 12.5px; font-weight: 700; line-height: 1.3; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.lpm-cut__zoom { grid-column: 2; justify-self: center; width: 120px; height: 120px; border: 3px solid var(--lpm-red); border-radius: 50%; background: #fff; object-fit: cover; }

/* 04c How it works */
.lpm-flow { display: grid; gap: 8px; margin: 0; padding: 14px 16px 16px; list-style: none; }
.lpm-flow li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.lpm-flow i { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lpm-navy); color: #fff; font-size: 13px; font-style: normal; }

/* 05 Process */
.lpm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.lpm-steps li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-radius: 12px; background: var(--lpm-soft); text-align: center; }
.lpm-steps i { color: var(--lpm-muted); font-size: 12px; font-style: normal; font-weight: 700; }
.lpm-steps b { font-size: 14px; }
.lpm-steps small { font-size: 11px; font-weight: 600; }
.lpm-steps li.is-on { background: var(--lpm-red); color: #fff; }
.lpm-steps li.is-on i { color: rgba(255, 255, 255, .85); }

/* 06 Size (numbers written around the photo) */
.lpm-dim { position: relative; padding: 40px 54px 20px; border-radius: 12px; background: var(--lpm-soft); }
.lpm-dim__m { position: relative; display: block; width: 62%; margin: 0 auto; }
.lpm-dim__m img { display: block; width: 100%; height: auto; border-radius: 8px; }
.lpm-dim__l { position: absolute; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.lpm-dim__l b { font-size: 15px; font-weight: 800; }
.lpm-dim__l small { color: var(--lpm-muted); font-size: 11px; }
.lpm-dim__l--top { left: 50%; top: 10px; transform: translateX(-50%); padding-bottom: 4px; border-bottom: 2px solid var(--lpm-red); }
.lpm-dim__l--left { left: 22px; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); }
.lpm-dim__l--right { right: 22px; top: 62%; transform: translate(50%, -50%) rotate(-90deg); }
.lpm-dim::before, .lpm-dim::after { content: ""; position: absolute; width: 2px; background: var(--lpm-red); }
.lpm-dim::before { left: 40px; top: 40px; bottom: 20px; }
.lpm-dim::after { right: 40px; top: 46%; bottom: 20px; }

/* 07 Specs table */
.lpm-tb { width: 100%; border-collapse: collapse; font-size: 14px; }
.lpm-tb th, .lpm-tb td { padding: 10px 14px; border-bottom: 1px solid var(--lpm-line); text-align: left; vertical-align: top; }
.lpm-tb th { width: 48%; color: var(--lpm-muted); font-weight: 500; }
.lpm-tb td { font-weight: 600; }
.lpm-tb tr:nth-child(odd) th, .lpm-tb tr:nth-child(odd) td { background: #f8fafc; }
.lpm-ok { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 14px; color: #1d6b45; font-size: 13px; font-weight: 600; }
.lpm-ok .icon { width: 16px; height: 16px; }

/* 08 Real pictures */
.lpm-g6 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lpm-g6__m, .lpm-rel__m { position: relative; display: block; }
.lpm-g6 img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.lpm-g6 .lpm-wait { aspect-ratio: 1; min-height: 0; }

/* Production capacity (2nd block) + the line under the hero that jumps to it */
.lpm-made { display: block; margin: 10px 14px 0; color: var(--lpm-navy); font-size: 14px; font-weight: 700; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.lpm-fac { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lpm-fac__m { position: relative; display: block; }
.lpm-fac img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.lpm-fac p { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; }
.lpm-wait--fac { aspect-ratio: 16 / 10; min-height: 0; }
@media (min-width: 768px) { .lpm-fac { grid-template-columns: 1fr 1fr; } }

/* 09 Related */
.lpm-rel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lpm-rel li { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--lpm-line); border-radius: 12px; text-align: center; }
.lpm-rel img, .lpm-rel__ph { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--lpm-soft); object-fit: contain; }
.lpm-rel__ph { display: grid; place-items: center; color: var(--lpm-muted); }
.lpm-rel__ph .icon { width: 28px; height: 28px; }
.lpm-rel b { font-size: 13.5px; line-height: 1.25; }
.lpm-rel small { color: var(--lpm-muted); font-size: 12px; line-height: 1.3; }
.lpm-rel__chk { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; margin-top: auto; border: 1.5px solid var(--lpm-navy); border-radius: 10px; color: var(--lpm-navy); font-size: 13px; font-weight: 700; cursor: pointer; }
.lpm-rel__chk input { width: 16px; height: 16px; accent-color: var(--lpm-red); }

/* 10 FAQ */
.lpm-q { margin: 0 0 8px; border: 1px solid var(--lpm-line); border-radius: 12px; }
.lpm-q summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 14px; font-size: 14.5px; font-weight: 600; list-style: none; cursor: pointer; }
.lpm-q summary::-webkit-details-marker { display: none; }
.lpm-q summary .icon { width: 16px; height: 16px; flex: none; transition: transform .2s; }
.lpm-q[open] summary .icon { transform: rotate(180deg); }
.lpm-q p { margin: 0; padding: 0 14px 12px; color: var(--lpm-muted); font-size: 14px; line-height: 1.5; }

/* 11 Fallback form (field styles from the landing page V2) */
.lpm .lp-send { width: 100%; background: var(--color-steel, #1b69d0); }
/* "Gọi lại cho tôi" on every leave-your-number form (Owner 20/10): normal case, semi-bold. */
.lp-send,
.lead-form__submit { font-weight: 600; text-transform: none; } /* no black action buttons (Owner 20/10): brand blue, white 5.28:1 */

.lpm-foot { margin: 10px 0 0; padding: 18px 16px; background: var(--lpm-navy); color: #cfd6df; font-size: 12.5px; }
.lpm-foot b { color: #fff; }
.lpm-foot a { color: #fff; text-decoration: underline; } /* Privacy Policy in the page footer (B79 implied consent) */
.lp-foot a { color: inherit; text-decoration: underline; }

/* Only bottom bar + sections sheet + small chat greeting + contact prompt */
.lpm-bbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--lpm-line); box-shadow: 0 -4px 14px rgba(0, 0, 0, .08); }
.lpm-bbar__a { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 0; border-radius: 14px; background: var(--lpm-red); color: #fff; font: inherit; font-size: 15.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
.lpm-bbar__m { display: flex; align-items: center; justify-content: center; gap: 6px; width: 92px; min-height: 48px; border: 1.5px solid var(--lpm-navy); border-radius: 14px; background: #fff; color: var(--lpm-navy); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.lpm-bbar .icon { width: 20px; height: 20px; }
.lpm-menu { position: fixed; inset: 0; z-index: 45; background: rgba(11, 31, 58, .4); }
.lpm-menu[hidden] { display: none; }
.lpm-menu__in { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px calc(76px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: #fff; }
.lpm-menu__t { margin: 0 0 8px; color: var(--lpm-navy); font-size: 16px; font-weight: 800; }
.lpm-menu__l { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lpm-menu__l button { width: 100%; min-height: 44px; border: 1px solid var(--lpm-line); border-radius: 10px; background: var(--lpm-soft); color: var(--lpm-navy); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.lpm-peek { position: fixed; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 41; max-width: 420px; margin: 0 auto; padding: 10px 12px 12px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(11, 31, 58, .22), 0 0 0 1px var(--lpm-line); }
.lpm-peek__h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; color: var(--lpm-navy); font-size: 13px; font-weight: 700; }
.lpm-peek__x { width: 32px; height: 32px; border: 0; background: none; color: var(--lpm-muted); font-size: 20px; cursor: pointer; }
.lpm-peek__m { margin: 0 0 8px; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: #f3f5f8; font-size: 14.5px; line-height: 1.45; }
.lpm-peek__in { display: flex; gap: 8px; }
.lpm-peek__in input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--lpm-line); border-radius: 999px; background: var(--lpm-soft); font: inherit; font-size: 16px; } /* 16 px: iOS zooms into smaller inputs */
.lpm-peek__in button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--color-steel, #1b69d0); color: #fff; cursor: pointer; }
.lpm-peek__in .icon { width: 18px; height: 18px; }
.lpm-toast { position: fixed; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 42; display: flex; align-items: center; gap: 8px; max-width: 420px; margin: 0 auto; padding: 10px 10px 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(11, 31, 58, .2), 0 0 0 1px var(--lpm-line); font-size: 14px; }
.lpm-toast[hidden] { display: none; }
.lpm-toast b { flex: 1; }
.lpm-toast a { padding: 10px 12px; border-radius: 10px; background: var(--color-steel, #1b69d0); color: #fff; font-weight: 700; text-decoration: none; }
.lpm-toast button { padding: 10px 8px; border: 0; background: none; color: var(--lpm-muted); font: inherit; font-weight: 600; cursor: pointer; }

@media (min-width: 768px) {
	.lpm-top { padding: 10px max(16px, calc((100vw - 720px) / 2)); }
	.lpm-card, .lpm-ask { margin-left: 0; margin-right: 0; }
	.lpm-ask { width: 100%; }
	.lpm { padding-top: 10px; }
	.lpm-hero { border-radius: 16px; overflow: hidden; min-height: 520px; }
	.lpm-hero__t { font-size: 36px; }
	.lpm-adv__l { grid-template-columns: repeat(4, 1fr); }
	.lpm-steps { grid-template-columns: repeat(6, 1fr); }
	.lpm-g6 { grid-template-columns: repeat(3, 1fr); }
	.lpm-rel { grid-template-columns: repeat(4, 1fr); }
	.lpm-bbar { left: 50%; right: auto; width: 720px; transform: translateX(-50%); border-radius: 16px 16px 0 0; }
	.lpm-foot { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.lpm-q summary .icon { transition: none; }
}

/* Number ranges in product titles ("50–60 kg") stay on one line (amankong_title_html). */
.nowrap {
	white-space: nowrap;
}

/* Landing chat first (FORM WEB-02-LP-CHAT-FIRST, Owner 19/10): bottom bar [Chat với tư vấn viên – trả lời ngay][Gọi]
   and the "leave a number" form folded into one small line at the end of the page. */
.lpm-bbar--chat .lpm-bbar__a {
	justify-content: flex-start;
	padding: 0 14px;
	text-align: left;
}

.lpm-bbar__t {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.lpm-bbar__t b {
	font-size: 16px;
	font-weight: 800;
	line-height: 1.15;
	white-space: nowrap;
}

.lpm-bbar__t small {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.15;
	opacity: 0.92;
}

.lpm-bbar__call {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 64px;
	min-height: 48px;
	border: 1.5px solid var(--lpm-navy);
	border-radius: 14px;
	background: #fff;
	color: var(--lpm-navy);
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
}

/* The "leave your number" form of a landing page: open, in its own box (Owner 20/10, FORM WEB-02-LP-FORM-PROMINENT-V1).
   Tokens only: light blue surface, brand-blue frame + icon, bold title and labels; 28 px clear of the block above. */
.lpm-formbox { margin-top: 28px; padding: 22px 16px 20px; border: 2px solid var(--color-steel, #1b69d0); border-radius: 18px; background: var(--color-cta-soft, #eef4fb); }
.lpm-formbox__t { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--lpm-navy); font-size: 22px; font-weight: 800; line-height: 1.2; }
.lpm-formbox__t .icon { flex: none; width: 26px; height: 26px; color: var(--color-steel, #1b69d0); }
.lpm-formbox__s { margin: 0 0 18px; color: var(--lpm-muted); font-size: 15px; line-height: 1.45; }
.lpm-formbox form { display: grid; gap: 16px; }
.lpm-formbox .lp-f { gap: 8px; color: var(--lpm-navy); font-size: 15px; font-weight: 700; }
.lpm-formbox .lp-f input { border: 1.5px solid var(--lpm-line); background: var(--color-surface, #fff); }
/* Bottom bar of the landing page (Owner 21/10, the 4 landing fixes): three buttons with words, Messenger · Zalo · Call. */
.lpm-bbar--ch { gap: 6px; padding-left: 8px; padding-right: 8px; }
.lpm-bb { display: flex; flex: 1; flex-direction: row; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 48px; padding: 0 4px; border: 0; border-radius: 14px; color: #fff; font: inherit; font-size: 14.5px; font-weight: 800; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; }
.lpm-bb--chat { flex: 1.3; }
.lpm-bb--msg { flex: 1.5; }
.lpm-bb .icon { flex: none; width: 19px; height: 19px; }
.lpm-bb--chat { background: var(--lpm-red); }
.lpm-bb--msg { background: #0866d6; }
.lpm-bb--zalo { background: #0b7a3b; }
.lpm-bb--call { background: var(--lpm-navy); }
.lpm-bb--chat { flex: 2.2; }
.lpm-bb--call { flex: 1; }
.lpm-bb--chat, .lpm-bb--call { font-size: 15.5px; }
/* Messenger + Zalo: two round icons at the right edge, half way down (Owner 21/10). */
.lpm-float { position: fixed; right: 12px; top: 50%; z-index: 39; display: flex; flex-direction: column; gap: 12px; transform: translateY(-50%); transition: opacity .2s; }
.lpm-float.is-away { opacity: 0; pointer-events: none; } /* the form box is on the screen: nothing over it */
.lpm-fl { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; box-shadow: 0 3px 10px rgba(11, 31, 58, .32); }
.lpm-fl .icon { width: 24px; height: 24px; }
/* The clip leaves room for the two round icons on the right (nothing over the video on a phone). */
.lpm-vs__f { width: min(100%, calc(72svh * 9 / 16), calc(100vw - 132px)); }
.lpm-fl--msg { background: #0866d6; }
.lpm-fl--zalo { background: #0b7a3b; }
.lpm-fl:focus-visible { outline: 3px solid #0b1f3a; outline-offset: 2px; }
/* The chat card header: "Thu gọn" stays on one line (the brand name before it may wrap). */
.lpm-peek__x { flex: none; white-space: nowrap; }
.lpm-peek__h { gap: 8px; }
/* B88: the mini card is low and its close button is plain: the word and a cross. */
.lpm-peek { padding-bottom: 10px; }
.lpm-peek__h { margin-bottom: 6px; }
.lpm-peek__m { margin-bottom: 6px; padding: 7px 11px; font-size: 14px; line-height: 1.4; }
.lpm-peek__in input { height: 40px; }
.lpm-peek__in button { width: 40px; height: 40px; }
.lpm-peek__x { gap: 6px; min-height: 34px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-weight: 800; }
.lpm-peek__xc { font-size: 22px; font-weight: 400; line-height: 1; }
@media (min-width: 768px) { .lpm-float { right: calc(50% - 348px); } .lpm-vs__f { width: min(100%, calc(72svh * 9 / 16)); } }

.lpm-bb:focus-visible { outline: 3px solid #0b1f3a; outline-offset: 2px; }
/* The headline above the clip: one short line, white on the navy block. */
.lpm-vs__t { font-size: 17px; line-height: 1.25; text-wrap: balance; }
.lp-phone-hint { margin: -4px 2px 0; color: #b42318; font-size: 14px; font-weight: 600; line-height: 1.35; }
.lp-phone-hint[hidden] { display: none; }
.lpm-formbox .lp-f input:focus { border-color: var(--color-steel, #1b69d0); outline: 2px solid var(--color-steel, #1b69d0); outline-offset: 1px; }
.lpm-formbox .lp-send { min-height: 52px; font-size: 17px; }

/* Minimized chat (FORM WEB-02-CHAT-MINIMIZE, owner 19/10): the corner button says "Thu gọn" (minimize) instead of a cross,
   and launchers carry a red badge with the number of replies that came while the chat was minimized. */
.chat__min {
	gap: 4px;
	width: auto;
	padding: 0 10px;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 700;
}

.chat__min .icon {
	width: 20px;
	height: 20px;
}

.chat-badge {
	position: absolute;
	top: -6px;
	right: -4px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border: 2px solid #fff;
	border-radius: 999px;
	background: #e31e24;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 2px 6px rgba(15, 27, 45, 0.3);
}

.lpm-bbar__a,
.mcv-b {
	position: relative;
}

/* Landing: no empty "photo to come" frames for visitors (FORM WEB-02-LP-HIDE-EMPTY-FRAMES): blocks without media are
   left out in the template; these rules re-flow what remains. */
.lpm-hero--nomedia {
	grid-template-columns: 1fr;
	min-height: 0;
}

.lpm-mach--nomedia {
	grid-template-columns: 1fr;
}

.lpm-dimlist {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lpm-dimlist li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--lpm-soft);
}

.lpm-dimlist span {
	color: var(--lpm-muted);
	font-size: 14px;
}

.lpm-dimlist b {
	font-size: 16px;
	font-weight: 800;
}

@media (min-width: 768px) {
	.lpm-fac--1 {
		grid-template-columns: 1fr;
	}

	.lpm-fac--3 li:last-child {
		grid-column: 1 / -1;
	}
}

/* Chat in the bottom bar on the regular pages (FORM WEB-02-CHAT-IN-BOTTOM-BAR, owner chose B 19/10): below 1024 px
   no floating chat button on .site-v2 pages — the 5th bottom-nav item is "Chat tư vấn" (template-parts/bottom-nav.php,
   only while the chat is on) and product pages keep [Chat][Zalo][Gọi] in their sticky bar. Landing pages untouched. */
@media (max-width: 1023.98px) {
	body.site-v2 .chat-fab {
		display: none;
	}

	.bottom-nav__item--chat {
		position: relative;
		margin: 6px 4px;
		min-height: calc(var(--mobile-bar-h) - 13px);
		border-radius: 12px;
		background: var(--color-brand);
		color: #fff;
		font-weight: 700;
	}

	.bottom-nav__item--chat:hover,
	.bottom-nav__item--chat:focus-visible {
		background: var(--color-brand-hover);
		color: #fff;
	}

	.bottom-nav__dot {
		position: absolute;
		top: 6px;
		left: calc(50% + 7px);
		width: 10px;
		height: 10px;
		border: 2px solid #fff;
		border-radius: 50%;
		background: #22c55e;
	}

	.bottom-nav__item--chat .chat-badge {
		top: -4px;
		right: -2px;
	}

	/* Text that was cut with "…" (docs/55): up to two lines instead. */
	body.site-v2 .trust .trust__text strong,
	body.site-v2 .trust .trust__text span,
	body.site-v2 .mk-mc__sp {
		display: -webkit-box;
		overflow: hidden;
		white-space: normal;
		text-overflow: clip;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

/* Drawer V2 (FORM WEB-02-DRAWER-V2, docs/56, mockup docs/qa/nav-drawer-1910/mockup-v2.html, Quỳnh visual lock): head (logo +
   ✕) · scrolling list · fixed foot [Liên hệ tư vấn] + VI · EN. Type 16/22/600 (rows) · 15/20/600 (groups) · 12/18/400
   (counts) · 14/20/600 red (see all) · 15/20/600 (button); rows 52 px, groups 48 px; one divider between the products
   block and the rest; current = red text + thin left bar, no red fill. Landing pages have no drawer. */
.drawer .drawer__panel {
	gap: 0;
	width: min(calc(100% - 40px), 380px);
	padding: 0;
	overflow: hidden;
}

.drawer .drawer__head {
	flex: none;
	min-height: 60px;
	padding: 0 8px 0 20px;
	border-bottom: 1px solid var(--color-border);
}

.drawer .drawer__head .icon-btn {
	width: 44px;
	height: 44px;
}

.drawer .drawer__nav {
	flex: 1 1 auto;
	min-height: 0;
	padding: 4px 0 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.dnav,
.dnav__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dnav__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 52px;
	padding: 0 8px 0 20px;
	border: 0;
	background: none;
	color: var(--color-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.dnav__top:hover {
	text-decoration: none;
}

.dnav__chev {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--color-muted);
}

.dnav__chev .icon {
	width: 18px;
	height: 18px;
	transition: transform 0.15s ease;
}

.dnav__top[aria-expanded="true"] .dnav__chev--down .icon {
	transform: rotate(180deg);
}

.dnav__sub {
	padding: 0 0 12px;
}

.dnav__sub[hidden] {
	display: none;
}

.dnav__grp {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 0 20px 0 32px;
	color: var(--color-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
}

.dnav__grp small {
	flex: none;
	color: var(--color-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	font-variant-numeric: tabular-nums;
}

.dnav__all {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin-top: 4px;
	padding: 0 20px 0 32px;
	color: var(--color-brand-strong);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
}

.dnav__sep {
	height: 1px;
	margin: 4px 20px;
	background: var(--color-border);
}

.dnav__top.is-current,
.dnav__grp.is-current {
	color: var(--color-brand-strong);
	box-shadow: inset 3px 0 0 var(--color-brand);
}

.dnav__top.is-parent {
	color: var(--color-text);
}

.dnav__top:focus-visible,
.dnav__grp:focus-visible,
.dnav__all:focus-visible,
.drawer__cta:focus-visible {
	outline: 2px solid var(--color-steel);
	outline-offset: -2px;
}

.drawer .drawer__foot {
	flex: none;
	padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--color-border);
	background: var(--color-surface);
}

.drawer__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border-radius: 12px;
	background: var(--color-brand);
	color: var(--color-on-brand);
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
}

.drawer__cta:hover {
	background: var(--color-brand-hover);
	color: var(--color-on-brand);
	text-decoration: none;
}

.drawer .lang-switch--drawer {
	margin-top: 8px;
}

.drawer .lang-switch--drawer .lang-switch__list {
	justify-content: center;
}

.drawer .lang-switch--drawer .lang-switch__link {
	min-width: 56px;
	min-height: 44px;
}

/* Staff replies in the chat (FORM WEB-02-CHAT-POLL-CLIENT): a "Nhân viên" bubble set apart from the AI one, and a
   "Tin mới ↓" button when a reply arrives while the visitor reads further up. */
.chat-who--staff {
	color: #1b7a43;
	font-weight: 600;
}

.chat-who--staff .chat-who__n {
	color: #1b7a43;
}

.chat-m--staff {
	align-self: flex-start;
	border: 1px solid #b9e3c8;
	border-bottom-left-radius: 4px;
	background: #effaf3;
}

.chat__newmsg {
	position: absolute;
	bottom: 72px;
	left: 50%;
	z-index: 2;
	min-height: 36px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: var(--c-chat, #1b69d0);
	color: #fff;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(15, 27, 45, 0.25);
	transform: translateX(-50%);
	cursor: pointer;
}

.chat__newmsg[hidden] {
	display: none;
}

/* Chat head, owner 19/10 (WEB-02-CHAT-POLL-CLIENT batch): blue head, one-line title, light sub-line; the small
   greeting card on landing pages uses the same head and the same "Thu gọn" button (no close for good). */
.chat__t h2 {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.chat__t p {
	color: rgba(255, 255, 255, 0.88);
}

.lpm-peek {
	padding-top: 0;
	overflow: hidden;
}

/* Re-invite: a small button above the bottom bar (FORM WEB-02-LP-INVITE-PILL-TRACKING); fixed, so nothing moves. */
.lpm-pill {
	position: fixed;
	left: 50%;
	bottom: calc(80px + env(safe-area-inset-bottom));
	z-index: 41;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: max-content;
	max-width: calc(100% - 32px);
	min-height: 44px;
	padding: 9px 16px 9px 12px;
	border: 0;
	border-radius: 999px;
	background: var(--color-steel, #1b69d0);
	color: #fff;
	font: inherit;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	box-shadow: 0 8px 22px rgba(11, 31, 58, .28);
	transform: translateX(-50%);
	cursor: pointer;
}

.lpm-pill .icon {
	flex: none;
	width: 20px;
	height: 20px;
}

.lpm-pill:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

.lpm-peek__h {
	margin: 0 -12px 8px;
	padding: 4px 4px 4px 12px;
	background: var(--color-steel, #1b69d0);
	color: #fff;
}

.lpm-peek__x {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	width: auto;
	min-height: 40px;
	padding: 0 8px;
	color: #fff;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
}

.lpm-peek__x .icon {
	width: 18px;
	height: 18px;
}

/* Phones < 420 px: the full title on one line (no round icon, 14 px title, tighter "Thu gọn"). */
@media (max-width: 419.98px) {
	.chat__av {
		display: none;
	}

	.chat__head {
		gap: 6px;
		padding-left: 14px;
	}

	.chat__t h2 {
		font-size: 0.875rem;
	}

	.chat__min {
		gap: 2px;
		padding: 0 6px;
	}
}