/* =====================================================================
   VINAMEDICAL — Layout: thanh trên, header, mega menu, drawer, tìm kiếm,
   hero trang con, footer.
   Phụ thuộc: tokens.css, base.css, components.css
   ===================================================================== */

/* =====================================================================
   1. THANH THÔNG TIN TRÊN CÙNG
   ===================================================================== */
.vm-topbar {
  background: var(--vm-grad-deep);
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--vm-text-xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.vm-topbar__inner {
  min-height: var(--vm-topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--vm-space-6);
}
.vm-topbar__list { display: flex; align-items: center; gap: var(--vm-space-6); flex-wrap: wrap; }
.vm-topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.vm-topbar__item svg { width: 14px; height: 14px; color: var(--vm-primary-300); }
.vm-topbar a { color: inherit; }
.vm-topbar a:hover { color: #fff; }
.vm-topbar__socials { display: flex; align-items: center; gap: var(--vm-space-2); }
.vm-topbar__social {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-topbar__social:hover { background: var(--vm-cta); transform: translateY(-2px); }
.vm-topbar__social svg { width: 13px; height: 13px; }

/* Màn hẹp: trước đây ẩn hẳn thanh này nên điện thoại mất giờ làm việc và hotline
   ở đầu trang. Giữ một hàng gọn: giờ làm việc bên trái, hotline (+ ngôn ngữ, MXH
   khi còn chỗ) bên phải. Địa chỉ và email đã có ở menu và chân trang. */
@media (max-width: 900px) {
  .vm-topbar__inner { gap: var(--vm-space-3); min-height: 34px; }
  .vm-topbar__list { gap: var(--vm-space-3); flex-wrap: nowrap; }
  .vm-topbar__item { white-space: nowrap; }
  .vm-topbar__item--addr, .vm-topbar__item--mail { display: none; }
}
@media (max-width: 560px) {
  .vm-topbar__list > .vm-lang, .vm-topbar__socials { display: none; }
}
@media (max-width: 400px) {
  .vm-topbar { font-size: 11px; }
  .vm-topbar__lbl { display: none; }
}

/* =====================================================================
   2. HEADER CHÍNH
   ===================================================================== */
.vm-header {
  position: sticky; top: 0;
  z-index: var(--vm-z-header);
  background: var(--vm-surface);
  border-bottom: 1px solid var(--vm-border);
  transition: box-shadow var(--vm-dur-base) var(--vm-ease-out),
              background-color var(--vm-dur-base) var(--vm-ease-out);
}
.vm-header.is-stuck {
  box-shadow: var(--vm-shadow-md);
  background: var(--vm-glass);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
}
.vm-header__inner {
  min-height: var(--vm-header-h);
  display: flex; align-items: center; gap: var(--vm-space-6);
  transition: min-height var(--vm-dur-base) var(--vm-ease-out);
}
.vm-header.is-stuck .vm-header__inner { min-height: var(--vm-header-h-scrolled); }

/* Logo — ảnh gốc 255×65 đã gồm biểu tượng + chữ + khẩu hiệu */
.vm-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.vm-logo img {
  height: 46px; width: auto; object-fit: contain;
  transition: height var(--vm-dur-base) var(--vm-ease-out);
}
.vm-header.is-stuck .vm-logo img { height: 40px; }
@media (max-width: 420px) { .vm-logo img { height: 38px; } }

/* Trong chế độ tối, logo nền trắng cần một tấm nền sáng để chữ xanh không chìm */
:root[data-theme="dark"] .vm-header .vm-logo img,
:root[data-theme="dark"] .vm-drawer .vm-logo img {
  background: #fff;
  border-radius: var(--vm-radius-sm);
  padding: 5px 9px;
  height: 52px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vm-header .vm-logo img,
  :root:not([data-theme="light"]) .vm-drawer .vm-logo img {
    background: #fff;
    border-radius: var(--vm-radius-sm);
    padding: 5px 9px;
    height: 52px;
  }
}

/* Điều hướng chính */
.vm-nav { margin-left: auto; }
.vm-nav__list { display: flex; align-items: center; gap: var(--vm-space-1); }
.vm-nav__item { position: relative; }
.vm-nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: var(--vm-space-3) var(--vm-space-4);
  border-radius: var(--vm-radius-sm);
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
  color: var(--vm-text);
  white-space: nowrap;
  transition: color var(--vm-dur-fast) var(--vm-ease-out), background-color var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-nav__link svg { width: 15px; height: 15px; transition: transform var(--vm-dur-base) var(--vm-ease-out); }
.vm-nav__link::after {
  content: "";
  position: absolute; left: var(--vm-space-4); right: var(--vm-space-4); bottom: 6px;
  height: 2px; border-radius: 2px;
  background: var(--vm-grad-cta);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--vm-dur-base) var(--vm-ease-out);
}
.vm-nav__link:hover { color: var(--vm-brand-text); }
.vm-nav__item:hover > .vm-nav__link::after,
.vm-nav__link.is-active::after { transform: scaleX(1); }
.vm-nav__link.is-active { color: var(--vm-brand-text); }
.vm-nav__item:hover > .vm-nav__link svg { transform: rotate(180deg); }

/* M3 — .vm-nav mang margin-left: auto để đẩy cụm nút sang phải; ẩn nó đi thì
   cụm nút dạt về giữa (đo ở 375px: mép phải cụm nút 325 thay vì 359). Chuyển
   margin-left: auto sang chính cụm nút. */
@media (max-width: 1100px) {
  .vm-nav { display: none; }
  .vm-header__actions { margin-left: auto; }
}

/* Menu thả xuống thường */
.vm-dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  z-index: var(--vm-z-dropdown);
  min-width: 250px;
  padding: var(--vm-space-2);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  box-shadow: var(--vm-shadow-xl);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: all var(--vm-dur-base) var(--vm-ease-out);
}
.vm-nav__item:hover > .vm-dropdown,
.vm-nav__item:focus-within > .vm-dropdown { opacity: 1; visibility: visible; transform: none; }
.vm-dropdown a {
  display: flex; align-items: center; gap: var(--vm-space-3);
  padding: var(--vm-space-3) var(--vm-space-4);
  border-radius: var(--vm-radius-sm);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-medium);
  color: var(--vm-text-soft);
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-dropdown a:hover { background: var(--vm-brand-soft); color: var(--vm-brand-text); padding-left: var(--vm-space-5); }
/* Kích thước biểu tượng trong bảng thả xuống, khớp với megamenu (18px).
   Thiếu quy tắc này, SVG không có width/height sẽ giãn chiếm hết chỗ của flex item. */
.vm-dropdown a svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Lớp đệm trong suốt lấp khoảng hở 10px giữa nút menu và bảng thả xuống.
   Không có nó, chuột rê từ nút xuống bảng sẽ băng qua vùng chết, mất trạng
   thái :hover khiến bảng chớp tắt. */
.vm-dropdown::before {
  content: "";
  position: absolute;
  top: -22px; left: 0; right: 0; height: 22px;
}

/* Mega menu sản phẩm */
.vm-mega {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: var(--vm-z-dropdown);
  width: min(1080px, calc(100vw - 3rem));
  padding: var(--vm-space-6);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-xl);
  box-shadow: var(--vm-shadow-xl);
  opacity: 0; visibility: hidden;
  transition: all var(--vm-dur-base) var(--vm-ease-out);
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--vm-space-6);
}
.vm-nav__item:hover > .vm-mega,
.vm-nav__item:focus-within > .vm-mega {
  opacity: 1; visibility: visible;
  transform: translateX(-50%);
}
/* Mega menu canh giữa theo mục "Sản phẩm" chứ không theo màn hình. Ở 1101–1299px
   mục đó lệch phải (tâm ở 100vw − 532px) nên bảng rộng 1080px thò ra mép phải
   8px — bị cắt và sinh thanh cuộn ngang (đo tại 1280: phải = 1288). Thu bảng
   về 1030px ở khoảng này để còn chừa ~16px với mép phải. */
