/* ==========================================================================
   Thanh cuộn hình logo — kéo được (đồng bộ với discoveryairways.vn)
   Thay thanh cuộn gốc bằng một ray gold với con trượt là chính biểu tượng
   Discovery. Chỉ bật từ 901px trở lên; dưới ngưỡng đó scroll-rail.js gỡ hẳn
   và trả thanh cuộn gốc lại — mép phải trên điện thoại là vùng ngón cái.
   ========================================================================== */
@media (min-width: 901px) {
  html.dg-sr-on { scrollbar-width: none; }
  html.dg-sr-on::-webkit-scrollbar { width: 0; height: 0; }
}

.dg-sr {
  /* NGUỒN DUY NHẤT cho khoảng chừa hai đầu ray. scroll-rail.js đọc lại đúng
     hai biến này để quy đổi vị trí chuột ra tiến độ — sửa ở đây là JS tự theo.
     Chừa dưới rộng hơn để con trượt ở cuối trang không đè cụm nút liên hệ nổi. */
  --dg-sr-top: 96px;
  --dg-sr-bot: 124px;
  position: fixed;
  z-index: 880;
  right: clamp(12px, 1.5vw, 24px);
  top: 0; bottom: 0;
  width: 40px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1);
}
.dg-sr.is-on { opacity: 1; }

.dg-sr-track,
.dg-sr-fill {
  position: absolute;
  left: 50%;
  width: 1px;
  margin-left: -.5px;
  top: var(--dg-sr-top);
}
.dg-sr-track { bottom: var(--dg-sr-bot); background: rgba(157, 123, 63, .2); }
.dg-sr-fill {
  height: calc((100% - var(--dg-sr-top) - var(--dg-sr-bot)) * var(--dg-sr-p, 0));
  background: linear-gradient(180deg, #b79552, #e0c68d);
}

.dg-sr-thumb {
  position: absolute;
  left: 50%;
  width: 24px;
  aspect-ratio: 251 / 395;
  margin-left: -12px;
  top: calc(var(--dg-sr-top) + (100% - var(--dg-sr-top) - var(--dg-sr-bot)) * var(--dg-sr-p, 0));
  transform: translateY(-50%);
  background: linear-gradient(160deg, #f0d492, #c39a44 52%, #9c7535);
  -webkit-mask: url("/assets/discovery-symbol.png") center / contain no-repeat;
          mask: url("/assets/discovery-symbol.png") center / contain no-repeat;
  filter: drop-shadow(0 3px 8px rgba(157, 123, 63, .45));
  border: 0; padding: 0;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  transition: filter .3s cubic-bezier(.22, 1, .36, 1);
}
.dg-sr-thumb:active { cursor: grabbing; }
.dg-sr.is-drag .dg-sr-thumb { filter: drop-shadow(0 4px 16px rgba(157, 123, 63, .75)); }
.dg-sr-thumb:focus-visible { outline: 2px solid #b79552; outline-offset: 4px; }

@media print { .dg-sr { display: none; } }