/* Group stylesheet for the stat widgets. The bar and grid shapes live in alovesinh-base.css. */

/* The leading stays the page's own, as it does everywhere else a figure sits over its caption. */
.alovesinh-stat-number {
	font-size: var(--alv-number-size, var(--alv-fs-5));
	font-weight: var(--alv-fw-extrabold);
	letter-spacing: var(--alv-tr-tight-2);
	color: var(--alv-number-color, var(--alv-c-brand-deep));
}

.alovesinh-stat-unit {
	margin-left: var(--alv-sp-0d);
	font-size: var(--alv-fs-4);
	font-weight: var(--alv-fw-semibold);
	color: var(--alv-c-text-muted);
}

.alovesinh-stat-description {
	font-size: var(--alv-fs-2);
	color: var(--alv-c-text-muted);
}

.alovesinh-stat-stacked {
	--alv-column-gap: var(--alv-sp-0d);
	flex-direction: row;
	align-items: flex-start;
}

.alovesinh-stat-side {
	display: flex;
	flex-direction: column;
	gap: var(--alv-sp-1);
	padding-top: var(--alv-sp-1c);
}

.alovesinh-stat-side .alovesinh-stat-unit {
	margin-left: 0;
}

.alovesinh-stat-row {
	--alv-grid-cols-md: 4;
	--alv-grid-cols-sm: 2;
	--alv-grid-gap: calc(var(--alv-sp-2) + 2 * var(--alv-sp-1)) calc(var(--alv-sp-2) + 2 * var(--alv-sp-2));
	--alv-grid-width: 100%;
	--alv-stat-row-grid-display: grid;
	--alv-stat-row-grid-columns: repeat(var(--alv-grid-cols, 4), 1fr);
	--alv-stat-row-grid-wrap: nowrap;
	--alv-stat-row-grid-align: normal;
	--alv-stat-row-grid-justify: normal;
	--alv-stat-row-grid-gap: var(--alv-grid-gap, var(--alv-sp-3));
	--alv-stat-row-grid-margin-inline: auto;
	--alv-stat-row-grid-margin-top: 0;
	--alv-stat-row-grid-padding-top: var(--alv-stat-row-edge-pad, 0);
	--alv-stat-row-grid-border-top: var(--alv-stat-row-edge, 0);
	--alv-stat-row-grid-number-size: var(--alv-fs-6a);
	--alv-stat-row-grid-number-color: var(--alv-c-brand-deep);
	--alv-stat-row-grid-stat-padding: 0;
	--alv-stat-row-grid-number-weight: var(--alv-fw-extrabold);
	--alv-stat-row-grid-description-display: block;
	--alv-stat-row-inline-display: grid;
	--alv-stat-row-inline-columns: auto;
	--alv-stat-row-inline-wrap: wrap;
	--alv-stat-row-inline-align: start;
	--alv-stat-row-inline-justify: start;
	--alv-stat-row-inline-gap: var(--alv-sp-2);
	--alv-stat-row-inline-margin-inline: 0;
	--alv-stat-row-inline-margin-top: var(--alv-sp-4);
	--alv-stat-row-inline-padding-top: var(--alv-stat-row-edge-pad, 0);
	--alv-stat-row-inline-border-top: var(--alv-stat-row-edge, 0);
	--alv-stat-row-inline-number-size: var(--alv-fs-5);
	--alv-stat-row-inline-number-color: var(--alv-c-ink);
	--alv-stat-row-inline-stat-padding: 0;
	--alv-stat-row-inline-number-weight: var(--alv-fw-bold);
	--alv-stat-row-inline-description-display: block;
	--alv-stat-row-banner-display: flex;
	--alv-stat-row-banner-columns: none;
	--alv-stat-row-banner-wrap: wrap;
	--alv-stat-row-banner-align: var(--alv-row-align, center);
	--alv-stat-row-banner-justify: center;
	--alv-stat-row-banner-gap: var(--alv-sp-5);
	--alv-stat-row-banner-margin-inline: 0;
	--alv-stat-row-banner-margin-top: var(--alv-sp-5);
	--alv-stat-row-banner-padding-top: var(--alv-sp-4);
	--alv-stat-row-banner-border-top: var(--alv-bd-hairline) dashed var(--alv-c-border);
	--alv-stat-row-banner-number-size: var(--alv-fs-6);
	--alv-stat-row-banner-number-color: var(--alv-c-brand-deep);
	--alv-stat-row-banner-stat-padding: 0;
	--alv-stat-row-banner-number-weight: var(--alv-fw-extrabold);
	--alv-stat-row-banner-description-display: inline;
	--alv-number-size: var(--alv-stat-row-grid-number-size);
}