@media (max-width: 1299px) {
  .vm-mega { width: min(1030px, calc(100vw - 3rem)); }
}
.vm-mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vm-space-1); }
.vm-mega__link {
  display: flex; align-items: center; gap: var(--vm-space-3);
  padding: var(--vm-space-3);
  border-radius: var(--vm-radius-md);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-medium);
  color: var(--vm-text-soft);
  line-height: var(--vm-leading-snug);
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-mega__link:hover { background: var(--vm-brand-soft); color: var(--vm-brand-text); }
.vm-mega__ico {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--vm-radius-sm);
  background: var(--vm-bg-muted);
  color: var(--vm-brand-text);
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-mega__ico svg { width: 18px; height: 18px; }
.vm-mega__link:hover .vm-mega__ico { background: var(--vm-brand); color: #fff; }
.vm-mega__promo {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--vm-space-3);
  padding: var(--vm-space-5);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-grad-deep);
  color: #fff;
  overflow: hidden;
}
/* B6 — Hai bộ chọn này trước đây bắt theo TÊN THẺ (h4 / p), nên đổi thẻ trong
   header.php là mất sạch kiểu dáng — chính vì vướng chỗ này mà thẻ h4 sai cấp
   tiêu đề bị để nguyên ở đợt trước. Nay bắt theo LỚP, giống cách .vm-footer__title
   đã làm, để lần sau sửa ngữ nghĩa HTML không còn phải đánh đổi giao diện.
   Tiêu đề khối nay là <p> nên không còn thừa hưởng gì từ khối h1–h6 trong
   base.css; phải chép lại đủ bốn thuộc tính đó để hình thức không xê dịch một
   pixel: display 700 / 1.12 / -0.02em / balance, đúng số đo trước khi sửa
   (18px, 700, 20.16px, -0.36px tại 1440px). */
.vm-mega__promo-title {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-md);
  font-weight: var(--vm-weight-bold);
  line-height: var(--vm-leading-tight);
  letter-spacing: var(--vm-tracking-tight);
  text-wrap: balance;
  color: #fff;
}
.vm-mega__promo-desc { font-size: var(--vm-text-xs); color: rgba(255, 255, 255, 0.78); line-height: var(--vm-leading-normal); }
.vm-mega__promo::before {
  content: "";
  position: absolute; right: -40px; top: -40px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--vm-accent-500) 45%, transparent);
  filter: blur(38px);
}

/* Hành động bên phải header */
.vm-header__actions { display: flex; align-items: center; gap: var(--vm-space-2); flex-shrink: 0; }
.vm-icon-btn {
  position: relative;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--vm-radius-md);
  color: var(--vm-text-soft);
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
/* Máy tính bảng cảm ứng (561–1023px) còn nút 42px, gồm cả nút × của ngăn kéo:
   nâng đủ vùng chạm 44px như ở điện thoại. */
@media (max-width: 1023px), (pointer: coarse) {
  .vm-icon-btn { width: var(--vm-tap-min); height: var(--vm-tap-min); }
}
.vm-icon-btn:hover { background: var(--vm-surface-hover); color: var(--vm-brand-text); }
.vm-icon-btn svg { width: 20px; height: 20px; }
.vm-icon-btn__count {
  position: absolute; top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  padding-inline: 4px;
  display: grid; place-items: center;
  border-radius: var(--vm-radius-pill);
  background: var(--vm-cta);
  color: #fff;
  font-size: 10px; font-weight: var(--vm-weight-bold);
  line-height: 1;
  border: 2px solid var(--vm-surface);
}
.vm-icon-btn__count:empty, .vm-icon-btn__count[data-count="0"] { display: none; }

