/* =====================================================================
   VINAMEDICAL — Nhóm trang SẢN PHẨM
   Dùng chung cho: san-pham.html, danh-muc.html, san-pham-chi-tiet.html,
                   gio-hang.html, tim-kiem.html
   Quy ước: mọi lớp riêng đều mang tiền tố .vm-shop-*
   Chỉ dùng biến --vm-* của tokens.css nên tự động hợp chế độ tối.
   Phụ thuộc: tokens.css, base.css, components.css, layout.css
   ===================================================================== */

/* =====================================================================
   1. BỐ CỤC 2 CỘT: THANH LỌC + LƯỚI SẢN PHẨM
   ===================================================================== */
.vm-shop-layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

/* Cột lọc — dính theo màn hình trên desktop */
.vm-shop-sidebar {
  position: sticky;
  top: calc(var(--vm-header-h) + var(--vm-space-4));
  max-height: calc(100dvh - var(--vm-header-h) - var(--vm-space-8));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-4);
  padding-right: var(--vm-space-1);
}

/* Đầu thanh lọc — chỉ hiện khi mở dạng panel trượt trên di động */
.vm-shop-sidebar__head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--vm-space-4);
  padding-bottom: var(--vm-space-4);
  border-bottom: 1px solid var(--vm-border);
}
.vm-shop-sidebar__head strong {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-md);
  color: var(--vm-text);
}

/* Một nhóm điều kiện lọc */
.vm-shop-panel {
  padding: var(--vm-space-5);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-surface);
  box-shadow: var(--vm-shadow-xs);
}
.vm-shop-panel__title {
  display: flex;
  align-items: center;
  gap: var(--vm-space-2);
  margin-bottom: var(--vm-space-4);
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-caps);
  text-transform: uppercase;
  color: var(--vm-brand-text);
}
.vm-shop-panel__title svg { width: 15px; height: 15px; }

.vm-shop-checks {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-1);
  max-height: 340px;
  overflow-y: auto;
}
.vm-shop-check {
  display: flex;
  align-items: center;
  gap: var(--vm-space-3);
  padding: var(--vm-space-2) var(--vm-space-2);
  border-radius: var(--vm-radius-sm);
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
  cursor: pointer;
  transition: background-color var(--vm-dur-fast) var(--vm-ease-out),
              color var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-shop-check:hover { background: var(--vm-brand-soft); color: var(--vm-brand-text); }
.vm-shop-check input {
  width: 17px; height: 17px;
  flex-shrink: 0;
  accent-color: var(--vm-brand);
  cursor: pointer;
}
.vm-shop-check__text { flex: 1; line-height: var(--vm-leading-snug); }
.vm-shop-check:has(input:checked) { color: var(--vm-brand-text); font-weight: var(--vm-weight-semi); }
.vm-shop-check__count {
  flex-shrink: 0;
  min-width: 24px;
  padding: 1px 7px;
  border-radius: var(--vm-radius-pill);
  background: var(--vm-bg-muted);
  color: var(--vm-text-muted);
  font-size: var(--vm-text-2xs);
  font-style: normal;
  font-weight: var(--vm-weight-bold);
  text-align: center;
}
.vm-shop-check:has(input:checked) .vm-shop-check__count {
  background: var(--vm-brand);
  color: var(--vm-text-on-brand);
}
/* Danh mục chưa có sản phẩm — vẫn hiện nhưng làm mờ để phân biệt */
.vm-shop-check.is-empty { opacity: 0.55; }

/* Nút mở panel lọc trên di động + lớp phủ nền */
.vm-shop-filter-toggle { display: none; }
.vm-shop-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--vm-z-drawer) - 1);
  background: var(--vm-overlay);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--vm-dur-base) var(--vm-ease-out), visibility var(--vm-dur-base);
}
.vm-shop-backdrop.is-open { opacity: 1; visibility: visible; }

/* =====================================================================
   2. THANH CÔNG CỤ TRÊN LƯỚI
   ===================================================================== */
