/* =====================================================================
   VINAMEDICAL — Base: reset, kiểu chữ nền, tiện ích bố cục
   Phụ thuộc: tokens.css (nạp trước)
   ===================================================================== */

/* ---------- Reset gọn ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  /* overflow-x: clip chặn tràn ngang mà KHÔNG tạo vùng cuộn mới, nên
     position: sticky của header và các khối dính vẫn hoạt động bình thường.
     (overflow-x: hidden sẽ phá sticky vì biến thẻ thành vùng cuộn.) */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* N7a — Nơi DUY NHẤT định khoảng chừa header khi cuộn tới #neo. Trước đây
     .vm-prose h2/h3 còn cộng thêm scroll-margin-top (header + 2rem) nên tiêu đề
     rơi xuống ~208px, thừa ~100px. Đừng đặt thêm scroll-margin-top cho đích neo
     trừ khi muốn cộng dồn. 76 + 16 = 92px: ngay dưới header (65–77px) 15–27px. */
  scroll-padding-top: calc(var(--vm-header-h) + var(--vm-space-4));
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  background: var(--vm-bg);
  color: var(--vm-text);
  font-family: var(--vm-font-body);
  font-size: var(--vm-text-base);
  line-height: var(--vm-leading-normal);
  font-weight: var(--vm-weight-normal);
  letter-spacing: var(--vm-tracking-snug);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;

  transition: background-color var(--vm-dur-base) var(--vm-ease-out),
              color var(--vm-dur-base) var(--vm-ease-out);
}

/* G6 — Khoá mọi hiệu ứng chuyển tiếp trong lần vẽ đầu tiên. Lớp này do đoạn mã
   nội tuyến trong <head> (inc/assets.php) thêm vào <html> và gỡ ngay sau khung
   hình đầu tiên. Nếu không có nó, thay đổi màu do khôi phục chế độ tối từ
   localStorage sẽ bị transition trên <body> kéo thành hiệu ứng mờ dần 240ms.
   Chỉ chặn transition, không chặn animation, để các hoạt cảnh mở trang giữ nguyên. */
html.vm-truoc-khi-ve,
html.vm-truoc-khi-ve *,
html.vm-truoc-khi-ve *::before,
html.vm-truoc-khi-ve *::after { transition: none !important; }

body.vm-no-scroll { overflow: hidden; }

img, svg, video, canvas, picture, iframe {
  display: block;
  max-width: 100%;
}
img, video { height: auto; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[class], ol[class] { list-style: none; padding: 0; }

table { border-collapse: collapse; width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--vm-border);
  margin-block: var(--vm-space-8);
}

::selection {
  background: color-mix(in srgb, var(--vm-primary-500) 26%, transparent);
  color: var(--vm-text);
}

/* Thanh cuộn mảnh, hợp tông */
* { scrollbar-width: thin; scrollbar-color: var(--vm-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--vm-border-strong);
  border-radius: var(--vm-radius-pill);
  border: 3px solid var(--vm-bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--vm-neutral-400); }

/* ---------- Tiêu đề ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--vm-font-display);
  font-weight: var(--vm-weight-bold);
  line-height: var(--vm-leading-tight);
  letter-spacing: var(--vm-tracking-tight);
  color: var(--vm-text);
  text-wrap: balance;
}
h1 { font-size: var(--vm-text-4xl); font-weight: var(--vm-weight-black); }
h2 { font-size: var(--vm-text-3xl); }
h3 { font-size: var(--vm-text-2xl); }
h4 { font-size: var(--vm-text-xl); }
h5 { font-size: var(--vm-text-lg); }
h6 { font-size: var(--vm-text-md); font-weight: var(--vm-weight-semi); }

p { text-wrap: pretty; }

a {
  color: var(--vm-link);
  text-decoration: none;
  transition: color var(--vm-dur-fast) var(--vm-ease-out);
}
a:hover { color: var(--vm-link-hover); }

strong, b { font-weight: var(--vm-weight-semi); }

small { font-size: var(--vm-text-sm); }

/* ---------- Tiêu điểm bàn phím ---------- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--vm-primary-500);
  outline-offset: 2px;
  border-radius: var(--vm-radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* Bỏ qua tới nội dung chính */
