/**
 * Thanh Trung site navigation v4.
 * A restrained industrial header and mobile drawer using the original brand
 * colours, the site's existing typeface and the native Flatsome interactions.
 */

:root {
	--tt-nav-brand: #273b94;
	--tt-nav-brand-dark: #1d307f;
	--tt-nav-navy: #071a2b;
	--tt-nav-ink: #10283b;
	--tt-nav-muted: #59697a;
	--tt-nav-line: rgba(39, 59, 148, .14);
	--tt-nav-line-soft: rgba(39, 59, 148, .09);
	--tt-nav-soft: rgba(39, 59, 148, .055);
	--tt-nav-ease: cubic-bezier(.2, .7, .2, 1);
}

#header .header-wrapper,
#header .header-bg-color {
	background: #fff;
}

#header .header-wrapper {
	border-bottom: 1px solid var(--tt-nav-line);
	box-shadow: none;
	transition: box-shadow 180ms ease, background-color 180ms ease;
}

#header .header-wrapper.stuck,
#header .stuck .header-wrapper {
	background: rgba(255, 255, 255, .98);
	box-shadow: 0 8px 22px rgba(7, 26, 43, .07);
}

#header .top-divider {
	display: none;
}

#header a:focus-visible,
#header button:focus-visible,
#main-menu a:focus-visible,
#main-menu button:focus-visible {
	border-radius: 4px;
	outline: 2px solid var(--tt-nav-brand);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Desktop navigation
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {
	#header #masthead.header-main,
	#header .stuck #masthead.header-main,
	#header .header-wrapper.stuck #masthead.header-main {
		height: 72px !important;
	}

	#header .header-inner {
		display: grid;
		grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
		align-items: center;
		width: 100%;
		max-width: 1250px;
		gap: 0;
		padding-right: 30px;
		padding-left: 30px;
	}

	/* Flatsome's clearfix would otherwise become a second implicit grid row. */
	#header .header-inner::after {
		display: none;
		content: none;
	}

	#header #logo {
		grid-column: 1;
		width: 202px;
		margin: 0;
		flex: none;
		justify-self: start;
	}

	#header #logo a,
	#header #logo img {
		display: block;
	}

	#header #logo img {
		max-height: 38px !important;
	}

	#header #masthead .show-for-medium {
		display: none !important;
	}

	#header #masthead .hide-for-medium.flex-left.flex-grow {
		display: flex !important;
		grid-column: 2;
		min-width: 0;
		justify-self: center;
	}

	#header #masthead .hide-for-medium.flex-right {
		display: flex !important;
		grid-column: 3;
		justify-self: end;
	}

	#header .header-nav-main {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	#header .header-nav-main > li {
		margin: 0 !important;
	}

	#header .header-nav-main > li.menu-item > a {
		position: relative;
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 12px;
		color: var(--tt-nav-muted);
		font-size: 14.5px;
		font-weight: 600;
		line-height: 1.2 !important;
		letter-spacing: -.01em;
		white-space: nowrap;
		text-decoration: none;
		transition: color 160ms ease;
	}

	#header .header-nav-main > li.menu-item > a::after {
		position: absolute;
		right: 12px;
		bottom: 0;
		left: 12px;
		height: 2px;
		border-radius: 0;
		content: '';
		background: var(--tt-nav-brand);
		opacity: 0;
		transform: scaleX(.45);
		transform-origin: center;
		transition: opacity 160ms ease, transform 160ms var(--tt-nav-ease);
	}

	#header .header-nav-main > li.menu-item:hover > a,
	#header .header-nav-main > li.menu-item.current-dropdown > a,
	#header .header-nav-main > li.current-menu-item > a,
	#header .header-nav-main > li.current-menu-ancestor > a {
		color: var(--tt-nav-brand);
	}

	#header .header-nav-main > li.current-menu-item > a,
	#header .header-nav-main > li.current-menu-ancestor > a {
		font-weight: 650;
	}

	#header .header-nav-main > li.current-menu-item > a::after,
	#header .header-nav-main > li.current-menu-ancestor > a::after {
		opacity: 1;
		transform: scaleX(1);
	}

	#header .header-nav-main > li.menu-item-has-children > a .icon-angle-down {
		margin-left: 6px;
		color: currentColor;
		font-size: 12px;
		opacity: .68;
		transition: transform 160ms var(--tt-nav-ease);
	}

	#header .header-nav-main > li.menu-item-has-children:hover > a .icon-angle-down,
	#header .header-nav-main > li.menu-item-has-children.current-dropdown > a .icon-angle-down,
	#header .header-nav-main > li.menu-item-has-children:focus-within > a .icon-angle-down {
		transform: rotate(180deg);
	}

	/* Product dropdown: one quiet surface, no decorative rail or arrows. */
	#header .header-nav-main > li.menu-item-has-children > .nav-dropdown {
		top: calc(100% + 14px);
		left: 50%;
		right: auto;
		display: block;
		width: 268px;
		min-width: 268px;
		margin: 0;
		padding: 6px;
		border: 1px solid var(--tt-nav-line);
		border-radius: 6px;
		background: #fff;
		box-shadow: 0 14px 32px rgba(7, 26, 43, .11);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translate(-50%, 6px);
		transition: opacity 160ms ease, visibility 160ms ease, transform 160ms var(--tt-nav-ease);
	}

	#header .header-nav-main > li.menu-item-has-children:hover > .nav-dropdown,
	#header .header-nav-main > li.menu-item-has-children.current-dropdown > .nav-dropdown,
	#header .header-nav-main > li.menu-item-has-children:focus-within > .nav-dropdown {
		left: 50%;
		right: auto;
		max-height: inherit;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate(-50%, 0);
	}

	#header .header-nav-main > li.menu-item-has-children > .nav-dropdown::before {
		top: -15px;
		height: 15px;
	}

	#header .header-nav-main > li.menu-item-has-children > .nav-dropdown > li + li {
		margin-top: 2px;
	}

	#header .header-nav-main > li.menu-item-has-children > .nav-dropdown > li > a {
		display: flex;
		align-items: center;
		min-height: 44px;
		margin: 0;
		padding: 9px 12px;
		border: 0;
		border-radius: 4px;
		color: var(--tt-nav-ink);
		font-size: 14px;
		font-weight: 590;
		line-height: 1.35;
		transition: color 150ms ease, background-color 150ms ease;
	}

	#header .header-nav-main > li.menu-item-has-children > .nav-dropdown > li > a::after {
		content: none;
	}

	#header .header-nav-main > li.menu-item-has-children > .nav-dropdown > li > a:hover,
	#header .header-nav-main > li.menu-item-has-children > .nav-dropdown > li > a:focus-visible {
		color: var(--tt-nav-brand-dark);
		background: var(--tt-nav-soft);
	}

	/* Direct EN/VI segmented pill. The existing Polylang list stays the source
	   of truth, but is presented as two first-class links instead of a dropdown. */
	#header .header-language-dropdown {
		display: flex;
		min-height: 44px;
		align-items: center;
		margin: 0 !important;
	}

	#header .header-language-dropdown > a {
		display: none !important;
	}

	#header .header-language-dropdown > .nav-dropdown {
		position: static !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		display: flex !important;
		width: auto;
		min-width: 0;
		max-height: none !important;
		height: 38px;
		align-items: center;
		gap: 7px;
		margin: 0;
		padding: 2px;
		border: 1px solid var(--tt-nav-line);
		border-radius: 999px;
		background: #fff;
		box-shadow: none;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		overflow: visible !important;
		transform: none !important;
		transition: border-color 150ms ease, background-color 150ms ease;
	}

	#header .header-language-dropdown:hover > .nav-dropdown,
	#header .header-language-dropdown:focus-within > .nav-dropdown {
		border-color: rgba(39, 59, 148, .27);
		background: rgba(39, 59, 148, .018);
	}

	#header .header-language-dropdown > .nav-dropdown::before,
	#header .header-language-dropdown > .nav-dropdown::after {
		display: none !important;
		content: none !important;
	}

	#header .header-language-dropdown > .nav-dropdown > li {
		position: relative;
		order: 1;
		margin: 0 !important;
	}

	#header .header-language-dropdown > .nav-dropdown > li.active {
		order: 0;
	}

	#header .header-language-dropdown > .nav-dropdown > li > a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 36px;
		height: 32px;
		min-height: 32px;
		padding: 0 10px;
		border: 0;
		border-radius: 999px;
		color: #8a9098;
		background: transparent;
		font-size: 0;
		font-weight: 700;
		line-height: 1;
		letter-spacing: .06em;
		transition: color 150ms ease, background-color 150ms ease;
	}

	#header .header-language-dropdown > .nav-dropdown > li > a .icon-image {
		display: none;
	}

	#header .header-language-dropdown > .nav-dropdown > li > a[hreflang]::before {
		content: attr(hreflang);
		color: inherit;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .055em;
		text-transform: uppercase;
	}

	#header .header-language-dropdown > .nav-dropdown > li:not(.active)::before {
		position: absolute;
		top: 50%;
		left: -6px;
		content: '/';
		color: rgba(16, 40, 59, .22);
		font-size: 11px;
		font-weight: 600;
		transform: translateY(-50%);
		pointer-events: none;
	}

	#header .header-language-dropdown > .nav-dropdown > li > a:hover,
	#header .header-language-dropdown > .nav-dropdown > li > a:focus-visible {
		color: var(--tt-nav-brand-dark);
		background: rgba(39, 59, 148, .045);
	}

	#header .header-language-dropdown > .nav-dropdown > li.active > a {
		color: var(--tt-nav-brand-dark);
		background: rgba(39, 59, 148, .09);
	}

	#header .header-language-dropdown > .nav-dropdown > li.active > a::after {
		display: none;
		content: none;
	}

	#header li.header-language-dropdown.tt-dropdown-dismissed > .nav-dropdown {
		left: auto !important;
		max-height: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	#header li.tt-dropdown-dismissed > .nav-dropdown {
		left: -99999px !important;
		max-height: 0 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	#header li.tt-dropdown-dismissed > a .icon-angle-down {
		transform: none !important;
	}
}

