/*
 * Gamuda Land — Landing page (page-gamuda-home.php)
 * CSS riêng cho các section đặc thù của trang chủ mới.
 * Token màu/font/spacing dùng chung nằm ở gamuda-tokens.css.
 */

/* ===== HERO ===== */
.gl-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 760px;
	padding: var(--gl-section-x) 0;
	/* Nền đặc dự phòng — admin chưa chọn "Ảnh nền" thì section vẫn có màu tối hợp lý (chữ trắng/vàng
	   phía trên vẫn đọc được) thay vì nền trắng trống trơn, dù không còn ảnh thật nào để hiển thị. */
	background-color: var(--gl-green-dark);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Gradient thay cho mảng xanh dương đặc phủ toàn bộ hero (dễ gây cảm giác "ngã xanh" cả tấm ảnh,
   kể cả vùng trời/kiến trúc phía trên không cần độ tương phản) — gần như trong suốt ở đỉnh, đậm dần
   xuống đáy (đúng vùng chữ/nút CTA nằm) bằng màu GẦN ĐEN trung tính thay vì tông navy thương hiệu,
   để ảnh nền lên màu tự nhiên, chỉ tối vừa đủ cho chữ trắng/vàng vẫn đọc rõ. */
.gl-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 12, 18, 0.05) 0%, rgba(8, 12, 18, 0.25) 45%, rgba(6, 9, 14, 0.78) 100%);
}

/* Bọc ".gl-hero__content" bằng đúng công thức căn giữa full-bleed đã dùng cho các khối full-bleed
   khác (VD line ~755/969/1049) thay vì ".gl-section > .gl-container" lồng 2 lớp bình thường — Hero
   không dùng ".gl-container" được vì ảnh nền/overlay phải tràn hết viewport, còn phần chữ/nút bên
   trong vẫn cần thẳng hàng với mép trái của ".gl-container" ở các section khác (VD "Giới Thiệu" ngay
   bên dưới) trên MỌI bề rộng màn hình, kể cả màn hình rộng hơn 1440px (khi đó ".gl-container" không
   còn nằm sát mép section nữa mà tự căn giữa, lùi vào thêm so với padding gốc). */
.gl-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: calc(var(--gl-container-max) + (var(--gl-section-x) * 2));
	margin: 0 auto;
	padding: 0 var(--gl-section-x);
}

.gl-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-lg);
	max-width: 845px;
}

.gl-hero__subtitle {
	font-family: var(--gl-font-sans);
	font-weight: 600;
	font-size: var(--gl-fs-label);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	/* Norton Park: màu đồng (--gl-gold) chìm hẳn trên ảnh phối cảnh nhiều trời/ánh sáng — dùng be sáng + bóng mờ. */
	color: var(--gl-gold-light);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
	margin-bottom: calc(var(--gl-gap-lg) * -0.5);
}

.gl-hero__bg-caption {
	position: absolute;
	z-index: 1;
	right: var(--gl-section-x);
	bottom: var(--gl-gap-sm);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.65);
}

.gl-hero__lede {
	max-width: 628px;
	font-size: var(--gl-fs-body-lg);
	font-weight: 300;
	line-height: 1.6;
	color: var(--gl-cream);
}

.gl-hero__actions {
	display: flex;
	gap: var(--gl-gap-sm);
}

/* Ảnh + danh sách tag chỉ dành riêng cho layout mobile (xem @media max-width:767px bên dưới) — ẩn
   hẳn ở desktop vì desktop vẫn dùng đúng kiểu ảnh nền tràn viewport + overlay tối như thiết kế gốc.
   Selector nối thêm "body.gamuda-landing" (không chỉ ".gl-hero__mobile-img") để thắng specificity
   rule reset ảnh toàn site "body.gamuda-landing img { display:block }" (gamuda-tokens.css) — nếu
   không, rule reset đó (2 element + 1 class) đặc hiệu cao hơn 1 class trần, đè mất "display:none"
   ở đây dù đứng sau trong file. */
body.gamuda-landing .gl-hero__mobile-img {
	display: none;
}

.gl-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.gl-hero__tag {
	padding: 10px 16px;
	border-radius: var(--gl-radius-pill);
	font-size: 13px;
	font-weight: 600;
	/* Nền trong suốt + viền/chữ trắng — cùng phong cách nút ".gl-btn--outline" ("Khám phá dự án")
	   thay vì nền trắng đặc trước đây, để tag hoà vào ảnh nền hero thay vì nổi bật thành khối trắng
	   tách biệt. */
	background: transparent;
	border: 1px solid var(--gl-white);
	color: var(--gl-white);
}

/* ===== INTRO / VISION ===== */
.gl-intro__row {
	display: flex;
	/* "center" (không phải "flex-start") — khi mô tả dài đẩy cột chữ trái cao hơn cột ảnh phải, ảnh
	   tự canh giữa theo chiều dọc so với cả hàng thay vì dính cứng lên đầu, nhìn cân đối hơn thay vì
	   trống hẳn khoảng dưới ảnh. */
	align-items: center;
	justify-content: space-between;
	gap: var(--gl-gap-2xl);
}

.gl-intro__copy {
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-lg);
	max-width: 628px;
}

.gl-intro__copy p {
	font-size: var(--gl-fs-body);
	line-height: 1.7;
	color: var(--gl-text);
	text-align: justify;
	text-align-last: left;
}

/* Khung viền bo góc + khối cuộn cho mô tả dài — cùng pattern "frame bao ngoài, scroll bên trong"
   đã dùng cho ".gl-developer__desc-frame"/".gl-developer__desc-scroll" (viền không dính sát vào
   thanh cuộn vì nằm trên 1 element KHÔNG có overflow riêng).
   Padding phải/trái đảo lại so với trước — trước đây "frame" chừa 6px + "scroll" chừa 14px khiến
   thanh cuộn nằm LƯNG CHỪNG, nhìn gần chữ hơn gần viền khung (user phản ánh từ ảnh chụp) — đổi thành
   "frame" = 0 (sát hẳn viền, không chừa gì) + "scroll" rộng hơn (26px) để thanh cuộn bám sát mép
   khung, cách xa chữ hẳn ra, đúng ý muốn "gần sát bên phải khung, không sát chữ" (2px thử trước đó
   vẫn chưa đủ rõ theo phản hồi user, đẩy hẳn về 0). */
.gl-intro__desc-frame {
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
	padding: 20px 0 20px 20px;
}

.gl-intro__desc-scroll {
	max-height: 42vh;
	overflow-y: auto;
	padding-right: 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	scrollbar-width: thin;
	scrollbar-color: var(--gl-gold) var(--gl-border);
}

/* Cùng lỗi/cùng cách sửa đã ghi chi tiết ở ".gl-developer__desc-scroll" bên dưới file này — không
   lặp lại giải thích, xem chú thích ở đó. */
.gl-intro__desc-scroll > .gl-rich-content {
	flex-shrink: 0;
}

.gl-intro__desc-scroll::-webkit-scrollbar {
	width: 5px;
}

.gl-intro__desc-scroll::-webkit-scrollbar-track {
	background: var(--gl-border);
	border-radius: 3px;
}

.gl-intro__desc-scroll::-webkit-scrollbar-thumb {
	background: var(--gl-gold);
	border-radius: 3px;
}

/* ===== RICH TEXT (WYSIWYG) — dùng chung cho mọi field "mô tả" dạng rich text (Tổng Quan/Chủ Đầu
 * Tư/Vị Trí/Tiện Ích, xem inc/acf-gamuda-home.php: gl_acf_rich_description()) =====
 * Không cần định nghĩa lại font-size/color của "p" ở đây — mỗi nơi gọi ".gl-rich-content" đã nằm
 * lồng trong 1 container có sẵn rule "<container> p" áp dụng tự nhiên qua selector hậu duệ (VD
 * ".gl-intro__copy p" ngay trên, ".gl-developer__content p" bên dưới). Riêng 2 chỗ trước đây style
 * qua CLASS gắn thẳng lên từng "<p>" (không phải "<p>" trần) thì có thêm rule khớp lại ngay bên
 * dưới. Ảnh chèn trong rich text luôn bo góc + full-width theo đúng khu vực hiển thị — không cần
 * biến thể vì đúng 1 yêu cầu chung cho mọi section. */
.gl-rich-content img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gl-radius-md);
	margin: var(--gl-gap-md) 0;
	/* Bấm vào để phóng to xem qua lightbox dùng chung — xem "$(document).on('click', '.gl-rich-content
	   img, img.gl-zoomable', ...)" trong gamuda-home.js. */
	cursor: zoom-in;
}

/* Ảnh cố định trong template (không phải rich text) được đánh dấu mở lightbox — xem chú thích đầy
   đủ tại nơi gắn class này trong gamuda-home.js. */
img.gl-zoomable {
	cursor: zoom-in;
}

/* Khối "background-image" (không phải thẻ <img>) có gắn data-gl-lightbox-src — ảnh nền Hero, ảnh
   bản đồ "Vị Trí" (".gl-location__map-bg"), ảnh bản đồ "Liên Kết Vùng" (".gl-connectivity__map") —
   bấm vào mở lightbox xem ảnh gốc. Xem "$(document).on('click', '[data-gl-lightbox-src]', ...)"
   trong gamuda-home.js. */
[data-gl-lightbox-src] {
	cursor: zoom-in;
}

/* Trong Hero, chỉ vùng ảnh nền mới là "zoom-in" — phần chữ + nút CTA giữ con trỏ mặc định. */
.gl-hero[data-gl-lightbox-src] .gl-hero__content,
.gl-hero[data-gl-lightbox-src] .gl-hero__content * {
	cursor: auto;
}

.gl-hero[data-gl-lightbox-src] .gl-hero__content a,
.gl-hero[data-gl-lightbox-src] .gl-hero__content button {
	cursor: pointer;
}

/* Ảnh admin chèn kèm "Chú thích" (không phải field "Chú thích" của Thư Viện Media dùng cho
   ".gl-image-caption" ở các nơi khác — đây là chú thích gõ NGAY LÚC CHÈN ảnh vào rich text, WordPress
   tự bọc thành shortcode [caption] → "<figure class="wp-caption">...<figcaption class="wp-caption-text">").
   Theme trước đây không style 2 class này nên rơi về mặc định (gần như không đọc được, xem ảnh đối
   chiếu người dùng cung cấp) — canh lại cho ĐỒNG BỘ với ".gl-image-caption" (ảnh mặt bằng tầng, ảnh
   tiện ích...): chữ nghiêng, mờ, canh giữa, cùng cỡ chữ. "width" inline do WordPress tự gán theo đúng
   pixel gốc của ảnh — ép lại 100% để không tràn khỏi khung nội dung (ảnh gốc thường rộng hơn cột chữ). */
.gl-rich-content .wp-caption {
	width: 100% !important;
	margin: var(--gl-gap-md) 0;
}

.gl-rich-content .wp-caption img {
	margin: 0;
}

.gl-rich-content .wp-caption-text {
	display: block;
	/* Flatsome (theme cha) mặc định cho khối này 1 nền xám mờ + padding riêng — tách hẳn khỏi ảnh
	   phía trên thành 1 dải chữ nhật cứng, không liền lạc (đặc biệt lệch tông khi ảnh đã bo góc ở
	   trên). Reset về "không nền/không padding" để chữ chú thích trôi liền ngay dưới ảnh, giống hệt
	   ".gl-image-caption" dùng ở ảnh mặt bằng tầng/tiện ích. */
	background: none;
	padding: 0;
	margin: 8px 0 0;
	font-size: 13px;
	font-style: italic;
	color: var(--gl-text);
	opacity: 0.65;
	text-align: center;
}

/* Video nhúng (oEmbed từ URL trần / shortcode [embed]) — width/height của thẻ "iframe" là px gốc
   của video, không tự co giãn như "img" ở trên. "height: auto" + "aspect-ratio" (gán qua JS theo
   đúng width/height gốc từng video, xem gamuda-home.js) giữ đúng tỉ lệ khung hình khi co theo
   bề rộng màn hình, thay vì bị kéo dài/méo hình như khi giữ nguyên height cố định. */
.gl-rich-content iframe {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gl-radius-md);
	margin: var(--gl-gap-md) 0;
}

/* Đặc hiệu phải khớp ".gl-rich-content p:first-child/:last-child" bên dưới (2 lớp/pseudo-class +
   1 element) — nếu chỉ viết ".gl-rich-content p" (1 lớp + 1 element), rule reset toàn site
   "body.gamuda-landing p { margin: 0 }" (gamuda-tokens.css, 1 lớp + 2 element) đặc hiệu hơn nên vẫn
   thắng, margin-bottom không bao giờ áp dụng được. Dùng ":not(:last-child)" vừa đủ đặc hiệu vừa nói
   đúng ý: mọi đoạn "p" trừ đoạn cuối đều có khoảng cách dưới. */
.gl-rich-content p:not(:last-child) {
	margin-bottom: 1em;
}

.gl-rich-content p:first-child {
	margin-top: 0;
}

.gl-rich-content p:last-child {
	margin-bottom: 0;
}

/* Nối "body.gamuda-landing" để thắng reset "body.gamuda-landing a { color: inherit; text-decoration:
   none; }" (gamuda-tokens.css, đặc thù (0,1,0,2) — 2 thẻ "body"+"a" — cao hơn ".gl-rich-content a"
   thiếu tiền tố (0,1,0,1) dù sau hơn trong thứ tự file) — cùng bài học/cách sửa đã áp dụng cho mọi
   rule khác nhắm vào phần tử bên trong ".gl-rich-content" trong file này (list-check/heading margin ở
   trên); rule này trước giờ THIẾU tiền tố, chỉ chưa lộ ra vì hiếm khi thực sự test 1 link thật trong
   rich text (phát hiện khi thêm link "tel:" ở "notice_card"). */
body.gamuda-landing .gl-rich-content a {
	color: var(--gl-gold);
	text-decoration: underline;
}

.gl-rich-content ul,
.gl-rich-content ol {
	padding-left: 20px;
	margin-bottom: 1em;
}

/* "Danh sách check" — bật qua menu Định dạng > Formats trong trình soạn thảo (gắn class
   "gl-list-check" lên <ul>, xem inc/gl-editor-formats.php). Phỏng theo ".list-check" của
   imperia-sensapark nhưng dùng token màu + icon tick tròn của monrei (khớp gl_icon_check() /
   ".gl-popup__checklist"). Phải nối "body.gamuda-landing" để thắng reset
   "body.gamuda-landing ul { list-style: none; padding: 0 }" trong gamuda-tokens.css. */
body.gamuda-landing .gl-rich-content ul.gl-list-check {
	list-style: none;
	padding-left: 0;
	margin: 0 0 1em;
	display: grid;
	gap: var(--gl-gap-sm);
}

body.gamuda-landing .gl-rich-content ul.gl-list-check li {
	position: relative;
	padding-left: 34px;
}

/* Icon đổi từ vàng (--gl-gold, #0f7a8c) sang XANH LÁ (không phải "--gl-green" — token đó thực ra là
   navy, xem ghi chú đầu gamuda-tokens.css) — lấy đúng màu xanh lá/rêu (#4d5438 nét, rgba(20,156,178,
   .25) nền tròn) đã đo trực tiếp từ icon checklist thật của imperia-sensapark.vn (".list-check
   li::before"). Không có token "--gl-green" nào đúng nghĩa xanh lá trong hệ thống màu hiện tại nên
   hard-code riêng, không dùng biến. */
body.gamuda-landing .gl-rich-content ul.gl-list-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(20, 156, 178, 0.25)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 10.4L8.5 12.9L14 7.4' stroke='%231e376f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / 12px no-repeat;
}

/* Section nền tối (Danh Mục Dự Án, Đăng Ký) — nền icon sáng hơn cho tương phản. Nối
   "body.gamuda-landing" để đặc thù CAO HƠN rule gốc phía trên (rule đó dùng "background" dạng rút
   gọn + có prefix "body.gamuda-landing" nên đặc thù đã cao sẵn) — thiếu prefix ở đây thì
   "background-color" không bao giờ thắng được, section tối vẫn hiện nhầm tông vàng của bản sáng. */
body.gamuda-landing .gl-project-categories .gl-rich-content ul.gl-list-check li::before,
body.gamuda-landing .gl-registration .gl-rich-content ul.gl-list-check li::before {
	background-color: rgba(255, 255, 255, 0.16);
}

/* Tiêu đề trong rich text — dropdown "Đoạn văn / Tiêu đề 2..4" trên thanh công cụ WYSIWYG (xem
   inc/acf-gamuda-home.php: filter "acf/fields/wysiwyg/toolbars" + "block_formats"). Style đồng bộ
   hệ thống: serif, xanh lá, cỡ nhỏ hơn tiêu đề section (".gl-h2" = 44px) vì là tiêu đề PHỤ nằm
   trong phần nội dung. Nối "body.gamuda-landing" để "margin" thắng rule reset chung
   "body.gamuda-landing h2,h3,h4 { margin: 0 }" (gamuda-tokens.css). */
body.gamuda-landing .gl-rich-content h2,
body.gamuda-landing .gl-rich-content h3,
body.gamuda-landing .gl-rich-content h4 {
	font-family: var(--gl-font-serif);
	font-weight: 600;
	line-height: 1.3;
	color: var(--gl-green);
	margin: 1.5em 0 0.5em;
}

body.gamuda-landing .gl-rich-content h2:first-child,
body.gamuda-landing .gl-rich-content h3:first-child,
body.gamuda-landing .gl-rich-content h4:first-child {
	margin-top: 0;
}

.gl-rich-content h2 {
	font-size: var(--gl-fs-h3);
}

.gl-rich-content h3 {
	font-size: var(--gl-fs-h4);
}

.gl-rich-content h4 {
	font-size: 19px;
}

/* Bảng chèn tay qua nút "Bảng" trên thanh công cụ (admin tự gõ trong field Mô tả) — trước đây
   không có style riêng nên rơi về mặc định trình duyệt (viền xám mảnh do TinyMCE tự thêm thuộc
   tính "border"). Phỏng theo bảng giá tham khảo imperia-sensapark, đổi màu cho khớp bộ nhận diện
   monrei: header đặc navy (--gl-green, cùng tông "gl-h2"/nút CTA) thay vì olive; hàng chẵn tint kem;
   hover tint vàng nhạt.
   LƯU Ý: "display:block" trên <table> (thử ban đầu để bảng nhiều cột tự cuộn ngang) khiến <table>
   không còn là table formatting context — các <tr>/<td> bên trong tự sinh 1 bảng "ẩn danh" riêng
   co theo đúng độ rộng nội dung, PHỚT LỜ "width:100%" khai báo trên <table> (viền/bo góc vẫn full
   width vì đó là box của chính <table>, nhưng nội dung bảng bên trong hẹp hơn hẳn, nhìn như bảng
   lệch trái/không đầy khung). Giữ đúng "display: table" mặc định để width:100% có tác dụng thật;
   xử lý bảng quá rộng bằng cách cho ".gl-rich-content" tự cuộn ngang (xem rule ngay dưới) thay vì
   cuộn ngay trên <table>. */
/* Viền/bo góc/cuộn ngang ĐẶT Ở ".gl-rich-content__table-wrap" (div bọc ngoài, xem
   gl_wrap_rich_content_tables() trong functions.php) — KHÔNG đặt trực tiếp lên <table> nữa.
   "border-collapse: collapse" (bắt buộc, để viền dưới mỗi dòng nối liền không cách quãng) khiến
   trình duyệt ÂM THẦM BỎ QUA viền NGOÀI khai trực tiếp trên chính <table> — đã kiểm tra thật bằng
   JS (gán "border: 10px solid red" thẳng lên <table>, tuyệt đối không lên màu cạnh nào) — cùng lý
   do đã khiến ".gl-floor-lookup__table-wrap" phải tách viền ra 1 lớp bọc riêng từ đầu. */
.gl-rich-content__table-wrap {
	margin-bottom: 1.5em;
	/* "--gl-border" gần như cùng tông với nền kem/trắng của section nên viền ngoài gần như vô hình
	   (cùng lý do đã ghi ở ".gl-slider-dot", gamuda-tokens.css) — dùng màu xanh chủ đạo mờ đi thay
	   vì xám nhạt, để khung bảng thật sự nhìn thấy được thay vì chỉ còn mỗi viền dưới từng dòng. */
	border: 1px solid rgba(30, 55, 111, 0.2);
	border-radius: var(--gl-radius-md);
	/* "overflow:hidden" để bo góc thật sự CẮT được nền màu của <th> header (chỉ khai border-radius
	   trên khung bọc thì viền bo tròn nhưng nền <th> vẫn là hình chữ nhật vuông góc, tràn ra khỏi
	   viền tròn ở 2 góc trên — giống cách imperia-sensapark bo góc ".table-wrap" bọc ngoài <table>). */
	overflow: hidden;
}

.gl-rich-content table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

/* An toàn cho bảng/nội dung nào đó rộng hơn khung chứa (VD quá nhiều cột trên màn hình hẹp) — cuộn
   ngang đúng phần vượt khung thay vì đẩy vỡ layout section, không đụng chiều dọc/nội dung khác. */
.gl-rich-content {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.gl-rich-content table th,
.gl-rich-content table td {
	padding: 12px 16px;
	text-align: center;
	border-bottom: 1px solid var(--gl-border);
	border-right: none;
}

.gl-rich-content table thead th {
	background: var(--gl-green);
	color: var(--gl-white);
	font-family: var(--gl-font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: none;
}

/* "--gl-cream" gần như cùng tông với nền trắng nên dòng chẵn gần như không phân biệt được — đổi
   sang "--gl-surface-2" (đậm hơn 1 chút, vẫn trung tính) để thấy rõ hàng xen kẽ, giống độ tương phản
   bảng nền tối bên dưới (".gl-price-table--dark ... tbody tr:nth-child(even)") đang có sẵn. */
.gl-rich-content table tbody tr:nth-child(even) {
	background: var(--gl-surface-2);
}

.gl-rich-content table tbody tr:hover {
	background: rgba(15, 122, 140, 0.1);
}

.gl-rich-content table tbody tr:last-child td {
	border-bottom: none;
}

.gl-rich-content table tfoot td {
	font-weight: 700;
	background: var(--gl-surface-2);
	border-top: 1px solid var(--gl-border);
	border-bottom: none;
}

/* Kiểu bảng nổi bật (class "gl-table--highlight", gắn/gỡ qua nút riêng trên toolbar — xem
   mce-gl-table-style.js/inc/gl-editor-formats.php) — tham khảo ĐÚNG UI bảng "Bên Trong Căn Hộ" của
   imperia-sensapark.vn/noi-that-imperia-sensa-park/: nền xanh nhạt ĐỒNG NHẤT mọi dòng (không vằn
   sáng/tối xen kẽ như kiểu mặc định), cột đầu in đậm/viết hoa dạng nhãn, không viền ô — khác hẳn kiểu
   mặc định (tiêu đề nền xanh đậm/chữ trắng + dòng vằn). "border-collapse: separate" + "border-spacing"
   tạo khe hở nhỏ đều giữa các dòng (thấy nền trang lộ ra giữa dòng) thay vì các dòng dính liền nhau —
   TÁI DÙNG "background" đặt thẳng lên <td> (không phải <tr>) nên tự động THẮNG rule
   "tbody tr:nth-child(even)" mặc định (vẽ đè lên trên, không cần huỷ riêng). */
.gl-rich-content table.gl-table--highlight {
	border-collapse: separate;
	border-spacing: 0 4px;
}

.gl-rich-content table.gl-table--highlight th,
.gl-rich-content table.gl-table--highlight td {
	text-align: left;
	border-bottom: none;
	background: rgba(30, 55, 111, 0.1);
}

.gl-rich-content table.gl-table--highlight thead th {
	background: rgba(30, 55, 111, 0.16);
	color: var(--gl-green);
}

.gl-rich-content table.gl-table--highlight tbody tr:hover td {
	background: rgba(30, 55, 111, 0.16);
}

.gl-rich-content table.gl-table--highlight tbody td:first-child {
	width: 30%;
	font-family: var(--gl-font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gl-green);
	white-space: nowrap;
}

.gl-rich-content table.gl-table--highlight tbody td:last-child {
	color: var(--gl-text);
	font-weight: 600;
}

@media (max-width: 600px) {
	.gl-rich-content table.gl-table--highlight tbody td:first-child {
		white-space: normal;
	}
}

/* Bảng full-width, KHÔNG cuộn ngang trên mobile — tham khảo đúng bảng của imperia-sensapark.vn
   (chữ nhỏ hơn + đệm hẹp hơn + tiêu đề cột được xuống dòng, không giữ nguyên cỡ chữ/đệm desktop rồi
   bắt cuộn ngang) — cùng công thức đã dùng cho ".gl-floor-lookup__table". Chữ trong ô dữ liệu
   (không phải tiêu đề) đã tự xuống dòng sẵn (không có "white-space:nowrap"), chỉ tiêu đề cần đổi
   riêng vì đang cố định 1 dòng ("nowrap") để canh giữa gọn ở desktop. */
@media (max-width: 600px) {
	.gl-rich-content table {
		font-size: 11px;
	}

	.gl-rich-content table th,
	.gl-rich-content table td {
		padding: 8px 6px;
	}

	.gl-rich-content table thead th {
		white-space: normal;
	}
}

/* Bảng thông tin ở section "Tổng Quan" (layout overview) — chữ NỘI DUNG to hơn bảng rich-text mặc định
   (14px) cho dễ đọc vì đây là bảng chính của trang; tiêu đề cột giữ nguyên 12px. Chỉ áp dụng trong ".gl-overview". */
.gl-overview .gl-rich-content table td {
	font-size: 16px; /* đặt thẳng lên <td>: Flatsome có "td { font-size: .9em }" nên đặt ở <table> chỉ ra 14,4px */
	line-height: 1.55;
	padding: 14px 20px;
}

/* Cột nội dung (mọi cột trừ cột "Danh mục" đầu tiên) căn đều 2 bên, dòng cuối căn trái — giống đoạn văn
   rich-text trên site. "!important" vì bảng soạn trong trình soạn thảo gắn sẵn style="text-align: left"
   lên từng ô. Cột danh mục giữ căn trái (nhãn ngắn, giãn chữ trông lỗi). */
.gl-overview .gl-rich-content table tbody td:not(:first-child) {
	text-align: justify !important;
	text-align-last: left;
}

@media (max-width: 600px) {
	.gl-overview .gl-rich-content table td {
		font-size: 14px;
		padding: 10px 10px;
	}
}

.gl-intro__image {
	flex-shrink: 0;
	width: 100%;
	max-width: 519px;
}

/* "Vị trí ảnh (máy tính)" = Bên trái (field "intro_image_side") — chỉ máy tính; <= 1023px vẫn ảnh trên, chữ dưới. */
@media (min-width: 1024px) {
	.gl-intro--image-left .gl-intro__row {
		flex-direction: row-reverse;
	}
}

.gl-intro__image img {
	width: 100%;
	border-radius: var(--gl-radius-md);
}

/* ===== SPEC GRID (bảng thông số dự án — Vision section) ===== */
.gl-spec-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--gl-gap-2xl);
	margin-top: var(--gl-gap-2xl);
}

/* Nút CTA cuối section (tuỳ chọn, gl_acf_cta_group()/gl_render_cta()) dùng chung cho các section
   không có layout CSS riêng cho khối CTA (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ác section đã có khối CTA riêng theo
   layout lưới của mình (Giới Thiệu/Vị Trí/Liên Kết Vùng/Accordion) không dùng class này. Rỗng khi
   admin chưa đặt "Nhãn nút" (gl_render_cta() trả chuỗi rỗng) nên không chiếm khoảng trống thừa. */
.gl-section-cta {
	text-align: center;
	margin-top: var(--gl-gap-lg);
}

/* Nút CTA render 2 bản (xem section-intro.php) — desktop hiện bản trong ".gl-intro__copy" (ngay
   dưới mô tả), ẩn bản dưới bảng thông số; @media max-width:1023px đảo lại. "align-self:flex-start"
   (không phải mặc định "stretch" của flex item) để khối bọc nút không kéo giãn hết chiều rộng cột
   chữ — nút chỉ rộng vừa đủ nội dung. */
.gl-intro__cta-desktop {
	align-self: flex-start;
}

.gl-intro__cta-mobile {
	display: none;
}

.gl-spec-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gl-gap-md);
	padding: 16px 0;
	border-bottom: 1px solid var(--gl-border);
}

/* Bỏ viền dư thừa ở 2 đầu bảng — item đầu không cần viền trên (trước đây tới từ
   ".gl-spec-grid { border-top }" phía trên), item cuối không cần viền dưới. */
.gl-spec-row:last-child {
	border-bottom: none;
}

@media (min-width: 1024px) {
	/* Desktop: lưới 2 cột (".gl-spec-grid", bảng thông số dự án) nên "item cuối cùng" (theo DOM) chỉ
	   là nửa phải của HÀNG cuối — nửa trái (item áp chót) nằm cùng hàng đó cũng cần bỏ viền dưới để
	   2 bên đồng bộ, không lệch 1 bên còn viền 1 bên không. Khoanh vùng RIÊNG cho ".gl-spec-grid"
	   (không phải ".gl-spec-row:nth-last-child(2)" trần) — ".gl-spec-row" còn tái dùng cho
	   ".gl-payment__milestones" (danh sách 1 cột, không phải lưới 2 cột), nếu để trần sẽ xoá nhầm
	   viền dưới của item áp chót trong list 1 cột đó (bug thật đã gặp, VD danh sách có đúng 3 mốc
	   thì mốc thứ 2 mất viền dưới không đáng có). */
	.gl-spec-grid .gl-spec-row:nth-last-child(2) {
		border-bottom: none;
	}
}

.gl-spec-row__label {
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--gl-gold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.gl-spec-row__value {
	text-align: right;
	font-size: 15px;
	color: var(--gl-text);
}

/* Giá trị có gắn link (field "url", không bắt buộc — xem section-intro.php + acf-gamuda-home.php
 * field "intro_specs") — highlight màu vàng + gạch chân để phân biệt rõ với giá trị thường.
 * Selector nối thêm ".gl-spec-grid" (2 class) để thắng specificity rule chung
 * "body.gamuda-landing a { color: inherit; text-decoration: none; }" (1 class + 1 type). */
.gl-spec-grid .gl-spec-row__value--link {
	color: var(--gl-green);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s ease;
}

.gl-spec-grid .gl-spec-row__value--link:hover {
	color: var(--gl-green-dark);
}

/* ===== RESIDENCES ===== */
.gl-residences {
	background: var(--gl-white);
}

/* Danh sách tổng quan các tầng — mỗi nút bấm sẽ cuộn + mở đúng accordion tương ứng bên dưới (xem
   gamuda-home.js). Riêng cho section này, tham khảo ảnh đối chiếu người dùng cung cấp. */
.gl-residences__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gl-gap-sm);
	margin-bottom: var(--gl-gap-xl);
}

.gl-residences__tab {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: var(--gl-cream);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-pill);
	text-align: left;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.gl-residences__tab:hover,
.gl-residences__tab.is-active {
	border-color: var(--gl-gold);
	background: var(--gl-white);
}

.gl-residences__tab-num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--gl-green);
	color: var(--gl-gold);
	/* Sans — quy ước chung cho số liệu trên site, xem ".gl-showcase__counter". */
	font-family: var(--gl-font-sans);
	font-size: 12px;
	font-weight: 700;
}

/* Font khớp với ".gl-accordion__title" (thật ra kế thừa từ ".gl-accordion__header" — font-size
   22px/line-height 1.4) ngay bên dưới — cho đồng bộ giữa dải tab tổng quan và tiêu đề accordion
   tương ứng. */
/* "text-transform: none" ép rõ — Flatsome (theme cha) có rule ép hoa toàn bộ "<button>" (thắng
   theo specificity dù đứng trước trong nguồn), khiến nhãn tầng ("Tầng 3"...) hiện thành in hoa
   ("TẦNG 3") dù admin nhập đúng chữ thường/hoa đầu câu bình thường. Nối "body.gamuda-landing" để
   chắc chắn thắng, cùng cách xử lý specificity đã dùng nhiều lần trong file này. */
body.gamuda-landing .gl-residences__tab-label {
	font-family: var(--gl-font-sans);
	font-weight: 600;
	/* Giảm từ 22px (từng tăng lên để "khớp cỡ chữ tiêu đề accordion") — thực tế đặt cạnh nhau
	   trông quá to/mất cân đối so với cả khối, nhất là khi có 6-8 nút tầng cùng hàng. */
	font-size: 16px;
	line-height: 1.4;
	color: var(--gl-green);
	white-space: nowrap;
	text-transform: none;
}

.gl-residences__tab-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	opacity: 0.45;
}

/* Header accordion riêng cho Mặt Bằng: có thêm số thứ tự + mô tả ngắn nằm cùng hàng với tiêu đề
   (accordion ở section khác — Thanh Toán... — không có 2 phần tử này nên không bị ảnh hưởng). */
.gl-accordion__header--residences {
	align-items: flex-start;
	gap: var(--gl-gap-lg);
}

.gl-accordion__header--residences .gl-accordion__title {
	flex-shrink: 0;
	max-width: 360px;
	/* Giảm từ 22px kế thừa mặc định của ".gl-accordion__header" (dùng chung cho Thanh Toán/Chính
	   Sách/FAQ, vẫn giữ nguyên 22px ở các nơi đó) — riêng Mặt Bằng đặt cạnh nút tầng
	   ".gl-residences__tab-label" (cũng vừa giảm xuống 16px) nên cần nhỏ lại cho hài hòa, không lấn
	   át quá mức so với tổng thể danh sách accordion. */
	font-size: 18px;
}

.gl-accordion__subtitle {
	flex: 1;
	min-width: 0;
	padding-top: 6px;
	font-family: var(--gl-font-sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--gl-text);
	opacity: 0.75;
}

/* ===== TAB NỘI DUNG (mới) =====
 * Nút tab tái dùng nguyên kiểu "pill" của ".gl-residences__tab" (cùng nền sáng/cream, cùng cách đổi
 * viền+nền khi active — không đổi màu chữ, giữ đúng quy ước màu xanh --gl-green cho label bấm được).
 * Khung nội dung tái dùng padding/bóng đổ của ".gl-accordion__item" + ".gl-accordion__panel-inner"
 * nhưng KHÔNG animate max-height như accordion — chỉ 1 panel hiện tại 1 thời điểm nên chuyển thẳng
 * bằng display:none/block (xem JS), không cần hiệu ứng cao dần vì nội dung thay hẳn, không phải mở
 * rộng thêm bên dưới nội dung đang có sẵn. */
.gl-tab-content {
	/* Giảm từ 120px mặc định (".gl-section") — section liền ngay phía trên (VD "Hình Ảnh" khi ẩn
	   video, xem ".gl-gallery--no-video") cũng đã bớt padding-bottom, cộng cả 2 bên lại vẫn còn
	   khoảng trắng khá lớn giữa 2 section, bớt riêng padding-top ở đây cho khoảng cách gọn hơn. */
	padding-top: 60px;
}

.gl-tab-content__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gl-gap-sm);
	margin-bottom: var(--gl-gap-lg);
}

.gl-tab-content__tab {
	padding: 12px 28px;
	background: var(--gl-cream);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-pill);
	font-family: var(--gl-font-sans);
	font-weight: 600;
	font-size: 14px;
	color: var(--gl-green);
	text-transform: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.gl-tab-content__tab:hover,
.gl-tab-content__tab.is-active {
	border-color: var(--gl-gold);
	background: var(--gl-white);
}

/* Kiểu tab "Gạch chân" (field "tabs_style" = "underline", tham khảo tab chọn loại căn ở "Layout chi
   tiết" của imperia-sensapark.vn/mat-bang-imperia-sensa-park/) — chữ trơn, không nền/không bo góc,
   cả hàng có 1 gạch ngang mảnh làm nền chung, tab đang chọn có gạch dày màu vàng đè lên đúng vị trí
   đó (margin-bottom âm để gạch của tab nằm ĐÈ lên gạch nền của cả hàng, không phải 2 đường song song
   sát nhau). Selector 2 lớp class để CHỈ áp dụng khi bật kiểu này, không đụng kiểu "pill" mặc định
   (".gl-tab-content__tab" gốc ở trên, vẫn nguyên khi field = "rounded"). */
.gl-tab-content__tabs--underline {
	justify-content: flex-start;
	gap: var(--gl-gap-lg);
	border-bottom: 1px solid var(--gl-border);
}

.gl-tab-content__tabs--underline .gl-tab-content__tab {
	margin-bottom: -1px;
	padding: 0 0 16px;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--gl-text);
	opacity: 0.65;
}

.gl-tab-content__tabs--underline .gl-tab-content__tab:hover {
	background: transparent;
	border-bottom-color: var(--gl-border);
	opacity: 1;
}

.gl-tab-content__tabs--underline .gl-tab-content__tab.is-active {
	background: transparent;
	border-bottom-color: var(--gl-gold);
	color: var(--gl-green);
	opacity: 1;
}

/* Nút trái/phải cuộn hàng tab "Gạch chân" trên mobile — kiểu "underline" là kiểu DUY NHẤT còn cuộn
   ngang ở mobile (kiểu "pill" xếp chồng full-width, xem "@media (max-width:480px)" bên dưới), nên
   chỉ kiểu này mới cần nút. PHP luôn render 2 nút (section-tab-content.php) nhưng CSS ẩn hẳn ở đây,
   chỉ hiện lại đúng breakpoint 480px của JS (glInitTabContentNav() trong gamuda-home.js tự ẩn/hiện
   thêm theo có tràn hay không + theo vị trí đã cuộn tới đầu/cuối). */
.gl-tab-content__tabs-nav {
	display: none;
}

@media (max-width: 480px) {
	.gl-tab-content__tabs-scroll--underline {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.gl-tab-content__tabs-scroll--underline .gl-tab-content__tabs--underline {
		flex: 1 1 auto;
		min-width: 0;
	}

	.gl-tab-content__tabs-nav {
		/* Flatsome đặt "padding: 0 1.2em" cho MỌI <button> (không riêng gì ".flickity-prev-next-button"
		   — khác nút đó, nút này KHÔNG khớp "button[class*=\"gl-\"]" ở gamuda-tokens.css vì class không
		   chứa chữ "gl-" theo đúng nghĩa prefix "gl-tab-content__..." KHÔNG bắt đầu bằng "gl-" liền —
		   thật ra CÓ khớp "gl-" nhưng "min-width/min-height:0" ở đó không cứu được vụ này, vì đây là
		   PADDING, không phải min-width/height). Không tự reset thì "1.2em" (~18-19px MỖI bên, do
		   button kế thừa font-size từ ".gl-tab-content__tab" ~15.5px) cộng với "min-width:auto" mặc
		   định của flex item (kích thước tối thiểu tính luôn cả padding) ép nút rộng ra ~39px dù đã khai
		   "width:26px" — nút thật sự render thành HÌNH BẦU DỤC (39×26) thay vì hình tròn, icon mũi tên
		   coi như biến mất vì lọt thỏm giữa 1 khối bẹt trống trơn. */
		padding: 0;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		/* Đổi từ hình tròn 26×26 sang chữ nhật đứng (hẹp ngang, cao hơn) theo yêu cầu — bo góc nhẹ thay
		   vì bo tròn hết (50%), icon bên trong cũng phóng to hơn (xem "::before" bên dưới). */
		width: 28px;
		height: 40px;
		/* Lệch xuống để tâm nút thẳng hàng với tâm CHỮ của tab — không phải tâm hình học của cả khối
		   nút (button "is-active" cao hẳn ~51px do "padding-bottom:16px" cho gạch chân + line-height,
		   trong khi chữ chỉ chiếm ~16px ở phần TRÊN của khối đó). Giá trị đo trực tiếp bằng
		   Range.getClientRects() trên text node của tab (tâm chữ THẬT, không suy luận từ padding) —
		   khớp gần như tuyệt đối (lệch <1px) ở đúng cỡ nút hiện tại; đổi cỡ nút thì phải đo lại. */
		margin-bottom: 51px;
		/* Flatsome đặt "margin-right: 1em" cho MỌI <button> (cùng rule "padding:0 1.2em" đã nói ở trên)
		   — chỉ lộ rõ ở nút "prev" (còn ".gl-tab-content__tabs-nav--next" là con cuối nên margin-right
		   của nó không đẩy gì cả, không thấy tác dụng): đẩy hàng tab lệch xa nút prev hơn hẳn so với nút
		   next, làm khoảng cách 2 bên KHÔNG đều nhau dù CSS "gap:4px" của flex container đã đúng.
		   Reset về 0 để chỉ còn đúng 1 khoảng cách "gap" duy nhất, đều cho cả 2 bên. */
		margin-right: 0;
		/* Bỏ nền trắng + viền theo yêu cầu — nút trong suốt, hoà thẳng vào nền section (không hardcode
		   lại đúng "--gl-cream" vì section này luôn nằm trên nền mặc định của "body.gamuda-landing",
		   "transparent" tự khớp đúng bất kể ngữ cảnh, không cần biết chính xác mã màu). Chỉ còn icon
		   nổi lên trên nền, không còn khung/viền quanh nút. */
		background: transparent;
		border: none;
		border-radius: var(--gl-radius-sm);
		transition: opacity 0.2s ease;
	}

	/* Chỉ thật sự HIỆN nút khi JS đo được hàng tab có tràn (class do glInitTabContentNav() gán, xem
	   gamuda-home.js) — ít tab/tab ngắn vừa đủ 1 màn hình thì ẩn hẳn, tránh 2 nút mờ (is-disabled)
	   nằm đó vô nghĩa khi chẳng có gì để cuộn. */
	.gl-tab-content__tabs-scroll--has-overflow .gl-tab-content__tabs-nav {
		display: flex;
	}

	.gl-tab-content__tabs-nav.is-disabled {
		opacity: 0.35;
		pointer-events: none;
	}

	/* Không còn viền để đổi màu khi hover (đã bỏ "border") — đổi độ mờ của icon thay thế, vẫn có phản
	   hồi khi rê chuột dù nút giờ trong suốt hoàn toàn. */
	.gl-tab-content__tabs-nav:hover {
		opacity: 0.6;
	}

	/* Cùng 1 icon chevron với mũi tên slider ảnh cạnh bên (".gl-tab-content__slider .flickity-
	   prev-next-button::before") — đồng bộ ngôn ngữ icon trong cùng 1 section. Icon cỡ 26px — to hơn
	   nữa theo yêu cầu, nút giờ trong suốt (không còn khung/viền) nên icon to gần hết bề ngang 28px
	   của nút vẫn không bị cắt/tràn khung. */
	.gl-tab-content__tabs-nav::before {
		content: '';
		display: block;
		width: 26px;
		height: 26px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e376f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.gl-tab-content__tabs-nav--prev::before {
		transform: scaleX(-1);
	}
}

.gl-tab-content__panels {
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
	box-shadow: 0 4px 20px rgba(28, 28, 28, 0.06);
}

/* Kiểu "Gạch chân": khung nội dung bỏ hẳn thẻ trắng/viền/đổ bóng — trong suốt để lộ luôn nền của
   section (liền mạch với hàng tab gạch chân phía trên, giống cảm giác 1 khối duy nhất thay vì tab +
   card tách rời như kiểu "pill"). Dùng tổ hợp "+" (sibling ngay sau) thay vì lồng class vào
   ".gl-tab-content__wrap" vì "tabs-scroll" và "panels" là 2 phần tử NGANG HÀNG (xem
   section-tab-content.php) — không cần thêm 1 lớp bọc ngoài mới chỉ để đặt chung 1 class. Chọn theo
   ".gl-tab-content__tabs-scroll--underline" (khối BỌC NGOÀI hàng tab + 2 nút cuộn), KHÔNG phải
   ".gl-tab-content__tabs--underline" (giờ đã lồng 1 cấp bên trong, không còn là sibling trực tiếp
   của "panels" nữa) — nếu chọn nhầm về class cũ, selector "+" sẽ không khớp gì cả. */
.gl-tab-content__tabs-scroll--underline + .gl-tab-content__panels {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.gl-tab-content__panel {
	display: none;
	padding: var(--gl-gap-lg) 24px;
}

.gl-tab-content__panel.is-active {
	display: block;
}

/* Field richtext (".gl-rich-content") không tự định nghĩa cỡ chữ/màu — cần khai báo riêng cho
   đúng ngữ cảnh khung trắng này, cùng quy ước với ".gl-accordion__panel-inner p". */
.gl-tab-content__panel .gl-rich-content p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--gl-text);
	text-align: justify;
	text-align-last: left;
}

/* Slider tuỳ chọn cạnh "Nội dung tab" (field "slider", tham khảo ".split" của imperia-sensapark.vn/
   mat-bang-imperia-sensa-park/) — 2 cột bằng nhau khi CÓ ảnh; không có ảnh nào thì
   ".gl-tab-content__panel-inner" không có class "--split" nên chỉ render đúng 1 khối richtext như
   trước khi có field này (mặc định "display:block" của div, không cần khai riêng). */
/* "align-items: start" (KHÔNG "center") — cột nội dung (text+checklist) và cột slider không cùng
   chiều cao khi slider có nhiều ảnh (thêm hàng mũi tên/chấm bên dưới ảnh, cao hơn slider 1 ảnh không
   mũi tên/chấm). "center" từng làm cột nội dung nhảy vị trí bắt đầu lên/xuống tuỳ tab đang xem có
   slider nhiều ảnh hay không (dòng chữ đầu tiên không thẳng hàng giữa các tab) — "start" giữ cột nội
   dung LUÔN bắt đầu ngay đỉnh hàng, giống hệt lúc không có slider (full-width, không bị căn giữa). */
.gl-tab-content__panel-inner--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gl-gap-xl);
	align-items: start;
}

/* Slider dùng THẲNG Flickity có sẵn trong Flatsome (".lazyFlickity()", xem gamuda-home.js) nhưng
   TỰ VIẾT CSS riêng cho khung ảnh + mũi tên/chấm phân trang (không dùng skin dựng sẵn ".slider" của
   Flatsome — kiểu "nút đè lên ảnh, ẩn tới khi hover" mặc định của Flatsome khác hẳn tham khảo, xem
   docblock đầu file section-tab-content.php) — tham khảo khối "Tin tức" của mekonggrandplaza.vn
   (đã bấm nút trái/phải thật trên trang đó): trượt ngang (KHÔNG mờ dần), mũi tên/chấm nằm hẳn 1 hàng
   RIÊNG dưới khung ảnh (không đè lên ảnh, luôn hiện, không cần hover), chấm đang active giãn thành
   thanh dài.
   ".flickity-prev-next-button"/".flickity-page-dots" do CHÍNH Flickity tự sinh ra lúc khởi tạo
   (không phải markup PHP) — luôn là con trực tiếp của phần tử gọi "lazyFlickity()"
   (".gl-tab-content__slider"), nên xếp lại vị trí bằng CSS Grid + "grid-template-areas" là cách gọn
   nhất: đặt khung ảnh (".flickity-viewport") chiếm hết hàng trên, mũi tên trái/chấm/mũi tên phải
   chia nhau hàng dưới — không cần thêm bọc <div> nào trong markup. */
.gl-tab-content__slider {
	position: relative;
}

/* Trước khi Flickity khởi tạo XONG (lazyFlickity() chỉ tải + chạy thật lúc cuộn tới, xem
   gamuda-home.js) — chỉ hiện đúng ảnh đầu tiên với khung bo góc/tỉ lệ cố định, tránh nhấp nháy nhiều
   ảnh xếp chồng lên nhau ngay lúc trang vừa tải (tab đầu tiên hiện sẵn, không đợi cuộn tới). */
.gl-tab-content__slider:not(.flickity-enabled) .gl-tab-content__slide:not(:first-child) {
	display: none;
}

.gl-tab-content__slider:not(.flickity-enabled) .gl-tab-content__slide:first-child {
	aspect-ratio: 16 / 9;
	border-radius: var(--gl-radius-lg);
	overflow: hidden;
}

/* Mũi tên trái/phải ĐÈ LÊN ảnh (tham khảo tab "Layout chi tiết" của imperia-sensapark.vn — nút tròn
   nổi ngay trong khung ảnh, không còn tách hàng riêng dưới ảnh như trước), CHỈ riêng dấu chấm phân
   trang là vẫn giữ nguyên 1 hàng riêng dưới ảnh như cũ (yêu cầu rõ của user). Cách làm: gán CÙNG 1
   "grid-area: viewport" cho cả khung ảnh LẪN 2 nút mũi tên (Grid cho phép nhiều phần tử chồng lên
   nhau trong cùng 1 ô), rồi dùng "justify-self"/"align-self" định vị 2 nút vào đúng mép trái/phải,
   giữa chiều cao Ô ĐÓ (đúng bằng ảnh, không tính hàng chấm bên dưới) — khác với dùng "position:
   absolute" định vị theo CẢ khối slider (ảnh + hàng chấm cộng lại), sẽ lệch tâm xuống thấp hơn ảnh
   thật 1 đoạn bằng nửa chiều cao hàng chấm. */
.gl-tab-content__slider--multi.flickity-enabled {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"viewport"
		"dots";
	row-gap: var(--gl-gap-sm);
}

/* Chỉ 1 ảnh (không "--multi") thì Flickity vẫn khởi tạo (kéo/vuốt vô nghĩa nhưng vô hại) — không có
   mũi tên/chấm nào được tạo ra (đã bỏ "prevNextButtons/pageDots" khi 1 slide, xem gamuda-home.js)
   nên không cần lưới 2 hàng, khung ảnh chiếm trọn. */
.gl-tab-content__slider.flickity-enabled:not(.gl-tab-content__slider--multi) .flickity-viewport {
	width: 100%;
}

.gl-tab-content__slider .flickity-viewport {
	grid-area: viewport;
	width: 100%;
	/* Ảnh mặt bằng thực tế (mockup card "monrei/CĂN ...") xuất ra ~1024x575px — khớp gần đúng 16:9,
	   KHÔNG phải 4:3 — dùng đúng tỉ lệ này để "object-fit:contain" (xem bên dưới, cố tình không dùng
	   "cover" để khỏi cắt mất mã căn/kích thước) không bị dư khoảng trắng trên/dưới ảnh (letterbox). */
	aspect-ratio: 16 / 9;
	border-radius: var(--gl-radius-lg);
	overflow: hidden;
	background: var(--gl-cream);
	/* Flickity tự set "height" bằng px qua inline style (theo chiều cao thật của ảnh, do đã tắt
	   "adaptiveHeight") — ép về "auto" để khung theo đúng "aspect-ratio" cố định ở trên thay vì theo
	   kích thước ảnh gốc (ảnh không đồng đều thì khung mới không nhảy cao/thấp giữa các slide). */
	height: auto !important;
}

.gl-tab-content__slide {
	position: relative;
	width: 100%;
	height: 100%;
}

.gl-tab-content__slide img {
	display: block;
	width: 100%;
	height: 100%;
	/* "contain" (không phải "cover") — ảnh mặt bằng là bản vẽ kỹ thuật, cắt bớt cạnh sẽ mất chi tiết
	   mã căn/kích thước, khác hẳn ảnh phối cảnh thường dùng "cover" ở các section khác. */
	object-fit: contain;
}

/* "Chính Sách Bán Hàng"/"Lộ Trình Tiến Độ" TÁI DÙNG nguyên slider này nhưng ảnh luôn là ảnh chụp
   thực tế (sự kiện/công trường/nhà mẫu...), KHÔNG phải bản vẽ kỹ thuật như "contain" ở trên được
   thiết kế cho (mặt bằng) — "cover" mới đúng, để ảnh phủ kín khung, không dư khoảng trắng 2 bên khi
   tỉ lệ ảnh thật không khớp đúng khung slider. */
.gl-booking-policy .gl-tab-content__slide img,
.gl-timeline .gl-tab-content__slide img {
	object-fit: cover;
}

/* Chú thích đè lên góc dưới ảnh — nền tối mờ dần lên trên để chữ trắng luôn đọc được dù ảnh nền
   sáng/tối, cùng công thức overlay đã dùng cho ".gl-hero__overlay"/".gl-registration__overlay" (gần
   đen trung tính, không phải navy thương hiệu). "strong" (tiêu đề, VD "Căn A1") đậm/cỡ lớn hơn
   "span" (mô tả, VD "52,2 m² tim tường") — cùng cấu trúc 2 dòng đã tham khảo ở imperia-sensapark.vn. */
.gl-tab-content__slide-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 32px 16px 12px;
	background: linear-gradient(to top, rgba(8, 12, 18, 0.82), rgba(8, 12, 18, 0));
	pointer-events: none;
}

/* Ảnh nhiều tấm (có 2 nút mũi tên đè lên, canh giữa theo chiều cao ảnh) — đệm 2 bên rộng hơn (12px lề
   nút + 40px nút + 12px đệm ≈ 64px) để chữ không bao giờ bắt đầu/kết thúc NGAY DƯỚI nút, ảnh càng
   thấp (khung 16:9 hẹp ngang, VD slider đứng riêng 1 section full-width trên mobile) thì nút càng dễ
   rơi vào đúng vùng chú thích 2 dòng, che mất chữ nếu chỉ đệm 16px như ảnh đơn (không có nút, xem
   ".gl-tab-content__slide-cap" phía trên). Né bằng khoảng cách NGANG (luôn đúng bất kể canh dọc) thay
   vì tăng z-index — z-index không giải quyết được vì nút mũi tên nằm ở tầng xếp chồng ("stacking
   context") do chính ".flickity-slider" tạo ra qua "transform" lúc chuyển ảnh, z-index cao hơn bên
   trong đó vẫn không thể vượt qua tầng ngoài chứa nút (đã thử z-index:3, đo bằng
   getBoundingClientRect() xác nhận vẫn bị đè, mới đổi sang cách này). */
.gl-tab-content__slider--multi .gl-tab-content__slide-cap {
	padding-left: 64px;
	padding-right: 64px;
}

.gl-tab-content__slide-cap strong {
	font-family: var(--gl-font-serif);
	font-size: 19px;
	font-weight: 600;
	color: var(--gl-white);
}

.gl-tab-content__slide-cap span {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.75);
}

/* Mũi tên trái/phải — ĐÈ LÊN ảnh, tham khảo tab "Layout chi tiết" của imperia-sensapark.vn (nút tròn
   nổi ngay trong khung ảnh, không tách hàng riêng như trước). Đồng bộ MÀU/KIỂU nút với
   ".gl-slider-arrow"/".gl-slider-dot" — thanh điều hướng dùng chung cho slider Sản Phẩm/Tin Tức trên
   mobile (xem "gl-slider-controls" trong gamuda-tokens.css + "glInitSliderControls()" trong
   gamuda-home.js) — dù VỊ TRÍ khác nhau (nút ở đây đè ảnh, còn slider Sản Phẩm/Tin Tức nút nằm dưới),
   màu/kiểu nút vẫn nhất quán toàn site. "grid-area: viewport" (giống hệt khung ảnh) + "justify-self"/
   "align-self" thay vì "position:absolute" — Grid cho phép nhiều phần tử cùng chiếm 1 ô, nút được
   định vị theo ĐÚNG chiều cao của ô ảnh đó, không tính lẫn hàng chấm bên dưới (xem ghi chú ở
   ".gl-tab-content__slider--multi.flickity-enabled" phía trên).
   "position: relative" (KHÔNG "static") — Flickity tự chèn icon mũi tên (SVG ".flickity-button-icon")
   định vị "absolute" bên trong nút, "static" làm mất vùng định vị nên icon bị đẩy ra to bằng cả khung
   slider (bug từng gặp — icon to như hình thoi giữa ảnh). Ngoài ra Flatsome còn có 1 rule CHUNG
   ".flickity-prev-next-button svg { width:100% }" (không thuộc riêng skin nào) khiến icon SVG mặc
   định vẫn chiếm gần trọn nút dù đã định vị đúng — nên ẩn hẳn SVG gốc, thay bằng ký tự mũi tên
   "←"/"→" qua "::before" (giống hệt ".gl-slider-arrow", tránh lệ thuộc CSS icon của Flickity/Flatsome
   luôn). */
.gl-tab-content__slider .flickity-prev-next-button {
	/* Flatsome đặt "top/bottom/left/right" theo % cho skin mặc định — vẫn có tác dụng dịch chuyển vị
	   trí ngay cả khi đổi "position" từ "absolute" sang "relative" (khác "static" - không bị bỏ qua),
	   ép về "auto" hết rồi tự canh lại bằng margin bên dưới. */
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	grid-area: viewport;
	align-self: center;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: none;
	width: 40px;
	height: 40px;
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: 50%;
	opacity: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(28, 28, 28, 0.18);
	transition: border-color 0.2s ease;
}

.gl-tab-content__slider .flickity-prev-next-button svg {
	display: none;
}

/* Icon chevron — ĐÃ ĐỔI SANG SVG THẬT (bỏ hẳn kiểu vẽ bằng border+rotate cũ) sau 2 lần sửa vẫn bị
   user thấy lệch tâm (dù đo bằng getBoundingClientRect() xác nhận đúng tâm hình học — hình 2 cạnh
   góc vuông xoay 45° rất nhạy với răng cưa/anti-alias ở size nhỏ 9px, mắt thường vẫn thấy lệch dù số
   đo đúng). SVG polyline có sẵn tâm đối xứng THẬT (không cần tính toán/đo đạc gì thêm) + render bằng
   engine vector của trình duyệt nên luôn nét mảnh, không răng cưa như hình vẽ bằng border. Chỉ cần 1
   hình ">" duy nhất cho "next", "previous" chỉ việc LẬT NGANG ("scaleX(-1)", phép lật quanh trục dọc
   CHÍNH XÁC tuyệt đối theo định nghĩa toán học — không như "rotate theo góc" ở cách cũ, nơi 1 hình
   không đối xứng qua tâm dễ tạo ảo giác lệch) — không tự vẽ 2 hình trái/phải riêng, không cần lo
   2 bên không khớp nhau nữa. */
.gl-tab-content__slider .flickity-prev-next-button::before {
	content: '';
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e376f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gl-tab-content__slider .flickity-prev-next-button.previous::before {
	transform: scaleX(-1);
}

.gl-tab-content__slider .flickity-prev-next-button.previous {
	justify-self: start;
	margin-left: 12px;
}

.gl-tab-content__slider .flickity-prev-next-button.next {
	justify-self: end;
	margin-right: 12px;
}

.gl-tab-content__slider .flickity-prev-next-button:hover {
	border-color: var(--gl-gold);
}

/* Chấm phân trang — cùng kích thước/màu với ".gl-slider-dot" (chấm chưa active dùng xanh navy mờ
   thay vì xám viền vì gần như vô hình trên nền kem/trắng của section), chấm đang active GIÃN thành
   thanh dài màu vàng. Giữ NGUYÊN vị trí cũ — đứng RIÊNG 1 hàng dưới ảnh (không đè lên ảnh như 2 nút
   mũi tên ở trên), theo đúng yêu cầu chỉ đổi vị trí nút, không đổi vị trí chấm. */
.gl-tab-content__slider .flickity-page-dots {
	grid-area: dots;
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	line-height: normal;
}

.gl-tab-content__slider .flickity-page-dots .dot {
	width: 6px;
	height: 6px;
	margin: 0;
	border-radius: 999px;
	/* Viền + nền CÙNG 1 màu navy ĐẶC (--gl-green) — chấm chưa active trước đó nền mờ 18% trông nhạt,
	   đổi thành đặc hẳn như chấm active, chỉ khác kích thước (6px tròn nhỏ / 26px viên dài) để phân
	   biệt trạng thái, theo đúng yêu cầu "màu xanh" (không phải nhạt mờ). */
	border: 1px solid var(--gl-green);
	background: var(--gl-green);
	opacity: 1;
	transition: width 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.gl-tab-content__slider .flickity-page-dots .dot.is-selected {
	width: 26px;
	/* Đổi từ vàng (--gl-gold) sang navy (--gl-green) — user thấy màu vàng không hợp, đồng bộ luôn với
	   màu icon mũi tên trái/phải của CHÍNH slider này (cũng --gl-green). Viền cùng màu navy với nền
	   (đè lên nhau, coi như "viền đặc") theo đúng yêu cầu viền+nền cùng 1 màu xanh. */
	border-color: var(--gl-green);
	background: var(--gl-green);
}

@media (max-width: 767px) {
	.gl-tab-content__panel-inner--split {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.gl-tab-content__tabs {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.gl-tab-content__tab {
		width: 100%;
	}

	.gl-tab-content__panel {
		padding: var(--gl-gap-md) 18px;
	}

	/* Kiểu "Gạch chân" giữ nguyên 1 hàng ngang (cuộn ngang nếu tràn) thay vì xếp chồng full-width như
	   kiểu "pill" mặc định ở trên — xếp chồng sẽ mất hẳn cảm giác "tablist" ngang của imperia. */
	.gl-tab-content__tabs--underline {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.gl-tab-content__tabs--underline::-webkit-scrollbar {
		display: none;
	}

	.gl-tab-content__tabs--underline .gl-tab-content__tab {
		width: auto;
		flex-shrink: 0;
	}
}

.gl-section-header {
	margin-bottom: var(--gl-gap-2xl);
}

.gl-section-header__desc {
	max-width: 628px;
	font-size: var(--gl-fs-body);
	color: var(--gl-text);
}

/* Vị Trí (và các section homepage khác dùng ".gl-section-header" căn giữa): mô tả rich-text căn lề
 * đều 2 mép theo đúng bề rộng container — GIỐNG mô tả ở section Tiện Ích
 * (".gl-amenities__header-text .gl-rich-content p"). Trước đây bó "max-width:628px" và là flex-item
 * của ".gl-section-header { align-items:center }" nên đoạn mô tả nổi thành 1 cột hẹp căn giữa, lệch
 * mép với các khối nội dung bên dưới (bản đồ, lưới thẻ...). Cho ".gl-rich-content" stretch hết bề
 * rộng + reset "text-align" (kế thừa "center" từ ".gl-section-header") để 2 mép chữ trùng mép nội
 * dung chung. Eyebrow + H2 vẫn căn giữa như cũ. */
.gl-section-header .gl-rich-content {
	align-self: stretch;
	text-align: left;
}

.gl-section-header .gl-rich-content p {
	font-size: var(--gl-fs-body);
	line-height: 1.7;
	color: var(--gl-text);
	text-align: justify;
	text-align-last: left;
}


/* ===== AMENITIES ===== */
/* Trước đây nền xanh đậm (var(--gl-green)) — đổi sang nền sáng đồng bộ với các section khác
   (nhiều chữ/icon bên trong trước đây phải tô trắng/vàng nhạt riêng cho đủ tương phản trên nền tối,
   nay bỏ hết các override đó, dùng lại đúng màu mặc định của từng component gốc — xem các rule
   ngay bên dưới đã bỏ phần ghi đè màu). */
.gl-amenities {
	background: var(--gl-cream);
}

.gl-amenities__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gl-gap-lg);
	margin-bottom: var(--gl-gap-2xl);
}

.gl-amenities__header-text {
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-sm);
	width: 100%;
}

.gl-amenities__header-desc {
	font-size: 16px;
	line-height: 1.7;
	color: var(--gl-text);
	max-width: none;
}

/* Tiện Ích: paragraph trước đây có class ".gl-amenities__header-desc" gắn thẳng lên từng "<p>" —
 * rich text sinh "<p>" trần nên map lại đúng style cũ qua selector hậu duệ. */
.gl-amenities__header-text .gl-rich-content p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--gl-text);
	text-align: justify;
	text-align-last: left;
}

.gl-amenities__floors {
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-lg);
	margin-bottom: var(--gl-gap-2xl);
}

.gl-amenities__floor {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gl-amenities__floor-title {
	font-family: var(--gl-font-serif);
	font-weight: 600;
	font-size: 20px;
	color: var(--gl-green);
	margin-bottom: 4px;
}

/* Danh sách tiện ích theo tầng tái dùng NGUYÊN component ".gl-floor-amenities" của tab Mặt Bằng
   (gamuda-tokens.css) — cùng cấu trúc "nhóm + đánh số liên tục" + layout lưới 3 cột đổ theo hàng.
   Component gốc vốn thiết kế cho nền TRẮNG, section này giờ cũng nền sáng nên KHÔNG cần override
   màu chữ/viền nữa (trước đây phải đổi sang tông trắng/vàng nhạt cho nền xanh đậm cũ — đã bỏ toàn
   bộ, xem lịch sử git nếu cần đối chiếu); layout lưới cũng dùng chung nguyên bản, không cần override
   riêng ở đây nữa (trước đây có override "break-inside" cho CSS "columns" cũ — đã bỏ luôn cùng lúc
   đổi ".gl-floor-amenities__list" sang CSS Grid, xem gamuda-tokens.css). */
.gl-amenities__grid-heading {
	font-family: var(--gl-font-serif);
	font-weight: 400;
	/* Ngang hàng với heading chính "Đặc Quyền Sống Xanh" (".gl-h2") — dùng chung token cỡ chữ thay vì
	   số cứng để tự đồng bộ theo breakpoint (var(--gl-fs-h2) cũng tự đổi nhỏ lại ở mobile). */
	font-size: var(--gl-fs-h2);
	color: var(--gl-green);
	margin-bottom: var(--gl-gap-md);
}

/* "margin-top" phải khai riêng với selector nối thêm ".gl-amenities" (thay vì gộp chung khối trên)
   để thắng specificity rule chung "body.gamuda-landing h3 { margin: 0; }" (gamuda-tokens.css, reset
   margin mọi h3 toàn site) — nếu không, margin-top ở đây bị đè về 0, khối "Các Tiện Ích Nổi Bật"/
   "Giải Thưởng Thành Tựu" dính sát vào khối ngay phía trên. Cùng gotcha/cách né đã dùng cho
   ".gl-floor-amenities__group-title" (xem comment gần dòng 1228). */
.gl-amenities .gl-amenities__grid-heading {
	margin-top: var(--gl-gap-2xl);
}

/* 3 thẻ/hàng cho ĐỒNG BỘ với các lưới danh sách khác trên site (VD ".gl-news__grid",
   ".gl-products__grid") — cả "Tiện Ích Nổi Bật" (".gl-amenities__grid--featured") lẫn "Giải Thưởng"
   dùng chung đúng 3 cột thay vì lệch nhau (4 cột / auto-fit co giãn như trước). Đặt TRƯỚC 2
   breakpoint @media bên dưới (cùng nhắm ".gl-amenities__grid") để màn hình nhỏ vẫn tự đổ về đúng
   2 cột/1 cột. */
.gl-amenities__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gl-gap-md);
}

.gl-amenities__grid--featured {
	grid-template-columns: repeat(3, 1fr);
}

/* Thẻ dùng chung cho "Tiện Ích Nổi Bật" và "Giải Thưởng Thành Tựu" — tái dùng ĐÚNG UI card của
   ".gl-unit-card" (Mặt Bằng Căn Hộ) để đồng bộ 2 khối: nền kem, viền, bo góc, ảnh <img> object-fit
   cover phía trên + phần thân chữ bên dưới. ".gl-amenities" giờ cũng nền kem (trước đây nền xanh
   đậm) — đổi nền thẻ sang trắng để vẫn nổi bật lên trên, tách biệt rõ khỏi nền section thay vì
   trùng y hệt màu kem như trước (lúc đó section tối nên không đụng nhau). */
.gl-amenity-item {
	display: flex;
	flex-direction: column;
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease;
}

.gl-amenity-item:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.gl-amenity-item__img {
	height: 200px;
	overflow: hidden;
}

.gl-amenity-item__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.gl-amenity-item:hover .gl-amenity-item__img img {
	transform: scale(1.08);
}

.gl-amenity-item__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--gl-gap-md);
}

/* Cùng lý do với ".gl-unit-card__body .gl-image-caption" (đã có "gap" của body lo khoảng cách). */
.gl-amenity-item__body .gl-image-caption {
	margin-top: 0;
}

.gl-amenity-item__title {
	font-family: var(--gl-font-serif);
	font-weight: 600;
	font-size: 22px;
	color: var(--gl-green);
}

.gl-amenity-item__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--gl-text);
	opacity: 0.85;
}

/* Danh Sách Nổi Bật (card_grid, mỗi thẻ nhập tay): field "desc" giờ là rich text — style cũ của
 * "<p class="gl-amenity-item__desc">" chuyển sang khớp qua selector hậu duệ, cùng kỹ thuật đã dùng
 * cho ".gl-section-header__desc" ở trên. Thẻ lấy từ bài viết Tin Tức thật (excerpt, không phải
 * field ACF) vẫn dùng đúng class "gl-amenity-item__desc" như cũ (xem section-card-grid.php). */
.gl-amenity-item__body .gl-rich-content p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--gl-text);
	opacity: 0.85;
}

/* ===== DANH MỤC DỰ ÁN (section-project-categories.php) =====
 * Nền xanh đậm (giống Amenities) thay vì trắng — trắng bị "chìm" vì đứng ngay giữa 2 section nền
 * sáng khác (Chủ Đầu Tư trắng, Vị Trí kem), không nổi bật. Heading/eyebrow căn giữa, dùng đúng
 * pattern eyebrow + h2--light chung của các section khác (không riêng icon cạnh heading nữa). */
.gl-project-categories {
	background: var(--gl-btn-bg);
}

.gl-project-categories .gl-section-header .gl-rich-content p {
	color: rgba(255, 255, 255, 0.75);
}

.gl-project-categories__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gl-gap-md);
}

.gl-project-category-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 340px;
	padding: var(--gl-gap-md);
	background-size: cover;
	background-position: center;
	background-color: var(--gl-border);
	/* "background-clip: padding-box" ép ảnh/màu nền luôn dừng lại bên trong viền (không lan ra tới
	 * cạnh ngoài border) — thiếu dòng này, trình duyệt làm tròn số khi bo góc border-radius +
	 * background-size:cover đôi lúc để lộ 1px ảnh/màu nền đè lên viền ở 1-2 cạnh, khiến viền cạnh
	 * đó trông khác màu so với các cạnh còn lại (đặc biệt rõ với ảnh có màu tương phản mạnh). */
	background-clip: padding-box;
	/* Viền trong suốt lúc bình thường khiến thẻ nào có ảnh nhạt màu (bản đồ, mặt bằng...) trông
	 * "trôi nổi" không khung trên nền xanh đậm — đổi sang vàng nhạt 30% opacity (cùng tông
	 * --gl-gold) để thẻ nào cũng có khung nhẹ, hover vẫn nổi bật rõ nhờ lên hẳn màu vàng đặc. */
	border: 1px solid rgba(15, 122, 140, 0.3);
	border-radius: var(--gl-radius-md);
	overflow: hidden;
	transition: border-color 0.25s ease, transform 0.3s ease;
}

/* Ảnh nền nằm ngay trên chính thẻ này (không tách lớp riêng, xem PHP) nên phóng to cả thẻ khi hover
   — "overflow:hidden" ở trên tự cắt gọn phần tràn ra ngoài khung, không ảnh hưởng thẻ bên cạnh nhờ
   khoảng "gap" của lưới đủ lớn hơn mức phóng to này. */
.gl-project-category-card:hover {
	transform: scale(1.03);
}

/* Gradient phủ đáy ảnh để chữ label luôn đọc rõ dù ảnh sáng/tối khác nhau — pseudo-element riêng
 * vì background-image thật (ảnh) đã được set qua inline style trong PHP, không ghép chung được. */
.gl-project-category-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(28, 28, 28, 0.85) 0%, rgba(28, 28, 28, 0) 55%);
}

.gl-project-category-card:hover {
	border-color: var(--gl-gold);
}

.gl-project-category-card__label,
.gl-project-category-card__cta {
	position: relative;
	z-index: 1;
}

.gl-project-category-card__label {
	display: block;
	font-family: var(--gl-font-sans);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gl-white);
	/* Mặc định trượt xuống đúng khoảng trống mà "Xem chi tiết" chiếm (24px = margin-top 4px + chiều
	 * cao dòng chữ cta bên dưới) — trông như tên trạng thái đang "đứng" ở vị trí cta. Hover thì
	 * trượt lên vị trí gốc, nhường chỗ cho cta hiện ra — cả 2 chuyển động cùng lúc cho mượt. */
	transform: translateY(24px);
	transition: transform 0.35s ease;
}

.gl-project-category-card:hover .gl-project-category-card__label {
	transform: translateY(0);
}

.gl-project-category-card__cta {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gl-gold-bright);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.gl-project-category-card:hover .gl-project-category-card__cta {
	opacity: 1;
	transform: translateY(0);
}

/* ===== TRANG DANH SÁCH DỰ ÁN THEO TRẠNG THÁI (taxonomy-project_status.php) =====
 * Mặc định chỉ hiện ảnh — tên/mô tả/nút "Xem thêm" nằm trong 1 lớp phủ (overlay) ẩn sẵn
 * (opacity:0), chỉ hiện ra khi hover. Overlay tràn sát viền card (không lùi vào trong) — border
 * vàng đặt ở CARD (không phải overlay) để khớp đúng bo góc + không có khoảng hở lộ ảnh ở góc. */
.gl-project-listing__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gl-gap-md);
}

.gl-project-listing-card {
	position: relative;
	display: block;
	height: 380px;
	border-radius: var(--gl-radius-md);
	overflow: hidden;
	border: 1px solid transparent;
	background-clip: padding-box;
	transition: border-color 0.25s ease;
}

.gl-project-listing-card:hover {
	border-color: var(--gl-gold);
}

.gl-project-listing-card__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: var(--gl-border);
	transition: transform 0.35s ease;
}

.gl-project-listing-card:hover .gl-project-listing-card__img {
	transform: scale(1.05);
}

.gl-project-listing-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 14px;
	padding: var(--gl-gap-lg);
	background: rgba(28, 28, 28, 0.9);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.gl-project-listing-card:hover .gl-project-listing-card__overlay {
	opacity: 1;
}

.gl-project-listing-card__title {
	font-family: var(--gl-font-serif);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--gl-white);
}

.gl-project-listing-card__divider {
	width: 40px;
	height: 1px;
	background: var(--gl-gold);
}

.gl-project-listing-card__tagline {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
}

.gl-project-listing-card__cta {
	display: inline-flex;
	padding: 10px 22px;
	border: 1px solid var(--gl-white);
	border-radius: var(--gl-radius-pill);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gl-white);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gl-project-listing-card:hover .gl-project-listing-card__cta {
	background: var(--gl-gold);
	border-color: var(--gl-gold);
	color: var(--gl-green);
}

@media (max-width: 767px) {
	.gl-project-categories__grid,
	.gl-project-listing__grid {
		grid-template-columns: 1fr;
	}
}

/* ===== LOCATION ===== */
.gl-location {
	background: var(--gl-cream);
}

.gl-location__content-row {
	display: flex;
	/* "center" (không phải "stretch" cũ) — ảnh bản đồ giữ đúng kích thước tự nhiên
	   (".gl-location__map-bg { min-height:420px }"), không còn bị kéo giãn cao theo cột thẻ thời
	   gian di chuyển bên cạnh nữa (cột thẻ dài/ngắn không còn ảnh hưởng tới ảnh). Khi cột thẻ cao
	   hơn ảnh, ảnh tự canh giữa trên-dưới so với cả hàng thay vì lệch lên đầu hay giãn full. */
	align-items: center;
	justify-content: space-between;
	gap: var(--gl-gap-2xl);
	margin-top: var(--gl-gap-2xl);
}

.gl-location__map {
	flex: 1.6;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gl-location__map-bg {
	flex: 1;
	min-height: 420px;
	background-size: cover;
	background-position: center;
	background-color: var(--gl-green-dark);
	border: 1px solid var(--gl-border-gold);
	border-radius: var(--gl-radius-lg);
	transition: transform 0.4s ease;
}

/* Zoom nhẹ khi rê chuột vào ảnh bản đồ — cùng cách làm với ".gl-showcase__thumb-img" (scale
   trực tiếp chính khối có border/bo góc, tỉ lệ đều nên góc vẫn tròn đẹp, không cần overflow:hidden
   bọc ngoài). Hover đặt ở ".gl-location__map" (cả khối) chứ không chỉ ảnh, để vùng bấm/rê thoải
   mái hơn, chú thích ảnh bên dưới không bị ảnh hưởng vì là item riêng trong flex column. */
.gl-location__map:hover .gl-location__map-bg {
	transform: scale(1.05);
}

/* List dọc (1 cột, không phải lưới 2x2) — khi admin thêm nhiều thẻ hơn, cột thẻ cao lên theo chiều
   dọc thay vì tràn thêm hàng ngang; ảnh bản đồ bên trái KHÔNG còn giãn theo (xem
   ".gl-location__content-row { align-items: center }"), giữ đúng kích thước tự nhiên và tự canh
   giữa so với cột thẻ dù thẻ dài/ngắn thế nào. */
.gl-location__cards {
	flex: 1;
	min-width: 0;
	display: grid;
	grid-template-columns: 1fr;
	align-content: start;
	/* Giảm từ "--gl-gap-md" (24px) — cùng lý do với padding từng thẻ đã giảm (".gl-location-card"):
	   cột thẻ theo chiều dọc cao hơn hẳn ảnh bản đồ bên cạnh khi đủ 4 thẻ, bớt khoảng cách giữa các
	   thẻ giúp cả cột thấp lại, cân đối hơn so với chiều cao ảnh. */
	gap: 12px;
}

/* Nút CTA (".gl-section-cta") giờ đứng ngoài ".gl-location__content-row", full-width + căn giữa
   dưới cùng section — xem section-location.php. */

.gl-location-card {
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-xs);
	/* Giảm từ "--gl-gap-md" (24px) rồi "--gl-gap-sm" (16px) — cột thẻ theo chiều dọc cao hơn hẳn
	   ảnh bản đồ bên cạnh khi đủ 4 thẻ, bớt tiếp padding giúp cả cột thấp lại, cân đối hơn so với
	   chiều cao ảnh (".gl-location__map-bg { min-height:420px }"). */
	padding: 12px;
	background: var(--gl-white);
	border: 1px solid var(--gl-border-gold);
	border-radius: var(--gl-radius-sm);
}

.gl-location-card__time {
	/* Sans — quy ước chung cho số liệu trên site, xem ".gl-showcase__counter". */
	font-family: var(--gl-font-sans);
	font-weight: 700;
	font-size: 21px;
	color: var(--gl-green);
}

.gl-location-card__list {
	font-size: 14px;
	line-height: 1.5;
	color: var(--gl-text);
	opacity: 0.85;
}

/* ===== LIÊN KẾT VÙNG (CONNECTIVITY) ===== */
.gl-connectivity {
	background: var(--gl-white);
}

/* Grid 2 cột với "grid-template-areas" đặt tên (xem section-connectivity.php) — cột trái xếp dọc
   header→list→cta trong 3 hàng, map ("grid-row" ngầm định chiếm đúng 3 hàng đó ở cột phải) tự cao
   bằng TOÀN BỘ cột trái cộng lại (thay cho "align-items: stretch" của flexbox cũ, không dùng được
   nữa vì 4 khối giờ là sibling phẳng ngang nhau, không còn 2 cột lồng khối như trước). Mobile đổi
   hẳn sang 1 cột, thứ tự header→map→list→cta theo đúng yêu cầu (xem @media max-width:1023px). */
.gl-connectivity__grid {
	display: grid;
	/* "clamp()" thay vì cố định "628px" — cột map cố định 628px từng khiến cột chữ bên trái
	   (".gl-connectivity__list", vốn chỉ nhận phần CÒN LẠI qua "1fr") co lại chỉ còn ~172-199px ở
	   màn hình laptop 1024px (đủ chỗ cho 628px map + rất ít chỗ còn lại), dù ở 1440px+ (628px map
	   để lại ~588px cho cột chữ) trông rất ổn. "43.5vw" tính ra gần đúng 628px NGAY TẠI 1440px
	   (đúng "--gl-container-max", nơi ".gl-container" hết giãn thêm) nên KHÔNG đổi giao diện ở
	   1440px/4K đang đẹp sẵn — dưới mốc đó, map tự co theo % viewport, nhường thêm chỗ cho cột chữ
	   (VD ở 1024px: map co còn ~445px thay vì 628px, cột chữ có thêm ~270px). Chặn dưới 360px để map
	   không co quá bé khi kết hợp cả 2 điều kiện min-width + max-width của @media desktop
	   (>=1024px). */
	grid-template-columns: 1fr clamp(360px, 43.5vw, 628px);
	grid-template-areas:
		"header map"
		"list map";
	column-gap: var(--gl-gap-2xl);
	row-gap: var(--gl-gap-lg);
	/* "center" (không phải mặc định "stretch" của grid) — ảnh bản đồ giữ đúng kích thước tự nhiên
	   (".gl-connectivity__map { min-height:520px }"), không còn bị kéo giãn cao bằng tổng chiều cao
	   cột header→list→cta bên cạnh. Cột chữ dài/ngắn không còn ảnh hưởng tới ảnh — ảnh tự canh giữa
	   trên-dưới so với cả vùng "map" khi cột chữ cao hơn ảnh. */
	align-items: center;
}

.gl-connectivity__header {
	grid-area: header;
	max-width: 560px;
}

.gl-connectivity__list {
	grid-area: list;
	max-width: 560px;
}

/* Nút CTA (".gl-section-cta") giờ đứng ngoài lưới này — xem section-connectivity.php. */

.gl-connectivity__map-wrap {
	grid-area: map;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gl-connectivity__header p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--gl-text);
}

.gl-connectivity__list {
	display: flex;
	flex-direction: column;
}

.gl-connectivity__list-item {
	display: flex;
	align-items: flex-start;
	gap: var(--gl-gap-lg);
	/* Giảm từ 20px rồi 14px — danh sách mốc thời gian cao hơn hẳn ảnh bản đồ bên cạnh khi đủ nhiều
	   dòng, bớt tiếp padding giúp cả danh sách thấp lại, cân đối hơn so với chiều cao ảnh
	   (".gl-connectivity__map { min-height:520px }"). */
	padding: 10px 0;
	border-bottom: 1px solid var(--gl-border);
}

/* Logic chung: item đầu không viền trên, item cuối không viền dưới — chỉ còn đúng đường kẻ NGĂN
   CÁCH giữa các mốc thời gian, không có viền thừa ở mép trên/dưới cả danh sách (đã bỏ hẳn
   "border-top" khỏi ".gl-connectivity__list" ở trên vì lý do tương tự). Cùng logic đã áp dụng cho
   ".gl-spec-row"/".gl-payment__milestones" (gamuda-tokens.css). */
.gl-connectivity__list-item:last-child {
	border-bottom: none;
}

.gl-connectivity__list-time {
	/* Cột nhãn (mốc thời gian "15-20 Phút" HOẶC nhãn dài như tên tuyến đường). Rộng co giãn
	   clamp(): tối thiểu 110px đủ cho "15-20 Phút" trên 1 dòng, tối đa ~34% cột chữ để nhãn dài
	   (VD "Metro Thủ Dầu Một – TP.HCM") tự XUỐNG DÒNG trong cột thay vì tràn đè lên phần mô tả
	   bên cạnh. Bỏ "white-space: nowrap" (thủ phạm gây tràn/đè khi text dài) — "15-20 Phút" vẫn
	   nằm gọn 1 dòng nhờ chiều rộng tối thiểu 110px. */
	flex: 0 0 clamp(110px, 34%, 180px);
	min-width: 0;
	/* Sans — quy ước chung cho số liệu trên site, xem ".gl-showcase__counter". */
	font-family: var(--gl-font-sans);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.35;
	overflow-wrap: break-word;
	word-break: break-word;
	color: var(--gl-gold);
}

.gl-connectivity__list-place {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--gl-text);
	overflow-wrap: break-word;
}

.gl-connectivity__map {
	position: relative;
	width: 100%;
	/* Tỉ lệ khung = tỉ lệ ẢNH THẬT: section-connectivity.php đọc kích thước ảnh admin upload rồi gán
	   "aspect-ratio" inline (clamp 1:1 → 3:1). Nhờ vậy mọi ảnh (16:9, banner 21:9, ảnh vuông...) đều
	   hiện TRỌN, không cắt cạnh, không dư dải nền. "aspect-ratio: 16/9" dưới đây chỉ là MẶC ĐỊNH khi
	   thiếu metadata ảnh. "background-size: contain" + tỉ lệ khớp = lấp khít khung.
	   Grid ".gl-connectivity__grid { align-items:center }" tự canh giữa khung này so với cột chữ. */
	aspect-ratio: 16 / 9;
	/* Sàn cho trình duyệt KHÔNG hỗ trợ aspect-ratio (rất hiếm); trần chặn ảnh tỉ lệ gần vuông làm
	   khung quá cao trên màn rộng. */
	min-height: 180px;
	max-height: 68vh;
	display: flex;
	align-items: flex-end;
	padding: var(--gl-gap-lg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-origin: border-box;
	background-color: var(--gl-green-dark);
	border: 1px solid var(--gl-border-gold);
	border-radius: var(--gl-radius-lg);
	overflow: hidden;
}

.gl-connectivity__map::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(28, 28, 28, 0.35);
}

/* Lớp phủ tối trên chỉ để chữ trắng trên thẻ toạ độ (".gl-connectivity__map-card") đủ tương phản
   khi đè lên ảnh — thẻ toạ độ ẩn thì lớp phủ này không còn lý do tồn tại, chỉ làm ảnh xỉn màu vô cớ
   (đặc biệt lúc hover zoom, càng lộ rõ ảnh bị tối hơn thật). Bỏ hẳn khi ở chế độ zoomable. */
.gl-connectivity__map--zoomable::before {
	display: none;
}

/* Chỉ gắn khi thẻ toạ độ đang ẨN (class ".gl-connectivity__map--zoomable", xem
   section-connectivity.php + field "conn_map_coord_visible") — thẻ toạ độ còn hiện đè lên ảnh thì
   không nên zoom (chữ trên thẻ đứng yên trong khi ảnh phóng to lệch phía sau sẽ trông rối, không
   đồng bộ). "overflow:hidden" đã có sẵn ở ".gl-connectivity__map" nên không cần bọc thêm phần tử
   nào — scale tỉ lệ đều nên viền/bo góc vẫn tròn đẹp, cùng cách làm với ".gl-location__map-bg"
   (section "Vị Trí"). */
.gl-connectivity__map--zoomable {
	transition: transform 0.4s ease;
}

.gl-connectivity__map--zoomable:hover {
	transform: scale(1.05);
}

.gl-connectivity__map-card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 280px;
	padding: var(--gl-gap-md);
	background: var(--gl-white);
	border-radius: var(--gl-radius-sm);
}

.gl-connectivity__map-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gl-gold);
}

.gl-connectivity__map-addr {
	font-family: var(--gl-font-serif);
	font-weight: 600;
	font-size: 18px;
	color: var(--gl-green);
}

.gl-connectivity__map-note {
	font-size: 13px;
	color: var(--gl-text);
	opacity: 0.8;
}

/* ===== DEVELOPER CREDIBILITY ===== */
.gl-developer {
	background: var(--gl-white);
	border-top: 1px solid var(--gl-border);
	border-bottom: 1px solid var(--gl-border);
	padding-top: 100px;
	padding-bottom: 100px;
}

.gl-developer__top {
	margin-bottom: var(--gl-gap-xl);
}

.gl-developer__row {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--gl-gap-2xl);
}

.gl-developer__panel {
	flex: 0 0 360px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--gl-gap-sm);
	padding: var(--gl-gap-xl);
	background: linear-gradient(160deg, var(--gl-btn-bg) 0%, var(--gl-btn-bg-dark) 100%);
	border-radius: var(--gl-radius-lg);
}

.gl-developer__panel-name {
	font-family: var(--gl-font-serif);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.25;
	color: var(--gl-gold-light);
}

.gl-developer__panel-tag {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75);
}

.gl-developer__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--gl-gap-md);
}

/* Khung viền bo góc BAO NGOÀI khối cuộn — tách riêng khỏi ".gl-developer__desc-scroll" (chỉ lo phần
   cuộn/overflow) để viền luôn là 1 khung sạch bao quanh, không bị thanh cuộn bên trong chèn sát vào
   cạnh viền. */
.gl-developer__desc-frame {
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
	padding: 20px 0 20px 20px;
}

.gl-developer__desc-scroll {
	max-height: 42vh;
	overflow-y: auto;
	padding-right: 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	scrollbar-width: thin;
	scrollbar-color: var(--gl-gold) var(--gl-border);
}

/* ".gl-rich-content" tự có "overflow-x:auto" (để bảng chèn trong bài cuộn ngang riêng) — điều này
   khiến trình duyệt tự suy ra "overflow-y" cũng khác "visible", biến nó thành 1 flex item có
   min-height tự động = 0 bên trong ".gl-developer__desc-scroll" (flex column) và bị CO LẠI vừa khít
   khung thay vì đẩy khung cha tràn. Hệ quả: thanh cuộn thật lại nằm ở "gl-rich-content" (cách viền
   26px, sát chữ) chứ không phải ở khung ngoài — đã bắt tận tay bằng getBoundingClientRect(), không
   phải suy đoán. Khoá "flex-shrink:0" để nó giữ nguyên chiều cao thật, đẩy phần cuộn về đúng
   ".gl-developer__desc-scroll" (đã có padding-right 26px + thanh cuộn riêng ở trên). */
.gl-developer__desc-scroll > .gl-rich-content {
	flex-shrink: 0;
}

.gl-developer__desc-scroll::-webkit-scrollbar {
	width: 5px;
}

.gl-developer__desc-scroll::-webkit-scrollbar-track {
	background: var(--gl-border);
	border-radius: 3px;
}

.gl-developer__desc-scroll::-webkit-scrollbar-thumb {
	background: var(--gl-gold);
	border-radius: 3px;
}

.gl-developer__content p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--gl-text);
	text-align: justify;
	text-align-last: left;
}

.gl-developer__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gl-gap-md);
	margin-top: var(--gl-gap-2xl);
	padding-top: var(--gl-gap-xl);
	border-top: 1px solid var(--gl-border);
}

.gl-developer__badge {
	flex: 1 1 240px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--gl-gap-md);
	background: var(--gl-cream);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-sm);
}

.gl-developer__badge-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gl-gold);
}

.gl-developer__badge-value {
	font-size: 14px;
	line-height: 1.5;
	color: var(--gl-text);
}

/* ===== PRODUCT LISTINGS ===== */
.gl-products {
	background: var(--gl-white);
}

/* Nút filter "Loại sản phẩm" (page-gamuda-products.php, field ACF "loai_san_pham") — link-based
 * (không AJAX, giống hệt cơ chế phân trang sẵn có) nên style như 1 dạng nút/tab, không phải input
 * thật — cùng ngôn ngữ thị giác với ".gl-pagination__num" (viền mặc định, xanh đặc khi active). */
.gl-products__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: var(--gl-gap-lg);
}

.gl-products__filter-btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-pill);
	font-size: 14px;
	font-weight: 600;
	color: var(--gl-text);
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.gl-products__filter-btn:hover {
	border-color: var(--gl-gold);
	color: var(--gl-green);
}

.gl-products__filter-btn.is-active {
	background: var(--gl-btn-bg);
	border-color: var(--gl-btn-bg);
	color: var(--gl-gold-light);
}

/* Hàng chứa nút "Loại sản phẩm" + dropdown "Dự án" (page-gamuda-products.php) — 2 chiều filter
 * cùng tồn tại, xuống hàng riêng trên mobile để không chật. ".gl-products__filter" giữ nguyên margin
 * cũ của nó nên bỏ trong hàng này (đã có gap ở đây lo khoảng cách). */
.gl-products__filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gl-gap-md);
	margin-bottom: var(--gl-gap-lg);
}

.gl-products__filter-row .gl-products__filter {
	margin-bottom: 0;
}

/* Dropdown "Dự án" — cùng cơ chế ".gl-select" tự dựng như ".gl-news-filter", đứng độc lập ngoài
 * form CF7 nên cũng cần tự thêm viền/nền cho ".gl-select__trigger" giống hệt bên đó. */
.gl-products-project-filter {
	width: 100%;
	max-width: 240px;
}

.gl-products-project-filter .gl-select__trigger {
	padding: 10px 16px;
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-pill);
	background: var(--gl-white);
	transition: border-color 0.2s ease;
}

.gl-products-project-filter .gl-select__trigger:hover {
	border-color: var(--gl-gold);
}

.gl-products__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gl-gap-md);
}

.gl-product-card {
	display: flex;
	flex-direction: column;
	background: var(--gl-cream);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.gl-product-card:hover {
	box-shadow: 0 8px 24px rgba(30, 55, 111, 0.12);
}

.gl-product-card__img {
	height: 200px;
	background-size: cover;
	background-position: center;
	background-color: var(--gl-border);
	transition: transform 0.3s ease;
}

.gl-product-card:hover .gl-product-card__img {
	transform: scale(1.08);
}

.gl-product-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--gl-gap-md);
}

.gl-product-card__title {
	font-family: var(--gl-font-serif);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.35;
	color: var(--gl-green);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gl-product-card__addr {
	font-size: 13px;
	color: var(--gl-text);
	opacity: 0.7;
}

.gl-product-card__meta {
	display: flex;
	gap: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gl-text);
}

.gl-product-card__price {
	margin-top: 4px;
	/* Sans — quy ước chung cho số liệu trên site, xem ".gl-showcase__counter". */
	font-family: var(--gl-font-sans);
	font-weight: 700;
	font-size: 18px;
	color: var(--gl-gold);
}

/* ===== SINGLE PRODUCT (single-product.php) ===== */
.gl-product-detail {
	background: var(--gl-cream);
}

.gl-product-detail__row {
	display: flex;
	align-items: flex-start;
	gap: var(--gl-gap-2xl);
}

.gl-product-detail__main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-2xl);
}

.gl-showcase.gl-product-detail__gallery {
	/* .gl-showcase tự có "margin-top: var(--gl-gap-2xl)" (dùng cho section Hình Ảnh ở trang chủ,
	   nằm dưới 1 section-header) — ở đây gallery là khối ĐẦU TIÊN trong cột trái nên cần đè về 0,
	   nếu không sẽ lệch xuống so với card liên hệ bên cột phải (không có margin-top tương tự). */
	margin-top: 0;
}

.gl-product-detail__header {
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-sm);
	padding-bottom: var(--gl-gap-lg);
	border-bottom: 1px solid var(--gl-border);
}

.gl-product-detail__price-row {
	display: flex;
	gap: var(--gl-gap-xl);
	margin-top: 4px;
}

.gl-product-detail__price-row span {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gl-gold);
	margin-bottom: 4px;
}

.gl-product-detail__price-row strong {
	/* Sans — quy ước chung cho số liệu trên site, xem ".gl-showcase__counter". */
	font-family: var(--gl-font-sans);
	font-weight: 700;
	font-size: 22px;
	color: var(--gl-green);
}

/* Heading các khối cột trái single-product.php là <h2 class="gl-h3"> (KHÔNG phải <h3>) — phải target
 * đúng ".gl-h3" mới thắng reset chung "body.gamuda-landing h2,h3,h4 { margin: 0 }" (gamuda-tokens.css).
 * Trước đây selector viết "h3" nên không match gì cả: "Thông Tin Chi Tiết" dính sát đoạn mô tả,
 * "Đặc Điểm Bất Động Sản" dính sát ".gl-property-features". Nối thêm
 * ".gl-product-detail__main"/".gl-product-detail" để tăng specificity. */
.gl-product-detail__main .gl-product-detail__content .gl-h3,
.gl-product-detail__main .gl-product-detail__specs .gl-h3,
.gl-product-detail .gl-product-detail__related .gl-h3 {
	margin-bottom: var(--gl-gap-lg);
}

/* Nội dung "Thông Tin Chi Tiết" render qua the_content() nên có thể chứa nhiều đoạn, heading phụ,
 * danh sách, trích dẫn, chữ đậm/nghiêng, link, ảnh, đường kẻ... — style đủ các thẻ phổ biến để giữ
 * đúng format người dùng gõ trong editor (giống ".gl-news-detail__body" của Tin Tức). "gap" lo phần
 * cách đoạn cơ bản giữa các block; heading được cộng thêm margin-top cho tách bạch. */
.gl-product-detail__editor {
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-sm);
	font-size: 16px;
	line-height: 1.8;
	color: var(--gl-text);
}

body.gamuda-landing .gl-product-detail__editor > *:first-child {
	margin-top: 0;
}

.gl-product-detail__editor p {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	color: var(--gl-text);
}

/* Prefix "body.gamuda-landing" để thắng reset chung "body.gamuda-landing h2,h3,h4 {margin:0}"
   (gamuda-tokens.css) — nếu không heading phụ trong nội dung sẽ dính sát đoạn văn phía trên,
   mất cảm giác tách mục như khi gõ trong editor. */
body.gamuda-landing .gl-product-detail__editor h2,
body.gamuda-landing .gl-product-detail__editor h3,
body.gamuda-landing .gl-product-detail__editor h4 {
	margin: var(--gl-gap-sm) 0 0;
	font-family: var(--gl-font-serif);
	font-weight: 600;
	color: var(--gl-green);
	line-height: 1.3;
}

.gl-product-detail__editor strong,
.gl-product-detail__editor b {
	font-weight: 700;
	color: var(--gl-green);
}

.gl-product-detail__editor em,
.gl-product-detail__editor i {
	font-style: italic;
}

.gl-product-detail__editor a {
	color: var(--gl-green);
	text-decoration: underline;
}

/* body.gamuda-landing ul {list-style:none; padding:0;} (gamuda-tokens.css) thắng 1 class thường —
   phải chỉ định lại ở selector cụ thể hơn để lấy lại bullet/số (giống ".gl-news-detail__body"). */
body.gamuda-landing .gl-product-detail__editor ul,
body.gamuda-landing .gl-product-detail__editor ol {
	margin: 0;
	padding-left: 1.4em;
	list-style: revert;
	font-size: 16px;
	line-height: 1.8;
	color: var(--gl-text);
}

.gl-product-detail__editor li + li {
	margin-top: 4px;
}

.gl-product-detail__editor blockquote {
	margin: 0;
	padding-left: var(--gl-gap-md);
	border-left: 3px solid var(--gl-gold);
	font-style: italic;
	color: var(--gl-text);
}

.gl-product-detail__editor hr {
	width: 100%;
	height: 0;
	border: 0;
	border-top: 1px solid var(--gl-border);
}

.gl-product-detail__editor img {
	width: 100%;
	border-radius: var(--gl-radius-md);
}

.gl-product-detail__editor table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.gl-product-detail__editor th,
.gl-product-detail__editor td {
	padding: 10px 12px;
	border: 1px solid var(--gl-border);
	text-align: left;
	vertical-align: top;
}

.gl-product-detail__editor th {
	font-weight: 700;
	color: var(--gl-green);
	background: var(--gl-cream);
}

/* Khối "Đặc Điểm Bất Động Sản" (single-product.php, field gia/dientich/phongngu/wc/huong/
 * huong_bancong/phaply/noithat/sotang) — icon + nhãn + giá trị, 2 cột, tự ẩn dòng nào admin để
 * trống. Component riêng (không dùng chung ".gl-spec-grid"/".gl-spec-row" — 2 class đó còn dùng ở
 * section-intro.php + section-payment.php, không muốn ảnh hưởng 2 nơi đó). */
.gl-property-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gl-gap-lg) var(--gl-gap-2xl);
}

.gl-property-features__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding-bottom: var(--gl-gap-md);
	border-bottom: 1px solid var(--gl-border);
}

.gl-property-features__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
}

.gl-property-features__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gl-property-features__label {
	font-size: 13px;
	color: var(--gl-text);
	opacity: 0.65;
}

.gl-property-features__value {
	font-size: 15px;
	font-weight: 600;
	color: var(--gl-green);
}

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

.gl-product-detail__aside {
	flex: 0 0 320px;
}

.gl-product-contact {
	position: sticky;
	/* "130px" (không phải "100px") — header thật (".gl-nav") cao ~102px và TỰ NÓ cũng sticky ở top:0,
	   "100px" gần như sát đúng mép dưới header, không chừa khoảng hở nào — cùng lỗi/cách sửa đã áp
	   dụng cho ".gl-contact-info__form-col" (trang Liên Hệ)/".gl-content-listing-pro__aside" (trang
	   Tin Tức nâng cao). */
	top: 130px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gl-gap-sm);
	padding: var(--gl-gap-lg);
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
	text-align: center;
}

.gl-product-contact__avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-color: var(--gl-border);
	border: 2px solid var(--gl-gold);
}

.gl-product-contact__name {
	font-family: var(--gl-font-serif);
	font-weight: 600;
	font-size: 18px;
	color: var(--gl-green);
}

.gl-product-contact__tag {
	font-size: 13px;
	color: var(--gl-text);
	opacity: 0.7;
	margin-top: -8px;
	margin-bottom: 4px;
}

.gl-product-detail__related {
	margin-top: var(--gl-gap-3xl);
	padding-top: var(--gl-gap-2xl);
	border-top: 1px solid var(--gl-border);
}

/* ===== VIDEO ===== */
.gl-video {
	background: var(--gl-white);
}

.gl-video__frame {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	background: var(--gl-border);
	border-radius: var(--gl-radius-md);
	overflow: hidden;
}

.gl-video__frame iframe,
.gl-video__frame video {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

/* ===== NEWS ===== */
.gl-news {
	background: var(--gl-cream);
}

.gl-news__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gl-gap-lg);
	margin-bottom: var(--gl-gap-2xl);
}

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

/* Tin Tức + Sản Phẩm (2 section dùng chung đúng 1 class ".gl-news__header-text"): "news_desc"/
 * "products_desc" giờ là rich text — style cũ của "<p class="gl-section-header__desc">" chuyển
 * sang khớp qua selector hậu duệ, cùng kỹ thuật đã dùng cho ".gl-section-header__desc" ở trên
 * (field này KHÔNG nằm trong ".gl-section-header" ở 2 section này nên cần rule riêng). */
.gl-news__header-text .gl-rich-content p {
	max-width: 628px;
	font-size: var(--gl-fs-body);
	color: var(--gl-text);
}

/* Giữ NGUYÊN kiểu chữ + gạch chân cũ theo yêu cầu — không đổi sang nút khung như
   ".gl-section-cta-link" (chỉ nút CTA cuối section khác mới đổi, xem gamuda-tokens.css). Nối
   "body.gamuda-landing" ngay từ đầu (không tách rule màu riêng như bản gốc) để thắng
   "body.gamuda-landing a{color:inherit}" — cùng giá trị hiển thị, chỉ gọn hơn 1 rule. */
body.gamuda-landing .gl-news__view-all {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gl-green);
	border-bottom: 1px solid var(--gl-green);
	padding-bottom: 2px;
	white-space: nowrap;
	transition: color 0.2s ease, border-color 0.2s ease;
}

body.gamuda-landing .gl-news__view-all:hover {
	color: var(--gl-gold);
	border-color: var(--gl-gold);
}

/* Dropdown filter "Dự án" (page-gamuda-news.php, field ACF "news_project") — tái dùng nguyên
 * component dropdown tự dựng ".gl-select" (gamuda-home.js glInitCustomSelect(), xem CSS gốc phía
 * trên) nhưng đứng ĐỘC LẬP ngoài form CF7, nên ".gl-select__trigger" (vốn chỉ có padding-top, dựa
 * vào ".wpcf7-form-control-wrap" của CF7 để có khung/viền) cần tự thêm viền + nền riêng ở đây mới
 * ra hình 1 nút dropdown hoàn chỉnh. */
.gl-news-filter {
	max-width: 280px;
	margin-bottom: var(--gl-gap-lg);
}

.gl-news-filter .gl-select__trigger {
	padding: 12px 16px;
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-sm);
	background: var(--gl-white);
	transition: border-color 0.2s ease;
}

.gl-news-filter .gl-select__trigger:hover {
	border-color: var(--gl-gold);
}

/* Dropdown "Dự án" của layout "Danh Sách Theo Loại Nội Dung" (section-content-listing.php) — CÙNG
   style hệt ".gl-news-filter" ở trên (không lặp lại toàn bộ block, chỉ đổi tên class) vì class riêng
   để tránh bị handler AJAX Tin Tức/Sản Phẩm (gamuda-home.js) bắt nhầm sự kiện, xem
   data-content-listing.php. */
.gl-content-listing__filter {
	max-width: 280px;
	margin-bottom: var(--gl-gap-lg);
}

.gl-content-listing__filter .gl-select__trigger {
	padding: 12px 16px;
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-sm);
	background: var(--gl-white);
	transition: border-color 0.2s ease;
}

.gl-content-listing__filter .gl-select__trigger:hover {
	border-color: var(--gl-gold);
}

.gl-news__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gl-gap-md);
}

/* Thông báo trống — hiện khi chưa có bài viết/sản phẩm nào thay vì ẩn hẳn section (xem
   section-news.php/section-products.php), giữ section + neo "#news"/"#products" luôn tồn tại
   trong DOM để menu header cuộn tới đúng vị trí dù chưa có dữ liệu thật. Dùng chung 1 style cho cả
   2 section vì cùng ý nghĩa + ngữ cảnh hiển thị (khối trắng, viền dashed, căn giữa). */
.gl-news__empty,
.gl-products__empty {
	padding: var(--gl-gap-2xl) var(--gl-gap-md);
	border: 1px dashed var(--gl-border);
	border-radius: var(--gl-radius-md);
	font-size: 15px;
	color: var(--gl-text);
	opacity: 0.6;
}

/* "text-align"/"text-align-last" phải nối thêm "body.gamuda-landing" — reset toàn site
   "body.gamuda-landing p { text-align:justify; text-align-last:left }" (gamuda-tokens.css) đặc
   hiệu hơn rule "center" ở trên (2 element+1 class so với 1 class), nên thắng. Đoạn thông báo này
   chỉ 1 dòng nên "text-align-last:left" (áp dụng bất kể text-align là gì, không riêng justify) đủ
   để kéo cả dòng lệch trái dù đã khai "text-align:center" — phải ghi đè luôn cả 2 thuộc tính. */
body.gamuda-landing .gl-news__empty,
body.gamuda-landing .gl-products__empty {
	text-align: center;
	text-align-last: center;
}

.gl-news-card {
	display: flex;
	flex-direction: column;
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.gl-news-card:hover {
	box-shadow: 0 8px 24px rgba(30, 55, 111, 0.12);
}

.gl-news-card__img {
	height: 200px;
	background-size: cover;
	background-position: center;
	background-color: var(--gl-border);
	transition: transform 0.3s ease;
}

.gl-news-card:hover .gl-news-card__img {
	transform: scale(1.08);
}

.gl-news-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--gl-gap-md);
}

.gl-news-card__date {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gl-gold);
}

.gl-news-card__title {
	font-family: var(--gl-font-serif);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.35;
	color: var(--gl-green);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gl-news-card__excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: var(--gl-text);
	opacity: 0.8;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gl-news-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gl-green);
	transition: color 0.2s ease;
}

.gl-news-card:hover .gl-news-card__cta {
	color: var(--gl-gold);
}

/* ===== TIN TỨC — trang danh sách & chi tiết (page-gamuda-news*.php) ===== */
.gl-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--gl-gap-xl);
	font-size: 13px;
	color: var(--gl-text);
	opacity: 0.7;
}

.gl-breadcrumb a {
	color: var(--gl-text);
	transition: color 0.2s ease;
}

.gl-breadcrumb a:hover {
	color: var(--gl-green);
}

.gl-news-listing,
.gl-news-detail {
	background: var(--gl-cream);
}

/* Banner ảnh nền đầu trang danh sách (Tin Tức/Sản Phẩm) — tham khảo ".pagehead" của
   imperia-sensapark.vn/tin-tuc/: ảnh dự án phủ kín full-bleed + overlay gradient tối để
   breadcrumb/tiêu đề/mô tả (chữ trắng) đọc rõ. CHỈ hiện khi trang đã set ảnh qua ACF
   ("news_page_banner_image"/"products_page_banner_image", override theo dự án qua
   "project_news_banner_image"/"project_products_banner_image") — xem gl_render_listing_banner()
   (template-parts/gamuda-home/data-news.php), hàm tự return sớm nếu không có ảnh nên các trang chưa
   set banner giữ NGUYÊN layout breadcrumb/tiêu đề kiểu cũ (".gl-breadcrumb"/".gl-section-header" nằm
   trong ".gl-container" bên trong ".gl-news-listing" như trước khi có field này).
   KHÔNG dùng ".gl-container" làm khung chữ bên trong — bản thân ".gl-container" không có padding
   ngang (đệm đó vốn đến từ ".gl-section" cha, mà section này lại không dùng ".gl-section" vì cần ảnh
   nền tràn hết viewport) — dùng lại đúng công thức full-bleed đã có ở ".gl-hero__inner" (max-width
   cộng thêm 2 lần "--gl-section-x" rồi margin:auto + tự padding ngang bằng "--gl-section-x") để chữ
   thẳng hàng mép trái với mọi section khác trên trang, kể cả > 1440px. */
.gl-listing-banner {
	position: relative;
	overflow: hidden;
	min-height: 320px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.gl-listing-banner__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(8, 12, 18, 0.88) 15%, rgba(8, 12, 18, 0.55) 55%, rgba(8, 12, 18, 0.28) 100%);
}

.gl-listing-banner__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: calc(var(--gl-container-max) + (var(--gl-section-x) * 2));
	margin: 0 auto;
	padding: var(--gl-gap-2xl) var(--gl-section-x);
}

.gl-listing-banner .gl-breadcrumb {
	color: rgba(255, 255, 255, 0.7);
}

.gl-listing-banner .gl-breadcrumb a {
	color: rgba(255, 255, 255, 0.9);
}

.gl-listing-banner .gl-breadcrumb a:hover {
	color: var(--gl-gold);
}

.gl-listing-banner .gl-section-header {
	margin-bottom: 0;
}

/* ".gl-section-header__desc" mặc định màu chữ thường (đọc được trên nền trang sáng) — cùng công
   thức "trắng, mờ 80%" đã dùng cho mô tả trên nền tối ở section Đăng Ký (".gl-registration__header
   p"). Không cần biến thể riêng cho eyebrow — "--gl-gold" mặc định vốn đã đọc tốt trên nền tối (xem
   các section tối khác dùng ".gl-eyebrow" nguyên bản, không có class biến thể). */
.gl-listing-banner .gl-section-header__desc,
.gl-listing-banner .gl-section-header__desc p {
	color: var(--gl-white);
	opacity: 0.8;
}

@media (max-width: 767px) {
	.gl-listing-banner {
		min-height: 240px;
	}

	.gl-listing-banner__inner {
		padding: var(--gl-gap-xl) var(--gl-section-x);
	}
}

.gl-section-header--left {
	align-items: flex-start;
	text-align: left;
}

.gl-section-header--left .gl-h2 {
	max-width: none;
}

/* Khối nội dung SEO cuối trang danh sách Tin Tức/Sản Phẩm (dưới lưới + phân trang, field
 * "news_page_seo_content"/"products_page_seo_content", xem page-gamuda-news.php/
 * page-gamuda-products.php) — kiểu "Xem thêm/Thu gọn" như trang danh sách batdongsan.com.vn: thu
 * gọn mặc định (chỉ hiện ~1 màn hình chữ) + dải mờ dần ở đáy gợi ý còn nội dung, bấm nút để mở hết
 * (JS thêm class "is-expanded", xem gamuda-home.js). Toggle bằng "max-height" (không phải
 * display:none) để có transition mượt — nhưng JS tự ĐO đúng chiều cao thật (scrollHeight) rồi mới
 * gán, KHÔNG để CSS nhắm sẵn 1 số rất lớn (VD 6000px) làm đích: transition chạy tuyến tính theo SỐ
 * px nên nếu đích lớn hơn nhiều lần nội dung thật, gần như toàn bộ thời lượng hiệu ứng trôi qua ở
 * phần "thừa" không ai thấy, mở ra trông như giật/nhảy khựng thay vì trượt mượt. CSS ở đây chỉ còn
 * lo chiều cao THU GỌN (base rule) + dải mờ — chiều cao MỞ do JS set thẳng vào style (ưu tiên hơn
 * mọi rule CSS nhờ inline style, không cần rule ".is-expanded { max-height: ... }" nữa). */
.gl-listing-seo {
	margin-top: var(--gl-gap-2xl);
	padding-top: var(--gl-gap-lg);
	border-top: 1px solid var(--gl-border);
}

.gl-listing-seo__inner {
	position: relative;
	max-height: 260px;
	overflow: hidden;
	transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.gl-listing-seo__inner::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	background: linear-gradient(to bottom, rgba(247, 245, 240, 0), var(--gl-cream));
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.gl-listing-seo.is-expanded .gl-listing-seo__inner::after {
	opacity: 0;
}

/* Nội dung đủ ngắn (đo bằng JS lúc trang tải xong, xem "glCheckListingSeoOverflow()" trong
   gamuda-home.js) — không tràn khỏi khung thu gọn thì bỏ hẳn giới hạn/dải mờ + ẩn nút, không có gì
   để "xem thêm" thì không nên hiện nút ra gây khó hiểu. */
.gl-listing-seo--fits .gl-listing-seo__inner {
	max-height: none;
}

.gl-listing-seo--fits .gl-listing-seo__inner::after {
	display: none;
}

.gl-listing-seo--fits .gl-listing-seo__toggle {
	display: none;
}

.gl-listing-seo__toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: var(--gl-gap-md) auto 0;
	padding: 8px 4px;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--gl-font-sans);
	font-size: 14px;
	font-weight: 600;
	color: var(--gl-green);
	transition: color 0.2s ease;
}

/* KHÔNG thêm rule "body.gamuda-landing .gl-listing-seo__toggle { color: ... }" ở đây — phần tử là
 * <button> (không phải <a>) nên không dính gotcha "body.gamuda-landing a { color: inherit }" như
 * các link khác trong theme, thêm tiền tố "body.gamuda-landing" chỉ khiến rule NÀY có specificity
 * cao hơn ":hover" bên dưới (element "body" + 2 class > chỉ 2 class của ":hover") → hover không
 * còn tác dụng (bug đã gặp thực tế — để nguyên comment này tránh lặp lại). */
.gl-listing-seo__toggle:hover {
	color: var(--gl-gold);
}

/* Icon SVG mượn nguyên từ chevron accordion (gl_icon_chevron_down(), xem functions.php +
   ".gl-accordion__chevron" trong file này) cho đồng bộ — cùng cỡ, cùng cách xoay 180° khi mở. */
.gl-listing-seo__toggle-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

/* SVG có sẵn "stroke" cứng màu vàng (gl_icon_chevron_down() dùng chung cho accordion trên nền
   khác) — ép lại "currentColor" để icon LUÔN cùng màu với chữ nhãn nút (đổi xanh navy <-> vàng khi
   hover cùng lúc với chữ, giống hẳn ".gl-news-card__cta"), thay vì bị khoá cứng 1 màu vàng cố định
   dù nút đang ở trạng thái nào. */
.gl-listing-seo__toggle-icon svg path {
	stroke: currentColor;
	transition: stroke 0.2s ease;
}

.gl-listing-seo.is-expanded .gl-listing-seo__toggle-icon {
	transform: rotate(180deg);
}

/* Trạng thái đang tải AJAX (Tin Tức + Sản Phẩm, xem gamuda-home.js) — mờ nhẹ + chặn click đúp
   trong lúc chờ response, không cần spinner riêng vì thời gian tải thường rất nhanh. */
.gl-news-listing__results.is-loading,
.gl-products-listing__results.is-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.gl-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: var(--gl-gap-2xl);
}

.gl-pagination__num,
.gl-pagination__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 4px;
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--gl-text);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gl-pagination__num:hover,
.gl-pagination__arrow:hover {
	border-color: var(--gl-gold);
	color: var(--gl-green);
}

.gl-pagination__num.is-active {
	background: var(--gl-btn-bg);
	border-color: var(--gl-btn-bg);
	color: var(--gl-gold-light);
}

.gl-pagination__arrow.is-disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* ===== TIN TỨC — chi tiết bài viết ===== */
.gl-news-detail__notfound {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gl-gap-md);
	text-align: left;
}

.gl-news-detail__article {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-xl);
}

/* ===== TIN TỨC — banner ảnh ở đầu bài (title + ngày đăng đè lên ảnh) ===== */
.gl-news-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 460px;
	padding: var(--gl-section-x);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--gl-green-dark);
}

.gl-news-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28, 28, 28, 0.3) 0%, rgba(28, 28, 28, 0.8) 100%);
}

.gl-news-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-md);
	max-width: 845px;
}

.gl-news-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

body.gamuda-landing .gl-news-hero__back {
	color: var(--gl-gold-light);
}

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

.gl-news-hero__title {
	color: var(--gl-white);
}

.gl-news-hero__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.gl-news-hero__meta-dot {
	opacity: 0.6;
}

.gl-news-detail__body {
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-md);
}

/* Nội dung bài viết render qua the_content() (Bài Viết thật) nên có thể chứa heading, ảnh,
   link, danh sách... chứ không chỉ đoạn văn thô như trước — style thêm cho các thẻ phổ biến. */
.gl-news-detail__body p {
	font-size: 16px;
	line-height: 1.8;
	color: var(--gl-text);
}

/* .gl-news-detail__body cách đoạn bằng "gap" của flex — chỉ tác dụng lên CON TRỰC TIẾP. Nếu
   the_content() trả về nội dung bọc trong 1 wrapper (dán từ trình soạn ngoài / chat AI hay để lại
   <div tabindex="-1">…, hoặc Gutenberg group / <figure>) thì các <p> nằm sâu 1 cấp, không còn là
   flex-item -> "gap" không với tới, các đoạn dính liền nhau (không có cách dòng). Cho margin-top
   dự phòng cho block con nằm trong wrapper; :first-child reset để không lệch mép trên. */
body.gamuda-landing .gl-news-detail__body > * > p,
body.gamuda-landing .gl-news-detail__body > * > ul,
body.gamuda-landing .gl-news-detail__body > * > ol,
body.gamuda-landing .gl-news-detail__body > * > h2,
body.gamuda-landing .gl-news-detail__body > * > h3,
body.gamuda-landing .gl-news-detail__body > * > h4,
body.gamuda-landing .gl-news-detail__body > * > blockquote,
body.gamuda-landing .gl-news-detail__body > * > figure {
	margin-top: var(--gl-gap-md);
	margin-bottom: 0;
}

body.gamuda-landing .gl-news-detail__body > * > *:first-child {
	margin-top: 0;
}

/* Trang nội dung tĩnh (chính sách, điều khoản...) dùng chung template + class này với chi tiết
   Tin Tức (xem page-gamuda-content.php) — nội dung thường tự chứa 1 thẻ <h1> tiêu đề (do UX
   Builder chèn từ trước), nên style luôn ở đây cho đồng bộ font/màu với h2-h4. */
.gl-news-detail__body h1,
.gl-news-detail__body h2,
.gl-news-detail__body h3,
.gl-news-detail__body h4 {
	font-family: var(--gl-font-serif);
	font-weight: 600;
	color: var(--gl-green);
	line-height: 1.3;
}

.gl-news-detail__body img {
	width: 100%;
	border-radius: var(--gl-radius-md);
}

.gl-news-detail__body a {
	color: var(--gl-green);
	text-decoration: underline;
}

.gl-news-detail__body ol {
	font-size: 16px;
	line-height: 1.8;
	color: var(--gl-text);
}

/* body.gamuda-landing ul {list-style:none; padding:0;} (gamuda-tokens.css) có specificity cao
   hơn 1 class thường — phải chỉ định lại ở selector cụ thể hơn để thắng cascade (giống cách xử
   lý "body.gamuda-landing a" ở chỗ khác trong file này). */
body.gamuda-landing .gl-news-detail__body ul,
body.gamuda-landing .gl-news-detail__body ol {
	padding-left: 1.4em;
	list-style: revert;
	font-size: 16px;
	line-height: 1.8;
	color: var(--gl-text);
}

.gl-news-detail__body blockquote {
	margin: 0;
	padding-left: var(--gl-gap-md);
	border-left: 3px solid var(--gl-gold);
	font-style: italic;
	color: var(--gl-text);
}

/* Danh sách Thẻ (post_tag) ở cuối bài viết (single.php) — mỗi thẻ 1 pill link về đúng trang archive
 * thẻ đó (tag.php). Cùng ngôn ngữ thiết kế pill với ".gl-residences__tab" (nền kem/viền xám, hover
 * viền vàng) — chỉ khác đổi luôn màu CHỮ sang vàng khi hover (thẻ là link điều hướng, không phải nút
 * chọn tab) để rõ đang hover, không chỉ đổi viền. */
.gl-post-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: var(--gl-gap-lg);
	padding-top: var(--gl-gap-lg);
	border-top: 1px solid var(--gl-border);
}

.gl-post-tags__label {
	font-weight: 600;
	color: var(--gl-text);
	margin-right: 4px;
}

.gl-post-tags__link {
	padding: 6px 16px;
	background: var(--gl-cream);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-pill);
	font-size: 13px;
	color: var(--gl-green);
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.gl-post-tags__link:hover {
	border-color: var(--gl-gold);
	background: var(--gl-white);
	color: var(--gl-gold);
}

.gl-news-detail__back {
	padding-top: var(--gl-gap-lg);
	border-top: 1px solid var(--gl-border);
}

/* Có ".gl-post-tags" ngay trước rồi thì tự nó đã là 1 đường kẻ ngang phân cách — bỏ border-top của
 * "Quay Lại" ở đây để tránh 2 đường kẻ liền nhau nhìn dư thừa. */
.gl-post-tags + .gl-news-detail__back {
	padding-top: 0;
	border-top: none;
}

.gl-news-detail__related {
	max-width: none;
	margin-top: var(--gl-gap-3xl);
	padding-top: var(--gl-gap-2xl);
	border-top: 1px solid var(--gl-border);
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-lg);
}

/* ===== LIFESTYLE GALLERY ===== */
.gl-gallery {
	background: var(--gl-cream);
}

/* Ẩn khối video (field "video_visible", xem section-gallery.php) khiến section chỉ còn khối ảnh,
   thấp hơn hẳn bình thường — vẫn giữ nguyên padding-bottom mặc định của ".gl-section" (120px, tính
   cho trường hợp ĐỦ cả 2 khối) thì để lại khoảng trắng thừa phía dưới trước khi sang section kế
   tiếp. Giảm riêng padding-bottom cho đúng trường hợp này. */
.gl-gallery--no-video {
	padding-bottom: 60px;
}

/* Header 2 cột (tiêu đề trái, mô tả phải cùng hàng) thay cho ".gl-section-header" căn giữa —
   tham khảo ảnh đối chiếu người dùng cung cấp. */
.gl-gallery__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gl-gap-2xl);
	margin-bottom: var(--gl-gap-2xl);
}

.gl-gallery__header-text {
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-sm);
	max-width: 600px;
}

.gl-gallery__header-desc {
	flex: 0 0 380px;
	padding-bottom: 6px;
}

/* Hình Ảnh & Video: "gallery_desc" giờ là rich text — style cũ của "<p class="gl-gallery__header-desc">"
 * chuyển sang khớp qua selector hậu duệ, cùng kỹ thuật đã dùng cho ".gl-section-header__desc" /
 * ".gl-amenities__header-desc" ở trên. Bọc ngoài ".gl-gallery__header-desc" vẫn giữ để không mất
 * "flex: 0 0 380px" (kích thước cột 2 của header, không liên quan tới style chữ). */
.gl-gallery__header-desc .gl-rich-content p {
	font-size: var(--gl-fs-body);
	line-height: 1.7;
	color: var(--gl-text);
	opacity: 0.85;
}

/* ===== SHOWCASE (dùng chung cho Gallery + Video: ảnh/video chính + list bên phải) ===== */
.gl-showcase {
	display: flex;
	gap: var(--gl-gap-md);
	align-items: stretch;
	margin-top: var(--gl-gap-2xl);
}

.gl-showcase__media {
	position: relative;
	flex: 1;
	min-width: 0;
	/* "align-self: flex-start" — ".gl-showcase" có "align-items: stretch" nên mặc định khối này bị
	   kéo giãn cao bằng cột thumbnail bên cạnh (".gl-showcase__list-frame", cao hơn 520px do có thêm
	   padding khung viền), dù nội dung thật (".gl-showcase__main") chỉ cao đúng 520px. Khoảng dư ra
	   phía dưới đó khiến ".gl-showcase__nav" (position:absolute, bottom:24px so với CHÍNH khối này)
	   bị đẩy lệch xuống dưới mép ảnh thay vì nằm gọn trong ảnh. Bỏ stretch để khối này chỉ cao đúng
	   bằng nội dung thật, khớp lại đúng mép ảnh. */
	align-self: flex-start;
}

.gl-showcase__main {
	position: relative;
	height: 520px;
	border-radius: var(--gl-radius-md);
	overflow: hidden;
	background-color: var(--gl-border);
}

/* Placeholder cho các khối nền ảnh đang chờ lazy-load (data-gl-lazy-bg, xem gamuda-home.js) — 1 mảng
 * màu nhạt thay vì ô trắng trống trong lúc chưa nạp bg thật. Áp cho mọi khối có thuộc tính này. */
[data-gl-lazy-bg] {
	background-color: rgba(3, 40, 30, 0.06);
	background-image: none;
}

.gl-showcase__main-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	/* Bấm vào ảnh chính mở lightbox xem toàn màn hình (xem JS + ".gl-lightbox" bên dưới). */
	cursor: zoom-in;
	/* Hiệu ứng mờ dần/sáng dần khi đổi ảnh (bấm mũi tên/thumbnail/vuốt) — xem glSetActiveThumb()
	   trong gamuda-home.js: JS chỉ đổi "opacity" (0 rồi 1) NGAY TRƯỚC/SAU khi đổi
	   "background-image", transition ở đây lo phần chuyển động mượt, không đổi ảnh đột ngột như
	   trước (đổi thẳng background-image không transition). */
	transition: opacity 0.25s ease;
}

.gl-showcase__main::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28, 28, 28, 0) 55%, rgba(28, 28, 28, 0.55) 100%);
	pointer-events: none;
}

.gl-showcase__caption {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 1;
}

.gl-showcase__caption-title {
	font-family: var(--gl-font-serif);
	font-weight: 600;
	font-size: 28px;
	color: var(--gl-white);
}

.gl-showcase__nav {
	position: absolute;
	right: 24px;
	bottom: 24px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 16px;
	background: rgba(28, 28, 28, 0.55);
	border-radius: var(--gl-radius-pill);
}

.gl-showcase__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	font-family: var(--gl-font-sans);
	font-size: 20px;
	line-height: 1;
	color: var(--gl-white);
}

.gl-showcase__counter {
	/* Sans — quy ước chung cho MỌI số liệu/đếm số trên site (giá, thẻ thời gian di chuyển, số thứ
	   tự video, badge số...): serif (Cormorant Garamond) chỉ dùng cho tiêu đề CHỮ, không dùng cho
	   số, tránh chữ số kiểu old-style/độ đậm không đều khó đọc ở kích thước nhỏ. */
	font-family: var(--gl-font-sans);
	font-size: 14px;
	font-weight: 600;
	color: var(--gl-white);
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* Khung viền bo góc bao NGOÀI danh sách thumbnail — tách riêng khỏi ".gl-showcase__list" (chỉ lo
   phần cuộn/overflow) để viền luôn sạch, không bị thanh cuộn bên trong chèn sát cạnh, cùng cách xử
   lý đã dùng cho ".gl-developer__desc-frame". Độ rộng cột cố định (260px) chuyển sang đây vì đây
   mới là flex item thật của ".gl-showcase". */
.gl-showcase__list-frame {
	flex: 0 0 260px;
	border: 1px solid var(--gl-gold);
	border-radius: var(--gl-radius-md);
	padding: 14px 6px 14px 14px;
}

.gl-showcase__list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-sm);
	/* 490px (không phải 520px bằng đúng ảnh chính) — khung viền bao ngoài
	   (".gl-showcase__list-frame") cộng thêm padding trên/dưới (14px x2) + border (1px x2) = 30px,
	   nếu để list cao 520px thì cả khung sẽ cao 550px, LÒI hẳn xuống dưới mép ảnh chính (bug thật đã
	   gặp). Trừ sẵn 30px đó để khung ngoài cao khớp đúng 520px, ngang bằng ảnh chính bên trái. */
	max-height: 490px;
	overflow-y: auto;
	padding-right: 10px;
	scrollbar-width: thin;
	scrollbar-color: var(--gl-gold) var(--gl-border);
}

.gl-showcase__list::-webkit-scrollbar {
	width: 5px;
}

.gl-showcase__list::-webkit-scrollbar-track {
	background: var(--gl-border);
	border-radius: 3px;
}

.gl-showcase__list::-webkit-scrollbar-thumb {
	background: var(--gl-gold);
	border-radius: 3px;
}

.gl-showcase__thumb {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 8px;
	background: transparent;
	border: none;
	padding: 0;
	text-align: left;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.gl-showcase__thumb:hover,
.gl-showcase__thumb.is-active {
	opacity: 1;
}

.gl-showcase__thumb-img {
	display: block;
	flex-shrink: 0;
	width: 100%;
	height: 150px;
	background-size: cover;
	background-position: center;
	background-color: var(--gl-border);
	border-radius: var(--gl-radius-sm);
	border: 2px solid transparent;
	box-sizing: border-box;
	transition: transform 0.3s ease, border-color 0.2s ease;
}

/* Hiệu ứng zoom nhẹ khi rê chuột vào từng ảnh trong danh sách thumbnail — phóng to đúng chính ảnh đó
   (không phải cả khối nút), giữ nguyên bo góc vì scale tỉ lệ đều. */
.gl-showcase__thumb:hover .gl-showcase__thumb-img {
	transform: scale(1.06);
}

.gl-showcase__thumb.is-active .gl-showcase__thumb-img {
	border-color: var(--gl-gold);
}

.gl-showcase__thumb-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--gl-green);
}

/* ===== SHOWCASE — biến thể Video =====
 * Khác với Gallery (ảnh + list nằm rời trên nền sáng), Video dựng thành 1 khối thẻ tối liền mạch
 * duy nhất (player + list dính liền nhau, cùng 1 nền + bo góc ngoài) — tham khảo ảnh đối chiếu
 * người dùng cung cấp. ".gl-showcase{align-items:stretch}" (rule gốc) khiến cả 2 cột luôn cao
 * bằng nhau tự động; ".gl-video__frame{height:100%}" bên dưới ăn theo chiều cao đó nên video luôn
 * lấp đầy đúng bằng chiều cao cột danh sách bên phải, không lệch. */
.gl-showcase--video {
	gap: 0;
	/* Gộp chung vào section "Hình Ảnh & Video" (xem section-gallery.php) — cần margin riêng để
	   tách khỏi khối ảnh (.gl-showcase) ngay phía trên, không còn padding của 1 section riêng như
	   trước để tạo khoảng cách. */
	margin-top: var(--gl-gap-3xl);
	background: linear-gradient(160deg, var(--gl-btn-bg-dark) 0%, var(--gl-btn-bg) 100%);
	border-radius: var(--gl-radius-lg);
	overflow: hidden;
}

.gl-showcase--video .gl-showcase__player {
	flex: 1.4;
	min-width: 0;
}

.gl-showcase--video .gl-video__frame {
	padding-top: 0;
	height: 100%;
	border-radius: 0;
}

/* Badge số "02" + eyebrow: mặc định chỉ hiện ở mobile (component dùng chung với Gallery) — Video
   luôn hiện cả ở desktop (đúng như ảnh đối chiếu), nên ghi đè riêng cho biến thể này. */
.gl-showcase--video .gl-showcase__intro-row {
	display: flex;
	align-items: center;
	gap: var(--gl-gap-sm);
	margin-bottom: 4px;
}

.gl-showcase--video .gl-showcase__intro-badge {
	display: flex;
}

.gl-showcase__video-info {
	flex: 1;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-sm);
	padding: var(--gl-gap-xl) var(--gl-gap-lg);
}

.gl-showcase__video-info p {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.72);
}

/* Lớp NGOÀI chỉ lo cuộn (max-height + overflow-y) — KHÔNG được đặt chung "max-height +
   overflow-y:auto" trực tiếp lên chính flex container xếp item (".gl-video-list" bên dưới):
   khi làm vậy, mỗi item bị thuật toán flex-shrink ép co lại vừa đúng max-height bất kể nội dung
   dài bao nhiêu (tiêu đề dài xuống 2-3 dòng bị tràn ra ngoài khung item, đè lên item kế tiếp) —
   cùng lỗi/cách khắc phục đã áp dụng cho ".gl-select__list" + ".gl-select__list-scroll". Cũng là
   nơi đặt "position:relative" để "offsetTop" của từng ".gl-video-item" (dùng trong logic cuộn-tới-
   item-đang-chọn ở gamuda-home.js) tính đúng theo khung cuộn này, không lệch theo tổ tiên xa hơn. */
/* Khung viền bo góc bao NGOÀI khối cuộn — thanh cuộn của trình duyệt luôn nằm SÁT mép trong cùng
   của chính phần tử "overflow-y:auto" (không chừa theo "padding-right" của phần tử đó được, dù đệm
   bao nhiêu), nên viền PHẢI nằm ở 1 lớp bao ngoài riêng (".gl-video-list-scroll" vẫn chỉ lo cuộn)
   thì mới thật sự tách rời khỏi thanh cuộn — cùng cách xử lý đã dùng cho ".gl-showcase__list-frame"/
   ".gl-developer__desc-frame". Dùng "--gl-gold" đặc (không phải "--gl-border-gold" mờ) vì nằm trên
   nền xanh đậm ĐẶC, khác ngữ cảnh ảnh chụp của ".gl-connectivity__map". */
.gl-video-list-frame {
	margin-top: var(--gl-gap-sm);
	border: 1px solid var(--gl-gold);
	border-radius: var(--gl-radius-md);
	padding: 14px 14px 14px 14px;
}

.gl-video-list-scroll {
	position: relative;
	max-height: 320px;
	overflow-y: auto;
	padding-right: 10px;
	scrollbar-width: thin;
	scrollbar-color: var(--gl-gold) var(--gl-border);
}

.gl-video-list-scroll::-webkit-scrollbar {
	width: 5px;
}

.gl-video-list-scroll::-webkit-scrollbar-track {
	background: var(--gl-border);
	border-radius: 3px;
}

.gl-video-list-scroll::-webkit-scrollbar-thumb {
	background: var(--gl-gold);
	border-radius: 3px;
}

/* Lớp TRONG chỉ lo xếp item — không max-height/overflow nên mỗi item luôn cao đúng theo nội dung
   thật của nó, dài bao nhiêu dòng cũng không bị co ép. */
.gl-video-list {
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-sm);
}

.gl-video-item {
	display: flex;
	align-items: center;
	gap: var(--gl-gap-md);
	padding: var(--gl-gap-md) var(--gl-gap-lg);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--gl-radius-sm);
	text-align: left;
	transition: border-color 0.2s ease, background-color 0.2s ease;
	/* "<button>" ở Flatsome mặc định có text-transform:uppercase + font-weight:700 +
	   line-height rất lớn (dành cho 1 dòng chữ nút bấm) — các thuộc tính này kế thừa xuống
	   "strong"/"span" bên trong khiến tiêu đề/mô tả bị viết hoa, in đậm và các dòng đè lên nhau.
	   Reset lại ngay tại đây để toàn bộ nội dung con kế thừa đúng giá trị mong muốn. */
	text-transform: none;
	font-weight: 400;
	line-height: 1.4;
}

.gl-video-item:hover,
.gl-video-item.is-active {
	border-color: var(--gl-gold);
	background: rgba(255, 255, 255, 0.12);
}

.gl-video-item__num {
	flex-shrink: 0;
	/* Sans — quy ước chung cho số liệu trên site, xem ".gl-showcase__counter". */
	font-family: var(--gl-font-sans);
	font-size: 15px;
	font-weight: 700;
	color: var(--gl-gold-light);
}

.gl-video-item__text {
	/* "flex: 1" để khối chữ chiếm hết phần rộng còn lại sau num/play — thiếu dòng này, flex-basis
	   mặc định ("auto") khiến trình duyệt tự co nó lại rất hẹp khi khung item chật (mobile), làm
	   tiêu đề dài bị xuống dòng quá nhiều lần mà khung item lại không cao theo kịp — chính là lỗi
	   nội dung "tràn"/đè chữ giữa các item trên mobile. */
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.gl-video-item__text strong {
	font-size: 14px;
	font-weight: 700;
	color: var(--gl-white);
}

.gl-video-item__text span {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.62);
	text-align: justify;
	text-align-last: left;
}

.gl-video-item__play {
	flex-shrink: 0;
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: var(--gl-gold);
	font-size: 11px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.gl-video-item.is-active .gl-video-item__play {
	background: var(--gl-gold);
	color: var(--gl-green-dark);
}

/* ===== LIGHTBOX (mới) =====
 * Xem ảnh toàn màn hình khi bấm vào ảnh chính trong ".gl-showcase" (Section Hình Ảnh + gallery
 * trang chi tiết sản phẩm — component dùng chung, xem gamuda-home.js) — tham khảo bố cục demo
 * LightGallery (ảnh giữa màn hình + mũi tên 2 bên + nút đóng + đếm số), nhưng tự dựng bằng CSS/JS
 * thuần thay vì thêm thư viện ngoài, đồng bộ với cách mọi component tương tác khác trong theme này
 * đã làm (showcase, accordion, custom select — không phụ thuộc plugin/thư viện bên thứ ba).
 * 1 phần tử lightbox DÙNG CHUNG duy nhất cho toàn trang (JS tự thêm vào cuối <body> 1 lần) — mỗi lần
 * mở chỉ nạp lại đúng danh sách ảnh + vị trí của khối ".gl-showcase" vừa bấm vào, không tạo lightbox
 * riêng cho từng khối (khác với showcase/carousel — những khối đó BẢN THÂN đã hiển thị sẵn trên
 * trang nên phải nhân bản đúng số khối; lightbox chỉ xuất hiện tạm thời lúc xem nên dùng chung được). */
.gl-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(28, 28, 28, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
}

.gl-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

/* Khoá cuộn trang nền khi lightbox đang mở (JS toggle class này trên <body>). */
body.gl-lightbox-open {
	overflow: hidden;
}

.gl-lightbox__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gl-gap-sm);
	max-width: 90vw;
}

.gl-lightbox__img {
	display: block;
	max-width: 90vw;
	max-height: 80vh;
	width: auto;
	height: auto;
	border-radius: var(--gl-radius-sm);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.gl-lightbox__caption {
	font-family: var(--gl-font-sans);
	font-size: 14px;
	color: var(--gl-white);
	opacity: 0.85;
	text-align: center;
}

.gl-lightbox__close,
.gl-lightbox__arrow {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Flatsome đặt "padding: 0 1.2em" cho MỌI <button> (đúng gotcha đã gặp ở ".gl-tab-content__tabs-nav"
	   — xem chú thích ở đó) — 2 nút này có nội dung là 1 ký tự/text thẳng bên trong (×, ‹, ›) nên vô
	   tình trở thành flex item ẩn danh bên trong chính "display:flex" của nút, đủ để ép chiều RỘNG nút
	   giãn ra ăn theo padding dù đã khai "width" cố định (44px/52px) — chỉ riêng chiều CAO không bị ảnh
	   hưởng (padding chỉ có ở 2 bên trái/phải, "0 1.2em"), nên nút render thành HÌNH BẦU DỤC (rộng hơn
	   cao) thay vì tròn đều dù đã có "border-radius:50%". Reset về 0 để width/height thật sự bằng nhau
	   đúng như khai báo. */
	padding: 0;
	background: rgba(255, 255, 255, 0.1);
	/* Tăng độ đậm viền từ 0.25 lên 0.5 — viền cũ quá mờ trên nền tối bán trong suốt của lightbox, gần
	   như không thấy được (user phản hồi trực tiếp từ ảnh chụp). Vẫn giữ hình tròn (border-radius:50%,
	   đã đúng từ đầu). */
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	color: var(--gl-white);
	line-height: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.gl-lightbox__close:hover,
.gl-lightbox__arrow:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.8);
}

.gl-lightbox__close {
	top: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
	font-size: 22px;
}

.gl-lightbox__arrow {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	font-size: 26px;
}

.gl-lightbox__arrow--prev {
	left: 24px;
}

.gl-lightbox__arrow--next {
	right: 24px;
}

.gl-lightbox__counter {
	position: absolute;
	top: 24px;
	left: 24px;
	font-family: var(--gl-font-sans);
	font-size: 14px;
	font-weight: 600;
	color: var(--gl-white);
	letter-spacing: 0.04em;
}

@media (max-width: 767px) {
	.gl-lightbox__close,
	.gl-lightbox__arrow {
		width: 38px;
		height: 38px;
		font-size: 18px;
	}

	.gl-lightbox__close {
		top: 12px;
		right: 12px;
	}

	.gl-lightbox__counter {
		top: 12px;
		left: 12px;
		font-size: 12px;
	}

	.gl-lightbox__arrow--prev {
		left: 8px;
	}

	.gl-lightbox__arrow--next {
		right: 8px;
	}
}

/* ===== SHOWCASE — khối badge số + tiêu đề hướng dẫn (chỉ hiện trên mobile,
   xem @media max-width:1023px) và caption video đang phát dưới player ===== */
.gl-showcase__intro {
	display: none;
}

.gl-showcase__intro-badge {
	display: none;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--gl-green);
	color: var(--gl-gold);
	/* Sans — quy ước chung cho số liệu trên site, xem ".gl-showcase__counter". */
	font-family: var(--gl-font-sans);
	font-size: 14px;
	font-weight: 700;
}

.gl-showcase__intro-row {
	display: contents;
}

.gl-showcase__intro-title {
	font-family: var(--gl-font-serif);
	font-weight: 600;
	font-size: 20px;
	color: var(--gl-green);
	margin-bottom: 4px;
}

.gl-showcase__intro-text p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--gl-text);
	opacity: 0.8;
}

/* ===== REGISTRATION ===== */
/* "background-color" là nền đặc dự phòng khi admin chưa chọn "Ảnh nền section" — có ảnh thì PHP in
   thêm "background-image" inline (xem section-registration.php), 3 khai báo size/position/repeat ở
   đây lo phần hiển thị ảnh đó, cùng công thức với ".gl-hero". */
.gl-registration {
	position: relative;
	background-color: var(--gl-btn-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-top: 120px;
	padding-bottom: 120px;
	overflow: hidden;
}

/* Lớp phủ tối khi CÓ ảnh nền — chỉ được in ra (xem section-registration.php) khi admin đã chọn ảnh,
   đậm hơn bên trái (nơi có chữ) nhạt dần sang phải (nơi card sáng đã tự đủ tương phản), cùng tông
   gần đen trung tính với ".gl-hero__overlay" (không dùng navy thương hiệu để ảnh lên màu tự nhiên). */
.gl-registration__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(6, 9, 14, 0.88) 0%, rgba(6, 9, 14, 0.72) 46%, rgba(6, 9, 14, 0.5) 100%);
}

.gl-registration__row {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gl-gap-2xl);
}

.gl-registration__left {
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-xl);
	max-width: 519px;
}

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

.gl-registration__header p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--gl-white);
	opacity: 0.8;
}

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

.gl-contact-row {
	display: flex;
	align-items: center;
	gap: var(--gl-gap-sm);
	font-size: 16px;
	color: var(--gl-white);
}

/* Số điện thoại giờ là link "tel:" thật (bấm gọi được trên mobile) — reset màu/gạch chân mặc định
   của trình duyệt cho thẻ <a> để vẫn trông y hệt đoạn text trắng như trước, chỉ gạch chân khi hover
   làm tín hiệu "bấm được". */
.gl-contact-row a {
	color: inherit;
	text-decoration: none;
}

.gl-contact-row a:hover {
	text-decoration: underline;
}

/* Card SÁNG (nền kem) nổi trên ảnh nền tối — đổi từ bản cũ "kính mờ + viền vàng" (chỉ hợp nền màu
   đặc) sang kiểu thẻ thật, đổ bóng để tự tách khỏi ảnh phía sau mà không cần viền. */
.gl-registration__form-card {
	flex-shrink: 0;
	width: 628px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-sm);
	padding: var(--gl-gap-xl);
	background: var(--gl-cream);
	border-radius: var(--gl-radius-lg);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.gl-registration__form-title {
	font-family: var(--gl-font-serif);
	font-weight: 600;
	font-size: 28px;
	color: var(--gl-green);
}

/* Nối "body.gamuda-landing" để "margin" thắng reset "body.gamuda-landing h1,h2,h3,h4,p { margin:0 }"
   (gamuda-tokens.css) — phần tử là <p>, không có prefix thì margin âm/dưới ở đây không bao giờ áp
   dụng được (rơi về margin:0 của reset, đặc thù cao hơn 1 lớp đơn của ".gl-registration__form-sub"). */
body.gamuda-landing .gl-registration__form-sub {
	margin: -8px 0 4px;
	font-size: var(--gl-fs-body-sm);
	color: var(--gl-text);
	opacity: 0.7;
}

/* ===== Contact Form 7 (registration + popup) ===== */
.gl-cf7 form {
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-md);
}

.gl-cf7 form br {
	display: none;
}

.gl-cf7 form p {
	margin: 0;
}

.gl-cf7 label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 15px;
}

/* Field không dùng <label> (chỉ có placeholder trong input) — CF7 tự bọc mỗi field trong
   .wpcf7-form-control-wrap, dùng khối này để tạo đường viền dưới giống khi có label.
   Có padding ngang/trên để chữ không chạm sát viền khung "phát sáng" lúc focus bên dưới. */
/* padding-bottom dư ra so với các cạnh còn lại — chừa sẵn chỗ cho dòng tip lỗi (xem
   ".wpcf7-not-valid-tip" bên dưới, định vị tuyệt đối NẰM TRONG khoảng chừa này, đẩy hẳn xuống đáy
   để tách rõ khỏi placeholder) để field nào cũng cao bằng nhau dù có lỗi hay không, tránh việc cả
   popup co giãn kích thước khi validate. */
.gl-cf7 .wpcf7-form-control-wrap {
	position: relative;
	display: block;
	padding: 6px 12px 40px;
	border-radius: 6px;
	transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

/* Hiệu ứng "phát sáng" màu vàng quanh field đang gõ — áp dụng chung cho mọi form dùng .gl-cf7
   (popup đăng ký + section "Đăng Ký Tư Vấn" ở trang chủ đều dùng chung component này, cả 2
   biến thể sáng/tối đều dùng tông vàng để đồng nhất với màu nhấn chính của site). */
.gl-cf7 .wpcf7-form-control-wrap:focus-within {
	background-color: rgba(20, 156, 178, 0.1);
	box-shadow: 0 0 0 1px var(--gl-gold-bright), 0 0 18px rgba(20, 156, 178, 0.5);
}

.gl-cf7 input[type="text"],
.gl-cf7 input[type="email"],
.gl-cf7 input[type="tel"],
.gl-cf7 select,
.gl-cf7 textarea,
.gl-cf7 input[type="text"]:focus,
.gl-cf7 input[type="email"]:focus,
.gl-cf7 input[type="tel"]:focus,
.gl-cf7 select:focus,
.gl-cf7 textarea:focus {
	display: block;
	width: 100%;
	font-family: var(--gl-font-sans);
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 6px 0 0;
	margin: 0;
	appearance: none;
	border-radius: 0 !important;
	resize: vertical;
}

/* <select> gốc của trình duyệt: danh sách xổ xuống do hệ điều hành vẽ, không thể chỉnh width hay
   bo góc bằng CSS (giới hạn kỹ thuật, không riêng gì site này) — nên thay bằng dropdown tự dựng
   ".gl-select" (xem glInitCustomSelect() trong gamuda-home.js), toàn quyền style. <select> gốc vẫn
   giữ lại trong DOM (ẩn đi nhưng vẫn focus/tab được) để CF7 nhận đúng giá trị khi submit. */
.gl-select__native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.gl-select {
	position: relative;
}

.gl-select__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 6px 0 0;
	margin: 0;
	background: transparent;
	border: none;
	font-family: var(--gl-font-sans);
	font-size: 15px;
	/* Flatsome (theme cha) mặc định viết hoa + in đậm (700) mọi <button> — ".gl-select__trigger"
	   là button nên bị ăn theo, trong khi input/textarea khác trong form không phải button nên
	   không bị ảnh hưởng; đè lại cho khớp placeholder các field còn lại (thường, weight 400). */
	text-transform: none;
	font-weight: 400;
	color: var(--gl-text);
	text-align: left;
	cursor: pointer;
}

.gl-select__value--placeholder {
	opacity: 0.45;
}

.gl-select__chevron {
	flex-shrink: 0;
	font-size: 16px;
	color: var(--gl-text);
	opacity: 0.6;
	transition: transform 0.2s ease;
}

.gl-select.is-open .gl-select__chevron {
	transform: rotate(180deg);
}

/* Nổi đè lên trên (position:absolute) thay vì đẩy layout — mở dropdown không được làm cả popup
   giãn cao ra. Trước đó thử để trong luồng bình thường (đẩy field bên dưới xuống) nhưng lại khiến
   cả popup đổi kích thước liên tục, nhìn giật cục hơn — floating overlay có bóng đổ rõ ràng là
   cách chuẩn cho dropdown, không tính là "đè xấu" như bản <select> gốc trước đây nữa vì đã có nền
   trắng + bo góc + đổ bóng tách bạch hẳn khỏi nội dung phía dưới. */
/* Thanh scroll do trình duyệt tự vẽ, không tự bo theo border-radius của khối chứa (dù đã có
   overflow) — nếu để chính ".gl-select__list" vừa bo góc vừa cuộn thì góc thanh scroll sẽ lòi ra
   vuông vức, phá vỡ bo tròn. Tách 2 vai trò: ".gl-select__list" chỉ lo bo góc/viền/đổ bóng +
   overflow:hidden để cắt gọn theo đúng bo góc; ".gl-select__list-scroll" bên trong mới là khối
   thật sự cuộn được, hình chữ nhật đơn giản nên thanh scroll không đụng tới góc tròn nữa. */
.gl-select__list {
	display: none;
	position: absolute;
	z-index: 20;
	top: calc(100% + 14px);
	left: 0;
	width: 100%;
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 12px 28px rgba(28, 28, 28, 0.18);
}

.gl-select__list-scroll {
	max-height: 220px;
	overflow-y: auto;
	padding: 6px;
	scrollbar-width: thin;
	scrollbar-color: var(--gl-gold) var(--gl-border);
}

.gl-select__list-scroll::-webkit-scrollbar {
	width: 5px;
}

.gl-select__list-scroll::-webkit-scrollbar-track {
	background: var(--gl-border);
	border-radius: 3px;
}

.gl-select__list-scroll::-webkit-scrollbar-thumb {
	background: var(--gl-gold);
	border-radius: 3px;
}

.gl-select.is-open .gl-select__list {
	display: block;
}

.gl-select__item {
	display: block;
	width: 100%;
	padding: 9px 12px;
	margin: 0;
	background: transparent;
	border: none;
	border-radius: 6px;
	font-family: var(--gl-font-sans);
	font-size: 14px;
	text-transform: none;
	font-weight: 400;
	color: var(--gl-text);
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.gl-select__item:hover {
	background: var(--gl-cream);
}

.gl-select__item.is-active {
	background: var(--gl-gold);
	color: var(--gl-green);
	font-weight: 600;
}

.gl-cf7 .wpcf7-acceptance label {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

.gl-cf7 .wpcf7-list-item {
	margin: 0;
}

.gl-cf7 input[type="submit"] {
	display: flex;
	width: 100%;
	justify-content: center;
	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;
	cursor: pointer;
	/* "<input type=submit>" là 1 form control gốc — trình duyệt/hệ điều hành tự vẽ 1 lớp "chrome"
	   mặc định lên trên (đặc biệt rõ ở TRẠNG THÁI DISABLED, khi CF7 tạm khoá nút lúc đang gửi:
	   Windows/Chrome đổ đè 1 gradient xám/be riêng, ăn lên trên background do CSS đặt, làm nút GIỐNG
	   Y HỆT NHƯ đang lỗi màu — bug thực tế gặp phải khi test, không phải do biến màu sai). Tắt hẳn
	   lớp vẽ mặc định đó để background/color của mình luôn là thứ hiển thị, kể cả lúc disabled. */
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
	/* "<input>" là phần tử replaced — "display:flex"/"justify-content" ở trên KHÔNG tự canh giữa
	   được chữ nhãn nút bên trong (khác hẳn nút "<a class="gl-btn">" thường, có DOM con thật để
	   flex canh). Chữ nhãn nút thật ra do "text-align" quyết định — CF7 mặc định bọc field trong
	   "<p>", nên nếu không khai báo rõ ở đây, nút sẽ VÔ TÌNH kế thừa "text-align-last:left" từ rule
	   justify chung toàn site ("body.gamuda-landing p", gamuda-tokens.css), làm chữ lệch trái thay
	   vì nằm giữa nút. */
	text-align: center;
	text-align-last: center;
}

/* Lúc CF7 đang gửi (form.submitting), nút bị gắn "disabled" tạm thời — giữ NGUYÊN màu nền/chữ (nhờ
   "appearance:none" ở trên) chỉ giảm nhẹ độ đục + đổi con trỏ, để biết đang xử lý mà không trông
   như nút bị vỡ màu. */
.gl-cf7 input[type="submit"]:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* CF7 core có chế độ "floating validation tip" (".use-floating-validation-tip") tự đẩy tip lỗi
   lên `top:-2ex` để "nổi" ngay trên field — với input của mình (nền trong suốt, không viền, sát
   placeholder) thì đẩy lên kiểu đó lại đè thẳng lên chữ placeholder. Định vị tuyệt đối, neo vào
   đúng khoảng padding-bottom đã chừa sẵn ở ".wpcf7-form-control-wrap" — nằm NGAY TRONG khoảng đó
   nên field cao y hệt dù tip có hiện hay không, popup không co giãn kích thước lúc validate. */
.gl-cf7 .wpcf7-not-valid-tip {
	position: absolute !important;
	top: auto !important;
	bottom: 2px;
	left: 12px !important;
	right: auto !important;
	z-index: auto !important;
	display: inline-block;
	width: auto !important;
	max-width: calc(100% - 24px);
	margin-top: 0;
	border: 1px solid #E27D60 !important;
	border-radius: 4px;
	background: rgba(226, 125, 96, 0.08) !important;
	padding: 2px 10px !important;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: #E27D60;
}

.gl-cf7 .wpcf7-response-output {
	border-radius: 8px;
	font-size: 14px;
}

/* Ẩn khối thông báo tổng "Một hay nhiều dòng bị lỗi..." khi validate fail — tip lỗi riêng từng
   field (".wpcf7-not-valid-tip" ở trên) đã đủ rõ, không cần thêm dòng tổng kết này. Chỉ ẩn đúng
   trạng thái invalid/unaccepted, không đụng thông báo gửi thành công/thất bại/spam. */
.gl-cf7 form.invalid .wpcf7-response-output,
.gl-cf7 form.unaccepted .wpcf7-response-output {
	display: none;
}

.gl-cf7--dark label {
	color: var(--gl-white);
	opacity: 0.85;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--gl-gold);
}

.gl-cf7--dark .wpcf7-form-control-wrap {
	border-bottom: 1px solid var(--gl-gold);
}

.gl-cf7--dark input[type="text"],
.gl-cf7--dark input[type="email"],
.gl-cf7--dark input[type="tel"],
.gl-cf7--dark select,
.gl-cf7--dark textarea {
	color: var(--gl-white);
	font-size: 16px;
}

.gl-cf7--dark ::placeholder {
	color: rgba(255, 255, 255, 0.85);
	opacity: 1;
}

/* Dropdown tự dựng (".gl-select__trigger") không phải input/select thật nên không tự ăn theo màu
   chữ của biến thể tối ở trên — set lại thủ công cho khớp các field khác trong cùng form. */
.gl-cf7--dark .gl-select__trigger,
.gl-cf7--dark .gl-select__chevron {
	color: var(--gl-white);
}

.gl-cf7--dark .gl-select__value--placeholder {
	opacity: 0.85;
}

/* "!important" bắt buộc trên "background" — Flatsome Customizer (mục "Nút bấm") chèn 1 khối
   <style> nội tuyến trong <head> style CHUNG cho "input[type=submit]" bằng gradient vàng-cam
   ("!important" sẵn), thắng mọi rule thường dù đặc thù cao hơn (importance thắng specificity —
   cùng bài học "!important" đã gặp nhiều lần ở form này). Không sửa cấu hình Customizer (ảnh hưởng
   toàn site, có thể đang đúng ý cho nút <a class="button"> khác) — chỉ tăng đặc thù CHÍNH rule của
   nút submit CF7 để thắng đúng phạm vi này. */
.gl-cf7--dark input[type="submit"] {
	background: var(--gl-gold) !important;
	border-color: var(--gl-gold) !important;
	color: var(--gl-green) !important;
}

.gl-cf7--dark input[type="submit"]:hover {
	background: var(--gl-gold-bright) !important;
	border-color: var(--gl-gold-bright) !important;
}

.gl-cf7--light label {
	color: var(--gl-green);
	font-weight: 600;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--gl-border);
}

.gl-cf7--light .wpcf7-form-control-wrap {
	border-bottom: 1px solid var(--gl-border);
}

.gl-cf7--light input[type="text"],
.gl-cf7--light input[type="email"],
.gl-cf7--light input[type="tel"],
.gl-cf7--light select,
.gl-cf7--light textarea {
	color: var(--gl-text);
	font-size: 15px;
}

.gl-cf7--light ::placeholder {
	color: rgba(45, 45, 45, 0.45);
}

/* Cùng lý do "!important" đã ghi ở ".gl-cf7--dark input[type=submit]" phía trên — Customizer chèn
   gradient vàng-cam "!important" cho MỌI input[type=submit] site-wide. */
.gl-cf7--light input[type="submit"] {
	background: var(--gl-btn-bg) !important;
	border-color: var(--gl-btn-bg) !important;
	color: var(--gl-gold-light) !important;
}

.gl-cf7--light input[type="submit"]:hover {
	color: var(--gl-gold-bright) !important;
}

/* Section "Đăng Ký Tư Vấn" (".gl-registration__form") + "Thông Tin Liên Hệ" (".gl-contact-info__form",
   section-contact-info.php — dùng CHUNG bộ rule này thay vì lặp lại, cả 2 đều là card SÁNG nền kem):
   đổi field từ kiểu "gạch chân" mặc định của ".gl-cf7--light" sang kiểu "khung viền" (giống ô nhập
   tham khảo imperia-sensapark).
   QUAN TRỌNG: viền/nền đặt thẳng lên <input>/<select>/<textarea> (KHÔNG đặt lên
   ".wpcf7-form-control-wrap" như 2 biến thể dark/light gốc) — CF7 render tip lỗi
   ".wpcf7-not-valid-tip" làm PHẦN TỬ CON NẰM SAU field, CÙNG bên trong wrap; nếu viền/nền nằm ở
   wrap thì khung sẽ phình ra ôm luôn cả dòng chữ lỗi (viền bao quanh cả input lẫn tip, nhìn dính
   cục — bug thực tế gặp phải khi test). Để wrap trong suốt/không viền thì tip tự do đứng NGAY
   DƯỚI, NGOÀI khung field, đúng như tham khảo. Cùng kỹ thuật override đã dùng cho ".gl-popup__form"
   — đứng SAU ".gl-cf7--light" trong file nên thắng dù cùng độ đặc thù (2 lớp), kể cả các thuộc tính
   "!important" của rule gốc (phải lặp lại "!important" ở đây để thắng). */
.gl-registration__form .wpcf7-form-control-wrap,
.gl-contact-info__form .wpcf7-form-control-wrap {
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	/* Khoảng cách đều giữa các field — KHÔNG dùng "gap" trên <form> vì CF7 render TẤT CẢ field +
	   nút gửi vào chung 1 thẻ <p> duy nhất (ngăn cách bằng <br>, mà ".gl-cf7 form br{display:none}"
	   đã ẩn), tức <form> chỉ có 1 flex-item nên "gap" không có tác dụng gì (đã verify: 0px giữa các
	   field trước khi sửa). Margin-bottom đặt ngay trên wrap để LUÔN chừa đúng khoảng này SAU field
	   — có lỗi hay không cũng vậy, vì tip lỗi (position:static) nằm TRONG wrap nên cộng thêm chiều
	   cao PHÍA TRƯỚC margin-bottom này, không thay thế nó — đúng cách imperia dùng
	   ".ffield{margin-bottom:20px}". */
	margin-bottom: 20px;
}

.gl-registration__form .wpcf7-form-control-wrap:focus-within,
.gl-contact-info__form .wpcf7-form-control-wrap:focus-within {
	background: transparent;
	box-shadow: none;
}

.gl-registration__form input[type="text"],
.gl-registration__form input[type="email"],
.gl-registration__form input[type="tel"],
.gl-registration__form select,
.gl-contact-info__form input[type="text"],
.gl-contact-info__form input[type="email"],
.gl-contact-info__form input[type="tel"],
.gl-contact-info__form select {
	display: block;
	width: 100%;
	/* "height" (không phải min-height) để MỌI field 1 dòng cao bằng nhau tuyệt đối — kể cả
	   ".gl-select__trigger" bên dưới, vốn tự nhiên cao hơn input ~12px do icon + line-height riêng. */
	height: 60px;
	padding: 0 16px !important;
	background: var(--gl-white) !important;
	border: 1px solid var(--gl-border) !important;
	border-radius: var(--gl-radius-sm) !important;
	box-sizing: border-box;
}

.gl-registration__form textarea,
.gl-contact-info__form textarea {
	display: block;
	width: 100%;
	min-height: 96px;
	padding: 14px 16px !important;
	background: var(--gl-white) !important;
	border: 1px solid var(--gl-border) !important;
	border-radius: var(--gl-radius-sm) !important;
	box-sizing: border-box;
	resize: vertical;
}

/* Dropdown tự dựng ".gl-select__trigger" (thay <select> gốc) — KHÔNG khai lại "display/width", rule
   gốc (gamuda-tokens.css) đã là "display:flex; width:100%" để canh chữ + icon mũi tên 2 đầu, khai
   đè "display:block" ở đây sẽ vỡ layout icon. Chỉ đổi khung/nền/khoảng đệm cho khớp input khác —
   "height" (không phải min-height) để cao bằng đúng field text/tel bên trên. */
.gl-registration__form .gl-select__trigger,
.gl-contact-info__form .gl-select__trigger {
	height: 60px;
	padding: 0 16px !important;
	background: var(--gl-white) !important;
	border: 1px solid var(--gl-border) !important;
	border-radius: var(--gl-radius-sm) !important;
	box-sizing: border-box;
}

.gl-registration__form input[type="text"]:focus,
.gl-registration__form input[type="email"]:focus,
.gl-registration__form input[type="tel"]:focus,
.gl-registration__form select:focus,
.gl-registration__form textarea:focus,
.gl-contact-info__form input[type="text"]:focus,
.gl-contact-info__form input[type="email"]:focus,
.gl-contact-info__form input[type="tel"]:focus,
.gl-contact-info__form select:focus,
.gl-contact-info__form textarea:focus {
	border-color: var(--gl-gold) !important;
	/* Rule gốc ".gl-cf7 input...:focus { box-shadow:none!important; border-radius:0!important }"
	   liệt kê SẴN các biến thể ":focus" với "!important" — selector đó vì vậy đặc thù CAO HƠN rule
	   khung viền (không có ":focus") ở trên, nên thắng và làm mất bo góc lúc gõ (bug thực tế gặp
	   phải khi test, không phải "border-radius" bị thiếu). Phải khai lại "border-radius" ở CHÍNH
	   rule ":focus" này (không đủ chỉ khai ở rule thường) + "!important" để thắng. */
	border-radius: var(--gl-radius-sm) !important;
	box-shadow: 0 0 0 3px rgba(15, 122, 140, 0.15) !important;
}

.gl-registration__form .gl-select.is-open .gl-select__trigger,
.gl-contact-info__form .gl-select.is-open .gl-select__trigger {
	border-color: var(--gl-gold) !important;
}

/* (Không dùng "gap" trên <form> — xem giải thích ở rule ".wpcf7-form-control-wrap" phía trên;
   khoảng cách giữa field giờ nằm ở "margin-bottom" của chính wrap.) Nút gửi cũng là 1 sibling
   thường trong cùng <p> đó nên tự nhận đúng margin-bottom 20px của field LoiDn đứng ngay trước —
   không cần margin-top riêng cho nút gửi. */

/* Tip lỗi ("Không bỏ trống!"...) — giờ là dòng chữ đỏ THƯỜNG, đứng NGAY DƯỚI field và NẰM NGOÀI
   khung field (vì khung đã chuyển sang chính input, xem trên) — đúng kiểu tham khảo imperia, khác
   hẳn kiểu badge nổi bên trong dùng cho popup. Đứng sau ".gl-cf7 .wpcf7-not-valid-tip" trong file
   nên thắng dù cùng độ đặc thù, kể cả các thuộc tính có "!important" ở rule gốc. */
.gl-registration__form .wpcf7-not-valid-tip,
.gl-contact-info__form .wpcf7-not-valid-tip {
	position: static !important;
	display: block;
	width: auto !important;
	max-width: none;
	margin: 6px 2px 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	font-size: 12px;
	font-weight: 500;
}

/* ===== POPUP ĐĂNG KÝ =====
   Redesign: ảnh dự án dùng làm NỀN cho toàn bộ popup (thay vì chỉ 1 panel nhỏ bên phải như bản cũ),
   phủ lớp overlay xanh đậm + blur (".gl-popup__overlay") lên trên để chữ trắng/vàng vẫn đọc rõ —
   tông màu tái dùng đúng bộ green/gold sẵn có của theme (xem gamuda-tokens.css) để đồng bộ với các
   section khác, không phát minh màu mới. Cột trái (nội dung giới thiệu + checklist) nằm trực tiếp
   trên nền ảnh; cột phải là 1 card riêng đậm hơn (".gl-popup__form-card") để form nổi bật, dễ thao
   tác. Field bên trong form KHÔNG đổi cấu trúc — chỉ đổi CSS bao ngoài (".gl-popup__form" override
   bên dưới, đứng sau ".gl-cf7--dark" trong file nên thắng theo thứ tự nguồn dù cùng độ đặc thù). */
.gl-popup.mfp-hide {
	display: none;
}

.gl-popup {
	position: relative;
	max-width: 920px;
	background-color: var(--gl-green-dark);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Viền dùng màu ĐẶC (không phải "--gl-border-gold" trong suốt) — border nằm ở mép ngoài cùng,
	   ngoài vùng ".gl-popup__overlay" phủ (overlay chỉ tính từ trong viền trở vào) nên nếu để màu
	   trong suốt, ảnh nền thô (chưa tối/mờ) sẽ lộ ra ngay dưới viền, làm viền loang màu không đều
	   theo độ sáng/tối từng vùng của ảnh — dùng màu đặc để viền luôn đồng nhất bất kể ảnh nền. */
	border: 1px solid var(--gl-gold);
	border-radius: 24px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

/* Lớp phủ tối + "làm mờ" ảnh nền phía sau — dùng backdrop-filter thay vì phải chuẩn bị sẵn 1 bản
   ảnh blur riêng, tự áp dụng cho mọi ảnh popup admin chọn. Đổi từ mảng xanh dương đặc (bão hoà cao,
   phủ gần kín ảnh nền) sang gradient GẦN ĐEN pha chút navy — ảnh nền lộ rõ hơn qua lớp phủ, đỡ cảm
   giác "1 mảng xanh phẳng" trong khi màu thương hiệu vẫn hiện diện qua viền/badge/nút bên dưới. */
.gl-popup__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(8, 13, 22, 0.88) 0%, rgba(19, 36, 77, 0.72) 55%, rgba(19, 36, 77, 0.55) 100%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* Magnific Popup tự chèn nút đóng mặc định ra ngoài popup (con của ".mfp-wrap", không phải của
   chính popup) nên luôn bị lệch khỏi card — ẩn nó đi, dùng nút ".gl-popup__close" tự dựng bên
   trong popup thay thế (xem popup-registration.php + gamuda-home.js). */
.mfp-wrap:has(#gl-popup-registration) > .mfp-close {
	display: none;
}

.gl-popup__close {
	position: absolute;
	z-index: 2;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	font-size: 20px;
	line-height: 1;
	color: var(--gl-white);
	transition: background-color 0.2s ease, color 0.2s ease;
}

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

.gl-popup__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 44px 24px 32px;
}

.gl-popup__content {
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-align: left;
}

.gl-popup__heading {
	font-family: var(--gl-font-serif);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.25;
	color: var(--gl-white);
}

/* Phần "T{tháng}/{năm}" tự nối vào cuối tiêu đề (xem popup-registration.php) — dùng chung serif với
   phần chữ còn lại của tiêu đề cho liền lạc (trước đây tách riêng sang sans theo quy ước số liệu
   như ".gl-showcase__counter", nay đổi lại theo yêu cầu đồng bộ font toàn bộ tiêu đề popup). */
.gl-popup__heading-period {
	font-family: var(--gl-font-serif);
	font-weight: 700;
}

.gl-popup__lede {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
}

.gl-popup__checklist {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.gl-popup__checklist li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.92);
}

.gl-popup__check {
	flex-shrink: 0;
	display: flex;
	width: 20px;
	height: 20px;
	margin-top: 1px;
}

@media (min-width: 768px) {
	.gl-popup__inner {
		flex-direction: row;
		align-items: stretch;
		gap: 40px;
		padding: 48px;
	}

	.gl-popup__content {
		flex: 1;
		min-width: 0;
		justify-content: center;
	}

	.gl-popup__heading {
		font-size: 30px;
	}
}

.gl-popup__form-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 26px 22px;
	/* Nền gần đen, đặc hơn overlay bên trái — card "nổi" rõ như 1 mặt kính tối riêng biệt thay vì
	   cùng 1 mảng xanh với phần overlay, để badge/nút vàng thương hiệu tương phản rõ hơn. */
	background: rgba(6, 10, 16, 0.72);
	border: 1px solid var(--gl-border-gold);
	border-radius: 18px;
	text-align: left;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
	.gl-popup__form-card {
		flex: 0 0 360px;
		width: 360px;
	}
}

.gl-popup__badge {
	padding: 6px 14px;
	background: var(--gl-gold);
	border-radius: var(--gl-radius-pill);
	font-family: var(--gl-font-sans);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gl-green-dark);
}

.gl-popup__title {
	font-family: var(--gl-font-serif);
	font-weight: 800;
	font-size: 20px;
	color: var(--gl-white);
}

.gl-popup__desc {
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.65);
}

.gl-popup__form {
	width: 100%;
}

/* Popup thu ngắn lại: giảm khoảng cách giữa các field — chỉ áp dụng riêng trong popup (không đụng
   tới form giống hệt ở section "Đăng Ký Tư Vấn" trên trang chủ, nơi form nằm giữa 1 section cao nên
   không cần rút gọn) — biến field từ kiểu "gạch chân" (mặc định của ".gl-cf7--dark") sang kiểu
   "khung kính mờ" khớp ảnh tham khảo.
   Rule dưới đây đứng sau ".gl-cf7--dark" trong file nên thắng dù cùng độ đặc thù (2 class).
   QUAN TRỌNG — cùng bài học + cùng bug đã gặp ở ".gl-registration__form" (section "Đăng Ký Tư Vấn"):
   viền/nền đặt thẳng lên <input>/<select>/".gl-select__trigger" (KHÔNG đặt lên
   ".wpcf7-form-control-wrap") vì CF7 render tip lỗi ".wpcf7-not-valid-tip" làm PHẦN TỬ CON nằm
   TRONG wrap — nếu viền/nền nằm ở wrap thì khung sẽ phình ra ôm luôn cả dòng chữ lỗi. Để wrap trong
   suốt, CHỈ giữ lại "padding-bottom" (chừa chỗ cho tip định vị tuyệt đối — xem
   ".wpcf7-not-valid-tip"/".wpcf7-form-control-wrap" gốc — để field cao y hệt dù có lỗi hay không,
   popup không co giãn kích thước lúc validate, khác với section "Đăng Ký Tư Vấn" nơi tip được phép
   đẩy layout xuống vì đó là 1 section cao, không phải modal). "gap" trên <form> KHÔNG có tác dụng
   (CF7 gộp mọi field + nút gửi vào chung 1 thẻ <p> duy nhất) — khoảng cách đều giữa field dùng
   "margin-bottom" trên wrap thay vào đó. */
.gl-popup__form .wpcf7-form-control-wrap {
	padding: 0 0 36px;
	background: transparent;
	border: none;
	border-radius: 0;
	margin-bottom: 12px;
}

.gl-popup__form .wpcf7-form-control-wrap:focus-within {
	background: transparent;
	box-shadow: none;
}

.gl-popup__form input[type="text"],
.gl-popup__form input[type="email"],
.gl-popup__form input[type="tel"],
.gl-popup__form select {
	display: block;
	width: 100%;
	/* "height" (không phải min-height) để mọi field 1 dòng cao bằng nhau tuyệt đối, kể cả
	   ".gl-select__trigger" bên dưới — cùng kỹ thuật đã dùng ở ".gl-registration__form". */
	height: 44px;
	padding: 0 14px !important;
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 10px !important;
	box-sizing: border-box;
	font-size: 15px;
}

.gl-popup__form textarea {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px !important;
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 10px !important;
	box-sizing: border-box;
	font-size: 15px;
	resize: vertical;
}

/* KHÔNG khai lại "display" ở đây — ".gl-select__trigger" gốc là "display:flex" để canh chữ + icon
   mũi tên, khai đè "display:block" sẽ vỡ layout icon (bug đã gặp ở ".gl-registration__form"). */
.gl-popup__form .gl-select__trigger {
	height: 44px;
	padding: 0 14px !important;
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 10px !important;
	box-sizing: border-box;
	font-size: 15px;
}

/* Rule gốc ".gl-cf7 input...:focus{border:none!important;border-radius:0!important;
   box-shadow:none!important}" cùng độ đặc thù (":focus" cũng nằm sẵn trong selector đó) — phải khai
   lại CẢ 3 thuộc tính ở CHÍNH rule ":focus" này (không đủ chỉ khai ở rule thường) + "!important" để
   thắng, cùng bug/cách sửa đã gặp ở ".gl-registration__form". */
.gl-popup__form input[type="text"]:focus,
.gl-popup__form input[type="email"]:focus,
.gl-popup__form input[type="tel"]:focus,
.gl-popup__form select:focus,
.gl-popup__form textarea:focus {
	border-color: var(--gl-gold-bright) !important;
	border-radius: 10px !important;
	box-shadow: 0 0 0 3px rgba(20, 156, 178, 0.25) !important;
}

.gl-popup__form ::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.gl-popup__disclaimer {
	font-size: 12px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.5);
}

/* ===== MẶT BẰNG CĂN HỘ (UNIT PLANS) ===== */
.gl-unit-plans {
	background: var(--gl-white);
}

.gl-unit-plans__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--gl-gap-md);
}

.gl-unit-card {
	background: var(--gl-cream);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.gl-unit-card:hover {
	box-shadow: 0 8px 24px rgba(30, 55, 111, 0.12);
}

.gl-unit-card__img {
	height: 200px;
	overflow: hidden;
}

.gl-unit-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.gl-unit-card:hover .gl-unit-card__img img {
	transform: scale(1.08);
}

.gl-unit-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--gl-gap-md);
}

.gl-unit-card__title {
	font-family: var(--gl-font-serif);
	font-weight: 600;
	font-size: 22px;
	color: var(--gl-green);
}

/* Giữ nguyên canh giữa mặc định của ".gl-image-caption" (đồng bộ với MỌI chú thích ảnh khác trên
   site) — chỉ thu gọn margin-top vì đã có "gap" của ".gl-unit-card__body" lo khoảng cách giữa các
   dòng, không cần cộng dồn thêm margin-top riêng của chính field này nữa. */
.gl-unit-card__body .gl-image-caption {
	margin-top: 0;
}

.gl-unit-card__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--gl-text);
	opacity: 0.85;
}

/* flex-wrap: giá trị ngắn ("65 m²" | "2PN") vẫn chung 1 hàng; giá trị dài (tim tường + thông thủy...) tự xuống
   hàng riêng thay vì bị ép thành 2 cột hẹp, chữ gãy 3–4 dòng. */
.gl-unit-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--gl-gold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ===== PAYMENT — phương án chuẩn (nổi bật, không collapse) ===== */
.gl-payment__milestones {
	display: flex;
	flex-direction: column;
}

/* ===== CHÍNH SÁCH BÁN HÀNG / FAQ ===== */
.gl-sales-policy {
	background: var(--gl-cream);
}

.gl-faq {
	background: var(--gl-white);
}

/* Nút cuối danh sách FAQ — không bắt buộc (field "faq_article", xem section-faq.php), chỉ hiện
 * khi admin đã chọn 1 bài viết cụ thể — căn giữa, cách danh sách câu hỏi 1 khoảng vừa phải. */
.gl-faq__cta {
	display: flex;
	justify-content: center;
	margin-top: var(--gl-gap-xl);
}

.gl-accordion__panel-inner p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--gl-text);
}

/* ===== RESPONSIVE — Landing page sections =====
 * 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,
 * theo cùng tinh thần breakpoint đang dùng ở css/responsive.css của theme.
 */

/* "Đầy đủ" (1024px+) từng coi là 1 dải đồng nhất, dùng chung đúng 1 mức padding 2 bên (80px) — thực
   tế các laptop phổ biến 1024-1366px hẹp hơn khá nhiều so với khung thiết kế gốc 1440px (Figma),
   khiến các khối 2 cột có cột cố định bằng px (VD ".gl-connectivity__grid" map 628px cố định, xem
   rule đó) nuốt phần lớn bề ngang còn lại, cột kia bị bóp hẹp mất cân đối dù KHÔNG tính là "mobile".
   Giảm padding 2 bên riêng cho dải 1024-1439px (chưa chạm mốc 1440px = "--gl-container-max", nơi
   mọi thứ đã test đẹp sẵn) để mỗi section có thêm ~64px bề ngang — kết hợp cùng việc đổi cột map cố
   định sang "clamp()" (xem ".gl-connectivity__grid"), bù đủ phần cột chữ bị hẹp trước đó. */
@media (min-width: 1024px) and (max-width: 1439px) {
	:root {
		--gl-section-x: 48px;
	}
}

@media (max-width: 1023px) {
	:root {
		/* Giữ nguyên padding 2 bên gốc trên mobile/tablet (không tăng theo desktop) — chỉ tăng ở
		   desktop (:root, ngoài @media này) theo yêu cầu, tránh ăn quá nhiều bề rộng vốn đã hẹp sẵn
		   trên màn hình nhỏ. */
		--gl-section-x: 30px;
		/* Giảm từ 72px theo cùng tỉ lệ với desktop (":root", gamuda-tokens.css, vừa giảm 120px->80px)
		   — giữ mobile vẫn thoáng hơn hẳn desktop tương đối, không chỉ nhích gần bằng. */
		--gl-section-y: 56px;
		--gl-fs-h1: 48px;
		--gl-fs-h2: 32px;
	}

	.gl-hero {
		min-height: 560px;
	}

	.gl-intro__row,
	.gl-location__content-row,
	.gl-developer__row,
	.gl-registration__row,
	.gl-product-detail__row {
		flex-direction: column;
		align-items: stretch;
	}

	.gl-intro__copy,
	.gl-intro__image,
	.gl-location__map,
	.gl-location__cards,
	.gl-developer__panel,
	.gl-developer__content,
	.gl-registration__left,
	.gl-registration__form-card,
	.gl-product-detail__aside {
		max-width: none;
		width: 100%;
	}

	/* Tablet/mobile: cột 1, ảnh bản đồ "Vị Trí" full bề ngang. Khung dọc + "background-size:cover"
	   (khung 420px cao) cắt mất 2 bên → đổi sang "contain", khung lấy ĐÚNG tỉ lệ ảnh admin upload
	   qua biến "--gl-map-ratio" (section-location.php gán inline, clamp 1:1→3:1; mặc định 16/9 nếu
	   thiếu metadata). Nhờ vậy mọi ảnh (16:9, banner ngang, ảnh vuông...) hiện TRỌN, không cắt, không
	   dư nền. Desktop giữ nguyên "cover" (không đọc biến này). */
	.gl-location__map-bg {
		flex: none;
		aspect-ratio: var(--gl-map-ratio, 16 / 9);
		min-height: 160px;
		max-height: 78vh;
		background-size: contain;
		background-repeat: no-repeat;
		background-origin: border-box;
	}

	/* Mobile hiện ảnh dự án TRƯỚC cụm thông tin (ngược thứ tự DOM gốc: ".gl-intro__copy" đứng trước
	   ".gl-intro__image") — chỉ đổi thứ tự hiển thị qua "order", không đổi HTML để desktop (hàng
	   ngang, chữ trái/ảnh phải) giữ nguyên thứ tự cũ. */
	.gl-intro__image {
		order: -1;
	}

	/* Nút CTA Tổng Quan chuyển xuống dưới bảng thông số dự án trên mobile — đảo ngược cặp hiện/ẩn 2
	   bản CTA (xem ".gl-intro__cta-mobile", gamuda-home.css + section-intro.php), cùng pattern đã
	   dùng cho "Liên Hệ" ở section Vị Trí ngay trên. */
	.gl-intro__cta-desktop {
		display: none;
	}

	.gl-intro__cta-mobile {
		display: flex;
		justify-content: center;
		margin-top: var(--gl-gap-2xl);
	}

	.gl-product-contact {
		position: static;
	}

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

	/* Mobile: 1 cột, đúng thứ tự yêu cầu title→description→ảnh map→list mốc thời gian (nút CTA đứng
	   ngoài lưới này, xem ".gl-section-cta" + section-connectivity.php — khác thứ tự desktop: cột
	   trái header→list, map riêng cột phải — xem ".gl-connectivity__grid" gốc, gamuda-home.css). */
	.gl-connectivity__grid {
		/* minmax(0,1fr): "1fr" = minmax(auto,1fr) để ảnh bản đồ rộng nới cột quá màn hình -> tràn ngang (2026-10-28). */
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"header"
			"map"
			"list";
		row-gap: var(--gl-gap-lg);
	}

	.gl-connectivity__header,
	.gl-connectivity__list,
	.gl-connectivity__cta {
		max-width: none;
	}

	.gl-connectivity__map-wrap {
		height: auto;
	}

	.gl-developer__desc-scroll,
	.gl-intro__desc-scroll {
		max-height: 320px;
	}

	.gl-news-hero {
		min-height: 380px;
	}

	.gl-amenities__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gl-news__grid,
	.gl-products__grid {
		grid-template-columns: repeat(2, 1fr);
	}

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

	.gl-amenities__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--gl-gap-md);
	}

	.gl-showcase,
	.gl-showcase--video {
		flex-direction: column;
	}

	.gl-gallery__header {
		/* Gap gốc (--gl-gap-2xl) dành cho khoảng cách NGANG giữa 2 cột ở desktop — khi xếp chồng
		   dọc trên mobile, gap đó áp lại theo chiều DỌC khiến khoảng cách giữa tiêu đề và mô tả
		   giãn quá rộng. Thu nhỏ lại cho hợp lý. */
		flex-direction: column;
		align-items: flex-start;
		gap: var(--gl-gap-md);
	}

	.gl-gallery__header-desc {
		flex: none;
		padding-bottom: 0;
	}

	/* Ẩn tên ảnh đè trên ảnh chính ở mobile — không cần thiết khi màn hình nhỏ, đã có nhãn dưới
	   từng thumbnail bên dưới rồi. */
	.gl-showcase__caption {
		display: none;
	}

	.gl-showcase__media {
		/* .gl-showcase__media vốn dùng "flex: 1" (flex-basis: 0%) cho layout hàng ngang ở
		   desktop — khi .gl-showcase đổi sang flex-direction: column ở mobile, flex-basis đó
		   lại chi phối chiều CAO thay vì chiều rộng, cộng với overflow:hidden khiến khối này
		   co về 0px, đè luôn height khai báo bên dưới. Reset "flex: none" để height áp dụng đúng —
		   nhưng "flex:none" (= flex-basis:auto) cũng khiến bề RỘNG co về kích thước nội dung thay vì
		   giãn hết cột dọc (ảnh chính chỉ còn hiển thị ở khoảng nửa trái màn hình, bug thật đã gặp).
		   Thêm "width:100%" để bù lại đúng phần bề rộng đã mất. */
		flex: none;
		width: 100%;
	}

	.gl-showcase__main {
		height: 300px;
	}

	/* Nút điều hướng (‹ 03/05 ›): pill trắng nổi, vắt ngang chân ảnh (kéo lên bằng margin-top âm)
	   — tham khảo ảnh đối chiếu người dùng cung cấp. */
	.gl-showcase__nav {
		/* Rule gốc (desktop) đặt position:absolute + right:24px/bottom:24px để ghim vào góc ảnh —
		   ở mobile đổi sang position:relative nhưng nếu không reset lại right/bottom thì 2 giá trị
		   đó vẫn có hiệu lực (relative + right/bottom vẫn dịch chuyển phần tử), khiến pill bị lệch
		   khỏi tâm ảnh dù width đã khớp 100%. */
		position: relative;
		z-index: 1;
		right: auto;
		bottom: auto;
		width: 100%;
		justify-content: space-between;
		margin: -32px auto 0;
		padding: 6px;
		background: var(--gl-white);
		border-radius: var(--gl-radius-pill);
		box-shadow: 0 8px 20px rgba(28, 28, 28, 0.18);
	}

	.gl-showcase__nav .gl-showcase__arrow {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		font-size: 20px;
		background: var(--gl-white);
		border: 1px solid var(--gl-border);
		color: var(--gl-green);
	}

	.gl-showcase__nav .gl-showcase__counter {
		/* KHÔNG khai báo lại font-family — kế thừa sans từ ".gl-showcase__counter" gốc, giữ nguyên
		   xuyên suốt desktop/mobile (trước đây override nhầm sang serif ở đây khiến cùng 1 con số
		   đếm slide đổi font tuỳ kích thước màn hình, không đồng nhất). */
		font-size: 22px;
		font-weight: 700;
		color: var(--gl-green);
	}

	/* Thumbnail chuyển thành slider ngang tràn mép trên mobile — bỏ luôn viền khung (border/padding)
	   của ".gl-showcase__list-frame" vì 1 khung viền cố định sẽ ngược với cảm giác "vuốt tràn mép"
	   này, khác hẳn ngữ cảnh khung cuộn DỌC ở desktop. */
	.gl-showcase__list-frame {
		flex: none;
		border: none;
		padding: 0;
	}

	.gl-showcase__list {
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		overflow-y: visible;
		padding-right: 0;
		padding-bottom: 4px;
		scroll-snap-type: x mandatory;
		/* Chặn không cho vuốt ngang hết thanh này "chain" ra cuộn cả trang (chỉ xảy ra ở 1 số
		   trình duyệt mobile khi trượt tới hết mép) — giữ cảm giác vuốt luôn ở trong thanh này. */
		overscroll-behavior-x: contain;
	}

	.gl-showcase__thumb {
		flex: 0 0 72%;
		scroll-snap-align: center;
	}

	.gl-showcase__thumb-img {
		height: 170px;
	}

	/* Xếp chồng dọc trên mobile (".gl-showcase--video{flex-direction:column}" ở trên) — video cần
	   lại chiều cao cố định riêng (không còn "height:100%" ăn theo cột bên cạnh như desktop) và
	   bo góc TRÊN khớp với góc bo của khối thẻ tối bên ngoài, vuông góc dưới vì tiếp giáp ngay
	   với danh sách video bên dưới. */
	.gl-showcase--video .gl-video__frame {
		height: 260px;
		border-radius: var(--gl-radius-lg) var(--gl-radius-lg) 0 0;
	}

	.gl-showcase--video {
		margin-top: var(--gl-gap-xl);
	}

	/* Item danh sách video hẹp hơn nhiều trên mobile (khung item ~230-260px) — padding/gap ngang
	   lớn như desktop (32px/24px) ăn hết chỗ, chỉ còn ~77px cho phần chữ, khiến tiêu đề dài xuống
	   quá nhiều dòng và tràn ra ngoài khung item. Giảm padding/gap NGANG (giữ padding dọc thoải
	   mái) để chữ có đủ chỗ, đồng thời cho phép item cao tự nhiên theo số dòng chữ thay vì cố định. */
	.gl-video-item {
		align-items: flex-start;
		gap: 10px;
		padding: 14px 14px;
	}

	.gl-video-item__num {
		margin-top: 2px;
	}

	.gl-video-item__play {
		margin-top: 2px;
	}

	.gl-showcase__video-info {
		padding: var(--gl-gap-lg) var(--gl-gap-md);
	}

	.gl-video-list-scroll {
		max-height: 260px;
	}

	/* Badge số + tiêu đề hướng dẫn dùng gallery/video — chỉ hiện trên mobile
	   (tham khảo ảnh đối chiếu người dùng cung cấp) */
	.gl-showcase__intro {
		display: flex;
		align-items: flex-start;
		gap: var(--gl-gap-sm);
		margin-top: var(--gl-gap-lg);
	}

	.gl-showcase__intro-badge {
		display: flex;
	}

	.gl-showcase__intro-row {
		display: flex;
		align-items: center;
		gap: var(--gl-gap-sm);
		margin-bottom: 4px;
	}

}

@media (max-width: 767px) {
	:root {
		--gl-fs-h1: 34px;
		--gl-fs-h2: 26px;
	}

	/* Layout mobile tách riêng khỏi desktop (tham khảo ảnh đối chiếu người dùng cung cấp): ảnh nền
	   không còn tràn viewport + đè chữ lên trên nữa mà tách thành 1 khối ảnh THẬT riêng
	   (".gl-hero__mobile-img") nằm phía trên, phần chữ/nút nằm bên dưới trên nền sáng — không phải
	   overlay tối như bản desktop. "!important" trên "background-image" để thắng style inline (ảnh
	   nền desktop gán thẳng qua "style" trong section-hero.php, đặc hiệu cao hơn class thường). */
	.gl-hero {
		display: block;
		min-height: 0;
		padding: 0;
		background-image: none !important;
	}

	body.gamuda-landing .gl-hero__mobile-img {
		display: block;
		width: 100%;
		height: auto;
	}

	.gl-hero__overlay,
	.gl-hero__bg-caption {
		display: none;
	}

	.gl-hero__inner {
		padding: 28px var(--gl-section-x) 40px;
		background: var(--gl-cream);
	}

	/* Chữ trước đây trắng/kem để đọc được trên ảnh nền tối — giờ nằm trên nền sáng (".gl-hero__inner")
	   nên đổi lại màu tối cho đúng độ tương phản. Scope theo ".gl-hero__content" (không phải ".gl-h1"
	   trần) vì ".gl-h1" còn dùng chung cho tiêu đề banner Tin Tức/Sản Phẩm (vẫn đè lên ảnh tối, không
	   đổi màu ở đó). */
	.gl-hero__content .gl-h1 {
		color: var(--gl-green);
	}

	.gl-hero__lede {
		color: var(--gl-text);
	}

	/* Phụ đề hero desktop dùng be sáng (đè trên ảnh) — mobile chữ nằm trên nền kem nên trả về màu đồng. */
	.gl-hero__subtitle {
		color: var(--gl-gold);
		text-shadow: none;
	}

	.gl-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	/* Nút "Khám phá dự án" (".gl-btn--outline") trước đây viền/chữ trắng để đọc được trên ảnh nền tối
	   — giờ nằm trên nền sáng (".gl-hero__inner") nên gần như biến mất (trắng trên nền kem). Đổi lại
	   viền/chữ tối, cùng tông xanh với tiêu đề, giữ nguyên nút "Nhận bảng giá" (".gl-btn--solid",
	   nền đặc nên không bị ảnh hưởng). Selector nối thêm "body.gamuda-landing" để thắng specificity
	   rule gốc "body.gamuda-landing .gl-btn--outline" (gamuda-tokens.css, có thêm element "body" nên
	   đặc hiệu cao hơn 1 chút so với chỉ 2 class trần). */
	body.gamuda-landing .gl-hero__content .gl-btn--outline {
		border-color: var(--gl-green);
		color: var(--gl-green);
	}

	body.gamuda-landing .gl-hero__content .gl-btn--outline:hover {
		background: rgba(30, 55, 111, 0.06);
		border-color: var(--gl-green-dark);
		color: var(--gl-green-dark);
	}

	/* Cùng lý do với ".gl-btn--outline" ngay trên — tag nền trong suốt/viền trắng (rule gốc, hợp với
	   ảnh nền desktop) đọc không ra chữ trên nền sáng ".gl-hero__inner" ở mobile, đổi lại viền/chữ
	   xanh cho khớp độ tương phản, giống hệt cách xử lý nút "Khám phá dự án". */
	body.gamuda-landing .gl-hero__tag {
		border-color: var(--gl-green);
		color: var(--gl-green);
	}

	.gl-hero__tags {
		display: flex;
		/* Khoảng cách với khối nút phía trên co lại (kéo ngược bớt "gap" chung của
		   ".gl-hero__content", đang khá rộng cho mọi cặp phần tử) — chỉ riêng cặp
		   nút CTA → tag mới cần sát hơn, không đụng tới khoảng cách giữa các phần khác
		   (tiêu đề/mô tả/nút). */
		margin-top: -18px;
	}

	/* Nút "Xem chi tiết" (section-faq.php, field "faq_article") full-width trên mobile — đồng bộ với
	   các nút khác trong site (VD ".gl-hero__actions" ở trên) thay vì chỉ rộng vừa đủ chữ. */
	.gl-faq__cta a {
		width: 100%;
	}

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

	/* Slider 1 item/page trên mobile: đổi từ grid xếp dọc sang hàng ngang cuộn-snap, mỗi thẻ
	   chiếm trọn màn hình. Dots đồng bộ qua glInitDots() trong gamuda-home.js. */
	.gl-news__grid,
	.gl-products__grid {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.gl-news__grid::-webkit-scrollbar,
	.gl-products__grid::-webkit-scrollbar {
		display: none;
	}

	.gl-news__grid .gl-news-card,
	.gl-products__grid .gl-product-card {
		flex: 0 0 100%;
		scroll-snap-align: center;
	}

	.gl-news-hero {
		min-height: 300px;
	}

	.gl-connectivity__list-item {
		flex-direction: column;
		gap: 4px;
	}

	.gl-connectivity__list-time {
		/* xếp dọc trên mobile — trả flex-basis về auto để không bị hiểu nhầm thành chiều cao */
		flex: 0 0 auto;
		width: auto;
		font-size: 20px;
	}

	.gl-developer__badges {
		flex-direction: column;
	}

	.gl-spec-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.gl-spec-row__value {
		text-align: left;
	}

	.gl-registration__form-card {
		padding: var(--gl-gap-lg) var(--gl-gap-md);
	}

	/* Layout popup còn xếp dọc 1 cột suốt cả dải này (chỉ chuyển sang hàng ngang ở
	   "@media min-width:768px" — xem ".gl-popup__inner" gốc) nên dòng "eyebrow" (VD "HỒ SƠ DỰ ÁN")
	   vẫn nằm cùng cột với nút đóng phía trên, y hệt lý do đã tăng padding-top ở tier <=480px bên
	   dưới — nhưng trước đây rule đó CHỈ áp dụng <=480px, bỏ sót nguyên dải 481-767px (padding-top
	   gốc 44px vẫn ít hơn chân nút đóng: top:14px + cao 32px = 46px, gần như đè lên chữ). Tăng lên
	   đây, áp dụng chung cho MỌI chiều rộng còn xếp dọc. */
	.gl-popup__inner {
		padding-top: 52px;
	}
}

@media (max-width: 480px) {
	.gl-section-header__desc,
	.gl-section-header .gl-rich-content p,
	.gl-news__header-text .gl-rich-content p,
	.gl-gallery__header-desc .gl-rich-content p,
	.gl-intro__copy p,
	.gl-hero__lede {
		font-size: 15px;
	}

	.gl-btn {
		padding: 12px 20px;
	}

	/* CTA button trong các section trang chủ (Tổng Quan, Vị Trí, Liên Kết Vùng...): căn giữa +
	   full width màn hình thay vì bó theo nội dung, dễ bấm hơn trên mobile. */
	.gl-intro__cta-mobile .gl-btn,
	.gl-connectivity__cta .gl-btn,
	.gl-section-header .gl-btn {
		align-self: center;
		width: 100%;
	}

	/* Rút ngắn chiều cao từng item accordion trên mobile cho gọn hơn */
	.gl-accordion__header {
		padding: 16px 18px;
		font-size: 18px;
	}

	/* Header Mặt Bằng: tiêu đề + mô tả không đủ chỗ nằm cùng hàng trên mobile — xếp dọc, mô tả
	   xuống dòng ngay dưới tiêu đề, chevron vẫn ở hàng đầu bên phải tiêu đề. */
	.gl-accordion__header--residences {
		flex-wrap: wrap;
		gap: 4px var(--gl-gap-sm);
	}

	.gl-accordion__header--residences .gl-accordion__title {
		max-width: none;
		flex: 1;
	}

	/* Ẩn mô tả ngắn trong header accordion Mặt Bằng trên mobile — chiếm nhiều chỗ khi CHƯA mở, làm
	   danh sách accordion (đóng) trông rối; mô tả vẫn còn nguyên trong ảnh chú thích khi đã mở (xem
	   ".gl-image-caption" trong panel). */
	.gl-accordion__subtitle {
		display: none;
	}

	/* Danh sách tổng quan các tầng trên mobile: xếp dọc mỗi nút 1 hàng full-width (không cuộn
	   ngang) — tham khảo ảnh đối chiếu người dùng cung cấp. */
	.gl-residences__tabs {
		flex-direction: column;
		flex-wrap: nowrap;
		margin-bottom: var(--gl-gap-lg);
	}

	.gl-residences__tab {
		width: 100%;
		justify-content: space-between;
		padding: 12px 14px 12px 12px;
	}

	.gl-residences__tab-arrow {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: var(--gl-white);
		border: 1px solid var(--gl-border);
		opacity: 1;
	}

	.gl-accordion__panel-inner {
		padding: var(--gl-gap-md) 18px;
	}

	/* Popup gần full-width trên mobile nhỏ — dùng max-height (không phải min-height) để card không
	   bao giờ cao hơn màn hình khi form CF7 dài; nội dung cuộn bên trong .gl-popup__inner thay vì
	   đẩy cả popup tràn quá viewport. Vẫn giữ bo góc (không còn thật sự full-bleed sát viền màn
	   hình do Magnific Popup tự chừa khoảng đệm quanh popup) để đồng bộ với desktop. */
	.gl-popup {
		max-width: 100% !important;
		width: 100%;
		/* "100vh" trên trình duyệt mobile thật tính theo chiều cao viewport TỐI ĐA (như khi thanh
		   địa chỉ ẩn đi), cao hơn vùng thật sự đang hiển thị — Magnific Popup lại canh giữa popup
		   theo chiều dọc, nên phần dư ra bị đẩy lồi ra cả trên lẫn dưới màn hình thật, cắt mất
		   phần đầu (badge/tiêu đề). "dvh" (dynamic viewport height) tính đúng theo vùng hiển thị
		   thật tại thời điểm đó — khai báo "vh" trước làm fallback cho trình duyệt cũ chưa hỗ trợ. */
		max-height: 100vh;
		max-height: 100dvh;
		border-radius: 20px;
		border: none;
	}

	.gl-popup__inner {
		/* "safe center" (không phải "center" trơn) — khi nội dung form CAO HƠN màn hình (trường hợp
		   phổ biến, checklist + CF7 dài), "center" trơn vẫn cố canh giữa phần TRÀN đó bằng cách ăn lẹm
		   đều vào padding-top/bottom, đẩy dòng "eyebrow" (đầu nội dung) lên sát/đè mép trên popup dù
		   "padding-top:56px" đã khai đủ — xác nhận bằng getBoundingClientRect() thật (eyebrow render
		   ở y nhỏ hơn cả top của ".gl-popup__inner", tức bị đẩy ra NGOÀI vùng padding). "safe center"
		   (CSS Box Alignment) giữ nguyên canh giữa khi nội dung VỪA màn hình, nhưng tự đổi về canh từ
		   đầu (như "flex-start") ngay khi nội dung tràn — padding-top khi đó áp dụng đúng như khai báo,
		   không bị ăn lẹm nữa. */
		justify-content: safe center;
		max-height: 100vh;
		max-height: 100dvh;
		overflow-y: auto;
	}

	/* Thu nhỏ lại toàn bộ cho hài hoà với màn hình nhỏ — trước đó popup dùng nguyên size desktop nên
	   chữ/khoảng cách/nút đều to bất cân xứng so với bề ngang màn hình. Giảm đều padding/gap/font
	   theo cùng tỉ lệ, giữ nguyên cấu trúc/màu sắc, không đụng phần field bên trong form (giữ đúng
	   logic render CF7 như đã thống nhất — chỉ áp cho khung bao ngoài + typography chữ). */
	/* padding-top rộng hơn phần còn lại (56px thay vì đồng bộ 28px như dưới/2 bên) — chừa đủ chỗ cho
	   nút đóng tuyệt đối (".gl-popup__close", top:10px, cao 28px ở tier này => chiếm tới ~38px) khỏi
	   đè sát lên dòng "eyebrow" (VD "HỒ SƠ DỰ ÁN") ngay bên dưới, tránh cảm giác chật/dính vào nút
	   đóng trên màn hình nhỏ (đã tăng từ 48px — người dùng phản hồi vẫn thấy sát viền). */
	.gl-popup__inner {
		gap: 18px;
		/* Lề ngang 18px→22px — dòng "eyebrow" (VD "HỒ SƠ DỰ ÁN", phần tử ĐẦU TIÊN trong
		   ".gl-popup__content", không có margin riêng nào) nằm sát ngay padding này nên khoảng đệm quá
		   hẹp làm nó dính sát viền trái popup, user phản hồi trực tiếp từ ảnh chụp. Vẫn giữ nhỏ hơn
		   desktop (24px, xem ".gl-popup__inner" gốc) đúng tinh thần "thu nhỏ cho hài hoà màn hình nhỏ"
		   đã áp dụng ở tier này, chỉ nới thêm chút cho đỡ chật chứ không quay lại full 24px. */
		padding: 56px 22px 20px;
	}

	.gl-popup__content {
		gap: 10px;
	}

	.gl-popup__heading {
		font-size: 19px;
	}

	.gl-popup__lede {
		font-size: 13px;
	}

	.gl-popup__checklist {
		gap: 7px;
	}

	.gl-popup__checklist li {
		gap: 8px;
		font-size: 13px;
	}

	.gl-popup__check {
		width: 16px;
		height: 16px;
	}

	.gl-popup__check svg {
		width: 16px;
		height: 16px;
	}

	.gl-popup__form-card {
		gap: 8px;
		padding: 18px 16px;
		border-radius: 14px;
	}

	.gl-popup__badge {
		padding: 5px 12px;
		font-size: 11px;
	}

	.gl-popup__title {
		font-size: 17px;
	}

	.gl-popup__desc {
		font-size: 12px;
	}

	/* "gap" trên <form> không có tác dụng (xem giải thích ở rule gốc, desktop) — khoảng cách nhỏ hơn
	   trên mobile dùng "margin-bottom" trên wrap thay vào đó. */
	.gl-popup__form .wpcf7-form-control-wrap {
		padding: 0 0 30px;
		margin-bottom: 8px;
	}

	.gl-popup__form input[type="text"],
	.gl-popup__form input[type="email"],
	.gl-popup__form input[type="tel"],
	.gl-popup__form select,
	.gl-popup__form .gl-select__trigger {
		height: 42px;
		font-size: 14px;
	}

	.gl-popup__form textarea {
		font-size: 14px;
	}

	.gl-popup__form input[type="submit"] {
		padding: 12px 24px;
	}

	.gl-popup__disclaimer {
		font-size: 11px;
	}

	.gl-popup__close {
		top: 10px;
		right: 10px;
		width: 28px;
		height: 28px;
		font-size: 17px;
	}
}

/* ============================================================================
 * Trang 404 (404.php) — canh giữa, dùng token màu/thang chữ chung. Bộ chữ số
 * "404" cỡ lớn kiểu serif, số 0 ở giữa lấy màu vàng champagne làm điểm nhấn.
 * ========================================================================== */
.gl-404 {
	text-align: center;
}

.gl-404__num {
	font-family: var(--gl-font-serif);
	font-weight: 600;
	font-size: clamp(110px, 20vw, 220px);
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--gl-green);
	margin-bottom: var(--gl-gap-xl);
}

.gl-404__num span {
	color: var(--gl-gold);
}

.gl-404 .gl-h2 {
	margin-bottom: var(--gl-gap-md);
}

/* canh giữa cho ĐÚNG đoạn mô tả 404 — ghi đè rule chung "body.gamuda-landing p {text-align:justify}"
   (cần selector đủ mạnh: 2 class + 1 type). */
body.gamuda-landing .gl-404__desc {
	max-width: 540px;
	margin: 0 auto var(--gl-gap-xl);
	color: var(--gl-text);
	text-align: center;
	text-align-last: center;
}

/* mọi nút trong trang 404 bo tròn hết cho đồng bộ với ô tìm kiếm dạng viên thuốc */
.gl-404 .gl-btn {
	border-radius: var(--gl-radius-pill);
}

.gl-404__actions {
	display: flex;
	gap: var(--gl-gap-md);
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var(--gl-gap-2xl);
}

/* ---- ô tìm kiếm dạng viên thuốc (dùng chung cho 404.php + search.php) ---- */
.gl-searchbox {
	display: flex;
	align-items: stretch;
	gap: var(--gl-gap-sm);
	justify-content: center;
	width: 100%;
	max-width: 480px;
	margin: 0 auto var(--gl-gap-2xl);
}

.gl-searchbox--left {
	justify-content: flex-start;
	margin-left: 0;
	margin-right: 0;
}

body.gamuda-landing .gl-searchbox__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	padding: 0 24px;
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-pill);
	background: var(--gl-white);
	font-family: var(--gl-font-sans);
	font-size: var(--gl-fs-body-sm);
	line-height: normal;
	color: var(--gl-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

body.gamuda-landing .gl-searchbox__input::placeholder {
	color: #9aa39d;
}

body.gamuda-landing .gl-searchbox__input:focus {
	outline: none;
	border-color: var(--gl-gold);
	box-shadow: 0 0 0 3px rgba(15, 122, 140, 0.15);
}

body.gamuda-landing .gl-searchbox__btn {
	flex: 0 0 auto;
	height: 52px;
	padding: 0 34px;
	border-radius: var(--gl-radius-pill);
}

.gl-404__links {
	display: flex;
	gap: var(--gl-gap-lg);
	justify-content: center;
	flex-wrap: wrap;
	font-size: var(--gl-fs-body-sm);
}

.gl-404__links a {
	color: var(--gl-green);
	border-bottom: 1px solid var(--gl-border-gold);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.gl-404__links a:hover {
	color: var(--gl-gold);
	border-color: var(--gl-gold);
}

@media (max-width: 600px) {
	.gl-searchbox {
		flex-direction: column;
		align-items: stretch;
	}

	body.gamuda-landing .gl-searchbox__btn {
		width: 100%;
	}

	.gl-404__links {
		gap: var(--gl-gap-sm) var(--gl-gap-md);
	}
}

/* ============================================================================
 * Trang kết quả tìm kiếm (search.php) — tái dùng .gl-news-listing / .gl-news__grid
 * / .gl-news-card / .gl-pagination của trang Tin Tức, chỉ thêm vài tinh chỉnh.
 * ========================================================================== */
.gl-search .gl-searchbox {
	max-width: 520px;
	margin-top: calc(-1 * var(--gl-gap-md));
	margin-bottom: var(--gl-gap-2xl);
}

.gl-search .gl-news-card__img--placeholder {
	background: linear-gradient(135deg, var(--gl-surface-2), var(--gl-cream));
	position: relative;
}

/* Thẻ kết quả tìm kiếm không có ảnh: chỉ còn nền gradient. Trước đây có ::after in tên
 * dự án làm watermark — bỏ đi để theme dùng lại được cho site khác; site nào cần watermark
 * riêng thì tự thêm ".gl-search .gl-news-card__img--placeholder::after { content: "…" }". */

.gl-search__empty {
	padding: var(--gl-gap-lg) 0 var(--gl-gap-2xl);
	color: var(--gl-text);
}

.gl-search__empty a {
	color: var(--gl-green);
	border-bottom: 1px solid var(--gl-border-gold);
}

.gl-search__empty a:hover {
	color: var(--gl-gold);
	border-color: var(--gl-gold);
}

/* ===== NGUYÊN TẮC / ĐẶC ĐIỂM (section-design-principles.php) =====
   Tham khảo "Nguyên tắc thiết kế" của imperia-sensapark.vn/mat-bang-imperia-sensa-park/ — lưới thẻ
   CHỈ tiêu đề + mô tả, không ảnh (khác ".gl-amenity-item"/".gl-unit-card" vốn luôn có khối ảnh). */
.gl-principle-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gl-gap-lg);
}

.gl-principle-card {
	padding: var(--gl-gap-lg);
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
}

/* Icon (field "icon", tuỳ chọn — tham khảo lưới tiện ích icon+chữ của imperia-sensapark.vn/
   tien-ich-imperia-sensa-park/, mỗi mục 1 icon nhỏ phía trên tiêu đề) — không nhập thì không render
   (xem section-design-principles.php), không để hổng khoảng trống. */
.gl-principle-card__icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
	margin-bottom: 12px;
}

/* Ảnh lớn (field "image", tuỳ chọn — tham khảo khối "Phương án nội thất theo từng loại căn" của
   imperia-sensapark.vn/noi-that-imperia-sensa-park/, 3 thẻ chỉ có ảnh mặt bằng + nút "Phóng to", không
   icon/tiêu đề). "object-fit: contain" KHÔNG ép cứng khung ảnh theo tỉ lệ cố định (ảnh mặt bằng là
   bản vẽ kỹ thuật, mỗi loại căn 1 tỉ lệ khác nhau, ép khung sẽ dư khoảng trắng hoặc cắt mất chi tiết)
   — dùng "height: auto" để khung tự theo đúng tỉ lệ ảnh gốc, cùng nguyên tắc đã áp dụng cho
   ".gl-tab-content__slide img" bản "contain" (mặt bằng tầng). */
.gl-principle-card__media {
	position: relative;
	margin-bottom: var(--gl-gap-md);
	border-radius: var(--gl-radius-sm);
	overflow: hidden;
	background: var(--gl-cream);
}

.gl-principle-card__media img {
	display: block;
	width: 100%;
	height: auto;
	cursor: zoom-in;
}

/* Gợi ý thị giác "bấm để phóng to" đè góc dưới phải ảnh — TRANG TRÍ THUẦN TUÝ, không phải link/nút
   riêng: "pointer-events: none" để mọi click luôn xuyên thẳng qua tới đúng thẻ <img> bên dưới, kích
   hoạt lightbox dùng chung của site qua class "gl-zoomable" (xem gamuda-home.js) — không cần viết
   thêm JS/handler riêng cho nút này. */
.gl-principle-card__zoom-hint {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--gl-green);
	font-size: 13px;
	font-weight: 600;
	pointer-events: none;
}

/* Số liệu (field "stat", tuỳ chọn — tham khảo khối "Hành lang & thang máy" của imperia-sensapark.vn/
   mat-bang-imperia-sensa-park/, VD "6"/"2,65m") — không nhập thì thẻ chỉ còn tiêu đề + mô tả, không
   để hổng khoảng trống (div không render nếu rỗng, xem section-design-principles.php). */
.gl-principle-card__stat {
	font-family: var(--gl-font-serif);
	font-weight: 400;
	font-size: var(--gl-fs-h3);
	line-height: 1.1;
	color: var(--gl-gold);
	margin-bottom: 8px;
}

.gl-principle-card__title {
	font-family: var(--gl-font-serif);
	/* "600" trông khá mảnh với font serif Cormorant Garamond (khác hẳn cảm giác đậm của "600" trên
	   font sans) — đổi lên "700" (cùng mức đã dùng cho mọi tiêu đề serif đậm khác trên site, VD
	   gamuda-tokens.css) để rõ đậm hơn, khớp đúng ý muốn. */
	font-weight: 700;
	font-size: 20px;
	color: var(--gl-green);
	margin-bottom: 8px;
}

.gl-principle-card__desc {
	font-size: var(--gl-fs-body);
	line-height: 1.6;
	color: var(--gl-text);
}

/* Field "dp_bg_style" = "dark" (tuỳ chọn, xem section-design-principles.php) — tham khảo khối
   "Đơn vị thi công" của imperia-sensapark.vn (nền đậm/chữ trắng thay vì nền sáng như mặc định), đổi
   sang đúng tông "nền xanh đậm đặc" + công thức thẻ ĐÃ CÓ SẴN của monrei (".gl-video-item" trong
   khối video ở trang chủ — nền/viền/màu chữ mờ trên nền tối) thay vì bịa giá trị mới, cho nhất quán
   toàn site. "Sáng" (mặc định) không đổi gì — mọi rule ở trên vẫn áp dụng nguyên. */
.gl-design-principles--white {
	background: var(--gl-white);
}

.gl-design-principles--dark {
	background: var(--gl-green-dark);
}

/* ".gl-section-header .gl-rich-content p" khai màu TRỰC TIẾP lên <p> — khai màu ở đây trên
   ".gl-rich-content" (cha) không thắng nổi vì kế thừa luôn thua 1 rule khai thẳng lên chính thẻ con
   (bất kể độ đặc thù). Phải khai lại đúng "p", cùng lỗi/cách sửa đã áp dụng cho
   ".gl-price-table--dark" (xem chú thích ở đó, gamuda-home.css). */
.gl-design-principles--dark .gl-section-header .gl-rich-content p {
	color: rgba(255, 255, 255, 0.75);
}

.gl-design-principles--dark .gl-principle-card {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
}

.gl-design-principles--dark .gl-principle-card__title {
	color: var(--gl-white);
}

.gl-design-principles--dark .gl-principle-card__desc {
	color: rgba(255, 255, 255, 0.75);
}

/* Nền "Xanh dương" (dark) — eyebrow (subtitle) đổi từ vàng mặc định sang TRẮNG luôn (khác quy ước
   "eyebrow luôn vàng kể cả trên nền tối" đang dùng ở "price_table"/"registration") — theo đúng yêu
   cầu cả tiêu đề (H2, đã trắng sẵn qua "gl-h2--light") lẫn phụ đề đều thành chữ trắng khi nền tối.
   Đổi luôn cả gạch ngang trước eyebrow (".gl-eyebrow::before") sang trắng cho đồng bộ với chữ, tránh
   gạch vàng lạc tông giữa 2 khối chữ trắng. */
.gl-design-principles--dark .gl-section-header .gl-eyebrow {
	color: var(--gl-white);
}

.gl-design-principles--dark .gl-section-header .gl-eyebrow::before {
	background: var(--gl-white);
}

/* "dp_eyebrow_bar" tắt — chỉ ẩn gạch ngang nhỏ trước eyebrow, không ẩn chữ (xem
   section-design-principles.php). */
.gl-design-principles--no-eyebrow-bar .gl-eyebrow::before {
	display: none;
}

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

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

/* Field "slider" (tuỳ chọn, xem section-design-principles.php) — không có ảnh thì
   ".gl-design-principles__inner" không có class "--split" nên lưới đặc điểm render full-width như
   trước khi có field này (mặc định "display:block" của div). Có ảnh thì chia đôi 6-6, cùng công thức
   ".gl-tab-content__panel-inner--split" bên trên — lưới đặc điểm ép về đúng 2 thẻ/hàng (thay vì 3 ở
   full-width) để vừa cột hẹp hơn. Phần slider TÁI DÙNG class/CSS ".gl-tab-content__slider*" đã có (xem
   docblock đầu section-design-principles.php), không lặp lại CSS. */
.gl-design-principles__inner--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gl-gap-xl);
	/* "start" chứ không "center" — cùng lý do đã sửa cho ".gl-tab-content__panel-inner--split" (slider
	   nhiều ảnh cao hơn slider 1 ảnh do có thêm hàng mũi tên/chấm, "center" sẽ làm lưới đặc điểm nhảy
	   vị trí bắt đầu tuỳ số ảnh trong slider). */
	align-items: start;
}

.gl-design-principles__inner--split .gl-principle-grid {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
	.gl-design-principles__inner--split {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.gl-design-principles__inner--split .gl-principle-grid {
		grid-template-columns: 1fr;
	}
}

/* ----- Danh Sách Thẻ Nội Dung: bố cục "tiêu đề bên trái", kiểu thẻ "gọn", thẻ có link, thẻ nổi bật
   (2026-10-09, khối "Bảng tính giá" tham khảo website chính thức Norton Park). Selector có thêm
   ".gl-design-principles" (2 class) để thắng reset "body.gamuda-landing a/p/h3" (0,1,2) ở gamuda-tokens.css. */
.gl-principle-groups {
	display: grid;
	gap: var(--gl-gap-md);
}

.gl-design-principles__head-icon img {
	display: block;
	width: auto;
	height: 52px;
	margin-bottom: 18px;
}

.gl-design-principles__head-icon--center img {
	margin-left: auto;
	margin-right: auto;
}

.gl-design-principles__side {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 9fr);
	gap: var(--gl-gap-2xl);
	align-items: center;
}

.gl-design-principles--side .gl-section-header {
	margin-bottom: 0;
}

.gl-design-principles__intro-cta {
	margin-top: var(--gl-gap-lg);
}

body.gamuda-landing .gl-design-principles__intro-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 30px;
	border-radius: var(--gl-radius-pill);
	color: var(--gl-white);
	letter-spacing: 0.12em;
}

body.gamuda-landing .gl-design-principles__intro-btn::after {
	content: "→";
	font-size: 16px;
	transition: transform 0.25s ease;
}

body.gamuda-landing .gl-design-principles__intro-btn:hover {
	color: var(--gl-white);
}

body.gamuda-landing .gl-design-principles__intro-btn:hover::after {
	transform: translateX(4px);
}

/* Lưới tự chia đều: 1 nhóm 5 thẻ = 5 cột, nhóm 4 thẻ = 4 cột, nhiều thẻ hơn thì tự xuống hàng
   (thẻ không hẹp hơn 140px). */
.gl-principle-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--gl-gap-sm);
}

.gl-design-principles__inner--split .gl-principle-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.gl-design-principles--compact .gl-principle-groups {
	gap: var(--gl-gap-sm);
}

.gl-design-principles--compact .gl-principle-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 178px;
	padding: 22px 22px 20px;
	background: color-mix(in srgb, var(--gl-gold-light) 26%, var(--gl-white));
	border-color: color-mix(in srgb, var(--gl-gold-light) 75%, var(--gl-white));
	border-radius: var(--gl-radius-sm);
}

.gl-design-principles--compact .gl-principle-card__icon,
.gl-design-principles--compact .gl-principle-card__media {
	order: -1;
}

.gl-design-principles--compact .gl-principle-card__title {
	order: 0;
	/* chừa chỗ cho mũi tên góc phải (thẻ có link) khi tiêu đề xuống 2 dòng */
	margin: 0 34px 0 0;
	font-weight: 500;
	font-size: 30px;
	line-height: 1.1;
	color: var(--gl-green-dark);
}

.gl-principle-card__plus {
	color: var(--gl-gold);
}

.gl-design-principles--compact .gl-principle-card__stat {
	order: 1;
	margin: auto 0 4px;
	padding-top: 28px;
	font-size: 21px;
	color: var(--gl-green-dark);
}

.gl-design-principles--compact .gl-principle-card__desc {
	order: 2;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: left;
	color: color-mix(in srgb, var(--gl-text) 70%, transparent);
}

/* Thẻ nổi bật: nền xanh rêu, chữ sáng (kiểu thường lẫn kiểu gọn). */
.gl-design-principles .gl-principle-card--accent {
	background: var(--gl-green);
	border-color: var(--gl-green);
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.45);
}

.gl-design-principles .gl-principle-card--accent .gl-principle-card__title,
.gl-design-principles .gl-principle-card--accent .gl-principle-card__stat {
	color: var(--gl-white);
}

.gl-design-principles .gl-principle-card--accent .gl-principle-card__desc {
	color: rgba(255, 255, 255, 0.72);
}

.gl-design-principles .gl-principle-card--accent .gl-principle-card__plus {
	color: var(--gl-gold-light);
}

/* Thẻ có link: cả thẻ là <a>, mũi tên góc phải; rê chuột -> thẻ nhấc lên, viền/bóng đậm hơn, mũi tên
   trượt sang phải. Dùng thuộc tính "translate" (KHÔNG phải "transform") để không đụng transform của
   hiệu ứng hiện dần ".gl-reveal"; khai lại transition gộp cả 2 (cùng lý do ".gl-unit-card.gl-reveal"). */
.gl-design-principles .gl-principle-card--link {
	position: relative;
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.gl-principle-card--link.gl-reveal {
	transition: opacity 0.7s var(--gl-ease-out), transform 0.7s var(--gl-ease-out), translate 0.3s ease,
		box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.gl-principle-card__arrow {
	position: absolute;
	top: 20px;
	right: 18px;
	display: flex;
	color: var(--gl-gold);
	transition: transform 0.3s ease;
}

.gl-principle-card--accent .gl-principle-card__arrow {
	color: var(--gl-gold-light);
}

.gl-design-principles .gl-principle-card--link:hover,
.gl-design-principles .gl-principle-card--link:focus-visible {
	translate: 0 -4px;
	border-color: var(--gl-gold);
	box-shadow: 0 18px 32px -18px rgba(19, 36, 77, 0.45);
}

.gl-design-principles .gl-principle-card--accent.gl-principle-card--link:hover,
.gl-design-principles .gl-principle-card--accent.gl-principle-card--link:focus-visible {
	background: color-mix(in srgb, var(--gl-green) 88%, var(--gl-black, #000));
	border-color: var(--gl-gold-light);
}

.gl-principle-card--link:hover .gl-principle-card__arrow,
.gl-principle-card--link:focus-visible .gl-principle-card__arrow {
	transform: translateX(4px);
}

.gl-design-principles .gl-principle-card--link:focus-visible {
	outline: 2px solid var(--gl-gold);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.gl-design-principles .gl-principle-card--link:hover {
		translate: none;
	}
}

@media (max-width: 1199px) {
	.gl-design-principles__side {
		grid-template-columns: 1fr;
		gap: var(--gl-gap-xl);
	}
}

@media (max-width: 600px) {
	.gl-principle-grid--auto {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gl-design-principles--compact .gl-principle-card {
		min-height: 150px;
		padding: 18px 16px 16px;
	}

	.gl-design-principles--compact .gl-principle-card__title {
		font-size: 24px;
	}

	.gl-design-principles--compact .gl-principle-card__stat {
		font-size: 18px;
	}
}

/* ===== MẶT BẰNG ĐIỂN HÌNH (section-typical-floors.php) =====
   Tham khảo công cụ tra cứu mặt bằng của imperia-sensapark.vn/mat-bang-imperia-sensa-park/ (đã thao
   tác trực tiếp trên trang đó để xác nhận UI/hành vi trước khi build): chọn tòa (thẻ 2 cột, tòa đang
   chọn nền xanh đậm đặc) -> dải nút chọn tầng dạng pill cuộn ngang -> ảnh mặt bằng + tiêu đề tầng +
   legend màu theo loại căn + nút lọc dạng pill + bảng danh sách căn. Toàn bộ ẩn/hiện bằng CSS/JS phía
   client (xem ".gl-floor-lookup" trong gamuda-home.js) — mọi tòa/tầng/căn đã có sẵn trong DOM. */
.gl-floor-lookup__towers {
	display: flex;
	gap: var(--gl-gap-sm);
	margin-bottom: var(--gl-gap-md);
	flex-wrap: wrap;
}

.gl-floor-lookup__tower {
	flex: 1 1 240px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 22px;
	text-align: left;
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.gl-floor-lookup__tower.is-active {
	background: var(--gl-green);
	border-color: var(--gl-green);
}

.gl-floor-lookup__tower-name {
	font-family: var(--gl-font-serif);
	font-size: 20px;
	color: var(--gl-green);
}

.gl-floor-lookup__tower.is-active .gl-floor-lookup__tower-name {
	color: var(--gl-white);
}

.gl-floor-lookup__tower-count {
	font-size: 13px;
	color: var(--gl-text);
	opacity: 0.65;
}

.gl-floor-lookup__tower.is-active .gl-floor-lookup__tower-count {
	color: var(--gl-white);
	opacity: 0.75;
}

/* Ẩn hẳn theo mặc định — chỉ dải "Danh sách tầng" của tòa ĐANG chọn mới có ".is-active" (JS đổi khi
   bấm nút tòa, xem gamuda-home.js). Nhiều tầng dễ tràn bề rộng khung (VD 6+ tầng) nên cho cuộn ngang
   thay vì xuống dòng, giữ đúng 1 hàng gọn như tham khảo. */
.gl-floor-lookup__floor-tabs {
	display: none;
	gap: 10px;
	margin-bottom: var(--gl-gap-lg);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

.gl-floor-lookup__floor-tabs.is-active {
	display: flex;
}

.gl-floor-lookup__floor-tab {
	flex: 0 0 auto;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--gl-green);
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-pill);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gl-floor-lookup__floor-tab.is-active {
	color: var(--gl-white);
	background: var(--gl-gold);
	border-color: var(--gl-gold);
}

/* Chỉ panel (ảnh + bảng) của đúng cặp tòa/tầng đang chọn mới hiện — xem JS. */
.gl-floor-lookup__panel {
	display: none;
}

.gl-floor-lookup__panel.is-active {
	display: block;
}

.gl-floor-lookup__body {
	display: flex;
	gap: var(--gl-gap-xl);
	align-items: flex-start;
	margin-bottom: var(--gl-gap-lg);
}

.gl-floor-lookup__image-wrap {
	flex: 0 0 46%;
	border-radius: var(--gl-radius-md);
	overflow: hidden;
	border: 1px solid var(--gl-border);
}

.gl-floor-lookup__image {
	display: block;
	width: 100%;
	height: auto;
	cursor: zoom-in;
}

.gl-floor-lookup__info {
	flex: 1 1 auto;
	min-width: 0;
}

.gl-floor-lookup__floor-heading {
	font-family: var(--gl-font-serif);
	font-size: 24px;
	color: var(--gl-green);
	margin-bottom: 8px;
}

.gl-floor-lookup__floor-note {
	font-size: 14px;
	color: var(--gl-gold);
	margin-bottom: var(--gl-gap-sm);
}

.gl-floor-lookup__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: var(--gl-gap-sm);
	font-size: 14px;
	color: var(--gl-text);
}

.gl-floor-lookup__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.gl-floor-lookup__dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.gl-floor-lookup__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--gl-gap-md);
}

.gl-floor-lookup__filter {
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gl-green);
	background: var(--gl-cream);
	border: 1px solid transparent;
	border-radius: var(--gl-radius-pill);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.gl-floor-lookup__filter.is-active {
	color: var(--gl-white);
	background: var(--gl-green);
}

/* Viền khung bảng đặt Ở ĐÂY (bọc ngoài <table>), KHÔNG đặt trực tiếp trên thẻ <table> — "table" có
   "border-collapse:collapse" thì viền riêng khai trên chính nó thường bị trình duyệt bỏ qua ở mép
   ngoài (chỉ ưu tiên viền của các <th>/<td> tại chỗ collapse, viền "table" gần như luôn KHÔNG hiện ra
   dù có khai — đã thấy đúng bug này khi kiểm tra thật, "border" đo bằng computed style vẫn ra giá trị
   nhưng không có gì được vẽ lên màn hình). Bọc viền/bo góc ra ".table-wrap" (1 phần tử <div> thường,
   không bị luật collapse chi phối) né hẳn lỗi này — đúng kỹ thuật "table-wrap bọc ngoài table" từng
   ghi chú tham khảo imperia-sensapark ở phần ".gl-rich-content table" phía trên. "overflow-x:auto"
   (cuộn ngang khi bảng nhiều cột hơn màn hình) + "overflow-y:auto" (cuộn dọc riêng khi danh sách căn
   dài hơn 7 dòng — tham khảo đúng bảng của imperia-sensapark, có thanh cuộn dọc riêng bên trong khung,
   không đẩy dài cả trang) khai riêng 2 trục — không dùng gộp "overflow:hidden" (sẽ khoá luôn trục
   ngang, mất cuộn).
   KHÔNG khai "max-height" ở đây — đã kiểm tra thật: hễ ".table-wrap" có "overflow-y" khác "visible"
   (kể cả "hidden" lẫn "auto") mà bên trong có 1 <table>, CHÍNH TRÌNH DUYỆT (bug thật của Chrome) tự
   cộng thêm ~15-16px chiều cao "ma" vào khung — không liên quan gì "max-height" cụ thể là bao nhiêu,
   chỉ cần overflow-y khác "visible" là dính. Vì vậy chiều cao (giới hạn ~7 dòng rồi cuộn) được TỰ TÍNH
   VÀ GÁN BẰNG JS (`glSyncFloorTableHeight()`, gamuda-home.js — đo chiều cao thật lúc tạm bật
   "overflow-y:visible" rồi mới gán "height" cố định), không dùng CSS "max-height" nữa. */
.gl-floor-lookup__table-wrap {
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
	overflow-x: auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Cùng đúng công thức đã dùng cho bảng chèn trong rich-text (".gl-rich-content table", xem phía trên
   file này) — navy header/dòng vằn/bo góc — để bảng dựng động ở đây (không qua wysiwyg) trông nhất
   quán với bảng admin tự chèn tay. Chỉ còn "border-bottom" ngăn cách các dòng — KHÔNG kẻ dọc giữa cột
   (đã thử kẻ dọc, user thấy rối hơn, chỉ cần ngang là đủ gọn). */
.gl-floor-lookup__table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.gl-floor-lookup__table th,
.gl-floor-lookup__table td {
	padding: 12px 16px;
	text-align: center;
	border-bottom: 1px solid var(--gl-border);
}

.gl-floor-lookup__table td:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 600;
}

.gl-floor-lookup__table thead th {
	/* Ý ĐỊNH: dính ở đỉnh khung khi cuộn dọc (giống bảng tham khảo của imperia-sensapark — cuộn danh
	   sách căn nhưng vẫn luôn thấy tên cột). ĐÃ KIỂM TRA THẬT: hiện KHÔNG dính trên trang thật (đã đo
	   trực tiếp bằng getBoundingClientRect() khi cuộn ".table-wrap") dù mọi điều kiện CSS cần thiết
	   đều đúng (đã loại trừ transform tổ tiên, border-collapse, "height" JS gán, overflow html/body...
	   — 1 bản clone y hệt gắn thẳng vào <body> lại DÍNH đúng, nên nguyên nhân nằm ở ngữ cảnh trang thật
	   chưa xác định được, không phải lỗi cú pháp/thiếu CSS ở đây). Giữ nguyên khai báo (vô hại nếu
	   không chạy) — không phải phần user yêu cầu, chỉ là điểm cộng thêm, chưa đáng bỏ thời gian điều
	   tra sâu hơn trừ khi user thấy cần. */
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--gl-green);
	color: var(--gl-white);
	font-family: var(--gl-font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: none;
}

.gl-floor-lookup__table tbody tr:nth-child(even) {
	background: var(--gl-cream);
}

.gl-floor-lookup__table tbody tr:last-child td {
	border-bottom: none;
}

.gl-floor-lookup__footnote {
	margin-top: var(--gl-gap-md);
	font-size: 13px;
	line-height: 1.6;
	color: var(--gl-text);
	opacity: 0.7;
}

@media (max-width: 767px) {
	.gl-floor-lookup__tower {
		flex-basis: 100%;
	}

	.gl-floor-lookup__body {
		flex-direction: column;
	}

	.gl-floor-lookup__image-wrap {
		flex-basis: auto;
		width: 100%;
	}

	/* "align-items: flex-start" ở ".gl-floor-lookup__body" (rule gốc, dùng cho layout HÀNG ngang trên
	   desktop — canh 2 cột lên đỉnh thay vì kéo dài bằng nhau) đổi ý nghĩa hoàn toàn khi
	   "flex-direction" chuyển thành "column" ở đây: trục ngang (width) giờ mới là trục chéo
	   (cross-axis), "flex-start" khiến ".info" co lại vừa đúng bề rộng nội dung của nó thay vì kéo dài
	   hết container — bình thường không lộ ra (chữ/nút tự xuống dòng nên bề rộng "vừa khít" vẫn gần
	   bằng container), NHƯNG từ khi bảng thông số (nhiều cột, rộng hơn màn hình mobile) chuyển vào
	   nằm trong ".info" (xem section-typical-floors.php), bề rộng tự nhiên của bảng kéo ".info" rộng
	   theo, tràn ngang cả trang. Ép "width: 100%" để ".info" luôn đúng bằng bề rộng container, bảng bên
	   trong tự cuộn ngang riêng (".gl-floor-lookup__table-wrap{overflow-x:auto}" đã có sẵn) thay vì đẩy
	   cả khối cha tràn ra. */
	.gl-floor-lookup__info {
		width: 100%;
	}

	/* Bảng thông tin căn full-width, KHÔNG cuộn ngang trên mobile — tham khảo đúng bảng của
	   imperia-sensapark.vn (chữ nhỏ hơn + đệm hẹp hơn + tiêu đề cột được xuống dòng, không giữ
	   nguyên cỡ chữ/đệm desktop rồi bắt cuộn ngang như trước). Padding/cỡ chữ giảm đủ để tổng bề rộng
	   5 cột vừa đúng khung màn hình thật (đã đo trực tiếp để chỉnh, không đoán). */
	.gl-floor-lookup__table {
		font-size: 12px;
	}

	.gl-floor-lookup__table th,
	.gl-floor-lookup__table td {
		padding: 8px 6px;
	}

	.gl-floor-lookup__table thead th {
		white-space: normal;
	}

	.gl-floor-lookup__table td:first-child {
		gap: 4px;
	}
}

/* ===== LỘ TRÌNH / TIẾN ĐỘ (section-timeline.php) =====
   Tham khảo dòng thời gian mốc công bố/khởi công/mở bán/bàn giao của imperia-sensapark.vn/
   tien-do-du-an-imperia-sensa-park/ — dải chấm-đường thẳng đứng bên trái, mỗi mốc 1 khối
   ngày/tiêu đề/mô tả/nhãn trạng thái màu (xanh đặc = đã xong, vàng viền = đang làm, xám nhạt = sắp
   tới) — cùng 3 màu status site đã dùng ở nơi khác (var(--gl-green)/var(--gl-gold)/var(--gl-border)). */
.gl-timeline__rail {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	padding-left: 32px;
}

.gl-timeline__rail::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 6px;
	bottom: 6px;
	width: 1px;
	background: var(--gl-border);
}

.gl-timeline__item {
	position: relative;
	padding-bottom: var(--gl-gap-xl);
}

.gl-timeline__item:last-child {
	padding-bottom: 0;
}

.gl-timeline__dot {
	position: absolute;
	left: -32px;
	top: 6px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--gl-white);
	border: 2px solid var(--gl-border);
}

.gl-timeline__item--done .gl-timeline__dot {
	background: var(--gl-green);
	border-color: var(--gl-green);
}

/* Mốc "Đang triển khai" nổi bật hơn "Đã hoàn thành"/"Sắp tới" bằng 1 quầng sáng mờ quanh chấm
   (box-shadow lan toả) + viền màu nhạt hơn nền (2 sắc độ vàng khác nhau, không trùng hệt màu nền như
   trước) — tham khảo đúng hiệu ứng chấm mốc "đang diễn ra" của imperia-sensapark.vn (đã xem qua
   DevTools: nền vàng đậm + viền vàng nhạt + box-shadow "0 0 0 4px rgba(vàng, .22)"), đổi sang đúng
   token màu vàng của monrei thay vì chép nguyên giá trị. */
.gl-timeline__item--in_progress .gl-timeline__dot {
	background: var(--gl-gold);
	border-color: var(--gl-gold-light);
	box-shadow: 0 0 0 4px rgba(15, 122, 140, 0.22);
}

.gl-timeline__date {
	font-family: var(--gl-font-sans);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gl-text);
	opacity: 0.6;
	margin-bottom: 6px;
}

.gl-timeline__title {
	font-family: var(--gl-font-serif);
	font-size: 22px;
	color: var(--gl-green);
	margin-bottom: 6px;
}

.gl-timeline__desc {
	font-size: var(--gl-fs-body);
	line-height: 1.6;
	color: var(--gl-text);
	margin-bottom: 10px;
}

.gl-timeline__status {
	display: inline-block;
	padding: 4px 12px;
	font-family: var(--gl-font-sans);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.08em;
	border-radius: var(--gl-radius-pill);
	color: var(--gl-text);
	background: var(--gl-cream);
	border: 1px solid var(--gl-border);
}

.gl-timeline__item--done .gl-timeline__status {
	color: var(--gl-white);
	background: var(--gl-green);
	border-color: var(--gl-green);
}

.gl-timeline__item--in_progress .gl-timeline__status {
	color: var(--gl-green-dark);
	background: rgba(15, 122, 140, 0.16);
	border-color: var(--gl-gold);
}

/* Field "slider" (tuỳ chọn, xem section-timeline.php) — cùng công thức "--split" đã dùng cho
   ".gl-design-principles__inner"/".gl-tab-content__panel-inner": không có ảnh thì
   ".gl-timeline__inner" không có class "--split", dòng thời gian render full-width + căn giữa như
   trước (giữ nguyên "max-width:720px; margin:0 auto" ở ".gl-timeline__rail"). Có ảnh thì chia đôi
   6-6, dòng thời gian bỏ giới hạn bề rộng/căn giữa để lấp đầy nửa cột trái, slider TÁI DÙNG class/CSS
   ".gl-tab-content__slider*" đã có, không lặp lại.
   "align-items: center" (KHÁC 2 chỗ "--split" kia đang cố định "start") — theo yêu cầu: slider căn
   giữa theo chiều cao dòng thời gian, không dính đỉnh. Không lặp lại lỗi đã tránh ở 2 chỗ kia (lưới
   đặc điểm/tab nhảy vị trí đỉnh tuỳ chiều cao slider) vì ở đây NGƯỢC LẠI — dòng thời gian (bên trái)
   luôn là cột cao nhất/ổn định, "center" chỉ đẩy slider (cột thấp hơn) trôi xuống giữa, cột dòng thời
   gian không bị dịch chuyển gì cả. */
.gl-timeline__inner--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gl-gap-xl);
	align-items: center;
}

.gl-timeline__inner--split .gl-timeline__rail {
	max-width: none;
	margin: 0;
}

@media (max-width: 767px) {
	.gl-timeline__inner--split {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.gl-timeline__rail {
		padding-left: 26px;
	}

	.gl-timeline__dot {
		left: -26px;
	}
}

/* Field "pt_desc_width" = "narrow" (tuỳ chọn, xem section-price-table.php) — tham khảo khối "Trả
   lời nhanh" (layout riêng CŨ, đã GỘP vào "Richtext Block") mở đầu trang Giá Bán của
   imperia-sensapark.vn/gia-ban-imperia-sensa-park/: mô tả co hẹp bề rộng + căn giữa CẢ KHỐI (giống
   ".gl-section-header .gl-h2") nhưng CHỮ BÊN TRONG căn trái (không phải căn giữa từng dòng) — hợp
   khi chỉ có văn bản dài, không có bảng (bảng cần "full" — chữ tràn hết khung để bảng đủ rộng).
   "align-self:center" thay ĐÈ "align-self:stretch" mặc định của ".gl-section-header .gl-rich-
   content" (gamuda-home.css, ~dòng 1113) để "max-width" có tác dụng co hẹp thật — nếu vẫn "stretch"
   thì khối này luôn giãn hết bề ngang cha, "max-width" không có cơ hội phát huy.
   KHÔNG cần khai lại "font-size"/"line-height"/"color"/"text-align" cho "p" — kế thừa nguyên từ
   ".gl-section-header .gl-rich-content p" gốc, chỉ thêm khoảng cách giữa các đoạn ("p + p") vốn
   không cần thiết ở mô tả ngắn 1-2 dòng thông thường của layout này. */
.gl-price-table--desc-narrow .gl-section-header .gl-rich-content {
	align-self: center;
	max-width: 845px;
}

.gl-price-table--desc-narrow .gl-section-header .gl-rich-content p + p {
	margin-top: var(--gl-gap-md);
}

/* Field "pt_title_color" (tuỳ chọn, xem section-price-table.php) — "Vàng" là màu mặc định sẵn có
   (".gl-eyebrow"/".gl-h2" gốc, không cần override), 2 lựa chọn còn lại đổi ĐỒNG BỘ cả eyebrow lẫn
   H2 sang cùng 1 tông (mặc định 2 phần này lệch tông: eyebrow vàng, H2 xanh dương). "Đen" dùng màu
   đen mềm (không phải đen tuyệt đối #000, đỡ gắt) — site chưa có sẵn token màu đen nào khác nên khai
   thẳng giá trị, chỉ dùng riêng ở đây. */
.gl-price-table--title-black .gl-eyebrow,
.gl-price-table--title-black .gl-h2 {
	color: #1a1a1a;
}

.gl-price-table--title-navy .gl-eyebrow,
.gl-price-table--title-navy .gl-h2 {
	color: var(--gl-green);
}

/* Field "pt_eyebrow_bar" = tắt (tuỳ chọn, xem section-price-table.php) — CHỈ ẩn thanh gạch ngang
   nhỏ trước chữ eyebrow (".gl-eyebrow::before", gamuda-tokens.css), KHÔNG ẩn chữ eyebrow. */
.gl-price-table--no-eyebrow-bar .gl-eyebrow::before {
	display: none;
}

/* ===== BẢNG GIÁ (section-price-table.php) =====
   Tham khảo bảng giá tạm tính theo loại căn của imperia-sensapark.vn/gia-ban-imperia-sensa-park/ —
   bảng TĨNH, không có tương tác lọc/chọn tầng như "Mặt Bằng Điển Hình" (typical_floors). Bảng nhập
   trực tiếp trong field "pt_desc" (WYSIWYG, nút "Bảng" trên toolbar — xem "gl_basic" trong
   inc/acf-gamuda-home.php) — dùng chung ".gl-rich-content table" đã có sẵn (navy header/dòng vằn/bo
   góc, cùng công thức bảng "hạng mục" ở trang chủ), KHÔNG có class/CSS bảng riêng cho layout này
   nữa (đã bỏ ".gl-price-table-wrap"/".gl-price-table__table" + field "pt_col_headers"/"pt_rows" —
   trước đây ép cứng 4 cột qua repeater, giờ admin tự do thêm/bớt cột/dòng qua bảng WYSIWYG). Nhờ bỏ
   khung bọc riêng, section này cũng TỰ HẾT 1 lỗi trình duyệt thật đã từng gặp (Chrome cộng dư chiều
   cao khi có 1 khung overflow-y BỌC RIÊNG quanh <table> — viền/bo góc của ".gl-rich-content table"
   nằm NGAY TRÊN <table>, không qua khung bọc ngoài nào, nên không kích hoạt lỗi đó). */

/* Field "pt_stats" (tuỳ chọn, xem section-price-table.php) — dải số liệu ngang, tham khảo khối
   thông số dự án đầu trang Tiện Ích của imperia-sensapark.vn — số ngăn cách bằng viền dọc mảnh, số
   lượng thông số tự do (không cố định 4 như tham khảo) nên chia đều bằng "flex:1" thay vì grid cột
   cứng. Số liệu dùng font SANS (không phải serif) — đúng quy ước chung "số/đếm số trên site dùng
   sans, serif chỉ dành cho tiêu đề chữ" (xem ".gl-showcase__counter"). */
.gl-price-table__stats {
	display: flex;
	margin-top: var(--gl-gap-lg);
}

.gl-price-table__stat {
	flex: 1;
	text-align: center;
	padding: 0 var(--gl-gap-md);
}

.gl-price-table__stat-value {
	font-family: var(--gl-font-sans);
	font-size: 32px;
	font-weight: 700;
	color: var(--gl-green);
	line-height: 1.1;
	margin-bottom: 6px;
}

.gl-price-table__stat-label {
	font-size: 13px;
	color: var(--gl-text);
}

.gl-price-table--dark .gl-price-table__stat-value {
	color: var(--gl-white);
}

.gl-price-table--dark .gl-price-table__stat-label {
	color: rgba(255, 255, 255, 0.75);
}

/* Ngăn cách dọc không phù hợp khi xếp chồng 1 cột trên mobile — đổi sang gạch ngang phía trên mỗi
   mục, cùng cách các lưới thẻ khác trên site đổi bố cục ở breakpoint hẹp. */
@media (max-width: 600px) {
	.gl-price-table__stats {
		flex-direction: column;
		gap: var(--gl-gap-md);
	}

	.gl-price-table__stat {
		padding: 0;
	}
}

/* Field "pt_cards" (tuỳ chọn, xem section-price-table.php) — tham khảo khối "Tệp khách thuê" (4 thẻ
   chữ) hiện dưới bảng "Thị Trường Cho Thuê" của imperia-sensapark.vn/gia-ban-imperia-sensa-park/.
   TÁI DÙNG NGUYÊN ".gl-principle-grid"/".gl-principle-card" (đã build cho layout "Nguyên Tắc / Đặc
   Điểm"), chỉ đổi số cột lưới ở desktop từ 3 sang 4 cho khớp đúng số thẻ tham khảo — 2 breakpoint
   dưới (1023px/600px) giữ nguyên 2 cột/1 cột như ".gl-principle-grid" gốc, không cần khai lại. */
.gl-price-table__cards {
	margin-top: var(--gl-gap-lg);
	grid-template-columns: repeat(4, 1fr);
}

/* Dưới 4 thẻ: căn giữa hàng thẻ (giữ nguyên bề rộng 1 thẻ như lưới 4 cột) thay vì dồn về bên trái */
.gl-price-table__cards--center {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.gl-price-table__cards--center > .gl-principle-card {
	flex: 0 1 calc((100% - 3 * var(--gl-gap-lg)) / 4);
	min-width: 0;
}

@media (max-width: 1023px) {
	.gl-price-table__cards--center > .gl-principle-card {
		flex-basis: calc((100% - var(--gl-gap-lg)) / 2);
	}
}

@media (max-width: 600px) {
	.gl-price-table__cards--center > .gl-principle-card {
		flex-basis: 100%;
	}
}

/* Field "pt_bg_style" — 3 lựa chọn "Trắng"/"Ngà"/"Xanh dương" (value nội bộ "white"/"light"/"dark",
   giữ nguyên "light"/"dark" cho khớp dữ liệu cũ đã lưu, chỉ thêm mới "white"). "Trắng"/"Ngà" khai
   RÕ màu nền (trước đây "light" không khai gì, trông chờ kế thừa màu nền trang — giờ tách hẳn 3 mức
   sáng khác nhau: trắng đặc/kem ngà/xanh đậm) để admin chọn đúng ý, không phụ thuộc màu nền trang
   đặt ở đâu. */
.gl-price-table--white {
	background: var(--gl-white);
}

.gl-price-table--light {
	background: var(--gl-cream);
}

/* "dark" — cùng công thức "nền xanh đậm đặc" đã dùng cho ".gl-design-principles--dark" (tái dùng
   token/giá trị y hệt, không bịa mới). Nút CTA cuối section đổi màu viền/chữ sáng — TÁI DÙNG đúng
   công thức đã có cho section nền tối khác (".gl-project-categories .gl-section-cta-link"), không
   viết công thức mới. */
.gl-price-table--dark {
	background: var(--gl-green-dark);
}

/* ".gl-section-header .gl-rich-content p" (gamuda-home.css) khai màu TRỰC TIẾP lên chính thẻ <p>
   (không phải khai trên ".gl-rich-content" rồi trông chờ kế thừa xuống) — khai màu trên
   ".gl-rich-content" (element cha) như 1 dòng cũ ở đây KHÔNG thắng nổi vì kế thừa luôn thua 1 rule
   khai THẲNG lên chính thẻ con, bất kể độ đặc thù (specificity) cao hay thấp. Phải khai lại đúng
   selector "p" cụ thể đó, cùng cách đã dùng cho section nền tối khác
   (".gl-project-categories .gl-section-header .gl-rich-content p"). */
.gl-price-table--dark .gl-section-header .gl-rich-content p {
	color: rgba(255, 255, 255, 0.75);
}

/* Bảng chèn qua WYSIWYG trong "pt_desc" nằm trong ".gl-section-header .gl-rich-content" — override
   đúng công thức ".gl-rich-content table"/".gl-rich-content__table-wrap" gốc (gamuda-home.css,
   ~dòng 392) cho nền tối, cùng bảng chuẩn dùng chung toàn site (không phải CSS bảng riêng của
   layout này nữa). Viền NGOÀI nằm ở ".gl-rich-content__table-wrap" (KHÔNG phải trên chính <table>,
   xem chú thích gốc) nên override đúng selector đó, không phải "table". */
.gl-price-table--dark .gl-section-header .gl-rich-content__table-wrap {
	/* Đồng bộ đúng màu "border-bottom-color" của th/td ngay dưới (rgba(255,255,255,.14)) — viền
	   ngoài + viền trong cùng 1 tông, không lệch đậm nhạt giữa khung bao và các dòng bên trong. */
	border-color: rgba(255, 255, 255, 0.14);
}

.gl-price-table--dark .gl-section-header .gl-rich-content table th,
.gl-price-table--dark .gl-section-header .gl-rich-content table td {
	border-bottom-color: rgba(255, 255, 255, 0.14);
}

/* "tbody td" (không phải "th, td" chung) — tránh đè lên màu chữ trắng cố ý của header
   (".gl-rich-content table thead th { color: var(--gl-white) }") vốn đang đặc thù hơn selector
   "table td" trơn nhưng lại KÉM đặc thù hơn "table th" nếu gộp chung "th, td" ở đây (nhiều lớp class
   hơn "thead th" thắng nhầm, làm chữ header bị xỉn màu theo mức mờ 0.75 thay vì trắng đặc). */
.gl-price-table--dark .gl-section-header .gl-rich-content table tbody td {
	color: rgba(255, 255, 255, 0.75);
}

.gl-price-table--dark .gl-section-header .gl-rich-content table tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.04);
}

.gl-price-table--dark .gl-section-header .gl-rich-content table tbody tr:hover {
	background: rgba(15, 122, 140, 0.18);
}

.gl-price-table--dark .gl-principle-card {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
}

.gl-price-table--dark .gl-principle-card__title {
	color: var(--gl-white);
}

.gl-price-table--dark .gl-principle-card__desc {
	color: rgba(255, 255, 255, 0.75);
}

body.gamuda-landing .gl-price-table--dark .gl-section-cta-link {
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--gl-white);
}

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

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

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

/* ===== CHÍNH SÁCH BÁN HÀNG (section-booking-policy.php) =====
   Tham khảo khối "Chính thức nhận booking" của imperia-sensapark.vn/gia-ban-imperia-sensa-park/ —
   KHÁC "tab_content"/"design_principles"/"timeline" (header nằm TRÊN hàng chia cột): ở đây
   eyebrow/H2/mô tả/CTA nằm NGUYÊN trong cột nội dung bên trái, cùng hàng với cột ảnh/slider bên
   phải — đúng bố cục imperia. "align-items:center" (theo yêu cầu: slider căn giữa theo độ dài cột
   nội dung bên trái) — GIỐNG ".gl-timeline__inner--split" (cột trái luôn cao/ổn định hơn, "center"
   chỉ đẩy slider/ảnh bên phải trôi xuống giữa, không làm cột trái xê dịch) — KHÁC
   ".gl-design-principles__inner--split"/".gl-tab-content__panel-inner--split" (2 chỗ đó cố định
   "start" vì chiều cao BIẾN ĐỘNG nằm ở cột TRÁI theo số thẻ/tab, "center" sẽ làm cột đó nhảy vị trí
   đỉnh). Cột ảnh TÁI DÙNG NGUYÊN ".gl-tab-content__slider-col"/"__slider"/"__slide", không lặp lại CSS. */
.gl-booking-policy__inner--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gl-gap-xl);
	align-items: center;
}

@media (max-width: 767px) {
	.gl-booking-policy__inner--split {
		grid-template-columns: 1fr;
	}
}

.gl-booking-policy__cta {
	margin-top: var(--gl-gap-lg);
}

.gl-booking-policy__cta--center {
	text-align: center;
}

/* Bảng đặc điểm (field "bp_features", tuỳ chọn) — tham khảo ĐÚNG UI khối "Bên Trong Căn Hộ" của
   imperia-sensapark.vn/noi-that-imperia-sensa-park/: không nền/khung màu, chỉ gạch chân mảnh ngăn
   dòng, cột nhãn nhỏ/đậm/viết hoa màu trung tính, cột giá trị đậm màu navy — khác hẳn kiểu bảng "nổi
   bật" (".gl-table--highlight", nền xanh nhạt đồng nhất, dùng cho bảng admin tự gõ trong rich text).
   Không bọc ".gl-rich-content"/"__table-wrap" (khung viền/bo góc không khớp UI tham khảo ở đây, xem
   section-booking-policy.php). */
.gl-booking-policy__features {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--gl-gap-lg);
}

/* "font-size" khai THẲNG ở đây (không chỉ đặt trên <table> rồi để kế thừa xuống <td>) — Flatsome có
   sẵn rule "td, th { font-size: 0.9em }" nhắm THẲNG vào <td>, thắng giá trị kế thừa từ <table> dù đặc
   thù thấp hơn hẳn (cùng nguyên tắc "rule trực tiếp trên chính thẻ luôn thắng giá trị kế thừa từ tổ
   tiên" đã gặp nhiều lần khác trong file này). */
.gl-booking-policy__features td {
	padding: 14px 0;
	text-align: left;
	border-bottom: 1px solid var(--gl-border);
	font-size: 16px;
}

.gl-booking-policy__features tr:first-child td {
	padding-top: 0;
}

.gl-booking-policy__features tr:last-child td {
	border-bottom: none;
	padding-bottom: 0;
}

.gl-booking-policy__features td:first-child {
	width: 35%;
	font-family: var(--gl-font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gl-text);
	white-space: nowrap;
	padding-right: var(--gl-gap-md);
}

.gl-booking-policy__features td:last-child {
	font-weight: 600;
	color: var(--gl-green);
}

@media (max-width: 600px) {
	.gl-booking-policy__features td:first-child {
		width: 40%;
		white-space: normal;
	}
}

/* ===== SLIDER (section-slider.php) =====
   Tham khảo khối carousel ảnh lớn của imperia-sensapark.vn/tien-ich-imperia-sensa-park/ — TÁI DÙNG
   NGUYÊN ".gl-tab-content__slider" (mũi tên đè ảnh, chấm dưới ảnh, tỉ lệ 16:9 tự động qua
   ".flickity-viewport", xem gamuda-home.css phía trên), chỉ cần thêm: nền section (field "sl_bg_style",
   3 lựa chọn Trắng/Ngà/Xanh dương — cùng quy ước ".gl-design-principles--{white|light|dark}"/
   ".gl-price-table--{white|light|dark}", "Ngà" không cần khai riêng vì trùng nền mặc định của trang),
   "object-fit:cover" cho ảnh (khác mặc định "contain" — bên đó dành cho ảnh mặt bằng kỹ thuật, ở đây
   luôn là ảnh chụp thực tế nên cắt khung không sao, tránh dư khoảng trắng 2 bên khi ảnh không đúng tỉ
   lệ 16:9), và dòng ghi chú nhỏ dưới slider. */
.gl-slider-section--white {
	background: var(--gl-white);
}

.gl-slider-section--dark {
	background: var(--gl-green-dark);
}

/* Mô tả ngắn (nếu có) kế thừa màu chữ tối mặc định của ".gl-rich-content p" — vô hình trên nền xanh
   đậm của biến thể "dark", cùng lỗi/cách sửa đã áp dụng cho ".gl-price-table--dark"/".gl-design-
   principles--dark" (phải khai lại đúng "p", "color" đặt ở section cha bị 1 rule khác nhắm thẳng vào
   "p" ghi đè do tính CỤ THỂ hơn — không liên quan độ ưu tiên CSS thông thường). */
.gl-slider-section--dark .gl-section-header .gl-rich-content p {
	color: rgba(255, 255, 255, 0.75);
}

.gl-slider-section .gl-tab-content__slide img {
	object-fit: cover;
}

/* Tỉ lệ khung ảnh RIÊNG cho section này — ghi đè "aspect-ratio: 16/9" dùng chung ở
   ".gl-tab-content__slider .flickity-viewport" (không đổi trực tiếp rule gốc vì "tab_content"/
   "typical_floors" vẫn cần đúng 16:9 cho ảnh mặt bằng). Slider đứng riêng 1 section full-width (không
   chia cột như "booking_policy"/"timeline") nên ở khung hình rộng, 16:9 cho chiều cao rất lớn — gần
   hết chiều cao màn hình (VD 1424px rộng × 16:9 ≈ 801px cao, gần kín màn hình 900px), không xem được
   trọn section mà không cuộn. Đổi sang khung ngang dẹt hơn (21:9, tỉ lệ y hệt tham khảo carousel ảnh
   lớn của imperia-sensapark.vn/tien-ich-imperia-sensa-park/) giảm chiều cao còn ~2/3, dễ xem trọn hơn
   ở mọi kích thước màn hình mà vẫn giữ ảnh đủ lớn/rõ. */
.gl-slider-section .gl-tab-content__slider .flickity-viewport {
	aspect-ratio: 21 / 9;
}

/* Chấm phân trang mặc định dùng navy đặc (--gl-green, xem ".flickity-page-dots .dot" phía trên) —
   gần như vô hình trên nền xanh đậm (--gl-green-dark) của biến thể "dark", đổi sang trắng cho 2 trạng
   thái (thường/đang chọn phân biệt bằng kích thước, cùng quy ước với bản navy gốc). Biến thể
   "white"/"light" (nền sáng) giữ nguyên màu navy gốc — không cần khai riêng. */
.gl-slider-section--dark .flickity-page-dots .dot,
.gl-slider-section--dark .flickity-page-dots .dot.is-selected {
	border-color: var(--gl-white);
	background: var(--gl-white);
}

.gl-slider-section__footnote {
	margin-top: var(--gl-gap-md);
	text-align: center;
	font-size: 14px;
	font-style: italic;
	color: var(--gl-text);
}

/* Ghi chú nhỏ dưới slider — chữ xám tối (--gl-text) mặc định đọc được trên nền sáng ("white"/"light"),
   vô hình trên nền xanh đậm ("dark") nên cần đổi riêng sang trắng mờ cho biến thể đó. */
.gl-slider-section--dark .gl-slider-section__footnote {
	color: rgba(255, 255, 255, 0.6);
}

/* ===== Ô THÔNG BÁO — khung nét đứt (section-notice-card.php) =====
   Tham khảo khối "Danh mục bàn giao nội thất" của imperia-sensapark.vn/noi-that-imperia-sensa-park/
   — khung nét đứt bo góc, nền kem, icon + tiêu đề + mô tả CĂN GIỮA, bề rộng khung hẹp hơn hẳn
   ".gl-container" (dùng khi 1 khu vực nội dung CHƯA CÓ DỮ LIỆU CHÍNH THỨC). Link trong "nc_desc"
   (VD số hotline) tự động vàng + gạch chân theo rule sẵn có ".gl-rich-content a", không cần khai
   riêng. */
.gl-notice-card__box {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--gl-gap-xl) var(--gl-gap-lg);
	/* KHÔNG dùng "--gl-border-gold" (alpha 0.25) — quá mờ cho viền NÉT ĐỨT trên nền kem, khó nhận ra là
	   có viền (cùng bài học đã gặp với "--gl-border" ở nơi khác, xem ghi chú tương tự trong file này).
	   Alpha cao hơn hẳn (0.55) để nét đứt luôn rõ. */
	border: 1.5px dashed rgba(15, 122, 140, 0.55);
	border-radius: var(--gl-radius-md);
	background: var(--gl-cream);
	text-align: center;
}

.gl-notice-card__icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
	margin: 0 auto var(--gl-gap-sm);
}

.gl-notice-card__heading {
	margin-bottom: var(--gl-gap-sm);
}

.gl-notice-card__desc {
	color: var(--gl-text);
}

.gl-notice-card__desc p {
	margin-bottom: 8px;
}

.gl-notice-card__desc p:last-child {
	margin-bottom: 0;
}

/* ===== THÔNG TIN LIÊN HỆ (section-contact-info.php) =====
   Tham khảo trang Liên Hệ của imperia-sensapark.vn/lien-he/: cột trái là biểu mẫu Contact Form 7;
   cột phải xếp CHỒNG danh sách thông tin liên hệ có icon + ảnh bản đồ + khối "Lưu ý". */
.gl-contact-info__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gl-gap-xl);
	margin-bottom: var(--gl-gap-xl);
	/* "start" (không phải "center" như bản trước) — cột phải giờ khá dài (danh sách thẻ + bản đồ +
	   khối "Lưu ý" cộng dồn), CĂN GIỮA theo chiều cao đó để hở khoảng trống lớn phía trên/dưới card
	   biểu mẫu khi cuộn tới đoạn giữa section. Đổi sang STICKY (".gl-contact-info__form-col" bên
	   dưới) đúng theo yêu cầu — "start" là điều kiện cần để sticky hoạt động đúng như mong đợi (neo
	   theo đúng vị trí tự nhiên ở đỉnh cột, "center" sẽ làm điểm neo ban đầu lệch xuống giữa, sticky
	   tính toán ngưỡng dính sai). */
	align-items: start;
}

/* Sticky khi cuộn cột phải (dài hơn) — "top: 100px" TÁI DÙNG đúng giá trị đã kiểm chứng hoạt động
   thật ở ".gl-product-contact" (sidebar trang chi tiết sản phẩm) và
   ".gl-content-listing-pro__aside" (trang Tin Tức nâng cao) — cùng ngữ cảnh grid thường, không
   overflow/transform tổ tiên nên áp dụng an toàn, tránh lặp lại rủi ro sticky bị vô hiệu từng gặp ở
   nơi khác trong file này (bên trong khung overflow-x cuộn ngang của bảng). */
.gl-contact-info__form-col {
	position: sticky;
	/* "130px" (không phải "100px" như ".gl-product-contact"/".gl-content-listing-pro__aside") — header
	   thật (".gl-nav") cao ~102px và TỰ NÓ cũng sticky ở top:0, "100px" gần như sát đúng mép dưới
	   header, không chừa khoảng hở nào (đo bằng getBoundingClientRect() xác nhận, ảnh chụp thật thấy
	   card dính sát menu) — cộng thêm ~28px (~gap-md) cho khoảng hở dễ nhìn. */
	top: 130px;
}

.gl-contact-info__form-card {
	width: 100%;
	padding: var(--gl-gap-lg);
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
	box-shadow: 0 4px 24px rgba(30, 55, 111, 0.06);
}

.gl-contact-info__form-card .gl-h2 {
	margin-bottom: var(--gl-gap-md);
}

/* Ghi chú bảo mật/đồng ý cuối biểu mẫu (field "ci_form_note", tuỳ chọn) — tham khảo đúng dòng chú
   thích nhỏ dưới nút gửi của imperia-sensapark.vn/lien-he/. */
.gl-contact-info__form-note {
	margin-top: var(--gl-gap-sm);
	font-size: 13px;
	line-height: 1.5;
	color: var(--gl-text);
}

.gl-contact-info__info-col .gl-h2 {
	margin-bottom: var(--gl-gap-lg);
}

.gl-contact-info__list {
	display: flex;
	flex-direction: column;
	/* Giảm từ "gap-md" xuống "gap-sm" — cột này cộng dồn nhiều khối (thẻ mục + bản đồ + khối "Lưu ý")
	   nên dễ dài hơn hẳn cột form bên cạnh, khoảng cách rộng giữa từng thẻ càng làm chênh lệch chiều
	   cao 2 cột thêm rõ (mất cân đối theo ".gl-contact-info__grid { align-items:center }" — cột ngắn
	   hơn/form sẽ trông "lọt thỏm" giữa khoảng trống lớn). */
	gap: var(--gl-gap-sm);
}

/* Mỗi mục là 1 THẺ RIÊNG (không phải 1 dòng trong danh sách chung) — tham khảo ĐÚNG kiểu thẻ bo góc/
   viền/nền trắng của imperia-sensapark.vn/lien-he/ cho từng mục HOTLINE/EMAIL/VỊ TRÍ, TÁI DÙNG nguyên
   công thức thẻ đã có ở ".gl-contact-info__form-card" (viền/bo góc/đổ bóng) cho đồng bộ, không phát
   minh giá trị mới. Padding giảm còn "gap-sm" (thay vì "gap-md") — cùng lý do giảm "gap" ở
   ".gl-contact-info__list", giữ thẻ gọn hơn để cột đỡ dài. */
.gl-contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: var(--gl-gap-sm);
	padding: var(--gl-gap-sm);
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
	box-shadow: 0 4px 24px rgba(30, 55, 111, 0.06);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover tô sáng viền vàng — tham khảo đúng trạng thái hover của imperia-sensapark.vn/lien-he/ (thẻ
   đang trỏ chuột nổi bật hẳn viền vàng so với các thẻ còn lại). */
.gl-contact-info__item:hover {
	border-color: var(--gl-gold);
	box-shadow: 0 4px 24px rgba(15, 122, 140, 0.18);
}

/* Icon bọc khung tròn nền ngà — tham khảo icon nhỏ đặt trong khung tròn của imperia-sensapark.vn/
   lien-he/, thay vì icon trần như ".gl-principle-card__icon" (phù hợp lưới thẻ dày đặc hơn). */
.gl-contact-info__item-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 11px;
	object-fit: contain;
	background: var(--gl-surface-2);
	border-radius: 50%;
}

.gl-contact-info__item-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 4px;
}

.gl-contact-info__item-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gl-gold);
}

.gl-contact-info__item-value {
	font-size: 17px;
	font-weight: 600;
	color: var(--gl-green);
}

.gl-contact-info__map {
	margin-top: var(--gl-gap-sm);
	margin-bottom: var(--gl-gap-sm);
	border-radius: var(--gl-radius-md);
	overflow: hidden;
}

.gl-contact-info__map img {
	display: block;
	width: 100%;
	height: auto;
	cursor: zoom-in;
}

.gl-contact-info__map-caption {
	font-size: 13px;
	font-style: italic;
	color: var(--gl-text);
	text-align: center;
}

/* Khối "Lưu ý" CŨNG là 1 thẻ riêng — tham khảo ĐÚNG imperia-sensapark.vn/lien-he/ (khung "LƯU Ý KHI
   TÌM HIỂU DỰ ÁN" bo góc/viền/nền trắng bọc quanh cả tiêu đề + danh sách check), TÁI DÙNG nguyên công
   thức thẻ đã dùng cho ".gl-contact-info__item"/"__form-card". */
.gl-contact-info__notes {
	margin-top: var(--gl-gap-sm);
	padding: var(--gl-gap-md);
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
	box-shadow: 0 4px 24px rgba(30, 55, 111, 0.06);
}

/* Nối "body.gamuda-landing" để thắng reset "body.gamuda-landing h1,h2,h3,h4 { margin:0 }"
   (gamuda-tokens.css, đặc thù (0,1,0,2) — cao hơn ".gl-contact-info__notes h3" (0,1,0,1) dù sau hơn
   trong file — cùng bài học/cách sửa đã áp dụng ở nhiều chỗ khác trong file này, xem
   ".gl-rich-content h2/h3/h4"). "gap-md" (không phải "gap-sm" như khoảng cách GIỮA các mục check bên
   dưới) — cùng 1 khoảng 16px nhìn CHẬT hơn hẳn ngay dưới tiêu đề chữ to (cỡ chữ/line-height lớn hơn
   nhiều so với 1 dòng mục check thường), cần khoảng lớn hơn để tách rõ tiêu đề khỏi nội dung, cùng
   quy ước đã dùng cho ".gl-contact-info__form-card .gl-h2". */
body.gamuda-landing .gl-contact-info__notes h3 {
	margin-bottom: var(--gl-gap-md);
}

/* CF7 dùng lưới kiểu Bootstrap cũ ("row"/"col-md-6"/"col-sm-12") cho 1 vài cặp field (VD họ tên +
   điện thoại nằm chung 1 hàng nửa-nửa) — ép về full-width từng field 1, tham khảo đúng bố cục biểu
   mẫu của imperia-sensapark.vn/lien-he/ (mọi field xếp dọc, không cặp đôi). Ghi đè NGAY TẠI section
   này (không đổi CSS chung ".gl-cf7") để không ảnh hưởng chỗ khác đang dùng CHÍNH form này với chủ ý
   2 cột (nếu có) — đồng thời áp dụng được cho BẤT KỲ form nào admin chọn qua field "Chọn Form Liên
   Hệ" (ci_form_id), không riêng gì 1 form cụ thể. */
.gl-contact-info__form .row {
	display: block;
	margin: 0;
}

.gl-contact-info__form .row > [class*="col-"] {
	width: 100%;
	max-width: 100%;
	flex: none;
	padding: 0;
}

@media (max-width: 767px) {
	.gl-contact-info__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--gl-gap-lg);
	}

	.gl-contact-info__item {
		overflow-wrap: anywhere;
	}

	/* Tắt sticky khi xếp chồng 1 cột trên mobile — 2 cột đã thành 1 dòng chảy tuần tự, "dính" ở đây
	   sẽ đè card biểu mẫu lên nội dung phía dưới lúc cuộn, không có tác dụng gì (không còn cột dài
	   hơn để "đỡ khoảng trống" nữa). */
	.gl-contact-info__form-col {
		position: static;
	}

	.gl-contact-info__form-card {
		padding: var(--gl-gap-md);
	}
}

/* ===== DANH SÁCH THEO LOẠI NỘI DUNG (NÂNG CAO) (section-content-listing-pro.php) =====
   Tham khảo trang Tin Tức của imperia-sensapark.vn/tin-tuc/: cột trái danh sách DÒNG VĂN BẢN (không
   ảnh, KHÁC ".gl-news-card"/".gl-product-card" của layout "content_listing"), cột phải "Thông Tin Dự
   Án" + "Xem Thêm" STICKY khi cuộn — "top: 100px" TÁI DÙNG đúng giá trị đã kiểm chứng hoạt động thật
   ở ".gl-product-contact" (sidebar trang chi tiết sản phẩm, cũng sticky), tránh lặp lại rủi ro từng
   gặp với 1 chỗ "position:sticky" khác trong file này (bên trong khung overflow-x cuộn ngang của
   bảng — sticky bị vô hiệu do ancestor có overflow, xem ghi chú ở ".table-wrap thead th") — ngữ cảnh
   ở đây (grid thường, không overflow/transform tổ tiên) giống hệt ".gl-product-contact" nên áp dụng
   an toàn. */
.gl-content-listing-pro__grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--gl-gap-xl);
	align-items: start;
}

/* "min-width: 0" — item lưới CSS Grid mặc định "min-width: auto", tức KHÔNG co nhỏ hơn kích thước
   content bên trong (VD tiêu đề dài không ngắt dòng được ở 1 khổ chữ nào đó) — khiến cột "2fr" bị đẩy
   RỘNG HƠN chính khung lưới, tràn ra ngoài màn hình trên mobile (đã xác nhận thật: "innerWidth" 646px
   trong khi "clientWidth" (viewport thật) chỉ 375px — lệch đúng bằng bề rộng dư ra). Đặt "min-width:0"
   cho phép item co lại đúng bằng khung lưới, chữ/ảnh bên trong tự ngắt dòng/co lại bình thường. */
.gl-content-listing-pro__main,
.gl-content-listing-pro__aside {
	min-width: 0;
}

.gl-content-rows {
	display: flex;
	flex-direction: column;
}

.gl-content-row {
	padding: var(--gl-gap-lg) 0;
	border-bottom: 1px solid var(--gl-border);
}

.gl-content-row:first-child {
	padding-top: 0;
}

.gl-content-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* Ảnh đại diện (featured image, tuỳ chọn — bài/sản phẩm không có ảnh thì hiện nguyên dạng dòng văn
   bản như trước, không để hổng khoảng trống). Ảnh FULL-WIDTH nằm TRÊN, tiêu đề/nội dung nằm DƯỚI —
   tham khảo ĐÚNG bố cục danh sách Tin Tức của imperia-sensapark.vn/tin-tuc/ (KHÁC bản trước đặt ảnh
   nhỏ bên trái + chữ bên phải theo hàng ngang) — dùng "data-gl-lazy-bg" TÁI DÙNG đúng cơ chế
   lazy-load nền đã có (glInitLazyBg(), gamuda-home.js), không viết thêm JS riêng. */
.gl-content-row--has-thumb {
	display: block;
}

.gl-content-row__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: var(--gl-gap-md);
	border-radius: var(--gl-radius-md);
	background-color: var(--gl-surface-2);
	background-size: cover;
	background-position: center;
}

.gl-content-row__meta {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--gl-gold);
	margin-bottom: 8px;
}

.gl-content-row__title {
	margin-bottom: 8px;
}

.gl-content-row__title a {
	font-family: var(--gl-font-serif);
	font-size: 26px;
	font-weight: 600;
	color: var(--gl-green);
}

.gl-content-row__title a:hover {
	color: var(--gl-gold);
}

/* Nối "body.gamuda-landing" để thắng reset "body.gamuda-landing p { margin: 0 }" (gamuda-tokens.css,
   đặc thù (0,1,0,2) — cao hơn ".gl-content-row__excerpt" thiếu tiền tố (0,1,0,1) — cùng bài học/cách
   sửa đã áp dụng nhiều lần khác trong file này). */
body.gamuda-landing .gl-content-row__excerpt {
	color: var(--gl-text);
	line-height: 1.6;
	margin-bottom: var(--gl-gap-md);
}

/* Đổi từ link chữ trần sang NÚT VIỀN — dễ nhận biết là 1 hành động bấm được hơn giữa khối văn bản
   dày (ngày/tiêu đề/trích đoạn), tham khảo đúng hình dạng nút bo góc/viền mảnh user gửi làm mẫu.
   Nối "body.gamuda-landing" để thắng reset "body.gamuda-landing a { color: inherit; text-decoration:
   none; }" (gamuda-tokens.css, đặc thù cao hơn — cùng lỗi/cách sửa đã gặp nhiều lần khác trong file
   này, không nối thì chữ bị thừa hưởng màu xám nhạt của đoạn trích thay vì màu navy thương hiệu). */
body.gamuda-landing .gl-content-row__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-sm);
	font-size: 13px;
	font-weight: 700;
	color: var(--gl-green);
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

body.gamuda-landing .gl-content-row__cta:hover {
	border-color: var(--gl-gold);
	color: var(--gl-gold);
	background: rgba(15, 122, 140, 0.06);
}

.gl-content-listing-pro__aside {
	position: sticky;
	/* "130px" (không phải "100px") — header thật (".gl-nav") cao ~102px và TỰ NÓ cũng sticky ở top:0,
	   "100px" gần như sát đúng mép dưới header, không chừa khoảng hở nào — cùng lỗi/cách sửa đã áp
	   dụng cho ".gl-contact-info__form-col" (trang Liên Hệ), xem ghi chú đầy đủ ở đó. */
	top: 130px;
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-lg);
}

.gl-content-listing-pro__card {
	padding: var(--gl-gap-lg);
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
	box-shadow: 0 4px 24px rgba(30, 55, 111, 0.06);
}

.gl-content-listing-pro__card .gl-h3 {
	margin-bottom: var(--gl-gap-md);
}

/* Nối "body.gamuda-landing" để thắng reset "body.gamuda-landing ul { margin: 0 }" (gamuda-tokens.css,
   đặc thù (0,1,0,2) — cao hơn ".gl-content-listing-pro__pi-list" thiếu tiền tố (0,1,0,1) — cùng bài
   học/cách sửa đã áp dụng nhiều lần khác trong file này). */
body.gamuda-landing .gl-content-listing-pro__pi-list {
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-sm);
	margin-bottom: var(--gl-gap-lg);
}

/* "column" (không phải "row" canh 2 đầu như bản trước) — nhãn 1 dòng, giá trị XUỐNG DÒNG riêng bên
   dưới, tránh giá trị dài (VD "Mitsubishi Corp. – Tokyu Land – Phát Đạt") bị ép chung 1 hàng với nhãn
   làm khoảng cách 2 cột không đều/khó đọc giữa các mục. */
.gl-content-listing-pro__pi-list li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: var(--gl-gap-sm);
	border-bottom: 1px solid var(--gl-border);
	font-size: 14px;
}

.gl-content-listing-pro__pi-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.gl-content-listing-pro__pi-label {
	color: var(--gl-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gl-content-listing-pro__pi-value {
	font-weight: 600;
	color: var(--gl-green);
}

.gl-content-listing-pro__pi-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gl-content-listing-pro__pi-btn {
	width: 100%;
	text-align: center;
	justify-content: center;
}

/* ".gl-btn--outline" mặc định viền/chữ TRẮNG (dùng cho nút đè lên ảnh/nền tối, VD Hero) — nút thứ 2
   trở đi trong "Danh sách nút" (clp_pi_buttons) lại nằm trên card NỀN TRẮNG của sidebar này, viền/chữ
   trắng trên nền trắng thành ra GẦN NHƯ VÔ HÌNH (đã xác nhận qua getComputedStyle: color/border đều
   trắng trên background trắng — không phải nút không render, chỉ là không thấy được). Ghi đè riêng
   cho ngữ cảnh này sang màu tối, nối "body.gamuda-landing" để thắng
   "body.gamuda-landing .gl-btn--outline" (gamuda-tokens.css, đặc thù cao hơn nếu không nối). */
body.gamuda-landing .gl-content-listing-pro__pi-btn.gl-btn--outline {
	border-color: var(--gl-border);
	color: var(--gl-green);
}

body.gamuda-landing .gl-content-listing-pro__pi-btn.gl-btn--outline:hover {
	background: var(--gl-surface-2);
	border-color: var(--gl-gold);
	color: var(--gl-gold);
}

.gl-content-listing-pro__xt-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gl-content-listing-pro__xt-list li {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--gl-border);
}

.gl-content-listing-pro__xt-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.gl-content-listing-pro__xt-list a {
	font-size: 14px;
	font-weight: 600;
	color: var(--gl-green);
}

.gl-content-listing-pro__xt-list a:hover {
	color: var(--gl-gold);
}

@media (max-width: 900px) {
	.gl-content-listing-pro__grid {
		grid-template-columns: 1fr;
	}

	.gl-content-listing-pro__aside {
		position: static;
	}
}

/* ===== STAGGER CHO THẺ/DÒNG BÊN TRONG LƯỚI (".gl-reveal" lồng trong section cũng đã ".gl-reveal") =====
   Tham khảo cách imperia-sensapark.vn stagger từng ô lưới lúc cuộn tới: mỗi ô cộng thêm
   "transition-delay" theo chu kỳ 4 ô (80/160/240/320ms), lặp lại nếu lưới có hơn 4 ô. Bản imperia
   đánh dấu thứ tự bằng attribute "data-delay" gắn tay trong PHP; ở đây dùng ":nth-child" thay vì
   thêm attribute vì số ô trong các lưới này là ĐỘNG (ACF repeater/WP_Query, không cố định), nth-child
   tự khớp đúng chu kỳ mà không cần sửa PHP. Chỉ cộng "transition-delay" — KHÔNG đụng tới
   opacity/transform/transition-duration đã khai ở ".gl-reveal" (gamuda-tokens.css), nên section cha
   (cũng ".gl-reveal") và từng thẻ con vẫn cùng dùng 1 cơ chế, chỉ lệch thời điểm bắt đầu.
   Áp dụng cho: ".gl-principle-grid" (Danh Sách Thẻ Nội Dung/Bảng Giá), ".gl-content-rows" (Danh Sách
   Nâng Cao dạng dòng), ".gl-news__grid"/".gl-products__grid" (lưới Tin Tức/Sản Phẩm),
   ".gl-unit-plans__grid" (Mặt Bằng Căn Hộ), ".gl-amenities__grid" (Danh Sách Nổi Bật — Tiện Ích Nổi
   Bật/Giải Thưởng, section-card-grid.php). */
.gl-principle-grid > .gl-reveal:nth-child(4n+1),
.gl-content-rows > .gl-reveal:nth-child(4n+1),
.gl-news__grid > .gl-reveal:nth-child(4n+1),
.gl-products__grid > .gl-reveal:nth-child(4n+1),
.gl-unit-plans__grid > .gl-reveal:nth-child(4n+1),
.gl-amenities__grid > .gl-reveal:nth-child(4n+1) {
	transition-delay: 80ms;
}

.gl-principle-grid > .gl-reveal:nth-child(4n+2),
.gl-content-rows > .gl-reveal:nth-child(4n+2),
.gl-news__grid > .gl-reveal:nth-child(4n+2),
.gl-products__grid > .gl-reveal:nth-child(4n+2),
.gl-unit-plans__grid > .gl-reveal:nth-child(4n+2),
.gl-amenities__grid > .gl-reveal:nth-child(4n+2) {
	transition-delay: 160ms;
}

.gl-principle-grid > .gl-reveal:nth-child(4n+3),
.gl-content-rows > .gl-reveal:nth-child(4n+3),
.gl-news__grid > .gl-reveal:nth-child(4n+3),
.gl-products__grid > .gl-reveal:nth-child(4n+3),
.gl-unit-plans__grid > .gl-reveal:nth-child(4n+3),
.gl-amenities__grid > .gl-reveal:nth-child(4n+3) {
	transition-delay: 240ms;
}

.gl-principle-grid > .gl-reveal:nth-child(4n),
.gl-content-rows > .gl-reveal:nth-child(4n),
.gl-news__grid > .gl-reveal:nth-child(4n),
.gl-products__grid > .gl-reveal:nth-child(4n),
.gl-unit-plans__grid > .gl-reveal:nth-child(4n),
.gl-amenities__grid > .gl-reveal:nth-child(4n) {
	transition-delay: 320ms;
}

/* "gl-unit-card"/"gl-product-card"/"gl-news-card"/"gl-amenity-item" đều đã tự khai
   "transition: box-shadow .2s ease" riêng (hiệu ứng nổi thẻ lúc hover) — cùng độ đặc thù CSS
   (1 class) với ".gl-reveal" nên rule đứng SAU trong file (gamuda-home.css nạp sau gamuda-tokens.css)
   thắng HOÀN TOÀN, xoá mất "transition" opacity/transform của ".gl-reveal" (thuộc tính rút gọn
   "transition" ghi đè toàn bộ, không cộng dồn) — thẻ sẽ hiện/ẩn GIẬT thay vì mờ dần trượt lên. Khai
   lại đúng 2 class cùng lúc (".gl-unit-card.gl-reveal", độ đặc thù 2 class, thắng tuyệt đối bất kể
   thứ tự) để gộp đủ cả 3 transition, không phải chọn 1 trong 2. */
.gl-unit-card.gl-reveal,
.gl-product-card.gl-reveal,
.gl-news-card.gl-reveal,
.gl-amenity-item.gl-reveal {
	transition: opacity 0.7s var(--gl-ease-out), transform 0.7s var(--gl-ease-out), box-shadow 0.2s ease;
}

/* ===== Trải Nghiệm 360° (template-parts/gamuda-home/section-tour-360.php) =====
   [PORT từ theprive.net.vn/oneera.city 2026-09-30, tham khảo tính năng từ 360.monreisaigon.vn]
   Nền xanh đêm + quầng vàng góc trên-trái để khối "trải nghiệm" tách hẳn khỏi các section nền kem.
   Selector 2 class (".gl-tour360 .gl-tour360__x") cho mọi thứ tô màu chữ/link — cần thắng reset
   "body.gamuda-landing a { color: inherit }" (0,1,2) ở gamuda-tokens.css. */
.gl-tour360 {
	background:
		radial-gradient(120% 90% at 0% 0%, rgba(20, 156, 178, 0.18), transparent 55%),
		linear-gradient(135deg, var(--gl-green) 0%, var(--gl-green-dark) 100%);
	color: var(--gl-text-on-dark);
}

.gl-tour360__row {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--gl-gap-2xl);
	align-items: center;
}

.gl-tour360 .gl-tour360__poster {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--gl-radius-lg);
	overflow: hidden;
	background: var(--gl-green-dark);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	isolation: isolate;
	color: var(--gl-white);
}

.gl-tour360 .gl-tour360__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.8s var(--gl-ease-out);
}

.gl-tour360 .gl-tour360__poster:hover .gl-tour360__img,
.gl-tour360 .gl-tour360__poster:focus-visible .gl-tour360__img {
	transform: scale(1.05);
}

.gl-tour360__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 24, 52, 0.08) 35%, rgba(12, 24, 52, 0.72) 100%);
}

.gl-tour360__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 112px;
	height: 112px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	color: var(--gl-white);
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.gl-tour360__badge::after {
	content: '';
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.45);
	animation: gl-tour360-pulse 2.4s ease-out infinite;
}

.gl-tour360 .gl-tour360__poster:hover .gl-tour360__badge {
	background: rgba(20, 156, 178, 0.45);
	border-color: var(--gl-gold-light);
}

@keyframes gl-tour360-pulse {
	0% { transform: scale(0.9); opacity: 0.9; }
	100% { transform: scale(1.35); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.gl-tour360__badge::after { animation: none; }
	.gl-tour360 .gl-tour360__img { transition: none; }
}

.gl-tour360__badge-text {
	font-family: var(--gl-font-serif);
	font-size: 26px;
	line-height: 1;
	letter-spacing: 0.02em;
}

.gl-tour360__poster-label {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 20px;
	font-family: var(--gl-font-sans);
	font-size: var(--gl-fs-btn);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gl-tour360 .gl-section-header {
	margin-bottom: 0;
}

.gl-tour360 .gl-section-header .gl-rich-content,
.gl-tour360 .gl-section-header .gl-rich-content p {
	color: rgba(255, 255, 255, 0.8);
}

.gl-tour360__points-title {
	margin: var(--gl-gap-lg) 0 12px;
	font-family: var(--gl-font-sans);
	font-size: var(--gl-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gl-gold-light);
}

.gl-tour360 .gl-tour360__points {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Flatsome gốc cho mọi <li> margin-bottom .6em — làm khoảng cách dọc giữa các hàng nút lớn hơn "gap". */
.gl-tour360 .gl-tour360__points li {
	margin: 0;
}

.gl-tour360 .gl-tour360__chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--gl-radius-pill);
	background: rgba(255, 255, 255, 0.06);
	color: var(--gl-white);
	font-size: 13px;
	line-height: 1.3;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.gl-tour360 .gl-tour360__chip:hover,
.gl-tour360 .gl-tour360__chip:focus-visible {
	border-color: var(--gl-gold);
	background: rgba(20, 156, 178, 0.22);
	color: var(--gl-white);
}

.gl-tour360__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: var(--gl-gap-lg);
}

body.gamuda-landing .gl-tour360__note {
	margin: 14px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	text-align: left;
	color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 1024px) {
	.gl-tour360__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--gl-gap-xl);
	}
}

@media (max-width: 600px) {
	.gl-tour360 .gl-tour360__poster { aspect-ratio: 4 / 3; }
	.gl-tour360__badge { width: 88px; height: 88px; }
	.gl-tour360__badge svg { width: 32px; height: 32px; }
	.gl-tour360__badge-text { font-size: 21px; }
	.gl-tour360__poster-label { left: 16px; right: 16px; bottom: 14px; font-size: 12px; }
	.gl-tour360__actions .gl-btn { width: 100%; white-space: normal; text-align: center; }
}

/* ===== Trang "Trải Nghiệm 360°" (page-gamuda-360.php + js/gl-tour-360.js) =====
   Khung xem cao = màn hình trừ header dính (--gl-v360-top do JS đo thật). Mọi lớp phủ (tiêu đề,
   công cụ, bảng chọn điểm) nằm tuyệt đối trên khung Marzipano.
   Điểm "image" (phối cảnh tổng thể/bản đồ liên kết vùng/mặt bằng tiện ích — ảnh phẳng lấy từ trang
   tham khảo, không phải 360° thật): root nhận class "is-flat", ẩn khung Marzipano + nút zoom/gợi ý
   xoay, hiện ảnh ".gl-v360__flat" thay vào (xem gl-tour-360.js > showScene()). */
.gl-main--v360 {
	background: var(--gl-green-dark);
}

/* Cụm nút nổi Zalo/Gọi/Đăng ký đè lên bảng chọn điểm — ẩn trên trang 360 (nút "Nhận bảng giá" + gọi
   hotline đã có sẵn trên thanh công cụ của khung xem). */
body.page-template-page-gamuda-360 .gl-quick-contact {
	display: none !important;
}

/* Chế độ NHÚNG tour từ link ngoài (page-gamuda-360.php, field "tour360_embed_url"): header + footer site
   vẫn hiện (gl_v360_is_embed(), functions.php). Khối .gl-v360 (cao = màn hình trừ menu, rule bên dưới)
   chia 2 tầng: dải công cụ mảnh ở trên + iframe chiếm phần còn lại. Dải công cụ cố ý nằm NGOÀI iframe —
   giao diện tour là của bên khác (banner cookie, thanh chọn buổi...) nên không đặt nút đè lên. */
.gl-v360--embed {
	display: flex;
	flex-direction: column;
	background: #0b0d11;
}

.gl-v360-embed__bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 52px;
	padding: 8px 24px;
	background: var(--gl-green-dark);
	color: var(--gl-white);
}

.gl-v360-embed__label {
	min-width: 0;
	overflow: hidden;
	font-family: var(--gl-font-serif);
	font-size: 17px;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.gl-v360-embed__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.gl-v360-embed__frame {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

.gl-v360__embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

body.gamuda-landing .gl-v360-embed__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	font-family: var(--gl-font-sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--gl-white);
	text-decoration: none;
	white-space: nowrap;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--gl-radius-pill);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

body.gamuda-landing .gl-v360-embed__btn:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--gl-white);
}

body.gamuda-landing .gl-v360-embed__btn--cta,
body.gamuda-landing .gl-v360-embed__btn--cta:hover {
	background: var(--gl-gold);
	border-color: var(--gl-gold);
}

body.gamuda-landing .gl-v360-embed__btn--cta:hover {
	filter: brightness(1.08);
}

.gl-v360-embed__seo {
	background: var(--gl-cream);
}

@media (max-width: 767px) {
	.gl-v360-embed__bar {
		justify-content: center;
		min-height: 48px;
		padding: 7px 12px;
	}

	.gl-v360-embed__label {
		display: none;
	}

	.gl-v360-embed__actions {
		gap: 6px;
	}

	body.gamuda-landing .gl-v360-embed__btn {
		padding: 7px 12px;
		font-size: 12px;
	}

	/* Màn hẹp: nút gọi chỉ còn icon (đủ chỗ cho 3 nút trên 1 hàng ở 360px). */
	body.gamuda-landing .gl-v360-embed__btn--tel span {
		display: none;
	}

	body.gamuda-landing .gl-v360-embed__btn--tel {
		padding: 7px 10px;
	}
}

.gl-v360 {
	position: relative;
	height: calc(100vh - var(--gl-v360-top, 100px));
	height: calc(100dvh - var(--gl-v360-top, 100px));
	min-height: 460px;
	overflow: hidden;
	background: var(--gl-green-dark);
	color: var(--gl-white);
	font-family: var(--gl-font-sans);
}

.gl-v360:fullscreen {
	height: 100vh;
}

.gl-v360:-webkit-full-screen {
	height: 100vh;
}

/* "Toàn màn hình giả" (iPhone không có API toàn màn hình cho phần tử thường — xem gl-tour-360.js):
   khung xem phủ kín màn hình, đè header site (z-index 500–601) nhưng vẫn DƯỚI popup đăng ký
   (Magnific Popup 1042–1043) để nút "Nhận bảng giá" mở popup nổi lên trên được. */
.gl-v360.is-fs-fallback {
	position: fixed;
	inset: 0;
	z-index: 1000;
	height: auto;
	min-height: 0;
}

html.gl-v360-lock,
html.gl-v360-lock body {
	overflow: hidden;
	overscroll-behavior: none;
}

.gl-v360__fs-exit,
.gl-v360.is-fs .gl-v360__fs-enter {
	display: none;
}

.gl-v360.is-fs .gl-v360__fs-exit {
	display: block;
}

.gl-v360__pano {
	position: absolute;
	inset: 0;
	cursor: grab;
}

.gl-v360__pano:active {
	cursor: grabbing;
}

/* Ẩn/hiện khung Marzipano (.gl-v360__pano) và khối ảnh phẳng này khi đổi điểm "image" ↔ "pano" do JS
   tự set "style.display" trực tiếp trên ".gl-v360__flat-wrap" (xem showScene() trong gl-tour-360.js)
   — KHÔNG dùng selector con kiểu ".gl-v360.is-flat .gl-v360__flat-wrap" (từng bị bộ gộp/nén CSS của
   LiteSpeed nhập nhằng với 1 rule gốc trùng tên lớp cuối, mất phần gốc ".is-flat", ẩn/hiện sai trên
   mọi điểm — xem đúng bài học cũ, dù lần này đổi tên lớp nên không trực tiếp dính lại).
   [2026-10-01] "object-fit:cover" (trước là "contain", để lộ viền đen 2 bên khi tỉ lệ ảnh khác khung
   xem — user thấy không đẹp, muốn ảnh phủ FULL chiều rộng) + zoom/kéo xem — CÙNG kỹ thuật/CÙNG các lỗi
   đã xử lý như bản đồ "Liên Kết Vùng" (xem "zoomBy"/"clampPan"/"draggable=false" ở buildConnPanel()
   trong gl-tour-360.js, SAO CHÉP riêng 1 bản cho ảnh phẳng vì đổi "src" liên tục giữa nhiều điểm khác
   nhau — Phối Cảnh 1/2/3, Nội Khu, Onsen... — nên không dùng chung state với bản đồ được): 3 lớp
   "wrap" (khung cố định, cắt phần tràn) > "zoom" (nhận transform:translate+scale) > "<img>" thật. */
.gl-v360__flat-wrap {
	position: absolute;
	inset: 0;
	display: none;
	overflow: hidden;
	background: #000;
	touch-action: none;
}

.gl-v360__flat-wrap.is-zoomed-in {
	cursor: grab;
}

.gl-v360__flat-wrap.is-zoomed-in.is-dragging {
	cursor: grabbing;
}

.gl-v360__flat-zoom {
	width: 100%;
	height: 100%;
	transform-origin: 0 0;
}

.gl-v360__flat {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
}

/* --- điểm "utilmap" (Mặt Bằng Tiện Ích — ảnh mặt bằng SẴN SỐ CHÚ THÍCH trong ảnh gốc + thẻ chú giải
   tên góc phải, xem gl-tour-360.js renderUtilLegend()) — PORT từ
   360.monreisaigon.vn/mat-bang-tien-ich (2026-10-02, đọc thẳng dữ liệu điểm/ảnh thật từ bundle JS của
   trang đó). Cùng cấu trúc 3 lớp wrap/zoom/img + cùng cơ chế zoom/kéo (createZoomPan()) như
   ".gl-v360__flat-wrap" ở trên, CHỈ khác "object-fit:contain" (đo đúng trang gốc — mặt bằng cần thấy
   TRỌN VẸN, không cắt góc như ảnh phối cảnh). */
.gl-v360__util-wrap {
	position: absolute;
	inset: 0;
	display: none;
	overflow: hidden;
	background: #0b1b2e;
	touch-action: none;
}

.gl-v360__util-wrap.is-zoomed-in {
	cursor: grab;
}

.gl-v360__util-wrap.is-zoomed-in.is-dragging {
	cursor: grabbing;
}

.gl-v360__util-zoom {
	width: 100%;
	height: 100%;
	transform-origin: 0 0;
}

.gl-v360__util-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	-webkit-user-drag: none;
	user-select: none;
}

/* Thẻ chú giải "Các Tiện Ích" góc phải — cùng kiểu thẻ kính mờ navy đã dùng cho sidebar trái (xem
   ghi chú đo đạc ở ".gl-v360-conn__filters, .gl-v360__subpanel"), chỉ đặt bên PHẢI thay vì trái, đúng
   vị trí bản gốc đặt bảng "Các tiện ích". */
.gl-v360__util-legend {
	position: absolute;
	top: calc(var(--gl-v360-head-h, 92px) + 12px);
	right: 12px;
	z-index: 5;
	display: none;
	flex-direction: column;
	width: 230px;
	max-width: 70%;
	max-height: calc(100% - var(--gl-v360-head-h, 92px) - 24px);
	padding: 14px 14px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--gl-radius-md);
	overflow: hidden;
	background: rgba(12, 24, 52, 0.88);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.25);
}

.gl-v360__util-legend-title {
	flex: 0 0 auto;
	margin: 0 0 10px;
	font-family: var(--gl-font-serif);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	color: var(--gl-white);
}

.gl-v360__util-legend-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0 2px 0 0;
	list-style: none;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.gl-v360__util-legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.gl-v360__util-legend-badge {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #F1E8CE;
	color: #13244d;
	font-family: var(--gl-font-sans);
	font-size: 10px;
	font-weight: 700;
}

.gl-v360__util-legend-badge.is-media {
	background: #B13C10;
	color: var(--gl-white);
}

.gl-v360__util-legend-label {
	font-family: var(--gl-font-sans);
	font-size: 12px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
}

/* [2026-10-02] Mục nào có ảnh thật (chấm cam, "is-media") thêm con trỏ tay + sáng nhẹ khi di chuột —
   báo hiệu bấm được, đúng hành vi đã test trên 360.monreisaigon.vn (bấm mục cam mở lightbox). */
.gl-v360__util-legend-item {
	border-radius: var(--gl-radius-sm);
	transition: background-color 0.15s ease;
}

.gl-v360__util-legend-item.is-clickable {
	cursor: pointer;
}

.gl-v360__util-legend-item:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* Chấm gợn sóng khi di chuột vào 1 mục trong danh sách — đo số đo thật (kích thước/màu/nhịp) từ CSS
   gốc của 360.monreisaigon.vn (".util-point__ripple"/"ripple-out-strong"), chỉ đổi tên lớp cho khớp
   quy ước file này. Luôn nằm trong DOM (dựng 1 lần, xem gl-tour-360.js), ẩn bằng "display:none" lúc
   không hover — tránh dựng/xoá phần tử liên tục mỗi lần đổi mục hover. */
.gl-v360__util-ripple {
	position: absolute;
	display: none;
	width: 24px;
	height: 24px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 6;
}

.gl-v360__util-ripple.is-active {
	display: block;
}

.gl-v360__util-ripple span {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.85);
	background: rgba(30, 55, 111, 0.35);
	animation: gl-v360-util-ripple 1.5s ease-out infinite;
}

.gl-v360__util-ripple span:nth-child(2) {
	animation-delay: 0.4s;
}

.gl-v360__util-ripple span:nth-child(3) {
	animation-delay: 0.8s;
}

@keyframes gl-v360-util-ripple {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}

	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}

/* --- lightbox xem ảnh tiện ích thật (bấm 1 mục cam trong "Các Tiện Ích") --- */
.gl-v360__util-lightbox {
	position: absolute;
	inset: 0;
	z-index: 30;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(8, 16, 36, 0.92);
}

.gl-v360__util-lightbox.is-open {
	display: flex;
}

.gl-v360__util-lightbox-img {
	max-width: calc(100% - 140px);
	max-height: calc(100% - 100px);
	object-fit: contain;
	border-radius: var(--gl-radius-md);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.gl-v360__util-lightbox-caption {
	position: absolute;
	left: 50%;
	bottom: 36px;
	transform: translateX(-50%);
	max-width: calc(100% - 140px);
	padding: 8px 20px;
	border-radius: var(--gl-radius-pill);
	background: rgba(12, 24, 52, 0.82);
	color: var(--gl-white);
	font-family: var(--gl-font-sans);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

body.gamuda-landing .gl-v360__util-lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(12, 24, 52, 0.6);
	color: var(--gl-white);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

body.gamuda-landing .gl-v360__util-lightbox-close:hover {
	background: rgba(20, 156, 178, 0.55);
}

body.gamuda-landing .gl-v360__util-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(12, 24, 52, 0.6);
	color: var(--gl-white);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

body.gamuda-landing .gl-v360__util-lightbox-nav:hover {
	background: rgba(20, 156, 178, 0.55);
}

.gl-v360__util-lightbox-prev {
	left: 20px;
}

.gl-v360__util-lightbox-next {
	right: 20px;
}

@media (max-width: 600px) {
	.gl-v360__util-lightbox-img {
		max-width: calc(100% - 32px);
		max-height: calc(100% - 100px);
	}

	.gl-v360__util-lightbox-caption {
		max-width: calc(100% - 32px);
		font-size: 12px;
		bottom: 24px;
	}

	body.gamuda-landing .gl-v360__util-lightbox-nav {
		width: 36px;
		height: 36px;
		font-size: 20px;
	}

	.gl-v360__util-lightbox-prev {
		left: 6px;
	}

	.gl-v360__util-lightbox-next {
		right: 6px;
	}
}

@media (max-width: 600px) {
	.gl-v360__util-legend {
		top: auto;
		bottom: 12px;
		right: 12px;
		left: 12px;
		width: auto;
		max-width: none;
		max-height: 38vh;
	}
}

/* --- "floorplan" (Mặt Bằng Tầng) — mặt bằng tầng điển hình, mỗi căn 1 đa giác SVG bấm được, xem
   renderFloorPlan() trong gl-tour-360.js. Cùng cấu trúc wrap/zoom/img + "object-fit:contain" như
   ".gl-v360__util-wrap" ở trên. */
.gl-v360__floor-wrap {
	position: absolute;
	inset: 0;
	display: none;
	overflow: hidden;
	background: #0b1b2e;
	touch-action: none;
}

.gl-v360__floor-wrap.is-zoomed-in {
	cursor: grab;
}

.gl-v360__floor-wrap.is-zoomed-in.is-dragging {
	cursor: grabbing;
}

.gl-v360__floor-zoom {
	position: relative;
	width: 100%;
	height: 100%;
	transform-origin: 0 0;
}

.gl-v360__floor-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	-webkit-user-drag: none;
	user-select: none;
}

.gl-v360__floor-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Mỗi căn: màu riêng theo loại (biến "--gl-v360-floor-fill", gán theo "type" lúc dựng path) ở mờ nhạt
   mặc định, hover chuyển hẳn sang màu thương hiệu của TOÀ đang xem (biến "--gl-v360-floor-hover",
   navy cho Onsen/cam đất cho Detox 2 — đo đúng từ trang gốc, không phải tô đậm thêm màu loại căn). */
.gl-v360__floor-unit {
	fill: var(--gl-v360-floor-fill, #D49A54);
	fill-opacity: 0.55;
	stroke: #1e376f;
	stroke-width: 1.5;
	cursor: pointer;
	transition: fill 0.15s ease, fill-opacity 0.15s ease, stroke 0.15s ease;
}

.gl-v360__floor-unit:hover {
	fill: var(--gl-v360-floor-hover, #1e376f);
	fill-opacity: 0.9;
	stroke: #fff;
	stroke-width: 3;
}

/* Thẻ nổi khi di chuột vào 1 căn — mã căn + 2 số diện tích, bám theo đúng vị trí căn đang hover (JS
   tự đặt lại "left/top" mỗi lần "mousemove", xem showFloorTooltip()). */
.gl-v360__floor-tooltip {
	position: absolute;
	display: none;
	transform: translate(-50%, calc(-100% - 14px));
	z-index: 20;
	width: 220px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--gl-radius-md);
	background: rgba(12, 24, 52, 0.9);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.gl-v360__floor-tooltip.is-visible {
	display: block;
}

.gl-v360__floor-tooltip-code {
	margin: 0 0 6px;
	font-family: var(--gl-font-sans);
	font-size: 13px;
	font-weight: 700;
	color: var(--gl-gold-light);
}

.gl-v360__floor-tooltip-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 3px 0;
	font-family: var(--gl-font-sans);
	font-size: 12px;
	color: var(--gl-white);
}

.gl-v360__floor-tooltip-row span {
	color: rgba(255, 255, 255, 0.7);
}

/* "BỘ LỌC" — cùng kiểu thẻ kính mờ navy + cùng lớp nút ".gl-v360-conn__filter" đã có sẵn cho Liên Kết
   Vùng/Mặt Bằng Tiện Ích, đặt ngay dưới khối sidebar trái (không trùng khối chú giải bên phải của Mặt
   Bằng Tiện Ích vì 2 tính năng không hiện cùng lúc). */
.gl-v360__floor-filters {
	position: absolute;
	top: calc(var(--gl-v360-head-h, 92px) + var(--gl-v360-tabs-h, 304px) + 16px);
	left: 12px;
	z-index: 5;
	display: none;
	flex-direction: column;
	width: 208px;
	max-width: 70%;
	max-height: calc(100% - var(--gl-v360-head-h, 92px) - var(--gl-v360-tabs-h, 304px) - 32px);
	padding: 14px 14px 0;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--gl-radius-md);
	overflow: hidden;
	background: rgba(12, 24, 52, 0.88);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.25);
}

.gl-v360__floor-filters-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* --- màn chi tiết loại căn (bấm 1 căn trên mặt bằng) — nền mờ chính khung mặt bằng đang đứng sau
   (không cần ảnh nền riêng, "backdrop-filter" tự làm mờ bất kỳ thứ gì đang hiện phía sau), ảnh nội
   thất lớn giữa khung + thẻ thông tin + nút "Trở Về" góc dưới trái, đúng bố cục bản gốc. */
.gl-v360__floor-detail {
	--gl-v360-floor-brand: #1e376f;
	position: absolute;
	inset: 0;
	z-index: 35;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(8, 16, 36, 0.45);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}

.gl-v360__floor-detail.is-open {
	display: flex;
}

.gl-v360__floor-detail-stage {
	width: calc(100% - 320px);
	height: calc(100% - 48px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.gl-v360__floor-detail-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--gl-radius-md);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

body.gamuda-landing .gl-v360__floor-detail-back {
	position: absolute;
	bottom: 24px;
	left: 24px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 12px 22px;
	border: 1px solid var(--gl-v360-floor-brand);
	border-radius: var(--gl-radius-sm);
	background: var(--gl-white);
	color: var(--gl-v360-floor-brand);
	font-family: var(--gl-font-sans);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	transition: background-color 0.15s ease, color 0.15s ease;
}

body.gamuda-landing .gl-v360__floor-detail-back:hover {
	background: var(--gl-v360-floor-brand);
	color: var(--gl-white);
}

.gl-v360__floor-detail-card {
	position: absolute;
	bottom: 76px;
	left: 24px;
	z-index: 1;
	width: 270px;
	max-width: calc(100% - 48px);
	border-radius: var(--gl-radius-md);
	overflow: hidden;
	background: var(--gl-v360-floor-brand);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.gl-v360__floor-detail-title {
	padding: 16px;
	text-align: center;
	font-family: var(--gl-font-serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--gl-gold-light);
}

.gl-v360__floor-detail-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-family: var(--gl-font-sans);
	font-size: 12px;
	color: var(--gl-white);
}

.gl-v360__floor-detail-row span:first-child {
	color: rgba(255, 255, 255, 0.85);
}

.gl-v360__floor-detail-row span:last-child {
	font-weight: 700;
}

.gl-v360__floor-detail-position {
	padding: 10px 16px 16px;
}

.gl-v360__floor-detail-position img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 600px) {
	.gl-v360__floor-filters {
		top: auto;
		bottom: 12px;
		right: 12px;
		left: 12px;
		width: auto;
		max-width: none;
		max-height: 30vh;
	}

	.gl-v360__floor-tooltip {
		width: 180px;
		padding: 10px 12px;
	}

	.gl-v360__floor-detail-stage {
		width: 100%;
		height: calc(100% - 220px);
	}

	.gl-v360__floor-detail-card {
		bottom: 76px;
		left: 12px;
		right: 12px;
		width: auto;
		max-width: none;
	}

	body.gamuda-landing .gl-v360__floor-detail-back {
		bottom: 16px;
		left: 12px;
		padding: 10px 18px;
	}
}

/* --- điểm điều hướng trong pano (mũi tên bấm được, chỉ hiện ở các điểm "pano" có khai "nav" trong
   tour.json — hiện chỉ nhóm "amo", xem gl-tour-360.js renderNavHotspots()). Marzipano tự gán
   "transform: translateX/Y/Z(...)" THẲNG vào phần tử gốc (căn theo góc trái-trên, không tự căn giữa)
   nên gốc để 0x0, mọi hình/chữ nằm trong ".gl-v360__nav-hotspot-inner" tự căn giữa bằng
   "translate(-50%,-50%)" riêng — xem JS. */
.gl-v360__nav-hotspot {
	width: 0;
	height: 0;
}

.gl-v360__nav-hotspot-inner {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

/* Vòng tròn bẹt (ellipse) nằm NGANG trên sàn — phỏng theo đúng kiểu chấm điều hướng của
   360.monreisaigon.vn (vòng trắng mảnh nằm trên sàn + nhãn phòng đích LUÔN hiện phía trên, không
   phải chờ di chuột mới hiện như bản đầu). */
.gl-v360__nav-hotspot-ring {
	position: relative;
	width: 72px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: 3px solid rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45), inset 0 0 16px rgba(255, 255, 255, 0.18);
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	animation: gl-v360-nav-pulse 2.4s ease-in-out infinite;
}

.gl-v360__nav-hotspot-label {
	padding: 5px 14px;
	border-radius: var(--gl-radius-pill);
	background: rgba(12, 24, 52, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: var(--gl-white);
	font-family: var(--gl-font-sans);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.gl-v360__nav-hotspot-inner:hover .gl-v360__nav-hotspot-ring {
	background: rgba(20, 156, 178, 0.3);
	border-color: var(--gl-gold-light);
	transform: scale(1.1);
	animation-play-state: paused;
}

.gl-v360__nav-hotspot-inner:hover .gl-v360__nav-hotspot-label {
	background: rgba(20, 156, 178, 0.92);
}

@keyframes gl-v360-nav-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.15); opacity: 0.7; }
}

/* --- bản đồ mini mặt bằng (góc phải trên, chỉ nhóm có khai "minimap" trong tour.json — hiện chỉ
   "amo" — VÀ đang ở điểm "pano" thật, xem renderMinimap()). Đặt NGAY DƯỚI cụm nút góc phải trên
   (".gl-v360__tools") bằng "--gl-v360-head-h" (đo chiều cao thật của ".gl-v360__top", có sẵn — xem
   fitHeight()), không hardcode 1 số px cố định. */
/* [2026-10-03] User: "cho ảnh overview căn phòng to hơn" — tăng từ 180px lên 260px (gần đúng tỉ lệ
   khung mini-map của chính 360.monreisaigon.vn, đo qua ảnh chụp user gửi), các con số bên trong
   (chấm/quạt/chữ) tăng theo tỉ lệ tương ứng ở các khối dưới đây để không bị "lọt thỏm" trong khung
   lớn hơn. */
.gl-v360__minimap {
	position: absolute;
	top: calc(var(--gl-v360-head-h, 92px) + 8px);
	right: 16px;
	z-index: 4;
	display: none;
	width: 260px;
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--gl-radius-md);
	background: rgba(12, 24, 52, 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.gl-v360__minimap-title {
	margin: 0 0 10px;
	font-family: var(--gl-font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	color: var(--gl-gold-light);
}

.gl-v360__minimap-frame {
	position: relative;
	width: 100%;
	border-radius: calc(var(--gl-radius-md) - 4px);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.95);
}

.gl-v360__minimap-img {
	display: block;
	width: 100%;
	height: auto;
}

.gl-v360__minimap-dots {
	position: absolute;
	inset: 0;
}

.gl-v360__minimap-dot {
	position: absolute;
	z-index: 1;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	padding: 0;
	border: 2px solid #1e376f;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.gl-v360__minimap-dot:hover {
	transform: scale(1.25);
}

.gl-v360__minimap-dot.is-active {
	z-index: 2;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	background: #1e376f;
	box-shadow: 0 0 0 5px rgba(30, 55, 111, 0.28);
}

/* Quạt hướng nhìn hiện tại — toả từ chấm phòng đang xem, xoay sống theo "view.yaw()" thật (kéo pano
   tới đâu quạt xoay theo tới đó, xem updateMinimapFan()). 80° ứng với FOV ~86° của pano (field FOV
   1.5 rad khai trong tour.json), 0deg = thẳng lên trong hệ toạ độ "conic-gradient" của CSS rồi JS
   cộng dồn "rotate()" theo yaw — xem chú thích đầy đủ ở updateMinimapFan() (JS) vì sao hướng "lên"
   ban đầu là quy ước, không phải la bàn thật của ảnh mặt bằng. */
.gl-v360__minimap-dot-fan {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -1;
	width: 88px;
	height: 88px;
	margin: 0;
	border-radius: 50%;
	background: conic-gradient(from -40deg at 50% 50%, rgba(30, 55, 111, 0.55) 0deg, rgba(30, 55, 111, 0.55) 80deg, rgba(30, 55, 111, 0) 80deg, rgba(30, 55, 111, 0) 360deg);
	transform: translate(-50%, -50%) rotate(0deg);
	pointer-events: none;
	display: none;
}

.gl-v360__minimap-dot.is-active .gl-v360__minimap-dot-fan {
	display: block;
}

@media (max-width: 600px) {
	/* [2026-10-02] 2 dòng cũ ở đây (ring 38×38 vuông + ẩn hẳn nhãn) còn sót lại từ BẢN NHÁP ĐẦU của
	   điểm điều hướng (mũi tên chevron tròn, nhãn chỉ hiện khi hover — không hover được trên cảm ứng
	   nên ẩn hẳn hợp lý lúc đó). Sau khi đổi hẳn sang kiểu vòng bẹt nằm sàn + nhãn LUÔN HIỆN (giống
	   bản gốc 360.monreisaigon.vn, xem khối ".gl-v360__nav-hotspot-ring/-label" phía trên) mà QUÊN sửa
	   theo ở đây — ring vẫn ép về hình vuông (sai dáng bẹt) và nhãn bị ẩn mất trên mobile (user cầm
	   điện thoại sẽ thấy vòng tròn KHÔNG CÓ CHỮ, không biết dẫn tới phòng nào, thụt lùi hẳn so với
	   ngay cả bản nháp đầu). Thu nhỏ TỈ LỆ ĐÚNG hình bẹt gốc (72×26 → 52×19) + giữ nhãn hiện, chỉ bớt
	   cỡ chữ cho vừa màn hẹp. */
	.gl-v360__nav-hotspot-ring {
		width: 52px;
		height: 19px;
	}

	.gl-v360__nav-hotspot-label {
		padding: 4px 10px;
		font-size: 11px;
	}

	.gl-v360__minimap {
		top: calc(var(--gl-v360-head-h, 84px) + 6px);
		right: 10px;
		width: 128px;
		padding: 8px;
	}

	.gl-v360__minimap-title {
		font-size: 10px;
		margin-bottom: 6px;
	}

	.gl-v360__minimap-dot {
		width: 11px;
		height: 11px;
		margin: -6px 0 0 -6px;
	}

	.gl-v360__minimap-dot.is-active {
		width: 13px;
		height: 13px;
		margin: -7px 0 0 -7px;
	}

	.gl-v360__minimap-dot-fan {
		width: 46px;
		height: 46px;
	}
}

/* --- điểm "connectivity" (Liên Kết Vùng — bản đồ + chấm ghim, xem gl-tour-360.js) ---
   [PORT từ 360.monreisaigon.vn/lien-ket-vung 2026-10-01, bản 2 sau khi user xem DevTools bản gốc]
   Phỏng theo đúng hiệu ứng bản gốc: bấm 1 chấm trên bản đồ (hoặc nút lọc) → vẽ đường nối từ chấm dự
   án tới điểm đó + hiện thẻ chi tiết. Ảnh phủ kín TOÀN KHUNG XEM (object-fit:cover, giống cách
   ".gl-v360__pano"/".gl-v360__flat" phủ kín) thay vì đóng khung nhỏ 16:9 ở giữa — bản gốc dùng ảnh
   cố định 1920×1080 + transform pan/zoom để lấp đầy màn hình; mình không dựng hẳn cơ chế kéo/zoom
   (vượt phạm vi yêu cầu), nhưng "cover" cho đúng cảm giác "phủ kín" mà không cần kéo-thả. Ảnh bị
   CẮT BỚT theo tỉ lệ khung xem thật (object-fit:cover) nên toạ độ %x/%y gốc (tour.json) KHÔNG dùng
   thẳng được nữa — JS (layoutConnPins() trong gl-tour-360.js) tính lại đúng vị trí hiện trên màn
   hình dựa theo đúng công thức "cover" (so khớp tỉ lệ khung xem/ảnh thật), chạy lại mỗi khi đổi cỡ
   màn hình. Dải nút lọc + thẻ chi tiết nổi TRÊN ảnh (position:absolute), không chiếm chỗ bố cục. */
.gl-v360__conn {
	position: absolute;
	inset: 0;
	display: none;
	background: var(--gl-green-dark);
	overflow: hidden;
}

.gl-v360-conn__empty {
	margin: 80px 0 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
}

/* [2026-10-01] Thẻ bo tròn ĐỦ 4 GÓC, thụt lề khỏi mép màn hình — HÌNH KHỐI đo trực tiếp từ khối
   menu/panel con ở 360.monreisaigon.vn (rounded-xl/thụt lề/nút "▲" thu gọn). MÀU NỀN/CHỮ dùng lại
   ĐÚNG bộ màu tối (navy kính mờ) đã có sẵn ở thẻ chi tiết điểm tiện ích (".gl-v360-conn__card" —
   cùng "rgba(12, 24, 52,.82-.88)") theo đúng yêu cầu "màu nền giống nội dung điểm tiện ích" — bản gốc
   dùng nền kính SÁNG nhưng không hợp tông tối của trang này nên CHỈ lấy hình khối, không lấy màu.
   Dùng CHUNG 1 class cho CẢ "Liên Kết Vùng" (".gl-v360-conn__filters", gắn bởi buildConnPanel) LẪN
   4 nhóm còn lại (".gl-v360__subpanel", gắn bởi showGroupPanel). "overflow:hidden" để góc bo cắt gọn
   luôn nút "▲" thu gọn bên dưới (tràn hết chiều rộng thẻ bằng margin âm, xem ".gl-v360__collapse")
   — danh sách điểm tự cuộn RIÊNG (".gl-v360__sublist"), không cuộn cả thẻ, để nút "▲" luôn cố định ở
   đáy thẻ. */
.gl-v360-conn__filters,
.gl-v360__subpanel {
	position: absolute;
	top: calc(var(--gl-v360-head-h, 92px) + var(--gl-v360-tabs-h, 304px) + 16px);
	left: 12px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	width: 208px;
	max-width: 70%;
	max-height: calc(100% - var(--gl-v360-head-h, 92px) - var(--gl-v360-tabs-h, 304px) - 32px);
	padding: 14px 14px 0;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--gl-radius-md);
	overflow: hidden;
	background: rgba(12, 24, 52, 0.88);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.25);
}

/* Thu gọn — ẩn mọi con TRỪ nút "▲" (chính nó đổi hướng xuống qua JS, xem wireCollapse()). */
.gl-v360-conn__filters.is-collapsed > *:not(.gl-v360__collapse),
.gl-v360__subpanel.is-collapsed > *:not(.gl-v360__collapse) {
	display: none;
}

/* Dải nút chọn khu vực (Nội Khu/Onsen/Detox 2, Mặt Bằng Tiện Ích/Tầng — group.zones trong tour.json)
   — nằm NGANG trên cùng panel con, có gạch chân mảnh tách khỏi danh sách điểm bên dưới. */
.gl-v360__subpanel-zones {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 8px;
	padding: 0 0 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.gl-v360__subpanel-zones .gl-v360-conn__filter {
	flex: 1 1 auto;
	text-align: center;
}

/* Danh sách điểm của nhóm/khu vực đang chọn — tự cuộn riêng khi dài (thẻ cha chỉ "overflow:hidden"
   để bo góc, không cuộn — nếu cuộn luôn cả thẻ thì nút "▲" cuối thẻ bị cuộn mất theo). */
.gl-v360__sublist {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 42vh;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.gl-v360__subpanel-empty {
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
}

.gl-v360-conn__filters-title {
	margin: 0 0 6px;
	font-family: var(--gl-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: left;
	color: var(--gl-gold-light);
}

body.gamuda-landing .gl-v360-conn__filter {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	min-height: 32px;
	margin: 0 0 2px;
	padding: 9px 12px;
	border: 1px solid transparent;
	border-radius: var(--gl-radius-sm);
	background: transparent;
	color: rgba(255, 255, 255, 0.75);
	font-family: var(--gl-font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.gamuda-landing .gl-v360-conn__filter:hover {
	color: var(--gl-white);
	border-color: rgba(255, 255, 255, 0.3);
}

body.gamuda-landing .gl-v360-conn__filter.is-active {
	background: var(--gl-white);
	border-color: var(--gl-white);
	color: var(--gl-green);
}

/* Logo nhỏ đầu khối menu chính — đúng vị trí "monrei SAIGON" ở 360.monreisaigon.vn. Logo gốc là
   wordmark MÀU TỐI (dùng cho header nền sáng) — "brightness(0) invert(1)" ép thành silhouette trắng
   tuyền để đọc được trên nền navy tối của thẻ này (không cần ảnh logo riêng cho nền tối). */
.gl-v360__brand {
	display: flex;
	justify-content: center;
	padding-bottom: 10px;
	margin-bottom: 2px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.gl-v360__brand-img {
	max-width: 120px;
	height: auto;
	filter: brightness(0) invert(1);
}

/* Nút "▲"/"▼" thu gọn cuối mỗi thẻ — tràn hết chiều rộng thẻ (margin âm = padding ngang thẻ cha),
   thẻ cha "overflow:hidden" tự cắt gọn 2 góc dưới theo đúng bo tròn chung. Dải sáng mờ + chữ vàng
   nhạt (cùng tông với nhãn "TIỆN ÍCH"/chữ hiệu ứng khác trên nền tối) thay vì 1 màu đặc, để không
   tạo cạnh cứng giữa thân thẻ và thanh thu gọn. */
body.gamuda-landing .gl-v360__collapse {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	margin: 10px -14px 0;
	padding: 6px 0;
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.08);
	color: var(--gl-gold-light);
	font-size: 10px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

body.gamuda-landing .gl-v360__collapse:hover {
	background: rgba(255, 255, 255, 0.15);
}

/* Khung bản đồ phủ kín TOÀN BỘ ".gl-v360__conn" (kể cả phần dưới dải nút lọc/thanh tiêu đề — các
   lớp đó đè lên trên bằng z-index, giống cách ".gl-v360__top" đè lên ".gl-v360__pano"). */
.gl-v360-conn__map-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	/* Tắt cử chỉ chạm MẶC ĐỊNH của trình duyệt (cuộn trang/zoom trang bằng 2 ngón...) trên vùng này —
	   để trình duyệt không "giành" sự kiện con trỏ trước khi JS kéo/zoom tự viết (gl-tour-360.js) kịp
	   xử lý, nhất là trên di động/màn cảm ứng. */
	touch-action: none;
}

/* Lớp nội dung bản đồ (ảnh + pin + đường nối) nhận transform:translate()+scale() khi zoom/kéo (xem
   gl-tour-360.js, đoạn zoom/pan trong buildConnPanel()).
   [2026-10-01] CỐ TÌNH KHÔNG dùng "will-change:transform" (đã thử, bản đầu có) — tự so sánh trực
   tiếp CÓ/KHÔNG will-change ở cùng 1 mức zoom: chữ trên ảnh bản đồ ("SÔNG SÀI GÒN", tên cầu...) rõ
   rệt NÉT HƠN HẲN khi bỏ thuộc tính này. Lý do: "will-change" gợi ý trình duyệt dựng layer riêng cho
   phần tử — ở nhiều engine, layer đó được RASTER HOÁ 1 LẦN ở kích thước GỐC (trước khi scale) rồi chỉ
   phóng to BITMAP đã raster đó mỗi lần đổi transform (tối ưu tốc độ khi kéo/zoom liên tục), thay vì
   vẽ lại đúng độ nét từ ảnh nguồn ở mức zoom mới — cái giá đánh đổi là chính ảnh/chữ bị mờ hẳn đi dù
   ảnh gốc (7680×4320) THỪA độ phân giải. Chấp nhận đánh đổi ngược lại: có thể hơi giật nhẹ trên máy
   rất yếu khi kéo/zoom liên tục, nhưng đổi lại ảnh/chữ luôn nét đúng mức zoom thật — ưu tiên đúng yêu
   cầu user (rõ nét hơn mượt). */
.gl-v360-conn__zoom-layer {
	position: absolute;
	inset: 0;
	transform-origin: 0 0;
}

/* Con trỏ: tay nắm khi đã zoom (> 1x, kéo được) — "grab"/"grabbing" chuẩn, không cần vẽ icon riêng.
   Dưới 1x giữ con trỏ mặc định (kéo không có tác dụng gì, tránh hiểu lầm). */
.gl-v360-conn__map-wrap.is-zoomed-in {
	cursor: grab;
}

.gl-v360-conn__map-wrap.is-zoomed-in.is-dragging {
	cursor: grabbing;
}


.gl-v360-conn__map-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	/* Lớp CSS thứ 2 (cùng "mapImg.draggable=false" đặt trong JS) chặn hành vi "kéo ảnh" gốc của trình
	   duyệt trên <img> — "-webkit-user-drag" là thuộc tính riêng của WebKit/Blink (Chrome/Safari/Edge),
	   không có bản chuẩn tương đương ở trình duyệt khác nhưng "draggable=false" (JS) đã đủ bao quát. */
	-webkit-user-drag: none;
	user-select: none;
}

/* Lớp phủ tối khi đã chọn 1 điểm — PORT ĐÚNG giá trị từ bản gốc (div "bg-black/60", đen 60%) để
   đường nối trắng + pin (z-index cao hơn, không bị tối theo) nổi bật lên trên ảnh bản đồ nhiều màu. */
.gl-v360-conn__dim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.gl-v360-conn__dim.is-visible {
	opacity: 1;
}

/* Đường nối từ chấm dự án tới điểm đang chọn — dữ liệu "path" trong tour.json (lệnh SVG M/L/C, TRÍCH
   TRỰC TIẾP từ 360.monreisaigon.vn cho các điểm gần, xem buildPxD() trong gl-tour-360.js) nên đi ĐÚNG
   khúc cua QL13/Vành Đai 3 thật, chỉ hiện khi đã bấm 1 điểm. 2 lớp <path> chồng nhau phỏng theo đúng
   hiệu ứng "đường sáng" ở bản gốc: lớp dưới to mờ (route-glow, "blur" giả bằng stroke to + opacity
   thấp — không dùng SVG <filter> để tránh chi phí render lại mỗi lần đổi điểm) làm quầng sáng, lớp
   trên nét rõ màu trắng. Set lại "d" mỗi lần đổi điểm nên không transition được mượt giữa 2 hình dạng
   khác nhau — chỉ fade "opacity" khi lần đầu hiện. */
.gl-v360-conn__route {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.gl-v360-conn__route.is-visible {
	opacity: 1;
}

.gl-v360-conn__route path {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gl-v360-conn__route-glow {
	stroke: var(--gl-white);
	stroke-width: 9;
	opacity: 0.35;
}

.gl-v360-conn__route-line {
	stroke: var(--gl-white);
	stroke-width: 3;
}

/* Chấm ghim — hình tròn có icon riêng từng nhóm (CONN_ICONS, gl-tour-360.js), neo ĐÚNG TÂM vào toạ
   độ % (kiểu chấm icon-tròn, khác pin-giọt-nước truyền thống — dễ nhận nhóm bằng mắt không cần đọc
   chữ, giống cách bản gốc 360.monreisaigon.vn phân biệt tiện ích). [2026-10-01] 29 điểm (đủ bộ như
   bản gốc) khiến vài cụm điểm THẬT SỰ gần nhau trên bản đồ (toạ độ trích thật, không phải lỗi ước
   lượng) — giảm cỡ chấm 30px→22px để đỡ chồng mí nhau, phần còn lại dựa vào tính năng zoom (con lăn
   chuột) để xem rõ từng điểm trong cụm đông. */
/* Cỡ 17px (không phải 22px như bản trước) — đo THẬT trên bản gốc (getBoundingClientRect của chính
   chấm ghim, ".brightEffectLocation" trong SVG của họ, ở khung bản đồ cỡ tương đương site mình): chỉ
   16×16px. Toạ độ đặt điểm vốn đã đúng (trích thật, xem entry "vòng mở rộng Liên Kết Vùng") — cụm
   điểm NHÌN như sát nhau hơn bản gốc chỉ vì chấm ghim của mình to hơn hẳn, không phải do toạ độ sai. */
.gl-v360-conn__pin {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	margin: 0;
	padding: 3.5px;
	transform: translate(-50%, -50%);
	border: 1.5px solid var(--gl-white);
	border-radius: 50%;
	background: var(--gl-gold);
	color: var(--gl-green-dark);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.gl-v360-conn__pin svg {
	width: 100%;
	height: 100%;
}

/* Hiệu ứng gợn sóng (ripple/pulse) toả ra từ từng chấm ghim tiện ích — PORT từ bản gốc (SVG
   "pulse-ring" quanh mỗi marker, xem ghi chú trích xuất DOM trong project memory) — tự chạy liên
   tục, KHÔNG áp cho pin dự án (".gl-v360-conn__pin--project", xem rule riêng bên dưới loại trừ qua
   ":not()") để tránh rối mắt ở đúng điểm đã nổi bật sẵn bằng cỡ/màu riêng. */
.gl-v360-conn__pin:not(.gl-v360-conn__pin--project)::after {
	content: '';
	position: absolute;
	inset: -2px;
	border: 2px solid var(--gl-gold);
	border-radius: 50%;
	opacity: 0.7;
	pointer-events: none;
	animation: gl-v360-pin-pulse 2.4s ease-out infinite;
}

@keyframes gl-v360-pin-pulse {
	0% { transform: scale(1); opacity: 0.6; }
	100% { transform: scale(2.3); opacity: 0; }
}

/* 2 vòng tròn nét đứt quanh pin dự án (trang trí, xem ghi chú JS) — bán kính CỐ ĐỊNH theo px (không
   đổi theo cỡ màn hình) vì nằm trong "zoomLayer" nên tự phóng to/nhỏ ĐÚNG TỈ LỆ cùng bản đồ khi zoom
   bằng con lăn chuột, không cần tính lại. */
.gl-v360-conn__ring {
	position: absolute;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1.5px dashed rgba(255, 255, 255, 0.55);
	pointer-events: none;
}

.gl-v360-conn__ring--inner {
	width: 420px;
	height: 420px;
}

.gl-v360-conn__ring--outer {
	width: 780px;
	height: 780px;
	border-color: rgba(255, 255, 255, 0.32);
}

/* Tên điểm hiện sẵn ngay dưới chấm ghim (gl-tour-360.js > buildConnPanel, span DOM text thật — zoom
   không bao giờ vỡ nét, khác ảnh bản đồ nền — nằm trong "zoomLayer" nên TỰ phóng to cùng bản đồ khi
   zoom, vẫn nét vì là chữ thật, không phải ảnh). "text-shadow" 4 hướng thay viền thật (outline-text)
   vì Safari/một số engine không hỗ trợ "-webkit-text-stroke" mượt — đủ đọc được trên cả nền sáng
   (bình thường) lẫn nền tối (đã chọn 1 điểm, xem ".gl-v360-conn__dim").
   [2026-10-01] MẶC ĐỊNH ẨN, CHỈ hiện khi điểm đó đang được CHỌN (".is-active") — bản trước còn hiện
   thêm theo mức zoom/di chuột nhưng user thấy rối mắt khi 25 điểm cùng hiện tên lúc xem toàn cảnh,
   nên bỏ 2 điều kiện đó, chỉ còn đúng 1: bấm vào mới hiện tên, không thì chỉ thấy icon. */
.gl-v360-conn__pin-label {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 2px;
	font-family: var(--gl-font-sans);
	font-size: 9.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--gl-white);
	text-shadow: 0 0 3px rgba(19, 36, 77, 0.9), 0 0 3px rgba(19, 36, 77, 0.9), 0 1px 2px rgba(19, 36, 77, 0.9);
	white-space: nowrap;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.gl-v360-conn__pin.is-active .gl-v360-conn__pin-label {
	opacity: 1;
	font-size: 10.5px;
	font-weight: 700;
}

.gl-v360-conn__pin:hover {
	background: var(--gl-gold-bright);
}

.gl-v360-conn__pin.is-active {
	/* z-index CAO HƠN pin thường (2) — mặc định các pin xếp lớp theo ĐÚNG THỨ TỰ DOM (pin nào đứng
	   sau trong tour.json thì tự nằm TRÊN pin đứng trước, không liên quan gì tới đang chọn hay không)
	   nên tên của pin ĐANG CHỌN có thể bị 1 pin khác (đứng sau, nằm gần) che mất 1 phần — đưa lên
	   z-index riêng để LUÔN nổi trên mọi pin khác bất kể thứ tự DOM. "3" (không cao hơn nữa) để vẫn
	   thấp hơn thẻ chi tiết (z-index:4, xem .gl-v360-conn__card) — tránh pin đang chọn đè lên thẻ nếu
	   2 bên tình cờ chồng nhau trên màn hình. */
	z-index: 3;
	background: var(--gl-white);
	color: var(--gl-green);
	transform: translate(-50%, -50%) scale(1.25);
	box-shadow: 0 0 0 4px rgba(168, 225, 234, 0.45), 0 2px 8px rgba(0, 0, 0, 0.5);
}

.gl-v360-conn__pin--project {
	z-index: 3;
	width: 38px;
	height: 38px;
	padding: 9px;
	border-color: var(--gl-gold-light);
	background: var(--gl-green);
	color: var(--gl-gold-light);
	cursor: default;
	box-shadow: 0 0 0 6px rgba(168, 225, 234, 0.3), 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Thẻ chi tiết — nổi trên bản đồ, NGAY BÊN PHẢI 2 sidebar trái (menu nhóm + bộ lọc, nay đều dính lề
   trái) để không đè lên nhau, chỉ hiện sau khi bấm 1 điểm. */
.gl-v360-conn__card {
	position: absolute;
	top: var(--gl-v360-head-h, 92px);
	left: 236px;
	z-index: 4;
	width: min(300px, calc(100% - 252px));
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--gl-radius-md);
	background: rgba(12, 24, 52, 0.82);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.gl-v360-conn__card.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.gl-v360-conn__card-time {
	display: inline-block;
	margin-bottom: 4px;
	font-family: var(--gl-font-sans);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--gl-gold-light);
}

.gl-v360-conn__card-label {
	margin: 0 0 4px;
	font-family: var(--gl-font-serif);
	font-size: 17px;
	line-height: 1.3;
	color: var(--gl-white);
}

.gl-v360-conn__card-desc {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 600px) {
	/* Màn hẹp không đủ chỗ đặt thẻ chi tiết BÊN CẠNH khối menu — đẩy xuống DƯỚI thay vì bên phải.
	   "top" dùng "--gl-v360-tabs-h" (đo THẬT chiều cao khối menu — xem fitHeight() trong
	   gl-tour-360.js, gọi lại khi đổi điểm/resize) để luôn đúng dù khối menu cao thấp khác nhau. */
	.gl-v360__tabs,
	.gl-v360-conn__filters,
	.gl-v360__subpanel {
		width: 180px;
	}

	/* [2026-10-02] Danh sách dài (VD "Căn AMO" 8 phòng) KHÔNG đủ chỗ trong "max-height" tính theo
	   "--gl-v360-head-h"/"--gl-v360-tabs-h" trên màn hẹp (2 biến này đều cao hơn hẳn trên mobile sau
	   khi xếp chồng thanh trên cùng) — "overflow:hidden" mặc định (dùng chung với bản desktop, nơi đủ
	   chỗ) ÂM THẦM CẮT MẤT phần lớn danh sách (đo thật: "Căn AMO" chỉ còn 157px/411px nội dung thấy
	   được — 6/8 phòng + nút "▲" hoàn toàn không bấm được, không phải chỉ xấu mà THỰC SỰ MẤT CHỨC
	   NĂNG). Đổi riêng trên mobile thành cuộn được (không đụng bản desktop, nơi hiện ĐỦ chỗ cho mọi
	   danh sách) — nút "▲" theo đó nằm cuối danh sách cuộn, chấp nhận được (hành vi quen thuộc của
	   danh sách cuộn, không phải lỗi). */
	.gl-v360__tabs,
	.gl-v360__subpanel,
	.gl-v360-conn__filters {
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
	}

	/* [2026-10-02] "Mặt Bằng Tiện Ích"/"Mặt Bằng Tầng" (nhóm có "has-side-panel" — xem showScene()):
	   khối con CHUNG ".gl-v360__subpanel" (chọn Khu/Toà — "Nội Khu"/"Onsen"/"Detox 2") đè SÁT CẠNH
	   khối RIÊNG của từng nhóm (chú giải tiện ích ".gl-v360__util-legend", bộ lọc loại căn
	   ".gl-v360__floor-filters") — cả 2 khối RIÊNG đó đã tự dời xuống "bottom" trên màn hẹp (xem 2
	   khối ngay trên/dưới trong file này) nhưng subpanel vẫn định vị theo "top" (head-h+tabs-h, cả 2
	   biến đều PHÌNH TO trên mobile sau khi xếp chồng thanh trên cùng) nên rơi ĐÚNG VÀO phần dưới màn
	   hình mà 2 khối kia cũng đang chiếm — không phải lỗi thiếu "z-index" mà là 2 chiến lược định vị
	   khác nhau (từ trên/từ dưới) vô tình chồng lấn. CHỈ áp dụng cho 2 nhóm này (không phải MỌI lúc
	   subpanel hiện) — bản đầu áp dụng chung cho mọi nhóm lại gây lỗi MỚI: subpanel dài (VD "Căn AMO"
	   8 phòng, "Tổng Quan" không có khối cạnh tranh) bị kéo xuống giữa màn đè lên chính khối tabs phía
	   trên, nặng hơn cả lỗi ban đầu. Dời subpanel sang CÙNG kiểu "bottom" + xếp NGAY TRÊN khối 38vh
	   cao nhất (util-legend) + chừa thêm 8px — khối nào thấp hơn (floor-filters, 30vh) vẫn đủ an
	   toàn, chỉ dư khoảng cách chứ không hụt. */
	.gl-v360.has-side-panel .gl-v360__subpanel {
		top: auto;
		bottom: calc(12px + 38vh + 8px);
		left: 12px;
		right: 12px;
		width: auto;
		max-width: none;
		max-height: 22vh;
	}

	body.gamuda-landing .gl-v360__tab,
	body.gamuda-landing .gl-v360-conn__filter {
		min-height: 32px;
		height: auto;
	}

	.gl-v360-conn__card {
		top: calc(var(--gl-v360-head-h, 84px) + var(--gl-v360-tabs-h, 450px));
		left: 12px;
		width: min(260px, calc(100% - 24px));
		padding: 10px 12px;
	}

	/* [2026-10-02] Thanh trên cùng (tên điểm + cụm nút) TRÀN RA NGOÀI màn hẹp — cụm nút
	   (".gl-v360__tools": "Nhận bảng giá" + gọi + zoom x2 + toàn màn hình) RIÊNG nó đã rộng hơn cả màn
	   375px, ép phần tiêu đề co lại gần như 0 (chữ "Trải Nghiệm 360°" tự xuống dòng từng chữ 1,
	   "--gl-v360-head-h" theo đó phình to bất thường, kéo theo khối menu trái (dùng chung biến này để
	   tính "top"/"max-height") hụt chỗ, nút "▲" thu gọn bị khuất dưới mép màn hình trên máy thấp — xem
	   ghi chú khối ".gl-v360__tabs" phía trên). Xếp CHỒNG tiêu đề/cụm nút thành 2 hàng thay vì chung 1
	   hàng, thu nhỏ từng phần tử — giải quyết từ GỐC (đo lại "--gl-v360-head-h" tự nhỏ lại đúng mức),
	   không cần vá riêng từng chỗ dùng biến này. */
	.gl-v360__top {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 12px 14px 22px;
	}

	.gl-v360__tools {
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: 6px;
	}

	.gl-v360__title {
		font-size: 20px;
	}

	.gl-v360__eyebrow {
		font-size: 10px;
	}

	body.gamuda-landing .gl-v360__tool {
		width: 34px;
		height: 34px;
		font-size: 16px;
	}

	body.gamuda-landing .gl-v360 .gl-v360__cta {
		height: 34px;
		padding: 0 14px;
		font-size: 11px;
	}

	.gl-v360__brand-img {
		max-width: 90px;
	}

	.gl-v360__brand {
		padding-bottom: 6px;
	}
}

/* --- thanh trên: tên điểm + công cụ --- */
.gl-v360__top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px 40px;
	background: linear-gradient(180deg, rgba(12, 24, 52, 0.72) 0%, rgba(12, 24, 52, 0) 100%);
	pointer-events: none;
}

.gl-v360__heading {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.gl-v360__eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gl-gold-light);
}

.gl-v360__title {
	font-family: var(--gl-font-serif);
	font-size: 30px;
	line-height: 1.15;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.gl-v360__tools {
	display: flex;
	gap: 8px;
	pointer-events: auto;
}

body.gamuda-landing .gl-v360__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(12, 24, 52, 0.45);
	color: var(--gl-white);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

body.gamuda-landing .gl-v360__tool:hover {
	background: rgba(20, 156, 178, 0.55);
	border-color: var(--gl-gold-light);
}

/* "display:inline-flex" ở trên thắng thuộc tính [hidden] mặc định của trình duyệt → khai lại. */
body.gamuda-landing .gl-v360__tool[hidden] {
	display: none;
}

/* --- gợi ý thao tác --- */
.gl-v360__hint {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	padding: 12px 20px;
	border-radius: var(--gl-radius-pill);
	background: rgba(12, 24, 52, 0.6);
	font-size: 13px;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: opacity 0.6s ease;
}

.gl-v360__hint.is-hidden {
	opacity: 0;
}

/* --- menu nhóm (sidebar TRÁI, xem page-gamuda-360.php) — thẻ bo tròn, thụt lề nhẹ khỏi mép màn hình
   (left/top đều chừa khoảng cách) + nút "▲" thu gọn — HÌNH KHỐI đo trực tiếp từ khối menu chính ở
   360.monreisaigon.vn, MÀU dùng lại đúng bộ navy kính mờ sẵn có của thẻ chi tiết điểm tiện ích (xem
   ghi chú đầy đủ ở khối ".gl-v360-conn__filters, .gl-v360__subpanel" phía trên). "top" vẫn chừa đúng
   chiều cao thật của thanh tiêu đề (--gl-v360-head-h, đo ở fitHeight()) vì trang này có thanh tiêu đề
   che phía trên mà bản gốc không có. */
.gl-v360__tabs {
	position: absolute;
	top: calc(var(--gl-v360-head-h, 92px) + 12px);
	left: 12px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 208px;
	max-width: 70%;
	max-height: calc(100% - var(--gl-v360-head-h, 92px) - 24px);
	overflow: hidden;
	padding: 14px 14px 0;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--gl-radius-md);
	background: rgba(12, 24, 52, 0.88);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.25);
}

.gl-v360__tabs.is-collapsed .gl-v360__tab:not(.is-active) {
	display: none;
}

/* [2026-10-02] Riêng điểm "Liên Kết Vùng": user chỉ rõ ý thật là "ngang hàng" với
   ".gl-v360-conn__card.is-visible" (thẻ chi tiết hiện khi bấm 1 điểm trên bản đồ, "top: var(--gl-v360-
   head-h)", KHÔNG cộng thêm 12px như ".gl-v360__tabs" mặc định) — bỏ hẳn hướng đo trước đó (từng cố
   khớp với khối chữ quảng cáo IN CỨNG trong ảnh nền, "Sở Hữu Bộ Tứ Hạ Tầng Khủng" — không phải ý user).
   Bớt đúng phần "+12px" dư ra để khớp thẳng hàng với thẻ chi tiết. ".gl-v360-conn__filters" KHÔNG cần
   override riêng — công thức mặc định của nó đã tự cộng theo "--gl-v360-tabs-h" (đo chiều cao THẬT,
   không phụ thuộc "top" của khối tabs) nên tự bám đúng ngay dưới khối tabs dù tabs đổi "top". */
.gl-v360.is-conn .gl-v360__tabs {
	top: var(--gl-v360-head-h, 92px);
}

body.gamuda-landing .gl-v360__tab {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	min-height: 32px;
	margin: 0 0 4px;
	padding: 9px 14px;
	border: 1px solid transparent;
	border-radius: var(--gl-radius-sm);
	background: transparent;
	color: rgba(255, 255, 255, 0.75);
	font-family: var(--gl-font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.gamuda-landing .gl-v360__tab:hover {
	color: var(--gl-white);
	border-color: rgba(255, 255, 255, 0.3);
}

body.gamuda-landing .gl-v360__tab.is-active {
	background: var(--gl-white);
	border-color: var(--gl-white);
	color: var(--gl-green);
}

body.gamuda-landing .gl-v360 .gl-v360__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 18px;
	border-radius: var(--gl-radius-sm);
	background: var(--gl-gold);
	color: var(--gl-green-dark);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

body.gamuda-landing .gl-v360 .gl-v360__cta:hover {
	background: var(--gl-gold-bright);
	color: var(--gl-green-dark);
}

/* --- trình duyệt không có WebGL --- */
.gl-v360__unsupported {
	display: none;
}

.gl-v360.is-unsupported .gl-v360__unsupported {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
	background: var(--gl-green-dark);
}

/* ===== FORM LIÊN HỆ NHANH (layout "quick_form", section-quick-form.php) =====
   Mẫu nền lấy đúng tông các section sẵn có: --cream (Vị Trí/Thư Viện Ảnh), --white (Chủ Đầu Tư/Hạ
   Tầng), --green (nền đặc Đăng Ký Tư Vấn), --dark (Danh Sách Thẻ/Slider nền tối, Footer), --image
   (ảnh + lớp phủ như Hero/Đăng Ký). Thẻ form luôn sáng; field "khung viền" dùng chung rule của
   ".gl-registration__form". Prefix "body.gamuda-landing" cho rule đặt màu/margin lên <p>/<h2> để
   thắng reset "body.gamuda-landing h1,h2,h3,h4,p" (gamuda-tokens.css). */
.gl-quick-form {
	position: relative;
	overflow: hidden;
	background-color: var(--gl-cream);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.gl-quick-form--white {
	background-color: var(--gl-white);
}

.gl-quick-form--green,
.gl-quick-form--image {
	background-color: var(--gl-btn-bg);
}

.gl-quick-form--dark {
	background-color: var(--gl-green-dark);
}

.gl-quick-form__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(6, 9, 14, 0.86) 0%, rgba(6, 9, 14, 0.7) 50%, rgba(6, 9, 14, 0.5) 100%);
}

.gl-quick-form__row {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gl-gap-2xl);
}

.gl-quick-form__text {
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-sm);
	flex: 1 1 0;
	max-width: 620px;
}

body.gamuda-landing .gl-quick-form .gl-rich-content p {
	font-size: var(--gl-fs-body);
	line-height: 1.7;
	color: var(--gl-text);
}

.gl-quick-form__card {
	flex: 0 0 auto;
	width: 520px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--gl-gap-sm);
	padding: var(--gl-gap-xl);
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-lg);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.07);
}

/* Nền trắng: thẻ đổi sang ngà để vẫn tách khỏi nền. */
.gl-quick-form--white .gl-quick-form__card {
	background: var(--gl-cream);
}

/* Nền tối: thẻ ngà không viền, bóng đậm như thẻ của section Đăng Ký Tư Vấn. */
.gl-quick-form--on-dark .gl-quick-form__card {
	background: var(--gl-cream);
	border-color: transparent;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

body.gamuda-landing .gl-quick-form__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(74, 74, 74, 0.75);
	text-align: center;
}

/* Chữ trên nền tối: eyebrow + gạch đổi sang --gl-gold-light (màu nhấn đậm trên nền tối thiếu tương phản),
   mô tả trắng mờ như ".gl-registration__header p". */
.gl-quick-form--on-dark .gl-eyebrow {
	color: var(--gl-gold-light);
}

.gl-quick-form--on-dark .gl-eyebrow::before {
	background: var(--gl-gold-light);
}

body.gamuda-landing .gl-quick-form--on-dark .gl-rich-content p,
body.gamuda-landing .gl-quick-form--on-dark .gl-rich-content li {
	color: rgba(255, 255, 255, 0.82);
}

.gl-quick-form--on-dark .gl-rich-content a {
	color: var(--gl-gold-light);
}

/* Bố cục "center": chữ căn giữa ở trên, thẻ form ở giữa bên dưới. */
.gl-quick-form--center .gl-quick-form__row {
	flex-direction: column;
	gap: var(--gl-gap-xl);
}

.gl-quick-form--center .gl-quick-form__text {
	align-items: center;
	text-align: center;
	max-width: 760px;
}

body.gamuda-landing .gl-quick-form--center .gl-rich-content p {
	text-align: center;
	text-align-last: center;
}

.gl-quick-form--center .gl-quick-form__card {
	width: 640px;
}

@media (max-width: 1023px) {
	.gl-quick-form__row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--gl-gap-xl);
	}

	.gl-quick-form__text {
		max-width: none;
	}

	.gl-quick-form__card,
	.gl-quick-form--center .gl-quick-form__card {
		width: 100%;
	}

	.gl-quick-form--center .gl-quick-form__row {
		align-items: center;
	}
}

@media (max-width: 600px) {
	.gl-quick-form__card {
		padding: var(--gl-gap-lg) var(--gl-gap-md);
	}
}

/* ===== BẢNG TÍNH GIÁ CHI TIẾT (section-price-calculator.php + js/gl-price-calc.js, 2026-10-09) =====
   Tham khảo trang "Bảng tính giá dự kiến" của website chính thức Norton Park: dải tab loại căn chia nhóm
   theo bộ sưu tập -> [mặt bằng | thông tin + danh sách mã] + thẻ giá dính bên phải. Mọi <button> khai
   lại đủ thuộc tính dưới "body.gamuda-landing" — Flatsome ép <button> in hoa/min-height/bóng tối khi
   rê chuột (cùng cách xử lý ".gl-residences__tab-label"). */
.gl-pcalc {
	background: var(--gl-cream);
}

.gl-pcalc .gl-section-header {
	margin-bottom: var(--gl-gap-md);
}

/* Dải tab chia nhóm theo bộ sưu tập (".gl-ctabs*") — dùng chung cho Bảng Tính Giá Chi Tiết và Mặt Bằng Căn Hộ
   kiểu "Tab theo loại căn" (section-unit-plans.php). */
.gl-ctabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--gl-gap-xl);
	margin-bottom: var(--gl-gap-xl);
	border-bottom: 1px solid var(--gl-border);
}

.gl-ctabs__group + .gl-ctabs__group {
	padding-left: var(--gl-gap-xl);
	border-left: 1px solid var(--gl-border);
}

.gl-ctabs__label {
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gl-gold);
}

.gl-ctabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 28px;
}

body.gamuda-landing .gl-ctabs__tab {
	position: relative;
	flex-shrink: 0;
	max-width: none;
	margin: 0;
	padding: 6px 0 14px;
	min-height: 0;
	font-family: var(--gl-font-serif);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: color-mix(in srgb, var(--gl-text) 55%, transparent);
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

body.gamuda-landing .gl-ctabs__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--gl-green-dark);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

body.gamuda-landing .gl-ctabs__tab:hover,
body.gamuda-landing .gl-ctabs__tab.is-active {
	color: var(--gl-green-dark);
	background: none;
	box-shadow: none;
}

body.gamuda-landing .gl-ctabs__tab.is-active::after {
	transform: scaleX(1);
}

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

.gl-pcalc__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--gl-gap-xl);
	align-items: start;
}

.gl-pcalc__panel {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
	gap: var(--gl-gap-xl);
	align-items: start;
}

.gl-pcalc__panel[hidden] {
	display: none;
}

/* --- Mặt bằng --- */
.gl-pcalc__plan {
	display: grid;
	gap: var(--gl-gap-sm);
}

.gl-pcalc__plan-fig {
	margin: 0;
}

.gl-pcalc__plan-fig img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 620px;
	object-fit: contain;
	cursor: zoom-in;
}

.gl-pcalc__plan-fig figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin-top: 8px;
}

.gl-pcalc__plan-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gl-gold);
}

.gl-pcalc__plan-detail {
	font-size: 14px;
	color: var(--gl-text);
}

body.gamuda-landing .gl-pcalc__plan-note {
	font-size: 13px;
	line-height: 1.6;
	text-align: left;
	color: color-mix(in srgb, var(--gl-text) 75%, transparent);
}

/* --- Thông tin loại căn --- */
.gl-pcalc__badge {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gl-green-dark);
	border: 1px solid color-mix(in srgb, var(--gl-green-dark) 35%, transparent);
	border-radius: var(--gl-radius-pill);
}

body.gamuda-landing .gl-pcalc__name {
	font-family: var(--gl-font-serif);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.1;
	color: var(--gl-green-dark);
}

body.gamuda-landing .gl-pcalc__rooms {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	color: var(--gl-green);
}

body.gamuda-landing .gl-pcalc__desc {
	margin-top: 14px;
	font-size: var(--gl-fs-body);
	line-height: 1.65;
	color: var(--gl-text);
}

/* Flatsome (theme cha) đặt sẵn cho mọi <dl>: chữ in hoa, mờ 80%, cỡ .85em, dt/dd inline-block — trả lại
   mặc định cho 2 danh sách của bảng tính (thông số loại căn + các dòng thẻ giá). */
.gl-pcalc__stats,
.gl-pcalc__quote-rows {
	font-size: inherit;
	opacity: 1;
	text-transform: none;
}

.gl-pcalc__stats dt,
.gl-pcalc__stats dd,
.gl-pcalc__quote-rows dt,
.gl-pcalc__quote-rows dd {
	display: block;
	margin: 0;
}

.gl-pcalc__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: var(--gl-gap-md) 0 0;
	padding-bottom: var(--gl-gap-md);
	border-bottom: 1px solid var(--gl-border);
}

.gl-pcalc__stats > div {
	padding: 0 14px;
	border-left: 1px solid var(--gl-border);
}

.gl-pcalc__stats > div:first-child {
	padding-left: 0;
	border-left: 0;
}

.gl-pcalc__stats dt {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--gl-text) 70%, transparent);
}

.gl-pcalc__stats dd {
	margin: 4px 0 0;
	font-family: var(--gl-font-serif);
	font-size: 24px;
	line-height: 1.2;
	color: var(--gl-green-dark);
}

.gl-pcalc__step {
	margin-top: var(--gl-gap-md);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gl-green-dark);
}

body.gamuda-landing .gl-pcalc__hint {
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.6;
	text-align: left;
	color: color-mix(in srgb, var(--gl-text) 70%, transparent);
}

/* --- Danh sách mã căn --- */
.gl-pcalc__codes {
	margin-top: var(--gl-gap-sm);
}

.gl-pcalc__codes-head,
body.gamuda-landing .gl-pcalc__code {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 12px;
}

.gl-pcalc__codes-head {
	padding: 0 14px 8px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--gl-text) 70%, transparent);
	border-bottom: 1px solid var(--gl-border);
}

.gl-pcalc__codes-head span:not(:first-child) {
	text-align: right;
}

body.gamuda-landing .gl-pcalc__code {
	width: 100%;
	margin: 0;
	padding: 14px;
	min-height: 0;
	align-items: baseline;
	font-family: var(--gl-font-sans);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: var(--gl-text);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--gl-border);
	border-left: 3px solid transparent;
	border-radius: 0;
	box-shadow: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

body.gamuda-landing .gl-pcalc__code:hover {
	color: var(--gl-text);
	background: color-mix(in srgb, var(--gl-white) 55%, transparent);
	box-shadow: none;
}

body.gamuda-landing .gl-pcalc__code.is-active {
	background: var(--gl-white);
	border-left-color: var(--gl-green-dark);
	box-shadow: 0 8px 20px -14px rgba(19, 36, 77, 0.45);
}

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

.gl-pcalc__code-id {
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--gl-green-dark);
}

.gl-pcalc__code-a {
	font-family: var(--gl-font-serif);
	font-size: 19px;
	text-align: right;
	color: var(--gl-green-dark);
}

.gl-pcalc__code-meta,
.gl-pcalc__code-price {
	grid-column: 1 / -1;
	margin-top: 4px;
	font-size: 13px;
	color: color-mix(in srgb, var(--gl-text) 80%, transparent);
}

/* Giá trong dòng mã — chỉ hiện ở màn hình < 1200px (khi thẻ giá nằm dưới danh sách), dòng đang chọn. */
.gl-pcalc__code-price {
	display: none;
	font-weight: 700;
	color: var(--gl-gold);
}

/* --- Thẻ giá --- */
.gl-pcalc__quote {
	position: sticky;
	/* Menu cố định cao ~88px (máy tính). */
	top: 108px;
	overflow: hidden;
	background: var(--gl-white);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-md);
	box-shadow: 0 24px 48px -32px rgba(19, 36, 77, 0.45);
}

.gl-pcalc__quote-head {
	padding: 22px 24px 20px;
	color: var(--gl-white);
	background:
		radial-gradient(90% 120% at 100% 100%, rgba(168, 225, 234, 0.16), transparent 60%),
		var(--gl-green);
}

.gl-pcalc__quote-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.gl-pcalc__quote-price {
	margin-top: 6px;
	font-family: var(--gl-font-serif);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.15;
}

.gl-pcalc__quote-title {
	margin-top: 6px;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.85);
}

.gl-pcalc__quote-rows {
	margin: 0;
	padding: 6px 24px;
}

.gl-pcalc__quote-rows > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	font-size: 14px;
	border-bottom: 1px solid var(--gl-border);
}

.gl-pcalc__quote-rows > div[hidden],
.gl-pcalc__garden-note[hidden] {
	display: none;
}

.gl-pcalc__quote-rows dt {
	flex-shrink: 0;
	color: color-mix(in srgb, var(--gl-text) 75%, transparent);
}

.gl-pcalc__quote-rows dd {
	margin: 0;
	text-align: right;
	color: var(--gl-green-dark);
}

body.gamuda-landing .gl-pcalc__garden-note {
	margin: 4px 24px 0;
	font-size: 12px;
	line-height: 1.5;
	text-align: left;
	color: color-mix(in srgb, var(--gl-text) 70%, transparent);
}

body.gamuda-landing .gl-pcalc__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 18px 24px 0;
	padding: 15px 20px;
	color: var(--gl-white);
	letter-spacing: 0.1em;
	border-radius: var(--gl-radius-pill);
}

body.gamuda-landing .gl-pcalc__cta::after {
	content: "→";
	transition: transform 0.25s ease;
}

body.gamuda-landing .gl-pcalc__cta:hover {
	color: var(--gl-white);
}

body.gamuda-landing .gl-pcalc__cta:hover::after {
	transform: translateX(4px);
}

body.gamuda-landing .gl-pcalc__call {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 14px 24px 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gl-gold);
}

body.gamuda-landing .gl-pcalc__call:hover {
	color: var(--gl-green-dark);
}

.gl-pcalc__notes {
	margin: 14px 24px 22px;
}

body.gamuda-landing .gl-pcalc__notes p {
	font-size: 12px;
	line-height: 1.55;
	text-align: left;
	color: color-mix(in srgb, var(--gl-text) 72%, transparent);
}

body.gamuda-landing .gl-pcalc__notes p + p {
	margin-top: 6px;
}

@media (max-width: 1199px) {
	.gl-pcalc__body {
		grid-template-columns: 1fr;
	}

	.gl-pcalc__quote {
		position: static;
		max-width: 560px;
	}

	.gl-pcalc__code.is-active .gl-pcalc__code-price {
		display: block;
	}
}

@media (max-width: 767px) {
	.gl-ctabs {
		display: block;
		border-bottom: 0;
	}

	.gl-ctabs__group {
		margin-bottom: var(--gl-gap-sm);
	}

	.gl-ctabs__group + .gl-ctabs__group {
		padding-left: 0;
		border-left: 0;
	}

	/* Tab cuộn ngang trong từng nhóm, không xuống hàng. */
	.gl-ctabs__list {
		flex-wrap: nowrap;
		gap: 0 20px;
		overflow-x: auto;
		border-bottom: 1px solid var(--gl-border);
		scrollbar-width: none;
	}

	.gl-ctabs__list::-webkit-scrollbar {
		display: none;
	}

	body.gamuda-landing .gl-ctabs__tab {
		font-size: 21px;
		padding-bottom: 10px;
	}

	.gl-pcalc__panel {
		grid-template-columns: 1fr;
		gap: var(--gl-gap-lg);
	}

	.gl-pcalc__plan-fig img {
		max-height: 420px;
	}

	body.gamuda-landing .gl-pcalc__name {
		font-size: 32px;
	}

	.gl-pcalc__stats dd {
		font-size: 19px;
	}

	.gl-pcalc__stats > div {
		padding: 0 10px;
	}

	body.gamuda-landing .gl-pcalc__code {
		padding: 12px 10px;
		font-size: 14px;
	}

	.gl-pcalc__codes-head {
		padding: 0 10px 8px;
	}

	.gl-pcalc__code-a {
		font-size: 16px;
	}

	.gl-pcalc__quote {
		max-width: none;
	}
}

/* ===== MẶT BẰNG CĂN HỘ — kiểu "Tab theo loại căn" (section-unit-plans.php, field "unit_display" = tabs; 2026-10-09,
   tham khảo mục Mặt bằng căn hộ của website chính thức Norton Park). Dải tab dùng chung ".gl-ctabs" ở trên. ===== */
.gl-unit-plans--tabs {
	background: var(--gl-cream);
}

.gl-unit-tabs__icon img {
	display: block;
	width: auto;
	height: 46px;
	margin-bottom: 16px;
}

.gl-unit-tabs__icon--center img {
	margin-left: auto;
	margin-right: auto;
}

.gl-unit-plans--tabs .gl-section-header {
	margin-bottom: var(--gl-gap-md);
}

/* Biểu tượng nhỏ dưới tab đang chọn (icon trang trí của section). */
.gl-ctabs__mark {
	position: absolute;
	left: 50%;
	bottom: -26px;
	width: auto;
	height: 16px;
	opacity: 0;
	transform: translate(-50%, -4px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

.gl-ctabs__tab.is-active .gl-ctabs__mark {
	opacity: 1;
	transform: translate(-50%, 0);
}

.gl-unit-tabs__panel {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--gl-gap-2xl);
	align-items: center;
}

.gl-unit-tabs__panel[hidden] {
	display: none;
}

.gl-unit-tabs__panel.is-active {
	animation: gl-utabs-in 0.35s ease;
}

@keyframes gl-utabs-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.gl-unit-tabs__media {
	display: flex;
	justify-content: center;
	gap: var(--gl-gap-md);
}

.gl-unit-tabs__plan {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	text-align: center;
}

.gl-unit-tabs__plan img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 600px;
	object-fit: contain;
	cursor: zoom-in;
}

/* Ảnh các tầng cao thấp khác nhau — canh đáy để nhãn "Tầng 1 / Tầng 2" thẳng hàng. */
.gl-unit-tabs__media--floors {
	align-items: flex-end;
}

.gl-unit-tabs__media--floors .gl-unit-tabs__plan img {
	max-height: 460px;
}

.gl-unit-tabs__plan figcaption {
	margin-top: 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--gl-text) 75%, transparent);
}

.gl-unit-tabs__badge {
	display: inline-block;
	padding: 5px 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gl-green-dark);
	border: 1px solid color-mix(in srgb, var(--gl-green-dark) 35%, transparent);
	border-radius: var(--gl-radius-pill);
}

.gl-unit-tabs__code {
	display: block;
	margin-top: 16px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--gl-text) 70%, transparent);
}

body.gamuda-landing .gl-unit-tabs__name {
	margin-top: 6px;
	font-family: var(--gl-font-serif);
	font-size: 44px;
	font-weight: 500;
	line-height: 1.1;
	color: var(--gl-green-dark);
}

body.gamuda-landing .gl-unit-tabs__desc {
	margin-top: 14px;
	font-size: var(--gl-fs-body);
	line-height: 1.7;
	color: var(--gl-text);
}

/* Flatsome (theme cha) đặt sẵn cho mọi <dl>: chữ in hoa, mờ 80%, dt/dd inline-block — trả lại mặc định. */
.gl-unit-tabs__specs {
	margin: var(--gl-gap-md) 0 0;
	font-size: inherit;
	opacity: 1;
	text-transform: none;
}

.gl-unit-tabs__specs > div {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	gap: 16px;
	padding: 13px 0;
	border-top: 1px solid var(--gl-border);
}

.gl-unit-tabs__specs > div:last-child {
	border-bottom: 1px solid var(--gl-border);
}

.gl-unit-tabs__specs dt,
.gl-unit-tabs__specs dd {
	display: block;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.gl-unit-tabs__specs dt {
	color: color-mix(in srgb, var(--gl-text) 70%, transparent);
}

.gl-unit-tabs__specs dd {
	color: var(--gl-green-dark);
}

body.gamuda-landing .gl-unit-tabs__note {
	margin-top: 10px;
	font-size: 12px;
	font-style: italic;
	line-height: 1.5;
	text-align: left;
	color: color-mix(in srgb, var(--gl-text) 70%, transparent);
}

body.gamuda-landing .gl-unit-tabs__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: var(--gl-gap-md);
	padding-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gl-gold);
	border-bottom: 1px solid var(--gl-gold);
	text-decoration: none;
}

body.gamuda-landing .gl-unit-tabs__cta::after {
	content: "→";
	transition: transform 0.25s ease;
}

body.gamuda-landing .gl-unit-tabs__cta:hover {
	color: var(--gl-green-dark);
	border-bottom-color: var(--gl-green-dark);
}

body.gamuda-landing .gl-unit-tabs__cta:hover::after {
	transform: translateX(4px);
}

@media (max-width: 1023px) {
	.gl-unit-tabs__panel {
		grid-template-columns: 1fr;
		gap: var(--gl-gap-lg);
	}
}

@media (max-width: 767px) {
	/* Dải tab cuộn ngang: biểu tượng dưới tab bị cắt bởi vùng cuộn — ẩn, chỉ giữ gạch chân. */
	.gl-ctabs__mark {
		display: none;
	}

	.gl-unit-tabs__media {
		gap: 12px;
	}

	.gl-unit-tabs__plan img {
		max-height: 440px;
	}

	body.gamuda-landing .gl-unit-tabs__name {
		font-size: 34px;
	}

	.gl-unit-tabs__specs dt,
	.gl-unit-tabs__specs dd {
		font-size: 14px;
	}
}

/* ===== VỊ TRÍ — kiểu "Bản đồ tương tác" (section-location.php, field "loc_display" = map; js/gl-loc-map.js; 2026-10-09).
   Bản đồ lớn kéo/phóng to + bảng thông tin Nổi bật · Thời gian · Bộ lọc bên phải (điện thoại: bảng trượt từ dưới lên).
   Lớp: ảnh (canvas, z0) < viền mờ (stage::before, z1) < màn mờ khi làm nổi nhóm (veil, z2) < điểm (pins, z3)
   < nút/lời nhắc (z4) < bảng (z5) < thẻ điểm (z6). ===== */
.gl-location--map .gl-section-header {
	margin-bottom: var(--gl-gap-lg);
}

.gl-locmap {
	--gl-locmap-paper: #FFF8F2;
	--gl-locmap-card: #FFFDF8;
	--gl-locmap-board: min(380px, 38%);
	--gl-locmap-sheet: 0px;
	position: relative;
	height: clamp(560px, 80vh, 860px);
	overflow: hidden;
	isolation: isolate;
	background: var(--gl-locmap-paper);
	border: 1px solid color-mix(in srgb, var(--gl-gold) 18%, transparent);
	border-radius: var(--gl-radius-lg);
}

.gl-locmap button,
.gl-locmap button:hover,
.gl-locmap button:focus {
	min-height: 0;
	margin: 0;
	font-family: inherit;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
}

.gl-locmap [hidden] {
	display: none !important;
}

.gl-locmap__stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.gl-locmap.is-active .gl-locmap__stage {
	touch-action: none;
}

.gl-locmap.is-dragging .gl-locmap__stage {
	cursor: grabbing;
}

.gl-locmap__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	box-shadow: inset 0 0 70px 26px var(--gl-locmap-paper);
}

.gl-locmap__canvas {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	transform-origin: 0 0;
	will-change: transform;
}

.gl-locmap .gl-locmap__img {
	display: block;
	max-width: none;
	pointer-events: none;
}

/* Màn mờ khi làm nổi 1 nhóm: chừa 1 vòng sáng quanh vị trí dự án (--gl-hx/--gl-hy do JS cập nhật theo khung nhìn). */
.gl-locmap__veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s ease;
	background: radial-gradient(circle at var(--gl-hx, 50%) var(--gl-hy, 50%), transparent 0 52px, color-mix(in srgb, var(--gl-locmap-paper) 74%, transparent) 76px);
}

.gl-locmap.is-focus .gl-locmap__veil {
	opacity: 1;
}

.gl-locmap__pins {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.gl-locmap .gl-locmap__pin {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	padding: 0;
	border: 0;
	background: none;
	pointer-events: auto;
	cursor: pointer;
	--gl-pin-ring: var(--gl-gold);
}

/* Vùng bấm 30px quanh điểm (nút rộng 0 — chấm/chữ là con định vị tuyệt đối quanh toạ độ). */
.gl-locmap__pin::before {
	content: "";
	position: absolute;
	left: -15px;
	top: -15px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

.gl-locmap__dot {
	position: absolute;
	left: -6px;
	top: -6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--gl-pin);
	box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(40, 30, 20, 0.25);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.gl-locmap__dot::after {
	content: "";
	position: absolute;
	inset: -11px;
	border: 2px solid var(--gl-pin-ring);
	border-radius: 50%;
	box-shadow: 0 0 0 7px color-mix(in srgb, var(--gl-pin-ring) 14%, transparent);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.gl-locmap__label {
	position: absolute;
	left: 13px;
	top: 0;
	transform: translateY(-50%);
	padding: 3px 7px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
	color: #3b382f;
	background: color-mix(in srgb, var(--gl-locmap-card) 92%, transparent);
	border-radius: 4px;
	box-shadow: 0 1px 6px rgba(40, 30, 20, 0.08);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.gl-locmap__pin.is-flip .gl-locmap__label {
	left: auto;
	right: 13px;
}

/* Kiểu "Hiện chấm + tên": chữ hiện khi đã phóng to / rê chuột / đang làm nổi. */
.gl-locmap--dot.is-zoomed .gl-locmap__label,
.gl-locmap__pin:hover .gl-locmap__label,
.gl-locmap__pin:focus-visible .gl-locmap__label,
.gl-locmap__pin.is-on .gl-locmap__label,
.gl-locmap__pin.is-sel .gl-locmap__label {
	opacity: 1;
}

.gl-locmap--dot.is-focus .gl-locmap__pin:not(.is-on):not(.is-sel) {
	opacity: 0.35;
}

/* Kiểu "Ảnh đã vẽ sẵn điểm": chấm của ảnh đã có — chỉ hiện vòng sáng + tên khi rê chuột / làm nổi / chọn. */
.gl-locmap--hidden .gl-locmap__dot {
	opacity: 0;
	transform: scale(0.5);
}

.gl-locmap--hidden .gl-locmap__pin:hover .gl-locmap__dot,
.gl-locmap--hidden .gl-locmap__pin:focus-visible .gl-locmap__dot,
.gl-locmap__pin.is-on .gl-locmap__dot,
.gl-locmap__pin.is-sel .gl-locmap__dot {
	opacity: 1;
	transform: none;
}

.gl-locmap__pin:hover .gl-locmap__dot::after,
.gl-locmap__pin:focus-visible .gl-locmap__dot::after,
.gl-locmap__pin.is-on .gl-locmap__dot::after,
.gl-locmap__pin.is-sel .gl-locmap__dot::after {
	opacity: 1;
	transform: none;
}

.gl-locmap__pin.is-sel {
	z-index: 2;
}

.gl-locmap__pin.is-sel .gl-locmap__dot::after {
	animation: gl-locmap-ring 1.8s ease-out infinite;
}

.gl-locmap__pin:focus-visible {
	outline: none;
}

/* Vị trí dự án: 2 vòng toả nhẹ quanh logo trên ảnh. */
.gl-locmap__home {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.gl-locmap__home::before,
.gl-locmap__home::after {
	content: "";
	position: absolute;
	left: -58px;
	top: -58px;
	width: 116px;
	height: 116px;
	border: 1.5px solid color-mix(in srgb, var(--gl-gold) 55%, transparent);
	border-radius: 50%;
	animation: gl-locmap-pulse 3.2s ease-out infinite;
}

.gl-locmap__home::after {
	animation-delay: 1.6s;
}

@keyframes gl-locmap-pulse {
	from { transform: scale(0.55); opacity: 0.9; }
	to { transform: scale(1.35); opacity: 0; }
}

@keyframes gl-locmap-ring {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gl-pin-ring) 40%, transparent); }
	100% { box-shadow: 0 0 0 16px transparent; }
}

/* ---------- bảng thông tin ---------- */
.gl-locmap__board {
	position: absolute;
	top: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	width: var(--gl-locmap-board);
	overflow: hidden;
	background: var(--gl-locmap-card);
	border-radius: 20px;
	box-shadow: 0 18px 50px rgba(60, 45, 30, 0.14), 0 0 0 1px rgba(15, 122, 140, 0.12);
	transition: transform 0.4s var(--gl-ease-out), opacity 0.3s ease, height 0.35s var(--gl-ease-out);
}

.gl-locmap.is-min .gl-locmap__board {
	transform: translateX(calc(100% + 32px));
	opacity: 0;
	pointer-events: none;
}

.gl-locmap .gl-locmap__handle {
	display: none;
}

.gl-locmap__bhead {
	position: relative;
	flex-shrink: 0;
	padding: 22px 52px 14px;
	text-align: center;
}

.gl-locmap__bhead:not(:has(.gl-locmap__logo)) {
	padding: 12px 52px 4px;
	min-height: 44px;
}

.gl-locmap .gl-locmap__logo {
	display: block;
	width: auto;
	max-width: 220px;
	height: auto;
	max-height: 48px;
	margin: 0 auto;
}

.gl-locmap .gl-locmap__min {
	position: absolute;
	top: 14px;
	right: 12px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--gl-green-dark);
	cursor: pointer;
}

.gl-locmap .gl-locmap__min::before {
	content: "›";
	font-size: 24px;
	line-height: 1;
}

.gl-locmap .gl-locmap__min:hover {
	background: var(--gl-surface-2);
}

.gl-locmap__tabs {
	display: flex;
	flex-shrink: 0;
	gap: 4px;
	margin: 0 16px 14px;
	padding: 4px;
	background: var(--gl-surface-2);
	border-radius: var(--gl-radius-pill);
}

.gl-locmap .gl-locmap__tab {
	flex: 1;
	padding: 9px 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--gl-text) 72%, transparent);
	background: none;
	border: 0;
	border-radius: var(--gl-radius-pill);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.gl-locmap .gl-locmap__tab.is-active {
	color: var(--gl-green-dark);
	background: #fff;
	box-shadow: 0 1px 4px rgba(40, 30, 20, 0.1);
}

.gl-locmap__body {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 20px 18px;
	border-top: 1px solid var(--gl-border);
	scrollbar-width: thin;
}

.gl-locmap__sec {
	padding: 18px 0;
}

.gl-locmap__sec + .gl-locmap__sec {
	border-top: 1px solid var(--gl-border);
}

/* Nổi bật */
.gl-locmap__hi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 18px;
}

.gl-locmap .gl-locmap__hi-item {
	display: block;
	width: 100%;
	padding: 0;
	text-align: left;
	color: inherit;
	background: none;
	border: 0;
}

.gl-locmap button.gl-locmap__hi-item {
	cursor: pointer;
}

.gl-locmap__hi-k {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 7px;
	font-family: var(--gl-font-serif);
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gl-gold);
}

.gl-locmap__hi-k::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--gl-border);
}

.gl-locmap__hi-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.gl-locmap .gl-locmap__hi-icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	object-fit: contain;
}

.gl-locmap__hi-text strong {
	display: block;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gl-green-dark);
	transition: color 0.2s ease;
}

.gl-locmap__hi-text small {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: color-mix(in srgb, var(--gl-text) 78%, transparent);
}

.gl-locmap button.gl-locmap__hi-item:hover strong {
	color: var(--gl-gold);
}

/* Thời gian */
.gl-locmap__band {
	display: grid;
	grid-template-columns: 70px 20px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	margin: 0 -10px;
	padding: 12px 10px;
	border-radius: 14px;
	transition: background 0.2s ease;
}

.gl-locmap__band:not(:has(.gl-locmap__mark)) {
	grid-template-columns: 70px minmax(0, 1fr);
}

.gl-locmap__band[data-band] {
	cursor: pointer;
}

.gl-locmap__band[data-band]:hover {
	background: color-mix(in srgb, var(--gl-surface-2) 70%, transparent);
}

.gl-locmap__band.is-active {
	background: color-mix(in srgb, var(--gl-gold) 13%, transparent);
}

.gl-locmap__band:focus-visible {
	outline: 2px solid var(--gl-gold);
	outline-offset: 2px;
}

.gl-locmap__badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	text-align: center;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--gl-gold) 32%, transparent);
	border-radius: 50%;
}

.gl-locmap__badge b {
	font-family: var(--gl-font-serif);
	font-size: 25px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: var(--gl-gold);
}

.gl-locmap__badge small {
	margin-top: 3px;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--gl-gold);
}

.gl-locmap .gl-locmap__mark {
	width: 20px;
	height: auto;
	margin-top: 4px;
}

.gl-locmap .gl-locmap__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gl-locmap .gl-locmap__list li {
	position: relative;
	margin: 0;
	padding: 2px 0 2px 14px;
	font-size: 14px;
	line-height: 1.45;
	list-style: none;
	color: var(--gl-green-dark);
}

.gl-locmap .gl-locmap__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.78em;
	width: 4px;
	height: 4px;
	background: var(--gl-gold);
	border-radius: 50%;
}

.gl-locmap .gl-locmap__list li.is-off {
	color: color-mix(in srgb, var(--gl-text) 58%, transparent);
}

.gl-locmap .gl-locmap__list li[data-pt]:hover {
	color: var(--gl-gold);
}

/* Bộ lọc */
body.gamuda-landing .gl-locmap__sec-title {
	margin: 0 0 14px;
	font-family: var(--gl-font-serif);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--gl-gold);
}

.gl-locmap__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.gl-locmap .gl-locmap__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	font-size: 12.5px;
	color: var(--gl-green-dark);
	background: #fff;
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius-pill);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gl-locmap .gl-locmap__chip i {
	width: 8px;
	height: 8px;
	background: var(--gl-pin);
	border-radius: 50%;
}

.gl-locmap .gl-locmap__chip[data-cat=""] {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.gl-locmap .gl-locmap__chip:hover {
	border-color: var(--gl-gold);
}

.gl-locmap .gl-locmap__chip.is-active {
	color: #fff;
	background: var(--gl-green-dark);
	border-color: var(--gl-green-dark);
}

.gl-locmap .gl-locmap__legend {
	display: grid;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gl-locmap .gl-locmap__legend li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.35;
	list-style: none;
	color: var(--gl-green-dark);
}

.gl-locmap__legend svg {
	flex-shrink: 0;
}

body.gamuda-landing .gl-locmap__note {
	margin: 18px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	text-align: left;
	color: color-mix(in srgb, var(--gl-text) 72%, transparent);
}

/* ---------- nút, lời nhắc, thẻ điểm ---------- */
.gl-locmap .gl-locmap__open {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 5;
	padding: 11px 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gl-green-dark);
	background: var(--gl-locmap-card);
	border: 0;
	border-radius: var(--gl-radius-pill);
	box-shadow: 0 8px 24px rgba(60, 45, 30, 0.14);
	cursor: pointer;
}

.gl-locmap__ctl {
	position: absolute;
	right: calc(var(--gl-locmap-board) + 32px);
	bottom: 16px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: right 0.4s var(--gl-ease-out);
}

.gl-locmap.is-min .gl-locmap__ctl,
.gl-locmap:not(:has(.gl-locmap__board)) .gl-locmap__ctl {
	right: 16px;
}

.gl-locmap .gl-locmap__ctl button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 22px;
	font-weight: 400;
	color: var(--gl-green-dark);
	background: var(--gl-locmap-card);
	border: 0;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(60, 45, 30, 0.14);
	cursor: pointer;
}

.gl-locmap .gl-locmap__ctl button:hover {
	color: var(--gl-gold);
}

/* Lời nhắc + thẻ điểm đặt ở MÉP TRÊN (máy tính): góc dưới trái của khung bị thanh liên hệ nổi của site che. */
.gl-locmap__gate {
	position: absolute;
	left: calc((100% - var(--gl-locmap-board) - 32px) / 2);
	top: 18px;
	z-index: 4;
	transform: translateX(-50%);
	pointer-events: none;
	transition: opacity 0.35s ease, left 0.4s var(--gl-ease-out);
}

.gl-locmap.is-min .gl-locmap__gate,
.gl-locmap:not(:has(.gl-locmap__board)) .gl-locmap__gate {
	left: 50%;
}

.gl-locmap__gate span {
	display: inline-block;
	padding: 10px 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	background: color-mix(in srgb, var(--gl-green-dark) 90%, transparent);
	border-radius: var(--gl-radius-pill);
	box-shadow: 0 6px 18px rgba(40, 30, 20, 0.18);
}

.gl-locmap.is-active:not(.is-hint) .gl-locmap__gate {
	opacity: 0;
}

.gl-locmap__card {
	position: absolute;
	left: 16px;
	top: 16px;
	z-index: 6;
	width: min(300px, calc(100% - 32px));
	padding: 14px 44px 14px 16px;
	background: var(--gl-locmap-card);
	border-radius: 14px;
	box-shadow: 0 14px 36px rgba(60, 45, 30, 0.18);
	animation: gl-locmap-card 0.25s ease;
}

@keyframes gl-locmap-card {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.gl-locmap__card-k {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gl-gold);
}

.gl-locmap__card-n {
	display: block;
	margin: 4px 0 2px;
	font-family: var(--gl-font-serif);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.15;
	color: var(--gl-green-dark);
}

.gl-locmap__card-m {
	display: block;
	font-size: 13px;
	color: color-mix(in srgb, var(--gl-text) 85%, transparent);
}

.gl-locmap .gl-locmap__card-x {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 30px;
	height: 30px;
	padding: 0;
	font-size: 20px;
	color: var(--gl-text);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.gl-locmap .gl-locmap__card-x:hover {
	background: var(--gl-surface-2);
}

@media (prefers-reduced-motion: reduce) {
	.gl-locmap__home::before,
	.gl-locmap__home::after,
	.gl-locmap__pin.is-sel .gl-locmap__dot::after {
		animation: none;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.gl-locmap {
		--gl-locmap-board: min(330px, 44%);
	}
}

/* Điện thoại: bảng thông tin thành bảng trượt — thu gọn chỉ còn thanh tab (cao --gl-locmap-sheet), bấm tab / thanh
   kéo thì mở lên ~80% khung bản đồ. */
@media (max-width: 767px) {
	/* Cao vừa khoảng giữa header (58px) và thanh liên hệ đáy (~76px) để thanh tab của bảng trượt không bị che. */
	.gl-locmap {
		--gl-locmap-sheet: 76px;
		height: clamp(480px, calc(100svh - 150px), 700px);
		border-radius: var(--gl-radius-md);
	}

	.gl-locmap:not(:has(.gl-locmap__board)) {
		--gl-locmap-sheet: 0px;
	}

	.gl-locmap__stage::before {
		box-shadow: inset 0 0 40px 14px var(--gl-locmap-paper);
	}

	.gl-locmap__board {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		height: var(--gl-locmap-sheet);
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -10px 30px rgba(60, 45, 30, 0.12);
	}

	.gl-locmap.is-sheet .gl-locmap__board {
		height: 82%;
	}

	.gl-locmap .gl-locmap__handle {
		position: relative;
		display: block;
		flex-shrink: 0;
		width: 100%;
		height: 18px;
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
	}

	.gl-locmap .gl-locmap__handle::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 8px;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		background: var(--gl-border);
		border-radius: 2px;
	}

	.gl-locmap__bhead,
	.gl-locmap .gl-locmap__min,
	.gl-locmap .gl-locmap__open {
		display: none;
	}

	.gl-locmap.is-sheet .gl-locmap__bhead:has(.gl-locmap__logo) {
		display: block;
		padding: 2px 16px 12px;
	}

	.gl-locmap__tabs {
		margin: 0 12px 12px;
	}

	.gl-locmap__body {
		display: none;
		padding: 0 16px 16px;
	}

	.gl-locmap.is-sheet .gl-locmap__body {
		display: block;
	}

	.gl-locmap__ctl {
		right: 12px;
		bottom: calc(var(--gl-locmap-sheet) + 12px);
	}

	.gl-locmap .gl-locmap__ctl button {
		width: 38px;
		height: 38px;
	}

	.gl-locmap__gate,
	.gl-locmap.is-min .gl-locmap__gate {
		left: calc(50% - 25px);
		top: auto;
		bottom: calc(var(--gl-locmap-sheet) + 16px);
	}

	.gl-locmap__gate span {
		max-width: 230px;
		padding: 9px 14px;
		font-size: 10px;
		line-height: 1.5;
		text-align: center;
		white-space: normal;
	}

	.gl-locmap__card {
		left: 12px;
		top: auto;
		bottom: calc(var(--gl-locmap-sheet) + 12px);
		width: calc(100% - 74px);
	}

	.gl-locmap.is-sheet .gl-locmap__ctl,
	.gl-locmap.is-sheet .gl-locmap__gate,
	.gl-locmap.is-sheet .gl-locmap__card {
		visibility: hidden;
	}

	.gl-locmap__band {
		grid-template-columns: 62px 18px minmax(0, 1fr);
	}

	.gl-locmap__band:not(:has(.gl-locmap__mark)) {
		grid-template-columns: 62px minmax(0, 1fr);
	}

	.gl-locmap__badge {
		width: 62px;
		height: 62px;
	}

	.gl-locmap__badge b {
		font-size: 22px;
	}
}

/* ===== GIỚI THIỆU — "Nền section" = tối, ảnh tràn lề (field "intro_tone", section-intro.php; 2026-10-09). Máy tính:
   lưới 2 cột — cột chữ nền nâu đậm (lề trái canh đúng mép nội dung các section khác), ảnh chiếm phần còn lại tới sát mép
   phải màn hình, giữ nguyên tỉ lệ (không cắt — ảnh phối cảnh thường có chú thích vẽ sẵn sát mép). Điện thoại: ảnh full
   ngang ở trên, chữ dưới. Padding % đặt trên ".gl-intro__row" (không đặt trên cột chữ: % của item lưới tính theo bề
   rộng ô lưới chứ không theo section). ===== */
.gl-intro--dark.gl-section {
	padding: 0;
	background-color: var(--gl-green-dark);
	background-image: linear-gradient(110deg, transparent 0 22%, rgba(255, 255, 255, 0.045) 22% 36%, transparent 36%);
}

.gl-intro--dark .gl-intro__copy {
	position: relative;
	gap: var(--gl-gap-md);
	padding: var(--gl-section-y) var(--gl-section-x);
}

.gl-intro--dark .gl-eyebrow {
	color: var(--gl-gold-light);
}

.gl-intro--dark .gl-eyebrow::before {
	background: var(--gl-gold-light);
}

body.gamuda-landing .gl-intro--dark .gl-h2 {
	color: #f6efe4;
}

body.gamuda-landing .gl-intro--dark .gl-intro__copy p {
	color: rgba(246, 239, 228, 0.86);
	text-align: left;
}

.gl-intro--dark .gl-intro__copy strong {
	color: #fff;
}

.gl-intro--dark .gl-intro__desc-frame {
	padding: 0;
	border: 0;
}

.gl-intro--dark .gl-intro__desc-scroll {
	max-height: none;
	overflow: visible;
	padding-right: 0;
}

.gl-intro--dark .gl-intro__cta-desktop:empty,
.gl-intro--dark .gl-intro__cta-mobile:empty {
	display: none;
}

/* CTA trên nền tối: nút dạng link mặc định màu xanh đậm (trùng nền) → đổi sang vàng nhạt */
body.gamuda-landing .gl-intro--dark .gl-intro__cta-desktop .gl-btn,
body.gamuda-landing .gl-intro--dark .gl-intro__cta-desktop .gl-btn--link {
	color: var(--gl-gold-light);
}

body.gamuda-landing .gl-intro--dark .gl-intro__cta-desktop .gl-btn:hover {
	color: #fff;
}

body.gamuda-landing .gl-intro--dark .gl-intro__cta-mobile .gl-btn {
	background: var(--gl-gold);
	border-color: var(--gl-gold);
	color: #fff;
}

.gl-intro--dark .gl-intro__image {
	display: flex;
	align-items: center;
	max-width: none;
}

.gl-intro--dark .gl-intro__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.gl-intro--dark .gl-intro__mark {
	align-self: flex-end;
	width: 96px;
	height: auto;
	margin-top: var(--gl-gap-sm);
}

@media (min-width: 1360px) {
	.gl-intro--dark .gl-intro__row {
		display: grid;
		grid-template-columns: minmax(420px, 0.8fr) minmax(0, 1.2fr);
		gap: 0;
		align-items: stretch;
		max-width: none;
		padding-left: calc(var(--gl-section-x) + max(0px, (100% - 2 * var(--gl-section-x) - var(--gl-container-max)) / 2));
	}

	/* Chữ gọn (đệm trên/dưới 56px, biểu tượng 96px) để cột chữ không cao hơn ảnh nhiều — ảnh giữ trọn tỉ lệ nên chỗ
	   chênh hiện thành dải nền tối trên/dưới ảnh. Màn rộng (>= 1600px) ảnh đủ cao, trả lại đệm/biểu tượng lớn. */
	.gl-intro--dark .gl-intro__copy {
		justify-content: center;
		max-width: none;
		padding: 56px var(--gl-gap-2xl) 56px 0;
	}

	.gl-intro--dark .gl-intro__mark {
		width: 96px;
		margin-top: var(--gl-gap-sm);
	}

	.gl-intro--dark.gl-intro--image-left .gl-intro__row {
		grid-template-columns: minmax(0, 1.2fr) minmax(420px, 0.8fr);
		padding-left: 0;
		padding-right: calc(var(--gl-section-x) + max(0px, (100% - 2 * var(--gl-section-x) - var(--gl-container-max)) / 2));
	}

	.gl-intro--dark.gl-intro--image-left .gl-intro__image {
		order: -1;
	}

	.gl-intro--dark.gl-intro--image-left .gl-intro__copy {
		padding: 56px 0 56px var(--gl-gap-2xl);
	}
}

@media (min-width: 1600px) {
	.gl-intro--dark .gl-intro__copy {
		padding-top: var(--gl-section-y);
		padding-bottom: var(--gl-section-y);
	}

	.gl-intro--dark .gl-intro__mark {
		width: 150px;
		margin-top: var(--gl-gap-lg);
	}
}

/* < 1360px: chia 2 cột thì cột chữ quá hẹp, cao hơn ảnh nhiều — ảnh full ngang ở trên, chữ dưới (gồm laptop 1280px). */
@media (max-width: 1359px) {
	.gl-intro--dark .gl-intro__row,
	.gl-intro--dark.gl-intro--image-left .gl-intro__row {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.gl-intro--dark .gl-intro__image {
		order: -1;
		justify-content: center;
		width: 100%;
	}

	/* Ảnh xếp trên không cao quá 78% màn hình (laptop 1280×800: ảnh full ngang sẽ cao hơn cả màn hình) — thu nhỏ đúng
	   tỉ lệ, canh giữa trên nền tối, không cắt. */
	.gl-intro--dark .gl-intro__image img {
		width: auto;
		max-width: 100%;
		max-height: 78vh;
	}

	.gl-intro--dark .gl-intro__copy {
		max-width: none;
		width: 100%;
	}

	.gl-intro--dark .gl-intro__copy > * {
		max-width: 760px;
	}

	.gl-intro--dark .gl-intro__copy > .gl-intro__mark {
		max-width: none;
	}

	.gl-intro--dark .gl-intro__cta-mobile {
		padding: 0 var(--gl-section-x) var(--gl-section-y);
		margin-top: 0;
	}
}


/* ===== VỊ TRÍ — kiểu "Nhóm tiện ích" (loc_display = groups): banner ảnh + lưới thẻ số lượng/chip ===== */
.gl-locgrp__banner {
	margin-top: var(--gl-gap-xl);
	height: clamp(220px, 28vw, 400px);
	background-size: cover;
	background-position: center;
	background-color: var(--gl-green-dark);
	border: 1px solid var(--gl-border-gold);
	border-radius: var(--gl-radius-lg);
	cursor: zoom-in;
}
.gl-locgrp {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gl-gap-md);
	margin-top: var(--gl-gap-xl);
	align-items: start;
}
.gl-locgrp__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	background: var(--gl-white);
	border: 1px solid var(--gl-border-gold);
	border-radius: var(--gl-radius-md);
}
.gl-locgrp__head {
	display: flex;
	align-items: center;
	gap: 14px;
}
.gl-locgrp__count {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--gl-green);
	color: var(--gl-gold-light);
	font-family: var(--gl-font-serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}
.gl-locgrp__title {
	margin: 0;
	font-family: var(--gl-font-serif);
	font-size: 26px;
	line-height: 1.15;
	color: var(--gl-green);
}
.gl-locgrp__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gl-locgrp__chips li {
	margin: 0;
	padding: 6px 12px;
	background: var(--gl-surface-2);
	border: 1px solid var(--gl-border-gold);
	border-radius: var(--gl-radius-pill);
	font-size: 13px;
	line-height: 1.35;
	color: var(--gl-text);
}
.gl-locgrp__card.is-collapsed .gl-locgrp__chips li:nth-child(n+9) { display: none; }
.gl-locgrp__more {
	align-self: flex-start;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	font-family: var(--gl-font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--gl-gold);
	cursor: pointer;
}
.gl-locgrp__more:hover { text-decoration: underline; box-shadow: none; background: none; }
@media (max-width: 1023px) {
	.gl-locgrp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.gl-locgrp { grid-template-columns: 1fr; }
	.gl-locgrp__card { padding: 20px; }
}

/* ===== AVA Land (avaland.com.vn, 2026-10-28): brand overrides (AVA Center guideline navy #1e376f / gold #149cb2) ===== */
.gl-nav.gl-hc.is-solid {
	background: rgba(255, 255, 255, 0.96);
	border-bottom-color: rgba(30, 55, 111, 0.10);
}

/* Checklist trên nền tối (intro tối, đăng ký, danh mục dự án, form nhanh tối): chữ sáng + dấu tick vàng thương hiệu.
   Rule gốc hard-code tick navy %231e376f -> chìm trên nền navy. */
body.gamuda-landing .gl-intro--dark .gl-rich-content ul.gl-list-check li,
body.gamuda-landing .gl-intro--dark .gl-intro__copy li {
	color: rgba(255, 255, 255, 0.88);
}
body.gamuda-landing .gl-intro--dark .gl-rich-content ul.gl-list-check li strong { color: #fff; }
body.gamuda-landing .gl-intro--dark .gl-rich-content ul.gl-list-check li::before,
body.gamuda-landing .gl-project-categories .gl-rich-content ul.gl-list-check li::before,
body.gamuda-landing .gl-registration .gl-rich-content ul.gl-list-check li::before,
body.gamuda-landing .gl-qf--dark .gl-rich-content ul.gl-list-check li::before {
	background: rgba(20, 156, 178, 0.18)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 10.4L8.5 12.9L14 7.4' stroke='%23149cb2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / 12px no-repeat;
}

/* ===== 28/10/2026 — sửa theo góp ý trên ava-lumina.com (cùng theme) ===== */
/* Card có ảnh khác tỉ lệ (mặt bằng 3D vuông + ảnh nội thất ngang) -> tiêu đề/mô tả lệch dòng: khung ảnh cố định. */
body.gamuda-landing #san-pham .gl-principle-card__media { aspect-ratio: 1 / 1; }
body.gamuda-landing #tang-tret .gl-principle-card__media { aspect-ratio: 4 / 3; }
body.gamuda-landing #san-pham .gl-principle-card__media img,
body.gamuda-landing #tang-tret .gl-principle-card__media img { height: 100%; object-fit: cover; }
/* Chuỗi dài không có chỗ ngắt (VD "Hager/Legrand/Schneider/Panasonic") làm card tràn ngang trên màn hình ~360px. */
.gl-principle-card__desc,
.gl-principle-card__title { overflow-wrap: anywhere; }
.gl-principle-grid > * { min-width: 0; }
/* Email liên hệ dài */
.gl-contact-info__item-body { min-width: 0; }
.gl-contact-info__item-value,
.gl-contact-info__item-value a { overflow-wrap: anywhere; }

/* ===== C-Holdings (choldings.vn, 29/10/2026) ===== */
/* Icon tick checklist: nền teal 18–25% + nét teal/navy trên nền navy bị mờ (user báo) -> tròn teal ĐẶC + tick trắng,
   rõ trên cả nền sáng lẫn nền tối (intro tối, đăng ký, danh mục dự án, form nhanh tối). */
body.gamuda-landing .gl-rich-content ul.gl-list-check li::before,
body.gamuda-landing .gl-intro--dark .gl-rich-content ul.gl-list-check li::before,
body.gamuda-landing .gl-project-categories .gl-rich-content ul.gl-list-check li::before,
body.gamuda-landing .gl-registration .gl-rich-content ul.gl-list-check li::before,
body.gamuda-landing .gl-qf--dark .gl-rich-content ul.gl-list-check li::before {
	background: #149cb2
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 10.4L8.5 12.9L14 7.4' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / 13px no-repeat;
	box-shadow: 0 0 0 3px rgba(20, 156, 178, 0.18);
}

/* Bản đồ "Vị Trí": desktop cũ dùng khung cao cố định 420px + "cover" -> ảnh bản đồ dọc/có chú thích bên phải bị cắt
   (user báo sơ đồ vị trí The Felix mất danh sách tiện ích). Desktop cũng dùng "contain" + đúng tỉ lệ ảnh như mobile
   (biến --gl-map-ratio do section-location.php gán) -> hiện TRỌN ảnh. Kiểu "groups" (ảnh full ngang) giới hạn bề
   ngang để ảnh tỉ lệ ~16:10 không cao quá màn hình. */
.gl-location__map-bg {
	flex: none;
	aspect-ratio: var(--gl-map-ratio, 16 / 9);
	min-height: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: #fff;
}
.gl-location--groups .gl-location__map {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
/* Kiểu "groups": banner bản đồ cũng hiện TRỌN ảnh theo tỉ lệ thật (template gán --gl-map-ratio), giới hạn bề ngang. */
.gl-locgrp__banner {
	height: auto;
	aspect-ratio: var(--gl-map-ratio, 16 / 9);
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: #fff;
}
/* Trang nội dung (page-gamuda-content.php: Chính sách bảo mật, Điều khoản sử dụng): h1 dùng ".gl-h1" (mặc định trắng cho
   hero ảnh) trên nền sáng -> không đọc được (user báo 29/10/2026). Đổi sang navy thương hiệu. */
body .gl-legal-page .gl-legal-page__title,
body.gamuda-landing .gl-legal-page .gl-legal-page__title {
	color: var(--gl-green);
}
/* Icon tick ở popup đăng ký (".gl-popup__check" bọc svg gl_icon_check, nét teal mờ trên nền tối) -> cùng kiểu với
   checklist: tròn teal đặc + tick trắng (user báo 29/10/2026). Ẩn svg gốc, vẽ bằng nền. */
.gl-popup__check {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #149cb2
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 10.4L8.5 12.9L14 7.4' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / 13px no-repeat;
	box-shadow: 0 0 0 3px rgba(20, 156, 178, 0.18);
}
.gl-popup__check svg { display: none !important; }

/* choldings.vn 29/10/2026 — khối "Các Dự Án" (#du-an, trang chủ) có 4 dự án (Solina, The Felix, The Maison, C-SkyView):
   lưới mặc định 3 cột để lại 1 thẻ lẻ ở hàng 2 -> desktop rộng xếp đủ 4 cột khi có đúng 4 thẻ; tablet vẫn 2 cột (2x2), mobile 1 cột. */
@media (min-width: 1101px) {
	#du-an .gl-amenities__grid--featured:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ===== BANNER SLIDE (section-wide-banner.php, port từ thesolina.com sang choldings.vn 31/10/2026) =====
   Ảnh slide ngang hiện ĐÚNG TỈ LỆ GỐC (biến --gl-wb-ratio lấy từ ảnh đầu tiên), không cắt chữ in trên slide.
   Nền: Trắng / Ngà (mặc định của trang) / Tối — cùng quy ước các layout khác. "--tight": bỏ khoảng dưới để
   section chữ giải thích ngay bên dưới (cùng màu nền) liền thành 1 khối. */
.gl-wide-banner--white { background: var(--gl-white); }
.gl-wide-banner--dark { background: var(--gl-green-dark); }
.gl-wide-banner--tight { padding-bottom: 0; }
.gl-wide-banner--tight + .gl-section { padding-top: var(--gl-gap-lg, 40px); }
.gl-wide-banner__figure {
	margin: 0;
	border-radius: var(--gl-radius-lg);
	overflow: hidden;
	aspect-ratio: var(--gl-wb-ratio, 4 / 1);
	background: var(--gl-surface-2);
	box-shadow: 0 18px 40px -24px rgba(19, 36, 77, 0.40);
}
.gl-wide-banner__figure img,
.gl-wide-banner__slider .gl-tab-content__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: zoom-in;
}
.gl-wide-banner__caption {
	margin-top: 10px;
	font-size: 13px;
	font-style: italic;
	text-align: center;
	color: var(--gl-text);
	opacity: 0.8;
}
.gl-wide-banner__slider .flickity-viewport,
.gl-wide-banner__slider:not(.flickity-enabled) .gl-tab-content__slide:first-child {
	aspect-ratio: var(--gl-wb-ratio, 4 / 1);
	border-radius: var(--gl-radius-lg);
	overflow: hidden;
}
/* Bóng đổ CHỈ bao khung ảnh (viewport), không bao vùng chấm phân trang bên dưới (trước đây trông như khung trắng thừa). */
.gl-wide-banner__slider .flickity-viewport { box-shadow: 0 18px 40px -24px rgba(19, 36, 77, 0.40); }
.gl-wide-banner--dark .flickity-page-dots .dot,
.gl-wide-banner--dark .flickity-page-dots .dot.is-selected {
	border-color: var(--gl-white);
	background: var(--gl-white);
}
.gl-wide-banner--dark .gl-section-header .gl-rich-content p { color: rgba(255, 255, 255, 0.75); }
/* Mobile: slide 4:1 rất thấp (~85px) -> bo góc nhỏ hơn; người dùng bấm để phóng to đọc chữ. */
@media (max-width: 767px) {
	.gl-wide-banner__figure,
	.gl-wide-banner__slider,
	.gl-wide-banner__slider .flickity-viewport { border-radius: 10px; }
	.gl-wide-banner__slider .flickity-prev-next-button { display: none; }
}

/* choldings.vn 31/10/2026 — "Các Dự Án" có 5 dự án (thêm The Icon sắp ra mắt): desktop 3 thẻ hàng trên + 2 thẻ rộng hàng dưới
   (lưới 6 cột, mỗi thẻ span 2, thẻ 4–5 span 3) thay vì 3 + 1 thẻ lẻ + 1 ô trống. */
@media (min-width: 1101px) {
	#du-an .gl-amenities__grid--featured:has(> :nth-child(5):last-child) {
		grid-template-columns: repeat(6, 1fr);
	}
	#du-an .gl-amenities__grid--featured:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
	#du-an .gl-amenities__grid--featured:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
}