/*
 * Popup quản lý trong wp-admin (CPT tndg_popup) — xem inc/popup-cpt.php + inc/popup-render.php.
 *
 * Cố ý KHÔNG dùng modal của Bootstrap: BS4 đang được nạp từ CDN jsdelivr trong header
 * (header.php/header-new.php/header-flashcard.php) và footer-phim.php, phụ thuộc CDN + thứ tự
 * nạp script. Popup tự viết chạy chắc trên cả 4 nhánh layout, kể cả trang chủ (page-home.php)
 * dùng bố cục riêng.
 *
 * Mọi kích thước phải dùng tốt từ 320px (iPhone SE) trở lên.
 */

.tndg-popup[hidden] {
	display: none;
}

.tndg-popup {
	position: fixed;
	inset: 0;
	/* Cao hơn product tour "Luyện Shadowing" (.tndg-tour-root z-index:2147483400, dựng động
	   trong assets/js/new-home.js) — tour là overlay phủ toàn màn hình kèm lớp .tndg-tour-catch
	   bắt click, nếu popup nằm dưới thì vừa bị che vừa không bấm được nút đóng (đã dựng lại
	   đúng tình huống này bằng Playwright). JS popup còn chờ tour đóng trước khi hiện, z-index
	   này chỉ là lưới an toàn cho trường hợp tour bật sau. */
	z-index: 2147483500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
}

.tndg-popup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
}

.tndg-popup-dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: calc(100vh - 24px);
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
	overflow: hidden;
	animation: tndg-popup-in .18s ease-out;
}

@keyframes tndg-popup-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

.tndg-popup-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid #e6e6e6;
}

.tndg-popup-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.tndg-popup-x {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	margin-left: auto;
	padding: 0;
	font-size: 26px;
	line-height: 1;
	color: #fff;
	background: #dc3545;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}

.tndg-popup-x:hover {
	background: #bd2130;
}

.tndg-popup-body {
	flex: 1 1 auto;
	padding: 12px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.tndg-popup-banner {
	display: block;
	padding: 4px;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	transition: box-shadow .15s ease, transform .15s ease;
}

.tndg-popup-banner + .tndg-popup-banner {
	margin-top: 10px;
}

a.tndg-popup-banner:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
	transform: translateY(-2px);
}

.tndg-popup-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.tndg-popup-body > p:first-child {
	margin-top: 0;
}

.tndg-popup-body > p:last-child {
	margin-bottom: 0;
}

.tndg-popup-foot {
	flex: 0 0 auto;
	padding: 10px 12px;
	border-top: 1px solid #e6e6e6;
}

.tndg-popup-close-btn {
	padding: 7px 16px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: #dc3545;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}

.tndg-popup-close-btn:hover {
	background: #bd2130;
}

body.tndg-popup-open {
	overflow: hidden;
}

@media (max-width: 480px) {
	.tndg-popup {
		padding: 8px;
	}

	.tndg-popup-dialog {
		max-height: calc(100vh - 16px);
	}

	.tndg-popup-title {
		font-size: 15px;
	}

	.tndg-popup-head,
	.tndg-popup-body,
	.tndg-popup-foot {
		padding: 8px;
	}

	.tndg-popup-x {
		width: 30px;
		height: 30px;
		font-size: 22px;
	}
}