/* Group stylesheet for the pricing widgets. */

/* Baseline, not the shared row's centre: the caption, the figure and the unit are set at three
	sizes, and centring them would leave the small words floating beside the figure's middle. */
.alovesinh-price {
	align-items: baseline;
	gap: var( --alv-sp-1 );
}

.alovesinh-price-label {
	font-size: var( --alv-fs-1 );
	font-weight: var( --alv-fw-semibold );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --alv-c-text-muted );
}

/* Deep teal, not ink: a price set in the text colour reads as a heading and stops being the one
	figure the eye lands on, which is the whole job this row has on a combo card. */
.alovesinh-price-price {
	font-size: var( --alv-fs-5 );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: var( --alv-tr-tight-1 );
	color: var( --alv-c-brand-deep );
}

.alovesinh-price-superscript {
	font-size: var( --alv-fs-4 );
	font-weight: var( --alv-fw-bold );
	vertical-align: super;
}

.alovesinh-price-unit {
	font-size: var( --alv-fs-2 );
	letter-spacing: 0;
	color: var( --alv-c-text-muted );
}

.alovesinh-price-old-price {
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-medium );
	color: var( --alv-c-text-muted );
}

.alovesinh-price-tier {
	--alv-tier-label: var( --alv-c-text-muted );
	--alv-tier-title: var( --alv-c-ink );
	--alv-tier-sub: var( --alv-c-text-muted );
	--alv-tier-feature: var( --alv-c-text-2 );

	/* The card paints its own heading and copy from two tokens of its own, at a weight these four
		cannot beat, so the highlighted tier reads ink on ink until the card is pointed at them. */
	--alv-card-title: var( --alv-tier-title );
	--alv-card-text: var( --alv-tier-sub );
}

/* The tier word is set in letter-spaced capitals, not in the shared badge pill: at this size the
	pill would compete with the price right below it. */
.alovesinh-price-tier-label {
	--alv-badge-bg: transparent;
	padding: 0;
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --alv-tier-label );
}

.alovesinh-price-tier-label::before {
	content: none;
}

.alovesinh-price-tier-title {
	margin: 0;
	font-size: var( --alv-fs-6 );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: var( --alv-tr-tight-2 );
	color: var( --alv-tier-title );
}

/* Named twice for the leading: the shared card sets the line height of every p it holds at one
	step more specific, and the tier blurb is set tighter than the card's running copy. */
.alovesinh-price-tier-description.alovesinh-price-tier-description {
	margin: 0;
	font-size: var( --alv-fs-3 );
	line-height: var( --alv-lh-base );
	color: var( --alv-tier-sub );
}

.alovesinh-price-tier .alovesinh-price-price {
	display: flex;
	align-items: baseline;
	gap: var( --alv-sp-1 );
	margin: var( --alv-sp-1 ) 0 4px;
	font-size: 64px;
	font-weight: var( --alv-fw-extrabold );
	line-height: 1;
	letter-spacing: -0.03em;
	color: var( --alv-tier-title );
}

.alovesinh-price-tier .alovesinh-price-superscript {
	font-size: 32px;
}

.alovesinh-price-tier .alovesinh-price-unit {
	font-size: var( --alv-fs-3 );
	font-weight: var( --alv-fw-medium );
	color: var( --alv-tier-sub );
}

.alovesinh-price-tier-features {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var( --alv-sp-2 );
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var( --alv-fs-3 );
	line-height: var( --alv-lh-base );
	color: var( --alv-tier-feature );
}

.alovesinh-price-tier-features li {
	display: flex;
	align-items: flex-start;
	gap: var( --alv-sp-2 );
}

/* Held back from the cap line by six pixels so the mark sits beside the first word rather than
	above it, which is where a flex row would otherwise put it. */
.alovesinh-price-tier-features li svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 6px;
	color: var( --alv-c-brand );
}

/* 24px is off the spacing ladder on purpose: the source design insets this badge by the content
	frame's own gutter, and the nearest rung would sit it 4px too close to the corner. */
.alovesinh-price-tier-popular {
	position: absolute;
	top: 24px;
	right: 24px;
	letter-spacing: var( --alv-tr-wide-2 );
	text-transform: uppercase;
	color: var( --alv-c-white );
	background: var( --alv-c-accent );
}

.alovesinh-price-tier-action {
	justify-content: center;
	margin-top: var( --alv-sp-1 );
}

