/*
 * Gamuda Land — design tokens & base components
 * Nguồn: Figma "Gamuda land" (fileKey ZoMDWZ7zT9fSszOI0VpMik)
 *
 * File này là bộ nhận diện dùng chung (màu, font, spacing, button, section
 * header, card...). Khi áp dụng thiết kế mới cho các trang khác của site,
 * chỉ cần enqueue lại đúng file này — không phụ thuộc riêng trang chủ.
 */

:root {
	/* Màu sắc — Norton Park (A Gamuda Land Community), lấy từ bộ nhận diện trong tài liệu dự án
	   (CEO Meeting 21/09/2026): xanh olive #1e376f (chủ đạo), nâu đất #13244d (nền tối/footer), đồng
	   (copper) #0f7a8c cho điểm nhấn, be cát #a8e1ea cho chữ nhấn trên nền tối. Tên biến "green"/"gold"
	   giữ nguyên từ template gốc — green = olive, green-dark = nâu đất, gold = đồng, gold-light = be cát,
	   gold-bright = đồng nhạt. */
	--gl-cream: #f4f7f8;
	--gl-surface-2: #edf3f6;
	--gl-white: #FFFFFF;
	--gl-border: #dbdad7;
	--gl-border-gold: rgba(15, 122, 140, 0.25);
	--gl-green: #1e376f;
	--gl-green-dark: #13244d;
	--gl-btn-bg: #1e376f;
	--gl-btn-bg-dark: #13244d;
	--gl-gold: #0f7a8c;
	--gl-gold-light: #a8e1ea;
	--gl-gold-bright: #149cb2;
	--gl-text: #4a4a4a;
	--gl-text-on-dark: #FFFFFF;

	/* Font */
	--gl-font-serif: 'Cormorant Garamond', Georgia, serif;
	--gl-font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Type scale (desktop) */
	--gl-fs-eyebrow: 11px;
	--gl-fs-label: 13px;
	--gl-fs-nav: 20px;
	--gl-fs-btn: 14px;
	--gl-fs-body-sm: 14px;
	--gl-fs-body: 16px;
	--gl-fs-body-lg: 19px;
	--gl-fs-h4: 23px;
	--gl-fs-h3: 30px;
	--gl-fs-h2: 44px;
	--gl-fs-h1: 72px;

	/* Spacing */
	--gl-gap-xs: 8px;
	--gl-gap-sm: 16px;
	--gl-gap-md: 24px;
	--gl-gap-lg: 32px;
	--gl-gap-xl: 48px;
	--gl-gap-2xl: 64px;
	--gl-gap-3xl: 80px;

	--gl-section-x: 80px;
	/* Giảm từ 120px — áp dụng chung cho MỌI section (".gl-section"), khoảng cách trên/dưới từng
	   section trước đây khá rộng, thu gọn lại cho trang đỡ dài/đỡ trống trải giữa các khối. */
	--gl-section-y: 80px;
	--gl-container-max: 1440px;

	--gl-radius-sm: 8px;
	--gl-radius-md: 12px;
	--gl-radius-lg: 16px;
	--gl-radius-pill: 100px;

	/* Easing "ease-out" tham khảo ĐÚNG giá trị hiệu ứng cuộn-tới (".reveal"/".reveal.is-in") của
	   imperia-sensapark.vn (biến "--e-out" bên đó) — đường cong giảm tốc rõ/dứt khoát hơn hẳn "ease"
	   mặc định của trình duyệt (khá nhạt/chung chung), cảm giác "cao cấp" hơn khi phần tử trượt vào. */
	--gl-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Reset nhẹ, chỉ áp dụng trong phạm vi trang Gamuda Land để không đụng CSS Flatsome ở nơi khác */
body.gamuda-landing {
	margin: 0;
	background: var(--gl-cream);
	color: var(--gl-text);
	font-family: var(--gl-font-sans);
	font-size: var(--gl-fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body.gamuda-landing *,
body.gamuda-landing *::before,
body.gamuda-landing *::after {
	box-sizing: border-box;
}

body.gamuda-landing h1,
body.gamuda-landing h2,
body.gamuda-landing h3,
body.gamuda-landing h4,
body.gamuda-landing p {
	margin: 0;
}

body.gamuda-landing ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.gamuda-landing a {
	color: inherit;
	text-decoration: none;
}

body.gamuda-landing img {
	max-width: 100%;
	display: block;
}

/* Căn đều 2 bên (justify) cho MỌI đoạn văn bản trên toàn site — áp dụng 1 lần ở đây thay vì lặp
   lại "text-align:justify" ở từng nơi riêng lẻ (1 số rule cụ thể trong gamuda-home.css — VD
   ".gl-intro__copy p", ".gl-developer__content p"... — đã tự khai báo y hệt trước đó, không xung
   đột vì cùng giá trị, giữ nguyên cho rõ ngữ cảnh). "text-align-last:left" để dòng CUỐI của mỗi
   đoạn không bị kéo giãn cách chữ (chỉ 1-2 từ mà justify hết cỡ theo chiều rộng sẽ trông xấu hơn
   không justify). Đoạn chỉ 1 dòng (badge, nhãn ngắn...) không bị ảnh hưởng gì — justify chỉ có
   tác dụng khi đoạn xuống dòng. */
body.gamuda-landing p {
	text-align: justify;
	text-align-last: left;
}

body.gamuda-landing button {
	font-family: inherit;
	cursor: pointer;
}

/* ===== Container / section ===== */
.gl-container {
	max-width: var(--gl-container-max);
	margin: 0 auto;
}

.gl-section {
	padding: var(--gl-section-y) var(--gl-section-x);
}

/* ===== Typography chung ===== */
.gl-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--gl-font-sans);
	font-weight: 600;
	font-size: var(--gl-fs-label);
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--gl-gold);
}

.gl-eyebrow::before {
	content: '';
	display: inline-block;
	width: 40px;
	height: 1px;
	background: var(--gl-gold);
	flex-shrink: 0;
}

.gl-eyebrow--center {
	justify-content: center;
}

.gl-section-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gl-gap-sm);
	text-align: center;
}

.gl-section-header .gl-h2 {
	max-width: 845px;
}

.gl-h1 {
	font-family: var(--gl-font-serif);
	font-weight: 400;
	font-size: var(--gl-fs-h1);
	line-height: 1.05;
	letter-spacing: -0.014em;
	color: var(--gl-white);
}

.gl-h2 {
	font-family: var(--gl-font-serif);
	font-weight: 400;
	font-size: var(--gl-fs-h2);
	line-height: 1.2;
	color: var(--gl-green);
}

.gl-h2--light {
	color: var(--gl-white);
}

.gl-h3 {
	font-family: var(--gl-font-serif);
	font-weight: 600;
	font-size: var(--gl-fs-h3);
	color: var(--gl-green);
}

.gl-lede {
	font-size: var(--gl-fs-body-lg);
	font-weight: 300;
	line-height: 1.6;
	color: var(--gl-text);
}

/* ===== Button =====
   Flatsome (theme cha) đặt "min-height" mặc định cho mọi <button> (scale theo font-size, ví dụ
   1 nút <button> font-size 20px sẽ bị ép cao tối thiểu ~50px) — ảnh hưởng mọi nút tự chế nhỏ
   trong hệ thống .gl-* (mũi tên showcase, dot slider...). Reset về 0 ngay từ đây một lần cho tất
   cả thay vì phải khai báo lại ở từng component. */
button[class*="gl-"] {
	min-width: 0;
	min-height: 0;
}

.gl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 32px;
	border: 1px solid transparent;
	border-radius: var(--gl-radius-sm);
	font-family: var(--gl-font-sans);
	font-weight: 600;
	font-size: var(--gl-fs-btn);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gl-btn--solid,
body.gamuda-landing .gl-btn--solid {
	background: var(--gl-btn-bg);
	border-color: var(--gl-btn-bg);
	color: var(--gl-white);
}

.gl-btn--solid:hover,
body.gamuda-landing .gl-btn--solid:hover {
	background: var(--gl-btn-bg-dark);
	border-color: var(--gl-btn-bg-dark);
	color: var(--gl-white);
}

.gl-btn--outline,
body.gamuda-landing .gl-btn--outline {
	background: transparent;
	border-color: currentColor;
	color: var(--gl-white);
}

.gl-btn--outline:hover,
body.gamuda-landing .gl-btn--outline:hover {
	background: rgba(20, 156, 178, 0.12);
	border-color: var(--gl-gold-bright);
	color: var(--gl-gold-bright);
}

.gl-btn--outline-gold,
body.gamuda-landing .gl-btn--outline-gold {
	background: transparent;
	border-color: var(--gl-gold);
	color: var(--gl-gold);
}

.gl-btn--outline-gold:hover,
body.gamuda-landing .gl-btn--outline-gold:hover {
	background: rgba(20, 156, 178, 0.14);
	border-color: var(--gl-gold-bright);
	color: var(--gl-gold-bright);
}

.gl-btn--gold,
body.gamuda-landing .gl-btn--gold {
	background: var(--gl-gold);
	color: var(--gl-green);
	border-color: var(--gl-gold);
}

.gl-btn--gold:hover,
body.gamuda-landing .gl-btn--gold:hover {
	background: var(--gl-gold-bright);
	border-color: var(--gl-gold-bright);
}

/* Biến thể "link" — bỏ hẳn khối nút đặc (nền/viền/padding lớn), chỉ còn chữ + mũi tên "→" bên phải,
   dùng khi CTA cần nhẹ nhàng hơn nút khối thông thường (VD CTA Tổng Quan, đặt ngay dưới đoạn mô tả
   thay vì tách hẳn thành khối nút). Vẫn giữ family/weight/uppercase/letter-spacing kế thừa từ
   ".gl-btn" gốc để đồng bộ chữ với các nút khác trên site — chỉ đổi phần "khung". */
.gl-btn--link,
body.gamuda-landing .gl-btn--link {
	background: transparent;
	border: none;
	padding: 0;
	border-radius: 0;
	color: var(--gl-green);
}

.gl-btn--link::after {
	content: '\2192';
	font-size: 16px;
	transition: transform 0.2s ease;
}

.gl-btn--link:hover,
body.gamuda-landing .gl-btn--link:hover {
	background: transparent;
	color: var(--gl-gold);
}

.gl-btn--link:hover::after {
	transform: translateX(4px);
}

.gl-btn--block {
	display: flex;
	width: 100%;
}

/* ===== Thanh điều hướng slider (dùng chung cho mọi slider 1 item/page trên mobile, xem
   glInitSliderControls() trong gamuda-home.js): mũi tên trước/sau + dãy dots ở giữa — mặc định
   ẩn, chỉ hiện ở đúng breakpoint slider tương ứng bật lên. ===== */
.gl-slider-controls {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: var(--gl-gap-md);
}

@media (max-width: 767px) {
	.gl-slider-controls--phone {
		display: flex;
	}
}

.gl-slider-arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 16px;
	line-height: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.gl-slider-arrow--prev {
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	color: var(--gl-green);
}

.gl-slider-arrow--prev:hover {
	border-color: var(--gl-gold);
}

.gl-slider-arrow--next {
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	color: var(--gl-green);
}

.gl-slider-arrow--next:hover {
	border-color: var(--gl-gold);
}

