/* =====================================================================
   VINAMEDICAL — Kiểu dáng riêng của TRANG CHỦ (index.html)
   Chỉ chứa phần không có sẵn trong components.css / layout.css.
   Quy ước: mọi lớp dùng tiền tố vm-home-*, mọi màu lấy từ biến --vm-*.
   Ghi chú: --vm-neutral-0 (trắng) và --vm-primary-950 (xanh thẫm) được
   dùng cho chữ/lớp phủ nằm trên ẢNH — hai biến này giữ nguyên giá trị ở
   cả chế độ sáng lẫn tối nên độ tương phản luôn ổn định.
   ===================================================================== */

/* Ô chứa biểu tượng do page-home.js chèn vào (thuộc tính data-icon) */
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* =====================================================================
   1. BĂNG CHUYỀN ĐẦU TRANG
   ===================================================================== */
.vm-home-hero {
  position: relative;
  isolation: isolate;
  background: var(--vm-primary-950);
  overflow: hidden;
}

.vm-home-hero__viewport {
  display: grid;
  /* Gần trọn màn hình đầu, đã trừ chiều cao header dính */
  min-height: max(540px, calc(86dvh - var(--vm-header-h)));
}

.vm-home-hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--vm-dur-slower) var(--vm-ease-out),
    visibility var(--vm-dur-slower) var(--vm-ease-out);
}
.vm-home-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.vm-home-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
}
/* Ken Burns nhẹ: ảnh của slide đang hiển thị phóng dần từ 1 lên 1.06 */
.vm-home-hero__slide.is-active .vm-home-hero__img {
  animation: vm-home-kenburns 9s var(--vm-ease-in-out) forwards;
}
@keyframes vm-home-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

.vm-home-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--vm-primary-950) 90%, transparent) 0%,
      color-mix(in srgb, var(--vm-primary-950) 72%, transparent) 42%,
      color-mix(in srgb, var(--vm-primary-950) 24%, transparent) 100%),
    linear-gradient(to top,
      color-mix(in srgb, var(--vm-primary-950) 70%, transparent) 0%,
      transparent 45%);
}

.vm-home-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(9rem, 13vw, 11rem);
}
.vm-home-hero__box {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vm-space-5);
}
.vm-home-hero__title {
  font-size: var(--vm-text-5xl);
  font-weight: var(--vm-weight-black);
  color: var(--vm-neutral-0);
  text-shadow: 0 2px 24px color-mix(in srgb, var(--vm-primary-950) 55%, transparent);
  max-width: 20ch;
}
.vm-home-hero__desc {
  font-size: var(--vm-text-md);
  line-height: var(--vm-leading-relaxed);
  color: color-mix(in srgb, var(--vm-neutral-0) 86%, transparent);
  max-width: 58ch;
}
.vm-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-space-3);
  margin-top: var(--vm-space-2);
}

/* Nút chuyển slide */
.vm-home-hero__arrow {
  position: absolute;
  top: calc(50% - 3rem);
  z-index: 4;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--vm-neutral-0);
  background: color-mix(in srgb, var(--vm-primary-950) 42%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--vm-neutral-0) 38%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background-color var(--vm-dur-base) var(--vm-ease-out),
    border-color var(--vm-dur-base) var(--vm-ease-out),
    transform var(--vm-dur-base) var(--vm-ease-out);
}
.vm-home-hero__arrow:hover {
  background: var(--vm-cta);
  border-color: var(--vm-cta);
  transform: scale(1.08);
}
.vm-home-hero__arrow svg { width: 24px; height: 24px; }
.vm-home-hero__arrow--prev { left: clamp(0.5rem, 2vw, 1.75rem); }
.vm-home-hero__arrow--next { right: clamp(0.5rem, 2vw, 1.75rem); }

/* Chấm chỉ số */
.vm-home-hero__dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(6.5rem, 10vw, 8rem);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--vm-space-3);
}
.vm-home-hero__dot {
  width: 11px;
  height: 11px;
  border-radius: var(--vm-radius-pill);
  background: color-mix(in srgb, var(--vm-neutral-0) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--vm-neutral-0) 55%, transparent);
  transition:
    width var(--vm-dur-base) var(--vm-ease-out),
    background-color var(--vm-dur-base) var(--vm-ease-out);
}
.vm-home-hero__dot:hover { background: color-mix(in srgb, var(--vm-neutral-0) 80%, transparent); }
.vm-home-hero__dot[aria-current="true"] {
  width: 34px;
  background: var(--vm-cta);
  border-color: var(--vm-cta);
}

