/* Group stylesheet for the image widgets. */

.alovesinh-image,
.alovesinh-cau-chuyen-mot-dem-moc .elementor-widget-image .wp-caption {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	border-radius: var(--alv-image-radius, var(--alv-r-3));
}

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

/* Elementor's `.elementor img { height: auto }` ties this on weight, so the height is held through
	min-height and max-height, which that rule leaves alone, whatever order the two sheets load in. */
.alovesinh-image img,
.alovesinh-cau-chuyen-mot-dem-moc .elementor-widget-image .wp-caption img {
	width: 100%;
	min-height: 100%;
	max-height: 100%;
	object-fit: cover;
}

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

.alovesinh-image-label,
.alovesinh-cau-chuyen-mot-dem-moc .elementor-widget-image .widget-image-caption {
	position: absolute;
	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: var(--alv-sp-4d);
}

/* 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 {
	--alv-initial-size: var(--alv-sp-4a);
	--alv-avatar-stack-step: var(--alv-sp-3c);
	display: grid;
	grid-auto-columns: var(--alv-avatar-stack-step);
	grid-auto-flow: column;
	gap: 0;
	padding-inline-end: calc(var(--alv-initial-size) - var(--alv-avatar-stack-step));
}

.alovesinh-avatar-stack .alovesinh-initial {
	border: var(--alv-bd-thick) solid var(--alv-c-brand-deep);
	font-size: var(--alv-fs-3);
}

/* 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);
	overflow: clip;
	margin: 0;
	border-radius: var(--alv-r-4);
	background: var(--alv-scene-video);
	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, var(--alv-scene-video-glow));
	pointer-events: none;
}

.alovesinh-video-frame-play {
	grid-area: 1 / 1 / -1;
	grid-template-rows: subgrid;
	z-index: var(--alv-z-lift);
	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: var(--alv-w-play-disc);
	height: var(--alv-w-play-disc);
	border-radius: var(--alv-r-circle);
	background: var(--alv-play-disc, var(--alv-c-white));
	box-shadow: var(--alv-sh-play);
	transition: transform var(--alv-dur-2) ease;
}

.alovesinh-video-frame-play svg {
	grid-area: 2 / 1;
	width: var(--alv-w-play-mark);
	height: var(--alv-w-play-mark);
	fill: var(--alv-play-glyph, var(--alv-c-brand-strong));
	transition: transform var(--alv-dur-2) ease;
}

.alovesinh-video-frame-caption {
	grid-area: 3 / 1;
	align-self: end;
	z-index: var(--alv-z-lift);
	display: flex;
	flex-direction: column;
	gap: var(--alv-sp-1);
	padding: var(--alv-sp-3);
	color: var(--alv-c-white);
	background: var(--alv-scrim-caption);
}

.alovesinh-video-frame-label {
	font-size: var(--alv-fs-cta);
	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);
	color: var(--alv-c-on-dark);
}

.alovesinh-cau-chuyen-mot-dem-moc .alovesinh-image,
.alovesinh-cau-chuyen-mot-dem-moc .elementor-widget-image .wp-caption {
	--alv-image-radius: var(--alv-r-4);
	background: var(--alv-c-ink);
	box-shadow: var(--alv-sh-photo);
}

/* The four photos' own ratio, written on core's caption figure, which has no ratio box of its own. */
.alovesinh-cau-chuyen-mot-dem-moc .elementor-widget-image .wp-caption {
	aspect-ratio: var(--alv-ratio-card);
}

.alovesinh-cau-chuyen-mot-dem-moc .alovesinh-image::after,
.alovesinh-cau-chuyen-mot-dem-moc .elementor-widget-image .wp-caption::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--alv-scrim-photo);
	pointer-events: none;
}

/* Core prints the corner label as a bare figcaption; these are the shared pill's values from alovesinh-base.css. */
.alovesinh-cau-chuyen-mot-dem-moc .elementor-widget-image .widget-image-caption {
	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);
	white-space: nowrap;
}

.alovesinh-cau-chuyen-mot-dem-moc .alovesinh-image-label,
.alovesinh-cau-chuyen-mot-dem-moc .elementor-widget-image .widget-image-caption {
	top: var(--alv-sp-2d);
	right: var(--alv-sp-2d);
	z-index: var(--alv-z-lift);
	border: var(--alv-bd-hairline) solid var(--alv-c-glass-edge);
	letter-spacing: var(--alv-tr-tag);
	color: var(--alv-c-white);
	background: var(--alv-c-ink-glass);
}

/* The frame is a figure, and Elementor zeroes a widget's figure margin at 0-4-1; the same ancestry takes
	the centring back by loading after elementor-frontend. */
.elementor
	.alovesinh-phan-loai-khung-hinh
	.elementor-widget.elementor-widget-alovesinh-image
	figure {
	margin-inline: auto;
}

