/* ==== "ĐẠI TIỆC KHUYẾN MÃI" promo tabs (inspired by thammylinhanh.vn) ==== */

/* Tokens live on their own selector because the mobile detail modal is moved to
   <body> at runtime — outside the section — and would otherwise inherit none of
   these. JS copies the section's inline style="--brand:…" onto the modal too, so
   a per-shortcode palette follows it out. */
.pdeal,
.pdeal__modal {
	--brand: #6b3fa0;          /* purple accent */
	--brand-dark: #4f2c7a;
	--brand-soft: #ffffff;     /* resting pill background */
	--ink: #3a2b53;
	--hot: #f6c445;            /* HOT badge yellow */
	--slide: 34px;             /* how far the active item slides OUT */

	/* Section wash: derived from --brand so any brand colour produces a
	   matching tint that melts into the page instead of a hard colour block. */
	--wash: color-mix(in srgb, var(--brand) 15%, #ffffff);
	--wash-2: color-mix(in srgb, var(--brand) 6%, #ffffff);
	--page: #ffffff;           /* colour the section fades into (the page bg) */
	--pd-bg:
		radial-gradient(115% 85% at 0% 0%, var(--wash) 0%, transparent 62%),
		radial-gradient(90% 70% at 100% 8%, var(--wash-2) 0%, transparent 58%),
		linear-gradient(180deg, var(--wash-2) 0%, var(--page) 100%);

	/* Gutter that keeps content aligned to a centred container while the
	   section itself runs edge to edge. */
	--pd-max: 1320px;
	--edge: max(20px, calc((100% - var(--pd-max)) / 2));

	/* Typeface. NOT `inherit`: themes routinely load a webfont subset to Latin,
	   so every Vietnamese diacritic misses the subset and the browser falls back
	   glyph by glyph — one word ends up drawn in two typefaces. This stack's
	   first hit on every platform covers Vietnamese in full. Pass font="theme"
	   on the shortcode to inherit the theme font anyway. */
	--pd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans",
		"Liberation Sans", Arial, sans-serif;
}

.pdeal {
	position: relative;
	margin: 0;
	padding: clamp(40px, 5vw, 72px) 0 clamp(52px, 6vw, 84px);
	box-sizing: border-box;
	font-family: var(--pd-font);
	background: var(--pd-bg);
	background-color: var(--page);
	overflow: hidden; /* the banner bleeds past the right edge */
	/* Layout below switches on the SECTION's width, not the viewport's, so
	   full="0" inside a narrow theme container stacks correctly too. */
	container-type: inline-size;
}

/* Full-bleed: escape whatever constrained container the theme puts us in,
   so the promo band spans the whole viewport like the reference site.
   Block themes recognise the `alignfull` class we also emit and neutralise
   their own container padding; this rule is the fallback for classic themes.
   Width stays `auto` on purpose — the negative margins do the stretching, so
   both mechanisms can coexist without one forcing a horizontal scrollbar. */
.pdeal--full {
	margin-inline: calc(50% - 50vw);
	max-width: none;
}
/* Keep the 100vw band from creating a horizontal scrollbar. `clip` (not
   `hidden`) so position:sticky headers elsewhere on the page keep working. */
body:has(.pdeal--full) {
	overflow-x: clip;
}

.pdeal *,
.pdeal *::before,
.pdeal *::after {
	box-sizing: border-box;
}
/* Buttons and inputs do not inherit font-family from their container, so the
   section font has to be handed to them explicitly or they fall back to the
   browser's own UI font — the other half of the mixed-typeface bug. */
.pdeal button,
.pdeal input,
.pdeal select,
.pdeal textarea {
	font-family: inherit;
}

.pdeal__title {
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 800;
	letter-spacing: 0.5px;
	color: var(--ink);
	margin: 0 0 clamp(22px, 2.6vw, 36px);
	padding-left: var(--edge);
	padding-right: var(--edge);
}
.pdeal__title::after {
	content: "";
	display: block;
	width: 120px;
	height: 3px;
	border-radius: 3px;
	/* fades out — an accent, not a divider that chops the section in two */
	background: linear-gradient(90deg, var(--brand), transparent);
	margin-top: 12px;
	opacity: 0.75;
}

/* Stacked by default; the two-column layout kicks in further down once the
   section is wide enough for it. */
.pdeal__grid {
	display: grid;
	/* minmax(0,…) so a long service name can never widen the column */
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: stretch;
	padding-left: var(--edge);
	padding-right: var(--edge);
}

/* ---- Left: the sliding item list ---- */
.pdeal__list {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.4vw, 20px);
	/* left: room for the HOT badge, which hangs outside the pill (it then
	   lines up with the section title); right: room to slide OUT */
	padding-left: 38px;
	padding-right: var(--slide);
}

.pdeal__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 8px 14px 8px 8px;
	border-radius: 999px;
	background: var(--brand-soft);
	color: var(--ink);
	box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.55);
	/* the thò-ra / thụt-vào motion */
	transform: translateX(0);
	transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
		background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
	will-change: transform;
}

