/* ==========================================================================
   Landing ưu đãi chân mày — Hoàng Hưng Beauty
   Viết theo hướng mobile-first: CSS gốc là cho điện thoại, các @media
   min-width phía dưới mới mở rộng cho tablet/desktop.
   Mọi class có tiền tố hhl- để không đụng CSS của Bricks.

   NHẬN DIỆN — lấy đúng từ site chính (Bricks global styles):
   - Tiêu đề, nút:  Beautique Display, in hoa   (site đặt tên "PlayfairDisplaySC")
   - Thân bài:      Roboto                        (site nạp từ Google Fonts)
   - Con số, giá:   Viaoda Libre
   - Màu:           vàng #D4A017 (--color-1), vàng đậm #B8860B, nâu chữ #5A3A05
                    (--color-8), nâu đậm #8B5E0A, đen #0A0A0A (--color-4),
                    nền kem #FAF5E7 (--bg-color), #F7EED5 (--color-btn-bg)
   ========================================================================== */

/* Font thương hiệu chép về folder landing: subdomain tải font từ domain chính
   sẽ bị trình duyệt chặn (CORS) nếu server không cho phép. */
@font-face {
	font-family: "HHL Beautique";
	src: url("fonts/BeautiqueDisplay-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "HHL Beautique";
	src: url("fonts/BeautiqueDisplay-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "HHL Viaoda";
	src: url("fonts/ViaodaLibre-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

/* Biến dùng chung cho thân trang và thanh nút đáy (nằm ngoài .hhl) */
.hhl,
.hhl-bar {
	--hhl-font-display: "HHL Beautique", "PlayfairDisplaySC", Georgia, serif;
	--hhl-font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--hhl-font-number: "HHL Viaoda", "ViaodaLibre", Georgia, serif;

	--hhl-gold: #d4a017;        /* --color-1 */
	--hhl-gold-deep: #b8860b;   /* tiêu đề trên nền sáng — đủ tương phản hơn #D4A017 */
	--hhl-gold-dark: #8b5e0a;   /* link, chữ nhấn trên nền sáng */
	--hhl-gold-light: #f5e06a;
	--hhl-gold-soft: #f7eed5;   /* --color-btn-bg */
	--hhl-ink: #5a3a05;         /* --color-8: màu chữ thân bài của site */
	--hhl-dark: #0a0a0a;        /* --color-4 */
	--hhl-muted: #7d6340;
	--hhl-line: #e3d4af;
	--hhl-bg: #fffdfa;          /* nền html của site */
	--hhl-bg-soft: #faf5e7;     /* --bg-color */
	--hhl-on-dark: #f5f0e8;     /* --color-6: chữ trên nền tối */
	--hhl-on-dark-muted: #cbbd9f;
	--hhl-danger: #b3261e;
	--hhl-radius: 2px;
	--hhl-shadow: 0 6px 24px rgba(90, 58, 5, .06);
	--hhl-hairline: rgba(184, 134, 11, .35); /* đường kẻ vàng mảnh — thay cho bóng đổ */
	--hhl-gutter: 16px;

	font-family: var(--hhl-font-body);
}

.hhl {
	color: var(--hhl-ink);
	background: var(--hhl-bg);
	line-height: 1.6;
	font-size: 1.0625rem;
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
}

/* Tiêu đề phụ (thẻ dịch vụ, bước, câu hỏi...) dùng font tiêu đề, màu nâu —
   giống tiêu đề thẻ trên site (1.4rem, --color-8) */
.hhl h3,
.hhl-faq summary {
	font-family: var(--hhl-font-display);
	font-weight: 700;
	color: var(--hhl-ink);
}

.hhl-section--dark h3 {
	color: var(--hhl-on-dark);
}

.hhl *,
.hhl *::before,
.hhl *::after,
.hhl-bar,
.hhl-bar * {
	box-sizing: border-box;
}

/* Reset bọc trong :where() để độ ưu tiên chỉ bằng một class — các class
   riêng phía dưới (margin-top của .hhl-stats, .hhl-checks...) mới thắng được */
.hhl :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) {
	margin: 0;
}

.hhl :where(ul, ol) {
	padding: 0;
	list-style: none;
}

.hhl img {
	display: block;
	max-width: 100%;
	height: auto;
}

.hhl a:not(.hhl-btn) {
	color: var(--hhl-gold-dark);
}

.hhl-icon {
	flex: none;
	width: 20px;
	height: 20px;
}

/* ---- Khung ---------------------------------------------------------- */

.hhl-wrap {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--hhl-gutter);
}

.hhl-wrap--narrow {
	max-width: 820px;
}

.hhl-section {
	padding: 44px 0;
}

.hhl-section--soft {
	background: var(--hhl-bg-soft);
}

.hhl-section--dark {
	background: var(--hhl-dark);
	color: var(--hhl-on-dark);
}

.hhl-head {
	max-width: 720px;
	margin: 0 auto 24px;
	text-align: center;
}

/* Tiêu đề khối: giống site — Beautique in hoa, line-height 1.4, màu vàng */
.hhl-title {
	font-family: var(--hhl-font-display);
	font-size: clamp(1.375rem, 5.6vw, 2.25rem);
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--hhl-gold-deep);
	text-wrap: balance;
}

.hhl-section--dark .hhl-title {
	color: var(--hhl-gold);
}

.hhl-lead {
	margin-top: 10px;
	color: var(--hhl-muted);
	font-size: 1rem;
}

.hhl-section--dark .hhl-lead {
	color: var(--hhl-on-dark-muted);
}

/* Hai cột ảnh + nội dung (Quy trình, Vì sao chọn) */
.hhl-split {
	display: grid;
	gap: 24px;
	align-items: center;
}

/* Ảnh vuông giữ nguyên khung (ảnh có chữ thiết kế sẵn, cắt sẽ mất chữ) */
.hhl-split__img {
	width: 100%;
	max-width: 440px;
	margin-inline: auto;
	aspect-ratio: 1;
	border-radius: var(--hhl-radius);
	object-fit: cover;
}

/* ---- Nút ------------------------------------------------------------ */

.hhl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 12px 22px;
	border: 1px solid var(--hhl-gold-deep);
	border-radius: var(--hhl-radius);
	/* Chữ đen trên nền vàng: đọc rõ hơn chữ trắng (vàng nhạt, tương phản thấp) */
	background: linear-gradient(135deg, #e2b93a, var(--hhl-gold) 50%, var(--hhl-gold-deep));
	color: var(--hhl-dark);
	font-family: var(--hhl-font-display);
	font-weight: 700;
	font-size: .9375rem;
	line-height: 1.25;
	letter-spacing: .08em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease, background-color .15s ease, color .15s ease;
	-webkit-tap-highlight-color: transparent;
}

.hhl-btn:hover {
	color: var(--hhl-dark);
	filter: brightness(1.06);
}

.hhl-btn:active {
	transform: scale(.98);
}

.hhl-btn:focus-visible {
	outline: 3px solid var(--hhl-ink);
	outline-offset: 3px;
}

.hhl-btn--ghost {
	border-color: var(--hhl-hairline);
	background: transparent;
	color: var(--hhl-gold-dark);
}

.hhl-section--dark .hhl-btn--ghost {
	border-color: rgba(212, 160, 23, .55);
	color: var(--hhl-gold);
}

.hhl-btn--ghost:hover {
	border-color: var(--hhl-gold);
	background: var(--hhl-gold);
	color: var(--hhl-dark);
	filter: none;
}

.hhl-btn--block {
	width: 100%;
}

/* Dòng nút cuối mỗi khối */
.hhl-cta-row {
	display: grid;
	gap: 10px;
	margin-top: 28px;
}

.hhl-cta-row__alt {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.hhl-cta-row__alt .hhl-btn {
	padding-inline: 10px;
	font-size: .875rem;
}

.hhl-cta-row--center {
	max-width: 520px;
	margin-inline: auto;
}

/* ---- 0. Banner ------------------------------------------------------ */
/* Ảnh tràn hết chiều ngang, giữ nguyên tỉ lệ thiết kế — không cắt chữ trên banner */

.hhl-banner {
	background: var(--hhl-bg-soft);
	line-height: 0;
}

.hhl-banner__link {
	display: block;
}

.hhl-banner__img {
	width: 100%;
	height: auto;
}

/* Chưa có ảnh banner: khung giữ chỗ đúng tỉ lệ cho từng loại màn hình */
.hhl-banner__missing .hhl-img--missing {
	border-radius: 0;
	line-height: 1.4;
}

.hhl-banner__ph--pc {
	display: none !important;
}

/* ---- 1. Mô tả + thông tin chương trình ------------------------------ */
/* Nền kem sáng, nối liền với banner vàng kem của site; chữ nâu, nhấn vàng */

.hhl-hero {
	padding: 32px 0 40px;
	border-bottom: 1px solid var(--hhl-line);
	background: linear-gradient(180deg, var(--hhl-bg-soft), var(--hhl-bg) 70%);
	color: var(--hhl-ink);
}

.hhl-hero__grid {
	display: grid;
	gap: 24px;
}

.hhl-hero__title {
	font-family: var(--hhl-font-display);
	font-size: clamp(1.625rem, 7.4vw, 2.75rem);
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--hhl-ink);
}

/* Cụm nhấn trong tiêu đề: Viaoda Libre vàng, chữ thường — nét sang như
   các con số/giờ mở cửa trên site */
.hhl-hero__title em {
	display: block;
	font-family: var(--hhl-font-number);
	font-style: normal;
	font-weight: 400;
	font-size: 1.2em;
	line-height: 1.15;
	text-transform: none;
	letter-spacing: 0;
	color: var(--hhl-gold-deep);
}

.hhl-hero__subtitle {
	margin-top: 12px;
	font-size: 1rem;
	color: var(--hhl-muted);
}

/* Khung giá + đếm ngược + nút: nền trắng, viền vàng mảnh, đường nhấn trên đầu */
.hhl-hero__offer {
	padding: 20px 16px;
	border: 1px solid var(--hhl-hairline);
	border-top: 2px solid var(--hhl-gold);
	border-radius: var(--hhl-radius);
	background: #fff;
}

.hhl-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}

