/* An icon picked in the builder prints as a drawing whose fill defaults to black, and this build
	serves none of the icon library's stylesheets, so every icon outside a box that sets its own
	fill lands black. Size stays with each place, which draws it at its own size. */
.e-font-icon-svg {
	fill: currentcolor;
}

/* The builder's heading widget sets its leading to 1 from a class, which outranks the heading
	scale written on the bare tags, so every title it prints comes out a line tighter than drawn.
	Two classes here, one more than the builder carries. */
.elementor .elementor-heading-title {
	line-height: var( --alv-lh-heading );
}

/* Elementor sets html { scroll-behavior: smooth }, which also animates the jump a page opened at a hash makes
	while it loads: the top is painted, then the page flies there. alovesinh-scroll.js adds the class after load. */
:root {
	scroll-behavior: auto;
}

@media ( prefers-reduced-motion: no-preference ) {

	:root.alovesinh-scroll-smooth {
		scroll-behavior: smooth;
	}
}

/* The source design frames a section at 1240px and puts the 24px gutter INSIDE that frame, so a
	band drawn on the frame is 1240 wide while the copy inside it is 1192. Elementor hangs the
	gutter outside instead, which leaves the frame itself 48px narrow. */
main .elementor > .e-con.e-con-boxed {
	padding-inline: 0;
}

/* Read from the section's own measure, not one figure for the whole site: an article narrows its
	opening and its body. The gutter stays a hook because a frame you can see — the author card —
	is drawn with a wider inset than the page gutter. */
main .elementor > .e-con > .e-con-inner {
	max-width: calc( var( --content-width, var( --alv-w-page ) ) + var( --alv-w-frame-gutter, var( --alv-w-gutter ) ) * 2 );
	padding-inline: var( --alv-w-frame-gutter, var( --alv-w-gutter ) );
}

.alovesinh-center {
	display: grid;
	place-items: center;
}

/* The source design has two row utilities: one centres its children, one leaves them to stretch.
	Centring is the common case, so it is the default and the button and social rows opt out. */
.alovesinh-row {
	display: flex;
	align-items: var( --alv-row-align, center );
	gap: var( --alv-sp-2 );
	flex-wrap: var( --alv-row-wrap, nowrap );
}

.alovesinh-column {
	display: flex;
	flex-direction: column;
	gap: var( --alv-column-gap, var( --alv-sp-2 ) );
}

/* Named twice to outrank an Elementor container's own display rule, which would otherwise leave
	the cards stacked in one column. */
.alovesinh-grid.alovesinh-grid {
	display: grid;
	grid-template-columns: repeat( var( --alv-grid-cols, 3 ), 1fr );
	gap: var( --alv-grid-gap, var( --alv-sp-3 ) );
	max-width: var( --alv-grid-width, var( --alv-w-grid ) );
	margin-inline: auto;
}

/* The five-across grid of the source design, type included: at five cards to a row the titles
	break mid-phrase unless the leading tightens and the copy drops a step, so the wording that
	goes with the grid travels with it instead of being set again on every card inside. */
.alovesinh-grid-five {
	--alv-grid-cols: 5;
	--alv-grid-cols-md: 3;
	--alv-grid-width: 1240px;
}

.alovesinh-grid-five .alovesinh-card h4 {
	line-height: var( --alv-lh-snug );
	letter-spacing: -0.005em;
}

.alovesinh-grid-five .alovesinh-card p {
	font-size: var( --alv-fs-3 );
	line-height: var( --alv-lh-body );
}

.alovesinh-grid-four {
	--alv-grid-cols: 4;
	--alv-grid-cols-md: 2;
}

.alovesinh-grid-pair {
	--alv-grid-cols: 2;
	--alv-grid-cols-md: 2;
	--alv-grid-gap: var( --alv-sp-2 );
	--alv-grid-width: none;
}

.alovesinh-split.alovesinh-split {
	display: grid;
	grid-template-columns: var( --alv-split-cols, 1fr 1fr );
	gap: var( --alv-split-gap, var( --alv-sp-5 ) );
	align-items: var( --alv-split-align, center );
}

.alovesinh-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var( --alv-sp-2 );
	height: 100%;
	padding: var( --alv-card-pad, var( --alv-sp-4 ) );
	border: var( --alv-bd-hairline ) solid var( --alv-card-border );
	border-radius: var( --alv-card-radius, var( --alv-r-4 ) );
	background: var( --alv-card-bg );
	box-shadow: var( --alv-card-shadow );
	transition:
		transform var( --alv-dur-3 ) ease,
		border-color var( --alv-dur-3 ) ease,
		background var( --alv-dur-3 ) ease,
		box-shadow var( --alv-dur-3 ) ease;
}

/* Only when the card IS an Elementor container: `.e-con-full` sets the padding longhands and
	`.e-con` the corner, both at one class, so the shorthands above lose and the card renders flat.
	Two classes here, so every rule that takes the inset back off must carry two as well. */
.e-con.alovesinh-card {
	padding: var( --alv-card-pad, var( --alv-sp-4 ) );
	border-radius: var( --alv-card-radius, var( --alv-r-4 ) );
}

.alovesinh-card:hover {
	border-color: var( --alv-card-border-hover );
	background: var( --alv-card-bg-hover, var( --alv-card-bg ) );
	box-shadow: var( --alv-card-shadow-hover );
	transform: translateY( -4px );
}

.alovesinh-card h3,
.alovesinh-card h4 {
	margin: 0;
	color: var( --alv-card-title );
}

.alovesinh-card p {
	margin: 0;
	line-height: var( --alv-lh-copy );
	color: var( --alv-card-text );
}

.alovesinh-card-image,
.e-con.alovesinh-card-image {
	gap: 0;
	overflow: hidden;
	padding: 0;
}

/* Named twice on purpose: Elementor ships `.elementor img { height: auto }` at 0-1-1, and a
	single class loses to it, handing the frame's height back to the photograph. */