@media (min-width: 1100px) and (max-width: 1199px) {
	#header .header-inner {
		grid-template-columns: minmax(188px, 1fr) auto minmax(188px, 1fr);
		padding-right: 24px;
		padding-left: 24px;
	}

	#header #logo {
		width: 188px;
	}

	#header .header-nav-main {
		gap: 2px;
	}

	#header .header-nav-main > li.menu-item > a {
		padding-right: 10px;
		padding-left: 10px;
		font-size: 14px;
	}

	#header .header-nav-main > li.menu-item > a::after {
		right: 10px;
		left: 10px;
	}
}

/* --------------------------------------------------------------------------
   Menu ↔ close morph icon

   One 3-bar icon shared by the header burger and the drawer close control
   (shared-element choreography: the close control starts as the burger's
   bars, then swings into the X). X state is a rigid transform per bar —
   θ = [-45°, 45°, -45°]: the outer bars converge to the centre and coincide
   exactly (residual 0.000), the middle bar forms the opposite diagonal.
   Bar length is preserved (pure rotation, no scaling). 240ms matches the
   drawer slide timing; where supported, the rotate channel lags the
   converge by 30ms for a slight follow-through (variant "Swing").
   -------------------------------------------------------------------------- */

.tt-morph-icon {
	position: relative;
	display: block;
	width: 20px;
	height: 16px;
	pointer-events: none;
}

.tt-morph-icon > i {
	position: absolute;
	top: 7px;
	left: 0;
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	transition: transform 240ms var(--tt-nav-ease);
}

.tt-morph-icon > i:nth-child(1) {
	transform: translateY(-7px) rotate(0deg);
}

.tt-morph-icon > i:nth-child(2) {
	transform: translateY(0) rotate(0deg) scaleX(1);
}

.tt-morph-icon > i:nth-child(3) {
	transform: translateY(7px) rotate(0deg);
}

.tt-x .tt-morph-icon > i:nth-child(1) {
	transform: translateY(0) rotate(-45deg);
}

.tt-x .tt-morph-icon > i:nth-child(2) {
	transform: translateY(0) rotate(45deg) scaleX(1);
}

.tt-x .tt-morph-icon > i:nth-child(3) {
	transform: translateY(0) rotate(-45deg);
}

/* Burger-only hover: the middle bar shortens symmetrically. */
#header .mobile-nav .nav-icon > a.tt-has-morph:hover .tt-morph-icon > i:nth-child(2),
#header .mobile-nav .nav-icon > a.tt-has-morph:focus-visible .tt-morph-icon > i:nth-child(2),
.tt-catalog-header__menu:hover .tt-morph-icon > i:nth-child(2),
.tt-catalog-header__menu:focus-visible .tt-morph-icon > i:nth-child(2) {
	transform: translateY(0) rotate(0deg) scaleX(.75);
}

/* Browsers with individual transform properties get the staggered variant:
   converge (translate) and swing (rotate) are separate channels and rotate
   lags 30ms. Geometry is identical to the composite fallback above. */
