/* Casa Luna — global CSS (reset, typography, layout base) */
/* Brand Constants v1.0 — xem muc 9 CLAUDE.md */

/* ============================================
   FONT CHU RIENG (SVN-Schrifted Serif Subhead) — thay Google Fonts
   Playfair Display + Mulish. File goc .otf trong /font, da convert
   sang .woff2 trong assets/fonts/. Chi co 1 weight/file nen khai bao
   font-weight: 100 900 (range) de trinh duyet KHONG tu synth chu dam
   (faux-bold) khi CSS goi font-weight 600/700 o cac noi khac.
   ============================================ */
@font-face {
	font-family: 'SVN Schrifted Subhead Medium';
	src: url('../fonts/SVN-SchriftedSerifSubhead-Medium.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SVN Schrifted Subhead Regular';
	src: url('../fonts/SVN-SchriftedSerifSubhead-Regular.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Playfair Display Bold — TU HOST (khong con qua Google Fonts CDN) chi dung
   rieng cho so "49" o section Kiet tac (.casaluna-kiet-tac__number). Truoc
   day load qua Google Fonts CSS co "font-display: swap" -> co khoang thoi
   gian ngan hien font fallback (metrics khac, leading khac) truoc khi
   Playfair tai xong va "nhay" vao, gay lech vi tri nhin thay khi chup man
   hinh dung luc dang fallback. Tu host + preload (xem inc/enqueue.php) de
   tai ngay tu dau, khong con phu thuoc mang ngoai/tinh trang swap. Chi lay
   subset "latin" (U+0000-00FF di du 0-9, khong can dau tieng Viet vi chi
   dung cho so). */
@font-face {
	font-family: 'Playfair Display';
	src: url('../fonts/PlayfairDisplay-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: block;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122;
}

/* ============================================
   QUY UOC BREAKPOINT (chuan hoa 2026-07-29; cap nhat: mobile & tablet CHUNG 1
   giao dien theo yeu cau user)
   CSS khong cho dung bien (var()) trong dieu kien @media, nen day la QUY UOC
   bang so literal — TOAN BO file NAY chi dung DUNG 1 MOC duy nhat (moi moc le
   640/720/768/780/900 truoc day da gom het ve 1024):

     - Mobile + Tablet:  @media (max-width: 1024px)  <-- MOC DUY NHAT. Mobile va
         tablet DUNG CHUNG 1 giao dien; chi desktop (>1024px) khac. JS scroll
         cung dung dung moc nay: matchMedia('(max-width:1024px)') -> mobile/
         tablet cuon TU NHIEN, desktop moi dung fullpage-stepper + Lenis + dot-nav.
         (Yeu cau user: iPad mini/gen10/Pro11... deu phai giong mobile, ke ca
         section 2 Ho ban nguyet — da bo tang 640 rieng cho dien thoai hep.)

   Quy tac chon moc khi them rule moi: LUON dung 1024. Neu that su can tinh chinh
   rieng cho dien thoai rat hep thi moi them 1 moc nho hon (vd 480), va nho chon
   huong "GOM/XEP CHONG SOM HON" (vd 2 cot -> 1 cot o moc RONG hon) de khong lo
   lai layout vo o dai giua.
   ============================================ */

:root {
	/* Typography — SVN-Schrifted Serif Subhead (thay Playfair Display / Mulish) */
	--font-heading: 'SVN Schrifted Subhead Medium', serif;
	--font-body: 'SVN Schrifted Subhead Regular', sans-serif;

	/* Color System */
	--color-primary: #CCAA75;   /* Champagne Gold — CTA, highlight, active state, icon */
	--color-primary-rgb: 204, 170, 117;
	--color-secondary: #FFE5C9; /* Bronze — hover, divider, border, small accent */
	--color-secondary-rgb: 162, 111, 57;
	--color-accent: #B98849;    /* Rich Gold — dung han che */

	/* Neutrals */
	--color-dark: #2A180F;
	--color-dark-2: #442817;
	--color-dark-3: #694325;
	--color-surface: #F7F3EC;
	--color-surface-2: #EFE6D8;

	/* Text tren nen sang (mac dinh cho toan site hien tai) */
	--text-heading: var(--color-dark-2);
	--text-body: #5B4A3A;
	--text-muted: #997F5D;

	/* Text tren nen toi (Background 01/03) */
	--text-heading-on-dark: #F7F1E7;
	--text-body-on-dark: #DDD2C2;
	--text-muted-on-dark: #BFAE96;

	/* Border / Shadow / Radius / Motion */
	--border-color: rgba(var(--color-primary-rgb), 0.25);
	--shadow-soft: 0 20px 80px rgba(83, 55, 28, 0.18);
	--radius-base: 24px;
	--radius-pill: 999px;
	--motion: 0.45s cubic-bezier(0.4, 0, 0.2, 1);

	/* Background gradients */
	--gradient-footer: linear-gradient(135deg, #2A180F 0%, #442817 30%, #694325 65%, #997F5D 100%);
	--gradient-reading: linear-gradient(180deg, #F7F3EC 0%, #EFE6D8 100%);
	--gradient-section: linear-gradient(120deg, #442817 0%, #835C37 25%, #B69667 55%, #CCAA75 100%);

	--header-height: 80px;

	/* ============================================================
	   TOKEN CỠ CHỮ SECTION — DÙNG CHUNG cho MỌI section (heading + sub +
	   body) để đồng nhất. Chuẩn lấy từ section "Tiện ích".
	   ⚠️ KHI THÊM SECTION MỚI: heading/subheading/body PHẢI dùng 3 biến này,
	   KHÔNG tự đặt font-size riêng (tránh lệch cỡ giữa các section). Muốn
	   đổi cỡ toàn site chỉ sửa Ở ĐÂY (desktop) + block @media ≤1024 (mobile).
	   ============================================================ */
	--fs-section-heading: clamp(1.35rem, 2.7vw, 3.06rem); /* desktop main heading -10% */
	--fs-section-subheading: clamp(1.05rem, 1.5vw, 1.8rem);
	--fs-section-body: clamp(0.9rem, 1vw, 1.05rem);
}

/* Token cỡ chữ section — giá trị cho MOBILE + TABLET (≤1024) */
@media (max-width: 1024px) {
	:root {
		--fs-section-heading: clamp(1.5rem, 6vw, 2.6rem);
		--fs-section-subheading: clamp(0.85rem, 3.2vw, 1.3rem);
		--fs-section-body: clamp(0.95rem, 2.4vw, 1.1rem);
	}
}

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	line-height: 1.75;
	color: var(--text-body);
	background-color: var(--color-surface);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.1;
	color: var(--text-heading);
	text-transform: uppercase;
	margin: 0 0 1rem;
}

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

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ============================================
   One Page Scroll — Lenis (dung lam engine scrollTo)
   + stepper tu viet trong main.js: wheel/touch/click deu
   nhay dung 1 section moi lan thao tac (kieu fullpage).
   KHONG dung scroll-snap-type/scroll-behavior CSS o day —
   JS dieu khien toan bo de tranh double-snap.
   ============================================ */

body.casaluna-onepage-body {
	/* Chi .casaluna-landing duoc cuon. Neu de body cuon binh thuong,
	   chieu cao thuc te (main 100vh + noi dung khac) se vuot 100vh
	   va tao ra 2 thanh cuon chong nhau. */
	height: 100vh;
	/* 100dvh (dynamic viewport height, Safari 15.4+) — GHI DE 100vh o tren.
	   Tren iOS Safari, "100vh" la chieu cao viewport LON NHAT co dinh (khong
	   tinh toolbar dia chi/thanh cong cu dang thu gon), KHONG cap nhat theo
	   ban phim ao mo/dong. Ket hop voi kien truc "than page khong tu cuon, chi
	   div .casaluna-landing cuon rieng" -> khi ban phim mo/dong, chieu cao
	   100vh cu khong khop voi khong gian thuc te WebKit vua thu/gian, gay
	   hang loat trieu chung: header dinh sai vi tri, video Hero bi pause giua
	   chung/ket dinh 1 frame, khung video "bi keo len chi con thay 1/3" khi
	   cuon. "100dvh" tu dong cap nhat theo khong gian THAT SU con lai sau khi
	   tru ban phim/toolbar -> khop voi WebKit, giai quyet tan goc thay vi va
	   theo tung trieu chung rieng le bang JS. Trinh duyet khong ho tro dvh se
	   bo qua dong nay, giu nguyen 100vh o tren (khong hong nguoc). */
	height: 100dvh;
	overflow: hidden;
}

/* Xem initMobileNativeScrollOnKeyboard() trong main.js. 100dvh van khong du:
   tren iOS Safari, ban phim ao KHONG resize layout viewport (khac Android) —
   no chi thu nho "visual viewport" va TU CUON trang de giu o input dang go
   trong tam nhin, dua tren gia dinh trang cuon binh thuong (document/body).
   Kien truc "body khoa cung, chi 1 div con (.casaluna-landing) tu cuon" hoan
   toan xa la voi co che nay -> iOS tinh sai, ket qua la Hero (o dau trang)
   gan nhu bien mat khi cuon LEN trong luc ban phim con mo (da co user bao loi
   thuc te, chup man hinh xac nhan). Fix TAN GOC: trong luc dang go (focus 1
   o input), TAM THOI "mo khoa" — chuyen body/.casaluna-landing ve cuon TU
   NHIEN cua trinh duyet (bo he.overflow:hidden + height co dinh), de iOS tu
   xu ly dung nhu 1 trang binh thuong. Khoa lai + khoi phuc vi tri cuon ngay
   khi roi focus. */
body.casaluna-onepage-body.is-keyboard-open {
	height: auto;
	overflow: visible;
}

/* ============================================
   Header — theo mau tham chieu: logo trai, ben phai la
   CTA pill + lang switch (vong tron) + icon 360 (placeholder,
   tro /360) + hamburger. Menu section an trong overlay
   (.site-nav-overlay), mo qua hamburger.
   ============================================ */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--header-height);
	background-color: transparent;
	transition: opacity 0.5s ease, visibility 0.5s ease, background-color var(--motion);
}

/* Xem initMobileHeaderKeyboardFix() trong main.js — fix bug WebKit/iOS: header
   fixed + ban phim ao mo/dong tren trang dung div cuon rieng (khong phai
   body) lam header bi dinh sai vi tri. JS dung visualViewport API de bu offset
   thuc te bang inline "top" (lien tuc, khong phu thuoc focus/blur) — CO Y
   dung "top" thay vi "transform": transform tren .site-header se bien no
   thanh containing block cho MOI phan tu con position:fixed/absolute (vd
   .site-header__cta — nut "Lien he tu van" fixed goc man hinh), khien nut do
   bi "dinh" theo header thay vi nam yen o viewport — da gap bug that te nay.
   transition o day CHI ap dung cho opacity/visibility/background (hover,
   an/hien theo section), KHONG dat transition cho top de viec bu tru theo
   doi sat thoi gian thuc, khong bi tre/giat. */

/* Header trong suot HOAN TOAN chi tren trang landing (one-page scroll, luon
   nam tren cac section co the sang/toi thay doi lien tuc — xem
   .casaluna-onepage-body trong body_class filter, functions.php). Cac trang
   con lai (single/archive tin tuc...) luon co 1 nen sang co dinh phia sau
   (Background 02) nen header can nen dac de khong bi "chim" vao noi dung
   cuon ben duoi. Mau nen: #290b00 (dung LAI dung mau header mobile cua trang
   landing, xem rule .site-header mobile ben duoi) thay vi mau kem/trang cu —
   theo yeu cau user, muon header dong nhat voi trang chu thay vi lac tong
   sang trang. */
body:not(.casaluna-onepage-body) .site-header {
	background-color: #290b00;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}

/* Header mobile/tablet: header-height rieng (thap hon desktop) + nen mau dac
   #290b00 (thay vi trong suot nhu desktop). Header AN HOAN TOAN ngay tu luc
   vua load trang (dang o section DAU TIEN — Hero) — chi "hien ra" (fade-in)
   khi da cuon VAO section THU HAI duoc ~30% CHINH CHIEU CAO cua no. Toggle
   bang class .is-visible — do scroll listener rieng (getBoundingClientRect,
   khong phai IntersectionObserver vi can tinh % theo target chu khong phai
   % theo viewport), xem initMobileScroll() trong main.js. */
@media (max-width: 1024px) {
	:root {
		--header-height: 57px;
	}

	body.casaluna-onepage-body .site-header {
		background-color: #290b00;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	body.casaluna-onepage-body .site-header.is-visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* Cum CTA/EN/360/MENU tren mobile: KHONG doi mau tu dong theo section
	   (khac desktop) — luon giu 1 mau co dinh (mac dinh Bronze), bo qua gia
	   tri --header-accent-color ma initHeaderTheme() set tren :root theo
	   tung section. Khai bao lai truc tiep tren .site-header__actions se
	   thang gia tri ke thua tu :root (khong can !important, xem tuong tu ky
	   thuat o rule gioi-thieu desktop ben duoi). */
	.site-header__actions {
		--header-accent-color: var(--color-secondary);
		--header-accent-color-rgb: var(--color-secondary-rgb);
	}
}

.site-header__inner {
	height: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.site-header__logo img {
	height: 40px;
	width: auto;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Mau cum header (CTA/EN/360/MENU) + dot-nav duoc dieu khien qua 1 CSS
   custom property DUY NHAT — --header-accent-color (+ ban RGB di kem de
   dung trong rgba() o trang thai hover). Bien nay do main.js SET TRUC TIEP
   qua inline style (document.documentElement.style.setProperty(...)) moi
   khi section active co attribute data-header-color (xem initHeaderTheme()).
   Ly do bo cach cu (toggle class .is-on-dark + rule CSS o day thang cascade):
   da debug rat lau (ke ca dung ID selector + !important) van khong thang
   duoc 1 stylesheet AN (WordPress tu in <style id="global-styles-inline-css">
   ngoai tam kiem soat cua wp_dequeue_style('global-styles') — nam ngoai
   du doan). Inline style qua JS thi LUON thang moi thu (tru !important cua
   nguoi khac, ma o day khong co), nen bulletproof tuyet doi. */
:root {
	--header-accent-color: var(--color-secondary);
	--header-accent-color-rgb: var(--color-secondary-rgb);
}

/* Desktop: section "Tong quan" (gioi-thieu) co nen sang ngay vung header ->
   mau gold #CCAA75 (tu data-header-color) bi triet tieu, kho thay. Doi RIENG cum
   header actions (CTA/EN/360/MENU) sang cream sang de noi bat. Ky thuat: set lai
   --header-accent-color tren .site-header__actions — la to tien GAN cac nut hon
   :root, nen cac nut lay gia tri nay thay vi gia tri inline JS set tren :root
   (khong can !important). Chi desktop (>=1025px), chi khi section nay dang active
   (moc data-active-section do initHeaderTheme() dat). Logo nam ngoai __actions nen
   khong bi anh huong; dot-nav (ngoai __actions) van theo mau goc. */
@media (min-width: 1025px) {
	:root[data-active-section="gioi-thieu"] .site-header__actions {
		--header-accent-color: #FFFBF1;
		--header-accent-color-rgb: 255, 251, 241;
	}
}

.site-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.25rem;
	position: relative;
	border: 1px solid var(--header-accent-color);
	border-radius: var(--radius-pill);
	color: var(--header-accent-color);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--motion), color var(--motion), border-color var(--motion);
}

.site-header__cta:hover {
	background-color: rgba(var(--header-accent-color-rgb), 0.08);
}

/* Dai sang gold chay doc theo vien khi hover — conic-gradient xoay, mask
   chi hien phan VIEN (border-box tru content-box, giong ky thuat "animated
   gradient border"), tao cam giac 1 dai sang muot troi quanh nut thay vi
   1 cham don le. @property --angle de trinh duyet noi suy muot goc xoay
   (khong co no van hoat dong, chi mat hieu ung xoay muot — degrade nhe). */
@property --casaluna-spark-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.site-header__cta::after,
.site-header__circle-btn::after {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1.5px;
	background: conic-gradient(
		from var(--casaluna-spark-angle),
		transparent 0deg,
		transparent 260deg,
		rgba(var(--header-accent-color-rgb), 0.9) 300deg,
		var(--header-accent-color) 320deg,
		rgba(var(--header-accent-color-rgb), 0.9) 340deg,
		transparent 360deg
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

.site-header__cta:hover::after,
.site-header__circle-btn:hover::after {
	opacity: 1;
	animation: casaluna-header-spark 2.2s linear infinite;
}

@keyframes casaluna-header-spark {
	from {
		--casaluna-spark-angle: 0deg;
	}

	to {
		--casaluna-spark-angle: 360deg;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header__cta::after,
	.site-header__circle-btn::after {
		display: none;
	}
}

.site-header__circle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	position: relative;
	border: 1px solid var(--header-accent-color);
	border-radius: 50%;
	color: var(--header-accent-color);
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	flex-shrink: 0;
	transition: background-color var(--motion), color var(--motion), border-color var(--motion);
}

.site-header__circle-btn:hover {
	background-color: rgba(var(--header-accent-color-rgb), 0.08);
}

.site-header__circle-btn--360 {
	/* Circle giu cung kich thuoc voi circle "EN" — chi chu "360" dam va lon hon. */
	font-size: 0.75rem;
	font-weight: 700;
}

/* Mobile: dua nut CTA "Lien he tu van" RA KHOI hang header, co dinh o goc
   duoi-phai man hinh (floating) — de hang header con lai (logo + EN + 360 +
   MENU) du cho, logo hien ro (truoc day CTA pill dai chiem het cho, logo bi
   day mat). An toan khong dung: hero scroll-indicator da display:none tren
   mobile, nut mute nam goc TRAI. z-index 95 < overlay (200) nen overlay menu
   khi mo van che duoc CTA. Them nen toi + blur cho chu/gold border doc ro khi
   troi tren anh sang (vd ho boi section 2). PHAI dat rule nay SAU rule
   .site-header__cta goc (source order) de override position:relative — neu dat
   truoc se bi rule goc thang cascade (cung specificity), xem bai hoc o comment
   .casaluna-hero__scroll-indicator mobile. */
@media (max-width: 1024px) {
	/* "Quiet luxury" chip: nen TOI dac (gradient nau am toi, khong phai gold
	   sang chua — tranh cam giac "nut game/qua sinh dong" cua ban gradient
	   gold truoc), vien hairline gold mong, chu GOLD dung font BODY (khong
	   phai Playfair) uppercase + letter-spacing rong kieu editorial. Khong
	   animation/glow — tinh cham, dung 1 lan roi thoi (giong ngon ngu Secondary
	   Button cua brand nhung dac nen thay vi trong suot de khong "chim" vao
	   anh nen). */
	.site-header__cta {
		position: fixed;
		right: 1.25rem;
		bottom: 1.25rem;
		z-index: 95;
		gap: 0.55rem;
		padding: 0.8rem 1.4rem;
		border: 1px solid rgba(204, 170, 117, 0.55);
		border-radius: 30px;
		background: linear-gradient(155deg, #290B00 0%, #2A180F 100%);
		color: #FBE4C1;
		font-family: var(--font-body);
		font-weight: 700;
		font-size: 0.72rem;
		letter-spacing: 0.12em;
		box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
	}

	.site-header__cta:hover,
	.site-header__cta:active {
		border-color: var(--color-primary);
		background: linear-gradient(155deg, #442817 0%, #2A180F 100%);
	}

	/* An lop "spark" vien xoay (thiet ke cho nut ghost-outline goc) — voi vien
	   hairline tinh gian nhu hien tai thi khong can hieu ung dong them. */
	.site-header__cta::after {
		display: none;
	}

	/* Logo nho lai 30% tren mobile (40px -> 28px) theo yeu cau user. */
	.site-header__logo img {
		height: 28px;
	}
}

.site-header__menu-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	height: 40px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}

.site-header__menu-toggle-icon {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 26px;
}

.site-header__menu-toggle-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--header-accent-color);
}

.site-header__menu-toggle-bar {
	display: block;
	width: 18px;
	height: 2px;
	background-color: var(--header-accent-color);
	transition: transform var(--motion), opacity var(--motion), width var(--motion), background-color var(--motion);
}

.site-header__menu-toggle-bar:nth-child(1) {
	/* Gach tren cung dai hon 2 gach duoi. */
	width: 26px;
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(1) {
	width: 22px;
	transform: translateY(8px) rotate(45deg);
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(2) {
	opacity: 0;
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ============================================
   Menu overlay — thiet ke lai theo mau tham chieu: anh nen that (bg-footer-2.jpg,
   dat qua CSS custom property inline tu header.php — file CSS tinh khong
   goi duoc content_url()) + overlay toi deu, logo trai, danh sach section
   danh so (01, 02...) trong 1 panel ban trong ben phai, hang duoi cung la
   hotline + social (dung lai chung du lieu/string voi Footer —
   casaluna_footer_social_links(), footer_hotline_* trong casaluna_strings()
   — xem header.php).
   Luu y: KHONG dung --gradient-section (gradient cheo sang dan tu toi sang
   sang o goc phai) — da thu va lam social icon o goc phai bi "chim" vao
   nen qua sang (vien vang mo tren nen vang sang = gan nhu vo hinh). Anh
   that + overlay toi DEU giai quyet dung van de nay. */
.site-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	padding: clamp(1.5rem, 4vw, 4rem);
	background-image:
		linear-gradient(135deg, rgba(42, 24, 15, 0.62) 0%, rgba(68, 40, 23, 0.58) 50%, rgba(105, 67, 37, 0.55) 100%),
		var(--casaluna-nav-overlay-bg-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--color-dark-2);
	opacity: 0;
	visibility: hidden;
	transform: scale(1.035);
	transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.85s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.7s;
}

.site-nav-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

/* Hieu ung xuat hien "ultra luxury" — cham, muot, so le tung phan (logo ->
   tung muc menu -> hang hotline/social), thay vi bung ra dot ngot tat ca
   cung luc. Dong lai thi khong can so le (fade nhanh, gon), chi mo moi
   "dieu vu". */
.site-nav-overlay__brand,
.site-nav-overlay__list li,
.site-nav-overlay__footer {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-nav-overlay.is-open .site-nav-overlay__brand {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.15s;
}

.site-nav-overlay.is-open .site-nav-overlay__list li {
	opacity: 1;
	transform: translateY(0);
}

.site-nav-overlay.is-open .site-nav-overlay__list li:nth-child(1) {
	transition-delay: 0.22s;
}

.site-nav-overlay.is-open .site-nav-overlay__list li:nth-child(2) {
	transition-delay: 0.28s;
}

.site-nav-overlay.is-open .site-nav-overlay__list li:nth-child(3) {
	transition-delay: 0.34s;
}

.site-nav-overlay.is-open .site-nav-overlay__list li:nth-child(4) {
	transition-delay: 0.4s;
}

.site-nav-overlay.is-open .site-nav-overlay__list li:nth-child(5) {
	transition-delay: 0.46s;
}

.site-nav-overlay.is-open .site-nav-overlay__list li:nth-child(6) {
	transition-delay: 0.52s;
}

.site-nav-overlay.is-open .site-nav-overlay__list li:nth-child(7) {
	transition-delay: 0.58s;
}

.site-nav-overlay.is-open .site-nav-overlay__list li:nth-child(8) {
	transition-delay: 0.64s;
}

.site-nav-overlay.is-open .site-nav-overlay__list li:nth-child(9) {
	transition-delay: 0.7s;
}

.site-nav-overlay.is-open .site-nav-overlay__list li:nth-child(10) {
	transition-delay: 0.76s;
}

.site-nav-overlay.is-open .site-nav-overlay__list li:nth-child(11) {
	transition-delay: 0.82s;
}

.site-nav-overlay.is-open .site-nav-overlay__footer {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.9s;
}

@media (prefers-reduced-motion: reduce) {
	.site-nav-overlay,
	.site-nav-overlay__brand,
	.site-nav-overlay__list li,
	.site-nav-overlay__footer {
		transition: opacity 0.3s ease, visibility 0.3s;
		transform: none !important;
	}
}

.site-nav-overlay__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-primary);
	border-radius: 50%;
	background: transparent;
	color: var(--color-primary);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--motion);
}

.site-nav-overlay__close:hover {
	background-color: rgba(var(--color-primary-rgb), 0.12);
}

.site-nav-overlay__inner {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(2rem, 6vw, 6rem);
}

.site-nav-overlay__brand img {
	width: clamp(180px, 16vw, 280px);
	height: auto;
}

.site-nav-overlay__list {
	/* Khong con nen box/panel — cac muc "noi" truc tiep tren nen anh, chi
	   phan biet bang duong ke mong giua cac dong (giong hinh mau).
	   11 muc menu neu xep 1 cot se qua dai, day hotline/social ra ngoai man
	   hinh -> xep 2 cot (grid). grid-auto-flow:column + 6 hang co dinh ->
	   COT 1 nhan DUNG 6 muc dau (tren xuong duoi), phan con lai (muc 7+)
	   moi sang COT 2 — khong con kieu lap theo hang (1,2/3,4/...) nhu truoc. */
	/* Bat dau tu -1 de muc dau tien (Trang chu) hien "00", cac muc sau 01,02...
	   (counter-increment lam +1 truoc khi in). */
	counter-reset: casaluna-nav-item -1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: repeat(2, minmax(220px, 1fr));
	grid-template-rows: repeat(6, auto);
	column-gap: clamp(2rem, 4vw, 3.5rem);
}

.site-nav-overlay__list li {
	counter-increment: casaluna-nav-item;
	display: flex;
	align-items: baseline;
	gap: 1.5rem;
	padding: 1.35rem 0;
	border-bottom: 1px solid rgba(247, 241, 231, 0.16);
}

.site-nav-overlay__list li:last-child {
	border-bottom: none;
}

.site-nav-overlay__list li::before {
	content: counter(casaluna-nav-item, decimal-leading-zero) '.';
	flex-shrink: 0;
	width: 2ch;
	font-family: var(--font-heading);
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	color: rgba(var(--color-primary-rgb), 0.7);
}

.site-nav-overlay__list a {
	font-family: var(--font-heading);
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-heading-on-dark);
	text-decoration: none;
	transition: color var(--motion);
}

.site-nav-overlay__list a:hover,
.site-nav-overlay__list a.is-active {
	color: var(--color-primary);
}

.site-nav-overlay__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(247, 241, 231, 0.14);
}

.site-nav-overlay__hotlines {
	display: flex;
	align-items: center;
	gap: 2.5rem;
}

.site-nav-overlay__hotline {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding-right: 2rem;
	border-right: 1px solid rgba(247, 241, 231, 0.2);
}

.site-nav-overlay__hotline:last-child {
	padding-right: 0;
	border-right: none;
}

.site-nav-overlay__hotline span {
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted-on-dark);
}

.site-nav-overlay__hotline a {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 2vw, 1.9rem);
	font-weight: 600;
	color: var(--text-heading-on-dark);
	text-decoration: none;
	transition: color var(--motion);
}

.site-nav-overlay__hotline a:hover {
	color: var(--color-primary);
}

.site-nav-overlay__social {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.85rem;
}

.site-nav-overlay__social-title {
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted-on-dark);
}

.site-nav-overlay__social-icons {
	display: flex;
	gap: 0.75rem;
}

.site-nav-overlay__social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(var(--color-primary-rgb), 0.6);
	border-radius: 50%;
	color: var(--color-primary);
	transition: background-color var(--motion), border-color var(--motion);
}

.site-nav-overlay__social-icons a:hover {
	background-color: rgba(var(--color-primary-rgb), 0.12);
	border-color: var(--color-primary);
}

.site-nav-overlay__social-icons a svg {
	width: 20px;
	height: 20px;
}

/* Mobile + Tablet — menu overlay xep doc (gom tu 900 -> 1024, xem quy uoc dau file) */
@media (max-width: 1024px) {
	/* Noi dung menu cao hon viewport (9 muc + hotline + social) -> overlay
	   phai CUON duoc. Bo justify-content:space-between mac dinh (chia deu, cat
	   phan duoi), doi sang flex-start + cho phep scroll doc + inertia iOS. */
	.site-nav-overlay {
		justify-content: flex-start;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Overlay tu cuon -> nut close absolute se troi mat theo noi dung.
	   Giu co dinh o goc man hinh de luon bam duoc. */
	.site-nav-overlay__close {
		position: fixed;
	}

	.site-nav-overlay__inner {
		flex: 0 0 auto;
		flex-direction: column;
		justify-content: center;
		gap: 2rem;
	}

	.site-nav-overlay__list {
		/* Ve 1 cot tren mobile (2 cot + grid-auto-flow:column chi danh cho
		   desktop) — reset ve auto-flow row binh thuong. */
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-flow: row;
		min-width: 0;
		width: 100%;
	}

	.site-nav-overlay__footer {
		flex-direction: column;
		align-items: flex-start;
	}
}

.casaluna-landing {
	position: relative;
	height: 100vh;
	/* 100dvh — xem giai thich chi tiet o rule body.casaluna-onepage-body
	   phia tren (cung 1 nguyen nhan goc, phai sua CA HAI cho khop nhau). */
	height: 100dvh;
	overflow-y: scroll;
	/* ⚠️ DA THU va BO: tung dat background-color:var(--color-dark) o day lam
	   fallback cho khe ho subpixel giua section — nhung hoa ra no LO RA o bat
	   ky section nao chua co nen rieng (vd 4 section placeholder Gioi thieu/
	   Vi tri/Thiet ke/Tien ich — la nen trong/sang, bi nhuom nau toi sai),
	   chinh la nguyen nhan that su cua "khoang trong toi" user thay giua Hero
	   va Ho ban nguyet tren mobile — KHONG phai vung cay/bong toi trong anh
	   nhu nghi ban dau. Dung dat lai rule nay tren .casaluna-landing. */

	/* Custom scrollbar theo mau brand thay vi de mac dinh cua he dieu hanh
	   (default scrollbar render khong dong nhat giua cac trinh duyet/OS). */
	scrollbar-width: thin; /* Firefox */
	scrollbar-color: var(--color-secondary) transparent; /* Firefox */
}

/* Xem initMobileNativeScrollOnKeyboard() trong main.js + comment chi tiet o
   body.casaluna-onepage-body.is-keyboard-open phia tren — tam thoi bo cuon
   rieng cua div nay, tra ve cuon TU NHIEN cua trinh duyet trong luc ban phim
   ao dang mo, de iOS tu giu dung o input dang go trong tam nhin. */
body.is-keyboard-open .casaluna-landing {
	height: auto;
	overflow-y: visible;
}

.casaluna-landing::-webkit-scrollbar {
	width: 6px;
}

.casaluna-landing::-webkit-scrollbar-track {
	background: transparent;
}

.casaluna-landing::-webkit-scrollbar-thumb {
	background-color: var(--color-secondary);
	border-radius: var(--radius-pill);
}

.casaluna-landing::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-accent);
}

