/* Only an initialized, scrollable document replaces the native scrollbar. */
.scroll-car-road { position: fixed; inset: 0 0 0 auto; width: 6px; z-index: 110; pointer-events: none; visibility: hidden; background: rgba(19, 40, 77, .18); opacity: 0; transition: opacity .3s; }
.has-scroll-car .scroll-car-road { visibility: visible; }
.scroll-car-road.is-scrolling { opacity: 1; }
.scroll-car-road::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: calc(var(--scroll-progress, 0) * 100%); background: linear-gradient(180deg, #f26a21, #e8452a 60%, #d4380f); box-shadow: 0 0 12px rgba(232, 69, 42, .6); }
.scroll-car-vehicle { position: absolute; top: 0; left: -4px; z-index: 1; width: 14px; height: 28px; opacity: 0; transition: opacity .25s; will-change: transform; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.scroll-car-vehicle::before { content: ""; display: block; width: 100%; height: 100%; background: url('../img/scroll-car.svg') center / contain no-repeat; transform: rotate(180deg); transition: transform .16s; }
.scroll-car-road.is-scrolling .scroll-car-vehicle { opacity: 1; }
.scroll-car-road.is-up .scroll-car-vehicle::before { transform: rotate(0deg); }
@media (min-width: 900px) and (pointer: fine) {
  html.has-scroll-car { scrollbar-width: none; }
  html.has-scroll-car::-webkit-scrollbar { display: none; }
  .scroll-car-road { width: 22px; opacity: 1; background: linear-gradient(90deg, #1d2026, #2a2d33 20%, #2a2d33 80%, #1d2026); box-shadow: inset 2px 0 0 rgba(255, 255, 255, .55), inset -2px 0 0 rgba(255, 255, 255, .55), -4px 0 18px rgba(19, 40, 77, .25); pointer-events: auto; cursor: grab; touch-action: none; user-select: none; }
  .scroll-car-road::before { content: ""; position: absolute; top: 0; bottom: 0; left: 10px; width: 2px; z-index: 1; background: repeating-linear-gradient(to bottom, #ffd23f 0 14px, transparent 14px 26px); }
  .scroll-car-road::after { left: 2px; right: 2px; opacity: .55; box-shadow: 0 0 16px rgba(242, 106, 33, .7); }
  .scroll-car-vehicle { left: 2px; z-index: 2; width: 18px; height: 34px; opacity: 1; }
  .scroll-car-road.is-dragging { cursor: grabbing; }
  html.has-scroll-car .contact-bar, html.has-scroll-car .contact-bar.has-zalo { right: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-car-vehicle, .scroll-car-vehicle::before { transition: none; }
}
@media print {
  .scroll-car-road { display: none !important; }
  html.has-scroll-car { scrollbar-width: auto; }
  html.has-scroll-car::-webkit-scrollbar { display: initial; }
}