/* icons="0": no hexagon, so the pill needs its own breathing room and a bit
   more height to keep the rounded shape looking deliberate. */
.pdeal--noicons .pdeal__item {
	padding: 12px 14px 12px 24px;
}

/* The tab itself: fills the pill so the whole row is clickable, except the
   CTA chip next to it which is a real link to the service page. */
.pdeal__trigger {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
/* Stretch the tab's hit area over the whole pill — padding included — so a
   click anywhere on the coloured shape selects the item, not just on the text.
   The CTA chip is lifted above it so its link still works. */
.pdeal__trigger::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}
.pdeal__cta {
	position: relative;
	z-index: 1;
}

/* HOT badge floating on the far left */
.pdeal__hot {
	position: absolute;
	left: -34px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--hot);
	color: color-mix(in srgb, var(--hot) 35%, #3a2600);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.5px;
	padding: 3px 9px;
	border-radius: 6px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

/* Hexagon icon holder */
.pdeal__hex {
	flex: 0 0 auto;
	width: 44px;
	height: 50px;
	display: grid;
	place-items: center;
	color: var(--brand);
	/* CSS hexagon via clip-path */
	background: color-mix(in srgb, var(--brand) 10%, #ffffff);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	transition: background 0.3s ease, color 0.3s ease;
}
.pdeal__hex svg {
	width: 24px;
	height: 24px;
}

.pdeal__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.3px;
	/* Wraps rather than ellipsising. A truncated service name is lost content —
	   on a phone the pill is narrow enough that almost every name hit the "…". */
	line-height: 1.25;
	overflow-wrap: break-word;
}

/* Same size and colour as the service name at rest; only the selected item
   makes it stand out (see .is-active below). */
.pdeal__disc {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.3px;
	color: inherit;
	transition: color 0.3s ease;
}

.pdeal__cta {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.4px;
	color: #ffffff;
	background: var(--brand);
	padding: 7px 12px;
	border-radius: 999px;
	white-space: nowrap;
	text-decoration: none;
	transition: background 0.3s ease, filter 0.2s ease;
}
a.pdeal__cta:hover {
	color: #ffffff;
	filter: brightness(1.12);
}

/* ---- HOVER: gently peek out ---- */
.pdeal__item:hover {
	transform: translateX(calc(var(--slide) * 0.5));
}

/* ---- ACTIVE: fully slide OUT + accent styling ---- */
.pdeal__item.is-active {
	transform: translateX(var(--slide));
	background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%);
	color: #ffffff;
	box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--brand) 70%, transparent);
}
.pdeal__item.is-active .pdeal__hex {
	background: #ffffff;
	color: var(--brand);
}
.pdeal__item.is-active .pdeal__disc {
	color: var(--hot);
}
.pdeal__item.is-active .pdeal__cta {
	background: #ffffff;
	color: var(--brand);
}
.pdeal__item.is-active .pdeal__hot {
	left: -40px;
}