.casaluna-section {
	min-height: 100vh;
	padding: calc(var(--header-height) + 4rem) 1.5rem 4rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Mobile: bo fullpage-stepper (xem initLandingScroll()/initMobileScroll()
   trong main.js — tren mobile cuon TU NHIEN, khong con JS ep nhay dung 1
   section/thao tac). Neu van giu min-height:100vh, section co it noi dung
   (placeholder, Hero da rut gon...) se de lai khoang trong lon truoc khi toi
   section tiep theo — bo han "san" 100vh, de chieu cao tu nhien theo noi
   dung, sat nhau khong con khoang cach. */
@media (max-width: 1024px) {
	.casaluna-section {
		min-height: auto;
		padding: calc(var(--header-height) + 2rem) 1.25rem 2.5rem;
	}
}

/* Section tren nen toi (Background 03) — dung chung cho moi section co class
   .casaluna-section--dark, tru Hero (nen rieng la video), Footer (nen rieng
   la anh that bg-footer.jpg) va Ho ban nguyet (nen rieng la anh cau-anh-trang,
   xem .casaluna-ho-ban-nguyet ben duoi). */
.casaluna-section--dark:not(.casaluna-hero):not(.casaluna-footer):not(.casaluna-ho-ban-nguyet) {
	background: var(--gradient-section);
}

.casaluna-section--dark h1,
.casaluna-section--dark h2,
.casaluna-section--dark h3,
.casaluna-section--dark h4 {
	color: var(--text-heading-on-dark);
}

.casaluna-section--dark p {
	color: var(--text-body-on-dark);
}

/* ============================================
   Hero — video nen full-bleed (YouTube embed, se doi sang
   the<video> self-host sau) + overlay gradient toi de chu de doc.
   ============================================ */

.casaluna-hero {
	position: relative;
	overflow: hidden;
	justify-content: flex-end;
	padding-bottom: 6rem;
	background-color: var(--color-dark-2); /* fallback trong luc video dang tai */
}

.casaluna-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.casaluna-hero__video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw; /* ty le 16:9 */
	min-height: 100vh;
	min-width: 177.78vh; /* ty le 16:9 nguoc */
	transform: translate(-50%, -50%);
	border: 0;
	object-fit: cover; /* video tu host: phu day khung, cat bot phan thua */
	background: var(--color-dark, #2A180F); /* nen toi luc video chua decode */
	pointer-events: none; /* video chi de trang tri, khong cho tuong tac */
}

/* Mobile (man hinh doc, ty le rat cao/hep): cong thuc "cover" 16:9 o tren bat
   video phai phong to rat manh theo chieu ngang de lap day chieu cao 100vh,
   dan toi chi thay 1 dai doc rat hep o giua video (mat het 2 ben) — da bi
   user phan hoi khi test tren dien thoai that. Tren mobile bo han kieu
   "cover ep day man hinh", chuyen sang giu dung ty le 16:9 tu nhien (khong
   crop, xem duoc toan bo khung hinh).
   Buoc 2 (sau khi user phan hoi lai): neu van giu .casaluna-hero cao 100vh
   (ke thua tu .casaluna-section) thi video ngan (16:9) chi chiem 1 phan nho
   phia tren, con lai la khoang nen toi rong rat lon o giua — nhin rat "trong
   rong". Nen tren mobile BO LUON min-height:100vh cua rieng Hero, cho section
   co lai dung bang chieu cao video — nut mute/scroll-indicator (position:
   absolute, bottom offset tinh theo DAY SECTION) nho vay se de len VIEN DUOI
   video (kieu overlay banner thong thuong) thay vi troi xuong khoang trong. */
@media (max-width: 1024px) {
	.casaluna-hero {
		min-height: 0;
		height: auto;
		/* Bo luon padding-top (khoang danh rieng cho header co dinh — moi
		   section khac deu can, nhung Hero thi KHONG can vi video co y
		   full-bleed xuyen qua/dang sau header trong suot, giong het hanh vi
		   tren desktop). Neu de nguyen padding-top nay, tren mobile media gio
		   nam TRONG LUONG (khong con absolute inset:0 nhu desktop nua) nen se
		   bi day xuong, tao khoang trong lon phia tren video — da bi user
		   phan hoi. */
		padding-top: 0;
		padding-bottom: 0;
	}

	.casaluna-hero__media {
		position: relative;
		inset: auto;
		/* .casaluna-hero__media gio nam trong luong (khong con absolute inset:0
		   "xuyen qua" padding nhu tren desktop nua) nen se bi ep hep lai theo
		   padding ngang 1.25rem cua .casaluna-section tren mobile — bu lai
		   bang margin am de video van full-bleed sat 2 canh man hinh nhu
		   thiet ke goc. */
		margin: 0 -1.25rem;
		/* Triet line-height/font-size cua line-box chua iframe: iframe la
		   inline-replaced element, mac dinh ngoi tren baseline nen de lai
		   khoang "descender" phia duoi (cao theo line-height body ~1.7) — lo
		   ra mau nen .casaluna-hero (--color-dark-2, nau am), tao dai trong
		   ngay duoi video ma cac phep do section-to-section khong bat duoc vi
		   khoang do nam BEN TRONG hero. display:block ben duoi da du, day la
		   lop chan them cho moi text-node trang. */
		line-height: 0;
		font-size: 0;
	}

	.casaluna-hero__video {
		position: relative;
		display: block; /* bo baseline gap cua iframe inline — xem media o tren */
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		min-height: 0;
		min-width: 0;
		top: auto;
		left: auto;
		transform: none;
	}

}

.casaluna-hero__mute-toggle {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(247, 241, 231, 0.5);
	border-radius: 50%;
	background: rgba(42, 24, 15, 0.35);
	color: var(--text-heading-on-dark);
	cursor: pointer;
	transition: background-color var(--motion), border-color var(--motion);
}

.casaluna-hero__mute-toggle:hover {
	background-color: rgba(42, 24, 15, 0.55);
	border-color: var(--color-primary);
}

.casaluna-hero__mute-icon--on {
	display: none;
}

.casaluna-hero__mute-toggle.is-muted .casaluna-hero__mute-icon--off {
	display: block;
}

.casaluna-hero__mute-toggle.is-muted .casaluna-hero__mute-icon--on {
	display: none;
}

.casaluna-hero__mute-toggle:not(.is-muted) .casaluna-hero__mute-icon--off {
	display: none;
}

.casaluna-hero__mute-toggle:not(.is-muted) .casaluna-hero__mute-icon--on {
	display: block;
}

.casaluna-hero__scroll-indicator {
	position: absolute;
	right: 32px;
	bottom: 32px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

/* An tren mobile (yeu cau user) — dat SAU rule goc o tren vi cung 1 class
   (cung specificity), rule dung sau thang trong cascade. Neu dat truoc se bi
   rule goc (unconditional) de lai ve display:flex bat ke kich thuoc man hinh
   — da gap loi nay 1 lan, xem lai neu sua tiep phan nay. */
@media (max-width: 1024px) {
	.casaluna-hero__scroll-indicator {
		display: none;
	}
}

.casaluna-hero__scroll-line {
	position: relative;
	width: 1px;
	height: 72px;
	background-color: rgba(247, 241, 231, 0.25);
	overflow: hidden;
}

.casaluna-hero__scroll-line::after {
	content: '';
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-primary);
	animation: casaluna-scroll-line-flow 2.2s ease-in-out infinite;
}

@keyframes casaluna-scroll-line-flow {
	0% {
		top: -100%;
	}
	60% {
		top: 100%;
	}
	100% {
		top: 100%;
	}
}

.casaluna-hero__scroll-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--font-body);
	color: var(--text-body-on-dark);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.casaluna-dot-nav {
	position: fixed;
	right: 28px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* Dung chung 1 bien --header-accent-color voi header (xem phia tren) — JS
   set truc tiep qua inline style theo tung section, khong con toggle class
   .is-on-dark/rule CSS rieng nua (cascade bi 1 stylesheet an cua WordPress
   pha, xem giai thich chi tiet o rule .site-header__cta). */
.casaluna-dot-nav__dot {
	position: relative;
	width: 6px;
	height: 6px;
	padding: 0;
	border-radius: var(--radius-pill);
	border: 1px solid var(--header-accent-color);
	background: transparent;
	cursor: pointer;
	transition: background-color var(--motion), border-color var(--motion), height var(--motion), width var(--motion);
}

.casaluna-dot-nav__dot.is-active {
	width: 6px;
	height: 28px;
	background-color: var(--header-accent-color);
	border-color: var(--header-accent-color);
}

.casaluna-dot-nav__label {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%) translateX(8px);
	white-space: nowrap;
	font-family: var(--font-body);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--header-accent-color);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--motion), transform var(--motion);
}

.casaluna-dot-nav__dot:hover .casaluna-dot-nav__label {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* ============================================
   Tin tuc — dung chung cho ca teaser trong section (shortcode
   casaluna_tin_tuc) lan trang archive-tin-tuc.php
   ============================================ */

.casaluna-tin-tuc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 2rem;
	width: 100%;
}

.casaluna-tin-tuc-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Thumbnail phu toan bo card (khong con giu nguyen ty le anh goc gay lo
   khoang trong) — khung ty le co dinh + object-fit:cover. */
.casaluna-tin-tuc-card__thumbnail {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-base);
	aspect-ratio: 16 / 10;
}

.casaluna-tin-tuc-card__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-base);
}

.casaluna-tin-tuc-card__title a {
	color: var(--text-heading);
	text-decoration: none;
}

/* Title bai viet KHONG viet hoa toan bo (khac voi heading section chung —
   xem rule h1-h6 o main.css — title bai viet can de doc hon, giu nguyen hoa/thuong). */
.casaluna-tin-tuc-card__title {
	text-transform: none;
}

.casaluna-tin-tuc-card__link {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--motion);
}

.casaluna-tin-tuc-card__link:hover {
	color: var(--color-accent);
}

/* ============================================
   Section "Tai ho ban nguyet" (#ho-ban-nguyet) — anh nen that (cau-anh-trang-2.jpg)
   dat qua CSS custom property inline tu pattern (patterns/ho-ban-nguyet-{vi,en}.php
   — file pattern la noi dung tinh, khong the goi content_url(), nen dung duong dan
   tuong doi tu site root, khong hardcode domain). Layout: khoi chu can phai, nam
   nua tren cua section, gradient toi lech phai (duoi vung chu) de chu doc ro,
   phia trai anh (cay cau) giu nguyen sang khong bi che.
   ============================================ */
.casaluna-ho-ban-nguyet {
	position: relative;
	align-items: flex-end;
	justify-content: flex-start;
	padding-top: calc(var(--header-height) + 6rem);
	padding-right: 4rem;
	/* Mau nen dac lam lop lot duoi cung — cac lop gradient/anh ben tren deu co
	   vung trong suot (canh gradient fade ve 0, "letterbox" cua anh contain
	   tren mobile), neu khong co lop lot nay se lo mau trang mac dinh cua
	   trinh duyet thay vi mau brand. */
	background-color: var(--color-dark);
	/* Anh nen DESKTOP dieu khien tu BLOCK admin qua var inline
	   --casaluna-ho-ban-nguyet-bg-image. Overlay = radial toi o vung GIUA-DUOI
	   (nơi cum chu nam, tren mat ho) de chu trang/gold noi ro; mep fade ve 0 nen
	   khong che canh anh. (Truoc day toi lech phai cho bo cuc cu — anh moi ho o
	   giua nen doi sang radial.) Mobile dung var -mobile o block ≤1024. */
	background-image:
		radial-gradient(ellipse 62% 46% at 50% 70%, rgba(10, 14, 26, 0.55) 0%, rgba(10, 14, 26, 0.26) 46%, rgba(10, 14, 26, 0) 72%),
		var(--casaluna-ho-ban-nguyet-bg-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.casaluna-ho-ban-nguyet__inner {
	/* Desktop: cum chu CAN GIUA ngang, nam vung DUOI-GIUA (tren mat ho) theo
	   mockup anh moi (thay bo cuc lech-phai cu). Absolute -> mobile PHAI reset
	   position:static o block ≤1024 (da them). Tunable: top 68% = vi tri doc. */
	position: absolute;
	left: 50%;
	top: 75%;
	transform: translate(-50%, -50%);
	width: 92%;
	max-width: 780px;
	text-align: center;
	z-index: 1;
}

.casaluna-ho-ban-nguyet__scroll-indicator {
	position: absolute;
	right: 32px;
	bottom: 32px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.casaluna-ho-ban-nguyet__scroll-line {
	position: relative;
	width: 1px;
	height: 72px;
	background-color: rgba(247, 241, 231, 0.25);
	overflow: hidden;
}

.casaluna-ho-ban-nguyet__scroll-line::after {
	content: '';
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-primary);
	animation: casaluna-scroll-line-flow 2.2s ease-in-out infinite;
}

.casaluna-ho-ban-nguyet__scroll-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--font-body);
	color: var(--text-body-on-dark);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Specificity cao hon ".casaluna-section--dark p" (0,1,1) — dung 2 class de
   thang duoc rule mau chung cho the <p> tren nen toi, khong thi Phu My Hung
   va doan text bi de ve mau text-body-on-dark mac dinh. */
.casaluna-ho-ban-nguyet .casaluna-ho-ban-nguyet__text {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(0.98rem, 0.85vw + 0.85rem, 1.5rem);
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--text-heading-on-dark);
	margin: 0;
	white-space: nowrap;
}

