/* Group stylesheet for the section widgets. */

.alovesinh-cta-bar {
	--alv-box-pad: var( --alv-sp-4 );
	--alv-box-radius: var( --alv-r-4 );

	display: flex;
	flex-direction: column;
	align-items: var( --alv-cta-bar-align, center );
	margin-top: var( --alv-sp-5 );
	text-align: var( --alv-cta-bar-align, center );
	background: var( --alv-c-bg-light );
}

.alovesinh-cta-bar-icon {
	margin-bottom: var( --alv-sp-2 );
}

.alovesinh-cta-bar-title {
	margin: 0 0 6px;
	color: var( --alv-block-title );
}

.alovesinh-cta-bar-description {
	margin: 0 0 var( --alv-sp-3 );
	font-size: var( --alv-fs-3 );
	color: var( --alv-c-text-muted );
}

.alovesinh-cta-bar-actions {
	flex-wrap: wrap;
	justify-content: var( --alv-cta-bar-align, center );
}

.alovesinh-area-grid-title {
	margin: 0 0 6px;
	font-size: var( --alv-fs-5 );
	font-weight: var( --alv-fw-extrabold );
	color: var( --alv-block-title );
}

.alovesinh-area-grid-description {
	margin: 0 0 var( --alv-sp-3 );
	color: var( --alv-c-text-muted );
}

/* Two columns down to 360px rather than the shared ladder's single column: district names are short. */
.alovesinh-area-grid-list {
	--alv-grid-cols-md: 2;
	--alv-grid-cols-sm: 2;
	--alv-grid-gap: 8px 18px;
	--alv-grid-width: none;
	margin: 0 0 var( --alv-sp-3 );
	padding: 0;
	list-style: none;
}

/* Eight above and below, not the six of the shared scale: the rows carry no divider, so the
	extra two pixels are what keeps two columns of district names from reading as one block. */
.alovesinh-area-grid-item {
	display: flex;
	align-items: center;
	gap: var( --alv-sp-1 );
	padding: 8px 0;
	font-size: var( --alv-fs-3 );
	color: var( --alv-c-text-2 );
}

.alovesinh-area-grid-item::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: var( --alv-r-circle );
	background: var( --alv-c-brand );
}

@media ( max-width: 360px ) {

	.alovesinh-area-grid-list {
		--alv-grid-cols-sm: 1;
	}
}

.alovesinh-area-grid-timing {
	display: flex;
	flex-wrap: wrap;
	gap: var( --alv-sp-3 );
	margin-bottom: var( --alv-sp-3 );
}

.alovesinh-area-grid-timing-item {
	display: flex;
	align-items: center;
	gap: var( --alv-sp-2 );
	font-size: var( --alv-fs-3 );
	font-weight: var( --alv-fw-semibold );
}

.alovesinh-area-grid-timing-item svg,
.alovesinh-area-grid-timing-item i {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	font-size: 20px;
	color: var( --alv-c-brand );
}

.alovesinh-area-grid-timing-figure {
	font-size: var( --alv-fs-4 );
	font-weight: var( --alv-fw-extrabold );
	color: var( --alv-c-brand-deep );
}

.alovesinh-area-grid-note {
	margin-top: var( --alv-sp-2 );
	font-size: var( --alv-fs-2 );
	color: var( --alv-c-text-muted );
}

/* Grid rather than flex so the two lines stack beside the icon with no wrapper: the icon holds one
	cell across both rows. The shadow is deeper and tinted because this badge is stamped over a
	photograph, where the neutral card shadow disappears into the image. */