.hhl-price__label {
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--hhl-muted);
}

/* Giá và mọi con số: Viaoda Libre (font chỉ có nét 400 — không ép đậm giả) */
.hhl-price__now {
	font-family: var(--hhl-font-number);
	font-size: clamp(3rem, 15vw, 4.5rem);
	line-height: 1;
	font-weight: 400;
	color: var(--hhl-gold-deep);
}

.hhl-price__old {
	font-size: 1.0625rem;
	color: #9d8c6c;
}

.hhl-price--sm .hhl-price__now {
	font-size: 1.625rem;
	color: var(--hhl-gold-dark);
}

.hhl-price--sm .hhl-price__old {
	font-size: .875rem;
	color: var(--hhl-muted);
}

.hhl-hero__note {
	margin-top: 6px;
	font-size: .875rem;
	color: var(--hhl-muted);
}

.hhl-checks {
	display: grid;
	gap: 10px;
	margin-top: 20px;
	font-size: .9375rem;
}

.hhl-checks li {
	position: relative;
	padding-left: 28px;
}

.hhl-checks li::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 18px;
	height: 18px;
	border: 1px solid var(--hhl-gold-deep);
	border-radius: var(--hhl-radius);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8860b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat,
		var(--hhl-gold-soft);
}

.hhl-cta-row--hero {
	margin-top: 18px;
}

/* ---- Đồng hồ đếm ngược ---------------------------------------------- */

.hhl-countdown {
	margin-top: 16px;
	padding: 12px 0 0;
	border-top: 1px solid var(--hhl-line);
}

.hhl-countdown__label {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hhl-gold-dark);
}

.hhl-countdown[data-ended] .hhl-countdown__label {
	text-transform: none;
	letter-spacing: 0;
	font-size: .9375rem;
}

.hhl-countdown__boxes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin-top: 8px;
}