/* Dùng chung cho MỌI slider có dot (Sản Phẩm, Tin Tức...) — số lượng dot phụ thuộc số item thật
   (VD 9 bài Tin Tức = 9 dot), không cố định. Trước đây không có "min-width:0"/"overflow-x" nên khi
   đủ nhiều dot, hàng dot rộng hơn khoảng trống còn lại giữa 2 nút mũi tên (".gl-slider-controls" chỉ
   rộng bằng đúng khối chứa nó, "justify-content:center" không tự co nội dung lại) — bị đẩy TRÀN ra
   2 bên, đủ mạnh để đẩy nút mũi tên trái ra khỏi màn hình (âm so với mép trái). Cho phép hàng dot tự
   co lại + cuộn ngang riêng khi không đủ chỗ, giữ 2 nút mũi tên luôn ở đúng vị trí trong khung. */
.gl-slider-dots {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.gl-slider-dots::-webkit-scrollbar {
	display: none;
}

.gl-slider-dot {
	width: 6px;
	height: 6px;
	line-height: 1;
	padding: 0;
	/* --gl-border gần như cùng tông với nền kem/trắng của section nên gần như vô hình — dùng màu
	   xanh chủ đạo mờ đi để dot chưa active vẫn đủ tương phản, tránh chỉ thấy mỗi dot vàng nổi
	   lên trông lạc lõng. */
	background: rgba(30, 55, 111, 0.18);
	border: none;
	border-radius: var(--gl-radius-pill);
	transition: background-color 0.2s ease, width 0.2s ease;
}

.gl-slider-dot.is-active {
	/* Dot active không phóng to mà kéo dài ra thành viên thuốc (tham khảo ảnh đối chiếu người
	   dùng cung cấp) — rõ ràng, dễ nhận biết hơn so với chỉ đổi màu hay scale tròn đều. */
	width: 26px;
	background: var(--gl-gold);
}

/* ===== Chú thích ảnh (dùng chung cho mọi field ảnh có caption) ===== */
.gl-image-caption {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-style: italic;
	color: var(--gl-text);
	opacity: 0.65;
	text-align: center;
	/* "text-align-last" được kế thừa từ "body.gamuda-landing p { text-align-last: left }" (rule
	   justify chung toàn site, xem gamuda-tokens.css phía trên) — với đoạn chỉ 1 dòng (trường hợp
	   của caption ảnh), "text-align-last" áp dụng cho CHÍNH dòng đó và THẮNG "text-align:center" ở
	   trên (dòng cuối cùng luôn ưu tiên theo "text-align-last"). Khai báo rõ lại ở đây để caption
	   luôn canh giữa như thiết kế, không phụ thuộc/bị lệch theo "text-align-last" của thẻ cha. */
	text-align-last: center;
}

/* ===== Card ===== */
.gl-card {
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-sm);
}

/* ===== Reveal on scroll (dùng chung, gắn class "gl-reveal" + JS IntersectionObserver) =====
   "translateY(24px)" + "--gl-ease-out" — tham khảo ĐÚNG công thức ".reveal"/".reveal.is-in" của
   imperia-sensapark.vn (24px/700ms/easing cùng giá trị), giữ nguyên "0.7s" (đã đúng sẵn, trùng
   "700ms" bên đó). */
.gl-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--gl-ease-out), transform 0.7s var(--gl-ease-out);
}

.gl-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.gl-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Footer + section đăng ký (2 khối full-bleed liền kề, cùng là con trực tiếp của <body>):
 * chỉ fade-in, KHÔNG trượt 28px. translateY(28px) khiến 2 khối này hở đúng 28px khi reveal
 * lệch nhịp nhau -> lộ nền <body> (màu kem) thành 1 dải trắng giữa section xanh và footer.
 * Rõ nhất khi có script bên thứ 3 chèn ở cuối trang làm chậm IntersectionObserver. */
.gl-registration.gl-reveal,
.gl-footer.gl-reveal {
	transform: none;
}

/* Chặn margin của phần tử con (VD margin-bottom mặc định của <form> Contact Form 7 trong section
 * đăng ký) "lọt" ra khỏi <main> và tạo khe hở giữa <main> và <footer> -> lộ nền body màu kem.
 * flow-root tạo block formatting context, gói sát nội dung, không cắt xén như overflow:hidden. */
.gl-main {
	display: flow-root;
}

/* Widget "Lấy mã ngay" do trafficviet/widget.js tự chèn (#tu-traffic-widget-inline, thường vào
 * ĐẦU <footer>) có margin 20px trên/dưới -> tạo 1 dải sáng ngăn giữa section đăng ký và nội dung
 * footer. Bỏ margin + nền để nút nằm gọn trên nền footer, không tạo khoảng hở. */
#tu-traffic-widget-inline,
.tuw-inline {
	margin: 0 !important;
	background: transparent !important;
}

/* ===== Accordion (dùng chung — Payment Plan, Residences, có thể tái dùng cho FAQ...) =====
 * Mỗi item là 1 thẻ (card) bo góc + đổ bóng riêng biệt (không còn kiểu list liền mạch chỉ ngăn
 * bằng viền dưới như trước) — tham khảo ảnh đối chiếu người dùng cung cấp (cả 2 section Mặt Bằng
 * và Thanh Toán đều dùng chung kiểu thẻ này). Header có nền màu (--gl-cream) tách biệt khỏi phần
 * nội dung nền trắng bên dưới, giống dải màu header trong ảnh tham khảo. */
.gl-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-md);
}

.gl-accordion__item {
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(28, 28, 28, 0.05);
	transition: border-color 0.2s ease;
}

.gl-accordion__item.is-open {
	border-color: var(--gl-gold);
}

/* "font-family" phải nối thêm "body.gamuda-landing" — nếu không, rule reset chung
   "body.gamuda-landing button { font-family: inherit }" (phía trên) đặc hiệu hơn 1 chút (2 element
   "body"+"button" so với 0 element ở đây, cùng 1 class) nên thắng, làm MỌI tiêu đề accordion
   (Thanh Toán/Chính Sách/FAQ/Mặt Bằng) render sang sans thay vì serif như thiết kế gốc — cùng
   gotcha đã gặp với ".gl-hero__mobile-img"/".gl-nav__menu a". */
body.gamuda-landing .gl-accordion__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gl-gap-md);
	width: 100%;
	margin: 0;
	padding: 20px 24px;
	background: var(--gl-cream);
	border: none;
	text-align: left;
	font-family: var(--gl-font-sans);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.4;
	color: var(--gl-green);
	transition: color 0.2s ease;
	/* "<button>" ở Flatsome mặc định có margin-right:1em — với "width:100%" ở trên, phần margin
	   thừa đó khiến header không khớp hết chiều rộng thẻ (bị overflow:hidden của ".gl-accordion__item"
	   cắt mất 1 mẩu bên phải khi CHƯA mở, chỉ lộ rõ khi chưa expand vì lúc đó không có nội dung nào
	   khác "đẩy" layout ra). Reset về 0 để header luôn khớp đúng100% cạnh thẻ ở mọi trạng thái. */
	/* "<button>" ở Flatsome mặc định có text-transform:uppercase — không có gì trong rule này tự
	   ghi đè nên tiêu đề accordion bị viết hoa hết ngoài ý muốn (thấy rõ ở FAQ, các tiêu đề khác
	   viết thường bình thường trong PHP cũng bị ảnh hưởng như nhau). */
	text-transform: none;
}

.gl-accordion__header:hover {
	color: var(--gl-gold-bright);
}

/* Item accordion có thêm dòng mô tả nhỏ dưới tiêu đề (field "item_subtitle", section-accordion.php)
 * — bọc riêng trong 1 flex column để không phá layout hàng ngang gốc (title + chevron 2 đầu) của
 * ".gl-accordion__header". Chữ mô tả nhỏ/mờ hơn tiêu đề, không kế thừa font-size 22px của header. */
.gl-accordion__header-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.gl-accordion__header-subtitle {
	font-family: var(--gl-font-sans);
	font-size: var(--gl-fs-body-sm);
	font-weight: 400;
	color: var(--gl-text);
	opacity: 0.75;
}

.gl-accordion__number {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: var(--gl-radius-sm);
	background: var(--gl-green);
	color: var(--gl-gold);
	font-family: var(--gl-font-sans);
	font-size: 13px;
	font-weight: 700;
	margin-right: 4px;
}

.gl-accordion__chevron {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.gl-accordion__item.is-open .gl-accordion__chevron {
	transform: rotate(180deg);
}

.gl-accordion__panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}

.gl-accordion__panel-inner {
	padding: var(--gl-gap-lg) 24px;
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-md);
}

.gl-accordion__panel-inner img {
	width: 100%;
	border-radius: var(--gl-radius-md);
	border: 1px solid var(--gl-border);
}

/* Kiểu "Danh sách gạch ngang" (field "accordion_style" = "flat", tham khảo khối FAQ dạng list phẳng
   của imperia-sensapark.vn) — bỏ hẳn thẻ trắng/viền/đổ bóng của kiểu "card" mặc định ở trên, chỉ còn
   chữ trơn ngăn cách bằng gạch ngang mảnh + icon dấu cộng (thay cho mũi tên chevron). Toàn bộ selector
   nối thêm ".gl-accordion--flat" để CHỈ áp dụng khi bật kiểu này — kiểu "card" gốc không đổi. */
.gl-accordion--flat {
	gap: 0;
	border-top: 1px solid var(--gl-border);
}

.gl-accordion--flat .gl-accordion__item {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--gl-border);
	border-radius: 0;
	box-shadow: none;
}

body.gamuda-landing .gl-accordion--flat .gl-accordion__header {
	padding: 24px 0;
	background: transparent;
	font-family: var(--gl-font-serif);
	font-weight: 400;
	/* 20px — khớp đúng cỡ chữ ".gl-principle-card__title" theo ảnh đối chiếu user cung cấp (trước đó
	   dùng "--gl-fs-body-lg" = 19px, gần nhưng không khớp hẳn). */
	font-size: 20px;
	color: var(--gl-green);
	transition: color 0.2s ease;
}

/* Cùng đặc hiệu ("body.gamuda-landing" + 2 class) với rule "color" gốc ngay phía trên — thiếu 2 phần
   đó thì rule ":hover" (chỉ 1 class + pseudo-class, đặc hiệu THẤP hơn) sẽ bị rule gốc thắng đè mất
   ngay cả lúc hover, gần như KHÔNG đổi màu được (đúng bug user phát hiện — cùng đúng gotcha
   "body.gamuda-landing" đã ghi chú nhiều lần trong project này). */
body.gamuda-landing .gl-accordion--flat .gl-accordion__header:hover {
	color: var(--gl-gold-bright);
}

.gl-accordion--flat .gl-accordion__header:hover .gl-accordion__chevron::before,
.gl-accordion--flat .gl-accordion__header:hover .gl-accordion__chevron::after {
	background: var(--gl-gold-bright);
}

.gl-accordion--flat .gl-accordion__panel-inner {
	padding: 0 0 24px;
}

/* Icon dấu cộng (thay cho SVG chevron mặc định — ẩn hẳn SVG, tự vẽ dấu "+" bằng 2 thanh CSS) — mở ra
   thì thanh dọc xoay 90deg + mờ dần, chỉ còn thanh ngang -> thành dấu "−", đúng hiệu ứng "cộng/trừ"
   quen thuộc của accordion FAQ dạng tối giản. */
.gl-accordion--flat .gl-accordion__chevron {
	position: relative;
	width: 16px;
	height: 16px;
}

.gl-accordion--flat .gl-accordion__chevron svg {
	display: none;
}