.elementor
	.alovesinh-cau-chuyen-mot-dem-moc
	.elementor-widget.elementor-widget-alovesinh-image
	figure,
.elementor .alovesinh-cau-chuyen-mot-dem-moc .elementor-widget.elementor-widget-image figure {
	width: min(100%, var(--alv-w-story-figure));
	margin: 0 auto;
}

.alovesinh-video-loop {
	position: relative;
	overflow: hidden;
	margin: 0;
	aspect-ratio: var(--alv-ratio-cover);
	border-radius: var(--alv-r-4);
	box-shadow: var(--alv-sh-3);
}

/* The frame takes its height from its width alone (the video sits absolutely inside), so its wrapper needs a
	definite width or a wrapping flex column collapses it; core gives its own video widget the same width. */
.e-con .elementor-widget-alovesinh-video-loop {
	width: 100%;
}

/* The video and the shade above it each take the frame's corners themselves rather than leaning on the frame's
	rounded overflow alone. */
.alovesinh-video-loop-video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	min-height: 100%;
	max-height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.alovesinh-video-loop-with-play::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background: var(--alv-video-overlay, var(--alv-c-ink-haze));
	pointer-events: none;
}

.alovesinh-video-loop-playing::before {
	content: none;
}

.alovesinh-video-loop-play {
	position: absolute;
	inset: 0;
	z-index: var(--alv-z-lift);
}

.alovesinh-video-loop-play[hidden] {
	display: none;
}

.alovesinh-video-loop-play::before {
	content: '';
	grid-area: 1 / 1;
	width: var(--alv-sp-5b);
	height: var(--alv-sp-5b);
	border-radius: var(--alv-r-circle);
	background: var(--alv-play-disc, var(--alv-c-white));
	box-shadow: var(--alv-sh-play);
	transition: transform var(--alv-dur-2) ease;
}

.alovesinh-video-loop-play svg {
	grid-area: 1 / 1;
	width: var(--alv-fs-4b);
	height: var(--alv-fs-4b);
	fill: var(--alv-play-glyph, var(--alv-c-brand-strong));
	transition: transform var(--alv-dur-2) ease;
}

.alovesinh-video-loop-play:hover::before,
.alovesinh-video-loop-play:hover svg {
	transform: scale(var(--alv-scale-play-hover));
}

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

.alovesinh-xem-tan-mat .alovesinh-video-loop {
	box-shadow: var(--alv-sh-2);
}

@media (min-width: 561px) {
	.alovesinh-video-loop-play::before {
		width: var(--alv-sp-6);
		height: var(--alv-sp-6);
	}

	.alovesinh-video-loop-play svg {
		width: var(--alv-fs-5);
		height: var(--alv-fs-5);
	}
}

@media (min-width: 821px) {
	.elementor
		.alovesinh-cau-chuyen-mot-dem-moc
		.elementor-widget.elementor-widget-alovesinh-image
		figure,
	.elementor .alovesinh-cau-chuyen-mot-dem-moc .elementor-widget.elementor-widget-image figure {
		width: auto;
		margin: 0;
	}

	.alovesinh-cau-chuyen-mot-dem-moc .elementor-widget-image .wp-caption {
		aspect-ratio: var(--alv-ratio-story);
	}

	.alovesinh-video-loop-play::before {
		width: var(--alv-sp-6b);
		height: var(--alv-sp-6b);
	}

	.alovesinh-video-loop-play svg {
		width: var(--alv-fs-5b);
		height: var(--alv-fs-5b);
	}
}

@media (min-width: 981px) {
	.alovesinh-ban-giao-chu-dao-phim > .elementor-widget-alovesinh-video-loop,
	.alovesinh-ban-giao-chu-dao-phim
		.elementor-widget-alovesinh-video-loop
		> .elementor-widget-container,
	.alovesinh-danh-cho-ca-nha-phim > .elementor-widget-alovesinh-video-loop,
	.alovesinh-danh-cho-ca-nha-phim
		.elementor-widget-alovesinh-video-loop
		> .elementor-widget-container {
		display: flex;
		flex: 1 1 0;
		min-height: 0;
	}

	.alovesinh-ban-giao-chu-dao-phim .alovesinh-video-loop,
	.alovesinh-danh-cho-ca-nha-phim .alovesinh-video-loop {
		flex: 1 1 0;
		min-height: 0;
		aspect-ratio: auto;
	}
}

.alovesinh-phan-loai-khung-hinh > .elementor-widget-alovesinh-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: var(--alv-sp-4a);
	--alv-initial-bg: var(--alv-c-ink);
	--alv-initial-text: var(--alv-c-white);
	position: relative;
	z-index: var(--alv-z-lift);
	margin: calc(-1 * var(--alv-sp-1a)) auto;
	font-size: var(--alv-fs-5);
}

.alovesinh-khuyen-mai-nem-sofa-hinh .elementor-widget-alovesinh-image {
	padding-bottom: var(--alv-sp-1);
}

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