/* =========================================================
   Header
   ========================================================= */
.site-header {
	background: #fff;
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	/* Must outrank .nav-backdrop/.main-navigation (1000/1001, both defined
	   below). .site-header's own sticky+z-index makes it a stacking context,
	   so .main-navigation (the slide-in drawer), even with a nominally higher
	   z-index, is a DESCENDANT of that context and gets compared as a whole
	   against .nav-backdrop's context — a header z-index lower than the
	   backdrop's would make the backdrop paint over the entire header
	   subtree, including the open drawer, making every menu link
	   unclickable. Keep this above both. */
	z-index: 1010;
}

.header-utility-bar {
	background: var(--color-primary-dark);
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.875rem;
}
@media (max-width: 782px) {
	/* Hide the whole dark utility bar (hotline/location text) on mobile —
	   it only eats vertical space here since its one still-useful piece,
	   the language switcher, lives in .header-actions instead. */
	.header-utility-bar {
		display: none;
	}
}

.header-utility-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 20px;
}

.utility-left {
	display: flex;
	align-items: center;
	gap: 14px;
}

.utility-link {
	color: rgba(255, 255, 255, 0.9);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.utility-link-secondary::before {
	content: "/";
	margin-right: 8px;
	color: rgba(255, 255, 255, 0.5);
}

.utility-link:hover {
	color: #fff;
}

.utility-right {
	display: flex;
	align-items: center;
	gap: 18px;
}

.header-main-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 20px;
}

.header-search-mobile {
	display: none;
}
@media (max-width: 782px) {
	.header-search-mobile {
		display: block;
	}
}
@media (max-width: 782px) {
	/* main.js moves .header-search-mobile here (right after .nav-drawer-
	   head, before .primary-menu) and restyles it as a plain rounded
	   search pill — it no longer needs the border/margin it had sitting
	   below the links. */
	.header-search-mobile {
		flex-shrink: 0;
		padding: 12px 20px 14px;
		border-bottom: 1px solid var(--color-border);
		margin-bottom: 0;
	}
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.site-title-link {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-text);
}

/* Logo is a rectangular wordmark, not a round decorative mark — no
   border-radius/circular shadow here. Only the mark itself uses the logo's
   own colors; the rest of the site keeps its teal/orange palette. */
.site-logo-mark {
	height: 40px;
	width: auto;
	flex-shrink: 0;
}
@media (max-width: 782px) {
	.site-logo-mark {
		height: 32px;
	}
}

.site-title-group {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.site-title {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--color-primary);
}
@media (max-width: 782px) {
	.site-title {
		font-size: 1.0625rem;
	}
}

.site-tagline {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-light);
	margin-top: 2px;
}
@media (max-width: 782px) {
	/* .site-branding (logo + stacked title/tagline) has flex-shrink:0 and,
	   with the tagline shown, was wide enough that logo + branding + the
	   header-actions icon cluster didn't fit in one row below ~430px —
	   .header-main-inner (flex, nowrap) silently overflowed the viewport,
	   pushing .mobile-menu-toggle off-screen to the right (unreachable
	   without scrolling horizontally, which nothing here enables). Drop the
	   tagline and shrink the logo/title on mobile instead of letting the
	   row overflow. */
	.site-tagline {
		display: none;
	}
}

.header-search {
	flex: 1;
	max-width: 480px;
}
@media (max-width: 782px) {
	.header-search {
		display: none;
	}
}

.search-form {
	display: flex;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	overflow: hidden;
}

.search-field {
	flex: 1;
	border: 0;
	padding: 10px 16px;
	font-family: inherit;
	font-size: 1rem;
	outline: none;
}