@supports (rotate: 0deg) {
	.tt-morph-icon > i {
		transition: translate 240ms var(--tt-nav-ease), rotate 240ms var(--tt-nav-ease) 30ms, scale 160ms ease;
	}

	/* Each state rule must neutralise the composite fallback transform with
	   transform: none — same-specificity state selectors would otherwise let
	   both paths compose (double rotation). */
	.tt-morph-icon > i:nth-child(1) {
		transform: none;
		translate: 0 -7px;
		rotate: 0deg;
	}

	.tt-morph-icon > i:nth-child(2) {
		transform: none;
		translate: 0 0;
		rotate: 0deg;
		scale: 1 1;
	}

	.tt-morph-icon > i:nth-child(3) {
		transform: none;
		translate: 0 7px;
		rotate: 0deg;
	}

	.tt-x .tt-morph-icon > i:nth-child(1) {
		transform: none;
		translate: 0 0;
		rotate: -45deg;
	}

	.tt-x .tt-morph-icon > i:nth-child(2) {
		transform: none;
		translate: 0 0;
		rotate: 45deg;
		scale: 1 1;
	}

	.tt-x .tt-morph-icon > i:nth-child(3) {
		transform: none;
		translate: 0 0;
		rotate: -45deg;
	}

	#header .mobile-nav .nav-icon > a.tt-has-morph:hover .tt-morph-icon > i:nth-child(2),
	#header .mobile-nav .nav-icon > a.tt-has-morph:focus-visible .tt-morph-icon > i:nth-child(2),
	.tt-catalog-header__menu:hover .tt-morph-icon > i:nth-child(2),
	.tt-catalog-header__menu:focus-visible .tt-morph-icon > i:nth-child(2) {
		transform: none;
		translate: 0 0;
		rotate: 0deg;
		scale: .75 1;
	}
}

/* --------------------------------------------------------------------------
   Compact header and mobile drawer
   -------------------------------------------------------------------------- */

