/**
 * NTV Theme — Lightbox phóng to ảnh trong nội dung bài viết (inc/content-image-zoom.php).
 * File riêng, chỉ enqueue trên bài thực sự có ảnh được chèn nút zoom.
 *
 * Đây là lightbox RIÊNG cho tính năng này — không liên quan tới
 * .ntv-gallery-lightbox (assets/css/gallery.css, dùng cho block ntv/gallery + các shim
 * migrate). Không dùng chung để tránh ảnh hưởng ngược tới nơi đang chạy ổn định.
 */

/* Cả tấm ảnh trong content cũng là điểm bấm mở lightbox — hover đổi con trỏ thành kính
   lúp "+" (native CSS, không cần asset icon riêng). */
.ntv-article__content .wp-block-image img.ntv-content-lightbox-img {
	cursor: zoom-in;
}

/* ---------- Overlay ----------
 * Luôn nằm sẵn trong DOM (không dùng [hidden]/display:none) để có thể animate mờ dần —
 * dùng kỹ thuật "transition-delay trên visibility" kinh điển: ẩn thật (visibility +
 * pointer-events tắt) NGAY sau khi opacity đã chạy xong transition lúc đóng, tránh vừa
 * bị che khuất vừa vẫn chặn click phía dưới trong lúc mờ dần.
 */
.ntv-content-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.ntv-content-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.ntv-content-lightbox__img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: 4px;
	cursor: zoom-out;
	transform: scale(0.92);
	transition: transform 0.25s ease;
}
.ntv-content-lightbox.is-open .ntv-content-lightbox__img {
	transform: scale(1);
}

.ntv-content-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s ease;
}
.ntv-content-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.25);
}

@media (max-width: 700px) {
	.ntv-content-lightbox__close {
		top: 10px;
		right: 10px;
		width: 34px;
		height: 34px;
	}
}