@media (max-width: 640px) {
  .vm-home-hero__arrow { width: 42px; height: 42px; }
  .vm-home-hero__arrow svg { width: 20px; height: 20px; }
  .vm-home-hero__title { font-size: var(--vm-text-4xl); }
  .vm-home-hero__actions .vm-btn { flex: 1 1 100%; }
}
@media (max-width: 420px) {
  .vm-home-hero__arrow { display: none; }
}

/* =====================================================================
   2. DẢI CHỈ SỐ NỔI
   ===================================================================== */
.vm-home-stats {
  position: relative;
  z-index: 5;
  margin-top: clamp(-5rem, -6vw, -3rem);
}
.vm-home-stats__box {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 3rem);
  border-radius: var(--vm-radius-xl);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  box-shadow: var(--vm-shadow-xl);
}
.vm-home-stats .vm-stat + .vm-stat { position: relative; }
@media (min-width: 780px) {
  .vm-home-stats .vm-stat + .vm-stat::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--vm-space-6) / 2);
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: var(--vm-border);
  }
}

/* =====================================================================
   3. CHÀO MỪNG ĐẾN VỚI VINAMEDICAL
   ===================================================================== */
.vm-home-about__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .vm-home-about__grid { grid-template-columns: 0.92fr 1.08fr; }
}

.vm-home-about__gallery {
  position: relative;
  padding-bottom: clamp(3rem, 7vw, 5rem);
  padding-right: clamp(1.5rem, 5vw, 3.5rem);
}
.vm-home-about__shot {
  overflow: hidden;
  border-radius: var(--vm-radius-xl);
  box-shadow: var(--vm-shadow-lg);
  background: var(--vm-bg-muted);
}
.vm-home-about__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vm-home-about__shot--a { aspect-ratio: 4 / 3; }
.vm-home-about__shot--b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  aspect-ratio: 1 / 1;
  border: 5px solid var(--vm-surface);
  box-shadow: var(--vm-shadow-xl);
}
.vm-home-about__badge {
  position: absolute;
  left: 0;
  bottom: clamp(2rem, 6vw, 4rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--vm-space-3);
  padding: var(--vm-space-4) var(--vm-space-5);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  box-shadow: var(--vm-shadow-xl);
  max-width: min(19rem, 78%);
}
.vm-home-about__badge-ico {
  width: 44px;
  height: 44px;
  border-radius: var(--vm-radius-md);
  background: var(--vm-brand-soft);
  color: var(--vm-brand);
}
.vm-home-about__badge-ico svg { width: 23px; height: 23px; }
.vm-home-about__badge strong {
  display: block;
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-bold);
  color: var(--vm-text);
}
.vm-home-about__badge small {
  display: block;
  font-size: var(--vm-text-xs);
  color: var(--vm-text-muted);
  line-height: var(--vm-leading-snug);
  margin-top: 3px;
}

.vm-home-about__body { display: flex; flex-direction: column; gap: var(--vm-space-4); }
.vm-home-about__title { font-size: var(--vm-text-3xl); margin-bottom: var(--vm-space-1); }
.vm-home-about__body > p {
  color: var(--vm-text-soft);
  font-size: var(--vm-text-base);
  line-height: var(--vm-leading-relaxed);
}
.vm-home-about__points {
  display: grid;
  gap: var(--vm-space-3);
  margin-top: var(--vm-space-2);
}
@media (min-width: 620px) {
  .vm-home-about__points { grid-template-columns: 1fr 1fr; }
}
.vm-home-about__point {
  display: flex;
  align-items: flex-start;
  gap: var(--vm-space-3);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-medium);
  color: var(--vm-text);
  line-height: var(--vm-leading-snug);
}
.vm-home-about__point-ico {
  width: 34px;
  height: 34px;
  border-radius: var(--vm-radius-sm);
  background: var(--vm-brand-soft);
  color: var(--vm-brand);
  margin-top: 1px;
}
.vm-home-about__point-ico svg { width: 18px; height: 18px; }
.vm-home-about__actions { margin-top: var(--vm-space-4); gap: var(--vm-space-6); }

/* =====================================================================
   4. LƯỚI DANH MỤC SẢN PHẨM
   ===================================================================== */