.alovesinh-stat-row .alovesinh-stat {
	padding: var(--alv-stat-row-grid-stat-padding);
}

/* The wrapping line is the headline's own figure strip: each column takes the width of its widest
	figure rather than an equal share, so "4.9★" is not stretched to the width of "15.000+", and a
	figure that moves to the next line stays under the one above it. The number drops to the heading
	scale and carries the page ink rather than the brand teal, because here it sits under running
	copy instead of inside a coloured band. */
.alovesinh-stat-row-inline {
	--alv-number-size: var(--alv-stat-row-inline-number-size);
	--alv-number-color: var(--alv-stat-row-inline-number-color);
	display: var(--alv-stat-row-inline-display);
	grid-template-columns: var(--alv-stat-row-inline-columns);
	align-items: var(--alv-stat-row-inline-align);
	justify-content: var(--alv-stat-row-inline-justify);
	margin-top: var(--alv-stat-row-inline-margin-top);
}

.alovesinh-stat-row-inline .alovesinh-stat {
	padding: var(--alv-stat-row-inline-stat-padding);
}

/* Kept on one line: a narrow strip shrinks its columns by wrapping the caption under the figure,
	never by breaking "30 phút" in two. */
.alovesinh-stat-row-inline .alovesinh-stat-number {
	font-weight: var(--alv-stat-row-inline-number-weight);
	white-space: nowrap;
}

/* The figure strip of a process page: centred under the copy and parted from it by a rule. It rides
	on the inline variant and only restates what differs, so the two cannot drift apart: a centred
	wrapping line instead of the opening block's columns, and figures free to wrap. */
.alovesinh-stat-row-banner {
	--alv-number-size: var(--alv-fs-5);
	--alv-number-color: var(--alv-stat-row-banner-number-color);
	display: var(--alv-stat-row-banner-display);
	flex-wrap: var(--alv-stat-row-banner-wrap);
	align-items: var(--alv-stat-row-banner-align);
	justify-content: var(--alv-stat-row-banner-justify);

	/* The row gap comes back in once the strip wraps onto two lines: without it the second line sits
		against the first. */
	gap: var(--alv-sp-3) var(--alv-sp-4);
	margin-top: var(--alv-sp-3d);
	padding-top: var(--alv-sp-3b);
	border-top: var(--alv-stat-row-banner-border-top);
}

.alovesinh-stat-row-banner .alovesinh-stat-number {
	font-weight: var(--alv-stat-row-banner-number-weight);
	white-space: normal;
}

.alovesinh-stat-row-banner .alovesinh-stat-description {
	display: var(--alv-stat-row-banner-description-display);
}

.alovesinh-stat-row-bordered {
	--alv-stat-row-edge-pad: var(--alv-sp-4);
	--alv-stat-row-edge: var(--alv-bd-hairline) solid var(--alv-c-border);
	padding: var(--alv-stat-row-edge-pad) 0;
	border-block: var(--alv-stat-row-edge);
}

.alovesinh-progress-bar-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--alv-sp-2);
	font-size: var(--alv-fs-2);
	color: var(--alv-c-text-muted);
}

.alovesinh-progress-bar-value {
	font-size: var(--alv-fs-4);
	font-weight: var(--alv-fw-extrabold);
	color: var(--alv-c-ink);
}

/* A plain neutral grey, not the page's blue-tinted surface: the bar sits inside a bordered box
	that already uses that surface, and the two greys next to each other read as a misprint. */
.alovesinh-progress-bar-bar {
	--alv-bar-track: var(--alv-c-track-grey);
	--alv-bar-color: var(--alv-scene-progress);
}

/* The gap belongs to the bar rather than the note, but only when a note follows: the promo block
	that ends on the bar sets no space below it, and an unconditional margin would add one there. */
.alovesinh-progress-bar-bar:not(:last-child) {
	margin-bottom: var(--alv-sp-2);
}

.alovesinh-progress-bar-note {
	display: flex;
	align-items: center;
	gap: var(--alv-sp-1);
	font-size: var(--alv-fs-2);
	font-weight: var(--alv-fw-semibold);
	color: var(--alv-c-danger-dark);
}

.alovesinh-progress-bar-note svg,
.alovesinh-progress-bar-note i {
	width: var(--alv-sp-2b);
	height: var(--alv-sp-2b);
	font-size: var(--alv-fs-2a);
	line-height: 1;
}

.alovesinh-dark .alovesinh-progress-bar-label {
	font-weight: var(--alv-fw-bold);
	letter-spacing: var(--alv-tr-label-xs);
	color: var(--alv-c-white);
}