.alovesinh-image-fill.alovesinh-image-fill {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.alovesinh-btn {
	--alv-btn-pad-y: 14px;
	--alv-btn-pad-x: 22px;
	--alv-btn-radius: var( --alv-r-2 );
	--alv-btn-font-size: var( --alv-fs-3 );
	--alv-btn-icon: var( --alv-fs-4 );
	display: inline-flex;
	align-items: center;
	gap: var( --alv-sp-2 );
	padding: var( --alv-btn-pad-y ) var( --alv-btn-pad-x );
	border-radius: var( --alv-btn-radius );
	font-size: var( --alv-btn-font-size );
	font-weight: var( --alv-fw-bold );
	transition:
		transform var( --alv-dur-1 ) ease,
		background var( --alv-dur-1 ) ease,
		box-shadow var( --alv-dur-1 ) ease;
}

/* An icon picked in the builder carries no width, height or fill of its own, so without this it
	grows to fill its box and paints itself black. Left free to shrink, as the source design leaves
	every inline mark, so a phone-width label wraps where the design's own label wraps. */
.alovesinh-btn svg,
.alovesinh-btn i {
	width: var( --alv-btn-icon );
	height: var( --alv-btn-icon );
	font-size: var( --alv-btn-icon );
	line-height: 1;
	fill: currentcolor;
}

.alovesinh-btn-large {
	--alv-btn-pad-y: 18px;
	--alv-btn-pad-x: 28px;
	--alv-btn-radius: var( --alv-r-3 );
	--alv-btn-font-size: var( --alv-fs-4 );
	--alv-btn-icon: 22px;
}

.alovesinh-btn:hover {
	transform: translateY( -1px );
}

/* Both classes are named on purpose, which is what carries the shadow. Elementor ships
	`.elementor a { box-shadow: none }` at specificity 0-1-1; a single class here loses to it and
	every filled button inside a container renders flat. Two classes win without an important. */
.alovesinh-btn.alovesinh-btn-primary,
.alovesinh-btn.alovesinh-btn-gradient {
	color: var( --alv-c-white );
	background: var( --alv-c-accent );
	box-shadow: 0 10px 24px color-mix( in srgb, var( --alv-c-accent ) 35%, transparent );
}

.alovesinh-btn.alovesinh-btn-primary:hover,
.alovesinh-btn.alovesinh-btn-gradient:hover {
	background: var( --alv-c-accent-hover );
	box-shadow: 0 14px 28px color-mix( in srgb, var( --alv-c-accent ) 45%, transparent );
}

/* Two classes, like the shared rule above, or that rule's flat fill wins and the gradient never shows.
	The hover swaps the two stops rather than lightening them, which keeps the button at the same
	weight while still answering the pointer. */
.alovesinh-btn.alovesinh-btn-gradient {
	background: linear-gradient( 135deg, var( --alv-c-accent ), var( --alv-c-accent-dark ) );
}

.alovesinh-btn.alovesinh-btn-gradient:hover {
	background: linear-gradient( 135deg, var( --alv-c-accent-dark ), var( --alv-c-accent ) );
}

/* The network's own blue, not a brand tint: this button is the one people recognise by colour
	before they read it, and repainting it in the theme's palette loses that. Two classes for the
	same reason as the primary button above. */
.alovesinh-btn.alovesinh-btn-zalo {
	color: var( --alv-c-white );
	background: var( --alv-c-zalo );
}

.alovesinh-btn-outline {
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	color: var( --alv-c-ink );
	background: var( --alv-c-white );
}

.alovesinh-btn-outline:hover {
	border-color: var( --alv-c-brand );
	color: var( --alv-c-brand-deep );
}

/* Two ways in, one set of values: a block whose ground is dark sets the context and every outline
	button inside follows, while a panel painted its own colour asks for the skin by name. Written
	twice, the two would drift the first time the tint changes. */
.alovesinh-btn-outline-dark,
.alovesinh-dark .alovesinh-btn-outline {
	border: var( --alv-bd-hairline ) solid color-mix( in srgb, var( --alv-c-white ) 16%, transparent );
	color: var( --alv-c-white );
	background: color-mix( in srgb, var( --alv-c-white ) 8%, transparent );
}

.alovesinh-btn-outline-dark:hover,
.alovesinh-dark .alovesinh-btn-outline:hover {
	border-color: var( --alv-c-white );
	color: var( --alv-c-white );
	background: color-mix( in srgb, var( --alv-c-white ) 14%, transparent );
}

.alovesinh-badge {
	display: inline-flex;
	align-items: center;
	gap: var( --alv-sp-1 );
	padding: var( --alv-sp-1 ) var( --alv-sp-2 );
	border-radius: var( --alv-r-pill );
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-bold );
	letter-spacing: var( --alv-tr-wide-2 );
	text-transform: uppercase;
	color: var( --alv-badge-text );
	background: var( --alv-badge-bg );
}

/* Brand by default rather than currentcolor: currentcolor would tint it with whatever the badge
	tone sets, and four blocks need the dot on a hue the text does not carry. */
.alovesinh-badge::before {
	content: "";
	width: var( --alv-badge-dot-size, var( --alv-sp-1 ) );
	height: var( --alv-badge-dot-size, var( --alv-sp-1 ) );
	border-radius: var( --alv-r-pill );
	background: var( --alv-badge-dot, var( --alv-c-brand ) );
	box-shadow: var( --alv-badge-dot-ring, none );
}

.alovesinh-badge-no-dot::before {
	content: none;
}

/* The source design draws every badge mark heavier than the register's default weight. */
.alovesinh-badge svg {
	stroke-width: var( --alv-stroke-3 );
}

/* No border unless a block asks for one: a transparent 1px default would widen every chip on the
	site by two pixels, so the box writes the whole shorthand instead of a colour. */
.alovesinh-pill {
	display: inline-flex;
	align-items: center;
	gap: var( --alv-sp-1 );
	padding: var( --alv-sp-1 ) var( --alv-sp-2 );
	border: var( --alv-pill-border, 0 );
	border-radius: var( --alv-r-pill );
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-bold );
	white-space: nowrap;

	/* Both colours inherit by default so a pill dropped into a tinted block takes that block's ink. */
	color: var( --alv-pill-text, inherit );
	background: var( --alv-pill-bg, transparent );
}

/* An icon picked in the builder carries no size of its own, so a chip printed with one collapses
	the mark to nothing until it is given these three. */
.alovesinh-badge svg,
.alovesinh-badge i,
.alovesinh-pill svg,
.alovesinh-pill i {
	width: var( --alv-pill-icon, 18px );
	height: var( --alv-pill-icon, 18px );
	font-size: var( --alv-pill-icon, 18px );
	line-height: 1;
	fill: currentcolor;
}

.alovesinh-card-post-dot,
.alovesinh-post-meta-dot {
	flex-shrink: 0;
	width: 4px;
	height: 4px;
	border-radius: var( --alv-r-circle );
	background: var( --alv-c-border-dash );
}

/* Out of sight but still in the tree: display: none would drop the caption a screen reader names the
	table by, the dial the keyboard reaches through its label, and the trap the handler waits on.
	Named twice so the field rule's input width and padding cannot reopen the dial to the field's size. */
.alovesinh-visually-hidden.alovesinh-visually-hidden {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	white-space: nowrap;
	clip-path: inset( 50% );
}

.alovesinh-icon-box {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: var( --alv-icon-box, 48px );
	height: var( --alv-icon-box, 48px );
	border-radius: var( --alv-icon-radius, var( --alv-r-2 ) );
	color: var( --alv-icon-color, var( --alv-c-brand-deep ) );
	background: var( --alv-icon-bg, color-mix( in srgb, var( --alv-c-brand ) 10%, transparent ) );
}

.alovesinh-icon-box svg,
.alovesinh-icon-box i {
	width: var( --alv-icon-size, 22px );
	height: var( --alv-icon-size, 22px );
	font-size: var( --alv-icon-size, 22px );
	line-height: 1;
	fill: currentcolor;
}

/* A mark from the register is a bare svg rather than the builder's <i>, so the size the box asks
	for has to reach it too; left alone it draws at its own 24 and breaks out of a smaller box. */
.alovesinh-icon-box > svg {
	width: var( --alv-icon-size, 22px );
	height: var( --alv-icon-size, 22px );
}

.alovesinh-initial {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: var( --alv-initial-size, 42px );
	height: var( --alv-initial-size, 42px );
	border-radius: var( --alv-r-circle );
	font-size: var( --alv-initial-font, var( --alv-fs-3 ) );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: var( --alv-tr-wide-1 );
	color: var( --alv-c-white );
	background: var( --alv-initial-bg, var( --alv-c-brand ) );
}