.hhl-countdown__boxes span {
	display: grid;
	justify-items: center;
	padding: 8px 2px;
	border: 1px solid var(--hhl-line);
	border-radius: var(--hhl-radius);
	background: var(--hhl-bg-soft);
	color: var(--hhl-muted);
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.hhl-countdown__boxes b {
	font-family: var(--hhl-font-number);
	font-size: clamp(1.625rem, 8vw, 2.125rem);
	line-height: 1.1;
	font-weight: 400;
	color: var(--hhl-ink);
	font-variant-numeric: tabular-nums;
}

.hhl-countdown__ended {
	margin-top: 8px;
	color: var(--hhl-ink);
}

/* ---- 1b. Vì sao cần làm --------------------------------------------- */
/* Số thứ tự Viaoda lớn + đường kẻ mảnh — không icon, không khung bo */

.hhl-needs {
	display: grid;
	gap: 0;
	counter-reset: need;
}

.hhl-need {
	display: grid;
	grid-template-columns: 52px 1fr;
	column-gap: 12px;
	padding: 18px 0;
	border-top: 1px solid var(--hhl-hairline);
}

.hhl-need:last-child {
	border-bottom: 1px solid var(--hhl-hairline);
}

.hhl-need__num {
	grid-row: span 2;
	font-family: var(--hhl-font-number);
	font-size: 2.25rem;
	line-height: 1;
	color: var(--hhl-gold-deep);
}

.hhl-need h3 {
	font-size: 1.0625rem;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.hhl-need p {
	margin-top: 4px;
	color: var(--hhl-muted);
	font-size: .9375rem;
	line-height: 1.55;
}

/* ---- Ảnh bấm để phóng to -------------------------------------------- */

.hhl-zoomable {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	-webkit-tap-highlight-color: transparent;
}

.hhl-zoom {
	width: min(94vw, 1000px);
	max-width: none;
	max-height: 94vh;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
}

.hhl-zoom::backdrop {
	background: rgba(10, 10, 10, .9);
}

.hhl-zoom__img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 86vh;
	margin: 0 auto;
	border: 1px solid rgba(212, 160, 23, .4);
	cursor: zoom-out;
}

.hhl-zoom .hhl-modal__close {
	top: -48px;
}

/* ---- Hình ảnh trước – sau ------------------------------------------- */

.hhl-results__grid {
	grid-auto-columns: 84%;
}

.hhl-results__item {
	border: 1px solid var(--hhl-line);
	background: #fff;
}

.hhl-results__img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* ---- Feedback: ảnh chụp tin nhắn / khách tại cơ sở ------------------ */

.hhl-shots {
	grid-auto-columns: 70%;
}

.hhl-shot {
	overflow: hidden;
	border: 1px solid var(--hhl-line);
	border-radius: var(--hhl-radius);
	background: #fff;
}

.hhl-shot__img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* ---- 2. Form đăng ký ------------------------------------------------ */

.hhl-register {
	background: var(--hhl-bg-soft);
}

.hhl-register__box {
	display: grid;
	gap: 24px;
	align-items: center;
}

.hhl-register__media {
	margin-top: 18px;
}

.hhl-register__img {
	width: 100%;
	border-radius: var(--hhl-radius);
	box-shadow: var(--hhl-shadow);
}

.hhl-register__media figcaption {
	margin-top: 8px;
	color: var(--hhl-muted);
	font-size: .8125rem;
	font-style: italic;
	text-align: center;
}

.hhl-form {
	display: grid;
	gap: 14px;
	padding: 22px 16px;
	border-top: 4px solid var(--hhl-gold);
	border-radius: var(--hhl-radius);
	background: #fff;
	color: var(--hhl-ink);
	box-shadow: var(--hhl-shadow);
	scroll-margin-top: 80px;
}

.hhl-field {
	display: grid;
	gap: 6px;
}

.hhl-field label {
	font-size: .9375rem;
	font-weight: 600;
}

.hhl-field input,
.hhl-field select {
	width: 100%;
	min-height: 52px;
	padding: 10px 14px;
	border: 1px solid var(--hhl-line);
	border-radius: var(--hhl-radius);
	background-color: #fff;
	color: var(--hhl-ink);
	font: inherit;
	font-size: 1rem; /* >= 16px để iOS không tự phóng to khi chạm vào ô */
}

.hhl-field select {
	appearance: none;
	padding-right: 40px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5e0a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
}

.hhl-field input:focus,
.hhl-field select:focus {
	outline: none;
	border-color: var(--hhl-gold);
	box-shadow: 0 0 0 3px rgba(212, 160, 23, .25);
}

.hhl-field [aria-invalid="true"] {
	border-color: var(--hhl-danger);
}

.hhl-field__error,
.hhl-form__alert {
	color: var(--hhl-danger);
	font-size: .875rem;
}

.hhl-form__alert {
	padding: 10px 14px;
	border-radius: var(--hhl-radius);
	background: #fdecea;
}

.hhl-form__privacy {
	color: var(--hhl-muted);
	font-size: .8125rem;
	text-align: center;
}

.hhl-form .hhl-btn[aria-busy="true"] {
	opacity: .7;
	pointer-events: none;
}

/* Ô bẫy bot — ẩn với người dùng nhưng bot vẫn thấy */
.hhl-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Vuốt ngang trên điện thoại ------------------------------------- */
/* Thẻ dịch vụ, ảnh khách, feedback: xếp ngang và vuốt để xem thay vì
   xếp dọc dài cả chục màn hình. Desktop quay về dạng lưới. */

.hhl-scroller {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 82%;
	gap: 14px;
	margin-inline: calc(var(--hhl-gutter) * -1);
	padding: 4px var(--hhl-gutter) 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--hhl-gutter);
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.hhl-scroller::-webkit-scrollbar {
	display: none;
}

.hhl-scroller > * {
	scroll-snap-align: start;
}

.hhl-swipe-hint {
	margin-top: 2px;
	color: var(--hhl-muted);
	font-size: .8125rem;
	text-align: center;
}

/* ---- 3. Dịch vụ: tab — ảnh trước/sau + video + giá ------------------ */

.hhl-tabs__list {
	display: flex;
	gap: 8px;
	margin: 0 calc(var(--hhl-gutter) * -1) 18px;
	padding: 2px var(--hhl-gutter) 6px;
	overflow-x: auto;
	scrollbar-width: none;
}

.hhl-tabs__list::-webkit-scrollbar {
	display: none;
}

/* Chưa có JS thì không hiện tab — mọi dịch vụ xếp nối nhau */
.hhl-tabs:not(.is-ready) .hhl-tabs__list {
	display: none;
}

.hhl-tabs.is-ready .hhl-service:not(.is-active) {
	display: none;
}

/* Tab dạng chữ + gạch chân vàng khi chọn — nhẹ nhàng hơn nút viên thuốc */
.hhl-tabs__list {
	border-bottom: 1px solid var(--hhl-line);
}

.hhl-tabs__tab {
	flex: none;
	min-height: 48px;
	margin-bottom: -1px;
	padding: 12px 14px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	color: var(--hhl-muted);
	font-family: var(--hhl-font-display);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.hhl-tabs__tab[aria-selected="true"] {
	border-bottom-color: var(--hhl-gold);
	color: var(--hhl-gold-dark);
}

.hhl-tabs__tab:focus-visible {
	outline: 3px solid var(--hhl-ink);
	outline-offset: 2px;
}

.hhl-service {
	display: grid;
	gap: 18px;
	padding: 16px;
	border: 1px solid var(--hhl-line);
	border-radius: var(--hhl-radius);
	background: #fff;
	box-shadow: var(--hhl-shadow);
}

.hhl-service + .hhl-service {
	margin-top: 20px;
}

.hhl-tabs.is-ready .hhl-service + .hhl-service {
	margin-top: 0;
}

/* Ảnh trước/sau trong panel: vuốt ngang giữa các ca */
.hhl-service__photos {
	grid-auto-columns: 88%;
	margin-inline: -16px;
	padding: 0 16px 4px;
	scroll-padding-inline: 16px;
}

.hhl-ba {
	position: relative;
	overflow: hidden;
	border-radius: var(--hhl-radius);
}

.hhl-ba__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.hhl-ba__tag {
	position: absolute;
	top: 10px;
	padding: 3px 10px;
	border-radius: var(--hhl-radius);
	font-family: var(--hhl-font-display);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hhl-ba__tag--before {
	left: 10px;
	background: rgba(10, 10, 10, .7);
	color: var(--hhl-on-dark);
}

.hhl-ba__tag--after {
	right: 10px;
	background: var(--hhl-gold);
	color: var(--hhl-dark);
}

.hhl-service__name {
	font-size: 1.375rem;
	line-height: 1.3;
}

.hhl-service__desc {
	margin-top: 6px;
	color: var(--hhl-muted);
	font-size: .9375rem;
}

.hhl-service .hhl-price {
	margin: 12px 0 14px;
}

/* Thẻ video: ảnh bìa nhỏ + tiêu đề, bấm mở hộp thoại phát */
.hhl-vcard {
	display: grid;
	grid-template-columns: 128px 1fr;
	gap: 12px;
	align-items: center;
	width: 100%;
	margin-bottom: 14px;
	padding: 8px;
	border: 1px solid var(--hhl-line);
	border-radius: var(--hhl-radius);
	background: var(--hhl-bg-soft);
	color: var(--hhl-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.hhl-vcard:hover {
	border-color: var(--hhl-gold);
}

.hhl-vcard__thumb {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--hhl-radius);
	background: #000;
}

.hhl-vcard__thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.hhl-vcard__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--hhl-gold);
	color: var(--hhl-dark);
	transform: translate(-50%, -50%);
}

.hhl-vcard__play .hhl-icon {
	width: 18px;
	height: 18px;
	margin-left: 2px;
}

.hhl-vcard__text {
	display: grid;
	gap: 2px;
}

.hhl-vcard__label {
	color: var(--hhl-gold-deep);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hhl-vcard__title {
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Hộp thoại phát video */
.hhl-modal {
	width: min(92vw, 900px);
	max-height: 92vh;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
}

.hhl-modal--vertical {
	width: min(92vw, calc(82vh * 9 / 16));
}

.hhl-modal::backdrop {
	background: rgba(10, 10, 10, .85);
}

.hhl-modal__frame iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--hhl-radius);
	background: #000;
}

.hhl-modal--vertical .hhl-modal__frame iframe {
	aspect-ratio: 9 / 16;
}

.hhl-modal__close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--hhl-gold);
	color: var(--hhl-dark);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

/* ---- 4. Video ------------------------------------------------------- */

.hhl-videos {
	max-width: 880px;
	margin-inline: auto;
}

.hhl-videos.hhl-scroller {
	max-width: none;
	grid-auto-columns: 64%; /* video dọc: thấy được mép video kế tiếp để biết vuốt */
}

.hhl-video--vertical {
	max-width: 340px;
	margin-inline: auto;
}

.hhl-video__play {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--hhl-radius);
	background: #000;
	cursor: pointer;
}

