/*
 * File: assets/css/responsive.css
 * Vai trò: Điều chỉnh responsive cho design system + section trang chủ.
 * Breakpoint dùng đúng con số thực tế của Flatsome 3.20.9 (đã xác minh trong assets/css/flatsome.css
 * của parent theme và inc/builder/core/server/actions/actions.php):
 *   Mobile: <= 549px | Tablet: 550px - 849px | Desktop: >= 850px
 */

/* Mở rộng chiều ngang container chính ở desktop (≥850px): ~1320-1360px, lề 24-40px */
@media (min-width: 850px) {
	.home .taco189-section > .section-content > .row,
	.home .taco189-home-hero > .section-content > .row,
	#top-bar .container,
	.header-inner.container,
	.footer-widgets .row,
	.absolute-footer .container {
		width: calc(100% - 48px);
		max-width: 1360px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Tablet */
@media screen and (max-width: 849px) {
	.taco189-section {
		padding-top: var(--taco189-space-xl);
		padding-bottom: var(--taco189-space-xl);
	}
}

/* ======================================================================
 * MOBILE (≤549px) — TOÀN BỘ rule responsive của trang chủ tập trung ở đây.
 * Nhờ thứ tự enqueue đúng (variables → components → homepage → responsive,
 * xem inc/enqueue.php), file này nạp SAU CÙNG nên không cần lạm dụng !important
 * để thắng homepage.css. !important chỉ giữ lại ở 3 chỗ có ghi chú rõ lý do
 * (ghi đè CSS Flatsome tự sinh qua Customizer/shortcode, không phải homepage.css). */
@media screen and (max-width: 549px) {

	.taco189-section {
		padding-top: var(--taco189-space-lg);
		padding-bottom: var(--taco189-space-lg);
	}
	.home.taco189-site .button {
		min-height: 44px;
	}

	/* --- 1. Header: topbar ẩn, header trắng 64px luôn hiện, logo trái, hamburger phải --- */
	#top-bar {
		display: none;
	}
	/* Flatsome tự sinh "@media(max-width:549px){.header-main{height:70px}}" qua Customizer
	   (custom-css, không phải homepage.css) — cần !important để 64px thắng. */
	.header-main {
		height: 64px !important;
	}
	#logo {
		width: 145px;
	}
	#logo img {
		max-height: 44px !important;
	}
	.header-inner.container {
		justify-content: space-between;
	}
	.header-inner #logo {
		order: 1;
		text-align: left;
	}
	.header-inner .flex-left.show-for-medium {
		order: 3;
	}
	/* Nút hotline desktop không hiện trên mobile (đã có mục Hotline thật ở cuối menu drawer,
	   xem menu "Mobile Menu" gán riêng cho vị trí primary_mobile). */
	.header-main .header-button {
		display: none;
	}
	#main-menu .taco189-menu-hotline {
		margin-top: var(--taco189-space-sm);
		padding-top: var(--taco189-space-sm);
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}
	#main-menu .taco189-menu-hotline > a {
		color: var(--taco189-color-accent);
		font-weight: 700;
	}

	/* --- 2. Hero: 520-560px, 2 nút, thống kê 2x2 sát đáy --- */
	.taco189-home-hero {
		min-height: 540px;
	}
	.taco189-home-hero .section-content {
		min-height: 540px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.home.taco189-site .taco189-home-hero h1 {
		font-size: 34px;
		line-height: 1.08;
	}
	.taco189-home-hero .taco189-hero-desc {
		max-width: 100%;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.taco189-home-hero .button {
		margin: 0 8px 8px 0;
	}
	.taco189-hero-stat {
		flex-basis: 50%;
		max-width: 50%;
		min-height: 76px;
		padding: 12px;
		box-sizing: border-box;
	}
	.taco189-hero-stat-text strong {
		font-size: 1rem;
	}
	.taco189-hero-stat-text span {
		font-size: 0.75rem;
	}

	/* --- 3. Giới thiệu: ảnh trước (4:3, full width), nội dung sau, không khoảng trắng thừa --- */
	.taco189-intro-row {
		min-height: auto;
	}
	.taco189-intro-media-col,
	.taco189-intro-media-col .col-inner {
		height: auto;
	}
	.taco189-intro-image,
	.taco189-intro-image .img-inner {
		height: auto;
	}
	.taco189-intro-image img {
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		display: block;
	}
	/* Padding 28px 20px 32px đặt qua padding__sm ngay trong shortcode (homepage-structure.txt)
	   vì Flatsome sinh padding của .col-inner bằng <style> theo ID (đặc trưng cao hơn class),
	   CSS class ở đây không thắng được nếu không có !important — nên sửa tại nguồn. */
	.home.taco189-site .taco189-home-intro h2 {
		font-size: 26px;
	}
	.taco189-home-intro .text {
		font-size: 14px;
	}
	.taco189-check-item {
		font-size: 14px;
		margin-bottom: 14px;
	}
	.taco189-home-intro .button {
		display: inline-block;
		width: auto;
	}

	/* --- 4. Dịch vụ: lưới 2 cột x 3 hàng (6 card trong 1 row, span__sm="6" từ shortcode) --- */
	.taco189-home-services .row {
		margin-left: -6px;
		margin-right: -6px;
	}
	.taco189-home-services .col.taco189-service-card {
		padding-left: 6px;
		padding-right: 6px;
		margin-bottom: 12px;
	}
	.taco189-service-card-image img {
		aspect-ratio: 4 / 3;
	}
	.taco189-service-card-icon {
		width: 36px;
		height: 36px;
		margin: -18px 0 0 12px;
	}
	.taco189-service-card-icon svg {
		width: 18px;
		height: 18px;
	}
	.taco189-service-card-body {
		padding: 10px 12px 14px;
	}
	.taco189-service-card-body h3 {
		font-size: 14px;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.taco189-service-card-body .text {
		font-size: 12.5px;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.taco189-service-arrow {
		display: block;
		text-align: right;
	}

	/* --- 5. Dự án: xếp dọc, mỗi dự án rộng 100%, không carousel --- */
	.taco189-home-projects .row {
		flex-direction: column;
	}
	.taco189-home-projects .row > .col {
		width: 100%;
		max-width: 100%;
		margin-bottom: 24px;
	}
	.taco189-home-projects .row > .col:last-child {
		margin-bottom: 0;
	}
	/* Chiều cao banner dự án trên mobile (~210px) đặt qua height__sm="210px" ngay trong
	   shortcode — đúng cơ chế Flatsome (ux_banner tự sinh style theo ID), không override
	   bằng CSS class vì ID random mỗi lần render. */

	/* --- 6. Lợi thế: giữ 2x2, chia ngang + dọc nhẹ --- */
	.taco189-home-strengths {
		padding-top: var(--taco189-space-xl);
		padding-bottom: var(--taco189-space-xl);
	}
	.taco189-strength-icon svg {
		width: 34px;
		height: 34px;
	}
	.taco189-strength-item h3 {
		font-size: 14px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.taco189-strength-item .text {
		font-size: 12.5px;
	}
	.taco189-strength-item {
		border-left: none;
		border-top: none;
		padding: var(--taco189-space-sm);
	}
	.taco189-home-strengths .row .col:nth-child(2n) {
		border-left: 1px solid var(--taco189-color-border);
	}
	.taco189-home-strengths .row .col:nth-child(3),
	.taco189-home-strengths .row .col:nth-child(4) {
		border-top: 1px solid var(--taco189-color-border);
	}

	/* --- 7. CTA: banner rộng hết container, ~220px, chữ không mất --- */
	.taco189-cta-banner {
		border-radius: 9px;
	}
	.taco189-cta-banner .banner-bg img {
		object-position: right center;
	}
	/* Flatsome sinh ".overlay" (bg_overlay) qua <style> theo ID (không phải homepage.css) —
	   cần !important để đổi thành gradient trái→phải chỉ trên mobile. */
	.taco189-cta-banner .overlay {
		background: linear-gradient(to right, rgba(6, 32, 52, 0.94), rgba(6, 32, 52, 0.55)) !important;
	}
	/* width 100% của .text-box-content đặt qua width__sm="100" ngay trong shortcode (đúng cơ
	   chế responsive của text_box) — không dùng CSS 70% nữa. */
	.taco189-cta-banner .taco189-cta-title {
		font-size: 24px;
	}
	.taco189-cta-banner .taco189-cta-desc {
		font-size: 13px;
	}

	/* --- 8. Tin tức: 3 card dọc đầy đủ, ảnh trên (16:9), nội dung dưới --- */
	.taco189-home-news .post-date {
		display: block;
		font-size: 11px;
	}
	.taco189-home-news .post-title {
		font-size: 15px;
		line-height: 1.35;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.taco189-home-news .from_the_blog_excerpt {
		font-size: 13px;
	}
	.taco189-home-news .box-blog-post {
		margin-bottom: 16px;
	}
	.taco189-home-news .row > .col:last-child .box-blog-post {
		margin-bottom: 0;
	}

	/* --- 9. Footer: logo/mô tả full, 2 cột giữa, liên hệ full --- */
	.footer-widgets.footer-1 {
		padding-left: 20px;
		padding-right: 20px;
	}
	.footer-widgets.footer-1 .row.large-columns-4 {
		display: flex;
		flex-wrap: wrap;
	}
	#block-7,
	#block-10 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	#block-8,
	#block-9 {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.taco189-footer-col {
		margin-bottom: var(--taco189-space-md);
		font-size: 13px;
		line-height: 1.55;
	}
	.taco189-footer-title {
		margin-bottom: var(--taco189-space-xs);
	}
	.absolute-footer {
		text-align: center;
	}
}

/* Dưới 350px: dịch vụ quay về 1 cột (ghi đè span__sm="6" của shortcode) */
@media screen and (max-width: 350px) {
	.taco189-home-services .col.taco189-service-card {
		flex-basis: 100%;
		max-width: 100%;
	}
}