.alovesinh-float-badge {
	--alv-icon-box: 36px;
	--alv-icon-size: 20px;
	--alv-icon-radius: var( --alv-r-1 );
	--alv-icon-color: var( --alv-c-brand );
	--alv-icon-bg: color-mix( in srgb, var( --alv-c-brand ) 12%, transparent );
	display: inline-grid;
	grid-template-columns: auto auto;
	align-items: center;
	gap: 0 var( --alv-sp-2 );
	padding: 14px 18px;
	border-radius: var( --alv-r-3 );
	background: var( --alv-c-white );
	box-shadow: var( --alv-float-badge-shadow, 0 12px 30px color-mix( in srgb, var( --alv-c-ink ) 18%, transparent ) );
}

.alovesinh-float-badge .alovesinh-icon-box {
	grid-row: span 2;
}

.alovesinh-float-badge-title {
	font-size: var( --alv-fs-1 );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --alv-c-text-muted );
}

.alovesinh-float-badge-label {
	font-size: var( --alv-fs-3 );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: var( --alv-tr-wide-1 );
	color: var( --alv-c-ink );
}

/* The banner form leads with the sentence and drops a note under it, so the two lines swap both
	their sizes and their weights. The disc turns fully round here because it sits over a soft
	gradient rather than over a photograph, where the softer square reads better. */
.alovesinh-float-badge-caption {
	--alv-icon-radius: var( --alv-r-circle );
	--alv-icon-size: 18px;
	--alv-icon-bg: color-mix( in srgb, var( --alv-c-brand ) 15%, transparent );
	--alv-float-badge-shadow: var( --alv-sh-2 );

	/* The source design lays this badge out as a flex row, which grows to its wording; the grid
		here stops at the floor below instead and breaks "Bảo hành 7 ngày" across two lines. */
	width: max-content;
	min-width: 180px;
	padding: 14px var( --alv-r-3 );
}

.alovesinh-float-badge-caption .alovesinh-float-badge-title {
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-semibold );
	letter-spacing: normal;
	text-transform: none;
	color: var( --alv-c-ink );
}

.alovesinh-float-badge-caption .alovesinh-float-badge-label {
	font-size: var( --alv-fs-1 );
	font-weight: var( --alv-fw-medium );
	letter-spacing: normal;
	color: var( --alv-c-text-muted );
}

.alovesinh-float-badge-tone-accent {
	--alv-icon-color: var( --alv-c-accent );
	--alv-icon-bg: color-mix( in srgb, var( --alv-c-accent ) 15%, transparent );
}

.alovesinh-float-badge-placed {
	position: absolute;
	z-index: 2;
}

.alovesinh-float-badge-placed-top-left {
	top: var( --alv-sp-3 );
	left: var( --alv-sp-3 );
}

.alovesinh-float-badge-placed-top-right {
	top: var( --alv-sp-3 );
	right: var( --alv-sp-3 );
}

.alovesinh-float-badge-placed-bottom-left {
	bottom: var( --alv-sp-3 );
	left: var( --alv-sp-3 );
}

.alovesinh-float-badge-placed-bottom-right {
	right: var( --alv-sp-3 );
	bottom: var( --alv-sp-3 );
}

.alovesinh-brand-row {
	--alv-row-wrap: wrap;
	gap: var( --alv-sp-2 );
	margin-top: var( --alv-sp-3 );
}

/* The space under a paragraph and the space over this row are one and the same gap on the page
	this was drawn from, where the two collapse; an Elementor container is flex and adds them. */
.alv-w-paragraph + .alv-w-brand-row .alovesinh-brand-row {
	margin-top: 0;
}

/* Each maker is a bordered pill, not a bare word: the row sits under running copy and without the
	outline the names read as part of the sentence above them. */
.alovesinh-brand-row-item {
	display: inline-flex;
	align-items: center;
	gap: var( --alv-sp-1 );
	padding: var( --alv-sp-1 ) var( --alv-sp-2 );
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	border-radius: var( --alv-r-pill );
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-semibold );
	color: var( --alv-c-text-2 );
	background: var( --alv-c-white );
}

.alovesinh-brand-row-item .alovesinh-initial {
	--alv-initial-size: 22px;
	--alv-initial-bg: var( --alv-brand-row-color, var( --alv-c-brand ) );
	font-size: var( --alv-fs-1 );
}