.hhl-video--vertical .hhl-video__play,
.hhl-video--vertical iframe {
	aspect-ratio: 9 / 16;
}

.hhl-video__play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .85;
	transition: opacity .2s ease;
}

.hhl-video__play:hover img {
	opacity: 1;
}

.hhl-video__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--hhl-gold);
	color: #fff;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 8px rgba(212, 160, 23, .3);
}

.hhl-video__icon .hhl-icon {
	width: 32px;
	height: 32px;
	margin-left: 4px;
}

.hhl-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--hhl-radius);
}

.hhl-video figcaption {
	margin-top: 10px;
	color: var(--hhl-on-dark-muted);
	font-size: .9375rem;
	text-align: center;
}

/* ---- 5. Quy trình --------------------------------------------------- */
/* Điện thoại: mỗi bước một hàng (ảnh trái, chữ phải), nối với nhau bằng
   đường dọc. Desktop: 5 thẻ ảnh trên, chữ dưới. */

.hhl-steps {
	display: grid;
	gap: 14px;
}

.hhl-step {
	position: relative;
	display: grid;
	grid-template-columns: 116px 1fr;
	gap: 14px;
	align-items: center;
}

/* Đường nối giữa các bước */
.hhl-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 57px;
	width: 2px;
	height: 14px;
	background: var(--hhl-gold);
	opacity: .5;
}

.hhl-step__media {
	position: relative;
}

.hhl-step__img {
	width: 116px;
	aspect-ratio: 1;
	border-radius: var(--hhl-radius);
	object-fit: cover;
	box-shadow: var(--hhl-shadow);
}

.hhl-step__num {
	position: absolute;
	top: -6px;
	left: -6px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 2px solid var(--hhl-bg);
	border-radius: var(--hhl-radius);
	background: var(--hhl-gold);
	color: var(--hhl-dark);
	font-family: var(--hhl-font-number);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
}

.hhl-step__label {
	display: block;
	margin-bottom: 2px;
	color: var(--hhl-gold-deep);
	font-family: var(--hhl-font-body);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hhl-step h3 {
	font-size: 1.1875rem;
	line-height: 1.3;
}

.hhl-step p {
	margin-top: 4px;
	color: var(--hhl-muted);
	font-size: .875rem;
	line-height: 1.5;
}

/* ---- 5b. Hệ thống cơ sở -------------------------------------------- */
/* Điện thoại: ảnh lớn trên, 2 ảnh nhỏ cạnh nhau, rồi tới bài viết.
   Desktop: ảnh trái, bài viết phải. */

.hhl-facility__grid {
	display: grid;
	gap: 24px;
}

.hhl-facility__photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.hhl-facility__photo {
	position: relative;
	overflow: hidden;
	border-radius: var(--hhl-radius);
	box-shadow: var(--hhl-shadow);
}

.hhl-facility__photo--main {
	grid-column: 1 / -1;
}

.hhl-facility__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.hhl-facility__photo--main .hhl-facility__img {
	aspect-ratio: 10 / 7;
}

.hhl-facility__photo figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 24px 10px 8px;
	background: linear-gradient(transparent, rgba(10, 10, 10, .75));
	color: var(--hhl-on-dark);
	font-size: .75rem;
	line-height: 1.35;
}

.hhl-facility__photo--main figcaption {
	padding: 32px 14px 10px;
	font-size: .875rem;
}

.hhl-facility__text p + p {
	margin-top: 12px;
}

.hhl-facility__highlights {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 20px;
}

.hhl-facility__highlights div {
	padding: 12px 14px;
	border-left: 3px solid var(--hhl-gold);
	border-radius: 0;
	background: var(--hhl-bg);
}

.hhl-facility__highlights dt {
	font-family: var(--hhl-font-number);
	font-size: 2rem;
	line-height: 1.1;
	color: var(--hhl-gold-deep);
}

.hhl-facility__highlights dd {
	margin-top: 2px;
	color: var(--hhl-muted);
	font-size: .8125rem;
	line-height: 1.4;
}

.hhl-facility__values {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.hhl-facility__values li {
	padding: 5px 14px;
	border: 1px solid var(--hhl-line);
	border-radius: var(--hhl-radius);
	background: var(--hhl-gold-soft);
	color: var(--hhl-gold-dark);
	font-family: var(--hhl-font-display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.hhl-branch {
	display: flex;
	gap: 12px;
	margin-top: 20px;
	padding: 16px;
	border: 1px solid var(--hhl-line);
	border-radius: var(--hhl-radius);
	background: var(--hhl-bg);
}

.hhl-branch > .hhl-icon {
	margin-top: 2px;
	color: var(--hhl-gold);
}

.hhl-branch > div {
	display: grid;
	gap: 2px;
	font-size: .9375rem;
}

.hhl-branch__note {
	color: var(--hhl-gold-deep);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hhl-branch strong {
	font-family: var(--hhl-font-display);
	font-size: 1.0625rem;
}

.hhl-branch a {
	margin-top: 4px;
	font-weight: 600;
}

/* ---- 6. Vì sao chọn ------------------------------------------------- */

.hhl-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 20px;
}

.hhl-stats div {
	padding: 14px 6px;
	border-radius: var(--hhl-radius);
	background: var(--hhl-bg-soft);
	box-shadow: var(--hhl-shadow);
	text-align: center;
}

.hhl-stats dt {
	font-family: var(--hhl-font-number);
	font-size: clamp(1.625rem, 7.5vw, 2.5rem);
	font-weight: 400;
	line-height: 1.1;
	color: var(--hhl-gold-deep);
}

.hhl-stats dd {
	margin-top: 4px;
	font-size: .75rem;
	color: var(--hhl-muted);
}

.hhl-reasons {
	display: grid;
	gap: 14px;
	margin-top: 22px;
}

.hhl-reasons li {
	padding-left: 16px;
	border-left: 3px solid var(--hhl-gold);
}

.hhl-reasons h3 {
	font-size: 1rem;
	font-weight: 700;
}

.hhl-reasons p {
	color: var(--hhl-muted);
	font-size: .9375rem;
}

/* ---- 7. Lời nhận xét ------------------------------------------------ */

.hhl-quotes {
	margin-top: 16px;
}

.hhl-quote {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid var(--hhl-line);
	border-radius: var(--hhl-radius);
	background: #fff;
	box-shadow: var(--hhl-shadow);
}

.hhl-quote__stars {
	color: var(--hhl-gold);
	letter-spacing: 2px;
}

/* Reset blockquote của theme Bricks (viền trái + font serif thiếu dấu tiếng Việt) */
.hhl-quote blockquote {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	font-family: var(--hhl-font-body);
	font-size: 1rem;
	font-style: normal;
	line-height: 1.6;
	color: var(--hhl-ink);
}

.hhl-quote figcaption {
	margin-top: auto;
	padding-top: 12px;
	color: var(--hhl-muted);
	font-size: .875rem;
}

/* ---- 8. Hỏi đáp ----------------------------------------------------- */

.hhl-faq {
	display: grid;
	gap: 10px;
}

.hhl-faq details {
	border: 1px solid var(--hhl-line);
	border-radius: var(--hhl-radius);
	background: #fff;
}

.hhl-faq summary {
	position: relative;
	min-height: 52px;
	padding: 15px 48px 15px 16px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	-webkit-tap-highlight-color: transparent;
}

.hhl-faq summary::-webkit-details-marker {
	display: none;
}

.hhl-faq summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--hhl-gold-dark);
}

.hhl-faq details[open] summary::after {
	content: "\2212";
}

.hhl-faq details p {
	padding: 0 16px 16px;
	color: var(--hhl-muted);
	font-size: .9375rem;
}

/* ---- 9. Kêu gọi cuối trang ------------------------------------------ */

/* Ảnh cơ sở làm nền, phủ tối để chữ và form vẫn rõ */
.hhl-final {
	background:
		linear-gradient(180deg, rgba(10, 10, 10, .86), rgba(10, 10, 10, .95)),
		var(--hhl-final-bg, none) center / cover no-repeat,
		var(--hhl-dark);
}

.hhl-contact {
	display: grid;
	gap: 12px;
	margin-top: 20px;
	color: var(--hhl-on-dark-muted);
}

.hhl-contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.hhl-contact .hhl-icon {
	margin-top: 3px;
	color: var(--hhl-gold);
}

.hhl-final .hhl-contact a {
	color: var(--hhl-on-dark);
	font-weight: 600;
}

/* ---- Thanh nút cố định đáy màn hình (điện thoại) --------------------- */

.hhl-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 998; /* dưới nút nổi của plugin (999) */
	display: grid;
	grid-template-columns: 1fr 1fr 2fr;
	gap: 6px;
	padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
	background: rgba(10, 10, 10, .96);
	box-shadow: 0 -6px 20px rgba(0, 0, 0, .2);
	transform: translateY(110%);
	transition: transform .25s ease;
}