.vm-home-cats {
  display: grid;
  gap: var(--vm-space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
.vm-home-cats .vm-cat-card { min-height: 17.5rem; }
@media (min-width: 900px) {
  /* Ô đầu tiên nổi bật: chiếm 2 cột trên màn hình lớn */
  .vm-home-cats .vm-home-cats__wide { grid-column: span 2; }
  .vm-home-cats .vm-home-cats__wide.vm-cat-card { min-height: 22rem; }
  .vm-home-cats__wide .vm-cat-card__title { font-size: var(--vm-text-2xl); }
}
.vm-home-cats__count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--vm-radius-pill);
  background: color-mix(in srgb, var(--vm-neutral-0) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--vm-neutral-0) 26%, transparent);
  color: var(--vm-neutral-0);
  font-size: var(--vm-text-2xs);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-wide);
  text-transform: uppercase;
}

/* =====================================================================
   5. VÌ SAO CHỌN VINAMEDICAL
   ===================================================================== */
.vm-home-why .vm-card__body { gap: var(--vm-space-4); }
.vm-home-why__ico {
  width: 52px;
  height: 52px;
  border-radius: var(--vm-radius-md);
  background: color-mix(in srgb, var(--vm-neutral-0) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--vm-neutral-0) 20%, transparent);
  color: var(--vm-neutral-0);
}
.vm-home-why__ico svg { width: 25px; height: 25px; }
.vm-home-why .vm-card__title { color: var(--vm-neutral-0); }

/* =====================================================================
   6. SẢN PHẨM NỔI BẬT (tab)
   ===================================================================== */
.vm-home-products__grid {
  display: grid;
  gap: var(--vm-space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.vm-home-products .vm-product-card__cart { display: flex; gap: var(--vm-space-2); }
/* 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 */
@media (hover: none) {
  .vm-home-products .vm-product-card__actions { opacity: 1; transform: none; }
}

/* Nội dung hộp thoại xem nhanh */
.vm-home-quick__head-title { font-size: var(--vm-text-lg); }
.vm-home-quick {
  display: grid;
  gap: var(--vm-space-6);
}
@media (min-width: 720px) {
  .vm-home-quick { grid-template-columns: 0.85fr 1fr; align-items: start; }
}
.vm-home-quick__media {
  border-radius: var(--vm-radius-lg);
  background: var(--vm-neutral-0);
  border: 1px solid var(--vm-border);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.vm-home-quick__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--vm-space-4);
}
.vm-home-quick__body { display: flex; flex-direction: column; gap: var(--vm-space-3); }
.vm-home-quick__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);
}
.vm-home-quick__title { font-size: var(--vm-text-lg); }
.vm-home-quick__desc {
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
  line-height: var(--vm-leading-relaxed);
}
.vm-home-quick__price {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-xl);
  font-weight: var(--vm-weight-bold);
  color: var(--vm-cta);
}
.vm-home-quick__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-space-2);
}
.vm-home-quick__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-space-3);
  margin-top: var(--vm-space-2);
}

/* =====================================================================
   7. LĨNH VỰC HOẠT ĐỘNG
   ===================================================================== */
.vm-home-service__link {
  margin-top: auto;
  padding-top: var(--vm-space-2);
}

/* =====================================================================
   8. ĐỐI TÁC QUỐC TẾ
   ===================================================================== */
.vm-home-partners { --vm-marquee-dur: 42s; }

/* =====================================================================
   9. QUY TRÌNH HỢP TÁC
   ===================================================================== */
.vm-home-steps {
  position: relative;
  display: grid;
  gap: var(--vm-space-8);
  list-style: none;
  padding: 0;
  counter-reset: none;
}
@media (min-width: 900px) {
  .vm-home-steps { grid-template-columns: repeat(4, 1fr); gap: var(--vm-space-6); }
  /* Đường nối ngang chạy qua hàng biểu tượng */
  .vm-home-steps::before {
    content: "";
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 3.9rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to right,
      color-mix(in srgb, var(--vm-brand) 45%, transparent),
      color-mix(in srgb, var(--vm-cta) 45%, transparent));
  }
}
.vm-home-steps__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vm-space-3);
  text-align: center;
  padding: var(--vm-space-6) var(--vm-space-5);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  box-shadow: var(--vm-shadow-sm);
  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-home-steps__item:hover {
  transform: translateY(-5px);
  box-shadow: var(--vm-shadow-lg);
  border-color: color-mix(in srgb, var(--vm-brand) 38%, var(--vm-border));
}
.vm-home-steps__num {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-black);
  letter-spacing: var(--vm-tracking-caps);
  color: var(--vm-cta);
}
.vm-home-steps__ico {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--vm-surface);
  border: 2px solid color-mix(in srgb, var(--vm-brand) 40%, var(--vm-border));
  color: var(--vm-brand);
  box-shadow: 0 0 0 6px var(--vm-brand-soft);
  transition:
    background-color var(--vm-dur-base) var(--vm-ease-out),
    color var(--vm-dur-base) var(--vm-ease-out);
}
.vm-home-steps__ico svg { width: 27px; height: 27px; }
.vm-home-steps__item:hover .vm-home-steps__ico {
  background: var(--vm-brand);
  color: var(--vm-neutral-0);
}
.vm-home-steps__title { font-size: var(--vm-text-md); margin-top: var(--vm-space-2); }
.vm-home-steps__desc {
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
  line-height: var(--vm-leading-relaxed);
}