.alovesinh-bar {
	overflow: hidden;
	height: var( --alv-bar-height, 8px );
	border-radius: var( --alv-bar-radius, var( --alv-r-1 ) );
	background: var( --alv-bar-track, var( --alv-c-bg-light ) );
}

/* The box writes its figure unchecked: below zero the width turns invalid and the fill spans the track. */
.alovesinh-bar-fill {
	display: block;
	width: clamp( 0%, var( --alv-bar-ratio, 0% ), 100% );
	height: 100%;
	border-radius: inherit;
	background: var( --alv-bar-color, var( --alv-c-brand ) );
}

/* Named twice: a container writes its own padding, radius and border from Elementor's variables at
	the same weight and later in the cascade, so a single class leaves the box flat and unpadded the
	moment it is worn by a container rather than by a widget's own div. */
.alovesinh-bordered-box.alovesinh-bordered-box {
	padding: var( --alv-box-pad, var( --alv-sp-3 ) );
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	border-radius: var( --alv-box-radius, var( --alv-r-3 ) );
	background: var( --alv-c-white );
}

/* A white pane on a deep ground reads as a hole punched in the block, so on the dark skin the box
	becomes a lift of the ground itself — the same two values the source design gives the contact
	cells of the process pages. */
.alovesinh-dark .alovesinh-bordered-box.alovesinh-bordered-box {
	border-color: color-mix( in srgb, var( --alv-c-white ) 12%, transparent );
	background: color-mix( in srgb, var( --alv-c-white ) 6%, transparent );
}

/* Laid out as a flex row so the newline the template writes between two marks is not rendered as a
	word space: the source design sets the five marks touching, and four stray spaces widen the row
	by a fifth wherever it is measured by its content rather than by the box around it. */
.alovesinh-star-row {
	display: flex;
	position: relative;
	z-index: 1;
	font-size: var( --alv-star-size, var( --alv-fs-3 ) );
	letter-spacing: var( --alv-star-tracking, 2px );
	color: var( --alv-star-color, var( --alv-c-warning ) );
}

.alovesinh-star-empty {
	opacity: 0.3;
}

@media ( max-width: 980px ) {

	.alovesinh-grid.alovesinh-grid {
		grid-template-columns: repeat( var( --alv-grid-cols-md, 2 ), 1fr );
		gap: var( --alv-grid-gap-md, var( --alv-grid-gap, var( --alv-sp-3 ) ) );
	}

	.alovesinh-split.alovesinh-split {
		grid-template-columns: var( --alv-split-cols-md, 1fr );
		gap: var( --alv-split-gap-md, var( --alv-sp-4 ) );
	}
}

@media ( max-width: 560px ) {

	.alovesinh-grid.alovesinh-grid {
		grid-template-columns: repeat( var( --alv-grid-cols-sm, 1 ), 1fr );
	}
}

/* Two soft discs bleeding off the corners of a panel, which eight blocks of the source design
	use to lift a flat tint. They are pseudo-elements so the panel needs no empty markup, and the
	panel clips them so the glow stays inside its own corners. */
.alovesinh-glow.alovesinh-glow {
	position: relative;

	/* Named twice for the clip: an Elementor container writes its own overflow from a variable at the
		same weight, and a single class loses to it, letting both discs widen the page sideways. */
	overflow: hidden;
}

.alovesinh-glow::before,
.alovesinh-glow::after {
	content: "";
	position: absolute;
	aspect-ratio: 1;
	border-radius: var( --alv-r-circle );
	pointer-events: none;
}

.alovesinh-glow::before {
	inset: var( --alv-glow-one-inset, auto -20% -10% auto );
	width: var( --alv-glow-one-size, 60% );
	background: radial-gradient( circle at var( --alv-glow-at, 40% 40% ),
		var( --alv-glow-one, color-mix( in srgb, var( --alv-c-brand ) 50%, transparent ) ),
		transparent var( --alv-glow-fade, 60% ) );
}

.alovesinh-glow::after {
	inset: var( --alv-glow-two-inset, -15% -10% auto auto );
	width: var( --alv-glow-two-size, 50% );
	background: radial-gradient( circle at var( --alv-glow-at, 40% 40% ),
		var( --alv-glow-two, color-mix( in srgb, var( --alv-c-accent ) 35%, transparent ) ),
		transparent var( --alv-glow-fade, 60% ) );
}

/* The waiting class is added and removed by script, never set in the markup, so a visitor without
	JavaScript is served every row already in place instead of a blank band. The clip is horizontal
	only: overflow: hidden would cut the lifted shadow the photographs cast below themselves. */
.alovesinh-reveal.alovesinh-reveal {
	/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
	overflow-x: hidden;
	overflow-x: clip;
}

/* Three classes deep on purpose: Elementor's own widget rule sits at two and lists no opacity, so at
	one class the fade never ran and every child snapped from hidden to shown. */
.alovesinh-reveal.alovesinh-reveal > .elementor-element {
	--alv-reveal-delay: 0s;
	transition:
		opacity 0.55s cubic-bezier( 0.2, 0.65, 0.25, 1 ) var( --alv-reveal-delay ),
		transform 0.55s cubic-bezier( 0.2, 0.65, 0.25, 1 ) var( --alv-reveal-delay );
}

.alovesinh-reveal-waiting > * {
	opacity: 0;
}

.alovesinh-reveal-waiting > *:first-child {
	transform: translateX( -48px );
}

.alovesinh-reveal-waiting > *:last-child {
	transform: translateX( 48px );
}

/* Drawn on ::after so the block keeps ::before for Elementor's own background overlay, and lifted
	out at z-index -1 inside an isolated block so the wash lands under the content without every
	child in the block needing a z-index of its own. */
.alovesinh-wash {
	position: relative;
	isolation: isolate;
}

.alovesinh-wash::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient( ellipse 80% 40% at 20% 20%,
			color-mix( in srgb, var( --alv-c-brand ) 10%, transparent ), transparent 60% ),
		radial-gradient( ellipse 70% 35% at 80% 70%,
			color-mix( in srgb, var( --alv-c-accent ) var( --alv-wash-accent, 8% ), transparent ), transparent 60% );
	pointer-events: none;
}

/* A kit gradient holds two stops and this band runs three, so it is one class for the eight blocks
	that paint it rather than a background typed on each container. */
.alovesinh-dark-band {
	background: linear-gradient( 135deg,
		var( --alv-c-brand-deepest ) 0%, var( --alv-c-brand-deep ) 50%, var( --alv-c-brand-deepest ) 100% );
}

/* The name is doubled because Elementor gives every container an overflow of its own at equal
	weight and later in the cascade. Horizontal only: hidden cuts the frame's shadow at the lower edge.
	Vertical padding is left to the page, the one value that differs per page: set here, it beats each page's own. */
.alovesinh-banner.alovesinh-banner {
	position: relative;
	/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
	overflow-x: hidden;
	overflow-x: clip;
	background:
		radial-gradient( ellipse at 80% -10%,
			color-mix( in srgb, var( --alv-c-brand ) 18%, transparent ), transparent 50% ),
		radial-gradient( ellipse at -10% 90%,
			color-mix( in srgb, var( --alv-c-accent ) 10%, transparent ), transparent 55% ),
		var( --alv-c-white );
}

/* Doubled for the reason given above. The service pages and the blog share these rules and differ only
	in the space under the lead, which is why that one space is a variable. */
.alovesinh-banner-centred.alovesinh-banner-centred {
	text-align: center;
}

