/* Popup banner khuyến mãi — chuyển từ plugin wp-megastorevn-banner (bỏ trang admin), thêm carousel nhiều slide.
   Trạng thái nằm trên phần tử gốc .pb-root: .pb-is-open (đang mở) → .pb-is-closing (đang đóng).
   Mốc thời gian: vòng sóng 0.05s → banner 0.1s → vệt sáng 0.8s → nút tắt 0.85s (khớp CLOSE_REVEAL_MS trong JS).
   Màu hiệu ứng (R, G, B) lấy từ config/promo_banner.php; JS ghi đè --pb-accent / --pb-accent-2 trên #pb-overlay. */

.pb-root {
	--pb-accent: 201, 162, 39;
	--pb-accent-2: 232, 181, 58;
	--pb-close-size: 44px;
	--pb-close-gap: 18px;
	--pb-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	overflow: hidden;
	background: rgba(26, 15, 2, 0);
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	transition: background 0.5s ease, -webkit-backdrop-filter 0.5s ease, backdrop-filter 0.5s ease;
}

.pb-root *,
.pb-root *::before,
.pb-root *::after {
	box-sizing: border-box;
}

.pb-root.pb-is-open {
	background: rgba(26, 15, 2, 0.66);
	-webkit-backdrop-filter: blur(8px) saturate(1.1);
	backdrop-filter: blur(8px) saturate(1.1);
}

.pb-root.pb-is-closing {
	transition-duration: 0.35s;
}

/* Nền: lưới chấm mờ dần ra rìa + quầng sáng ở tâm */
.pb-root::before,
.pb-root::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.pb-root::before {
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.6px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse 55% 60% at 50% 50%, #000 10%, transparent 100%);
	mask-image: radial-gradient(ellipse 55% 60% at 50% 50%, #000 10%, transparent 100%);
}

.pb-root::after {
	background: radial-gradient(circle at 50% 46%, rgba(var(--pb-accent), 0.18), transparent 50%);
}

.pb-root.pb-is-open::before,
.pb-root.pb-is-open::after {
	opacity: 1;
}

.pb-root.pb-is-closing::before,
.pb-root.pb-is-closing::after {
	transition-duration: 0.3s;
}

.pb-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	padding: 16px;
	pointer-events: none;
}

.pb-overlay.pb-is-open {
	pointer-events: auto;
}

html.pb-scroll-lock,
html.pb-scroll-lock body {
	overflow: hidden;
}

.pb-dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	outline: none;
}

/* Không vượt bề ngang màn hình (lề 16px mỗi bên) và thu nhỏ theo tỉ lệ ảnh để vừa
   chiều cao (chừa 150px cho chấm chuyển slide và nút tắt bên dưới). */
.pb-stage {
	position: relative;
	width: min(var(--pb-width, 720px), calc(100vw - 32px), calc((100vh - 150px) * var(--pb-ratio, 1.5)));
}

@supports (height: 100dvh) {
	.pb-stage {
		width: min(var(--pb-width, 720px), calc(100vw - 32px), calc((100dvh - 150px) * var(--pb-ratio, 1.5)));
	}
}

/* Vòng sóng năng lượng lan ra từ tâm banner lúc mở */
.pb-ripple {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 0;
	padding-top: 100%;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 0;
}

.pb-ripple span {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px solid rgba(var(--pb-accent), 0.8);
	box-shadow: 0 0 24px rgba(var(--pb-accent), 0.45), inset 0 0 24px rgba(var(--pb-accent), 0.25);
	opacity: 0;
	transform: scale(0.2);
}

.pb-ripple span:nth-child(2) {
	border-color: rgba(var(--pb-accent-2), 0.7);
	box-shadow: 0 0 24px rgba(var(--pb-accent-2), 0.4), inset 0 0 24px rgba(var(--pb-accent-2), 0.2);
}

.pb-is-open .pb-ripple span {
	animation: pbRipple 1.4s cubic-bezier(0.22, 0.7, 0.2, 1) 0.05s both;
}

.pb-is-open .pb-ripple span:nth-child(2) {
	animation-delay: 0.22s;
}

.pb-is-open .pb-ripple span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes pbRipple {
	0% {
		opacity: 0;
		transform: scale(0.2);
	}
	18% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(1.55);
	}
}

/* Banner: nghiêng 3D bay lên, từ mờ & loá sáng về nét, sau đó bồng bềnh nhẹ */
.pb-banner {
	position: relative;
	z-index: 1;
	opacity: 0;
	transform-origin: 50% 80%;
}