.alovesinh-dark .alovesinh-progress-bar-value {
	font-size: inherit;
	font-weight: inherit;
	color: var(--alv-c-white);
}

.alovesinh-dark .alovesinh-progress-bar-bar {
	--alv-bar-height: var(--alv-sp-2);
	--alv-bar-track: var(--alv-c-glass-shade);
	--alv-bar-color: var(--alv-scene-progress-dark);
}

.alovesinh-stat-bar {
	--alv-number-size: var(--alv-fs-6a);
	box-shadow: var(--alv-sh-1);
}

/* Tighter than the page leading, as this box stacks a figure, a caption and a bar inside one
	small tile and the page's own leading opens a gap the tile has no room for. */
.alovesinh-stat-bar .alovesinh-stat-number {
	line-height: var(--alv-lh-display);
}

.alovesinh-stat-bar-label {
	margin-top: var(--alv-sp-0d);
	font-size: var(--alv-fs-2);
	color: var(--alv-c-text-muted);
}

.alovesinh-stat-bar-bar {
	--alv-bar-height: var(--alv-sp-0e);
	--alv-bar-color: var(--alv-scene-stat-bar);
	--alv-bar-radius: var(--alv-r-pill);
	margin-top: var(--alv-sp-2);
}

.alovesinh-rating-line {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--alv-sp-2);
	margin-bottom: var(--alv-sp-5);
	font-size: var(--alv-fs-3);
	color: var(--alv-card-text);
}

.alovesinh-rating-line-score {
	font-size: var(--alv-fs-4);
	font-weight: var(--alv-fw-extrabold);
	color: var(--alv-card-title);
}

/* Not the pill radius the badges around it use: unify the two and this chip stops matching. */
.alovesinh-rating-line-verified {
	display: inline-flex;
	align-items: center;
	gap: var(--alv-sp-1);
	padding: var(--alv-sp-0e) var(--alv-sp-2);
	border-radius: var(--alv-r-1);
	font-size: var(--alv-fs-2);
	font-weight: var(--alv-fw-bold);
	color: var(--alv-c-ink);
	background: var(--alv-c-success-wash);
}

.alovesinh-dark .alovesinh-rating-line-verified {
	color: var(--alv-c-success-light);
	background: var(--alv-c-success-haze);
}

/* The shared tick declares no size and no icon font loads, so an unsized svg fills its box. */
.alovesinh-rating-line-verified svg {
	width: var(--alv-sp-2b);
	height: var(--alv-sp-2b);
	color: var(--alv-c-success);
}

/* Nothing but the stars is in the line, so it carries neither the gap that parts a score from a
	count nor the air a full line leaves under itself. */
.alovesinh-rating-line-bare {
	gap: 0;
	margin-bottom: 0;
}

/* Tucked under a customer's name inside a proof box, where the line is a caption rather than a
	claim: it loses the air below it and sits against the name above instead. */
.alovesinh-rating-line-compact {
	--alv-star-size: var(--alv-fs-2);
	--alv-star-tracking: var(--alv-tr-px-1);
	display: block;
	margin: var(--alv-sp-0c) 0 0;
	font-size: var(--alv-fs-2);
}

.alovesinh-rating-line-compact .alovesinh-star-row {
	display: inline-flex;
}

.alovesinh-dark .alovesinh-rating-line-compact {
	color: var(--alv-c-on-dark);
}

/* No outline and a lifted shadow, unlike the review cards it summarises: the panel is the one
	element of the section that has to read as raised off the page, and a border plus a shadow
	would fence it in instead. */
.alovesinh-rating-panel {
	--alv-number-size: var(--alv-fs-8);
	--alv-card-border: transparent;
	--alv-card-shadow: var(--alv-sh-2);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--alv-sp-3);
	width: min(100%, var(--alv-w-grid));
	margin: var(--alv-sp-4) auto 0;
	padding: var(--alv-sp-3d) var(--alv-sp-4a);
	border: var(--alv-bd-hairline) solid var(--alv-card-border);
	border-radius: var(--alv-r-3);
	text-align: center;
	background: var(--alv-card-bg);
	box-shadow: var(--alv-card-shadow);
}

.alovesinh-rating-panel-score {
	display: flex;
	flex-direction: column;
	gap: var(--alv-sp-1);
	text-align: center;
}

/* The colour box writes --alv-number-color, so it has to be read here too: a flat card-title
	would win over the variable and the box would do nothing. */
.alovesinh-rating-panel .alovesinh-stat-number {
	line-height: 1;
	color: var(--alv-number-color, var(--alv-card-title));
}

