/* =====================================================================
   VINAMEDICAL — Components
   Thư viện thành phần giao diện dùng chung cho mọi trang.
   Phụ thuộc: tokens.css, base.css
   ===================================================================== */

/* =====================================================================
   1. NÚT BẤM
   ===================================================================== */
.vm-btn {
  --_bg: var(--vm-brand);
  --_fg: var(--vm-text-on-brand);
  --_bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vm-space-2);
  padding: 0.75rem 1.5rem;
  min-height: 46px;
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--vm-radius-control);
  border: 1.5px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--vm-dur-fast) var(--vm-ease-out),
    box-shadow var(--vm-dur-base) var(--vm-ease-out),
    background-color var(--vm-dur-base) var(--vm-ease-out),
    border-color var(--vm-dur-base) var(--vm-ease-out),
    color var(--vm-dur-base) var(--vm-ease-out);
}
.vm-btn:hover { color: var(--_fg); transform: translateY(-2px); }
.vm-btn:active { transform: translateY(0); }
.vm-btn:disabled, .vm-btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none;
}
.vm-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Ánh sáng quét ngang khi hover */
.vm-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vm-grad-sheen);
  transform: translateX(-120%);
  opacity: 0.35;
  transition: transform var(--vm-dur-slower) var(--vm-ease-out);
}
.vm-btn:hover::after { transform: translateX(120%); }

.vm-btn--primary { --_bg: var(--vm-brand); --_fg: var(--vm-text-on-brand); box-shadow: var(--vm-shadow-brand); }
.vm-btn--primary:hover { --_bg: var(--vm-brand-hover); }

/* B4 — Trước đây ghi cứng --_fg: #fff. Mã cứng nằm ngoài hệ token nên không ai
   kiểm được, và ở chế độ tối nó tạo nghịch lý: nút lúc NGHỈ đạt 4.54:1 (trắng trên
   --vm-cta #d93659) nhưng lúc HOVER lại tụt xuống 3.30:1 (trắng trên --vm-cta-hover
   #e85f7e) — rớt AA, và tệ hơn chính lúc nghỉ, ngược hẳn kỳ vọng người dùng.
   Sửa hai lớp: (1) màu chữ nay lấy từ --vm-text-on-cta thay cho mã cứng;
   (2) gốc bệnh thật nằm ở --vm-cta-hover chế độ tối — xem tokens.css. */
.vm-btn--cta { --_bg: var(--vm-cta); --_fg: var(--vm-text-on-cta); box-shadow: var(--vm-shadow-cta); }
/* R2 — Hover phải thêm VIỀN chứ không chỉ đổi nền. Lý do nằm ở tokens.css
   (--vm-cta-hover, khối chế độ tối): ở chế độ tối nút này bị kẹp trong khe độ chói
   [0.15561 – 0.18333], rộng ΔL* ≈ 2.9 — dưới ngưỡng mắt phân biệt được. Nghĩa là
   dù chọn màu nền nào hợp lệ thì thay đổi sáng-tối cũng KHÔNG đủ làm tín hiệu
   trạng thái. Nền hover nay chỉ đậm đà thêm về độ bão hoà, còn tín hiệu thật do
   viền đảm nhận, cộng với translateY(-2px) sẵn có ở .vm-btn:hover.
   Dùng --vm-cta-text chứ không phải một mã riêng: biến đó vốn đã được chọn để
   đọc được trên nền của TỪNG chế độ, nên viền tự đạt 3:1 so với nền trang ở cả
   hai bên — chế độ tối #e85f7e đạt 4.65:1 trên --vm-surface-2, chế độ sáng
   #bf1f3c đạt 6.04:1 trên nền trắng.
   Viền không làm xô bố cục: .vm-btn đã luôn vẽ border 1.5px, lúc nghỉ chỉ là
   trong suốt — nên ở đây chỉ tô màu cho đường viền có sẵn. */
.vm-btn--cta:hover { --_bg: var(--vm-cta-hover); --_bd: var(--vm-cta-text); }

/* R3 — Trước đây hai lớp này ghi cứng --_fg: #fff. Đợt trước đã dọn .vm-btn--cta
   nhưng bỏ sót hai dòng này; mã cứng nằm ngoài hệ token nên không công cụ nào
   kiểm được, mà dải nền bên dưới thì vừa đổi ở R1. Nay trỏ về token.
   Lưu ý: --vm-text-on-grad-brand KHÔNG phải --vm-text-on-brand — hai biến lật
   theo hai luật khác nhau, xem chú thích trong tokens.css trước khi đổi. */
.vm-btn--gradient {
  --_fg: var(--vm-text-on-grad-brand);
  background: var(--vm-grad-brand);
  box-shadow: var(--vm-shadow-brand);
}
.vm-btn--gradient-cta {
  --_fg: var(--vm-text-on-cta);
  background: var(--vm-grad-cta);
  box-shadow: var(--vm-shadow-cta);
}

.vm-btn--outline {
  --_bg: transparent;
  --_fg: var(--vm-brand-text);
  --_bd: color-mix(in srgb, var(--vm-brand) 45%, transparent);
}
.vm-btn--outline:hover { --_bg: var(--vm-brand); --_fg: var(--vm-text-on-brand); --_bd: var(--vm-brand); }

.vm-btn--ghost { --_bg: transparent; --_fg: var(--vm-text); }
.vm-btn--ghost:hover { --_bg: var(--vm-surface-hover); --_fg: var(--vm-brand-text); }

.vm-btn--soft { --_bg: var(--vm-brand-soft); --_fg: var(--vm-brand-text); }
.vm-btn--soft:hover { --_bg: color-mix(in srgb, var(--vm-brand) 18%, transparent); }

.vm-btn--light { --_bg: #fff; --_fg: var(--vm-primary-800); box-shadow: var(--vm-shadow-md); }
.vm-btn--light:hover { --_bg: var(--vm-primary-50); }

.vm-btn--on-dark {
  --_bg: transparent;
  --_fg: #fff;
  --_bd: rgba(255, 255, 255, 0.45);
}
.vm-btn--on-dark:hover { --_bg: rgba(255, 255, 255, 0.14); --_bd: rgba(255, 255, 255, 0.8); }

.vm-btn--sm { padding: 0.5rem 1.05rem; min-height: 38px; font-size: var(--vm-text-xs); }
.vm-btn--lg { padding: 0.95rem 2rem; min-height: 54px; font-size: var(--vm-text-base); }
.vm-btn--block { width: 100%; }
/* Nút chỉ có biểu tượng. Phải khoá cả chiều cao lẫn chiều ngang: nằm trong một
   hàng flex, mặc định nút bị kéo giãn theo phần tử cao nhất (ví dụ ô nhập email
   ở chân trang cao 48px), thành ra hộp 44x48 mà border-radius 50% lại vẽ ra hình
   bầu dục chứ không phải hình tròn. align-self + flex-shrink chặn cả hai hướng. */
.vm-btn--icon {
  padding: 0;
  width: 44px; min-height: 44px; height: 44px;
  flex: 0 0 auto;
  align-self: center;
  border-radius: 50%;
}
.vm-btn--pill { border-radius: var(--vm-radius-pill); }
.vm-btn--icon.vm-btn--sm { width: 36px; min-height: 36px; height: 36px; }
/* M10 — Màn hình nhỏ: nút cỡ nhỏ (38px) nâng lên đủ vùng chạm 44px. */
@media (max-width: 1023px) {
  .vm-btn--sm { min-height: var(--vm-tap-min); }
  .vm-btn--icon.vm-btn--sm { width: var(--vm-tap-min); min-height: var(--vm-tap-min); height: var(--vm-tap-min); }
}

/* Liên kết dạng "Tìm hiểu thêm →" */
.vm-link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--vm-space-2);
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
  color: var(--vm-brand-text);
}
.vm-link-more svg { width: 16px; height: 16px; transition: transform var(--vm-dur-base) var(--vm-ease-out); }
.vm-link-more:hover svg { transform: translateX(5px); }