.vm-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--vm-space-3);
  padding: var(--vm-space-3) var(--vm-space-4);
  margin-bottom: var(--vm-space-6);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-bg-subtle);
}
.vm-shop-toolbar__count {
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
}
.vm-shop-toolbar__count b { color: var(--vm-text); font-weight: var(--vm-weight-bold); }
.vm-shop-toolbar__tools {
  display: flex;
  align-items: center;
  gap: var(--vm-space-3);
  margin-left: auto;
}
.vm-shop-toolbar__tools .vm-select {
  min-height: 40px;
  padding-block: 0.4rem;
  min-width: 175px;
}

/* Nút chuyển lưới ↔ danh sách */
.vm-shop-view {
  display: inline-flex;
  border: 1.5px solid var(--vm-border);
  border-radius: var(--vm-radius-control);
  overflow: hidden;
  background: var(--vm-surface);
}
.vm-shop-view__btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  color: var(--vm-text-muted);
  transition: background-color var(--vm-dur-fast) var(--vm-ease-out),
              color var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-shop-view__btn + .vm-shop-view__btn { border-left: 1.5px solid var(--vm-border); }
.vm-shop-view__btn:hover { color: var(--vm-brand-text); background: var(--vm-brand-soft); }
.vm-shop-view__btn[aria-pressed="true"] { background: var(--vm-brand); color: var(--vm-text-on-brand); }
.vm-shop-view__btn svg { width: 17px; height: 17px; }

/* Dải nhãn các bộ lọc đang bật */
.vm-shop-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vm-space-2);
  margin-bottom: var(--vm-space-5);
}
.vm-shop-chips:empty { display: none; }
.vm-shop-chips__label {
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-semi);
  color: var(--vm-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--vm-tracking-wide);
}
.vm-shop-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 12px;
  border-radius: var(--vm-radius-pill);
  border: 1px solid color-mix(in srgb, var(--vm-brand) 35%, var(--vm-border));
  background: var(--vm-brand-soft);
  color: var(--vm-brand-text);
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-semi);
}
.vm-shop-chip__x {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  color: inherit;
  transition: background-color var(--vm-dur-fast) var(--vm-ease-out);
}
/* Nút × bỏ lọc chỉ 18px: màn cảm ứng mở rộng vùng chạm lên 44px bằng lớp giả,
   giữ nguyên hình tròn nhỏ. */
@media (pointer: coarse), (max-width: 1023px) {
  .vm-shop-chip__x { position: relative; }
  .vm-shop-chip__x::after { content: ""; position: absolute; inset: -13px; }
}
.vm-shop-chip__x:hover { background: color-mix(in srgb, var(--vm-brand) 22%, transparent); }
.vm-shop-chip__x svg { width: 12px; height: 12px; }

/* =====================================================================
   3. LƯỚI SẢN PHẨM & THẺ
   ===================================================================== */
.vm-shop-grid {
  display: grid;
  gap: var(--vm-space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr));
}

/* Liên kết phủ toàn bộ khung ảnh của thẻ sản phẩm */
.vm-shop-card__media-link { display: block; width: 100%; height: 100%; }
/* Mô tả ngắn chỉ hiện ở kiểu danh sách */
.vm-shop-card__desc { display: none; }
/* Chân thẻ: giá + nút thêm giỏ, luôn dính đáy thẻ ở kiểu lưới */
.vm-shop-card__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-3);
}

/* Kiểu danh sách: ảnh bên trái, thông tin bên phải */
.vm-shop-grid--list { grid-template-columns: 1fr; gap: var(--vm-space-4); }
.vm-shop-grid--list .vm-product-card { flex-direction: row; }
.vm-shop-grid--list .vm-product-card__media {
  flex: 0 0 clamp(150px, 26%, 260px);
  aspect-ratio: auto;
  align-self: stretch;
  border-right: 1px solid var(--vm-border-subtle);
}
.vm-shop-grid--list .vm-product-card__body { justify-content: center; gap: var(--vm-space-3); }
.vm-shop-grid--list .vm-product-card__title { min-height: 0; font-size: var(--vm-text-lg); }
.vm-shop-grid--list .vm-shop-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-normal);
  color: var(--vm-text-soft);
}
.vm-shop-grid--list .vm-product-card__price { margin-top: 0; padding-top: 0; }
.vm-shop-grid--list .vm-shop-card__foot {
  display: flex;
  align-items: center;
  gap: var(--vm-space-3);
  flex-wrap: wrap;
  margin-top: var(--vm-space-2);
}
.vm-shop-grid--list .vm-product-card__cart { margin-top: 0; width: auto; }