.gl-accordion--flat .gl-accordion__chevron::before,
.gl-accordion--flat .gl-accordion__chevron::after {
	content: '';
	position: absolute;
	background: var(--gl-green);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.gl-accordion--flat .gl-accordion__chevron::before {
	left: 0;
	top: 50%;
	width: 100%;
	height: 1.5px;
	transform: translateY(-50%);
}

.gl-accordion--flat .gl-accordion__chevron::after {
	top: 0;
	left: 50%;
	width: 1.5px;
	height: 100%;
	transform: translateX(-50%);
}

.gl-accordion--flat .gl-accordion__item.is-open .gl-accordion__chevron {
	transform: none;
}

.gl-accordion--flat .gl-accordion__item.is-open .gl-accordion__chevron::after {
	transform: translateX(-50%) rotate(90deg);
	opacity: 0;
}

/* Nút link tùy chọn ngay dưới accordion item cuối cùng (field CTA "accordion_cta" render qua
 * gl_render_cta(), section-accordion.php) — kiểu link chữ HOA + mũi tên ↗ giống ".gl-news-card__cta", căn giữa dưới
 * danh sách. Hover đổi sang vàng nhấn + dãn nhẹ khoảng cách chữ↔mũi tên. "color" phải nối thêm
 * "body.gamuda-landing" — nếu không, rule "body.gamuda-landing a { color: inherit }" (đặc hiệu hơn)
 * thắng, làm link render sang màu chữ thường thay vì xanh navy (cùng gotcha ".gl-accordion__header"). */
.gl-accordion-section__cta {
	display: flex;
	justify-content: center;
	margin-top: var(--gl-gap-lg);
}

/* ".gl-section-cta-link" — alias dùng cho nút CTA cuối section (gl_render_cta(), xem
 * inc/acf-gamuda-home.php + ".gl-section-cta" trong gamuda-home.css) ở 9 layout thêm sau
 * (Tổng Quan/Chủ Đầu Tư/Tiện Ích/Danh Sách Nổi Bật/Hình Ảnh/Mặt Bằng/Mặt Bằng Căn Hộ/Danh Mục Dự
 * Án/Tab Nội Dung) — CÙNG 1 style với nút dưới accordion, chỉ đổi tên class cho đúng ngữ cảnh
 * (không phải mọi nơi dùng class này đều nằm trong accordion).
 * Đổi từ dạng chữ + gạch chân sang NÚT KHUNG (viền + bo góc), tham khảo nút "Xem tất cả..." của
 * imperia-sensapark: rỗng/viền navy khi bình thường, đổ đặc navy khi hover — gộp đúng 2 trạng thái
 * outline/solid trong ảnh tham khảo vào 1 nút thay vì 2 nút riêng. Mặc định cho SECTION NỀN SÁNG
 * (đa số nơi dùng class này); section nền tối (Danh Mục Dự Án) có override riêng bên dưới. */
body.gamuda-landing .gl-accordion__cta-link,
body.gamuda-landing .gl-section-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 28px;
	border: 1px solid var(--gl-green);
	border-radius: var(--gl-radius-sm);
	font-family: var(--gl-font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gl-green);
	background: transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.gamuda-landing .gl-accordion__cta-link:hover,
body.gamuda-landing .gl-section-cta-link:hover {
	background: var(--gl-green);
	border-color: var(--gl-green);
	color: var(--gl-white);
}

/* Đã bỏ icon mũi tên ↗ sau nhãn nút (trước dùng ::after, xem lịch sử git nếu cần khôi phục) — nút
 * khung giờ chỉ còn chữ, không icon, theo yêu cầu cập nhật UI. */

/* Section nền tối (Danh Mục Dự Án dùng "gl-h2--light") — nút viền navy/chữ navy sẽ gần như vô hình
   trên nền tối, đổi sang viền/chữ sáng, hover đổ đặc trắng/chữ navy (đảo màu so với bản sáng). */
body.gamuda-landing .gl-project-categories .gl-section-cta-link {
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--gl-white);
}

body.gamuda-landing .gl-project-categories .gl-section-cta-link:hover {
	background: var(--gl-white);
	border-color: var(--gl-white);
	color: var(--gl-green);
}

/* Danh sách tiện ích theo tầng (không bắt buộc, field "amenity_groups" lồng trong "floors" — xem
 * section-residences.php) — mỗi nhóm xếp DỌC nối tiếp nhau (không cắt cột kiểu masonry nữa — CSS
 * "columns" từng dùng ở đây xếp theo kiểu ĐỔ ĐẦY TỪNG CỘT từ trên xuống trước khi qua cột kế, nên
 * 3-4 mục lẻ trong 1 nhóm bị dàn không đều/cột cuối bỏ trống trông mất cân đối; số thứ tự đánh liên
 * tục qua hết các nhóm trong PHP, không phải CSS counter, nên chỉ cần in ra đúng số đã tính sẵn).
 * Layout lưới 3 cột chuyển xuống ".gl-floor-amenities__list" (đổ theo HÀNG ngang trước, hết hàng
 * mới xuống hàng — xem ngay bên dưới), mỗi nhóm chỉ còn lo khoảng cách với nhóm kế tiếp. */
.gl-floor-amenities__group {
	margin-bottom: var(--gl-gap-lg);
}

/* Highlight tên nhóm bằng viền dưới màu vàng kéo dài hết chiều rộng cột (thay vì chỉ đổi màu chữ)
 * để nổi bật rõ ràng trên nền trắng của panel accordion — cùng tông vàng nhấn với số thứ tự bên
 * dưới. "margin-bottom" đủ lớn để tách rõ viền vàng khỏi danh sách tiện ích ngay bên dưới.
 * Selector nối thêm ".gl-floor-amenities" (thay vì chỉ 1 class) để thắng specificity rule chung
 * "body.gamuda-landing h4 { margin: 0; }" (gamuda-tokens.css, reset margin mọi h4 toàn site) — nếu
 * không, margin-bottom ở đây bị đè về 0, viền vàng dính sát luôn vào danh sách bên dưới. */
.gl-floor-amenities .gl-floor-amenities__group-title {
	display: block;
	margin: 0 0 20px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--gl-gold);
	font-family: var(--gl-font-serif);
	font-weight: 700;
	font-size: 17px;
	color: var(--gl-green);
}

/* Lưới 3 cột, đổ theo HÀNG (mặc định "grid-auto-flow: row") — mục 1-2-3 nằm cùng hàng đầu, mục 4
   tự xuống hàng 2 cột 1 (không nhảy cột 3 rồi bỏ trống cột 1-2 như CSS "columns" cũ), luôn kín hàng
   trước khi xuống hàng mới nên không bao giờ dư khoảng trống 1 cột giữa chừng. */
.gl-floor-amenities__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--gl-gap-xl);
	row-gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gl-floor-amenities__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--gl-text);
	cursor: default;
	transition: color 0.2s ease;
}

/* Hover — chữ đậm hơn + đổi màu nhấn, badge số chuyển từ viền rỗng sang nền đặc (xem
 * ".gl-floor-amenities__item:hover .gl-floor-amenities__num" bên dưới) — tham khảo đúng ảnh đối
 * chiếu người dùng cung cấp (item đang hover có số nền đặc + chữ đậm, các item còn lại chỉ viền). */
.gl-floor-amenities__item:hover {
	color: var(--gl-green);
	font-weight: 700;
}

.gl-floor-amenities__num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid var(--gl-green);
	color: var(--gl-green);
	font-family: var(--gl-font-sans);
	font-size: 11px;
	font-weight: 700;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.gl-floor-amenities__item:hover .gl-floor-amenities__num {
	background: var(--gl-green);
	border-color: var(--gl-green);
	color: var(--gl-gold);
}

@media (max-width: 1023px) {
	.gl-floor-amenities__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.gl-floor-amenities__list {
		grid-template-columns: 1fr;
	}
}

/* ===== Liên hệ nhanh (Zalo / Gọi điện) — footer-gamuda.php, component dùng chung =====
 * Luôn hiển thị nên đặt sát đáy màn hình (giống ảnh đối chiếu người dùng cung cấp).
 * ".gl-back-to-top" chỉ hiện khi cuộn quá 1 màn hình nên dời "bottom" lên cao hơn nhóm này (xem
 * bên dưới), tránh đè lên nhau khi cả 2 cùng hiển thị. */
.gl-quick-contact {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 410;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.gl-quick-contact__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba(28, 28, 28, 0.25);
	transition: transform 0.2s ease;
}

.gl-quick-contact__btn:hover {
	transform: scale(1.08);
}

.gl-quick-contact__btn--zalo {
	background: #0068ff;
}

.gl-quick-contact__btn--phone {
	background: var(--gl-btn-bg);
}

.gl-quick-contact__btn--email {
	background: var(--gl-gold);
}

.gl-quick-contact__btn--custom {
	background: var(--gl-btn-bg);
}

/* Nút "Đăng ký" — cùng tông xanh + vàng với nút CTA chính ".gl-btn--solid" (header "Nhận bảng
 * giá") để admin/khách nhận ra ngay đây là hành động đăng ký chính, khác các nút liên hệ còn lại.
 * Hiện chữ "Đăng ký" thay icon (xem footer-gamuda.php) nên là hình pill tự co giãn theo chữ, không
 * còn là hình tròn cố định 52px như các nút icon khác — tránh dùng icon mail dễ trùng hình ảnh với
 * phương thức "email" nếu admin bật thêm sau này. */
.gl-quick-contact__btn--register {
	width: auto;
	padding: 0 20px;
	border-radius: var(--gl-radius-pill);
	background: var(--gl-btn-bg);
}

.gl-quick-contact__btn-text {
	color: var(--gl-white);
	font-family: var(--gl-font-sans);
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.gl-quick-contact {
		right: 16px;
		bottom: 16px;
		gap: 10px;
	}

	.gl-quick-contact__btn {
		width: 44px;
		height: 44px;
	}

	.gl-quick-contact__btn--register {
		width: auto;
		padding: 0 16px;
	}

	.gl-quick-contact__btn-text {
		font-size: 13px;
	}
}

/* ===== Back to top (footer-gamuda.php) — component dùng chung =====
 * "margin: 0" reset riêng vì Flatsome (theme cha) có rule chung cho <button> tự thêm
 * margin-right — không tự ý sửa file gốc flatsome.css, ghi đè ở đây cho đúng chuẩn child theme.
 * "bottom" tính bằng calc() dựa trên biến "--gl-qc-count" (số nút liên hệ nhanh đang hiện thật,
 * set inline từ PHP — xem footer-gamuda.php) thay vì hardcode cứng cho đúng 2 nút mặc định
 * (Zalo + Gọi điện): 24px lề đáy + N nút × (52px cao nút + 12px gap, khớp đúng ".gl-quick-contact")
 * — admin thêm/bớt bao nhiêu nút liên hệ nhanh (VD "Đăng ký") thì nút này tự đẩy lên đúng vị trí,
 * không bao giờ bị cụm liên hệ nhanh đè khuất nữa. Mặc định 2 (--gl-qc-count, 2) chỉ dự phòng khi
 * thiếu inline style (JS tắt/lỗi PHP...), giá trị thật luôn do PHP set. */
