/* ==========================================================================
   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 ------------------------------------------- */
/* Thẻ ảnh minh hoạ + tiêu đề ngắn. Điện thoại 2 cột, máy tính 4 cột. */

.hhl-pains {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.hhl-pain {
	overflow: hidden;
	border-radius: var(--hhl-radius);
	background: rgba(255, 255, 255, .8);
	box-shadow: 0 14px 30px -20px rgba(122, 78, 40, .45);
}

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

.hhl-pain .hhl-img--missing {
	border-radius: 0;
}

.hhl-pain__title {
	padding: 10px 12px 14px;
	font-size: .9375rem;
	line-height: 1.35;
	text-align: center;
}

@media (min-width: 768px) {
	.hhl-pains {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}

	.hhl-pain__title {
		padding: 14px 16px 18px;
		font-size: 1.0625rem;
	}
}

/* ---- Ả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ụ: thẻ hiện sẵn tất cả — ảnh trước/sau + giá + video ---
   Điện thoại 1 cột, tablet 2 cột, desktop 4 cột. Nút "Nhận ưu đãi" luôn
   nằm đáy thẻ để các thẻ thẳng hàng dù mô tả dài ngắn khác nhau. */

.hhl-services {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* không để ảnh/chữ dài đẩy thẻ rộng quá màn hình */
	gap: 20px;
}

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

.hhl-service__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: 0 4px 4px;
}

.hhl-service__tag {
	align-self: flex-start;
	margin-bottom: 10px;
	padding: 5px 14px;
	border-radius: 999px;
	background: rgba(212, 160, 23, .14);
	color: var(--hhl-gold-deep);
	font-family: var(--hhl-font-display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hhl-service__cta {
	margin-top: auto;
}

.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.5rem;
	line-height: 1.25;
}

/* Giá trên thẻ dịch vụ: to hơn giá phụ thường để nổi bật */
.hhl-service .hhl-price--sm .hhl-price__now {
	font-size: 2.25rem;
}

.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 --------------------------------------------------- */
/* Ảnh tròn viền vàng đè lên mép trái thẻ bo tròn. Điện thoại 1 cột,
   màn rộng 2 cột; số bước lẻ thì bước cuối nằm giữa hàng. */

.hhl-proc {
	display: grid;
	gap: 16px;
	max-width: 980px;
	margin-inline: auto;
}

.hhl-proc__item {
	position: relative;
	display: flex;
	align-items: center;
}

.hhl-proc__media {
	position: relative;
	z-index: 1;
	flex: none;
}

.hhl-proc .hhl-proc__img {
	width: 84px;
	height: 84px;
	aspect-ratio: 1;
	border: 3px solid #fff;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px #d4a017, 0 10px 22px -10px rgba(122, 78, 40, .55);
}

.hhl-proc__body {
	flex: 1;
	min-width: 0;
	margin-left: -34px;
	padding: 12px 18px 12px 46px;
	border-radius: 26px;
	background: rgba(255, 255, 255, .78);
	box-shadow: 0 14px 30px -20px rgba(122, 78, 40, .45);
}

/* Lấp lánh nhỏ góc phải thẻ */
.hhl-proc__body::after {
	content: "✦";
	position: absolute;
	top: -6px;
	right: 14px;
	color: #d4a017;
	font-size: .875rem;
	line-height: 1;
}

.hhl-proc__num {
	display: block;
	color: var(--hhl-gold-deep);
	font-family: var(--hhl-font-number);
	font-size: 1.25rem;
	font-style: italic;
	line-height: 1.2;
}

.hhl-proc__title {
	margin-top: 2px;
	font-size: 1.0625rem;
	line-height: 1.3;
}

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

@media (min-width: 768px) {
	.hhl-proc {
		grid-template-columns: 1fr 1fr;
		gap: 24px 40px;
	}

	.hhl-proc__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 20px);
	}

	.hhl-proc .hhl-proc__img {
		width: 104px;
		height: 104px;
	}

	.hhl-proc__body {
		margin-left: -42px;
		padding: 14px 22px 14px 56px;
		border-radius: 999px;
	}

	.hhl-proc__num {
		font-size: 1.375rem;
	}
}


/* ---- 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;
}

/* Khối cuối: không còn form (trang chỉ có 1 form ở trên) — căn giữa,
   thông tin liên hệ 2 cột + một dòng nút về form */
.hhl-final__box {
	max-width: 760px;
	text-align: center;
}

.hhl-final .hhl-contact {
	margin: 24px auto 28px;
	text-align: left;
}

@media (min-width: 768px) {
	.hhl-final .hhl-contact {
		grid-template-columns: 1fr 1fr;
		column-gap: 32px;
	}
}

/* ---- 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%;
	}

	.hhl-services {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Dịch vụ trên màn rộng: lưới 2 × 2, mỗi thẻ nằm ngang (ảnh trái, thông
   tin phải) — cả khối thấp, gọn trong một màn hình mà ảnh và giá vẫn to */
