/* =====================================================================
   Huylab — responsive.css
   Breakpoints: 1366 / 1250 (menu mobile) / 1200 / 1024 / 768 / 640 / 480 / 390 / 375
   ===================================================================== */

/* ---------- ≥ 1366px ---------- */
@media (max-width: 1366px) {
	.container {
		max-width: 1200px;
	}
}

/* ---------- 1200px ---------- */
@media (max-width: 1200px) {
	.container {
		max-width: 100%;
	}

	.main-menu > li > a {
		padding: 12px 10px;
		font-size: 14px;
	}

	.quick-services-grid,
	.fields-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 18px;
	}

	.projects-grid,
	.posts-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	.footer-main {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: 32px;
	}

	.footer-col--map {
		grid-column: span 4;
	}
}

/* ---------- 1024px (tablet ngang) ---------- */
@media (max-width: 1024px) {
	.topbar-left .topbar-item:nth-child(3) {
		display: none;
	}

	.quick-services-grid,
	.fields-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.services-grid,
	.projects-grid,
	.posts-grid,
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.content-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.content-sidebar {
		order: -1;
	}

	.about-grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}

	.about-media-small {
		left: 16px;
	}

	.about-intro-highlights {
		grid-template-columns: 1fr;
	}

	.statistics-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.footer-main {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	.footer-col--map {
		grid-column: span 2;
	}
}

/* ---------- 1250px (menu mobile) ----------
   NÂNG từ 992 lên 1250: header 3 cột (branding 177 + nav 875 + actions 200, cộng gap
   ~26px = 1328px) chỉ vừa trong 1 hàng khi viewport ≥ ~1366px. Trong khoảng
   993–1365 trước đây menu ngang bị đẩy tràn ra ngoài ~24–200px -> sinh thanh cuộn
   ngang cho TOÀN SITE (nút hotline lọt ra khỏi màn hình).
   Dùng menu mobile (hamburger) tới 1250px để không bao giờ tràn.
   ĐỒNG BỘ BẮT BUỘC: navigation.js -> isMobile() dùng window.innerWidth <= 1250. */
@media (max-width: 1250px) {
	:root {
		--header-height: 68px;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.header-cta {
		display: none;
	}

	.main-navigation {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 320px;
		max-width: 85vw;
		background: var(--color-white);
		box-shadow: var(--shadow-lg);
		transform: translateX(100%);
		transition: transform 0.35s ease;
		overflow-y: auto;
		z-index: 1100;
		padding: 24px;
		margin: 0;
		flex-basis: auto;
		display: block;
	}

	/* LƯU Ý QUAN TRỌNG: KHÔNG đặt nền trắng cho .header-main ở đây.
	   `.menu-toggle-bars` dùng `background: currentColor` còn `.menu-toggle` có
	   `color: #fff`, và logo cũng là chữ "ACB" màu TRẮNG -> nếu header nền trắng
	   thì cả nút hamburger lẫn tên thương hiệu đều VÔ HÌNH (đã đo computed style
	   và chụp ảnh: nút hamburger thành ô trắng trống, logo mất chữ "ACB").
	   Giữ nền --color-primary (xanh) cho header ở MỌI kích thước. */

	.site-branding,
	.header-actions {
		background: transparent;
		padding: 0;
	}

	.main-navigation.is-open {
		transform: translateX(0);
	}

	.main-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.main-menu > li > a {
		padding: 14px 4px;
		font-size: 16px;
		border-bottom: 1px solid var(--color-light);
		text-align: left;
		color: var(--color-dark);
	}

	.main-menu > li > a::before {
		display: none;
	}

	.main-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		min-width: 0;
		padding: 0 0 0 16px;
		display: none;
	}

	.main-menu li.is-open > .sub-menu {
		display: block;
	}

	.main-menu .sub-menu .sub-menu {
		left: 0;
	}

	.header-cta-mobile {
		display: inline-flex;
		margin-top: 20px;
		width: 100%;
	}

	/* Overlay khi mở menu mobile */
	body.menu-open::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(0, 43, 69, 0.55);
		z-index: 1050;
	}
}

/* ---------- 1251px – 1365px: menu ngang cỡ THU GỌN ----------
   Menu ngang cỡ đầy đủ (padding 12x14, font 14.5px) cần 1328px nên chỉ vừa từ
   ~1366px. Trong khoảng này dùng cỡ thu gọn (giống mốc ≤1200px) để 3 cột header
   vẫn nằm gọn 1 hàng mà không phải hạ xuống menu mobile. */
@media (min-width: 1251px) and (max-width: 1365px) {
	.main-menu > li > a {
		padding: 12px 10px;
		font-size: 14px;
	}
}

/* ---------- 768px (tablet dọc) ---------- */
@media (max-width: 768px) {
	:root {
		--topbar-height: 36px;
	}

	.section {
		padding: 72px 0;
	}

	.hero-slide {
		min-height: 420px;
	}

	.hero-content {
		padding: 60px 120px;
	}

	.hero-arrow {
		width: 44px;
		height: 44px;
		font-size: 14px;
	}

	.hero-arrow--prev {
		left: 48px;
	}

	.hero-arrow--next {
		right: 48px;
	}

	.page-hero {
		padding: 48px 0 40px;
	}

	.content-grid {
		padding: 40px 0 64px;
	}

	.about-mini-stats {
		grid-template-columns: repeat(3, 1fr);
	}

	.cta-section {
		padding: 56px 0;
	}

	.footer-main {
		padding: 56px 24px 40px;
	}
}