.gl-back-to-top {
	position: fixed;
	right: 24px;
	bottom: calc(24px + var(--gl-qc-count, 2) * 64px);
	z-index: 400;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: var(--gl-btn-bg);
	border: 1px solid var(--gl-btn-bg);
	border-radius: 50%;
	color: var(--gl-white);
	font-size: 20px;
	line-height: 1;
	box-shadow: 0 8px 20px rgba(28, 28, 28, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, color 0.2s ease, border-color 0.2s ease;
}

.gl-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.gl-back-to-top:hover {
	color: var(--gl-white);
	background: var(--gl-btn-bg-dark);
	border-color: var(--gl-btn-bg-dark);
}

@media (max-width: 767px) {
	.gl-back-to-top {
		right: 16px;
		bottom: calc(16px + var(--gl-qc-count, 2) * 54px);
		width: 44px;
		height: 44px;
		font-size: 18px;
	}
}

/* ===== Thanh liên hệ — kiểu "bar" của Liên Hệ Nhanh (template-parts/gamuda-home/quick-contact-bar.php) =====
 * Máy tính (>= 850px): ".gl-contact-bar" = thẻ cố định góc dưới bên trái. Điện thoại (<= 849px):
 * ".gl-contact-bar-m" = thanh 3 ô cố định đáy màn hình. Mốc 849/850px giữ đúng bản tham khảo (tablet
 * dọc cũng dùng thanh đáy). Màu lấy từ token -> tự theo bảng màu từng site; riêng chấm "đang trực
 * tuyến" giữ xanh lá cố định (ý nghĩa trạng thái, không phải màu thương hiệu). */
.gl-contact-bar,
.gl-contact-bar-m {
	font-family: var(--gl-font-sans);
}

.gl-contact-bar {
	position: fixed;
	left: 20px;
	bottom: 10px;
	z-index: 410;
	display: grid;
	grid-template-columns: repeat(var(--gl-cb-cols, 3), minmax(0, 1fr));
	align-items: stretch;
	gap: 8px;
	/* ~1/3 bề ngang màn hình lớn (37vw: 1600px -> 640px, 1920px -> 710px). Màn nhỏ hơn dùng dạng gọn
	   1 hàng (xem media query "dạng gọn" bên dưới). */
	width: clamp(640px, 37vw, 760px);
	max-width: calc(100vw - 40px);
	box-sizing: border-box;
	padding: 12px;
	background: linear-gradient(145deg, var(--gl-white), var(--gl-cream));
	border: 1px solid color-mix(in srgb, var(--gl-gold) 32%, transparent);
	border-radius: 3px;
	box-shadow: 0 18px 45px rgba(26, 30, 24, 0.2), 0 4px 16px rgba(26, 30, 24, 0.08);
}

/* Bớt bề ngang khi có ít ô (VD tắt Zalo) — không để thẻ trống trải. */
.gl-contact-bar[style*="--gl-cb-cols: 2"] {
	width: clamp(440px, 26vw, 520px);
}

.gl-contact-bar[style*="--gl-cb-cols: 1"] {
	width: 320px;
}

/* Có thêm ô "Bảng tính giá" (4 cột): thẻ rộng hơn, 3 ô liên hệ chia đều phần còn lại. */
.gl-contact-bar[style*="--gl-cb-cols: 4"] {
	width: clamp(840px, 46vw, 920px);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}

body.gamuda-landing .gl-contact-bar[style*="--gl-cb-cols: 4"] .gl-contact-bar__item {
	gap: 8px;
	min-width: 0;
	padding-left: 12px;
	padding-right: 12px;
}

/* 4 cột: nút đăng ký dùng chữ ngắn để 3 ô liên hệ đủ chỗ cho nhãn nhỏ 1 dòng. */
.gl-contact-bar[style*="--gl-cb-cols: 4"] .gl-contact-bar__cta-long {
	display: none;
}

.gl-contact-bar[style*="--gl-cb-cols: 4"] .gl-contact-bar__cta-short {
	display: inline;
}

/* Nút đăng ký lấy đúng bề ngang chữ (1 dòng), 2 ô liên hệ chia phần còn lại. */
.gl-contact-bar[style*="--gl-cb-cols: 3"] {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.gl-contact-bar[style*="--gl-cb-cols: 2"] {
	grid-template-columns: minmax(0, 1fr) auto;
}

.gl-contact-bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 18px;
	right: 18px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--gl-gold), var(--gl-gold-light), var(--gl-gold), transparent);
	border-radius: 10px;
}

.gl-contact-bar__head {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 3px 4px 11px;
	border-bottom: 1px solid color-mix(in srgb, var(--gl-green-dark) 11%, transparent);
}

.gl-contact-bar__head strong {
	color: var(--gl-green-dark);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.gl-contact-bar__status {
	position: relative;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	background: #439267;
	border: 1px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(67, 146, 103, 0.15);
}

.gl-contact-bar__status::after {
	content: "";
	position: absolute;
	inset: -5px;
	border: 1px solid rgba(67, 146, 103, 0.35);
	border-radius: 50%;
	animation: glContactPulse 2s ease infinite;
}

@keyframes glContactPulse {
	0% { transform: scale(0.8); opacity: 1; }
	100% { transform: scale(1.5); opacity: 0; }
}

body.gamuda-landing .gl-contact-bar__item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: center;
	gap: 9px;
	min-width: 180px;
	min-height: 58px;
	margin: 0;
	padding: 8px 15px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid color-mix(in srgb, var(--gl-green-dark) 10%, transparent);
	border-radius: 2px;
	color: var(--gl-green-dark);
	text-decoration: none;
	transition: transform 0.25s, border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
}

body.gamuda-landing .gl-contact-bar__item:hover {
	background: var(--gl-white);
	border-color: color-mix(in srgb, var(--gl-gold) 45%, transparent);
	box-shadow: 0 9px 22px rgba(26, 30, 24, 0.12);
	transform: translateY(-3px);
	color: var(--gl-green-dark);
}

.gl-contact-bar__icon,
.gl-contact-bar-m__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--gl-gold-light);
	background: linear-gradient(145deg, color-mix(in srgb, var(--gl-green) 82%, #fff), var(--gl-green));
}

.gl-contact-bar__icon {
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 7px 15px rgba(26, 30, 24, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.gl-contact-bar__icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.gl-contact-bar__icon--zalo,
.gl-contact-bar-m__icon--zalo {
	color: var(--gl-green-dark);
	background: linear-gradient(145deg, var(--gl-gold-light), var(--gl-gold));
	font-weight: 800;
	text-transform: uppercase;
}

.gl-contact-bar__icon--zalo {
	font-size: 10px;
	letter-spacing: -0.2px;
}

.gl-contact-bar__content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gl-contact-bar__content small {
	margin-bottom: 3px;
	color: var(--gl-text);
	opacity: 0.75;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.5px;
	line-height: 1.2;
	text-transform: uppercase;
}

.gl-contact-bar__content strong {
	overflow: hidden;
	color: var(--gl-green-dark);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gl-contact-bar__arrow {
	display: none;
}

body.gamuda-landing .gl-contact-bar__cta,
body.gamuda-landing .gl-contact-bar-m__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	text-align: center;
	background: linear-gradient(115deg, var(--gl-green), color-mix(in srgb, var(--gl-green) 78%, #fff), var(--gl-green));
	background-size: 200% auto;
	border: 1px solid color-mix(in srgb, var(--gl-gold) 55%, transparent);
	border-radius: 6px;
	box-shadow: 0 9px 22px rgba(26, 30, 24, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.12);
	color: var(--gl-cream);
	text-decoration: none;
}

body.gamuda-landing .gl-contact-bar__cta {
	min-width: 0;
	min-height: 58px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.6px;
	white-space: nowrap;
	line-height: 1.4;
	text-transform: uppercase;
	transition: background-position 0.35s, transform 0.25s, box-shadow 0.25s;
}

body.gamuda-landing .gl-contact-bar__cta:hover {
	background-position: right center;
	box-shadow: 0 12px 28px rgba(26, 30, 24, 0.27);
	transform: translateY(-3px);
	color: var(--gl-white);
}

/* Thanh đáy điện thoại — ẩn trên máy tính */
.gl-contact-bar-m {
	display: none;
}

/* Nút đăng ký: chữ dài cho thẻ đầy đủ, chữ ngắn cho dạng gọn */
.gl-contact-bar__cta-short {
	display: none;
}

/* Dạng gọn 1 hàng — laptop / màn hình thấp (dưới 1600px rộng HOẶC dưới 860px cao, VD laptop 1920px
 * scale 150% chỉ còn ~1280x600). Bỏ dòng tiêu đề, nhãn nhỏ, chữ nút ngắn -> chiếm ~1/3 bề ngang và
 * ~1/10 chiều cao thay vì ~2/3 x 1/5 (thẻ đầy đủ 800px x 128px từng che chữ + nút ở hero). Chấm xanh
 * "đang trực tuyến" chuyển thành chấm nhỏ trên icon gọi. */
@media (min-width: 850px) and (max-width: 1599px), (min-width: 850px) and (max-height: 859px) {
	.gl-contact-bar,
	.gl-contact-bar[style*="--gl-cb-cols: 4"],
	.gl-contact-bar[style*="--gl-cb-cols: 3"],
	.gl-contact-bar[style*="--gl-cb-cols: 2"],
	.gl-contact-bar[style*="--gl-cb-cols: 1"] {
		left: 16px;
		bottom: 16px;
		width: auto;
		max-width: calc(100vw - 32px);
		grid-template-columns: repeat(var(--gl-cb-cols, 3), auto);
		gap: 6px;
		padding: 6px;
		border-radius: 8px;
	}

	.gl-contact-bar::before {
		left: 12px;
		right: 12px;
	}

	.gl-contact-bar__head,
	.gl-contact-bar__content small,
	.gl-contact-bar__cta-long {
		display: none;
	}

	.gl-contact-bar__cta-short {
		display: inline;
	}

	body.gamuda-landing .gl-contact-bar__item {
		grid-template-columns: 34px auto;
		gap: 8px;
		min-width: 0;
		min-height: 46px;
		padding: 6px 14px 6px 6px;
		border-radius: 6px;
	}

	.gl-contact-bar__icon {
		position: relative;
		width: 34px;
		height: 34px;
	}

	.gl-contact-bar__icon svg {
		width: 15px;
		height: 15px;
	}

	.gl-contact-bar__icon--zalo {
		font-size: 9px;
	}

	.gl-contact-bar__item--phone .gl-contact-bar__icon::after {
		content: "";
		position: absolute;
		top: -2px;
		right: -2px;
		width: 10px;
		height: 10px;
		background: #439267;
		border: 2px solid #fff;
		border-radius: 50%;
	}

	.gl-contact-bar__content strong {
		font-size: 13px;
	}

	body.gamuda-landing .gl-contact-bar__cta {
		min-width: 0;
		min-height: 46px;
		padding: 8px 20px;
		font-size: 12px;
		letter-spacing: 0.6px;
	}

}

@media (max-width: 849px) {
	.gl-contact-bar {
		display: none;
	}

	.gl-contact-bar-m {
		position: fixed;
		left: 10px;
		right: 10px;
		bottom: calc(10px + env(safe-area-inset-bottom));
		z-index: 410;
		display: grid;
		align-items: stretch;
		min-height: 64px;
		box-sizing: border-box;
		padding: 5px;
		background: color-mix(in srgb, var(--gl-cream) 97%, transparent);
		border: 1px solid color-mix(in srgb, var(--gl-gold) 38%, transparent);
		border-radius: 2px;
		box-shadow: 0 14px 38px rgba(26, 30, 24, 0.25), 0 3px 10px rgba(26, 30, 24, 0.1);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}

	.gl-contact-bar-m::before {
		content: "";
		position: absolute;
		top: 0;
		left: 20%;
		right: 20%;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--gl-gold-light), transparent);
	}

	body.gamuda-landing .gl-contact-bar-m__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-width: 0;
		padding: 5px 4px;
		text-align: center;
		border-right: 1px solid color-mix(in srgb, var(--gl-green-dark) 10%, transparent);
		color: var(--gl-green-dark);
		text-decoration: none;
	}

	.gl-contact-bar-m__label {
		font-size: 10px;
		font-weight: 700;
		line-height: 1.15;
		white-space: nowrap;
	}

	.gl-contact-bar-m__icon {
		width: 30px;
		height: 30px;
		box-shadow: 0 5px 12px rgba(26, 30, 24, 0.18);
	}

	.gl-contact-bar-m__icon svg {
		width: 15px;
		height: 15px;
		fill: currentColor;
	}

	.gl-contact-bar-m__icon--zalo {
		font-size: 8px;
		letter-spacing: -0.3px;
	}

	body.gamuda-landing .gl-contact-bar-m__cta {
		flex-direction: column;
		min-width: 0;
		margin-left: 5px;
		padding: 8px 10px;
	}

	.gl-contact-bar-m__cta-small {
		margin-bottom: 2px;
		color: rgba(255, 255, 255, 0.68);
		font-size: 8px;
		font-weight: 500;
		letter-spacing: 0.55px;
		line-height: 1.1;
		text-transform: uppercase;
	}

	body.gamuda-landing .gl-contact-bar-m__cta strong {
		color: var(--gl-white);
		font-size: 12px;
		font-weight: 700;
		line-height: 1.25;
		white-space: nowrap;
	}

	/* Nút "Lên đầu trang" đứng ngay trên thanh đáy (cao ~64px + lề 10px) */
	.gl-back-to-top--bar {
		bottom: calc(86px + env(safe-area-inset-bottom));
	}
}

@media (max-width: 374px) {
	.gl-contact-bar-m {
		left: 6px;
		right: 6px;
		bottom: calc(6px + env(safe-area-inset-bottom));
	}

	.gl-contact-bar-m__label {
		font-size: 9px;
	}

	body.gamuda-landing .gl-contact-bar-m__cta {
		padding-left: 5px;
		padding-right: 5px;
	}

	body.gamuda-landing .gl-contact-bar-m__cta strong {
		font-size: 11px;
	}
}

/* Chừa chỗ cuối footer để thanh cố định không che dòng bản quyền / liên kết chính sách khi cuộn hết
 * trang (dạng gọn + thanh điện thoại cao ~60-74px, thẻ đầy đủ trên màn lớn ~130px). */
body.gl-has-contact-bar .gl-footer__bottom {
	padding-bottom: 100px;
}

@media (min-width: 1600px) and (min-height: 860px) {
	body.gl-has-contact-bar .gl-footer__bottom {
		padding-bottom: 160px;
	}
}

/* Trang Trải nghiệm 360°: thanh công cụ của khung xem đã có nút gọi + "Nhận bảng giá" (giống cụm nút tròn). */
body.page-template-page-gamuda-360 .gl-contact-bar,
body.page-template-page-gamuda-360 .gl-contact-bar-m {
	display: none !important;
}

/* ===== Icon ===== */
.gl-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.gl-icon img,
.gl-icon svg {
	width: 100%;
	height: 100%;
}

/* ===== Nav (header-gamuda.php) — component dùng chung, có thể áp dụng cho toàn site ===== */
.gl-nav {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--gl-white);
	border-bottom: 1px solid var(--gl-border);
}

/* Header dùng padding 2 bên RIÊNG, cố định vừa phải — không ăn theo "--gl-section-x" của thân
   trang (đã tăng khá nhiều lần theo yêu cầu, hiện khá lớn) vì header là dải ngang mỏng, không cần
   margin rộng như các section nội dung; "max-width" cũng bỏ luôn phần cộng thêm
   "(--gl-section-x * 2)" cho cùng lý do, chỉ còn giới hạn ở đúng bề rộng container chuẩn. Giảm từ
   48px xuống 24px (bằng padding trên/dưới) — menu item vừa tăng cỡ chữ/độ đậm nên chiếm nhiều bề
   ngang hơn trước, ở các màn hình laptop phổ biến (~1280-1440px) hàng menu đã gần khít mép, bớt
   padding 2 bên giúp có thêm chỗ cho mục menu mà không phải đẩy thêm vào "Xem thêm". */
.gl-nav__inner {
	max-width: var(--gl-container-max);
	box-sizing: border-box;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gl-gap-md);
	/* Padding ngang giảm nhẹ (24px → 20px) — bù thêm chút khoảng trống còn thiếu (~2px, do làm tròn
	   subpixel) cho menu mặc định 7 mục hàng đầu vừa đủ 1 hàng ngay ở đúng mép "--gl-container-max"
	   (1440px), sau khi đã giảm gap ".gl-nav__menu" (xem chú thích ở đó). */
	padding: 24px 20px;
}