.alovesinh-price-tier-highlight {
	--alv-tier-label: var( --alv-c-brand-light );
	--alv-tier-title: var( --alv-c-white );
	--alv-tier-sub: var( --alv-c-text-muted-dark );
	--alv-tier-feature: var( --alv-c-on-dark );
	--alv-card-border: var( --alv-c-ink );
	--alv-card-bg: var( --alv-c-ink );
	color: var( --alv-c-white );
}

.alovesinh-price-tier-highlight:hover {
	--alv-card-border-hover: var( --alv-c-ink );
	box-shadow: 0 20px 50px color-mix( in srgb, var( --alv-c-black ) 30%, transparent );
}

/* Outline, not the primary fill: three cards side by side with three solid orange buttons give
	the eye nowhere to land, so only the highlighted tier keeps the filled one. */
.alovesinh-price-tier-highlight .alovesinh-price-tier-action {
	border-color: var( --alv-c-accent );
	color: var( --alv-c-white );
	background: var( --alv-c-accent );
}

.alovesinh-combo-price {
	--alv-column-gap: 0;
	padding: var( --alv-sp-3 );
	border: var( --alv-bd-hairline ) dashed var( --alv-c-border-dash );
	border-radius: var( --alv-r-3 );
	background: var( --alv-c-bg-light );
}

.alovesinh-combo-price-label {
	margin-bottom: var( --alv-sp-1 );
	font-size: var( --alv-fs-1 );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --alv-c-text-muted );
}

.alovesinh-combo-price-arrow + .alovesinh-combo-price-label {
	margin-top: var( --alv-sp-1 );
}

.alovesinh-combo-price-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --alv-sp-2 );
	font-size: var( --alv-fs-3 );
	color: var( --alv-c-text-3 );
}

.alovesinh-combo-price-list strong {
	font-weight: var( --alv-fw-extrabold );
	color: var( --alv-c-ink );
}

.alovesinh-combo-price-operator {
	font-size: var( --alv-fs-4 );
	font-weight: var( --alv-fw-extrabold );
	color: var( --alv-c-text-muted );
}

.alovesinh-combo-price-arrow {
	padding: var( --alv-sp-1 ) 0;
	text-align: center;
	color: var( --alv-c-accent );
}

/* Centred, not on the baseline: the saving is a chip with its own padding, and sitting it on the
	price's baseline drops the chip low enough to add a step of empty room under the whole row. */
.alovesinh-combo-price-total {
	align-items: center;
}

.alovesinh-combo-price-saving {
	padding: 5px var( --alv-sp-2 );
	border-radius: var( --alv-r-pill );
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: var( --alv-tr-wide-1 );
	color: var( --alv-c-white );
	background: var( --alv-c-accent );
}

/* Inherited on purpose: the struck figure sits inside the receipt line and the source design lets it
	take that line's size, so a size of its own would freeze it the day the line moves. */
.alovesinh-combo-price .alovesinh-price-old-price {
	font-size: inherit;
	font-weight: var( --alv-fw-bold );
}

.alovesinh-combo-price .alovesinh-price-price {
	font-size: 44px;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var( --alv-c-accent );
}

.alovesinh-combo-price .alovesinh-price-superscript {
	margin-left: 2px;
	font-size: var( --alv-fs-5 );
	font-weight: inherit;
	vertical-align: top;
}

.alovesinh-combo-price-note {
	margin-top: 10px;
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-semibold );
	color: var( --alv-c-brand-deep );
}

@media ( max-width: 980px ) {

	.alovesinh-combo-price .alovesinh-price-price {
		font-size: 36px;
	}
}

/* A softly rounded chip, not the fully round pill it inherits from: it is stamped on a receipt
	line beside squared figures, where a capsule reads as a button. */
.alovesinh-pill.alovesinh-discount-badge {
	padding: var( --alv-sp-1 ) 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-white );
	background: var( --alv-c-accent );
}

/* The badge form is a tilted coin, not a wider pill: it is stamped over the corner of an
	illustration, and an upright label there reads as part of the picture. */
.alovesinh-badge.alovesinh-discount-badge {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	padding: 0;
	border-radius: var( --alv-r-circle );
	font-size: var( --alv-fs-4 );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: var( --alv-tr-tight-2 );
	color: var( --alv-c-white );
	background: linear-gradient( 135deg, var( --alv-c-accent ), var( --alv-c-orange-darkest ) );
	box-shadow: 0 8px 16px color-mix( in srgb, var( --alv-c-accent ) 40%, transparent );
	transform: rotate( -12deg );
}

