/* Group stylesheet for the image widgets. */

.alovesinh-image {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	border-radius: var( --alv-image-radius, var( --alv-r-3 ) );
}

/* Named twice on purpose. Elementor's `.elementor img { height: auto }` ties on weight, so which
	wins depends on load order — Elementor lands after this file on the home page and before it on
	a plain page. Two classes settle it without an important. */
.alovesinh-image.alovesinh-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.alovesinh-image svg {
	display: block;
	width: 100%;
	height: 100%;
}

.alovesinh-image-label {
	position: absolute;
	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 );
	color: var( --alv-c-ink );
	background: var( --alv-c-white );
}

.alovesinh-image-label-top-left {
	top: var( --alv-sp-2 );
	left: var( --alv-sp-2 );
}

.alovesinh-image-label-top-right {
	top: var( --alv-sp-2 );
	right: var( --alv-sp-2 );
}

.alovesinh-image-label-bottom-left {
	bottom: var( --alv-sp-2 );
	left: var( --alv-sp-2 );
}

.alovesinh-image-label-bottom-right {
	bottom: var( --alv-sp-2 );
	right: var( --alv-sp-2 );
}

.alovesinh-avatar-letter {
	--alv-initial-size: 44px;
}

/* The row overlaps its letters, so a stack of five reads as one cluster instead of a long strip.
	The separator is a real border, not a ring shadow: the stack sits on a deep background where a
	white halo would glow, while a border in the backdrop's own colour cuts cleanly. */
.alovesinh-avatar-stack {
	flex-shrink: 0;
	gap: 0;
}

.alovesinh-avatar-stack .alovesinh-initial {
	--alv-initial-size: 36px;
	--alv-initial-bg: var( --alv-avatar-stack-bg, var( --alv-c-brand-soft ) );
	margin-left: -10px;
	border: 2px solid var( --alv-avatar-stack-ring, var( --alv-c-brand-deep ) );
	font-size: var( --alv-fs-3 );
	color: var( --alv-avatar-stack-text, var( --alv-c-text-4 ) );
}

.alovesinh-avatar-stack .alovesinh-initial:first-child {
	margin-left: 0;
}

/* Rows keep the disc clear of the caption; clip, not hidden, lets the frame outgrow its ratio when both cannot fit. */
.alovesinh-video-frame {
	--alv-video-frame-rows: minmax( var( --alv-sp-3 ), 1fr ) auto 1fr;

	position: relative;
	display: grid;
	grid-template-rows: var( --alv-video-frame-rows );
	/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
	overflow: hidden;
	overflow: clip;
	margin: 0;
	border-radius: var( --alv-r-4 );
	font-size: 0;
	background: linear-gradient( 135deg, var( --alv-c-ink ), var( --alv-c-brand-deep ) );
	box-shadow: var( --alv-sh-3 );
}

/* Two washes over the still, not a flat veil: the frame has to read as a lit scene even before
	the buyer uploads a poster image. */
.alovesinh-video-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var( --alv-video-overlay,
		radial-gradient( circle at 30% 30%, var( --alv-c-brand-veil ), transparent 50% ),
		radial-gradient( circle at 70% 70%, color-mix( in srgb, var( --alv-c-accent ) 25%, transparent ), transparent 50% ) );
	pointer-events: none;
}

.alovesinh-video-frame.alovesinh-video-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.alovesinh-video-frame-play {
	grid-area: 1 / 1 / -1;
	/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
	grid-template-rows: var( --alv-video-frame-rows );
	grid-template-rows: subgrid;
	z-index: 2;
	cursor: pointer;
}

.alovesinh-video-frame-play:disabled {
	cursor: default;
}

/* The disc and the triangle share one grid cell, so .alovesinh-center centres both without either
	one needing offsets that would drift when the disc size changes. */