/* Khung xương khi đang tải */
.vm-shop-skeleton { display: flex; flex-direction: column; gap: 0; overflow: hidden; border-radius: var(--vm-radius-card); }
.vm-shop-skeleton__media { aspect-ratio: 4 / 3; }
.vm-shop-skeleton__body { display: flex; flex-direction: column; gap: var(--vm-space-3); padding: var(--vm-space-5); }

/* Phân trang cách lưới một khoảng */
.vm-shop-pagination { margin-top: var(--vm-space-10); }

/* =====================================================================
   4. HỘP XEM NHANH
   ===================================================================== */
.vm-shop-quick {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--vm-space-6);
  align-items: start;
}
.vm-shop-quick__media {
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-neutral-0);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.vm-shop-quick__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--vm-space-4); }
.vm-shop-quick__body { display: flex; flex-direction: column; gap: var(--vm-space-3); }
.vm-shop-quick__title { font-size: var(--vm-text-xl); }
.vm-shop-quick__desc {
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-relaxed);
  color: var(--vm-text-soft);
}
.vm-shop-quick__actions { display: flex; gap: var(--vm-space-3); flex-wrap: wrap; margin-top: var(--vm-space-2); }

/* Bảng thông tin nhanh dùng lại ở hộp xem nhanh và trang chi tiết */
.vm-shop-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--vm-space-2) var(--vm-space-4);
  padding: var(--vm-space-4);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-md);
  background: var(--vm-bg-subtle);
  font-size: var(--vm-text-sm);
}
.vm-shop-facts dt { color: var(--vm-text-muted); }
.vm-shop-facts dd { color: var(--vm-text); font-weight: var(--vm-weight-semi); }

/* =====================================================================
   5. TRANG CHI TIẾT SẢN PHẨM
   ===================================================================== */
.vm-shop-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

/* --- Khung ảnh --- */
.vm-shop-gallery { display: flex; flex-direction: column; gap: var(--vm-space-4); }
.vm-shop-gallery__main {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-neutral-0);
  overflow: hidden;
}
.vm-shop-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--vm-space-6);
  transform-origin: var(--vm-zoom-x, 50%) var(--vm-zoom-y, 50%);
  transition: transform var(--vm-dur-slow) var(--vm-ease-out);
}
/* Phóng to khi rê chuột — chỉ bật trên thiết bị có con trỏ thật và màn rộng */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .vm-shop-gallery__main.is-zoomable { cursor: zoom-in; }
  .vm-shop-gallery__main.is-zoomable:hover img { transform: scale(2); transition-duration: var(--vm-dur-fast); }
}
.vm-shop-gallery__hint {
  position: absolute;
  right: var(--vm-space-3);
  bottom: var(--vm-space-3);
  display: none;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--vm-radius-pill);
  background: var(--vm-bg-muted);
  color: var(--vm-text-muted);
  font-size: var(--vm-text-2xs);
  pointer-events: none;
}
.vm-shop-gallery__hint svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .vm-shop-gallery__hint { display: inline-flex; }
  .vm-shop-gallery__hint--touch { display: none; }
}
/* Thiết bị cảm ứng: chạm ảnh chính mở hộp phóng to, vuốt ngang đổi ảnh */
@media not all and (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .vm-shop-gallery__main { cursor: zoom-in; touch-action: pan-y; }
  .vm-shop-gallery__main:focus-visible { outline: 2px solid var(--vm-brand); outline-offset: 2px; }
}
@media (hover: none), (pointer: coarse) {
  .vm-shop-gallery__hint--touch {
    display: inline-flex;
    background: color-mix(in srgb, var(--vm-surface) 88%, transparent);
    color: var(--vm-text-soft);
    box-shadow: var(--vm-shadow-xs);
  }
}

