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

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

.alovesinh-cta-bar-title {
	margin: 0 0 var(--alv-sp-1);
	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 var(--alv-sp-1);
	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);
}

.alovesinh-area-grid-list {
	--alv-grid-cols-md: 2;
	--alv-grid-cols-sm: 1;
	--alv-grid-gap: var(--alv-sp-1a) var(--alv-sp-2d);
	--alv-grid-width: 100%;
	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: var(--alv-sp-1a) 0;
	font-size: var(--alv-fs-3);
	color: var(--alv-c-text-2);
}

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

.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: var(--alv-sp-3);
	height: var(--alv-sp-3);
	font-size: var(--alv-fs-4a);
	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: var(--alv-sp-4a);
	--alv-icon-size: var(--alv-sp-3);
	--alv-icon-radius: var(--alv-r-1);
	--alv-icon-color: var(--alv-c-brand);
	--alv-icon-bg: var(--alv-c-brand-tint-strong);
	display: inline-grid;
	grid-template-columns: auto auto;
	align-items: center;
	gap: 0 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: var(
		--alv-float-badge-shadow,
		0 var(--alv-sp-2) var(--alv-sp-3e) var(--alv-c-ink-haze)
	);
}

.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: var(--alv-tr-label-lg);
	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: var(--alv-sp-2d);
	--alv-icon-bg: var(--alv-c-brand-haze);
	--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: var(--alv-w-float-badge-min);
	padding: var(--alv-sp-2b) var(--alv-sp-2c);
}

.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: var(--alv-c-accent-haze);
}

.alovesinh-brand-row {
	--alv-row-wrap: wrap;
	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. */
.elementor-widget-alovesinh-paragraph + .elementor-widget-alovesinh-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: var(--alv-sp-3a);
	font-size: var(--alv-fs-1);
}

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

.alovesinh-brand-row-item .alovesinh-brand-row-tone-accent,
.alovesinh-brand-row-item .alovesinh-brand-row-tone-warning {
	--alv-initial-bg: var(--alv-c-accent-wash);
	--alv-initial-text: var(--alv-c-ink);
}

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

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

.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 {
	overflow: hidden;
	padding: 0 0 var(--alv-sp-3);
	box-shadow: var(--alv-sh-3);
}

/* The inset sits on the rows rather than on the card, so the bar above them spans the full width. */
.alovesinh-quote-ticket > :not(.alovesinh-quote-ticket-notch) {
	margin-inline: var(--alv-sp-3);
}

/* 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: 0 0 calc(var(--alv-sp-3) - var(--alv-sp-2));
	padding: var(--alv-sp-2) var(--alv-sp-2b);
	border-bottom: var(--alv-bd-hairline) solid var(--alv-card-border);
}

.alovesinh-quote-ticket-punch {
	width: var(--alv-sp-1c);
	height: var(--alv-sp-1c);
	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: var(--alv-sp-4c);
	--alv-icon-color: var(--alv-c-white);
	--alv-icon-bg: var(--alv-c-brand-strong);
	--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: var(--alv-fs-1a);
	color: var(--alv-c-text-muted);
}

.alovesinh-quote-ticket-rule {
	height: var(--alv-bd-hairline);
	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: var(--alv-c-warning-pale);
}

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

.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: var(--alv-track-banner);
}

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

.alovesinh-thong-so-ky-thuat {
	--alv-split-cols: var(--alv-w-spec-label) 1fr;
	--alv-split-align: start;
}

.alovesinh-cau-tao-nem {
	--alv-split-cols: var(--alv-track-construction);
}

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

.alovesinh-khu-vuc-phuc-vu {
	--alv-split-cols: var(--alv-track-service-area);
	--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: var(--alv-track-certificates);
	--alv-split-gap-md: var(--alv-sp-5);
}

.alovesinh-dat-lich-nhanh {
	--alv-split-cols: var(--alv-track-quick-booking);
	--alv-split-align: start;
	--alv-split-gap-md: var(--alv-sp-5);
}

.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) * var(--alv-fs-3a));
}

.alovesinh-tang-tai-lieu {
	--alv-split-cols: var(--alv-track-free-guide);
}

.alovesinh-khuyen-mai-nem-sofa {
	--alv-split-cols: var(--alv-track-sofa-promo);
	--alv-split-align: stretch;
}

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

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

.alovesinh-dich-vu-6-the-tim-hieu {
	--alv-split-cols: var(--alv-track-service-catalog);
	--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: var(--alv-w-compare-criteria-pair);
}

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

/* 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: var(--alv-sp-2c);
	height: var(--alv-sp-2c);
	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: var(--alv-sp-3a);
	--alv-rail-shift: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--alv-sp-3);

	/* 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: max(0px, calc(var(--alv-sp-5b) - var(--alv-sp-5) - var(--row-gap, 0px))) auto 0;
	padding: var(--alv-sp-3) 0 0 var(--alv-sp-4c);
	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: var(--alv-sp-0c);
	border-radius: var(--alv-r-1);
	background: var(--alv-scene-timeline-rail);
	transform: translateX(var(--alv-rail-shift, calc(-1 * var(--alv-pos-center))));
}

/* Below the tablet breakpoint the alternating layout gives way to one column, because two
	--alv-w-timeline-card cards cannot sit either side of a rail on a phone. */