/* =====================================================================
   10. TIN TỨC & SỰ KIỆN
   ===================================================================== */
.vm-home-news {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 992px) {
  .vm-home-news { grid-template-columns: 1.08fr 1fr; align-items: start; }
}
.vm-home-news__lead .vm-media { border-radius: var(--vm-radius-lg) var(--vm-radius-lg) 0 0; }
.vm-home-news__lead .vm-card__title { font-size: var(--vm-text-xl); }
.vm-home-news__list {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-4);
}
.vm-home-news__item {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--vm-space-4);
  padding: var(--vm-space-3);
  border-radius: var(--vm-radius-lg);
  border: 1px solid var(--vm-border);
  background: var(--vm-surface);
  transition:
    transform var(--vm-dur-base) var(--vm-ease-out),
    box-shadow var(--vm-dur-base) var(--vm-ease-out),
    border-color var(--vm-dur-base) var(--vm-ease-out);
}
.vm-home-news__item:hover {
  transform: translateX(4px);
  box-shadow: var(--vm-shadow-md);
  border-color: color-mix(in srgb, var(--vm-brand) 35%, var(--vm-border));
}
.vm-home-news__thumb {
  border-radius: var(--vm-radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--vm-bg-muted);
}
.vm-home-news__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vm-home-news__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.vm-home-news__meta {
  display: flex;
  align-items: center;
  gap: var(--vm-space-2);
  font-size: var(--vm-text-xs);
  color: var(--vm-text-muted);
}
.vm-home-news__meta svg { width: 14px; height: 14px; }
.vm-home-news__title {
  font-size: var(--vm-text-base);
  font-weight: var(--vm-weight-semi);
  line-height: var(--vm-leading-snug);
}
.vm-home-news__title a { color: var(--vm-text); }
.vm-home-news__title a:hover { color: var(--vm-brand); }
@media (max-width: 400px) {
  .vm-home-news__item { grid-template-columns: 5rem 1fr; gap: var(--vm-space-3); }
}

/* =====================================================================
   11. THƯ VIỆN VIDEO
   ===================================================================== */
.vm-home-video {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(19rem, 42vw, 30rem);
  padding: clamp(2rem, 5vw, 4rem) var(--vm-gutter);
  border-radius: var(--vm-radius-xl);
  overflow: hidden;
  background: var(--vm-primary-950);
}
.vm-home-video__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vm-home-video__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--vm-primary-950) 88%, transparent) 0%,
    color-mix(in srgb, var(--vm-primary-950) 55%, transparent) 60%,
    color-mix(in srgb, var(--vm-primary-950) 40%, transparent) 100%);
}
.vm-home-video__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vm-space-4);
  text-align: center;
  max-width: 40rem;
}
.vm-home-video__play {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vm-cta);
  color: var(--vm-neutral-0);
  box-shadow: var(--vm-shadow-cta);
  animation: vm-pulse-ring 2.6s var(--vm-ease-out) infinite;
  transition: transform var(--vm-dur-base) var(--vm-ease-spring),
              background-color var(--vm-dur-base) var(--vm-ease-out);
}
.vm-home-video__play:hover { transform: scale(1.08); background: var(--vm-cta-hover); }
.vm-home-video__play-ico svg { width: 34px; height: 34px; fill: currentColor; }
.vm-home-video__title { color: var(--vm-neutral-0); font-size: var(--vm-text-2xl); }
.vm-home-video__desc {
  color: color-mix(in srgb, var(--vm-neutral-0) 82%, transparent);
  font-size: var(--vm-text-md);
  line-height: var(--vm-leading-relaxed);
}