/* --- Hộp phóng to ảnh toàn màn hình (cảm ứng / màn hẹp) --- */
.vm-shop-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--vm-z-toast);
  background: rgb(8 12 20);           /* Nền đặc — không để trang phía sau lộ ra */
  color: #fff;
  opacity: 0;
  transition: opacity var(--vm-dur-base) var(--vm-ease-out);
}
.vm-shop-lightbox[hidden] { display: none; }
.vm-shop-lightbox.is-open { opacity: 1; }
.vm-shop-lightbox__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 64px var(--vm-space-3) 72px;
  overflow: hidden;
  touch-action: none;           /* Cử chỉ chụm/kéo do JS xử lý */
}
.vm-shop-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: var(--vm-neutral-0);
  border-radius: var(--vm-radius-md);
  transform-origin: center center;
  transition: transform var(--vm-dur-base) var(--vm-ease-out);
  user-select: none;
  -webkit-user-drag: none;
}
.vm-shop-lightbox__close,
.vm-shop-lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  transition: background-color var(--vm-dur-fast) var(--vm-ease-out), opacity var(--vm-dur-fast);
}
.vm-shop-lightbox__close:hover,
.vm-shop-lightbox__nav:hover { background: rgb(255 255 255 / 0.26); }
.vm-shop-lightbox__close:focus-visible,
.vm-shop-lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vm-shop-lightbox__close svg,
.vm-shop-lightbox__nav svg { width: 22px; height: 22px; }
.vm-shop-lightbox__close { top: max(var(--vm-space-3), env(safe-area-inset-top)); right: var(--vm-space-3); }
.vm-shop-lightbox__nav { top: 50%; transform: translateY(-50%); }
.vm-shop-lightbox__nav--prev { left: var(--vm-space-2); }
.vm-shop-lightbox__nav--next { right: var(--vm-space-2); }
/* Đang phóng to thì ẩn nút chuyển ảnh cho khỏi che */
.vm-shop-lightbox.is-zoomed .vm-shop-lightbox__nav { opacity: 0; pointer-events: none; }
.vm-shop-lightbox__bar {
  position: absolute;
  left: 0; right: 0;
  bottom: max(var(--vm-space-4), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-inline: var(--vm-space-4);
  font-size: var(--vm-text-xs);
  text-align: center;
  pointer-events: none;
}
.vm-shop-lightbox__bar [data-lb-count] { font-weight: var(--vm-weight-bold); }
.vm-shop-lightbox__tip { opacity: 0.75; }

.vm-shop-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: var(--vm-space-3);
}
.vm-shop-gallery__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 6px;
  border: 1.5px solid var(--vm-border);
  border-radius: var(--vm-radius-md);
  background: var(--vm-neutral-0);
  overflow: hidden;
  transition: border-color var(--vm-dur-fast) var(--vm-ease-out),
              box-shadow var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-shop-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.vm-shop-gallery__thumb:hover { border-color: var(--vm-brand); }
.vm-shop-gallery__thumb[aria-pressed="true"] {
  border-color: var(--vm-brand);
  box-shadow: var(--vm-shadow-focus);
}

/* --- Cột thông tin (dính trên desktop) --- */
.vm-shop-info {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-4);
}
@media (min-width: 1024px) {
  .vm-shop-info { position: sticky; top: calc(var(--vm-header-h) + var(--vm-space-5)); }
}
.vm-shop-info__cat {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-caps);
  text-transform: uppercase;
  color: var(--vm-brand-text);
}
.vm-shop-info__title { font-size: var(--vm-text-3xl); }
.vm-shop-info__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vm-space-2) var(--vm-space-5);
  padding-bottom: var(--vm-space-4);
  border-bottom: 1px solid var(--vm-border);
  font-size: var(--vm-text-sm);
  color: var(--vm-text-muted);
}
.vm-shop-info__meta span { display: inline-flex; align-items: center; gap: 6px; }
.vm-shop-info__meta b { color: var(--vm-text); font-weight: var(--vm-weight-semi); }
.vm-shop-info__meta svg { width: 15px; height: 15px; color: var(--vm-brand-text); }

.vm-shop-info__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--vm-space-3);
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-3xl);
  font-weight: var(--vm-weight-black);
  color: var(--vm-cta-text);
  line-height: 1.1;
}
.vm-shop-info__price small {
  font-family: var(--vm-font-body);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-normal);
  color: var(--vm-text-muted);
}
.vm-shop-info__price--quote { font-size: var(--vm-text-2xl); color: var(--vm-brand-text); }

.vm-shop-info__desc {
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-relaxed);
  color: var(--vm-text-soft);
}