.hhl-bar.is-visible {
	transform: none;
}

.hhl-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 52px;
	border-radius: var(--hhl-radius);
	color: var(--hhl-on-dark);
	font-size: .75rem;
	font-weight: 600;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.hhl-bar__item .hhl-icon {
	color: var(--hhl-gold);
}

.hhl-bar__item--main {
	flex-direction: row;
	gap: 8px;
	background: linear-gradient(135deg, #e6bd3a, var(--hhl-gold) 55%, var(--hhl-gold-deep));
	color: var(--hhl-dark);
	font-family: var(--hhl-font-display);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.hhl-bar__item--main .hhl-icon {
	color: var(--hhl-dark);
}

.hhl-bar__item:not(.hhl-bar__item--main):hover {
	color: var(--hhl-gold);
}

/* Chừa chỗ cho thanh nút + nâng nút nổi của plugin lên trên thanh */
@media (max-width: 767px) {
	body.hhl-has-bar {
		padding-bottom: calc(68px + env(safe-area-inset-bottom));
	}

	body.hhl-has-bar .hhb-fcta {
		bottom: calc(84px + env(safe-area-inset-bottom));
	}
}

/* Nút "lên đầu trang" của Bricks: đè lên thanh nút đáy trên điện thoại, và
   icon font của nó tải từ domain chính bị chặn CORS trên subdomain (hiện ô vuông) */
body.hhl-page .brxe-back-to-top {
	display: none !important;
}

/* ---- Khung giữ chỗ khi chưa có ảnh ---------------------------------- */

.hhl-img--missing {
	display: grid;
	place-items: center;
	width: 100%;
	padding: 12px;
	border: 2px dashed #c9bfa6;
	border-radius: var(--hhl-radius);
	background: repeating-linear-gradient(45deg, #f4efe2, #f4efe2 12px, #efe8d6 12px, #efe8d6 24px);
	color: #8a7f63;
	font-size: .875rem;
	text-align: center;
	word-break: break-all;
}

/* ---- Tuỳ chọn ẩn menu của header chung (config: hide_header_menu) ---- */

.hhl-hide-menu #brx-header .brxe-nav-menu,
.hhl-hide-menu #brx-header .brxe-nav-nested,
.hhl-hide-menu #brx-header .bricks-mobile-menu-toggle {
	display: none !important;
}

/* ---- Tablet --------------------------------------------------------- */

@media (min-width: 600px) {
	.hhl-cta-row:not(.hhl-cta-row--center) {
		grid-template-columns: 1fr 1fr;
	}

	.hhl-cta-row__alt {
		grid-template-columns: 1fr 1fr;
	}

	.hhl-scroller {
		grid-auto-columns: 46%;
	}
}

/* ---- Desktop -------------------------------------------------------- */

@media (min-width: 768px) {
	.hhl {
		--hhl-gutter: 24px;
	}

	.hhl-section {
		padding: 80px 0;
	}

	.hhl-head {
		margin-bottom: 36px;
	}

	.hhl-form {
		padding: 32px;
	}

	/* Hết vuốt ngang, trở về lưới */
	.hhl-scroller {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}

	.hhl-swipe-hint {
		display: none;
	}

	.hhl-tabs__list {
		justify-content: center;
		margin-inline: 0;
		padding-inline: 0;
	}

	.hhl-service {
		grid-template-columns: 1.6fr 1fr;
		gap: 28px;
		align-items: center;
		padding: 24px;
	}

	/* Desktop: 2 ảnh trước/sau nằm cạnh nhau, không vuốt */
	.hhl-service__photos {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	/* Banner: ảnh giữ chỗ bản PC thay cho bản mobile */
	.hhl-banner__ph--pc {
		display: grid !important;
	}

	.hhl-banner__ph--mb {
		display: none !important;
	}

	.hhl-hero {
		padding: 56px 0 64px;
	}

	.hhl-hero__offer {
		padding: 28px;
	}

	.hhl-needs {
		grid-template-columns: 1fr 1fr;
		column-gap: 48px;
	}

	.hhl-need:nth-last-child(2):nth-child(odd) {
		border-bottom: 1px solid var(--hhl-hairline);
	}

	.hhl-results__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}

	.hhl-shots {
		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
		gap: 16px;
	}

	/* 5 cột trên màn rộng, 3 + 2 trên tablet */
	.hhl-steps {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 16px;
	}

	/* align-content: start — thẻ bị kéo cao bằng thẻ dài nhất, không để phần
	   dư dồn vào khoảng giữa ảnh và chữ (làm chữ các thẻ lệch nhau) */
	.hhl-step {
		grid-template-columns: 1fr;
		align-items: start;
		align-content: start;
		gap: 12px;
	}

	.hhl-step:not(:last-child)::after {
		display: none;
	}

	.hhl-step__img {
		width: 100%;
		aspect-ratio: 4 / 3;
	}

	.hhl-step__num {
		width: 34px;
		height: 34px;
		top: 10px;
		left: 10px;
	}

	.hhl-quotes {
		grid-template-columns: repeat(3, 1fr);
		margin-top: 24px;
	}

	.hhl-videos.hhl-scroller {
		grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
		justify-content: center;
		gap: 24px;
	}

	.hhl-bar {
		display: none;
	}
}

@media (min-width: 992px) {
	/* Mô tả trái, khung giá + đếm ngược + nút phải */
	.hhl-hero__grid {
		grid-template-columns: 1.15fr .85fr;
		gap: 56px;
		align-items: center;
	}

	.hhl-facility__grid {
		grid-template-columns: 1.1fr 1fr;
		gap: 48px;
		align-items: center;
	}

	.hhl-register__box,
	.hhl-split {
		grid-template-columns: 1fr 1fr;
		gap: 56px;
	}

	.hhl-split--reverse .hhl-split__media {
		order: 2;
	}

	.hhl-split__img {
		max-width: none;
	}

	.hhl-cta-row:not(.hhl-cta-row--center) {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hhl-btn,
	.hhl-bar {
		transition: none;
	}

}

/* ==========================================================================
   SOFT LUXURY — dòng chảy liền mạch giữa các khối
   Mỗi khối là một gradient dọc: màu CUỐI của khối này = màu ĐẦU của khối
   sau, nên không có đường ranh giới. Thêm vệt sáng mờ (radial) đặt cách mép
   trên/dưới đủ xa để tan hết trước khi chạm mép, và một lớp texture rất nhẹ.
   Không dùng đường kẻ ngang chia khối.
   ========================================================================== */

.hhl,
.hhl-bar {
	--c-ivory: #fffaf3;       /* warm ivory */
	--c-blush: #fbefea;       /* soft blush */
	--c-cream: #fbf5ea;       /* cream */
	--c-champagne: #f7eddc;   /* pale champagne */
	--c-white: #fffdf9;       /* warm white */
	--c-rose: #f8e8e4;        /* soft rose */
	--c-footer: #f2e4ca;      /* champagne của footer site chính — điểm kết */

	--glow-rose: rgba(234, 190, 176, .34);
	--glow-gold: rgba(228, 196, 140, .30);

	/* Hạt texture rất mịn, nâu ấm, alpha ~4% */
	--hhl-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .24 0 0 0 0 .08 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	--hhl-card: rgba(255, 255, 255, .74);
	--hhl-card-line: rgba(184, 134, 11, .16);
	--hhl-card-shadow: 0 24px 60px -28px rgba(122, 78, 40, .28);
}

.hhl {
	background: var(--c-ivory);
}

/* ---- Khung chung của mỗi khối --------------------------------------- */

.hhl-flow {
	--from: var(--c-ivory);
	--to: var(--c-ivory);
	--b1: 14% 34%;
	--b2: 86% 66%;
	--g1: var(--glow-rose);
	--g2: var(--glow-gold);

	position: relative;
	isolation: isolate;
	overflow: clip;
	border: 0;
	background:
		var(--hhl-noise),
		radial-gradient(46% 30% at var(--b1), var(--g1), transparent 70%),
		radial-gradient(40% 28% at var(--b2), var(--g2), transparent 70%),
		linear-gradient(180deg, var(--from), var(--to));
	color: var(--hhl-ink);
}

/* Chuỗi màu: Ivory → Blush → Cream → Champagne → White → Rose → Ivory →
   Cream → Champagne → Blush → Ivory → Champagne của footer */
.hhl-flow--hero      { --from: var(--c-ivory);     --to: var(--c-blush);     --b1: 8% 40%;  --b2: 92% 62%; }
.hhl-flow--need      { --from: var(--c-blush);     --to: var(--c-cream);     --b1: 90% 36%; --b2: 10% 70%; --g1: var(--glow-gold); --g2: var(--glow-rose); }
.hhl-flow--register  { --from: var(--c-cream);     --to: var(--c-champagne); --b1: 12% 45%; --b2: 88% 60%; }
.hhl-flow--services  { --from: var(--c-champagne); --to: var(--c-white);     --b1: 85% 32%; --b2: 15% 68%; --g1: var(--glow-gold); }
.hhl-flow--results   { --from: var(--c-white);     --to: var(--c-rose);      --b1: 10% 38%; --b2: 90% 66%; }
.hhl-flow--feedback  { --from: var(--c-rose);      --to: var(--c-ivory);     --b1: 88% 34%; --b2: 12% 64%; --g2: var(--glow-rose); }
.hhl-flow--videos    { --from: var(--c-ivory);     --to: var(--c-ivory);     --b1: 50% 50%; --b2: 50% 50%; --g1: rgba(228, 196, 140, .22); --g2: transparent; }
.hhl-flow--process   { --from: var(--c-ivory);     --to: var(--c-cream);     --b1: 12% 40%; --b2: 88% 62%; }
.hhl-flow--facility  { --from: var(--c-cream);     --to: var(--c-champagne); --b1: 90% 38%; --b2: 8% 66%;  --g1: var(--glow-gold); --g2: var(--glow-rose); }
.hhl-flow--why       { --from: var(--c-champagne); --to: var(--c-blush);     --b1: 10% 36%; --b2: 90% 64%; }
.hhl-flow--faq       { --from: var(--c-blush);     --to: var(--c-ivory);     --b1: 86% 40%; --b2: 14% 62%; --g1: var(--glow-gold); }
.hhl-flow--final     { --from: var(--c-ivory);     --to: var(--c-footer);    --b1: 20% 42%; --b2: 82% 60%; --g2: var(--glow-rose); }

/* Banner tan dần vào nền ivory của khối mô tả — không có mép cắt ngang */
.hhl-banner {
	position: relative;
	background: var(--c-ivory);
}

.hhl-banner::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: clamp(40px, 7vw, 110px);
	background: linear-gradient(180deg, rgba(255, 250, 243, 0), var(--c-ivory));
	pointer-events: none;
}

/* ---- Hình trang trí: vòng cung vàng mảnh + lấp lánh nhỏ ------------- */
/* Nằm trọn trong khối (overflow: clip) và dưới nội dung (z-index: -1) */

.hhl-flow--hero::after,
.hhl-flow--need::after,
.hhl-flow--results::after,
.hhl-flow--why::after,
.hhl-flow--final::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	width: min(560px, 110vw);
	aspect-ratio: 1;
	border: 1px solid rgba(184, 134, 11, .14);
	border-radius: 50%;
	box-shadow: inset 0 0 0 18px rgba(255, 255, 255, .18), 0 0 0 42px rgba(184, 134, 11, .035);
	pointer-events: none;
	transform: translateY(-50%);
}

.hhl-flow--hero::after,
.hhl-flow--results::after,
.hhl-flow--final::after {
	right: max(-280px, -45vw);
}

.hhl-flow--need::after,
.hhl-flow--why::after {
	left: max(-300px, -50vw);
}

/* Lấp lánh 4 cánh — điểm xuyết ở hero và khối kêu gọi cuối */
.hhl-flow--hero::before,
.hhl-flow--final::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 26px;
	height: 26px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.2 5.8 11.4 12 12-6.2.6-11.4 5.8-12 12-.6-6.2-5.8-11.4-12-12C6.2 11.4 11.4 6.2 12 0z' fill='%23c9a24a' fill-opacity='.55'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}

.hhl-flow--hero::before {
	top: 18%;
	right: 7%;
}

.hhl-flow--final::before {
	top: 14%;
	left: 6%;
}

/* ---- Thẻ nội dung: trắng trong mờ, viền vàng rất nhạt, bóng mềm ------ */

.hhl-hero__offer,
.hhl-form,
.hhl-service,
.hhl-quote,
.hhl-faq details,
.hhl-results__item,
.hhl-shot,
.hhl-branch,
.hhl-stats div,
.hhl-facility__highlights div {
	border: 1px solid var(--hhl-card-line);
	background: var(--hhl-card);
	box-shadow: var(--hhl-card-shadow);
}

.hhl-hero__offer,
.hhl-form {
	border-top: 1px solid var(--hhl-card-line);
	background: rgba(255, 255, 255, .86);
}

/* Đường nhấn vàng mảnh phía trên khung giá / form — thay cho viền dày */
.hhl-hero__offer,
.hhl-form {
	position: relative;
}

.hhl-hero__offer::before,
.hhl-form::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 24px;
	right: 24px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--hhl-gold), transparent);
}

