/* ==========================================================================
   Trang Minh — assets/css/danhmuc.css
   TRANG DANH MỤC / LƯU TRỮ SẢN PHẨM, dựng theo bản mẫu xem-truoc-danh-muc.html.

   Chỉ nạp khi is_shop() || is_product_taxonomy().
   Mọi quy tắc bắt đầu bằng `body.tmdm--dm` (0,2,1 trở lên) nên thắng cả theme
   lẫn plugin trangminh-tiktok mà không cần `!important`.

   Dùng lại biến --tmdm-* khai trong chung.css. Không đặt lại lớp của theme.
   ========================================================================== */

/* ============================================== 1. ĐẦU TRANG DANH MỤC == */
/* Bản mẫu bỏ ảnh nền tối, thay bằng một dải nền xanh rất nhạt, chữ tối,
   gọn gàng để sản phẩm lên cao hơn trong màn hình đầu tiên. */
body.tmdm--dm .wstm-cathero{
  background:var(--tmdm-chinh-rat-nhat);color:var(--tmdm-tieu-de);
  border-bottom:1px solid var(--tmdm-vien);
}
body.tmdm--dm .wstm-cathero__bg{display:none}
body.tmdm--dm .wstm-cathero::after{display:none}
body.tmdm--dm .wstm-cathero__inner{padding:4px 0 26px;max-width:860px}
body.tmdm--dm .wstm-cathero h1{
  color:var(--tmdm-tieu-de);margin:0 0 8px;
  font-size:clamp(25px,3vw,36px);text-transform:none;letter-spacing:0;
}
body.tmdm--dm .wstm-cathero__flag{margin-bottom:6px;font-size:30px}
body.tmdm--dm .wstm-cathero__desc{
  color:var(--tmdm-chu);font-size:15px;max-width:680px;margin:0;
}
body.tmdm--dm .wstm-cathero__desc p{margin:0}
/* Ba ô "số sản phẩm / đồng kiểm / hotline" đã nằm ở thanh trên cùng rồi,
   bản mẫu không lặp lại ở đây. */
body.tmdm--dm .wstm-cathero__stats{display:none}

/* Đường dẫn (breadcrumb) nằm trên nền sáng nên phải trả chữ về màu tối. */
body.tmdm--dm .wstm-crumb--over .wstm-crumb__list{color:var(--tmdm-chu-nhat);padding:16px 0 10px}
body.tmdm--dm .wstm-crumb--over a{color:var(--tmdm-chu-nhat)}
body.tmdm--dm .wstm-crumb--over a:hover{color:var(--tmdm-chinh)}
body.tmdm--dm .wstm-crumb--over .wstm-crumb__cur{color:var(--tmdm-tieu-de);font-weight:600}
body.tmdm--dm .wstm-crumb--over .wstm-crumb__sep{color:var(--tmdm-chu-rat-nhat)}
body.tmdm--dm .wstm-crumb--over .wstm-ico{color:inherit}

/* ==================================================== 2. BỐ CỤC CHUNG == */
body.tmdm--dm .wstm-shop{grid-template-columns:278px minmax(0,1fr);gap:28px;align-items:start}
body.tmdm--dm .wstm-shop__side{position:sticky;top:16px}

/* ==================================================== 3. CỘT BỘ LỌC ==== */
body.tmdm--dm .wstm-catlist{
  background:#fff;border:1px solid var(--tmdm-vien);border-radius:var(--tmdm-bo);
  padding:16px 18px;margin-bottom:16px;
}
body.tmdm--dm .wstm-catlist__title{
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tmdm-chinh);margin:0 0 10px;
}
body.tmdm--dm .wstm-catlist li a{
  padding:8px 0;font-size:14.5px;color:var(--tmdm-chu);
  border-bottom:1px dashed var(--tmdm-vien);
}
body.tmdm--dm .wstm-catlist li a:hover,
body.tmdm--dm .wstm-catlist li.is-current>a{color:var(--tmdm-chinh);font-weight:600}
body.tmdm--dm .wstm-catlist li a span:last-child{font-size:13px;color:var(--tmdm-chu-rat-nhat)}