.casaluna-ho-ban-nguyet__accent {
	color: var(--color-primary);
	font-weight: 600;
}

.casaluna-ho-ban-nguyet .casaluna-ho-ban-nguyet__brand {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(1.7rem, 1.87vw + 1.1rem, 3.75rem);
	letter-spacing: 0.01em;
	color: var(--color-primary);
	margin: 0 0;
	white-space: nowrap;
}

/* Mobile + Tablet (gom tu 640 -> 1024 theo yeu cau user: iPad mini/gen10/Pro11
   deu phai dung bo cuc mobile nay, khong phai bo cuc desktop). */
@media (max-width: 1024px) {
	.casaluna-ho-ban-nguyet {
		/* Anh RESPONSIVE rieng cho mobile+tablet — casa-luna-section-2-responsive-1.webp
		   (1668x1370, ~1.22:1, size cho retina DPR2). Dat height DUNG bang ty le
		   that cua anh (1370/1668) theo chieu rong man hinh — "cover" vua khit,
		   khong crop, khong du khoang trong. */
		min-height: 0;
		height: calc(100vw * 1370 / 1668);
		align-items: center;
		justify-content: flex-start;
		/* Phai dat TUONG MINH padding-left/right bang nhau o day — khong the
		   chi "bo trong" de ke thua tu .casaluna-section, vi rule goc
		   .casaluna-ho-ban-nguyet (desktop, khong co media query) da tu dat
		   padding-right:4rem rieng (bo cuc can phai cho man hinh lon), rule
		   do van thang tren mobile neu khong ghi de lai o day (da gap loi
		   nay 1 lan — chu bi lech han sang trai vi trai 1.25rem # phai 4rem). */
		/* padding-top phai theo VW (khong phai px co dinh header+1.5rem) vi chieu
		   cao section = calc(100vw*1370/1668) cung co gian theo vw. Neu dat px
		   co dinh: mobile section thap -> 104px chiem ~34% chieu cao -> text tut
		   xuong sai vung; tablet section cao -> 104px chi ~15% -> text dung. Dat
		   12.5vw: tablet (834px) ~104px giu nguyen dung nhu cu, mobile (375px)
		   ~47px -> text len dung vung troi, khop ty le voi tablet o moi be rong.
		   (Trong free-scroll mobile, header trong suot khong che text vi nguoi
		   doc xem text o giua man hinh, khong ghim sat dinh.) */
		padding-top: 12.5vw;
		padding-right: 1.25rem;
		padding-bottom: 1.5rem;
		/* Overlay GRADIENT DOC (tren -> duoi) thay cho tint phang: dam o nua
		   tren (vung chu) cho chu kem/gold noi bat, nhat dan ve trong suot o
		   ~70% chieu cao de nua duoi (cay cau trong anh) van sang ro, khong bi
		   bit. Da thu bo han overlay (chu bi chim tren nen anh sang) va tint
		   phang ca anh (bi che phu het ca anh) — day la phuong an dung. */
		/* Overlay DOC tu DUOI len (dam o day, nhat dan len) -> mấy dong cuoi cua
		   cum chu (nam vung thap ~top 77%) doc ro. */
		background-image:
			linear-gradient(to top,
				rgba(10, 14, 26, 0.8) 0%,
				rgba(10, 14, 26, 0.58) 22%,
				rgba(10, 14, 26, 0.28) 42%,
				rgba(10, 14, 26, 0) 62%),
			var(--casaluna-ho-ban-nguyet-bg-image-mobile, none),
			var(--gradient-section);
		background-size: cover, cover, cover;
		background-position: center, center, center;
	}

	.casaluna-ho-ban-nguyet__inner {
		/* Mobile/tablet: cum chu CAN GIUA ngang + nam vung DUOI-GIUA. Neo theo TAM
		   (top% + translate -50%,-50%) thay vi bottom -> khong dinh/vuot day section
		   (section mobile la dai NGANG NGAN nen bottom% de bi tran). Tunable: top 56%
		   (lon hon = xuong thap hon, nhung coi chung tran day). */
		position: absolute;
		left: 50%;
		top: 77%;
		transform: translate(-50%, -50%);
		width: 90%;
		max-width: 100%;
		padding-right: 0;
		text-align: center;
	}

	.casaluna-ho-ban-nguyet .casaluna-ho-ban-nguyet__text,
	.casaluna-ho-ban-nguyet .casaluna-ho-ban-nguyet__brand {
		white-space: normal;
	}

	.casaluna-ho-ban-nguyet__scroll-indicator {
		display: none;
	}
}

/* Dien thoai (≤640): khoi chu section 2 dang chiem qua nhieu khong gian, thieu
   sang trong -> thu nho font + thu hep be ngang khoi chu (ngat dong thanh thoat)
   + tang line-height cho thoang. Tablet (641-1024) giu nguyen. */
@media (max-width: 640px) {
	/* Dien thoai: cum chu CAN GIUA (bo day-phai cu). Absolute + translateX(-50%)
	   o block ≤1024 lo can-giua; day chi gioi han be rong + text-align center. */
	.casaluna-ho-ban-nguyet__inner {
		/* Rong theo % man hinh (khong con gioi han cung rem) de font-size (cung
		   scale theo vw ben duoi) LUON ti le dung voi be rong khung tren MOI
		   kich thuoc man hinh — tranh truong hop font co san (rem) nhung khung
		   lai co theo % rieng, lech ti le -> rot dong tren may man hinh hep. */
		width: 96%;
		max-width: 26rem;
		text-align: center;
	}

	/* Moi dong la 1 cau NGAN theo thiet ke (pattern da tach san tung <p>) —
	   BAT BUOC khong xuong dong (yeu cau user). font-size CHI dung vw (bo
	   san rem lam "san") de ti le voi be rong khung __inner (96vw) luon giu
	   NGUYEN bat ke man hinh rong/hep -> khong bao gio tran/rot dong. Da do
	   thuc te: dong dai nhat "Tai vi tri di san doc ton ben Ho Ban Nguyet"
	   rong ~20x font-size (px) trong font SVN-Schrifted -> can 4.55vw font
	   thi rong ~91vw, vua trong khung 96vw, con du bien. */
	.casaluna-ho-ban-nguyet .casaluna-ho-ban-nguyet__text {
		font-size: min(4.55vw, 1.2rem);
		line-height: 1.5;
		white-space: nowrap;
	}

	/* Thu hep khoang cach tren/duoi dong "Phu My Hung" (line-height sat + margin am nhe) */
	.casaluna-ho-ban-nguyet .casaluna-ho-ban-nguyet__brand {
		font-size: clamp(1.43rem, 5.76vw, 1.89rem);
		line-height: 1.5;
		margin-top: -0.12em;
		margin-bottom: -0.12em;
		white-space: nowrap;
	}

	/* Mobile: "Ho Ban Nguyet" (accent) + "Phu My Hung" (brand) doi sang gold sang
	   #FFC872 (chi mobile; tablet/desktop giu --color-primary). */
	.casaluna-ho-ban-nguyet__accent,
	.casaluna-ho-ban-nguyet .casaluna-ho-ban-nguyet__brand {
		color: #FFC872;
	}
}

/* Hieu ung "xuat hien" cua ca cum text (4 dong + scroll indicator) khi section
   tro thanh active — fade + truot len, so le tung dong (toggle class
   .is-revealed tren chinh the section, xem initHoBanNguyetReveal() trong
   main.js). Roi section thi tat ve trang thai an, lan sau quay lai chay lai
   tu dau — giong co che cua Tin tuc. */
/* Cung goc "ultra luxury" nhu menu overlay, nhung tinh chinh them: 1 duong
   cong cubic-bezier duy nhat dung chung cho ca opacity va transform (thay vi
   opacity dung "ease" mac dinh — 2 duong cong lech nhau lam chuyen dong kem
   dong bo, kem "nhe nhang"), bien do di chuyen nho lai (16px) va bat dau som
   hon (delay dau ~0.05s thay vi 0.15s). */
#ho-ban-nguyet .casaluna-ho-ban-nguyet__inner > p,
#ho-ban-nguyet .casaluna-ho-ban-nguyet__scroll-indicator {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 2.8s cubic-bezier(0.22, 1, 0.36, 1), transform 2.8s cubic-bezier(0.22, 1, 0.36, 1);
}

#ho-ban-nguyet.is-revealed .casaluna-ho-ban-nguyet__inner > p:nth-child(1) { transition-delay: 0s; }
#ho-ban-nguyet.is-revealed .casaluna-ho-ban-nguyet__inner > p:nth-child(2) { transition-delay: 0.15s; }
#ho-ban-nguyet.is-revealed .casaluna-ho-ban-nguyet__inner > p:nth-child(3) { transition-delay: 0.3s; }
#ho-ban-nguyet.is-revealed .casaluna-ho-ban-nguyet__inner > p:nth-child(4) { transition-delay: 0.45s; }
#ho-ban-nguyet.is-revealed .casaluna-ho-ban-nguyet__scroll-indicator { transition-delay: 0.6s; }

