/*
 * Elementor Containers default to flexbox. Without an explicit width here,
 * a flex parent whose Align Items isn't Stretch (e.g. Center — common on
 * card layouts) leaves this as a shrink-to-fit flex item, and shrink-to-fit
 * sizing combined with aspect-ratio is unreliable across browsers — this is
 * what causes the widget to visibly overflow its card. Forcing width:100%
 * at both the widget wrapper and Elementor's own container around it closes
 * that gap regardless of the parent's alignment setting.
 */
.elementor-widget-xproject-video,
.elementor-widget-xproject-video > .elementor-widget-container {
	width: 100%;
	max-width: 100%;
}

.xproject-video {
	display: block;
	width: 100%;
	max-width: 100%;
}

.xproject-video__mask {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #111;
	--xv-scale: 108%;
	--xv-duration: 500ms;

	/*
	 * Safari-specific bug: a GPU-composited <video>/<iframe> clipped by a
	 * plain `overflow: hidden` + `border-radius` parent renders a thin dark
	 * seam along the clip edge once the video starts playing (WebKit's
	 * standard clip path doesn't fully suppress the video layer's own edge
	 * at compositing time). Forcing Safari onto its mask-based clipping path
	 * instead — a solid radial-gradient mask has no visual effect on its own
	 * but changes which rendering path WebKit takes — is the standard,
	 * widely-documented fix; other browsers ignore -webkit-mask-image.
	 */
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

/*
 * !important on the layout-critical properties below: a theme or page
 * builder's own generic "img { max-width:100%; height:auto; }" responsive
 * reset is common in WordPress and has historically been the exact shape of
 * bug that's hit this widget (see the width/overflow fix above) — a plain
 * class selector has enough specificity to win against a bare `img` element
 * selector, but not against a reset that also carries !important or a
 * higher-specificity theme selector. Locking these down here is cheap
 * insurance since nothing else should ever need to override them.
 */
.xproject-video__thumb {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
	transition: transform var(--xv-duration) ease, opacity var(--xv-duration) ease;
	transform: scale(1);
}

.xproject-video__thumb--empty {
	background: #F2EDE7;
}

.xproject-video__mask:hover .xproject-video__thumb {
	transform: scale(var(--xv-scale));
}

.xproject-video__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.15);
	transition: background-color var(--xv-duration) ease;
	pointer-events: none;
}

.xproject-video__play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: #fff;
	color: #1A1814;
	font-size: 22px;
	transition: opacity var(--xv-duration) ease, transform var(--xv-duration) ease;
	pointer-events: none;
}

.xproject-video__play-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.xproject-video__stage {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--xv-duration) ease;
	pointer-events: none;
}

.xproject-video__stage iframe,
.xproject-video__stage video {
	position: absolute;
	/* 1px oversize on every side, on top of the -webkit-mask-image fix above
	   — pushes the video/iframe's own edge past the visible clip boundary so
	   any remaining Safari compositing seam falls outside what's shown. */
	inset: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	border: 0;
	outline: 0;
	object-fit: cover;
	display: block;
}

.xproject-video__mask.is-playing .xproject-video__thumb {
	opacity: 0;
}

.xproject-video__mask.is-playing .xproject-video__stage {
	opacity: 1;
	pointer-events: auto;
}

.xproject-video__mask.is-playing.icon-hide-on-play .xproject-video__play-icon {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.8);
}

/*
 * "Khi nhấn vào" = Link / Lightbox render the mask as a real <a>/<button>
 * instead of a <div> (a real interactive/focusable element, not a div with
 * a click listener bolted on) — reset the browser's own default element
 * styling so it still looks identical to the plain preview box.
 */
a.xproject-video__mask,
button.xproject-video__mask {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

/* ── Lightbox ("Mở Lightbox video") ───────────────────────────────────── */

.xproject-video__lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

.xproject-video__lightbox[hidden] {
	display: none;
}

.xproject-video__lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	border: 0;
	padding: 0;
	cursor: pointer;
}

.xproject-video__lightbox-dialog {
	--xv-lightbox-width: 900px;
	position: relative;
	z-index: 1;
	width: min(var(--xv-lightbox-width), 92vw);
}

.xproject-video__lightbox-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 86vh;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
}

.xproject-video__lightbox-stage iframe,
.xproject-video__lightbox-stage video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.xproject-video__lightbox-close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	border: 0;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.xproject-video__lightbox-close svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Locks background scroll while a lightbox is open (video.js toggles this
   on <body>) so the page underneath doesn't scroll behind the modal. */
body.xproject-video-lightbox-open {
	overflow: hidden;
}