/* Facade cho video YouTube nhúng qua WPBakery (.wpb_video_wrapper) — xem
 * youtube-facade.js. Ảnh thumbnail + nút Play; chỉ tạo iframe YouTube thật
 * khi user bấm. Reset toàn bộ style .wpb_video_wrapper mặc định (border,
 * box-shadow...) không cần vì facade nằm bên trong, không thay layout ngoài. */

.puluong-yt-facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	appearance: none;
}

/* Fallback khi facade không nằm trong .wpb_video_wrapper (không có box
 * padding-top sẵn) -> tự tạo khung 16:9. */
.puluong-yt-facade--standalone {
	position: relative;
	inset: auto;
	/* ghi đè width/height:100% của rule gốc để aspect-ratio TỰ tính chiều cao
	   từ bề rộng cột (không phụ thuộc chiều cao parent -> không bị co về 0). */
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.puluong-yt-facade__play {
	width: 68px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.65);
	border-radius: 14px;
	transition: background-color .2s ease, transform .2s ease;
}

.puluong-yt-facade:hover .puluong-yt-facade__play,
.puluong-yt-facade:focus-visible .puluong-yt-facade__play {
	background-color: #ff0000;
	transform: scale(1.08);
}

.puluong-yt-facade:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

.puluong-yt-facade__play svg {
	width: 22px;
	height: 22px;
	fill: #fff;
	margin-left: 3px; /* căn quang học tam giác Play vào giữa nút */
}

.puluong-yt-facade__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Trường hợp standalone: sau replaceWith, thẻ facade (ancestor position:relative)
   đã biến mất nên KHÔNG dùng position:absolute (sẽ fill nguyên section -> đè
   HIGHLIGHTS). Cho iframe TỰ dựng khung 16:9 tại chỗ, không vượt bề rộng cột. */
.puluong-yt-facade__iframe--standalone {
	position: relative;
	inset: auto;
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	display: block;
}