.vm-header__cta { margin-left: var(--vm-space-2); }
@media (max-width: 1280px) { .vm-header__cta { display: none; } }

/* Màn hình rất hẹp: thu nhỏ cụm nút để tổng bề ngang không vượt 360px.
   Nút chuyển sáng/tối được chuyển xuống chân ngăn kéo điều hướng. */
@media (max-width: 560px) {
  .vm-header__inner { gap: var(--vm-space-3); }
  .vm-header__actions { gap: var(--vm-space-1); }
  /* G9 — Trước đây thu xuống 38×38 cho vừa màn 360px, nhưng đo lại thì hàng
     này vẫn còn dư chỗ: ở 360px chỉ hiện 3 nút, 3×44 + 2 khoảng cách 4px = 140px,
     cộng ô chữ 149px và khoảng cách 12px là 301px, vẫn nằm gọn trong 328px nội
     dung. Nới lại đúng chuẩn vùng chạm 44×44 thay vì phải vá bằng lớp giả. */
  .vm-icon-btn { width: var(--vm-tap-min); height: var(--vm-tap-min); }
  .vm-icon-btn svg { width: 18px; height: 18px; }
  .vm-header__actions > .vm-theme-toggle { display: none; }
}

.vm-burger { display: none; }
@media (max-width: 1100px) { .vm-burger { display: grid; } }

/* Biểu tượng ba gạch có hoạt cảnh */
.vm-burger__box { width: 20px; height: 14px; position: relative; }
.vm-burger__box span {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: all var(--vm-dur-base) var(--vm-ease-out);
}
.vm-burger__box span:nth-child(1) { top: 0; }
.vm-burger__box span:nth-child(2) { top: 6px; }
.vm-burger__box span:nth-child(3) { top: 12px; }
.vm-burger[aria-expanded="true"] .vm-burger__box span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.vm-burger[aria-expanded="true"] .vm-burger__box span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.vm-burger[aria-expanded="true"] .vm-burger__box span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* =====================================================================
   3. NGĂN KÉO ĐIỀU HƯỚNG (mobile)
   ===================================================================== */
.vm-drawer-backdrop {
  position: fixed; inset: 0;
  z-index: calc(var(--vm-z-drawer) - 1);
  background: var(--vm-overlay);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: all var(--vm-dur-base) var(--vm-ease-out);
}
.vm-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.vm-drawer {
  position: fixed; top: 0; right: 0;
  z-index: var(--vm-z-drawer);
  width: min(400px, 88vw);
  height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--vm-surface);
  box-shadow: var(--vm-shadow-xl);
  transform: translateX(100%);
  /* G7 — Lúc đóng, ngăn kéo chỉ bị đẩy ra ngoài màn hình chứ vẫn "hiện", nên
     ~35 liên kết vô hình vẫn nhận tiêu điểm khi gõ Tab. visibility: hidden gỡ
     hẳn chúng khỏi luồng Tab (đúng cách .vm-search-overlay đang làm).
     transition-delay giữ nguyên hiệu ứng trượt: lúc đóng, visibility chỉ đổi
     sau khi trượt xong; lúc mở thì đổi ngay (delay 0s ở quy tắc .is-open). */
  visibility: hidden;
  transition: transform var(--vm-dur-slow) var(--vm-ease-out),
              visibility 0s linear var(--vm-dur-slow);
}
.vm-drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform var(--vm-dur-slow) var(--vm-ease-out),
              visibility 0s linear 0s;
}
.vm-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--vm-space-4) var(--vm-space-5);
  border-bottom: 1px solid var(--vm-border);
  flex-shrink: 0;
}
.vm-drawer__body { flex: 1; overflow-y: auto; padding: var(--vm-space-4) var(--vm-space-5); }
.vm-drawer__foot {
  padding: var(--vm-space-5);
  border-top: 1px solid var(--vm-border);
  background: var(--vm-bg-subtle);
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: var(--vm-space-3);
}
/* G14 — Máy thấp (đo tại 360×640: đầu 71 + thân 305 + chân 264) thì chân cố
   định nuốt 41% màn hình, phần điều hướng chỉ còn 305px. Co chân lại.
   M4 — Trước đây còn ẩn luôn khối liên hệ, nay khối đó mang cả giờ làm việc và
   mạng xã hội (thanh trên cùng ẩn ở ≤900px) nên không được mất. Thay vào đó cả
   ngăn kéo cuộn chung một khối: phần điều hướng được trọn chiều cao màn hình,
   cuộn xuống là tới chân với đủ thông tin liên hệ. */
@media (max-height: 700px) {
  .vm-drawer { overflow-y: auto; overscroll-behavior: contain; }
  .vm-drawer__body { flex: 0 0 auto; overflow: visible; }
  /* Cả ngăn kéo cuộn chung nên đầu ngăn kéo (logo + nút ×) phải dính trên cùng,
     nếu không cuộn xuống là mất nút đóng. Nền --vm-surface trùng nền ngăn kéo và
     tự đổi theo chế độ tối (tokens.css), không để chữ phía dưới lộ qua. */
  .vm-drawer__head { position: sticky; top: 0; z-index: 1; background: var(--vm-surface); }
  .vm-drawer__foot { padding: var(--vm-space-3) var(--vm-space-5); gap: var(--vm-space-2); }
}

/* Xếp dạng dòng chảy (wrap) chứ không một mục một hàng: thêm giờ làm việc và
   mạng xã hội mà vẫn chỉ tốn hai hàng — hotline + email, giờ + biểu tượng —
   để chân ngăn kéo không nuốt mất chỗ của phần điều hướng. */
