/* ==========================================================================
   02 — DẤU ẤN KIẾN TRÚC (THÁP A & THÁP B)
   - Desktop (>= 992px): Panoramic Split-Screen 100vh pinned scrub crossfade giữa Tháp A & Tháp B
   - Mobile (< 992px): Dòng chảy tự nhiên từ trên xuống dưới (Inspiration Tháp A -> Tòa Tháp A -> Inspiration Tháp B -> Tòa Tháp B)
   - Bừng sáng tự nhiên, không overlay tối mờ; sử dụng scrim mềm ở đáy để bảo toàn độ tương phản typography vàng / trắng
   ========================================================================== */

.tc-architecture {
	background-color: #020912;
	position: relative;
	z-index: 10;
	width: 100%;
	height: 100vh;
	min-height: 100vh;
	max-height: 100vh;
	margin: 0;
	padding: 0;
	border: none;
	box-shadow: 0 -25px 60px rgba(0, 0, 0, 0.7);
	overflow: hidden;
	will-change: transform;
	transform: translateZ(0);
}

/* Khung Widescreen Split-Screen 100% Viewport Height */
.tc-arch-split {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 100vh;
	overflow: hidden;
	background-color: #020912;
}

/* Lớp overlay mờ nhẹ ban đầu rồi bừng sáng đại dương, bao phủ trọn vẹn cả 2 panel */
.tc-arch-split__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #020912;
	z-index: 4;
	pointer-events: none;
	opacity: 0.85;
	will-change: opacity;
}

/* Từng Khối Kiến Trúc: Tháp A & Tháp B */
.tc-arch-block {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	will-change: opacity;
}

.tc-arch-block--a {
	z-index: 2;
	opacity: 1;
	pointer-events: auto;
}

.tc-arch-block--b {
	z-index: 3;
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   PANEL NỬA TRÁI (50%): HÌNH CẢM HỨNG & TEXT (A: DU THUYỀN, B: NHÀ SÀN)
   ========================================================================== */

.tc-arch-split__panel--left {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
}

/* Lớp scrim chuyển sắc mềm ở đáy panel trái để chữ vàng/trắng luôn nổi bật rực rỡ mà phần trên ảnh vẫn sáng rạng rỡ */
.tc-arch-split__panel--left::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 52%;
	background: linear-gradient(to top, rgba(2, 9, 18, 0.88) 0%, rgba(2, 9, 18, 0.5) 45%, rgba(2, 9, 18, 0.12) 80%, transparent 100%);
	z-index: 2;
	pointer-events: none;
}

.tc-arch-split__media--left,
.tc-arch-split__media--yacht {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* Hiệu ứng kính gương Glassmorphism cho hình cảm hứng Nhà Sàn Tháp B */
.tc-arch-block--b .tc-arch-split__media--left,
.tc-arch-split__media--glass {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 2px 25px rgba(255, 255, 255, 0.08);
}

/* Lớp kính gương phủ bóng mờ pha lê (Translucent Frosted Glassmorphism - giảm 20% mờ) */
.tc-arch-block--b .tc-arch-split__media--left::before,
.tc-arch-split__media--glass::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.20) 0%,
		rgba(255, 255, 255, 0.08) 30%,
		rgba(2, 9, 18, 0.18) 60%,
		rgba(212, 175, 55, 0.08) 85%,
		rgba(255, 255, 255, 0.16) 100%
	);
	z-index: 2;
	pointer-events: none;
	backdrop-filter: blur(6.4px) contrast(105%) saturate(120%);
	-webkit-backdrop-filter: blur(6.4px) contrast(105%) saturate(120%);
}

/* Vệt phản quang gương kính pha lê (Specular Glass Reflection Highlight) */
.tc-arch-block--b .tc-arch-split__media--left::after,
.tc-arch-split__media--glass::after {
	content: '';
	position: absolute;
	top: -60%;
	left: -30%;
	width: 160%;
	height: 220%;
	background: linear-gradient(
		118deg,
		transparent 38%,
		rgba(255, 255, 255, 0.05) 44%,
		rgba(255, 255, 255, 0.24) 48%,
		rgba(255, 255, 255, 0.06) 52%,
		transparent 58%
	);
	transform: rotate(-10deg);
	z-index: 3;
	pointer-events: none;
	opacity: 0.85;
}

.tc-arch-split__img--left,
.tc-arch-split__img--yacht {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	will-change: transform, opacity;
}

/* ==========================================================================
   PANEL NỬA PHẢI (65%): TÒA THÁP THỰC TẾ (A & B) VỚI ĐƯỜNG VÁT VÀNG
   ========================================================================== */

.tc-arch-split__panel--right {
	position: absolute;
	top: 0;
	right: 0;
	width: 65%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
}

