/* Khung & tỉ lệ */
.wdp-banners { position: relative; margin-top: 18px; }
.wdp-banners .wdp-banner-slide {
  position: relative; overflow: hidden;
  border-radius: var(--wdp-radius, 12px);
  aspect-ratio: var(--wdp-aspect, 21/9);
}
.wdp-banner-img { width:100%; height:100%; object-fit: cover; display:block; }

/* Overlay */
.wdp-banner-overlay {
  position: absolute; inset: 0; display:flex; flex-direction: column;
  justify-content: center; padding: clamp(14px, 4vw, 40px);
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.wdp-banner-slide.align-left  .wdp-banner-overlay { align-items: flex-start; text-align: left; }
.wdp-banner-slide.align-center.wdp-banner-slide .wdp-banner-overlay,
.wdp-banner-slide.align-center .wdp-banner-overlay { align-items: center; text-align: center; }
.wdp-banner-slide.align-right .wdp-banner-overlay { align-items: flex-end; text-align: right; }

.wdp-badge {
  background:#ff0033; color:#fff; font-weight:700; font-size:12px; letter-spacing:.4px;
  padding:6px 10px; border-radius:16px; display:inline-block; margin-bottom:10px;
}
.wdp-banner-title { font-size: clamp(22px, 5vw, 48px); line-height:1.1; margin: 4px 0 12px; font-weight:800; }
.wdp-banner-btn {
  background:#fff; color:#111; padding:10px 18px; border-radius:999px; font-weight:700;
  text-decoration:none; display:inline-block;
}
.wdp-banner-btn:hover { filter: brightness(.94); }

/* Nav & pagination */
.wdp-banners-nav { position:absolute; left:0; right:0; top:calc(50% - 20px); display:flex; justify-content:space-between; pointer-events:none; padding:0 6px; }
.wdp-banners-nav .wdp-prev, .wdp-banners-nav .wdp-next {
  width:40px; height:40px; border-radius:50%; border:1px solid #ddd; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.12);
  pointer-events:auto;
}
.wdp-banners-nav .wdp-prev::before, .wdp-banners-nav .wdp-next::before {
  content:''; display:block; width:10px; height:10px; border-top:2px solid #333; border-right:2px solid #333; margin:12px;
  transform: rotate(225deg);
}
.wdp-banners-nav .wdp-next::before { transform: rotate(45deg); margin-left:16px; }

.wdp-banners .wdp-banners-pagination { position:absolute; left:0; right:0; bottom:10px; text-align:center; }
.wdp-banners .swiper-pagination-bullet { background:#fff; opacity:.7; }
.wdp-banners .swiper-pagination-bullet-active { opacity:1; }