/* 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: var(--alv-tr-label-sm);
	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: var(--alv-tr-label-xl);
	text-transform: uppercase;
	color: var(--alv-tier-label);
}

.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);
}

/* From the widget root, past the shared card's 0-1-1 line height on every p: the tier blurb is set
	tighter than the card's running copy. */
.alovesinh-price-tier .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 var(--alv-sp-0d);
	font-size: var(--alv-fs-8b);
	font-weight: var(--alv-fw-extrabold);
	line-height: 1;
	letter-spacing: var(--alv-tr-figure);
	color: var(--alv-tier-title);
}

.alovesinh-price-tier .alovesinh-price-superscript {
	font-size: var(--alv-fs-6a);
}

.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: var(--alv-sp-2d);
	height: var(--alv-sp-2d);
	margin-top: var(--alv-sp-1);
	color: var(--alv-c-brand);
}

.alovesinh-price-tier-popular {
	position: absolute;
	top: var(--alv-w-gutter);
	right: var(--alv-w-gutter);
	letter-spacing: var(--alv-tr-wide-2);
	text-transform: uppercase;
	color: var(--alv-c-ink);
	background: var(--alv-c-accent-wash);
}

.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 var(--alv-sp-3) var(--alv-sp-5a) var(--alv-c-black-ring);
}

/* Only the highlighted tier fills its button with the primary orange: three cards side by side
	with three solid orange buttons give the eye nowhere to land. */
.alovesinh-price-tier-highlight .alovesinh-price-tier-action {
	border-color: var(--alv-c-accent-strong);
	color: var(--alv-c-white);
	background: var(--alv-c-accent-strong);
}

.alovesinh-combo-price {
	--alv-column-gap: 0;
	padding: var(--alv-sp-3);
	border: var(--alv-bd-hairline) dashed var(--alv-c-on-dark);
	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: var(--alv-tr-label);
	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-2);
}

.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);
}

.alovesinh-combo-price-saving {
	padding: var(--alv-sp-0e) 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-ink);
	background: var(--alv-c-accent-wash);
}

/* 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: var(--alv-fs-6c);
	line-height: 1;
	letter-spacing: var(--alv-tr-figure);
	color: var(--alv-c-accent-text);
}

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

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

/* 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-ink);
	background: var(--alv-c-accent-wash);
}

/* 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: var(--alv-sp-6);
	height: var(--alv-sp-6);
	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-ink);
	background: var(--alv-c-accent-wash);
	box-shadow: var(--alv-sh-lift);
	transform: rotate(var(--alv-turn-discount-badge));
}

/* 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);
}

/* Below the mobile-extra breakpoint the four columns outrun the block, which clips at its edge:
	the frame scrolls rather than cut one. */
.alovesinh-bang-gia-loai-nem-khung .alovesinh-price-table-frame {
	overflow-x: auto;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* 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. */
.elementor-widget-alovesinh-price-table:has(+ .elementor-widget-alovesinh-price-table)
	.alovesinh-price-table-frame {
	border-bottom: 0;
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.elementor-widget-alovesinh-price-table
	+ .elementor-widget-alovesinh-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;
}

.alovesinh-price-table-head th {
	padding: var(--alv-sp-2b) var(--alv-sp-1c);
	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);
}

/* 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. */
.alovesinh-price-table tbody th,
.alovesinh-price-table tbody td {
	padding: var(--alv-sp-2b) var(--alv-sp-1c);
	font-size: var(--alv-fs-2);
}

.alovesinh-price-table tbody tr:hover {
	background: var(--alv-c-brand-trace);
}

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

/* 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 tbody tr:last-child th,
.alovesinh-price-table tbody tr:last-child td {
	border-bottom: 0;
}

.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);
}

.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: var(--alv-sp-2d);
	right: var(--alv-sp-2d);
	z-index: var(--alv-z-stamp);
}

@media (min-width: 561px) {
	.alovesinh-price-table-head th {
		padding: var(--alv-sp-2) var(--alv-sp-3);
	}

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

	.alovesinh-bang-gia-loai-nem-khung .alovesinh-price-table-frame {
		overflow: visible;
	}
}

@media (min-width: 981px) {
	.alovesinh-combo-price .alovesinh-price-price {
		font-size: var(--alv-fs-7);
	}
}