.alovesinh-banner-centred .alovesinh-heading {
	margin: 16px 0 14px;
}

.alovesinh-banner-centred .alovesinh-paragraph {
	max-width: 600px;
	margin: 0 auto var( --alv-banner-lead-gap, 28px );
	line-height: var( --alv-lh-loose );
}

.alovesinh-banner-lead-wide {
	--alv-banner-lead-gap: var( --alv-sp-4 );
}

/* A heading already colours its em, but the opening headline paints two different words in two
	different colours, which one hook cannot do. */
.alovesinh-ink-brand {
	color: var( --alv-c-brand );
}

.alovesinh-ink-accent {
	color: var( --alv-c-accent );
}

.alovesinh-draw-light {
	fill: var( --alv-c-white );
}

.alovesinh-draw-line-light {
	stroke: var( --alv-c-white );
}

.alovesinh-draw-ground {
	fill: var( --alv-c-brand-faint );
}

.alovesinh-draw-line-rule {
	stroke: var( --alv-c-brand-soft );
}

.alovesinh-draw-main {
	fill: var( --alv-c-brand );
}

.alovesinh-draw-line-main {
	stroke: var( --alv-c-brand );
}

.alovesinh-draw-deep {
	fill: var( --alv-c-brand-deep );
}

.alovesinh-draw-line-deep {
	stroke: var( --alv-c-brand-deep );
}

.alovesinh-draw-mute {
	fill: var( --alv-c-text-muted-dark );
}

.alovesinh-draw-line-mute {
	stroke: var( --alv-c-text-muted-dark );
}

.alovesinh-draw-warm {
	fill: var( --alv-c-accent );
}

.alovesinh-draw-line-warm {
	stroke: var( --alv-c-accent );
}

.alovesinh-draw-done {
	fill: var( --alv-c-success );
}

.alovesinh-draw-line-done {
	stroke: var( --alv-c-success );
}

.alovesinh-draw-ink {
	fill: var( --alv-c-ink );
}

.alovesinh-draw-ink-soft {
	fill: var( --alv-c-text-muted );
}

.alovesinh-draw-warm-deep {
	fill: var( --alv-c-orange-darkest );
}

.alovesinh-draw-soil {
	fill: var( --alv-c-soil );
}

.alovesinh-draw-soil-pale {
	fill: var( --alv-c-soil-pale );
}

.alovesinh-draw-dust {
	fill: var( --alv-c-dust );
}

.alovesinh-draw-line-rinse {
	stroke: var( --alv-c-rinse );
}

.alovesinh-draw-line-river {
	stroke: var( --alv-c-river );
}

.alovesinh-draw-line-river-pale {
	stroke: var( --alv-c-river-pale );
}

.alovesinh-draw-stop-soil-deep {
	stop-color: var( --alv-c-soil-deep );
}

.alovesinh-draw-stop-soil-dark {
	stop-color: var( --alv-c-soil-dark );
}

.alovesinh-draw-stop-stain-deep {
	stop-color: var( --alv-c-stain-deep );
}

.alovesinh-draw-stop-stain {
	stop-color: var( --alv-c-stain );
}

.alovesinh-draw-stop-rinse-pale {
	stop-color: var( --alv-c-rinse-pale );
}

.alovesinh-draw-stop-rinse {
	stop-color: var( --alv-c-rinse );
}

.alovesinh-draw-stop-linen {
	stop-color: var( --alv-c-linen );
}

.alovesinh-draw-stop-linen-shade {
	stop-color: var( --alv-c-linen-shade );
}

.alovesinh-draw-stop-sky-pale {
	stop-color: var( --alv-c-sky-pale );
}

.alovesinh-draw-stop-sky-soft {
	stop-color: var( --alv-c-sky-soft );
}

.alovesinh-draw-stop-orange-lightest {
	stop-color: var( --alv-c-orange-lightest );
}

.alovesinh-draw-stop-orange-light {
	stop-color: var( --alv-c-orange-light );
}

/* The article body is written as running prose in the editor, not assembled from widgets, so the
	whole typographic contract has to live on one class the editor's own text widget can wear. */
.alovesinh-prose h2 {
	margin: var( --alv-sp-5 ) 0 var( --alv-gap-heading );
	font-size: clamp( 24px, 2.4vw, 30px );
}

.alovesinh-prose h2:first-child {
	margin-top: 0;
}

.alovesinh-prose h3 {
	margin: var( --alv-sp-4 ) 0 var( --alv-sp-2 );
}

.alovesinh-prose p {
	margin-bottom: var( --alv-sp-3 );
	font-size: 17px;
	line-height: 1.75;
}

.alovesinh-prose ul {
	display: flex;
	flex-direction: column;
	gap: var( --alv-sp-2 );
	margin-bottom: var( --alv-sp-4 );
	padding: 0;
	list-style: none;
}

/* Room on the left for the disc, which is positioned rather than laid out: a writer types plain
	list items in the editor and never a marker, so the tick has to be drawn by the stylesheet.
	Bullet lists only: an ordered list keeps its numbers and would print a tick beside each one. */
.alovesinh-prose ul > li {
	position: relative;
	padding-left: 32px;
	font-size: var( --alv-fs-3 );
	line-height: var( --alv-lh-body );
	color: var( --alv-c-text-2 );
}

.alovesinh-prose ul > li::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: var( --alv-r-circle );
	background: color-mix( in srgb, var( --alv-c-brand ) 10%, transparent );
}

/* The source design's own tick, painted through a mask so the colour stays the token's: two turned
	borders only approximate that polyline. */
.alovesinh-prose ul > li::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 4px;
	width: 12px;
	height: 12px;
	background: var( --alv-c-brand-deep );
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

/* One shape for a quote however it reached the page: the widget prints the class, a writer's
	post content prints a bare blockquote. Written twice, the two drift the day one is tuned.
	The rule and the wash stay variables so the widget's colour boxes still repaint them. */
.alovesinh-blockquote,
.alovesinh-prose blockquote {
	margin: var( --alv-sp-4 ) 0;
	padding: var( --alv-sp-3 ) var( --alv-sp-3 ) var( --alv-sp-3 ) var( --alv-sp-4 );
	border-left: 4px solid var( --alv-quote-rule, var( --alv-c-brand ) );
	border-radius: var( --alv-r-3 );
	font-size: var( --alv-fs-4 );
	line-height: var( --alv-lh-relaxed );
	color: var( --alv-c-ink );
	background: var( --alv-quote-bg, var( --alv-c-brand-faint ) );
}

/* The editor's text block ends the article, and its closing paragraph keeps a bottom margin that
	the widget boundary stops from collapsing into the share row's own, so the two stack up. */
.alovesinh-prose > :first-child > :last-child {
	margin-bottom: 0;
}

/* The editor wraps quoted text in a paragraph, which would otherwise take the running-prose size
	and leave the quote set a step smaller than the box it was pulled out of. */
.alovesinh-prose blockquote p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.alovesinh-prose.alovesinh-prose.alovesinh-prose.alovesinh-prose.alovesinh-prose figure {
	margin: 0 0 var( --alv-sp-4 );
}

/* Cropped to the design's frame rather than left at whatever the writer uploaded: a portrait
	photograph dropped into the editor runs the column a third of a screen longer and pushes
	everything under it out of step with the rail standing beside it. */