/* Keyboard focus. Themes often paint a square ring on any focused element
   (Twenty Twenty-Five does), which cuts an ugly box through the middle of the
   pill on click. Drop it and put our own ring on the pill instead, so it
   follows the rounded shape and only shows for keyboard users. */
.pdeal__trigger:focus,
.pdeal__cta:focus {
	outline: none;
}
.pdeal__item:has(:focus-visible) {
	outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent);
	outline-offset: 3px;
}

/* ---- Right: the banner panel ---- */
.pdeal__banner {
	position: relative;
	background: color-mix(in srgb, var(--brand) 2%, #ffffff);
	border-radius: 22px;
	box-shadow: 0 24px 60px -34px color-mix(in srgb, var(--ink) 80%, transparent);
	/* symmetric now that the panel is boxed rather than bleeding off-screen */
	padding: clamp(26px, 3vw, 40px) clamp(26px, 2.6vw, 40px) clamp(30px, 3.4vw, 44px);
	overflow: hidden;
}

/* panels stack; only the active one shows, with a fade/slide-in */
.pdeal__panel {
	position: absolute;
	inset: clamp(26px, 3vw, 40px) clamp(26px, 2.6vw, 40px) clamp(30px, 3.4vw, 44px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
	pointer-events: none;
}
.pdeal__panel.is-active {
	position: relative;
	inset: auto;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.pdeal__panel-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(20px, 2.4vw, 36px);
	align-items: start;
}

.pdeal__panel-text h3 {
	margin: 0 0 18px;
	font-size: clamp(18px, 1.6vw, 24px);
	font-weight: 800;
	color: var(--ink);
	letter-spacing: 0.3px;
}
.pdeal__panel-text h4 {
	margin: 24px 0 14px;
	font-size: clamp(16px, 1.35vw, 20px);
	font-weight: 800;
	color: var(--ink);
	letter-spacing: 0.3px;
}
/* Sub-line under a heading (e.g. what the treatment is made of). Deliberately
   the same size/colour as the bullets so it never competes with the title. */
.pdeal__panel-text p {
	margin: -6px 0 14px;
	font-size: 15px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--ink) 78%, #ffffff);
}
.pdeal__panel-text ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pdeal__panel-text li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--ink) 78%, #ffffff);
}
.pdeal__panel-text li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--brand);
}

/* Optional price line for a banner section: struck-through original price,
   the promo price, and a discount badge. Put it right under an <h3>/<h4>. */