.vm-skip {
  position: absolute;
  left: var(--vm-space-4);
  top: -100px;
  z-index: var(--vm-z-toast);
  padding: var(--vm-space-3) var(--vm-space-5);
  background: var(--vm-brand);
  color: var(--vm-text-on-brand);
  border-radius: var(--vm-radius-sm);
  font-weight: var(--vm-weight-semi);
  transition: top var(--vm-dur-base) var(--vm-ease-out);
}
.vm-skip:focus { top: var(--vm-space-4); color: var(--vm-text-on-brand); }

/* ---------- Bố cục ---------- */
.vm-container {
  width: 100%;
  max-width: var(--vm-container);
  margin-inline: auto;
  padding-inline: var(--vm-gutter);
}
.vm-container--narrow { max-width: var(--vm-container-narrow); }
.vm-container--wide { max-width: var(--vm-container-wide); }

.vm-section { padding-block: var(--vm-section-y); position: relative; }
.vm-section--sm { padding-block: var(--vm-section-y-sm); }
.vm-section--tight { padding-block: clamp(2rem, 3vw, 3rem); }
.vm-section--subtle { background: var(--vm-bg-subtle); }
.vm-section--muted { background: var(--vm-bg-muted); }
.vm-section--dark {
  background: var(--vm-grad-deep);
  color: var(--vm-text-on-deep);
}
.vm-section--dark h1, .vm-section--dark h2,
.vm-section--dark h3, .vm-section--dark h4 { color: #ffffff; }
.vm-section--dark .vm-section-head__desc { color: var(--vm-text-on-deep-soft); }

.vm-grid { display: grid; gap: var(--vm-space-6); }
.vm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.vm-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.vm-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.vm-grid--5 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }

.vm-stack { display: flex; flex-direction: column; gap: var(--vm-space-4); }
.vm-row { display: flex; align-items: center; gap: var(--vm-space-3); flex-wrap: wrap; }
.vm-row--between { justify-content: space-between; }
.vm-row--center { justify-content: center; }
.vm-row--end { justify-content: flex-end; }

/* ---------- Đầu section dùng chung ---------- */
.vm-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-3);
  margin-bottom: clamp(2rem, 3.5vw, 3.25rem);
  max-width: 760px;
}
.vm-section-head--center { margin-inline: auto; text-align: center; align-items: center; }
.vm-section-head--split {
  max-width: none;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--vm-space-8);
  flex-wrap: wrap;
}
.vm-section-head--split .vm-section-head__body { max-width: 680px; }

.vm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--vm-space-2);
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-caps);
  text-transform: uppercase;
  /* G12 — Dùng --vm-brand-text chứ không phải --vm-brand: dòng chữ nhỏ này hay
     nằm trong khối được tô nền nhạt (#f7f9fb / #eff3f7 / #eaf7fc), nơi
     --vm-brand chỉ còn 4.14–4.38:1, hụt ngưỡng AA. */
  color: var(--vm-brand-text);
}
.vm-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--vm-grad-cta);
}
.vm-section-head--center .vm-eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--vm-grad-cta);
}

.vm-section-head__title { font-size: var(--vm-text-3xl); }
.vm-section-head__desc {
  color: var(--vm-text-soft);
  font-size: var(--vm-text-md);
  line-height: var(--vm-leading-relaxed);
}

/* ---------- Tiện ích ---------- */
/* .screen-reader-text là lớp của lõi WordPress, dùng cho chữ chỉ dành cho trình
   đọc màn hình (ví dụ tiêu đề "Phân trang bài viết"). Giao diện đã gỡ bộ CSS mặc
   định của WordPress nên phải tự khai báo, nếu không những dòng chữ đó hiện ra
   giữa trang. */