.hhl-facility__highlights div {
	border-left: 1px solid var(--hhl-card-line);
}

.hhl-countdown {
	border-top-color: var(--hhl-card-line);
}

.hhl-countdown__boxes span {
	border-color: var(--hhl-card-line);
	background: rgba(251, 245, 234, .7);
}

.hhl-need,
.hhl-need:last-child,
.hhl-need:nth-last-child(2):nth-child(odd) {
	border-color: rgba(184, 134, 11, .18);
}

.hhl-tabs__list {
	border-bottom-color: rgba(184, 134, 11, .18);
}

.hhl-vcard {
	border-color: var(--hhl-card-line);
	background: rgba(255, 250, 243, .8);
}

.hhl-field input,
.hhl-field select {
	border-color: rgba(184, 134, 11, .22);
	background-color: rgba(255, 255, 255, .9);
}

.hhl-btn--ghost {
	background: rgba(255, 255, 255, .55);
}

/* ---- Khối video & kêu gọi cuối: trước là nền đen, nay nền sáng ------- */

.hhl-flow--videos .hhl-title,
.hhl-flow--final .hhl-title {
	color: var(--hhl-gold-deep);
}

.hhl-flow--videos .hhl-lead,
.hhl-flow--final .hhl-lead,
.hhl-video figcaption {
	color: var(--hhl-muted);
}

