/* Group stylesheet for the navigation widgets. */

.alovesinh-brand-logo {
	display: inline-flex;
}

.alovesinh-brand-logo-lifted {
	--alv-brand-mark-radius: var(--alv-r-2);
	--alv-brand-mark-shadow: 0 var(--alv-sp-1) var(--alv-sp-2b) var(--alv-c-brand-veil);
}

.alovesinh-anchor .elementor-widget-alovesinh-brand-logo {
	display: flex;
}

/* Bare by default; only the footer lifts the mark off a dark ground. Written from the widget root, whose
	class and the image's outrank Elementor's `.elementor img { height: auto; border-radius: 0; box-shadow: none }`. */
.alovesinh-brand-logo .alovesinh-brand-logo-image,
.alovesinh-mega-menu .alovesinh-mega-menu-drawer-logo {
	flex-shrink: 0;

	/* Only the height belongs to the design: a wide wordmark keeps its own width instead of
		shrinking into the square an icon mark fills. */
	width: auto;
	height: var(--alv-brand-mark-size, var(--alv-h-logo));
	border-radius: var(--alv-brand-mark-radius, 0);
	object-fit: contain;
	box-shadow: var(--alv-brand-mark-shadow, none);
}

.alovesinh-brand-logo-name {
	font-size: var(--alv-fs-4);
	font-weight: var(--alv-fw-extrabold);
	letter-spacing: var(--alv-tr-tight-1);
	color: var(--alv-block-title);
}

/* Tighter than the shared row and set in the caption size, which is what tells a reader the trail
	is scaffolding rather than content. The last crumb is a span, so only the links answer hover:
	a hover on every crumb would paint the current page as a link. */
.alovesinh-breadcrumb {
	--alv-row-wrap: wrap;
	gap: var(--alv-sp-1a);
	margin-bottom: var(--alv-sp-3);
	font-size: var(--alv-fs-2);
	color: var(--alv-c-text-muted);
}

.alovesinh-breadcrumb a:hover {
	color: var(--alv-c-brand-deep);
}

/* The trail has no frame, so each crumb is cut to its letters and the strip's edges are the ink:
	otherwise the line spacing over the first line adds to the space above the block it opens. */
.alovesinh-breadcrumb > * {
	text-box: trim-both cap alphabetic;
}

/* Both rows are centred wrapping strips, so the row rules are written once and each strip states
	its own gap and its own spacing above: written twice, the two strips drift apart when one is tuned. */
.alovesinh-filter-links,
.alovesinh-pagination {
	--alv-row-wrap: wrap;
	justify-content: center;
}

/* The source design leaves this row's cross axis alone, so its chips stretch to one another's
	height; centring them would break the row apart the moment one chip wraps to two lines. */
.alovesinh-filter-links {
	--alv-row-align: stretch;

	gap: var(--alv-sp-2);
	margin-bottom: var(--alv-sp-4);
}

/* The source design's chip is inline-flex. The floor is named too, the way the page box beside
	it names one. */
.alovesinh-filter-links-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--alv-touch);
	padding: var(--alv-sp-1c) var(--alv-sp-2d);
	border-radius: var(--alv-r-pill);
	white-space: nowrap;
	transition:
		border-color var(--alv-dur-1) ease,
		color var(--alv-dur-1) ease;
}

.alovesinh-pagination {
	gap: var(--alv-sp-1);
	margin-top: var(--alv-sp-5);
}

/* A page box is a touch target before it is a number, so the 44px floor holds even for a single digit.
	An archive's strip is printed by paginate_links(), hence core's page-numbers, current and dots. */
.alovesinh-pagination-page,
.alovesinh-pagination .page-numbers:not(.dots) {
	display: grid;
	place-items: center;
	min-width: var(--alv-touch);
	min-height: var(--alv-touch);
	padding: 0 var(--alv-sp-2);
	border-radius: var(--alv-r-2);
}

.alovesinh-filter-links-link,
.alovesinh-pagination-page,
.alovesinh-pagination .page-numbers:not(.dots) {
	border: var(--alv-bd-hairline) solid var(--alv-c-border);
	font-size: var(--alv-fs-3);
	font-weight: var(--alv-fw-semibold);
	color: var(--alv-c-text-2);
	background: var(--alv-c-white);
}

.alovesinh-filter-links-link:not(.alovesinh-filter-links-link-current):hover,
.alovesinh-pagination-page:not(.alovesinh-pagination-page-current):hover,
.alovesinh-pagination .page-numbers:not(.current, .dots):hover {
	border-color: var(--alv-c-brand);
	color: var(--alv-c-brand-deep);
}