.vm-drawer__contact { font-size: var(--vm-text-xs); color: var(--vm-text-soft); display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--vm-space-5); row-gap: 0; }
.vm-drawer__contact span { display: flex; align-items: center; gap: 8px; }
.vm-drawer__contact svg { width: 14px; height: 14px; color: var(--vm-brand-text); }
/* M10 — Hotline / email trong chân ngăn kéo chỉ cao 20px; nâng lên 44px. */
.vm-drawer__contact a { display: inline-flex; align-items: center; min-height: var(--vm-tap-min); }
.vm-drawer__gio { min-height: var(--vm-tap-min); }
/* M4 — Mạng xã hội lấy từ thanh trên cùng (ẩn ở ≤900px) sang chân ngăn kéo. */
.vm-drawer__contact .vm-drawer__socials { gap: var(--vm-space-2); }
.vm-drawer__social {
  width: var(--vm-tap-min); height: var(--vm-tap-min);
  justify-content: center;
  border-radius: 50%;
  background: var(--vm-bg-muted);
  color: var(--vm-brand-text);
}
.vm-drawer__social:hover { background: var(--vm-brand); color: #fff; }
.vm-drawer__contact .vm-drawer__social svg { width: 18px; height: 18px; color: inherit; }

.vm-mnav { display: flex; flex-direction: column; }
.vm-mnav__item { border-bottom: 1px solid var(--vm-border-subtle); }
.vm-mnav__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--vm-space-3);
  width: 100%;
  padding: var(--vm-space-4) 0;
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-md);
  font-weight: var(--vm-weight-semi);
  color: var(--vm-text);
  text-align: left;
}
.vm-mnav__link:hover, .vm-mnav__link.is-active { color: var(--vm-brand-text); }
.vm-mnav__toggle {
  position: relative;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--vm-bg-muted);
  color: var(--vm-text-soft);
  flex-shrink: 0;
  transition: all var(--vm-dur-base) var(--vm-ease-out);
}
/* G9 — Nới vùng bấm lên 44×44 bằng lớp giả, hình thức vẫn là vòng tròn 30×30. */
.vm-mnav__toggle::after {
  content: "";
  position: absolute;
  inset: calc((var(--vm-tap-min) - 30px) / -2);
}
.vm-mnav__toggle svg { width: 15px; height: 15px; }
.vm-mnav__item.is-open .vm-mnav__toggle { transform: rotate(180deg); background: var(--vm-brand); color: #fff; }
/* G7 — Nhóm con đang gập cao 0 nhưng liên kết bên trong vẫn nhận tiêu điểm.
   Ẩn hẳn bằng visibility, hoãn tới khi hiệu ứng gập xong để không mất hoạt cảnh. */
.vm-mnav__sub {
  display: grid; grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--vm-dur-slow) var(--vm-ease-out),
              visibility 0s linear var(--vm-dur-slow);
}
.vm-mnav__item.is-open .vm-mnav__sub {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--vm-dur-slow) var(--vm-ease-out),
              visibility 0s linear 0s;
}
.vm-mnav__sub > div { overflow: hidden; }
/* :not(.vm-btn) — chừa nút "Nhận tư vấn" trong khối gợi ý tư vấn (M5). */
.vm-mnav__sub a:not(.vm-btn) {
  display: block;
  padding: var(--vm-space-3) 0 var(--vm-space-3) var(--vm-space-5);
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
  border-left: 2px solid var(--vm-border);
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-mnav__sub a:not(.vm-btn):hover { color: var(--vm-brand-text); border-left-color: var(--vm-brand); padding-left: var(--vm-space-6); }
.vm-mnav__sub > div > *:last-child { margin-bottom: var(--vm-space-3); }
/* M5 — Danh mục sản phẩm trong ngăn kéo mang cùng biểu tượng với mega menu. */
.vm-mnav__sub a.vm-mnav__sub-ico { display: flex; align-items: center; gap: var(--vm-space-3); padding-block: var(--vm-space-2); }
.vm-mnav__ico {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--vm-radius-sm);
  background: var(--vm-bg-muted);
  color: var(--vm-brand-text);
}
.vm-mnav__ico svg { width: 16px; height: 16px; }
/* M5 — Bản gọn của khối "Cần tư vấn cấu hình thiết bị?" trong mega menu. */
.vm-mnav__promo {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--vm-space-3);
  margin-top: var(--vm-space-2);
  padding: var(--vm-space-3) var(--vm-space-4);
  border-radius: var(--vm-radius-md);
  background: var(--vm-grad-deep);
}
.vm-mnav__promo-title {
  flex: 1 1 10rem;
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
  line-height: var(--vm-leading-snug);
  color: #fff;
}
.vm-mnav__promo .vm-btn { flex-shrink: 0; }
.vm-mnav__promo .vm-btn svg { width: 15px; height: 15px; }

/* =====================================================================
   4. LỚP PHỦ TÌM KIẾM
   ===================================================================== */
.vm-search-overlay {
  position: fixed; inset: 0;
  z-index: var(--vm-z-modal);
  background: var(--vm-overlay);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: all var(--vm-dur-base) var(--vm-ease-out);
  padding-top: 12vh;
}
.vm-search-overlay.is-open { opacity: 1; visibility: visible; }
.vm-search-overlay__box {
  width: min(720px, calc(100vw - 2rem));
  margin-inline: auto;
  background: var(--vm-surface);
  border-radius: var(--vm-radius-xl);
  box-shadow: var(--vm-shadow-xl);
  overflow: hidden;
  transform: translateY(-20px) scale(0.98);
  transition: transform var(--vm-dur-slow) var(--vm-ease-spring);
}
.vm-search-overlay.is-open .vm-search-overlay__box { transform: none; }
.vm-search-overlay__field {
  display: flex; align-items: center; gap: var(--vm-space-3);
  padding: var(--vm-space-5) var(--vm-space-6);
  border-bottom: 1px solid var(--vm-border);
  transition: box-shadow var(--vm-dur-fast) var(--vm-ease-out),
              border-color var(--vm-dur-fast) var(--vm-ease-out);
}
/* G8 — Ô nhập bỏ outline mà không có gì thay thế, lại không viền không nền nên
   người dùng bàn phím mất dấu hoàn toàn (WCAG 2.4.7). Vẽ vòng tiêu điểm lên cả
   hàng chứa ô, giống cách .vm-input đang làm với --vm-shadow-focus. */
