/* ============================================================================
   RWD-CHUNG — vá RESPONSIVE dùng chung cho cả 16 giao diện storefront.
   ----------------------------------------------------------------------------
   Nạp SAU theme.css ở mọi layout, nên chỉ cần viết phần sửa, không đụng từng
   theme.css. Đo 11/09/2026 trên 16 giao diện × 6 trang × 3 cỡ màn hình:
   102/288 lượt bị TRÀN NGANG (trang trôi ngang, nội dung bị cắt ở mép phải).

   Gốc rễ gom được thành 5 nhóm, lặp lại giữa các giao diện — sửa theo NHÓM
   thay vì vá lẻ từng theme. Thêm giao diện mới thì chạy lại phép đo.
   ========================================================================== */

/* 1. DÒNG GIỎ HÀNG — cả 16 giao diện dùng .cp-row: ảnh | tên+giá | .sp (số lượng,
      thành tiền, xoá). Điện thoại không đủ chỗ cho một hàng -> .sp xuống dòng dưới.
      Trước: thành tiền bị cắt mất (+26 → +61px). */
@media (max-width:600px){
  .cp-row{ flex-wrap:wrap; row-gap:10px; }
  .cp-row > :not(.th):not(.sp){ flex:1 1 0; min-width:0; }
  .cp-row .sp{ flex:1 1 100%; margin-left:0; justify-content:space-between; }
}

/* 2. MENU NGANG — 9 giao diện có .main-nav + nút .burger nhưng thu menu ở ngưỡng
      lệch nhau 760–900px; máy tính bảng dọc (768–1024) vẫn hiện menu dài -> tràn
      tới +648px. Thống nhất: từ 1024px trở xuống dùng nút ☰.
      :has() để chỉ áp cho giao diện THẬT SỰ có .main-nav — giao diện khác có
      .burger nhưng dùng menu kiểu riêng thì không bị ép hiện nút. */
@media (max-width:1024px){
  body:has(.main-nav) .main-nav{ display:none !important; }
  body:has(.main-nav) .burger{ display:grid !important; }
}

/* 3. HÀNG ICON ĐẦU TRANG trên điện thoại — tìm/tài khoản/yêu thích/giỏ/menu
      không vừa 390px (+25 → +135px, icon giỏ bị cắt mất ở mép).
      Thu khoảng cách và cỡ nút, KHÔNG ẩn chức năng — trừ nút quảng cáo phụ. */
@media (max-width:480px){
  .tools{ gap:0; }
  .tools .icb{ width:34px; height:34px; }
  .nav-actions{ gap:6px; }
  .nav-actions .btn-primary{ display:none; }   /* nút "Đặt ngay" của indulge: đã có ở thân trang */
  .nav-row{ gap:10px; }
  .nav-row .hicon{ width:30px; height:30px; }
}

/* 4. DẢI LIÊN KẾT CHÂN TRANG (bong/cacao/tach .row) — một hàng chữ in hoa giãn
      chữ rộng, điện thoại không chứa nổi -> cho xuống dòng. */
@media (max-width:600px){
  footer .row{ flex-wrap:wrap; justify-content:center; row-gap:8px; }
}

/* 5. HÌNH TRANG TRÍ lòi ra ngoài khung (nau/verano: .blob đặt absolute âm) —
      cắt ngay trong khung chứa. Dùng clip thay hidden: không tạo khung cuộn mới,
      không phá position:sticky. */
.hero{ overflow-x:clip; }

/* 6. LƯỚI SẢN PHẨM — ô 1fr mặc định min-width:auto nên KHÔNG co nhỏ hơn nội dung
      thẻ: indulge trang cửa hàng 2 cột thành 184px + 201px, lòi ra +41px.
      Cho mọi ô con của lưới co lại được. */
.grid > *, .pgrid > *, .prods > *{ min-width:0; }

/* 7. TÊN SHOP ở đầu trang điện thoại được phép co, chữ dài thì "…" — nova: tên
      chiếm 155px + 6 icon 170px, bóp nút ☰ còn 12px và vẫn lòi +21px. */
@media (max-width:480px){
  .hdr__in .brand{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    letter-spacing:.06em; font-size:clamp(17px, 5.2vw, 22px); }   /* thu chữ trước, bí quá mới "…" */
  .hdr__in .burger{ flex:none; }
  .tools .icb{ width:32px; height:32px; }
}

/* 8. ĐẦU TRANG MÁY TÍNH CHẬT (nau/verano): logo + menu 7 mục + icon + nút
      "Gọi đặt món" không vừa cả trên 1440px (+136px). Rút khoảng cách menu và cho
      menu co; vẫn thiếu thì menu xuống dòng thay vì đẩy nút ra ngoài màn hình. */
@media (min-width:1025px) and (max-width:1600px){
  .head-in, .navrow .wrap{ gap:16px; }                 /* nau: .head-in · verano: .navrow .wrap */
  .head-in .main-nav, .navrow .main-nav{ min-width:0; }
  .head-in .main-nav ul, .navrow .main-nav ul{ gap:14px; flex-wrap:wrap; row-gap:4px; }
}