/* Each tone repeats the item class so it outranks the rule above, which sets the same variable
	at two classes. Named for the role, not the maker, so the same five serve any such row. */
.alovesinh-brand-row-item .alovesinh-brand-row-tone-brand {
	--alv-initial-bg: var( --alv-c-brand );
}

.alovesinh-brand-row-item .alovesinh-brand-row-tone-accent {
	--alv-initial-bg: var( --alv-c-accent );
}

.alovesinh-brand-row-item .alovesinh-brand-row-tone-deep {
	--alv-initial-bg: var( --alv-c-brand-deep );
}

.alovesinh-brand-row-item .alovesinh-brand-row-tone-warning {
	--alv-initial-bg: var( --alv-c-warning );
}

.alovesinh-brand-row-item .alovesinh-brand-row-tone-success {
	--alv-initial-bg: var( --alv-c-success );
}

.alovesinh-brand-row-name {
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-semibold );
	color: var( --alv-c-text-2 );
}

/* The ticket is a receipt, so it keeps a deeper lift than an ordinary card and clips its own
	corners: the perforation bar at the top runs to both edges and would otherwise square them. */
.alovesinh-quote-ticket {
	display: flex;
	flex-direction: column;
	gap: var( --alv-sp-2 );
	overflow: hidden;
	padding: var( --alv-sp-3 );
	border-radius: var( --alv-r-4 );
	box-shadow: var( --alv-sh-3 );
}

/* Pulled out by the card's own padding so the bar spans the full width. Its lower margin makes
	up the difference between the 12px row gap and the 20px the receipt keeps below the bar. */
.alovesinh-quote-ticket-notch {
	display: flex;
	gap: var( --alv-sp-1 );
	margin: calc( var( --alv-sp-3 ) * -1 ) calc( var( --alv-sp-3 ) * -1 ) 8px;
	padding: var( --alv-sp-2 ) 14px;
	border-bottom: var( --alv-bd-hairline ) solid var( --alv-card-border );
}

.alovesinh-quote-ticket-punch {
	width: 10px;
	height: 10px;
	border-radius: var( --alv-r-circle );
	background: var( --alv-card-border );
}

/* Grid, not the shared row: the name and the sub-line stack beside one icon, and a flex row
	would set the two lines side by side instead. */
.alovesinh-quote-ticket-head {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0 var( --alv-sp-2 );
}

.alovesinh-quote-ticket-head .alovesinh-icon-box {
	--alv-icon-box: 46px;
	--alv-icon-color: var( --alv-c-white );
	--alv-icon-bg: var( --alv-c-brand );
	--alv-icon-radius: var( --alv-r-3 );
	grid-row: span 2;
}

.alovesinh-quote-ticket-title {
	font-size: var( --alv-fs-3 );
	font-weight: var( --alv-fw-extrabold );
	color: var( --alv-card-title );
}

.alovesinh-quote-ticket-label {
	font-size: 12px;
	color: var( --alv-c-text-muted );
}

.alovesinh-quote-ticket-rule {
	height: 1px;
	background: var( --alv-card-border );
}

.alovesinh-quote-ticket-rows {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var( --alv-sp-1 ) var( --alv-sp-3 );
	margin: 0;
	font-size: var( --alv-fs-2 );
}

.alovesinh-quote-ticket-row-label {
	color: var( --alv-c-text-muted );
}

.alovesinh-quote-ticket-row-value {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var( --alv-sp-1 );
	margin: 0;
	font-weight: var( --alv-fw-semibold );
	color: var( --alv-card-title );
}

.alovesinh-pill.alovesinh-quote-ticket-row-tag {
	color: var( --alv-c-warning-text );
	background: color-mix( in srgb, var( --alv-c-warning ) 15%, transparent );
}

