@keyframes animateWaves {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}
.block-rv-index-map {
  padding-top: var(--inner-offset-top);
  padding-bottom: var(--inner-offset-bottom);
}
.rv-index-map .rv-map-position {position: relative;}
.rv-index-map .rv-map-position--heading {
  position: absolute;
  width: 100%;
  top: 30px;
  left: 0;
  text-align: center;
  z-index: 5;
}
.rv-index-map .rv-map-position--image {position: relative}
/* Lớp phủ tối ở đỉnh ảnh, làm nền cho chữ tiêu đề (.rv-map-position--heading,
   z-index:5) đè lên - tránh chữ bị chìm vào chỗ sáng của ảnh. Chỉ bật ở
   desktop vì mobile tiêu đề đã tách ra khỏi ảnh (position: static, xem
   media query max-width:992px bên dưới). */
.rv-index-map .rv-map-position--image::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%;
  height: 45%;
  background: linear-gradient(180deg, rgba(20,25,33,.6) 0%, rgba(20,25,33,.32) 55%, rgba(20,25,33,0) 100%);
  z-index: 2;
  pointer-events: none;
}
.rv-index-map .block-heading .block-heading--subtitle {justify-content: center;}
/* Tiêu đề đè lên ảnh (desktop) -> đổi màu sáng cho dễ đọc trên lớp phủ tối.
   Mobile heading tách khỏi ảnh, nằm trên nền kem -> trả lại màu tối gốc
   trong media query max-width:992px bên dưới, không thì chữ trắng biến mất. */
.rv-index-map .block-heading--title h2 {color: #FFFFFF;}
.rv-index-map .block-heading--subtitle .subtitle-text {color: #E8DCC0;}
.rv-index-map .rv-map-position-button {margin-top: 15px;}
.rv-map-position-item {
  position: absolute;
  top: var(--pos-y-desktop);
  left: var(--pos-x-desktop);
}
.rv-map-location-icon {
  line-height: 1.15;
  text-align: center;
  position: relative;
  cursor: pointer;
}
.rv-map-location-icon:focus-visible {
  outline: 2px solid #BDAD7B;
  outline-offset: 8px;
  border-radius: 50%;
}
.rv-map-position-item .title {
  width: max-content;
  max-width: 180px;
  min-height: 44px;
  height: auto;
  border-radius: 999px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.25;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  transition: all 0.5s ease;
  z-index: 9999;
  letter-spacing: 0;
  background-color: #FFFFFF;
  padding: 10px 14px;
  color: #000;
}
.rv-map-location-icon:hover .title,
.rv-map-location-icon:focus-visible .title {
  opacity: 1;
  visibility: visible;
  transition: all 0.5s ease;
  animation-delay: 500ms;
}
.rv-map-position-item .icon {
  transition: all 0.3s ease;
  position: relative;
  line-height: 1;
  display: block;
  z-index: 999;
  color: #BDAD7B;
  cursor: pointer;
}
.rv-map-position-item .icon svg {
  width: 40px;height: 40px;
}
.rv-map-position-item .icon .pulse-icon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
  background: #fff;
  animation: animateWaves 5s linear infinite;
}
.rv-map-position-item .icon .pulse-icon.item2{animation-delay: 3s;}
.rv-map-position-item .icon .pulse-icon.item3{animation-delay: 6s;}
.rv-map-position-item .icon .pulse-icon.item4{animation-delay: 9s;}
.rv-index-map .rv-map-position--backdrop {
  display: flex;
  position: absolute;
  min-height: 506px;
  background-color: transparent;
  background-image: linear-gradient(360deg, #F4F0E9 5.13%, #F4F0E900 72.41%);
  bottom: 0;left: 0;width: 100%;
}
.rv-map-banners-item--detail {
  display: flex;
  margin-top: 25px;
}
.rv-map-banners__inner {
  display: flex;
  gap: 0;
  max-width: 1290px;
  margin: auto;
}
.rv-map-banners-item {
  position: relative;
  padding: 0;
  max-width: 100%;
  flex: 0.9;
  cursor: pointer;
  transition: all 500ms ease;
}
.rv-map-banners-item--detail .banners--caption .banners--title{
  display: block;
  width: 184px;
  font-size: 18px;
  line-height: 1.2;
  color: #000;
  text-transform: uppercase;
}
.rv-map-banners-item .rv-map-banners-item--image {
  position: relative;
  height: 400px;
}
.rv-map-banners-item .rv-map-banners-item--image img {
  position: absolute;
  width: 100%;
  height: 400px;
  object-fit: cover;
  top: 0;
  left: 0;
  border-radius: 20px;
  overflow: hidden;
}
.rv-map-banners-item--detail .banners--desc {
  position: relative;
  transition: all 0.5s ease;
  min-height: 54px;
}
.rv-map-banners-item--detail .banners--description {
  width: 240px;
  position: absolute;
  top: 50%;
  left: 36px;
  transform: translate(0%, -50%);
  font-size: 16px;
  line-height: 150%;
  color: #8C8C8C;
  transition: all 0.5s ease;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}
.rv-map-banners-item.active {
  -webkit-box-flex: 2.58;
  flex-grow: 2.58;
}
.rv-map-banners-item.active .rv-map-banners-item--detail .banners--description {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 992px) {
  .rv-map-banners {
    margin-top: -130px;
  }
}
@media (max-width: 992px) {
  /* Mobile: cac banner xep doc full width, khop ty le anh (630x400) de khong bi cat.
     Desktop giu nguyen height 400px vi do la accordion co chu y. */
  .rv-map-banners-item .rv-map-banners-item--image {
    height: auto;
    aspect-ratio: 63 / 40;
  }
  .rv-map-banners-item .rv-map-banners-item--image img {
    height: 100%;
  }
  .block-rv-index-map {
    padding-top: var(--inner-offset-top-mobile);
    padding-bottom: var(--inner-offset-bottom-mobile);
  }
  .rv-map-position-item {
    position: absolute;
    top: var(--pos-y-mobile);
    left: var(--pos-x-mobile);
  }
  .rv-index-map .rv-map-position--heading {position: static;margin-bottom: 30px;}
  .rv-map-position-item .title {
    width: max-content;
    max-width: 110px;
    min-height: 0;
    height: auto;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1.2;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, calc(-100% - 10px));
  }
  .rv-map-position-item .icon svg {width: 15px;height: 15px;}
  .rv-map-banners {margin-top: 15px;}
  .rv-map-banners__inner {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
  .rv-map-banners-item--detail {display: block;}
  .rv-map-banners-item--detail .banners--caption .banners--title,
  .rv-map-banners-item--detail .banners--description{width: auto;}
  .rv-map-banners-item--detail .banners--description {
    position: static;
  }
  .rv-map-banners-item .rv-map-banners-item--detail .banners--description {
    opacity: 1;
    visibility: visible;
  }
  .rv-map-banners-item--detail {margin-top: 15px;}
  .rv-map-banners-item--detail .banners--desc{min-height: unset;}
  .rv-map-banners-item--detail .banners--caption .banners--title {
    font-weight: 500;
    margin-bottom: 5px;
  }
  .rv-map-banners-item .rv-map-banners-item--detail .banners--description {font-size: 14px;}
  .rv-index-map .rv-map-position--backdrop {display: none;}
  .rv-index-map .rv-map-position--image::before {display: none;}
  .rv-index-map .block-heading--title h2 {color: #141921;}
  .rv-index-map .block-heading--subtitle .subtitle-text {color: #141921;}
}