/* =====================================================================
   VINAMEDICAL — Lớp hiệu ứng dùng chung cho TOÀN SITE
   Nạp sau layout.css, trước page-*.css.
   Hoạt động cả nền sáng lẫn nền tối; mọi chuyển động tự tắt khi người
   dùng bật "giảm chuyển động" trong hệ điều hành.
   Tiền tố lớp: .fx-*
   ===================================================================== */

/* ĐÃ GỠ: hiệu ứng chuyển trang bằng @view-transition.
   Lý do: Chrome bỏ qua chuyển cảnh này ở mọi lần điều hướng đã thử
   (bấm chuột thật, trang tải xong, tab đang hiện, API được hỗ trợ, quy tắc
   có mặt ở cả trang đi và trang đến) và ghi "Transition was skipped" vào
   console mỗi lần. Không đem lại hiệu ứng nào cho người dùng mà lại để lại
   thông báo lỗi, nên bỏ hẳn thay vì giữ.
   Muốn thử lại thì mở khối dưới đây và kiểm tra trên trình duyệt thật:

   @view-transition { navigation: auto; }
   ::view-transition-old(root) { animation: fx-vt-out 220ms var(--vm-ease-in-out) both; }
   ::view-transition-new(root) { animation: fx-vt-in 320ms var(--vm-ease-out) both; }
   @keyframes fx-vt-out { to { opacity: 0; transform: translateY(-8px); } }
   @keyframes fx-vt-in { from { opacity: 0; transform: translateY(10px); } }
*/

/* =====================================================================
   1. CON TRỎ TUỲ BIẾN
   Chỉ bật khi có chuột thật. Ô nhập liệu vẫn giữ con trỏ gốc để không
   cản trở việc gõ và bôi đen văn bản.
   ===================================================================== */
.fx-cursor, .fx-cursor-ring { display: none; }

@media (hover: hover) and (pointer: fine) {
  html[data-fx-cursor="on"] body { cursor: none; }
  html[data-fx-cursor="on"] a,
  html[data-fx-cursor="on"] button,
  html[data-fx-cursor="on"] summary,
  html[data-fx-cursor="on"] label { cursor: none; }
  /* Giữ con trỏ gốc ở nơi cần nhìn rõ điểm chèn văn bản */
  html[data-fx-cursor="on"] input,
  html[data-fx-cursor="on"] textarea,
  html[data-fx-cursor="on"] select,
  html[data-fx-cursor="on"] [contenteditable],
  html[data-fx-cursor="on"] iframe { cursor: auto; }

  html[data-fx-cursor="on"] .fx-cursor {
    display: block;
    position: fixed; top: 0; left: 0;
    z-index: 9999;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--vm-accent-600);
    pointer-events: none;
    transform: translate3d(-100px, -100px, 0);
  }
  html[data-fx-cursor="on"] .fx-cursor-ring {
    display: block;
    position: fixed; top: 0; left: 0;
    z-index: 9998;
    width: 36px; height: 36px;
    border: 1.5px solid color-mix(in srgb, var(--vm-brand) 65%, transparent);
    border-radius: 50%;
    pointer-events: none;
    transform: translate3d(-100px, -100px, 0);
    transition: width 220ms var(--vm-ease-out), height 220ms var(--vm-ease-out),
                border-color 220ms var(--vm-ease-out), background-color 220ms var(--vm-ease-out);
  }
  html[data-fx-cursor="on"] .fx-cursor-ring.is-hot {
    width: 64px; height: 64px;
    border-color: var(--vm-accent-600);
    background: color-mix(in srgb, var(--vm-accent-500) 12%, transparent);
  }
  html[data-fx-cursor="on"] .fx-cursor-ring.is-text {
    width: 4px; height: 26px;
    border-radius: 2px;
    border-color: transparent;
    background: color-mix(in srgb, var(--vm-brand) 55%, transparent);
  }
}

/* =====================================================================
   2. THANH TIẾN TRÌNH CUỘN
   ===================================================================== */
.fx-progress {
  position: fixed; top: 0; left: 0;
  z-index: calc(var(--vm-z-header) + 2);
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--vm-primary-500), var(--vm-accent-600));
  pointer-events: none;
}

/* =====================================================================
   3. CHỮ HIỆN DẦN
   ===================================================================== */
.fx-word { display: inline-block; white-space: nowrap; }
.fx-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.8em) rotate(3deg);
  animation: fx-char-in 720ms var(--vm-ease-out) forwards;
  animation-delay: var(--fx-d, 0ms);
}
@keyframes fx-char-in { to { opacity: 1; transform: none; } }

