/* =========================================================
   BẾP SINH — responsive.css
   Breakpoints: 1366 / 1024 / 768 / 480 / 390
   ========================================================= */

/* ---- 1366 and below : tighten large-desktop spacing ---- */
@media (max-width:1366px){
  .container{padding:0 20px;}
  .mega-menu{width:860px;}
  .hero-slide-content .box{padding:28px 30px;}
}

/* ---- 1024 (tablet landscape) ---- */
@media (max-width:1024px){
  section{padding:48px 0;}
  .category-grid{grid-template-columns:repeat(2,1fr);}
  .brand-intro{grid-template-columns:1fr;}
  .brand-intro .media{min-height:280px;}
  .brand-intro .text{padding:40px 32px;}
  .featured-layout{grid-template-columns:1fr;}
  .feat-side{grid-template-columns:1fr 1fr; grid-template-rows:none;}
  .product-row{grid-template-columns:repeat(2,1fr);}
  .tech-grid{grid-template-columns:repeat(2,1fr);}
  .news-grid{grid-template-columns:1fr 1fr;}
  .news-grid .news-card.featured{grid-column:1/-1;}
  .lifestyle-band{grid-template-columns:1fr;}
  .lifestyle-main{min-height:340px;}
  .lifestyle-side{grid-template-columns:1fr 1fr; grid-template-rows:none;}
  .solution-row{grid-template-columns:1fr; gap:24px;}
  .solution-row.reverse{direction:ltr;}
  .products-layout{grid-template-columns:1fr;}
  .filter-panel{position:static; margin-bottom:24px;}
  .products-grid{grid-template-columns:repeat(2,1fr);}
  .article-grid{grid-template-columns:repeat(2,1fr);}
  .pd-layout{grid-template-columns:1fr; gap:32px;}
  .pd-tech-section{grid-template-columns:1fr;}
  .feature-icon-grid{grid-template-columns:repeat(2,1fr);}
  .support-band{grid-template-columns:1fr;}
  .contact-band{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;}
  .choice-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---- 768 (tablet portrait) ---- */
@media (max-width:768px){
  :root{--header-h:60px;}
  .topbar{display:none;}
  .hero-slider{height:60vh; min-height:380px;}
  .hero-slide-content .box{padding:24px; border-radius:16px;}
  .hero-nav{width:38px; height:38px;}
  .hero-nav.prev{left:12px;} .hero-nav.next{right:12px;}
  .category-grid{grid-template-columns:1fr 1fr;}
  .category-panel{aspect-ratio:1/1;}
  .consult-strip{grid-template-columns:1fr; padding:32px 24px; text-align:center;}
  .consult-strip .media{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px;}
  .footer-newsletter .row{flex-direction:column; align-items:flex-start;}
  .footer-newsletter form{min-width:0; width:100%;}
  .news-grid{grid-template-columns:1fr;}
  .news-grid .news-card.featured{grid-column:auto;}
  .article-grid{grid-template-columns:1fr;}
  .products-grid{grid-template-columns:1fr 1fr;}
  .dealer-list{grid-template-columns:1fr;}
  .feature-icon-grid{grid-template-columns:1fr 1fr;}
  .tech-grid{grid-template-columns:1fr 1fr;}
}

/* ---- 480 (large mobile) ---- */
@media (max-width:480px){
  .hero-slide-content h1{font-size:26px;}
  .hero-slide-content .box{padding:20px;}
  .hero-dots{bottom:14px;}
  .section-head{flex-direction:column; align-items:flex-start;}
  .category-grid{grid-template-columns:1fr;}
  .product-row{grid-template-columns:1fr 1fr;}
  .products-grid{grid-template-columns:1fr;}
  .feat-side{grid-template-columns:1fr;}
  .feat-item{flex-direction:row;}
  .lifestyle-side{grid-template-columns:1fr;}
  .tech-grid{grid-template-columns:1fr;}
  .feature-icon-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
  .choice-grid{grid-template-columns:1fr 1fr;}
  .field-row{grid-template-columns:1fr;}
  .lookup-form{flex-direction:column;}
  .dealer-search{flex-direction:column;}
  .pd-cta-row{flex-direction:column;}
  .chat-panel{right:12px; left:12px; width:auto;}
  .chat-launcher{right:16px; bottom:16px;}
  .back-to-top{right:16px; bottom:82px;}
  .contact-band .info, .contact-band .form{padding:28px 24px;}
  .consult-strip{border-radius:16px;}
}

/* ---- 390 / 375 (small mobile) ---- */
@media (max-width:400px){
  .container{padding:0 16px;}
  .brand-logo .mark{font-size:18px;}
  .hero-slide-content h1{font-size:22px;}
  section{padding:40px 0;}
  .section-title{font-size:22px;}
  .mega-menu, .dropdown{display:none !important;} /* mobile uses .mobile-nav instead */
}