.gl-logo {
	position: relative;
	z-index: 601;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 2px;
}

/* Chỉ cần thiết khi drawer mobile chuyển sang overlay toàn màn hình (xem @media max-width:1023px
   bên dưới) — ẩn hẳn ở desktop vì ".gl-nav__menu" ở đó là hàng ngang bình thường, không che gì. */
.gl-nav__mask {
	display: none;
}

.gl-logo__name {
	font-family: var(--gl-font-serif);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.09em;
	color: var(--gl-green);
}

/* Chế độ logo ảnh (chọn "Ảnh logo" trong Gamuda Menu Header) — thay 2 dòng chữ bằng 1 ảnh, giới
   hạn chiều cao để không phá layout hàng header dù ảnh gốc to/nhỏ khác nhau. */
.gl-logo__image {
	display: block;
	max-height: 48px;
	width: auto;
}

.gl-logo__tag {
	font-family: var(--gl-font-sans);
	font-weight: 500;
	font-size: var(--gl-fs-eyebrow);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gl-gold);
}

/* Gap giảm từ "--gl-gap-lg" (32px) xuống "--gl-gap-md" (24px) — menu mặc định (option "Gamuda Menu
   Header") có tới 7 mục hàng đầu + "Xem thêm" + nút CTA, rộng hơn hẳn menu riêng của trang chủ (đã
   test khi chỉnh breakpoint @media max-width:1366px trước đó); ở đúng 7 mục này, ".gl-nav__inner"
   (max-width 1440px, không giãn thêm dù màn hình rộng hơn) thiếu ~51px mới đủ 1 hàng dù màn hình có
   rộng bao nhiêu — bớt gap bù đủ khoảng thiếu đó mà không cần đụng tới cỡ chữ/breakpoint. */
.gl-nav__menu {
	display: flex;
	align-items: center;
	gap: var(--gl-gap-md);
}

/* Không cho item menu tự co lại (mặc định flex-shrink:1) khi hàng ngang gần hết chỗ — co lại kiểu
   đó khiến CHỮ bên trong xuống 2 dòng (mất cân đối) thay vì báo hiệu rõ ràng là hết chỗ. Giữ đúng
   bề rộng tự nhiên từng item; JS (glSyncNavOverflow) đo phần dư/thiếu thật dựa trên bề rộng tự
   nhiên này để quyết định đẩy bớt item nào sang "Xem thêm", thay vì để trình duyệt tự ý bóp méo
   chữ. */
.gl-nav__menu > * {
	flex-shrink: 0;
}

/* Màu chữ ("color") phải nối thêm "body.gamuda-landing" — nếu không, rule reset toàn site
   "body.gamuda-landing a { color: inherit }" (gamuda-tokens.css, phía trên) đặc hiệu hơn 1 chút
   (2 element "body"+"a" so với 1 element "a" ở đây, cùng 1 class) nên thắng, làm chữ menu rơi về
   màu chữ thường thay vì xanh như mong muốn — cùng gotcha đã gặp với ".gl-hero__mobile-img". */
body.gamuda-landing .gl-nav__menu a {
	font-family: var(--gl-font-serif);
	font-size: var(--gl-fs-nav);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--gl-text);
	transition: color 0.2s ease;
	/* Đi cùng "flex-shrink:0" ở ".gl-nav__menu > *" — không cho chữ tự xuống dòng khi item bị ép
	   hẹp lại, để JS đo đúng bề rộng 1 dòng thật của item đó. */
	white-space: nowrap;
}

/* Nút CTA "Nhận bảng giá" là 1 item của "#gl-nav-menu" (xem header-gamuda.php) nên cũng bị rule
   serif+màu xanh ở trên áp vào — giữ lại đúng font sans/màu vàng kiểu nút bấm (".gl-btn--solid"
   gốc), không đổi theo menu chữ thường xung quanh. QUAN TRỌNG: phải nối thêm "body.gamuda-landing"
   cho "color" — thiếu tiền tố này, "body.gamuda-landing .gl-nav__menu a" (2 class + 2 element) đặc
   hiệu HƠN ".gl-nav__menu .gl-nav__cta" (chỉ 2 class, 0 element) nên vẫn thắng, đè chữ nút thành
   xanh trùng màu nền — nút CTA hoá ra "mất chữ" (bug thật đã gặp, xem "--gl-btn--solid" gốc dùng
   "--gl-gold" làm màu chữ). */
body.gamuda-landing .gl-nav__menu .gl-nav__cta {
	font-family: var(--gl-font-serif);
	font-size: var(--gl-fs-nav);
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--gl-white);
	/* ".gl-btn" gốc ép "text-transform:uppercase" cho mọi nút — riêng nút này giờ dùng font serif
	   giống menu chữ thường nên viết hoa toàn bộ không hợp, chỉ giữ hoa chữ cái đầu như admin gõ. */
	text-transform: none;
}

/* Giống hệt nút "Nhận bảng giá" ở hero banner — cả 2 đều dùng chung ".gl-btn--solid:hover" (gốc,
   ngay trên đầu file) nên lẽ ra tự giống nhau, nhưng riêng ở đây bị rule
   "body.gamuda-landing .gl-nav__menu a:hover" đè mất phần "color" vì đặc hiệu cao hơn (2 element +
   3 class so với 1 element + 3 class) — border vẫn đúng (rule đó không đụng "border-color") nên
   trước đây chữ/viền lệch tông nhau lúc hover. Khai báo lại đúng màu ở đây để khớp lại cả 2. */
body.gamuda-landing .gl-nav__menu .gl-nav__cta:hover {
	color: var(--gl-white);
}

/* Chữ menu mặc định đã đổi sang xanh (giống màu tiêu đề) — hover cần 1 màu KHÁC để còn phân biệt
   được trạng thái, dùng vàng (đã là màu "tương tác/nhấn" chuẩn của site, VD ".gl-btn--outline:hover"). */
/* Cả 2 rule dưới đây cũng phải nối "body.gamuda-landing" — cùng lý do với rule màu mặc định ở trên:
   thiếu tiền tố, "body.gamuda-landing .gl-nav__menu a" (2 class + 2 element) vẫn đặc hiệu hơn (2
   class + 1 element), âm thầm đè mất màu hover/active dù các rule này đứng sau trong file. */
body.gamuda-landing .gl-nav__menu a:hover {
	color: var(--gl-gold);
}

/* Active (mục đang đúng section hiện tại) dùng vàng + đậm — tách hẳn khỏi màu xanh mặc định, đồng
   thời đủ khác hover (vàng nhưng KHÔNG đậm) để phân biệt "đang xem" (bền, đậm) với "đang rê chuột"
   (thoáng qua, không đậm). */
body.gamuda-landing .gl-nav__menu a.is-active,
body.gamuda-landing .gl-nav__more-panel a.is-active {
	color: var(--gl-gold);
	font-weight: 700;
}

.gl-nav__more.is-active .gl-nav__more-toggle {
	color: var(--gl-gold);
	font-weight: 700;
}

.gl-nav__more {
	position: relative;
}

/* JS (glSyncNavOverflow, gamuda-home.js) tự đẩy bớt mục menu ít quan trọng hơn vào panel này khi
   hàng ngang không đủ chỗ — nếu trang đó vốn không cấu hình sẵn mục "Xem thêm" nào, JS tự dựng cả
   khối ".gl-nav__more" này (rỗng ban đầu). Lúc rộng lại đủ chỗ, JS trả hết mục về hàng chính, khối
   rỗng để lại vẫn còn trong DOM — ẩn hẳn để không lộ ra 1 nút "Xem thêm" vô nghĩa (bấm vào không có
   gì). */
