/* KHAGAN HERO SLIDER — LIGHT BORDER PROGRESS */

.khx-hero .slider{
  position:relative;
}

.khx-hero .slide{
  transition:opacity .5s ease!important;
}

/* Гэрэлтэй хүрээ */
.khx-hero .khx-slide-progress{
  position:absolute;
  inset:0;
  z-index:24;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}

.khx-hero .khx-slide-progress-line,
.khx-hero .khx-slide-progress-glow{
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.khx-hero .khx-slide-progress-line{
  stroke:rgba(255,255,255,.96);
  stroke-width:2.2;
}

.khx-hero .khx-slide-progress-glow{
  stroke:rgba(255,255,255,.72);
  stroke-width:7;
  filter:
    drop-shadow(0 0 7px rgba(255,255,255,.95))
    drop-shadow(0 0 16px rgba(255,255,255,.52));
}

/* Control-ууд хүрээнээс дээр харагдана */
.khx-hero .khx-slider-btn,
.khx-hero .slider-btn,
.khx-hero .khx-slider-dots,
.khx-hero .khx-slider-index,
.khx-hero .khx-hero-copy{
  z-index:30!important;
}

/* Цэгэн navigation */
.khx-hero .khx-slider-dots{
  position:absolute;
  left:50%;
  bottom:30px;
  display:flex;
  align-items:center;
  gap:11px;
  transform:translateX(-50%);
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.34);
  backdrop-filter:blur(8px);
}

.khx-hero .khx-slider-dots button{
  width:10px;
  height:10px;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.82);
  border-radius:50%;
  background:rgba(255,255,255,.28);
  cursor:pointer;
  appearance:none;
  transition:transform .18s ease, background .18s ease;
}

.khx-hero .khx-slider-dots button.is-active{
  background:#fff;
  transform:scale(1.22);
}

/* Pause */
.khx-hero.is-paused::after{
  content:"PAUSED";
  position:absolute;
  right:22px;
  bottom:24px;
  z-index:31;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.48);
  color:#fff;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  pointer-events:none;
}

@media(max-width:900px){

  .khx-hero .khx-slider-dots{
    bottom:18px;
    gap:9px;
    padding:7px 10px;
  }

  .khx-hero .khx-slider-dots button{
    width:9px;
    height:9px;
  }

  .khx-hero.is-paused::after{
    right:14px;
    bottom:14px;
  }

  .khx-hero .khx-slide-progress-line{
    stroke-width:2;
  }

  .khx-hero .khx-slide-progress-glow{
    stroke-width:5;
  }
}