.vm-shop-info__buy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vm-space-3);
}
.vm-shop-info__buy .vm-btn { flex: 1 1 180px; }
.vm-shop-info__hotline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vm-space-2);
  padding: var(--vm-space-3) var(--vm-space-4);
  border: 1.5px dashed color-mix(in srgb, var(--vm-cta) 45%, var(--vm-border));
  border-radius: var(--vm-radius-control);
  background: var(--vm-cta-soft);
  color: var(--vm-cta-text);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
}
.vm-shop-info__hotline b { font-family: var(--vm-font-display); font-size: var(--vm-text-md); }
.vm-shop-info__hotline svg { width: 18px; height: 18px; }

/* Khối cam kết 4 dòng */
.vm-shop-promise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--vm-space-3);
  padding: var(--vm-space-4);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-bg-subtle);
}
.vm-shop-promise__item {
  display: flex;
  align-items: flex-start;
  gap: var(--vm-space-3);
  font-size: var(--vm-text-xs);
  line-height: var(--vm-leading-snug);
  color: var(--vm-text-soft);
}
.vm-shop-promise__item svg {
  flex-shrink: 0;
  width: 20px; height: 20px;
  color: var(--vm-brand-text);
}
.vm-shop-promise__item b { display: block; color: var(--vm-text); font-size: var(--vm-text-sm); margin-bottom: 2px; }

/* Danh sách tính năng nổi bật */
.vm-shop-features { display: grid; gap: var(--vm-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.vm-shop-features__item {
  display: flex;
  align-items: flex-start;
  gap: var(--vm-space-3);
  padding: var(--vm-space-4);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-md);
  background: var(--vm-surface);
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-normal);
  color: var(--vm-text-soft);
  transition: border-color var(--vm-dur-base) var(--vm-ease-out);
}
.vm-shop-features__item:hover { border-color: color-mix(in srgb, var(--vm-brand) 40%, var(--vm-border)); }
.vm-shop-features__item svg { flex-shrink: 0; width: 19px; height: 19px; color: var(--vm-success-600); margin-top: 2px; }

/* =====================================================================
   6. DẢI CUỘN NGANG "DANH MỤC KHÁC"
   ===================================================================== */
.vm-shop-strip {
  display: flex;
  gap: var(--vm-space-4);
  overflow-x: auto;
  padding-bottom: var(--vm-space-3);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.vm-shop-strip > * {
  flex: 0 0 clamp(220px, 68vw, 280px);
  scroll-snap-align: start;
}
.vm-shop-strip .vm-cat-card { min-height: 220px; }

/* =====================================================================
   7. TRANG GIỎ HÀNG
   ===================================================================== */
.vm-shop-cart {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
/* Cột phải: tóm tắt + biểu mẫu. Không đặt sticky vì biểu mẫu khá cao,
   dính lại sẽ khiến phần cuối biểu mẫu không cuộn tới được. */
.vm-shop-cart__aside {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-5);
}

.vm-shop-cart__thumb {
  width: 74px; height: 74px;
  flex-shrink: 0;
  padding: 6px;
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-md);
  background: var(--vm-neutral-0);
}
.vm-shop-cart__thumb img { width: 100%; height: 100%; object-fit: contain; }
.vm-shop-cart__cell { display: flex; align-items: center; gap: var(--vm-space-4); }
.vm-shop-cart__name {
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
  line-height: var(--vm-leading-snug);
  color: var(--vm-text);
}
.vm-shop-cart__name:hover { color: var(--vm-brand-text); }
.vm-shop-cart__cat { display: block; margin-top: 4px; font-size: var(--vm-text-xs); color: var(--vm-text-muted); }
.vm-shop-cart__sum {
  font-family: var(--vm-font-display);
  font-weight: var(--vm-weight-bold);
  color: var(--vm-cta-text);
  white-space: nowrap;
}
.vm-shop-cart__del {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--vm-text-muted);
  transition: background-color var(--vm-dur-fast) var(--vm-ease-out),
              color var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-shop-cart__del:hover { background: var(--vm-danger-50); color: var(--vm-danger-600); }
.vm-shop-cart__del svg { width: 17px; height: 17px; }
.vm-shop-cart__table .vm-qty { transform: scale(0.9); transform-origin: left center; }

