/* ==========================================================================
   pages.css — Breakpoint responsive + các quy tắc riêng theo trang.
   Mobile-first, không vỡ layout ở 360 / 768 / 1024 / 1440.
   ========================================================================== */

/* --- MODAL: mobile chiếm gần full-screen -------------------------------- */
@media(max-width:640px){
  .modal{padding:0;place-items:stretch}
  .modal-card{width:100%;max-height:none;height:100%;border-radius:0;border:0}
  .modal-head{padding:var(--sp-3) var(--sp-4)}
  .modal-head h3{font-size:19px}
  .modal-body{padding:var(--sp-4)}
  .m-gallery{grid-template-columns:1fr;gap:var(--sp-3)}
  .m-thumbs{display:flex;flex-direction:row;order:2;overflow-x:auto;padding-bottom:4px}
  .m-thumb{width:66px;flex:none}
  .m-specs{grid-template-columns:1fr}
  .m-mat{font-size:19px}
  .m-foot{padding:var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom,0px))}
  .m-foot .btn{flex:1 1 100%}
  .m-foot .m-note{flex:1 1 100%;margin-right:0}
}

/* --- BANNER: mobile ------------------------------------------------------ */
@media(max-width:560px){
  .banner{border-radius:var(--r-lg);margin-top:var(--sp-4)}
  .banner-track{height:clamp(290px,62vh,420px)}
  /* mobile: nút mũi tên nằm cao hơn, không đè lên tiêu đề */
  .slide-body{padding:var(--sp-4) var(--sp-4) var(--sp-5)}
  .slide p{font-size:14.5px}
  .banner-arrow{width:38px;height:38px;font-size:17px;top:var(--sp-3);transform:none}
  .banner-arrow.prev{left:6px}.banner-arrow.next{right:6px}
  .banner-arrow:hover{transform:scale(.9)}
  .banner-arrow:active{transform:scale(.9)}
}

/* --- Nhỏ (≤480px) -------------------------------------------------------- */
@media(max-width:480px){
  :root{--gutter:14px}
  .row{grid-template-columns:1fr}
  .grid{gap:10px}
  .tile{padding:12px;border-radius:var(--r-md)}
  .tile h3{font-size:15.5px}
  .tile p{font-size:13px}
  .tile .pic{font-size:28px;margin-bottom:9px}
  .hero h1{letter-spacing:.03em}
  main{padding-bottom:var(--sp-7)}
}

/* --- Rất nhỏ (≤380px) ---------------------------------------------------- */
@media(max-width:380px){
  :root{--gutter:12px}
  .logo{font-size:16px;letter-spacing:.14em}
  .lang button{padding:6px 10px;font-size:12px}
  .slide-cta .btn{flex:1 1 100%}
}

/* --- Tablet (≥768px) ----------------------------------------------------- */
@media(min-width:768px){
  :root{--gutter:24px}
  main{max-width:820px}
  .grid{gap:var(--sp-4)}
}

/* --- Desktop (≥1024px) --------------------------------------------------- */
@media(min-width:1024px){
  main{max-width:880px}
  .hero h1{font-size:clamp(52px,6vw,72px)}
  .slide h2{font-size:52px}
}

/* --- Rộng (≥1440px) ------------------------------------------------------ */
@media(min-width:1440px){
  main{max-width:940px}
  .banner{border-radius:var(--r-xl)}
}