.alovesinh-filter-links-link-current,
.alovesinh-pagination-page-current,
.alovesinh-pagination .page-numbers.current {
	border-color: var(--alv-c-brand-deep);
	color: var(--alv-c-white);
	background: var(--alv-c-brand-deep);
}

/* The skip mark is not a target: a boxed ellipsis reads as a page the reader can open. */
.alovesinh-pagination .dots {
	display: grid;
	place-items: center;
	min-height: var(--alv-touch);
	padding: 0 var(--alv-sp-1);
	color: var(--alv-c-text-muted);
}

.alovesinh-mega-menu {
	--alv-menu-quick: var(--alv-dur-menu-quick);
	--alv-menu-slow: var(--alv-dur-menu-slow);

	/* A hold, not motion, so the reduced-motion rule leaves it alone while the pointer crosses the header gap. */
	--alv-menu-grace: var(--alv-menu-quick);
	--alv-menu-intent: var(--alv-menu-quick);
	--alv-menu-card-radius: var(--alv-r-2a);
	--alv-menu-panel-shut-shift: none;
	--alv-menu-drawer-shut-shift: translateX(100%);
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: flex-end;
}

/* Elementor gives a child container `width: var( --width )` of 100%, so the cluster beside the bar takes the
	whole header frame and lies over the last menu items. The width is the property itself: on a phone
	Elementor rewrites --width at 0-2-0. */
.elementor-widget-alovesinh-mega-menu ~ .e-con {
	--flex-grow: 0;
	width: auto;
}

.alovesinh-dau-trang .elementor-widget-alovesinh-mega-menu ~ .e-con.alovesinh-grid {
	margin-inline: 0;
}

/* Hidden first and shown from the width each was shown at: a device box prints only as a max-width query. */
.alovesinh-dau-trang .elementor-widget-alovesinh-mega-menu ~ .e-con,
.alovesinh-dau-trang .elementor-widget-alovesinh-pill {
	display: none;
}

/* The row's flex item is Elementor's widget wrapper, not the nav inside it, so order and the
	growth rules have to sit here: on the nav the row never sees them and the hamburger stays
	stranded between the logo and the header cluster instead of ending the row. */
.elementor-widget-alovesinh-mega-menu {
	--flex-grow: 0;
	--flex-shrink: 0;
	--flex-basis: auto;
	--order: 3;
	margin-left: auto;
}

.alovesinh-mega-menu-frame {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: var(--alv-z-4);
	display: none;
	visibility: hidden;
	overflow-y: auto;
	flex-direction: column;
	align-items: stretch;
	gap: var(--alv-sp-1a);
	width: min(var(--alv-w-menu-drawer), var(--alv-w-menu-drawer-cap));
	padding: var(--alv-sp-3);
	background: var(--alv-c-white);
	box-shadow: var(--alv-sh-3);
	transform: var(--alv-menu-drawer-shut-shift);
	transition:
		transform var(--alv-menu-slow) ease,
		visibility var(--alv-menu-slow),
		display var(--alv-menu-slow) allow-discrete;
}

.admin-bar .alovesinh-mega-menu-frame {
	top: var(--wp-admin--admin-bar--height, 0);
}

.alovesinh-mega-menu-open .alovesinh-mega-menu-frame {
	display: flex;
	visibility: visible;
	transform: none;
}

@starting-style {
	.alovesinh-mega-menu-open .alovesinh-mega-menu-frame {
		transform: var(--alv-menu-drawer-shut-shift);
	}
}

.alovesinh-mega-menu-list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--alv-sp-0b);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A button shrinks to its label where a link fills the row, so the full width is set for both:
	otherwise the arrow sits against the words and the right half of the row takes no tap. */
.alovesinh-mega-menu-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--alv-sp-1);
	width: 100%;
	min-height: var(--alv-sp-5);
	padding: var(--alv-sp-2);
	border: 0;
	border-radius: var(--alv-r-1);
	font-family: inherit;
	font-size: var(--alv-fs-3a);
	font-weight: var(--alv-fw-semibold);
	color: var(--alv-c-text-2);
	background: transparent;
	cursor: pointer;
	transition:
		color var(--alv-menu-quick) ease,
		background var(--alv-menu-quick) ease;
}

.alovesinh-mega-menu-link:hover,
.alovesinh-mega-menu-link[aria-expanded='true'] {
	color: var(--alv-c-brand-deep);
	background: var(--alv-c-brand-wash);
}

.alovesinh-mega-menu-arrow {
	width: var(--alv-sp-2b);
	height: var(--alv-sp-2b);
	transition: transform var(--alv-menu-quick) ease;
}