.vm-search-overlay__field:focus-within {
  border-bottom-color: var(--vm-brand);
  box-shadow: inset var(--vm-shadow-focus);
}
.vm-search-overlay__field svg { width: 22px; height: 22px; color: var(--vm-text-muted); flex-shrink: 0; }
.vm-search-overlay__field input {
  flex: 1;
  border: 0; background: transparent;
  font-size: var(--vm-text-lg);
  font-family: var(--vm-font-display);
  font-weight: var(--vm-weight-medium);
}
.vm-search-overlay__field input:focus { outline: none; }
.vm-search-overlay__kbd {
  padding: 3px 8px;
  border-radius: var(--vm-radius-xs);
  border: 1px solid var(--vm-border);
  background: var(--vm-bg-muted);
  font-family: var(--vm-font-mono);
  font-size: var(--vm-text-2xs);
  color: var(--vm-text-muted);
}
.vm-search-overlay__kbd .vm-search-overlay__x { display: none; }
/* M9 — Máy cảm ứng không có phím mũi tên / Enter / Esc: bỏ dòng gợi ý phím, và
   thay nút chữ "ESC" 37×27 bằng dấu × đủ vùng chạm 44×44. */
@media (hover: none), (max-width: 640px) {
  /* Viết kèm lớp cha để thắng quy tắc .vm-search-overlay__foot đứng sau trong tệp. */
  .vm-search-overlay .vm-search-overlay__foot { display: none; }
  .vm-search-overlay__field { padding: var(--vm-space-3) var(--vm-space-3) var(--vm-space-3) var(--vm-space-5); }
  .vm-search-overlay__kbd {
    width: var(--vm-tap-min); height: var(--vm-tap-min);
    flex-shrink: 0;
    display: grid; place-items: center;
    padding: 0;
    border-radius: 50%;
  }
  .vm-search-overlay__kbd .vm-search-overlay__esc { display: none; }
  .vm-search-overlay__kbd .vm-search-overlay__x { display: block; width: 20px; height: 20px; color: var(--vm-text-soft); }
}
.vm-search-overlay__results { max-height: min(52vh, 460px); overflow-y: auto; padding: var(--vm-space-3); }
.vm-search-result {
  display: flex; align-items: center; gap: var(--vm-space-4);
  padding: var(--vm-space-3);
  border-radius: var(--vm-radius-md);
  transition: background-color var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-search-result:hover, .vm-search-result.is-active { background: var(--vm-brand-soft); }
.vm-search-result__img {
  width: 52px; height: 52px;
  flex-shrink: 0;
  border-radius: var(--vm-radius-sm);
  background: #fff;
  border: 1px solid var(--vm-border);
  object-fit: contain;
  padding: 4px;
}
.vm-search-result__title { font-size: var(--vm-text-sm); font-weight: var(--vm-weight-semi); color: var(--vm-text); line-height: var(--vm-leading-snug); }
.vm-search-result__cat { font-size: var(--vm-text-xs); color: var(--vm-text-muted); }
.vm-search-overlay__foot {
  padding: var(--vm-space-3) var(--vm-space-6);
  border-top: 1px solid var(--vm-border);
  background: var(--vm-bg-subtle);
  font-size: var(--vm-text-xs);
  color: var(--vm-text-muted);
  display: flex; gap: var(--vm-space-5); flex-wrap: wrap;
}

/* =====================================================================
   5. HERO TRANG CON
   ===================================================================== */
.vm-page-hero {
  position: relative;
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
  background: var(--vm-grad-deep);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.vm-page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 70% 90% at 20% 0%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 20% 0%, #000 10%, transparent 70%);
}
.vm-page-hero::after {
  content: "";
  position: absolute; right: -6%; top: -60%; z-index: -1;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--vm-accent-500) 42%, transparent), transparent 68%);
  filter: blur(28px);
}
.vm-page-hero__inner { display: flex; flex-direction: column; gap: var(--vm-space-4); }
.vm-page-hero h1 { font-size: var(--vm-text-4xl); color: #fff; max-width: 22ch; }
.vm-page-hero__desc { font-size: var(--vm-text-md); color: rgba(255, 255, 255, 0.8); max-width: 62ch; line-height: var(--vm-leading-relaxed); }
.vm-page-hero .vm-breadcrumb { color: rgba(255, 255, 255, 0.8); }
.vm-page-hero .vm-breadcrumb [aria-current="page"] { color: var(--vm-primary-200); }

/* =====================================================================
   6. FOOTER
   ===================================================================== */
.vm-footer {
  position: relative;
  background: var(--vm-neutral-950);
  color: rgba(232, 238, 244, 0.72);
  font-size: var(--vm-text-sm);
  overflow: hidden;
}
.vm-footer::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(12, 157, 203, 0.16) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 60% 80% at 80% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 80% 0%, #000, transparent 70%);
  pointer-events: none;
}