@media (min-width: 1024px) {
	.hhl-services {
		gap: 24px;
	}

	.hhl-service {
		flex-direction: row;
		align-items: center;
		gap: 20px;
		padding: 14px;
	}

	.hhl-service__photo {
		flex: 0 0 50%;
	}

	.hhl-service__body {
		align-self: stretch;
		justify-content: center;
		padding: 4px 6px 4px 0;
	}

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

	.hhl-service .hhl-price {
		margin: 6px 0 10px;
	}

	.hhl-service .hhl-price--sm .hhl-price__now {
		font-size: 2.25rem;
	}

	/* Video: thu thành một dòng nhỏ — ảnh bìa tí hon + tiêu đề tối đa 2 dòng */
	.hhl-service .hhl-vcard {
		grid-template-columns: 64px 1fr;
		gap: 10px;
		margin-bottom: 12px;
		padding: 6px;
	}

	.hhl-service .hhl-vcard__play {
		width: 24px;
		height: 24px;
	}

	.hhl-service .hhl-vcard__play .hhl-icon {
		width: 12px;
		height: 12px;
	}

	.hhl-service .hhl-vcard__title {
		display: -webkit-box;
		overflow: hidden;
		font-size: .8125rem;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.hhl-service__cta {
		margin-top: 0;
		padding-inline: 14px;
		white-space: nowrap;
	}
}

@media (min-width: 1280px) {
	.hhl-service__name {
		font-size: 1.625rem;
	}
}

/* ---- 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;
	}

	/* 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-results__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}

	/* Feedback: flex xuống dòng + căn giữa, mỗi ảnh rộng 1/--fb-cols hàng */
	.hhl-shots.hhl-scroller {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}

	.hhl-shots .hhl-shot {
		flex: 0 0 calc((100% - (var(--fb-cols, 4) - 1) * 20px) / var(--fb-cols, 4));
	}

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

/* 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;
	}
}
/* ==========================================================================
   POPUP ĐĂNG KÝ — máy tính: hộp giữa màn hình (ảnh trái, form phải);
   điện thoại: tấm trượt từ đáy lên, không ảnh để form gọn
   ========================================================================== */

.hhl-popup {
	width: 100%;
	max-width: 100%;
	max-height: 92vh;
	margin: auto auto 0;
	padding: 0;
	overflow: auto;
	overscroll-behavior: contain;
	border: 0;
	border-radius: 26px 26px 0 0;
	background:
		var(--hhl-noise),
		radial-gradient(60% 40% at 90% 10%, var(--glow-rose), transparent 70%),
		linear-gradient(180deg, var(--c-ivory), var(--c-blush));
	color: var(--hhl-ink);
	box-shadow: 0 -20px 60px -20px rgba(59, 36, 24, .45);
}

.hhl-popup[open] {
	animation: hhlSheetUp .35s cubic-bezier(.2, .8, .2, 1);
}

.hhl-popup::backdrop {
	background: rgba(59, 36, 24, .5);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

@keyframes hhlSheetUp {
	from { transform: translateY(40px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@keyframes hhlPopIn {
	from { transform: translateY(16px) scale(.98); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.hhl-popup__close {
	position: sticky;
	top: 10px;
	z-index: 2;
	float: right;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 10px 10px -50px 0;
	border: 1px solid var(--hhl-card-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--hhl-ink);
	font-size: 1.625rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 16px -8px rgba(59, 36, 24, .4);
}

.hhl-popup__media {
	display: none;
}

.hhl-popup__body {
	padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
}

/* Form trong popup: bỏ vòng sáng ngoài (popup đã là khung) */
.hhl-popup .hhl-form {
	box-shadow: 0 20px 50px -30px rgba(160, 110, 30, .5);
}

.hhl-popup__alt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 10px;
	margin-top: 14px;
	color: var(--hhl-muted);
	font-size: .8125rem;
}

.hhl-popup__alt span {
	flex-basis: 100%;
	text-align: center;
}

.hhl-popup__alt .hhl-btn {
	flex: 1 1 0;
	min-height: 46px;
	max-width: 200px;
	padding-inline: 14px;
	font-size: .875rem;
}

@media (min-width: 768px) {
	.hhl-popup {
		width: min(940px, 94vw);
		max-height: 90vh;
		margin: auto;
		border-radius: 28px;
		box-shadow: 0 40px 100px -30px rgba(59, 36, 24, .55);
	}

	.hhl-popup[open] {
		animation-name: hhlPopIn;
	}

	.hhl-popup__inner--media {
		display: grid;
		grid-template-columns: 42% 1fr;
		align-items: stretch;
	}

	.hhl-popup__media {
		display: block;
		position: relative;
	}

	/* Ảnh phủ kín cột trái dù popup cao bao nhiêu (thắng rule chung .hhl img) */
	.hhl-popup .hhl-popup__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 20%;
		border-radius: 0;
	}

	.hhl-popup__body {
		padding: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hhl-popup[open] {
		animation: none;
	}
}
/* ==========================================================================
   KHÔNG VIỀN, KHÔNG ĐƯỜNG KẺ — chỉ đổ bóng mềm cho liền mạch
   (khối cuối file: ghi đè mọi viền/đường kẻ ở các khối phía trên)
   ========================================================================== */

.hhl,
.hhl-bar {
	--sh-soft: 0 12px 34px -18px rgba(122, 78, 40, .28);
	--sh-card: 0 22px 50px -28px rgba(122, 78, 40, .34);
	--sh-btn: 0 12px 26px -12px rgba(184, 134, 11, .7);
	--sh-btn-hover: 0 16px 32px -12px rgba(184, 134, 11, .8);
	--sh-ghost: 0 10px 24px -14px rgba(122, 78, 40, .45);
}

/* ---- Nút: bỏ viền, nổi bằng bóng ------------------------------------ */

.hhl-btn {
	border: 0;
	box-shadow: var(--sh-btn);
	transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease, color .2s ease, filter .2s ease;
}

.hhl-btn:hover {
	box-shadow: var(--sh-btn-hover);
	transform: translateY(-1px);
}

.hhl-btn--ghost,
.hhl-section--dark .hhl-btn--ghost {
	border: 0;
	background: rgba(255, 255, 255, .88);
	color: var(--hhl-gold-dark);
	box-shadow: var(--sh-ghost);
}

.hhl-btn--ghost:hover {
	background: #fff;
	color: var(--hhl-gold-deep);
	box-shadow: 0 14px 28px -14px rgba(122, 78, 40, .55);
}

.hhl-bar {
	border-top: 0;
}

.hhl-bar__item--main {
	box-shadow: var(--sh-btn);
}

/* ---- Thẻ & khung: bỏ viền, giữ 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,
.hhl-vcard {
	border: 0;
	box-shadow: var(--sh-card);
}

.hhl-form {
	background: #fff;
	box-shadow: 0 0 0 6px rgba(255, 255, 255, .5), 0 34px 80px -34px rgba(160, 110, 30, .5);
}

.hhl-popup .hhl-form {
	box-shadow: 0 24px 60px -30px rgba(160, 110, 30, .45);
}

/* Đường sáng vàng phía trên khung giá / form */
.hhl-hero__offer::before,
.hhl-form::before {
	display: none;
}

/* Ảnh cạnh form, ảnh cơ sở: bỏ khung trắng, chỉ đổ bóng */
.hhl-register__img {
	box-shadow: var(--sh-card);
}

.hhl-facility__photo,
.hhl-facility__photo:not(.hhl-facility__photo--main) {
	border: 0;
	box-shadow: var(--sh-card);
}

.hhl-facility__values li {
	border: 0;
	box-shadow: var(--sh-soft);
}

/* ---- Đường kẻ trong nội dung ---------------------------------------- */

/* Đếm ngược trong khung giá: bỏ vạch phía trên */
.hhl-countdown {
	padding-top: 4px;
	border-top: 0;
}

.hhl-countdown__boxes span,
.hhl-countdown--mini .hhl-countdown__boxes span {
	border: 0;
	background: #fff8ee;
	box-shadow: 0 6px 16px -10px rgba(122, 78, 40, .4);
}

/* Đầu form: bỏ nét đứt, dùng khoảng trắng */
.hhl-form__head {
	padding-bottom: 8px;
	border-bottom: 0;
}

/* "Vì sao chọn": bỏ vạch trái */
.hhl-reasons li {
	padding: 14px 16px;
	border-left: 0;
	border-radius: var(--hhl-radius);
	background: rgba(255, 255, 255, .65);
	box-shadow: var(--sh-soft);
}

/* Dấu tích quyền lợi: bỏ viền, nền vàng nhạt */
.hhl-checks li::before {
	border: 0;
	box-shadow: 0 4px 10px -4px rgba(184, 134, 11, .5);
}

/* ---- Ô nhập: bỏ viền, nền trắng + bóng; đang nhập có quầng vàng ------ */

.hhl-field input,
.hhl-field select {
	border: 0;
	background-color: #fffaf3;
	box-shadow: 0 4px 14px -8px rgba(122, 78, 40, .35), inset 0 1px 2px rgba(122, 78, 40, .06);
}

.hhl-field input:focus,
.hhl-field select:focus {
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(212, 160, 23, .22), 0 10px 22px -10px rgba(184, 134, 11, .5);
}

.hhl-field [aria-invalid="true"] {
	box-shadow: 0 0 0 2px rgba(179, 38, 30, .45);
}

/* ---- Trang trí: bỏ vòng cung (là đường kẻ), giữ lấp lánh ------------- */

.hhl-flow--hero::after,
.hhl-flow--need::after,
.hhl-flow--results::after,
.hhl-flow--why::after,
.hhl-flow--final::after {
	display: none;
}

/* Nút đóng popup */
.hhl-popup__close {
	border: 0;
	box-shadow: var(--sh-ghost);
}
/* Bóng của form bị cắt thẳng ở mép dưới khối (overflow: clip) → nới khoảng
   dưới + rút ngắn bóng để bóng tan hết trước mép, không thành đường ngang */
.hhl-flow--register,
.hhl-flow--final {
	padding-bottom: 88px;
}

.hhl-flow--hero {
	padding-bottom: 64px;
}

.hhl-form {
	box-shadow: 0 0 0 6px rgba(255, 255, 255, .5), 0 26px 56px -30px rgba(160, 110, 30, .5);
}

@media (min-width: 768px) {
	.hhl-flow--register,
	.hhl-flow--final {
		padding-bottom: 110px;
	}

	.hhl-flow--hero {
		padding-bottom: 88px;
	}
}
/* Khoảng trắng giữa khối cuối và footer (điện thoại): phần trên của footer
   site chính trong suốt, lộ nền trắng của trang; khoảng chừa cho thanh nút
   đáy cũng vậy → phủ màu champagne của footer, chỉ trên landing */
body.hhl-page,
body.hhl-page #brx-footer {
	background-color: #f2e4ca;
}

/* ---- Thanh liên hệ nổi dọc (Hotline / Tư vấn / Zalo) ------------------
   Chỉ màn >= 768px; điện thoại dùng thanh nút đáy .hhl-bar */

.hhl-float {
	display: none;
}

@media (min-width: 768px) {
	.hhl-float {
		position: fixed;
		top: 50%;
		right: 16px;
		z-index: 90;
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 12px 6px;
		border-radius: 999px;
		/* Nằm ngoài .hhl nên không dùng được biến --hhl-*: ghi thẳng mã màu */
		background: linear-gradient(180deg, #e2b93a, #d4a017 45%, #b8860b);
		box-shadow: 0 16px 34px -14px rgba(122, 78, 40, .6), 0 0 0 3px rgba(255, 255, 255, .6);
		transform: translateY(-50%);
	}

	.hhl-float__item {
		display: flex;
		font-family: Roboto, system-ui, sans-serif;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		width: 64px;
		padding: 8px 0;
		border-radius: 999px;
		color: #2b1a02;
		font-size: .6875rem;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
		transition: background-color .2s, transform .2s;
	}

	.hhl-float__item:hover {
		background: rgba(255, 255, 255, .28);
		transform: scale(1.06);
	}

	.hhl-float__item:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

	.hhl-float__item .hhl-icon {
		width: 24px;
		height: 24px;
	}

	/* Logo chữ Zalo: nhãn trắng chữ xanh, cùng cỡ với icon */
	.hhl-float__zalo {
		display: grid;
		place-items: center;
		width: 30px;
		height: 24px;
		border-radius: 7px;
		background: #fff;
		color: #0068ff;
		font-size: .5625rem;
		font-weight: 800;
		letter-spacing: -.01em;
	}
}

/* ==========================================================================
   FEEDBACK 10/2026 — banner chữ, nút nhấp nháy, dáng mặt, top dịch vụ,
   khối khách hàng thật, sơ đồ quy trình, popup 20/10, WhatsApp
   (ưu tiên điện thoại — các khối đều thiết kế cho màn 360–430px trước)
   ========================================================================== */

/* ---- Nút kêu gọi: vòng sáng lan ra + nhịp "thở" để mắt dừng lại ------- */

.hhl-btn--pulse {
	position: relative;
	isolation: isolate;
	animation: hhlBreath 2.4s ease-in-out infinite;
}

.hhl-btn--pulse::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(212, 160, 23, .55);
	animation: hhlRing 2.4s ease-out infinite;
	pointer-events: none;
}

@keyframes hhlBreath {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.035); }
}

@keyframes hhlRing {
	0% { box-shadow: 0 0 0 0 rgba(212, 160, 23, .55); }
	70%, 100% { box-shadow: 0 0 0 14px rgba(212, 160, 23, 0); }
}

/* Thanh đáy: nút chính chớp sáng nhẹ thay vì phóng to (thanh đã chật) */
.hhl-bar__item--main.hhl-btn--pulse {
	animation: hhlGlow 2.4s ease-in-out infinite;
}

@keyframes hhlGlow {
	0%, 100% { filter: brightness(1); }
	50% { filter: brightness(1.14); }
}

/* ---- Hiện dần khi cuộn tới (JS thêm .hhl-anim, rồi .is-in cho từng thẻ) */

.hhl-anim .hhl-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
	transition-delay: calc(var(--i, 0) * 90ms);
}

.hhl-anim .hhl-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   Banner chữ: slogan 3–4 chữ hiện dần từng từ, ánh vàng lướt qua chữ
   ========================================================================== */

.hhl-flow--banner {
	--from: var(--c-champagne);
	--to: var(--c-ivory);
	--b1: 80% 30%;
	--b2: 12% 70%;
	--g1: rgba(228, 196, 140, .45);
	--g2: var(--glow-rose);
}

.hhl-hb {
	padding: 26px 0 30px;
}

.hhl-hb__grid {
	display: grid;
	gap: 22px;
	align-items: center;
}

.hhl-hb__text {
	text-align: center;
}

.hhl-hb__eyebrow {
	display: inline-block;
	margin-bottom: 10px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .78);
	box-shadow: 0 8px 20px -14px rgba(122, 78, 40, .5);
	color: var(--hhl-gold-dark);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hhl-hb__slogan {
	margin: 0;
	font-family: var(--hhl-font-display);
	font-size: clamp(2.5rem, 12.5vw, 4.75rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.01em;
	text-transform: uppercase;
}

/* Từng từ trồi lên lần lượt, rồi cả dòng có ánh vàng lướt qua mỗi vài giây */
.hhl-hb__slogan span {
	display: inline-block;
	/* Chừa chỗ cho dấu tiếng Việt chồng trên chữ in hoa (Ồ, Ữ, Ạ...) —
	   chữ tô bằng background-clip nên phần dấu ngoài khung span sẽ mất */
	padding: .22em .02em .04em;
	margin-top: -.22em;
	background: linear-gradient(100deg, #8b5e0a 0%, #b8860b 30%, #f5e06a 46%, #b8860b 62%, #6e4a08 100%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: 0;
	transform: translateY(.4em);
	animation:
		hhlWordUp .7s cubic-bezier(.2, .8, .2, 1) forwards,
		hhlGoldSweep 5s ease-in-out 1.4s infinite;
	animation-delay: calc(var(--i) * 140ms + 100ms), 1.4s;
}

@keyframes hhlWordUp {
	to { opacity: 1; transform: none; }
}

@keyframes hhlGoldSweep {
	0%, 40% { background-position: 100% 0; }
	75%, 100% { background-position: 0 0; }
}

.hhl-hb__tagline {
	max-width: 34em;
	margin: 12px auto 0;
	color: var(--hhl-ink);
	font-size: 1rem;
	line-height: 1.55;
}

.hhl-hb__tagline strong {
	color: var(--hhl-gold-dark);
}

.hhl-hb__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.hhl-hb__badges li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 11px 5px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .82);
	color: var(--hhl-ink);
	font-size: .8125rem;
	font-weight: 600;
	box-shadow: 0 8px 18px -14px rgba(122, 78, 40, .55);
}

.hhl-hb__badges .hhl-icon {
	width: 16px;
	height: 16px;
	color: var(--hhl-gold-deep);
}

.hhl-hb__cta {
	margin-top: 18px;
	min-width: min(100%, 300px);
}

.hhl-hb__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 22px;
	box-shadow: 0 28px 60px -30px rgba(122, 78, 40, .6);
}

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

.hhl-hb__note {
	position: absolute;
	right: 12px;
	bottom: 12px;
	left: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .9);
	color: var(--hhl-ink);
	font-size: .8125rem;
	font-weight: 700;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.hhl-hb__note .hhl-icon {
	width: 16px;
	height: 16px;
	color: var(--hhl-gold);
}

@media (min-width: 900px) {
	.hhl-hb {
		padding: 56px 0;
	}

	.hhl-hb__grid {
		grid-template-columns: 1.1fr .9fr;
		gap: 48px;
	}

	.hhl-hb__text {
		text-align: left;
	}

	.hhl-hb__tagline {
		margin-left: 0;
		font-size: 1.125rem;
	}

	.hhl-hb__badges {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   Thẻ lý do: 5 thẻ, số thứ tự, giải thích + mẹo
   ========================================================================== */

.hhl-pain__media {
	position: relative;
}

.hhl-pain__num {
	position: absolute;
	top: 8px;
	left: 8px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient(135deg, #e2b93a, var(--hhl-gold-deep));
	color: #fff;
	font-family: var(--hhl-font-number);
	font-size: .9375rem;
	box-shadow: 0 6px 14px -6px rgba(122, 78, 40, .7);
}

/* Số thẻ lẻ trên điện thoại (2 cột): thẻ cuối nằm giữa */
.hhl-pains:not(.hhl-pains--detail) > .hhl-pain:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	justify-self: center;
	width: calc(50% - 6px);
}

/* Có giải thích: điện thoại 1 cột, ảnh trái – chữ phải */
.hhl-pains--detail {
	grid-template-columns: 1fr;
}

.hhl-pains--detail .hhl-pain {
	display: grid;
	grid-template-columns: 38% 1fr;
	align-items: stretch;
}

.hhl-pains--detail .hhl-pain__img {
	height: 100%;
	aspect-ratio: auto;
	min-height: 120px;
}

.hhl-pains--detail .hhl-pain__body {
	padding: 12px 14px 14px;
}

.hhl-pains--detail .hhl-pain__title {
	padding: 0;
	text-align: left;
}

.hhl-pain__desc {
	margin: 6px 0 0;
	color: var(--hhl-muted);
	font-size: .875rem;
	line-height: 1.5;
}

.hhl-pain__tip {
	display: flex;
	gap: 6px;
	margin: 10px 0 0;
	padding: 8px 10px;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(247, 238, 213, .95), rgba(255, 255, 255, .9));
	color: var(--hhl-ink);
	font-size: .8125rem;
	line-height: 1.45;
}

.hhl-pain__tip .hhl-icon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	color: var(--hhl-gold-deep);
	animation: hhlGlow 2.4s ease-in-out infinite;
}

.hhl-pain__tip b {
	color: var(--hhl-gold-dark);
}

.hhl-why-need .hhl-cta-row,
.hhl-causes .hhl-cta-row {
	margin-top: 22px;
}

@media (min-width: 768px) {
	.hhl-pains:has(> .hhl-pain:nth-child(5):last-child) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.hhl-pains:not(.hhl-pains--detail) > .hhl-pain:last-child:nth-child(odd) {
		grid-column: auto;
		width: auto;
	}

	.hhl-pains--detail {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.hhl-pains--detail {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.hhl-pains--detail .hhl-pain {
		display: block;
	}

	.hhl-pains--detail .hhl-pain__img {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   Chọn dáng mày hợp khuôn mặt: hình vẽ SVG, nét mày "vẽ" ra khi cuộn tới
   ========================================================================== */

.hhl-flow--faces {
	--from: var(--c-cream);
	--to: var(--c-champagne);
	--b1: 88% 30%;
	--b2: 10% 72%;
	--g1: var(--glow-gold);
	--g2: var(--glow-rose);
}

.hhl-faces__list {
	grid-auto-columns: 62%;
	margin-top: 0;
	margin-bottom: 0;
	list-style: none;
}

.hhl-facecard {
	padding: 16px 14px 18px;
	border-radius: 22px;
	background: rgba(255, 255, 255, .8);
	box-shadow: 0 18px 40px -26px rgba(122, 78, 40, .5);
	text-align: center;
}

.hhl-facecard__art {
	width: 112px;
	margin: 0 auto 8px;
}

.hhl-face {
	display: block;
	width: 100%;
	height: auto;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hhl-face__outline {
	fill: #fdf6ea;
	stroke: rgba(184, 134, 11, .55);
	stroke-width: 2;
}

.hhl-face__eyes path {
	fill: #5a3a05;
	stroke: none;
	opacity: .75;
}

.hhl-face__line {
	stroke: rgba(122, 78, 40, .35);
	stroke-width: 1.6;
}

.hhl-face__brows path {
	stroke: #6e4a08;
	stroke-width: 3.4;
	stroke-dasharray: 40;
	stroke-dashoffset: 0;
}

/* Nét mày được "vẽ" ra khi thẻ hiện */
.hhl-anim .hhl-facecard .hhl-face__brows path {
	stroke-dashoffset: 40;
	transition: stroke-dashoffset 1s ease .3s;
}

.hhl-anim .hhl-facecard.is-in .hhl-face__brows path {
	stroke-dashoffset: 0;
}

.hhl-facecard__face {
	margin: 0;
	color: var(--hhl-muted);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hhl-facecard__brow {
	margin: 4px 0 6px;
	color: var(--hhl-gold-deep);
	font-size: 1.125rem;
	line-height: 1.3;
}

.hhl-facecard__desc {
	margin: 0;
	color: var(--hhl-ink);
	font-size: .875rem;
	line-height: 1.5;
}

.hhl-faces__foot {
	display: grid;
	justify-items: center;
	gap: 14px;
	margin-top: 10px;
}

.hhl-faces__foot .hhl-vcard {
	width: min(100%, 460px);
}

.hhl-faces__note {
	display: flex;
	gap: 8px;
	max-width: 36em;
	margin: 0;
	color: var(--hhl-ink);
	font-size: .9375rem;
	line-height: 1.5;
	text-align: left;
}

.hhl-faces__note .hhl-icon {
	flex: 0 0 20px;
	color: var(--hhl-gold-deep);
}

@media (min-width: 768px) {
	.hhl-faces__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 16px;
	}
}

/* ==========================================================================
   Top dịch vụ: dải chương trình nổi bật, nhãn Top, ghi chú giá
   ========================================================================== */

.hhl .hhl-promo-strip {
	color: #fff8e6;
}

.hhl-promo-strip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	padding: 14px 16px;
	overflow: hidden;
	border-radius: 20px;
	background: linear-gradient(120deg, #3b2418, #6e4a08 55%, #b8860b);
	color: #fff8e6;
	text-decoration: none;
	box-shadow: 0 20px 40px -24px rgba(59, 36, 24, .8);
}

/* Vệt sáng lướt qua dải */
.hhl-promo-strip::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
	transform: skewX(-20deg);
	animation: hhlShine 4.2s ease-in-out infinite;
	pointer-events: none;
}

.hhl-promo-strip__icon {
	display: grid;
	flex: 0 0 44px;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #f5e06a;
	animation: hhlBreath 2.4s ease-in-out infinite;
}

.hhl-promo-strip__text {
	display: grid;
	gap: 2px;
	flex: 1;
	line-height: 1.35;
}

.hhl-promo-strip__text small {
	color: #f5e06a;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.hhl-promo-strip__text strong {
	color: #fff8e6; /* theme Bricks tô màu cho mọi <strong> — ghi đè */
	font-family: var(--hhl-font-display);
	font-size: 1.0625rem;
	text-transform: uppercase;
}

.hhl-promo-strip__text span {
	color: rgba(255, 248, 230, .82);
	font-size: .8125rem;
}

.hhl-promo-strip__go {
	font-size: 1.375rem;
}

.hhl-service__rank {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 1;
	padding: 4px 12px;
	border-radius: 999px;
	background: linear-gradient(135deg, #3b2418, #6e4a08);
	color: #f5e06a;
	font-family: var(--hhl-font-display);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6);
}

.hhl-price__note {
	flex-basis: 100%;
	color: var(--hhl-muted);
	font-size: .8125rem;
}

/* ==========================================================================
   Form: 3 bước nhận ưu đãi
   ========================================================================== */

.hhl-steps {
	display: grid;
	gap: 8px;
	margin: 14px 0 16px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.hhl-steps li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--hhl-ink);
	font-size: .9375rem;
	font-weight: 600;
}

.hhl-steps b {
	display: grid;
	flex: 0 0 30px;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(135deg, #e2b93a, var(--hhl-gold-deep));
	color: #fff;
	font-family: var(--hhl-font-number);
	font-weight: 400;
}

/* ==========================================================================
   Khách hàng thật: trước – sau có nhãn nỗi lo / kết quả, lời khách, video
   ========================================================================== */

.hhl-proof__rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	color: var(--hhl-ink);
	font-weight: 600;
}

.hhl-proof__sub {
	margin: 30px 0 12px;
	color: var(--hhl-gold-deep);
	font-size: 1.125rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.hhl-proof__sub:first-of-type {
	margin-top: 0;
}

.hhl-proof .hhl-cta-row {
	margin-top: 24px;
}

.hhl-proof__more {
	margin: 4px 0 0;
	text-align: center;
	font-size: .9375rem;
	font-weight: 600;
}

/* Nhãn trên ảnh trước – sau: chấm nhấp nháy + chữ */
.hhl-results__item {
	position: relative;
}

.hhl-ba__notes {
	position: absolute;
	right: 8px;
	bottom: 8px;
	left: 8px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	pointer-events: none;
}

.hhl-ba__note {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 9px;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.25;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.hhl-ba__note::before {
	content: "";
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	animation: hhlDot 1.6s ease-out infinite;
}

.hhl-ba__note--pain {
	grid-column: 1;
	background: rgba(40, 24, 16, .78);
	color: #fff;
}

.hhl-ba__note--pain::before {
	background: #ff7a6b;
	box-shadow: 0 0 0 0 rgba(255, 122, 107, .7);
}

.hhl-ba__note--gain {
	grid-column: 2;
	background: rgba(255, 255, 255, .92);
	color: var(--hhl-ink);
}

.hhl-ba__note--gain::before {
	background: var(--hhl-gold);
	box-shadow: 0 0 0 0 rgba(212, 160, 23, .7);
	animation-delay: .8s;
}

@keyframes hhlDot {
	0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
	70% { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); opacity: 1; }
}

/* Lời khách: thẻ trích dẫn + sao + tên, tuổi, nơi sống */
.hhl-reviews {
	grid-auto-columns: 84%;
}

.hhl-review {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 18px 18px 16px;
	border-radius: 22px;
	background: rgba(255, 255, 255, .86);
	box-shadow: 0 18px 40px -26px rgba(122, 78, 40, .5);
}

.hhl-stars {
	display: inline-flex;
	gap: 2px;
	color: #e2a917;
}

.hhl-stars .hhl-icon {
	width: 18px;
	height: 18px;
}

.hhl .hhl-review__quote {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--hhl-ink);
	/* Font thân bài: font serif của theme thiếu dấu tiếng Việt ở dạng nghiêng */
	font-family: var(--hhl-font-body);
	font-size: .9375rem;
	font-style: normal;
	line-height: 1.6;
}

.hhl-review__quote p {
	margin: 0;
}

.hhl-review__quote p::before {
	content: "“";
	margin-right: 2px;
	color: var(--hhl-gold);
	font-family: var(--hhl-font-number);
	font-size: 1.5em;
	line-height: 0;
	vertical-align: -.2em;
}

.hhl-review__who {
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1.3;
}

.hhl-review__who strong {
	display: block;
	color: var(--hhl-ink);
	font-size: .9375rem;
}

.hhl-review__who small {
	display: block;
	color: var(--hhl-muted);
	font-size: .8125rem;
}

.hhl-review__avatar {
	display: grid;
	flex: 0 0 40px;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, #f7eed5, #e2c27a);
	color: #6e4a08;
	font-family: var(--hhl-font-display);
	font-weight: 700;
}

@media (min-width: 768px) {
	.hhl-reviews.hhl-scroller {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 18px;
	}
}

/* ==========================================================================
   Sơ đồ quy trình: các bước nối bằng đường vàng
   Điện thoại: dọc (nút số bên trái, thẻ bên phải). Máy tính: ngang.
   ========================================================================== */

.hhl-chart {
	position: relative;
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Đường nối dọc chạy qua các nút số */
.hhl-chart::before {
	content: "";
	position: absolute;
	top: 22px;
	bottom: 22px;
	left: 21px;
	width: 2px;
	background: linear-gradient(180deg, #e2b93a, rgba(184, 134, 11, .35));
}

.hhl-chart__step {
	position: relative;
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 12px;
	align-items: start;
}

.hhl-chart__node {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: linear-gradient(135deg, #e2b93a, var(--hhl-gold-deep));
	color: #fff;
	font-family: var(--hhl-font-number);
	font-size: 1.25rem;
	box-shadow: 0 8px 18px -8px rgba(122, 78, 40, .7);
}

.hhl-chart__card {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 12px;
	align-items: center;
	padding: 10px;
	border-radius: 20px;
	background: rgba(255, 255, 255, .84);
	box-shadow: 0 16px 34px -24px rgba(122, 78, 40, .5);
}

.hhl-chart__media {
	overflow: hidden;
	border-radius: 14px;
}

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

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

.hhl-chart__title {
	margin: 2px 0 4px;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.hhl-chart__desc {
	margin: 0;
	color: var(--hhl-muted);
	font-size: .875rem;
	line-height: 1.5;
}

.hhl-chart__video {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.hhl-chart__video .hhl-vcard {
	width: min(100%, 460px);
}

@media (min-width: 992px) {
	.hhl-chart {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 18px;
	}

	/* Đường nối ngang qua các nút số */
	.hhl-chart::before {
		top: 21px;
		right: 10%;
		bottom: auto;
		left: 10%;
		width: auto;
		height: 2px;
		background: linear-gradient(90deg, #e2b93a, rgba(184, 134, 11, .35));
	}

	.hhl-chart__step {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	/* Mũi tên giữa các bước */
	.hhl-chart__step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 16px;
		right: -14px;
		width: 10px;
		height: 10px;
		border-top: 2px solid var(--hhl-gold-deep);
		border-right: 2px solid var(--hhl-gold-deep);
		transform: rotate(45deg);
	}

	.hhl-chart__card {
		grid-template-columns: 1fr;
		align-items: start;
		height: 100%;
		text-align: center;
	}
}

/* ==========================================================================
   Popup chương trình 20/10 (không ảnh: thiết kế chữ)
   ========================================================================== */

.hhl-promo__body {
	text-align: center;
}

.hhl-promo__badge {
	margin: 4px 0 0;
	background: linear-gradient(100deg, #8b5e0a, #e2b93a 45%, #f5e06a 55%, #b8860b);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: var(--hhl-font-number);
	font-size: clamp(3.5rem, 18vw, 5rem);
	line-height: 1;
}

.hhl-promo__eyebrow {
	margin: 4px 0 0;
	color: var(--hhl-gold-dark);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.hhl-promo__title {
	margin: 6px 0 0;
	color: var(--hhl-ink);
	font-family: var(--hhl-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
}

.hhl-promo__title em {
	display: block;
	color: var(--hhl-gold-deep);
	font-family: var(--hhl-font-number);
	font-style: normal;
	font-weight: 400;
	text-transform: none;
}

.hhl-promo__text {
	margin: 8px 0 0;
	color: var(--hhl-muted);
	font-size: .875rem;
}

.hhl-promo__perks {
	display: grid;
	gap: 8px;
	margin: 14px 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.hhl-promo__perks li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .85);
	color: var(--hhl-ink);
	font-size: .9375rem;
	font-weight: 600;
	box-shadow: 0 10px 24px -18px rgba(122, 78, 40, .55);
}

.hhl-promo__perks .hhl-icon {
	flex: 0 0 22px;
	color: var(--hhl-gold-deep);
}

.hhl-promo .hhl-countdown {
	margin-bottom: 14px;
}

@media (min-width: 768px) {
	.hhl-popup.hhl-promo:not(:has(.hhl-popup__inner--media)) {
		width: min(520px, 94vw);
	}
}

/* ==========================================================================
   WhatsApp: thanh đáy 4 nút, thanh nổi máy tính, nút trong popup
   ========================================================================== */

.hhl-bar--4 {
	grid-template-columns: 1fr 1fr 1fr 2fr;
}

.hhl-bar__item--wa .hhl-icon,
.hhl-float__item--wa .hhl-icon,
.hhl-btn--wa .hhl-icon {
	color: #25d366;
}

.hhl-float__item--wa .hhl-icon {
	padding: 2px;
	border-radius: 50%;
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.hhl-btn--pulse,
	.hhl-btn--pulse::before,
	.hhl-bar__item--main.hhl-btn--pulse,
	.hhl-hb__slogan span,
	.hhl-promo-strip::after,
	.hhl-promo-strip__icon,
	.hhl-ba__note::before,
	.hhl-pain__tip .hhl-icon {
		animation: none;
	}

	.hhl-hb__slogan span {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Banner ưu đãi chân mày: mức giảm cỡ lớn + giảm thêm khi đi nhóm + ảnh
   chân mày khách thật. Nền nâu – vàng đậm để nổi giữa các khối sáng.
   ========================================================================== */

.hhl-offer {
	padding: 6px 0 22px;
}

.hhl .hhl-offer__card {
	position: relative;
	display: grid;
	overflow: hidden;
	border-radius: 26px;
	background:
		radial-gradient(60% 60% at 0% 0%, rgba(245, 224, 106, .22), transparent 70%),
		radial-gradient(50% 60% at 100% 100%, rgba(234, 190, 176, .2), transparent 70%),
		linear-gradient(135deg, #2e1b10, #5a3a05 55%, #8b5e0a);
	color: #fff8e6;
	text-decoration: none;
	box-shadow: 0 30px 60px -30px rgba(59, 36, 24, .85);
}

/* Viền vàng mảnh bên trong */
.hhl-offer__card::before {
	content: "";
	position: absolute;
	inset: 8px;
	z-index: 1;
	border: 1px solid rgba(245, 224, 106, .35);
	border-radius: 20px;
	pointer-events: none;
}

.hhl-offer__text {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: 26px 20px 22px;
	text-align: center;
}

.hhl-offer__eyebrow {
	padding: 5px 14px;
	border-radius: 999px;
	background: rgba(245, 224, 106, .14);
	color: #f5e06a;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.hhl-offer__main {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	line-height: 1;
}

.hhl-offer__label {
	font-family: var(--hhl-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.hhl-offer__big {
	background: linear-gradient(100deg, #e2b93a 0%, #fff3b0 40%, #f5e06a 55%, #c9971c 100%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: var(--hhl-font-number);
	font-size: clamp(5rem, 28vw, 8.5rem);
	font-weight: 400;
	line-height: .95;
	animation: hhlGoldSweep 5s ease-in-out infinite;
}

.hhl-offer__what {
	font-family: var(--hhl-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

/* "+15% khi đi nhóm" — nhãn nổi, nhịp sáng nhẹ */
.hhl-offer__extra {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	padding: 8px 16px 8px 8px;
	border-radius: 999px;
	background: #fff8e6;
	color: #5a3a05;
	text-align: left;
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
	animation: hhlBreath 2.4s ease-in-out infinite;
}

.hhl-offer__extra b {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	min-width: 58px;
	height: 40px;
	padding: 0 8px;
	border-radius: 999px;
	background: linear-gradient(135deg, #e2b93a, #b8860b);
	color: #fff;
	font-family: var(--hhl-font-number);
	font-size: 1.375rem;
	font-weight: 400;
}

.hhl-offer__extra span {
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.3;
}

.hhl-offer__cta {
	min-width: min(100%, 280px);
	margin-top: 12px;
}

.hhl-offer__note {
	color: rgba(255, 248, 230, .72);
	font-size: .75rem;
}

.hhl-offer__media {
	position: relative;
	z-index: 0;
	display: block;
	margin: 0 8px 8px;
	overflow: hidden;
	border-radius: 0 0 20px 20px;
}

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

/* Tem tròn "-35%" góc ảnh */
.hhl-offer__stamp {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	border: 2px dashed rgba(255, 255, 255, .75);
	border-radius: 50%;
	background: radial-gradient(circle, #e2b93a, #b8860b);
	color: #fff;
	font-family: var(--hhl-font-number);
	font-size: 1.5rem;
	box-shadow: 0 0 0 4px rgba(184, 134, 11, .35), 0 12px 24px -10px rgba(0, 0, 0, .6);
	transform: rotate(-12deg);
}

@media (min-width: 900px) {
	.hhl .hhl-offer__card {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}

	.hhl-offer__text {
		padding: 40px 32px;
	}

	.hhl-offer__media {
		margin: 8px 8px 8px 0;
		border-radius: 0 20px 20px 0;
	}

	.hhl .hhl-offer__img {
		height: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hhl-offer__big,
	.hhl-offer__extra {
		animation: none;
	}
}

/* Chữ "tất cả dịch vụ" trên nền nâu: ghi đè màu chữ mặc định của theme */
.hhl .hhl-offer__what {
	color: #f5e06a;
}

/* ---- Banner ưu đãi tràn màn hình (đầu trang) -----------------------------
   Không lề, không bo góc. Điện thoại: chữ trên, ảnh dưới tràn mép.
   Máy tính: chữ trái, ảnh phải phủ kín chiều cao. */

.hhl-offer--full {
	padding: 0;
}

.hhl-offer--full > .hhl-wrap {
	max-width: none;
	padding: 0;
}

.hhl .hhl-offer--full .hhl-offer__card {
	border-radius: 0;
	box-shadow: none;
}

.hhl-offer--full .hhl-offer__card::before {
	inset: 10px 10px auto;
	bottom: auto;
	height: calc(100% - 20px);
	border-radius: 0;
	border-width: 1px 1px 0;
}

.hhl-offer--full .hhl-offer__media {
	margin: 0;
	border-radius: 0;
}

@media (min-width: 900px) {
	.hhl-offer--full .hhl-offer__card {
		min-height: min(560px, 70vh);
	}

	/* Viền vàng chỉ bao nửa chữ, không đè lên ảnh */
	.hhl-offer--full .hhl-offer__card::before {
		inset: 14px calc(50% + 14px) 14px 14px;
		height: auto;
		border-width: 1px;
	}

	.hhl-offer--full .hhl-offer__text {
		align-content: center;
		padding: 48px max(32px, calc((100vw - 1200px) / 2 + 16px));
		padding-right: 40px;
	}

	.hhl-offer--full .hhl-offer__media {
		margin: 0;
		border-radius: 0;
	}

	.hhl .hhl-offer--full .hhl-offer__img {
		height: 100%;
		aspect-ratio: auto;
	}
}

/* ==========================================================================
   PROPOSAL 10/2026 — trang xoasuachanmayvietkieu + brand:
   hero kiểu mới, câu phụ đóng khung, ảnh trước nhỏ / sau lớn, form chỉ ảnh,
   tiêu đề nhóm nổi bật, ảnh mẫu dáng mặt, form cuối trang
   ========================================================================== */

/* Ẩn khỏi màn hình nhưng trình đọc màn hình vẫn đọc */
.hhl-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- Hero kiểu mới ------------------------------------------------------ */

.hhl-h2 {
	padding: 28px 0 34px;
}

.hhl-h2__grid {
	display: grid;
	gap: 26px;
	align-items: center;
}

.hhl-h2__text {
	text-align: center;
}

.hhl .hhl-h2__title {
	margin: 0;
	color: var(--hhl-ink);
	font-family: var(--hhl-font-display);
	font-size: clamp(1.875rem, 8.6vw, 3.25rem);
	font-weight: 700;
	line-height: 1.18;
	text-transform: uppercase;
}

.hhl-h2__title em {
	display: block;
	margin-top: 4px;
	color: var(--hhl-gold-deep);
	font-family: var(--hhl-font-number);
	font-size: 1.12em;
	font-style: normal;
	font-weight: 400;
	text-transform: none;
}

/* Câu phụ đóng khung: viền vàng đôi, nền trắng mờ */
.hhl-h2__sub {
	display: inline-block;
	max-width: 30em;
	margin: 16px auto 0;
	padding: 12px 18px;
	border: 1.5px solid var(--hhl-gold);
	border-radius: 14px;
	background: rgba(255, 255, 255, .78);
	box-shadow: 0 0 0 4px rgba(212, 160, 23, .14);
	color: var(--hhl-ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
}

.hhl-h2__cta {
	display: grid;
	justify-items: center;
	gap: 8px;
	margin-top: 22px;
}

.hhl-h2__btn {
	min-width: min(100%, 320px);
	min-height: 58px;
	font-size: 1.0625rem;
	letter-spacing: .04em;
	white-space: nowrap;
}

.hhl-h2__note {
	margin: 0;
	color: var(--hhl-muted);
	font-size: .8125rem;
	font-style: italic;
}

/* Ảnh trước (nhỏ, lùi sau, hơi mờ) – sau (lớn, nổi trước) */
.hhl-h2__media {
	position: relative;
	width: min(100%, 420px);
	margin: 0 auto;
	padding-bottom: 6%;
	aspect-ratio: 1 / 1.08;
}

.hhl-h2__photo {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
}

.hhl-h2__photo--before {
	top: 0;
	left: 0;
	width: 44%;
	aspect-ratio: 3 / 4;
	filter: saturate(.85);
	box-shadow: 0 16px 34px -20px rgba(59, 36, 24, .6);
}

.hhl-h2__photo--after {
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 66%;
	aspect-ratio: 3 / 4;
	border: 4px solid #fff;
	box-shadow: 0 30px 60px -28px rgba(59, 36, 24, .7);
}

.hhl .hhl-h2__img,
.hhl-h2__photo .hhl-img--missing {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

@media (min-width: 900px) {
	.hhl-h2 {
		padding: 56px 0;
	}

	.hhl-h2--photo .hhl-h2__grid {
		grid-template-columns: 1.1fr .9fr;
		gap: 48px;
	}

	.hhl-h2--photo .hhl-h2__text {
		text-align: left;
	}

	.hhl-h2--photo .hhl-h2__sub {
		margin-left: 0;
	}

	.hhl-h2--photo .hhl-h2__cta {
		justify-items: start;
	}
}

/* ---- Tiêu đề nhóm nổi bật (feedback, video) ----------------------------- */

.hhl .hhl-proof__sub--big {
	position: relative;
	margin-top: 40px;
	padding-bottom: 14px;
	color: var(--hhl-gold-deep);
	font-size: clamp(1.375rem, 6vw, 2rem);
	line-height: 1.3;
}

/* Gạch vàng ngắn dưới tiêu đề */
.hhl-proof__sub--big::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 64px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, #e2b93a, var(--hhl-gold-deep));
	transform: translateX(-50%);
}

.hhl-proof .hhl-proof__sub--big:first-of-type {
	margin-top: 28px;
}

/* ---- Dáng mặt: ảnh mẫu thay hình vẽ ------------------------------------- */

.hhl-facecard__photo {
	margin: -4px -2px 12px;
	overflow: hidden;
	border-radius: 16px;
}

.hhl .hhl-facecard__img,
.hhl-facecard__photo .hhl-img--missing {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
}

/* ---- Khối form chỉ ảnh + form: ảnh sát trên --------------------------- */

.hhl-register__intro:has(> .hhl-sr) .hhl-register__media {
	margin-top: 0;
}

/* ---- Khối cuối có form: liên hệ + form cạnh nhau trên máy tính --------- */

.hhl-final__box:has(> .hhl-form) {
	display: grid;
	gap: 24px;
	max-width: 1040px;
}

@media (min-width: 900px) {
	.hhl-final__box:has(> .hhl-form) {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 48px;
		text-align: left;
	}

	.hhl-final__box:has(> .hhl-form) .hhl-contact {
		grid-template-columns: 1fr;
		margin-left: 0;
	}
}

/* Đầu form cuối trang kiểu thẻ ưu đãi: nền nâu vàng, nhãn vòng cung */
.hhl-form__head--card {
	position: relative;
	margin: -24px -18px 18px; /* tràn tới mép form (padding form 24px 18px) */
	padding: 34px 18px 22px;
	border-radius: var(--r-lg) var(--r-lg) 0 0;
	background: linear-gradient(160deg, #6e4a08, #a8761b 60%, #d9b45a);
	color: #fff8e6;
	text-align: center;
}

@media (min-width: 768px) {
	.hhl-form__head--card {
		margin: -32px -32px 22px;
		padding: 38px 32px 24px;
	}
}

.hhl .hhl-form__head--card .hhl-form__title {
	margin: 0;
	color: #fff8e6;
	font-family: var(--hhl-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
}

.hhl-form__badge {
	position: absolute;
	top: 0;
	left: 50%;
	padding: 6px 20px;
	border-radius: 0 0 16px 16px;
	background: #fff3d4;
	color: #6e4a08;
	font-family: var(--hhl-font-display);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translateX(-50%);
}

.hhl .hhl-form__sub {
	margin: 8px 0 0;
	color: rgba(255, 248, 230, .88);
	font-size: .875rem;
	line-height: 1.5;
}

/* ---- Thanh đáy: chữ nút chính một dòng ----------------------------------- */

.hhl-bar__item--main span {
	letter-spacing: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}