/* ============================================================
   FASTBOY MARKETING — RESPONSIVE
   Breakpoints: 1200 · 1024 (tablet → menu hamburger) · 768 · 560
   ============================================================ */

/* ---------- <= 1200px: gọn menu desktop ---------- */
@media (max-width:1200px){
	.primary-nav a{padding:12px 10px;font-size:.9rem}
	.header-call span{display:none}
}

/* ---------- <= 1024px: chuyển sang menu hamburger (tablet + mobile) ---------- */
@media (max-width:1024px){
	:root{--header-h:76px}

	/* Grids co lại */
	.hero .container{grid-template-columns:1fr;gap:var(--space-4)}
	.hero-media{order:-1;max-width:520px}
	.services-grid,.testi-grid,.posts-grid,.pricing-grid{grid-template-columns:repeat(2,1fr)}
	.steps{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
	.stats{grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
	.split,.split--reverse .split-media{grid-template-columns:1fr;order:initial}
	.split{gap:var(--space-4)}
	.split-media{max-width:640px}
	.content-wrap{grid-template-columns:1fr}
	.content-wrap.no-sidebar{grid-template-columns:1fr}
	.footer-cols{grid-template-columns:1fr 1fr}

	/* ===== MENU MOBILE (slide-in panel) ===== */
	.nav-toggle{display:flex}
	.header-actions .btn:not(.nav-toggle){display:none}

	.primary-nav{position:fixed;top:0;right:0;bottom:0;width:min(88vw,380px);background:#fff;box-shadow:var(--shadow-lg);
		margin:0;padding:0;transform:translateX(100%);transition:transform var(--transition);overflow-y:auto;
		z-index:1000;display:flex;flex-direction:column}
	.primary-nav.is-open{transform:translateX(0)}

	.nav-mobile-head{display:flex;align-items:center;justify-content:space-between;padding:18px var(--space-3);
		border-bottom:1px solid var(--color-border);font-family:var(--font-heading);font-weight:700;font-size:1.1rem}
	.nav-close{border:0;background:var(--color-bg-alt);width:40px;height:40px;border-radius:50%;font-size:1.5rem;
		line-height:1;cursor:pointer;color:var(--color-text)}
	.nav-close:hover{background:var(--color-primary-light);color:var(--color-primary)}

	.primary-nav .menu{flex-direction:column;align-items:stretch;gap:0;margin:0;padding:var(--space-2)}
	.primary-nav .menu>li{border-bottom:1px solid var(--color-border)}
	.primary-nav .menu-link{padding:15px 12px;border-radius:var(--radius-sm);font-size:1rem}

	/* Nút toggle submenu (accordion) */
	.primary-nav li{position:relative;display:flex;flex-wrap:wrap;align-items:center}
	.primary-nav .menu-link{flex:1}
	.submenu-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none}
	.submenu-toggle span{width:10px;height:10px;border-right:2px solid var(--color-muted);border-bottom:2px solid var(--color-muted);
		transform:rotate(45deg);transition:transform var(--transition)}
	.primary-nav li.submenu-open>.submenu-toggle span{transform:rotate(-135deg)}

	/* Submenu đóng mặc định, mở khi accordion */
	.primary-nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
		min-width:0;background:var(--color-bg-alt);border-radius:var(--radius-sm);padding:0;margin:0 0 8px;
		width:100%;max-height:0;overflow:hidden;transition:max-height var(--transition)}
	.primary-nav li.submenu-open>.sub-menu{max-height:600px}
	.primary-nav .sub-menu .menu-link{padding-left:24px;font-size:.92rem;font-weight:500}
	.primary-nav .menu-item-has-children>.menu-link::after{display:none}

	/* CTA đáy panel */
	.nav-mobile-cta{display:flex;flex-direction:column;gap:10px;padding:var(--space-3);margin-top:auto;
		border-top:1px solid var(--color-border)}

	.menu-overlay{position:fixed;inset:0;background:rgba(24,27,36,.55);opacity:0;visibility:hidden;
		transition:var(--transition);z-index:990}
	.menu-overlay.is-open{opacity:1;visibility:visible}
}

/* ---------- <= 768px ---------- */
@media (max-width:768px){
	.section{padding-block:var(--space-6)}
	.hero .container{padding-block:var(--space-6)}
	.header-topbar{display:none}
	.services-grid,.testi-grid,.posts-grid,.pricing-grid{grid-template-columns:1fr}
	.hero-stats{gap:var(--space-3)}
	.cta-band{padding:var(--space-4)}
	.entry-footer{flex-direction:column;align-items:flex-start}
}

/* ---------- <= 560px ---------- */
@media (max-width:560px){
	.stats,.footer-cols{grid-template-columns:1fr}
	.container{padding-inline:var(--space-2)}
	.hero h1{font-size:2rem}
	.hero-actions{flex-direction:column}
	.hero-actions .btn{width:100%;justify-content:center}
	.price-card.is-featured{transform:none}
	.footer-bottom .container{flex-direction:column;text-align:center}
	.to-top{right:14px;bottom:14px}
}