.gl-nav__more--empty {
	display: none;
}

/* Đồng bộ với các mục menu chữ khác (font serif, đậm 600, màu xanh) — trước đây khối này riêng 1
   font/màu khác hẳn ("--gl-font-sans"/"--gl-text") vì chỉ lo reset default trình duyệt cho
   "<button>", giờ khớp lại đúng "body.gamuda-landing .gl-nav__menu a" ở trên. Vẫn giữ "!important"
   ở các thuộc tính reset button gốc (background/border/box-shadow/border-radius/text-transform) —
   không đụng tới, chỉ đổi phần chữ/màu. */
.gl-nav__more-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	/* Reset padding mặc định của <button> (Flatsome theme cha gán ~16.8px 2 bên) — "Xem thêm" là
	   nút dạng chữ (nền/viền trong suốt) nên phải sát các mục menu khác, khoảng cách để ".gl-nav__menu
	   { gap }" lo, không tự chừa lề trái/phải riêng. */
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	outline: none;
	cursor: pointer;
	font-family: var(--gl-font-serif) !important;
	font-size: var(--gl-fs-nav) !important;
	font-weight: 700 !important;
	line-height: inherit !important;
	letter-spacing: 0.04em !important;
	text-transform: none !important;
	color: var(--gl-text);
	transition: color 0.2s ease;
}

.gl-nav__more:hover .gl-nav__more-toggle,
.gl-nav__more:focus-within .gl-nav__more-toggle {
	color: var(--gl-gold);
}

.gl-nav__more-chevron {
	display: flex;
	width: 12px;
	height: 12px;
	transition: transform 0.2s ease;
}

.gl-nav__more:hover .gl-nav__more-chevron,
.gl-nav__more:focus-within .gl-nav__more-chevron {
	transform: rotate(180deg);
}

.gl-nav__more-panel {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -6px);
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	min-width: 170px;
	padding: 8px;
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-sm);
	box-shadow: 0 16px 32px rgba(30, 55, 111, 0.12);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 50;
}

/* CHỈ áp dụng khi menu còn hàng ngang (dropdown "Xem thêm" nổi, đúng lý do có "left:50% +
   translate(-50%,...)" ở rule gốc bên trên — canh giữa dropdown so với nút "Xem thêm"). Thiếu
   @media này trước đây khiến rule vẫn khớp cả ở drawer mobile: ".gl-nav__more-panel" tuy đã reset
   "transform:none" ở @media max-width:767px (dưới), nhưng selector 3 lớp ":focus-within" bên dưới
   có độ đặc hiệu CAO HƠN nên vẫn thắng, đè lại "transform:translate(-50%,0)" ngay khi trình duyệt
   đưa focus vào bên trong panel (ví dụ Safari/iOS tự focus khi mở drawer) — với panel rộng 100%
   màn hình, "translateX(-50%)" kéo lệch nguyên khối sang trái ĐÚNG NỬA chiều rộng của nó, hiện ra
   như toàn bộ mục "Xem thêm" (Giá Bán, Thanh toán...) bị cắt/lệch hẳn sang trái, lỗi cố định user
   phản hồi (không tự hết) chứ không phải hiệu ứng animation thoáng qua — xác nhận qua so khớp con số
   đo thực tế (~-124px lệch ở panel rộng ~311px, gần đúng nửa chiều rộng đó). */
@media (min-width: 768px) {
	.gl-nav__more:hover .gl-nav__more-panel,
	.gl-nav__more:focus-within .gl-nav__more-panel {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}
}

.gl-nav__more-panel a {
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 15px;
	white-space: nowrap;
}

.gl-nav__more-panel a:hover {
	background: var(--gl-cream);
	color: var(--gl-green);
}

/* Ẩn hẳn ở desktop (không chỉ ẩn nút "gl-nav__burger" bên trong) — khối bọc này chỉ chứa đúng 1
   nút burger, nếu vẫn "display:flex" dù rỗng/vô hình thì nó vẫn là 1 flex item THẬT của
   ".gl-nav__inner" (justify-content:space-between chia 2 khoảng trống thay vì 1, kéo cả menu lệch
   vào trong, để hở khoảng trống lớn phía tay phải trước "Nhận bảng giá" thay vì đẩy sát mép phải).
   @media max-width:1366px hiện lại đúng lúc nút burger cũng hiện. */
.gl-nav__actions {
	position: relative;
	z-index: 601;
	display: none;
	align-items: center;
	gap: var(--gl-gap-md);
}

.gl-nav__cta {
	padding: 10px 24px;
	font-size: var(--gl-fs-label);
	letter-spacing: 0.09em;
}

.gl-nav__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-sm);
	padding: 0;
}

.gl-nav__burger span {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--gl-green);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.gl-nav__burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.gl-nav__burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.gl-nav__burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ===== Footer (footer-gamuda.php) — component dùng chung ===== */
.gl-footer {
	background: var(--gl-green-dark);
	color: var(--gl-white);
}

.gl-footer__top {
	max-width: calc(var(--gl-container-max) + (var(--gl-section-x) * 2));
	box-sizing: border-box;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gl-gap-2xl);
	padding: 96px var(--gl-section-x) 0;
}

.gl-footer__brand {
	flex: 1 1 340px;
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-md);
	max-width: 420px;
}

.gl-footer__logo {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gl-footer__logo-name {
	font-family: var(--gl-font-serif);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0.08em;
	color: var(--gl-white);
}

.gl-footer__logo-tag {
	font-size: var(--gl-fs-eyebrow);
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gl-gold);
}

.gl-footer__brand p {
	font-size: var(--gl-fs-body-sm);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
}

/* Mạng xã hội — chuyển vào cột logo/mô tả (imperia không để ở hàng dưới cùng). */
.gl-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gl-gap-md);
	margin-top: var(--gl-gap-xs);
}

/* Nối "body.gamuda-landing" để thắng reset "body.gamuda-landing a { color:inherit }" — nếu không,
   "color" ở đây (1 lớp + 1 element, kém đặc thù hơn reset "body + .lớp + element") luôn thua, chữ
   render màu kế thừa (trắng, từ ".gl-footer") thay vì đúng màu vàng đã định. */
body.gamuda-landing .gl-footer__social a {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gl-gold);
}

.gl-footer__social a:hover {
	color: var(--gl-gold-bright);
}

/* Các nhóm liên kết động (footer_groups) + cột "Liên hệ" cố định — cùng cỡ, cùng khoảng cách. */
.gl-footer__group,
.gl-footer__contact {
	flex: 1 1 160px;
	min-width: 150px;
	max-width: 260px;
}

/* Nối "body.gamuda-landing" để thắng reset "body.gamuda-landing h1,h2,h3,h4 { margin:0 }"
   (gamuda-tokens.css) — <h4> không có class heading riêng nên cũng phải khai lại font-family để
   không rơi về "Koho" của Flatsome. */
body.gamuda-landing .gl-footer__group-title {
	font-family: var(--gl-font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gl-gold);
	margin: 0 0 var(--gl-gap-md);
}

.gl-footer__group-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--gl-gap-xs);
}

/* Nối "body.gamuda-landing" — cùng lý do với ".gl-footer__social a" ở trên, "color" mới thắng được
   reset "body.gamuda-landing a { color:inherit }". */
body.gamuda-landing .gl-footer__group-list a {
	font-size: var(--gl-fs-body-sm);
	color: rgba(255, 255, 255, 0.7);
	display: inline-block;
	padding: 2px 0;
}

.gl-footer__group-list a:hover {
	color: var(--gl-gold-bright);
}

.gl-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-sm);
}

.gl-footer__contact-item {
	display: flex;
	gap: var(--gl-gap-xs);
	align-items: flex-start;
}

.gl-footer__contact-item svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
}

.gl-footer__contact-label {
	display: block;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.45);
}

/* Giá trị (Hotline/Email = <a>, Địa chỉ = <span>) — cùng 1 style: 14px, trắng. */
/* Nối "body.gamuda-landing" — giá trị (Hotline/Email) là <a>, "color" cần thắng reset
   "body.gamuda-landing a { color:inherit }" (địa chỉ là <span> nên không bị ảnh hưởng, nhưng vẫn
   viết chung 1 rule cho gọn, prefix thừa không hại gì với span). */
body.gamuda-landing .gl-footer__contact-val {
	display: block;
	font-size: var(--gl-fs-body-sm);
	color: var(--gl-white);
}

body.gamuda-landing a.gl-footer__contact-val:hover {
	color: var(--gl-gold-bright);
}

.gl-footer__bottom {
	max-width: calc(var(--gl-container-max) + (var(--gl-section-x) * 2));
	box-sizing: border-box;
	margin: 0 auto;
	padding: var(--gl-gap-xl) var(--gl-section-x) 48px;
}

.gl-footer__divider {
	height: 1px;
	background: var(--gl-gold);
	opacity: 0.3;
	margin-bottom: var(--gl-gap-lg);
}

.gl-footer__bottom-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gl-gap-md);
	flex-wrap: wrap;
}

.gl-footer__copy {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.4);
	max-width: 640px;
}

.gl-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gl-gap-lg);
}

/* Nối "body.gamuda-landing" — cùng lý do "color" ở trên. */
body.gamuda-landing .gl-footer__legal a {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
}

.gl-footer__legal a:hover {
	color: var(--gl-gold-bright);
}

/* ===== RESPONSIVE — Nav & Footer =====
 * Breakpoint: >=1024 desktop đầy đủ, 768-1023 tablet, 481-767 mobile lớn, <=480 mobile nhỏ.
 * Figma chỉ có khung desktop 1440px — phần responsive dưới đây là tự thiết kế thêm.
 */
body.gl-menu-open {
	overflow: hidden;
}

/* Hiệu ứng từng item menu mobile xuất hiện lần lượt từ trên xuống khi mở menu (gamuda-home.js
   gán animation-delay tăng dần cho mỗi <a> theo đúng thứ tự hiển thị trước khi thêm class "is-open"). */