.alovesinh-prose figure img {
	display: block;
	width: 100%;
	aspect-ratio: var( --alv-ratio-cover );
	object-fit: cover;
	border-radius: var( --alv-r-3 );
}

.alovesinh-prose figcaption {
	margin-top: var( --alv-sp-2 );
	font-size: var( --alv-fs-2 );
	text-align: center;
	color: var( --alv-c-text-muted );
}

/* The frame clips, which is the only thing that keeps the head row's tint inside the rounded
	corner instead of squaring it off. The block editor's own table wrapper is named alongside it:
	a writer inserts a table block and never a div, and the frame has to find it either way. */
.alovesinh-prose-table,
.alovesinh-prose .wp-block-table {
	overflow: hidden;
	margin-bottom: var( --alv-sp-4 );
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	border-radius: var( --alv-r-3 );
}

/* The caution box of an article. The mark is drawn rather than marked up for the same reason the
	list tick is: a writer types a paragraph inside a group block and no icon comes with it. */
.alovesinh-prose-note {
	display: flex;
	gap: var( --alv-sp-2 );
	margin-bottom: var( --alv-sp-4 );
	padding: var( --alv-sp-3 );
	border: var( --alv-bd-hairline ) solid var( --alv-c-warning-edge );
	border-radius: var( --alv-r-3 );
	background: var( --alv-c-warning-pale );
}

/* Masked rather than printed as a glyph, because the design's mark is an open triangle on the 24
	grid and no character carries that shape. The mask paints the token colour through it, so the
	caution ink stays the one the palette names. */
.alovesinh-prose-note::before {
	content: "";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background: var( --alv-c-warning-text );
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

/* A step down from the running copy around it: the caution is an aside, and set at the body size
	it reads as another paragraph of the article rather than a note pinned beside it. */
.alovesinh-prose-note p {
	font-size: var( --alv-fs-3 );
	line-height: var( --alv-lh-relaxed );
	color: var( --alv-c-text-3 );
}

.alovesinh-prose-note p:last-child {
	margin-bottom: 0;
}

.alovesinh-prose table {
	width: 100%;
	border-collapse: collapse;
}

/* The design rules a table across in one weight only. The block editor's own sheet loads after this
	one, boxing every cell and laying a heavy rule under the head, so `table` stands in these three
	selectors to outweigh it. */
.alovesinh-prose table thead {
	border: 0;
}

.alovesinh-prose table th {
	padding: var( --alv-sp-2 ) var( --alv-sp-3 );
	border: 0;
	border-bottom: var( --alv-bd-hairline ) solid var( --alv-c-border );
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-semibold );
	letter-spacing: var( --alv-tr-wide-1 );
	text-align: left;
	text-transform: uppercase;
	color: var( --alv-c-text-muted );
	background: var( --alv-c-bg-light );
}

.alovesinh-prose table td {
	padding: 14px var( --alv-sp-3 );
	border: 0;
	border-bottom: var( --alv-bd-hairline ) solid var( --alv-c-border );
	font-size: var( --alv-fs-3 );
	color: var( --alv-c-text-2 );
}

.alovesinh-prose tbody tr:last-child td {
	border-bottom: 0;
}

/* A panel that hangs below the bar spans the whole content frame, so the frame has to be the
	element it measures from. Elementor makes every widget wrapper relative, which would otherwise
	trap the panel inside the width of the menu itself. */
.alovesinh-anchor {
	position: relative;
}

.alovesinh-anchor .alv-w-mega-menu {
	position: static;
}

/* Below the design's tablet-portrait width every band is set on the shorter of the two measures.
	The three named here are not bands and keep their own: the opening block, the figure strip that
	sits flush, and the cover plate whose picture already stands away from the frame. */
@media ( max-width: 820px ) {

	main .elementor > .e-con:not( .alovesinh-banner ):not( .alovesinh-thanh-so-lieu ):not( .alovesinh-article-cover ) > .e-con-inner {
		padding-block: var( --alv-sp-6 );
	}
}

/* Elementor's responsive switches drop things at its editor breakpoints, not the design's, so a
	container that must vanish at 980 or 560 says so with a class. Each name is doubled because
	Elementor's `.e-con { display: var( --display ) }` ties on weight and loads later. */
@media ( max-width: 980px ) {

	.alovesinh-hide-md.alovesinh-hide-md {
		display: none;
	}
}

@media ( max-width: 560px ) {

	.alovesinh-hide-sm.alovesinh-hide-sm {
		display: none;
	}

	.alovesinh-quy-trinh-banner {
		--alv-banner-lead-gap: 22px;
	}

	.alovesinh-quy-trinh-banner .alovesinh-paragraph {
		font-size: 1rem;
	}

	.alovesinh-quy-trinh-banner .alovesinh-button-row .alovesinh-btn,
	.alovesinh-quy-trinh-lien-he .alovesinh-button-row .alovesinh-btn {
		flex: 1 1 100%;
		justify-content: center;
	}

	.alovesinh-prose-table,
	.alovesinh-prose .wp-block-table {
		overflow-x: auto;
	}

	.alovesinh-prose table {
		min-width: 460px;
	}
}

/* The source design gives the marks of these blocks their own weight and size, where the register
	draws every mark at one default weight and each widget sizes its own. */
.alovesinh-cau-chuyen-mot-dem .alovesinh-btn svg,
.alovesinh-bang-chung-anh .alovesinh-btn svg,
.alovesinh-khuyen-mai-50-suat .alovesinh-btn svg,
.alovesinh-thong-so-ky-thuat .alovesinh-btn svg,
.alovesinh-danh-muc-dich-vu .alovesinh-btn-outline svg,
.alovesinh-phan-loai-nem .alovesinh-list-check-item svg,
.alovesinh-tang-tai-lieu .alovesinh-form-submit svg,
.alovesinh-khuyen-mai-nem-sofa .alovesinh-progress-bar-note svg {
	stroke-width: var( --alv-stroke-3 );
}

.alovesinh-khuyen-mai-nem-sofa .alovesinh-btn svg,
.alovesinh-dat-lich-day-du .alovesinh-form-submit svg,
.alovesinh-dat-lich-day-du .alovesinh-call-block svg,
.alovesinh-dich-vu-6-the .alovesinh-card-tile .alovesinh-icon-box svg {
	stroke-width: var( --alv-stroke-4 );
}

.alovesinh-quy-trinh-10-buoc .alovesinh-timeline-icon svg,
.alovesinh-truoc-sau-truot .alovesinh-list-lead-item svg,
.alovesinh-bao-hanh-3-lop .alovesinh-icon-box svg,
.alovesinh-ly-do-tin-tuong .alovesinh-card-icon-icon svg,
.alovesinh-bao-hanh-vang .alovesinh-card-icon-icon svg,
.alovesinh-bao-hanh-vang .alovesinh-float-badge .alovesinh-icon-box svg,
.alovesinh-danh-gia-nen-sang .alovesinh-card-review-note svg,
.alovesinh-khuyen-mai-50-suat .alovesinh-pill svg {
	stroke-width: var( --alv-stroke-2 );
}

.alovesinh-tang-tai-lieu .alovesinh-list-check-item svg,
.alovesinh-khuyen-mai-nem-sofa .alovesinh-list-check-item svg,
.alovesinh-dat-lich-day-du .alovesinh-list-check-item svg {
	stroke-width: var( --alv-stroke-6 );
}