/* Cột tên sản phẩm cần đủ rộng, các cột số không xuống dòng giữa chừng */
.vm-shop-cart__table th, .vm-shop-cart__table td { padding-inline: var(--vm-space-3); }
.vm-shop-cart__table th:first-child, .vm-shop-cart__table td:first-child {
  min-width: 240px;
  padding-left: var(--vm-space-4);
}
.vm-shop-cart__table td:nth-child(2) { white-space: nowrap; }
.vm-shop-cart__table td:last-child { padding-right: var(--vm-space-4); width: 1%; }

/* Nhãn "thu gọn" cho bảng khi màn hình hẹp */
.vm-shop-cart__table td[data-th]::before { display: none; }

.vm-shop-summary {
  padding: var(--vm-space-6);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-surface);
  box-shadow: var(--vm-shadow-sm);
}
.vm-shop-summary__title {
  font-size: var(--vm-text-lg);
  margin-bottom: var(--vm-space-4);
  padding-bottom: var(--vm-space-4);
  border-bottom: 1px solid var(--vm-border);
}
.vm-shop-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vm-space-4);
  padding-block: var(--vm-space-2);
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
}
.vm-shop-summary__row--total {
  margin-top: var(--vm-space-3);
  padding-top: var(--vm-space-4);
  border-top: 1px dashed var(--vm-border-strong);
  font-size: var(--vm-text-md);
  color: var(--vm-text);
}
.vm-shop-summary__row--total b {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-xl);
  font-weight: var(--vm-weight-black);
  color: var(--vm-cta-text);
}
.vm-shop-summary__actions { display: flex; flex-direction: column; gap: var(--vm-space-3); margin-top: var(--vm-space-5); }

.vm-shop-quote {
  padding: var(--vm-space-6);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-surface);
  box-shadow: var(--vm-shadow-sm);
}
/* R5 — Máy ≤1023px có hàng nút nổi ở đáy màn hình (cao tới ~78px tính cả lề).
   Khi Tab / tự cuộn tới ô nhập hay nút "Gửi yêu cầu báo giá", trình duyệt chừa
   thêm đúng khoảng đó ở đáy để phần tử không nằm dưới nút nổi. Đệm đáy cho khối
   biểu mẫu để khi cuộn hết khu giỏ, nút gửi vẫn nằm trên hàng nút nổi (lúc cuộn
   dở chừng thì nút nổi vẫn có thể đè — đó là bản chất của nút nổi; khi đang gõ
   vào biểu mẫu thì hàng nút tự ẩn, xem components.css mục 16). */
@media (max-width: 1023px) {
  #quote-form :is(input, textarea, select, button) {
    scroll-margin-bottom: calc(var(--vm-space-5) + var(--vm-tl-nut-size) + var(--vm-space-3));
  }
  /* Đệm đúng bằng chiều cao hàng nút nổi (lề đáy + nút) — xem components.css mục 16. */
  .vm-shop-cart__aside { padding-bottom: calc(var(--vm-space-5) + var(--vm-tl-nut-size)); }
}
@media (max-width: 640px) {
  .vm-shop-cart__aside { padding-bottom: calc(var(--vm-space-4) + var(--vm-tl-nut-size-sm)); }
}
.vm-shop-quote__title { font-size: var(--vm-text-lg); margin-bottom: var(--vm-space-2); }
.vm-shop-quote__desc {
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
  margin-bottom: var(--vm-space-5);
  line-height: var(--vm-leading-normal);
}
.vm-shop-code {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: var(--vm-radius-sm);
  background: color-mix(in srgb, var(--vm-success-500) 16%, transparent);
  font-family: var(--vm-font-mono);
  font-weight: var(--vm-weight-bold);
  letter-spacing: 0.06em;
}

/* =====================================================================
   8. TRANG TÌM KIẾM
   ===================================================================== */
.vm-shop-searchbar {
  display: flex;
  gap: var(--vm-space-3);
  flex-wrap: wrap;
  padding: var(--vm-space-5);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-surface);
  box-shadow: var(--vm-shadow-md);
}
.vm-shop-searchbar .vm-input-group { flex: 1 1 260px; }
.vm-shop-searchbar .vm-input { min-height: 54px; font-size: var(--vm-text-md); }