#ho-ban-nguyet.is-revealed .casaluna-ho-ban-nguyet__inner > p,
#ho-ban-nguyet.is-revealed .casaluna-ho-ban-nguyet__scroll-indicator {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	#ho-ban-nguyet .casaluna-ho-ban-nguyet__inner > p,
	#ho-ban-nguyet .casaluna-ho-ban-nguyet__scroll-indicator {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Hieu ung reveal nhe nhang dung CHUNG cho moi section co class
   .casaluna-section-reveal (hien tai: 4 section placeholder Gioi thieu/
   Vi tri/Thiet ke/Tien ich — noi dung chi co 1 heading + 1 paragraph, xem
   patterns/*.php). Toggle class .is-revealed qua initSectionReveal() trong
   main.js. Dung chung 1 cong thuc "ultra luxury" nhu Ho ban nguyet/menu
   overlay: cubic-bezier(.22,1,.36,1), truot len 16px, so le heading -> p. */
.casaluna-section-reveal .wp-block-heading,
.casaluna-section-reveal > p,
.casaluna-section-reveal .wp-block-group__inner-container > p {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 2.8s cubic-bezier(0.22, 1, 0.36, 1), transform 2.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.casaluna-section-reveal.is-revealed .wp-block-heading {
	transition-delay: 0s;
}

.casaluna-section-reveal.is-revealed > p,
.casaluna-section-reveal.is-revealed .wp-block-group__inner-container > p {
	transition-delay: 0.2s;
}

.casaluna-section-reveal.is-revealed .wp-block-heading,
.casaluna-section-reveal.is-revealed > p,
.casaluna-section-reveal.is-revealed .wp-block-group__inner-container > p {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.casaluna-section-reveal .wp-block-heading,
	.casaluna-section-reveal > p,
	.casaluna-section-reveal .wp-block-group__inner-container > p {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================
   Section "Casa Luna" (#casa-luna, section 3 — MOI, sau Ho ban nguyet) — splash
   thuong hieu: anh nen tong the 2 thap luc hoang hon (tong-the-casa-luna-01.webp,
   full-bleed cover) + cum "Sky Mansion / Elite For The Elite" (anh sky.png +
   text serif) o tren va logo Casa Luna (logo-icon.png: mat than + CASA LUNA/
   PHUMYHUNG) o duoi, can giua man hinh, hien dan (reveal) so le khi cuon toi.
   Anh nen gan qua CSS custom property inline --casaluna-casa-luna-bg-image
   (patterns/casa-luna-{vi,en}.php). sky.png chi chua chu "Sky" (script) — chu
   "Mansion" va "Elite For The Elite" la LIVE TEXT (Playfair Display).
   ============================================ */
.casaluna-casa-luna {
	position: relative;
	text-align: center;
	background-image: var(--casaluna-casa-luna-bg-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	/* ---- VI TRI CUM NOI DUNG (redesign: logo TREN + Elite/For/The/Elite xep doc) ----
	   Cum = 1 COT can giua, dinh vi theo TAM: --cl-x (ngang), --cl-y (doc). Desktop
	   mac dinh can giua (50%/50%); breakpoint chinh lai o duoi. */
	--cl-x: 43%;
	--cl-y: 50%;
}

/* Cum noi dung = 1 COT can giua: logo Casa Luna o TREN, "Elite/For/The/Elite" xep
   DOC ben duoi. Dinh vi tuyet doi theo tam (--cl-x, --cl-y). Cac bien tuy chinh
   (--cl-gap, --cl-logo-w, --cl-tag-gap, --cl-tag-fs) cho breakpoint ghi de. */
.casaluna-casa-luna__inner {
	position: absolute;
	left: var(--cl-x);
	top: var(--cl-y);
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--cl-gap, clamp(1rem, 4vh, 2.6rem));
	width: max-content;
	max-width: 88%;
}

.casaluna-casa-luna__logo {
	width: var(--cl-logo-w, clamp(150px, 15vw, 260px));
	height: auto;
	flex-shrink: 0;
}

/* "Elite / For / The / Elite" — moi tu 1 dong, xep doc, can giua. */
.casaluna-casa-luna__tagline {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cl-tag-gap, clamp(0.5rem, 2.6vh, 1.6rem));
	margin: 0;
}

.casaluna-casa-luna__tagline span {
	display: block;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: var(--cl-tag-fs, clamp(1.5rem, 3vw, 2.7rem));
	letter-spacing: 0.12em;
	line-height: 1;
	color: #b7812c; /* nau dam theo mockup */
}

@media (max-width: 1024px) {
	/* Anh nen RIENG cho tung breakpoint (deu doc), dieu khien tu BLOCK admin qua
	   var inline. Mac dinh (≤1024) = anh MOBILE --casaluna-casa-luna-bg-image-mobile
	   (nen dung anh ty le ~1278x1632: toa nha ben PHAI, troi ben TRAI -> cum noi
	   dung lech trai ~40%). Block tablet 641-1024 o duoi ghi de bang var -tablet.
	   ⚠️ Height khoa theo ty le 1632/1278 -> anh admin thay PHAI cung ty le, khong
	   thi bi crop/du nen. */
	.casaluna-casa-luna {
		background-image: var(--casaluna-casa-luna-bg-image-mobile, none);
		min-height: 0;
		height: calc(100vw * 1632 / 1278);
		/* Mobile: toa nha ben PHAI, troi ben TRAI -> cum lech TRAI. */
		--cl-x: 40%;
		--cl-y: 50%;
		--cl-logo-w: min(42vw, 240px);
		--cl-tag-fs: clamp(1.4rem, 6vw, 2.2rem);
		--cl-gap: clamp(0.8rem, 3vh, 1.6rem);
		--cl-tag-gap: clamp(0.4rem, 2vh, 1rem);
	}
}

/* Dien thoai (≤640px): thu nho ca cum noi dung 25% (tablet giu nguyen). Wordmark
   khong phai phan tu reveal nen scale thang tren transform can-tam; logo thu qua
   width de khong dung vao transform reveal cua no. */
@media (max-width: 640px) {
	/* Dien thoai: dich ca cum sang trai (--cl-x 34%) de can deu giua mep trai
	   man hinh va toa nha ben phai. Thay vi scale dong loat, chinh font-size /
	   height tung phan: text +40%, anh "Sky" +20%. */
	.casaluna-casa-luna {
		--cl-x: 34%;
		--cl-y: 50%;
		--cl-logo-w: min(46vw, 210px);
		--cl-tag-fs: clamp(1.4rem, 7.5vw, 2rem);
	}
}

/* Tablet (641-1024): CHI phong to cum chu "Sky Mansion..." (wordmark scale len).
   Logo GIU nguyen size cu (min(46vw,280px) tu block ≤1024). Dien thoai va
   desktop khong doi. */
@media (min-width: 641px) and (max-width: 1024px) {
	/* Anh TABLET rieng, dieu khien tu BLOCK admin qua var --casaluna-casa-luna-bg-
	   image-tablet (fallback ve var -mobile neu chua set). Nen dung anh ty le
	   ~1438x1632 (2 thap doi xung, khe nang o giua) -> cum can giua (--cl-x:44%).
	   ⚠️ Height khoa theo 1632/1438 -> anh admin thay PHAI cung ty le. Cum day
	   xuong them 5% (sky 49% / logo 69%). Phone giu rieng o block ≤640. */
	.casaluna-casa-luna {
		background-image: var(--casaluna-casa-luna-bg-image-tablet, var(--casaluna-casa-luna-bg-image-mobile, none));
		height: calc(100vw * 1632 / 1438);
		/* Tablet: 2 thap doi xung, khe nang o GIUA -> cum CAN GIUA. */
		--cl-x: 46%;
		--cl-y: 50%;
		--cl-logo-w: min(30vw, 260px);
		--cl-tag-fs: clamp(1.8rem, 4vw, 2.6rem);
	}
}

/* Reveal so le: logo -> Elite -> For -> The -> Elite. __inner da absolute
   (translate -50%,-50% can-tam), nen con (logo + moi span) chi dung translateY
   reveal doc lap -> khong dung vao transform can-tam cua __inner. Toggle
   .is-revealed qua initSectionReveal (desktop) / initMobileReveal (mobile).
   Delay dat tren .is-revealed (khi roi section an TUC THI -> replay duoc). */
#casa-luna .casaluna-casa-luna__logo,
#casa-luna .casaluna-casa-luna__tagline span {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1), transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#casa-luna.is-revealed .casaluna-casa-luna__logo,
#casa-luna.is-revealed .casaluna-casa-luna__tagline span {
	opacity: 1;
	transform: translateY(0);
}

#casa-luna.is-revealed .casaluna-casa-luna__logo { transition-delay: 0.1s; }
#casa-luna.is-revealed .casaluna-casa-luna__tagline span:nth-child(1) { transition-delay: 0.3s; }
#casa-luna.is-revealed .casaluna-casa-luna__tagline span:nth-child(2) { transition-delay: 0.45s; }
#casa-luna.is-revealed .casaluna-casa-luna__tagline span:nth-child(3) { transition-delay: 0.6s; }
#casa-luna.is-revealed .casaluna-casa-luna__tagline span:nth-child(4) { transition-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
	#casa-luna .casaluna-casa-luna__logo,
	#casa-luna .casaluna-casa-luna__tagline span {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================
   Section "Kiet tac" (#kiet-tac, section 4 — sau Casa Luna) — anh nen toa nha
   luc hoang hon (tong-quan-casa-luna-section-4.webp, ~16:9), nen SANG nen chu
   TOI. Cum chu can trai: heading + divider + kicker "Gioi han chi" + so "49"
   CUC LON (gradient gold) + don vi "can". Reveal so le khi cuon toi.
   Anh nen inline var --casaluna-kiet-tac-bg-image (patterns/kiet-tac-{vi,en}.php).
   ============================================ */
.casaluna-kiet-tac {
	position: relative;
	/* Chi anh nen o day; overlay am nam o ::before (de mask nhat rieng dinh). */
	background-image: var(--casaluna-kiet-tac-bg-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	/* Vi tri cum chu (chinh o day): --kt-x = mep trai, --kt-y = tam doc.
	   Cum canh LEFT-CENTER: trai 4%, tam doc giua man hinh 50%. */
	--kt-x: 4%;
	--kt-y: 50%;
}

/* Overlay am #985C30 gradient NGANG (nhu cu) — nhung mask cho NHAT DAN o DINH
   (~top 16%) de logo header khong bi chim; vung duoi (chu) giu Y NGUYEN nhu cu.
   ::before position:absolute nen KHONG thanh flex item cua section. */
.casaluna-kiet-tac::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Dong bo HOAN TOAN voi section "gioi thieu": overlay nau dam (%-based), 1 lop
	   mask SWEEP ngang. Da bo lop mask top-fade cu (transparent 0-16% tren dinh) —
	   chinh no giao voi sweep tao mang toi bo tron xau o goc tren-trai. */
	background: linear-gradient(to right, rgb(50, 43, 39) 0%, rgba(42, 24, 15, 0.96) 18%, rgba(42, 24, 15, 0.78) 34%, rgba(42, 24, 15, 0.4) 48%, rgba(42, 24, 15, 0) 62%);
	-webkit-mask-image: linear-gradient(to right, #000 0%, #000 50%, transparent 88%);
	mask-image: linear-gradient(to right, #000 0%, #000 50%, transparent 88%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 240% 100%;
	mask-size: 240% 100%;
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
	transition: -webkit-mask-position 1.8s ease, mask-position 1.8s ease;
}

.casaluna-kiet-tac.is-revealed::before {
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}

.casaluna-kiet-tac__inner {
	position: absolute;
	left: var(--kt-x);
	top: var(--kt-y);
	transform: translateY(-50%);
	max-width: 62%;
	text-align: left;
	z-index: 1; /* tren ::before overlay */
}

.casaluna-kiet-tac__heading {
	margin: 0;
	line-height: 1.08;
}

/* Dong 1 "KIET TAC" — to hon, mau kem sang (khong dung den) */
.casaluna-kiet-tac__heading-main {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-section-heading);
	letter-spacing: 0.04em;
	color: #edd49a;
}

/* Dong 2 "DINH THU TREN KHONG" — subheading, dung token chung */
.casaluna-kiet-tac__heading-sub {
	display: block;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: var(--fs-section-subheading);
	letter-spacing: 0.06em;
	color: #edd49a;
	margin-top: 0.15em;
}

.casaluna-kiet-tac__divider {
	display: block;
	width: clamp(64px, 6vw, 104px);
	height: 2px;
	/* Gold SANG de noi tren lop phu am #985C30 (truoc dung bronze bi lan mau) */
	background: linear-gradient(to right, #F0D89E, rgba(240, 216, 158, 0));
	margin: clamp(0.7rem, 1.4vh, 1.2rem) 0 clamp(0.5rem, 1vh, 0.9rem);
}

/* Hang "GIOI HAN CHI" + so "49 can" NAM CUNG HANG (theo mockup): kicker ben
   trai, can giua doc so voi so "49" lon ben phai. */
.casaluna-kiet-tac__limit {
	display: flex;
	align-items: flex-start; /* kicker len TREN (gan divider), khong con giua so 49 */
	flex-wrap: nowrap;
	gap: clamp(0.5rem, 1.2vw, 1.4rem);
	margin-top: 0;
}

.casaluna-kiet-tac__kicker {
	font-family: var(--font-body);
	font-weight: 600;
	/* +30% so voi cu (0.78/0.9/1 -> 1.01/1.17/1.3) */
	font-size: clamp(1.01rem, 1.17vw, 1.3rem);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #edd49a;
	/* Len GAN divider (theo yeu cau) */
	margin: clamp(0.1rem, 0.4vw, 0.35rem) 0 0;
	white-space: nowrap;
	flex-shrink: 0;
}

.casaluna-kiet-tac__count {
	display: flex;
	align-items: flex-end;
	/* "can" sat ve so 9 (gap ~0, keo them bang margin-left am o .__unit) */
	gap: 0;
	/* margin-left AM: keo ca cum "49 can" sang TRAI, dong khoang ho voi
	   "Gioi han chi" (chinh gia tri nay de dich trai/phai). */
	margin: 0 0 0 clamp(-4rem, -7vw, -2rem);
	line-height: 1;
}

.casaluna-kiet-tac__number {
	/* Giu rieng Playfair Display cho so nay (theo yeu cau user) — cac so
	   khac trong site da doi sang font moi (--font-heading). */
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	/* +15% so voi truoc (5/13/12 -> 5.75/15/13.8) */
	font-size: clamp(5.75rem, 15vw, 13.8rem);
	/* PHAI >= 1: background-clip:text ve gradient trong pham vi HOP chu; neu
	   line-height qua sat (0.85) thi phan duoi (duoi so 9/chan so 4) nam ngoai
	   hop -> khong duoc to gradient -> "mat duoi". 1.12 du bao ve descender. */
	line-height: 1.12;
	/* Keo so len cao (bu top-leading), theo em cua so nen tu co gian. */
	margin-top: -0.46em;
	letter-spacing: 0.005em;
	/* Gradient GOLD RO NET hon: tuong phan manh (sang -> toi ro rang) + 1 dai
	   highlight champagne -> vua bong bay vua doc ro. */
	background: linear-gradient(157deg, #FBEDC4 0%, #E7C173 27%, #C89646 50%, #F4D890 68%, #8F621D 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	/* Shadow GON, tao chieu sau nhe */
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.32));
}

.casaluna-kiet-tac__unit {
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: clamp(1.4rem, 2.6vw, 2.8rem);
	color: #D8B87A;
	padding-bottom: 0.5em; /* can theo phan than duoi cua so "49" */
	/* Keo "can" sat/tucked ve chan so 9 (chinh gia tri nay de sat/xa hon) */
	margin-left: clamp(-0.6rem, -0.7vw, -0.2rem);
}

@media (max-width: 1024px) {
	/* Mobile/tablet: anh RIENG (tong-quan-...-mobile.webp, 1668x1552 ~ gan vuong,
	   troi sang o nua tren). Height = ty le anh de hien FULL anh. Cum chu dat o
	   TREN (tren vung troi sang), KHONG overlay. */
	.casaluna-kiet-tac {
		background-image: var(--casaluna-kiet-tac-bg-image-mobile, var(--casaluna-kiet-tac-bg-image, none));
		min-height: 0;
		/* Height = ty le that anh mobile moi tong-the-tren-cao-mobile.webp
		   (1668x1904) -> cover khit, khong crop. Doi khi thay anh phai sua so nay. */
		height: calc(100vw * 1904 / 1668);
	}

	/* Bo overlay tren mobile (troi sang san, chu doc ro) */
	.casaluna-kiet-tac::before {
		display: none;
	}

	/* Cum chu len TREN, can giua ngang (top cach dinh 1 header cho khong de len logo) */
	.casaluna-kiet-tac__inner {
		left: 50%;
		/* Tablet: giu goc. Rieng dien thoai (≤640) co rule top: 4rem o block duoi. */
		top: calc(var(--header-height) + 0.5rem);
		transform: translate(-50%, 0);
		max-width: 90%;
	}

	/* So 49 TO hon (mockup) + gradient GOLD rieng cho mobile/tablet. */
	.casaluna-kiet-tac__number {
		font-size: clamp(5.5rem, 23vw, 11rem);
		background: linear-gradient(157deg, #FBEDC4 0%, #E7C173 27%, #F2E5B0 50%, #E9C873 68%, #C78E36 100%);
		-webkit-background-clip: text;
		background-clip: text;
		margin-top: 0;
	}

	.casaluna-kiet-tac__limit {
		margin-top: clamp(0.05rem, 0.3vh, 0.2rem);
	}

	/* Bot margin-left am cua "49 can" tren mobile (bo cuc khac desktop). margin-top
	   AM: keo CA CUM "49 can" len them ngang hang voi "GIOI HAN CHI" (theo yeu
	   cau user — test truc tiep tren thiet bi that, gia tri -50px la gia tri
	   DUNG da xac nhan, dat CUNG LUC voi cac tweak margin nho o .__number/
	   .__limit/.__divider trong media block nay). TUNABLE: so cang am = keo
	   CANG LEN CAO. */
	.casaluna-kiet-tac__count {
		margin-left: clamp(-1.5rem, -3vw, -0.4rem);
		margin-top: -50px;
	}

	/* Nen troi SANG -> chu mau BRONZE am (khong den, khong text-shadow), doc ro
	   ma van tone gold/nau am. */
	.casaluna-kiet-tac__heading-main {
		color: #8C541D;
		/* Heading tren mobile/tablet: +20% roi tang them 15% = token x1.38. */
		font-size: calc(var(--fs-section-heading) * 1.38);
	}

	.casaluna-kiet-tac__heading-sub {
		color: #8C541D;
		font-size: calc(var(--fs-section-subheading) * 1.38);
	}

	.casaluna-kiet-tac__kicker {
		color: #8C541D;
	}

	.casaluna-kiet-tac__unit {
		color: #8C541D;
	}

	.casaluna-kiet-tac__divider {
		background: linear-gradient(to right, #A26F39, rgba(162, 111, 57, 0));
		margin-bottom: clamp(0.05rem, 0.3vh, 0.2rem);
	}
}

/* Mobile (≤640): khoang cach tu mep tren section xuong cum noi dung. Tang tu
   1.5rem -> 4rem cho thoang (theo yeu cau user). Day la rule THUC SU dieu khien
   top tren dien thoai — ghi de len top cua block ≤1024. */
@media (max-width: 640px) {
	.casaluna-kiet-tac__inner {
		top: 4rem;
	}
}

/* Tablet (641-1024): DA BO override rieng (margin-top: -0.5em) — xung dot voi
   rule margin-top:0 chung cho ca mobile+tablet o block ≤1024 phia tren (yeu
   cau user: so "49" ngang hang "GIOI HAN CHI" tren MOI kich thuoc man hinh
   ≤1024, khong rieng gi tablet). */

/* Reveal so le: heading -> divider -> kicker -> so "49" (+ don vi). Cac phan tu
   la con truc tiep cua __inner nen dung transform reveal doc lap; __inner chi
   giu translateY(-50%) can tam (khong phai phan tu reveal). Toggle .is-revealed
   qua initSectionReveal (desktop) / initMobileReveal (mobile). */
#kiet-tac .casaluna-kiet-tac__heading,
#kiet-tac .casaluna-kiet-tac__divider,
#kiet-tac .casaluna-kiet-tac__kicker,
#kiet-tac .casaluna-kiet-tac__count {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1), transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#kiet-tac.is-revealed .casaluna-kiet-tac__heading { transition-delay: 0.05s; }
#kiet-tac.is-revealed .casaluna-kiet-tac__divider { transition-delay: 0.22s; }
#kiet-tac.is-revealed .casaluna-kiet-tac__kicker { transition-delay: 0.34s; }
#kiet-tac.is-revealed .casaluna-kiet-tac__count { transition-delay: 0.48s; }

#kiet-tac.is-revealed .casaluna-kiet-tac__heading,
#kiet-tac.is-revealed .casaluna-kiet-tac__divider,
#kiet-tac.is-revealed .casaluna-kiet-tac__kicker,
#kiet-tac.is-revealed .casaluna-kiet-tac__count {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	#kiet-tac .casaluna-kiet-tac__heading,
	#kiet-tac .casaluna-kiet-tac__divider,
	#kiet-tac .casaluna-kiet-tac__kicker,
	#kiet-tac .casaluna-kiet-tac__count {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.casaluna-kiet-tac::before {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
		transition: none;
	}
}

/* ============================================
   Section "Doi tac" (#doi-tac, sau Tien ich, truoc Van hanh) — 4 doi tac thiet
   ke/thi cong (DWP, BPI, Boxi, WTD). Anh nen GIU NGUYEN nhu Van hanh
   (--casaluna-doi-tac-bg-image[-mobile]) — chi doi NOI DUNG: kicker "Noi quy
   tu nhung" -> heading "GLOBAL STARCHITECTS" -> divider -> luoi 4 logo doi
   tac (2x2) + nhan chuyen mon tung don vi. Logo la file PNG mau TRANG (kiem
   tra: hien mau trang/gan trong suot khi xem tren nen trang) -> dat THANG len
   nen anh toi, KHONG can the nen (khac logo Nihon Housing chu DEN o Van hanh).
   ============================================ */
.casaluna-doi-tac {
	position: relative;
	background-image: var(--casaluna-doi-tac-bg-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	/* Vi tri cum chu (chinh o day): --dt-x = mep phai, --dt-y = tam doc. */
	--dt-x: 12%;
	--dt-y: 50%;
}

.casaluna-doi-tac::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(to left, rgb(50, 43, 39) 0%, rgba(42, 24, 15, 0.94) 18%, rgba(42, 24, 15, 0.76) 34%, rgba(42, 24, 15, 0.38) 48%, rgba(42, 24, 15, 0) 62%);
	-webkit-mask-image: linear-gradient(to left, #000 0%, #000 50%, transparent 88%);
	mask-image: linear-gradient(to left, #000 0%, #000 50%, transparent 88%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 240% 100%;
	mask-size: 240% 100%;
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
	transition: -webkit-mask-position 1.8s ease, mask-position 1.8s ease;
}

.casaluna-doi-tac.is-revealed::before {
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}

.casaluna-doi-tac__inner {
	position: absolute;
	right: var(--dt-x);
	top: var(--dt-y);
	transform: translateY(-50%);
	/* CHI "max-width", KHONG ep "width" co dinh — tung thu voi width:38% lam
	   box LUON rong toi da du noi dung khong can, day het cum chu lan sat vao
	   anh (mat khoang trong voi ảnh, user phan hoi "cang sua cang loi"). De
	   shrink-to-fit tu nhien (nhu ban dau): box tu co theo dung do dai noi
	   dung that su, giu dung khoang cach voi anh. Van de tran chu qua dai da
	   duoc chan RIENG o .casaluna-doi-tac__partners (grid minmax(0,1fr)) +
	   nguoi dung tu chen <br> cho nhan qua dai — khong can ep width o day. */
	max-width: 38%;
	text-align: left;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.casaluna-doi-tac__kicker {
	display: block;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-section-subheading);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: clamp(0.5rem, 1vh, 0.9rem);
}

.casaluna-doi-tac__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-section-heading);
	letter-spacing: 0.03em;
	line-height: 1.1;
	color: #F7F1E7;
}

.casaluna-doi-tac__divider {
	display: block;
	width: clamp(64px, 6vw, 104px);
	height: 2px;
	background: linear-gradient(to right, var(--color-primary), rgba(204, 170, 117, 0));
	margin: clamp(0.9rem, 1.8vh, 1.5rem) 0 clamp(1.6rem, 3vh, 2.4rem);
}

.casaluna-doi-tac__partners {
	display: grid;
	/* minmax(0, 1fr) — KHONG dung "1fr" tran (= minmax(auto,1fr)): track se
	   tu dong GIAN RA theo max-content cua noi dung dai nhat (vd nhan
	   "Masters of Architecture & Interior Design") vi flex/text con bi
	   min-width:auto mac dinh khong chiu co lai, khien ca luoi tran ra ngoai
	   __inner (right-anchored) -> nhin nhu "lech trai". minmax(0,1fr) ep
	   track co dung phan chia deu, buoc nhan phai XUONG DONG thay vi day
	   rong cot. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.6rem, 3.4vh, 2.4rem) clamp(1.8rem, 3vw, 2.6rem);
	width: 100%;
}

.casaluna-doi-tac__partner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(0.6rem, 1.2vh, 0.9rem);
	min-width: 0;
}

/* Logo TRANG (khong nen) dat truc tiep len anh/overlay toi — drop-shadow nhe
   tao chieu sau, khong dung backdrop card (khac logo den o Van hanh). Height
   co dinh + object-fit:contain de 4 logo ty le khac nhau (vuong/wordmark) tu
   dong quy ve CUNG 1 chieu cao thi giac. */
.casaluna-doi-tac__partner-logo {
	height: clamp(36px, 3.2vw, 52px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4));
}

/* dwp (1) va bpi (2) la logo VUONG/TRON (kg khac boxi/wtd la wordmark NGANG) —
   cung 1 chieu cao thi giac nhu boxi/wtd thi dwp/bpi lai bi NHIN NHO hon han
   (object-fit:contain theo chieu cao lam logo ngang rong ra, logo vuong thi
   khong). Tang rieng height 2 logo nay de CAN BANG dien tich thi giac, khop
   yeu cau user "cho bang voi 2 logo ben duoi". */
.casaluna-doi-tac__partner:nth-child(1) .casaluna-doi-tac__partner-logo {
	height: clamp(63px, 5.6vw, 91px);
}

.casaluna-doi-tac__partner:nth-child(2) .casaluna-doi-tac__partner-logo {
	height: clamp(56px, 5vw, 81px);
}

.casaluna-doi-tac__partner-label {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: clamp(0.64rem, 0.72vw, 0.78rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.45;
	color: var(--color-primary);
}

@media (max-width: 1024px) {
	.casaluna-doi-tac {
		background-image: var(--casaluna-doi-tac-bg-image-mobile, var(--casaluna-doi-tac-bg-image, none));
		background-position: top center;
		background-size: 100% auto;
		background-color: #231406;
		min-height: 0;
		height: auto;
		padding-top: calc(100vw * 950 / 1176);
		padding-bottom:10%;
	}

	.casaluna-doi-tac::before {
		top: calc(100vw * 950 / 1176 - 3.5rem);
		height: 4rem;
		bottom: auto;
		background: linear-gradient(to bottom, rgba(35, 20, 6, 0) 0%, #231406 100%);
		-webkit-mask-image: none;
		mask-image: none;
	}

	.casaluna-doi-tac__inner {
		position: relative;
		right: auto;
		left: auto;
		top: 70px;
		bottom: auto;
		transform: none;
		max-width: 100%;
		width: 100%;
		align-items: center;
		text-align: center;
		padding: 0 0 clamp(5rem, 5.5vh, 3.6rem);
	}

	.casaluna-doi-tac__divider {
		background: linear-gradient(to right, rgba(204, 170, 117, 0), var(--color-primary), rgba(204, 170, 117, 0));
	}

	.casaluna-doi-tac__kicker {
		font-size: calc(var(--fs-section-subheading) * 1.5);
	}

	.casaluna-doi-tac__heading {
		font-size: calc(var(--fs-section-heading) * 1.242);
	}

	.casaluna-doi-tac__partners {
		max-width: 340px;
		gap: 1.8rem 2rem;
	}

	.casaluna-doi-tac__partner {
		align-items: center;
	}

	.casaluna-doi-tac__partner-logo {
		height: clamp(40px, 9vw, 52px);
	}

	.casaluna-doi-tac__partner:nth-child(1) .casaluna-doi-tac__partner-logo {
		height: clamp(70px, 15.75vw, 91px);
	}

	.casaluna-doi-tac__partner:nth-child(2) .casaluna-doi-tac__partner-logo {
		height: clamp(62px, 14vw, 81px);
	}

	.casaluna-doi-tac__partner-label {
		font-size: 0.72rem;
		text-align: center;
	}
}

/* Reveal so le: kicker -> heading -> divider -> luoi doi tac (1 khoi). */
#doi-tac .casaluna-doi-tac__kicker,
#doi-tac .casaluna-doi-tac__heading,
#doi-tac .casaluna-doi-tac__divider,
#doi-tac .casaluna-doi-tac__partners {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1), transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#doi-tac.is-revealed .casaluna-doi-tac__kicker { transition-delay: 0.1s; }
#doi-tac.is-revealed .casaluna-doi-tac__heading { transition-delay: 0.24s; }
#doi-tac.is-revealed .casaluna-doi-tac__divider { transition-delay: 0.38s; }
#doi-tac.is-revealed .casaluna-doi-tac__partners { transition-delay: 0.5s; }

#doi-tac.is-revealed .casaluna-doi-tac__kicker,
#doi-tac.is-revealed .casaluna-doi-tac__heading,
#doi-tac.is-revealed .casaluna-doi-tac__divider,
#doi-tac.is-revealed .casaluna-doi-tac__partners {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	#doi-tac .casaluna-doi-tac__kicker,
	#doi-tac .casaluna-doi-tac__heading,
	#doi-tac .casaluna-doi-tac__divider,
	#doi-tac .casaluna-doi-tac__partners {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.casaluna-doi-tac::before {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
		transition: none;
	}
}

/* ============================================
   Section "Gioi thieu" (#gioi-thieu, section 5 — sau Kiet tac) — "TONG QUAN DU AN".
   Anh nen tong the du an ban DEM (Tong-the-casaluna-dem.webp, 2560x1448 ~16:9,
   cover center). Nen TOI -> chu SANG (kem/gold). Cum chu can TRAI (theo yeu cau
   noi dung nam ben trai hinh): kicker + heading + divider gold + bang thong so
   du an (dl label/value). Overlay toi lech trai o ::before de dam bao doc chu.
   Anh nen gan qua CSS var inline --casaluna-gioi-thieu-bg-image
   (patterns/gioi-thieu-{vi,en}.php). Reveal so le khi cuon toi.
   ============================================ */
.casaluna-gioi-thieu {
	position: relative;
	background-image: var(--casaluna-gioi-thieu-bg-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	/* Vi tri cum chu (chinh o day): --gt-x = mep trai, --gt-y = tam doc. */
	--gt-x: 7%;
	--gt-y: 50%;
}

/* Overlay toi lech TRAI (nen anh dem san toi, nhung them lop nay dam bao chu
   ben trai doc ro; nhat dan sang phai de giu 2 thap ben phai sang).
   Mau nau am brand #2A180F = rgb 42,24,15 (KHONG dung den).
   Do phu CHI qua khoi cum text 1 chut: cum text rong toi ~53% (left 7% + max-width
   46%) -> overlay tan HAN o ~62%, nua PHAI anh (2 thap) KHONG bi phu.
   Mep TRAI dam dac roi nhat dan sang phai.
   Overlay xuat hien nhe nhang tu TRAI qua PHAI khi cuon toi bang MASK gradient
   co mep MEM quet ngang (mask-position 100% -> 0) — ban chat la opacity fade
   theo huong, KHONG co dai mau dac/cat thang nhu clip-path. DAN TRUOC cum noi
   dung (cum text reveal so le ngay sau). */
.casaluna-gioi-thieu::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(to right, rgb(50, 43, 39) 0%, rgba(42, 24, 15, 0.96) 18%, rgba(42, 24, 15, 0.78) 34%, rgba(42, 24, 15, 0.4) 48%, rgba(42, 24, 15, 0) 62%);
	-webkit-mask-image: linear-gradient(to right, #000 0%, #000 50%, transparent 88%);
	mask-image: linear-gradient(to right, #000 0%, #000 50%, transparent 88%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 240% 100%;
	mask-size: 240% 100%;
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
	transition: -webkit-mask-position 1.8s ease, mask-position 1.8s ease;
}

.casaluna-gioi-thieu.is-revealed::before {
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}

.casaluna-gioi-thieu__inner {
	position: absolute;
	left: var(--gt-x);
	top: var(--gt-y);
	transform: translateY(-50%);
	max-width: 46%;
	text-align: left;
	z-index: 1; /* tren ::before overlay */
}

.casaluna-gioi-thieu__kicker {
	display: block;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: clamp(0.78rem, 0.95vw, 1rem);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: clamp(0.5rem, 1vh, 0.9rem);
}

.casaluna-gioi-thieu__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-section-heading);
	letter-spacing: 0.03em;
	line-height: 1.08;
	color: #F7F1E7;
}

.casaluna-gioi-thieu__divider {
	display: block;
	width: clamp(64px, 6vw, 104px);
	height: 2px;
	background: linear-gradient(to right, var(--color-primary), rgba(204, 170, 117, 0));
	margin: clamp(0.9rem, 1.8vh, 1.5rem) 0 clamp(1.1rem, 2.2vh, 1.8rem);
}

.casaluna-gioi-thieu__specs {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.casaluna-gioi-thieu__spec {
	display: grid;
	grid-template-columns: minmax(120px, 46%) 1fr;
	gap: clamp(0.6rem, 1.6vw, 1.6rem);
	align-items: baseline;
	padding: clamp(0.6rem, 1.3vh, 0.95rem) 0;
	border-bottom: 1px solid rgba(204, 170, 117, 0.25);
}

.casaluna-gioi-thieu__spec:first-child {
	border-top: 1px solid rgba(204, 170, 117, 0.25);
}

.casaluna-gioi-thieu__label {
	font-family: var(--font-body);
	font-weight: 900;
	font-size: clamp(0.72rem, 0.9vw, 1.2rem);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-primary);
	line-height: 1.5;
}

.casaluna-gioi-thieu__value {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(0.95rem, 1.15vw, 1.2rem);
	line-height: 1.5;
	color: #EDE3D2;
}

/* Dong phu (chi tiet co cau can ho) — nho hon, muted, xuong dong rieng */
.casaluna-gioi-thieu__value-sub {
	display: block;
	margin-top: 0.3rem;
	font-size: clamp(0.82rem, 0.98vw, 1rem);
	color: var(--text-muted-on-dark, #BFAE96);
	line-height: 1.55;
}

@media (max-width: 1024px) {
	/* Mobile/tablet: anh RIENG (gioi-thieu-mobile-tablet.webp, 1668x1147) — thanh
	   pho neo o DAY, phan troi beige cua anh HOA vao nen section #DBBC93 -> cum
	   text nam o vung beige PHIA TREN (theo mockup khoanh do). Nen SANG -> chu TOI,
	   BO overlay toi. Reserve padding-bottom = chieu cao anh de text luon nam tren
	   thanh pho. */
	.casaluna-gioi-thieu {
		background-image: var(--casaluna-gioi-thieu-bg-image-mobile, var(--casaluna-gioi-thieu-bg-image, none));
		background-color: #DBBC93;
		background-size: 100% auto;
		background-position: bottom center;
		min-height: 0;
		height: auto;
		padding: calc(var(--header-height) + 1.5rem) 1.25rem calc(100vw * 1147 / 1668);
	}

	/* Nen sang -> bo han overlay toi */
	.casaluna-gioi-thieu::before {
		display: none;
	}

	.casaluna-gioi-thieu__inner {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		max-width: 100%;
	}

	.casaluna-gioi-thieu__spec {
		grid-template-columns: 1fr;
		gap: 0.15rem;
		border-bottom-color: rgba(107, 68, 35, 0.3);
	}

	.casaluna-gioi-thieu__spec:first-child {
		border-top-color: rgba(107, 68, 35, 0.3);
	}

	/* Chu tone TOI cho nen beige sang + PHONG TO cho mobile/tablet (desktop van
	   dung clamp goc). Thu tu co chu: label > value > value-sub (theo yeu cau
	   label lon hon phan noi dung con lai). */
	.casaluna-gioi-thieu__heading {
		color: #8C541D; /* co chu do token --fs-section-heading lo */
		/* Bang heading section kiet-tac tren mobile/tablet (cung token x1.38). */
		font-size: calc(var(--fs-section-heading) * 1.38);
	}

	.casaluna-gioi-thieu__divider {
		background: linear-gradient(to right, #A26F39, rgba(162, 111, 57, 0));
	}

	.casaluna-gioi-thieu__label {
		color: #8A5228;
		font-size: clamp(1.05rem, 3vw, 1.5rem);
	}

	.casaluna-gioi-thieu__value {
		color: #4E3A25;
		font-size: clamp(1rem, 2.6vw, 1.35rem);
	}

	.casaluna-gioi-thieu__value-sub {
		color: #6E5A45;
		font-size: clamp(0.9rem, 2.2vw, 1.15rem);
	}
}

/* Tablet (641-1024): vw day chu to qua so voi phone -> giam ~40%. Giu thu tu
   label > value > value-sub. Phone (<=640) van dung co lon o block ben tren. */
@media (min-width: 641px) and (max-width: 1024px) {
	.casaluna-gioi-thieu__label {
		font-size: clamp(1rem, 2vw, 1.2rem);
	}

	.casaluna-gioi-thieu__value {
		font-size: clamp(0.95rem, 1.9vw, 1.14rem);
	}

	.casaluna-gioi-thieu__value-sub {
		font-size: clamp(0.84rem, 1.7vw, 0.98rem);
	}
}

/* Mobile (<=640): noi dung Tong quan +20% (label/value/value-sub). Value &
   value-sub goc lay tu block <=1024, nen phai ghi de rieng o day cho phone. */
@media (max-width: 640px) {
	.casaluna-gioi-thieu__label {
		font-size: clamp(1.02rem, 2.88vw, 1.45rem);
	}

	.casaluna-gioi-thieu__value {
		font-size: clamp(1.2rem, 3.12vw, 1.62rem);
	}

	.casaluna-gioi-thieu__value-sub {
		font-size: clamp(1.08rem, 2.64vw, 1.38rem);
	}
}

/* Reveal so le: heading -> divider -> tung dong thong so. Toggle .is-revealed
   qua initSectionReveal (desktop) / initMobileReveal (mobile). */
#gioi-thieu .casaluna-gioi-thieu__heading,
#gioi-thieu .casaluna-gioi-thieu__divider,
#gioi-thieu .casaluna-gioi-thieu__spec {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1), transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#gioi-thieu.is-revealed .casaluna-gioi-thieu__heading { transition-delay: 0.05s; }
#gioi-thieu.is-revealed .casaluna-gioi-thieu__divider { transition-delay: 0.18s; }
#gioi-thieu.is-revealed .casaluna-gioi-thieu__spec:nth-child(1) { transition-delay: 0.3s; }
#gioi-thieu.is-revealed .casaluna-gioi-thieu__spec:nth-child(2) { transition-delay: 0.4s; }
#gioi-thieu.is-revealed .casaluna-gioi-thieu__spec:nth-child(3) { transition-delay: 0.5s; }
#gioi-thieu.is-revealed .casaluna-gioi-thieu__spec:nth-child(4) { transition-delay: 0.6s; }
#gioi-thieu.is-revealed .casaluna-gioi-thieu__spec:nth-child(5) { transition-delay: 0.7s; }

#gioi-thieu.is-revealed .casaluna-gioi-thieu__heading,
#gioi-thieu.is-revealed .casaluna-gioi-thieu__divider,
#gioi-thieu.is-revealed .casaluna-gioi-thieu__spec {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	#gioi-thieu .casaluna-gioi-thieu__heading,
	#gioi-thieu .casaluna-gioi-thieu__divider,
	#gioi-thieu .casaluna-gioi-thieu__spec {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.casaluna-gioi-thieu::before {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
		transition: none;
	}
}

/* ============================================
   Section "Vi tri" (#vi-tri) — ban do vi tri (SVG inline: nen map.jpg + 2 duong
   ket noi dashed road1/road2 + pin location). Ban do phu FULL section (cover),
   vung PHAI cua anh la beige TRONG -> cum text (heading cha/con + 2 doan) dat
   overlay ben phai, nen SANG nen chu TOI (nau). Animation: pin bob len-xuong,
   road1 marching-ants tien (toi), road2 marching-ants lui.
   ============================================ */
.casaluna-vi-tri {
	position: relative;
	overflow: hidden;
	background-color: #E7D4AF; /* beige khop mep ban do (letterbox ne) */
	padding: 0;
	/* Ban do dung position:absolute -> can chieu cao thuc. Global .casaluna-section
	   dat min-height:auto o <=1024 (section se SAP con 0px tren TABLET -> mat hut).
	   Ep 100vh de TABLET + desktop deu giu layout cover. Mobile <=640 override lai. */
	min-height: 100vh;
}

.casaluna-vi-tri__map {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.casaluna-vi-tri__map svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Mac dinh (desktop + tablet >640): hien map desktop landscape, an map mobile.
   ⚠️ Ngoai le breakpoint: section nay TABLET giu giao dien desktop (theo yeu cau
   user) -> mobile-only override dung 640, khong phai 1024 nhu cac section khac. */
.casaluna-vi-tri__map--mobile {
	display: none;
}

/* 2 duong ket noi (ca desktop #road1/2 lan mobile #road1m/2m): to dam hon cho
   de thay (svg goc stroke-width mac dinh ~1). */
.casaluna-vi-tri__map #road1,
.casaluna-vi-tri__map #road2,
.casaluna-vi-tri__map #road1m,
.casaluna-vi-tri__map #road2m {
	stroke-width: 4;
	stroke-linecap: round;
}

/* Marching-ants: 1 chu ky = dash+gap (desktop 12.1+4.84=16.94; mobile 11.99+4.79
   =16.78 & 11.97+4.79=16.76). road1 offset AM = chay TOI, road2 offset DUONG = LUI. */
.casaluna-vi-tri__map #road1 { animation: casaluna-road-forward 1.1s linear infinite; }
.casaluna-vi-tri__map #road2 { animation: casaluna-road-backward 1.1s linear infinite; }
.casaluna-vi-tri__map #road1m { animation: casaluna-road-forward-m 1.1s linear infinite; }
.casaluna-vi-tri__map #road2m { animation: casaluna-road-backward-m 1.1s linear infinite; }

@keyframes casaluna-road-forward { to { stroke-dashoffset: -16.94; } }
@keyframes casaluna-road-backward { to { stroke-dashoffset: 16.94; } }
@keyframes casaluna-road-forward-m { to { stroke-dashoffset: -16.78; } }
@keyframes casaluna-road-backward-m { to { stroke-dashoffset: 16.76; } }

/* Pin bob len-xuong muot. Keyframe PHAI chua translate goc (CSS transform de
   presentation attribute cua <image>). Desktop pin 630.87/713.11, mobile 616.34/1464.43. */
.casaluna-vi-tri__map #pin {
	animation: casaluna-pin-bob 2.4s ease-in-out infinite;
	will-change: transform;
}

.casaluna-vi-tri__map #pinm {
	animation: casaluna-pin-bob-m 2.4s ease-in-out infinite;
	will-change: transform;
}

@keyframes casaluna-pin-bob {
	0%, 100% { transform: translate(630.87px, 713.11px); }
	50%      { transform: translate(630.87px, 697px); }
}

@keyframes casaluna-pin-bob-m {
	0%, 100% { transform: translate(616.34px, 1464.43px); }
	50%      { transform: translate(616.34px, 1448px); }
}

/* Cum text ben PHAI (vung beige trong cua ban do) */
.casaluna-vi-tri__content {
	position: absolute;
	right: 4.5%;
	top: 50%;
	transform: translateY(-50%);
	width: min(34%, 620px);
	z-index: 2;
	text-align: left;
	/* container-query: heading dung cqw de tu vua 1 dong theo be rong cot */
	container-type: inline-size;
}

/* Cỡ chữ dùng TOKEN chung --fs-section-heading (đồng nhất mọi section). Cho
   phép rớt dòng (bỏ nowrap+cqw cũ) để không tràn cột hẹp khi dùng cỡ chung.
   Mau gold dam #8f5707. */
.casaluna-vi-tri__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-section-heading);
	letter-spacing: 0.02em;
	line-height: 1.08;
	color: #8f5707;
}

.casaluna-vi-tri__text strong {
	font-weight: 700;
	color: #7a4d04;
}

.casaluna-vi-tri__subheading {
	margin: 0.35rem 0 0;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: var(--fs-section-subheading);
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #8A5228;
}

.casaluna-vi-tri__divider {
	display: block;
	width: clamp(64px, 6vw, 104px);
	height: 2px;
	background: linear-gradient(to right, #A26F39, rgba(162, 111, 57, 0));
	margin: clamp(1rem, 2vh, 1.6rem) 0 clamp(1.1rem, 2.2vh, 1.8rem);
}

.casaluna-vi-tri__text {
	margin: 0 0 1rem;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fs-section-body);
	line-height: 1.75;
	color: #7a4d04;
}

.casaluna-vi-tri__text:last-child {
	margin-bottom: 0;
}

/* MOBILE + TABLET (<=1024): dung CHUNG giao dien mobile (theo yeu cau user — layout
   tablet desktop-style khong on). map svg = HINH NEN (z1), giu ty le tu nhien
   (in-flow, quyet dinh chieu cao section, KHONG crop). Text = OVERLAY len tren (z2)
   o VUNG TRONG DINH map -> 1 khoi tich hop, text nam TREN hinh (khong tach 2 block). */
@media (max-width: 1024px) {
	.casaluna-vi-tri {
		min-height: 0;
		height: auto;
		padding: 0;
		background-color: #D7B588;
		position: relative;
	}

	.casaluna-vi-tri__map--desktop {
		display: none;
	}

	/* Map = hinh nen (z1), in-flow, FULL-WIDTH (edge-to-edge, khong mep trong 2 ben).
	   margin-top = khoang trong (#D7B588) chua text, NGHICH theo be rong (man rong ->
	   margin nho dan vi map portrait cao hon, vung trong dinh da du). */
	.casaluna-vi-tri__map--mobile {
		display: block;
		position: relative;
		inset: auto;
		z-index: 1;
		width: 100%;
		/* Khoang trong tren map = cho text (absolute) nam. Text da to len (heading
		   + content +20%) nen can khoang lon hon 18rem cu. Tunable: chinh so 28rem
		   (to hon = map xuong sau hon / khoang trong lon hon; nho hon = map len gan
		   text hon). */
		margin-top: max(0px, calc(16rem - 32vw));
	}

	.casaluna-vi-tri__map--mobile svg {
		height: auto;
	}

	/* Text OVERLAY len tren (z2 > z1): phu tu dinh section xuong — nam tren khoang
	   trong #D7B588 + phan dinh trong cua map. Text nam TREN hinh (z cao hon). */
	.casaluna-vi-tri__content {
		position: absolute;
		top: calc(var(--header-height) - 1rem);
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: 90%;
		max-width: 650px;
		text-align: left;
		z-index: 2;
	}

	/* Heading + subheading BANG section kiet-tac (cung token x1.38). Content +20%. */
	.casaluna-vi-tri__heading {
		/* x1.38 (bang kiet-tac) roi giam 10% de khong tran mep khi nowrap -> x1.242. */
		font-size: calc(var(--fs-section-heading) * 1.242);
		white-space: nowrap; /* giu 1 dong, khong rot dong khi font lon */
	}

	.casaluna-vi-tri__subheading {
		margin-top: 0.25rem;
		font-size: calc(var(--fs-section-subheading) * 1.38);
	}

	.casaluna-vi-tri__divider {
		margin: 0.7rem 0 0.9rem;
	}

	.casaluna-vi-tri__text {
		line-height: 1.55;
		margin-bottom: 0.65rem;
		/* Content +20% tren mobile/tablet. */
		font-size: calc(var(--fs-section-body) * 1.2);
	}
}

/* Tablet (641-1024): thu hep khoang trong text<->map (~70% so voi truoc) bang
   cach keo map LEN. (Cỡ chữ do token lo, khong override o day nua.) */
@media (min-width: 641px) and (max-width: 1024px) {
	.casaluna-vi-tri__map--mobile {
		margin-top: -4rem;
	}
}

/* Reveal so le: heading cha -> heading con -> divider -> 2 doan text */
#vi-tri .casaluna-vi-tri__heading,
#vi-tri .casaluna-vi-tri__subheading,
#vi-tri .casaluna-vi-tri__divider,
#vi-tri .casaluna-vi-tri__text {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1), transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#vi-tri.is-revealed .casaluna-vi-tri__heading { transition-delay: 0.05s; }
#vi-tri.is-revealed .casaluna-vi-tri__subheading { transition-delay: 0.18s; }
#vi-tri.is-revealed .casaluna-vi-tri__divider { transition-delay: 0.3s; }
#vi-tri.is-revealed .casaluna-vi-tri__text:nth-of-type(1) { transition-delay: 0.42s; }
#vi-tri.is-revealed .casaluna-vi-tri__text:nth-of-type(2) { transition-delay: 0.54s; }

#vi-tri.is-revealed .casaluna-vi-tri__heading,
#vi-tri.is-revealed .casaluna-vi-tri__subheading,
#vi-tri.is-revealed .casaluna-vi-tri__divider,
#vi-tri.is-revealed .casaluna-vi-tri__text {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	#vi-tri .casaluna-vi-tri__heading,
	#vi-tri .casaluna-vi-tri__subheading,
	#vi-tri .casaluna-vi-tri__divider,
	#vi-tri .casaluna-vi-tri__text {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.casaluna-vi-tri__map #road1,
	.casaluna-vi-tri__map #road2,
	.casaluna-vi-tri__map #road1m,
	.casaluna-vi-tri__map #road2m,
	.casaluna-vi-tri__map #pin,
	.casaluna-vi-tri__map #pinm {
		animation: none;
	}
}