/* Pushed to the bottom so two tickets of unequal row counts still line their totals up. */
.alovesinh-quote-ticket-total {
	--alv-row-wrap: wrap;
	justify-content: space-between;
	margin-top: auto;
	padding: var( --alv-sp-2 ) 14px;
	border-radius: var( --alv-r-2 );
	background: var( --alv-c-bg-light );
}

.alovesinh-quote-ticket-total-text {
	flex: 1;
}

.alovesinh-quote-ticket-total-label {
	display: block;
	font-size: var( --alv-fs-2 );
	color: var( --alv-c-text-muted );
}

.alovesinh-quote-ticket .alovesinh-price-price {
	font-size: var( --alv-fs-4 );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: normal;
	color: var( --alv-c-ink );
}

/* Its own rule, not the discount badge's: that chip lives in the pricing stylesheet, which a
	page holding only this widget never loads, and the stamp would render as bare text. */
.alovesinh-quote-ticket-discount {
	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 );
}

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

/* Each of these blocks tunes its own two-column split in the source design, and the tuning is what
	keeps its headline and its copy breaking where the design breaks them. Dropped, every one of
	them falls back to an even split and the wording rewraps. */
.alovesinh-banner {
	/* The source design hands the copy column the larger share. At an even split the headline no
		longer fits the lines its own <br> marks out, and "khô nhanh" drops to a fourth line. */
	--alv-split-cols: 1.1fr 0.9fr;
}

.alovesinh-khuyen-mai-dem-nguoc {
	--alv-split-cols: 1.4fr 1fr;
	--alv-split-gap: var( --alv-sp-4 );
}

.alovesinh-thong-so-ky-thuat {
	--alv-split-cols: 280px 1fr;
	--alv-split-align: start;
}

.alovesinh-cau-tao-nem {
	--alv-split-cols: 1.1fr 1fr;
}

.alovesinh-truoc-sau-truot {
	--alv-split-gap: var( --alv-sp-4 );
}

.alovesinh-khu-vuc-phuc-vu {
	--alv-split-cols: 1.1fr 0.9fr;
	--alv-split-align: stretch;
	--alv-split-gap-md: var( --alv-sp-5 );
}

.alovesinh-khach-tieu-bieu {
	--alv-split-gap-md: var( --alv-sp-5 );
}

.alovesinh-chung-nhan {
	--alv-split-cols: 1.05fr 0.95fr;
	--alv-split-gap-md: var( --alv-sp-5 );
}

/* Stacked at 820 as in the source design, not at the shared split's 980. */
.alovesinh-dat-lich-nhanh {
	--alv-split-cols: 1.05fr 0.95fr;
	--alv-split-cols-md: var( --alv-split-cols );
	--alv-split-align: start;
	--alv-split-gap-md: var( --alv-sp-5 );
}

.alovesinh-bao-hanh-vang,
.alovesinh-cau-chuyen-mot-dem,
.alovesinh-chung-nhan,
.alovesinh-khach-tieu-bieu,
.alovesinh-khu-vuc-phuc-vu,
.alovesinh-tang-tai-lieu,
.alovesinh-truoc-sau-truot {
	--alv-split-cols-md: var( --alv-split-cols, 1fr 1fr );
}

@media ( max-width: 820px ) {

	.alovesinh-dat-lich-nhanh,
	.alovesinh-bao-hanh-vang,
	.alovesinh-cau-chuyen-mot-dem,
	.alovesinh-chung-nhan,
	.alovesinh-khach-tieu-bieu,
	.alovesinh-khu-vuc-phuc-vu,
	.alovesinh-tang-tai-lieu,
	.alovesinh-truoc-sau-truot {
		--alv-split-cols-md: 1fr;
	}

	.alovesinh-chung-nhan .alovesinh-grid-pair {
		--alv-grid-cols-md: 1;
	}
}

.alovesinh-dat-lich-nhanh .alovesinh-list-lead-description {
	line-height: calc( var( --alv-lh-body ) * 1rem );
}