.hhl-video__play {
	box-shadow: var(--hhl-card-shadow);
}

.hhl-final {
	background:
		var(--hhl-noise),
		radial-gradient(46% 30% at var(--b1), var(--g1), transparent 70%),
		radial-gradient(40% 28% at var(--b2), var(--g2), transparent 70%),
		linear-gradient(180deg, var(--from), var(--to));
}

.hhl-contact {
	color: var(--hhl-muted);
}

.hhl-final .hhl-contact a,
.hhl-final .hhl-contact span {
	color: var(--hhl-ink);
	font-weight: 600;
}

/* Không còn khoảng hở giữa khối cuối và footer — footer tiếp nối màu champagne */
.hhl-flow--final {
	padding-bottom: 72px;
}

/* ---- Ảnh chồng lớp ở khối cơ sở (desktop) --------------------------- */

@media (min-width: 992px) {
	.hhl-facility__photos {
		grid-template-columns: 1fr 1fr;
		gap: 0 18px;
	}

	/* Hai ảnh nhỏ nổi lên, đè nhẹ lên mép dưới ảnh lớn */
	.hhl-facility__photo:not(.hhl-facility__photo--main) {
		margin-top: -56px;
		border: 6px solid var(--c-white);
		box-shadow: 0 24px 50px -24px rgba(122, 78, 40, .45);
	}

	.hhl-facility__photo:nth-child(2) {
		margin-left: 28px;
	}

	.hhl-facility__photo:nth-child(3) {
		margin-right: 28px;
	}

	/* Ảnh form đăng ký hơi lệch khỏi khung, tạo chiều sâu */
	.hhl-register__img {
		box-shadow: 24px 24px 0 -8px rgba(234, 190, 176, .35), var(--hhl-card-shadow);
	}
}

/* ---- Thanh nút đáy & nhãn Trước/Sau theo tông soft luxury ----------- */

