/*
 * File: assets/css/homepage.css
 * Vai trò: CSS riêng cho các section trang chủ — chỉ được nạp khi is_front_page() (xem inc/enqueue.php).
 * Viết lại hoàn toàn theo đúng ảnh thiết kế tham chiếu (design-reference/homepage-189-reference.png):
 * card dịch vụ có nền/border/shadow/bo góc, section Dự án nền navy full-width, CTA là banner
 * trong container (không phải section nền màu), Lợi thế có icon + đường phân cách.
 */

/* Nhịp tiêu đề (H1-H3) — chỉ trang chủ, dùng ".home.taco189-site" để không ảnh hưởng trang khác */
.home.taco189-site h1 {
	font-size: var(--taco189-fs-h1);
	line-height: 1.1;
}
.home.taco189-site h2 {
	font-size: var(--taco189-fs-h2);
	line-height: var(--taco189-lh-heading);
	color: var(--taco189-color-primary);
}
.home.taco189-site h3 {
	font-size: var(--taco189-fs-h3);
	line-height: var(--taco189-lh-heading);
}

/* Utility */
.taco189-text-center { text-align: center; }
.taco189-text-right { text-align: right; }
.taco189-mt-md { margin-top: var(--taco189-space-md); }

/* Container chuẩn 1360px cho các row full-width trong trang chủ (bổ trợ rule ở responsive.css) */
@media (min-width: 850px) {
	.taco189-container-row {
		max-width: 1360px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ===================== 1. Hero ===================== */
/* Bug thật đã phát hiện qua QA: nút "Nhận tư vấn" (.button.white.is-outline) vô hình trên nền
   tối. Flatsome tự đặt ".white.button.is-outline{color:currentColor!important}" (3 class — thắng
   độ đặc trưng của rule "color:#fff!important" chỉ có 2 class), nên currentColor kế thừa lên tới
   ".taco189-site{color:...}" (chữ tối) ở <body>. Cách đúng: đặt "color:#fff" ngay tại section Hero
   (không cần !important — chỉ để xác lập giá trị kế thừa gần nhất, đúng cơ chế currentColor). */
.taco189-home-hero {
	color: var(--taco189-color-white);
}
.home.taco189-site .taco189-home-hero h1 {
	color: var(--taco189-color-white);
	text-transform: uppercase;
	margin-bottom: var(--taco189-space-sm);
	/* Dùng clamp() thay cho font_size cố định trong shortcode (font_size="64px" bị nhân với
	   font-size gốc của h1 thành 64rem — lỗi thật đã phát hiện qua HTML). */
	font-size: clamp(42px, 4.4vw, 64px);
}
.taco189-home-hero .section-content {
	min-height: 590px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.taco189-home-hero .taco189-eyebrow {
	color: var(--taco189-color-white);
	opacity: 0.9;
}
.taco189-home-hero .taco189-hero-desc {
	color: var(--taco189-color-white);
	opacity: 0.92;
	max-width: 46ch;
	margin-bottom: var(--taco189-space-md);
}

/* Thanh 4 thông số đáy Hero */
.taco189-hero-stats-row {
	align-self: flex-end;
	margin-top: auto;
}
.taco189-hero-stats {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.taco189-hero-stat {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: var(--taco189-space-md) var(--taco189-space-sm);
	border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.taco189-hero-stat:last-child {
	border-right: none;
}
.taco189-hero-stat-icon svg {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}
.taco189-hero-stat-text strong {
	display: block;
	color: var(--taco189-color-white);
	font-size: 1.1rem;
	font-weight: 700;
}
.taco189-hero-stat-text span {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8rem;
}

/* ===================== 2. Giới thiệu (50/50) ===================== */
.taco189-intro-row {
	min-height: 560px;
}
.taco189-intro-media-col {
	position: relative;
	overflow: hidden;
}
.taco189-intro-media-col .col-inner {
	height: 100%;
}
.taco189-intro-image,
.taco189-intro-image .img-inner {
	height: 100%;
}
.taco189-intro-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.taco189-intro-text-col .col-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.taco189-home-intro h2 {
	margin-bottom: var(--taco189-space-sm);
}
.taco189-check-list {
	display: block;
	margin-top: var(--taco189-space-sm);
}
.taco189-check-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: var(--taco189-space-sm);
	color: var(--taco189-color-text);
}
.taco189-check-item svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
}

/* ===================== 3. Dịch vụ — card trắng, border, bo góc, shadow, icon đè ảnh/nội dung ===================== */
.taco189-home-services .row {
	align-items: stretch;
}
/* .taco189-service-card la [col] cua Flatsome — KHONG dat background/border/shadow truc tiep
   len no (col co the bi Flatsome them margin/flex-basis khac). Chuyen khung card sang .col-inner
   (wrapper con Flatsome tu tao trong moi .col) de card cao deu nhau va khong vo layout. */
.taco189-service-card {
	background: transparent;
	border: 0;
	box-shadow: none;
	overflow: visible;
	margin-bottom: var(--taco189-space-lg);
}
.taco189-service-card > .col-inner {
	height: 100%;
	position: relative;
	overflow: hidden;
	background-color: var(--taco189-color-white);
	border: 1px solid var(--taco189-color-border);
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(6, 32, 52, 0.06);
	display: flex;
	flex-direction: column;
}
.taco189-service-card-image {
	margin-bottom: 0;
}
.taco189-service-card-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px 10px 0 0;
	display: block;
}
.taco189-service-card-icon {
	position: relative;
	z-index: 2;
	margin: -24px 0 0 20px;
	width: 48px;
	height: 48px;
	background-color: var(--taco189-color-white);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(6, 32, 52, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
}
.taco189-service-card-icon svg {
	width: 22px;
	height: 22px;
}
.taco189-service-card-body {
	padding: 12px 20px 20px;
}
.taco189-service-card-body h3 {
	margin-bottom: var(--taco189-space-xs);
}
.taco189-service-card-body p {
	color: var(--taco189-color-text-muted);
	margin-bottom: var(--taco189-space-xs);
}
.taco189-service-arrow {
	color: var(--taco189-color-accent);
	font-weight: 700;
}

/* ===================== 4. Dự án tiêu biểu — nền navy full-width ===================== */
.taco189-home-projects {
	color: var(--taco189-color-white);
}
.taco189-home-projects h2 {
	color: var(--taco189-color-white);
	display: inline-block;
	position: relative;
	padding: 0 20px;
}
.taco189-heading-dashed h2::before,
.taco189-heading-dashed h2::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 14px;
	height: 3px;
	background-color: var(--taco189-color-accent);
}
.taco189-heading-dashed h2::before { left: -8px; }
.taco189-heading-dashed h2::after { right: -8px; }
.taco189-home-projects .taco189-project-media img {
	transition: transform 0.4s ease;
}
.taco189-home-projects .taco189-project-media:hover img {
	transform: scale(1.03);
}
.taco189-home-projects .taco189-project-tag {
	display: inline-block;
	background-color: var(--taco189-color-accent);
	color: var(--taco189-color-white);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
}
.taco189-home-projects .taco189-project-caption {
	margin-top: var(--taco189-space-sm);
	color: var(--taco189-color-white);
}
.taco189-home-projects .taco189-project-location {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.875rem;
}

/* ===================== 5. Lợi thế — icon + đường phân cách dọc ===================== */
.taco189-home-strengths {
	background-color: var(--taco189-color-surface);
	padding-top: var(--taco189-space-2xl);
	padding-bottom: var(--taco189-space-2xl);
}
.taco189-strength-item {
	text-align: center;
	border-left: 1px solid var(--taco189-color-border);
	padding: 0 var(--taco189-space-md);
}
.taco189-strength-item:first-child {
	border-left: none;
}
.taco189-strength-icon svg {
	width: 40px;
	height: 40px;
	margin-bottom: var(--taco189-space-sm);
}
.taco189-strength-item h3 {
	font-size: 1.05rem;
	margin-bottom: var(--taco189-space-xs);
}
.taco189-strength-item .text {
	color: var(--taco189-color-text-muted);
	font-size: 0.95rem;
}

/* ===================== 6. CTA — banner bo góc trong container, không phải nền cả section ===================== */
.taco189-home-cta {
	background-color: var(--taco189-color-white);
}
.taco189-cta-banner {
	border-radius: 10px;
	overflow: hidden;
}
/* Dùng 3 class (".home.taco189-site .taco189-cta-banner h2") để thắng độ đặc trưng của
   ".home.taco189-site h2" (2 class) ở đầu file — nếu không, chữ sẽ bị đổi sang màu navy,
   gần như không đọc được trên nền ảnh tối (đã phát hiện qua screenshot thật). */
.home.taco189-site .taco189-cta-banner .taco189-cta-title {
	color: var(--taco189-color-white);
	font-size: 1.6rem;
	line-height: 1.25;
	margin: 0 0 10px;
}
.taco189-cta-banner .taco189-cta-desc {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.95rem;
	margin: 0 0 16px;
}
.taco189-cta-banner .text-box-content {
	width: 100%;
}

/* ===================== 7. Tin tức — 3 card đều nhau, ảnh 16:9 cố định, có border/bo góc/shadow ===================== */
.taco189-home-news .image-cover {
	padding-top: 56.25% !important;
}
.taco189-home-news .row.equalize,
.taco189-home-news .row {
	align-items: stretch;
}
.taco189-home-news .post-date {
	display: none;
}
.taco189-home-news .post-item {
	display: flex;
}
.taco189-home-news .box-blog-post {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--taco189-color-white);
	border: 1px solid var(--taco189-color-border);
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(6, 32, 52, 0.06);
	overflow: hidden;
}
.taco189-home-news .box-blog-post .box-image,
.taco189-home-news .box-blog-post .box-text {
	padding: 0;
}
/* Bug thật đã phát hiện qua QA: Flatsome mặc định ".box-image{margin:0 auto}" (dùng cho layout
   ảnh-trái/chữ-phải cũ). Với .box-blog-post là flex-column (ở trên), margin auto theo trục ngang
   phá vỡ "stretch" mặc định của flex item khiến box-image co về width:0 (ảnh biến mất hoàn toàn).
   Set lại width:100% + margin:0 để ảnh 16:9 hiển thị đúng ở cả desktop và mobile. */
.taco189-home-news .box-blog-post .box-image {
	width: 100%;
	margin: 0;
}
.taco189-home-news .box-blog-post .box-text {
	padding: 16px 20px 20px;
}

/* Toàn bộ rule responsive (≤549px) của trang chủ đã chuyển sang assets/css/responsive.css
   (file nạp SAU CÙNG — xem inc/enqueue.php) để tránh trùng/mâu thuẫn hai nơi. */