/**
 * Webify Data Engine — Loop Carousel Styles
 */

.wde-loop-carousel-wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.wde-loop-swiper {
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
}

.wde-loop-swiper > .swiper-wrapper {
  display: flex !important;
  flex-direction: row !important;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.wde-carousel-page-slide {
  width: 100% !important;
  height: auto;
  box-sizing: border-box;
  flex-shrink: 0 !important;
}

/* Multi-Row CSS Grid inside each slide page */
.wde-loop-grid-page {
  display: grid;
  width: 100%;
  box-sizing: border-box;
}

.wde-loop-item-wrap {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.wde-loop-item-wrap > .elementor,
.wde-loop-item-wrap .e-loop-item {
  position: relative;
  width: 100%;
  height: 100%;
}

.wde-loop-item-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* Navigation Buttons */
.wde-swiper-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  user-select: none;
  background-color: #1F5DB5;
  color: #FFFFFF;
  border-radius: 30px;
  padding: 15px;
  font-size: 20px;
  line-height: 1;
  box-sizing: border-box;
}

.wde-swiper-button svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: block;
}

.wde-swiper-button i {
  display: inline-block;
  line-height: 1;
  font-size: 1em;
}

.wde-swiper-button-prev {
  left: -25px;
}

.wde-swiper-button-next {
  right: -25px;
}

.wde-swiper-button.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Pagination Dots */
.wde-swiper-pagination {
  position: relative !important;
  bottom: auto !important;
  text-align: center;
  margin-top: 20px;
  width: 100% !important;
}

.wde-swiper-pagination .swiper-pagination-bullet {
  display: inline-block;
  border-radius: 50%;
  background-color: #2199D5;
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 4px;
}

.wde-swiper-pagination .swiper-pagination-bullet-active {
  background-color: #1F5DB5;
  opacity: 1;
}

/* Equal Height (Chiều cao bằng nhau) */
.wde-equal-height-yes .swiper-slide,
.wde-equal-height-yes .wde-carousel-page-slide,
.wde-carousel-page-slide:has(.wde-equal-height) {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  align-self: stretch !important;
}

.wde-equal-height-yes .wde-loop-grid-page,
.wde-loop-grid-page.wde-equal-height {
  height: 100% !important;
  grid-auto-rows: 1fr !important;
  grid-template-rows: repeat(var(--wde-rows, 1), 1fr) !important;
  align-items: stretch !important;
}

.wde-equal-height-yes .wde-loop-item-wrap,
.wde-loop-grid-page.wde-equal-height .wde-loop-item-wrap {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
}

.wde-equal-height-yes .wde-loop-item-wrap > .elementor,
.wde-equal-height-yes .wde-loop-item-wrap .e-loop-item,
.wde-loop-grid-page.wde-equal-height .wde-loop-item-wrap > .elementor,
.wde-loop-grid-page.wde-equal-height .wde-loop-item-wrap .e-loop-item {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  align-self: stretch !important;
  width: 100% !important;
}

.wde-equal-height-yes .wde-loop-item-wrap .e-con,
.wde-equal-height-yes .wde-loop-item-wrap .e-con-boxed,
.wde-equal-height-yes .wde-loop-item-wrap .e-con-inner,
.wde-equal-height-yes .wde-loop-item-wrap .elementor-section-wrap > .e-con,
.wde-loop-grid-page.wde-equal-height .wde-loop-item-wrap .e-con,
.wde-loop-grid-page.wde-equal-height .wde-loop-item-wrap .e-con-boxed,
.wde-loop-grid-page.wde-equal-height .wde-loop-item-wrap .e-con-inner,
.wde-loop-grid-page.wde-equal-height .wde-loop-item-wrap .elementor-section-wrap > .e-con {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.wde-equal-height-yes .wde-loop-item-wrap .elementor-section,
.wde-equal-height-yes .wde-loop-item-wrap .elementor-section > .elementor-container,
.wde-equal-height-yes .wde-loop-item-wrap .elementor-column,
.wde-equal-height-yes .wde-loop-item-wrap .elementor-column-wrap,
.wde-equal-height-yes .wde-loop-item-wrap .elementor-widget-wrap,
.wde-loop-grid-page.wde-equal-height .wde-loop-item-wrap .elementor-section,
.wde-loop-grid-page.wde-equal-height .wde-loop-item-wrap .elementor-section > .elementor-container,
.wde-loop-grid-page.wde-equal-height .wde-loop-item-wrap .elementor-column,
.wde-loop-grid-page.wde-equal-height .wde-loop-item-wrap .elementor-column-wrap,
.wde-loop-grid-page.wde-equal-height .wde-loop-item-wrap .elementor-widget-wrap {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}