.tc-arch-split__media--tower {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.tc-arch-split__picture--tower {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	will-change: transform, opacity;
}

.tc-arch-split__img--tower {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: block;
	object-fit: cover;
	object-position: left center;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   CỤM TYPOGRAPHY NGHỆ THUẬT (ĐẶT TRÊN NỀN NƯỚC GÓC DƯỚI TRÁI)
   ========================================================================== */

.tc-arch-split__content {
	position: absolute;
	bottom: clamp(2.5rem, 2rem + 3vw, 5.5rem);
	left: clamp(2rem, 1.5rem + 3.5vw, 5.5rem);
	z-index: 5;
	max-width: min(540px, 86%);
	will-change: transform, opacity;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	pointer-events: auto;
}

.tc-arch-split__content .tc-eyebrow,
.tc-arch-split__title,
.tc-arch-split__title-gold,
.tc-arch-split__title-white,
.tc-arch-split__desc {
	will-change: transform, opacity;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
}

/* Kế thừa chính xác class .tc-eyebrow từ base.css (vạch vàng + chữ vàng) */
.tc-arch-split__content .tc-eyebrow {
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
	margin-bottom: 1.15rem;
}

/* Tiêu đề chính nhiều tầng */
.tc-arch-split__title {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin: 0 0 1.25rem;
	font-family: var(--font-heading);
	line-height: 1.25;
	text-transform: uppercase;
	overflow: visible;
}

/* Chữ Vàng Hoàng Gia Cỡ Đại — Giảm 15% theo yêu cầu để tránh tràn viền */
.tc-arch-split__title-gold {
	font-size: clamp(1.85rem, 1.25rem + 2.1vw, 3.55rem);
	font-weight: 700;
	letter-spacing: 0.03em;
	white-space: nowrap;
	display: inline-block;
	background: linear-gradient(135deg, #FFFDF5 0%, #F5D372 24%, #D4AF37 55%, #E0BD5E 82%, #A67E14 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.2;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	margin-top: -0.1em;
	margin-bottom: -0.1em;
	filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.85));
	overflow: visible;
}

/* Dòng Phụ Trắng Ngọc Trai Thanh Lịch */
.tc-arch-split__title-white {
	font-size: clamp(1.05rem, 0.85rem + 0.75vw, 1.75rem);
	font-weight: 500;
	color: #FFFFFF;
	letter-spacing: 0.04em;
	white-space: normal;
	line-height: 1.32;
	padding-top: 0.08em;
	padding-bottom: 0.08em;
	text-shadow: 
		0 2px 10px rgba(0, 0, 0, 0.9),
		0 4px 22px rgba(0, 0, 0, 0.7);
	overflow: visible;
}

/* Đoạn mô tả giàu cảm xúc trên nền nước */
.tc-arch-split__desc {
	font-family: var(--font-body);
	font-size: clamp(0.92rem, 0.82rem + 0.32vw, 1.05rem);
	line-height: 1.65;
	color: rgba(245, 245, 245, 0.94);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
	margin: 0;
	max-width: 580px;
}

/* ==========================================================================
   RESPONSIVE (TABLET & MOBILE)
   Không ghim pinning, không cử chỉ vuốt chuyển cảnh che khuất tòa tháp
   Cho hiển thị nối tiếp mượt mà từ trên xuống dưới
   ========================================================================== */

@media (max-width: 991px) {
	.tc-architecture {
		height: auto !important;
		min-height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		background-color: #020912;
	}

	.tc-arch-split {
		height: auto !important;
		min-height: auto !important;
		display: flex !important;
		flex-direction: column !important;
		overflow: visible !important;
		background-color: #020912;
	}

	/* Lớp overlay mờ nhẹ rồi bừng sáng trên mobile, bao phủ panel cảm hứng Block A */
	.tc-arch-split__overlay {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 68vh !important;
		min-height: 440px !important;
		max-height: 560px !important;
		background: #020912 !important;
		z-index: 4 !important;
		pointer-events: none !important;
		opacity: 0.85;
		will-change: opacity;
	}

	/* Từng block xếp chồng tuần tự từ trên xuống dưới */
	.tc-arch-block {
		position: relative !important;
		inset: auto !important;
		width: 100% !important;
		height: auto !important;
		display: flex !important;
		flex-direction: column !important;
		margin: 0 !important;
		padding: 0 !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	.tc-arch-block--b {
		margin: 0 !important;
		border: none !important;
		padding: 0 !important;
	}

	/* Khối Cảm Hứng & Text ở trên: Chiều cao vừa vặn để lộ tòa tháp ngay bên dưới */
	.tc-arch-split__panel--left {
		position: relative !important;
		width: 100% !important;
		height: 68vh !important;
		min-height: 440px !important;
		max-height: 560px !important;
		top: auto !important;
		left: auto !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.tc-arch-split__panel--left::after {
		height: 70% !important;
		background: linear-gradient(to top, rgba(2, 9, 18, 0.96) 0%, rgba(2, 9, 18, 0.72) 48%, rgba(2, 9, 18, 0.15) 85%, transparent 100%) !important;
	}

	.tc-arch-split__media--left,
	.tc-arch-split__media--yacht {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.tc-arch-split__img--left,
	.tc-arch-split__img--yacht {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}

	.tc-arch-split__content {
		position: absolute !important;
		bottom: 2rem !important;
		left: 1.5rem !important;
		right: 1.5rem !important;
		max-width: calc(100% - 3rem) !important;
		z-index: 5 !important;
		pointer-events: auto !important;
	}

	.tc-arch-split__title-white {
		font-size: clamp(1.1rem, 3.2vw, 1.5rem);
		white-space: normal;
	}

	/* Khối Tòa Tháp Thực Tế ở ngay dưới khối cảm hứng:
	   Hiển thị theo tỷ lệ tự nhiên của ảnh, nối liền 100% không để lại khoảng đen */
	.tc-arch-split__panel--right {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		top: auto !important;
		right: auto !important;
		pointer-events: auto !important;
		background: transparent !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 0 !important;
	}

	.tc-arch-split__media--tower {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		height: auto !important;
		overflow: hidden !important;
		aspect-ratio: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 0 !important;
	}

	.tc-arch-split__picture--tower {
		position: relative !important;
		inset: auto !important;
		display: block !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 0 !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.tc-arch-split__img--tower {
		position: relative !important;
		inset: auto !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		height: auto !important;
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		object-fit: cover !important;
		object-position: center top !important;
		opacity: 1 !important;
		transform: none !important;
		will-change: auto;
		-webkit-backface-visibility: visible;
		backface-visibility: visible;
	}
}

@media (max-width: 576px) {
	.tc-arch-split__panel--left {
		height: 62vh !important;
		min-height: 420px !important;
		max-height: 520px !important;
	}

	.tc-arch-split__content {
		bottom: 1.5rem !important;
		left: 1.25rem !important;
		right: 1.25rem !important;
		max-width: calc(100% - 2.5rem) !important;
	}

	.tc-arch-split__title-gold {
		font-size: clamp(1.85rem, 7.5vw, 2.35rem);
	}

	.tc-arch-split__title-white {
		font-size: clamp(1.05rem, 4.2vw, 1.35rem);
		letter-spacing: 0.02em;
		white-space: normal;
	}

	.tc-arch-split__desc {
		font-size: 1.1rem;
		line-height: 1.3;
	}
}

/* Dành riêng cho màn hình nhỏ (<= 380px như iPhone SE, Galaxy Fold gập) */
@media (max-width: 380px) {
	.tc-arch-split__content {
		bottom: 1.25rem !important;
		left: 0.85rem !important;
		right: 0.85rem !important;
		max-width: calc(100% - 1.7rem) !important;
	}

	.tc-arch-split__title-gold {
		font-size: 1.75rem;
	}

	.tc-arch-split__title-white {
		font-size: 1.0rem;
		letter-spacing: 0.01em;
	}

	.tc-arch-split__desc {
		font-size: 1.1rem;
		line-height: 1.3;
	}
}

/* ==========================================================================
   ARCHITECTURE RESPONSIVE (2K & 4K Ultra-Wide / UHD)
   ========================================================================== */

@media (min-width: 2048px) {
	.tc-arch-split__content {
		max-width: 820px;
		left: clamp(4rem, 4vw, 6.5rem);
		bottom: clamp(4rem, 5vh, 6.5rem);
	}
	.tc-arch-split__title-gold {
		font-size: clamp(3.4rem, 2.5vw, 4.8rem);
	}
	.tc-arch-split__title-white {
		font-size: clamp(1.8rem, 1.4vw, 2.5rem);
		letter-spacing: 0.06em;
	}
	.tc-arch-split__desc {
		max-width: 780px;
		font-size: 1.32rem;
		line-height: 1.35;
	}
}

@media (min-width: 3200px) {
	.tc-arch-split__content {
		max-width: 1200px;
		left: clamp(6.5rem, 5vw, 9.5rem);
		bottom: clamp(6rem, 6.5vh, 9.5rem);
	}
	.tc-arch-split__title-gold {
		font-size: clamp(4.6rem, 2.8vw, 6.4rem);
	}
	.tc-arch-split__title-white {
		font-size: clamp(2.4rem, 1.6vw, 3.4rem);
		letter-spacing: 0.07em;
	}
	.tc-arch-split__desc {
		max-width: 1100px;
		font-size: 1.68rem;
		line-height: 1.35;
	}
}