.alovesinh-nhom-khach-hang .alovesinh-card-persona-icon svg {
	stroke-width: var( --alv-stroke-1 );
}

.alovesinh-so-sanh-3-cot .alovesinh-table-compare-cell-no svg {
	stroke-width: var( --alv-stroke-5 );
}

.alovesinh-so-sanh-3-cot .alovesinh-table-compare-cell-yes svg {
	stroke-width: var( --alv-stroke-6 );
}

.alovesinh-bang-gia-loai-nem .alovesinh-tabs-button svg,
.alovesinh-phan-loai-nem .alovesinh-tabs-button svg,
.alovesinh-khu-vuc-phuc-vu .alovesinh-area-grid-timing-item svg,
.alovesinh-dat-lich-nhanh .alovesinh-list-lead-item svg {
	stroke-linecap: butt;
	stroke-linejoin: miter;
}

.alovesinh-phan-loai-nem .alovesinh-list-check-item svg,
.alovesinh-truoc-sau-truot .alovesinh-list-lead-item svg,
.alovesinh-tang-tai-lieu .alovesinh-badge svg,
.alovesinh-tang-tai-lieu .alovesinh-list-check-item svg,
.alovesinh-tang-tai-lieu .alovesinh-form-submit svg,
.alovesinh-bao-hanh-3-lop .alovesinh-icon-box svg,
.alovesinh-khuyen-mai-nem-sofa .alovesinh-badge svg,
.alovesinh-khuyen-mai-nem-sofa .alovesinh-list-check-item svg,
.alovesinh-khuyen-mai-nem-sofa .alovesinh-btn svg,
.alovesinh-dat-lich-day-du .alovesinh-list-check-item svg,
.alovesinh-dat-lich-day-du .alovesinh-call-block svg,
.alovesinh-dat-lich-day-du .alovesinh-form-submit svg {
	stroke-linejoin: miter;
}

.alovesinh-bang-gia-3-goi .alovesinh-price-tier-features svg,
.alovesinh-danh-gia-nen-toi .alovesinh-rating-line-verified svg {
	stroke-linejoin: round;
}

.alovesinh-thong-so-ky-thuat .alovesinh-btn {
	--alv-btn-icon: 16px;
}

.alovesinh-danh-muc-dich-vu .alovesinh-btn-outline {
	--alv-btn-icon: 14px;
}

.alovesinh-khuyen-mai-50-suat .alovesinh-btn-large {
	--alv-btn-icon: 20px;
}

.alovesinh-tang-tai-lieu .alovesinh-form-submit {
	--alv-btn-icon: 18px;
}

.alovesinh-bao-hanh-3-lop .alovesinh-list-lead-item .alovesinh-icon-box {
	--alv-icon-size: 22px;
}

/* Doubled where a block sets on a container what Elementor also sets on every container at one class,
	later in the cascade: display, position, overflow, margin, padding, radius, flex. */
.alovesinh-dau-trang {
	border-bottom: var( --alv-bd-hairline ) solid var( --alv-c-border );
}

.alovesinh-chan-trang {
	--alv-block-accent: var( --alv-c-white );
	color: var( --alv-c-on-dark );
}

.alovesinh-chan-trang-luoi.alovesinh-chan-trang-luoi {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: var( --alv-sp-5 );
	margin-bottom: 40px;
}

@media ( max-width: 820px ) {

	.alovesinh-chan-trang-luoi.alovesinh-chan-trang-luoi {
		grid-template-columns: 1fr 1fr;
		gap: var( --alv-sp-4 );
	}
}

@media ( max-width: 560px ) {

	.alovesinh-chan-trang-luoi.alovesinh-chan-trang-luoi {
		grid-template-columns: 1fr;
	}
}

.alovesinh-chan-trang-cuoi {
	border-top: var( --alv-bd-hairline ) solid color-mix( in srgb, var( --alv-c-white ) 8%, transparent );
}

.alovesinh-quy-trinh-lien-he.alovesinh-quy-trinh-lien-he {
	overflow: hidden;
}

.alovesinh-quy-trinh-lien-he .alovesinh-grid {
	--alv-grid-gap: 16px;
	--alv-grid-width: 1080px;
	--alv-stacked-label-gap: var( --alv-sp-1 );
	--alv-stacked-label-tracking: 0.14em;
	--alv-stacked-label-size: 17px;
	--alv-stacked-label-line: var( --alv-lh-snug );
	margin-bottom: var( --alv-sp-4 );
}

.alovesinh-bai-viet-than {
	--alv-split-cols: minmax( 0, 1fr ) 320px;
	--alv-split-gap-md: var( --alv-sp-5 );
	--alv-split-align: start;
}

.alovesinh-bai-viet-chia-se.alovesinh-bai-viet-chia-se {
	margin-top: var( --alv-sp-4 );
	border-top: var( --alv-bd-hairline ) solid var( --alv-c-border );
}

.alovesinh-bai-viet-cot-phu.alovesinh-bai-viet-cot-phu {
	position: sticky;
	top: var( --alv-sticky-top );
}

.alovesinh-bai-viet-the-dat-lich {
	--alv-card-pad: 24px;
	--alv-card-bg: linear-gradient( 135deg, var( --alv-c-brand-deepest ) 0%, var( --alv-c-brand-deep ) 100% );
	--alv-card-border: transparent;
	--alv-card-title: var( --alv-c-white );
	--alv-card-text: var( --alv-c-on-dark );
}

.alovesinh-bai-viet-the-dat-lich .alovesinh-btn {
	justify-content: center;
}

/* 0px, not 0: the frame's max-width adds this to a length inside calc(), and a bare 0 voids the sum. */
.alovesinh-bai-viet-tac-gia {
	--alv-w-frame-gutter: 0px;
}

.alovesinh-bang-lien-he .alovesinh-cta-row {
	margin-top: var( --alv-sp-3 );
}

/* Elementor sets a container's flex from two classes, so the banner's share needs a third. */
.alovesinh-banner.alovesinh-banner .alovesinh-banner-chu {
	flex: 1.01;
}

.alovesinh-banner.alovesinh-banner .alovesinh-banner-hinh {
	flex: 0.99;
	aspect-ratio: 4 / 4.4;
}

.alovesinh-banner-the.alovesinh-banner-the {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: var( --alv-r-4 );
	background: linear-gradient( 160deg, var( --alv-c-brand-soft ) 0%, var( --alv-c-bg-warm ) 100% );
	box-shadow: 0 16px 32px 0 color-mix( in srgb, var( --alv-c-ink ) 14%, transparent );
}

@media ( max-width: 560px ) {

	.alovesinh-banner.alovesinh-banner .alovesinh-banner-hinh {
		aspect-ratio: auto;
	}

	.alovesinh-banner-the.alovesinh-banner-the {
		position: relative;
		inset: auto;
	}
}

.alovesinh-khuyen-mai-dem-nguoc-the.alovesinh-khuyen-mai-dem-nguoc-the {
	--alv-khuyen-mai-dem-nguoc-toi: #0A3A44;
	--alv-badge-bg: color-mix( in srgb, var( --alv-c-white ) 16%, transparent );
	--alv-badge-text: var( --alv-c-white );
	--alv-badge-dot: var( --alv-c-white );
	--alv-pill-bg: color-mix( in srgb, var( --alv-c-white ) 16%, transparent );
	--alv-pill-text: var( --alv-c-white );
	overflow: hidden;
	color: var( --alv-c-white );
	background: linear-gradient( 110deg, var( --alv-khuyen-mai-dem-nguoc-toi ) 0%, var( --alv-c-brand ) 60%, var( --alv-c-accent ) 130% );
	box-shadow: 0 30px 60px color-mix( in srgb, var( --alv-c-brand ) 25%, transparent );
}