.alovesinh-timeline-item {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	min-height: auto;
	counter-increment: alovesinh-timeline-step;
}

.alovesinh-timeline-card-wrap {
	display: flex;
	align-items: center;
	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;
}

.alovesinh-timeline-card {
	width: 100%;
	padding: var(--alv-sp-2d);
}

.alovesinh-timeline-item:nth-child(odd) .alovesinh-timeline-card,
.alovesinh-timeline-item:nth-child(even) .alovesinh-timeline-card {
	margin-right: 0;
	margin-left: 0;
	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: var(--alv-sp-1a);
	bottom: calc(-1 * var(--alv-sp-2));
	z-index: 0;
	font-size: var(--alv-fs-9);
	font-weight: var(--alv-fw-extrabold);
	line-height: 1;
	letter-spacing: var(--alv-tr-display);
	color: var(--alv-c-brand-film);
	pointer-events: none;
}

.alovesinh-timeline-item:nth-child(odd) .alovesinh-timeline-card::before {
	right: calc(-1 * var(--alv-sp-1));
	left: auto;
}

.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: var(--alv-pos-center);
	width: var(--alv-sp-5a);
	height: var(--alv-sp-0b);
	background: var(--alv-scene-timeline-link);
	transform: translateY(calc(-1 * var(--alv-pos-center)));
}

.alovesinh-timeline-item:nth-child(odd) .alovesinh-timeline-card::after {
	background: var(--alv-scene-timeline-link-reverse);
}

.alovesinh-timeline-item:nth-child(odd) .alovesinh-timeline-card::after,
.alovesinh-timeline-item:nth-child(even) .alovesinh-timeline-card::after {
	top: var(--alv-sp-4f);
	right: auto;
	left: calc(-1 * var(--alv-sp-3b));
	width: var(--alv-sp-3b);
}

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

/* 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: var(--alv-sp-4e);
	--alv-icon-size: var(--alv-sp-3);
	border: var(--alv-bd-hairline) solid var(--alv-c-brand-glow);
	border-radius: var(--alv-r-2);
	color: var(--alv-c-brand-deep);
	background: var(--alv-scene-timeline-icon);
}

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

/* 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: var(--alv-sp-3);
	left: calc(-1 * var(--alv-sp-4c));
	z-index: var(--alv-z-lift);
	justify-self: start;
	width: var(--alv-sp-4d);
	height: var(--alv-sp-4d);
	border-radius: var(--alv-r-circle);
	font-size: var(--alv-fs-cta);
	font-weight: var(--alv-fw-extrabold);
	color: var(--alv-c-white);
	background: var(--alv-scene-number-badge);
	box-shadow:
		var(--alv-sh-lift),
		0 0 0 var(--alv-sp-1) var(--alv-c-white),
		0 0 0 var(--alv-sp-1a) var(--alv-c-brand-glow);
	transform: none;
}

.alovesinh-timeline-step-number::before {
	content: '';
	position: absolute;
	inset: calc(-1 * var(--alv-sp-1a));
	border: var(--alv-bd-medium) dashed var(--alv-c-brand-ring);
	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-3);
	line-height: var(--alv-lh-tight);
	color: var(--alv-block-title);
}

/* Grey rather than the card's ink, written from the card past the shared card's 0-1-1 colour on
	every p, or the step reads as body copy. */
.alovesinh-timeline-card .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-wash);
	padding: var(--alv-sp-0e) var(--alv-sp-1d);
	border: var(--alv-bd-hairline) solid var(--alv-c-brand-halo);
	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: var(--alv-sp-0e) var(--alv-sp-1d);
	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-ink);
	background: var(--alv-c-accent-wash);
}

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

/* 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. */
.alovesinh-banner-huy-hieu-tren {
	position: relative;
	top: auto;
	left: auto;
	z-index: var(--alv-z-lift);
	align-self: flex-start;
	order: -1;
}

.alovesinh-banner-hinh.alovesinh-banner-dom-ordered > .alovesinh-banner-huy-hieu-tren {
	order: 0;
}

