/* Brand wordmark typeface — SELF-HOSTED (assets/fonts/manrope/), no Google Fonts request at runtime.
   Manrope ships as a variable font: Google's own CSS reuses the exact same two physical files (one per
   Unicode subset) for the 600 and 800 weight instances (verified byte-for-byte identical downloads — this
   is not a mistake), so 2 files cover both weights instead of 4. "latin" carries the ASCII wordmark
   ("VNT 39"); "vietnamese" adds the diacritics the tagline needs (both are needed — the tagline is
   Vietnamese text). Paths are relative to this file, so they keep working after a domain/host migration. */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url( "../fonts/manrope/manrope-latin.woff2" ) format( "woff2" );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url( "../fonts/manrope/manrope-vietnamese.woff2" ) format( "woff2" );
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url( "../fonts/manrope/manrope-latin.woff2" ) format( "woff2" );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url( "../fonts/manrope/manrope-vietnamese.woff2" ) format( "woff2" );
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ==========================================================================
   VNT39 HEADER (new) — desktop, 3 tiers: top bar / main header / main nav
   ==========================================================================
   Loaded only when "Bật Header VNT39 mới" is ON, and AFTER Flatsome's main
   CSS + the child style.css (see vnt39_header_enqueue()), because those two
   carry global rules (li margins, button min-height, .searchform-wrapper
   input {height:46px…} from the Customizer's custom CSS) this header has to
   beat. Everything is scoped under .vnt39-header — nothing here reaches
   Flatsome, the homepage or any other section.

   Breakpoint: >=1024px is this header; below that the Flatsome header (kept
   in the page inside .vnt39-header-legacy) is shown until the mobile header
   exists. Colours/sizes follow design-reference/header-mega-menu-mockup.webp.
   ========================================================================== */

.vnt39-header {
	--h-red-top: #a80107;   /* top bar */
	--h-red-nav: #b00208;   /* nav band */
	--h-red-dark: #7a0103;  /* "Danh mục" button */
	--h-red-btn: #e30613;   /* search button */
	--h-red-ink: #b01515;   /* wordmark */
	--h-red-ico: #c8102e;   /* quick-action icons */
	--h-text: #1f2328;
	--h-mute: #4b5563;
	display: none;
	font-family: inherit;
	color: var( --h-text );
	line-height: 1.25;
	-webkit-font-smoothing: antialiased;
}
.vnt39-header *,
.vnt39-header *::before,
.vnt39-header *::after {
	box-sizing: border-box;
}
.vnt39-header a {
	color: inherit;
	text-decoration: none;
}
.vnt39-header ul,
.vnt39-header li {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* same 1240px content edges as the page sections below, 15px gutter when narrower */
.vnt39-header__wrap {
	width: min( 1240px, calc( 100% - 30px ) );
	margin: 0 auto;
	padding: 0;
}
.vnt39-header__ico {
	flex: none;
	width: 20px;
	height: 20px;
}
/* A global rule paints every <svg> inside a <li> grey (fill #9a9a9a) and beats the SVG fill="none"
   attribute, so every header icon pins its own fill/stroke: outline icons = stroke only,
   glyph icons (social, brand) = currentColor fill. */
.vnt39-header svg.vnt39-header__ico {
	fill: none !important;
	stroke: currentColor !important;
}
.vnt39-header svg.vnt39-header__ico--fill {
	fill: currentColor !important;
	stroke: none !important;
}

@media ( min-width: 1024px ) {
	.vnt39-header {
		display: block;
	}
	.vnt39-header-legacy {
		display: none;
	}
	/* the new header owns the language UI: GTranslate's own floating widget stays out of sight (it keeps running — the selector calls its doGTranslate()) */
	body:has( .vnt39-header ) .gtranslate_wrapper {
		display: none !important;
	}
}

/* ---- tier 1: top bar ---- */
.vnt39-header__top {
	position: relative;
	/* 50, not 40 (2026-09-30 fix): must beat .vnt39-header__nav's z-index:45
	   below — these are independently-positioned SIBLINGS under the same
	   unstyled .vnt39-header (no shared stacking context), so a mere
	   z-index:60 on the language dropdown itself (.vnt39-lang__list) can
	   never lift this whole tier above nav; only this ancestor's own
	   z-index, compared directly against nav's, decides that. The dropdown
	   is tall enough (4 languages) to spatially reach into the nav band
	   below, which is what exposed this — was 40 (nav's 45 already won). */
	z-index: 50;
	background: var( --h-red-top );
	color: #fff;
	font-size: 13px;
}
.vnt39-header__top-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 38px;
}
.vnt39-header__top-left,
.vnt39-header__top-right {
	display: flex;
	align-items: center;
	min-width: 0;
}
.vnt39-header__top-left {
	gap: 10px;
}
.vnt39-header__loc {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.vnt39-header__loc .vnt39-header__ico {
	width: 15px;
	height: 15px;
}
.vnt39-header__bar {
	opacity: 0.7;
}
.vnt39-header__desc {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vnt39-header__top-right {
	flex: none;
	gap: 16px;
}
.vnt39-header .vnt39-header__lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	min-height: 0;
	margin: 0;
	padding: 0 9px;
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	border-radius: 6px;
	background: rgba( 0, 0, 0, 0.16 );
	color: #fff;
	font: inherit;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}
.vnt39-header .vnt39-header__lang:hover,
.vnt39-header .vnt39-lang.is-open .vnt39-header__lang {
	background: rgba( 0, 0, 0, 0.3 );
}
.vnt39-header__lang .vnt39-header__ico {
	width: 15px;
	height: 15px;
}
.vnt39-header__lang .vnt39-header__lang-chev {
	width: 12px;
	height: 12px;
	transition: transform 0.15s ease;
}
.vnt39-lang.is-open .vnt39-header__lang-chev {
	transform: rotate( 180deg );
}

/* language selector (reusable component — nothing here depends on where it sits) */
.vnt39-lang {
	position: relative;
}
.vnt39-lang__list {
	position: absolute;
	top: calc( 100% + 8px );
	right: 0;
	z-index: 60;
	min-width: 190px;
	margin: 0;
	padding: 6px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 28px rgba( 16, 24, 40, 0.16 );
	color: var( --h-text );
}
.vnt39-lang__list[hidden] {
	display: none;
}
.vnt39-header .vnt39-lang__opt {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 8px 10px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var( --h-text );
	font: inherit;
	font-size: 14px;
	letter-spacing: 0;
	line-height: 1.2;
	text-align: left;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}
.vnt39-header .vnt39-lang__opt:hover,
.vnt39-header .vnt39-lang__opt:focus-visible {
	background: #fdf1f1;
	outline: none;
}
.vnt39-header .vnt39-lang__opt[aria-selected="true"] {
	background: #fff5f5;
	color: var( --h-red-ink );
	font-weight: 700;
}
.vnt39-lang__flag {
	flex: none;
	width: 22px;
	height: 16px;
	border-radius: 2px;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.08 );
}
.vnt39-lang__check {
	width: 16px;
	height: 16px;
	margin-left: auto;
	visibility: hidden;
	color: var( --h-red-ink );
}
.vnt39-lang__opt[aria-selected="true"] .vnt39-lang__check {
	visibility: visible;
}
.vnt39-header__toplinks {
	display: flex;
	align-items: center;
}
.vnt39-header__toplinks li + li::before {
	content: "|";
	margin: 0 9px;
	opacity: 0.6;
}
.vnt39-header__toplinks a {
	white-space: nowrap;
}
.vnt39-header__toplinks a:hover {
	text-decoration: underline;
}
.vnt39-header__social {
	display: flex;
	align-items: center;
	gap: 12px;
}
.vnt39-header__social a {
	display: inline-flex;
}
.vnt39-header__social .vnt39-header__ico {
	width: 19px;
	height: 19px;
}
.vnt39-header__social a:hover {
	opacity: 0.8;
}

/* ---- tier 2: main header ---- */
.vnt39-header__main {
	background: #fff;
}
.vnt39-header__main-in {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-top: 12px;
	padding-bottom: 12px;
}
.vnt39-header__logo {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
}
.vnt39-header__logo-img {
	display: block;
	width: 56px;
	height: 56px;
	max-height: none;
	object-fit: contain;
}
.vnt39-header__brand {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.vnt39-header__brand-name {
	display: flex;
	align-items: baseline;
	gap: 10px;
	color: var( --h-red-ink );
	font-family: "Manrope", "Inter", "Arial", sans-serif;
	font-size: 32px;
	font-weight: 800;
	font-style: normal;
	line-height: 1;
	letter-spacing: -1.2px;
}
.vnt39-header__brand-tag {
	color: var( --h-red-ink );
	font-family: "Manrope", "Inter", "Arial", sans-serif;
	font-size: 11px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.1;
	letter-spacing: 0.2px;
	white-space: nowrap;
}

/* search — beats the Customizer's `.searchform-wrapper input` / `.searchform .button.icon` rules */
.vnt39-header__search {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 660px;
}
.vnt39-header .vnt39-header__search .searchform-wrapper {
	margin: 0;
}
.vnt39-header .vnt39-header__form {
	position: relative;
	display: flex;
	align-items: center;
	height: 46px;
	margin: 0;
	padding-left: 14px;
	border: 1px solid #e3e5e8;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.06 );
}
.vnt39-header .vnt39-header__form:focus-within {
	border-color: var( --h-red-btn );
}
.vnt39-header .vnt39-header__search-ico {
	width: 20px;
	height: 20px;
	color: var( --h-red-btn );
}
.vnt39-header .vnt39-header__form .vnt39-header__search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var( --h-text );
	font-size: 14px;
	font-style: normal;
	text-overflow: ellipsis;
}
.vnt39-header .vnt39-header__form .vnt39-header__search-input::placeholder {
	color: #6b7280;
	opacity: 1;
}
.vnt39-header .vnt39-header__form .vnt39-header__search-btn {
	flex: none;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0 26px;
	border: 0;
	border-radius: 0 9px 9px 0;
	background: var( --h-red-btn );
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}
.vnt39-header .vnt39-header__form .vnt39-header__search-btn:hover {
	background: #c30510;
}

/* quick actions */
.vnt39-header__quick {
	display: flex;
	flex: none;
	align-items: flex-start;
	gap: 6px;
}
.vnt39-header__q-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 68px;
	padding: 2px 5px;
	color: var( --h-mute );
	text-align: center;
}
/**
 * Hover color fix (2026-09-30): each quick-action label is really ONE
 * logical link whose text happens to render as two separate spans
 * (.q-l1/.q-l2, e.g. "Cửa hàng" / "Tokyo" for the same "Cửa hàng Tokyo"
 * action) — the old rule only targeted `.q-l1`, so on hover line 1 turned
 * red while line 2 stayed the base --h-mute color. Fixed architecturally:
 * the hover/focus color is set ONCE on the link wrapper, and both label
 * lines simply inherit it — no per-line hover rule to keep in sync.
 */