.alovesinh-mega-menu-link[aria-expanded='true'] .alovesinh-mega-menu-arrow {
	transform: rotate(var(--alv-turn-menu-arrow));
}

.alovesinh-mega-menu-item + .alovesinh-mega-menu-item {
	border-top: var(--alv-bd-hairline) solid var(--alv-c-border);
}

.alovesinh-mega-menu-panel {
	/* Closed, a panel hidden only by visibility is still laid out on every page load; allow-discrete keeps its fade. */
	display: none;
	visibility: hidden;
	grid-template-rows: 0fr;
	width: min(100%, var(--alv-w-menu-panel));
	margin-inline: auto;
	opacity: 0;
	transform: var(--alv-menu-panel-shut-shift);
	transition:
		grid-template-rows var(--alv-menu-slow) ease,
		opacity var(--alv-menu-quick) ease,
		visibility var(--alv-menu-quick),
		display var(--alv-menu-slow) allow-discrete;
}

.alovesinh-mega-menu-item-open .alovesinh-mega-menu-panel {
	display: grid;
	visibility: visible;
	grid-template-rows: 1fr;
	opacity: 1;
	transform: none;
}

@starting-style {
	.alovesinh-mega-menu-item-open .alovesinh-mega-menu-panel {
		grid-template-rows: 0fr;
		opacity: 0;
		transform: var(--alv-menu-panel-shut-shift);
	}
}

.alovesinh-mega-menu-panel-inner {
	display: grid;
	overflow: hidden;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--alv-sp-2);
	min-height: 0;
	padding: 0 0 var(--alv-sp-2);
	border: 0;
	border-radius: 0;
	background: var(--alv-c-white);
	box-shadow: none;
}

.alovesinh-mega-menu-card-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--alv-sp-1a);
	margin: 0;
	padding: 0;
	list-style: none;
}

.alovesinh-mega-menu-card {
	display: flex;
	align-items: center;
	gap: var(--alv-sp-2b);
	padding: var(--alv-sp-1c);
	border: var(--alv-bd-hairline) solid var(--alv-c-border);
	border-radius: var(--alv-menu-card-radius);
	transition:
		border-color var(--alv-menu-quick) ease,
		background var(--alv-menu-quick) ease,
		transform var(--alv-menu-quick) ease;
}

.alovesinh-mega-menu-card:hover {
	border-color: var(--alv-c-brand-edge);
	background: var(--alv-c-brand-wisp);
	transform: translateY(calc(-1 * var(--alv-sp-0b)));
}

/* From the card, as the brand mark is from its root: Elementor's image reset would otherwise give the
	thumbnail its natural height and square corners. */
.alovesinh-mega-menu-card .alovesinh-mega-menu-card-image {
	flex-shrink: 0;
	width: var(--alv-sp-6);
	height: var(--alv-sp-6);
	border-radius: var(--alv-r-2);
	object-fit: cover;
}

/* A decorative tile nobody clicks on its own - deliberately NOT --alv-touch even though both
	are 44px: sharing them would inflate this tile whenever the real buttons grow. */
.alovesinh-mega-menu-card-icon {
	flex-shrink: 0;
	width: var(--alv-sp-4d);
	height: var(--alv-sp-4d);
	border-radius: var(--alv-r-2);
	color: var(--alv-c-brand-deep);
	background: var(--alv-c-brand-tint);
}

.alovesinh-mega-menu-card-icon svg {
	width: var(--alv-sp-3);
	height: var(--alv-sp-3);
}

.alovesinh-mega-menu-card-text {
	min-width: 0;
}

.alovesinh-mega-menu-card-name {
	display: block;
	margin-bottom: var(--alv-sp-0d);
	font-size: var(--alv-fs-3);
	font-weight: var(--alv-fw-bold);
	color: var(--alv-c-ink);
}

.alovesinh-mega-menu-card-description {
	display: block;
	font-size: var(--alv-fs-2);
	line-height: var(--alv-lh-base);
	color: var(--alv-c-text-muted);
}

.alovesinh-mega-menu-aside {
	display: flex;
	flex-direction: column;
	gap: var(--alv-sp-2);
	padding: var(--alv-sp-3);
	border-radius: var(--alv-r-3);
	background: var(--alv-c-bg-light);
}

.alovesinh-mega-menu-aside-description {
	margin: 0;
	font-size: var(--alv-fs-2a);
	line-height: var(--alv-lh-copy);
	color: var(--alv-c-text-2);
}