.vm-shop-group + .vm-shop-group { margin-top: var(--vm-space-12); }
.vm-shop-group__head {
  display: flex;
  align-items: center;
  gap: var(--vm-space-3);
  margin-bottom: var(--vm-space-5);
  padding-bottom: var(--vm-space-3);
  border-bottom: 1px solid var(--vm-border);
}
.vm-shop-group__head h2 { font-size: var(--vm-text-xl); }
.vm-shop-group__count {
  padding: 2px 10px;
  border-radius: var(--vm-radius-pill);
  background: var(--vm-brand-soft);
  color: var(--vm-brand-text);
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-bold);
}

.vm-shop-hit {
  display: flex;
  align-items: center;
  gap: var(--vm-space-4);
  padding: var(--vm-space-3);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-surface);
  transition: transform var(--vm-dur-base) var(--vm-ease-out),
              box-shadow var(--vm-dur-base) var(--vm-ease-out),
              border-color var(--vm-dur-base) var(--vm-ease-out);
}
.vm-shop-hit:hover {
  transform: translateY(-3px);
  box-shadow: var(--vm-shadow-md);
  border-color: color-mix(in srgb, var(--vm-brand) 40%, var(--vm-border));
}
.vm-shop-hit__img {
  width: 68px; height: 68px;
  flex-shrink: 0;
  padding: 5px;
  border-radius: var(--vm-radius-md);
  background: var(--vm-neutral-0);
  border: 1px solid var(--vm-border-subtle);
  object-fit: contain;
}
.vm-shop-hit__body { min-width: 0; }
.vm-shop-hit__title {
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
  line-height: var(--vm-leading-snug);
  color: var(--vm-text);
}
.vm-shop-hit:hover .vm-shop-hit__title { color: var(--vm-brand-text); }
.vm-shop-hit__sub { margin-top: 4px; font-size: var(--vm-text-xs); color: var(--vm-text-muted); }

.vm-shop-suggest { display: flex; flex-wrap: wrap; gap: var(--vm-space-2); justify-content: center; margin-top: var(--vm-space-4); }

/* =====================================================================
   9. RESPONSIVE — kiểm ở 1440 / 1024 / 768 / 360
   ===================================================================== */
@media (max-width: 1200px) {
  .vm-shop-layout { grid-template-columns: 250px minmax(0, 1fr); }
}

@media (max-width: 1023px) {
  /* Cột thông tin và tóm tắt hết dính, xếp dọc */
  .vm-shop-detail { grid-template-columns: 1fr; }
  .vm-shop-cart { grid-template-columns: 1fr; }

  /* Thanh lọc chuyển thành panel trượt từ trái */
  .vm-shop-layout { grid-template-columns: 1fr; }
  .vm-shop-filter-toggle { display: inline-flex; }
  .vm-shop-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--vm-z-drawer);
    width: min(330px, 88vw);
    max-height: none;
    height: 100dvh;
    padding: var(--vm-space-5);
    background: var(--vm-bg);
    border-right: 1px solid var(--vm-border);
    box-shadow: var(--vm-shadow-xl);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform var(--vm-dur-slow) var(--vm-ease-out), visibility var(--vm-dur-slow);
  }
  .vm-shop-sidebar.is-open { transform: none; visibility: visible; }
  .vm-shop-sidebar__head { display: flex; }
  .vm-shop-panel { padding: var(--vm-space-4); }
  /* Trong ngăn trượt, bản thân ngăn đã cuộn — bỏ khung cuộn lồng của danh sách
     (desktop giữ 340px) để thấy đủ 13 danh mục */
  .vm-shop-sidebar .vm-shop-checks { max-height: none; overflow: visible; }
  /* Chân ngăn dính đáy: nút đóng ngăn kèm số kết quả */
  .vm-shop-sidebar__foot {
    display: block;
    position: sticky;
    bottom: calc(-1 * var(--vm-space-5));
    z-index: 1;
    margin: auto calc(-1 * var(--vm-space-5)) calc(-1 * var(--vm-space-5));
    padding: var(--vm-space-3) var(--vm-space-5) max(var(--vm-space-4), env(safe-area-inset-bottom));
    border-top: 1px solid var(--vm-border);
    background: var(--vm-bg);
    box-shadow: 0 -8px 16px -12px rgb(0 0 0 / 0.25);
  }
  .vm-shop-sidebar__foot .vm-btn { min-height: 48px; }

  /* Vùng chạm ≥44px trên màn cảm ứng */
  .vm-shop-filter-toggle { min-height: 44px; }
  .vm-shop-grid .vm-product-card__cart { min-height: 44px; }
  .vm-shop-info__cat { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; }
  .vm-shop-seeall { min-height: 44px; }
  .vm-shop-cart__del { width: 44px; height: 44px; }
  .vm-shop-cart__table .vm-qty { transform: none; }
  .vm-shop-cart__table .vm-qty button { width: 44px; }
}
/* Chân ngăn lọc chỉ dùng ở chế độ ngăn trượt */
@media (min-width: 1024px) {
  .vm-shop-sidebar__foot { display: none; }
}

