/**
 * Nút phát lớn giữa video tự host — xem assets/js/video-play.js (vì sao có nút này).
 * Kiểu dáng đồng bộ `.tdc-tv__nut` của thư viện (thu-vien.css): tròn đỏ thương hiệu, tam giác trắng.
 */
.tdc-vp { position: relative; display: block; line-height: 0; }
.tdc-vp > video { display: block; width: 100%; height: auto; }

/* Lớp phủ trong suốt, chừa dải 48px dưới cùng cho thanh điều khiển gốc của trình duyệt. */
.tdc-vp__nut {
	--vp-d: 72px;
	position: absolute; left: 0; top: 0; right: 0; bottom: 48px;
	margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* Tâm vòng tròn = tâm KHUNG VIDEO, không phải tâm lớp phủ (lớp phủ ngắn hơn 48px ⇒ lệch 24px). */
.tdc-vp__nut::before {
	content: ""; position: absolute; left: 50%; top: calc(50% + 24px);
	width: var(--vp-d); height: var(--vp-d); margin: calc(var(--vp-d) / -2) 0 0 calc(var(--vp-d) / -2);
	border-radius: 50%; background: var(--tdc-red, #EA232A); opacity: .94;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
	transition: transform .2s, opacity .2s;
}
/* Tam giác lệch phải một chút so với tâm: tâm hình học của tam giác nằm ở 1/3 chiều rộng. */
.tdc-vp__nut::after {
	content: ""; position: absolute; left: 50%; top: calc(50% + 24px);
	margin: calc(var(--vp-d) * -0.1875) 0 0 calc(var(--vp-d) * -0.1);
	border-style: solid; border-color: transparent transparent transparent #fff;
	border-width: calc(var(--vp-d) * 0.1875) 0 calc(var(--vp-d) * 0.1875) calc(var(--vp-d) * 0.3);
	pointer-events: none;
}
.tdc-vp__nut:hover::before { transform: scale(1.08); opacity: 1; }
.tdc-vp__nut:focus { outline: none; }
.tdc-vp__nut:focus-visible::before { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--tdc-blue, #0495D8); }

.tdc-vp.dang-phat .tdc-vp__nut { display: none; }

@media (max-width: 600px) {
	.tdc-vp__nut { --vp-d: 60px; }
}
@media (prefers-reduced-motion: reduce) {
	.tdc-vp__nut::before { transition: none; }
}