/* Dải kêu gọi hành động nằm đè lên đầu footer */
.vm-footer-cta { position: relative; z-index: 2; margin-bottom: calc(-1 * var(--vm-space-12)); }
.vm-footer-cta__box {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--vm-space-8);
  flex-wrap: wrap;
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 4vw, 3.25rem);
  border-radius: var(--vm-radius-xl);
  background: var(--vm-grad-brand);
  box-shadow: var(--vm-shadow-xl);
  overflow: hidden;
  color: #fff;
}
.vm-footer-cta__box::before {
  content: "";
  position: absolute; right: -60px; bottom: -90px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.vm-footer-cta__box h3 { color: #fff; font-size: var(--vm-text-2xl); position: relative; }
/* R1-phụ — Trước đây là rgba(255,255,255,0.86) để câu mô tả nhạt hơn tiêu đề.
   Nhưng chữ trắng LÀM MỜ ĐI trên --vm-grad-brand thì không còn đạt AA: hoà 86%
   trắng lên điểm dừng sáng nhất (#0a7ea6) chỉ còn 3.84:1, cần 4.5:1. Không có
   mức mờ nào cứu được — muốn đạt 4.5:1 trên nền đó thì độ chói của chữ phải
   ≥ 0.97327, tức gần như đúng bằng trắng nguyên (90% đã tụt còn 4.00:1).
   Nên phân cấp thị giác ở đây phải đi bằng CỠ CHỮ và ĐỘ ĐẬM (đã có sẵn), không
   đi bằng độ mờ. Lỗi này có từ trước, ở cả hai chế độ sáng và tối. */
.vm-footer-cta__box p { color: var(--vm-text-on-grad-brand); margin-top: 6px; position: relative; }
.vm-footer-cta__actions { display: flex; gap: var(--vm-space-3); flex-wrap: wrap; position: relative; }

.vm-footer__main {
  position: relative; z-index: 1;
  padding-top: calc(var(--vm-section-y) + var(--vm-space-8));
  padding-bottom: var(--vm-space-12);
}
/* Dải kêu gọi có margin-bottom âm bằng --vm-space-12 nên đè lên phần trên của
   chân trang; khoảng thụt trên ở đây chừa chỗ cho nó. Trang nào tắt dải kêu gọi
   thì phải trừ lại đúng phần đè, nếu không đầu chân trang hụt ra một mảng tối
   trống (đo được 136px thay vì 88px). */
.vm-footer--khong-cta .vm-footer__main {
  padding-top: calc(var(--vm-section-y) + var(--vm-space-8) - var(--vm-space-12));
}
.vm-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
  gap: var(--vm-space-10);
}
@media (max-width: 1000px) { .vm-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--vm-space-8); } }
@media (max-width: 560px) { .vm-footer__grid { grid-template-columns: 1fr; } }