/* =====================================================================
   2. NHÃN / CHIP
   ===================================================================== */
.vm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3rem 0.7rem;
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-2xs);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--vm-radius-pill);
  background: var(--vm-brand-soft);
  color: var(--vm-brand-text);
  white-space: nowrap;
}
.vm-badge--cta { background: var(--vm-cta-soft); color: var(--vm-cta-text); }
.vm-badge--success { background: var(--vm-success-50); color: var(--vm-success-700); }
.vm-badge--warning { background: var(--vm-warning-50); color: var(--vm-warning-700); }
.vm-badge--neutral { background: var(--vm-bg-muted); color: var(--vm-text-soft); }
.vm-badge--solid { background: var(--vm-brand); color: var(--vm-text-on-brand); }
.vm-badge--glass {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.vm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--vm-space-2);
  padding: 0.5rem 1rem;
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-medium);
  border-radius: var(--vm-radius-pill);
  border: 1px solid var(--vm-border);
  background: var(--vm-surface);
  color: var(--vm-text-soft);
  cursor: pointer;
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-chip:hover { border-color: var(--vm-brand); color: var(--vm-brand-text); }
.vm-chip[aria-pressed="true"], .vm-chip.is-active {
  background: var(--vm-brand);
  border-color: var(--vm-brand);
  color: var(--vm-text-on-brand);
  box-shadow: var(--vm-shadow-sm);
}
.vm-chip__count {
  font-size: var(--vm-text-2xs);
  padding: 1px 7px;
  border-radius: var(--vm-radius-pill);
  background: color-mix(in srgb, currentColor 14%, transparent);
}
/* R10 — Chip chỉ cao ~42px (đo trên /tin-tuc/ ở 390 và 768px), hụt mức chạm
   44px. Màn cảm ứng / màn hẹp nâng lên tối thiểu 44px; desktop giữ nguyên. */
@media (max-width: 1023px), (pointer: coarse) {
  .vm-chip { min-height: var(--vm-tap-min); }
}
/* Biểu tượng trong chip (vd chip gợi ý của trang tìm kiếm rỗng) không có kích
   thước riêng thì SVG giãn hết chỗ, bóp chữ xuống từng từ một dòng. */
.vm-chip { white-space: nowrap; }
.vm-chip svg { width: 16px; height: 16px; flex: none; }

/* =====================================================================
   3. THẺ (CARD)
   ===================================================================== */
.vm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-card);
  box-shadow: var(--vm-shadow-line);
  overflow: hidden;
  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-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--vm-shadow-lg);
  border-color: color-mix(in srgb, var(--vm-brand) 35%, var(--vm-border));
}
.vm-card__body { padding: var(--vm-space-5); display: flex; flex-direction: column; gap: var(--vm-space-3); flex: 1; }
.vm-card__title { font-size: var(--vm-text-lg); line-height: var(--vm-leading-snug); }
.vm-card__title a { color: inherit; }
.vm-card__title a:hover { color: var(--vm-brand-text); }
.vm-card__desc { color: var(--vm-text-soft); font-size: var(--vm-text-sm); line-height: var(--vm-leading-relaxed); }
.vm-card__foot {
  margin-top: auto;
  padding-top: var(--vm-space-4);
  border-top: 1px solid var(--vm-border-subtle);
  display: flex; align-items: center; justify-content: space-between; gap: var(--vm-space-3);
}
.vm-card__meta {
  display: flex; align-items: center; gap: var(--vm-space-4);
  font-size: var(--vm-text-xs); color: var(--vm-text-muted);
}
.vm-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.vm-card__meta svg { width: 14px; height: 14px; }

/* Viền phát sáng theo con trỏ */
.vm-card--glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(320px circle at var(--vm-mx, 50%) var(--vm-my, 0%),
              color-mix(in srgb, var(--vm-primary-400) 70%, transparent), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--vm-dur-base) var(--vm-ease-out);
  pointer-events: none;
  z-index: 2;
}
.vm-card--glow:hover::before { opacity: 1; }

/* Thẻ kính mờ trên nền tối */
.vm-card--glass {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--vm-text-on-deep);
}
.vm-card--glass .vm-card__desc { color: var(--vm-text-on-deep-soft); }
.vm-card--glass:hover { background: rgba(255, 255, 255, 0.13); }

/* Thẻ danh mục có ảnh nền */
.vm-cat-card {
  position: relative;
  display: block;
  border-radius: var(--vm-radius-lg);
  overflow: hidden;
  min-height: 280px;
  background: var(--vm-neutral-900);
  isolation: isolate;
  transition: transform var(--vm-dur-base) var(--vm-ease-out), box-shadow var(--vm-dur-base) var(--vm-ease-out);
}
.vm-cat-card:hover { transform: translateY(-6px); box-shadow: var(--vm-shadow-xl); }
.vm-cat-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.72;
  transition: transform var(--vm-dur-slower) var(--vm-ease-out), opacity var(--vm-dur-base) var(--vm-ease-out);
}
.vm-cat-card:hover .vm-cat-card__img { transform: scale(1.08); opacity: 0.55; }
.vm-cat-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 39, 51, 0.94) 6%, rgba(10, 39, 51, 0.55) 45%, rgba(10, 39, 51, 0.15) 100%);
}
.vm-cat-card__body {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--vm-space-2);
  padding: var(--vm-space-6);
  color: #fff;
}
.vm-cat-card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--vm-radius-md);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  margin-bottom: var(--vm-space-2);
}
.vm-cat-card__icon svg { width: 22px; height: 22px; color: #fff; }
.vm-cat-card__title { font-size: var(--vm-text-lg); color: #fff; }
.vm-cat-card__desc {
  font-size: var(--vm-text-sm);
  color: rgba(255, 255, 255, 0.82);
  line-height: var(--vm-leading-normal);
  /* Giãn đúng bằng chiều cao thật của chữ: 0fr -> 1fr.
     Cách cũ dùng max-height cố định nên hoặc cắt cụt mô tả dài,
     hoặc chạy thừa thời gian với mô tả ngắn. */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--vm-dur-slow) var(--vm-ease-out), opacity var(--vm-dur-slow) var(--vm-ease-out);
}
.vm-cat-card__desc > * { overflow: hidden; min-height: 0; }
.vm-cat-card:hover .vm-cat-card__desc, .vm-cat-card:focus-within .vm-cat-card__desc {
  grid-template-rows: 1fr; opacity: 1;
}
.vm-cat-card__more {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-xs); font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-wide); text-transform: uppercase;
  color: var(--vm-primary-200);
  margin-top: var(--vm-space-2);
}
.vm-cat-card__more svg { width: 15px; height: 15px; transition: transform var(--vm-dur-base) var(--vm-ease-out); }
.vm-cat-card:hover .vm-cat-card__more svg { transform: translateX(5px); }