.alovesinh-tang-tai-lieu {
	--alv-split-cols: 1.1fr 1fr;
}

.alovesinh-khuyen-mai-nem-sofa {
	--alv-split-cols: 1.2fr 1fr;
	--alv-split-align: stretch;
}

.alovesinh-dat-lich-day-du {
	--alv-split-align: start;
}

.alovesinh-bao-hanh-vang {
	--alv-split-cols: 1.05fr 1fr;
	--alv-split-gap-md: var( --alv-sp-5 );
}

.alovesinh-dich-vu-6-the-tim-hieu {
	--alv-split-cols: 1.2fr 1fr;
	--alv-split-gap-md: var( --alv-sp-5 );
}

@media ( max-width: 820px ) {

	.alovesinh-dich-vu-6-the-tim-hieu {
		--alv-split-gap-md: var( --alv-sp-3 );
	}
}

/* The source design lifts these review cards on shadow alone, so a hairline here draws an edge the
	design does not have, and the panel above them carries none either. */
.alovesinh-danh-gia-nen-sang {
	--alv-card-border: transparent;
	--alv-card-border-hover: transparent;
}

/* The rating row sets its stars at the table's own size, not the 15px a star row carries when it
	stands on its own, or the last row prints a step larger than every row above it. */
.alovesinh-so-sanh-3-cot {
	--alv-star-size: var( --alv-fs-2 );
}

.alovesinh-so-sanh-2-cot .alovesinh-table-compare-criteria {
	width: 40%;
}

/* Only the three-column table: the source design seats its ticks and crosses on discs so the
	winning column reads at a glance, and leaves the two-column table's marks bare. Written on the
	cell class alone, the two-column table would carry discs too. */
.alovesinh-so-sanh-3-cot .alovesinh-table-compare-cell-yes svg,
.alovesinh-so-sanh-3-cot .alovesinh-table-compare-cell-no svg {
	padding: var( --alv-sp-1 );
	border-radius: var( --alv-r-circle );
}

.alovesinh-so-sanh-3-cot .alovesinh-table-compare-cell-yes svg {
	color: var( --alv-c-white );
	background: var( --alv-c-success );
}

/* The cross is drawn two pixels smaller than the tick in the source design, so the column that
	says no reads a shade quieter than the one that says yes. */
.alovesinh-so-sanh-3-cot .alovesinh-table-compare-cell-no svg {
	width: 16px;
	height: 16px;
	color: var( --alv-c-danger-dark );
	background: var( --alv-c-danger-pale );
}

.alovesinh-danh-muc-dich-vu .alovesinh-card-service {
	--alv-split-align: stretch;
}

/* In the source design the ticket is stretched to the frame and its total pinned to the floor, so
	the rows above it keep the air the design gives them. Sized by its own rows instead, the ticket
	comes up short and the total lands halfway up the frame. */
.alovesinh-banner .alovesinh-quote-ticket {
	height: 100%;
}

.alovesinh-timeline {
	--alv-rail-x: 50%;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 1080px;

	/* The source design parts the head from the rail by more than the head's own margin, by collapsing the two.
		An Elementor container is flex, which collapses nothing and adds its row gap, so only the difference less
		that gap is added here. */
	margin: calc( 56px - var( --alv-sp-5 ) - var( --row-gap, 0px ) ) auto 0;
	padding: var( --alv-sp-3 ) 0;
	list-style: none;
	counter-reset: alovesinh-timeline-step;
}

/* One rail behind every step, not a border per item: adding or deleting a step then cannot leave
	a dangling segment between two others. The ends fade out so the line has no hard stop above the
	first badge or below the last. */
