/* giảm z-index của header và các section khác xuống cho nằm dưới popup */
body.popup-open #header,
body.popup-open .header-main,
body.popup-open .header-wrapper {
  z-index: 1 !important;
}

body.popup-open .section-content {
  z-index: 0 !important;
}

 /* Overlay */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 10;
}

/* show popup */
.popup-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* Popup box */
.popup {
  width: 100%;
  max-width: 60rem;
  height: auto;
  max-height: 65vh;
  min-height: 25rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);

  background: #e5f5ff;
  border-radius: 1rem;
  position: relative;
}

/* Close button */
.popup-close {
  text-align: end;

  button {
    cursor: pointer;
    margin: 0.5rem 0.5rem 0 0;
    padding: 0;
    width: 2.5rem;
    height: 2.5rem;
  }

  button:hover {
    color: #2563EB;
  }
}

/* KHÓA SCROLL NỀN – CHỈ overflow */
html.popup-open,
body.popup-open {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

.popup-overlay {
  overscroll-behavior: none;
}

/* style popup */
.area-click  {
  padding: 0 2.5rem;
}

.area-click img {
  transition: transform 0.3s ease;
  will-change: transform;
}

.area-click img,
.area-click strong,
.area-click span {
  cursor: pointer;
}

.area-click img:hover,
.area-click strong:hover ~ img,
.area-click span:hover ~ img {
  transform: scale(1.04);
}

.popup-overlay .popup .popup-content {
  display: flex;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  gap: 2.5rem;
  padding: 2.5rem;

  .popup-content-container {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }

  .popup-name {
    color: #113163;
    font-weight: 600;
  }

  p, div {
    color: #49494A;
  }

  .popup-description {
    margin: 0;
    white-space: pre-line;
  }

  img {
    max-width: none;
    width: 15rem;
  }
}

/* swiper full width cha */
.popup .swiper,
.popup .swiper-wrapper,
.popup .swiper-slide {
  width: 100%;
}

.popup-overlay .swiper-button-prev,
.popup-overlay .swiper-button-next {
  background-color: gray;
  transition: background-color 0.5s ease, box-shadow 0.2s ease;
  border-radius: 50%;
  padding: 8px;
  position: static;
  color: white;

  svg {
    transition: color 0.5s ease;
  }
}

.popup-overlay .swiper-button-prev {
  margin-right: 0.5rem;
}

.popup-overlay .swiper-button-next {
  margin-left: 0.5rem;
}

.popup-overlay .swiper-button-prev:hover ,
.popup-overlay .swiper-button-next:hover {
  background: #f2f2f2;
  color:  #2563EB;
}

/* Responsive */
@media (max-width: 849px) {
  .popup-overlay .swiper-button-prev,
  .popup-overlay .swiper-button-next {
    position: absolute;
    top: auto;
    margin: 0;
    bottom: 1rem;
    width: 2.5rem;
    height: 2.5rem;
  }

  .popup-overlay .swiper-button-prev {
    left: calc(50% - 4rem);
  }

  .popup-overlay .swiper-button-next {
    right: calc(50% - 4rem);
  }

  .popup-overlay .popup {
    max-height: none;
    max-width: none;
    height: 100dvh;
    width: 100%;
    border-radius: 0;
  }

  .swiper-button-prev,
  .swiper-button-next {
    position: absolute;
  }

  .popup-overlay .popup .popup-content {
    flex-direction: column;
    align-items: center;
    padding-bottom: 4rem;
  }
}

@media (min-width: 850px) and (max-width: 1280px) {
  .popup-overlay .popup {
    width: 100%;
    max-width: 45rem;
    min-height: 20rem; 
  }

  .popup-overlay .popup .popup-content img {
    width: 10rem;
  }
}