/*
 * Design tokens + base styles dùng chung toàn site.
 * Concept: LUMINOUS IMPERIAL GOLD & PEARL IVORY (Sáng sủa, Vương giả, Tuyệt đối không dùng nền tối/đen).
 * Breakpoints tham chiếu: 480 / 768 / 1024 / 1280 / 1440 / 1920 / 2560 (2K) / 3840 (4K)
 */

:root {
	/* Brand Gold System — Vàng Hoàng Kim Quý Phái */
	--tc-primary: #C59B27; /* Rich Triton Crown Gold */
	--tc-primary-hover: #A67E14; /* Deep Gold on hover */
	--tc-primary-dark: #8C6810;
	--tc-gold-light: #E0BD5E;
	--tc-gold-soft: rgba(197, 155, 39, 0.12);
	--tc-gold-glow: 0 8px 30px rgba(197, 155, 39, 0.2);

	/* Luminous Luxury Backgrounds (Tránh màu tối/đen) */
	--tc-bg-main: #FBF9F5; /* Imperial Pearl White */
	--tc-bg-secondary: #F3ECE1; /* Warm Champagne Cream */
	--tc-bg-card: #FFFFFF; /* Pure Alabaster Surface */
	--tc-bg-card-hover: #FAF5EB; /* Silk Gold Tint */
	--tc-bg-warm: #EBE1D0; /* Soft Sandstone */
	--tc-bg-light: #FFFFFF;

	/* Structural surfaces */
	--tc-header: rgba(251, 249, 245, 0.94);
	--tc-footer: #EDE4D3; /* Champagne Gold Sandstone Footer */

	/* Accents & Borders */
	--tc-highlight: #C59B27;
	--tc-highlight-soft: rgba(197, 155, 39, 0.25);
	--tc-border-hairline: rgba(197, 155, 39, 0.22);
	--tc-border-active: rgba(197, 155, 39, 0.65);
	--tc-card-shadow: 0 10px 35px rgba(110, 85, 50, 0.06);
	--tc-card-shadow-hover: 0 16px 45px rgba(110, 85, 50, 0.12);

	/* Typography — Tông Xanh Đen Hải Quân Quý Tộc & Ánh Kim (Không dùng màu đen) */
	--tc-heading: #0B1E36; /* Luxury Midnight Navy / Xanh Đen Quý Tộc */
	--tc-heading-navy: #0B1E36;
	--tc-heading-gold: #B38615; /* Solar Gold Headings */
	--tc-body: #4A5568; /* Slate Taupe thanh lịch, hài hòa êm ái */
	--tc-body-light: #243346;
	--tc-text-reverse: #FFFFFF;
	--tc-text-dark: #0B1E36; /* Xanh Đen */

	/* Fonts */
	--font-heading: 'Trajan Pro 3', 'Cormorant Garamond', Georgia, serif;
	--font-subheading: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'Questrial', Arial, sans-serif;

	/* Layout */
	--container-max: 1320px;
	--container-max-wide: 1680px;
	--container-padding: clamp(1.25rem, 1rem + 2.5vw, 5rem);
	--section-padding-y: clamp(5rem, 3.5rem + 5vw, 10rem);
	--header-height: 55px; /* Giảm 35% theo yêu cầu */
}

.page-id-118 div#dang-ky {
    display: none;
}
/* Ẩn title page */
.page-id-118 h1,
.page-id-118 .entry-title,
.page-id-118 .page-title,
.page-id-118 .entry-header {
  display: none !important;
}