/* Dòng chữ có gradient KHÔNG được tách ký tự: mỗi ký tự mang transform
   riêng sẽ tạo lớp vẽ mới, làm background-clip:text của dòng cha mất tác
   dụng và chữ biến mất. Dòng như vậy dùng lớp này để chạy nguyên khối. */
.fx-line-in {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  animation: fx-char-in 860ms var(--vm-ease-out) var(--fx-d, 400ms) forwards;
}

/* Hiện từng phần tử con theo thứ tự */
.fx-lines > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 680ms var(--vm-ease-out), transform 680ms var(--vm-ease-out);
  transition-delay: var(--fx-d, 0ms);
}
.fx-lines.is-visible > * { opacity: 1; transform: none; }

/* =====================================================================
   4. ẢNH MỞ BẰNG MẶT NẠ
   ===================================================================== */
/* KHÔNG dùng clip-path để giấu ảnh.
   Lý do: clip-path cắt phần tử về diện tích bằng 0, khiến
   IntersectionObserver luôn báo intersectionRatio = 0 và isIntersecting =
   false. Thế là lớp .is-visible không bao giờ được thêm, ảnh bị che vĩnh
   viễn — một vòng khoá chết.
   Thay bằng một tấm rèm màu thương hiệu phủ lên rồi trượt đi: phần tử
   luôn có diện tích thật nên observer hoạt động bình thường. */
.fx-mask {
  position: relative;
  overflow: hidden;
  border-radius: var(--vm-radius-xl);
  isolation: isolate;
}
.fx-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--vm-grad-brand);
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 900ms var(--vm-ease-out);
}
.fx-mask.is-visible::after { transform: scaleX(0); }
.fx-mask > img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1200ms var(--vm-ease-out);
}
.fx-mask.is-visible > img { transform: scale(1); }

/* Biến thể trượt rèm từ dưới lên */
.fx-mask--up::after { transform: scaleY(1); transform-origin: bottom center; }
.fx-mask--up.is-visible::after { transform: scaleY(0); }

/* =====================================================================
   5. ẢNH MỜ DẦN KHI TẢI XONG
   ===================================================================== */
.fx-blur img, img.fx-blur {
  filter: blur(14px);
  transform: scale(1.04);
  transition: filter 620ms var(--vm-ease-out), transform 620ms var(--vm-ease-out);
}
.fx-blur img.is-loaded, img.fx-blur.is-loaded { filter: none; transform: none; }

/* =====================================================================
   6. NÚT "HÍT" THEO CON TRỎ
   ===================================================================== */
.fx-magnetic { will-change: transform; transition: transform 360ms var(--vm-ease-out); }
.fx-magnetic__inner { display: inline-flex; align-items: center; gap: var(--vm-space-2); will-change: transform; }

/* =====================================================================
   7. GỢN SÓNG KHI BẤM
   ===================================================================== */
.fx-ripple {
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 45%, transparent);
  transform: scale(0);
  opacity: 0.7;
  pointer-events: none;
  animation: fx-ripple 620ms var(--vm-ease-out) forwards;
}
@keyframes fx-ripple { to { transform: scale(2.6); opacity: 0; } }

/* =====================================================================
   8. THẺ NGHIÊNG 3D + VỆT SÁNG THEO CON TRỎ
   ===================================================================== */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 380ms var(--vm-ease-out), box-shadow 380ms var(--vm-ease-out);
}
.fx-shine {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--fx-mx, 50%) var(--fx-my, 50%),
              color-mix(in srgb, var(--vm-primary-300) 26%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity 300ms var(--vm-ease-out);
}
[data-tilt]:hover > .fx-shine { opacity: 1; }

/* Đèn rọi theo con trỏ trên section nền tối */
.fx-spotlight { position: relative; isolation: isolate; }
.fx-spotlight::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--fx-sx, 50%) var(--fx-sy, 50%),
              rgba(255, 255, 255, 0.07), transparent 65%);
  opacity: 0;
  transition: opacity 420ms var(--vm-ease-out);
}
.fx-spotlight:hover::before { opacity: 1; }
.fx-spotlight > * { position: relative; z-index: 1; }

/* =====================================================================
   9. DẢI CHỮ CHẠY CỠ LỚN
   ===================================================================== */