.vnt39-header__q-link:hover,
.vnt39-header__q-link:focus-visible {
	color: var( --h-red-ico );
}
.vnt39-header__q-l1,
.vnt39-header__q-l2 {
	color: inherit;
}
.vnt39-header__q-ico {
	position: relative;
	display: inline-flex;
	color: var( --h-red-ico );
}
.vnt39-header__q-ico .vnt39-header__ico {
	width: 30px;
	height: 30px;
	stroke-width: 1.6;
}
.vnt39-header__badge {
	position: absolute;
	top: -6px;
	right: -9px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var( --h-red-btn );
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}
.vnt39-header__q-txt {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
}
.vnt39-header__q--cart .vnt39-header__q-l2,
.vnt39-header__q--cart .vnt39-header__q-l2 .cart-price {
	color: var( --h-red-ico );
	font-weight: 700;
}
.vnt39-header__q-l2 .woocommerce-Price-currencySymbol {
	margin-left: 2px;
}

/* ---- tier 3: main navigation ---- */
.vnt39-header__nav {
	background: var( --h-red-nav );
	color: #fff;
}
.vnt39-header__nav-in {
	display: flex;
	align-items: center;
	height: 52px;
}
.vnt39-header__menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 8px;
}
.vnt39-header__mi > a,
.vnt39-header__catalog {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
}
/**
 * Premium hover polish (2026-09-30). The <a> normally spans the FULL
 * 52px nav band with zero margin (was `height:52px` alone) — lifting that
 * flush-to-the-edge box with translateY(-2px) on hover would poke its
 * pill background above the red band's own top edge. Shrinking to 44px
 * and centering with `margin: 4px 0` (4 + 44 + 4 = 52, same total
 * footprint, nav band height unchanged) reserves exactly enough breathing
 * room for the 2px lift to stay inside the band.
 *
 * The hover background is a WIDER pill than the tight icon+text box
 * (10px extra each side), drawn on an absolutely-positioned `::before`
 * rather than via real padding — an earlier version used
 * `padding:0 10px` + a cancelling `margin:0 -10px`, but padding always
 * grows an auto-sized inline-flex element's own rendered box (negative
 * margin only changes how it overlaps neighbors, it does not shrink that
 * box back down), which was measured live to shift every following item
 * and the whole menu's total width. A `position:absolute; inset:0 -10px`
 * pseudo-element carries none of that: it's out of normal flow, so it
 * can never move a sibling or widen the menu, while `transform` on the
 * `<a>` ITSELF still lifts the pseudo along with the icon+text as one
 * single unit (never animated independently, per spec). `border-radius:
 * 8px` reuses this same file's own precedent (.vnt39-mega__cat, the mega
 * menu's left category list) rather than inventing a new radius.
 */
.vnt39-header__mi > a {
	position: relative;
	z-index: 0;
	height: 44px;
	margin: 4px 0;
	transition: color 0.18s ease, transform 0.18s ease;
}
.vnt39-header__mi > a::before {
	content: "";
	position: absolute;
	inset: 0 -10px;
	z-index: -1;
	border-radius: 8px;
	pointer-events: none;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.vnt39-header__mi > a:hover,
.vnt39-header__mi > a:focus-visible {
	color: #fff;
	transform: translateY( -2px );
}
.vnt39-header__mi > a:hover::before,
.vnt39-header__mi > a:focus-visible::before {
	background: rgba( 255, 255, 255, 0.1 );
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.12 );
}
/* Nav icons: one white outline family, no fill, no background of their own.
   Some global rule paints every <svg> inside a <li> with a grey fill, and the
   SVG fill="none" attribute loses to any CSS rule — so fill/stroke are pinned here. */
.vnt39-header__nav svg.vnt39-header__nav-ico {
	flex: none;
	width: 22px;
	height: 22px;
	color: #fff;
	background: transparent !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 1;
}
.vnt39-header .vnt39-header__catalog {
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0 16px;
	border: 1px solid rgba( 255, 135, 135, 0.55 );
	border-radius: 10px;
	background: var( --h-red-dark );
	font-family: inherit;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	/* Existing border/radius/background-darken kept exactly as-is — this
	   only adds the same lift+shadow polish the other nav items get.
	   `.vnt39-header__mi--catalog` already centers this 40px button inside
	   the 52px band (align-items:center -> 6px above/below), comfortably
	   more than the 2px lift needs, so no height/margin change required
	   here unlike the plain nav items. */
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.vnt39-header .vnt39-header__catalog:hover,
.vnt39-header .vnt39-header__catalog:focus-visible {
	transform: translateY( -2px );
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.12 );
}
.vnt39-header .vnt39-header__catalog:hover {
	background: #690003;
}
.vnt39-header__catalog .vnt39-header__catalog-chev {
	width: 16px;
	height: 16px;
}

/* between 1024 and 1199 the nav + quick actions get tighter, icons in the nav drop out */
@media ( min-width: 1024px ) and ( max-width: 1199px ) {
	.vnt39-header__main-in {
		gap: 16px;
	}
	.vnt39-header__brand-name {
		gap: 8px;
		font-size: 28px;
	}

	.vnt39-header__logo-img {
		width: 50px;
		height: 50px;
	}
	.vnt39-header__quick {
		gap: 0;
	}
	.vnt39-header__q-link {
		min-width: 64px;
		padding: 2px 4px;
	}
	.vnt39-header__q-txt {
		font-size: 12px;
	}
	.vnt39-header__mi > a {
		font-size: 14px;
	}
	.vnt39-header .vnt39-header__catalog {
		padding: 0 12px;
		font-size: 14px;
	}
	.vnt39-header__top-in {
		gap: 10px;
	}
	.vnt39-header__top-right {
		gap: 12px;
	}
}

/* The nav row is capped at 1240px. 10 items needed that with icons; with the 2 storefront items (Dịch vụ sửa chữa, Linh kiện) 12 items need
   ~1480px with icons, so on desktop the icons drop out (labels only, ~1125px) and nothing overflows. Between 1024 and 1199 the type is a notch
   smaller so the 12 labels still fit the narrower row. */
@media ( min-width: 1024px ) {
	.vnt39-header__mi > a {
		gap: 0;
	}
	.vnt39-header__mi > a .vnt39-header__ico {
		display: none;
	}
}
@media ( min-width: 1024px ) and ( max-width: 1199px ) {
	.vnt39-header__mi > a,
	.vnt39-header__catalog {
		font-size: 13.5px;
	}
	.vnt39-header__menu {
		gap: 4px;
	}
}
@media ( min-width: 1024px ) and ( max-width: 1099px ) {
	.vnt39-header__mi > a,
	.vnt39-header__catalog {
		font-size: 13px;
	}
	.vnt39-header__menu {
		gap: 2px;
	}
}

/* ==========================================================================
   MEGA MENU ("Danh mục") — desktop only, opened by assets/js/header.js
   Frame: LEFT 20% (categories) | CENTER 55% (panel of the active category) |
   RIGHT 25% (banner of the active category + shared quick utilities).
   Every panel of a column sits in ONE grid cell (stacked, only the active one
   visible), so the frame is as tall as the tallest panel and switching
   category never changes its size or position. Compact by design (~350px):
   it is a navigation layer, the page underneath stays visible.
   ========================================================================== */