@keyframes glNavItemIn {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Breakpoint RIÊNG cho nav — dưới mốc này mới chuyển hẳn sang menu dạng drawer toàn màn hình (che
   hết trang, cuộn dọc). TỪNG dùng 1 mốc px cố định (1366px, rồi 1440px) để chia "đủ chỗ hàng ngang"
   / "hết chỗ, chuyển drawer" — vỡ trận 2 lần vì menu MẶC ĐỊNH dùng chung mọi trang dự án có SỐ MỤC
   khác trang chủ (7-8 mục so với 6 mục), nên 1 mốc cố định không thể đúng cho cả 2, và ngay cả khi
   "vá" bằng cách đẩy mốc lên 1440px, mốc đó lại QUÁ CAO, khiến màn hình "Laptop L" (1440px, thừa
   chỗ thật) vẫn bị rơi vào drawer oan uổng. Thay vì tiếp tục dò 1 con số "vừa đủ" (không có, vì số
   mục menu do admin tự cấu hình, thay đổi được), giờ hàng ngang LUÔN hiển thị từ 768px trở lên, JS
   (glSyncNavOverflow, gamuda-home.js) tự đo bề rộng thật còn trống mỗi khi resize và đẩy bớt mục ít
   quan trọng hơn (từ cuối menu) vào "Xem thêm" cho tới khi vừa đúng 1 hàng — đúng cho MỌI số lượng
   mục, không cần biết trước hàng đó có bao nhiêu mục. Dưới 768px (ngang bằng breakpoint mobile
   chung của các section khác) mới thật sự không đủ chỗ dù đã đẩy hết vào "Xem thêm" (chỉ còn vừa đủ
   logo + CTA), chuyển hẳn sang drawer.
   (Đã thử thêm điều kiện cảm ứng "(hover:none) and (pointer:coarse)" để riêng iPad ngang 1024px dùng
   drawer còn laptop 1024px dùng hàng ngang — bỏ lại vì Chrome DevTools "Responsive" (cách test chính
   dùng ở đây) mặc định GIẢ LẬP cảm ứng cho MỌI độ rộng tùy chỉnh, khiến laptop test qua DevTools cũng
   bị tính nhầm thành iPad. Tham khảo mekonggrandplaza.vn — site đó KHÔNG phân biệt cảm ứng, chỉ dùng
   1 mốc độ rộng (~991px) và giữ chữ menu nhỏ (11.5-12.5px) xuyên suốt để luôn đủ chỗ; áp dụng cùng
   tinh thần ở đây qua "@media (min-width:1024px) and (max-width:1300px)" bên dưới — thu nhỏ đủ mạnh
   để menu NẶNG NHẤT (7-8 mục, dùng chung mọi trang dự án) vẫn vừa đủ 1 hàng ở 1024px mà không cần
   tới bước đẩy vào "Xem thêm" nữa, JS chỉ còn đóng vai trò lưới an toàn cho trường hợp admin thêm
   quá nhiều mục trong tương lai.) */
@media (max-width: 767px) {
	.gl-nav__actions {
		display: flex;
	}

	.gl-nav__burger {
		display: flex;
	}

	/* "position: sticky" vẫn có thể mất tác dụng trên 1 số trình duyệt mobile khi body bị 1 lớp
	   khác (VD: khóa cuộn nền lúc mở popup) đổi kiểu hiển thị giữa chừng lúc đang cuộn dở — ép
	   hẳn sang "fixed" để header luôn dính đúng đầu trang bất kể trạng thái cuộn/scroll container
	   nào. Vì bị đưa ra khỏi luồng bình thường, JS (gamuda-home.js) sẽ đệm khoảng trống đúng bằng
	   chiều cao thật của header vào ngay phần tử theo sau, tránh nội dung bị header đè lên. */
	.gl-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
	}

	/* Che nền hàng header khi drawer mở — xem chú thích ".gl-nav__mask" trong header-gamuda.php:
	   drawer cuộn (".gl-nav__menu") là ANH EM của khối này trong cùng ".gl-nav__inner", không
	   phải hậu duệ của ".gl-nav" theo cách z-index của ".gl-nav" so được với nó. Cần 1 phần tử
	   anh em thật sự, phủ kín cả hàng, z-index cao hơn drawer để menu item cuộn lên không lộ ra
	   qua khoảng trống giữa logo và nút đóng. */
	.gl-nav__mask {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 96px;
		z-index: 601;
		background: var(--gl-white);
	}

	.gl-nav__menu {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 600;
		width: 100%;
		height: 100vh;
		/* "100vh" trên trình duyệt mobile thật tính theo chiều cao TỐI ĐA (như khi thanh địa chỉ/
		   thanh công cụ dưới cùng đang ẩn), cao hơn vùng hiển thị thật — cùng gotcha/cách né đã dùng
		   cho ".gl-popup" (xem gamuda-home.css). "dvh" tính đúng theo vùng hiển thị thật tại thời
		   điểm đó, "vh" đứng trước làm fallback cho trình duyệt cũ chưa hỗ trợ. */
		height: 100dvh;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		/* padding-bottom rộng hơn nhiều so với "var(--gl-gap-lg)" cũ + cộng thêm
		   "env(safe-area-inset-bottom)" (vùng home-indicator/thanh điều hướng cử chỉ trên iOS) —
		   nút CTA "Nhận bảng giá" là item CUỐI CÙNG của drawer (xem header-gamuda.php), nếu không
		   chừa đủ khoảng đệm sẽ bị thanh công cụ/chrome của trình duyệt mobile che mất phần dưới,
		   cuộn hết cỡ vẫn không thấy/bấm được nút. */
		padding: 96px var(--gl-gap-lg) calc(var(--gl-gap-lg) + 72px + env(safe-area-inset-bottom, 0px));
		background: var(--gl-white);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
		transform: translateY(-100%);
		transition: transform 0.3s ease;
		overflow-y: auto;
	}

	.gl-nav__menu.is-open {
		transform: translateY(0);
	}

	.gl-nav__menu a {
		font-size: 16px;
		width: 100%;
		padding: 12px 0;
		border-bottom: 1px solid var(--gl-border);
		text-align: center;
		opacity: 0;
	}

	/* Căn lề chữ menu mobile — sửa được qua ACF (Cài Đặt Chung > "Gamuda Menu Header" > tab "Menu" >
	   "Căn lề chữ menu (mobile)", xem header-gamuda.php), không cần sửa CSS mỗi lần muốn đổi. Rule
	   ".gl-nav__menu a" ở trên đã có "text-align:center" làm mặc định — 2 modifier dưới đây chỉ cần
	   ghi đè khi admin chọn khác "Căn giữa" (đứng sau nên tự thắng theo thứ tự nguồn, cùng độ đặc
	   hiệu). Áp dụng luôn cho cả mục trong "Xem thêm" (".gl-nav__more-panel a", lồng bên trong cùng
	   ".gl-nav__menu" nên tự khớp theo selector hậu duệ). */
	.gl-nav__menu--align-left a {
		text-align: left;
	}

	.gl-nav__menu--align-right a {
		text-align: right;
	}

	.gl-nav__menu.is-open a {
		animation: glNavItemIn 0.35s ease forwards;
	}

	.gl-nav__more {
		width: 100%;
	}

	.gl-nav__more-toggle {
		display: none;
	}

	.gl-nav__more-panel {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		width: 100%;
		padding: 0;
		margin-top: 0;
		background: transparent;
		border: none;
		box-shadow: none;
	}

	.gl-nav__more-panel a {
		font-size: 16px;
		padding: 12px 0;
		border-bottom: 1px solid var(--gl-border);
		border-radius: 0;
	}

	/* CTA giờ nằm trong #gl-nav-menu (item cuối cùng, xem header-gamuda.php) để tự động rơi
	   xuống cuối drawer dọc trên mobile — ghi đè lại các thuộc tính "a" chung của menu (vốn dành
	   cho link chữ) để nó vẫn trông như 1 nút bấm thật (không viền gạch chân, đủ khoảng đệm). */
	.gl-nav__menu .gl-nav__cta {
		margin-top: var(--gl-gap-md);
		padding: 14px 32px;
		border-bottom: none;
	}
}

/* Thu gọn nav ở dải 768-1300px (từ đúng mốc chuyển ra khỏi drawer tới gần 1440px) — mục tiêu hiển
   thị ĐẦY ĐỦ mục hàng ngang giống hệt 1440px+, kể cả với menu NẶNG NHẤT (7-8 mục dùng chung mọi
   trang dự án, không chỉ riêng 6 mục của trang chủ), không cần đẩy bớt vào "Xem thêm" nữa (JS
   glSyncNavOverflow, gamuda-home.js, vẫn chạy như thường — chỉ còn là lưới an toàn cho trường hợp
   admin thêm quá nhiều mục trong tương lai, tự đẩy bớt phần dư thay vì vỡ layout, không phải cơ chế
   chính nữa). Tham khảo cách mekonggrandplaza.vn xử lý cùng bài toán này — giữ chữ menu NHỎ
   (11.5-12.5px) xuyên suốt mọi độ rộng desktop thay vì to như thiết kế gốc của site này (18px), nên
   không bao giờ thiếu chỗ dù menu có 9-10 mục. Ban đầu chỉ áp dụng 1024-1300px — kiểm tra lại phát
   hiện 768-1023px (đủ rộng để KHÔNG chuyển drawer nhưng chưa đủ 1024 để được thu gọn) bị rơi vào
   khoảng trống, chữ vẫn cỡ gốc 18px trong khi chỗ còn hẹp hơn cả 1024px — kết quả TẤT CẢ mục đều bị
   đẩy vào "Xem thêm", chỉ còn mỗi "Xem thêm" + CTA hiện ra (trông như menu bị vỡ/trống trơn). Mở
   rộng hẳn xuống 768px để phủ kín toàn bộ dải hàng ngang, không chừa khoảng hở nào nữa. Không đụng
   tới 1440px+ (đã duyệt đẹp sẵn). Giảm đồng thời: cỡ chữ menu/CTA (chung 1 biến "--gl-fs-nav"),
   khoảng cách giữa các mục, khoảng cách logo-menu, cỡ chữ logo, padding nút CTA. */
@media (min-width: 768px) and (max-width: 1023px) {
	:root {
		--gl-fs-nav: 12px;
	}

	.gl-nav__inner {
		gap: 8px;
	}

	.gl-nav__menu {
		gap: 5px;
	}

	.gl-logo__name {
		font-size: 15px;
	}

	.gl-nav__cta {
		padding: 6px 12px;
	}
}

/* Riêng 1024-1300px rộng rãi hơn hẳn 768-1023px (đo thực tế: menu nặng nhất vẫn còn dư chỗ ở
   1024px dù đã tăng chữ) — tách thành mốc riêng để chữ menu lớn hơn 1 chút, cân đối hơn so với
   logo/nút CTA thay vì nhỏ y hệt dải 768px chật hẹp nhất. */
@media (min-width: 1024px) and (max-width: 1300px) {
	:root {
		/* 16.5px ở 1024px → 20px ở 1300px (khớp liền mạch cỡ gốc >1300px). Menu vẫn canh phải
		   (".gl-nav__inner { justify-content: space-between }" — mục menu bám nhóm CTA bên phải,
		   khoảng trống nằm giữa logo và mục đầu tiên). Thay cho 14px cố định trước đây trông quá nhỏ. */
		--gl-fs-nav: clamp(16.5px, 16.5px + (100vw - 1024px) * 3.5 / 276, 20px);
	}

	.gl-nav__inner {
		gap: 10px;
	}

	/* Khoảng cách giữa các mục menu FLUID: 12px ở 1024px (thoáng mà vẫn vừa 1 hàng cho menu nặng
	   nhất) → 24px ở 1300px (bằng gap gốc >1300px). */
	.gl-nav__menu {
		gap: clamp(12px, 12px + (100vw - 1024px) * 10 / 276, 24px);
	}

	.gl-logo__name {
		font-size: 16px;
	}

	.gl-nav__cta {
		padding: 7px 12px;
	}
}

@media (max-width: 767px) {
	.gl-nav__inner {
		padding: 16px 20px;
	}

	.gl-nav__cta span {
		display: none;
	}

	.gl-footer__top {
		gap: var(--gl-gap-xl);
		padding: 64px 24px 0;
	}

	.gl-footer__brand {
		flex-basis: 100%;
		max-width: none;
	}

	.gl-footer__bottom {
		padding: var(--gl-gap-lg) 24px 32px;
	}

	.gl-footer__bottom-row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--gl-gap-sm);
	}
}

@media (max-width: 600px) {
	.gl-footer__top {
		flex-direction: column;
	}

	.gl-footer__group,
	.gl-footer__contact {
		max-width: none;
	}
}

@media (max-width: 480px) {
	.gl-logo__name {
		font-size: 18px;
	}

	.gl-logo__image {
		max-height: 34px;
	}
}

/* Email dài (VD cskh.batdongsangroup@gmail.com) không có chỗ ngắt tự nhiên → tràn khỏi cột hẹp
 * (port từ The Privé 2026-09-28). */