.alovesinh-khuyen-mai-dem-nguoc-the::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient( circle at 90% 20%,
		color-mix( in srgb, var( --alv-c-white ) 18%, transparent ), transparent 40% );
	pointer-events: none;
}

.alovesinh-khuyen-mai-dem-nguoc-the.alovesinh-khuyen-mai-dem-nguoc-the > .alovesinh-khuyen-mai-dem-nguoc-noi-dung {
	flex: 1.4;
}

.alovesinh-khuyen-mai-dem-nguoc-the.alovesinh-khuyen-mai-dem-nguoc-the > .alovesinh-khuyen-mai-dem-nguoc-dong-ho {
	flex: 1;
}

.alovesinh-cau-chuyen-mot-dem-moc {
	--alv-block-accent: var( --alv-c-orange-soft );
}

.alovesinh-cau-chuyen-mot-dem-moc .alovesinh-reveal.alovesinh-reveal > .alv-w-image {
	--alv-reveal-delay: 0.1s;
}

@media ( max-width: 820px ) {

	.alovesinh-cau-chuyen-mot-dem-moc {
		--alv-split-gap-md: var( --alv-sp-3 );
	}
}

.alovesinh-cau-chuyen-mot-dem-ket.alovesinh-cau-chuyen-mot-dem-ket {
	--alv-block-accent: var( --alv-c-orange-soft );
	max-width: var( --alv-w-grid );
	margin: 80px auto 0;
	padding-top: 60px;
	border-top: var( --alv-bd-hairline ) solid color-mix( in srgb, var( --alv-c-white ) 8%, transparent );
}

.alovesinh-cau-chuyen-mot-dem-ket .alovesinh-btn {
	--alv-btn-icon: 18px;
	padding: 16px 30px;
}

.alovesinh-bang-gia-loai-nem-khung {
	--alv-box-pad: 0;
	--alv-box-radius: var( --alv-r-4 );
}

.alovesinh-bang-gia-loai-nem-khung.alovesinh-bang-gia-loai-nem-khung {
	overflow: hidden;
	box-shadow: var( --alv-sh-2 );
}

.alovesinh-thong-so-ky-thuat-tai-lieu.alovesinh-thong-so-ky-thuat-tai-lieu {
	max-width: 760px;
	margin: 80px auto 0;
	padding: 32px 36px;
	border-radius: var( --alv-r-4 );
	background: var( --alv-c-ink );
}

.alovesinh-phan-loai-khung-hinh.alovesinh-phan-loai-khung-hinh {
	display: grid;
	place-items: center;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var( --alv-r-3 );
	background: linear-gradient( 160deg, var( --alv-c-brand-faint ), var( --alv-c-bg-warm ) );
}

.alovesinh-phan-loai-luu-y {
	--alv-paragraph-color: #7C2D12;
	--alv-paragraph-size: var( --alv-fs-2 );
}

.alovesinh-phan-loai-luu-y.alovesinh-phan-loai-luu-y {
	padding: 10px 14px;
	border-left: 3px solid var( --alv-c-warning );
	border-radius: var( --alv-r-1 );
	background: color-mix( in srgb, var( --alv-c-warning ) 10%, transparent );
}

.alovesinh-logo-loi-khen-luoi {
	--alv-grid-cols-sm: 2;
	--alv-grid-gap: var( --alv-sp-2 );
	--alv-grid-width: none;
	--alv-box-radius: var( --alv-r-4 );
}

.alovesinh-logo-loi-khen-luoi.alovesinh-logo-loi-khen-luoi {
	background: var( --alv-c-bg-light );
	box-shadow: var( --alv-sh-1 );
}

@media ( max-width: 980px ) {

	.alovesinh-logo-loi-khen-luoi {
		--alv-box-pad: var( --alv-sp-2 );
	}
}

@media ( max-width: 560px ) {

	.alovesinh-logo-loi-khen-luoi {
		--alv-grid-gap: 6px;
	}
}

.alovesinh-danh-muc-dich-vu-tu-van {
	--alv-box-pad: var( --alv-sp-4 );
	--alv-box-radius: var( --alv-r-4 );
}

.alovesinh-danh-muc-dich-vu-tu-van.alovesinh-danh-muc-dich-vu-tu-van {
	margin-top: var( --alv-sp-5 );
	text-align: center;
	background: var( --alv-c-bg-light );
}

.alovesinh-khach-tieu-bieu .alovesinh-grid-pair {
	--alv-grid-cols-sm: 2;
}

.alovesinh-dat-lich-nhanh-the.alovesinh-dat-lich-nhanh-the {
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	border-radius: var( --alv-r-4 );
	background: linear-gradient( 160deg, var( --alv-c-white ), var( --alv-c-bg-light ) );
	box-shadow: var( --alv-sh-2 );
}

@media ( max-width: 820px ) {

	.alovesinh-dat-lich-nhanh-the.alovesinh-dat-lich-nhanh-the {
		padding: var( --alv-sp-3 );
	}
}

.alovesinh-tang-tai-lieu .alovesinh-split.alovesinh-split {
	max-width: 1100px;
	margin-inline: auto;
}

.alovesinh-tang-tai-lieu-danh-gia {
	--alv-box-pad: 14px 16px;
	--alv-box-radius: var( --alv-r-2 );
}

.alovesinh-bao-hanh-3-lop .alovesinh-grid {
	--alv-grid-cols-md: 1;
}

.alovesinh-bao-hanh-3-lop-hop-dong {
	--alv-box-pad: 22px 28px;
}

.alovesinh-bao-hanh-3-lop-hop-dong.alovesinh-bao-hanh-3-lop-hop-dong {
	max-width: var( --alv-w-grid );
	margin-inline: auto;
}

.alovesinh-khuyen-mai-nem-sofa-the.alovesinh-khuyen-mai-nem-sofa-the {
	overflow: hidden;
	max-width: var( --alv-w-grid );
	margin: 0 auto;
	padding: var( --alv-sp-5 );
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	border-radius: var( --alv-r-4 );
	background: var( --alv-c-white );
	box-shadow: 0 30px 60px -20px color-mix( in srgb, var( --alv-c-brand-deepest ) 18%, transparent );
}

.alovesinh-khuyen-mai-nem-sofa-the.alovesinh-khuyen-mai-nem-sofa-the::before {
	content: "";
	position: absolute;
	top: -100px;
	right: -100px;
	width: 320px;
	height: 320px;
	border-radius: var( --alv-r-circle );
	background: radial-gradient( circle, color-mix( in srgb, var( --alv-c-accent ) 18%, transparent ), transparent 70% );
	pointer-events: none;
}

@media ( max-width: 980px ) {

	.alovesinh-khuyen-mai-nem-sofa-the.alovesinh-khuyen-mai-nem-sofa-the {
		padding: var( --alv-sp-4 ) 24px;
	}
}

.alovesinh-khuyen-mai-nem-sofa-the > .e-con {
	z-index: 1;
}

.alovesinh-khuyen-mai-nem-sofa-the .alovesinh-btn {
	--alv-btn-icon: 20px;
	justify-content: center;
	width: 100%;
}