.pdeal__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 12px;
}
.pdeal__price-old {
	font-size: 15px;
	text-decoration: line-through;
	color: color-mix(in srgb, var(--ink) 55%, #ffffff);
}
.pdeal__price-new {
	font-size: clamp(20px, 1.7vw, 26px);
	font-weight: 800;
	color: var(--brand);
	line-height: 1.1;
}
.pdeal__price-new small {
	font-size: 13px;
	font-weight: 700;
}
.pdeal__price-off {
	background: var(--hot);
	color: color-mix(in srgb, var(--hot) 32%, #2e2100);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.4px;
	padding: 3px 9px;
	border-radius: 6px;
}
/* small caps line above the figures, e.g. "ƯU ĐÃI" */
.pdeal__price-label {
	flex: 0 0 100%;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--ink) 58%, #ffffff);
}

/* A gift that comes WITH the service (a bonus treatment, a voucher…). Kept
   visually separate from the price so "trị giá 3.500.000đ" can never be read
   as cash back. */
.pdeal__gift {
	display: flex;
	align-items: stretch;
	margin: 4px 0 16px;
	border: 1px solid color-mix(in srgb, var(--hot) 55%, transparent);
	border-radius: 14px;
	overflow: hidden;
	background: color-mix(in srgb, var(--hot) 8%, #ffffff);
}
/* Gold tag on the left: the word "TẶNG" over a gift-box glyph (drawn in CSS,
   so an author only needs to write the text). */
.pdeal__gift-tag {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 18px;
	background: linear-gradient(
		150deg,
		color-mix(in srgb, var(--hot) 62%, #ffffff) 0%,
		var(--hot) 48%,
		color-mix(in srgb, var(--hot) 72%, #6b4700) 100%
	);
	color: #ffffff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-shadow: 0 1px 2px rgba(90, 60, 0, 0.35);
}
.pdeal__gift-tag::after {
	content: "";
	width: 34px;
	height: 34px;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v9H4v-9'/%3E%3Cpath d='M2 8h20v4H2z'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M12 8H7.5a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8z'/%3E%3Cpath d='M12 8h4.5a2.5 2.5 0 0 0 0-5C13 3 12 8 12 8z'/%3E%3C/svg%3E");
	filter: drop-shadow(0 1px 2px rgba(90, 60, 0, 0.3));
}
.pdeal__gift-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 20px;
	min-width: 0;
}
.pdeal__gift-body b {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.4px;
	color: var(--ink);
}
.pdeal__gift-body small {
	font-size: 12.5px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--ink) 62%, #ffffff);
}
.pdeal__gift-value {
	margin-top: 2px;
	font-size: clamp(20px, 1.7vw, 26px);
	font-weight: 800;
	line-height: 1.15;
	color: color-mix(in srgb, var(--hot) 68%, #5a3f00);
}

.pdeal__register {
	display: inline-block;
	margin-top: 24px;
	padding: 12px 26px;
	background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%);
	color: #ffffff;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-decoration: none;
	border-radius: 999px;
	box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--brand) 75%, transparent);
	transition: filter 0.2s ease, transform 0.2s ease;
}
.pdeal__register:hover {
	filter: brightness(1.08);
	transform: translateY(-2px);
	color: #ffffff;
}

.pdeal__panel-thumbs {
	display: flex;
	flex-direction: row;
	gap: 14px;
}
.pdeal__panel-thumbs img {
	/* share the row evenly instead of each claiming the full width */
	flex: 1 1 0;
	min-width: 0;
	height: 110px;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--ink) 85%, transparent);
}

/* ---- Wide: list on the left, banner on the right. Only the section's
       BACKGROUND runs edge to edge; the two columns stay inside the centred
       container with matching gutters on both sides. ---- */
@container (min-width: 981px) {
	.pdeal__grid {
		grid-template-columns: minmax(320px, 560px) minmax(0, 1fr);
		gap: clamp(24px, 3vw, 48px);
	}
	.pdeal__banner {
		min-height: 100%;
	}
	.pdeal__panel-body {
		grid-template-columns: minmax(0, 1fr) clamp(180px, 16vw, 250px);
	}
	.pdeal__panel-thumbs {
		flex-direction: column;
	}
	.pdeal__panel-thumbs img {
		flex: 0 0 auto;
		width: 100%;
		height: clamp(96px, 9vw, 130px);
	}
}

/* ---- Narrow ---- */
@container (max-width: 980px) {
	.pdeal__banner {
		min-height: 0;
	}
}
@container (max-width: 560px) {
	/* --slide has to be set on the LIST, not on .pdeal: a container query never
	   matches the container itself, so the rule that used to sit on .pdeal was
	   dead. Everything that reads --slide lives inside the list, and an inline
	   slide="…" on the section still wins over this. */
	.pdeal__list {
		--slide: 0px;
		padding-left: 32px;
	}
	.pdeal__item {
		gap: 8px;
		padding-right: 8px;
	}
	.pdeal__hot {
		left: -30px;
		padding: 3px 6px;
		font-size: 10px;
	}
	.pdeal__item.is-active .pdeal__hot {
		left: -32px;
	}
	.pdeal__hex {
		width: 36px;
		height: 41px;
	}
	.pdeal__hex svg {
		width: 20px;
		height: 20px;
	}
	.pdeal__name {
		font-size: 12px;
	}
	.pdeal__disc {
		font-size: 14px;
	}
	.pdeal__cta {
		padding: 6px 8px;
		font-size: 10px;
	}
}