.vm-sr-only,
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.vm-hide { display: none !important; }
.vm-text-center { text-align: center; }
.vm-text-brand { color: var(--vm-brand-text); }
.vm-text-cta { color: var(--vm-cta-text); }
.vm-text-soft { color: var(--vm-text-soft); }
.vm-text-muted { color: var(--vm-text-muted); }
.vm-lead {
  font-size: var(--vm-text-lg);
  line-height: var(--vm-leading-relaxed);
  color: var(--vm-text-soft);
}
.vm-mt-0 { margin-top: 0; }
.vm-mt-4 { margin-top: var(--vm-space-4); }
.vm-mt-6 { margin-top: var(--vm-space-6); }
.vm-mt-8 { margin-top: var(--vm-space-8); }
.vm-mt-12 { margin-top: var(--vm-space-12); }
.vm-mb-6 { margin-bottom: var(--vm-space-6); }
.vm-mb-8 { margin-bottom: var(--vm-space-8); }
.vm-full-bleed { width: 100%; }

/* Cắt chữ theo số dòng */
.vm-clamp-1, .vm-clamp-2, .vm-clamp-3, .vm-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vm-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.vm-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.vm-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.vm-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }

/* Khung ảnh giữ tỉ lệ + zoom mềm khi hover */
.vm-media {
  position: relative;
  overflow: hidden;
  background: var(--vm-bg-muted);
  border-radius: var(--vm-radius-lg);
}
.vm-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--vm-dur-slower) var(--vm-ease-out);
}
.vm-media--4x3 { aspect-ratio: 4 / 3; }
.vm-media--16x9 { aspect-ratio: 16 / 9; }
.vm-media--1x1 { aspect-ratio: 1 / 1; }
.vm-media--3x2 { aspect-ratio: 3 / 2; }
.vm-media--contain { background: var(--vm-neutral-0); }
.vm-media--contain > img { object-fit: contain; padding: var(--vm-space-5); }
:is(a, .vm-card, .vm-product-card):hover .vm-media > img { transform: scale(1.06); }

/* ---------- Nền trang trí ---------- */
.vm-bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--vm-primary-500) 9%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--vm-primary-500) 9%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
}
.vm-bg-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--vm-primary-500) 22%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 75%);
}
.vm-bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.vm-bg-blob--brand { background: var(--vm-primary-400); }
.vm-bg-blob--cta { background: var(--vm-accent-400); }

/* ---------- Hoạt cảnh khi cuộn tới ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--vm-dur-slow) var(--vm-ease-out),
    transform var(--vm-dur-slow) var(--vm-ease-out);
  transition-delay: var(--vm-reveal-delay, 0ms);
  will-change: opacity, transform;
}
/* G11 — Độ dịch không được lớn hơn lề trang, nếu không phần tử sẽ thò ra ngoài
   mép trong suốt ~420ms chờ hiện và bị html { overflow-x: clip } cắt. Trước đây
   chỉ hạ xuống 12px ở ≤600px, nên dải 601–767px vẫn dịch 28px trong khi
   --vm-gutter = clamp(1rem, 3vw, 2rem) chỉ cho 18–23px (đo ở 768px: phần tử
   nằm ở right = 773 trong khung 768 → thò 5px). Dùng min() để độ dịch luôn
   bám theo đúng lề thật, không phải đoán điểm ngắt. */