/* Thẻ sản phẩm */
.vm-product-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-card);
  box-shadow: var(--vm-shadow-line);
  overflow: hidden;
  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-product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--vm-shadow-lg);
  border-color: color-mix(in srgb, var(--vm-brand) 38%, var(--vm-border));
}
.vm-product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--vm-neutral-0);
  overflow: hidden;
}
.vm-product-card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--vm-space-5);
  transition: transform var(--vm-dur-slower) var(--vm-ease-out);
}
.vm-product-card:hover .vm-product-card__media img { transform: scale(1.07); }
.vm-product-card__tags {
  position: absolute; top: var(--vm-space-3); left: var(--vm-space-3);
  display: flex; flex-direction: column; gap: 6px; z-index: 2;
}
.vm-product-card__actions {
  position: absolute; top: var(--vm-space-3); right: var(--vm-space-3);
  display: flex; flex-direction: column; gap: 8px; z-index: 2;
  opacity: 0; transform: translateX(12px);
  /* M2 — Lúc ẩn (opacity 0) phải tắt luôn nhận chạm: trước đây nút vô hình vẫn
     bắt sự kiện, chạm góc ảnh là bấm nhầm "xem nhanh" / "xem chi tiết". Bàn
     phím vẫn Tab tới được vì pointer-events không chặn tiêu điểm. */
  pointer-events: none;
  transition: opacity var(--vm-dur-base) var(--vm-ease-out), transform var(--vm-dur-base) var(--vm-ease-out);
}
.vm-product-card:hover .vm-product-card__actions,
.vm-product-card:focus-within .vm-product-card__actions { opacity: 1; transform: none; pointer-events: auto; }
.vm-product-card__icon-btn {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  color: var(--vm-text-soft);
  box-shadow: var(--vm-shadow-sm);
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-product-card__icon-btn:hover { background: var(--vm-brand); color: #fff; border-color: var(--vm-brand); }
/* G9 — Nới vùng bấm lên 44×44. Nút nằm sát mép phải tấm thẻ mà thẻ lại
   overflow: hidden, nên phần nới ra bên phải sẽ bị cắt; vì vậy chỉ nới về phía
   TRÁI (vào trong thẻ) để đủ 44px bề ngang. Chiều dọc nới đều 3px mỗi bên,
   khoảng cách giữa hai nút là 8px nên không chồng lấn. */
.vm-product-card__icon-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 0;
  translate: 0 -50%;
  width: var(--vm-tap-min);
  height: var(--vm-tap-min);
}
.vm-product-card__icon-btn svg { width: 17px; height: 17px; }
/* M2 — Thiết bị cảm ứng không có trạng thái rê chuột → luôn hiện nút thao tác,
   cỡ 44×44 cho vừa ngón tay. Trước đây chỉ trang chủ có bản vá riêng. */
@media (hover: none) {
  .vm-product-card__actions { opacity: 1; transform: none; pointer-events: auto; }
  .vm-product-card__icon-btn { width: var(--vm-tap-min); height: var(--vm-tap-min); }
}
/* R4 — Lưới 2 cột ở điện thoại: ảnh chỉ ~162×121, cột hai nút 44×96 ở góc trên
   phải che ~22% ảnh. Xếp hai nút thành một hàng ngang ở góc DƯỚI phải (nhãn
   MỚI / BÁO GIÁ nằm góc trên trái nên không đụng), nút nhìn thấy 36px; vùng
   chạm vẫn 44×44 nhờ ::after (G9) — nới 8px về bên trái, đúng bằng khe 8px
   giữa hai nút nên hai vùng chạm không chồng nhau, 4px trên/dưới vẫn nằm trong
   khung ảnh vì hàng nút cách đáy 8px. */
@media (hover: none) and (max-width: 640px) {
  .vm-product-card__actions {
    top: auto; right: var(--vm-space-2); bottom: var(--vm-space-2);
    flex-direction: row;
  }
  .vm-product-card__icon-btn { width: 36px; height: 36px; }
  .vm-product-card__icon-btn svg { width: 16px; height: 16px; }
}
/* R9 — Ở lưới 2 cột (≤640px) ảnh chỉ cao ~118–121px: hai nhãn MỚI + BÁO GIÁ
   xếp dọc chiếm tới y≈76px, còn hàng nút góc dưới bắt đầu từ y≈74px → sát/chồng
   (375px: cách 2.6px; 366px: đè 0.8px). Xếp nhãn thành MỘT hàng ngang (được
   xuống dòng nếu thẻ quá hẹp) và thu nhỏ nhãn một chút: khối nhãn chỉ còn cao
   ~20px (tối đa ~44px khi phải xuống dòng), luôn cách hàng nút ≥ 20px. */
@media (max-width: 640px) {
  .vm-product-card__tags {
    top: var(--vm-space-2); left: var(--vm-space-2);
    flex-direction: row; flex-wrap: wrap; gap: 4px;
    max-width: calc(100% - var(--vm-space-2) * 2);
  }
  .vm-product-card__tags .vm-badge { padding: 0.2rem 0.5rem; letter-spacing: 0.02em; }
}
.vm-product-card__body {
  padding: var(--vm-space-4) var(--vm-space-5) var(--vm-space-5);
  display: flex; flex-direction: column; gap: var(--vm-space-2); flex: 1;
}
.vm-product-card__cat {
  font-size: var(--vm-text-2xs);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-wide);
  text-transform: uppercase;
  color: var(--vm-brand-text);
}
.vm-product-card__title {
  font-size: var(--vm-text-base);
  font-weight: var(--vm-weight-semi);
  line-height: var(--vm-leading-snug);
  min-height: 2.6lh;
}
.vm-product-card__title a { color: var(--vm-text); }
.vm-product-card__title a:hover { color: var(--vm-brand-text); }
.vm-product-card__price {
  margin-top: auto;
  padding-top: var(--vm-space-3);
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-lg);
  font-weight: var(--vm-weight-bold);
  color: var(--vm-cta-text);
}
.vm-product-card__price--contact { color: var(--vm-text-soft); font-size: var(--vm-text-base); }
.vm-product-card__cart { margin-top: var(--vm-space-3); }

/* Thẻ tin tức */
.vm-news-card { display: flex; flex-direction: column; height: 100%; }
.vm-news-card .vm-media { border-radius: var(--vm-radius-lg) var(--vm-radius-lg) 0 0; }
.vm-news-card__date {
  position: absolute; top: var(--vm-space-3); left: var(--vm-space-3);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 12px;
  border-radius: var(--vm-radius-sm);
  background: var(--vm-grad-cta);
  color: #fff;
  line-height: 1.05;
  box-shadow: var(--vm-shadow-md);
}
.vm-news-card__date b { font-family: var(--vm-font-display); font-size: 1.15rem; font-weight: var(--vm-weight-black); }
.vm-news-card__date span { font-size: var(--vm-text-2xs); letter-spacing: var(--vm-tracking-wide); opacity: 0.9; }

/* Thẻ đối tác */
.vm-partner-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--vm-space-3);
  padding: var(--vm-space-6);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  text-align: center;
  transition: all var(--vm-dur-base) var(--vm-ease-out);
}
.vm-partner-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--vm-shadow-lg);
  border-color: color-mix(in srgb, var(--vm-brand) 35%, var(--vm-border));
}
.vm-partner-card__logo {
  width: 100%; height: 90px;
  display: grid; place-items: center;
  background: #fff;
  border-radius: var(--vm-radius-md);
  padding: var(--vm-space-3);
}
.vm-partner-card__logo img { max-height: 100%; width: auto; object-fit: contain; }
.vm-partner-card__name { font-size: var(--vm-text-md); font-weight: var(--vm-weight-bold); }
.vm-partner-card__country { font-size: var(--vm-text-xs); color: var(--vm-text-muted); }

/* Thẻ dịch vụ / lĩnh vực */
.vm-service-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--vm-space-4);
  padding: var(--vm-space-6);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  overflow: hidden;
  transition: all var(--vm-dur-base) var(--vm-ease-out);
}
.vm-service-card::before {
  content: "";
  position: absolute; inset: auto auto 0 0;
  width: 100%; height: 3px;
  /* B2 — Trang trí thuần, KHÔNG có chữ hay biểu tượng nào đè lên, nên giữ được
     bản rực rỡ. Xem --vm-grad-brand-vivid trong tokens.css. */
  background: var(--vm-grad-brand-vivid);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--vm-dur-slow) var(--vm-ease-out);
}
.vm-service-card:hover::before { transform: scaleX(1); }
.vm-service-card:hover { transform: translateY(-5px); box-shadow: var(--vm-shadow-lg); }
.vm-service-card__icon {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: var(--vm-radius-md);
  background: var(--vm-brand-soft);
  transition: all var(--vm-dur-base) var(--vm-ease-out);
}
.vm-service-card__icon img { width: 34px; height: 34px; object-fit: contain; }
.vm-service-card__icon svg { width: 28px; height: 28px; color: var(--vm-brand-text); }
.vm-service-card:hover .vm-service-card__icon { background: var(--vm-brand); }
.vm-service-card:hover .vm-service-card__icon svg { color: #fff; }
.vm-service-card__num {
  position: absolute; top: var(--vm-space-4); right: var(--vm-space-5);
  font-family: var(--vm-font-display);
  font-size: 3rem; font-weight: var(--vm-weight-black);
  line-height: 1;
  color: color-mix(in srgb, var(--vm-brand) 10%, transparent);
}

/* Thẻ giá trị / tính năng */
.vm-feature {
  display: flex; gap: var(--vm-space-4);
  padding: var(--vm-space-5);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  transition: all var(--vm-dur-base) var(--vm-ease-out);
}
.vm-feature:hover { border-color: color-mix(in srgb, var(--vm-brand) 40%, var(--vm-border)); box-shadow: var(--vm-shadow-md); }
.vm-feature__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--vm-radius-md);
  background: var(--vm-brand-soft);
  color: var(--vm-brand-text);
}
.vm-feature__icon svg { width: 24px; height: 24px; }
.vm-feature__title { font-size: var(--vm-text-md); margin-bottom: 4px; }
.vm-feature__desc { font-size: var(--vm-text-sm); color: var(--vm-text-soft); line-height: var(--vm-leading-relaxed); }