/* Canh giữa hình */
.page-id-118 figure,
.page-id-118 .wp-block-image {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.page-id-118 figure img,
.page-id-118 .entry-content img,
.page-id-118 main img {
  display: block !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Lenis Smooth Scroll standard setup */
html.lenis, html.lenis body {
	height: auto;
}
.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}
.lenis.lenis-stopped {
	/* Giữ nguyên thanh cuộn dọc cố định để ngăn ngừa giật layout khi mở/đóng menu */
	overflow-y: scroll !important;
}
.lenis.lenis-smooth iframe {
	pointer-events: none;
}

html {
	font-size: 100%;
	background-color: var(--tc-bg-main);
	box-sizing: border-box;
	overflow-y: scroll;
	scrollbar-gutter: stable;
	touch-action: pan-y;
	overflow-anchor: none !important;
	-webkit-text-size-adjust: 100%;
}

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

.tc-section, .tc-hero-video {
	scroll-margin-top: var(--header-height, 84px);
}

body {
	font-family: var(--font-body);
	background-color: var(--tc-bg-main);
	color: var(--tc-body);
	line-height: 1.75;
	overflow-anchor: none !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	margin: 0;
	touch-action: pan-y;
}

/* ==========================================================================
   TYPOGRAPHIC HIERARCHY (Phân cấp rõ rệt Cha / Con / Cháu)
   ========================================================================== */

/* H1: Tiêu đề Mega Hero */
h1 {
	font-family: var(--font-heading);
	font-size: clamp(2.8rem, 2rem + 3.8vw, 5.6rem);
	font-weight: 700;
	line-height: 1.28;
	color: var(--tc-heading);
	letter-spacing: 0.05em;
	margin: 0 0 0.5em;
	overflow: visible;
}

/* H2: Tiêu đề Mục Chính (CHA) — Uy nghiêm, lớn, nổi bật hoàn toàn */
h2 {
	font-family: var(--font-heading);
	font-size: clamp(2.3rem, 1.7rem + 2.2vw, 3.8rem);
	font-weight: 700;
	line-height: 1.28;
	color: var(--tc-heading);
	letter-spacing: 0.04em;
	margin: 0 0 0.8em;
	text-transform: uppercase;
	overflow: visible;
}

/* ==========================================================================
   HEADING EMPHASIS SYSTEM (Nhấn nhá chính phụ: Dẫn / Trọng tâm)
   Áp dụng cho H2 có 2 tầng: tầng phụ (dẫn) size nhỏ hơn, tầng chính size lớn
   Ví dụ: BIỂU TƯỢNG (size nhỏ hơn) VƯƠN LÊN TỪ ĐẠI DƯƠNG (size lớn)
   ========================================================================== */
.tc-section-title {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	overflow: visible;
}

/* Tiêu đề Phụ / Tiền đề (Dẫn nhập tinh tế, thanh nhã, màu xanh đen quý phái) */
.tc-title-sub,
h2 .tc-title-sub {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(1.05rem, 0.9rem + 0.45vw, 1.45rem);
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--tc-heading); /* Xanh Đen Quý Tộc */
	text-transform: uppercase;
	line-height: 1.35;
	margin-bottom: 0.35rem;
	opacity: 0.9;
	overflow: visible;
}

/* Tiêu đề Chính (Bệ vệ, vương giả, uy phong) */
.tc-title-main,
h2 .tc-title-main {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(2.3rem, 1.7rem + 2.2vw, 3.8rem);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	overflow: visible;
}

/* H3: Tiêu đề Card / Phân đoạn (CON) — Tinh tế, vừa vặn, rõ ràng là cấp dưới của H2 */
h3 {
	font-family: var(--font-heading);
	font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.55rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--tc-heading);
	letter-spacing: 0.03em;
	margin: 0 0 0.6em;
}

/* H4: Tiêu đề Chi tiết / Thông số (CHÁU) — Nhỏ gọn, sắc sảo */
h4 {
	font-family: var(--font-heading);
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.15rem);
	font-weight: 700;
	line-height: 1.4;
	color: var(--tc-heading);
	letter-spacing: 0.02em;
	margin: 0 0 0.4em;
}

p {
	margin: 0 0 1.4em;
	color: var(--tc-body);
	font-size: 1.25rem;
	line-height: 1.35;
}

/* Section Description / Lead Typography — Chuẩn hóa font-size 1.1rem và line-height 1.3 đồng bộ tất cả các section */
.tc-lead,
.tc-section-desc,
.tc-section__desc,
.tc-density__lead,
.tc-privacy__lead,
.tc-landscape__lead,
.tc-amenities__lead,
.tc-amenities__desc,
.tc-arrival__lead,
.tc-floorplan__lead,
.tc-floorplan__desc,
.tc-materials__lead,
.tc-materials__desc,
.tc-partners__lead,
.tc-partners__desc,
.tc-edge__lead,
.tc-news__lead,
.tc-news__desc,
.tc-location__desc,
.tc-arch-split__desc,
.tc-hero__lead,
.tc-footer__lead p {
	font-size: 1.1rem !important;
	line-height: 1.3 !important;
}