/* Nút đóng nằm đè lên khung video nên hộp thoại phải là gốc định vị */
#vm-video .vm-modal__box { position: relative; }
.vm-home-video__frame { position: relative; aspect-ratio: 16 / 9; width: 100%; }
.vm-home-video__frame iframe {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
}
.vm-home-video__todo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: var(--vm-space-8);
  text-align: center;
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-relaxed);
  color: color-mix(in srgb, var(--vm-neutral-0) 74%, transparent);
}
.vm-home-video__close {
  position: absolute;
  top: var(--vm-space-3);
  right: var(--vm-space-3);
  z-index: 3;
  background: color-mix(in srgb, var(--vm-neutral-950) 55%, transparent);
  color: var(--vm-neutral-0);
}

/* =====================================================================
   12. CẢM NHẬN KHÁCH HÀNG
   ===================================================================== */
.vm-home-quotes {
  display: grid;
  gap: var(--vm-space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .vm-home-quotes { grid-template-columns: 1fr 1fr; }
}
.vm-home-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-4);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  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);
}
.vm-home-quote:hover { transform: translateY(-4px); box-shadow: var(--vm-shadow-lg); }
.vm-home-quote__mark {
  color: color-mix(in srgb, var(--vm-brand) 22%, transparent);
}
.vm-home-quote__mark svg { width: 38px; height: 38px; }
.vm-home-quote__text {
  font-size: var(--vm-text-md);
  line-height: var(--vm-leading-relaxed);
  color: var(--vm-text-soft);
  font-style: italic;
}
.vm-home-quote__who {
  margin-top: auto;
  padding-top: var(--vm-space-4);
  border-top: 1px solid var(--vm-border-subtle);
}
.vm-home-quote__name {
  display: block;
  font-family: var(--vm-font-display);
  font-weight: var(--vm-weight-bold);
  color: var(--vm-text);
  font-size: var(--vm-text-sm);
}
.vm-home-quote__org {
  display: block;
  font-size: var(--vm-text-xs);
  color: var(--vm-text-muted);
  margin-top: 3px;
  line-height: var(--vm-leading-snug);
}

/* =====================================================================
   13. LIÊN HỆ HỢP TÁC
   ===================================================================== */
.vm-home-contact__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 1000px) {
  .vm-home-contact__grid { grid-template-columns: 1fr 1.05fr; }
}
.vm-home-contact__info { display: flex; flex-direction: column; gap: var(--vm-space-4); }
.vm-home-contact__title { font-size: var(--vm-text-3xl); }

.vm-home-contact__hot {
  display: grid;
  gap: var(--vm-space-3);
  margin-top: var(--vm-space-2);
}
@media (min-width: 560px) {
  .vm-home-contact__hot { grid-template-columns: 1fr 1fr; }
}
.vm-home-contact__hot-item {
  display: flex;
  align-items: center;
  gap: var(--vm-space-3);
  padding: var(--vm-space-4);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-bg-subtle);
  border: 1px solid var(--vm-border);
  color: var(--vm-text);
  min-width: 0;
  transition: all var(--vm-dur-base) var(--vm-ease-out);
}
.vm-home-contact__hot-item:hover {
  color: var(--vm-text);
  border-color: color-mix(in srgb, var(--vm-brand) 45%, var(--vm-border));
  box-shadow: var(--vm-shadow-md);
}
.vm-home-contact__hot-ico {
  width: 44px;
  height: 44px;
  border-radius: var(--vm-radius-md);
  background: var(--vm-grad-brand);
  color: var(--vm-neutral-0);
}
.vm-home-contact__hot-ico svg { width: 21px; height: 21px; }
.vm-home-contact__hot-item small {
  display: block;
  font-size: var(--vm-text-xs);
  color: var(--vm-text-muted);
}
.vm-home-contact__hot-item strong {
  display: block;
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-base);
  font-weight: var(--vm-weight-bold);
  overflow-wrap: anywhere;
}

.vm-home-contact__offices {
  display: grid;
  gap: var(--vm-space-3);
  margin-top: var(--vm-space-4);
}
.vm-home-office {
  display: flex;
  gap: var(--vm-space-3);
  padding: var(--vm-space-4);
  border-radius: var(--vm-radius-md);
  border: 1px solid var(--vm-border-subtle);
  background: var(--vm-surface);
}
.vm-home-office__ico {
  width: 34px;
  height: 34px;
  border-radius: var(--vm-radius-sm);
  background: var(--vm-cta-soft);
  color: var(--vm-cta);
  flex-shrink: 0;
}
.vm-home-office__ico svg { width: 17px; height: 17px; }
.vm-home-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: var(--vm-brand);
}
.vm-home-office__text {
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
  line-height: var(--vm-leading-normal);
  margin-top: 3px;
}