@media (max-width: 1099px) {
	#header #masthead .hide-for-medium {
		display: none !important;
	}

	#header #masthead .show-for-medium {
		display: flex !important;
	}

	#header #masthead.header-main,
	#header .stuck #masthead.header-main,
	#header .header-wrapper.stuck #masthead.header-main {
		height: 68px !important;
	}

	#header .header-inner {
		display: flex;
		max-width: none;
		padding-right: clamp(16px, 3vw, 24px);
		padding-left: clamp(16px, 3vw, 24px);
	}

	#header #logo {
		width: clamp(158px, 45vw, 176px);
		margin: 0;
		flex: 0 0 auto;
	}

	#header #logo img {
		max-height: 34px !important;
	}

	#header .show-for-medium.flex-left {
		min-width: 8px;
		margin: 0;
		flex: 1 1 auto;
	}

	#header .show-for-medium.flex-right {
		margin-left: auto;
		flex: 0 0 auto;
	}

	#header .mobile-nav {
		align-items: center;
		gap: 0;
	}

	#header .mobile-nav > li {
		margin: 0 !important;
	}

	/* Language lives in the drawer on compact layouts. */
	#header .mobile-nav .header-language-dropdown {
		display: none !important;
	}

	#header .mobile-nav .nav-icon > a {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		min-width: 44px;
		height: 44px;
		min-height: 44px;
		padding: 0;
		border: 1px solid rgba(39, 59, 148, .19);
		border-radius: 6px;
		color: var(--tt-nav-brand);
		background: #fff;
		box-shadow: none;
		transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 120ms ease;
	}

	#header .mobile-nav .nav-icon > a:active {
		transform: scale(.92);
	}

	#header .mobile-nav .nav-icon > a::before {
		content: none;
	}

	#header .mobile-nav .nav-icon > a .icon-menu {
		font-size: 21px;
		line-height: 1;
	}

	/* Enhanced burger: the font glyph yields to the morph icon's bar set. The
	   icon is taken out of the flex flow and centred absolutely, because the
	   theme markup carries whitespace text nodes inside the trigger that would
	   otherwise become anonymous flex items and nudge the icon off centre. */
	#header .mobile-nav .nav-icon > a.tt-has-morph .icon-menu {
		display: none;
	}

	#header .mobile-nav .nav-icon > a .tt-morph-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -8px 0 0 -10px;
	}

	#header .mobile-nav .nav-icon > a:hover,
	#header .mobile-nav .nav-icon > a:active,
	#header .mobile-nav .nav-icon > a[aria-expanded='true'] {
		border-color: rgba(39, 59, 148, .32);
		color: var(--tt-nav-brand-dark);
		background: var(--tt-nav-soft);
	}

	/* Drawer surface. */
	.mfp-wrap.tt-main-menu-open .mfp-content {
		--drawer-width: min(340px, calc(100vw - 32px)) !important;
		width: min(340px, calc(100vw - 32px)) !important;
		max-width: calc(100vw - 32px) !important;
		height: 100vh;
		height: 100dvh;
		background: #fff;
		box-shadow: -12px 0 32px rgba(7, 26, 43, .14);
		overflow: hidden;
		transition: transform 240ms var(--tt-nav-ease), opacity 180ms ease;
	}

	.mfp-bg.main-menu-overlay {
		background: rgba(7, 26, 43, .50);
		transition: opacity 180ms ease;
	}

	#main-menu::before {
		content: none;
	}

	#main-menu {
		overflow: hidden;
	}

	#main-menu .sidebar-menu {
		display: flex;
		height: 100%;
		min-height: 0;
		flex-direction: column;
		padding: 0 16px max(16px, env(safe-area-inset-bottom));
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #fff;
		opacity: 0;
		transform: none;
		transition: opacity 180ms ease;
	}

	.mfp-wrap.tt-main-menu-open.mfp-ready #main-menu .sidebar-menu {
		opacity: 1;
		transform: none;
	}

	#main-menu .mobile-drawer-header {
		display: flex;
		min-height: 72px;
		align-items: center;
		padding: 0 56px 0 2px;
		border-bottom: 1px solid var(--tt-nav-line-soft);
		background: #fff;
	}

	#main-menu .mobile-drawer-logo {
		display: block;
		min-width: 0;
		text-decoration: none;
	}

	#main-menu .mobile-drawer-logo img {
		display: block;
		width: 160px;
		max-width: 100%;
		height: auto;
	}

	/* Close control mirrors the burger: same 44px box, same chrome, and it sits
	   exactly where the burger was (header height 68px → 12px top offset, same
	   right padding), so the burger appears to become the X. */
	.mfp-wrap.tt-main-menu-open .mfp-close {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		top: 12px;
		right: clamp(16px, 3vw, 24px);
		margin: 0;
		padding: 0;
		border: 1px solid rgba(39, 59, 148, .19);
		border-radius: 6px;
		color: var(--tt-nav-brand);
		background: #fff;
		box-shadow: none;
		mix-blend-mode: normal;
		font-size: 0;
		line-height: 44px;
		opacity: 1;
		isolation: isolate;
		cursor: pointer;
		transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 120ms ease;
	}

	.mfp-wrap.tt-main-menu-open .mfp-close:focus-visible {
		outline: 2px solid var(--tt-nav-brand);
		outline-offset: 2px;
	}

	.mfp-wrap.tt-main-menu-open .mfp-close:active {
		transform: scale(.92);
	}

	.mfp-wrap.tt-main-menu-open .mfp-close::before {
		content: none;
	}

	.mfp-wrap.tt-main-menu-open .mfp-close:hover,
	.mfp-wrap.tt-main-menu-open .mfp-close:active {
		border-color: rgba(39, 59, 148, .32);
		color: var(--tt-nav-brand-dark);
		background: var(--tt-nav-soft);
	}

	.mfp-wrap.tt-main-menu-open .mfp-close svg {
		width: 20px;
		height: 20px;
		stroke-width: 1.8;
		stroke-linecap: square;
		stroke-linejoin: miter;
	}

	/* Enhanced close: the feather glyph yields to the morph icon. */
	.mfp-wrap.tt-main-menu-open .mfp-close.tt-has-morph svg {
		display: none;
	}

	#main-menu .sidebar-menu > ul.nav-sidebar {
		width: 100%;
		margin: 10px 0 0;
		flex: 1 0 auto;
	}

	#main-menu .sidebar-menu .header-search-form {
		display: none !important;
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li {
		position: relative;
		margin: 0;
		border-bottom: 1px solid var(--tt-nav-line-soft);
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li:last-child {
		border-bottom: 0;
	}

	/* Open choreography mirrors the catalog drawer: top-level items rise + fade
	   with a short stagger once the panel is ready; close has no stagger so the
	   panel leaves immediately. The hidden search item (nth-child 1) never
	   renders, so visible links map 1:1 onto the catalog delays. */
	.mfp-wrap.tt-main-menu-open #main-menu .sidebar-menu > ul.nav-sidebar > li,
	.mfp-wrap.tt-main-menu-open #main-menu .sidebar-menu > .mobile-sidebar-utility {
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 220ms ease, transform 260ms var(--tt-nav-ease);
	}

	.mfp-wrap.tt-main-menu-open.mfp-ready #main-menu .sidebar-menu > ul.nav-sidebar > li,
	.mfp-wrap.tt-main-menu-open.mfp-ready #main-menu .sidebar-menu > .mobile-sidebar-utility {
		opacity: 1;
		transform: none;
	}

	.mfp-wrap.tt-main-menu-open.mfp-ready #main-menu .sidebar-menu > ul.nav-sidebar > li:nth-child(2) {
		transition-delay: 60ms;
	}

	.mfp-wrap.tt-main-menu-open.mfp-ready #main-menu .sidebar-menu > ul.nav-sidebar > li:nth-child(3) {
		transition-delay: 95ms;
	}

	.mfp-wrap.tt-main-menu-open.mfp-ready #main-menu .sidebar-menu > ul.nav-sidebar > li:nth-child(4) {
		transition-delay: 130ms;
	}

	.mfp-wrap.tt-main-menu-open.mfp-ready #main-menu .sidebar-menu > ul.nav-sidebar > li:nth-child(5) {
		transition-delay: 165ms;
	}

	.mfp-wrap.tt-main-menu-open.mfp-ready #main-menu .sidebar-menu > .mobile-sidebar-utility {
		transition-delay: 195ms;
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li > a {
		position: relative;
		display: flex;
		align-items: center;
		min-height: 54px;
		margin: 0;
		padding: 0 12px;
		border: 0;
		border-radius: 0;
		color: var(--tt-nav-ink);
		background: transparent;
		font-size: 15.5px;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: -.005em;
		text-transform: none;
		text-decoration: none;
		transition: color 150ms ease, background-color 150ms ease;
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li.has-child > a {
		padding-right: 52px;
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li > a:hover {
		color: var(--tt-nav-brand-dark);
		background: rgba(39, 59, 148, .035);
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li.current-menu-item > a,
	#main-menu .sidebar-menu > ul.nav-sidebar > li.current-menu-ancestor > a,
	#main-menu .sidebar-menu > ul.nav-sidebar > li.current-menu-parent > a {
		color: var(--tt-nav-brand);
		font-weight: 650;
		background: rgba(39, 59, 148, .045);
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li.current-menu-item::before,
	#main-menu .sidebar-menu > ul.nav-sidebar > li.current-menu-ancestor::before,
	#main-menu .sidebar-menu > ul.nav-sidebar > li.current-menu-parent::before {
		position: absolute;
		top: 27px;
		left: 0;
		z-index: 2;
		width: 2px;
		height: 22px;
		border-radius: 0;
		content: '';
		background: var(--tt-nav-brand);
		transform: translateY(-50%);
		pointer-events: none;
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li > .toggle {
		position: absolute;
		top: 5px;
		right: 0;
		z-index: 3;
		display: flex;
		width: 44px;
		min-width: 44px;
		height: 44px;
		min-height: 44px;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 4px;
		color: var(--tt-nav-brand);
		background: transparent;
		opacity: 1;
		transition: background-color 150ms ease;
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li > .toggle:hover {
		background: var(--tt-nav-soft);
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li > .toggle i {
		color: currentColor;
		font-size: 13px;
		transition: transform 160ms var(--tt-nav-ease);
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li.active > .toggle i {
		transform: rotate(180deg);
	}

	#main-menu .sidebar-menu ul.sub-menu.nav-sidebar-ul {
		margin: 0 0 8px 12px;
		padding: 2px 0 3px 12px;
		border-left: 1px solid rgba(39, 59, 148, .16);
	}

	#main-menu .sidebar-menu ul.sub-menu.nav-sidebar-ul li {
		position: relative;
		margin: 0;
		border: 0;
	}

	#main-menu .sidebar-menu ul.sub-menu.nav-sidebar-ul li > a {
		display: flex;
		align-items: center;
		min-height: 44px;
		margin: 0;
		padding: 8px 10px;
		border: 0;
		border-radius: 4px;
		color: #4c5e70;
		font-size: 14px;
		font-weight: 550;
		line-height: 1.35;
		letter-spacing: normal;
		text-transform: none;
		overflow-wrap: anywhere;
	}

	#main-menu .sidebar-menu ul.sub-menu.nav-sidebar-ul li > a:hover {
		color: var(--tt-nav-brand-dark);
		background: rgba(39, 59, 148, .04);
	}

	#main-menu .sidebar-menu ul.sub-menu.nav-sidebar-ul li.current-menu-item > a {
		color: var(--tt-nav-brand-dark);
		font-weight: 650;
		background: rgba(39, 59, 148, .07);
	}

	/* Language is a quiet utility at the bottom, not another large component. */
	#main-menu .mobile-sidebar-utility {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		margin-top: auto;
		padding: 14px 2px 2px;
		border-top: 1px solid var(--tt-nav-line-soft);
	}

	#main-menu .mobile-sidebar-utility::before {
		display: block;
		margin: 0;
		content: 'Language';
		color: #738092;
		font-size: 10.5px;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: .08em;
		text-transform: uppercase;
	}

	html[lang^='vi'] #main-menu .mobile-sidebar-utility::before {
		content: 'Ngôn ngữ';
	}

	#main-menu .mobile-lang-switch {
		display: flex;
		width: auto;
		gap: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	#main-menu .mobile-lang-switch a {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0;
		min-width: 0;
		min-height: 44px;
		padding: 0 12px;
		border: 0;
		border-radius: 0;
		color: #59697a;
		background: transparent;
		font-size: 13.5px;
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
	}

	#main-menu .mobile-lang-switch a:hover {
		color: var(--tt-nav-brand-dark);
		background: transparent;
	}

	#main-menu .mobile-lang-switch a.active {
		border: 0;
		color: var(--tt-nav-brand);
		font-weight: 650;
		background: transparent;
		box-shadow: none;
	}

	#main-menu .mobile-lang-switch a + a::before {
		position: absolute;
		top: 14px;
		left: 0;
		width: 1px;
		height: 16px;
		content: '';
		background: var(--tt-nav-line);
	}

	#main-menu .mobile-lang-switch a.active::after {
		position: absolute;
		right: 12px;
		bottom: 3px;
		left: 12px;
		height: 2px;
		content: '';
		background: var(--tt-nav-brand);
		transform: none;
	}

	#main-menu .mobile-lang-switch a .mobile-lang-flag {
		display: none;
	}

	#main-menu .mobile-lang-switch a span {
		min-width: 0;
		white-space: nowrap;
	}
}