/* ============================================
   Section Tin tuc (#tin-tuc) — dung chung Background 03 (--gradient-section)
   nhu moi section .casaluna-section--dark khac (khong con anh nen rieng —
   da bo theo yeu cau, xem rule .casaluna-section--dark:not(...) o tren).
   Can giua theo chieu doc; noi dung gioi han max-width 1200px (giong
   .casaluna-footer__inner) du section van fullwidth.
   ============================================ */
#tin-tuc {
	justify-content: center;
}

/* Title bai viet + excerpt tren nen toi cua section nay — rule .casaluna-tin-tuc-card__title a
   va __excerpt von co mau rieng (khong phai the p/h1-h6 tran) nen rule dung
   chung .casaluna-section--dark khong tu ap dung, phai ghi de rieng o day. */
#tin-tuc .casaluna-tin-tuc-card__title a {
	color: var(--text-heading-on-dark);
}

#tin-tuc .casaluna-tin-tuc-card--featured .casaluna-tin-tuc-card__excerpt {
	color: var(--text-body-on-dark);
}

/* Heading "TIN TUC" — tang gap doi so voi mac dinh (24px -> 48px). */
#tin-tuc .wp-block-heading {
	font-size: 3rem;
	margin-bottom: clamp(1rem, 3vh, 2.5rem);
}

/* Noi dung gioi han 1200px, can giua — section van fullwidth, chi phan
   content ben trong thu hep lai giong footer (.casaluna-footer__inner).
   Luu y: KHONG dat width:100% truc tiep len .casaluna-tin-tuc-cta (la the
   <a> inline-flex, chi to theo NOI DUNG) — se lam no keo dai het 1200px
   thay vi la 1 nut nho. Bao boi rieng bang .casaluna-tin-tuc-cta-wrap. */