/* ---- Mobile: the detail opens as a dialog instead of stacking under the list.
       Same call thammylinhanh.vn makes — a phone shows the full service list and
       the detail arrives as an overlay, so nothing has to be squeezed or cut.
       JS moves the whole .pdeal__banner into .pdeal__modal-body on open and puts
       it back on close, so panel switching and every panel style stay untouched.
       `is-mready` is added by JS: with no JS the banner keeps stacking below. ---- */
@container (max-width: 780px) {
	.pdeal--mmodal.is-mready .pdeal__banner {
		display: none;
	}
}

.pdeal__modal {
	position: fixed;
	inset: 0;
	/* below the signup popup (99999), which opens on top of this one */
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	font-family: var(--pd-font);
}
.pdeal__modal[hidden] {
	display: none;
}
.pdeal__modal *,
.pdeal__modal *::before,
.pdeal__modal *::after {
	box-sizing: border-box;
}

.pdeal__modal-overlay {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--ink) 58%, transparent);
	animation: pdeal-fade 0.2s ease;
}

/* The dialog itself must NOT scroll. It carries the close button, which is
   positioned against it — make the dialog the scroller and the button scrolls
   away with the content, leaving no way out on a long panel. The frame stays
   put and only the body moves. */
.pdeal__modal-dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 520px;
	max-height: calc(100dvh - 32px);
	background: #ffffff;
	border-radius: 18px;
	/* top padding clears the close button, so a long heading cannot run under it */
	padding: 44px 20px 24px;
	box-shadow: 0 30px 70px color-mix(in srgb, var(--ink) 45%, transparent);
	animation: pdeal-pop 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Themes routinely set a min-height on every <button> (Flatsome uses 2.5em),
   and min-height beats height no matter how specific our rule is — a 36px close
   button rendered 70px tall on anhkhuebeautyclinic.vn and covered the heading.
   Clear the floor for our own buttons; their size comes from padding. */
.pdeal button,
.pdeal__modal button {
	min-width: 0;
	min-height: 0;
}

.pdeal__modal-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	padding: 0;
	display: grid;
	place-items: center;
	border: none;
	background: transparent;
	color: color-mix(in srgb, var(--ink) 55%, #ffffff);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background 0.2s ease, color 0.2s ease;
}
.pdeal__modal-close:hover {
	background: color-mix(in srgb, var(--brand) 10%, #ffffff);
	color: var(--brand);
}

/* Inside the dialog the dialog owns the chrome, so the banner drops its own. */
/* The one scrolling box. min-height:0 is required or a flex child refuses to
   shrink below its content and the dialog grows past the viewport instead.
   overscroll-behavior stops the page behind from scrolling once this hits its
   end — on a phone that is the difference between closing the dialog and
   losing your place on the page. */
.pdeal__modal-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Even with the reset above, keep the panel heading out of the corner the close
   button floats over — we cannot audit every theme. */
.pdeal__modal .pdeal__panel-text h3 {
	padding-right: 40px;
}

.pdeal__modal .pdeal__banner {
	min-height: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

/* Page behind the dialog must not scroll away under the finger. */
body.pdeal-locked {
	overflow: hidden;
}

@keyframes pdeal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes pdeal-pop {
	from { opacity: 0; transform: translateY(14px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.pdeal__item,
	.pdeal__panel {
		transition: none;
	}
	.pdeal__modal-overlay,
	.pdeal__modal-dialog {
		animation: none;
	}
}