.alovesinh-rating-panel-note {
	font-size: var(--alv-fs-2);
	color: var(--alv-card-text);
}

/* Plain brand fill, not the accent of the primary button: this one sits inside a card and would
	pull the eye off the score if it were orange. */
.alovesinh-rating-panel-button {
	white-space: nowrap;
	color: var(--alv-c-white);
	background: var(--alv-c-brand-strong);
}

.alovesinh-rating-panel-column {
	flex: 1;
	min-width: 0;
}

.alovesinh-rating-panel-row {
	display: grid;
	grid-template-columns: var(--alv-sp-5a) 1fr var(--alv-sp-4b);
	align-items: center;
	gap: var(--alv-sp-2);
	font-size: var(--alv-fs-2);
	font-weight: var(--alv-fw-semibold);
	color: var(--alv-card-text);
}

.alovesinh-rating-panel-row .alovesinh-bar {
	--alv-bar-track: var(--alv-star-track, var(--alv-c-track-grey));
	--alv-bar-color: var(--alv-c-warning);
}

.alovesinh-rating-panel-ratio {
	font-weight: var(--alv-fw-bold);
	text-align: right;
	color: var(--alv-card-title);
}

/* The panel is a lighter pane on the dark block, not the same card surface: it holds the score
	for the whole section and has to sit a step above the review cards around it. */
.alovesinh-dark .alovesinh-rating-panel {
	--alv-star-track: var(--alv-c-glass-rule);
	--alv-card-bg: var(--alv-c-glass-wisp);
	--alv-card-border: var(--alv-c-glass-rule);
	--alv-card-shadow: none;
}

.alovesinh-cau-chuyen-mot-dem-moc .alovesinh-stat {
	display: inline-flex;
	flex-direction: row;
	align-items: baseline;
	gap: var(--alv-sp-1);
	width: fit-content;
	margin-top: var(--alv-sp-1);
	padding: var(--alv-sp-2b) var(--alv-sp-3);
	border-left: var(--alv-bd-heavy) solid var(--alv-c-accent);
	border-radius: 0 var(--alv-r-2) var(--alv-r-2) 0;
	background: var(--alv-c-accent-dew);
}

.alovesinh-cau-chuyen-mot-dem-moc .alovesinh-stat-number {
	--alv-number-color: var(--alv-c-orange-soft);
}

.alovesinh-cau-chuyen-mot-dem-moc .alovesinh-stat-description {
	color: var(--alv-c-text-muted-dark);
}

.alovesinh-khuyen-mai-50-suat-cuong .alovesinh-stat {
	--alv-number-size: var(--alv-fs-9a);
	--alv-number-color: var(--alv-c-white);
	line-height: 1;
}

.alovesinh-khuyen-mai-50-suat-cuong .alovesinh-stat-number {
	letter-spacing: var(--alv-tr-display);
}

.alovesinh-khuyen-mai-50-suat-cuong .alovesinh-stat-unit {
	font-size: var(--alv-fs-6d);
	font-weight: var(--alv-fw-extrabold);
	color: var(--alv-c-warning);
}

.alovesinh-khuyen-mai-50-suat-cuong .alovesinh-stat-description {
	font-size: var(--alv-fs-2a);
	font-weight: var(--alv-fw-bold);
	letter-spacing: var(--alv-tr-label);
	color: var(--alv-c-white);
}

.alovesinh-khuyen-mai-50-suat .alovesinh-progress-bar-label {
	gap: var(--alv-sp-2);
	font-size: var(--alv-fs-2a);
	font-weight: var(--alv-fw-regular);
	letter-spacing: normal;
	color: var(--alv-c-on-dark);
}

.alovesinh-khuyen-mai-50-suat .alovesinh-progress-bar-value {
	font-weight: var(--alv-fw-extrabold);
	color: var(--alv-c-warning);
}

.alovesinh-khuyen-mai-50-suat .alovesinh-progress-bar-bar {
	--alv-bar-height: var(--alv-sp-1c);
	--alv-bar-radius: var(--alv-r-pill);
	--alv-bar-track: var(--alv-c-glass-edge);
	--alv-bar-color: var(--alv-c-warning);
}

.alovesinh-truoc-sau-truot .alovesinh-stat-row {
	--alv-grid-cols-md: 3;
	--alv-grid-cols-sm: 3;
	--alv-grid-gap: var(--alv-sp-2);
	--alv-number-size: var(--alv-fs-5);
	padding: var(--alv-sp-3);
	border-radius: var(--alv-r-3);
	background: var(--alv-c-bg-light);
}