/* =====================================================================
   4. CHỈ SỐ / ĐẾM SỐ
   ===================================================================== */
.vm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--vm-space-6);
}
.vm-stat { text-align: center; position: relative; }
.vm-stat__value {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-4xl);
  font-weight: var(--vm-weight-black);
  line-height: 1;
  /* B3 — Dải này làm MÀU CHỮ chứ không làm nền, nên phải tương phản với nền
     trang. Xem --vm-grad-brand-text trong tokens.css. */
  background: var(--vm-grad-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vm-section--dark .vm-stat__value {
  background: linear-gradient(135deg, #ffffff 0%, var(--vm-primary-200) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vm-stat__label {
  margin-top: var(--vm-space-2);
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
  font-weight: var(--vm-weight-medium);
}
.vm-section--dark .vm-stat__label { color: var(--vm-text-on-deep-soft); }

/* =====================================================================
   5. BIỂU MẪU
   ===================================================================== */
.vm-form { display: grid; gap: var(--vm-space-5); }
.vm-form__row { display: grid; gap: var(--vm-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.vm-field { display: flex; flex-direction: column; gap: var(--vm-space-2); }
.vm-field__label {
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
  color: var(--vm-text);
}
.vm-field__label .req { color: var(--vm-cta-text); margin-left: 2px; }
.vm-field__hint { font-size: var(--vm-text-xs); color: var(--vm-text-muted); }
.vm-field__error {
  font-size: var(--vm-text-xs);
  color: var(--vm-danger-600);
  display: none;
  align-items: flex-start; gap: 6px;
  line-height: var(--vm-leading-snug);
}
/* Thiếu dòng này thì SVG bên trong sẽ giãn hết bề ngang cột */
.vm-field__error svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}
.vm-field.is-invalid .vm-field__error { display: flex; }
.vm-field.is-invalid .vm-input,
.vm-field.is-invalid .vm-textarea,
.vm-field.is-invalid .vm-select { border-color: var(--vm-danger-500); }

.vm-input, .vm-textarea, .vm-select {
  width: 100%;
  padding: 0.8rem 1rem;
  min-height: 48px;
  font-size: var(--vm-text-sm);
  background: var(--vm-surface);
  color: var(--vm-text);
  border: 1.5px solid var(--vm-border);
  border-radius: var(--vm-radius-control);
  transition: border-color var(--vm-dur-fast) var(--vm-ease-out),
              box-shadow var(--vm-dur-fast) var(--vm-ease-out),
              background-color var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-input::placeholder, .vm-textarea::placeholder { color: var(--vm-text-muted); }
.vm-input:hover, .vm-textarea:hover, .vm-select:hover { border-color: var(--vm-border-strong); }
.vm-input:focus, .vm-textarea:focus, .vm-select:focus {
  outline: none;
  border-color: var(--vm-brand);
  box-shadow: var(--vm-shadow-focus);
}
.vm-textarea { min-height: 130px; resize: vertical; line-height: var(--vm-leading-normal); }
/* M7 — iOS Safari tự phóng to trang khi chạm vào ô nhập có cỡ chữ dưới 16px,
   và không tự thu lại. Áp cho MỌI ô nhập của site ở màn hình nhỏ / màn cảm ứng
   (kể cả ô bản tin chân trang, ô của trợ lý, ô lọc ở trang sản phẩm).
   :not(#vm-search-input) vừa chừa ô tìm kiếm (đã 18px), vừa đẩy độ ưu tiên lên
   mức mã định danh để thắng các quy tắc theo lớp ở từng trang. */
@media (max-width: 1023px), (pointer: coarse) {
  :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="submit"], [type="button"], [type="file"]), select, textarea):not(#vm-search-input) {
    font-size: 16px;
  }
}
.vm-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d8095' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
  cursor: pointer;
}

/* Ô nhập có biểu tượng */
.vm-input-group { position: relative; display: flex; align-items: center; }
.vm-input-group svg {
  position: absolute; left: 1rem;
  width: 18px; height: 18px;
  color: var(--vm-text-muted);
  pointer-events: none;
}
.vm-input-group .vm-input { padding-left: 2.85rem; }

.vm-check { display: flex; align-items: flex-start; gap: var(--vm-space-3); cursor: pointer; font-size: var(--vm-text-sm); }
.vm-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--vm-brand); cursor: pointer; flex-shrink: 0; }

/* Mã bảo mật */
.vm-captcha { display: flex; align-items: center; gap: var(--vm-space-3); flex-wrap: wrap; }
.vm-captcha__code {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 118px; height: 48px;
  padding-inline: var(--vm-space-4);
  font-family: var(--vm-font-mono);
  font-size: 1.35rem; font-weight: var(--vm-weight-bold);
  letter-spacing: 0.32em;
  color: var(--vm-primary-800);
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(12, 157, 203, 0.09) 6px 12px),
    var(--vm-primary-50);
  border: 1.5px dashed var(--vm-primary-300);
  border-radius: var(--vm-radius-md);
  user-select: none;
  text-decoration: line-through;
  text-decoration-color: rgba(12, 157, 203, 0.35);
}
.vm-captcha__reload {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--vm-radius-md);
  border: 1.5px solid var(--vm-border);
  color: var(--vm-text-soft);
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-captcha__reload:hover { color: var(--vm-brand-text); border-color: var(--vm-brand); transform: rotate(90deg); }
.vm-captcha__reload svg { width: 18px; height: 18px; }
.vm-captcha .vm-input { max-width: 180px; }