.alovesinh-mega-menu-drawer-open {
	display: grid;
	place-items: center;
	width: var(--alv-touch);
	height: var(--alv-touch);
	border: var(--alv-bd-hairline) solid var(--alv-c-border);
	border-radius: var(--alv-r-2);
	color: var(--alv-c-ink);
	background: var(--alv-c-white);
}

.alovesinh-mega-menu-quick-call {
	display: flex;
	align-items: center;
	gap: var(--alv-sp-2);
	padding: var(--alv-sp-2);
	border-radius: var(--alv-menu-card-radius);
	color: var(--alv-c-white);
	background: var(--alv-c-brand-deep);
}

.alovesinh-mega-menu-quick-call-icon {
	flex-shrink: 0;
	width: var(--alv-sp-4b);
	height: var(--alv-sp-4b);
	border-radius: var(--alv-r-2);
	background: var(--alv-c-glass-edge);
}

/* 12px, a step below the shared caption size: the label sits above a 19px number inside a
	coloured tile, where the caption size reads as a second line of content rather than a tag. */
.alovesinh-mega-menu-quick-call-label {
	display: block;
	font-size: var(--alv-fs-1a);
	letter-spacing: var(--alv-tr-wide-1);
	text-transform: uppercase;
	color: var(--alv-c-on-dark);
}

.alovesinh-mega-menu-quick-call-number {
	display: block;
	font-size: var(--alv-fs-cta);
	font-weight: var(--alv-fw-extrabold);
	letter-spacing: var(--alv-tr-tight-1);
}

.alovesinh-mega-menu-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--alv-sp-2);
	border-bottom: var(--alv-bd-hairline) solid var(--alv-c-border);
}

.alovesinh-mega-menu-drawer-brand {
	display: flex;
	align-items: center;
	gap: var(--alv-sp-2);
	font-size: var(--alv-fs-4);
	font-weight: var(--alv-fw-extrabold);
	color: var(--alv-c-ink);
}

.alovesinh-mega-menu-drawer-close {
	display: grid;
	place-items: center;
	width: var(--alv-touch);
	height: var(--alv-touch);
	border: 0;
	border-radius: var(--alv-r-2);
	color: var(--alv-c-text-2);
	background: var(--alv-c-bg-light);
	cursor: pointer;
}

.alovesinh-mega-menu-drawer-foot {
	display: flex;
	flex-direction: column;
	gap: var(--alv-sp-1c);
	margin-top: auto;
	padding-top: var(--alv-sp-2c);
	padding-bottom: env(safe-area-inset-bottom);
	border-top: var(--alv-bd-hairline) solid var(--alv-c-border);
}

.alovesinh-mega-menu-drawer-hours {
	font-size: var(--alv-fs-2);
	text-align: center;
	color: var(--alv-c-text-muted);
}

.alovesinh-mega-menu-drawer-button {
	justify-content: center;
}

.alovesinh-mega-menu-drawer-social {
	display: flex;
	justify-content: center;
	gap: var(--alv-sp-1c);
}

/* Full touch size even though the icon is 20px: this row sits at the very bottom of a drawer,
	which is where a thumb lands least accurately. */
.alovesinh-mega-menu-drawer-social-link {
	width: var(--alv-touch);
	height: var(--alv-touch);
	border-radius: var(--alv-r-circle);
	color: var(--alv-c-text-2);
	background: var(--alv-c-bg-light);
}

/* The source design draws these as 20px inline drawings; the icon library hands over artwork
	at its own size and in its own black, which fills the whole 44px tile and hides it. */
.alovesinh-mega-menu-drawer-social-link svg {
	width: var(--alv-sp-3);
	height: var(--alv-sp-3);
	fill: currentcolor;
}

.alovesinh-mega-menu-drawer-social-link-zalo {
	color: var(--alv-c-white);
	background: var(--alv-c-zalo);
}

.alovesinh-mega-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--alv-z-3);
	display: block;
	visibility: hidden;
	background: var(--alv-c-ink-dim);
	opacity: 0;
	transition:
		opacity var(--alv-menu-slow) ease,
		visibility var(--alv-menu-slow);
}

.alovesinh-mega-menu-open .alovesinh-mega-menu-overlay {
	visibility: visible;
	opacity: 1;
}

.alovesinh-mega-menu-scroll-lock {
	overflow: hidden;
}

/* The gutter stays reserved while the page is locked, so hiding the scrollbar moves nothing. */
:root:has(.alovesinh-mega-menu-scroll-lock) {
	scrollbar-gutter: stable;
}

.alovesinh-mega-menu-link[aria-current='page'] {
	font-weight: var(--alv-fw-bold);
	color: var(--alv-c-brand-deep);
}

