/* Slider cơ bản */
.slider {position:relative;overflow:hidden;width:100%;height:60vh;}
.slides {display:flex;transition:transform 0.6s ease-in-out;height:100%;}
.slide {flex:0 0 100%;position:relative;}
.slide img {width:100%;height:100%;object-fit:cover;display:block;}

/* Content overlay */
.hero-content {
  position:absolute;bottom:20%;left:10%;max-width:500px;
  background:rgba(0,0,0,0.5);padding:20px;border-radius:8px;color:#fff;
  opacity:0;transform:translateY(30px);
  transition:opacity 0.6s ease,transform 0.6s ease;
}
.slide.active .hero-content {opacity:1;transform:translateY(0);}
.hero-content h2,.hero-content p,.hero-content .btn-cta {margin:0 0 10px;}

/* Button CTA */
.btn-cta {
  display:inline-block;margin-top:10px;padding:10px 20px;
  background:#e63946;color:#fff;border-radius:6px;font-weight:bold;
  text-decoration:none;transition:background 0.3s;
}
.btn-cta:hover {background:#d62828;}

/* Prev/Next */
.prev,.next {
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,0.5);color:#fff;
  border:none;padding:10px 15px;font-size:2rem;cursor:pointer;border-radius:50%;z-index:5;
}
.prev {left:15px;} .next {right:15px;}
.prev:hover,.next:hover {background:rgba(0,0,0,0.8);}

/* Dots */
.dots {position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5;}
.dots button {width:12px;height:12px;border-radius:50%;border:none;background:rgba(255,255,255,0.6);cursor:pointer;}
.dots button.active {background:#e63946;}

/* Mobile */
@media(max-width:768px){
  .slider{height:40vh;}
  .hero-content{bottom:10%;left:5%;max-width:90%;padding:12px;}
  .hero-content h2{font-size:20px;}
}