/* Bộ đếm số lượng */
.vm-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--vm-border); border-radius: var(--vm-radius-pill); overflow: hidden; }
.vm-qty button {
  width: 42px; height: 44px;
  display: grid; place-items: center;
  color: var(--vm-text-soft);
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-qty button:hover { background: var(--vm-brand-soft); color: var(--vm-brand-text); }
.vm-qty button svg { width: 16px; height: 16px; }
.vm-qty input {
  width: 56px; height: 44px;
  text-align: center;
  border: 0; background: transparent;
  font-weight: var(--vm-weight-semi);
  -moz-appearance: textfield;
}
.vm-qty input::-webkit-outer-spin-button,
.vm-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* =====================================================================
   6. THÔNG BÁO
   ===================================================================== */
.vm-alert {
  display: flex; gap: var(--vm-space-3);
  padding: var(--vm-space-4) var(--vm-space-5);
  border-radius: var(--vm-radius-md);
  border: 1px solid;
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-normal);
}
.vm-alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.vm-alert--info { background: var(--vm-info-50); border-color: color-mix(in srgb, var(--vm-info-500) 30%, transparent); color: var(--vm-info-600); }
.vm-alert--success { background: var(--vm-success-50); border-color: color-mix(in srgb, var(--vm-success-500) 30%, transparent); color: var(--vm-success-700); }
.vm-alert--warning { background: var(--vm-warning-50); border-color: color-mix(in srgb, var(--vm-warning-500) 30%, transparent); color: var(--vm-warning-700); }
.vm-alert--danger { background: var(--vm-danger-50); border-color: color-mix(in srgb, var(--vm-danger-500) 30%, transparent); color: var(--vm-danger-700); }
/* N5 — Chế độ tối: nền -50 (kem/trắng xanh) và chữ -600/-700 của chế độ sáng
   giữ nguyên thì thông báo thành mảng sáng chói giữa nền tối. Đổi sang nền phủ
   mờ 14% sắc màu trên --vm-surface, viền 40%, chữ là nấc -500 pha trắng để đủ
   tương phản trên nền tối. Hai khối phải khai giống hệt nhau (xem tokens.css). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vm-alert--info { background: color-mix(in srgb, var(--vm-info-500) 14%, var(--vm-surface)); border-color: color-mix(in srgb, var(--vm-info-500) 40%, transparent); color: color-mix(in srgb, var(--vm-info-500) 45%, #fff); }
  :root:not([data-theme="light"]) .vm-alert--success { background: color-mix(in srgb, var(--vm-success-500) 14%, var(--vm-surface)); border-color: color-mix(in srgb, var(--vm-success-500) 40%, transparent); color: color-mix(in srgb, var(--vm-success-500) 55%, #fff); }
  :root:not([data-theme="light"]) .vm-alert--warning { background: color-mix(in srgb, var(--vm-warning-500) 14%, var(--vm-surface)); border-color: color-mix(in srgb, var(--vm-warning-500) 40%, transparent); color: color-mix(in srgb, var(--vm-warning-500) 55%, #fff); }
  :root:not([data-theme="light"]) .vm-alert--danger { background: color-mix(in srgb, var(--vm-danger-500) 14%, var(--vm-surface)); border-color: color-mix(in srgb, var(--vm-danger-500) 40%, transparent); color: color-mix(in srgb, var(--vm-danger-500) 45%, #fff); }
}
:root[data-theme="dark"] .vm-alert--info { background: color-mix(in srgb, var(--vm-info-500) 14%, var(--vm-surface)); border-color: color-mix(in srgb, var(--vm-info-500) 40%, transparent); color: color-mix(in srgb, var(--vm-info-500) 45%, #fff); }
:root[data-theme="dark"] .vm-alert--success { background: color-mix(in srgb, var(--vm-success-500) 14%, var(--vm-surface)); border-color: color-mix(in srgb, var(--vm-success-500) 40%, transparent); color: color-mix(in srgb, var(--vm-success-500) 55%, #fff); }
:root[data-theme="dark"] .vm-alert--warning { background: color-mix(in srgb, var(--vm-warning-500) 14%, var(--vm-surface)); border-color: color-mix(in srgb, var(--vm-warning-500) 40%, transparent); color: color-mix(in srgb, var(--vm-warning-500) 55%, #fff); }
:root[data-theme="dark"] .vm-alert--danger { background: color-mix(in srgb, var(--vm-danger-500) 14%, var(--vm-surface)); border-color: color-mix(in srgb, var(--vm-danger-500) 40%, transparent); color: color-mix(in srgb, var(--vm-danger-500) 45%, #fff); }

/* Toast nổi góc màn hình */
.vm-toast-wrap {
  position: fixed;
  right: var(--vm-space-5); bottom: var(--vm-space-5);
  z-index: var(--vm-z-toast);
  display: flex; flex-direction: column; gap: var(--vm-space-3);
  max-width: min(360px, calc(100vw - 2rem));
  pointer-events: none;
}
.vm-toast {
  display: flex; align-items: flex-start; gap: var(--vm-space-3);
  padding: var(--vm-space-4);
  border-radius: var(--vm-radius-md);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  box-shadow: var(--vm-shadow-xl);
  font-size: var(--vm-text-sm);
  pointer-events: auto;
  animation: vm-fade-up var(--vm-dur-slow) var(--vm-ease-spring);
}
.vm-toast.is-leaving { animation: vm-fade-in var(--vm-dur-base) reverse forwards; }
.vm-toast__icon { width: 22px; height: 22px; flex-shrink: 0; }
.vm-toast--success .vm-toast__icon { color: var(--vm-success-600); }
.vm-toast--danger .vm-toast__icon { color: var(--vm-danger-600); }
.vm-toast--info .vm-toast__icon { color: var(--vm-info-600); }
.vm-toast__title { font-weight: var(--vm-weight-semi); margin-bottom: 2px; }
.vm-toast__msg { color: var(--vm-text-soft); font-size: var(--vm-text-xs); }
/* B8 — Nút đóng trước đây chỉ 28×18 thực đo ở 390×844: không khai báo kích thước
   nên hộp co theo đúng svg 16px cộng chút lề dòng, ngón tay bấm trượt. Đây là phần
   tử cuối cùng còn rớt sau đợt nới vùng chạm trước.
   Cố định hộp 22×22 (khớp .vm-toast__icon nên hàng nội dung không xê dịch) rồi nới
   vùng bấm ra 44×44 bằng lớp giả trong suốt — cùng cách đã dùng cho
   .vm-tro-ly__dong và .vm-mnav__toggle. Biểu tượng nhìn thấy vẫn nguyên 16×16.
   Phần nới ra mỗi bên là (44-22)/2 = 11px, NHỎ HƠN padding 16px của .vm-toast,
   nên vùng chạm nằm trọn trong thẻ toast, không thò ra ngoài che mất thứ gì bấm
   được ở dưới — điều phải canh vì khay toast có aria-live và nổi đè lên nội dung. */
.vm-toast__close {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--vm-text-muted);
}
.vm-toast__close::after {
  content: "";
  position: absolute;
  inset: calc((var(--vm-tap-min) - 22px) / -2);
}
.vm-toast__close svg { width: 16px; height: 16px; }

/* =====================================================================
   7. ĐƯỜNG DẪN & PHÂN TRANG
   ===================================================================== */
.vm-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--vm-space-2); font-size: var(--vm-text-sm); }
.vm-breadcrumb li { display: inline-flex; align-items: center; gap: var(--vm-space-2); }
.vm-breadcrumb a { color: inherit; opacity: 0.82; }
.vm-breadcrumb a:hover { opacity: 1; }
.vm-breadcrumb li + li::before {
  content: "";
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
}
.vm-breadcrumb [aria-current="page"] { font-weight: var(--vm-weight-semi); opacity: 1; }
/* M10 — Liên kết đường dẫn chỉ cao 24px, dưới chuẩn vùng chạm. */
@media (max-width: 1023px) {
  .vm-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--vm-tap-min); }
}

.vm-pagination { display: flex; align-items: center; justify-content: center; gap: var(--vm-space-2); flex-wrap: wrap; }
/* .page-numbers là lớp WordPress gắn cho từng ô phân trang; trang đang xem là thẻ
   span nên không nhận kiểu của a/button, phải kể tên ở đây. Cố ý dùng .page-numbers
   thay vì span.page-numbers để độ ưu tiên không cao hơn quy tắc .is-active bên dưới. */