@media (max-width: 860px) {
  /* Hộp xem nhanh xếp dọc */
  .vm-shop-quick { grid-template-columns: 1fr; }

  /* Bảng giỏ hàng chuyển sang dạng thẻ xếp dọc */
  .vm-shop-cart__table thead { display: none; }
  .vm-shop-cart__table,
  .vm-shop-cart__table tbody,
  .vm-shop-cart__table tr,
  .vm-shop-cart__table td { display: block; width: 100%; }
  .vm-shop-cart__table tr {
    padding: var(--vm-space-4);
    border-top: 1px solid var(--vm-border);
  }
  .vm-shop-cart__table td { padding: var(--vm-space-2) 0; }
  .vm-shop-cart__table th:first-child,
  .vm-shop-cart__table td:first-child { min-width: 0; padding-left: 0; }
  .vm-shop-cart__table td:last-child { padding-right: 0; }
  .vm-shop-cart__table td[data-th]::before {
    content: attr(data-th);
    display: inline-block;
    min-width: 110px;
    font-size: var(--vm-text-xs);
    font-weight: var(--vm-weight-semi);
    color: var(--vm-text-muted);
  }
  .vm-shop-cart__table td[data-th] { display: flex; align-items: center; gap: var(--vm-space-3); }
  .vm-shop-cart__table td:first-child { padding-bottom: var(--vm-space-3); }
}

@media (max-width: 640px) {
  .vm-shop-toolbar { padding: var(--vm-space-3); }
  .vm-shop-toolbar__tools { width: 100%; margin-left: 0; }
  .vm-shop-toolbar__tools .vm-select { flex: 1; min-width: 0; }
  .vm-shop-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr)); gap: var(--vm-space-4); }
  .vm-shop-grid .vm-product-card__body { padding: var(--vm-space-3); }
  .vm-shop-grid .vm-product-card__title { font-size: var(--vm-text-sm); }
  /* Thẻ 2 cột chỉ rộng ~136px: thu đệm ngang và cho nhãn nút xuống dòng
     để nhãn tiếng Anh dài ("Add to quote list") không tràn khỏi nút */
  .vm-shop-grid .vm-product-card__cart {
    padding-inline: var(--vm-space-2);
    gap: 6px;
    white-space: normal;
    line-height: 1.15;
  }
  .vm-shop-grid .vm-product-card__cart svg { flex-shrink: 0; }

  /* Ở màn rất hẹp, kiểu danh sách vẫn giữ ảnh trái nhưng nhỏ lại */
  .vm-shop-grid--list { grid-template-columns: 1fr; }
  .vm-shop-grid--list .vm-product-card__media { flex-basis: 118px; }
  .vm-shop-grid--list .vm-product-card__title { font-size: var(--vm-text-sm); }
  .vm-shop-grid--list .vm-shop-card__desc { -webkit-line-clamp: 2; line-clamp: 2; }

  .vm-shop-info__title { font-size: var(--vm-text-2xl); }
  .vm-shop-info__buy .vm-btn { flex-basis: 100%; }
  .vm-shop-gallery__main img { padding: var(--vm-space-4); }
  .vm-shop-gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
  .vm-shop-summary, .vm-shop-quote { padding: var(--vm-space-4); }
  .vm-shop-searchbar { padding: var(--vm-space-3); }
}