.alovesinh-banner-huy-hieu-duoi {
	position: relative;
	right: auto;
	bottom: auto;
	z-index: var(--alv-z-lift);
	align-self: flex-end;
}

.alovesinh-bao-hanh-vang-hinh .alovesinh-stamp-one {
	position: relative;
	z-index: var(--alv-z-stamp);
	align-self: flex-start;
	margin: var(--alv-sp-3e) 0 0 var(--alv-sp-3e);
}

.alovesinh-timeline-moments {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--alv-sp-5);
}

.alovesinh-timeline-moment {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-left: var(--alv-sp-4);
}

.alovesinh-timeline-marker {
	position: absolute;
	top: 0;
	bottom: calc(-1 * var(--alv-sp-5));
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: var(--alv-sp-2c);
}

.alovesinh-timeline-dot {
	position: relative;
	flex: none;
	width: var(--alv-sp-2);
	height: var(--alv-sp-2);
	margin-top: var(--alv-sp-1);
	border-radius: var(--alv-r-circle);
	background: var(--alv-c-accent-strong);
	box-shadow: 0 0 0 var(--alv-sp-1) var(--alv-c-accent-edge);
}

.alovesinh-timeline-dot::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--alv-c-accent-strong);
	opacity: 0;
	animation: alovesinh-anatomy-pulse var(--alv-dur-pulse) ease-out var(--alv-count-pulse);
	pointer-events: none;
}

.alovesinh-timeline-line {
	flex: 1 1 0%;
	width: var(--alv-bd-hairline);
	margin-top: var(--alv-sp-2);
	background: var(--alv-c-accent-edge);
}

.alovesinh-timeline-moment:last-child .alovesinh-timeline-line {
	background: linear-gradient(to bottom, var(--alv-c-accent-edge), transparent);
}

/* The last rail has no next moment to reach, so it fades out inside its own moment instead of in
	the padding of the block below. */
.alovesinh-timeline-moment:last-child .alovesinh-timeline-marker {
	bottom: 0;
}

/* A moment has no frame, so its last line is where it ends: cut to the baseline, or the line
	spacing under it adds to the padding of the block it closes. */
.alovesinh-timeline-moment > :last-child {
	text-box: trim-end cap alphabetic;
}

.alovesinh-timeline-when {
	display: flex;
	align-items: baseline;
	gap: var(--alv-sp-2);
	margin: 0 0 var(--alv-sp-3);
	line-height: 1;
}

.alovesinh-timeline-time {
	font-size: var(--alv-fs-5);
	font-weight: var(--alv-fw-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--alv-tr-tight-1);
	color: var(--alv-c-ink);
}

.alovesinh-timeline-stage {
	font-size: var(--alv-fs-1a);
	font-weight: var(--alv-fw-semibold);
	letter-spacing: var(--alv-tr-label);
	text-transform: uppercase;
	color: var(--alv-c-text-muted);
}

.alovesinh-timeline-figure {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--alv-ratio-classic);
	border-radius: var(--alv-r-3);
	background: var(--alv-c-white);
	box-shadow: var(--alv-sh-2);
}

.elementor .elementor-widget.elementor-widget-alovesinh-timeline figure.alovesinh-timeline-figure {
	margin: 0 0 var(--alv-sp-3);
}

.alovesinh-timeline-figure img {
	transition: transform var(--alv-dur-4) ease;
}

.alovesinh-timeline-figure img:hover {
	transform: scale(var(--alv-scale-highlight));
}

.alovesinh-timeline-moments .alovesinh-timeline-title {
	margin: 0 0 var(--alv-sp-1a);
	font-size: var(--alv-fs-4);
	line-height: var(--alv-lh-title);
}

.alovesinh-timeline-moments .alovesinh-timeline-description {
	font-size: var(--alv-fs-3);
	line-height: var(--alv-lh-copy);
}

@media (min-width: 361px) {
	/* Two columns from the mobile breakpoint rather than the shared ladder's single column:
		district names are short. */
	.alovesinh-area-grid-list {
		--alv-grid-cols-sm: 2;
	}
}