#tin-tuc .wp-block-heading,
.casaluna-tin-tuc-layout,
.casaluna-tin-tuc-cta-wrap {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.casaluna-tin-tuc-cta-wrap {
	/* Nut nam o goc trai (mac dinh cua the div), khong keo dai het chieu rong. */
	display: flex;
	justify-content: flex-start;
}

/* ============================================
   Teaser Tin tuc trong landing page (shortcode casaluna_tin_tuc) — 1 bai
   moi nhat lam tin chu dao (featured, lon hon + co excerpt), 4 bai con lai
   nho hon trong luoi 2 cot ben canh. Khac voi .casaluna-tin-tuc-grid don
   thuan dung o trang danh sach day du (archive-tin_tuc.php).
   ============================================ */
.casaluna-tin-tuc-layout {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(1.25rem, 3vh, 2.5rem);
	width: 100%;
}

.casaluna-tin-tuc-card--featured {
	gap: clamp(0.5rem, 1.5vh, 1.1rem);
}

.casaluna-tin-tuc-card--featured .casaluna-tin-tuc-card__thumbnail {
	aspect-ratio: 16 / 9;
	/* Co gian theo chieu cao man hinh (vh) thay vi px cung — man hinh cao
	   (vd 1080p) se lay day nhieu hon, man hinh thap (vd 720px) van vua
	   khong day CTA ra khoi tam nhin. Voi cot 1200px max-width, ty le anh
	   tu nhien (16:9 cua ~624px rong) ~351px — cap max-height rong rai hon
	   de khong bi ep thap. */
	max-height: clamp(175px, 25vh, 420px);
}

.casaluna-tin-tuc-card--featured .casaluna-tin-tuc-card__title {
	font-size: 1.5rem;
}

.casaluna-tin-tuc-card--featured .casaluna-tin-tuc-card__excerpt {
	/* Gioi han 2 dong de khong day CTA xuong duoi man hinh (section co
	   min-height:100vh, khong cuon rieng ben trong duoc). */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

.casaluna-tin-tuc-grid--compact {
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem 1rem;
	align-content: start;
}

.casaluna-tin-tuc-grid--compact .casaluna-tin-tuc-card {
	gap: 0.3rem;
}

.casaluna-tin-tuc-grid--compact .casaluna-tin-tuc-card__thumbnail {
	aspect-ratio: 16 / 10;
	max-height: clamp(90px, 13.5vh, 190px);
}

.casaluna-tin-tuc-grid--compact .casaluna-tin-tuc-card__title {
	font-size: 0.9rem;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* CTA duy nhat cuoi section, mo trang danh sach day du /tin-tuc/ — thay cho
   link "Xem them" tren tung bai (da bo). Kieu dang "luxury" hon ban outline
   thuong: chu Playfair + letter-spacing rong, hieu ung "sweep fill" gradient
   quet tu trai sang khi hover (khong doi mau dot ngot) + icon mui ten truot. */
.casaluna-tin-tuc-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	margin-top: clamp(1rem, 3vh, 2.5rem);
	padding: 0.9rem 2.5rem;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	text-decoration: none;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	transition: color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.casaluna-tin-tuc-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, var(--color-primary), var(--color-accent));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 0;
}

.casaluna-tin-tuc-cta__label,
.casaluna-tin-tuc-cta__icon {
	position: relative;
	z-index: 1;
}

.casaluna-tin-tuc-cta__icon {
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.casaluna-tin-tuc-cta:hover {
	color: var(--color-dark);
	border-color: var(--color-accent);
	box-shadow: var(--shadow-soft);
}

.casaluna-tin-tuc-cta:hover::before {
	transform: scaleX(1);
}

.casaluna-tin-tuc-cta:hover .casaluna-tin-tuc-cta__icon {
	transform: translateX(5px);
}

/* Mobile/tablet: nen section la gradient gold (Background 03, --gradient-section)
   ket thuc bang chinh mau --color-primary (#CCAA75) — nut vien+chu cung tong
   mau gold nen bi "chim" vao nen, gan nhu vo hinh. Doi chu/vien sang mau kem
   sang de tuong phan ro (KHONG dung nen/shadow — theo yeu cau user, chi doi
   mau vien+chu). Dong thoi thu nho nut con 60% (giam 40%) so voi ban goc. */
@media (max-width: 1024px) {
	.casaluna-tin-tuc-cta {
		border-color: rgba(247, 241, 231, 0.85);
		color: #F7F1E7;
		gap: 0.51rem;
		padding: 0.54rem 1.5rem;
		font-size: 0.51rem;
	}

	.casaluna-tin-tuc-cta__icon {
		width: 9px;
		height: 9px;
	}

	.casaluna-tin-tuc-cta:hover {
		color: var(--color-dark);
		border-color: var(--color-accent);
	}
}

/* Hieu ung xuat hien khi cuon toi section Tin tuc — "mask" wipe tu trai
   sang phai (clip-path), tang dan so thu tu tung the (stagger), kich hoat
   qua class .is-revealed do initTinTucReveal() trong main.js toggle theo
   event casaluna:section-change. Tat ca dung chung 1 transition-timing
   cham/muot theo Motion token cua brand (khong dung animation nhanh).
   QUAN TRONG: scope rieng trong #tin-tuc (section landing) — class
   .casaluna-tin-tuc-card con duoc archive-tin_tuc.php dung lai cho trang
   danh sach day du, KHONG co stepper/event casaluna:section-change nen se
   khong bao gio nhan .is-revealed — neu de rule opacity:0 ap dung chung
   (khong scope) thi card ben archive se bi an vinh vien (bug da xay ra). */
#tin-tuc .casaluna-tin-tuc-card {
	clip-path: inset(0 100% 0 0);
	opacity: 0;
	transform: translateX(12px);
	transition:
		clip-path 0.9s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.7s ease,
		transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

#tin-tuc .casaluna-tin-tuc-card.is-revealed {
	clip-path: inset(0 0 0 0);
	opacity: 1;
	transform: translateX(0);
}

#tin-tuc .casaluna-tin-tuc-card--featured.is-revealed {
	transition-delay: 0s;
}

#tin-tuc .casaluna-tin-tuc-grid--compact .casaluna-tin-tuc-card:nth-child(1).is-revealed {
	transition-delay: 0.15s;
}

#tin-tuc .casaluna-tin-tuc-grid--compact .casaluna-tin-tuc-card:nth-child(2).is-revealed {
	transition-delay: 0.3s;
}

#tin-tuc .casaluna-tin-tuc-grid--compact .casaluna-tin-tuc-card:nth-child(3).is-revealed {
	transition-delay: 0.45s;
}

#tin-tuc .casaluna-tin-tuc-grid--compact .casaluna-tin-tuc-card:nth-child(4).is-revealed {
	transition-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
	#tin-tuc .casaluna-tin-tuc-card {
		clip-path: none;
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Mobile + Tablet — Tin tuc ve 1 cot (gom tu 780 -> 1024, xem quy uoc dau file) */
@media (max-width: 1024px) {
	.casaluna-tin-tuc-layout {
		grid-template-columns: 1fr;
	}

	.casaluna-tin-tuc-grid--compact {
		grid-template-columns: repeat(2, 1fr);
	}

	#tin-tuc .wp-block-heading {
		font-size: 2.2rem;
	}
}

/* Background 02 — News Detail/Reading Content: nen sang diu, doc de chiu. */
.casaluna-archive-tin-tuc {
	max-width: 1100px;
	margin: calc(var(--header-height) + 2rem) auto 4rem;
	padding: 3rem 2rem;
	background: var(--gradient-reading);
	border-radius: var(--radius-base);
	box-shadow: var(--shadow-soft);
}

/* Card trong luoi archive co excerpt dai ngan khac nhau lam day/chieu cao
   khong deu — gioi han 3 dong (giong cach lam o teaser landing) de cac card
   cung hang luon bang nhau. */
.casaluna-archive-tin-tuc .casaluna-tin-tuc-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 0;
}

/* Can hang thumbnail/title/excerpt giua cac card dung CSS subgrid — KHONG
   cat bot title (hien du toan bo chu), hang tu gian theo card co title dai
   nhat trong cung hang. Da thu -webkit-line-clamp va height co dinh truoc
   do (cat bot chu) nhung user yeu cau hien du title — subgrid la cach dung
   giai quyet ca 2 (du chu + thang hang) ma khong can cat. */
.casaluna-archive-tin-tuc .casaluna-tin-tuc-grid {
	grid-template-rows: auto auto auto;
	align-items: start;
}

.casaluna-archive-tin-tuc .casaluna-tin-tuc-card {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	/* Giam khoang cach chung giua thumbnail/title/excerpt (truoc la 0.5rem
	   dung chung cho .casaluna-tin-tuc-card o moi noi) — rieng o archive can
	   sat hon giua title va excerpt theo yeu cau. */
	gap: 0.35rem;
}

.casaluna-single-tin-tuc {
	/* Khung doc mac dinh 1024px (truoc la 800px). Anh/block trong bai co the
	   "pha khung" rong hon qua class .alignwide/.alignfull (WordPress block
	   alignment chuan — theme da bat add_theme_support('align-wide') trong
	   functions.php, chi can CSS xu ly 2 class nay o day). */
	max-width: 1024px;
	margin: calc(var(--header-height) + 2rem) auto 4rem;
	padding: 3rem 2rem;
	background: var(--gradient-reading);
	border-radius: var(--radius-base);
	box-shadow: var(--shadow-soft);
}

/* Template "Tin tuc — Khong khung (Fullwidth)" (single-tin-tuc-fullwidth.php)
   — giu nguyen khung doc 1024px + .alignwide/.alignfull nhu ban mac dinh,
   chi bo di phan "the" trang tri (nen gradient, bo tron, do bong) de anh
   .alignfull khong bi ngat quang giua vung the va nen trang. */
.casaluna-single-tin-tuc--fullwidth {
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.casaluna-single-tin-tuc__title {
	margin-top: 0;
	text-transform: none;
}

/* .alignwide: phá het padding ngang cua khung doc (lap day dung 1024px).
   .alignfull: pha luon ra het chieu rong man hinh (100vw), khong con bi gioi
   han boi khung/bo tron/shadow cua .casaluna-single-tin-tuc nua — dung cho
   anh "an tuong" trong bai user tu chon o Gutenberg editor. */
.casaluna-single-tin-tuc__content .alignwide {
	width: calc(100% + 4rem);
	max-width: 1024px;
	margin-left: -2rem;
	margin-right: -2rem;
}

.casaluna-single-tin-tuc__content .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.casaluna-single-tin-tuc__content .alignwide img,
.casaluna-single-tin-tuc__content .alignfull img {
	width: 100%;
}

.casaluna-tin-tuc-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin-top: 2rem;
}

.casaluna-tin-tuc-gallery__item {
	margin: 0;
}

.casaluna-tin-tuc-gallery__item img {
	border-radius: var(--radius-base);
	width: 100%;
}

.casaluna-single-tin-tuc__meta {
	font-family: var(--font-body);
	color: var(--text-muted);
	margin-top: -0.5rem;
}

/* ============================================
   "Tin lien quan" o cuoi trang chi tiet (single-tin_tuc.php) — slider cuon
   ngang bang scroll-snap (khong dung thu vien slider ngoai), toi da 6 bai,
   mac dinh hien 3 the/1 man hinh. Nut prev/next cuon bang scrollBy() trong
   initRelatedNewsSlider() (assets/js/main.js).
   ============================================ */
.casaluna-related-tin-tuc {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--border-color);
}

.casaluna-related-tin-tuc__title {
	margin-bottom: 1.5rem;
}

.casaluna-related-tin-tuc__viewport {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.casaluna-related-tin-tuc__track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* An thanh cuon mac dinh — dieu huong qua nut prev/next hoac vuot tay. */
	scrollbar-width: none;
}

.casaluna-related-tin-tuc__track::-webkit-scrollbar {
	display: none;
}

.casaluna-related-tin-tuc__item {
	flex: 0 0 calc((100% - 2 * 1.25rem) / 3);
	scroll-snap-align: start;
	gap: 0.5rem;
}

.casaluna-related-tin-tuc__item .casaluna-tin-tuc-card__title {
	font-size: 0.9rem;
	line-height: 1.4;
}

.casaluna-related-tin-tuc__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--color-secondary);
	border-radius: 50%;
	background: transparent;
	color: var(--color-secondary);
	cursor: pointer;
	transition: background-color var(--motion), color var(--motion);
}

.casaluna-related-tin-tuc__nav:hover {
	background-color: rgba(var(--color-secondary-rgb), 0.08);
}

.casaluna-related-tin-tuc__nav:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* Mobile + Tablet (≤1024): BO HAN slider ngang — 2 the/man hinh qua chat
   (anh nho + title to -> vo dong lon xon, da co user bao xau thuc te). Doi
   sang DANH SACH DOC: moi bai la 1 hang ngang (anh vuong nho ben trai + title
   ben phai, toi da 3 dong + "…"), de doc hon nhieu tren man hinh hep. Nut
   prev/next khong con y nghia (khong con cuon ngang) nen an di. */
@media (max-width: 1024px) {
	.casaluna-related-tin-tuc__viewport {
		display: block;
	}

	.casaluna-related-tin-tuc__track {
		display: flex;
		flex-direction: column;
		overflow: visible;
		scroll-snap-type: none;
		gap: 0;
	}

	.casaluna-related-tin-tuc__nav {
		display: none;
	}

	.casaluna-related-tin-tuc__item {
		flex: none;
		flex-direction: row;
		align-items: center;
		gap: 1rem;
		padding: 1.1rem 0;
		border-bottom: 1px solid var(--border-color);
	}

	.casaluna-related-tin-tuc__item:first-child {
		padding-top: 0;
	}

	.casaluna-related-tin-tuc__item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.casaluna-related-tin-tuc__item .casaluna-tin-tuc-card__thumbnail {
		flex: 0 0 auto;
		width: clamp(84px, 24vw, 108px);
		aspect-ratio: 1 / 1;
	}

	.casaluna-related-tin-tuc__item .casaluna-tin-tuc-card__title {
		flex: 1 1 auto;
		font-size: 0.92rem;
		line-height: 1.45;
		/* Toi da 3 dong, thua thi "…" — tranh the qua cao vi title dai lam
		   lech chieu cao giua cac hang. */
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* ============================================
   Footer that (Background 01) — logo PMH, form CF7 "Lien he tu van", 2 van
   phong, hotline, social, phap ly. Render qua casaluna_render_site_footer()
   (inc/footer-content.php), dung chung MOI trang. Tren trang landing, nam
   BEN TRONG .casaluna-landing (khong phai 1 section trong fullpage-stepper —
   xem gioi han cho phep cuon tu nhien qua khoi section cuoi trong main.js).
   ============================================ */

.casaluna-footer {
	/* Anh nen that dat qua CSS custom property inline (xem
	   casaluna_render_site_footer() trong inc/footer-content.php — file CSS
	   tinh nay khong the goi content_url()). Overlay gradient nhe de van giu
	   duoc do tuong phan chu (text-*-on-dark) nhung khong che mat anh nen. */
	background-image:
		linear-gradient(135deg, rgba(42, 24, 15, 0.55) 0%, rgba(68, 40, 23, 0.5) 30%, rgba(105, 67, 37, 0.45) 65%, rgba(153, 127, 93, 0.4) 100%),
		var(--casaluna-footer-bg-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Ghi de padding-top cua .casaluna-section (can chinh cho header co dinh
	   phia tren) — giu nguyen logic, chi doi so cho phu hop noi dung footer. */
	padding: calc(var(--header-height) + 3rem) 1.5rem 2.5rem;
	justify-content: flex-start;
}

.casaluna-footer__inner {
	/* footer la .casaluna-section (display:flex) — margin:auto tren flex item
	   se tat stretch va khien box co lai theo noi dung (shrink-to-fit) thay vi
	   full width. Can width:100% ro rang de max-width+margin:auto hoat dong
	   dung nhu block binh thuong (fill roi moi clamp/canh giua). */
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.casaluna-footer__contact {
	display: grid;
	/* Cot tieu de/form rong hon de "DANG KY TU VAN CHUYEN SAU DU AN" khong
	   bi rot dong; cot form theo do hep lai. */
	grid-template-columns: minmax(320px, 480px) minmax(280px, 1fr);
	gap: 3rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(247, 241, 231, 0.12);
}

.casaluna-footer__contact-intro {
	/* Input CF7 co padding-top rieng (0.75rem, xem
	   .casaluna-footer__contact-form input) khien placeholder tut xuong so
	   voi heading (khong padding) — bu lai bang nay de canh dung top 2 cot. */
	padding-top: 0.75rem;
}

/* Logo PMH — chuyen xuong canh ten cong ty (phia tren cum van phong/hotline),
   khong con nam trong khoi form o tren nua. */
.casaluna-footer__brand {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 2rem 0 0;
}

.casaluna-footer__logo-link {
	display: inline-block;
	flex-shrink: 0;
}

.casaluna-footer__logo {
	height: 62px;
	width: auto;
}

.casaluna-footer__form-title {
	/* KHONG dung white-space:nowrap o day — ban tieng Anh ("REQUEST IN-DEPTH
	   PROJECT CONSULTATION") dai hon nhieu so voi ban tieng Viet, nowrap se
	   lam text tran ra khoi cot, de len form ben canh (da xay ra bug that).
	   Cho xuong dong tu nhien theo do rong cot (320-480px) la an toan nhat
	   cho ca 2 ngon ngu. */
	color: var(--text-heading-on-dark);
	font-size: clamp(1.15rem, 1.9vw, 1.5rem);
	margin-bottom: 0.75rem;
}

.casaluna-footer__form-subtitle {
	color: var(--text-body-on-dark);
	margin: 0;
}

/* CF7 — nen toi, input dang gach chan (underline), khong khung hop. */
.casaluna-footer__contact-form .wpcf7-form p {
	margin: 0 0 1.25rem;
}

.casaluna-footer__contact-form input.wpcf7-form-control,
.casaluna-footer__contact-form textarea.wpcf7-form-control,
.casaluna-footer__contact-form select.wpcf7-form-control {
	width: 100%;
	padding: 0.75rem 0.25rem;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(247, 241, 231, 0.25);
	border-radius: 0;
	color: var(--text-heading-on-dark);
	font-family: var(--font-body);
	font-size: 0.95rem;
	transition: border-color var(--motion);
}

.casaluna-footer__contact-form textarea.wpcf7-form-control {
	min-height: 90px;
	resize: vertical;
}

.casaluna-footer__contact-form input.wpcf7-form-control::placeholder,
.casaluna-footer__contact-form textarea.wpcf7-form-control::placeholder {
	color: var(--text-muted-on-dark);
}

.casaluna-footer__contact-form input.wpcf7-form-control:focus,
.casaluna-footer__contact-form textarea.wpcf7-form-control:focus {
	outline: none;
	border-color: var(--color-primary);
}

.casaluna-footer__contact-form input[type="submit"].wpcf7-form-control {
	width: auto;
	margin-top: 0.75rem;
	padding: 0.85rem 2.5rem;
	background-color: var(--color-primary);
	border: none;
	border-radius: var(--radius-pill);
	color: var(--color-dark);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background-color var(--motion);
}

.casaluna-footer__contact-form input[type="submit"].wpcf7-form-control:hover {
	background-color: var(--color-accent);
}

.casaluna-footer__contact-form .wpcf7-not-valid-tip {
	color: #E8A45C;
	font-size: 0.8rem;
	margin-top: 0.35rem;
}

.casaluna-footer__contact-form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	border-color: rgba(247, 241, 231, 0.25) !important;
	color: var(--text-body-on-dark);
	font-size: 0.85rem;
	border-radius: var(--radius-base);
}

/* 2 van phong + hotline + social */
.casaluna-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2.5rem;
	padding: 3rem 0;
	border-bottom: 1px solid rgba(247, 241, 231, 0.12);
}

.casaluna-footer__grid h3 {
	color: var(--text-heading-on-dark);
	font-size: 1rem;
	margin-bottom: 1rem;
}

.casaluna-footer__office ul,
.casaluna-footer__hotline ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.casaluna-footer__office li,
.casaluna-footer__hotline li {
	color: var(--text-body-on-dark);
	font-size: 0.9rem;
	line-height: 1.6;
}

.casaluna-footer__office a,
.casaluna-footer__hotline a {
	color: var(--text-body-on-dark);
	text-decoration: none;
	transition: color var(--motion);
}

.casaluna-footer__office a:hover,
.casaluna-footer__hotline a:hover {
	color: var(--color-primary);
}

.casaluna-footer__hotline-label {
	display: block;
	color: var(--text-muted-on-dark);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.casaluna-footer__hotline li a {
	font-family: var(--font-heading);
	font-size: 1.15rem;
	font-weight: 600;
}

.casaluna-footer__social-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.casaluna-footer__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(var(--color-primary-rgb), 0.4);
	border-radius: 50%;
	color: var(--color-primary);
	transition: background-color var(--motion), border-color var(--motion);
}

.casaluna-footer__social-icon:hover {
	background-color: rgba(var(--color-primary-rgb), 0.12);
	border-color: var(--color-primary);
}

/* Phap ly */
.casaluna-footer__legal {
	padding-top: 2.5rem;
	text-align: center;
}

/* Ten cong ty day du — dat canh logo PMH (.casaluna-footer__brand) ngay phia
   tren cum van phong/hotline/social (khong con nam trong khoi phap ly cuoi
   trang). Font-size tang 60% so voi ban dau (0.85rem -> 1.36rem) theo yeu cau. */
.casaluna-footer__company {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 1.36rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	margin: 0;
}

.casaluna-footer__legal-text {
	max-width: 760px;
	margin: 0 auto 1rem;
	color: var(--text-muted-on-dark);
	font-size: 0.75rem;
	line-height: 1.7;
}

.casaluna-footer__copyright {
	color: var(--text-muted-on-dark);
	font-size: 0.75rem;
	margin: 0;
}

/* Mobile + Tablet — Footer contact ve 1 cot (gom tu 720 -> 1024, xem quy uoc dau file) */
@media (max-width: 1024px) {
	.casaluna-footer__contact {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   SECTION TIEN ICH (#tien-ich) — slider full-bleed
   Markup: patterns/tien-ich-{vi,en}.php (khoi wp:html).
   JS: initTienIchSlider() trong assets/js/main.js — tao 2 lop nen
   double-buffer, crossfade + ken-burns zoom khi nhan next/prev.
   Heading + subheading CO DINH; title/desc/counter/progress DONG theo slide.
   Section co bg anh absolute-fill -> PHAI tu dat min-height:100vh (rule global
   .casaluna-section min-height:auto o <=1024 se lam sap section - bai hoc tu Vi tri).
   ============================================ */
.casaluna-tien-ich {
	position: relative;
	min-height: 100vh;
	padding: 0;
	overflow: hidden;
}

.casaluna-tien-ich__slider {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* --- Lop nen (JS chen 2 div .casaluna-tien-ich__layer vao day) --- */
.casaluna-tien-ich__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--color-dark);
}

.casaluna-tien-ich__layer {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 1.2s ease, transform 6.5s ease;
	will-change: opacity, transform;
}

.casaluna-tien-ich__layer.is-active {
	opacity: 1;
	transform: scale(1); /* ken-burns cham trong luc hien */
}

/* --- Overlay lech TRAI de cum chu doc ro (nhe, giu anh ben phai sang) --- */
.casaluna-tien-ich__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to right, rgba(42, 24, 15, 0.74) 0%, rgba(42, 24, 15, 0.55) 20%, rgba(42, 24, 15, 0.28) 40%, rgba(42, 24, 15, 0) 60%),
		linear-gradient(to top, rgba(42, 24, 15, 0.35) 0%, rgba(42, 24, 15, 0) 32%);
}

/* --- Cum noi dung ben trai --- */
.casaluna-tien-ich__content {
	position: absolute;
	left: clamp(1.5rem, 6vw, 6rem);
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: min(46%, 620px);
	display: flex;
	flex-direction: column;
	gap: clamp(1.6rem, 4vh, 3rem);
	color: var(--text-body-on-dark);
}

.casaluna-tien-ich__header {
	margin: 0;
}

/* Cỡ chữ heading/subheading/body: DÙNG TOKEN chung --fs-section-* (xem :root) */
.casaluna-tien-ich__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-section-heading);
	line-height: 1.08;
	letter-spacing: 0.02em;
	color: #F7F1E7;
}