body.tmdm--dm .wstm-filters{
  background:#fff;border:1px solid var(--tmdm-vien);border-radius:var(--tmdm-bo);
  overflow:visible;padding:0 18px 12px;
}
body.tmdm--dm .wstm-filters__head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 0 12px;border-bottom:1px solid var(--tmdm-vien);background:#fff;
}
body.tmdm--dm .wstm-filters__head b{
  font-size:17px;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--tmdm-tieu-de);
}
/* Liên kết "Xoá hết" do JS đặt thêm vào đầu khối lọc (bản mẫu có). */
body.tmdm--dm .tmdm-xoa-het{
  font-size:13px;font-weight:600;color:var(--tmdm-do);margin-left:auto;
}
body.tmdm--dm .tmdm-xoa-het:hover{text-decoration:underline;color:var(--tmdm-do)}

body.tmdm--dm .wstm-fbox{padding:0;border-bottom:1px solid var(--tmdm-vien)}
body.tmdm--dm .wstm-fbox:last-child{border-bottom:0}
body.tmdm--dm .wstm-fbox__head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:15px 0;font-size:15.5px;font-weight:700;color:var(--tmdm-tieu-de);
  text-transform:none;letter-spacing:0;
}
body.tmdm--dm .wstm-fbox__head .wstm-ico{
  width:13px;height:13px;color:var(--tmdm-chu-nhat);flex:none;
  transition:transform .22s var(--tmdm-muot);
}
body.tmdm--dm .wstm-fbox.is-closed .wstm-fbox__head .wstm-ico{transform:rotate(-90deg)}
body.tmdm--dm .wstm-fbox__body{padding-bottom:14px}

body.tmdm--dm .wstm-fopt{
  display:flex;align-items:center;gap:10px;padding:7px 6px;
  border-radius:8px;cursor:pointer;transition:background .15s;
}
body.tmdm--dm .wstm-fopt:hover{background:var(--tmdm-chinh-rat-nhat);color:var(--tmdm-chu)}
body.tmdm--dm .wstm-fopt input{
  width:18px;height:18px;flex:none;margin:0;accent-color:var(--tmdm-chinh);
}
body.tmdm--dm .wstm-fopt>span:not(.count):not(.flag){
  flex:1;font-size:14.5px;color:var(--tmdm-chu);line-height:1.4;
}
body.tmdm--dm .wstm-fopt input:checked~span:not(.count){color:var(--tmdm-tieu-de);font-weight:600}
body.tmdm--dm .wstm-fopt .count{
  margin-left:auto;font-size:13px;color:var(--tmdm-chu-rat-nhat);flex:none;
}
/* Bản mẫu để số lượng trong ngoặc. Số này do WooCommerce đếm thật. */
body.tmdm--dm .wstm-fopt .count::before{content:"("}
body.tmdm--dm .wstm-fopt .count::after{content:")"}

body.tmdm--dm .wstm-flist{max-height:212px}
body.tmdm--dm .wstm-fmore{
  font-size:13px;font-weight:600;color:var(--tmdm-chinh);margin-top:6px;
}
body.tmdm--dm .wstm-fprice{gap:8px;margin-top:12px}
body.tmdm--dm .wstm-fprice input{
  border:1.5px solid var(--tmdm-vien);border-radius:var(--tmdm-bo-nho);
  padding:9px 11px;font-size:13.5px;
}
body.tmdm--dm .wstm-fprice input:focus{outline:none;border-color:var(--tmdm-chinh)}
body.tmdm--dm .wstm-fprice span{color:var(--tmdm-chu-rat-nhat)}

body.tmdm--dm .wstm-filters__foot{
  padding:14px 0 4px;border-top:1px solid var(--tmdm-vien);gap:8px;
}
body.tmdm--dm .wstm-filters .wstm-btn{text-transform:none;letter-spacing:0;font-size:14px}
body.tmdm--dm .wstm-filters .wstm-btn--primary{
  background:var(--tmdm-chinh);border-color:var(--tmdm-chinh);color:#fff;
  border-radius:var(--tmdm-bo-tron);box-shadow:0 4px 14px rgba(0,180,168,.28);
}
body.tmdm--dm .wstm-filters .wstm-btn--primary:hover{
  background:var(--tmdm-chinh-dam);border-color:var(--tmdm-chinh-dam);color:#fff;
}
body.tmdm--dm .wstm-filters .wstm-btn--ghost{
  border-radius:var(--tmdm-bo-tron);border-color:var(--tmdm-vien);color:var(--tmdm-chu);
}
body.tmdm--dm .wstm-filters .wstm-btn--ghost:hover{border-color:var(--tmdm-chinh);color:var(--tmdm-chinh)}