.vm-pagination button, .vm-pagination a, .vm-pagination .page-numbers {
  /* N4 — 44px = --vm-tap-min, đủ vùng chạm tối thiểu trên màn cảm ứng. */
  min-width: var(--vm-tap-min); height: var(--vm-tap-min);
  display: inline-grid; place-items: center;
  padding-inline: var(--vm-space-3);
  border-radius: var(--vm-radius-md);
  border: 1px solid var(--vm-border);
  background: var(--vm-surface);
  color: var(--vm-text-soft);
  font-size: var(--vm-text-sm); font-weight: var(--vm-weight-medium);
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-pagination button:hover:not(:disabled), .vm-pagination a:hover {
  border-color: var(--vm-brand); color: var(--vm-brand-text); background: var(--vm-brand-soft);
}
.vm-pagination .is-active {
  background: var(--vm-brand); border-color: var(--vm-brand); color: var(--vm-text-on-brand);
  box-shadow: var(--vm-shadow-sm);
}
.vm-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.vm-pagination svg { width: 16px; height: 16px; }

/* =====================================================================
   8. TAB & ACCORDION
   ===================================================================== */
.vm-tabs { display: flex; gap: var(--vm-space-1); border-bottom: 1px solid var(--vm-border); overflow-x: auto; scrollbar-width: none; }
.vm-tabs::-webkit-scrollbar { display: none; }
.vm-tab {
  position: relative;
  padding: var(--vm-space-4) var(--vm-space-5);
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
  color: var(--vm-text-soft);
  white-space: nowrap;
  transition: color var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-tab::after {
  content: "";
  position: absolute; left: var(--vm-space-4); right: var(--vm-space-4); bottom: -1px;
  height: 2.5px; border-radius: 3px;
  background: var(--vm-grad-cta);
  transform: scaleX(0);
  transition: transform var(--vm-dur-base) var(--vm-ease-out);
}
.vm-tab:hover { color: var(--vm-text); }
.vm-tab[aria-selected="true"] { color: var(--vm-brand-text); }
.vm-tab[aria-selected="true"]::after { transform: scaleX(1); }
/* M8 — Thanh tab cuộn ngang mà không có dấu hiệu gì: ở 375px tab cuối nằm
   ngoài màn hình, khách không biết còn tab.
   • Tab chi tiết sản phẩm (#pd-tabs, 4 tab cố định): cho xuống dòng để mọi tab
     đều thấy được; mỗi tab giãn đều, vạch chân vẫn theo tab. CHỈ áp trong
     #pd-tabs — áp cho mọi .vm-tabs thì tab lọc trang chủ (5 tab tên dài) thành
     cột 5 hàng cao ~256px.
   • Các thanh tab khác giữ cuộn ngang một hàng; mép còn tab khuất được làm mờ
     (data-fade-start / data-fade-end do JS gắn, xem page-home.js). */
@media (max-width: 1023px) {
  .vm-tab { padding: var(--vm-space-3) var(--vm-space-4); min-height: var(--vm-tap-min); }
  #pd-tabs .vm-tabs { flex-wrap: wrap; overflow-x: visible; }
  #pd-tabs .vm-tab { flex: 1 1 auto; text-align: center; }
}
/* R8 — Làm mờ mép tab khuất áp cho MỌI bề rộng, không chỉ ≤1023px: ở 1024–1099px
   tab lọc trang chủ vẫn tràn (scrollWidth 1011 > khung 963) mà mép phải bị cắt
   cụt không dấu hiệu. Thuộc tính data-fade-* chỉ được JS gắn khi thật sự còn tab
   khuất, nên màn rộng không tràn thì không bị mờ oan. */
.vm-tabs[data-fade-end] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.vm-tabs[data-fade-start] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px);
          mask-image: linear-gradient(to right, transparent, #000 48px);
}
.vm-tabs[data-fade-start][data-fade-end] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.vm-tab-panel { padding-top: var(--vm-space-6); }
.vm-tab-panel[hidden] { display: none; }

.vm-accordion { display: flex; flex-direction: column; gap: var(--vm-space-3); }
.vm-accordion__item {
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-md);
  background: var(--vm-surface);
  overflow: hidden;
  transition: border-color var(--vm-dur-base) var(--vm-ease-out), box-shadow var(--vm-dur-base) var(--vm-ease-out);
}
.vm-accordion__item.is-open { border-color: color-mix(in srgb, var(--vm-brand) 45%, var(--vm-border)); box-shadow: var(--vm-shadow-sm); }
.vm-accordion__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--vm-space-4);
  padding: var(--vm-space-5);
  text-align: left;
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-md);
  font-weight: var(--vm-weight-semi);
  color: var(--vm-text);
  transition: color var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-accordion__btn:hover { color: var(--vm-brand-text); }
.vm-accordion__ico {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--vm-brand-soft);
  color: var(--vm-brand-text);
  transition: transform var(--vm-dur-base) var(--vm-ease-out), background-color var(--vm-dur-base) var(--vm-ease-out);
}
.vm-accordion__ico svg { width: 16px; height: 16px; }
.vm-accordion__item.is-open .vm-accordion__ico { transform: rotate(180deg); background: var(--vm-brand); color: #fff; }
.vm-accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--vm-dur-slow) var(--vm-ease-out); }
.vm-accordion__item.is-open .vm-accordion__panel { grid-template-rows: 1fr; }
.vm-accordion__inner { overflow: hidden; }
.vm-accordion__inner > div {
  padding: 0 var(--vm-space-5) var(--vm-space-5);
  color: var(--vm-text-soft);
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-relaxed);
}

/* =====================================================================
   9. HỘP THOẠI
   ===================================================================== */
.vm-modal {
  position: fixed; inset: 0;
  z-index: var(--vm-z-modal);
  display: grid; place-items: center;
  padding: var(--vm-gutter);
  background: var(--vm-overlay);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--vm-dur-base) var(--vm-ease-out), visibility var(--vm-dur-base);
}
.vm-modal.is-open { opacity: 1; visibility: visible; }
.vm-modal__box {
  width: min(760px, 100%);
  max-height: min(86dvh, 900px);
  overflow: auto;
  background: var(--vm-surface);
  border-radius: var(--vm-radius-xl);
  box-shadow: var(--vm-shadow-xl);
  transform: translateY(24px) scale(0.97);
  transition: transform var(--vm-dur-slow) var(--vm-ease-spring);
}
.vm-modal.is-open .vm-modal__box { transform: none; }
.vm-modal__box--video { width: min(1000px, 100%); background: #000; padding: 0; overflow: hidden; }
.vm-modal__head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--vm-space-4);
  padding: var(--vm-space-5) var(--vm-space-6);
  border-bottom: 1px solid var(--vm-border);
  background: var(--vm-surface);
  z-index: 2;
}
.vm-modal__body { padding: var(--vm-space-6); }
.vm-modal__close {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--vm-text-soft);
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-modal__close:hover { background: var(--vm-danger-50); color: var(--vm-danger-600); }
.vm-modal__close svg { width: 20px; height: 20px; }

/* =====================================================================
   10. TRẠNG THÁI TẢI / RỖNG
   ===================================================================== */
.vm-skeleton {
  background: linear-gradient(100deg,
      var(--vm-bg-muted) 30%,
      color-mix(in srgb, var(--vm-bg-muted) 55%, var(--vm-surface)) 50%,
      var(--vm-bg-muted) 70%);
  background-size: 240% 100%;
  animation: vm-shimmer 1.4s linear infinite;
  border-radius: var(--vm-radius-sm);
}
.vm-skeleton--card { height: 320px; border-radius: var(--vm-radius-lg); }
.vm-skeleton--text { height: 0.9em; margin-block: 0.35em; }
.vm-skeleton--title { height: 1.4em; width: 65%; }

.vm-spinner {
  width: 24px; height: 24px;
  border: 2.5px solid color-mix(in srgb, var(--vm-brand) 25%, transparent);
  border-top-color: var(--vm-brand);
  border-radius: 50%;
  animation: vm-spin 0.75s linear infinite;
}

.vm-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--vm-space-4);
  padding: var(--vm-space-16) var(--vm-space-6);
  text-align: center;
  color: var(--vm-text-soft);
}
.vm-empty__icon {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--vm-bg-muted);
  color: var(--vm-text-muted);
}
.vm-empty__icon svg { width: 38px; height: 38px; }
.vm-empty__title { font-size: var(--vm-text-lg); color: var(--vm-text); }

/* =====================================================================
   11. BĂNG CHUYỀN LOGO (marquee thuần CSS)
   ===================================================================== */