.alovesinh-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var( --alv-rail-x );
	z-index: 0;
	width: 3px;
	border-radius: var( --alv-r-1 );
	background: linear-gradient( 180deg,
		color-mix( in srgb, var( --alv-c-brand ) 0%, transparent ) 0%,
		var( --alv-c-brand ) 6%,
		var( --alv-c-brand-deep ) 50%,
		var( --alv-c-brand ) 94%,
		color-mix( in srgb, var( --alv-c-brand ) 0%, transparent ) 100% );
	transform: translateX( var( --alv-rail-shift, -50% ) );
}

/* Three tracks with the badge lane in the middle: the two outer tracks are equal, so a card on
	the left and one on the right stop at the same distance from the rail whatever they hold. */
.alovesinh-timeline-item {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 80px 1fr;
	align-items: center;
	min-height: 210px;
	counter-increment: alovesinh-timeline-step;
}

.alovesinh-timeline-card-wrap {
	display: flex;
	align-items: center;
	height: 100%;
}

/* Sides alternate by position, not by a class per step: inserting a step in the middle then
	re-flows every one below it instead of leaving two cards on the same side. */
.alovesinh-timeline-item:nth-child( odd ) > .alovesinh-timeline-card-wrap {
	grid-column: 1;
	justify-content: flex-end;
}

.alovesinh-timeline-item:nth-child( even ) > .alovesinh-timeline-card-wrap {
	grid-column: 3;
	justify-content: flex-start;
}

.alovesinh-timeline-card {
	position: relative;
	width: 100%;
	max-width: 430px;
}

.alovesinh-timeline-item:nth-child( odd ) .alovesinh-timeline-card {
	margin-right: 50px;
	text-align: right;
}

.alovesinh-timeline-item:nth-child( even ) .alovesinh-timeline-card {
	margin-left: 50px;
	text-align: left;
}

/* The ghost figure and the badge on the rail both read the step counter, so inserting a step renumbers every
	one below it and the two can never disagree. */
.alovesinh-timeline-card::before {
	content: counter( alovesinh-timeline-step, decimal-leading-zero );
	position: absolute;
	right: 8px;
	bottom: -12px;
	z-index: 0;
	font-size: 104px;
	font-weight: var( --alv-fw-extrabold );
	line-height: 1;
	letter-spacing: -0.04em;
	color: color-mix( in srgb, var( --alv-c-brand ) 6%, transparent );
	pointer-events: none;
}

.alovesinh-timeline-item:nth-child( odd ) .alovesinh-timeline-card::before {
	right: auto;
	left: 8px;
}

.alovesinh-timeline-card > * {
	position: relative;
	z-index: 1;
}

/* The connector runs from the card to the rail and fades towards the card, so the eye is led
	outward from the line rather than stopped at a hard bar. */
.alovesinh-timeline-card::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 50px;
	height: 2px;
	background: linear-gradient( 90deg,
		var( --alv-c-brand ) 0%,
		color-mix( in srgb, var( --alv-c-brand ) 20%, transparent ) 100% );
	transform: translateY( -50% );
}

.alovesinh-timeline-item:nth-child( odd ) .alovesinh-timeline-card::after {
	right: -50px;
	background: linear-gradient( 90deg,
		color-mix( in srgb, var( --alv-c-brand ) 20%, transparent ) 0%,
		var( --alv-c-brand ) 100% );
}

.alovesinh-timeline-item:nth-child( even ) .alovesinh-timeline-card::after {
	left: -50px;
}

.alovesinh-timeline-head {
	display: flex;
	align-items: center;
	gap: var( --alv-sp-2 );
	margin-bottom: var( --alv-sp-1 );
}

/* Mirrored on the left side so the icon always sits nearest the rail, which keeps the two columns
	reading as one line of steps rather than two unrelated lists. */
.alovesinh-timeline-item:nth-child( odd ) .alovesinh-timeline-head {
	flex-direction: row-reverse;
}

/* The mark is drawn two pixels smaller than the shared tile draws it: this tile is 38px where the
	shared one is 48px, and at the shared 22px the glyph crowds its own border. */