.alovesinh-video-frame-play::before {
	content: "";
	grid-area: 2 / 1;
	width: 88px;
	height: 88px;
	border-radius: var( --alv-r-circle );
	background: var( --alv-play-disc, var( --alv-c-white ) );
	box-shadow: 0 20px 50px color-mix( in srgb, var( --alv-c-black ) 40%, transparent );
	transition: transform var( --alv-dur-2 ) ease;
}

/* The mark is the source design's own drawing, not a border triangle: a triangle of the same
	height comes out a third wider than the drawn one, and the nudge that centres a drawn wedge by
	eye then has to be guessed rather than copied. */
.alovesinh-video-frame-play svg {
	grid-area: 2 / 1;
	width: 34px;
	height: 34px;
	margin-left: 4px;
	fill: var( --alv-play-glyph, var( --alv-c-brand ) );
	transition: transform var( --alv-dur-2 ) ease;
}

.alovesinh-video-frame-play:not( :disabled ):hover::before,
.alovesinh-video-frame-play:not( :disabled ):hover svg {
	transform: scale( 1.08 );
}

.alovesinh-video-frame-caption {
	grid-area: 3 / 1;
	align-self: end;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var( --alv-sp-1 );
	padding: var( --alv-sp-3 );
	color: var( --alv-c-white );
	background: linear-gradient( 0deg, color-mix( in srgb, var( --alv-c-ink ) 85%, transparent ), transparent );
}

.alovesinh-video-frame-label {
	font-size: var( --alv-fs-4 );
	font-weight: var( --alv-fw-bold );
	color: var( --alv-c-white );
}

.alovesinh-video-frame-title {
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-medium );
	opacity: 0.8;
}

.alovesinh-cau-chuyen-mot-dem-moc .alovesinh-image {
	--alv-image-radius: var( --alv-r-4 );
	background: var( --alv-c-ink-blue );
	box-shadow: 0 30px 60px color-mix( in srgb, var( --alv-c-black ) 45%, transparent );
}

.alovesinh-cau-chuyen-mot-dem-moc .alovesinh-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg,
		color-mix( in srgb, var( --alv-c-ink ) 10%, transparent ) 0%,
		transparent 30%,
		color-mix( in srgb, var( --alv-c-ink ) 40%, transparent ) 100% );
	pointer-events: none;
}

.alovesinh-cau-chuyen-mot-dem-moc .alovesinh-image-label {
	top: 18px;
	right: 18px;
	z-index: 2;
	border: var( --alv-bd-hairline ) solid color-mix( in srgb, var( --alv-c-white ) 18%, transparent );
	letter-spacing: 0.05em;
	color: var( --alv-c-white );
	background: color-mix( in srgb, var( --alv-c-ink ) 78%, transparent );
}

/* Five classes: the frame is a figure, and Elementor zeroes a figure's margin from a four-class rule. */
.alovesinh-phan-loai-nem .alovesinh-tabs .alovesinh-phan-loai-khung-hinh .alovesinh-image.alovesinh-image {
	margin-inline: auto;
}

@media ( max-width: 820px ) {

	.alovesinh-cau-chuyen-mot-dem-moc .alovesinh-split.alovesinh-split .alovesinh-image.alovesinh-image {
		max-width: 560px;
		margin: 0 auto;
	}
}

.alovesinh-phan-loai-khung-hinh > .alv-w-image {
	justify-self: stretch;
}

.alovesinh-khuyen-mai-nem-sofa-hinh .alovesinh-image {
	--alv-image-radius: 0;
}

.alovesinh-khuyen-mai-nem-sofa-hinh .alovesinh-initial {
	--alv-initial-size: 36px;
	--alv-initial-bg: var( --alv-c-ink );
	position: relative;
	z-index: 2;
	margin: -8px auto;
	font-size: var( --alv-fs-5 );
}

.alovesinh-khuyen-mai-nem-sofa-hinh .alv-w-image {
	padding-bottom: 6.4px;
}

.alovesinh-dat-lich-day-du-khach > .alv-w-avatar-stack {
	flex-shrink: 0;
}