.slider{
  width:100%;
  height:100%;              /* parent height ကို လိုက် */
  border-radius:8px;
  overflow:hidden;
  position:relative;
}
.slider-track{
  display:flex;
  width:100%;
  height:100%;
  transition:transform .45s ease;
  will-change:transform;
}
.slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  position:relative;
}
.slide-link{
  display:block;
  width:100%;
  height:100%;
}
.slide img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;      /* ⬅️ အပြည့်ဖြန့် (crop ဖြစ်နိုင်) */
  object-position:center;
}

.slide-caption{
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(0,0,0,.5);
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.2;
}

.slide-fallback{
  width: 100%;
  height: 100%;
  display:flex; align-items:center; justify-content:center;
  color:#6b7280;
  font-size: 14px;
}

/* Nav buttons */
.nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px; height:40px;
  border-radius:50%;
  border:0;
  background: rgba(0,0,0,.35);
  color:#fff;
  font-size:24px; line-height:40px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.nav:hover{ background: rgba(0,0,0,.5); }
.nav.prev{ left:12px; }
.nav.next{ right:12px; }

.slider .nav {
  display: none !important;
}

/* Dots */
.dots{
  position:absolute;
  left:0; right:0; bottom:10px;
  display:flex; gap:8px;
  justify-content:center; align-items:center;
}

/* Unselected dots */
.dot{
  width:8px; height:8px;          /* ← bigger size */
  border-radius:999px; border:0;
  background:#ffffff;                /* ← white for unselected */
  opacity:.9;
  cursor:pointer;
  transition:background .3s ease, transform .2s ease;
}

/* Selected dot */
.dot[aria-selected="true"]{
  background:#2f72ff;               /* ← active color (primary blue) */
  opacity:1;
  transform:scale(1.15);            /* ← slightly enlarged on active */
}

/* Optional hover/focus effect */
.dot:hover,
.dot:focus-visible{
  opacity:1;
  transform:scale(1.1);
}

.slider .dots .dot{
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;      /* perfect circle */
  padding: 0 !important;               /* remove default button padding */
  border: 0 !important;
  display: inline-block !important;
  box-sizing: content-box !important;  /* don't include border/padding in size */
  line-height: 0 !important;           /* avoid text metrics affecting height */
  appearance: none !important;
  -webkit-appearance: none !important; /* iOS Safari */
  background: #fff !important;         /* unselected = white */
  opacity: .95 !important;
  vertical-align: middle;
}

.slider .dots .dot[aria-selected="true"]{
  background: #2f72ff !important;     /* selected */
  opacity: 1 !important;
  transform: none;                     /* (optional) remove scale effects */
}

.slider .slide-caption{ 
  display: none !important;
}

@media (max-width: 768px){
  /* ✅ Slider container */
.slide img{
    width:100%;
    height:100%;
    object-fit: contain;   /* ← “ပုံညီညီမပျက်” (သင် cover လိုချင်ရင် cover သို့ပြောင်း) */
    object-position:center;
    display:block;
  }


  /* ✅ Track & slides ပေါ်မှာ height အပြည့်တူ */
    .slider-track, .slide, .slide-link{ height:100%; }
  .slide img{
    width:100% !important;
    height:100% !important;
    object-fit:fill !important;    /* contain override ကို ဖယ် */
  }

  .slide-caption{
    position: absolute;
    left: 16px;
    bottom: 12px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.2;
  }
}