.alovesinh-timeline-head .alovesinh-icon-box {
	--alv-icon-box: 38px;
	--alv-icon-size: 20px;
	border: var( --alv-bd-hairline ) solid color-mix( in srgb, var( --alv-c-brand ) 18%, transparent );
	border-radius: var( --alv-r-2 );
	color: var( --alv-c-brand-deep );
	background: linear-gradient( 135deg,
		color-mix( in srgb, var( --alv-c-brand ) 14%, transparent ) 0%,
		color-mix( in srgb, var( --alv-c-brand ) 5%, transparent ) 100% );
}

.alovesinh-timeline-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var( --alv-sp-1 );
	margin-top: var( --alv-sp-2 );
}

.alovesinh-timeline-item:nth-child( odd ) .alovesinh-timeline-tags {
	justify-content: flex-end;
}

/* The badge rides the rail rather than sitting in the text flow, so every step marks the same
	x position no matter how long its own heading runs. The white ring is a shadow, not a border:
	a border would sit inside the circle and shrink the number instead of masking the rail. */
.alovesinh-timeline-step-number {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 80px;
	height: 80px;
	border-radius: var( --alv-r-circle );
	font-size: var( --alv-fs-5 );
	font-weight: var( --alv-fw-extrabold );
	color: var( --alv-c-white );
	background: linear-gradient( 135deg, var( --alv-c-brand ) 0%, var( --alv-c-brand-deep ) 100% );
	box-shadow:
		0 12px 28px color-mix( in srgb, var( --alv-c-brand ) 36%, transparent ),
		0 0 0 6px var( --alv-c-white ),
		0 0 0 8px color-mix( in srgb, var( --alv-c-brand ) 18%, transparent );
	transform: translate( -50%, -50% );
}

.alovesinh-timeline-step-number::before {
	content: "";
	position: absolute;
	inset: -14px;
	border: 1.5px dashed color-mix( in srgb, var( --alv-c-brand ) 30%, transparent );
	border-radius: var( --alv-r-circle );
	pointer-events: none;
}

.alovesinh-timeline-step-number::after {
	content: counter( alovesinh-timeline-step, decimal-leading-zero );
}

.alovesinh-timeline-title {
	margin: 0;
	font-size: var( --alv-fs-4 );
	line-height: var( --alv-lh-tight );
	color: var( --alv-block-title );
}

/* Named twice, and grey rather than the card's ink: the shared card paints every p it holds one
	step more specific, so a single class here loses the colour and the step reads as body copy. */
.alovesinh-timeline-description.alovesinh-timeline-description {
	margin: 0;
	font-size: var( --alv-fs-2 );
	color: var( --alv-c-text-muted );
}

.alovesinh-timeline-label {
	--alv-pill-text: var( --alv-c-brand-deep );
	--alv-pill-bg: var( --alv-c-brand-tint );
	padding: 5px 11px;
	border: var( --alv-bd-hairline ) solid color-mix( in srgb, var( --alv-c-brand ) 20%, transparent );
	font-size: var( --alv-fs-1 );
	letter-spacing: var( --alv-tr-wide-1 );
}

.alovesinh-timeline-note {
	display: inline-flex;
	align-items: center;
	gap: var( --alv-sp-1 );
	padding: 5px 11px;
	border-radius: var( --alv-r-pill );
	font-size: var( --alv-fs-1 );
	font-weight: var( --alv-fw-bold );
	letter-spacing: var( --alv-tr-wide-2 );
	text-transform: uppercase;
	color: var( --alv-c-accent );
	background: color-mix( in srgb, var( --alv-c-accent ) 10%, transparent );
}

.alovesinh-timeline-note::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: var( --alv-r-circle );
	background: var( --alv-c-accent );
}

/* 820px, not 980: the rail and badge only crowd the text once the two-column frame collapses,
	which is the breakpoint the rest of the block uses: moved on its own, the steps would restack at
	a different width from the block around them. */