.alovesinh-badge.alovesinh-discount-badge::before {
	content: none;
}

/* The frame clips, which is the only thing that lets the head row's tint and the footer bar stop
	at the rounded corner instead of squaring it off. */
.alovesinh-price-table-frame {
	overflow: hidden;
	border: var( --alv-bd-hairline ) solid var( --alv-table-border, var( --alv-c-border ) );
	border-radius: var( --alv-r-4 );
	background: var( --alv-c-white );
	box-shadow: var( --alv-sh-2 );
}

/* Two tables stacked with nothing between them are one price list read straight down, so the join
	carries no edge: left alone the two frames meet as a doubled rule the design never draws. */
.alv-w-price-table:has( + .alv-w-price-table ) .alovesinh-price-table-frame {
	border-bottom: 0;
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.alv-w-price-table + .alv-w-price-table .alovesinh-price-table-frame {
	border-top: 0;
	border-start-start-radius: 0;
	border-start-end-radius: 0;
}

.alovesinh-price-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var( --alv-fs-3 );
	color: var( --alv-block-text );
}

.alovesinh-price-table th,
.alovesinh-price-table td {
	border-bottom: var( --alv-bd-hairline ) solid var( --alv-table-border, var( --alv-c-border ) );
	text-align: left;
}

/* Only the first column names the row; every column after it holds a figure, and the source
	design centres figures so the eye can compare them down the column. Without the :not(), the
	row names centre as well and lose the left edge the eye reads down. */
.alovesinh-price-table th:not( :first-child ),
.alovesinh-price-table td:not( :first-child ) {
	text-align: center;
}

.alovesinh-price-table-head th {
	padding: var( --alv-sp-2 ) var( --alv-sp-3 );
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-semibold );
	letter-spacing: var( --alv-tr-wide-1 );
	text-transform: uppercase;
	color: var( --alv-c-text-muted );
	background: var( --alv-c-bg-light );
}

.alovesinh-price-table tbody th,
.alovesinh-price-table tbody td {
	padding: 18px var( --alv-sp-3 );
	font-size: var( --alv-fs-3 );
}

.alovesinh-price-table tbody tr:last-child th,
.alovesinh-price-table tbody tr:last-child td {
	border-bottom: 0;
}

.alovesinh-price-table tbody tr:hover {
	background: color-mix( in srgb, var( --alv-c-brand ) 4%, transparent );
}

.alovesinh-price-table tbody th {
	font-weight: var( --alv-fw-semibold );
	color: var( --alv-c-ink );
}

.alovesinh-price-table .alovesinh-price-price {
	font-size: inherit;
	font-weight: var( --alv-fw-bold );
	letter-spacing: inherit;
}

/* The old price sits on its own line under the new one, not beside it: side by side the struck
	figure reads as part of the price and the row loses its column alignment. */
.alovesinh-price-table .alovesinh-price-old-price {
	display: block;
	margin-top: var( --alv-sp-1 );
}

.alovesinh-price-table-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --alv-sp-2 );
	padding: var( --alv-sp-3 );
	background: var( --alv-c-bg-light );
}

.alovesinh-price-table-note {
	margin: 0;
	font-size: var( --alv-fs-2 );
	color: var( --alv-c-text-muted );
}

/* Printed only when the bar carries two buttons, so the pair wraps as one block instead of the
	quieter button dropping to a line of its own while the filled one stays up beside the note. */
.alovesinh-price-table-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --alv-sp-2 );
}

/* A four-column price table cannot keep 20px of side padding on a phone: the figures wrap inside
	their cells and the columns stop lining up. */
@media ( max-width: 560px ) {

	.alovesinh-price-table-head th,
	.alovesinh-price-table tbody th,
	.alovesinh-price-table tbody td {
		padding: 14px 10px;
		font-size: var( --alv-fs-2 );
	}
}

.alovesinh-bang-gia-loai-nem-khung .alovesinh-price-table-frame {
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.alovesinh-khuyen-mai-nem-sofa-the .alovesinh-combo-price {
	margin-bottom: var( --alv-sp-3 );
}

.alovesinh-khuyen-mai-nem-sofa-hinh .alovesinh-stamp {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 3;
}