.vnt39-header__nav {
	position: relative;
	z-index: 45;
}
.vnt39-header__mi--catalog {
	align-self: stretch;
	display: flex;
	align-items: center;
}
.vnt39-header__catalog .vnt39-header__catalog-chev {
	transition: transform 0.15s ease;
}
.vnt39-header .vnt39-header__catalog[aria-expanded="true"] {
	background: #690003;
}
.vnt39-header__catalog[aria-expanded="true"] .vnt39-header__catalog-chev {
	transform: rotate( 180deg );
}

.vnt39-mega {
	position: absolute;
	z-index: 60;
	top: 100%;
	left: 0;
	right: 0;
	width: min( 1240px, calc( 100% - 30px ) );
	margin: 0 auto;
	background: #fff;
	color: var( --h-text );
	border: 1px solid #ecd5d5;
	border-top: 0;
	border-radius: 0 0 14px 14px;
	box-shadow: 0 16px 34px rgba( 70, 10, 10, 0.16 );
	opacity: 0;
	visibility: hidden;
	pointer-events: none; /* CLICK-THROUGH FIX (2026-09-27) — .vnt39-mega__center.is-active (the default-active category panel) sets its own visibility:visible, which overrides this wrapper's visibility:hidden and leaves its links hit-testable even while the dropdown is closed (opacity:0 alone does not block clicks). Since this dropdown becomes position:fixed-like under the sticky/stuck header, that invisible-but-clickable panel sat on top of whatever section scrolled into view right below the header — e.g. the Autumn Deal / Laptop AI tabs — hijacking real clicks into a mega-menu link instead of the tab. Blocking pointer-events while closed (re-enabled by .is-open below) fixes this with no visual/behavioral change to the menu itself. */
	transform: translateY( 6px );
	transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s, content-visibility 0s linear 0.12s;
	/* 2026-10-20 — closed = rendering skipped: ~1,300 elements no longer styled/laid out on every page load (Lighthouse: Style & Layout
	   was the 2nd biggest main-thread cost). The links stay in the HTML (SEO, crawl) — only painting work is skipped until it opens.
	   allow-discrete keeps the 0.12s fade-out before the content is skipped again. */
	content-visibility: hidden;
	transition-behavior: allow-discrete;
}
.vnt39-mega.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
	content-visibility: visible;
}
.vnt39-mega__inner {
	display: grid;
	grid-template-columns: 20% 55% 25%;
}

/* -- left: categories (10 compact rows that share the frame height) -- */
.vnt39-mega__cats {
	display: flex;
	flex-direction: column;
	padding: 8px 10px;
	border-right: 1px solid #f3e4e4;
}
.vnt39-mega__cats li {
	flex: 1 1 0;
	min-height: 33px;
	max-height: 40px;
}
.vnt39-header .vnt39-mega__cat {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 0 8px 0 12px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: #26292e;
}
.vnt39-header .vnt39-mega__cat:hover,
.vnt39-header .vnt39-mega__cat.is-active {
	background: #fdf1f1;
	color: var( --h-red-ink );
}
.vnt39-mega__cat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	bottom: 7px;
	width: 3px;
	border-radius: 3px;
	background: var( --h-red-ink );
	opacity: 0;
}
.vnt39-mega__cat.is-active::before {
	opacity: 1;
}
.vnt39-header .vnt39-mega__cat .vnt39-mega__ico {
	width: 20px;
	height: 20px;
}
.vnt39-mega__cat-name {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vnt39-header .vnt39-mega__cat .vnt39-mega__chev {
	width: 14px;
	height: 14px;
	transform: rotate( -90deg );
	opacity: 0.5;
}
.vnt39-mega__cat.is-active .vnt39-mega__chev {
	opacity: 1;
}

/* -- centre: panel of the active category -- */
.vnt39-mega__centers {
	display: grid;
	padding: 12px 14px;
}
.vnt39-mega__center {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
}
.vnt39-mega__center.is-active {
	opacity: 1;
	visibility: visible;
}
.vnt39-mega__head {
	position: relative; /* containing block for the ::before readability scrim below — no top/left/right/bottom set, so this alone moves/resizes nothing */
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 80px;
	padding: 10px 18px;
	border-radius: 12px;
	background: linear-gradient( 90deg, #fff 0%, #fff4f3 55%, #ffe5e2 100% );
	/* Category Banner (2026-10-01 rework): when category_banner_image_id is
	   set, PHP adds a data-bg attribute here and header.js's loadImages()
	   turns it into background-image on first reveal (same lazy contract as
	   every other mega menu image) — this box's own size/padding/content
	   never change, the image just replaces the gradient behind them.
	   background-size/position apply harmlessly to the gradient too (a
	   gradient fills its box regardless), so no image = unchanged default. */
	background-size: cover;
	background-position: center right;
	border: 1px solid #f7e3e1;
}
/* Readability scrim (2026-10-01) — a background image can put busy detail
   right behind the title/subtitle on the left; this sits ABOVE the
   background image/gradient (z-index:0, above the background paint which
   has no stacking order of its own) but BELOW the icon/text (z-index:2 on
   those, see below), so it never touches layout/size/padding, only paints
   a soft white wash under the text and fades to fully transparent well
   before the right-hand artwork area (inherited border-radius so it never
   pokes past the box's own rounded corners). Same rule for EVERY category
   — nothing here is conditional on whether a banner image is actually set;
   left-to-right here is already white-to-pale-pink by default (see the
   gradient above), so on an unconfigured category this just layers white
   on near-white and stays invisible. Deliberately NOT applied to the Offer
   Card (.vnt39-mega__banner, 900x540) — separate component. */
.vnt39-mega__head::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba( 255, 255, 255, 0.86 ) 0%,
		rgba( 255, 255, 255, 0.78 ) 25%,
		rgba( 255, 255, 255, 0.38 ) 48%,
		rgba( 255, 255, 255, 0 ) 70%
	);
}
.vnt39-mega__hico {
	position: relative;
	z-index: 2;
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #f2d3d0;
	color: var( --h-red-ico );
}
.vnt39-mega__htxt {
	position: relative;
	z-index: 2;
}
.vnt39-header .vnt39-mega__hico .vnt39-mega__ico {
	width: 24px;
	height: 24px;
}
.vnt39-mega__title {
	margin: 0;
	font-size: 25px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	color: #1d1d1f;
}
.vnt39-mega__sub {
	margin: 2px 0 0;
	font-size: 14px;
	line-height: 1.3;
	color: var( --h-mute );
}
.vnt39-mega__groups {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	grid-template-rows: auto 1fr;
	gap: 0 14px;
}
/* each group spans the title row + the link row of the shared grid, so the titles of all groups line up */
.vnt39-mega__group {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	align-content: start;
	min-width: 0;
}
.vnt39-mega__gtitle {
	margin: 0 0 3px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: #1d1d1f;
}
.vnt39-mega__gtitle::after {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	margin-top: 6px;
	border-radius: 2px;
	background: var( --h-red-ink );
	opacity: 0.45;
}
.vnt39-mega__links {
	padding-top: 2px;
}
.vnt39-header .vnt39-mega__links a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 0;
	font-size: 14px;
	line-height: 1.3;
	color: #33373d;
}
.vnt39-header .vnt39-mega__links a:hover {
	color: var( --h-red-ink );
}
.vnt39-mega__badge {
	flex: none;
	padding: 2px 5px;
	border-radius: 999px;
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1;
}
.vnt39-mega__badge--new {
	background: #fde4e4;
	color: var( --h-red-ink );
}
.vnt39-mega__badge--hot {
	background: var( --h-red-ink );
	color: #fff;
}
.vnt39-mega__badge--sale {
	background: #ffefcf;
	color: #9a5200;
}
/* "Xem tất cả …" closes the panel at its bottom edge (uses the category's own URL) */
.vnt39-header .vnt39-mega__all {
	display: inline-flex;
	align-items: center;
	align-self: stretch;
	gap: 2px;
	margin-top: auto;
	padding-top: 9px;
	border-top: 1px solid #f4e6e6;
	font-size: 13.5px;
	font-weight: 700;
	color: var( --h-red-ink );
}
.vnt39-header .vnt39-mega__all:hover {
	text-decoration: underline;
}
.vnt39-header .vnt39-mega__all .vnt39-mega__arrow {
	width: 15px;
	height: 15px;
	transform: rotate( -90deg );
}