.search-submit {
	border: 0;
	background: var(--color-primary);
	color: #fff;
	padding: 0 18px;
	cursor: pointer;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

.header-icon-link {
	position: relative;
	color: var(--color-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-bg-alt);
}

.icon {
	width: 20px;
	height: 20px;
	display: inline-block;
}

/* Self-colored line icons: mask-based so they automatically pick up
   whatever `color` applies in context (white on the dark bars, dark on
   light backgrounds) instead of needing a separate icon per color. */
.icon-user,
.icon-cart,
.icon-search,
.icon-heart,
.icon-phone,
.icon-globe,
.icon-home,
.icon-map,
.icon-facebook,
.icon-zalo,
.icon-mail,
.icon-whatsapp,
.icon-instagram,
.icon-youtube,
.icon-chat,
.icon-messenger,
.icon-wechat,
.icon-line,
.icon-kakaotalk {
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Real Lucide "phone" icon path (MIT-licensed, lucide-static@1.45.0) —
   use a verified library path here rather than hand-guessed coordinates,
   which tends to read as slightly off up close despite being recognizable. */
.icon-phone {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E");
}

.icon-globe {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.5 4 6 4 9s-1.5 6.5-4 9c-2.5-2.5-4-6-4-9s1.5-6.5 4-9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.5 4 6 4 9s-1.5 6.5-4 9c-2.5-2.5-4-6-4-9s1.5-6.5 4-9z'/%3E%3C/svg%3E");
}

.icon-map {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.4'/%3E%3C/svg%3E");
}

.icon-search {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
}

.icon-heart {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.9-7.5-10.2A4.3 4.3 0 0 1 12 7.5a4.3 4.3 0 0 1 7.5 2.8c0 5.3-7.5 10.2-7.5 10.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.9-7.5-10.2A4.3 4.3 0 0 1 12 7.5a4.3 4.3 0 0 1 7.5 2.8c0 5.3-7.5 10.2-7.5 10.2z'/%3E%3C/svg%3E");
}

.wishlist-btn.is-active .icon-heart,
.wishlist-toggle-link.is-active .icon-heart {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'%3E%3Cpath d='M12 20.5s-7.5-4.9-7.5-10.2A4.3 4.3 0 0 1 12 7.5a4.3 4.3 0 0 1 7.5 2.8c0 5.3-7.5 10.2-7.5 10.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'%3E%3Cpath d='M12 20.5s-7.5-4.9-7.5-10.2A4.3 4.3 0 0 1 12 7.5a4.3 4.3 0 0 1 7.5 2.8c0 5.3-7.5 10.2-7.5 10.2z'/%3E%3C/svg%3E");
}

.icon-user {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c0-4.1 3.4-6.5 7.5-6.5s7.5 2.4 7.5 6.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c0-4.1 3.4-6.5 7.5-6.5s7.5 2.4 7.5 6.5'/%3E%3C/svg%3E");
}

.icon-home {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 4l8 7.5'/%3E%3Cpath d='M6 10v9.5a1 1 0 0 0 1 1h3.5V15h3v5.5H17a1 1 0 0 0 1-1V10'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 4l8 7.5'/%3E%3Cpath d='M6 10v9.5a1 1 0 0 0 1 1h3.5V15h3v5.5H17a1 1 0 0 0 1-1V10'/%3E%3C/svg%3E");
}

.icon-cart {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l1 3M6.2 7l1.8 8.2a1.5 1.5 0 0 0 1.5 1.2h7a1.5 1.5 0 0 0 1.5-1.2L19.5 7H6.2z'/%3E%3Ccircle cx='10' cy='20' r='1.3'/%3E%3Ccircle cx='17' cy='20' r='1.3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l1 3M6.2 7l1.8 8.2a1.5 1.5 0 0 0 1.5 1.2h7a1.5 1.5 0 0 0 1.5-1.2L19.5 7H6.2z'/%3E%3Ccircle cx='10' cy='20' r='1.3'/%3E%3Ccircle cx='17' cy='20' r='1.3'/%3E%3C/svg%3E");
}

/* Footer social row (.footer-social-link) — the real official Facebook
   logomark (Simple Icons, CC0, simpleicons.org), not a hand-guessed
   approximation. Rendered via mask+currentColor same as every other icon
   here, so it stays a plain white silhouette on the dark footer rather
   than introducing Meta's own blue. */
.icon-facebook {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E");
}

/* Real Zalo logomark (Simple Icons) — see .icon-facebook above. */
.icon-zalo {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.49 10.2722v-.4496h1.3467v6.3218h-.7704a.576.576 0 01-.5763-.5729l-.0006.0005a3.273 3.273 0 01-1.9372.6321c-1.8138 0-3.2844-1.4697-3.2844-3.2823 0-1.8125 1.4706-3.2822 3.2844-3.2822a3.273 3.273 0 011.9372.6321l.0006.0005zM6.9188 7.7896v.205c0 .3823-.051.6944-.2995 1.0605l-.03.0343c-.0542.0615-.1815.206-.2421.2843L2.024 14.8h4.8948v.7682a.5764.5764 0 01-.5767.5761H0v-.3622c0-.4436.1102-.6414.2495-.8476L4.8582 9.23H.1922V7.7896h6.7266zm8.5513 8.3548a.4805.4805 0 01-.4803-.4798v-7.875h1.4416v8.3548H15.47zM20.6934 9.6C22.52 9.6 24 11.0807 24 12.9044c0 1.8252-1.4801 3.306-3.3066 3.306-1.8264 0-3.3066-1.4808-3.3066-3.306 0-1.8237 1.4802-3.3044 3.3066-3.3044zm-10.1412 5.253c1.0675 0 1.9324-.8645 1.9324-1.9312 0-1.065-.865-1.9295-1.9324-1.9295s-1.9324.8644-1.9324 1.9295c0 1.0667.865 1.9312 1.9324 1.9312zm10.1412-.0033c1.0737 0 1.945-.8707 1.945-1.9453 0-1.073-.8713-1.9436-1.945-1.9436-1.0753 0-1.945.8706-1.945 1.9436 0 1.0746.8697 1.9453 1.945 1.9453z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.49 10.2722v-.4496h1.3467v6.3218h-.7704a.576.576 0 01-.5763-.5729l-.0006.0005a3.273 3.273 0 01-1.9372.6321c-1.8138 0-3.2844-1.4697-3.2844-3.2823 0-1.8125 1.4706-3.2822 3.2844-3.2822a3.273 3.273 0 011.9372.6321l.0006.0005zM6.9188 7.7896v.205c0 .3823-.051.6944-.2995 1.0605l-.03.0343c-.0542.0615-.1815.206-.2421.2843L2.024 14.8h4.8948v.7682a.5764.5764 0 01-.5767.5761H0v-.3622c0-.4436.1102-.6414.2495-.8476L4.8582 9.23H.1922V7.7896h6.7266zm8.5513 8.3548a.4805.4805 0 01-.4803-.4798v-7.875h1.4416v8.3548H15.47zM20.6934 9.6C22.52 9.6 24 11.0807 24 12.9044c0 1.8252-1.4801 3.306-3.3066 3.306-1.8264 0-3.3066-1.4808-3.3066-3.306 0-1.8237 1.4802-3.3044 3.3066-3.3044zm-10.1412 5.253c1.0675 0 1.9324-.8645 1.9324-1.9312 0-1.065-.865-1.9295-1.9324-1.9295s-1.9324.8644-1.9324 1.9295c0 1.0667.865 1.9312 1.9324 1.9312zm10.1412-.0033c1.0737 0 1.945-.8707 1.945-1.9453 0-1.073-.8713-1.9436-1.945-1.9436-1.0753 0-1.945.8706-1.945 1.9436 0 1.0746.8697 1.9453 1.945 1.9453z'/%3E%3C/svg%3E");
}

/* Real Lucide "mail" icon (MIT), for the footer's brand-column contact
   list — swapped in the same pass as the icons below, for consistency. */
.icon-mail {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E");
}

/* Real WhatsApp logomark (Simple Icons), for the footer's WhatsApp contact
   row — see .icon-facebook above for why a traced brand mark is fine here. */
.icon-whatsapp {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E");
}

/* Real Instagram logomark (Simple Icons) — see .icon-facebook above. */
.icon-instagram {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E");
}

/* Real YouTube logomark (Simple Icons) — see .icon-facebook above. */
.icon-youtube {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

/* Real Lucide "message-circle" icon (MIT) — floating chat widget's toggle
   button, closed/open state (see .icon-x above for the open/"×" state). */
.icon-chat {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719'/%3E%3C/svg%3E");
}

/* Real Messenger logomark (Simple Icons) — see .icon-facebook above for why
   a traced brand mark is fine here. Floating chat widget only. */
.icon-messenger {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.24 0 0 4.952 0 11.64c0 3.499 1.434 6.521 3.769 8.61a.96.96 0 0 1 .323.683l.065 2.135a.96.96 0 0 0 1.347.85l2.381-1.053a.96.96 0 0 1 .641-.046A13 13 0 0 0 12 23.28c6.76 0 12-4.952 12-11.64S18.76 0 12 0m6.806 7.44c.522-.03.971.567.63 1.094l-4.178 6.457a.707.707 0 0 1-.977.208l-3.87-2.504a.44.44 0 0 0-.49.007l-4.363 3.01c-.637.438-1.415-.317-.995-.966l4.179-6.457a.706.706 0 0 1 .977-.21l3.87 2.505c.15.097.344.094.491-.007l4.362-3.008a.7.7 0 0 1 .364-.13'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.24 0 0 4.952 0 11.64c0 3.499 1.434 6.521 3.769 8.61a.96.96 0 0 1 .323.683l.065 2.135a.96.96 0 0 0 1.347.85l2.381-1.053a.96.96 0 0 1 .641-.046A13 13 0 0 0 12 23.28c6.76 0 12-4.952 12-11.64S18.76 0 12 0m6.806 7.44c.522-.03.971.567.63 1.094l-4.178 6.457a.707.707 0 0 1-.977.208l-3.87-2.504a.44.44 0 0 0-.49.007l-4.363 3.01c-.637.438-1.415-.317-.995-.966l4.179-6.457a.706.706 0 0 1 .977-.21l3.87 2.505c.15.097.344.094.491-.007l4.362-3.008a.7.7 0 0 1 .364-.13'/%3E%3C/svg%3E");
}

/* Real WeChat logomark (Simple Icons) — see .icon-facebook above. */
.icon-wechat {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z'/%3E%3C/svg%3E");
}

/* Real LINE logomark (Simple Icons) — see .icon-facebook above. */
.icon-line {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314'/%3E%3C/svg%3E");
}

/* Real KakaoTalk logomark (Simple Icons) — see .icon-facebook above. */
.icon-kakaotalk {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.125 0H1.875C.8394 0 0 .8394 0 1.875v20.25C0 23.1606.8394 24 1.875 24h20.25C23.1606 24 24 23.1606 24 22.125V1.875C24 .8394 23.1606 0 22.125 0zM12 18.75c-.591 0-1.1697-.0413-1.7317-.1209-.5626.3965-3.813 2.6797-4.1198 2.7225 0 0-.1258.0489-.2328-.0141s-.0876-.2282-.0876-.2282c.0322-.2198.8426-3.0183.992-3.5333-2.7452-1.36-4.5701-3.7686-4.5701-6.5135C2.25 6.8168 6.6152 3.375 12 3.375s9.75 3.4418 9.75 7.6875c0 4.2457-4.3652 7.6875-9.75 7.6875zM8.0496 9.8672h-.8777v3.3417c0 .2963-.2523.5372-.5625.5372s-.5625-.2409-.5625-.5372V9.8672h-.8777c-.3044 0-.552-.2471-.552-.5508s.2477-.5508.552-.5508h2.8804c.3044 0 .552.2471.552.5508s-.2477.5508-.552.5508zm10.9879 2.9566a.558.558 0 0 1 .108.4167.5588.5588 0 0 1-.2183.371.5572.5572 0 0 1-.3383.1135.558.558 0 0 1-.4493-.2236l-1.3192-1.7479-.1952.1952v1.2273a.5635.5635 0 0 1-.5627.5628.563.563 0 0 1-.5625-.5625V9.3281c0-.3102.2523-.5625.5625-.5625s.5625.2523.5625.5625v1.209l1.5694-1.5694c.0807-.0807.1916-.1252.312-.1252.1404 0 .2814.0606.3871.1661.0985.0984.1573.2251.1654.3566.0082.1327-.036.2542-.1241.3425l-1.2818 1.2817 1.3845 1.8344zm-8.3502-3.5023c-.095-.2699-.3829-.5475-.7503-.5557-.3663.0083-.6542.2858-.749.5551l-1.3455 3.5415c-.1708.5305-.0217.7272.1333.7988a.8568.8568 0 0 0 .3576.0776c.2346 0 .4139-.0952.4678-.2481l.2787-.7297 1.7152.0001.2785.7292c.0541.1532.2335.2484.4681.2484a.8601.8601 0 0 0 .3576-.0775c.1551-.0713.3041-.2681.1329-.7999l-1.3449-3.5398zm-1.3116 2.4433l.5618-1.5961.5618 1.5961H9.3757zm5.9056 1.3836c0 .2843-.2418.5156-.5391.5156h-1.8047c-.2973 0-.5391-.2314-.5391-.5156V9.3281c0-.3102.2576-.5625.5742-.5625s.5742.2523.5742.5625v3.3047h1.1953c.2974 0 .5392.2314.5392.5156z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.125 0H1.875C.8394 0 0 .8394 0 1.875v20.25C0 23.1606.8394 24 1.875 24h20.25C23.1606 24 24 23.1606 24 22.125V1.875C24 .8394 23.1606 0 22.125 0zM12 18.75c-.591 0-1.1697-.0413-1.7317-.1209-.5626.3965-3.813 2.6797-4.1198 2.7225 0 0-.1258.0489-.2328-.0141s-.0876-.2282-.0876-.2282c.0322-.2198.8426-3.0183.992-3.5333-2.7452-1.36-4.5701-3.7686-4.5701-6.5135C2.25 6.8168 6.6152 3.375 12 3.375s9.75 3.4418 9.75 7.6875c0 4.2457-4.3652 7.6875-9.75 7.6875zM8.0496 9.8672h-.8777v3.3417c0 .2963-.2523.5372-.5625.5372s-.5625-.2409-.5625-.5372V9.8672h-.8777c-.3044 0-.552-.2471-.552-.5508s.2477-.5508.552-.5508h2.8804c.3044 0 .552.2471.552.5508s-.2477.5508-.552.5508zm10.9879 2.9566a.558.558 0 0 1 .108.4167.5588.5588 0 0 1-.2183.371.5572.5572 0 0 1-.3383.1135.558.558 0 0 1-.4493-.2236l-1.3192-1.7479-.1952.1952v1.2273a.5635.5635 0 0 1-.5627.5628.563.563 0 0 1-.5625-.5625V9.3281c0-.3102.2523-.5625.5625-.5625s.5625.2523.5625.5625v1.209l1.5694-1.5694c.0807-.0807.1916-.1252.312-.1252.1404 0 .2814.0606.3871.1661.0985.0984.1573.2251.1654.3566.0082.1327-.036.2542-.1241.3425l-1.2818 1.2817 1.3845 1.8344zm-8.3502-3.5023c-.095-.2699-.3829-.5475-.7503-.5557-.3663.0083-.6542.2858-.749.5551l-1.3455 3.5415c-.1708.5305-.0217.7272.1333.7988a.8568.8568 0 0 0 .3576.0776c.2346 0 .4139-.0952.4678-.2481l.2787-.7297 1.7152.0001.2785.7292c.0541.1532.2335.2484.4681.2484a.8601.8601 0 0 0 .3576-.0775c.1551-.0713.3041-.2681.1329-.7999l-1.3449-3.5398zm-1.3116 2.4433l.5618-1.5961.5618 1.5961H9.3757zm5.9056 1.3836c0 .2843-.2418.5156-.5391.5156h-1.8047c-.2973 0-.5391-.2314-.5391-.5156V9.3281c0-.3102.2576-.5625.5742-.5625s.5742.2523.5742.5625v3.3047h1.1953c.2974 0 .5392.2314.5392.5156z'/%3E%3C/svg%3E");
}

/* Amenity chip icons (hotel list cards) — same mask+currentColor technique
   as the icons above, grouped separately so this list stays easy to scan. */
.icon-wifi,
.icon-pool,
.icon-breakfast,
.icon-shuttle,
.icon-scooter,
.icon-filter,
.icon-check,
.icon-x,
.icon-share,
.icon-star {
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.icon-wifi {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5a15 15 0 0 1 18 0'/%3E%3Cpath d='M6.5 12.5a10 10 0 0 1 11 0'/%3E%3Cpath d='M10 16.5a5 5 0 0 1 4 0'/%3E%3Ccircle cx='12' cy='20' r='1' fill='black' stroke='none'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5a15 15 0 0 1 18 0'/%3E%3Cpath d='M6.5 12.5a10 10 0 0 1 11 0'/%3E%3Cpath d='M10 16.5a5 5 0 0 1 4 0'/%3E%3Ccircle cx='12' cy='20' r='1' fill='black' stroke='none'/%3E%3C/svg%3E");
}

.icon-pool {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8.5c1.6-1.3 3.2-1.3 4.8 0s3.2 1.3 4.8 0 3.2-1.3 4.8 0 3.2 1.3 4.8 0'/%3E%3Cpath d='M2 13.5c1.6-1.3 3.2-1.3 4.8 0s3.2 1.3 4.8 0 3.2-1.3 4.8 0 3.2 1.3 4.8 0'/%3E%3Cpath d='M2 18.5c1.6-1.3 3.2-1.3 4.8 0s3.2 1.3 4.8 0 3.2-1.3 4.8 0 3.2 1.3 4.8 0'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8.5c1.6-1.3 3.2-1.3 4.8 0s3.2 1.3 4.8 0 3.2-1.3 4.8 0 3.2 1.3 4.8 0'/%3E%3Cpath d='M2 13.5c1.6-1.3 3.2-1.3 4.8 0s3.2 1.3 4.8 0 3.2-1.3 4.8 0 3.2 1.3 4.8 0'/%3E%3Cpath d='M2 18.5c1.6-1.3 3.2-1.3 4.8 0s3.2 1.3 4.8 0 3.2-1.3 4.8 0 3.2 1.3 4.8 0'/%3E%3C/svg%3E");
}

.icon-breakfast {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h13v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z'/%3E%3Cpath d='M17 10.5h1.5a2.5 2.5 0 0 1 0 5H17'/%3E%3Cpath d='M8 5.5c0-1 .8-1 .8-2M12 5.5c0-1 .8-1 .8-2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h13v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z'/%3E%3Cpath d='M17 10.5h1.5a2.5 2.5 0 0 1 0 5H17'/%3E%3Cpath d='M8 5.5c0-1 .8-1 .8-2M12 5.5c0-1 .8-1 .8-2'/%3E%3C/svg%3E");
}

.icon-shuttle {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15V10a1 1 0 0 1 1-1h2.5l2-3.5A1.5 1.5 0 0 1 9.8 5H16a1 1 0 0 1 1 1v3h2.5a1.5 1.5 0 0 1 1.5 1.5V15'/%3E%3Cpath d='M3 15h18'/%3E%3Ccircle cx='7.5' cy='17.5' r='1.6'/%3E%3Ccircle cx='17' cy='17.5' r='1.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15V10a1 1 0 0 1 1-1h2.5l2-3.5A1.5 1.5 0 0 1 9.8 5H16a1 1 0 0 1 1 1v3h2.5a1.5 1.5 0 0 1 1.5 1.5V15'/%3E%3Cpath d='M3 15h18'/%3E%3Ccircle cx='7.5' cy='17.5' r='1.6'/%3E%3Ccircle cx='17' cy='17.5' r='1.6'/%3E%3C/svg%3E");
}

/* Scooter/motorbike glyph, for Thuê Xe Máy cards/badges — same hand-drawn
   mask+currentColor technique as .icon-shuttle above, not an emoji/font
   glyph. */
.icon-scooter {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.3'/%3E%3Ccircle cx='18' cy='18' r='2.3'/%3E%3Cpath d='M3.7 18H3a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h3.3l2-3h3.2a1 1 0 0 1 1 1v2h2a3.5 3.5 0 0 1 3.5 3.5v.5h-1.5'/%3E%3Cpath d='M14.5 9.5 16 7h2.3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.3'/%3E%3Ccircle cx='18' cy='18' r='2.3'/%3E%3Cpath d='M3.7 18H3a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h3.3l2-3h3.2a1 1 0 0 1 1 1v2h2a3.5 3.5 0 0 1 3.5 3.5v.5h-1.5'/%3E%3Cpath d='M14.5 9.5 16 7h2.3'/%3E%3C/svg%3E");
}

/* Mobile nav-drawer menu icons — mask+currentColor like the row above,
   so every icon in that list
   tints the same neutral gray regardless of link state, rather than
   mixing in the fixed-teal .icon-boat/.icon-ticket/.icon-headset used
   elsewhere. .icon-nav-tour/-ticket/-contact reuse those icons' own
   path data under new mask-based classes for that reason; .icon-nav-
   hotel/-guide are new (no existing bed/book icon in this file). Xe Đưa
   Đón reuses .icon-shuttle directly above — already mask-based. */
.icon-nav-tour,
.icon-nav-hotel,
.icon-nav-ticket,
.icon-nav-guide,
.icon-nav-contact {
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.icon-nav-tour {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M12 4l4.5 5H12z' fill='black' stroke='none'/%3E%3Cpath d='M5 12h14l-2 6H7z'/%3E%3Cpath d='M3 19.5c1.8-1.3 3.6-1.3 5.4 0s3.6 1.3 5.4 0 3.6-1.3 5.4 0'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M12 4l4.5 5H12z' fill='black' stroke='none'/%3E%3Cpath d='M5 12h14l-2 6H7z'/%3E%3Cpath d='M3 19.5c1.8-1.3 3.6-1.3 5.4 0s3.6 1.3 5.4 0 3.6-1.3 5.4 0'/%3E%3C/svg%3E");
}

.icon-nav-hotel {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6'/%3E%3Cpath d='M3 19.5v-1M21 19.5v-1'/%3E%3Cpath d='M3 13V7a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2'/%3E%3Crect x='10' y='8' width='4.5' height='3' rx='1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6'/%3E%3Cpath d='M3 19.5v-1M21 19.5v-1'/%3E%3Cpath d='M3 13V7a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2'/%3E%3Crect x='10' y='8' width='4.5' height='3' rx='1'/%3E%3C/svg%3E");
}

.icon-nav-ticket {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v1.2a1.8 1.8 0 0 0 0 3.6V15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1.2a1.8 1.8 0 0 0 0-3.6z'/%3E%3Cpath d='M9 7.5v9' stroke-dasharray='1.6 1.8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v1.2a1.8 1.8 0 0 0 0 3.6V15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1.2a1.8 1.8 0 0 0 0-3.6z'/%3E%3Cpath d='M9 7.5v9' stroke-dasharray='1.6 1.8'/%3E%3C/svg%3E");
}

.icon-nav-guide {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5C4 4.7 4.7 4 5.5 4H11a2 2 0 0 1 2 2v14a2 2 0 0 0-2-2H4z'/%3E%3Cpath d='M20 5.5c0-.8-.7-1.5-1.5-1.5H13a2 2 0 0 0-2 2v14a2 2 0 0 1 2-2h7z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5C4 4.7 4.7 4 5.5 4H11a2 2 0 0 1 2 2v14a2 2 0 0 0-2-2H4z'/%3E%3Cpath d='M20 5.5c0-.8-.7-1.5-1.5-1.5H13a2 2 0 0 0-2 2v14a2 2 0 0 1 2-2h7z'/%3E%3C/svg%3E");
}

.icon-nav-contact {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v-1a8 8 0 0 1 16 0v1'/%3E%3Cpath d='M4 12v4a2 2 0 0 0 2 2h1v-6H5a1 1 0 0 0-1 1z'/%3E%3Cpath d='M20 12v4a2 2 0 0 1-2 2h-1v-6h2a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v-1a8 8 0 0 1 16 0v1'/%3E%3Cpath d='M4 12v4a2 2 0 0 0 2 2h1v-6H5a1 1 0 0 0-1 1z'/%3E%3Cpath d='M20 12v4a2 2 0 0 1-2 2h-1v-6h2a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
}

.icon-filter {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3Ccircle cx='9' cy='6' r='1.8' fill='black' stroke='none'/%3E%3Ccircle cx='15' cy='12' r='1.8' fill='black' stroke='none'/%3E%3Ccircle cx='9' cy='18' r='1.8' fill='black' stroke='none'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3Ccircle cx='9' cy='6' r='1.8' fill='black' stroke='none'/%3E%3Ccircle cx='15' cy='12' r='1.8' fill='black' stroke='none'/%3E%3Ccircle cx='9' cy='18' r='1.8' fill='black' stroke='none'/%3E%3C/svg%3E");
}

.icon-check {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
}

.icon-x {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
}

.icon-share {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5.5' r='2.5'/%3E%3Ccircle cx='6' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='18.5' r='2.5'/%3E%3Cpath d='M8.2 10.7l7.6-4.4M8.2 13.3l7.6 4.4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5.5' r='2.5'/%3E%3Ccircle cx='6' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='18.5' r='2.5'/%3E%3Cpath d='M8.2 10.7l7.6-4.4M8.2 13.3l7.6 4.4'/%3E%3C/svg%3E");
}

/* Hand-drawn line icons (SVG data URIs, brand teal) — used instead of emoji
   so these 4 core category icons render identically on every OS/browser. */
.icon-boat,
.icon-package,
.icon-crown,
.icon-ticket,
.icon-leaf,
.icon-bowl,
.icon-mic,
.icon-spa,
.icon-gym {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.icon-boat {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M12 4l4.5 5H12z' fill='%230e7c86' stroke='none'/%3E%3Cpath d='M5 12h14l-2 6H7z'/%3E%3Cpath d='M3 19.5c1.8-1.3 3.6-1.3 5.4 0s3.6 1.3 5.4 0 3.6-1.3 5.4 0'/%3E%3C/svg%3E");
}

.icon-package {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='12' rx='2'/%3E%3Cpath d='M9 8V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E");
}

.icon-crown {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17h16l-1.4-8-4 4-2.6-6-2.6 6-4-4L4 17z'/%3E%3Cpath d='M4 19.5h16'/%3E%3C/svg%3E");
}

.icon-ticket {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v1.2a1.8 1.8 0 0 0 0 3.6V15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1.2a1.8 1.8 0 0 0 0-3.6z'/%3E%3Cpath d='M9 7.5v9' stroke-dasharray='1.6 1.8'/%3E%3C/svg%3E");
}

/* Fixed brand-teal, used inside the white "CK Ngân Hàng" payment card
   (.footer-payment-badge--bank) — same technique as .icon-boat/.icon-ticket
   above, not mask+currentColor, since it always sits on that one white bg. */
.icon-bank {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-6 9 6'/%3E%3Cpath d='M4.5 10h15V19a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1z'/%3E%3Cpath d='M8 13.5v3.5M12 13.5v3.5M16 13.5v3.5'/%3E%3Cpath d='M3.5 20.5h17'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Sidebar "Chủ đề" filter icons (same hand-drawn brand-teal technique) */
.icon-leaf {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20c0-9 6-15 15-15 0 9-6 15-15 15z'/%3E%3Cpath d='M4 20c3-5 7-9 12-12'/%3E%3C/svg%3E");
}

.icon-bowl {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18a9 8 0 0 1-18 0z'/%3E%3Cpath d='M8 12V9M12 12V7M16 12V9'/%3E%3C/svg%3E");
}

.icon-mic {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0'/%3E%3Cpath d='M12 18v3M9 21h6'/%3E%3C/svg%3E");
}

/* Hotel amenity icons (khach-san.html) */
.icon-spa {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c-4-2-6-5.5-6-9 2 0 4 1 6 3 2-2 4-3 6-3 0 3.5-2 7-6 9z'/%3E%3Cpath d='M12 12c0-4 1.5-7 4-9-4 0-6.5 2.5-6.5 6.5'/%3E%3Cpath d='M12 12c0-4-1.5-7-4-9'/%3E%3C/svg%3E");
}

.icon-gym {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12h2.5M19 12h2.5M5 8.5v7M19 8.5v7M8 10.5v3M16 10.5v3M8 12h8'/%3E%3C/svg%3E");
}

/* Filled star (Hạng Sao classification, .star-rating below) — mask +
   currentColor like the rest of the icon set (not a fixed-color
   background-image like .icon-spa/.icon-gym above) since it needs to tint
   gold wherever it's used, not just teal. */
.icon-star {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.9-6.2 3.9 1.6-7-5.4-4.7 7.1-.6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.9-6.2 3.9 1.6-7-5.4-4.7 7.1-.6z'/%3E%3C/svg%3E");
}

/* Row of filled stars for a "Hạng Sao" tier (e.g. knt_hotel_rating terms'
   star_count, inc/post-types.php) — an objective classification tag, not
   a customer review score, so this is fine to render as real stars
   (content-guidelines.md's no-fake-ratings rule is about invented REVIEW
   data, not an admin-assigned star class like a "5-star resort"). */
.star-rating {
	display: inline-flex;
	gap: 2px;
	color: #f59e0b;
}

.star-rating .icon-star {
	width: 13px;
	height: 13px;
}

/* Trust badge icons (same technique, brand teal) */
.icon-shield-check,
.icon-support,
.icon-headset,
.icon-local-team,
.icon-payment,
.icon-shield,
.icon-clock,
.icon-tag {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.icon-shield-check {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

.icon-support {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-1a8 8 0 0 1 16 0v1'/%3E%3Crect x='2.5' y='13' width='4' height='6' rx='1.5'/%3E%3Crect x='17.5' y='13' width='4' height='6' rx='1.5'/%3E%3Cpath d='M20 19v1a2 2 0 0 1-2 2h-3'/%3E%3C/svg%3E");
}

/* Same mask/line-art technique as .icon-shield-check/.icon-support, not an
   emoji glyph, so it renders consistently across OS/browser font stacks in
   the same trust row. Distinct headset shape (band + two ear cups, no mic
   tail) so it doesn't look identical to .icon-support right next to it. */
.icon-headset {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v-1a8 8 0 0 1 16 0v1'/%3E%3Cpath d='M4 12v4a2 2 0 0 0 2 2h1v-6H5a1 1 0 0 0-1 1z'/%3E%3Cpath d='M20 12v4a2 2 0 0 1-2 2h-1v-6h2a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
}

.icon-local-team {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3 2.5-5 6-5s6 2 6 5'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M15.5 12.2c2.3.4 3.5 1.9 3.5 4.3'/%3E%3C/svg%3E");
}

/* Same fixed-teal SVG technique as .icon-shield-check/.icon-support/.icon-headset
   above, not emoji glyphs via ::before content, so rendering stays consistent
   across OS/browser font stacks. Used only in the trust-badges.php row
   (Đặt Chỗ An Toàn / Xác Nhận Tức Thì / Giá Tốt Nhất) — distinct from
   .icon-shield-check, which keeps its checkmark for other contexts. */
.icon-shield {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3C/svg%3E");
}

.icon-clock {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}

.icon-tag {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41L13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7' cy='7' r='0.9' fill='%230e7c86' stroke='none'/%3E%3C/svg%3E");
}

/* White variants, for icons placed on a dark/photo background (e.g. hero stat badge,
   the .shop-hero-features strip) */
.icon-local-team-white,
.icon-package-white,
.icon-shield-check-white,
.icon-support-white,
.icon-ticket-white,
.icon-time-white,
.icon-info-white {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.icon-local-team-white {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3 2.5-5 6-5s6 2 6 5'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M15.5 12.2c2.3.4 3.5 1.9 3.5 4.3'/%3E%3C/svg%3E");
}

.icon-package-white {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='12' rx='2'/%3E%3Cpath d='M9 8V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E");
}

.icon-shield-check-white {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

.icon-support-white {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-1a8 8 0 0 1 16 0v1'/%3E%3Crect x='2.5' y='13' width='4' height='6' rx='1.5'/%3E%3Crect x='17.5' y='13' width='4' height='6' rx='1.5'/%3E%3Cpath d='M20 19v1a2 2 0 0 1-2 2h-3'/%3E%3C/svg%3E");
}

.icon-info-white {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Ccircle cx='12' cy='7.8' r='0.9' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E");
}

.icon-ticket-white {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v1.2a1.8 1.8 0 0 0 0 3.6V15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1.2a1.8 1.8 0 0 0 0-3.6z'/%3E%3Cpath d='M9 7.5v9' stroke-dasharray='1.6 1.8'/%3E%3C/svg%3E");
}

.icon-time-white {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}

.icon-payment {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2'/%3E%3Cpath d='M2.5 9.5h19'/%3E%3Cpath d='M6 15h4'/%3E%3C/svg%3E");
}

/* Search-card field icons (gray, matches label color) */
.icon-pin-gray,
.icon-calendar,
.icon-guests,
.icon-time {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.icon-pin-gray {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.4'/%3E%3C/svg%3E");
}

.icon-calendar {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
}

.icon-guests {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.2 2.6-5 6-5s6 1.8 6 5'/%3E%3Ccircle cx='17' cy='9' r='2.2'/%3E%3Cpath d='M15.5 15.3c2 .4 3 1.8 3 4.7'/%3E%3C/svg%3E");
}

.icon-time {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}

/* Dark variant, for use on the orange accent button (e.g. header CTA) */
.icon-calendar-dark {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2937' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
}

.wishlist-toggle-link,
.wishlist-btn {
	background: var(--color-bg-alt);
	border: 0;
	cursor: pointer;
	font: inherit;
	color: var(--color-text);
}

.wishlist-btn.is-active .icon-heart,
.wishlist-toggle-link.is-active .icon-heart {
	color: #e0245e;
}

.wishlist-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--color-accent);
	color: #1f2937;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 999px;
	min-width: 18px;
	text-align: center;
}

.cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--color-accent);
	color: #1f2937;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 999px;
	min-width: 18px;
	text-align: center;
}

.mobile-menu-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
}
@media (max-width: 782px) {
	.mobile-menu-toggle {
		display: flex;
	}
}

.mobile-menu-toggle .bar {
	width: 22px;
	height: 2px;
	background: var(--color-text);
	display: block;
}

.main-navigation {
	flex: 1;
}
@media (max-width: 782px) {
	/* A branded head (logo/name/tagline) + search box + icon'd, sectioned
	   menu + a sticky footer CTA row, matching a Klook/Traveloka-style
	   mobile drawer. The head/
	   search/footer stay fixed while only the middle menu list scrolls —
	   .main-navigation is the flex column, .primary-menu is the one
	   scrollable child (flex:1 + min-height:0, same flex-item overflow
	   fix as .shop-toolbar-controls elsewhere in this file). The actual
	   DOM rearranging (brand block built from the existing logo, search
	   box moved above the menu, footer CTA appended, icons/section labels
	   injected into .primary-menu) happens once in main.js on load —
	   no markup changes needed per-page, so this applies to every
	   static-dev page and the real WP header.php alike. */
	.main-navigation {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(320px, 85vw);
		background: var(--color-bg);
		z-index: 1001;
		display: flex;
		flex-direction: column;
		box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18);
		transform: translateX(100%);
		transition: transform 0.28s ease;
	}
}

.nav-drawer-head,
.nav-backdrop {
	display: none;
}
@media (max-width: 782px) {
	.nav-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		flex-shrink: 0;
		padding: 18px 16px 14px 20px;
		border-bottom: 1px solid var(--color-border);
	}
}
@media (max-width: 782px) {
	.nav-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(9, 20, 23, 0.45);
		z-index: 1000;
	}
}

/* Same "hidden outside the mobile drawer" base as .nav-drawer-head above
   — main.js builds/injects these (section labels + footer CTA) into the
   very same .primary-menu/.main-navigation elements the DESKTOP inline
   nav bar also renders (there's only one drawer/menu in the DOM, shared
   between both layouts), so without this they don't just stay invisible
   on desktop, they show up as real extra items IN that horizontal bar —
   ".nav-section-label" as literal "Khám Phá"/"Thông Tin" nav links, and
   ".nav-drawer-footer" as two loose buttons following the menu (missed
   in testing since this session only checked mobile widths). */
.nav-section-label,
.nav-drawer-footer {
	display: none;
}
@media (max-width: 782px) {
	/* Section labels ("Khám Phá" / "Thông Tin") — <li> so they stay valid
	   inside the <ul>, injected by main.js before the first item and
	   before whichever item is "Cẩm Nang". */
	.nav-section-label {
		display: block;
		padding: 14px 6px 4px;
		font-size: 0.75rem;
		font-weight: 800;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--color-text-light);
	}
}
@media (max-width: 782px) {
	/* Sticky footer CTA row — main.js appends this as the last child of
	   .main-navigation, outside the scrollable .primary-menu, so it stays
	   put like the head/search above. */
	.nav-drawer-footer {
		display: flex;
		gap: 10px;
		flex-shrink: 0;
		padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--color-border);
	}
}

.nav-item-icon {
	display: none;
}
@media (max-width: 782px) {
	.nav-item-icon {
		display: inline-block;
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		color: var(--color-text-light);
	}
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: 2px;
}
@media (max-width: 782px) {
	/* The one scrollable region between the fixed head/search above and
	   the fixed footer CTA below — min-height:0 is required for a flex
	   item to actually respect flex:1 instead of growing to its content's
	   height. */
	.primary-menu {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		flex-direction: column;
		gap: 2px;
		padding: 6px 20px 16px;
	}
}

.primary-menu > li {
	position: relative;
}

.primary-menu > li > a {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 10px;
	border-radius: 8px;
	color: var(--color-text);
	font-weight: 600;
	font-size: 0.8125rem;
	white-space: nowrap;
}
@media (max-width: 782px) {
	.primary-menu > li > a {
		padding: 10px 6px;
		gap: 10px;
	}
}

.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a {
	background: var(--color-bg-alt);
	color: var(--color-primary);
}

.menu-chevron {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.55;
	margin-left: 2px;
}
@media (max-width: 782px) {
	/* Toggle chevron for the one accordion item — same rotated-corner
	   shape as .nav-item-arrow, but interactive: main.js toggles
	   .is-collapsed on click, independent of the link itself (tapping
	   the label still navigates to tour.html; tapping just the chevron
	   expands/collapses .sub-menu). Expanded (pointing up) is the
	   default, matching this list's previous always-expanded behavior. */
	.menu-chevron {
		display: inline-flex;
		width: 7px;
		height: 7px;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		transform: rotate(-45deg);
		opacity: 0.7;
		flex-shrink: 0;
		margin-left: auto;
		transition: transform 0.2s ease;
		padding: 6px;
		margin-right: -6px;
	}
}

.primary-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 8px;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
	z-index: 60;
}
@media (max-width: 782px) {
	.primary-menu .sub-menu {
		display: block;
		position: static;
		box-shadow: none;
		border: 0;
		background: rgba(14, 124, 134, 0.08);
		padding: 0 14px 4px;
		margin: 0 0 8px;
		border-radius: 0 0 12px 12px;
	}
}

.menu-item-has-children:hover > .sub-menu {
	display: block;
}

.primary-menu .sub-menu li a {
	display: block;
	padding: 9px 12px;
	border-radius: 6px;
	color: var(--color-text);
	font-weight: 500;
	font-size: 0.875rem;
}
@media (max-width: 782px) {
	.primary-menu .sub-menu li a {
		padding: 12px 6px;
		font-weight: 600;
		color: var(--color-primary-dark);
	}
}

.primary-menu .sub-menu li a:hover {
	background: var(--color-bg-alt);
	color: var(--color-primary);
}

/* Language switcher */
.lang-switcher {
	position: relative;
}

/* .lang-switcher-toggle lives in .header-actions and gets its circular
   icon-button look from the shared .header-icon-link class in the
   markup — this rule only
   needs to override that class's cursor/font default and undo the plain-
   text styling this button had back when it lived in the dark
   .header-utility-bar. .lang-switcher-current (the "VI" code) is hidden so
   the button reads as an icon, same visual weight as its neighbors. */
.lang-switcher-toggle {
	cursor: pointer;
	font: inherit;
}

.lang-switcher-current {
	display: none;
}

.lang-switcher-menu {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	min-width: 140px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index: 1000;
	overflow: hidden;
}

.lang-switcher.is-open .lang-switcher-menu {
	display: block;
}

.lang-switcher-menu a {
	display: block;
	padding: 10px 14px;
	color: var(--color-text);
	font-size: 0.875rem;
}

.lang-switcher-menu a:hover,
.lang-switcher-menu a.is-current {
	background: var(--color-bg-alt);
	color: var(--color-primary);
}







/* =========================================================
   Mobile bottom nav — disabled. Markup/template still rendered
   (knt-store/template-parts/mobile-bottom-nav.php + the same
   markup duplicated across static-dev/*.html) but always hidden; no
   media query un-hides it anymore. Left in place rather than stripped
   from every file since it's inert either way.
   ========================================================= */
.mobile-bottom-nav {
	display: none;
}

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

/* =========================================================
   Header utility bar (tagline, divider, "Liên Hệ Tư Vấn" CTA pill) —
   emitted by header.php on every page, so this stays always-loaded
   rather than gated to pages/home.css's per-page-type condition.
   ========================================================= */
.utility-tagline {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
}

.utility-divider {
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, 0.25);
	flex-shrink: 0;
}

.utility-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
	color: #1f2937;
	font-weight: 700;
	font-size: 0.8125rem;
	padding: 7px 16px;
	border-radius: 999px;
	box-shadow: 0 6px 14px rgba(247, 147, 30, 0.35);
	white-space: nowrap;
}

.utility-cta:hover {
	color: #1f2937;
	box-shadow: 0 8px 18px rgba(247, 147, 30, 0.45);
	transform: translateY(-1px);
}

.utility-cta .icon {
	width: 14px;
	height: 14px;
}