.casaluna-tien-ich__subheading {
	margin: 0.35rem 0 0;
	font-family: var(--font-heading); /* cung font Playfair voi main heading */
	font-weight: 500;
	font-size: var(--fs-section-subheading);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-primary);
}

/* --- Caption dong (progress line doc + title/desc) --- */
.casaluna-tien-ich__caption {
	display: flex;
	align-items: stretch;
	gap: clamp(1rem, 1.6vw, 1.6rem);
}

.casaluna-tien-ich__progress {
	position: relative;
	flex: 0 0 auto;
	width: 3px;
	align-self: stretch;
}

/* line mong CO DINH (track) */
.casaluna-tien-ich__progress::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	background: rgba(247, 241, 231, 0.28);
}

/* line day = thanh tien trinh. Desktop: doc (height theo --tien-ich-fill do JS set) */
.casaluna-tien-ich__progress-fill {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 3px;
	height: var(--tien-ich-fill, 0%);
	background: var(--color-primary);
	box-shadow: 0 0 12px rgba(204, 170, 117, 0.5);
	transition: height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Panel bao caption + nav. Desktop: chi la cot trong suot noi tiep layout
   (mobile: thanh panel nen rieng — xem block @media ben duoi). */
.casaluna-tien-ich__panel {
	display: flex;
	flex-direction: column;
	gap: clamp(1.6rem, 4vh, 3rem);
}

.casaluna-tien-ich__caption-text {
	min-width: 0;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.casaluna-tien-ich__caption-text.is-swapping {
	opacity: 0;
	transform: translateY(10px);
}

.casaluna-tien-ich__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(1.215rem, 1.8vw, 1.98rem); /* nho lai 10% theo yeu cau user */
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #F7F1E7;
}

.casaluna-tien-ich__desc {
	margin: clamp(0.9rem, 1.8vh, 1.4rem) 0 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fs-section-body);
	line-height: 1.75;
	color: var(--text-body-on-dark);
	max-width: 34ch;
}

/* --- Nav: prev + counter + next --- */
.casaluna-tien-ich__nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
}

.casaluna-tien-ich__btn {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	line-height: 0;
	opacity: 0.85;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.casaluna-tien-ich__btn:hover {
	opacity: 1;
}

.casaluna-tien-ich__btn--prev:hover {
	transform: translateX(-4px);
}

.casaluna-tien-ich__btn--next:hover {
	transform: translateX(4px);
}

.casaluna-tien-ich__btn img {
	display: block;
	width: clamp(48px, 5vw, 68px);
	height: auto;
}

.casaluna-tien-ich__counter {
	font-family: var(--font-heading);
	letter-spacing: 0.06em;
	color: var(--text-muted-on-dark);
	white-space: nowrap;
}

.casaluna-tien-ich__counter-current {
	font-size: clamp(1.8rem, 2.64vw, 2.88rem); /* +20% theo yeu cau user */
	font-weight: 600;
	color: #F7F1E7;
}

.casaluna-tien-ich__counter-sep,
.casaluna-tien-ich__counter-total {
	font-size: clamp(0.75rem, 0.98vw, 1.05rem); /* so tong (17) nho lai 50% theo yeu cau user */
	color: var(--color-primary);
}

/* --- Reveal so le khi cuon toi (desktop qua initSectionReveal, mobile qua
       initMobileReveal — toggle .is-revealed tren #tien-ich) --- */
#tien-ich .casaluna-tien-ich__header,
#tien-ich .casaluna-tien-ich__nav {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1), transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Caption CHI fade opacity, KHONG transform: transform se bien caption thanh
   containing block, keo progress (absolute) lech khoi mep panel (seam) tren
   mobile (progress khi do neo theo caption chu khong theo panel). */
#tien-ich .casaluna-tien-ich__caption {
	opacity: 0;
	transition: opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#tien-ich.is-revealed .casaluna-tien-ich__header { transition-delay: 0.05s; }
#tien-ich.is-revealed .casaluna-tien-ich__caption { transition-delay: 0.28s; }
#tien-ich.is-revealed .casaluna-tien-ich__nav { transition-delay: 0.48s; }

#tien-ich.is-revealed .casaluna-tien-ich__header,
#tien-ich.is-revealed .casaluna-tien-ich__nav {
	opacity: 1;
	transform: translateY(0);
}

#tien-ich.is-revealed .casaluna-tien-ich__caption {
	opacity: 1;
}

/* --- Mobile + Tablet (<=1024): STACK DOC — ANH 16:9 (xem toan bo, khong crop)
       o TREN, heading overlay goc duoi-trai; PANEL nen rieng ngay DUOI; progress
       bar NGANG dat SAT mep duoi anh = dung duong giao. Anh goc deu 2560x1440
       (16:9) nen khung 16:9 + cover = full anh. Dung display:contents cho
       .__content de header overlay len stage con panel chay thang xuong duoi stage. --- */