a {
	color: var(--tc-primary);
	text-decoration: none;
	transition: color .3s ease, border-color .3s ease, transform .3s ease;
}
a:hover { color: var(--tc-primary-hover); }

/* Screen reader */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 1rem; left: 1rem;
	width: auto; height: auto;
	clip: auto;
	background: var(--tc-bg-card);
	color: var(--tc-primary);
	border: 1px solid var(--tc-primary);
	padding: .75rem 1.25rem;
	z-index: 10000;
}

/* Containers */
.tc-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}
.tc-container--wide { max-width: var(--container-max-wide); }
.tc-container--narrow { max-width: 900px; }

/* Section structural padding */
.tc-section {
	padding-block: var(--section-padding-y);
	position: relative;
	background-color: var(--tc-bg-main);
}

.tc-section--secondary { background-color: var(--tc-bg-secondary); }
.tc-section--card-bg { background-color: var(--tc-bg-card); }
.tc-section--warm { background-color: var(--tc-bg-warm); }

/* Luxury Eyebrow / Category Tag */
.tc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--font-body);
	letter-spacing: .25em;
	text-transform: uppercase;
	font-size: .8rem;
	color: var(--tc-primary);
	margin-bottom: 1.25rem;
	font-weight: 600;
}
.tc-eyebrow::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 1.5px;
	background: var(--tc-primary);
}

/* Gold Gradient text (dành cho điểm nhấn sáng chói) */
.tc-gold-text {
	background: linear-gradient(135deg, #B38615 0%, #D4AF37 50%, #8C6810 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
	line-height: 1.28;
	padding-top: 0.18em;
	padding-bottom: 0.18em;
	margin-top: -0.18em;
	margin-bottom: -0.18em;
	overflow: visible;
}

/* Luxury CTA Button */
.tc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	padding: 1.05rem 2.6rem;
	border: 1px solid var(--tc-primary);
	background: linear-gradient(135deg, #D4AF37 0%, #B38615 100%);
	color: #FFFFFF;
	font-family: var(--font-body);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 0.85rem;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: all .35s ease;
	box-shadow: 0 6px 20px rgba(184, 134, 11, 0.25);
}
.tc-btn:hover {
	background: linear-gradient(135deg, #E0BD5E 0%, #C59B27 100%);
	color: #FFFFFF;
	box-shadow: 0 8px 30px rgba(184, 134, 11, 0.35);
	transform: translateY(-2px);
}

/* CTA Outline */
.tc-btn--outline {
	background: transparent;
	color: var(--tc-primary);
	border-color: var(--tc-primary);
	box-shadow: none;
}
.tc-btn--outline:hover {
	border-color: var(--tc-primary);
	background: var(--tc-primary);
	color: #FFFFFF;
	box-shadow: var(--tc-gold-glow);
}

/* GSAP reveal defaults */
.tc-reveal {
	opacity: 0;
	transform: translateY(35px);
}
.tc-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.tc-reveal { opacity: 1; transform: none; }
}

/* Surface texture - subtle ivory silk grain */
.tc-texture { position: relative; isolation: isolate; }
.tc-texture::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .018;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	background-repeat: repeat;
}
.tc-texture > * { position: relative; z-index: 1; }

/* Large editorial pull quote */
.tc-quote {
	font-family: var(--font-subheading);
	font-style: italic;
	font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2.2rem);
	line-height: 1.55;
	color: var(--tc-heading);
	border-left: 3px solid var(--tc-primary);
	padding-left: 1.75rem;
	margin-block: 2.5rem;
}

/* Luxury Divider */
.tc-divider {
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--tc-border-hairline) 30%, var(--tc-border-hairline) 70%, transparent 100%);
	margin-block: clamp(2.5rem, 2rem + 2vw, 4.5rem);
	border: none;
}

