/* Popup mã ưu đãi ở trang đặt vé */
.px-promo {
	box-sizing: border-box;
	border: 0;
	border-radius: 12px;
	padding: 40px 32px 24px;
	width: min(480px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	color: #000;
	background: #fff;
	box-shadow: 0 24px 80px rgb(0 0 0 / 24%);
	font-family: inherit;
	text-align: center;
}
.px-promo::backdrop { background: rgb(0 0 0 / 58%); }
.px-promo:not([open]) { display: none; }
.px-promo button { font: inherit; cursor: pointer; }
.px-promo__close { position: absolute; inset: 8px 8px auto auto; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; color: #000; }
.px-promo__eyebrow { margin: 0 0 12px; font-size: 11px; letter-spacing: .1em; font-weight: 600; color: #a61b16; }
.px-promo h2 { margin: 0 0 20px; font-size: 20px; line-height: 1.4; font-weight: 700; color: #2f3037; text-wrap: balance; }
.px-promo__list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; text-align: left; }
.px-promo__card { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 16px; background: #fff4df; border-radius: 10px; }
.px-promo__card > div { min-width: 0; }
.px-promo__card p { margin: 0; overflow-wrap: anywhere; }
.px-promo__value { font-size: 15px; font-weight: 700; color: #2f3037; }
.px-promo__name { margin-top: 2px !important; font-size: 13px; line-height: 1.5; }
.px-promo__meta { margin-top: 4px !important; font-size: 12px; line-height: 1.5; color: #555; }
.px-promo__code { margin-top: 6px !important; font-size: 12px; }
.px-promo__code strong { color: #a61b16; letter-spacing: .04em; }
.px-promo .px-promo__use { flex: 0 0 auto; min-height: 40px; padding: 8px 18px; border: 0; border-radius: 999px; color: #fff; background: #a61b16; font-weight: 600; }
.px-promo .px-promo__use:is(:hover,:focus,:active) { background: #a61b16; color: #fff; }
.px-promo__foot { margin: 0 0 8px; font-size: 11px; line-height: 1.7; color: #555; }
.px-promo__all { display: inline-block; margin: 4px 0; color: #a61b16; font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.px-promo__later { display: block; margin: 4px auto 0; border: 0; padding: 10px; min-height: 44px; background: transparent; color: #444; text-decoration: underline; text-underline-offset: 3px; }
.px-promo :is(button,a):focus-visible { outline: 2px solid #a61b16; outline-offset: 3px; }
.px-promo__toast { position: fixed; inset: auto 16px 24px; z-index: 100000; max-width: 420px; margin: 0 auto; padding: 12px 16px; border-radius: 8px; background: #2f3037; color: #fff; font-size: 13px; line-height: 1.5; text-align: center; }
.px-promo__toast[hidden] { display: none; }

/* Gợi ý mã ở bước thanh toán, đặt ngay trên khung của VeXeRe */
.px-promo-strip { box-sizing: border-box; margin: 0 auto 16px; padding: 12px 16px; max-width: 100%; background: #fff4df; border-radius: 12px; color: #000; }
.px-promo-strip__label { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #2f3037; }
.px-promo-strip__label span { font-weight: 400; color: #555; }
.px-promo-strip__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.px-promo-strip__chip { display: inline-flex; gap: 8px; align-items: center; max-width: 100%; min-height: 44px; padding: 8px 14px; border: 1px dashed #a61b16; border-radius: 8px; background: #fff; color: #2f3037; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.px-promo-strip__chip strong { color: #a61b16; letter-spacing: .04em; }
.px-promo-strip__chip span { overflow-wrap: anywhere; }
.px-promo-strip__chip:is(:hover,:focus,:active) { background: #fff; border-color: #a61b16; }
.px-promo-strip__chip:focus-visible { outline: 2px solid #a61b16; outline-offset: 3px; }
.px-promo-strip__note { margin: 8px 0 0; font-size: 12px; color: #2f3037; }
.px-promo-strip__note[hidden] { display: none; }

@media (max-width: 600px) {
	.px-promo { padding: 36px 20px 16px; }
	.px-promo__card { flex-direction: column; align-items: stretch; }
	.px-promo .px-promo__use { width: 100%; }
}