/* HVSC – Rê chuột vào link: ĐỔI MÀU, không gạch chân + chỉ 1 thanh cuộn trang (12/10/2026)
   Nạp cuối cùng (mu-plugins/zz-hv-link-hover.php, sau hv-visual). Tắt 1 trang: ?hv_no_lh=1. Nguồn: build/hover-scroll/ */

/* ============ A. MỘT THANH CUỘN ============
   Nguyên nhân: plugin hvsc-booking in `html,body{overflow-x:clip}` → <html> không còn overflow "visible" nên overflow của <body>
   KHÔNG được đẩy lên viewport. Menu (drawer) và popup Vé khoá cuộn bằng body.style.overflow='hidden' → body thành hộp cuộn riêng,
   trang vẫn cuộn phía sau và vẫn còn thanh cuộn trang, cộng thanh cuộn của menu → 2 thanh cạnh nhau bên phải.
   Sửa: trả <html> về visible (body vẫn clip → viewport chặn tràn ngang như cũ) để khoá body có tác dụng lên cả trang;
   chừa sẵn rãnh thanh cuộn để lúc khoá không bị giật ngang. */
:root { overflow-x: visible; scrollbar-gutter: stable; }
/* chốt chặn: lớp phủ nào đang mở cũng khoá trang ở <html> (kể cả script cũ chỉ khoá body: hv-scrollbar.js gắn html.hv-lock khi body.style.overflow=hidden).
   KHÔNG dùng html:has(> body[style*=...]): mọi lần JS ghi style bất kỳ phần tử (con trỏ, hiệu ứng) làm Chrome tính lại style cả trang (~0,6s mỗi giây khi rê chuột). */
html.hv-lock, html:has(.drawer:not([hidden])), html:has(.pv-pop) { overflow: hidden; }
/* Trang chủ: dải "4 mảng" bên trái có ray xám + vạch đỏ chạy theo cuộn + núm tròn → trông y hệt thanh cuộn thứ 2 (bên trái).
   Giữ 4 chấm bấm chuyển mảng (nhãn hiện khi rê/đang xem), bỏ ray/vạch/núm/tia. */
.hv-sb__track, .hv-sb__spark { display: none !important; }
/* nút "Góp ý giao diện" không đè lên menu đang mở */
html:has(.drawer:not([hidden])) .vfb-tab { visibility: hidden; }

/* ============ B. LINK: KHÔNG GẠCH CHÂN KHI RÊ / FOCUS ============
   Gạch chân mặc định của link trong đoạn văn (để nhận ra là link) GIỮ; rê chuột/focus thì bỏ gạch + đổi màu (chuyển màu mượt). */
