/* Editorial Spacing Helpers */
.pt-7 {
	padding-top: 7rem !important;
}

.pb-7 {
	padding-bottom: 7rem !important;
}

.py-7 {
	padding-top: 7rem !important;
	padding-bottom: 7rem !important;
}

.max-w-350 {
	max-width: 350px;
}

.max-w-600 {
	max-width: 600px;
}

/* Custom Typography Utilities */
.tracking-widest {
	letter-spacing: 0.15em !important;
}

.tracking-wider {
	letter-spacing: 0.08em !important;
}

.text-gold {
	color: var(--color-accent-gold) !important;
}

.bg-light-gray {
	background-color: var(--color-light-gray) !important;
}

/* Header State Management */
.site-header {
	transition: background-color 0.4s var(--transition-smooth), padding 0.4s var(--transition-smooth);
}

.site-header.navbar-transparent {
	background-color: transparent;
}

.site-header.navbar-scrolled {
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-border);
}

.site-header.navbar-scrolled .navbar-brand,
.site-header.navbar-scrolled .nav-link {
	color: var(--color-dark) !important;
}

.navbar-transparent .nav-link {
	color: var(--color-white);
}

.navbar-transparent .navbar-brand {
	color: var(--color-white);
}

/* Offcanvas Overrides for Premium Navigation Layout */
.offcanvas {
	background-color: var(--color-white);
	width: 100% !important;
}

@media (min-width: 992px) {
	.offcanvas {
		background-color: transparent !important;
		width: auto !important;
	}
}

/* Premium Buttons & Interactive Components */
.btn-premium {
	font-family: var(--font-heading);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 1rem 2.5rem;
	border-radius: 0;
	transition: all 0.3s var(--transition-smooth);
	position: relative;
	overflow: hidden;
}

.btn-premium-dark {
	background-color: var(--color-dark);
	color: var(--color-white);
	border: 1px solid var(--color-dark);
}

.btn-premium-dark:hover {
	background-color: transparent;
	color: var(--color-dark);
}

.btn-premium-outline-white {
	background-color: transparent;
	color: var(--color-white);
	border: 1px solid var(--color-white);
}

.btn-premium-outline-white:hover {
	background-color: var(--color-white);
	color: var(--color-dark);
}

/* Smooth Premium Zoom & Hover Overlay Effect */
.img-zoom-container {
	overflow: hidden;
	position: relative;
}

.img-zoom-container img {
	transition: transform 0.8s var(--transition-smooth);
	width: 100%;
	object-fit: cover;
}

.img-zoom-container:hover img {
	transform: scale(1.05);
}

.hover-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(34, 34, 34, 0.4);
	opacity: 0;
	transition: opacity 0.4s var(--transition-smooth);
	display: flex;
	align-items: flex-end;
	padding: 2.5rem;
}

.img-zoom-container:hover .hover-overlay {
	opacity: 1;
}

/* Tối ưu chữ hiển thị trong overlay của dự án nhỏ */
.hover-overlay h4 {
	font-size: 1.15rem !important;
	letter-spacing: -0.01em;
}

.hover-overlay {
	padding: 1.5rem !important;
	/* Thu nhỏ khoảng đệm bên trong ảnh */
}

/* Editorial Minimalist Cards */
.editorial-card {
	border: none;
	border-radius: 0;
	background: transparent;
}

.editorial-card .card-body {
	padding: 1.5rem 0 0 0;
}

/* Form Styling Optimization */
.form-control-premium {
	border: none;
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	padding: 1rem 0;
	background-color: transparent;
	color: var(--color-dark);
}

.form-control-premium:focus {
	box-shadow: none;
	background-color: transparent;
	border-bottom: 1px solid var(--color-accent-gold);
}

