/* ===== Thanh GHIM tên dòng sản phẩm khi cuộn (desktop + mobile) ===== */
.vf-secpin{
  position:fixed; left:0; right:0; top:0; z-index:45;
  transition:top .22s ease;
  background:#fff; color:#1a1a1a;
  font-size:14px; font-weight:bold; line-height:1.35;
  padding:7px 16px; border-bottom:2px solid #367c2b;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  overflow:hidden;
  display:none;
}
.vf-secpin.show{display:flex; align-items:center; gap:14px;}
.vf-secpin .t{flex:1; min-width:0; cursor:pointer; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.vf-secpin .bk{display:inline-block; flex:0 0 auto; background:#367c2b; color:#fff; border:none;
  border-radius:4px; padding:7px 14px; font-size:12.5px; font-weight:bold; cursor:pointer; white-space:nowrap;}
.vf-secpin .bk:hover{background:#2b6222;}
@media (max-width:920px){ .vf-secpin .bk{display:none !important;} }
body.vf-fopen .vf-secpin{display:none;}
@media (min-width:921px){ .vf-secpin{ display:none !important; } }

/* ============================================================
   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{position:sticky; top:0; z-index:50; box-shadow:0 1px 4px rgba(0,0,0,.08);
          transition:transform .22s ease;}
  /* vuốt xuống xem hàng -> header tự ẩn, vuốt lên -> hiện lại */
  body.vf-hidehead .topbar{transform:translateY(-102%);}
  body.vf-hidehead .vf-secpin{top:0;}
  .topbar-inner{flex-wrap:wrap; gap:6px 8px; padding:7px 10px;}
  .logo{font-size:15px; padding:5px 9px;}
  .logo span{font-size:8px; letter-spacing:1px;}
  .top-links{order:2; margin-left:auto; font-size:12px; gap:0;}
  /* ẩn link phụ, chỉ giữ giỏ hàng cho gọn */
  .top-links a:not(.cart){display:none;}
  .top-links a.cart{padding:8px 12px; margin-left:0; min-height:38px; display:inline-flex; align-items:center;}
  .search-wrap{order:3; flex-basis:100%; max-width:none;}
  .search-wrap input{padding:9px 10px;}
  .search-wrap button{padding:9px 14px;}
  .breadcrumb{padding:7px 10px; font-size:11.5px;}

  /* ===== Bố cục 2 cột → 1 cột ===== */
  .layout{flex-direction:column; padding:0 10px 40px; gap:0;}
  .container{padding:0 10px 40px;}
  /* ===== BỘ LỌC: bảng trượt từ đáy ===== */
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; right:auto; z-index:120;
    width:86%; max-width:340px; max-height:none; overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:#fff; border-top:none; border-radius:0;
    box-shadow:4px 0 24px rgba(0,0,0,.22);
    padding:0 14px 96px; margin:0;
    transform:translateX(-102%); transition:transform .25s ease; visibility:hidden;
  }
  body.vf-fopen .sidebar{transform:translateX(0); visibility:visible;}
  /* tiêu đề "Bộ lọc" do nexim-footer.js chèn sẵn — chừa chỗ cho nút ✕ */
  .sidebar{padding-top:8px;}
  .vf-fbackdrop{
    position:fixed; inset:0; z-index:110; background:rgba(0,0,0,.45);
    opacity:0; visibility:hidden; transition:opacity .25s ease;
  }
  body.vf-fopen .vf-fbackdrop{opacity:1; visibility:visible;}
  body.vf-fopen{overflow:hidden;}
  /* nút đóng (X) */
  .vf-fclose{
    position:absolute; top:10px; right:10px; z-index:3;
    width:36px; height:36px; border:1px solid #ccc; border-radius:50%;
    background:#fff; font-size:17px; line-height:1; color:#555; cursor:pointer;
  }
  /* nút "Xem N sản phẩm" dính đáy bảng lọc */
  .vf-fapply{
    position:fixed; left:0; width:86%; max-width:340px; bottom:0; z-index:130;
    display:none; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:#fff; border-top:1px solid #e0ded6;
  }
  body.vf-fopen .vf-fapply{display:block;}
  .vf-fapply button{
    width:100%; min-height:48px; background:#367c2b; color:#fff; border:none;
    border-radius:8px; font-size:15.5px; font-weight:bold; cursor:pointer;
  }
  /* nút mở bộ lọc (nổi góc trái dưới) */
  .vf-ffab{
    position:fixed; left:12px; bottom:12px; z-index:100;
    display:inline-flex; align-items:center; gap:7px;
    min-height:46px; padding:0 18px; border:none; border-radius:24px;
    background:#1a1a1a; color:#fff; font-size:14px; font-weight:bold;
    box-shadow:0 3px 12px rgba(0,0,0,.3); cursor:pointer;
  }
  .vf-ffab .n{background:#367c2b; border-radius:11px; padding:1px 8px; font-size:12px;}
  body.vf-fopen .vf-ffab{display:none;}
  body.vf-cart .vf-ffab{bottom:70px;}

  /* ===== THANH TAB DƯỚI ĐÁY (như nguồn nhập) ===== */
  .vf-tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:105;
    display:flex; background:#fff; border-top:1px solid #e4e4dc;
    box-shadow:0 -2px 10px rgba(0,0,0,.10);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .vf-tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; min-height:58px; padding:7px 2px 6px;
    color:#4a4a44; text-decoration:none; font-size:10.5px; line-height:1.2; position:relative;
  }
  .vf-tabbar a.cur{color:#367c2b; font-weight:bold;}
  .vf-tabbar a svg{width:21px; height:21px; fill:currentColor;}
  .vf-tabbar .bdg{
    position:absolute; top:4px; left:50%; margin-left:4px;
    background:#d0021b; color:#fff; border-radius:9px;
    font-size:9.5px; font-weight:bold; padding:1px 5px; min-width:16px; text-align:center;
  }
  body{padding-bottom:62px;}
  body.vf-fopen .vf-tabbar{display:none;}
  .vf-ffab{bottom:70px;}
  body.vf-cart .vf-ffab{bottom:70px;}
  /* bảng giỏ nổi cũ: ẩn trên điện thoại */
  .cart-panel{display:none !important;}
  .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;}

  /* mobile: thanh ghim nằm dưới header, trượt theo khi header ẩn/hiện */
  .vf-secpin{ top:var(--vf-tbh, 150px); }

  /* ===== Đang xem 1 dòng: nút "Về đầu trang — xem tất cả" nằm sát menu dưới ===== */
  body.vf-line #vfLineBack{
    position:fixed; left:0; right:0; width:100%;
    bottom:calc(58px + env(safe-area-inset-bottom)); z-index:104;
    /* Trên điện thoại nút chạy hết bề ngang nên bỏ bo tròn, giữ dạng thanh */
    border-radius:0; min-height:48px; font-size:14.5px; padding:13px 0;
    justify-content:center; gap:8px;
    box-shadow:0 -2px 10px rgba(0,0,0,.14);
  }
  body.vf-line #vfLineBack:hover{ transform:none; }
  body.vf-line #vfLineBack:active{ transform:none; background:#2b6222; }
  body.vf-line{padding-bottom:116px;}
  body.vf-line .vf-ffab{bottom:calc(118px + env(safe-area-inset-bottom));}
  body.vf-line .vf-totop{display:none !important;}
  .section-body{flex-direction:column;}
  .drawing-box{position:static; width:100%; max-width:340px;}
  .tables-col{min-width:0; width:100%;}
  .dia-title{font-size:15px;}

  /* ===== BẢNG GIÁ → THẺ SẢN PHẨM (phong cách nguồn nhập) ===== */
  table.prices{min-width:0; width:100%; border-collapse:separate; border-spacing:0;}
  table.prices thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  table.prices tbody tr{
    display:flex; flex-direction:column; background:#fff; border:1px solid #e6e6e0; border-radius:10px;
    padding:12px 13px 13px; margin-bottom:12px; box-shadow:0 1px 3px rgba(0,0,0,.06);
  }
  table.prices tbody tr:last-child{margin-bottom:0;}
  table.prices tbody td{
    display:flex; align-items:baseline; justify-content:space-between; gap:10px;
    border:none; padding:3px 0; font-size:13px; line-height:1.5; text-align:right; color:#444;
  }
  table.prices tbody td::before{
    content:attr(data-th); flex:0 0 auto; text-align:left;
    font-size:12px; color:#8a8a80; font-weight:normal;
  }
  table.prices tbody td:empty{display:none;}

  /* 1) Mã sản phẩm lên đầu thẻ — như "#B03S..." của nguồn nhập */
  table.prices tbody td.partnum{
    display:block; order:-2; text-align:left; padding:0 0 3px;
    font-size:12.5px; color:#8a8a80;
  }
  table.prices tbody td.partnum::before{display:none;}
  table.prices tbody td.partnum a{color:#8a8a80; font-weight:normal; text-decoration:none;}
  table.prices tbody td.partnum a::before{content:'#';}

  /* 2) Cỡ/chiều dài = tên sản phẩm, đậm đen */
  table.prices tbody td:first-child{
    display:block; order:-1; text-align:left;
    font-size:15px; font-weight:bold; color:#1a1a1a; line-height:1.4;
    padding:0 0 8px; margin-bottom:8px; border-bottom:1px solid #f0efe9;
  }
  table.prices tbody td:first-child::before{display:none;}

  /* 3) Giá đỏ lớn + "/ cái" — như nguồn nhập */
  table.prices tbody td.price{font-size:13.5px; color:#444;}
  table.prices tbody td.price:last-of-type{
    display:block; text-align:left; padding:8px 0 2px; margin-top:4px; border-top:1px solid #f0efe9;
  }
  table.prices tbody td.price:last-of-type::before{
    display:block; margin-bottom:1px; font-size:11.5px; color:#8a8a80;
  }
  table.prices tbody td.price:last-of-type b{
    font-size:21px; font-weight:bold; color:#d0021b; letter-spacing:-.3px;
  }
  table.prices tbody td.price:last-of-type::after{
    content:' có VAT'; font-size:11px; color:#666;
    background:#f2f2ee; border-radius:3px; padding:2px 6px; margin-left:7px; vertical-align:2px;
  }

  /* 4) Bộ đếm số lượng + nút Mua ngay */
  table.prices tbody td:last-child{
    display:flex; align-items:center; gap:10px;
    padding:11px 0 0; margin-top:9px; border-top:1px solid #f0efe9;
  }
  table.prices tbody td:last-child::before{display:none;}
  .vf-qty{
    flex:0 0 auto; display:inline-flex; align-items:center;
    border:1px solid #d8d8d0; border-radius:6px; overflow:hidden; background:#fff;
  }
  .vf-qty button{
    width:38px; height:44px; border:none; background:#fafaf7; color:#333;
    font-size:19px; line-height:1; cursor:pointer; padding:0;
  }
  .vf-qty button:active{background:#eee;}
  .vf-qty .v{min-width:34px; text-align:center; font-size:15px; font-weight:bold; color:#1a1a1a;}
  table.prices .add-btn{
    flex:1; min-height:44px; padding:11px 0;
    font-size:14.5px; font-weight:bold; border-radius:6px;
    background:#367c2b; color:#fff; border:none;
  }
  table.prices .add-btn:active{background:#2b6222;}

  /* Kho: chữ xanh/đỏ nhỏ gọn */
  table.prices tbody td span{font-size:11px;}

  /* ===== 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;}
  .detail-cols{flex-direction:column;}
  .detail-side{width:100% !important; position:static; order:1;}
  .detail-main{order:2;}
  .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;}


  /* ===== Cỡ chạm tối thiểu ===== */
  .chip{padding:9px 14px; font-size:13px; min-height:38px; display:inline-flex; align-items:center;}
  .fbox .fopt, .gbox .fopt{min-height:56px; font-size:12px;}
  .filter-list label{padding:9px 0; font-size:14px;}
  .filter-list input{width:18px; height:18px;}
  .add-btn, .btn-add, button{min-height:42px;}
  .filter-group h4{font-size:12px;}
  /* Trên điện thoại, cả bảng lọc đã là ngăn kéo tự cuộn — bỏ cuộn lồng trong
     từng nhóm để không kẹt hai lớp cuộn khi vuốt. */
  .vf-scroll{max-height:none; overflow:visible; padding-right:0;}



  /* ===== GIAO DIỆN GỌN — bỏ phần rườm rà trên điện thoại ===== */
  .breadcrumb{display:none;}
  .intro{display:none;}
  /* khối bản vẽ + bảng thông số chiếm quá nhiều màn hình -> thu nhỏ */
  .drawing-box .spec-mini{display:none;}
  .drawing-box{max-width:none; text-align:center;}
  .drawing-box svg, .drawing-box img{max-height:110px; width:auto; max-width:70%; margin:0 auto;}
  .section-head .sub{font-size:11.5px; line-height:1.45;}
  /* thẻ chọn nhanh theo dòng: cũng bỏ dựng hình ngoài màn ===== */
  .vf-qp{content-visibility:auto; contain-intrinsic-size:auto 900px;}

  /* ===== Tăng tốc: không dựng hình phần ngoài màn hình ===== */
  .prod-section{content-visibility:auto; contain-intrinsic-size:auto 4200px;}
  .dia-block{content-visibility:auto; contain-intrinsic-size:auto 1800px;}
  table.prices tbody tr{contain:layout paint;}
  /* đổ bóng nhẹ hơn — rẻ hơn khi cuộn */
  table.prices tbody tr{box-shadow:none; border:1px solid #ddddd6;}

  /* 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;}
}