/* Min Pharmacy Popup Banner — dùng chung cho popup thật trên site và bản xem trước trong trang quản trị.
   Trạng thái nằm trên phần tử gốc .mpb-root: .mpb-is-open (đang mở) → .mpb-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). */

.mpb-root {
	--mpb-accent: 94, 242, 194;
	--mpb-accent-2: 125, 196, 255;
	--mpb-close-size: 44px;
	--mpb-close-gap: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	overflow: hidden;
	background: rgba(4, 10, 14, 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;
}

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

.mpb-root.mpb-is-open {
	background: rgba(4, 10, 14, 0.62);
	-webkit-backdrop-filter: blur(8px) saturate(1.1);
	backdrop-filter: blur(8px) saturate(1.1);
}

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

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

.mpb-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%);
}

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

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

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

/* Popup thật trên site */
.mpb-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	padding: 16px;
	pointer-events: none;
}

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

/* Bản xem trước trong trang quản trị: nằm gọn trong màn hình giả lập */
.mpb-preview-overlay {
	position: absolute;
	inset: 0;
}

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

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

.mpb-stage {
	position: relative;
	width: var(--mpb-width, 300px);
}

/* Trên site thật: 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 120px cho nút tắt bên dưới). admin.js tính cùng công thức cho bản xem trước. */
.mpb-overlay .mpb-stage {
	width: min(var(--mpb-width, 300px), calc(100vw - 32px), calc((100vh - 120px) * var(--mpb-ratio, 1)));
}

@supports (height: 100dvh) {
	.mpb-overlay .mpb-stage {
		width: min(var(--mpb-width, 300px), calc(100vw - 32px), calc((100dvh - 120px) * var(--mpb-ratio, 1)));
	}
}

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

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

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

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

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

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

@keyframes mpbRipple {
	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ẹ */
.mpb-banner {
	position: relative;
	z-index: 1;
	opacity: 0;
	transform-origin: 50% 80%;
}

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

@keyframes mpbBannerIn {
	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 mpbFloat {
	0%,
	100% {
		translate: 0 0;
	}
	50% {
		translate: 0 -8px;
	}
}

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

@keyframes mpbBannerOut {
	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 */
.mpb-aura {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: contain;
	filter: blur(28px) saturate(1.8) brightness(1.15);
	opacity: 0;
	pointer-events: none;
	user-select: none;
}

.mpb-is-open .mpb-aura {
	animation:
		mpbAuraIn 1.1s ease-out 0.35s both,
		mpbAuraPulse 4.5s ease-in-out 1.45s infinite;
}

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

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

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

.mpb-visual {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	text-decoration: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

a.mpb-visual {
	cursor: pointer;
}

a.mpb-visual:hover {
	transform: translateY(-4px) scale(1.015);
}

a.mpb-visual:focus-visible {
	outline: 2px solid rgb(var(--mpb-accent));
	outline-offset: 6px;
	border-radius: 12px;
}

.mpb-banner-img {
	position: relative;
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.4));
	transition: filter 0.35s ease;
	user-select: none;
	-webkit-user-drag: none;
}

a.mpb-visual:hover .mpb-banner-img {
	filter: drop-shadow(0 28px 46px rgba(0, 0, 0, 0.48));
}

/* Vệt sáng quét ngang, dùng chính ảnh làm mặt nạ (--mpb-mask) nên chỉ hiện trên phần có hình.
   Chưa có mặt nạ thì trong suốt hoàn toàn. */
.mpb-shine {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
			105deg,
			transparent 40%,
			rgba(var(--mpb-accent), 0.25) 45%,
			rgba(255, 255, 255, 0.7) 50%,
			rgba(var(--mpb-accent-2), 0.25) 55%,
			transparent 60%
		)
		100% 0 / 300% 100% no-repeat;
	-webkit-mask-image: var(--mpb-mask, linear-gradient(transparent, transparent));
	mask-image: var(--mpb-mask, linear-gradient(transparent, transparent));
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

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

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

/* Nút tắt dạng kính mờ, nằm dưới chân banner */
.mpb-close {
	all: unset;
	position: relative;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--mpb-close-size);
	height: var(--mpb-close-size);
	margin-top: var(--mpb-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;
}

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

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

.mpb-root.mpb-is-closing .mpb-close {
	animation: mpbCloseOut 0.25s ease both;
}

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

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

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

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

.mpb-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;
}

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

.mpb-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 phép tắt sau N giây" (JS đặt --mpb-lock, ví dụ 3s) */
.mpb-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;
}

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

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

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

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

.mpb-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);
}

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

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

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

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

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

@media (max-width: 480px) {
	.mpb-root {
		--mpb-close-size: 40px;
		--mpb-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) {
	.mpb-is-open .mpb-banner {
		animation: mpbSoftIn 0.45s ease-out 0.05s both;
	}

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

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

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

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