/* -- centre content of the storefront items (inc/header-mega-panels.php): heading + grid of [icon] name / small text, optional chip row -- */
.vnt39-mega__pick {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
.vnt39-mega__phead {
	margin: -4px 0 0;
	font-size: 13px;
	line-height: 1.35;
	color: var( --h-mute );
}
.vnt39-mega__pick .vnt39-mega__gtitle--chips {
	margin-top: 6px;
}
.vnt39-mega__pgrid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.vnt39-mega__pick--repair .vnt39-mega__pgrid,
.vnt39-mega__pick--actions .vnt39-mega__pgrid {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.vnt39-header .vnt39-mega__pitem {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 9px 11px;
	border: 1px solid #f1e3e3;
	border-radius: 10px;
	background: #fff;
	color: #1d1d1f;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.vnt39-header .vnt39-mega__pitem:hover,
.vnt39-header .vnt39-mega__pitem:focus-visible {
	border-color: #e3b4b4;
	background: #fdf4f4;
	color: var( --h-red-ink );
}
.vnt39-mega__pico {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: #fbeeee;
	color: var( --h-red-ink );
	overflow: hidden;
}
.vnt39-mega__pico img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.vnt39-mega__pico svg {
	width: 20px;
	height: 20px;
}
.vnt39-mega__ptxt {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.vnt39-mega__pname {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.vnt39-mega__psub {
	font-size: 12px;
	line-height: 1.3;
	color: var( --h-mute );
}
.vnt39-mega__pchips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.vnt39-header .vnt39-mega__pchips a {
	display: inline-flex;
	align-items: center;
	padding: 6px 13px;
	border: 1px solid #ecd9d9;
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: #33373d;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.vnt39-header .vnt39-mega__pchips a:hover,
.vnt39-header .vnt39-mega__pchips a:focus-visible {
	border-color: #e3b4b4;
	background: #fdf4f4;
	color: var( --h-red-ink );
}
/* panels with only a couple of rows (products, support): roomier tiles so the centre is not left mostly empty */
.vnt39-mega__pick--device .vnt39-mega__pitem,
.vnt39-mega__pick--actions .vnt39-mega__pitem {
	min-height: 86px;
	padding: 14px 16px;
	gap: 14px;
}
.vnt39-mega__pick--device .vnt39-mega__pico,
.vnt39-mega__pick--actions .vnt39-mega__pico {
	width: 48px;
	height: 48px;
	border-radius: 12px;
}
.vnt39-mega__pick--device .vnt39-mega__pico svg,
.vnt39-mega__pick--actions .vnt39-mega__pico svg {
	width: 24px;
	height: 24px;
}
.vnt39-mega__pick--device .vnt39-mega__pname,
.vnt39-mega__pick--actions .vnt39-mega__pname {
	font-size: 15px;
}
@media ( min-width: 1024px ) and ( max-width: 1279px ) {
	.vnt39-mega__pgrid { gap: 6px; }
	.vnt39-header .vnt39-mega__pitem { gap: 8px; padding: 8px 9px; }
	.vnt39-mega__pico { width: 34px; height: 34px; }
	.vnt39-mega__pname { font-size: 13px; }
}

/* -- right: ONE promotional banner + compact quick links -- */
.vnt39-mega__side {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 14px 10px 2px;
	min-width: 0;
}
.vnt39-mega__banners {
	display: grid;
}
.vnt39-mega__banner {
	grid-area: 1 / 1;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: 176px;
	border-radius: 13px;
	background:
		radial-gradient( circle at 92% 12%, rgba( 255, 255, 255, 0.8 ) 0, rgba( 255, 255, 255, 0 ) 38% ),
		linear-gradient( 135deg, #fff5f3 0%, #ffd9d3 58%, #f4a59c 135% );
	opacity: 0;
	visibility: hidden;
}
.vnt39-mega__banner.is-active {
	opacity: 1;
	visibility: visible;
}
/* fallback (no image): a big faint outline of the category icon in the corner */
.vnt39-mega__bmark {
	position: absolute;
	z-index: -1;
	right: -14px;
	bottom: -18px;
	color: rgba( 176, 21, 21, 0.13 );
}
.vnt39-header .vnt39-mega__bmark .vnt39-mega__ico {
	width: 132px;
	height: 132px;
	stroke-width: 1.3;
}
/* with an image: the picture IS the banner (full-bleed cover), text sits on a white→transparent wash */
.vnt39-mega__bimg {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: right center;
}
.vnt39-mega__banner.has-img::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient( 90deg, rgba( 255, 255, 255, 0.95 ) 0%, rgba( 255, 255, 255, 0.82 ) 42%, rgba( 255, 255, 255, 0 ) 82% );
}
.vnt39-mega__btext {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	height: 100%;
	padding: 12px 14px;
}
.vnt39-mega__banner.has-img .vnt39-mega__btext {
	max-width: 74%;
}
.vnt39-mega__tag {
	padding: 3px 8px;
	border-radius: 6px;
	background: var( --h-red-ink );
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.1;
}
.vnt39-mega__btitle {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.15;
	color: var( --h-red-ink );
}
.vnt39-mega__bullets {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 12px;
	line-height: 1.25;
	color: #33373d;
}
.vnt39-mega__bullets li {
	display: flex;
	align-items: flex-start;
	gap: 5px;
}
.vnt39-header .vnt39-mega__bullets .vnt39-mega__tick {
	width: 13px;
	height: 13px;
	margin-top: 1px;
	color: var( --h-red-btn );
	stroke-width: 2.6;
}
.vnt39-header .vnt39-mega__cta {
	display: inline-flex;
	align-items: center;
	margin-top: auto;
	padding: 7px 14px;
	border-radius: 999px;
	background: var( --h-red-btn );
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
}
.vnt39-header .vnt39-mega__cta:hover {
	background: #c40510;
}
.vnt39-mega__utitle {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: #1d1d1f;
}
.vnt39-mega__ulist {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 6px;
}
.vnt39-header .vnt39-mega__ulist a,
.vnt39-header .vnt39-mega__ulist .vnt39-util-static {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 4px 6px;
	border: 1px solid #f1e4e4;
	border-radius: 9px;
	background: #fff;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.2;
	color: #33373d;
}
.vnt39-header .vnt39-mega__ulist a:hover {
	border-color: #e9b9b9;
	background: #fff6f6;
	color: var( --h-red-ink );
}
.vnt39-header .vnt39-mega__ulist .vnt39-mega__uico {
	flex: none;
	width: 18px;
	height: 18px;
	color: var( --h-red-ico );
}

/* 1024–1279: same three columns, a little tighter */
@media ( min-width: 1024px ) and ( max-width: 1279px ) {
	.vnt39-header .vnt39-mega__cat {
		gap: 8px;
		padding: 0 6px 0 10px;
		font-size: 14px;
	}
	.vnt39-mega__centers {
		padding: 10px 12px;
	}
	.vnt39-mega__head {
		gap: 10px;
		padding: 8px 12px;
	}
	.vnt39-mega__hico {
		width: 38px;
		height: 38px;
	}
	.vnt39-mega__title {
		font-size: 22px;
	}
	.vnt39-mega__sub {
		font-size: 13px;
	}
	.vnt39-mega__groups {
		gap: 0 10px;
	}
	.vnt39-header .vnt39-mega__links a {
		font-size: 13px;
	}
	.vnt39-mega__gtitle {
		font-size: 14px;
	}
	.vnt39-mega__side {
		padding-right: 10px;
	}
	.vnt39-mega__btitle {
		font-size: 17px;
	}
	.vnt39-mega__btext {
		padding: 10px 12px;
	}
	.vnt39-mega__banner.has-img .vnt39-mega__btext {
		max-width: 82%;
	}
	.vnt39-header .vnt39-mega__ulist a,
	.vnt39-header .vnt39-mega__ulist .vnt39-util-static {
		gap: 5px;
		padding: 4px 6px;
		font-size: 11.5px;
	}
}
@media ( max-width: 1023px ) {
	.vnt39-mega {
		display: none;
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.vnt39-mega,
	.vnt39-header__catalog .vnt39-header__catalog-chev {
		transition: none;
	}
}

/* ==========================================================================
   MOBILE / TABLET HEADER (< 1024px)  +  off-canvas drawer
   Everything above (desktop header + mega menu, >= 1024px) is untouched: the
   rules below either live inside max-width:1023px or only hide the mobile
   roots on desktop. 1024px = desktop, 1023px = mobile.
   The two mobile roots reuse the `.vnt39-header` class for its tokens and
   resets, so the language component / SVG pins work unchanged.
   ========================================================================== */
@media ( min-width: 1024px ) {
	.vnt39-header.vnt39-mheader,
	.vnt39-header.vnt39-mdrawer-root {
		display: none;
	}
}
@media ( max-width: 1023px ) {
	/* Flatsome's own header stays in the DOM (its cart popup / login lightbox are reused) but is never shown while the new header is on */
	.vnt39-header-legacy {
		display: none;
	}
	body:has( .vnt39-header ) .gtranslate_wrapper {
		display: none !important;
	}
	.vnt39-header.vnt39-mheader,
	.vnt39-header.vnt39-mdrawer-root {
		display: block;
	}
	html.vnt39-drawer-open,
	html.vnt39-drawer-open body {
		overflow: hidden;
	}

	/* -- row 1: location + language -- */
	.vnt39-mheader {
		background: #fff;
		border-bottom: 1px solid #f0dcdc;
	}
	.vnt39-mheader__top {
		position: relative;
		z-index: 40; /* the language dropdown drops over the rows below */
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		height: 34px;
		padding: 0 12px;
		background: var( --h-red-top );
		color: #fff;
		font-size: 12.5px;
	}
	.vnt39-mheader__loc {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		min-width: 0;
		white-space: nowrap;
	}
	.vnt39-mheader__loc > span {
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.vnt39-header .vnt39-mheader__loc .vnt39-header__ico {
		width: 14px;
		height: 14px;
	}
	.vnt39-header .vnt39-mheader__top .vnt39-header__lang {
		height: 24px;
		padding: 0 8px;
		font-size: 12.5px;
	}
	.vnt39-header .vnt39-mheader__top .vnt39-header__lang .vnt39-header__ico {
		width: 14px;
		height: 14px;
	}

	/* -- row 2: burger, logo, account, cart -- */
	.vnt39-mheader__main {
		display: flex;
		align-items: center;
		gap: 8px;
		height: 54px;
		padding: 0 8px 0 10px;
		background: #fff;
	}
	.vnt39-header .vnt39-mheader__ico {
		flex: none;
		width: 24px;
		height: 24px;
		stroke-width: 1.7;
	}
	.vnt39-header .vnt39-mheader__burger {
		flex: none;
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 1px solid #f0d3d3;
		border-radius: 10px;
		background: #fff;
		box-shadow: none;
		color: var( --h-red-ink );
		cursor: pointer;
	}
	.vnt39-mheader__logo {
		display: flex;
		align-items: center;
		gap: 7px;
		min-width: 0;
		margin-right: auto;
	}
	.vnt39-header .vnt39-mheader__logo .vnt39-header__logo-img {
		width: 36px;
		height: 36px;
		max-height: none;
		object-fit: contain;
	}
	.vnt39-mheader__brand {
		color: var( --h-red-ink );
		font-size: 22px;
		font-weight: 800;
		line-height: 1;
		letter-spacing: 0.01em;
	}
	.vnt39-mheader__tools {
		display: flex;
		flex: none;
		align-items: center;
	}
	.vnt39-header .vnt39-mheader__tool {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		color: var( --h-red-ico );
	}
	.vnt39-mheader__toolico {
		position: relative;
		display: inline-flex;
	}
	.vnt39-mheader__toolico .vnt39-header__badge {
		top: -6px;
		right: -9px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		font-size: 10px;
		line-height: 16px;
	}

	/* -- row 3: search (submit button lives inside the field) -- */
	.vnt39-mheader__search {
		padding: 0 12px 10px;
		background: #fff;
	}
	.vnt39-header .vnt39-mheader__form {
		position: relative;
		display: block;
		margin: 0;
	}
	.vnt39-header .vnt39-mheader__form .vnt39-mheader__input {
		display: block;
		width: 100%;
		height: 42px;
		margin: 0;
		padding: 0 48px 0 14px;
		border: 1px solid #e6cfcf;
		border-radius: 12px;
		background: #fff;
		box-shadow: none;
		color: var( --h-text );
		font-size: 16px; /* 16px: iOS Safari does not zoom the page when the field is focused */
		font-style: normal;
		text-overflow: ellipsis;
	}
	.vnt39-header .vnt39-mheader__form .vnt39-mheader__input::placeholder {
		color: #6b7280;
		opacity: 1;
	}
	.vnt39-header .vnt39-mheader__form .vnt39-mheader__input:focus {
		border-color: var( --h-red-btn );
		outline: none;
	}
	.vnt39-header .vnt39-mheader__submit {
		position: absolute;
		top: 4px;
		right: 4px;
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 9px;
		background: var( --h-red-btn );
		box-shadow: none;
		color: #fff;
		cursor: pointer;
	}
	.vnt39-header .vnt39-mheader__submit .vnt39-mheader__ico {
		width: 19px;
		height: 19px;
	}

	/* -- row 4: 5 quick actions across, no scrolling -- */
	.vnt39-mheader__quick {
		display: grid;
		grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
		padding: 0 6px 6px;
		background: #fff;
		border-top: 1px solid #f6eaea;
	}
	.vnt39-header .vnt39-mheader__q a {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 7px 2px 2px;
		color: #33373d;
		text-align: center;
	}
	.vnt39-mheader__q .vnt39-mheader__toolico {
		color: var( --h-red-ico );
	}
	.vnt39-header .vnt39-mheader__q .vnt39-mheader__ico {
		width: 22px;
		height: 22px;
		stroke-width: 1.6;
	}
	.vnt39-mheader__qlabel {
		max-width: 100%;
		overflow: hidden;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.2;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* -- drawer -- */
	.vnt39-mdrawer__overlay {
		position: fixed;
		inset: 0;
		z-index: 100000;
		background: rgba( 30, 8, 8, 0.48 );
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0s linear 0.2s;
	}
	.vnt39-mdrawer__overlay.is-open {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}
	.vnt39-mdrawer {
		position: fixed;
		z-index: 100001;
		top: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		width: min( 360px, 92vw );
		background: #fff;
		color: var( --h-text );
		box-shadow: 8px 0 30px rgba( 30, 8, 8, 0.25 );
		transform: translateX( -104% );
		visibility: hidden;
		transition: transform 0.22s ease, visibility 0s linear 0.22s;
	}
	.vnt39-mdrawer.is-open {
		transform: none;
		visibility: visible;
		transition-delay: 0s;
	}
	.vnt39-mdrawer__head {
		display: flex;
		flex: none;
		align-items: center;
		gap: 10px;
		padding: 10px 12px;
		border-bottom: 1px solid #f3e4e4;
	}
	.vnt39-mdrawer__logo {
		display: flex;
		flex: none;
	}
	.vnt39-header .vnt39-mdrawer__logo .vnt39-header__logo-img {
		width: 34px;
		height: 34px;
		max-height: none;
		object-fit: contain;
	}
	.vnt39-mdrawer__ttl {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}
	.vnt39-mdrawer__ttl strong {
		font-size: 17px;
		font-weight: 800;
		line-height: 1.1;
		color: var( --h-red-ink );
	}
	.vnt39-mdrawer__ttl span {
		overflow: hidden;
		font-size: 11.5px;
		line-height: 1.2;
		color: var( --h-mute );
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.vnt39-header .vnt39-mdrawer__close {
		flex: none;
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 1px solid #f0d3d3;
		border-radius: 10px;
		background: #fff;
		box-shadow: none;
		color: var( --h-red-ink );
		cursor: pointer;
	}
	.vnt39-mdrawer__body {
		flex: 1;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: 0 12px 24px;
	}
	.vnt39-mdrawer__h {
		margin: 14px 0 4px;
		font-size: 12px;
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var( --h-red-ink );
	}
	.vnt39-header .vnt39-mdrawer__cats a,
	.vnt39-header .vnt39-mdrawer__cats button {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		min-height: 44px;
		margin: 0;
		padding: 0 6px;
		border: 0;
		border-bottom: 1px solid #f6ecec;
		border-radius: 0;
		background: none;
		box-shadow: none;
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: 0;
		text-align: left;
		text-transform: none;
		color: #26292e;
		cursor: pointer;
	}
	.vnt39-mdrawer__cats li:last-child a,
	.vnt39-mdrawer__cats li:last-child button {
		border-bottom: 0;
	}
	.vnt39-header .vnt39-mdrawer__cats a:active,
	.vnt39-header .vnt39-mdrawer__cats button:active {
		background: #fdf1f1;
		color: var( --h-red-ink );
	}
	.vnt39-header .vnt39-mdrawer__cats .vnt39-mheader__ico {
		width: 22px;
		height: 22px;
		color: var( --h-red-ico );
		stroke-width: 1.6;
	}
	.vnt39-mdrawer__cats a > span,
	.vnt39-mdrawer__cats button > span {
		flex: 1;
		min-width: 0;
	}
	.vnt39-header .vnt39-mdrawer__cats .vnt39-mdrawer__chev {
		width: 15px;
		height: 15px;
		transform: rotate( -90deg );
		opacity: 0.5;
	}
	.vnt39-mdrawer__utils {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 6px;
	}
	.vnt39-header .vnt39-mdrawer__utils a,
	.vnt39-header .vnt39-mdrawer__utils .vnt39-util-static {
		display: flex;
		align-items: center;
		gap: 7px;
		min-height: 40px;
		padding: 4px 8px;
		border: 1px solid #f1e4e4;
		border-radius: 9px;
		font-size: 12.5px;
		font-weight: 600;
		line-height: 1.2;
		color: #33373d;
	}
	.vnt39-header .vnt39-mdrawer__utils .vnt39-mheader__ico {
		width: 19px;
		height: 19px;
		color: var( --h-red-ico );
		stroke-width: 1.6;
	}
	.vnt39-mdrawer__info {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 0 10px;
	}
	.vnt39-header .vnt39-mdrawer__info a {
		display: block;
		padding: 9px 4px;
		border-bottom: 1px solid #f6ecec;
		font-size: 14px;
		color: #33373d;
	}
}

/* tablet (600–1023): same architecture, wider gutters */
@media ( min-width: 600px ) and ( max-width: 1023px ) {
	.vnt39-mheader__top {
		padding: 0 20px;
	}
	.vnt39-mheader__main {
		padding: 0 14px 0 18px;
	}
	.vnt39-mheader__search {
		padding: 0 20px 12px;
	}
	.vnt39-mheader__quick {
		padding: 0 14px 8px;
	}
	.vnt39-header .vnt39-mheader__q .vnt39-mheader__ico {
		width: 24px;
		height: 24px;
	}
	.vnt39-mheader__qlabel {
		font-size: 12px;
	}
}
@media ( max-width: 480px ) {
	.vnt39-mdrawer {
		width: min( 340px, 90vw );
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.vnt39-mdrawer,
	.vnt39-mdrawer__overlay {
		transition: none;
	}
}

/* ==========================================================================
   MOBILE DRAWER — drill-down panels (generic, any depth). < 1024px only.
   Each panel is absolutely stacked in .vnt39-mdrawer__viewport: the active one
   sits at 0, panels already on the stack wait at -100% (left), everything else
   waits at +100% (right) — so "open" slides from the right and "back" from the
   left, with one transform transition. Drawer width never changes.
   ========================================================================== */
@media ( max-width: 1023px ) {
	.vnt39-mdrawer {
		height: 100vh;
		height: 100dvh;
		overflow: hidden;
	}
	.vnt39-mdrawer__viewport {
		position: relative;
		flex: 1;
		min-height: 0;
		overflow: hidden;
	}
	.vnt39-dpanel {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		background: #fff;
		transform: translateX( 100% );
		visibility: hidden;
		transition: transform 0.24s ease, visibility 0s linear 0.24s;
	}
	.vnt39-dpanel.is-before {
		transform: translateX( -100% );
	}
	.vnt39-dpanel.is-active {
		transform: none;
		visibility: visible;
		transition-delay: 0s;
	}
	.vnt39-mdrawer.no-anim .vnt39-dpanel {
		transition: none;
	}

	/* panel header: ← parent · ✕ (44px touch targets) */
	.vnt39-dpanel__head {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		min-height: 56px;
		padding: 6px 8px 6px 4px;
		border-bottom: 1px solid #f3e4e4;
	}
	.vnt39-header .vnt39-dpanel__back {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		min-width: 44px;
		max-width: calc( 100% - 56px );
		min-height: 44px;
		margin: 0;
		padding: 0 10px 0 4px;
		border: 0;
		background: none;
		box-shadow: none;
		color: var( --h-red-ink );
		font: inherit;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0;
		text-transform: none;
		cursor: pointer;
	}
	.vnt39-header .vnt39-dpanel__back .vnt39-dpanel__backico {
		flex: none;
		width: 22px;
		height: 22px;
		transform: rotate( 90deg );
	}
	.vnt39-dpanel__back span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.vnt39-dpanel__head .vnt39-mdrawer__close {
		width: 44px;
		height: 44px;
	}
	.vnt39-dpanel__title {
		padding: 14px 4px 8px;
	}
	.vnt39-dpanel__title h3,
	.vnt39-dpanel__title div:where(.vnt39-dpanel__h) {
		margin: 0;
		font-size: 22px;
		font-weight: 800;
		line-height: 1.15;
		letter-spacing: 0;
		text-transform: none;
		color: #1d1d1f;
	}
	.vnt39-dpanel__title p {
		margin: 4px 0 0;
		font-size: 13px;
		line-height: 1.35;
		color: var( --h-mute );
	}

	/* rows inside a child panel */
	.vnt39-dlist {
		display: flex;
		flex-direction: column;
	}
	.vnt39-header .vnt39-dlist .vnt39-dnode,
	.vnt39-header .vnt39-dnode--all {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		min-height: 46px;
		margin: 0;
		padding: 8px 6px;
		border: 0;
		border-bottom: 1px solid #f6ecec;
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: #26292e;
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: 0;
		text-align: left;
		text-transform: none;
		cursor: pointer;
	}
	.vnt39-dlist li:last-child .vnt39-dnode {
		border-bottom: 0;
	}
	.vnt39-header .vnt39-dlist .vnt39-dnode:active {
		background: #fdf1f1;
	}
	.vnt39-header .vnt39-dnode--all {
		min-height: 40px;
		margin: 0 0 4px;
		color: var( --h-red-ink );
		font-size: 14px;
		font-weight: 700;
	}
	.vnt39-dnode--all > span {
		flex: 1;
	}
	.vnt39-dnode__media {
		flex: none;
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		overflow: hidden;
		border-radius: 9px;
		background: #fbeeee;
	}
	.vnt39-dnode__img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
	}
	.vnt39-header .vnt39-dnode__media--ico {
		color: var( --h-red-ico );
	}
	.vnt39-header .vnt39-dnode__media--ico .vnt39-mheader__ico {
		width: 22px;
		height: 22px;
		stroke-width: 1.6;
	}
	.vnt39-dnode__text {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}
	.vnt39-dnode__label {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 3px 6px;
	}
	.vnt39-dnode__sub {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.3;
		color: var( --h-mute );
	}
	.vnt39-header .vnt39-dnode .vnt39-mdrawer__chev {
		flex: none;
		width: 15px;
		height: 15px;
		transform: rotate( -90deg );
		opacity: 0.5;
	}
	/* first-level hub (children of a category): lighter cards */
	.vnt39-dpanel--hub .vnt39-dlist {
		gap: 8px;
		padding-top: 4px;
	}
	.vnt39-header .vnt39-dpanel--hub .vnt39-dlist .vnt39-dnode {
		min-height: 58px;
		padding: 10px 12px;
		border: 1px solid #f1e4e4;
		border-radius: 12px;
		background: #fff;
	}
	.vnt39-dpanel--hub .vnt39-dlist li:last-child .vnt39-dnode {
		border-bottom: 1px solid #f1e4e4;
	}
	.vnt39-dpanel--hub .vnt39-dnode__label {
		font-weight: 700;
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.vnt39-dpanel {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Mega Menu — MORE THAN 10 categories (dynamic list). Up to 10 rows the list
   is exactly as before (rows share the frame height). Beyond that the left
   column stops driving the frame height (contain: size) and scrolls inside
   the frame the centre/right columns already make, so the mega never grows.
   -------------------------------------------------------------------------- */
.vnt39-mega__cats--scroll {
	contain: size;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #e2c4c4 transparent;
}
.vnt39-mega__cats--scroll li {
	flex: 0 0 38px;
	min-height: 38px;
	max-height: none;
}

/* ==========================================================================
   DESKTOP STICKY COMPACT NAV (>= 1024px only)
   At the top of the page the header is exactly as before. Once the red nav bar
   reaches the top of the viewport (assets/js/header.js, 4th script) ONLY that bar
   stays: it becomes position:fixed, a placeholder keeps its 52px in the flow (no
   layout jump) and the mega menu — which lives inside the nav — keeps opening
   right under it. The top bar and the logo/search/actions row scroll away.
   Flatsome's own "stuck" behaviour (it would fix the WHOLE header) is switched
   off for this header at this width. Below 1024px nothing here applies.
   ========================================================================== */
.vnt39-header__navsp,
.vnt39-header__stick {
	display: none;
}
@media ( min-width: 1024px ) {
	.header-wrapper.stuck:has( > .vnt39-header[data-vnt39-header="desktop"] ) {
		position: static;
		animation: none;
		box-shadow: none;
	}
	.vnt39-header__navsp.is-on {
		display: block;
	}
	.vnt39-header__nav.is-stuck {
		position: fixed;
		top: var( --vnt39-stick-top, 0px );
		left: 0;
		right: 0;
		z-index: 1000;
		box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.14 );
	}
	.vnt39-header__nav.is-stuck:not( .is-nologo ) .vnt39-header__stick {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		margin-right: 10px;
	}
	/* room for the icon: the items keep their order and sizes, only the minimum gap between them shrinks (8px → 4px) while it is shown */
	.vnt39-header__nav.is-stuck:not( .is-nologo ) .vnt39-header__menu {
		gap: 4px;
	}
	.vnt39-header__stick-defs {
		position: absolute;
		width: 0;
		height: 0;
		overflow: hidden;
	}
	.vnt39-header .vnt39-header__stick-img {
		display: block;
		width: 32px;
		height: 32px;
		max-width: none;
		object-fit: contain;
		filter: url( #vnt39-hd-white );
	}
}

/* --------------------------------------------------------------------------
   Anchor / scroll offset on desktop (>= 1024px).
   Flatsome measures a fully-stuck header (~185px) and uses it as the scroll
   offset (CSS scroll-padding-top + jQuery.scrollTo). Only the 52px nav bar
   stays now, so the variable it reads is pointed at the REAL nav height
   (--vnt39-nav-h, set by header.js from the nav's own offsetHeight; the
   admin-bar height is added by Flatsome's/WordPress' own rule). Below
   1024px this does not apply: Flatsome's value stays.
   -------------------------------------------------------------------------- */
@media ( min-width: 1024px ) {
	html:has( .vnt39-header[data-vnt39-header="desktop"] ) {
		--flatsome--header--sticky-height: var( --vnt39-nav-h, 52px ) !important;
	}
}

/* --------------------------------------------------------------------------
   Anchor / scroll offset on mobile / tablet (< 1024px).
   The mobile header is not sticky at all (see the block above), so nothing of
   it should be reserved above an #anchor target — only a REAL, visible
   WordPress admin bar still needs room. Flatsome still measures its old
   ~189px mobile header height and would use it as the offset; this pins the
   variable it reads to 0, so its own scroll-padding-top formula
   (sticky-height + admin-bar) collapses to just the admin-bar height (0 when
   the admin bar itself is not shown). assets/js/header.js does the same for
   Flatsome's animated jQuery.scrollTo path.
   -------------------------------------------------------------------------- */
@media ( max-width: 1023px ) {
	html:has( .vnt39-header.vnt39-mheader ) {
		--flatsome--header--sticky-height: 0px !important;
	}
}
/* Flatsome's own inline CSS (inc/functions/function-custom-css.php) force-hides the WP admin bar itself — unconditionally,
   whenever it would show at all — at its own "medium" breakpoint (max-width: 849px; a Flatsome constant, not a value we
   invented, mirrored here). WordPress' admin-bar.min.css still sets --wp-admin--admin-bar--height (32/46px) regardless of
   that, and Flatsome's scroll-padding-top formula reads it unconditionally too, so #anchor targets kept a phantom gap the
   size of a bar that is never actually on screen at these widths. This is a native, load-time CSS value (a page opened
   directly on a #hash resolves it before any script runs), so it has to be fixed in CSS, not JS. Between 850–1023px
   Flatsome does NOT hide the admin bar, so this is intentionally scoped to 849px, not the mobile header's 1023px — the
   real bar there is left alone (assets/js/header.js already reads its true, live height for the animated scroll path).
*/
@media ( max-width: 849px ) {
	html:has( .vnt39-header.vnt39-mheader ) {
		--wp-admin--admin-bar--height: 0px !important;
	}
}

/* --------------------------------------------------------------------------
   Mobile / tablet (< 1024px): the header is NOT sticky — all four rows scroll away
   with the page. Flatsome's own sticky header (header.has-sticky: after a scroll
   it adds .stuck to .header-wrapper, which fixes the WHOLE header at the top) is
   switched off for the VNT39 mobile header: the wrapper stays in the normal flow.
   -------------------------------------------------------------------------- */
@media ( max-width: 1023px ) {
	.header-wrapper.stuck:has( > .vnt39-header.vnt39-mheader ) {
		position: static;
		animation: none;
		box-shadow: none;
	}
}

/* ==========================================================================
   MEGA — "Hỗ trợ sửa chữa" cards: the icon sits directly on the white card (no tinted box), and the Quick Utilities grid keeps equal rows.
   --------------------------------------------------------------------------
   The icon tile (.vnt39-mega__pico) is the shared card-icon component. For the support/action cards (panel type "actions") it is
   transparent: no fill, no border, no shadow, no radius — only the red icon, a little larger so it stays clear next to the title.
   Scoped by panel type (not by icon), so a card added later in that panel gets the same treatment by default. The device / repair /
   part panels and the right-hand "Tiện ích nhanh" (.vnt39-mega__uico) are different components and are left as they were.
   ========================================================================== */
.vnt39-header .vnt39-mega__pick--actions .vnt39-mega__pico {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
	color: var( --h-red-ico, var( --h-red-ink ) );
}
.vnt39-header .vnt39-mega__pick--actions .vnt39-mega__pico svg {
	width: 32px;
	height: 32px;
}
.vnt39-header .vnt39-mega__pick--actions .vnt39-mega__pico img {
	object-fit: contain;
}
/* six utilities = 2 columns × 3 rows; a long label that wraps to two lines must not make one row taller than its neighbour */
.vnt39-mega__ulist {
	grid-auto-rows: 1fr;
}

/* Quick Utilities: enabled tile with no URL is shown but is not a link */
.vnt39-header .vnt39-util-static {
	cursor: default;
}

/* ---- menu M1: a drawer row that has no public page (techlib_cat) is shown as a plain label, not as a dead link ---- */
.vnt39-header .vnt39-dnode[aria-disabled="true"] { cursor: default; color: #646970; }
.vnt39-header .vnt39-dnode[aria-disabled="true"] .vnt39-dnode__label { font-weight: 500; }

/* ==========================================================================
   MAIN MENU DROPDOWN + SIDE PANEL (menu M2 final) — desktop only (>= 1024px)
   Markup: vnt39_header_nav_tree_menu_html(); behaviour: assets/js/header.js (last script). Reference: design-reference/menu-dropdown-flyout-mockup.webp
     bar item  = label link + caret button RIGHT of the label (6px gap), one rounded highlight behind both
     .vnt39-header__sub  = the box under the bar: [ .vnt39-sub__list = level-2 rows ] + [ .vnt39-sub__panel = level-3 panel of the open row ]
     the panel is flush against the list (no gap) and has the SAME top edge; it flips to the left of the list near the right viewport edge.
   Closed boxes are display:none (no tab stops, no effect on the bar's scrollWidth that the sticky nav measures).
   Both lists scroll inside their own box on low viewports (--vnt39-sub-max is set by JS from the room under the bar).
   ========================================================================== */
@media ( min-width: 1024px ) {
	:where( .vnt39-header ) button.vnt39-header__subtoggle,
	:where( .vnt39-header ) button.vnt39-header__sublink,
	:where( .vnt39-header ) button.vnt39-sub__toggle,
	:where( .vnt39-header ) button.vnt39-sub__link {
		all: unset;
	}

	/* ---- bar item with a submenu: label + caret, one highlight ---- */
	.vnt39-header__mi--sub {
		position: relative;
		display: flex;
		align-items: center;
	}
	.vnt39-header__mi--sub::before {
		content: "";
		position: absolute;
		top: 4px;
		bottom: 4px;
		left: -10px;
		right: -10px;
		border-radius: 8px;
		pointer-events: none;
		transition: background-color 0.18s ease, box-shadow 0.18s ease;
	}
	.vnt39-header__mi--sub:hover::before,
	.vnt39-header__mi--sub.is-open::before {
		background: rgba( 255, 255, 255, 0.14 );
		box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.12 );
	}
	.vnt39-header__mi--sub > a {
		z-index: 1;
	}
	.vnt39-header__mi--sub > a::before {
		display: none; /* the highlight is drawn by the item itself so it also covers the caret */
	}
	.vnt39-header__mi--sub > a:hover,
	.vnt39-header__mi--sub > a:focus-visible {
		transform: none;
	}
	.vnt39-header .vnt39-header__subtoggle {
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 12px;
		height: 44px;
		margin: 4px 0 4px 6px;
		color: #fff;
		cursor: pointer;
	}
	.vnt39-header .vnt39-header__subtoggle::after {
		content: "";
		position: absolute;
		inset: 0 -6px; /* a hit area wider than the 12px glyph, without moving anything */
	}
	.vnt39-header .vnt39-header__subtoggle:focus-visible,
	.vnt39-header .vnt39-header__sublink:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
		border-radius: 4px;
	}
	.vnt39-header svg.vnt39-header__subchev {
		flex: none;
		width: 12px;
		height: 12px;
		transform: rotate( 90deg );
		transition: transform 0.15s ease;
		fill: none !important;
		stroke: currentColor !important;
		background: transparent !important;
	}
	.vnt39-header__mi--sub.is-open .vnt39-header__subchev {
		transform: rotate( -90deg );
	}
	/* an item with a submenu but NO URL of its own: the label is itself the button (same look as a link of the bar) */
	.vnt39-header .vnt39-header__sublink {
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 44px;
		margin: 4px 0;
		font-family: inherit;
		font-size: 15px;
		font-weight: 600;
		line-height: 1;
		white-space: nowrap;
		color: #fff;
		cursor: pointer;
	}

	/* ---- the box under the bar ---- */
	.vnt39-header .vnt39-header__sub {
		display: none;
		position: absolute;
		z-index: 70;
		top: 100%;
		left: -10px;
		width: 322px;
		filter: drop-shadow( 0 16px 20px rgba( 70, 10, 10, 0.16 ) );
	}
	.vnt39-header__mi--sub.is-open > .vnt39-header__sub {
		display: block;
		animation: vnt39-sub-in 0.12s ease-out;
	}
	.vnt39-header .vnt39-header__sub.is-right {
		left: auto;
		right: -10px;
	}
	.vnt39-header .vnt39-sub__list {
		box-sizing: border-box;
		margin: 0;
		padding: 6px;
		list-style: none;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: #e2c4c4 transparent;
		background: #fff;
		border: 1px solid #ecd5d5;
		border-top: 0;
	}
	.vnt39-header .vnt39-header__sub > .vnt39-sub__list {
		max-height: var( --vnt39-sub-max, 640px );
		border-radius: 0 0 14px 14px;
	}
	.vnt39-header .vnt39-sub__panel {
		display: none;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 100%;
		width: 336px;
		min-height: 100%;
		max-height: var( --vnt39-sub-max, 640px );
		flex-direction: column;
		background: #fff;
		border: 1px solid #ecd5d5;
		border-top: 0;
		border-left: 0;
		border-radius: 0 0 14px 0;
	}
	.vnt39-header .vnt39-sub__panel.is-open {
		display: flex;
		animation: vnt39-sub-fade 0.12s ease-out;
	}
	.vnt39-header .vnt39-header__sub.is-flip > .vnt39-sub__panel {
		left: auto;
		right: 100%;
		border-left: 1px solid #ecd5d5;
		border-right: 0;
		border-radius: 0 0 0 14px;
	}
	.vnt39-header .vnt39-sub__title {
		flex: none;
		margin: 14px 14px 10px;
		padding: 1px 0 1px 12px;
		border-left: 3px solid var( --h-red-ink );
		font-size: 16px;
		font-weight: 700;
		line-height: 1.25;
		color: #1f2328;
	}
	.vnt39-header .vnt39-sub__panel > .vnt39-sub__list {
		flex: 1 1 auto;
		border: 0;
		border-top: 1px solid #f1e4e4;
		border-radius: 0;
		max-height: none;
	}

	/* ---- rows ---- */
	.vnt39-header .vnt39-sub__item {
		position: relative;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.vnt39-header .vnt39-sub__item + .vnt39-sub__item {
		border-top: 1px solid #f4eaea;
	}
	.vnt39-header .vnt39-sub__link {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		gap: 16px;
		width: 100%;
		min-height: 48px;
		padding: 0 14px;
		border-radius: 8px;
		font-family: inherit;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.3;
		color: #26292e;
		text-decoration: none;
		text-align: left;
		cursor: pointer;
	}
	.vnt39-header .vnt39-sub__item.has-sub > .vnt39-sub__link {
		padding-right: 44px;
	}
	.vnt39-header .vnt39-sub__label {
		flex: 1 1 auto;
		min-width: 0;
	}
	.vnt39-header svg.vnt39-sub__ico {
		flex: none;
		width: 22px;
		height: 22px;
		color: #3b3f46;
		fill: none !important;
		stroke: currentColor !important;
		background: transparent !important;
	}
	.vnt39-header .vnt39-sub__panel svg.vnt39-sub__ico {
		color: #2563eb;
	}
	.vnt39-header .vnt39-sub__panel svg.vnt39-sub__ico--mic {
		color: #7c3aed;
	}
	.vnt39-header svg.vnt39-sub__chev {
		flex: none;
		width: 14px;
		height: 14px;
		color: #7b8088;
		fill: none !important;
		stroke: currentColor !important;
		background: transparent !important;
	}
	.vnt39-header .vnt39-sub__link:hover,
	.vnt39-header .vnt39-sub__link:focus-visible,
	.vnt39-header .vnt39-sub__item.is-open > .vnt39-sub__link {
		background: #fdf1f1;
		color: var( --h-red-ink );
	}
	.vnt39-header .vnt39-sub__link:hover svg.vnt39-sub__ico,
	.vnt39-header .vnt39-sub__link:focus-visible svg.vnt39-sub__ico,
	.vnt39-header .vnt39-sub__item.is-open > .vnt39-sub__link svg.vnt39-sub__ico,
	.vnt39-header .vnt39-sub__link:hover svg.vnt39-sub__chev,
	.vnt39-header .vnt39-sub__item.is-open > .vnt39-sub__toggle svg.vnt39-sub__chev {
		color: var( --h-red-ink );
	}
	.vnt39-header .vnt39-sub__panel .vnt39-sub__link:hover svg.vnt39-sub__ico {
		color: #2563eb;
	}
	.vnt39-header .vnt39-sub__panel .vnt39-sub__link:hover svg.vnt39-sub__ico--mic {
		color: #7c3aed;
	}
	.vnt39-header .vnt39-sub__link:focus-visible,
	.vnt39-header .vnt39-sub__toggle:focus-visible {
		outline: 2px solid var( --h-red-ink );
		outline-offset: -2px;
	}
	.vnt39-header .vnt39-sub__toggle {
		box-sizing: border-box;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		border-radius: 0 8px 8px 0;
		color: #7b8088;
		cursor: pointer;
	}
}
@media ( min-width: 1024px ) and ( max-width: 1199px ) {
	.vnt39-header .vnt39-header__sublink {
		font-size: 13.5px;
	}
}
@media ( min-width: 1024px ) and ( max-width: 1099px ) {
	.vnt39-header .vnt39-header__sublink {
		font-size: 13px;
	}
}
@keyframes vnt39-sub-in {
	from { opacity: 0; transform: translateY( 4px ); }
	to { opacity: 1; transform: none; }
}
@keyframes vnt39-sub-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
/* The bar is full between 1024 and ~1240px (11 labels + 5 carets). The row keeps ONE line without touching the font size or the labels:
   the ☰ glyph of the "Danh mục" button steps out (label + chevron stay), the caret gap goes 6 -> 5px and, from 1200px up (15px labels), the
   minimum gap between items 8 -> 6px (the rounded highlights overlap anyway). Measured: 0px overflow at 1024 / 1100 / 1200 / 1220 / 1280 / 1366. */
@media ( min-width: 1024px ) and ( max-width: 1239px ) {
	.vnt39-header .vnt39-header__catalog > .vnt39-header__nav-ico {
		display: none;
	}
	.vnt39-header .vnt39-header__subtoggle {
		margin-left: 5px;
	}
	.vnt39-header .vnt39-header__sublink {
		gap: 5px;
	}
}
@media ( min-width: 1200px ) and ( max-width: 1239px ) {
	.vnt39-header .vnt39-header__menu {
		gap: 6px;
	}
}

/* Mega — a column with more than 8 links (the Thư viện kỹ thuật source lists every Series) scrolls INSIDE itself: its height is capped at 8 single-line rows
   (8 × 28.1px = 225px, measured), so the group grid row — and the mega — keeps the height it always had. No horizontal bar, wheel stays inside the column. */
.vnt39-header .vnt39-mega__links--scroll {
	max-height: 225px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #d5d9e2 transparent;
	padding-right: 6px;
}
.vnt39-header .vnt39-mega__links--scroll:focus-visible {
	outline: 2px solid var( --h-red-ink );
	outline-offset: 2px;
	border-radius: 4px;
}
.vnt39-header .vnt39-mega__links--scroll::-webkit-scrollbar {
	width: 6px;
}
.vnt39-header .vnt39-mega__links--scroll::-webkit-scrollbar-thumb {
	background: #d5d9e2;
	border-radius: 6px;
}

/* 2026-10-19 — 1024–1199px: the 12 labels only fit with a 2–4px gap, so neighbouring labels read as one («Bảng giá sửa chữa Linh
 * kiện»). A thin divider in the gap marks where each item starts; no width, font or label changes, so the row still fits. */
@media ( min-width: 1024px ) and ( max-width: 1199px ) {
	.vnt39-header__menu > .vnt39-header__mi:not(.vnt39-header__mi--sub):not(.vnt39-header__mi--catalog) { position: relative; } /* --sub / --catalog are already positioned */
	.vnt39-header__menu > .vnt39-header__mi + .vnt39-header__mi::after { content: ""; position: absolute; left: -2px; top: 50%; width: 1px; height: 16px; margin-top: -8px; background: rgba( 255, 255, 255, 0.35 ); pointer-events: none; }
}

/* 2026-10-20 — 12 entries in the bar (owner: «Dịch vụ sửa chữa» and «Bảng giá sửa chữa» are two separate entries). The row was tuned for 11 and ran
 * 95–151px past its 1240px box. Only when the bar really holds 12 entries (:has nth-child(12)) the labels go one notch smaller (15 → 14px; 13.5 → 12.5px;
 * 13 → 12px) with tighter gaps/carets — every label and its text stay. Measured with the real menu: 0px past the edge at 1024 / 1100 / 1199 / 1200 /
 * 1239 / 1240 / 1280 / 1366 / 1440 / 1920 (smallest gap 1px at 1024, where the 1024–1199 dividers above separate the labels). */
@media ( min-width: 1024px ) {
	.vnt39-header .vnt39-header__menu:has( > .vnt39-header__mi:nth-child( 12 ) ) { gap: 3px; }
	.vnt39-header .vnt39-header__menu:has( > .vnt39-header__mi:nth-child( 12 ) ) > .vnt39-header__mi > a { font-size: 14px; }
	.vnt39-header .vnt39-header__menu:has( > .vnt39-header__mi:nth-child( 12 ) ) .vnt39-header__subtoggle { margin-left: 3px; }
	.vnt39-header .vnt39-header__menu:has( > .vnt39-header__mi:nth-child( 12 ) ) .vnt39-header__catalog { font-size: 14px; padding: 0 9px; }
}
@media ( min-width: 1024px ) and ( max-width: 1199px ) {
	.vnt39-header .vnt39-header__menu:has( > .vnt39-header__mi:nth-child( 12 ) ) { gap: 1px; }
	.vnt39-header .vnt39-header__menu:has( > .vnt39-header__mi:nth-child( 12 ) ) > .vnt39-header__mi > a { font-size: 12.5px; }
	.vnt39-header .vnt39-header__menu:has( > .vnt39-header__mi:nth-child( 12 ) ) .vnt39-header__catalog { font-size: 13px; }
}
@media ( min-width: 1024px ) and ( max-width: 1099px ) {
	.vnt39-header .vnt39-header__menu:has( > .vnt39-header__mi:nth-child( 12 ) ) > .vnt39-header__mi > a { font-size: 12px; }
	.vnt39-header .vnt39-header__menu:has( > .vnt39-header__mi:nth-child( 12 ) ) .vnt39-header__subtoggle { margin-left: 2px; }
	.vnt39-header .vnt39-header__menu:has( > .vnt39-header__mi:nth-child( 12 ) ) .vnt39-header__catalog { padding: 0 5px; }
}