.vm-footer__title {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-caps);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--vm-space-5);
  position: relative;
  padding-bottom: var(--vm-space-3);
}
.vm-footer__title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 34px; height: 2px; border-radius: 2px;
  background: var(--vm-grad-cta);
}
/* Giữ nguyên màu thương hiệu trên nền tối bằng một tấm nền trắng bo góc */
.vm-logo--footer { display: inline-block; margin-bottom: var(--vm-space-5); }
.vm-footer__brand-logo {
  height: 58px; width: auto;
  background: #fff;
  padding: 8px 14px;
  border-radius: var(--vm-radius-md);
  box-shadow: var(--vm-shadow-md);
}
.vm-footer__desc { line-height: var(--vm-leading-relaxed); margin-bottom: var(--vm-space-5); }
.vm-footer__links { display: flex; flex-direction: column; gap: var(--vm-space-3); }
.vm-footer__links a {
  color: rgba(232, 238, 244, 0.72);
  display: inline-flex; align-items: center; gap: var(--vm-space-2);
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-footer__links a::before {
  content: "";
  width: 5px; height: 5px;
  border-right: 1.5px solid var(--vm-primary-400);
  border-top: 1.5px solid var(--vm-primary-400);
  transform: rotate(45deg);
  transition: transform var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-footer__links a:hover { color: #fff; transform: translateX(4px); }

.vm-office { display: flex; flex-direction: column; gap: var(--vm-space-5); }
.vm-office__item { display: flex; gap: var(--vm-space-3); }
.vm-office__ico {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--vm-radius-sm);
  background: rgba(12, 157, 203, 0.16);
  color: var(--vm-primary-300);
}
.vm-office__ico svg { width: 16px; height: 16px; }
.vm-office__label {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-wide);
  color: #fff;
  margin-bottom: 3px;
}
.vm-office__text { font-size: var(--vm-text-xs); line-height: var(--vm-leading-normal); }

.vm-footer__socials { display: flex; gap: var(--vm-space-2); margin-top: var(--vm-space-5); }
.vm-footer__social {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--vm-radius-md);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(232, 238, 244, 0.8);
  transition: all var(--vm-dur-base) var(--vm-ease-out);
}
.vm-footer__social:hover { background: var(--vm-cta); color: #fff; border-color: transparent; transform: translateY(-3px); }
.vm-footer__social svg { width: 17px; height: 17px; }

.vm-footer__newsletter { display: flex; align-items: center; gap: var(--vm-space-2); margin-top: var(--vm-space-4); }
.vm-footer__newsletter input {
  flex: 1;
  /* Bỏ khoảng thụt dọc, để min-height quyết định chiều cao. Có cả hai thì
     chiều cao đội lên 48px, cao hơn nút gửi 44px ngay bên cạnh. */
  padding: 0 1rem;
  min-height: 44px;
  border-radius: var(--vm-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: var(--vm-text-sm);
}
/* 1024–1365px: nút "lên đầu trang" (góc phải, bám đáy màn) đè lên nút gửi
   bản tin khi cuộn hết trang. Chừa chỗ bên phải cho hàng nút nổi. */
@media (min-width: 1024px) and (max-width: 1365px) {
  .vm-footer__newsletter { padding-inline-end: 72px; }
}
.vm-footer__newsletter input::placeholder { color: rgba(232, 238, 244, 0.45); }
.vm-footer__newsletter input:focus { outline: none; border-color: var(--vm-primary-400); background: rgba(255, 255, 255, 0.1); }

.vm-footer__bottom {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--vm-space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--vm-space-4);
  flex-wrap: wrap;
  font-size: var(--vm-text-xs);
}
.vm-footer__bottom-links { display: flex; gap: var(--vm-space-5); flex-wrap: wrap; }
.vm-footer__bottom a { color: rgba(232, 238, 244, 0.66); }
.vm-footer__bottom a:hover { color: #fff; }

/* M1 + M10 — Màn hình ≤1023px.
   • Hàng nút nổi ở đáy (liên hệ / lên đầu trang / trợ lý, xem components.css
     mục 16) cao bằng nút trợ lý. Chân trang chừa thêm đúng khoảng đó cộng một
     nhịp đệm, để khi cuộn hết trang ba liên kết cuối nằm trọn TRÊN hàng nút nổi
     — trước đây "Chính sách bảo mật / Điều khoản / Sơ đồ trang" bị nút đè.
   • Liên kết chân trang, mạng xã hội, hotline nâng lên đủ vùng chạm 44px; khoảng
     cách giữa các liên kết cột bỏ đi vì chính vùng chạm đã tạo nhịp thưa. */
@media (max-width: 1023px) {
  .vm-footer__bottom { padding-bottom: calc(var(--vm-space-5) + var(--vm-tl-nut-size) + var(--vm-space-5)); row-gap: 0; }
  .vm-footer__bottom-links { column-gap: var(--vm-space-5); row-gap: 0; }
  .vm-footer__bottom a,
  .vm-footer__links a { display: inline-flex; align-items: center; min-height: var(--vm-tap-min); }
  /* Hotline nằm ngay dưới nhãn HOTLINE: nếu cho cao 44px thật thì số bị đẩy
     xuống cách nhãn ~12px, lệch nhịp với các mục văn phòng khác. Giữ chữ nguyên
     dòng, mở rộng vùng chạm bằng ::before trong suốt cao 44px căn giữa chữ. */
  .vm-office__tel { position: relative; display: inline-block; }
  .vm-office__tel::before {
    content: ""; position: absolute;
    left: -4px; right: -4px; top: 50%;
    height: var(--vm-tap-min); transform: translateY(-50%);
  }
  .vm-footer__links { gap: 0; }
  .vm-footer__social { width: var(--vm-tap-min); height: var(--vm-tap-min); }
}
@media (max-width: 640px) {
  .vm-footer__bottom { padding-bottom: calc(var(--vm-space-4) + var(--vm-tl-nut-size-sm) + var(--vm-space-5)); }
}
/* Màn ≥1024px: nút trợ lý nổi ở góc phải dưới (x = 100vw − 78px trở vào). Ở
   1024–1400px lề phải của khung nội dung hẹp hơn chỗ nút chiếm, nên khi cuộn hết
   trang liên kết "Sơ đồ trang" nằm dưới nút (đo tại 1280×720: điểm giữa liên
   kết trúng nút trợ lý). Chừa lề phải cho hàng cuối vừa đủ phần còn thiếu —
   màn rộng (lề ngoài khung đã đủ) thì biểu thức ra số âm, max() đưa về 0.
   Cộng thêm 8px phòng thanh cuộn (100vw tính cả thanh cuộn). */
@media (min-width: 1024px) {
  .vm-footer__bottom {
    padding-inline-end: max(0px, calc(var(--vm-space-5) + var(--vm-tl-nut-size) + var(--vm-space-3) + 8px
      - max(0px, (100vw - var(--vm-container)) / 2) - var(--vm-gutter)));
  }
}

/* =====================================================================
   7. NÚT CHUYỂN SÁNG/TỐI
   ===================================================================== */
.vm-theme-toggle svg { transition: transform var(--vm-dur-slow) var(--vm-ease-spring), opacity var(--vm-dur-base); }
.vm-theme-toggle .ico-moon { display: none; }
:root[data-theme="dark"] .vm-theme-toggle .ico-sun { display: none; }
:root[data-theme="dark"] .vm-theme-toggle .ico-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vm-theme-toggle .ico-sun { display: none; }
  :root:not([data-theme="light"]) .vm-theme-toggle .ico-moon { display: block; }
}

/* Công tắc gạt sáng/tối trong chân ngăn kéo: một hàng "☀ Giao diện tối ⬤━"
   — chạm cả hàng hoặc gạt núm sang bên kia đều đổi (app.js initSwitches). */
.vm-drawer__theme {
  display: flex; align-items: center; gap: var(--vm-space-3);
  width: 100%; min-height: var(--vm-tap-min);
  padding: var(--vm-space-2) var(--vm-space-1);
  color: var(--vm-text); font-weight: var(--vm-weight-medium); font-size: var(--vm-text-sm);
  text-align: left;
}
.vm-drawer__theme svg { width: 20px; height: 20px; color: var(--vm-brand-text); flex: none; }
.vm-drawer__theme-lbl { flex: 1; }

/* Công tắc gạt dùng chung: rãnh 52×30, núm 24px */
.vm-switch {
  position: relative; flex: none;
  width: 52px; height: 30px;
  border-radius: var(--vm-radius-pill);
  background: var(--vm-border-strong, #c4cdd6);
  transition: background-color var(--vm-dur-base) var(--vm-ease-out);
  touch-action: pan-y;
}
.vm-switch__knob {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translateX(var(--vm-knob-x, 0px));
  transition: transform var(--vm-dur-base) var(--vm-ease-out);
}
.vm-switch.is-dragging .vm-switch__knob { transition: none; }
[aria-checked="true"] > .vm-switch { background: var(--vm-brand); }
[aria-checked="true"] > .vm-switch .vm-switch__knob { --vm-knob-x: 22px; }

/* =====================================================================
   BỘ CHUYỂN NGÔN NGỮ
   ===================================================================== */
.vm-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--vm-radius-pill);
  background: color-mix(in srgb, var(--vm-neutral-0) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--vm-neutral-0) 20%, transparent);
}
.vm-lang__item {
  display: inline-grid;
  place-items: center;
  /* G9 — Trước đây ô chỉ 30×31. Chốt cả hai chiều bằng --vm-tap-min cho đủ
     vùng chạm 44×44, không phụ thuộc bề ngang hai chữ "VI"/"EN" hay chiều cao
     dòng chữ. */
  min-width: var(--vm-tap-min);
  min-height: var(--vm-tap-min);
  padding: var(--vm-space-2) var(--vm-space-2);
  border-radius: var(--vm-radius-pill);
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-2xs);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-wide);
  color: color-mix(in srgb, var(--vm-neutral-0) 78%, transparent);
  transition: background var(--vm-dur-fast) var(--vm-ease-out),
              color var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-lang__item:hover { color: var(--vm-neutral-0); }