:where(a, summary, [role="button"], .vfb-rep button, .vdh-dis .mo, .vdh-staff button, .hv-lead-more) {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
:is(a, button, summary, [role="button"], label):is(:hover, :focus, :focus-visible, :active),
:is(a, button, summary, [role="button"]):is(:hover, :focus, :focus-visible, :active) :not(del, s, strike),
.vdh-tk .it:hover b {
  text-decoration-line: none !important; /* không dùng transition cho gạch: tránh loé gạch chân 0,2s khi rê */
}

/* B2 (12/10, Việc 5): menu chính có vạch 2px (::before, hv-nav-ux.css) chạy ra dưới chữ khi rê/mở panel (is-open, aria-expanded – do JS
   hv-mega-nav gắn khi rê) = "gạch chân giả" anh Khoa thấy. Rê/mở chỉ đổi màu; vạch chỉ còn ở mục của trang hiện tại (đứng yên, không đổi khi rê). */
.main-nav__item:not(.is-current) > .main-nav__link::before { transform: scaleX(0) !important; }

/* ============ C. MÀU KHI RÊ (AA cả Sáng/Tối) ============
   Link chữ thường (chữ xám/đen) → màu trụ của trang (--px-ink) hoặc đỏ HVSC; link vốn đã màu nhấn → đậm hơn (Sáng) / sáng hơn (Tối). */
html {
  --lh-acc: var(--brand-ink);
}
body { --lh-acc: var(--px-ink, var(--brand-ink)); --lh-deep: color-mix(in oklab, var(--px-ink, var(--brand-ink)) 68%, var(--ink)); }

/* C1. menu, mục lục, breadcrumb, link "xem thêm", FAQ, thanh 4 mảng, link lẻ */
.main-nav__link:hover, .main-nav__link:focus-visible,
.hv-crumbs a:hover, .hv-crumbs a:focus-visible,
.hv-toc a:hover, .hv-toc a:focus-visible,
a.link-more:hover, a.link-more:focus-visible,
.qa summary:hover, .qa summary:focus-visible,
a.hv-sb__n:hover, a.hv-sb__n:focus-visible,
:is(.pt-kh__go, .pt-demo__go, .pm-rv, .csr-src, .pm-link, .hvb__tel, .hvx-card__tel, .pr-more, .hvx-mega__all, .pt-prod__link, .nl-proof__a, .vyt-yt, .nl-slim__a):is(:hover, :focus-visible) {
  color: var(--lh-acc) !important;
}
/* lối tắt 4 trụ ở hero trang chủ */
.pz__sub a:is(:hover, :focus-visible), a.pz__main:is(:hover, :focus-visible) { color: var(--lh-acc) !important; }

/* C2. link trong nội dung (đã có màu nhấn + gạch chân mặc định) → đậm/sáng hơn, gạch mờ đi */
:where(main p, main li, main dd, main figcaption, .hv-prose, .pm-prose, .csr-land, .qa__a, .pt-cell, .vfq-src) a:not([class]):is(:hover, :focus-visible),
.hv-prose a:is(:hover, :focus-visible), .pm-prose a:is(:hover, :focus-visible), .csr-land a:is(:hover, :focus-visible),
.pv :where(p, li, dd) a:not([class]):is(:hover, :focus-visible),
.qa__a a:is(:hover, :focus-visible), .pt-cell p a:is(:hover, :focus-visible), .pt-cell__links a:is(:hover, :focus-visible),
.page-content a.vil:is(:hover, :focus-visible), .vfq-src a:is(:hover, :focus-visible), .hvpf__ft a:is(:hover, :focus-visible),
.pm-hero__call a:is(:hover, :focus-visible), .pm-midcta span a:is(:hover, :focus-visible), a.nl:is(:hover, :focus-visible) {
  color: var(--lh-deep) !important;
}

/* C3. chân trang: đỏ HVSC (Sáng #C5161B trên nền trắng lạnh 5.5:1 · Tối #FF6B70 trên #0A0B0D 7.1:1) */
.site-footer a:not([class*="btn"]):not(.brand):not([class*="logo"]):is(:hover, :focus-visible),
.site-footer a:not([class*="btn"]):not(.brand):not([class*="logo"]):is(:hover, :focus-visible) :not(svg, path, i) {
  color: var(--brand-ink) !important;
}

/* C4. link trên nền tối (Tối: CTA, hộp hỗ trợ; cả 2 chế độ: toast) → hồng nhạt */
html[data-theme="dark"] .cta__fine a:is(:hover, :focus-visible), html[data-theme="dark"] .hv-help a.hv-help__tel:is(:hover, :focus-visible), .toast a:is(:hover, :focus-visible) {
  color: #FFD3D5 !important;
}
/* Sáng: CTA cuối trang + hộp hỗ trợ đã là nền sáng (hv-visual) → đỏ đậm */
html:not([data-theme="dark"]) .cta__fine a:is(:hover, :focus-visible), html:not([data-theme="dark"]) .hv-help a.hv-help__tel:is(:hover, :focus-visible) {
  color: var(--lh-deep) !important;
}

/* chân trang mục "Văn phòng" (em trong link) – bỏ gạch, đổi màu */
a.hvb__place:is(:hover, :focus-visible) em { color: var(--brand-ink) !important; }

@media (prefers-reduced-motion: reduce) {
  :where(a, summary, [role="button"]) { transition-duration: .01ms; }
}

/* ============ D. THANH CUỘN TUỲ CHỈNH (máy tính) – MỘT thanh bên phải, icon con trỏ theo trụ ============
   html.hv-csb gắn ở <head> (chuột thật, ≥900px, không Chế độ đọc) → ẩn thanh hệ thống, hv-scrollbar.js vẽ div.hv-sbar kéo được ở mép phải.
   Rail "4 mảng" bên trái của trang chủ (chấm màu) bỏ hẳn – thay bằng icon trên núm thanh cuộn. */
html.hv-csb { scrollbar-width: none; scrollbar-gutter: auto; }
html.hv-csb::-webkit-scrollbar { display: none; width: 0; height: 0; }
html.hv-csb .hv-sb { display: none !important; }
html.hv-csb .vfb-tab { right: 16px !important; }
.hv-sbar { --csb-track: rgba(15, 23, 42, .07); --csb-th: rgba(15, 23, 42, .34); --csb-th-h: rgba(15, 23, 42, .55); --csb-ring: #fff;
  position: fixed; top: 0; right: 0; bottom: 0; width: 14px; z-index: 9970; background: var(--csb-track); }
html[data-theme="dark"] .hv-sbar { --csb-track: rgba(255, 255, 255, .05); --csb-th: rgba(255, 255, 255, .34); --csb-th-h: rgba(255, 255, 255, .58); --csb-ring: #0F1012; }
html:not(.hv-csb) .hv-sbar, .hv-sbar[hidden], html.hv-reader .hv-sbar { display: none !important; }
.hv-sbar__th { position: absolute; top: 0; right: 3px; width: 8px; border-radius: 8px; background: var(--csb-th); cursor: grab; touch-action: none; transition: background-color .16s, width .16s, right .16s; will-change: transform; }
.hv-sbar:hover .hv-sbar__th, .hv-sbar.is-drag .hv-sbar__th { background: var(--csb-th-h); width: 10px; right: 2px; }
.hv-sbar.is-drag .hv-sbar__th { cursor: grabbing; }
/* icon con trỏ của trụ: nằm giữa núm, lấn sang trái để thấy rõ; 2 lớp để chuyển mượt */
.hv-sbar__ic { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -20px; border-radius: 50%;
  background: var(--csb-ring) center / 22px 22px no-repeat; box-shadow: 0 0 0 1px var(--csb-th), 0 4px 10px -4px rgba(0,0,0,.35);
  opacity: 0; transition: opacity .16s ease; pointer-events: none; }
.hv-sbar__ic.is-on { opacity: 1; }
.hv-sbar__ic { display: grid; place-items: center; }
.hv-sbar__ic svg { width: 20px; height: 20px; display: block; }
.hv-sbar__ic.is-dot { background-image: radial-gradient(circle, var(--dot) 0 4px, transparent 4.5px), radial-gradient(circle, transparent 0 7px, var(--dot) 7px 8px, transparent 8.5px) !important; background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) { .hv-sbar__th, .hv-sbar__ic { transition: none; } }
@media print { .hv-sbar { display: none !important; } }