.vm-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.vm-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--vm-space-12);
  animation: vm-marquee var(--vm-marquee-dur, 38s) linear infinite;
}
.vm-marquee:hover .vm-marquee__track { animation-play-state: paused; }
.vm-marquee__item {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 168px; height: 84px;
  padding: var(--vm-space-3);
  background: #fff;
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-md);
  filter: grayscale(1);
  opacity: 0.68;
  transition: filter var(--vm-dur-base) var(--vm-ease-out), opacity var(--vm-dur-base) var(--vm-ease-out), transform var(--vm-dur-base) var(--vm-ease-out);
}
.vm-marquee__item:hover { filter: none; opacity: 1; transform: translateY(-4px); }
.vm-marquee__item img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* =====================================================================
   12. DÒNG THỜI GIAN
   ===================================================================== */
.vm-timeline {
  /* Tâm trục dọc, tính từ mép trái danh sách. Cả đường kẻ lẫn chấm tròn đều
     căn theo đúng một mốc này nên không bao giờ lệch nhau. */
  --vm-timeline-truc: 10px;
  --vm-timeline-cham: 13px;

  position: relative; display: flex; flex-direction: column;
  gap: var(--vm-space-8);
}
/* base.css đặt `ul[class], ol[class] { padding: 0 }` — độ ưu tiên (0,1,1) cao hơn
   `.vm-timeline` (0,1,0), nên phải viết kèm tên thẻ thì khoảng thụt mới ăn.
   Thiếu dòng này, chấm tròn văng ra ngoài trái còn đường kẻ nằm trong cột chữ. */
ol.vm-timeline, ul.vm-timeline { padding-left: var(--vm-space-8); }

.vm-timeline::before {
  content: "";
  position: absolute; left: calc(var(--vm-timeline-truc) - 1px); top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--vm-primary-400), var(--vm-accent-500));
  border-radius: 2px;
}
.vm-timeline__item { position: relative; }
.vm-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--vm-timeline-truc) - var(--vm-space-8) - var(--vm-timeline-cham) / 2);
  top: 6px;
  width: var(--vm-timeline-cham); height: var(--vm-timeline-cham);
  border-radius: 50%;
  background: var(--vm-surface);
  border: 3px solid var(--vm-brand);
  box-shadow: 0 0 0 4px var(--vm-brand-soft);
}
.vm-timeline__year {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm); font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-wide);
  color: var(--vm-cta-text);
}
.vm-timeline__title { font-size: var(--vm-text-md); margin-block: 4px 6px; }
.vm-timeline__desc { font-size: var(--vm-text-sm); color: var(--vm-text-soft); line-height: var(--vm-leading-relaxed); }

/* =====================================================================
   13. BẢNG
   ===================================================================== */
.vm-table-wrap { overflow-x: auto; border: 1px solid var(--vm-border); border-radius: var(--vm-radius-lg); }
.vm-table { width: 100%; font-size: var(--vm-text-sm); border-collapse: collapse; }
.vm-table th, .vm-table td { padding: var(--vm-space-4) var(--vm-space-5); text-align: left; }
.vm-table thead th {
  background: var(--vm-bg-subtle);
  font-family: var(--vm-font-display);
  font-weight: var(--vm-weight-semi);
  color: var(--vm-text);
  white-space: nowrap;
}
.vm-table tbody tr { border-top: 1px solid var(--vm-border-subtle); }
.vm-table tbody tr:hover { background: var(--vm-bg-subtle); }
.vm-table td { color: var(--vm-text-soft); }
.vm-table--specs th { width: 38%; color: var(--vm-text-soft); font-weight: var(--vm-weight-medium); background: transparent; }
.vm-table--specs td { color: var(--vm-text); font-weight: var(--vm-weight-medium); }
.vm-table--specs tbody tr:nth-child(odd) { background: var(--vm-bg-subtle); }
.vm-table--specs tbody tr:hover { background: var(--vm-brand-soft); }

/* =====================================================================
   14. NỘI DUNG BÀI VIẾT (prose)
   ===================================================================== */
.vm-prose { font-size: var(--vm-text-md); line-height: var(--vm-leading-relaxed); color: var(--vm-text-soft); }
.vm-prose > * + * { margin-top: var(--vm-space-5); }
.vm-prose h2 {
  font-size: var(--vm-text-2xl);
  color: var(--vm-text);
  margin-top: var(--vm-space-12);
  padding-left: var(--vm-space-4);
  border-left: 4px solid var(--vm-cta);
}
.vm-prose h3 {
  font-size: var(--vm-text-lg);
  color: var(--vm-text);
  margin-top: var(--vm-space-8);
}
.vm-prose p { color: var(--vm-text-soft); }
.vm-prose strong { color: var(--vm-text); font-weight: var(--vm-weight-semi); }
.vm-prose a { color: var(--vm-brand-text); text-decoration: underline; text-underline-offset: 3px; }
.vm-prose ul, .vm-prose ol { padding-left: var(--vm-space-6); display: flex; flex-direction: column; gap: var(--vm-space-2); }
.vm-prose ul { list-style: none; padding-left: 0; }
.vm-prose ul > li { position: relative; padding-left: var(--vm-space-7); }
.vm-prose ul > li::before {
  content: "";
  position: absolute; left: 0; top: 0.58em;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--vm-grad-cta);
  transform: rotate(45deg);
}
.vm-prose ol { list-style: decimal; }
.vm-prose ol::marker { color: var(--vm-brand-text); font-weight: var(--vm-weight-bold); }
.vm-prose blockquote {
  padding: var(--vm-space-5) var(--vm-space-6);
  border-left: 4px solid var(--vm-brand);
  border-radius: 0 var(--vm-radius-md) var(--vm-radius-md) 0;
  background: var(--vm-brand-soft);
  font-size: var(--vm-text-md);
  font-style: italic;
  color: var(--vm-text);
}
/* Bảng trong bài viết do trình soạn thảo sinh ra, không thể bọc thêm thẻ
   .vm-table-wrap như trang sản phẩm. Vì vậy phải biến chính thẻ <table> thành
   khung cuộn: display:block cho phép overflow-x có tác dụng (bảng ở dạng
   display:table thì overflow bị bỏ qua), còn <thead>/<tbody> bên trong vẫn
   được trình duyệt gói vào một hộp bảng ẩn danh nên các cột vẫn thẳng hàng.
   Không đặt width: max-content — bề rộng tự nhiên của bảng chữ lớn hơn cả
   khung nội dung ở màn hình rộng, sẽ sinh cuộn ngang thừa ở máy tính để bàn. */
.vm-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  font-size: var(--vm-text-sm);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-md);
}
/* Hộp bảng ẩn danh không nhận được width:100% của khối cha, nên ở màn hình
   rộng bảng sẽ co lại chỉ bằng nội dung. Đẩy lại bằng chính <tbody>/<thead>. */
.vm-prose table > thead,
.vm-prose table > tbody,
.vm-prose table > tfoot { min-width: 100%; }
.vm-prose th, .vm-prose td { padding: var(--vm-space-3) var(--vm-space-4); border: 1px solid var(--vm-border-subtle); text-align: left; }
.vm-prose thead th { background: var(--vm-bg-subtle); color: var(--vm-text); font-weight: var(--vm-weight-semi); }
.vm-prose img { border-radius: var(--vm-radius-lg); margin-block: var(--vm-space-6); }

