/* =========================================================
   NAM PROMO POPUP — popup ảnh khuyến mại
   ========================================================= */

.nam-popup {
	position: fixed;
	inset: 0;
	z-index: 999990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

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

.nam-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(12, 22, 15, .72);
	opacity: 0;
	transition: opacity .28s ease;
	cursor: pointer;
}

.nam-popup.is-open .nam-popup__overlay {
	opacity: 1;
}

.nam-popup__box {
	position: relative;
	max-width: min(92vw, 720px);
	max-height: 88vh;
	opacity: 0;
	transform: translateY(18px) scale(.97);
	transition: opacity .3s ease, transform .3s ease;
}

.nam-popup.is-open .nam-popup__box {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.nam-popup__link {
	display: block;
	line-height: 0;
}

.nam-popup__img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 88vh;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

/* Ảnh riêng cho điện thoại: mặc định ẩn, chỉ hiện khi màn hình hẹp */
.nam-popup__img--mobile {
	display: none;
}

/* ---------- Nút đóng ---------- */

.nam-popup__close {
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #1F2A24;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
	transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
}

.nam-popup__close:hover,
.nam-popup__close:focus-visible {
	background: var(--wp--preset--color--primary, #398D42);
	transform: rotate(90deg);
}

/* Khoá nút đóng trong N giây đầu */
.nam-popup__close[disabled] {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
}

/* ---------- Điện thoại ---------- */

@media (max-width: 767px) {
	.nam-popup {
		padding: 16px;
	}

	.nam-popup__box {
		max-width: 94vw;
	}

	.nam-popup__close {
		top: -10px;
		right: -10px;
		width: 34px;
		height: 34px;
		font-size: 20px;
	}

	/* Có ảnh riêng cho điện thoại thì đổi ảnh */
	.nam-popup[data-has-mobile="1"] .nam-popup__img--desktop {
		display: none;
	}

	.nam-popup[data-has-mobile="1"] .nam-popup__img--mobile {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nam-popup__overlay,
	.nam-popup__box,
	.nam-popup__close {
		transition: none;
	}

	.nam-popup__close:hover {
		transform: none;
	}
}