/* ==========================================================================
   RESPONSIVE ARCHITECTURE — 2K (2560px), 4K (3840px), Tablet & Mobile
   ========================================================================== */

/* 2K Screens (QHD / 2560x1440 & Ultra-wides) */
@media (min-width: 2048px) {
	:root {
		--container-max: 1800px;
		--container-max-wide: 2200px;
		--container-padding: clamp(2.5rem, 3vw, 5.5rem);
		--section-padding-y: clamp(6.5rem, 5.5vw, 11rem);
	}
	html {
		font-size: 112.5%; /* 18px base */
	}
	h1 {
		font-size: clamp(3.4rem, 2.8vw, 6.2rem);
	}
	h2, .tc-title-main {
		font-size: clamp(2.8rem, 2.2vw, 4.6rem);
	}
	.tc-title-sub {
		font-size: clamp(1.2rem, 0.6vw, 1.8rem);
		letter-spacing: 0.2em;
	}
	h3 {
		font-size: clamp(1.4rem, 1.0vw, 1.85rem);
	}
	h4 {
		font-size: clamp(1.05rem, 0.75vw, 1.35rem);
	}
	p {
		font-size: 1.08rem;
		line-height: 1.85;
	}
	.tc-quote {
		font-size: 2.2rem;
		line-height: 1.6;
		padding-left: 2.2rem;
		border-left-width: 4px;
	}
	.tc-eyebrow {
		font-size: 0.92rem;
		letter-spacing: 0.28em;
	}
	.tc-eyebrow::before {
		width: 32px;
		height: 2px;
	}
	.tc-btn {
		padding: 1.25rem 3.2rem;
		font-size: 0.95rem;
	}
}

/* 4K Screens (UHD / 3840x2160) */
@media (min-width: 3200px) {
	:root {
		--container-max: 2600px;
		--container-max-wide: 3200px;
		--container-padding: clamp(4rem, 4vw, 8rem);
		--section-padding-y: clamp(9rem, 7vw, 15rem);
	}
	html {
		font-size: 137.5%; /* 22px base */
	}
	h1 {
		font-size: clamp(4.6rem, 3.2vw, 8.0rem);
	}
	h2, .tc-title-main {
		font-size: clamp(3.6rem, 2.5vw, 5.8rem);
	}
	.tc-title-sub {
		font-size: clamp(1.5rem, 0.8vw, 2.3rem);
		letter-spacing: 0.24em;
	}
	h3 {
		font-size: clamp(1.8rem, 1.2vw, 2.4rem);
	}
	h4 {
		font-size: clamp(1.3rem, 0.9vw, 1.7rem);
	}
	p {
		font-size: 1.22rem;
		line-height: 1.9;
	}
	.tc-quote {
		font-size: 2.9rem;
		line-height: 1.65;
		padding-left: 2.8rem;
		border-left-width: 5px;
	}
	.tc-eyebrow {
		font-size: 1.15rem;
		letter-spacing: 0.32em;
	}
	.tc-eyebrow::before {
		width: 44px;
		height: 2.5px;
	}
	.tc-btn {
		padding: 1.55rem 4.2rem;
		font-size: 1.15rem;
	}
	.tc-divider {
		margin-block: clamp(4.5rem, 4vw, 7rem);
	}
}

/* Tablet Landscape & Small Laptops (992px - 1199px) */
@media (max-width: 1199px) {
	:root {
		--container-padding: clamp(1.25rem, 3vw, 2.5rem);
		--section-padding-y: clamp(4rem, 6vw, 6.5rem);
	}
}

/* Tablet Portrait (768px - 991px) */
@media (max-width: 991px) {
	:root {
		--container-padding: 1.5rem;
		--section-padding-y: clamp(3.5rem, 5vw, 5.5rem);
	}
}

/* Mobile Devices (< 768px) */
@media (max-width: 767px) {
	:root {
		--container-padding: 1.15rem;
		--section-padding-y: clamp(3rem, 7vw, 4.5rem);
	}
	body {
		overflow-x: hidden;
		width: 100%;
	}
}