.pb-is-open .pb-banner {
	animation:
		pbBannerIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both,
		pbFloat 5s ease-in-out 1.2s infinite;
}

@keyframes pbBannerIn {
	0% {
		opacity: 0;
		transform: perspective(1200px) translate3d(0, 56px, 0) rotateX(32deg) scale(0.7);
		filter: blur(18px) brightness(2) saturate(0.2);
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0deg) scale(1);
		filter: blur(0) brightness(1) saturate(1);
	}
}

@keyframes pbFloat {
	0%,
	100% {
		translate: 0 0;
	}
	50% {
		translate: 0 -8px;
	}
}

.pb-root.pb-is-closing .pb-banner {
	animation: pbBannerOut 0.35s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes pbBannerOut {
	from {
		opacity: 1;
		transform: none;
		filter: none;
	}
	to {
		opacity: 0;
		transform: translate3d(0, 24px, 0) scale(0.88);
		filter: blur(10px);
	}
}

/* Hào quang: bản sao ảnh làm mờ nằm phía sau, cùng màu và cùng hình dạng với banner */
.pb-aura {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border-radius: var(--pb-radius);
	filter: blur(28px) saturate(1.8) brightness(1.15);
	opacity: 0;
	pointer-events: none;
	user-select: none;
}

.pb-is-open .pb-aura {
	animation:
		pbAuraIn 1.1s ease-out 0.35s both,
		pbAuraPulse 4.5s ease-in-out 1.45s infinite;
}

.pb-root.pb-is-closing .pb-aura {
	animation: none;
	opacity: 0.7;
}

@keyframes pbAuraIn {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 0.8;
		transform: scale(1.08);
	}
}

@keyframes pbAuraPulse {
	0%,
	100% {
		opacity: 0.8;
		transform: scale(1.08);
	}
	50% {
		opacity: 0.5;
		transform: scale(1.14);
	}
}

/* ---------- Carousel: các slide chồng lên nhau, chuyển bằng mờ dần ---------- */

.pb-carousel {
	position: relative;
	z-index: 1;
	container-type: inline-size;
}

.pb-track {
	position: relative;
	display: grid;
	border-radius: var(--pb-radius);
	overflow: hidden;
	box-shadow: 0 22px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(201, 162, 39, 0.35);
	transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pb-carousel:hover .pb-track {
	transform: translateY(-4px) scale(1.012);
	box-shadow: 0 28px 46px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(201, 162, 39, 0.55);
}

.pb-slide {
	grid-area: 1 / 1;
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	color: #2d1a00;
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transform: scale(1.03);
	transition: opacity 0.7s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.7s;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.pb-slide.pb-is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.7s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

.pb-slide:focus-visible {
	box-shadow: inset 0 0 0 3px rgb(var(--pb-accent));
}

.pb-slide-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}

/* Phủ kem bên trái để chữ luôn đọc rõ trên nền ảnh */
.pb-slide-wash {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 248, 235, 0.88) 0%, rgba(255, 248, 235, 0.6) 38%, rgba(255, 248, 235, 0) 60%);
	pointer-events: none;
}

/* ---------- Lớp chữ: cỡ chữ theo bề rộng banner (cqw) nên giữ đúng bố cục ở mọi màn hình ---------- */

.pb-copy {
	position: absolute;
	left: 7%;
	top: 50%;
	width: 42%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.4cqw;
	transform: translateY(-50%);
	font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
}

.pb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	font-size: 1.75cqw;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #9b6b00;
}