.hhl-bar {
	border-top: 1px solid rgba(184, 134, 11, .22);
	background: rgba(255, 250, 243, .92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 -12px 32px -12px rgba(122, 78, 40, .25);
}

.hhl-bar__item {
	color: var(--hhl-ink);
}

.hhl-bar__item .hhl-icon {
	color: var(--hhl-gold-deep);
}

.hhl-bar__item:not(.hhl-bar__item--main):hover {
	color: var(--hhl-gold-dark);
}

.hhl-ba__tag--before {
	background: rgba(59, 36, 24, .62);
	color: #fff8ee;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
/* Lý do "vì sao chọn": vạch vàng mảnh thay cho vạch dày */
.hhl-reasons li {
	border-left: 1px solid rgba(184, 134, 11, .45);
}
@media (min-width: 992px) {
	/* Ảnh nhỏ đè lên mép dưới ảnh lớn → chú thích ảnh lớn chuyển lên mép trên */
	.hhl-facility__photo--main figcaption {
		top: 0;
		bottom: auto;
		padding: 12px 14px 32px;
		background: linear-gradient(rgba(10, 10, 10, .6), transparent);
	}
}
/* ==========================================================================
   BO GÓC MỀM — nút tròn hẳn, ảnh/thẻ bo lớn, chi tiết nhỏ bo vừa
   ========================================================================== */

.hhl,
.hhl-bar {
	--hhl-radius: 18px;   /* mặc định: ảnh, thẻ */
	--r-sm: 10px;         /* nhãn, ô đếm ngược, ô nhập */
	--r-lg: 26px;         /* khung giá, form, thẻ dịch vụ */
	--r-pill: 999px;      /* nút */
}

/* Nút: viên thuốc mềm mại */
.hhl-btn,
.hhl-bar__item,
.hhl-facility__values li {
	border-radius: var(--r-pill);
}

.hhl-btn {
	padding-inline: 26px;
}

/* Khung lớn */
.hhl-hero__offer,
.hhl-form,
.hhl-service {
	border-radius: var(--r-lg);
}

/* Đường sáng vàng phía trên khung giá / form bám theo góc bo */
.hhl-hero__offer::before,
.hhl-form::before {
	left: var(--r-lg);
	right: var(--r-lg);
}

/* Ảnh & thẻ vừa: cắt ảnh theo góc bo */
.hhl-results__item,
.hhl-shot,
.hhl-ba,
.hhl-quote,
.hhl-faq details,
.hhl-branch,
.hhl-stats div,
.hhl-facility__photo,
.hhl-facility__highlights div,
.hhl-register__img,
.hhl-split__img,
.hhl-step__img,
.hhl-video__play,
.hhl-video iframe,
.hhl-modal__frame iframe,
.hhl-vcard,
.hhl-img--missing {
	overflow: hidden;
	border-radius: var(--hhl-radius);
}

.hhl-zoomable,
.hhl-results__img,
.hhl-shot__img,
.hhl-ba__img {
	border-radius: inherit;
}

.hhl-zoom__img {
	border-radius: 20px;
}

.hhl-vcard__thumb {
	border-radius: 12px;
}

/* Chi tiết nhỏ */
.hhl-countdown__boxes span,
.hhl-field input,
.hhl-field select,
.hhl-form__alert {
	border-radius: var(--r-sm);
}

.hhl-ba__tag {
	border-radius: var(--r-pill);
	padding: 3px 12px;
}

.hhl-checks li::before {
	border-radius: 50%;
}

.hhl-step__num {
	border-radius: 50%;
}

/* Thanh nút đáy điện thoại: nút bo tròn, chừa lề cho góc bo */
.hhl-bar {
	gap: 8px;
	padding-inline: 10px;
}

/* Ảnh nhỏ chồng lớp ở khối cơ sở: viền trắng bo theo */
@media (min-width: 992px) {
	.hhl-facility__photo:not(.hhl-facility__photo--main) {
		border-radius: 22px;
	}
}
/* ==========================================================================
   FORM NỔI BẬT — viền vàng chuyển sắc, quầng sáng, đầu form có giá +
   đếm ngược, icon trong ô, nút có vệt sáng lướt, dòng cam kết
   ========================================================================== */

.hhl-form {
	gap: 14px;
	padding: 24px 18px 20px;
	border: 1.5px solid transparent;
	background:
		linear-gradient(180deg, #fffdf9, #fff 40%) padding-box,
		linear-gradient(140deg, #f3d98f, #e9cfa8 30%, #f6e7c9 55%, #c99a2e 100%) border-box;
	box-shadow:
		0 0 0 6px rgba(255, 255, 255, .45),
		0 34px 80px -34px rgba(160, 110, 30, .55),
		0 10px 30px -18px rgba(234, 190, 176, .6);
}

/* Đường sáng vàng phía trên không cần nữa — viền đã là vàng */
.hhl-form::before {
	display: none;
}

/* ---- Đầu form ------------------------------------------------------- */

.hhl-form__head {
	display: grid;
	justify-items: center;
	gap: 6px;
	margin: -4px -2px 6px;
	padding: 0 0 16px;
	border-bottom: 1px dashed rgba(184, 134, 11, .28);
	text-align: center;
}

.hhl-form__eyebrow {
	padding: 4px 14px;
	border-radius: 999px;
	background: linear-gradient(135deg, #fbefd6, #f6e2e0);
	color: var(--hhl-gold-dark);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hhl-form__title {
	font-family: var(--hhl-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--hhl-ink);
}

.hhl-form__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 2px 10px;
	color: var(--hhl-muted);
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.hhl-form__price strong {
	font-family: var(--hhl-font-number);
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	color: var(--hhl-gold-deep);
}

.hhl-form__price s {
	letter-spacing: 0;
	text-transform: none;
	color: #a8977a;
}

/* Đếm ngược thu gọn: một hàng chữ số nhỏ */
.hhl-countdown--mini {
	margin-top: 4px;
	padding: 0;
	border: 0;
}

.hhl-countdown--mini .hhl-countdown__label {
	font-size: .6875rem;
	text-align: center;
}

.hhl-countdown--mini .hhl-countdown__boxes {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 6px;
}

.hhl-countdown--mini .hhl-countdown__boxes span {
	display: flex;
	align-items: baseline;
	gap: 3px;
	padding: 5px 10px;
	border: 1px solid rgba(184, 134, 11, .2);
	border-radius: 999px;
	background: #fff8ec;
	font-size: .6875rem;
	text-transform: none;
	letter-spacing: 0;
}

.hhl-countdown--mini .hhl-countdown__boxes b {
	font-size: 1.125rem;
	line-height: 1;
}

/* ---- Ô nhập có icon ------------------------------------------------- */

.hhl-field label {
	color: var(--hhl-ink);
	font-size: .875rem;
}

.hhl-field input,
.hhl-field select {
	min-height: 54px;
	padding-left: 46px;
	border: 1px solid rgba(184, 134, 11, .24);
	background-color: #fffdf9;
	background-repeat: no-repeat;
	background-position: 16px center;
	background-size: 20px;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.hhl-field--name input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8860b' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E");
}

.hhl-field--phone input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8860b' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}

/* Ô chọn: icon trái + mũi tên phải */
.hhl-field--offer select,
.hhl-field--city select {
	background-position: 16px center, right 16px center;
	background-size: 20px, 18px;
}

.hhl-field--offer select {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8860b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11h16v9H4zM3 7h18v4H3zM12 7v13M12 7C10.5 4 7 4 7 6.5S12 7 12 7zM12 7c1.5-3 5-3 5-.5S12 7 12 7z'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5e0a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.hhl-field--city select {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8860b' stroke-width='1.8'%3E%3Cpath d='M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5e0a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Đang nhập: nền trắng, viền vàng, quầng sáng hồng champagne */
.hhl-field input:focus,
.hhl-field select:focus {
	border-color: var(--hhl-gold);
	background-color: #fff;
	box-shadow: 0 0 0 4px rgba(212, 160, 23, .16), 0 8px 20px -10px rgba(184, 134, 11, .45);
}

/* ---- Nút gửi: vệt sáng lướt qua mỗi vài giây ------------------------- */

.hhl-btn--shine {
	position: relative;
	overflow: hidden;
	min-height: 56px;
	font-size: 1rem;
	box-shadow: 0 14px 30px -14px rgba(184, 134, 11, .7);
}

.hhl-btn--shine::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: skewX(-20deg);
	animation: hhlShine 3.6s ease-in-out infinite;
	pointer-events: none;
}

@keyframes hhlShine {
	0%, 55% { left: -60%; }
	85%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
	.hhl-btn--shine::after {
		animation: none;
		display: none;
	}
}

/* ---- Dòng cam kết dưới nút ------------------------------------------ */

.hhl-form__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 14px;
	color: var(--hhl-ink);
	font-size: .8125rem;
	font-weight: 500;
}

.hhl-form__trust li {
	display: flex;
	align-items: center;
	gap: 5px;
}

.hhl-form__trust li::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 10px no-repeat,
		linear-gradient(135deg, #e2b93a, var(--hhl-gold-deep));
}

.hhl-form__privacy {
	margin-top: -4px;
	font-size: .75rem;
}

@media (min-width: 768px) {
	.hhl-form {
		padding: 32px 32px 26px;
	}

	.hhl-form__title {
		font-size: 1.375rem;
	}
}
/* ==========================================================================
   QUY TRÌNH — điện thoại: thẻ ảnh lớn (ảnh trên, chữ dưới), vuốt ngang
   ========================================================================== */

@media (max-width: 767px) {
	.hhl-steps.hhl-scroller {
		grid-auto-columns: 80%;
		gap: 14px;
	}

	.hhl-step {
		grid-template-columns: 1fr;
		align-content: start;
		gap: 0;
		overflow: hidden;
		border: 1px solid var(--hhl-card-line);
		border-radius: var(--hhl-radius);
		background: var(--hhl-card);
		box-shadow: var(--hhl-card-shadow);
	}

	.hhl-step:not(:last-child)::after {
		display: none;
	}

	.hhl-step__img {
		width: 100%;
		aspect-ratio: 4 / 3;
		border-radius: 0;
		box-shadow: none;
	}

	.hhl-step__num {
		top: 12px;
		left: 12px;
		width: 36px;
		height: 36px;
		font-size: 1.25rem;
		border-color: rgba(255, 255, 255, .85);
	}

	.hhl-step__body {
		padding: 14px 16px 18px;
	}

	.hhl-step h3 {
		font-size: 1.25rem;
	}
}

/* Desktop: ảnh bước lớn hơn, khung 4:5 cho cảm giác tạp chí */
@media (min-width: 768px) {
	.hhl-step__img {
		aspect-ratio: 4 / 5;
	}
}