@media (max-width: 359px) {
	#header .header-inner {
		padding-right: 14px;
		padding-left: 14px;
	}

	#header #logo {
		width: 152px;
	}

	.mfp-wrap.tt-main-menu-open .mfp-content {
		--drawer-width: calc(100vw - 24px) !important;
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px) !important;
	}

	.mfp-wrap.tt-main-menu-open .mfp-close {
		right: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tt-morph-icon > i,
	#header .header-wrapper,
	#header .header-nav-main > li > a,
	#header .header-nav-main .nav-dropdown,
	#header .header-language-dropdown > a,
	#header .mobile-nav .nav-icon > a,
	.mfp-wrap.tt-main-menu-open .mfp-close,
	.mfp-wrap.tt-main-menu-open .mfp-content,
	.mfp-bg.main-menu-overlay,
	#main-menu .sidebar-menu,
	#main-menu .sidebar-menu > ul.nav-sidebar > li,
	#main-menu .sidebar-menu > .mobile-sidebar-utility {
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   Standalone catalog landing pages

   These two pages are exported without Flatsome's header shell. They consume
   this same navigation stylesheet so desktop sizing, language treatment and
   the mobile drawer remain one visual system across the site.
   -------------------------------------------------------------------------- */

.tt-catalog-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100;
	border-bottom: 1px solid var(--tt-nav-line);
	background: rgba(255, 255, 255, .98);
	box-shadow: none;
	transition: box-shadow 180ms ease, background-color 180ms ease;
}

.tt-catalog-header.scrolled {
	background: rgba(255, 255, 255, .98);
	box-shadow: 0 8px 22px rgba(7, 26, 43, .07);
}

.tt-catalog-header a:focus-visible,
.tt-catalog-header button:focus-visible,
.tt-catalog-drawer a:focus-visible,
.tt-catalog-drawer button:focus-visible {
	border-radius: 5px;
	outline: 2px solid var(--tt-nav-brand);
	outline-offset: 2px;
}

.tt-catalog-header__inner {
	display: grid;
	width: 100%;
	max-width: 1250px;
	height: 72px;
	grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
	align-items: center;
	gap: 0;
	margin: 0 auto;
	padding: 0 30px;
}

.tt-catalog-header__logo {
	display: block;
	width: 202px;
	justify-self: start;
}

.tt-catalog-header__logo img {
	display: block;
	width: 100%;
	max-height: 38px;
	object-fit: contain;
	object-position: left center;
}

.tt-catalog-header__links {
	display: flex;
	grid-column: 2;
	align-items: center;
	gap: 6px;
	justify-self: center;
}

.tt-catalog-header__links a {
	position: relative;
	display: flex;
	min-height: 44px;
	align-items: center;
	padding: 0 12px;
	color: var(--tt-nav-muted);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
	white-space: nowrap;
	text-decoration: none;
	transition: color 160ms ease;
}

.tt-catalog-header__links a::after {
	position: absolute;
	right: 12px;
	bottom: 0;
	left: 12px;
	height: 2px;
	content: '';
	background: var(--tt-nav-brand);
	opacity: 0;
	transform: scaleX(.45);
	transform-origin: center;
	transition: opacity 160ms ease, transform 160ms var(--tt-nav-ease);
}

.tt-catalog-header__links a:hover,
.tt-catalog-header__links a.active {
	color: var(--tt-nav-brand);
}

.tt-catalog-header__links a.active {
	font-weight: 650;
}

.tt-catalog-header__links a.active::after {
	opacity: 1;
	transform: scaleX(1);
}