.alovesinh-tang-tai-lieu-danh-gia > .elementor-widget-alovesinh-rating-line {
	flex-shrink: 0;
}

.alovesinh-dat-lich-day-du-khach .elementor-widget-alovesinh-rating-line {
	display: flex;
}

.alovesinh-dat-lich-day-du-khach .alovesinh-rating-line {
	line-height: var(--alv-lh-base);
}

.alovesinh-bao-hanh-vang-hinh .alovesinh-stamp-two {
	position: relative;
	z-index: var(--alv-z-stamp);
	align-self: flex-end;
	margin: auto calc(-1 * var(--alv-sp-2c)) 0 0;
}

.alovesinh-bao-hanh-vang-hinh .alovesinh-stamp-two .alovesinh-stat {
	align-items: center;
	gap: var(--alv-sp-2);
	padding: var(--alv-sp-2b) var(--alv-sp-2d);
	border-radius: var(--alv-r-3);
	background: var(--alv-c-white);
	box-shadow: 0 var(--alv-sp-2b) var(--alv-sp-3e) var(--alv-c-brand-deepest-glow);
}

.alovesinh-bao-hanh-vang-hinh .alovesinh-stamp-two .alovesinh-stat-description {
	width: var(--alv-w-stamp-text);
	line-height: var(--alv-lh-caption);
	color: var(--alv-c-text-2);
}

.alovesinh-danh-gia-nen-sang .alovesinh-rating-panel {
	margin: 0 auto var(--alv-sp-4);
}

.alovesinh-xem-tan-mat .alovesinh-rating-line {
	justify-content: flex-start;
	gap: var(--alv-sp-0d) var(--alv-sp-1a);
	margin: 0;
	font-size: var(--alv-fs-2a);
	color: var(--alv-c-text-muted);
}

.alovesinh-xem-tan-mat .alovesinh-rating-line-score {
	font-size: var(--alv-fs-3a);
	font-weight: var(--alv-fw-bold);
	color: var(--alv-c-ink);
}

.alovesinh-danh-cho-ca-nha .alovesinh-stat-row {
	--alv-grid-cols-md: 3;
	--alv-grid-cols-sm: 1;
	--alv-grid-gap: var(--alv-sp-3);
	--alv-number-size: var(--alv-fs-5);
	margin-top: var(--alv-sp-2);
	padding: var(--alv-sp-3);
	border-radius: var(--alv-r-3);
	background: var(--alv-c-white);
	box-shadow: var(--alv-sh-1);
}

.alovesinh-danh-cho-ca-nha .alovesinh-stat-number {
	white-space: nowrap;
}

.alovesinh-bao-hanh-vang-hinh .alovesinh-stamp-two .alovesinh-stat-number {
	--alv-number-color: var(--alv-c-accent-text);
	line-height: 1;
}

/* A figure and its caption have no frame of their own, so their first and last lines are where the
	stat begins and ends: both are cut to the letters, in every variant of the strip, or the line
	spacing above the figure and below the caption adds unequal amounts to the space around it. */
.alovesinh-stat-row .alovesinh-stat > div {
	text-box: trim-both cap alphabetic;
}

/* Two figures side by side need both of their unbroken numbers plus the gap, which the narrowest
	screens do not have, so the strip opens as one column and gains columns as the screen widens. */
@media (min-width: 361px) {
	.alovesinh-stat-row {
		--alv-stat-row-inline-columns: repeat(var(--alv-grid-cols-sm, 2), auto);
	}
}

@media (min-width: 561px) {
	.alovesinh-rating-panel-row {
		grid-template-columns: var(--alv-sp-5c) 1fr var(--alv-sp-5a);
	}

	.alovesinh-stat-row {
		--alv-stat-row-inline-columns: repeat(var(--alv-grid-cols-md, 4), auto);
	}

	.alovesinh-stat-row-banner {
		--alv-number-size: var(--alv-stat-row-banner-number-size);
		gap: var(--alv-stat-row-banner-gap);
		margin-top: var(--alv-stat-row-banner-margin-top);
		padding-top: var(--alv-stat-row-banner-padding-top);
	}
}

@media (min-width: 981px) {
	.alovesinh-rating-panel {
		/* A row, not three tracks: the score column and the button are each optional, and an empty track
			keeps its gap while a missing score shifts the breakdown and the button into the wrong tracks. */
		flex-direction: row;
		align-items: center;
		gap: var(--alv-sp-4);
		text-align: inherit;
	}

	.alovesinh-rating-panel-column {
		min-width: var(--alv-w-rating-column);
	}
}