@media (min-width: 561px) {
	.alovesinh-timeline {
		--alv-rail-x: var(--alv-sp-3e);
		padding-left: var(--alv-sp-5c);
	}

	.alovesinh-timeline-card {
		padding: var(--alv-card-pad, var(--alv-sp-4));
	}

	.alovesinh-timeline-item:nth-child(odd) .alovesinh-timeline-card::after,
	.alovesinh-timeline-item:nth-child(even) .alovesinh-timeline-card::after {
		top: var(--alv-sp-5d);
		left: calc(-1 * var(--alv-sp-3e));
		width: var(--alv-sp-3e);
	}

	.alovesinh-timeline-step-number {
		top: var(--alv-sp-3b);
		left: calc(-1 * var(--alv-sp-5c));
		width: var(--alv-sp-5c);
		height: var(--alv-sp-5c);
	}

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

	/* Widgets, so position ties Elementor's `.elementor-widget { position: relative }` and holds by loading after
		elementor-frontend. */
	.alovesinh-banner-huy-hieu-tren {
		position: absolute;
		top: var(--alv-inset-badge-top);
		left: var(--alv-inset-badge-start);
		align-self: auto;
		order: 0;
	}

	.alovesinh-banner-huy-hieu-duoi {
		position: absolute;
		right: var(--alv-inset-badge-end);
		bottom: var(--alv-inset-badge-bottom);
		align-self: auto;
	}

	.alovesinh-timeline-moments {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: var(--alv-sp-3);
	}

	.alovesinh-timeline-moment {
		padding-left: 0;
	}

	.alovesinh-timeline-marker {
		position: static;
		flex-direction: row;
		width: calc(100% + var(--alv-sp-3));
		height: var(--alv-sp-2);
		margin-bottom: var(--alv-sp-3);
	}

	.alovesinh-timeline-dot {
		margin-top: 0;
	}

	.alovesinh-timeline-line {
		width: 100%;
		height: var(--alv-bd-hairline);
		margin: 0 0 0 var(--alv-sp-2);
	}

	.alovesinh-timeline-moment:last-child .alovesinh-timeline-marker {
		width: 100%;
	}

	.alovesinh-timeline-moment:last-child .alovesinh-timeline-line {
		background: linear-gradient(to right, var(--alv-c-accent-edge), transparent);
	}
}

@media (min-width: 821px) {
	/* Stacked below the tablet breakpoint as in the source design, not below the shared split's
		tablet-extra breakpoint. */
	.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: var(--alv-split-cols, 1fr 1fr);
	}

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

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

	/* The tablet breakpoint, not tablet-extra: 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. */
	.alovesinh-timeline {
		--alv-rail-x: var(--alv-pos-center);
		--alv-rail-shift: inherit;
		gap: 0;
		width: min(100%, var(--alv-w-timeline));
		padding-left: 0;
	}

	/* 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 {
		grid-template-columns: 1fr var(--alv-sp-6a) 1fr;
		min-height: var(--alv-h-timeline-step);
	}

	.alovesinh-timeline-card-wrap {
		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 {
		justify-content: flex-end;
	}

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

	.alovesinh-timeline-card {
		width: min(100% - var(--alv-sp-5a), var(--alv-w-timeline-card));
	}

	.alovesinh-timeline-item:nth-child(odd) .alovesinh-timeline-card {
		margin-right: var(--alv-sp-5a);
		text-align: right;
	}

	.alovesinh-timeline-item:nth-child(even) .alovesinh-timeline-card {
		margin-left: var(--alv-sp-5a);
	}

	.alovesinh-timeline-card::before {
		font-size: var(--alv-fs-9b);
	}

	.alovesinh-timeline-item:nth-child(odd) .alovesinh-timeline-card::before {
		right: auto;
		left: var(--alv-sp-1a);
	}

	.alovesinh-timeline-item:nth-child(odd) .alovesinh-timeline-card::after {
		top: var(--alv-pos-center);
		right: calc(-1 * var(--alv-sp-5a));
		left: auto;
		width: var(--alv-sp-5a);
	}

	.alovesinh-timeline-item:nth-child(even) .alovesinh-timeline-card::after {
		top: var(--alv-pos-center);
		left: calc(-1 * var(--alv-sp-5a));
		width: var(--alv-sp-5a);
	}

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

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

	.alovesinh-timeline-step-number {
		top: var(--alv-pos-center);
		left: var(--alv-pos-center);
		justify-self: auto;
		width: var(--alv-sp-6a);
		height: var(--alv-sp-6a);
		font-size: var(--alv-fs-5);
		transform: translate(calc(-1 * var(--alv-pos-center)), calc(-1 * var(--alv-pos-center)));
	}

	.alovesinh-timeline-step-number::before {
		inset: calc(-1 * var(--alv-sp-2b));
	}
}

@media (min-width: 981px) {
	.alovesinh-timeline-moments {
		gap: var(--alv-sp-4);
	}

	.alovesinh-timeline-marker {
		width: calc(100% + var(--alv-sp-4));
	}

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

@media (prefers-reduced-motion: reduce) {
	.alovesinh-timeline-dot::after {
		animation: none;
	}

	.alovesinh-timeline-figure img {
		transition: none;
	}

	.alovesinh-timeline-figure img:hover {
		transform: none;
	}
}