/* 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.
	The two places that need the number tight against its caption — the rating panel and the
	promo clock — set line-height themselves. */
.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: 4px;
	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-row {
	--alv-grid-cols-md: 4;
	--alv-grid-cols-sm: 2;
	--alv-grid-gap: var( --alv-sp-2 );
	--alv-grid-width: none;
	--alv-number-size: 32px;
}

.alovesinh-stat-row .alovesinh-stat {
	padding: 6px 12px;
}

/* The wrapping line is the headline's own figure strip: each figure takes the width of its own
	text, 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-fs-5 );
	--alv-number-color: var( --alv-c-ink );
	flex-wrap: wrap;
	margin-top: var( --alv-sp-4 );
}

.alovesinh-stat-row-inline .alovesinh-stat {
	padding: 0;
}

.alovesinh-stat-row-inline .alovesinh-stat-number {
	font-weight: var( --alv-fw-bold );
}

/* The figure strip of a process page: the same wrapping line as the opening block, but 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. */
.alovesinh-stat-row-banner {
	--alv-number-size: var( --alv-fs-6 );
	--alv-number-color: var( --alv-c-brand-deep );
	justify-content: center;
	gap: var( --alv-sp-5 );
	margin-top: var( --alv-sp-5 );
	padding-top: var( --alv-sp-4 );
	border-top: var( --alv-bd-hairline ) dashed var( --alv-c-border );
}

.alovesinh-stat-row-banner .alovesinh-stat-number {
	font-weight: var( --alv-fw-extrabold );
}

/* Set on the strip's own leading rather than the label's, which is what keeps this line in step
	with the running copy it is parted from by the rule above it. */
.alovesinh-stat-row-banner .alovesinh-stat-description {
	display: inline;
}

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

.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: linear-gradient( 90deg, var( --alv-c-accent ), var( --alv-c-orange-darkest ) );
}

/* 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: 14px;
	height: 14px;
	font-size: 14px;
	line-height: 1;
}

/* On the deep promo background the light skin's muted grey drops under contrast, so the row
	turns white and heavier and the track has to lift off the backdrop instead of sinking in. */
.alovesinh-dark .alovesinh-progress-bar-label {
	font-weight: var( --alv-fw-bold );
	letter-spacing: 0.02em;
	color: var( --alv-c-white );
}

/* The promo block on the deep background gives both halves of the row the same weight, so the
	value drops back to the row's own size instead of standing out as it does on the light skin. */
.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: 12px;
	--alv-bar-track: color-mix( in srgb, var( --alv-c-white ) 25%, transparent );
	--alv-bar-color: linear-gradient( 90deg, var( --alv-c-white ) 0%, var( --alv-c-warning-pale ) 100% );
}

.alovesinh-stat-bar {
	--alv-number-size: 32px;
	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: 1.1;
}

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

.alovesinh-stat-bar-bar {
	--alv-bar-height: 5px;
	--alv-bar-color: linear-gradient( 90deg, var( --alv-c-brand ), var( --alv-c-accent ) );
	--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: 5px 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-success-light );
	background: color-mix( in srgb, var( --alv-c-success ) 15%, transparent );
}

/* The shared tick declares no size and no icon font loads, so an unsized svg fills its box. */
.alovesinh-rating-line-verified svg {
	width: 14px;
	height: 14px;
}

/* 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: 1px;
	display: block;
	margin: 3px 0 0;
	font-size: var( --alv-fs-2 );
}

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

/* The muted ink of the dark skin is opaque grey, and the source design wants the name above to
	stay the brighter of the two, which only a translucent white gives. Left alone, the line takes
	the card text, which the dark skin sets to that opaque grey. */
.alovesinh-dark .alovesinh-rating-line-compact {
	color: color-mix( in srgb, var( --alv-c-white ) 60%, transparent );
}

/* 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: 56px;
	--alv-card-border: transparent;
	--alv-card-shadow: var( --alv-sh-2 );
	display: flex;

	/* 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. */
	align-items: center;
	gap: var( --alv-sp-4 );
	max-width: var( --alv-w-grid );
	margin: var( --alv-sp-4 ) auto;
	padding: 28px 36px;
	border: var( --alv-bd-hairline ) solid var( --alv-card-border );
	border-radius: var( --alv-r-3 );
	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 );
}

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

.alovesinh-rating-panel-row {
	display: grid;
	grid-template-columns: 60px 1fr 50px;
	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-pale ) );
	--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: color-mix( in srgb, var( --alv-c-white ) 8%, transparent );
	--alv-card-bg: color-mix( in srgb, var( --alv-c-white ) 4%, transparent );
	--alv-card-border: color-mix( in srgb, var( --alv-c-white ) 8%, transparent );
	--alv-card-shadow: none;
}

@media ( max-width: 980px ) {

	.alovesinh-rating-panel {
		flex-direction: column;
		align-items: stretch;
		gap: var( --alv-sp-3 );
		text-align: center;
	}

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

@media ( max-width: 560px ) {

	.alovesinh-rating-panel-row {
		grid-template-columns: 50px 1fr 40px;
	}

	/* The row gap comes back in once the strip wraps onto two lines: without it the second line sits
		against the first. */
	.alovesinh-stat-row-banner {
		--alv-number-size: var( --alv-fs-5 );
		gap: var( --alv-sp-3 ) var( --alv-sp-4 );
		margin-top: 28px;
		padding-top: 24px;
	}
}

.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: 6px;
	padding: 14px 20px;
	border-left: 3px solid var( --alv-c-accent );
	border-radius: 0 var( --alv-r-2 ) var( --alv-r-2 ) 0;
	background: color-mix( in srgb, var( --alv-c-accent ) 8%, transparent );
}

.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-truoc-sau-truot .alovesinh-stat-row {
	--alv-grid-cols-md: 3;
	--alv-grid-cols-sm: 3;
	--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-truoc-sau-truot .alovesinh-stat-row .alovesinh-stat {
	padding: 0;
}

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

.alovesinh-dat-lich-day-du-khach .alv-w-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: 3;
	align-self: flex-end;
	margin: auto -16px 0 0;
}

.alovesinh-bao-hanh-vang-hinh .alovesinh-stamp-two .alovesinh-stat {
	align-items: center;
	gap: var( --alv-sp-2 );
	padding: 14px 18px;
	border-radius: var( --alv-r-3 );
	background: var( --alv-c-white );
	box-shadow: 0 14px 30px rgb( var( --alv-bao-hanh-vang-nen ) / 0.18 );
}

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

.alovesinh-bao-hanh-vang-hinh .alovesinh-stamp-two .alovesinh-stat-description {
	max-width: 120px;
	line-height: 1.4;
	color: var( --alv-c-text-2 );
}

.alovesinh-danh-gia-nen-sang .alovesinh-rating-panel {
	margin-top: 0;
}