.alovesinh-khuyen-mai-nem-sofa-hinh.alovesinh-khuyen-mai-nem-sofa-hinh {
	overflow: hidden;
	background: linear-gradient( 180deg, var( --alv-c-bg-light ) 0%, var( --alv-c-white ) 100% );
}

.alovesinh-dat-lich-day-du {
	--alv-glow-at: 50% 50%;
	--alv-glow-fade: 70%;
	--alv-glow-one-inset: -200px auto auto -200px;
	--alv-glow-one-size: 500px;
	--alv-glow-one: color-mix( in srgb, var( --alv-c-brand ) 20%, transparent );
	--alv-glow-two-inset: auto -200px -200px auto;
	--alv-glow-two-size: 500px;
	--alv-glow-two: color-mix( in srgb, var( --alv-c-accent ) 15%, transparent );
}

.alovesinh-dat-lich-day-du .alovesinh-split.alovesinh-split {
	z-index: 1;
	max-width: var( --alv-w-grid );
	margin: 0 auto;
}

.alovesinh-dat-lich-day-du-bang-chung.alovesinh-dat-lich-day-du-bang-chung {
	padding: var( --alv-sp-3 );
	border: var( --alv-bd-hairline ) solid color-mix( in srgb, var( --alv-c-white ) 12%, transparent );
	border-radius: var( --alv-r-3 );
	background: color-mix( in srgb, var( --alv-c-white ) 9%, transparent );
}

.alovesinh-dat-lich-day-du-khach {
	border-bottom: var( --alv-bd-hairline ) solid color-mix( in srgb, var( --alv-c-white ) 12%, transparent );
}

.alovesinh-quy-trinh-4-buoc .alovesinh-grid {
	--alv-grid-gap: var( --alv-sp-4 );
	--alv-grid-gap-md: 40px 24px;
}

.alovesinh-ly-do-tin-tuong.alovesinh-ly-do-tin-tuong {
	--alv-wash-accent: 6%;
	overflow: hidden;
}

.alovesinh-danh-gia-nen-toi,
.alovesinh-bang-chung-anh {
	border-top: var( --alv-bd-hairline ) solid color-mix( in srgb, var( --alv-c-white ) 4%, transparent );
}

.alovesinh-bang-chung-anh-ket .alovesinh-btn.alovesinh-btn {
	--alv-btn-icon: 16px;
	color: var( --alv-c-white );
	background: var( --alv-c-brand );
	box-shadow: none;
}

.alovesinh-bao-hanh-vang.alovesinh-bao-hanh-vang {
	overflow: hidden;
}

/* Stamps and band sit in the flow: pinned in px, the stamp covered the band's words once the column narrowed.
	Padding and nowrap because Elementor zeroes a widget's bottom margin and wraps a container on a phone. */
.alovesinh-bao-hanh-vang-hinh.alovesinh-bao-hanh-vang-hinh {
	--alv-bao-hanh-vang-nen: 15 40 80;
	--alv-bao-hanh-vang-cham: #FACC15;
	--alv-bao-hanh-vang-khung: #3F7BAA;
	--alv-bao-hanh-vang-nhan: #BFD5EC;
	flex-wrap: nowrap;
	row-gap: var( --alv-sp-2 );
	aspect-ratio: 4 / 4.6;
	padding-bottom: 30px;
}

@media ( max-width: 820px ) {

	.alovesinh-bao-hanh-vang-hinh.alovesinh-bao-hanh-vang-hinh {
		width: 100%;
		max-width: 480px;
		margin: 0 auto;
	}
}

.alovesinh-bao-hanh-vang-hinh .alovesinh-frame.alovesinh-frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: var( --alv-r-4 );
	background-color: var( --alv-bao-hanh-vang-khung );
	box-shadow: 0 30px 60px rgb( var( --alv-bao-hanh-vang-nen ) / 0.25 );
}

.alovesinh-bao-hanh-vang-hinh .alovesinh-frame.alovesinh-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg,
		rgb( var( --alv-bao-hanh-vang-nen ) / 0.05 ) 0%,
		rgb( var( --alv-bao-hanh-vang-nen ) / 0 ) 30%,
		rgb( var( --alv-bao-hanh-vang-nen ) / 0.2 ) 60%,
		rgb( var( --alv-bao-hanh-vang-nen ) / 0.55 ) 100% );
	pointer-events: none;
}

.alovesinh-bao-hanh-vang-hinh .alovesinh-frame::after {
	content: "";
	position: absolute;
	top: 36px;
	right: 30%;
	width: 140px;
	height: 50px;
	background-image: radial-gradient( circle, var( --alv-bao-hanh-vang-cham ) 1.5px, transparent 1.5px );
	background-size: 14px 14px;
	opacity: 0.85;
	pointer-events: none;
}

.alovesinh-khuyen-mai-50-suat.alovesinh-khuyen-mai-50-suat {
	--alv-khuyen-mai-50-suat-dam: #F04E1D;
	--alv-khuyen-mai-50-suat-nhat: #FF8A3D;
	overflow: hidden;
	color: var( --alv-c-white );
	background: linear-gradient( 135deg, var( --alv-khuyen-mai-50-suat-nhat ) 0%, var( --alv-c-accent ) 60%, var( --alv-khuyen-mai-50-suat-dam ) 100% );
}

.alovesinh-khuyen-mai-50-suat::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient( ellipse 60% 40% at 50% 0%,
		color-mix( in srgb, var( --alv-c-white ) 18%, transparent ), transparent 70% );
	pointer-events: none;
}

.alovesinh-khuyen-mai-50-suat > .e-con-inner {
	position: relative;
	z-index: 2;
}

.alovesinh-khuyen-mai-50-suat-hep.alovesinh-khuyen-mai-50-suat-hep {
	max-width: 680px;
	margin: 0 auto var( --alv-sp-4 );
}

.alovesinh-khuyen-mai-50-suat-nut.alovesinh-khuyen-mai-50-suat-nut {
	max-width: 760px;
	margin: 0 auto 22px;
}

.alovesinh-khuyen-mai-50-suat-nut .alovesinh-btn {
	justify-content: center;
	width: 100%;
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: 0.02em;
}

.alovesinh-khuyen-mai-50-suat-nut .alovesinh-cta-call .alovesinh-btn {
	color: var( --alv-khuyen-mai-50-suat-dam );
	background: var( --alv-c-white );
	box-shadow: var( --alv-sh-2 );
}

.alovesinh-khuyen-mai-50-suat-nut .alovesinh-cta-zalo .alovesinh-btn {
	border: 2px solid color-mix( in srgb, var( --alv-c-white ) 70%, transparent );
	color: var( --alv-c-white );
	background: transparent;
	box-shadow: none;
}

.alovesinh-khuyen-mai-50-suat-nut .alovesinh-cta-zalo .alovesinh-btn:hover {
	background: color-mix( in srgb, var( --alv-c-white ) 10%, transparent );
}

@media ( prefers-reduced-motion: reduce ) {

	.alovesinh-card,
	.alovesinh-btn,
	.alovesinh-reveal.alovesinh-reveal > .elementor-element {
		transition: none;
	}

	.alovesinh-card:hover,
	.alovesinh-btn:hover {
		transform: none;
	}

	.alovesinh-reveal-waiting > * {
		opacity: 1;
		transform: none;
	}
}