/* Mục lục bài viết */
.vm-toc {
  padding: var(--vm-space-5);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-bg-subtle);
}
.vm-toc__title {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm); font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-wide); text-transform: uppercase;
  color: var(--vm-brand-text);
  margin-bottom: var(--vm-space-3);
}
.vm-toc ol { list-style: none; display: flex; flex-direction: column; gap: var(--vm-space-2); counter-reset: toc; }
.vm-toc li { counter-increment: toc; }
.vm-toc a {
  display: flex; gap: var(--vm-space-2);
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
  line-height: var(--vm-leading-snug);
  padding: 4px 0;
  border-left: 2px solid transparent;
  padding-left: var(--vm-space-3);
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-toc a::before { content: counter(toc) "."; color: var(--vm-brand-text); font-weight: var(--vm-weight-bold); }
.vm-toc a:hover, .vm-toc a.is-active { color: var(--vm-brand-text); border-left-color: var(--vm-brand); }

/* =====================================================================
   15. CHIA SẺ MẠNG XÃ HỘI
   ===================================================================== */
.vm-share { display: flex; align-items: center; gap: var(--vm-space-2); flex-wrap: wrap; }
.vm-share__btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--vm-border);
  color: var(--vm-text-soft);
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-share__btn:hover { transform: translateY(-3px); color: #fff; border-color: transparent; }
.vm-share__btn svg { width: 17px; height: 17px; }
.vm-share__btn[data-net="facebook"]:hover { background: #1877f2; }
.vm-share__btn[data-net="x"]:hover { background: #0f1419; }
.vm-share__btn[data-net="linkedin"]:hover { background: #0a66c2; }
.vm-share__btn[data-net="zalo"]:hover { background: #0068ff; }
.vm-share__btn[data-net="copy"]:hover { background: var(--vm-brand); }

/* =====================================================================
   16. NÚT NỔI: LÊN ĐẦU TRANG & LIÊN HỆ NHANH
   ===================================================================== */
.vm-to-top {
  position: fixed;
  right: var(--vm-space-5); bottom: var(--vm-space-5);
  z-index: var(--vm-z-sticky);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--vm-brand);
  color: #fff;
  box-shadow: var(--vm-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: all var(--vm-dur-base) var(--vm-ease-out);
}
.vm-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.vm-to-top:hover { background: var(--vm-brand-hover); transform: translateY(-3px); }
.vm-to-top svg { width: 20px; height: 20px; }

.vm-quick-contact {
  position: fixed;
  left: var(--vm-space-5); bottom: var(--vm-space-5);
  z-index: var(--vm-z-sticky);
  display: flex; flex-direction: column; gap: var(--vm-space-3);
}
.vm-quick-contact__list { display: flex; flex-direction: column; gap: var(--vm-space-3); }
/* Nút gộp chỉ dùng ở màn hình ≤1023px (xem cuối mục này) */
.vm-quick-contact__toggle { display: none; }
.vm-quick-contact__btn {
  position: relative;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  box-shadow: var(--vm-shadow-lg);
  transition: transform var(--vm-dur-base) var(--vm-ease-spring);
}
.vm-quick-contact__btn:hover { transform: scale(1.1); color: #fff; }
.vm-quick-contact__btn svg { width: 23px; height: 23px; }
.vm-quick-contact__btn--phone { background: var(--vm-cta); animation: vm-pulse-ring 2.4s var(--vm-ease-out) infinite; }
.vm-quick-contact__btn--zalo { background: #0068ff; }
.vm-quick-contact__btn--fb { background: #1877f2; }
.vm-quick-contact__btn--mail { background: var(--vm-primary-600); }
.vm-quick-contact__label {
  position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(-8px);
  padding: 6px 12px;
  border-radius: var(--vm-radius-sm);
  background: var(--vm-neutral-900);
  color: #fff;
  font-size: var(--vm-text-xs);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: all var(--vm-dur-base) var(--vm-ease-out);
}
.vm-quick-contact__btn:hover .vm-quick-contact__label { opacity: 1; transform: translateY(-50%); }

/* M1 — Màn hình ≤1023px: trước đây ba nút liên hệ dựng thành hàng ngang
   156×44px (≤640) hoặc cột dọc 50×174px (641–1023) ở đáy màn hình, đè lên chữ
   thẻ "17+" trang chủ, nút "Gửi yêu cầu báo giá" ở giỏ hàng và ba liên kết cuối
   chân trang. Nay gộp thành MỘT nút tròn 48px; bấm vào mới bung ba nút lên phía
   trên kèm nhãn chữ (app.js → initQuickContact). Toàn bộ nút nổi ở màn hình này
   nằm trên MỘT hàng đáy: [liên hệ] ……… [lên đầu trang][trợ lý] — chiều cao vùng
   bị che chỉ còn bằng nút trợ lý, chân trang chừa đúng khoảng đó (layout.css). */
@media (max-width: 1023px) {
  .vm-quick-contact { left: var(--vm-space-4); bottom: var(--vm-space-4); }
  .vm-quick-contact__toggle {
    position: relative;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--vm-cta);
    color: #fff;
    box-shadow: var(--vm-shadow-lg);
    animation: vm-pulse-ring 2.4s var(--vm-ease-out) infinite;
  }
  .vm-quick-contact__toggle svg { width: 22px; height: 22px; }
  .vm-quick-contact__ico-dong { display: none; }
  .vm-quick-contact.is-open .vm-quick-contact__toggle { animation: none; background: var(--vm-neutral-800); }
  .vm-quick-contact.is-open .vm-quick-contact__ico-mo { display: none; }
  .vm-quick-contact.is-open .vm-quick-contact__ico-dong { display: block; }

  /* Danh sách nằm ngay trên nút gộp; lúc gập thì ẩn hẳn (visibility) để không
     còn nhận chạm hay tiêu điểm. */
  .vm-quick-contact__list {
    position: absolute; left: 2px; bottom: calc(100% + var(--vm-space-3));
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--vm-dur-base) var(--vm-ease-out),
                transform var(--vm-dur-base) var(--vm-ease-out),
                visibility 0s linear var(--vm-dur-base);
  }
  .vm-quick-contact.is-open .vm-quick-contact__list {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--vm-dur-base) var(--vm-ease-out),
                transform var(--vm-dur-base) var(--vm-ease-out),
                visibility 0s linear 0s;
  }
  .vm-quick-contact__btn { width: var(--vm-tap-min); height: var(--vm-tap-min); }
  .vm-quick-contact__btn--phone { animation: none; }
  /* Đã bung ra thì hiện luôn nhãn chữ — máy cảm ứng không có trạng thái rê chuột. */
  .vm-quick-contact.is-open .vm-quick-contact__label { opacity: 1; transform: translateY(-50%); }

  /* Nút lên đầu trang đứng cạnh nút trợ lý trên cùng hàng đáy (vị trí chi tiết
     ở tro-ly.css), không chồng lên phía trên nó nữa. */
  .vm-to-top { width: var(--vm-tap-min); height: var(--vm-tap-min); }

  /* R5 — Đang gõ vào biểu mẫu trong trang (giỏ hàng, liên hệ, ứng tuyển…) thì
     bàn phím ảo đã chiếm nửa dưới màn hình, hàng nút nổi còn đè lên ô nhập và
     nút gửi. Tạm ẩn cả hàng khi một ô nhập trong <main> đang có tiêu điểm; rời
     ô là hiện lại. Giới hạn trong <main> để ô nhập của chính khung trợ lý
     (nằm ngoài <main>) không tự ẩn khung của nó. */
  body:has(main :is(input, textarea, select):focus) :is(.vm-quick-contact, .vm-to-top, .vm-tro-ly) {
    opacity: 0; visibility: hidden; pointer-events: none;
  }

  /* Toast bay lên TRÊN hàng nút nổi thay vì nằm đè lên chúng. */
  .vm-toast-wrap {
    right: var(--vm-space-4); left: var(--vm-space-4);
    bottom: calc(var(--vm-space-5) + var(--vm-tl-nut-size) + var(--vm-space-3));
    max-width: none;
    align-items: flex-end;
  }
}
@media (max-width: 640px) {
  .vm-toast-wrap { bottom: calc(var(--vm-space-4) + var(--vm-tl-nut-size-sm) + var(--vm-space-3)); }
}
/* Màn hình rộng: toast dạt sang TRÁI cột nút trợ lý / lên đầu trang ở góc phải,
   trước đây nó nằm đúng chỗ nút trợ lý. */
@media (min-width: 1024px) {
  .vm-toast-wrap { right: calc(var(--vm-space-5) + var(--vm-tl-nut-size) + var(--vm-space-4)); }
}

/* =====================================================================
   17. THANH TIẾN TRÌNH ĐỌC
   ===================================================================== */
.vm-read-progress {
  position: fixed; top: 0; left: 0;
  z-index: calc(var(--vm-z-header) + 1);
  height: 3px;
  width: 0;
  background: var(--vm-grad-cta);
  transition: width 80ms linear;
}