/* ============================================================
   NEXIM — giao diện điện thoại (dùng chung mọi trang)
   Kích hoạt khi màn hình hẹp hơn 920px
   ============================================================ */
@media (max-width: 920px){

  /* ===== Header ===== */
  .topbar-inner{flex-wrap:wrap; gap:8px 10px; padding:8px 10px;}
  .logo{font-size:16px; padding:6px 10px;}
  .logo span{font-size:9px; letter-spacing:1.2px;}
  .top-links{order:2; margin-left:auto; font-size:12px; gap:0;}
  .top-links a{padding:6px 6px;}
  .top-links a.cart{padding:6px 10px; margin-left:2px;}
  .search-wrap{order:3; flex-basis:100%; max-width:none;}
  .breadcrumb{padding:8px 10px;}

  /* ===== Bố cục 2 cột → 1 cột ===== */
  .layout{flex-direction:column; padding:0 10px 40px; gap:0;}
  .container{padding:0 10px 40px;}
  .sidebar{position:static; width:100%; max-height:none; overflow:visible;
           padding-bottom:6px; border-bottom:2px solid #367c2b; margin-bottom:14px;}
  .filter-group{padding:9px 0;}
  .filter-group.other-cat{display:none;}   /* gọn màn hình nhỏ */
  .page-title{font-size:21px;}
  .result-count{font-size:12px;}
  .intro{padding:10px 12px; font-size:12.5px;}
  .warn{padding:10px 12px; font-size:11.5px;}

  /* ===== Khu sản phẩm ===== */
  .section-head{position:static;}
  .section-head h2{font-size:16px;}
  .section-body{flex-direction:column;}
  .drawing-box{position:static; width:100%; max-width:340px;}
  .tables-col{min-width:0; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  table.prices{min-width:600px;}
  table.prices th, table.prices td{padding:5px 7px; font-size:12px;}
  .dia-title{font-size:14px;}

  /* ===== Lưới danh mục ===== */
  .tile-grid{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px;}
  .tile svg{height:70px;}
  .cat-grid{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px;}
  .cat-tile{padding:12px 8px 10px;}
  .cat-tile svg{width:46px; height:46px;}
  .cat-tile .name{font-size:12px;}

  /* ===== Trang chủ ===== */
  .hero-inner{padding:20px 12px;}
  .hero h1{font-size:20px;}
  .hero p{font-size:13px;}
  .hero .stats{gap:14px 22px;}
  .hero .stat b{font-size:16px;}
  .perks{grid-template-columns:1fr; margin-top:26px;}

  /* ===== Trang chi tiết sản phẩm ===== */
  .prod-layout{display:block;}
  .prod-left, .prod-right{width:100% !important; max-width:none !important;}
  .main-media{max-width:100%;}
  .main-media svg{width:100%; height:auto;}
  .buy-row{flex-wrap:wrap; gap:8px;}
  .btn-add{width:100%; padding:12px 0; font-size:14px;}
  .price-box .big{font-size:20px;}
  .len-pills{gap:6px;}
  .hotline{font-size:13px;}

  /* ===== Giỏ hàng / đặt hàng ===== */
  #cartContent{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  table.cart{min-width:640px;}
  .summary-wrap{display:block;}
  .summary{width:100% !important; margin-top:14px;}
  .actions{flex-wrap:wrap; gap:8px;}
  .checkout{display:block;}
  .form-col{width:100% !important;}
  .frow{flex-direction:column; gap:0;}
  .order-box{width:100% !important; margin-top:16px;}

  /* ===== Bài viết kỹ thuật ===== */
  .art-layout{display:block;}
  .art-main{width:100% !important;}
  .art-side{width:100% !important; margin-top:18px; position:static;}

  /* ===== Bảng trong trang giới thiệu / chính sách ===== */
  .about{overflow-x:auto;}
  .about table{min-width:520px;}

  /* ===== Thành phần chung ===== */
  .cart-panel{width:calc(100vw - 24px); right:12px;}
  .toast{left:12px; right:12px; bottom:12px; text-align:center;}
  .footer-inner{padding:14px 10px; font-size:10.5px;}
  .footer-inner a{margin-right:10px;}

  /* Chống iOS tự phóng to khi chạm vào ô nhập */
  input[type="text"], input[type="number"], input[type="tel"],
  input[type="email"], input[type="password"], select, textarea{font-size:16px;}
}

/* Màn hình rất nhỏ */
@media (max-width: 420px){
  .tile-grid, .cat-grid{grid-template-columns:repeat(2, 1fr);}
  .top-links{font-size:11px;}
  .page-title{font-size:19px;}
}