.gl-footer__contact-item a,
.gl-footer__contact-item span {
	overflow-wrap: anywhere;
}
.gl-footer__contact-item > div {
	min-width: 0;
}

/* ===== Header kiểu "logo giữa + menu ngăn kéo" (template-parts/gamuda-home/header-center.php,
   js/gl-header-center.js; Menu Header > tab "Kiểu Header" = center) — tham khảo header website chính thức
   Norton Park (2026-10-09), bỏ phần chọn ngôn ngữ. Header cố định: trong suốt kính mờ tối trên ảnh đầu
   trang/section nền tối, nền cát ("is-solid") ở section nền sáng. ".gl-nav.gl-hc" (2 class) để thắng các
   rule ".gl-nav" của header kiểu cũ ở trên (sticky/nền trắng/fixed trên mobile). ===== */
body.gl-hc-on {
	--gl-hc-h: 68px;
}

/* Header cố định không chiếm chỗ: đệm đầu nội dung bằng đúng chiều cao header; ảnh đầu trang (hero/banner)
   kéo ngược lên nằm DƯỚI header để header trong suốt đè lên ảnh. */
body.gl-hc-on .gl-main {
	padding-top: var(--gl-hc-h);
}

body.gl-hc-on .gl-main > .gl-hero:first-child,
body.gl-hc-on .gl-main > .gl-listing-banner:first-child,
body.gl-hc-on .gl-main > .gl-news-hero:first-child {
	margin-top: calc(-1 * var(--gl-hc-h));
}

body.gl-hc-on .gl-main > .gl-news-hero:first-child {
	padding-top: calc(var(--gl-section-x) + var(--gl-hc-h));
}

body.gl-hc-on .gl-main > .gl-listing-banner:first-child .gl-listing-banner__inner {
	padding-top: calc(var(--gl-gap-2xl) + var(--gl-hc-h));
}

html.gl-hc-lock {
	overflow: hidden;
}

.gl-nav.gl-hc {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: auto;
	z-index: 500;
	color: var(--gl-white);
	background: rgba(30, 24, 20, 0.28);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: none;
	transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.gl-nav.gl-hc.is-solid {
	color: var(--gl-green-dark);
	background: color-mix(in srgb, var(--gl-gold-light) 95%, transparent);
	border-bottom-color: color-mix(in srgb, var(--gl-green-dark) 14%, transparent);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

body.admin-bar .gl-nav.gl-hc {
	top: 32px;
}

.gl-hc__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	max-width: var(--gl-container-max);
	height: var(--gl-hc-h);
	margin: 0 auto;
	padding: 0 var(--gl-section-x);
	box-sizing: border-box;
}

.gl-hc__left {
	justify-self: start;
	min-width: 0;
}

body.gamuda-landing .gl-hc__hotline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: inherit;
	white-space: nowrap;
	opacity: 0.9;
	transition: opacity 0.3s ease;
}

body.gamuda-landing .gl-hc__hotline:hover {
	opacity: 1;
	color: inherit;
}

.gl-hc__brand {
	justify-self: center;
	display: block;
	line-height: 0;
}

.gl-hc__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: clamp(130px, 14vw, 186px);
	max-height: 36px;
	object-fit: contain;
}

/* Logo sáng khi trong suốt, logo thường khi nền sáng. Không có "Logo sáng" -> logo thường đổi sang trắng. */
.gl-hc:not(.is-solid) .gl-hc__brand .gl-hc__logo--dark,
.gl-hc.is-solid .gl-hc__brand .gl-hc__logo--light {
	display: none;
}

.gl-hc__logo--invert {
	filter: brightness(0) invert(1);
}

.gl-hc__logo-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
	color: inherit;
}

.gl-hc__logo-name {
	font-family: var(--gl-font-serif);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gl-hc__logo-tag {
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.8;
}

.gl-hc__actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 12px;
}

body.gamuda-landing .gl-hc__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	font-family: var(--gl-font-sans);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: var(--gl-radius-pill);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Nút viền (Tour) + vệt sáng lướt qua theo chu kỳ như website chính thức. */
body.gamuda-landing .gl-hc__btn--outline {
	isolation: isolate;
	overflow: hidden;
	color: inherit;
	border-color: rgba(255, 255, 255, 0.38);
	--gl-hc-sheen: rgba(255, 255, 255, 0.32);
}

.gl-hc__btn--outline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: 60%;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, var(--gl-hc-sheen) 50%, rgba(255, 255, 255, 0) 100%);
	transform: translateX(-120%) skewX(-18deg);
	animation: gl-hc-sheen 4.5s ease-in-out infinite;
}

@keyframes gl-hc-sheen {
	0%, 55% { transform: translateX(-120%) skewX(-18deg); }
	100% { transform: translateX(260%) skewX(-18deg); }
}

body.gamuda-landing .gl-hc:not(.is-solid) .gl-hc__btn--outline:hover {
	color: var(--gl-white);
	background: rgba(255, 255, 255, 0.16);
	box-shadow: 0 0 18px rgba(255, 255, 255, 0.3);
}

body.gamuda-landing .gl-hc.is-solid .gl-hc__btn--outline {
	color: var(--gl-green-dark);
	border-color: color-mix(in srgb, var(--gl-gold) 45%, transparent);
	--gl-hc-sheen: rgba(255, 255, 255, 0.75);
}

body.gamuda-landing .gl-hc.is-solid .gl-hc__btn--outline:hover {
	color: var(--gl-white);
	background: var(--gl-gold);
	border-color: var(--gl-gold);
}

.gl-hc__btn--outline:hover::before {
	animation-play-state: paused;
	opacity: 0;
}

.gl-hc__btn .gl-hc-ic {
	flex-shrink: 0;
	transition: transform 0.6s ease;
}

.gl-hc__btn--outline:hover .gl-hc-ic {
	transform: rotate(360deg);
}

body.gamuda-landing .gl-hc__btn--solid {
	color: var(--gl-white);
	background: var(--gl-gold);
	border-color: var(--gl-gold);
}

body.gamuda-landing .gl-hc__btn--solid:hover {
	color: var(--gl-white);
	background: var(--gl-gold-bright);
	border-color: var(--gl-gold-bright);
}

body.gamuda-landing .gl-hc__burger {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 11px 3px;
	min-height: 0;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.gl-hc__burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.34s ease;
}

.gl-hc__burger:hover span:first-child {
	transform: translateX(-3px);
}

.gl-hc__burger:hover span:last-child {
	transform: translateX(3px);
}

body.gamuda-landing .gl-hc__burger:focus-visible,
body.gamuda-landing .gl-hc__btn:focus-visible {
	outline: 2px solid var(--gl-gold);
	outline-offset: 3px;
}

/* --- Ngăn kéo menu --- */
.gl-hc-drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
	pointer-events: none;
}

.gl-hc-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.gl-hc-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(30, 24, 20, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.gl-hc-drawer.is-open .gl-hc-drawer__backdrop {
	opacity: 1;
}

.gl-hc-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 3vh, 30px);
	width: min(400px, 86vw);
	padding: clamp(20px, 3vh, 30px) clamp(22px, 4vw, 34px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--gl-cream);
	border-left: 1px solid var(--gl-border);
	transform: translateX(100%);
	transition: transform 0.45s var(--gl-ease-out);
	box-sizing: border-box;
}

.gl-hc-drawer.is-open .gl-hc-drawer__panel {
	transform: translateX(0);
}

.gl-hc-drawer__panel:focus {
	outline: none;
}

.gl-hc-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.gl-hc-drawer__brand {
	display: block;
	line-height: 0;
	color: var(--gl-green-dark);
}

.gl-hc-drawer__brand .gl-hc__logo {
	max-width: clamp(118px, 30vw, 156px);
	max-height: 30px;
}

body.gamuda-landing .gl-hc-drawer__close {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	min-height: 0;
	color: var(--gl-text);
	background: none;
	border: 1px solid var(--gl-border);
	border-radius: 50%;
	box-shadow: none;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.gamuda-landing .gl-hc-drawer__close:hover {
	color: var(--gl-white);
	background: var(--gl-gold);
	border-color: var(--gl-gold);
}

.gl-hc-drawer__nav {
	display: flex;
	flex-direction: column;
}

body.gamuda-landing .gl-hc-drawer__nav a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: clamp(9px, 1.5vh, 15px) 0;
	font-family: var(--gl-font-serif);
	font-size: clamp(17px, 2.1vh, 20px);
	font-weight: 500;
	line-height: 1.3;
	color: var(--gl-green-dark);
	border-bottom: 1px solid var(--gl-border);
	transition: color 0.3s ease, padding-left 0.3s ease;
}

body.gamuda-landing .gl-hc-drawer__nav a:hover,
body.gamuda-landing .gl-hc-drawer__nav a:focus-visible {
	color: var(--gl-gold);
	padding-left: 8px;
}

.gl-hc-drawer__nav i {
	flex: 0 0 auto;
	min-width: 18px;
	font-family: var(--gl-font-sans);
	font-size: 10px;
	font-style: normal;
	letter-spacing: 0.16em;
	color: color-mix(in srgb, var(--gl-text) 55%, transparent);
}

.gl-hc-drawer__foot {
	display: grid;
	gap: 10px;
	margin-top: auto;
}

body.gamuda-landing .gl-hc-drawer__act {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	color: var(--gl-gold);
	border: 1px solid var(--gl-gold);
	border-radius: var(--gl-radius-pill);
	transition: background-color 0.3s ease, color 0.3s ease;
}

body.gamuda-landing .gl-hc-drawer__act:hover {
	color: var(--gl-white);
	background: var(--gl-gold);
}

body.gamuda-landing .gl-hc-drawer__tag {
	margin-top: 4px;
	font-size: 10px;
	line-height: 2;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-align: center;
	color: color-mix(in srgb, var(--gl-text) 55%, transparent);
}

/* Màn hình thấp: nút liên hệ 2 cột cho gọn. */
@media (max-height: 780px) {
	.gl-hc-drawer__foot {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	body.gamuda-landing .gl-hc-drawer__act {
		padding: 10px 12px;
		letter-spacing: 0.08em;
	}

	.gl-hc-drawer__tag {
		grid-column: 1 / -1;
	}
}

@media (max-width: 1023px) {
	.gl-hc__left {
		display: none;
	}

	.gl-hc__inner {
		grid-template-columns: auto 1fr;
	}

	.gl-hc__brand {
		justify-self: start;
	}
}

@media (max-width: 782px) {
	body.admin-bar .gl-nav.gl-hc {
		top: 46px;
	}
}

@media (max-width: 767px) {
	body.gl-hc-on {
		--gl-hc-h: 58px;
	}

	.gl-hc__inner {
		gap: 8px;
		padding: 0 16px;
	}

	.gl-hc__logo {
		max-width: clamp(104px, 34vw, 150px);
		max-height: 30px;
	}

	.gl-hc__actions {
		gap: 8px;
	}

	/* Nút Tour: chỉ còn icon trong vòng tròn. */
	body.gamuda-landing .gl-hc__btn--outline {
		padding: 8px;
		border-radius: 50%;
	}

	.gl-hc__btn-t {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	body.gamuda-landing .gl-hc__btn--solid {
		padding: 9px 15px;
		font-size: 10px;
		letter-spacing: 0.1em;
	}

	body.gl-hc-on .gl-main > .gl-listing-banner:first-child .gl-listing-banner__inner {
		padding-top: calc(var(--gl-gap-xl) + var(--gl-hc-h));
	}
}

@media (max-width: 600px) {
	body.admin-bar .gl-nav.gl-hc {
		top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gl-hc__btn--outline::before {
		display: none;
		animation: none;
	}

	.gl-hc-drawer__panel {
		transition: none;
	}
}