.pb-eyebrow::before {
	content: "";
	width: 2.2em;
	height: 1px;
	background: linear-gradient(90deg, transparent, #c9a227);
}

.pb-title {
	font-family: "Cormorant Garamond", "Noto Serif", serif;
	font-size: 5.4cqw;
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: #2d1a00;
	text-wrap: balance;
}

.pb-highlight {
	font-size: 4.4cqw;
	font-weight: 800;
	line-height: 1.1;
	color: #b91c1c;
	text-shadow: 0 1px 0 rgba(255, 248, 235, 0.8);
}

.pb-text {
	max-width: 34em;
	font-size: 1.95cqw;
	line-height: 1.5;
	color: #4a3520;
}

.pb-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin-top: 0.8cqw;
	padding: 1.15cqw 2.4cqw;
	border-radius: 999px;
	background: linear-gradient(135deg, #a87800, #8b4513);
	box-shadow: 0 0.6cqw 1.6cqw rgba(139, 69, 19, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	font-size: 2cqw;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.pb-cta svg {
	width: 1.1em;
	height: 1.1em;
	transition: transform 0.3s ease;
}

.pb-slide:hover .pb-cta {
	transform: translateY(-2px);
	box-shadow: 0 0.9cqw 2cqw rgba(139, 69, 19, 0.45), 0 0 0 0.5cqw rgba(var(--pb-accent), 0.25);
}

.pb-slide:hover .pb-cta svg {
	transform: translateX(3px);
}

/* Chữ in lên thẻ treo màu đỏ trong ảnh banner tử vi (toạ độ theo ảnh 3:2) */
.pb-badge {
	position: absolute;
	left: 85%;
	top: 69.6%;
	transform: translate(-50%, -50%) rotate(-4deg);
	font-family: "Cormorant Garamond", "Noto Serif", serif;
	font-size: 3.3cqw;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: #b91c1c;
	pointer-events: none;
}

/* Chữ của slide đang hiện trượt lên lần lượt */
.pb-copy > * {
	opacity: 0;
	transform: translateY(1.2cqw);
	transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pb-is-open .pb-slide.pb-is-active .pb-copy > * {
	opacity: 1;
	transform: none;
}

.pb-is-open .pb-slide.pb-is-active .pb-copy > :nth-child(1) { transition-delay: 0.45s; }
.pb-is-open .pb-slide.pb-is-active .pb-copy > :nth-child(2) { transition-delay: 0.55s; }
.pb-is-open .pb-slide.pb-is-active .pb-copy > :nth-child(3) { transition-delay: 0.65s; }
.pb-is-open .pb-slide.pb-is-active .pb-copy > :nth-child(4) { transition-delay: 0.75s; }
.pb-is-open .pb-slide.pb-is-active .pb-copy > :nth-child(5) { transition-delay: 0.85s; }

/* Banner hẹp (điện thoại): bỏ dòng mô tả, phóng to phần còn lại cho dễ đọc */
@container (max-width: 520px) {
	.pb-copy {
		left: 6%;
		width: 48%;
		gap: 2cqw;
	}

	.pb-eyebrow {
		font-size: 2.7cqw;
	}

	.pb-title {
		font-size: 6.6cqw;
	}

	.pb-highlight {
		font-size: 6cqw;
	}

	.pb-text {
		display: none;
	}

	.pb-cta {
		padding: 1.8cqw 3.6cqw;
		font-size: 3.3cqw;
	}

	.pb-badge {
		font-size: 4cqw;
	}
}

/* Vệt sáng quét ngang trên toàn banner */
.pb-shine {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: var(--pb-radius);
	pointer-events: none;
	background: linear-gradient(
			105deg,
			transparent 40%,
			rgba(var(--pb-accent), 0.18) 45%,
			rgba(255, 255, 255, 0.5) 50%,
			rgba(var(--pb-accent-2), 0.18) 55%,
			transparent 60%
		)
		100% 0 / 300% 100% no-repeat;
	mix-blend-mode: soft-light;
}

.pb-is-open .pb-shine {
	animation: pbShine 5s cubic-bezier(0.4, 0, 0.2, 1) 0.8s infinite;
}

@keyframes pbShine {
	0% {
		background-position: 100% 0;
	}
	30%,
	100% {
		background-position: 0% 0;
	}
}

/* Chấm chuyển slide */
.pb-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
	opacity: 0;
}

.pb-is-open .pb-dots {
	animation: pbSoftIn 0.4s ease-out 0.7s both;
}

.pb-root.pb-is-closing .pb-dots {
	animation: pbCloseOut 0.25s ease both;
}

.pb-dot {
	all: unset;
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 248, 235, 0.4);
	cursor: pointer;
	overflow: hidden;
	transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s ease;
}

/* Vùng bấm rộng hơn chấm hiển thị */
.pb-dot::before {
	content: "";
	position: absolute;
	inset: -10px -4px;
}

.pb-dot:hover {
	background: rgba(255, 248, 235, 0.7);
}

.pb-dot:focus-visible {
	outline: 2px solid rgb(var(--pb-accent));
	outline-offset: 3px;
}

.pb-dot[aria-current="true"] {
	width: 28px;
	background: rgba(255, 248, 235, 0.3);
}

/* Thanh chạy thời gian của slide đang hiện (JS đặt --pb-autoplay) */
.pb-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgb(var(--pb-accent));
	transform: scaleX(0);
	transform-origin: left;
}

.pb-dot[aria-current="true"]::after {
	transform: scaleX(1);
}

.pb-autoplay .pb-dot[aria-current="true"]::after {
	animation: pbProgress var(--pb-autoplay, 5s) linear both;
}

.pb-paused .pb-dot[aria-current="true"]::after {
	animation-play-state: paused;
}

@keyframes pbProgress {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

/* Nút tắt dạng kính mờ, nằm dưới chân banner */
.pb-close {
	all: unset;
	position: relative;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--pb-close-size);
	height: var(--pb-close-size);
	margin-top: var(--pb-close-gap);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	backdrop-filter: blur(10px) saturate(1.4);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.pb-close > * {
	grid-area: 1 / 1;
}

.pb-is-open .pb-close {
	animation: pbCloseIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s both;
}

.pb-root.pb-is-closing .pb-close {
	animation: pbCloseOut 0.25s ease both;
}

@keyframes pbCloseIn {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.6);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes pbCloseOut {
	from {
		opacity: 1;
		transform: none;
	}
	to {
		opacity: 0;
		transform: translateY(8px) scale(0.8);
	}
}

.pb-close:hover {
	background: rgba(255, 255, 255, 0.95);
	border-color: #fff;
	color: #0d1a16;
	box-shadow: 0 0 0 6px rgba(var(--pb-accent), 0.2), 0 10px 28px rgba(0, 0, 0, 0.35);
}

.pb-close:focus-visible {
	outline: 2px solid rgb(var(--pb-accent));
	outline-offset: 3px;
}

.pb-close-x {
	display: block;
	width: 18px;
	height: 18px;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.pb-close:hover .pb-close-x {
	transform: rotate(90deg);
}

.pb-close-count {
	font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-variant-numeric: tabular-nums;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Vòng đếm ngược khi "Chỉ cho tắt sau N giây" (JS đặt --pb-lock, ví dụ 3s) */
.pb-close-ring {
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	overflow: visible;
	transform: rotate(-90deg);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.pb-close-ring circle {
	fill: none;
	stroke-width: 2;
}

.pb-ring-track {
	stroke: rgba(255, 255, 255, 0.18);
}

.pb-ring-bar {
	stroke: rgb(var(--pb-accent));
	stroke-linecap: round;
	stroke-dasharray: 128.81;
	stroke-dashoffset: 0;
}

.pb-close-locked {
	cursor: default;
}

.pb-close-locked:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.pb-close-locked .pb-close-ring,
.pb-close-locked .pb-close-count {
	opacity: 1;
}

.pb-close-locked .pb-close-count {
	transform: none;
}

.pb-close-locked .pb-close-x,
.pb-close-locked:hover .pb-close-x {
	opacity: 0;
	transform: scale(0.5) rotate(-90deg);
}

.pb-is-open .pb-close-locked .pb-ring-bar {
	animation: pbCountdown var(--pb-lock, 3s) linear 0.85s both;
}

@keyframes pbCountdown {
	from {
		stroke-dashoffset: 0;
	}
	to {
		stroke-dashoffset: 128.81;
	}
}

@media (max-width: 480px) {
	.pb-root {
		--pb-close-size: 40px;
		--pb-close-gap: 14px;
	}
}

/* Người dùng tắt hiệu ứng chuyển động trong hệ điều hành: chỉ giữ hiệu ứng mờ dần nhẹ nhàng */
@media (prefers-reduced-motion: reduce) {
	.pb-is-open .pb-banner {
		animation: pbSoftIn 0.45s ease-out 0.05s both;
	}

	.pb-is-open .pb-aura {
		animation: pbAuraIn 0.6s ease-out 0.1s both;
	}

	.pb-is-open .pb-close {
		animation: pbSoftIn 0.4s ease-out 0.85s both;
	}

	.pb-is-open .pb-ripple span,
	.pb-is-open .pb-shine {
		animation: none;
	}
}

@keyframes pbSoftIn {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pb-slide,
	.pb-slide.pb-is-active,
	.pb-copy > * {
		transform: none;
		transition-property: opacity, visibility;
	}

	.pb-carousel:hover .pb-track {
		transform: none;
	}

	.pb-autoplay .pb-dot[aria-current="true"]::after {
		animation: none;
	}
}