@media (max-width: 1024px) {
	.casaluna-tien-ich {
		min-height: auto; /* cao tu nhien = anh 16:9 + panel (mobile cuon tu nhien) */
		display: block;
		overflow: hidden;
	}

	.casaluna-tien-ich__slider {
		position: relative; /* bo absolute -> stage + panel chay theo luong */
		inset: auto;
		display: block;
		/* Nen gold (truoc o __panel) chuyen len __slider -> trai LIEN MACH tu duoi
		   hinh xuong het panel. Nho vay heading/sub (__header) + caption/nav deu nam
		   TREN cung nen nay = "trong khung panel", khong bi seam giua 2 hop. Stage
		   (anh) o tren tu che nen nay bang bg rieng. */
		background-image:
			linear-gradient(rgba(42, 24, 15, 0.34), rgba(42, 24, 15, 0.34)),
			url("../../img/nen-tien-ich-mobile.webp");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	/* Stage = khung 16:9 o tren, xem TOAN BO hinh */
	.casaluna-tien-ich__stage {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		overflow: hidden; /* chan ken-burns zoom tran ra panel */
	}

	.casaluna-tien-ich__layer {
		background-size: cover; /* anh 16:9 trong khung 16:9 => full, khong crop */
		/* Tat ken-burns zoom tren mobile: animate background-image scale hay bi
		   giat/rasterize tren thiet bi di dong -> chi giu crossfade opacity. */
		transform: none;
		transition: opacity 1.2s ease;
	}

	.casaluna-tien-ich__layer.is-active {
		transform: none;
	}

	/* Overlay CHI phu vung anh (stage), lam toi duoi de heading doc ro.
	   Reset right/bottom (base co inset:0) de height 56.25vw co hieu luc,
	   khong keo overlay xuong phu ca panel. */
	.casaluna-tien-ich__overlay {
		top: 0;
		left: 0;
		right: auto;
		bottom: auto;
		width: 100%;
		height: 56.25vw; /* = chieu cao khung 16:9 full-width */
		background: linear-gradient(to top, rgba(42, 24, 15, 0.62) 0%, rgba(42, 24, 15, 0.3) 26%, rgba(42, 24, 15, 0) 52%);
	}

	/* content khong tao box rieng -> header overlay stage, panel nam ngay duoi stage */
	.casaluna-tien-ich__content {
		display: contents;
	}

	/* Heading + subheading nam TRONG khung panel: __header trong suot, an tren nen
	   gold cua __slider (ngay duoi hinh). Chu giu he mau sang nhu title/desc. */
	.casaluna-tien-ich__header {
		position: static;
		z-index: 2;
		display: flex;
		flex-direction: column;
		padding: clamp(1.4rem, 5vw, 2.2rem) 1.25rem 0;
	}

	/* heading + subheading BANG section kiet-tac (cung token x1.38). */
	.casaluna-tien-ich__heading {
		/* x1.38 (bang kiet-tac) roi giam 10% de khong tran mep khi nowrap -> x1.242. */
		font-size: calc(var(--fs-section-heading) * 1.242);
		white-space: nowrap; /* giu 1 dong, khong rot dong khi font lon */
	}

	.casaluna-tien-ich__subheading {
		font-size: calc(var(--fs-section-subheading) * 1.38);
	}

	/* PANEL: nen da chuyen len __slider (trai lien mach voi __header). O day chi
	   giu padding cho noi dung caption. position:static -> __slider thanh offset
	   parent cua __nav (de nav overlay len HINH, xem duoi). */
	.casaluna-tien-ich__panel {
		position: static;
		display: block;
		padding: clamp(0.8rem, 2.5vw, 1.3rem) 1.25rem clamp(1.5rem, 5vw, 2.2rem);
	}

	/* __caption relative -> giu progress-bar (absolute ben trong) neo dung theo
	   caption khi __panel da bo relative. */
	.casaluna-tien-ich__caption {
		display: block;
		position: relative;
	}

	.casaluna-tien-ich__progress {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: auto;
		height: 3px;
		align-self: auto;
	}

	.casaluna-tien-ich__progress::before {
		top: 50%;
		bottom: auto;
		left: 0;
		right: 0;
		transform: translateY(-50%);
		width: 100%;
		height: 1px;
	}

	.casaluna-tien-ich__progress-fill {
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: var(--tien-ich-fill, 0%);
		height: 3px;
		transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	}

	/* Nav khong con o goc phai (da ve in-flow) -> title dung het chieu rong. */
	.casaluna-tien-ich__title {
		padding-right: 0;
		padding-top:15px;
	}

	.casaluna-tien-ich__desc {
		max-width: none;
		margin-top: clamp(0.9rem, 3.5vw, 1.3rem);
		/* Content +20% tren mobile/tablet (base var(--fs-section-body)). */
		font-size: calc(var(--fs-section-body) * 1.2);
	}

	/* Nav OVERLAY tren HINH (goc duoi-phai cua khung 16:9) -> vua xem hinh vua bam
	   next/prev, khong phai cuon xuong panel. Neo theo __slider (offset parent, do
	   __panel da static). Vung day hinh da bi overlay lam toi nen chu trang/gold ro.
	   Tunable: 5rem = cach day hinh; anh cao 56.25vw. */
	.casaluna-tien-ich__nav {
		position: absolute;
		top: calc(56.25vw - 5rem);
		right: 1.25rem;
		left: auto;
		z-index: 3;
		gap: clamp(0.5rem, 2vw, 0.9rem);
	}

	/* Nav giam 20% so voi x2 truoc (de vua goc hinh, van du to). */
	.casaluna-tien-ich__btn img {
		width: clamp(48px, 12.8vw, 70px);
	}

	.casaluna-tien-ich__counter-current {
		font-size: clamp(2rem, 8vw, 2.72rem);
	}

	.casaluna-tien-ich__counter-sep,
	.casaluna-tien-ich__counter-total {
		font-size: clamp(1.09rem, 4.16vw, 1.52rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.casaluna-tien-ich__layer {
		transition: opacity 0.4s ease;
		transform: none;
	}
	.casaluna-tien-ich__layer.is-active {
		transform: none;
	}
	#tien-ich .casaluna-tien-ich__header,
	#tien-ich .casaluna-tien-ich__caption,
	#tien-ich .casaluna-tien-ich__nav {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================
   Section "Van hanh" (#van-hanh, sau Tien ich, truoc Mat bang) — doi tac van
   hanh Nihon Housing. Anh nen van-hanh.webp (1920x1081, kien truc su cam mo
   hinh hologram Casa Luna, nhan vat + vung sang lech TRAI, vung toi trong
   ben PHAI) -> cum chu can PHAI (doi xung voi gioi-thieu/kiet-tac can trai).
   Logo doi tac dat trong glass-card (Background 04) de noi tren nen anh.
   Overlay toi lech PHAI (nguoc huong voi gioi-thieu) dam bao doc chu, mask
   sweep khi cuon toi. Anh nen gan qua CSS var inline
   --casaluna-van-hanh-bg-image (patterns/van-hanh-{vi,en}.php).
   ============================================ */
.casaluna-van-hanh {
	position: relative;
	background-image: var(--casaluna-van-hanh-bg-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	/* Vi tri cum chu (chinh o day): --vh-x = mep phai, --vh-y = tam doc. */
	--vh-x: 14%;
	--vh-y: 50%;
}

/* Overlay toi lech PHAI (nguoc gioi-thieu): dam ben phai (vung chu), nhat dan
   sang trai de giu ro mo hinh hologram + nhan vat kien truc su. */
.casaluna-van-hanh::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(to left, rgb(50, 43, 39) 0%, rgba(42, 24, 15, 0.94) 18%, rgba(42, 24, 15, 0.76) 34%, rgba(42, 24, 15, 0.38) 48%, rgba(42, 24, 15, 0) 62%);
	-webkit-mask-image: linear-gradient(to left, #000 0%, #000 50%, transparent 88%);
	mask-image: linear-gradient(to left, #000 0%, #000 50%, transparent 88%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 240% 100%;
	mask-size: 240% 100%;
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
	transition: -webkit-mask-position 1.8s ease, mask-position 1.8s ease;
}

.casaluna-van-hanh.is-revealed::before {
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}

.casaluna-van-hanh__inner {
	position: absolute;
	right: var(--vh-x);
	top: var(--vh-y);
	transform: translateY(-50%);
	max-width: 31%;
	text-align: left;
	z-index: 1; /* tren ::before overlay */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.casaluna-van-hanh__kicker {
	display: block;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-section-subheading);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: clamp(0.5rem, 1vh, 0.9rem);
}

/* Heading gio la LOGO wordmark "NIHON HOUSING GROUP" (LOGO-NIHON-HOUSING-GROUP.png,
   768x105, chu DEN + icon do) THAY THE cho text — logo chu den KHONG doc duoc
   tren nen anh/khoi mau toi, nen can 1 "the" nen sang (cream, bo tron, shadow
   nhe) lam backdrop, giong tinh than Background 04 Glass Overlay cua brand. */
.casaluna-van-hanh__heading {
	margin: 0;
	display: inline-flex;
	align-items: center;
	background: rgba(247, 241, 231, 0.95);
	padding: clamp(0.55rem, 1vw, 0.9rem) clamp(1.1rem, 1.8vw, 1.6rem);
	border-radius: 14px;
	box-shadow: 0 16px 50px rgba(0, 0, 0, 0.25);
}

.casaluna-van-hanh__heading img {
	display: block;
	width: clamp(190px, 17vw, 300px);
	height: auto;
}

.casaluna-van-hanh__divider {
	display: block;
	width: clamp(64px, 6vw, 104px);
	height: 2px;
	background: linear-gradient(to right, var(--color-primary), rgba(204, 170, 117, 0));
	margin: clamp(0.9rem, 1.8vh, 1.5rem) 0 clamp(1.1rem, 2.2vh, 1.8rem);
}

.casaluna-van-hanh__subheading {
	margin: 0 0 clamp(0.9rem, 1.8vh, 1.4rem);
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 500;
	font-size: var(--fs-section-subheading);
	letter-spacing: 0.01em;
	line-height: 1.4;
	color: var(--color-primary);
}

.casaluna-van-hanh__body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fs-section-body);
	line-height: 1.75;
	color: #DDD2C2;
	max-width: 100%;
}

@media (max-width: 1024px) {
	/* Mobile/tablet: anh RIENG (vanhanh-mobile.webp, 1272x1976, canh le tan
	   khach san — nguoi that khac ban hologram cu). CHI HIEN ~73% TREN cua
	   anh (do dac: noi dung anh — 2 nguoi + quay le tan — het khoang 70%
	   chieu cao, phia duoi da toi/den san), CAT bo phan duoi khong con gi
	   (khong can hien vi da co khoi mau CSS thay the) -> cum chu duoc keo LEN
	   sat ngay sau vung anh thay vi cho het chieu cao that cua anh.
	   background-size 100% auto + position top -> phan duoi anh (qua muc
	   padding-top) tu dong bi cat, khong bi keo dan. Doi anh khac ty le thi
	   phai do lai % nay (xem scratchpad session tim-crop cho cach do). */
	.casaluna-van-hanh {
		background-image: var(--casaluna-van-hanh-bg-image-mobile, var(--casaluna-van-hanh-bg-image, none));
		background-position: top center;
		background-size: 100% auto;
		background-color: #040202;
		min-height: 0;
		height: auto;
		padding-top: calc(100vw * 1450 / 1272);
		padding-bottom: 0;
	}

	/* Dai gradient MO tai diem cat (anh <-> khoi mau) de chuyen tiep muot. */
	.casaluna-van-hanh::before {
		top: calc(100vw * 1450 / 1272 - 3.5rem);
		height: 4rem;
		bottom: auto;
		background: linear-gradient(to bottom, rgba(4, 2, 2, 0) 0%, #040202 100%);
		-webkit-mask-image: none;
		mask-image: none;
	}

	.casaluna-van-hanh__inner {
		position: relative;
		right: auto;
		left: auto;
		top: 10px;
		bottom: auto;
		transform: none;
		max-width: 100%;
		width: 100%;
		align-items: center;
		text-align: center;
		padding: 0 0 clamp(4rem, 5.5vh, 2.6rem);
	}

	.casaluna-van-hanh__divider {
		background: linear-gradient(to right, rgba(204, 170, 117, 0), var(--color-primary), rgba(204, 170, 117, 0));
	}

	/* Kicker + logo-heading: +50% theo yeu cau user tren mobile/tablet (rieng
	   2 phan tu nay, khac voi subheading/body van dung he so chung Tien ich). */
	.casaluna-van-hanh__kicker {
		font-size: calc(var(--fs-section-subheading) * 1.5);
	}

	.casaluna-van-hanh__heading img {
		width: clamp(255px, 63vw, 390px);
	}

	.casaluna-van-hanh__subheading {
		font-size: calc(var(--fs-section-subheading) * 1.38);
	}

	.casaluna-van-hanh__body {
		font-size: calc(var(--fs-section-body) * 1.2);
		max-width: 42ch;
	}
}

/* Reveal so le: kicker -> heading(logo) -> divider -> subheading -> body.
   Toggle .is-revealed qua initSectionReveal (desktop) / initMobileReveal
   (mobile) — delay CHI dat tren rule .is-revealed (khong phai base). */
#van-hanh .casaluna-van-hanh__kicker,
#van-hanh .casaluna-van-hanh__heading,
#van-hanh .casaluna-van-hanh__divider,
#van-hanh .casaluna-van-hanh__subheading,
#van-hanh .casaluna-van-hanh__body {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1), transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#van-hanh.is-revealed .casaluna-van-hanh__kicker { transition-delay: 0.1s; }
#van-hanh.is-revealed .casaluna-van-hanh__heading { transition-delay: 0.24s; }
#van-hanh.is-revealed .casaluna-van-hanh__divider { transition-delay: 0.38s; }
#van-hanh.is-revealed .casaluna-van-hanh__subheading { transition-delay: 0.5s; }
#van-hanh.is-revealed .casaluna-van-hanh__body { transition-delay: 0.62s; }

#van-hanh.is-revealed .casaluna-van-hanh__kicker,
#van-hanh.is-revealed .casaluna-van-hanh__heading,
#van-hanh.is-revealed .casaluna-van-hanh__divider,
#van-hanh.is-revealed .casaluna-van-hanh__subheading,
#van-hanh.is-revealed .casaluna-van-hanh__body {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	#van-hanh .casaluna-van-hanh__kicker,
	#van-hanh .casaluna-van-hanh__heading,
	#van-hanh .casaluna-van-hanh__divider,
	#van-hanh .casaluna-van-hanh__subheading,
	#van-hanh .casaluna-van-hanh__body {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.casaluna-van-hanh::before {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
		transition: none;
	}
}

/* ============================================
   SECTION MẶT BẰNG (#mat-bang) — SVG tòa nhà tương tác
   Markup: patterns/mat-bang-{vi,en}.php (1 khối wp:html).
   JS: initMatBang() — hover/touch highlight nhóm shape + tooltip, click popup
   (ảnh zoom/pan nếu có data-img, ngược lại panel chữ). Nền sáng -> chữ tối.
   ============================================ */
.casaluna-mat-bang {
	position: relative;
	min-height: 100vh;
	padding: calc(var(--header-height) + 1.5rem) clamp(1.25rem, 4vw, 4rem) 2.5rem;
	background-image: url("../../img/nen-matbang.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* Heading desktop: đặt trong VÙNG TRỜI (trái tháp cao, trên tháp ngắn) — khớp
   khung đỏ mockup. Tunable: --mb-head-top / --mb-head-left. (Mobile override
   về static ở @media ≤1024.) */
.casaluna-mat-bang__header {
	position: absolute;
	top: var(--mb-head-top, 15vh);
	left: var(--mb-head-left, clamp(1.5rem, 5vw, 5.5rem));
	z-index: 4;
	margin: 0;
}

.casaluna-mat-bang__heading {
	margin: 0;
	/* font riêng SVN-Schrifted đã có đủ glyph Ế (E + mũ + sắc), giữ fallback serif đề phòng */
	font-family: var(--font-heading), 'Times New Roman', 'Noto Serif', serif;
	font-weight: 700;
	font-size: var(--fs-section-heading);
	line-height: 1.18;
	letter-spacing: 0.02em;
	/* MÀU ĐẶC (bỏ gradient background-clip:text — thủ phạm làm mất dấu sắc mảnh
	   trên Ế). Nâu gold đậm, dấu hiện rõ. */
	color: #7A4818;
}

.casaluna-mat-bang__subheading {
	margin: 0.35rem 0 0;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: var(--fs-section-subheading);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #A26F39;
}

/* Text hướng dẫn tương tác — góc dưới-trái (desktop absolute), in nghiêng */
.casaluna-mat-bang__hint {
	position: absolute;
	left: clamp(1.5rem, 5vw, 5.5rem);
	bottom: clamp(-1.75rem, -2vh, 2.6rem);
	z-index: 4;
	margin: 0;
	max-width: min(520px, 45%);
	font-family: var(--font-body);
	font-style: italic;
	font-size: clamp(0.88rem, 1.05vw, 1.05rem);
	line-height: 1.5;
	color: #997F5D;
}

.casaluna-mat-bang__hint-mobile {
	display: none;
}

.casaluna-mat-bang__stage {
	position: relative;
	min-height: calc(100vh - var(--header-height) - 4rem);
}

/* Tòa nhà: absolute bên TRÁI (mép phải tòa nhà = tham chiếu để canh nội dung) */
.casaluna-mat-bang__building {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--mb-building-w, 56%);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.casaluna-mat-bang__svg {
	width: 100%;
	height: 100%;
	max-height: calc(100vh - var(--header-height) - 3rem);
	overflow: visible;
	touch-action: manipulation; /* cho scroll/pinch, TẮT double-tap-zoom để 2 chạm mở popup */
}

.casaluna-mat-bang__svg #toanha {
	pointer-events: none;
}

.casaluna-mat-bang__shape {
	fill: transparent;
	pointer-events: all;
	cursor: pointer;
	transition: fill 0.25s ease;
}

/* Highlight khi hover/touch — chỉ tô màu đồng/cam đậm, KHÔNG viền (bỏ stroke) */
.casaluna-mat-bang__shape.is-active {
	fill: rgba(201, 124, 44, 0.5);
}

/* Tiers OVERLAY toàn stage (pointer-events none để không chặn hover tòa nhà;
   riêng từng tier bật lại auto). Mỗi tier định vị tuyệt đối. */
.casaluna-mat-bang__tiers {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Cụm nội dung: nằm bên phải, cách mép phải tòa nhà ~150px (tunable --mb-content-left).
   Layout: [nhãn tầng] [line DỌC] [nội dung]; line NGANG ở đáy. */
.casaluna-mat-bang__tier {
	position: absolute;
	top: var(--mb-tier-top, 50%);
	left: var(--mb-content-left, 65%);
	right: clamp(8rem, 3vw, 3.5rem);
	pointer-events: auto;
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr); /* nhãn | line dọc | nội dung */
	column-gap: clamp(0.45rem, 0.7vw, 0.72rem);
	align-items: stretch;
	padding-bottom: clamp(0.5rem, 1vh, 0.9rem);
}

/* Căn khớp vùng tòa nhà: 19-20F→đỉnh tháp cao, 4-18F→giữa, 0-3F→đế (khớp mockup) */
.casaluna-mat-bang__tier:nth-child(1) { --mb-tier-top: 2%; }
.casaluna-mat-bang__tier:nth-child(2) { --mb-tier-top: 43%; }
.casaluna-mat-bang__tier:nth-child(3) { --mb-tier-top: 77%; }

/* line NGANG ở ĐÁY cụm, kéo dài về phía tòa nhà (trái). Reveal: scaleX 0→1 từ trái. */
.casaluna-mat-bang__tier::before {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	left: var(--mb-line-left, -13vw);
	height: 1px;
	background: linear-gradient(to left, #A26F39 20%, rgba(162, 111, 57, 0.08));
	transform-origin: left center;
}

/* Nhãn tầng (dọc) — căn giữa chiều cao cụm */
.casaluna-mat-bang__tier-floor {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(1rem, 1.16vw, 1.27rem); /* +10% */
	letter-spacing: 0.14em;
	color: #8C541D;
	white-space: nowrap;
	align-self: center;
	text-align: center;
}

/* line DỌC giữa nhãn tầng và nội dung */
.casaluna-mat-bang__tier-line {
	display: block;
	width: 1px;
	align-self: stretch;
	background: linear-gradient(to bottom, rgba(162, 111, 57, 0.85), rgba(162, 111, 57, 0.25));
}

.casaluna-mat-bang__tier-title {
	margin: 0 0 0.35em;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-section-subheading);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #6B4423;
}

.casaluna-mat-bang__tier-desc {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-section-body);
	line-height: 1.65;
	color: #5B4A3A;
}

.casaluna-mat-bang__tier-note {
	margin: 0.6em 0 0;
	font-family: var(--font-body);
	font-size: calc(var(--fs-section-body) * 0.92);
	color: #8C541D;
}

.casaluna-mat-bang__tier-note strong {
	color: #6B4423;
	font-weight: 700;
}

/* Tooltip — thẻ SÁNG sang trọng (cream + viền gold + gạch accent trái) */
.casaluna-mat-bang__tooltip {
	position: absolute;
	z-index: 30;
	left: 0;
	top: 0;
	pointer-events: none;
	max-width: min(360px, 80vw);
	padding: 0.9rem 1.1rem 0.95rem 1.2rem;
	background: linear-gradient(158deg, #FFFDF8 0%, #F4EAD8 100%);
	color: #5B4A3A;
	border: 1px solid rgba(162, 111, 57, 0.3);
	border-left: 3px solid var(--color-primary);
	border-radius: 14px;
	font-family: var(--font-body);
	font-size: 0.84rem;
	line-height: 1.55;
	box-shadow: 0 18px 50px rgba(83, 55, 28, 0.22);
	opacity: 0;
	transform: translateY(6px) scale(0.98);
	transform-origin: top left;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.casaluna-mat-bang__tooltip.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Tooltip: nội dung chính (tip-title) + phụ (tip-sub) + thông số (tip-specs) */
/* ĐÃ ĐỔI VAI TRÒ 2 dòng: dòng 1 (tip-title) = nhỏ/phụ; dòng 2 (tip-sub) = to/chính */
.casaluna-mat-bang__tip-title {
	display: block;
	margin-bottom: 0.12em;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #A26F39;
}

.casaluna-mat-bang__tip-sub {
	display: block;
	margin: 0 0 0.55em;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.18rem;
	line-height: 1.2;
	color: #8C541D;
}

.casaluna-mat-bang__tip-body {
	font-size: 0.85rem;
	line-height: 1.55;
}

.casaluna-mat-bang__tip-specs {
	font-size: 0.8rem;
	line-height: 1.4;
}

/* tiêu đề block (Block A/B) — cho penthouse */
.casaluna-mat-bang__tip-block {
	margin: 0.7em 0 0.35em;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	color: #8C541D;
}

.casaluna-mat-bang__tip-block:first-child {
	margin-top: 0;
}

/* mỗi căn: tên căn + các dòng thông số */
.casaluna-mat-bang__tip-unit {
	margin-bottom: 0.6em;
}

.casaluna-mat-bang__tip-unit:last-child {
	margin-bottom: 0;
}

.casaluna-mat-bang__tip-unit-name {
	display: block;
	margin-bottom: 0.25em;
	font-weight: 700;
	color: #6B4423;
	font-size: 0.83rem;
}

/* dòng thông số: nhãn (phụ, muted) trái — giá trị (chính, nhấn) phải */
.casaluna-mat-bang__tip-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.2em;
	line-height: 1.7;
}

.casaluna-mat-bang__tip-row > span {
	color: #8a7a63;
}

.casaluna-mat-bang__tip-row > b {
	color: #8C541D;
	font-weight: 700;
	white-space: nowrap;
}

.casaluna-mat-bang__popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.casaluna-mat-bang__popup[hidden] {
	display: none;
}

.casaluna-mat-bang__popup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 12, 6, 0.9);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* FULLSCREEN cho popup ảnh. width/height 100% (ăn theo box THẬT của
   .casaluna-mat-bang__popup cha, KHÔNG dùng 100vw/100vh cố định) — trên
   mobile Safari, JS (syncPopupToVisualViewport trong main.js) bù "top" cho
   popup cha khi thanh địa chỉ đang mở rộng, box cha co lại theo đúng vùng
   nhìn thấy thật; nếu dialog con cứng 100vh nó sẽ tràn ngược lên vùng bị che
   (nút đóng lại bị cắt nửa y hệt bug cũ). */
.casaluna-mat-bang__popup-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* popup CHỮ (khi tầng không có ảnh / ảnh lỗi): thẻ đọc căn giữa, không fullscreen */
.casaluna-mat-bang__popup.is-text .casaluna-mat-bang__popup-dialog {
	width: min(94vw, 620px);
	height: auto;
	max-height: 88vh;
	margin: auto;
	background: var(--gradient-reading, linear-gradient(180deg, #F7F3EC 0%, #EFE6D8 100%));
	border-radius: 20px;
	box-shadow: 0 30px 90px rgba(42, 24, 15, 0.5);
}

.casaluna-mat-bang__popup-close {
	position: absolute;
	top: 10px;
	right: 14px;
	z-index: 3;
	/* Chan double-tap-zoom MAC DINH cua Safari khi bam gan/trung lien tiep
	   (vd bam nut zoom nhieu lan gan nhau, lo tay lech ra ngoai chut) — Safari
	   hieu nham thanh cu chi "double-tap phong to trang", zoom ca trinh duyet
	   thay vi chi bam nut (user bao loi thuc te). "manipulation" = cho phep
	   tap/pan binh thuong, chi tat double-tap-zoom rieng cho vung nay. */
	touch-action: manipulation;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(42, 24, 15, 0.85);
	color: #F7F1E7;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.25s ease;
}

.casaluna-mat-bang__popup-close:hover {
	background: var(--color-secondary);
}

.casaluna-mat-bang__popup-viewport {
	flex: 1;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: none;
	cursor: grab;
	min-height: 0;
}

.casaluna-mat-bang__popup-viewport:active {
	cursor: grabbing;
}

.casaluna-mat-bang__popup.is-text .casaluna-mat-bang__popup-viewport {
	cursor: default;
	overflow: auto;
	align-items: flex-start;
}

.casaluna-mat-bang__popup-img {
	max-width: 100%;
	max-height: 100%;
	/* .__popup-viewport la display:flex — flex-item mac dinh min-width/
	   min-height:auto (= kich thuoc GOC cua anh), de "thang" ca max-width/
	   max-height:100% neu anh goc lon hon khung -> anh bi tran/cat thay vi fit
	   gon (dung loi flexbox da gap o section Doi tac, xem progress.md 4e).
	   Phai ep ve 0 de max-width/max-height thuc su co tac dung. */
	min-width: 0;
	min-height: 0;
	transform-origin: center center;
	/* KHONG dung will-change:transform o day — hint nay khien WebKit/Safari
	   "chup" san anh thanh 1 lop compositing rasterize san O DO PHAN GIAI HIEN
	   THI BAN DAU (vd 375px rong), roi khi scale() len chi phong to bitmap DA
	   RASTERIZE do (giong zoom anh chup man hinh) thay vi render lai tu file
	   goc do phan giai cao -> anh mo han khi zoom to (da xac nhan: file goc
	   ~5906x3780px, du net o moi muc zoom, khong phai do file goc thieu net).
	   Bo will-change de trinh duyet render lai net moi lan doi scale. */
	user-select: none;
	-webkit-user-drag: none;
}

.casaluna-mat-bang__popup-text {
	display: none;
	padding: clamp(1.5rem, 4vw, 2.6rem);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.8;
	color: #442817;
}

.casaluna-mat-bang__popup.is-text .casaluna-mat-bang__popup-text {
	display: block;
}

.casaluna-mat-bang__popup-text strong {
	display: inline-block;
	margin-bottom: 0.4em;
	font-family: var(--font-heading);
	font-size: 1.2em;
	color: #6B4423;
}

.casaluna-mat-bang__popup-zoom {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 8px;
	/* Ap dung ca vung KHOANG TRONG giua/quanh 3 nut (khong chi ban than nut) —
	   user bao tap lech ra 1 chut ngoai nut van bi Safari hieu nham double-tap
	   zoom. */
	touch-action: manipulation;
}

.casaluna-mat-bang__popup.is-text .casaluna-mat-bang__popup-zoom {
	display: none;
}

.casaluna-mat-bang__popup-zoom button {
	min-width: 44px;
	height: 40px;
	padding: 0 0.7rem;
	border: 1px solid rgba(204, 170, 117, 0.5);
	border-radius: 999px;
	background: rgba(42, 24, 15, 0.85);
	color: #F7F1E7;
	font-family: var(--font-body);
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.25s ease;
	/* Chan double-tap-zoom mac dinh cua Safari khi bam +/- nhieu lan gan nhau
	   (xem giai thich chi tiet o .casaluna-mat-bang__popup-close). */
	touch-action: manipulation;
}

.casaluna-mat-bang__popup-zoom button:hover {
	background: var(--color-secondary);
}

/* 2 nut moi: tai hinh / chia se hinh (chi chua icon SVG, khong phai chu +/-
   /100% nhu 3 nut zoom) — can flex center rieng cho icon nam dung giua nut
   tron (button mac dinh khong tu can giua noi dung nhu vay). */
.casaluna-mat-bang__popup-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

/* Phan hoi truc quan khi copy link thanh cong (fallback khi khong co Web
   Share API, xem sharePopupImage() trong main.js) — doi mau nen tam thoi. */
.casaluna-mat-bang__popup-action.is-flash {
	background: var(--color-primary) !important;
	color: var(--color-dark) !important;
}

/* Mobile/tablet: nut dong (X) TO va NOI BAT hon (backdrop bi anh phu kin
   fullscreen nen tren mobile day la CACH DUY NHAT dong popup ngoai "cham vao
   anh de dong" o initMatBang() — user bao thuc te tren thiet bi that kho
   thay/kho bam trung nut 42px cu). Cach le man hinh xa hon (tranh vung ria
   tren cung de bi xung dot cu chi trinh duyet). */
@media (max-width: 1024px) {
	.casaluna-mat-bang__popup-close {
		top: 18px;
		right: 18px;
		width: 48px;
		height: 48px;
		font-size: 2rem;
		border: 1px solid rgba(204, 170, 117, 0.5);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	}
}

/* --- HIỆU ỨNG TUẦN TỰ khi cuộn tới (toggle .is-revealed):
   (1) tòa nhà MỌC LÊN từ đáy -> (2) heading -> (3) từng tier: line kẻ
   trái->phải rồi text, lần lượt 19-20F, 4-18F, 0-3F. --- */

/* (1) Tòa nhà mọc lên (clip-path lộ dần từ đáy) */
#mat-bang .casaluna-mat-bang__building {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
#mat-bang.is-revealed .casaluna-mat-bang__building {
	clip-path: inset(0 0 0 0);
}

/* (2) Heading (sau khi tòa nhà mọc) */
#mat-bang .casaluna-mat-bang__header {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.9s ease, transform 0.9s ease;
}
#mat-bang.is-revealed .casaluna-mat-bang__header {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 1.1s;
}

/* (3) Mỗi tier: connector line (scaleX trái->phải) rồi floor+text fade */
#mat-bang .casaluna-mat-bang__tier::before {
	transform: scaleX(0);
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
#mat-bang.is-revealed .casaluna-mat-bang__tier::before {
	transform: scaleX(1);
}
#mat-bang .casaluna-mat-bang__tier-floor,
#mat-bang .casaluna-mat-bang__tier-line,
#mat-bang .casaluna-mat-bang__tier-body {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
#mat-bang.is-revealed .casaluna-mat-bang__tier-floor,
#mat-bang.is-revealed .casaluna-mat-bang__tier-line,
#mat-bang.is-revealed .casaluna-mat-bang__tier-body {
	opacity: 1;
	transform: translateY(0);
}

/* delay CHỈ đặt trên .is-revealed -> khi RỜI section (bỏ is-revealed) ẩn TỨC THÌ
   (delay=0), chỉ lúc HIỆN mới stagger. Fix bug: trước đây delay ở base -> lúc ẩn
   cũng bị delay tới 4.2s nên "còn nguyên", quay lại không replay. */
#mat-bang.is-revealed .casaluna-mat-bang__tier:nth-child(1)::before { transition-delay: 1.85s; }
#mat-bang.is-revealed .casaluna-mat-bang__tier:nth-child(2)::before { transition-delay: 2.8s; }
#mat-bang.is-revealed .casaluna-mat-bang__tier:nth-child(3)::before { transition-delay: 3.75s; }
#mat-bang.is-revealed .casaluna-mat-bang__tier:nth-child(1) .casaluna-mat-bang__tier-floor,
#mat-bang.is-revealed .casaluna-mat-bang__tier:nth-child(1) .casaluna-mat-bang__tier-line,
#mat-bang.is-revealed .casaluna-mat-bang__tier:nth-child(1) .casaluna-mat-bang__tier-body { transition-delay: 2.3s; }
#mat-bang.is-revealed .casaluna-mat-bang__tier:nth-child(2) .casaluna-mat-bang__tier-floor,
#mat-bang.is-revealed .casaluna-mat-bang__tier:nth-child(2) .casaluna-mat-bang__tier-line,
#mat-bang.is-revealed .casaluna-mat-bang__tier:nth-child(2) .casaluna-mat-bang__tier-body { transition-delay: 3.25s; }
#mat-bang.is-revealed .casaluna-mat-bang__tier:nth-child(3) .casaluna-mat-bang__tier-floor,
#mat-bang.is-revealed .casaluna-mat-bang__tier:nth-child(3) .casaluna-mat-bang__tier-line,
#mat-bang.is-revealed .casaluna-mat-bang__tier:nth-child(3) .casaluna-mat-bang__tier-body { transition-delay: 4.2s; }

@media (max-width: 1024px) {
	.casaluna-mat-bang {
		min-height: auto;
	}

	.casaluna-mat-bang__header {
		position: static;
		margin: 0 0 1.5rem;
		max-width: none;
	}

	/* heading + subheading BANG section kiet-tac (cung token x1.38). */
	.casaluna-mat-bang__heading {
		font-size: calc(var(--fs-section-heading) * 1.38);
	}

	.casaluna-mat-bang__subheading {
		font-size: calc(var(--fs-section-subheading) * 1.38);
	}

	/* Noi dung tier (__tier-body) +20%: nhan tung con (title/desc/note) vi chung
	   dung token co tuyet doi -> font-size dat tren __tier-body khong cascade. */
	.casaluna-mat-bang__tier-title {
		font-size: calc(var(--fs-section-subheading) * 1.2);
	}

	.casaluna-mat-bang__tier-desc {
		font-size: calc(var(--fs-section-body) * 1.2);
	}

	.casaluna-mat-bang__tier-note {
		font-size: calc(var(--fs-section-body) * 0.92 * 1.2);
	}

	/* Nhan tang doc __tier-floor +30% (base clamp(1,1.16vw,1.27) x1.3). */
	.casaluna-mat-bang__tier-floor {
		font-size: clamp(1.3rem, 1.51vw, 1.65rem);
	}

	/* Toa nha "moc len" CHAM hon tren mobile (1.3s -> 2.8s): truoc nhanh qua nen
	   chi kip thay doan dinh. Selector co #mat-bang de du specificity thang rule
	   goc (#mat-bang .casaluna-mat-bang__building). */
	#mat-bang .casaluna-mat-bang__building {
		transition: clip-path 2.8s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.casaluna-mat-bang__stage {
		position: static;
		display: block;
		min-height: 0;
	}

	.casaluna-mat-bang__building {
		position: static;
		width: auto;
		height: auto;
		max-height: 68vh;
		margin: 0 auto 2rem;
	}

	.casaluna-mat-bang__svg {
		max-height: 68vh;
	}

	.casaluna-mat-bang__tiers {
		grid-column: 1;
		position: static;
		height: auto;
		min-height: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 1.8rem;
	}

	/* tier về luồng thường trên mobile (desktop dùng absolute theo %) */
	.casaluna-mat-bang__tier {
		position: static;
		top: auto;
	}

	.casaluna-mat-bang__tier::before {
		display: none;
	}

	/* hint: về luồng thường, đổi sang text mobile */
	.casaluna-mat-bang__hint {
		position: static;
		margin: 1.5rem auto 0;
		max-width: none;
		text-align: center;
		padding-bottom:20px;
	}

	.casaluna-mat-bang__hint-desktop {
		display: none;
	}

	.casaluna-mat-bang__hint-mobile {
		display: inline;
	}
}

@media (prefers-reduced-motion: reduce) {
	#mat-bang .casaluna-mat-bang__header,
	#mat-bang .casaluna-mat-bang__tier-floor,
	#mat-bang .casaluna-mat-bang__tier-body {
		opacity: 1;
		transform: none;
		transition: none;
	}
	#mat-bang .casaluna-mat-bang__building { clip-path: none; transition: none; }
	#mat-bang .casaluna-mat-bang__tier::before { transform: scaleX(1); transition: none; }
	.casaluna-mat-bang__shape { transition: none; }
}