.vm-home-contact__panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--vm-radius-xl);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  box-shadow: var(--vm-shadow-lg);
}
.vm-home-contact__form-title {
  font-size: var(--vm-text-xl);
  margin-bottom: var(--vm-space-5);
  padding-bottom: var(--vm-space-4);
  border-bottom: 1px solid var(--vm-border-subtle);
}
.vm-home-contact__note {
  font-size: var(--vm-text-xs);
  color: var(--vm-text-muted);
  line-height: var(--vm-leading-normal);
}

/* =====================================================================
   14. CHẾ ĐỘ TỐI — tinh chỉnh những chỗ cần độ tương phản riêng
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vm-home-stats__box {
    background: var(--vm-surface-2);
    border-color: var(--vm-border-strong);
  }
  :root:not([data-theme="light"]) .vm-home-about__shot--b { border-color: var(--vm-surface-2); }
  :root:not([data-theme="light"]) .vm-home-about__badge { background: var(--vm-surface-2); }
  :root:not([data-theme="light"]) .vm-home-steps__item { background: var(--vm-surface-2); }
  :root:not([data-theme="light"]) .vm-home-steps__ico { background: var(--vm-surface-2); }
  :root:not([data-theme="light"]) .vm-home-news__item { background: var(--vm-surface-2); }
  :root:not([data-theme="light"]) .vm-home-quote { background: var(--vm-surface-2); }
  :root:not([data-theme="light"]) .vm-home-office { background: var(--vm-surface-2); }
  :root:not([data-theme="light"]) .vm-home-contact__panel { background: var(--vm-surface-2); }
  :root:not([data-theme="light"]) .vm-home-contact__hot-item { background: var(--vm-surface); }
}

:root[data-theme="dark"] .vm-home-stats__box {
  background: var(--vm-surface-2);
  border-color: var(--vm-border-strong);
}
:root[data-theme="dark"] .vm-home-about__shot--b { border-color: var(--vm-surface-2); }
:root[data-theme="dark"] .vm-home-about__badge { background: var(--vm-surface-2); }
:root[data-theme="dark"] .vm-home-steps__item { background: var(--vm-surface-2); }
:root[data-theme="dark"] .vm-home-steps__ico { background: var(--vm-surface-2); }
:root[data-theme="dark"] .vm-home-news__item { background: var(--vm-surface-2); }
:root[data-theme="dark"] .vm-home-quote { background: var(--vm-surface-2); }
:root[data-theme="dark"] .vm-home-office { background: var(--vm-surface-2); }
:root[data-theme="dark"] .vm-home-contact__panel { background: var(--vm-surface-2); }
:root[data-theme="dark"] .vm-home-contact__hot-item { background: var(--vm-surface); }

/* =====================================================================
   15. TÔN TRỌNG THIẾT LẬP GIẢM CHUYỂN ĐỘNG
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .vm-home-hero__slide.is-active .vm-home-hero__img { animation: none; transform: none; }
  .vm-home-video__play { animation: none; }
}

/* =====================================================================
   BỔ SUNG SAU KHI GHÉP LỚP HIỆU ỨNG (fx.css)
   ===================================================================== */

/* Lớp màu xoay chậm phủ lên ảnh băng chuyền.
   mix-blend-mode giữ được chi tiết ảnh bên dưới, chỉ thêm sắc độ. */
.vm-home-hero__aurora {
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.42;
  mix-blend-mode: overlay;
}
/* Nội dung slide phải nằm trên lớp màu */
.vm-home-hero__viewport { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .vm-home-hero__aurora { animation: none; opacity: 0.28; }
}

/* Đường nối giữa bốn bước quy trình, tự vẽ khi cuộn tới */
.vm-home-process { position: relative; }
.vm-home-steps__line {
  display: block;
  width: 100%;
  height: 8px;
  margin-bottom: calc(-1 * var(--vm-space-6));
  overflow: visible;
}
/* Các bước xếp dọc ở màn hình nhỏ nên đường ngang không còn ý nghĩa */
@media (max-width: 900px) {
  .vm-home-steps__line { display: none; }
}

/* Khối giới thiệu: bỏ bo góc mặc định của figure để mặt nạ cắt đúng hình */
.vm-home-about__shot.fx-mask { border-radius: var(--vm-radius-xl); }