@media ( max-width: 820px ) {

	.alovesinh-timeline {
		--alv-rail-x: 30px;
		--alv-rail-shift: 0;
		gap: var( --alv-sp-3 );
		max-width: 100%;
		padding-left: 60px;
	}

	/* Below 820px the alternating layout gives way to one column, because two 430px cards cannot sit
		either side of a rail on a phone. */
	.alovesinh-timeline-item {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.alovesinh-timeline-item:nth-child( odd ) > .alovesinh-timeline-card-wrap,
	.alovesinh-timeline-item:nth-child( even ) > .alovesinh-timeline-card-wrap {
		grid-column: 1;
		justify-content: flex-start;
		height: auto;
	}

	.alovesinh-timeline-item:nth-child( odd ) .alovesinh-timeline-card,
	.alovesinh-timeline-item:nth-child( even ) .alovesinh-timeline-card {
		max-width: 100%;
		margin-right: 0;
		margin-left: 0;
		text-align: left;
	}

	.alovesinh-timeline-item:nth-child( odd ) .alovesinh-timeline-head {
		flex-direction: row;
	}

	.alovesinh-timeline-item:nth-child( odd ) .alovesinh-timeline-tags {
		justify-content: flex-start;
	}

	.alovesinh-timeline-step-number {
		top: 24px;
		left: -60px;
		justify-self: start;
		width: 60px;
		height: 60px;
		font-size: var( --alv-fs-4 );
		transform: none;
	}

	.alovesinh-timeline-step-number::before {
		inset: -8px;
	}

	.alovesinh-timeline-item:nth-child( odd ) .alovesinh-timeline-card::after,
	.alovesinh-timeline-item:nth-child( even ) .alovesinh-timeline-card::after {
		top: 54px;
		right: auto;
		left: -30px;
		width: 30px;
	}

	.alovesinh-timeline-card::before {
		font-size: 80px;
	}

	.alovesinh-timeline-item:nth-child( odd ) .alovesinh-timeline-card::before {
		right: -6px;
		left: auto;
	}
}

@media ( max-width: 560px ) {

	.alovesinh-timeline {
		--alv-rail-x: 22px;
		padding-left: 46px;
	}

	.alovesinh-timeline-step-number {
		top: 20px;
		left: -46px;
		width: 44px;
		height: 44px;
		font-size: var( --alv-fs-3 );
	}

	.alovesinh-timeline-item:nth-child( odd ) .alovesinh-timeline-card::after,
	.alovesinh-timeline-item:nth-child( even ) .alovesinh-timeline-card::after {
		top: 42px;
		left: -24px;
		width: 24px;
	}

	.alovesinh-timeline-card {
		padding: 18px;
	}

	.alovesinh-timeline-title {
		font-size: var( --alv-fs-3 );
	}
}

.alovesinh-banner-huy-hieu-tren.alovesinh-banner-huy-hieu-tren {
	position: absolute;
	top: 6%;
	left: -6%;
	z-index: 2;
}

.alovesinh-banner-huy-hieu-duoi.alovesinh-banner-huy-hieu-duoi {
	position: absolute;
	right: -4%;
	bottom: 8%;
	z-index: 2;
}

/* On a phone the ticket sets the column's height and the badges sit above and below it: at the fixed ratio the
	ticket was clipped, and pinned over it the badges covered its title and total. */
@media ( max-width: 560px ) {

	.alovesinh-banner-huy-hieu-tren.alovesinh-banner-huy-hieu-tren {
		position: relative;
		top: auto;
		left: auto;
		order: -1;
		align-self: flex-start;
	}

	.alovesinh-banner-huy-hieu-duoi.alovesinh-banner-huy-hieu-duoi {
		position: relative;
		right: auto;
		bottom: auto;
		align-self: flex-end;
	}
}

.alovesinh-bao-hanh-vang-hinh .alovesinh-stamp-one {
	position: relative;
	z-index: 3;
	align-self: flex-start;
	margin: 30px 0 0 30px;
}