.tt-catalog-language {
	display: inline-flex;
	height: 38px;
	grid-column: 3;
	align-items: center;
	gap: 7px;
	justify-self: end;
	padding: 2px;
	border: 1px solid var(--tt-nav-line);
	border-radius: 999px;
	background: #fff;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.tt-catalog-language:hover,
.tt-catalog-language:focus-within {
	border-color: rgba(39, 59, 148, .27);
	background: rgba(39, 59, 148, .018);
}

.tt-catalog-language a {
	position: relative;
	display: flex;
	min-width: 36px;
	height: 32px;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border-radius: 999px;
	color: #8a9098;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .055em;
	text-decoration: none;
	transition: color 150ms ease, background-color 150ms ease;
}

.tt-catalog-language a:hover,
.tt-catalog-language a:focus-visible {
	color: var(--tt-nav-brand-dark);
	background: rgba(39, 59, 148, .045);
}

.tt-catalog-language a.is-active {
	color: var(--tt-nav-brand-dark);
	background: rgba(39, 59, 148, .09);
}

.tt-catalog-language__separator {
	color: rgba(16, 40, 59, .22);
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	line-height: 1;
}

.tt-catalog-header__menu {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0;
	border: 1px solid rgba(39, 59, 148, .19);
	border-radius: 6px;
	color: var(--tt-nav-brand);
	background: #fff;
	box-shadow: none;
	transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 120ms ease;
}

.tt-catalog-header__menu:active {
	transform: scale(.92);
}

.tt-catalog-header__menu:hover,
.tt-catalog-header__menu:active,
.tt-catalog-header__menu[aria-expanded='true'] {
	border-color: rgba(39, 59, 148, .32);
	color: var(--tt-nav-brand-dark);
	background: var(--tt-nav-soft);
}

.tt-catalog-drawer-layer {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	justify-content: flex-end;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s .3s;
}

.tt-catalog-drawer-layer.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.tt-catalog-drawer-layer__dismiss {
	position: absolute;
	inset: 0;
	border: 0;
	background: rgba(7, 26, 43, .50);
	cursor: default;
	opacity: 0;
	transition: opacity 180ms ease;
}

.tt-catalog-drawer-layer.is-open .tt-catalog-drawer-layer__dismiss {
	opacity: 1;
}

.tt-catalog-drawer {
	position: relative;
	z-index: 1;
	display: flex;
	width: min(340px, calc(100vw - 32px));
	max-width: calc(100vw - 32px);
	height: 100vh;
	height: 100dvh;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	box-shadow: -12px 0 32px rgba(7, 26, 43, .14);
	opacity: 0;
	transform: translateX(100%);
	transition: transform 240ms var(--tt-nav-ease), opacity 180ms ease;
}

.tt-catalog-drawer-layer.is-open .tt-catalog-drawer {
	opacity: 1;
	transform: none;
}

.tt-catalog-drawer__header {
	display: flex;
	min-height: 72px;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px 0 18px;
	border-bottom: 1px solid var(--tt-nav-line-soft);
}

.tt-catalog-drawer__logo {
	display: block;
	width: 160px;
}

.tt-catalog-drawer__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.tt-catalog-drawer__close {
	position: fixed;
	top: 12px;
	right: clamp(16px, 3vw, 24px);
	z-index: 2;
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(39, 59, 148, .19);
	border-radius: 6px;
	color: var(--tt-nav-brand);
	background: #fff;
	transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 120ms ease;
}

.tt-catalog-drawer__close:hover,
.tt-catalog-drawer__close:active {
	border-color: rgba(39, 59, 148, .32);
	color: var(--tt-nav-brand-dark);
	background: var(--tt-nav-soft);
}

.tt-catalog-drawer__close:active {
	transform: scale(.92);
}

.tt-catalog-drawer-layer.is-open .tt-catalog-drawer__close {
	border-color: rgba(39, 59, 148, .32);
	color: var(--tt-nav-brand-dark);
	background: var(--tt-nav-soft);
}

.tt-catalog-drawer__close:focus-visible {
	outline: 2px solid var(--tt-nav-brand);
	outline-offset: 2px;
}

.tt-catalog-drawer__body {
	display: flex;
	min-height: 0;
	flex: 1;
	flex-direction: column;
	padding: 10px 16px max(16px, env(safe-area-inset-bottom));
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.tt-catalog-drawer__nav {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
}

.tt-catalog-drawer__nav a {
	position: relative;
	display: flex;
	min-height: 54px;
	align-items: center;
	margin: 0;
	padding: 0 12px;
	border-bottom: 1px solid var(--tt-nav-line-soft);
	color: var(--tt-nav-ink);
	background: transparent;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.005em;
	text-decoration: none;
}

/* Open choreography: links rise + fade with a short stagger while the panel
   slides (composited transform/opacity only); close has no stagger so the
   panel leaves immediately. */
.tt-catalog-drawer__nav a,
.tt-catalog-drawer__utility {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 220ms ease, transform 260ms var(--tt-nav-ease);
}

.tt-catalog-drawer-layer.is-open .tt-catalog-drawer__nav a,
.tt-catalog-drawer-layer.is-open .tt-catalog-drawer__utility {
	opacity: 1;
	transform: none;
}

.tt-catalog-drawer-layer.is-open .tt-catalog-drawer__nav a:nth-child(1) {
	transition-delay: 60ms;
}

.tt-catalog-drawer-layer.is-open .tt-catalog-drawer__nav a:nth-child(2) {
	transition-delay: 95ms;
}

.tt-catalog-drawer-layer.is-open .tt-catalog-drawer__nav a:nth-child(3) {
	transition-delay: 130ms;
}

.tt-catalog-drawer-layer.is-open .tt-catalog-drawer__nav a:nth-child(4) {
	transition-delay: 165ms;
}

.tt-catalog-drawer-layer.is-open .tt-catalog-drawer__utility {
	transition-delay: 195ms;
}

.tt-catalog-drawer__nav a:hover {
	color: var(--tt-nav-brand-dark);
	background: rgba(39, 59, 148, .035);
}

.tt-catalog-drawer__nav a.active {
	color: var(--tt-nav-brand);
	font-weight: 650;
	background: rgba(39, 59, 148, .045);
}

.tt-catalog-drawer__nav a.active::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 2px;
	height: 22px;
	content: '';
	background: var(--tt-nav-brand);
	transform: translateY(-50%);
}

.tt-catalog-drawer__utility {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: auto;
	padding: 14px 2px 2px;
	border-top: 1px solid var(--tt-nav-line-soft);
}

.tt-catalog-drawer__utility-label {
	color: #738092;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tt-catalog-drawer__languages {
	display: flex;
}

.tt-catalog-drawer__languages a {
	position: relative;
	display: flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	color: var(--tt-nav-muted);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.tt-catalog-drawer__languages a:hover,
.tt-catalog-drawer__languages a.active {
	color: var(--tt-nav-brand);
}

.tt-catalog-drawer__languages a + a::before {
	position: absolute;
	top: 14px;
	left: 0;
	width: 1px;
	height: 16px;
	content: '';
	background: var(--tt-nav-line);
}

.tt-catalog-drawer__languages a.active::after {
	position: absolute;
	right: 12px;
	bottom: 3px;
	left: 12px;
	height: 2px;
	content: '';
	background: var(--tt-nav-brand);
}

body.tt-catalog-menu-open {
	overflow: hidden;
	padding-right: var(--tt-sbw, 0px);
}

body.tt-catalog-menu-open .tt-catalog-header {
	right: var(--tt-sbw, 0px);
}

@media (min-width: 1100px) and (max-width: 1199px) {
	.tt-catalog-header__inner {
		grid-template-columns: minmax(188px, 1fr) auto minmax(188px, 1fr);
		padding: 0 24px;
	}

	.tt-catalog-header__logo {
		width: 188px;
	}

	.tt-catalog-header__links {
		gap: 2px;
	}

	.tt-catalog-header__links a {
		padding-right: 10px;
		padding-left: 10px;
		font-size: 14px;
	}

	.tt-catalog-header__links a::after {
		right: 10px;
		left: 10px;
	}
}

@media (max-width: 1099px) {
	.tt-catalog-header__inner {
		display: flex;
		height: 68px;
		max-width: none;
		padding: 0 clamp(16px, 3vw, 24px);
	}

	.tt-catalog-header__logo {
		width: clamp(158px, 45vw, 176px);
	}

	.tt-catalog-header__logo img {
		max-height: 34px;
	}

	.tt-catalog-header__links,
	.tt-catalog-language {
		display: none !important;
	}

	.tt-catalog-header__menu {
		display: flex;
		flex-direction: column;
		margin-left: auto;
	}

	.tt-catalog-header ~ main .hero {
		padding-top: calc(68px + var(--tt-catalog-hero-top-gap, clamp(22px, 4vh, 36px)));
	}

	.tt-catalog-header ~ main .toolbar {
		top: 68px;
	}
}

@media (min-width: 1100px) {
	.tt-catalog-drawer-layer {
		display: none !important;
	}
}

@media (max-width: 359px) {
	.tt-catalog-header__inner {
		padding-right: 14px;
		padding-left: 14px;
	}

	.tt-catalog-header__logo {
		width: 152px;
	}

	.tt-catalog-drawer {
		width: calc(100vw - 24px);
		max-width: calc(100vw - 24px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tt-catalog-header,
	.tt-catalog-header__links a,
	.tt-catalog-language,
	.tt-catalog-language a,
	.tt-catalog-header__menu,
	.tt-catalog-header__menu span,
	.tt-catalog-drawer-layer,
	.tt-catalog-drawer-layer__dismiss,
	.tt-catalog-drawer,
	.tt-catalog-drawer__nav a,
	.tt-catalog-drawer__utility,
	.tt-catalog-drawer__close,
	.tt-catalog-drawer__close::before,
	.tt-catalog-drawer__close::after {
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   Mobile navigation refinement - quiet industrial minimalism

   One controlled frosted sheet, unboxed typographic navigation and one compact
   language control. Current location is communicated by colour and weight;
   no decorative card or marker is nested inside the drawer.
   -------------------------------------------------------------------------- */

@media (max-width: 1099px) {
	.mfp-wrap.tt-main-menu-open,
	.tt-catalog-drawer-layer {
		--tt-drawer-surface-a: rgba(255, 255, 255, .985);
		--tt-drawer-surface-b: rgba(241, 245, 252, .97);
		--tt-drawer-line: rgba(39, 59, 148, .12);
		--tt-drawer-line-strong: rgba(39, 59, 148, .14);
		--tt-drawer-radius: 18px;
	}

	/* Keep the 44px tap target, but let the icon sit directly on the header. */
	#header .mobile-nav .nav-icon > a,
	.tt-catalog-header__menu {
		border-color: transparent;
		border-radius: 10px;
		background: transparent;
		box-shadow: none;
	}

	#header .mobile-nav .nav-icon > a:hover,
	#header .mobile-nav .nav-icon > a:focus-visible,
	#header .mobile-nav .nav-icon > a[aria-expanded='true'],
	.tt-catalog-header__menu:hover,
	.tt-catalog-header__menu:focus-visible,
	.tt-catalog-header__menu[aria-expanded='true'] {
		border-color: transparent;
		background: rgba(39, 59, 148, .05);
	}

	#header .mobile-nav .nav-icon > a:active,
	.tt-catalog-header__menu:active {
		transform: scale(.96);
	}

	/* Standard Flatsome drawer shell. The right edge stays flush to the screen;
	   the exposed edge receives the visible soft radius. */
	.mfp-wrap.tt-main-menu-open .mfp-content {
		border: 1px solid var(--tt-drawer-line-strong);
		border-right: 0;
		border-radius: var(--tt-drawer-radius) 0 0 var(--tt-drawer-radius);
		background: linear-gradient(155deg, var(--tt-drawer-surface-a), var(--tt-drawer-surface-b));
		box-shadow: -12px 0 40px rgba(7, 26, 43, .14);
	}

	.mfp-bg.main-menu-overlay,
	.tt-catalog-drawer-layer__dismiss {
		background: linear-gradient(90deg, rgba(7, 26, 43, .5), rgba(12, 31, 70, .58));
	}

	#main-menu,
	#main-menu .sidebar-menu,
	#main-menu .mobile-drawer-header {
		background: transparent;
	}

	#main-menu .mobile-drawer-header {
		min-height: calc(72px + env(safe-area-inset-top));
		padding: env(safe-area-inset-top) 58px 0 14px;
		border-bottom-color: transparent;
	}

	#main-menu .mobile-drawer-logo img {
		width: 158px;
	}

	.mfp-wrap.tt-main-menu-open .mfp-close,
	.tt-catalog-drawer__close,
	.tt-catalog-drawer-layer.is-open .tt-catalog-drawer__close {
		top: calc(env(safe-area-inset-top) + 12px);
		border-color: transparent;
		border-radius: 10px;
		background: transparent;
		box-shadow: none;
	}

	.mfp-wrap.tt-main-menu-open .mfp-close:hover,
	.mfp-wrap.tt-main-menu-open .mfp-close:focus-visible,
	.tt-catalog-drawer__close:hover,
	.tt-catalog-drawer__close:focus-visible,
	.tt-catalog-drawer-layer.is-open .tt-catalog-drawer__close:hover,
	.tt-catalog-drawer-layer.is-open .tt-catalog-drawer__close:focus-visible {
		border-color: transparent;
		background: rgba(39, 59, 148, .05);
	}

	.mfp-wrap.tt-main-menu-open .mfp-close:active,
	.tt-catalog-drawer__close:active {
		transform: scale(.96);
	}

	.mfp-wrap.tt-main-menu-open .mfp-close svg {
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.tt-morph-icon > i {
		border-radius: 999px;
	}

	#main-menu .sidebar-menu {
		padding: 0 16px max(16px, env(safe-area-inset-bottom));
	}

	/* Typography and whitespace carry the hierarchy; there is no nav card. */
	#main-menu .sidebar-menu > ul.nav-sidebar {
		margin: 8px 0 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li {
		border: 0;
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li > a {
		min-height: 56px;
		margin: 0;
		padding: 11px 12px 11px 14px;
		border: 0;
		border-radius: 0;
		font-size: 15.5px;
		font-weight: 600;
		line-height: 1.3;
		transition: color 160ms ease, background-color 160ms ease;
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li.has-child > a {
		padding-right: 50px;
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li > a:hover,
	#main-menu .sidebar-menu > ul.nav-sidebar > li > a:focus-visible {
		color: var(--tt-nav-brand-dark);
		background: rgba(39, 59, 148, .045);
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li.current-menu-item > a,
	#main-menu .sidebar-menu > ul.nav-sidebar > li.current-menu-ancestor > a,
	#main-menu .sidebar-menu > ul.nav-sidebar > li.current-menu-parent > a {
		padding-left: 14px;
		border: 0;
		color: var(--tt-nav-brand);
		background: transparent;
		font-weight: 680;
		box-shadow: none;
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li.current-menu-item::before,
	#main-menu .sidebar-menu > ul.nav-sidebar > li.current-menu-ancestor::before,
	#main-menu .sidebar-menu > ul.nav-sidebar > li.current-menu-parent::before {
		content: none;
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li > .toggle {
		top: 5px;
		right: 5px;
		border-radius: 9px;
	}

	#main-menu .sidebar-menu > ul.nav-sidebar > li > .toggle:hover,
	#main-menu .sidebar-menu > ul.nav-sidebar > li > .toggle:focus-visible {
		background: rgba(39, 59, 148, .065);
	}

	#main-menu .sidebar-menu ul.sub-menu.nav-sidebar-ul {
		margin: 2px 7px 9px 17px;
		padding: 2px 0 3px 10px;
		border-left-color: rgba(39, 59, 148, .11);
	}

	#main-menu .sidebar-menu ul.sub-menu.nav-sidebar-ul li > a {
		border-radius: 6px;
	}

	#main-menu .sidebar-menu ul.sub-menu.nav-sidebar-ul li.current-menu-item > a {
		color: var(--tt-nav-brand-dark);
		background: transparent;
	}

	/* Mobile language selector mirrors the compact segmented desktop control.
	   Full language names stay in the accessibility tree; hreflang supplies the
	   concise visible VI / EN labels. */
	#main-menu .mobile-sidebar-utility,
	.tt-catalog-drawer__utility {
		gap: 12px;
		padding: 18px 2px 2px;
		border-top-color: transparent;
	}

	#main-menu .mobile-sidebar-utility::before,
	.tt-catalog-drawer__utility-label {
		color: #4f5e71;
		font-size: 10px;
		font-weight: 720;
		letter-spacing: .09em;
	}

	#main-menu .mobile-lang-switch,
	.tt-catalog-drawer__languages {
		display: grid;
		width: 118px;
		min-width: 118px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2px;
		padding: 2px;
		border: 1px solid rgba(39, 59, 148, .14);
		border-radius: 999px;
		background: rgba(255, 255, 255, .34);
		box-shadow: none;
	}

	#main-menu .mobile-lang-switch a,
	.tt-catalog-drawer__languages a {
		position: relative;
		display: flex;
		min-width: 0;
		min-height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0 8px;
		border: 0;
		border-radius: 999px;
		color: #4f5e71;
		background: transparent;
		font-size: 0;
		font-weight: 740;
		line-height: 1;
		letter-spacing: .07em;
		text-decoration: none;
		transition: color 150ms ease, background-color 150ms ease;
	}

	#main-menu .mobile-lang-switch a::before,
	.tt-catalog-drawer__languages a::before {
		content: attr(hreflang);
		font-size: 11.5px;
		text-transform: uppercase;
	}

	/* Reset the legacy separator geometry on the second segment while keeping
	   its generated language code visible. */
	#main-menu .mobile-lang-switch a + a::before,
	.tt-catalog-drawer__languages a + a::before {
		position: static;
		top: auto;
		left: auto;
		width: auto;
		height: auto;
		content: attr(hreflang);
		background: none;
		transform: none;
	}

	#main-menu .mobile-lang-switch a:hover,
	#main-menu .mobile-lang-switch a:focus-visible,
	.tt-catalog-drawer__languages a:hover,
	.tt-catalog-drawer__languages a:focus-visible {
		color: var(--tt-nav-brand-dark);
		background: rgba(39, 59, 148, .055);
	}

	#main-menu .mobile-lang-switch a.active,
	.tt-catalog-drawer__languages a.active {
		color: var(--tt-nav-brand-dark);
		background: rgba(39, 59, 148, .09);
		box-shadow: none;
	}

	#main-menu .mobile-lang-switch a.active::after,
	.tt-catalog-drawer__languages a.active::after {
		border: 0;
		content: none;
	}

	#main-menu .mobile-lang-switch a .mobile-lang-flag {
		display: none;
	}

	#main-menu .mobile-lang-switch a > span:last-child {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		border: 0;
		white-space: nowrap;
	}

	/* Standalone catalog drawer follows the same system. */
	.tt-catalog-drawer {
		border: 1px solid var(--tt-drawer-line-strong);
		border-right: 0;
		border-radius: var(--tt-drawer-radius) 0 0 var(--tt-drawer-radius);
		background: linear-gradient(155deg, var(--tt-drawer-surface-a), var(--tt-drawer-surface-b));
		box-shadow: -12px 0 40px rgba(7, 26, 43, .14);
	}

	.tt-catalog-drawer__header {
		min-height: calc(72px + env(safe-area-inset-top));
		padding: env(safe-area-inset-top) 58px 0 18px;
		border-bottom-color: transparent;
	}

	.tt-catalog-drawer__body {
		padding: 8px 16px max(16px, env(safe-area-inset-bottom));
	}

	.tt-catalog-drawer__nav {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.tt-catalog-drawer__nav a {
		min-height: 56px;
		margin: 0;
		padding: 11px 12px 11px 14px;
		border: 0;
		border-radius: 0;
		background: transparent;
		transition: color 160ms ease, background-color 160ms ease;
	}

	.tt-catalog-drawer__nav a:hover,
	.tt-catalog-drawer__nav a:focus-visible {
		color: var(--tt-nav-brand-dark);
		background: rgba(39, 59, 148, .045);
	}

	.tt-catalog-drawer__nav a.active {
		padding-left: 14px;
		border: 0;
		color: var(--tt-nav-brand);
		background: transparent;
		font-weight: 680;
		box-shadow: none;
	}

	.tt-catalog-drawer__nav a.active::before {
		content: none;
	}
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	@media (max-width: 1099px) {
		.mfp-wrap.tt-main-menu-open,
		.tt-catalog-drawer-layer {
			--tt-drawer-surface-a: rgba(255, 255, 255, .94);
			--tt-drawer-surface-b: rgba(241, 245, 252, .92);
		}

		.mfp-wrap.tt-main-menu-open .mfp-content,
		.tt-catalog-drawer {
			-webkit-backdrop-filter: blur(10px) saturate(108%);
			backdrop-filter: blur(10px) saturate(108%);
		}
	}
}

@media (prefers-reduced-transparency: reduce) and (max-width: 1099px) {
	.mfp-wrap.tt-main-menu-open .mfp-content,
	.tt-catalog-drawer {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: #f7f9fd;
	}
}

@media (max-width: 359px) {
	.mfp-wrap.tt-main-menu-open .mfp-content,
	.tt-catalog-drawer {
		--tt-drawer-radius: 14px;
	}

	#main-menu .sidebar-menu,
	.tt-catalog-drawer__body {
		padding-right: 14px;
		padding-left: 14px;
	}
}

@media (forced-colors: active) and (max-width: 1099px) {
	.mfp-wrap.tt-main-menu-open .mfp-content,
	.tt-catalog-drawer,
	#main-menu .sidebar-menu > ul.nav-sidebar,
	.tt-catalog-drawer__nav,
	#main-menu .mobile-lang-switch,
	.tt-catalog-drawer__languages {
		border-color: CanvasText;
		background: Canvas;
		box-shadow: none;
		forced-color-adjust: auto;
	}
}