.alovesinh-mega-menu-link:focus-visible,
.alovesinh-mega-menu-card:focus-visible,
.alovesinh-mega-menu-drawer-open:focus-visible,
.alovesinh-mega-menu-drawer-close:focus-visible {
	outline: var(--alv-bd-thick) solid var(--alv-c-brand-deep);
	outline-offset: var(--alv-sp-0b);
}

.alovesinh-chan-trang .alovesinh-brand-logo {
	margin-bottom: var(--alv-sp-2);
}

.alovesinh-chan-trang .alovesinh-brand-logo-name {
	color: var(--alv-c-white);
}

@media (min-width: 561px) {
	.alovesinh-dau-trang .elementor-widget-alovesinh-mega-menu ~ .e-con {
		display: flex;
	}
}

@media (min-width: 981px) {
	.alovesinh-dau-trang .elementor-widget-alovesinh-pill {
		display: block;
	}
}

@media (min-width: 1241px) {
	.alovesinh-mega-menu {
		--alv-menu-panel-shut-shift: translateY(calc(-1 * var(--alv-sp-1a)));
		justify-content: flex-start;
	}

	.elementor-widget-alovesinh-mega-menu {
		--flex-grow: initial;
		--flex-shrink: initial;
		--flex-basis: initial;
		--order: initial;
		margin-left: 0;
	}

	.alovesinh-mega-menu-frame {
		position: static;
		top: auto;
		right: auto;
		bottom: auto;
		z-index: auto;
		display: flex;
		visibility: inherit;
		overflow-y: visible;
		flex-direction: row;
		align-items: center;
		gap: normal;
		width: auto;
		padding: 0;
		background: none;
		box-shadow: none;
		transform: none;
		transition: none;
	}

	.alovesinh-mega-menu-list {
		flex-direction: row;
		align-items: center;
		gap: var(--alv-sp-0d);
	}

	.alovesinh-mega-menu-link {
		justify-content: normal;
		width: auto;
		min-height: auto;
		padding: var(--alv-sp-1c) var(--alv-sp-2);
		font-size: var(--alv-fs-3);
		font-weight: var(--alv-fw-medium);
	}

	.alovesinh-mega-menu-item + .alovesinh-mega-menu-item {
		border-top: 0;
	}

	.alovesinh-mega-menu-panel {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;

		/* Elementor positions every widget, and the widgets after the header would paint over the panel. */
		z-index: var(--alv-z-2);
		grid-template-rows: none;

		/* Padding, not margin: the space above the card belongs to the panel, so a pointer in it is already back
			inside the item; only the header's own gap above is left to the close delay. */
		padding-top: var(--alv-sp-1c);
		transition:
			opacity var(--alv-menu-quick) ease,
			transform var(--alv-menu-quick) ease,
			visibility var(--alv-menu-quick),
			display var(--alv-menu-quick) allow-discrete;
	}

	.alovesinh-mega-menu-item-open .alovesinh-mega-menu-panel {
		display: block;
		grid-template-rows: none;
		transform: translateY(0);
	}

	.alovesinh-mega-menu-list:has(> .alovesinh-mega-menu-item-open)
		> .alovesinh-mega-menu-item:not(.alovesinh-mega-menu-item-open)
		.alovesinh-mega-menu-panel {
		transition-delay: 0s;
	}

	.alovesinh-mega-menu-panel-inner {
		overflow: visible;
		grid-template-columns: minmax(0, 1fr) var(--alv-w-menu-aside);
		gap: var(--alv-sp-3b);
		min-height: auto;
		padding: var(--alv-sp-3);
		border: var(--alv-bd-hairline) solid var(--alv-c-border);
		border-radius: var(--alv-r-4);
		box-shadow: var(--alv-sh-3);
	}

	.alovesinh-mega-menu-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.alovesinh-mega-menu-card {
		padding: var(--alv-sp-2);
		border-color: transparent;
	}

	.alovesinh-mega-menu-drawer-open,
	.alovesinh-mega-menu-drawer-close,
	.alovesinh-mega-menu-drawer-head,
	.alovesinh-mega-menu-quick-call,
	.alovesinh-mega-menu-drawer-foot,
	.alovesinh-mega-menu-overlay {
		display: none;
	}

	.alovesinh-mega-menu-scroll-lock {
		overflow: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	.alovesinh-mega-menu-frame,
	.alovesinh-mega-menu-overlay,
	.alovesinh-mega-menu-arrow,
	.alovesinh-mega-menu-card {
		transition: none;
	}

	.alovesinh-mega-menu-panel {
		transition-duration: 0s;
	}
}