[data-reveal="left"]  { transform: translateX(calc(min(28px, var(--vm-gutter)) * -1)); }
[data-reveal="right"] { transform: translateX(min(28px, var(--vm-gutter))); }
[data-reveal="zoom"]  { transform: scale(0.94); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@keyframes vm-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes vm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vm-pulse-ring {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vm-accent-500) 55%, transparent); }
  70%  { box-shadow: 0 0 0 18px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes vm-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes vm-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes vm-shimmer {
  from { background-position: -140% 0; }
  to { background-position: 240% 0; }
}
@keyframes vm-spin { to { transform: rotate(360deg); } }

/* ---------- Tôn trọng thiết lập giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- In ấn ---------- */
@media print {
  .vm-header, .vm-footer, .vm-to-top, .vm-quick-contact, .vm-drawer { display: none !important; }
  body { background: #fff; color: #000; }
  .vm-section { padding-block: 1rem; }
}

/* =====================================================================
   HIỆU ỨNG NỀN NÂNG CAO
   Đúc kết từ khảo sát nguồn mở (open-props, meshgrad, css-doodle…),
   viết lại hoàn toàn bằng biến --vm-*, không phụ thuộc thư viện ngoài.
   ===================================================================== */

/* --- Mesh gradient: nhiều radial-gradient chồng lên nhau, ~0 KB --- */
.vm-mesh {
  position: relative;
  isolation: isolate;
  background-color: var(--vm-primary-950);
  background-image:
    radial-gradient(at 12% 18%, color-mix(in srgb, var(--vm-primary-500) 55%, transparent) 0px, transparent 55%),
    radial-gradient(at 82% 12%, color-mix(in srgb, var(--vm-primary-300) 38%, transparent) 0px, transparent 50%),
    radial-gradient(at 68% 78%, color-mix(in srgb, var(--vm-accent-600) 42%, transparent) 0px, transparent 55%),
    radial-gradient(at 22% 88%, color-mix(in srgb, var(--vm-primary-400) 34%, transparent) 0px, transparent 50%),
    radial-gradient(at 50% 45%, color-mix(in srgb, var(--vm-primary-600) 30%, transparent) 0px, transparent 60%);
  color: #fff;
}

/* Phiên bản sáng, hợp với section nội dung */
.vm-mesh--light {
  background-color: var(--vm-bg-subtle);
  background-image:
    radial-gradient(at 10% 10%, color-mix(in srgb, var(--vm-primary-100) 90%, transparent) 0px, transparent 50%),
    radial-gradient(at 90% 20%, color-mix(in srgb, var(--vm-accent-100) 70%, transparent) 0px, transparent 45%),
    radial-gradient(at 60% 95%, color-mix(in srgb, var(--vm-primary-100) 80%, transparent) 0px, transparent 50%);
  color: var(--vm-text);
}

/* --- Gradient xoay chậm: @property cho phép nội suy kiểu <angle> --- */
@property --vm-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.vm-aurora {
  --vm-angle: 0deg;
  background: conic-gradient(from var(--vm-angle) at 50% 50%,
    var(--vm-primary-800), var(--vm-accent-600), var(--vm-primary-500),
    var(--vm-primary-900), var(--vm-primary-800));
  animation: vm-rotate-angle 22s linear infinite;
}
@keyframes vm-rotate-angle { to { --vm-angle: 360deg; } }

/* Dự phòng khi trình duyệt chưa hỗ trợ @property */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .vm-aurora {
    background: linear-gradient(120deg, var(--vm-primary-800), var(--vm-accent-600),
                var(--vm-primary-500), var(--vm-primary-900));
    background-size: 300% 300%;
    animation: vm-slide-gradient 18s ease-in-out infinite;
  }
  @keyframes vm-slide-gradient {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }
}

/* --- Hạt nhiễu mịn: khử hiện tượng "chuối màu" trên nền gradient lớn --- */
.vm-noise { position: relative; isolation: isolate; }
.vm-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Chữ tô gradient --- */
.vm-gradient-text {
  /* 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-gradient-text--cta { background: var(--vm-grad-cta); -webkit-background-clip: text; background-clip: text; }

/* --- Dải cuộn ngang có điểm dừng: thay carousel ở màn hình nhỏ, 0 KB JS --- */
.vm-scroller {
  display: flex;
  gap: var(--vm-space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--vm-gutter);
  padding-bottom: var(--vm-space-3);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.vm-scroller::-webkit-scrollbar { display: none; }
.vm-scroller > * {
  flex: 0 0 min(88vw, 320px);
  scroll-snap-align: start;
}

/* --- Đường kẻ trang trí mềm giữa hai section --- */
.vm-divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent,
              color-mix(in srgb, var(--vm-brand) 32%, transparent), transparent);
  margin: 0;
}