/* Fade In Effects on Load */
.fade-in-up {
	animation: fadeInUp 0.8s var(--transition-smooth) forwards;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- KHẮC PHỤC LỖI TRÙNG MÀU CHỮ HEADER & FOOTER --- */

/* 1. Đảm bảo chữ trên Header Trong Suốt có màu trắng khi ở trên Hero Banner */
.navbar-transparent .navbar-brand,
.navbar-transparent .nav-link {
	color: var(--color-white) !important;
}

/* Khi cuộn chuột, Header biến thành nền trắng -> Chữ tự động chuyển sang đen */
.site-header.navbar-scrolled .navbar-brand,
.site-header.navbar-scrolled .nav-link {
	color: var(--color-dark) !important;
}

.site-header.navbar-scrolled .nav-link:hover {
	color: var(--color-accent-gold) !important;
}

/* 2. Đảm bảo toàn bộ chữ, link trong Footer nền đen (bg-dark) phải hiển thị màu trắng/xám nhẹ */
footer.bg-dark {
	background-color: #1a1a1a !important;
	/* Đen sâu cao cấp */
	color: rgba(255, 255, 255, 0.8) !important;
}

footer.bg-dark h5,
footer.bg-dark h6,
footer.bg-dark .text-white {
	color: var(--color-white) !important;
}

footer.bg-dark a,
footer.bg-dark .text-muted {
	color: rgba(255, 255, 255, 0.5) !important;
	transition: color 0.3s var(--transition-smooth);
}

/* Hiệu ứng hover cho link dưới footer sang màu vàng Gold */
footer.bg-dark a:hover,
footer.bg-dark .hover-gold:hover {
	color: var(--color-accent-gold) !important;
	text-decoration: none;
}

/* Nút menu di động (Hamburger) trên nền đen/trong suốt */
.navbar-transparent .navbar-toggler .bi-list {
	color: var(--color-white) !important;
}

.site-header.navbar-scrolled .navbar-toggler .bi-list {
	color: var(--color-dark) !important;
}

/* --- HIỆU ỨNG ẢNH SECTION CHÚNG TÔI LÀ AI --- */
.about-image-wrapper {
	padding: 20px 20px 0 0;
	/* Tạo khoảng trống để lớp lót nhô ra */
}

/* Lớp lót nghệ thuật (Editorial Shadow Box) */
.about-image-wrapper::before {
	content: "";
	position: absolute;
	/* Lệch về góc dưới bên trái */
	bottom: -20px;
	left: -20px;
	width: 70%;
	height: 80%;
	background-color: rgba(178, 139, 68, 0.08);
	/* Màu vàng Gold nhẹ 8% độ mờ */
	border-left: 2px solid var(--color-accent-gold);
	border-bottom: 2px solid var(--color-accent-gold);
	z-index: 0;
	transition: transform 0.6s var(--transition-smooth);
}

/* Hiệu ứng tương tác nhẹ khi người dùng rê chuột vào vùng ảnh */
.about-image-wrapper:hover::before {
	transform: translate(-8px, 8px);
	/* Khối lót đẩy nhẹ ra xa tạo chiều sâu */
}

/* Giữ cấu trúc layer chuẩn */
.about-image-wrapper .img-zoom-container {
	z-index: 1;
}

/* --- FIX LỖI HIỂN THỊ ẢNH DỰ ÁN --- */
.project-premium-box {
	width: 100%;
	height: 280px;
	/* Định vị chiều cao vừa phải cố định cực kỳ an toàn */
	background-color: #f7f7f7;
}

.project-premium-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Đảm bảo ảnh không bị méo */
	transition: transform 0.6s var(--transition-smooth);
}

.project-premium-box:hover img {
	transform: scale(1.04);
}

/* Khối chữ overlay hiển thị đè lên ảnh khi hover */
.hover-overlay-fixed {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to top, rgba(34, 34, 34, 0.85) 0%, rgba(34, 34, 34, 0.1) 100%);
	opacity: 0;
	display: flex;
	align-items: flex-end;
	padding: 1.5rem;
	transition: opacity 0.4s var(--transition-smooth);
	z-index: 2;
}

.project-premium-box:hover .hover-overlay-fixed {
	opacity: 1;
}

.hover-overlay-fixed h4 {
	font-size: 1.15rem !important;
}