/* ---------- 640px (mobile lớn) ---------- */
@media (max-width: 640px) {
	.news-layout {
		grid-template-columns: 1fr;
		padding: 12px;
		gap: 24px;
	}

	.news-featured,
	.news-right,
	.news-small {
		grid-column: auto;
		grid-row: auto;
		height: auto;
	}

	.topbar {
		display: none;
	}

	.quick-services-grid,
	.fields-grid,
	.services-grid,
	.projects-grid,
	.posts-grid,
	.cat-grid,
	.gallery-grid {
		grid-template-columns: 1fr;
	}

	.services-grid {
		padding: 12px;
		gap: 16px;
		box-shadow: 0 0 0 3px rgba(0, 109, 169, 0.07), 0 8px 20px rgba(0, 48, 82, 0.05);
	}

	.statistics-grid {
		grid-template-columns: 1fr 1fr;
	}

	.about-grid {
		gap: 48px;
	}

	.about-media-small {
		width: 48%;
	}

	.footer-main {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.footer-col--map {
		grid-column: span 1;
	}

	.footer-bottom-inner {
		flex-direction: column;
		text-align: center;
	}

	.news-small {
		gap: 14px;
	}

	.news-small-thumb {
		width: 104px;
		height: 76px;
	}
}

/* ---------- 480px (mobile) ---------- */
@media (max-width: 480px) {
	.container {
		padding-inline: 16px;
	}

	.section {
		padding: 60px 0;
	}

	.section-head {
		margin-bottom: 36px;
	}

	.hero-slide {
		min-height: 380px;
	}

	.hero-content {
		padding: 48px 16px;
	}

	.hero-eyebrow {
		font-size: 12px;
		padding: 6px 12px;
	}

	.hero-actions .btn {
		width: 100%;
	}

	.hero-arrow {
		display: none;
	}

	.statistics-grid {
		grid-template-columns: 1fr;
	}

	.about-mini-stats {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.about-media-badge {
		top: 12px;
		right: 12px;
		padding: 8px 14px;
		font-size: 12px;
	}

	.news-featured-body {
		padding: 20px;
	}

	.news-small {
		flex-direction: column;
	}

	.news-small-thumb {
		width: 100%;
		height: 160px;
	}

	.filter-tab {
		padding: 8px 16px;
		font-size: 13px;
	}

	.post-nav {
		flex-direction: column;
	}

	.post-nav-link {
		max-width: 100%;
	}

	.error-404 {
		padding: 80px 16px;
	}

	.quick-services {
		margin-top: 0;
	}

	.quick-services .section {
		padding-top: 60px;
	}
}

/* ---------- 390px & 375px (mobile nhỏ) ---------- */
@media (max-width: 390px) {
	.site-title {
		font-size: 18px;
	}

	.site-title-mark {
		width: 34px;
		height: 34px;
		font-size: 15px;
	}

	.header-action {
		width: 40px;
		height: 40px;
	}

	.hero-title {
		font-size: 28px;
	}

	.section-title {
		font-size: 24px;
	}

	.field-card {
		min-height: 320px;
	}

	.statistics-section {
		padding: 52px 0;
	}

	.stat-item {
		padding: 24px 12px;
	}
}

/* ---------- Các trang mới (about / contact / service / project) ---------- */
@media (max-width: 1200px) {
	.team-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 18px;
	}

	.values-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.contact-cards {
		grid-template-columns: repeat(4, 1fr);
		gap: 18px;
	}

	.service-single-grid,
	.project-single-grid {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 32px;
	}
}

@media (max-width: 1024px) {
	.contact-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.contact-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.contact-map-wrap {
		position: static;
	}

	.service-single-grid,
	.project-single-grid {
		grid-template-columns: 1fr;
	}

	.service-info-card,
	.project-info-card {
		position: static;
	}

	.team-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.timeline::before {
		left: 12px;
		transform: none;
	}

	.timeline-item,
	.timeline-item--right {
		width: 100%;
		margin-left: 0;
		padding: 0 0 32px 44px;
	}

	.timeline-dot,
	.timeline-item--right .timeline-dot {
		right: auto;
		left: 4px;
	}
}

@media (max-width: 768px) {
	.values-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.vm-grid {
		grid-template-columns: 1fr;
	}

	.about-page-main .vm-image {
		height: 200px;
	}

	.service-features-list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.team-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.values-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.contact-cards {
		grid-template-columns: 1fr;
	}

	.form-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

@media (max-width: 390px) {
	.team-grid {
		grid-template-columns: 1fr;
	}

	.values-grid {
		grid-template-columns: 1fr;
	}

	.timeline-card {
		padding: 18px;
	}
}

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Thư viện ảnh: giữ 2 cột trong khoảng 521px – 640px ----------
   Trước đây ≤640px rơi xuống 1 cột nên mỗi album rộng tới 537px, đẩy trang
   dài ~6100px (so với ~3600px khi 2 cột). Giữ 2 cột cho tablet dọc và
   điện thoại nằm ngang, chỉ về 1 cột khi thật hẹp (≤520px).
   Đặt ở CUỐI file để thắng rule 1 cột trong @media (max-width: 640px) phía trên. */
@media (max-width: 640px) and (min-width: 521px) {
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
}