/* Huy hiệu tuổi trong bộ lọc. */
body.tmdm--dm .wstm-fopt .flag{flex:none;display:inline-flex;align-items:center}

/* ================================================= 4. THANH CÔNG CỤ ==== */
body.tmdm--dm .wstm-toolbar{
  background:none;border:0;border-radius:0;padding:0 0 18px;margin-bottom:0;
}
body.tmdm--dm .wstm-toolbar__count{font-size:15px;color:var(--tmdm-chu)}
body.tmdm--dm .wstm-toolbar__count b{color:var(--tmdm-tieu-de);font-weight:800}
body.tmdm--dm .wstm-toolbar select{
  border:1.5px solid var(--tmdm-vien);border-radius:var(--tmdm-bo-tron);
  padding:8px 32px 8px 15px;font-size:14.5px;font-weight:600;
  color:var(--tmdm-tieu-de);background-color:#fff;
}
body.tmdm--dm .wstm-toolbar select:focus{outline:none;border-color:var(--tmdm-chinh)}
body.tmdm--dm .wstm-view{border-color:var(--tmdm-vien);border-radius:var(--tmdm-bo-nho)}
body.tmdm--dm .wstm-view a{color:var(--tmdm-chu-nhat)}
body.tmdm--dm .wstm-view a.is-active{background:var(--tmdm-chinh);color:#fff}

/* Nhãn lọc đang bật. */
body.tmdm--dm .wstm-applied{gap:8px;margin-bottom:16px}
body.tmdm--dm .wstm-applied__tag{
  background:var(--tmdm-chinh-nhat);border:0;color:var(--tmdm-chinh);
  padding:6px 13px;border-radius:var(--tmdm-bo-tron);font-size:13.5px;font-weight:600;
}
body.tmdm--dm .wstm-applied__tag:hover{background:var(--tmdm-chinh);color:#fff}
body.tmdm--dm .wstm-applied__clear{color:var(--tmdm-do);font-weight:600}

/* Nút mở bộ lọc trên điện thoại. */
body.tmdm--dm .wstm-filterbar{background:transparent;padding:0 0 14px;position:static}
body.tmdm--dm .wstm-filterbar .wstm-btn{
  border-radius:var(--tmdm-bo-tron);background:var(--tmdm-chinh);
  border-color:var(--tmdm-chinh);color:#fff;font-weight:700;
  text-transform:none;letter-spacing:0;font-size:14.5px;padding:10px 20px;
}
body.tmdm--dm .wstm-filterbar .wstm-btn:hover{
  background:var(--tmdm-chinh-dam);border-color:var(--tmdm-chinh-dam);color:#fff;
}

/* ================================================= 5. THẺ SẢN PHẨM ===== */
body.tmdm--dm .wstm-products{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}

body.tmdm--dm .wstm-card{
  background:#fff;border:1px solid var(--tmdm-vien);border-radius:var(--tmdm-bo);
  transition:transform .25s var(--tmdm-muot),box-shadow .25s var(--tmdm-muot),border-color .25s;
}
body.tmdm--dm .wstm-card:hover{
  transform:translateY(-5px);box-shadow:var(--tmdm-bong-2);border-color:transparent;
}
body.tmdm--dm .wstm-card__media{background:var(--tmdm-nen-xam)}
body.tmdm--dm .wstm-card:hover .wstm-card__media img{transform:scale(1.07)}

/* Nhãn trạng thái: góc trên TRÁI. Chữ do WooCommerce/theme quyết định theo
   dữ liệu thật (tồn kho, ngày đăng, ô đánh dấu trong trang sửa sản phẩm). */
body.tmdm--dm .wstm-badge{
  border-radius:7px;padding:4px 9px;font-size:11.5px;font-weight:800;letter-spacing:.03em;
}
body.tmdm--dm .wstm-badge--new{background:var(--tmdm-chinh);color:#fff}
body.tmdm--dm .wstm-badge--best{background:#FF7EB6;color:#fff}
body.tmdm--dm .wstm-badge--hot{background:var(--tmdm-phu);color:#fff}
body.tmdm--dm .wstm-badge--top{background:var(--tmdm-vang);color:#6B4500}
body.tmdm--dm .wstm-badge--sale{background:#fff;color:var(--tmdm-do);border:1px solid var(--tmdm-do)}
body.tmdm--dm .wstm-badge--out{background:var(--tmdm-chu-nhat);color:#fff}

/* Nhãn % giảm: góc trên PHẢI, đúng thói quen mua hàng ở Việt Nam. */
body.tmdm--dm .wstm-card__off{
  background:var(--tmdm-do);color:#fff;border-radius:7px;
  padding:4px 9px;font-size:12.5px;font-weight:800;
  box-shadow:0 2px 8px rgba(240,52,79,.32);
}
/* Nút yêu thích xuống góc dưới phải ảnh để không chen với nhãn %. */
body.tmdm--dm .wstm-card__wish{
  top:auto;bottom:10px;right:10px;width:34px;height:34px;
  background:rgba(255,255,255,.95);color:var(--tmdm-chu-nhat);box-shadow:var(--tmdm-bong-1);
}
body.tmdm--dm .wstm-card__off+.wstm-card__wish{top:auto}
body.tmdm--dm .wstm-card__wish:hover,
body.tmdm--dm .wstm-card__wish.is-on{background:var(--tmdm-do);color:#fff}

body.tmdm--dm .wstm-card__body{padding:13px 14px 14px;gap:6px}

/* Dòng "độ tuổi" thành viên thuốc xanh ngọc như bản mẫu. */
body.tmdm--dm .wstm-card__origin{
  align-self:flex-start;min-height:0;order:2;
  display:inline-flex;align-items:center;gap:5px;
  background:var(--tmdm-chinh-nhat);color:var(--tmdm-chinh);
  padding:2px 9px;border-radius:var(--tmdm-bo-tron);
  font-size:12.5px;font-weight:600;
}
body.tmdm--dm .wstm-card__origin .sep{color:var(--tmdm-chinh);opacity:.5}

body.tmdm--dm .wstm-card__name{
  order:1;font-size:15px;font-weight:600;line-height:1.38;
  color:var(--tmdm-tieu-de);min-height:2.76em;
}
body.tmdm--dm .wstm-card__name a:hover{color:var(--tmdm-chinh)}

body.tmdm--dm .wstm-card__rate{order:3;color:var(--tmdm-chu-nhat)}
body.tmdm--dm .wstm-card__rate .wstm-stars{color:var(--tmdm-vang)}
/* KHÔNG bịa đánh giá: sản phẩm chưa có đánh giá thật thì bỏ hẳn hàng sao. */
body.tmdm--dm .wstm-card.tmdm-chua-danh-gia .wstm-card__rate{display:none}
body.tmdm--dm .wstm-card__rate:has(.wstm-stars--empty){display:none}

body.tmdm--dm .wstm-card__price{order:4;gap:9px;padding-top:6px;margin-top:auto}
body.tmdm--dm .wstm-card__price .wstm-price-now{
  font-size:19px;font-weight:800;color:var(--tmdm-do);
}
body.tmdm--dm .wstm-card__price .wstm-price-old{
  font-size:14px;font-weight:500;color:var(--tmdm-chu-rat-nhat);
}
body.tmdm--dm .wstm-card__price .wstm-price-ask{font-size:16px;color:var(--tmdm-chinh)}

/* Nút "Thêm vào giỏ" LUÔN HIỆN, rộng hết thẻ, không giấu sau rê chuột. */
body.tmdm--dm .wstm-card__cta{order:5;margin-top:10px;gap:8px}
body.tmdm--dm .wstm-card__cta .wstm-btn{
  border-radius:var(--tmdm-bo-tron);padding:11px 14px;font-size:14.5px;font-weight:700;
  letter-spacing:0;text-transform:none;
}
body.tmdm--dm .wstm-card .wstm-btn--primary{
  background:var(--tmdm-chinh);border-color:var(--tmdm-chinh);color:#fff;
  box-shadow:0 4px 14px rgba(0,180,168,.28);
}
body.tmdm--dm .wstm-card .wstm-btn--primary:hover{
  background:var(--tmdm-chinh-dam);border-color:var(--tmdm-chinh-dam);color:#fff;
}
body.tmdm--dm .wstm-card .wstm-btn--outline{
  border-color:var(--tmdm-vien);color:var(--tmdm-tieu-de);background:#fff;
}
body.tmdm--dm .wstm-card .wstm-btn--outline:hover{
  background:var(--tmdm-chinh);border-color:var(--tmdm-chinh);color:#fff;
}
body.tmdm--dm .wstm-card__icobtn{
  border:1.5px solid var(--tmdm-vien);border-radius:var(--tmdm-bo-tron);
  width:44px;color:var(--tmdm-chu);
}
body.tmdm--dm .wstm-card__icobtn:hover{
  background:var(--tmdm-chinh);border-color:var(--tmdm-chinh);color:#fff;
}

/* Khi JS đã đổi nút giỏ thành nút chữ "Thêm vào giỏ" thì cho nó chiếm cả hàng
   và ẩn nút "Xem chi tiết" — cả thẻ vốn đã bấm được để mở sản phẩm. */
body.tmdm--dm .wstm-card__cta.tmdm-cta--mua .wstm-btn{display:none}
body.tmdm--dm .wstm-card__cta.tmdm-cta--mua .tmdm-nut-them{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:auto;padding:11px 14px;
  border:0;border-radius:var(--tmdm-bo-tron);
  background:var(--tmdm-chinh);color:#fff;
  font-size:14.5px;font-weight:700;line-height:1.2;
  box-shadow:0 4px 14px rgba(0,180,168,.28);
  transition:background .2s var(--tmdm-muot),transform .2s var(--tmdm-muot);
}
body.tmdm--dm .wstm-card__cta.tmdm-cta--mua .tmdm-nut-them:hover{
  background:var(--tmdm-chinh-dam);color:#fff;transform:translateY(-2px);
}
body.tmdm--dm .tmdm-nut-them .wstm-ico{width:17px;height:17px;flex:none}
body.tmdm--dm .tmdm-nut-them.is-loading{opacity:.6;pointer-events:none}

body.tmdm--dm .wstm-card.is-out .wstm-card__media img{filter:grayscale(1) opacity(.6)}

/* Dạng danh sách giữ nguyên hành vi của theme, chỉ chỉnh lại thứ tự. */
body.tmdm--dm .wstm-products.is-list .wstm-card__name{min-height:0}
body.tmdm--dm .wstm-products.is-list .wstm-card__cta{max-width:360px}

/* ====================================================== 6. PHÂN TRANG == */
body.tmdm--dm .wstm-pager{gap:7px;margin-top:36px}
body.tmdm--dm .wstm-pager a,
body.tmdm--dm .wstm-pager span{
  min-width:42px;height:42px;padding:0 12px;border-radius:12px;
  font-size:15px;font-weight:700;color:var(--tmdm-tieu-de);
  border:1.5px solid var(--tmdm-vien);background:#fff;
}
body.tmdm--dm .wstm-pager a:hover{border-color:var(--tmdm-chinh);color:var(--tmdm-chinh)}
body.tmdm--dm .wstm-pager .current{
  background:var(--tmdm-chinh);border-color:var(--tmdm-chinh);color:#fff;
}
body.tmdm--dm .wstm-pager .dots{border:0;background:none;color:var(--tmdm-chu-rat-nhat)}

/* ===================================================== 7. KHÔNG CÓ HÀNG */
body.tmdm--dm .wstm-empty{
  background:#fff;border:1px dashed var(--tmdm-vien);border-radius:var(--tmdm-bo-to);
}
body.tmdm--dm .wstm-empty .wstm-ico{color:var(--tmdm-vien-dam)}
body.tmdm--dm .wstm-empty h3{color:var(--tmdm-tieu-de)}
body.tmdm--dm .wstm-empty p{color:var(--tmdm-chu)}
body.tmdm--dm .wstm-empty .wstm-btn--primary{
  background:var(--tmdm-chinh);border-color:var(--tmdm-chinh);color:#fff;
  border-radius:var(--tmdm-bo-tron);text-transform:none;letter-spacing:0;
}

/* ================================================= 8. MÀN HÌNH NHỎ ===== */
@media(max-width:1200px){
  body.tmdm--dm .wstm-products{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:1024px){
  body.tmdm--dm .wstm-shop{grid-template-columns:minmax(0,1fr)}

  /* Bản mẫu: bộ lọc TRƯỢT LÊN TỪ ĐÁY màn hình (không trượt ngang). */
  body.tmdm--dm .wstm-shop__side{
    position:fixed;left:0;right:0;bottom:0;top:auto;inset:auto 0 0 0;
    z-index:210;max-height:84vh;overflow-y:auto;
    background:#fff;border-radius:22px 22px 0 0;box-shadow:var(--tmdm-bong-3);
    transform:translateY(100%);transition:transform .32s var(--tmdm-muot);
    padding:0 0 calc(14px + env(safe-area-inset-bottom));
  }
  body.tmdm--dm .wstm-shop__side.is-open{transform:translateY(0)}
  /* Trong ngăn trượt, khối lọc phải nằm trên cùng — khách mở ra là để lọc,
     không phải để đọc lại danh sách danh mục. */
  body.tmdm--dm .wstm-shop__side{display:flex;flex-direction:column}
  body.tmdm--dm .wstm-shop__side .wstm-filters{order:1;border:0;border-radius:0}
  body.tmdm--dm .wstm-shop__side .wstm-catlist{
    order:2;border:0;border-radius:0;margin:0;
    border-top:8px solid var(--tmdm-nen-xam);
  }
  body.tmdm--dm .wstm-filters__head{
    position:sticky;top:0;z-index:2;padding-top:18px;background:#fff;
  }
  /* Nút đóng hình tròn ở góc phải đầu bảng lọc. */
  body.tmdm--dm .wstm-filters__head [data-wstm-filter-close]{
    width:32px;height:32px;border-radius:50%;background:var(--tmdm-nen-xam);
    display:flex;align-items:center;justify-content:center;color:var(--tmdm-tieu-de);flex:none;
  }
  /* Màn che phía sau bảng lọc, do JS thêm vào. */
  body.tmdm--dm .tmdm-man{
    position:fixed;inset:0;z-index:205;background:rgba(14,36,100,.42);
    opacity:0;visibility:hidden;transition:opacity .3s var(--tmdm-muot),visibility .3s;
  }
  body.tmdm--dm .tmdm-man.is-on{opacity:1;visibility:visible}
}

@media(max-width:900px){
  body.tmdm--dm .wstm-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  body.tmdm--dm .wstm-toolbar{gap:10px}
  body.tmdm--dm .wstm-toolbar__count{width:100%;font-size:14px}
  body.tmdm--dm .wstm-card__body{padding:11px 11px 12px}
  body.tmdm--dm .wstm-card__name{font-size:14px}
  body.tmdm--dm .wstm-card__price .wstm-price-now{font-size:17px}
  body.tmdm--dm .wstm-card__cta.tmdm-cta--mua .tmdm-nut-them{padding:10px;font-size:13.5px}
}

@media(max-width:420px){
  body.tmdm--dm .wstm-products{gap:10px}
  body.tmdm--dm .wstm-card__name{font-size:13.5px}
  body.tmdm--dm .wstm-card__price .wstm-price-now{font-size:16px}
  body.tmdm--dm .wstm-card__price .wstm-price-old{font-size:12.5px}
  body.tmdm--dm .wstm-card__cta.tmdm-cta--mua .tmdm-nut-them{padding:9px 6px;font-size:12.5px;gap:5px}
  body.tmdm--dm .wstm-card__origin{font-size:11.5px}
  /* Không cho hai ô số khoảng giá làm tràn ngang ở 390px. */
  body.tmdm--dm .wstm-fprice{flex-wrap:nowrap}
  body.tmdm--dm .wstm-fprice input{min-width:0}
}

/* ==========================================================================
   TRANG DANH MỤC TRÊN ĐIỆN THOẠI — ĐI THEO LỐI TIKTOK SHOP  (28/09/2026)

   Đo trên máy thật ở 390px trước khi sửa:
     · đường dẫn "Trang chủ › Sản phẩm"            51px
     · dải tiêu đề + thống kê danh mục             ~150px
     · thanh công cụ (đếm + 2 ô chọn + 2 nút xem)  139px
     → mất 340px, tức gần nửa màn hình đầu, mới thấy sản phẩm đầu tiên.

   TikTok Shop không có mấy thứ đó: trên cùng là ô tìm, rồi MỘT hàng sắp xếp
   vuốt ngang, rồi vào thẳng lưới hàng. Làm y vậy.
   Máy tính giữ nguyên, không đụng.
   ========================================================================== */
@media(max-width:767px){
  /* ---- Bỏ phần đầu trang chiếm chỗ ---- */
  body.tmdm--dm .wstm-crumb,
  body.tmdm--dm .wstm-cathero__stat,
  body.tmdm--dm .wstm-toolbar__count{display:none}
  body.tmdm--dm .wstm-cathero{padding:10px 0 4px}
  body.tmdm--dm .wstm-cathero h1{font-size:19px;margin:0}

  /* ---- Một hàng sắp xếp vuốt ngang, dính trên khi cuộn ---- */
  body.tmdm--dm .wstm-toolbar{
    position:sticky;top:0;z-index:30;
    display:flex;flex-wrap:nowrap;align-items:center;gap:8px;
    margin:0 -12px 10px;padding:8px 12px;
    background:#fff;border-bottom:1px solid var(--line-soft,#EEF1F8);
    overflow-x:auto;overscroll-behavior-x:contain;
  }
  body.tmdm--dm .wstm-toolbar::-webkit-scrollbar{height:0}
  body.tmdm--dm .wstm-toolbar__right{display:flex;gap:8px;flex:none}
  body.tmdm--dm .wstm-toolbar select{
    flex:none;height:34px;padding:0 28px 0 12px;border-radius:999px;
    font-size:13.5px;font-weight:600;
    border:1px solid var(--line,#E3E8F2);background-color:#fff;
  }
  /* Nút đổi kiểu xem lưới/danh sách: trên điện thoại lưới 2 cột là đủ. */
  body.tmdm--dm .wstm-toolbar__view{display:none}

  /* ---- Nút lọc nằm luôn trong hàng đó ---- */
  body.tmdm--dm .wstm-filterbar{margin:0 0 -42px;padding:0;position:relative;z-index:31}
  body.tmdm--dm .wstm-filterbar .wstm-btn{
    height:34px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:700;
    text-transform:none;letter-spacing:0;
  }

  /* ---- Thẻ hàng gọn lại, giá nổi lên như TikTok ---- */
  body.tmdm--dm .wstm-products{gap:8px}
  body.tmdm--dm .wstm-card{border-radius:12px}
  body.tmdm--dm .wstm-card__body{padding:8px 9px 10px;gap:4px}
  body.tmdm--dm .wstm-card__title{font-size:13.5px;line-height:1.35}
  body.tmdm--dm .wstm-card__price{padding-top:2px;gap:6px;flex-wrap:wrap}
  body.tmdm--dm .wstm-card__price .wstm-price-now{font-size:16px;font-weight:800}
  body.tmdm--dm .wstm-card__price .wstm-price-old{font-size:12px}
  /* Nút "Xem chi tiết" trong thẻ là thứ ăn chỗ mà bấm vào cả thẻ cũng ra. */
  body.tmdm--dm .wstm-card__cta{display:none}
}

@media(prefers-reduced-motion:reduce){
  body.tmdm--dm .wstm-card,
  body.tmdm--dm .wstm-shop__side{transition:none}
}