.vm-lang__item.is-active {
  background: var(--vm-neutral-0);
  color: var(--vm-primary-700);
}

/* Trong ngăn kéo: cùng dáng nút gạt viên thuốc như thanh trên cùng của bản
   máy tính (rãnh + ô đang chọn tô đặc), chỉ đổi màu cho nền sáng. Trước đây
   kéo giãn hết bề ngang ở chân ngăn kéo nên trông như một thanh trống với một
   chấm tròn ở giữa, lại phải cuộn xuống tận cuối mới thấy. */
.vm-lang--drawer {
  background: var(--vm-bg-subtle);
  border-color: var(--vm-border);
}
.vm-lang--drawer .vm-lang__item { color: var(--vm-text-soft); min-width: 44px; padding: 0 12px; }
.vm-lang--drawer .vm-lang__item:hover { color: var(--vm-brand-text); }
.vm-lang--drawer .vm-lang__item.is-active { background: var(--vm-brand); color: var(--vm-text-on-brand); box-shadow: var(--vm-shadow-sm); }

/* Dạng công tắc gạt (app.js initSwitches gắn .is-switch + chèn núm trượt):
   núm là một khối riêng trượt qua lại dưới hai chữ, kéo được bằng ngón tay.
   Không có JS thì vẫn là hai ô bấm như cũ. */
.vm-lang.is-switch { position: relative; touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; }
.vm-lang.is-switch .vm-lang__item { position: relative; z-index: 1; background: transparent; box-shadow: none; }
.vm-lang__thumb {
  position: absolute; top: 2px; left: 2px; z-index: 0;
  border-radius: var(--vm-radius-pill);
  background: var(--vm-neutral-0);
  box-shadow: var(--vm-shadow-sm);
  transform: translateX(var(--vm-thumb-x, 0px));
  transition: transform var(--vm-dur-base) var(--vm-ease-out);
}
.vm-lang--drawer .vm-lang__thumb { background: var(--vm-brand); }
.vm-lang.is-dragging .vm-lang__thumb { transition: none; }
.vm-drawer__tools { display: flex; align-items: center; gap: var(--vm-space-2); flex-shrink: 0; }
/* Logo trong đầu ngăn kéo thu nhỏ để đủ chỗ cho nút ngôn ngữ + nút đóng */
.vm-drawer__head { gap: var(--vm-space-3); }
.vm-drawer__head .vm-logo { min-width: 0; flex-shrink: 1; }
/* :root ... để thắng cả quy tắc logo chế độ tối (cao 52px) ở trên */
:root .vm-drawer .vm-drawer__head .vm-logo img { height: auto; max-height: 38px; width: auto; max-width: 100%; }


/* Bộ VI/EN trong ngăn kéo: cùng dáng và cỡ với bản trên thanh trên cùng của
   web (viên thuốc 72×30, chữ nằm trong, núm trượt), cao bằng công tắc sáng/tối.
   Ô nhìn thấy 24px nhưng vùng chạm vẫn 44px nhờ lớp giả. */
.vm-lang--drawer { padding: 2px; }
.vm-lang--drawer .vm-lang__item {
  position: relative;
  min-width: 32px; min-height: 24px;
  padding: 0 8px;
  font-size: 11px;
}
.vm-lang--drawer .vm-lang__item::after { content: ""; position: absolute; inset: -10px -4px; }
.vm-lang--drawer.is-switch .vm-lang__item.is-active { background: transparent; box-shadow: none; }

/* Bộ VI/EN trên thanh trên cùng: ô 44×44 làm thanh 40px phình lên 51px và
   viên thuốc trông quá to so với chữ 12px bên cạnh. Thu về 26px cho cân với
   thanh; màn cảm ứng (máy tính bảng) vẫn đủ vùng chạm 44px nhờ lớp giả. */
.vm-topbar .vm-lang { padding: 2px; }
.vm-topbar .vm-lang__item {
  position: relative;
  min-width: 32px; min-height: 24px;
  padding: 0 8px;
  font-size: 11px;
}
@media (pointer: coarse) {
  .vm-topbar .vm-lang__item::after { content: ""; position: absolute; inset: -10px -4px; }
}

/* 901–1099px: đủ 6 mục thì thanh trên cùng rớt xuống 2 dòng (cao ~80px).
   Bỏ địa chỉ (đã có ở chân trang và trang Liên hệ) để giữ một hàng. */
@media (min-width: 901px) and (max-width: 1099px) {
  .vm-topbar__item--addr { display: none; }
}