.fx-band {
  position: relative;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-block: 1px solid var(--vm-border);
  background: var(--vm-bg-subtle);
  overflow: hidden;
}
.fx-band__track { display: flex; width: max-content; gap: var(--vm-space-10); animation: vm-marquee 52s linear infinite; }
.fx-band:hover .fx-band__track { animation-play-state: paused; }
.fx-band__item {
  display: inline-flex; align-items: center; gap: var(--vm-space-10);
  font-family: var(--vm-font-display);
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  font-weight: var(--vm-weight-black);
  letter-spacing: -0.025em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--vm-text) 32%, transparent);
  white-space: nowrap;
  transition: color 280ms var(--vm-ease-out), -webkit-text-stroke-color 280ms var(--vm-ease-out);
}
.fx-band__item:hover { color: var(--vm-brand); -webkit-text-stroke-color: transparent; }
.fx-band__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vm-cta); flex-shrink: 0; }

/* =====================================================================
   10. THẺ XẾP CHỒNG DÍNH KHI CUỘN
   ===================================================================== */
.fx-stack__list { display: flex; flex-direction: column; gap: var(--vm-space-6); padding-bottom: 38vh; }
.fx-stack__item {
  position: sticky;
  top: calc(var(--vm-header-h) + 2rem + var(--fx-i, 0) * 15px);
  display: grid; grid-template-columns: 92px 1fr auto; gap: var(--vm-space-6);
  align-items: center;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border-radius: var(--vm-radius-xl);
  background: linear-gradient(135deg, rgba(26, 42, 56, 0.96), rgba(14, 26, 36, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  transition: border-color 380ms var(--vm-ease-out);
}
.fx-stack__item:hover { border-color: color-mix(in srgb, var(--vm-primary-400) 55%, transparent); }
@media (max-width: 860px) {
  .fx-stack__item { grid-template-columns: 58px 1fr; gap: var(--vm-space-4); }
  .fx-stack__cta { grid-column: 1 / -1; justify-self: start; }
}
.fx-stack__num {
  font-family: var(--vm-font-display);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: var(--vm-weight-black);
  line-height: 1;
  background: linear-gradient(140deg, var(--vm-primary-300), var(--vm-accent-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fx-stack__title { font-size: var(--vm-text-xl); color: #fff; margin-bottom: 6px; }
.fx-stack__desc { font-size: var(--vm-text-sm); color: rgba(255, 255, 255, 0.68); line-height: 1.75; max-width: 64ch; }

/* =====================================================================
   11. DẢI CUỘN NGANG ĐIỀU KHIỂN BẰNG CUỘN DỌC
   ===================================================================== */
.fx-hscroll { position: relative; }
.fx-hscroll__sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.fx-hscroll__head { margin-bottom: var(--vm-space-8); }
.fx-hscroll__track { display: flex; gap: var(--vm-space-5); padding-inline: var(--vm-gutter); will-change: transform; }
.fx-hcard {
  position: relative;
  flex: 0 0 clamp(230px, 25vw, 320px);
  aspect-ratio: 3 / 4;
  border-radius: var(--vm-radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--vm-neutral-900);
  isolation: isolate;
}
.fx-hcard img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.6;
  transition: transform 850ms var(--vm-ease-out), opacity 450ms var(--vm-ease-out);
}
.fx-hcard:hover img { transform: scale(1.09); opacity: 0.4; }
.fx-hcard::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 20, 28, 0.96) 5%, rgba(8, 20, 28, 0.44) 48%, transparent 88%);
}
.fx-hcard__body {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: var(--vm-space-5);
}
.fx-hcard__idx { position: absolute; top: var(--vm-space-5); right: var(--vm-space-5); font-family: var(--vm-font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.fx-hcard__count {
  align-self: flex-start;
  padding: 4px 10px; border-radius: var(--vm-radius-pill);
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 10px; font-weight: var(--vm-weight-bold);
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
}
.fx-hcard__title { font-size: var(--vm-text-lg); line-height: 1.2; color: #fff; }
.fx-hcard__go {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--vm-text-xs); font-weight: var(--vm-weight-bold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--vm-primary-200);
}
.fx-hcard__go svg { width: 15px; height: 15px; transition: transform 280ms var(--vm-ease-out); }
.fx-hcard:hover .fx-hcard__go svg { transform: translateX(5px); }
.fx-hscroll__bar { margin-top: var(--vm-space-8); height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.fx-hscroll__bar i { display: block; height: 100%; width: 0; background: var(--vm-grad-cta); }

/* Màn hình nhỏ: trả về dải trượt tay, không cướp thao tác cuộn của người dùng */
@media (max-width: 860px) {
  .fx-hscroll { height: auto !important; }
  .fx-hscroll__sticky { position: static; height: auto; }
  .fx-hscroll__track {
    transform: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: var(--vm-space-4);
    scrollbar-width: none;
  }
  .fx-hscroll__track::-webkit-scrollbar { display: none; }
  .fx-hcard { scroll-snap-align: start; flex-basis: 72vw; }
  .fx-hscroll__bar { display: none; }
}

/* =====================================================================
   12. VÒNG TRÒN TIẾN TRÌNH
   ===================================================================== */
.fx-ring { display: flex; flex-direction: column; align-items: center; gap: var(--vm-space-3); text-align: center; }
.fx-ring__wrap { position: relative; width: 128px; height: 128px; }
.fx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fx-ring__bg { fill: none; stroke: color-mix(in srgb, var(--vm-text) 10%, transparent); stroke-width: 7; }
.fx-ring__fg {
  fill: none; stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 408.4; stroke-dashoffset: 408.4;
  transition: stroke-dashoffset 1500ms var(--vm-ease-out);
}
.fx-ring__val {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--vm-font-display);
  font-size: 1.6rem; font-weight: var(--vm-weight-black);
  color: var(--vm-text);
}
.fx-ring__label { font-size: var(--vm-text-sm); color: var(--vm-text-soft); max-width: 20ch; }
.vm-section--dark .fx-ring__val { color: #fff; }
.vm-section--dark .fx-ring__label { color: var(--vm-text-on-deep-soft); }
.vm-section--dark .fx-ring__bg { stroke: rgba(255, 255, 255, 0.12); }

/* =====================================================================
   13. VIỀN GRADIENT XOAY
   ===================================================================== */
.fx-glow-border { position: relative; isolation: isolate; }
.fx-glow-border::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--vm-angle, 0deg),
    transparent 0%, var(--vm-primary-400) 12%, var(--vm-accent-500) 26%, transparent 42%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: vm-rotate-angle 6s linear infinite;
}

/* =====================================================================
   14. VẼ ĐƯỜNG SVG THEO CUỘN
   ===================================================================== */
[data-draw] {
  stroke-dasharray: var(--fx-len, 1000);
  stroke-dashoffset: var(--fx-len, 1000);
  transition: stroke-dashoffset 1800ms var(--vm-ease-out);
}
[data-draw].is-visible { stroke-dashoffset: 0; }

/* =====================================================================
   15. LIÊN KẾT ĐIỀU HƯỚNG: CHỮ TRƯỢT LÊN KHI RÊ CHUỘT
   ===================================================================== */
.fx-swap { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.fx-swap__a, .fx-swap__b { display: block; transition: transform 380ms var(--vm-ease-out); }
.fx-swap__b { position: absolute; inset: 0; transform: translateY(105%); color: var(--vm-brand); }
.vm-nav__link:hover .fx-swap__a { transform: translateY(-105%); }
.vm-nav__link:hover .fx-swap__b { transform: translateY(0); }

/* =====================================================================
   16. THANH HÀNH ĐỘNG DÍNH XUẤT HIỆN SAU KHI CUỘN QUA ĐẦU TRANG
   ===================================================================== */
.fx-sticky-cta {
  position: fixed;
  left: 50%; bottom: var(--vm-space-5);
  transform: translate(-50%, 140%);
  z-index: var(--vm-z-sticky);
  display: flex; align-items: center; gap: var(--vm-space-4);
  padding: 10px 10px 10px var(--vm-space-6);
  border-radius: var(--vm-radius-pill);
  background: var(--vm-glass);
  border: 1px solid var(--vm-border);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: var(--vm-shadow-xl);
  transition: transform 480ms var(--vm-ease-spring), opacity 320ms var(--vm-ease-out);
  opacity: 0;
}
.fx-sticky-cta.is-visible { transform: translate(-50%, 0); opacity: 1; }
.fx-sticky-cta__text { font-size: var(--vm-text-sm); font-weight: var(--vm-weight-medium); color: var(--vm-text); white-space: nowrap; }
.fx-sticky-cta__text b { color: var(--vm-cta); }
@media (max-width: 720px) {
  .fx-sticky-cta { display: none; }
}

/* =====================================================================
   17. TÔN TRỌNG THIẾT LẬP GIẢM CHUYỂN ĐỘNG
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html[data-fx-cursor="on"] body { cursor: auto; }
  .fx-cursor, .fx-cursor-ring { display: none !important; }
  .fx-char, .fx-line-in { opacity: 1; transform: none; animation: none; }
  .fx-lines > * { opacity: 1; transform: none; }
  .fx-mask::after, .fx-mask--up::after { transform: scaleX(0); }
  .fx-mask > img { transform: none; }
  .fx-blur img, img.fx-blur { filter: none; transform: none; }
  .fx-band__track { animation: none; }
  .fx-glow-border::before { animation: none; }
  [data-draw] { stroke-dashoffset: 0; }
  .fx-ripple { display: none; }
}