@charset "UTF-8";
/*Scss for 360-tour web*/
:root {
  --header-height: clamp(52px, 6vw, 100px);
  --offset-y-bottom: calc(var(--header-height) + 75px);
  --offset-left: 60px;
  --offset-right: 60px;
  --offset-bottom: clamp(60px, 6vw, 120px);
  --btn-villass-info-offset-y-bottom: calc(var(--header-height) + 50px);
  --width-btn-item-collapse: 190px;
  --location-height: calc(100vh - var(--header-height));
  --body-height: calc(100vh - var(--header-height));
  --amenities-height: calc(100vh - var(--header-height));
  --body-tour-360-page-height: calc(100vh - var(--header-height));
}

@font-face {
  font-family: Montserrat;
  src: url(../fonts/Montserrat-Light.ttf);
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: Montserrat;
  src: url(../fonts/Montserrat-Regular.ttf);
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: Montserrat;
  src: url(../fonts/Montserrat-SemiBold.ttf);
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: Montserrat;
  src: url(../fonts/Montserrat-Bold.ttf);
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: Boska;
  src: url(../fonts/Boska-Italic.otf);
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: NotoSerifDisplay;
  src: url(../fonts/NotoSerifDisplay_300-Light.ttf);
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: NotoSerifDisplay;
  src: url(../fonts/NotoSerifDisplay_300-LightItalic.ttf);
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: Boska;
  src: url(../fonts/Boska-Italic.otf);
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Playfair Display";
  src: url(../fonts/PlayfairDisplay-Italic.ttf);
  font-style: normal;
  font-weight: 500;
}
.nav-link {
  color: #00504B;
  line-height: 20px;
  opacity: 0.5;
}
.nav-link:hover {
  color: #00504B;
  opacity: 1;
}

.nav-tabs {
  margin-bottom: 2rem;
}
.nav-tabs .nav-item:not(:last-child) {
  margin-right: 2rem;
}
.nav-tabs .nav-item .nav-link {
  text-transform: uppercase;
  padding: 0;
}
.nav-tabs .nav-item .nav-link:hover {
  text-decoration: none;
}
.nav-tabs .nav-item .nav-link.active {
  color: #00504B;
  opacity: 1;
  background-color: transparent;
}

.custom-tabs {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.custom-tabs::-webkit-scrollbar {
  display: none;
}
.custom-tabs .nav-link {
  font-weight: bold;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 0;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.2s;
}
.custom-tabs .nav-link.active, .custom-tabs .nav-link:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: none;
}

.btn {
  border-radius: 0;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  min-height: 38px;
}
.btn:focus {
  box-shadow: none !important;
}
.btn.btn-primary {
  border-color: #00504B;
  background: #00504B;
  color: #FFFFFF;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.btn-primary:hover {
  border-color: #FFFFFF;
  color: #FFFFFF;
  background: #00504B;
}
.btn.btn-outline-primary {
  background: transparent;
  color: #00504B;
  border-color: #00504B;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.btn-outline-primary:hover {
  background: #00504B;
  border-color: #00504B;
  color: #FFFFFF;
}
.btn.btn-outline-white {
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  background: transparent !important;
}
.btn.btn-outline-white:hover {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #00504B !important;
}
.btn.btn-white {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #00504B !important;
}
.btn.btn-white:hover {
  background: transparent !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}
.btn.btn-outline-light {
  background: transparent;
  height: 45px;
  color: #fff5dc;
  border: none;
  border-color: #96826E;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.btn-outline-light:hover {
  background: #96826E;
  border-color: #96826E;
  color: #00504B;
}
.btn.btn-outline-transparent {
  height: 45px;
  color: #00504B;
  border: none;
  border-color: #00504B;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.btn-outline-transparent:hover {
  background: #96826E;
  border-color: #96826E;
  color: #00504B;
  color: #fff;
}
.btn.btn-secondary {
  background: #96826E;
  color: #00504B;
}
.btn:hover {
  color: #96826E;
  background: #00504B;
}
.btn.btn-outline-secondary {
  color: #96826E;
  position: relative;
  height: 45px;
  width: 226px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 1;
}
.btn.btn-back {
  display: flex;
  align-items: center;
  letter-spacing: normal;
  text-transform: capitalize;
}
.btn.rounded-circle {
  width: 38px;
  height: 38px;
  color: #00504B;
}
.btn.btn-forgot-pass {
  text-decoration: underline;
  color: #00504B;
}
.btn.btn-forgot-pass:hover {
  background: transparent;
}
.btn.btn-sign-up {
  text-decoration: underline;
  color: #00504B;
  height: unset;
}
.btn.btn-sign-up:hover {
  background: transparent;
}

.disabled {
  pointer-events: none;
  opacity: 0.65;
}

/* Cứu cánh cho Chrome/Safari/Edge */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #00504B !important;
}

input:-moz-autofill,
input:-moz-autofill:hover,
input:-moz-autofill:focus {
  box-shadow: 0 0 0 1000px transparent inset !important;
  background-color: transparent !important;
}

input:autofill {
  appearance: none !important;
  background-image: none !important;
  -webkit-box-shadow: 0 0 0 1000px #E6F0F0 inset !important;
  background-color: transparent !important;
}

.disabled-z {
  pointer-events: none;
  cursor: default;
  background-color: transparent;
}

.required-z::after {
  content: "*";
  color: #dc3545;
}

.form-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #00504B;
  padding: 10px 0;
  background-color: transparent;
}
.form-input::-webkit-input-placeholder {
  color: #00504B;
  background-color: transparent;
}
.form-input:focus {
  outline: none;
  background-color: transparent;
}
.form-input:focus::-webkit-input-placeholder {
  opacity: 1;
  color: #a09e9e;
  background-color: transparent;
  transform: translate(-150px, 0px);
  transition: transform 0.5s;
}

.form-select {
  background: transparent;
  transition: none !important;
  border: none;
  border-bottom: 1px #00504B solid;
  padding: 0.75rem 0 0.375rem 0;
  color: #00504B;
  border-radius: 0;
}
.form-select:focus {
  outline: none;
  box-shadow: none;
  border-color: #00504B;
}
.form-select option {
  display: flex !important;
  flex-direction: column;
}

.form-control:focus {
  color: #212529;
  background-color: transparent;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-group {
  position: relative;
}
.form-group .bootstrap-select > .dropdown-toggle {
  border-color: #00504B;
}
.form-group .label-input {
  color: #00504B;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  position: absolute;
  top: 25%;
  left: 1rem;
  cursor: text;
  padding: 0 5px;
}
.form-group .label-input-custom {
  color: #00504B;
}
.form-group .form-control.is-invalid + .label-input {
  top: calc(50% - 13px);
}
.form-group .form-control {
  border-bottom: 1px #00504B solid;
  border-radius: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background: transparent;
}
.form-group .form-control:focus + label, .form-group .form-control:not(:placeholder-shown) + label, .form-group .form-control.is-invalid:focus + .label-input, .form-group .form-control.is-invalid:not(:placeholder-shown) + .label-input {
  top: 0;
  font-size: 0.8rem;
  color: #00504B;
  transform: translateY(-50%);
}
.form-group .form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: #00504B;
  background: transparent;
}
.form-group label.top {
  top: 0;
  font-size: 0.8rem;
}

input.form-control {
  border-bottom: 1px #96826E solid;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding: 0;
}
input.form-control:focus {
  outline: none;
  box-shadow: none;
  border-bottom: 1px #000000 solid;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

.form-control {
  text-transform: initial;
  border-bottom: 1px #00504B solid;
  border-radius: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background: transparent;
}
.form-control::-webkit-input-placeholder {
  text-transform: initial;
}
.form-control.text-normal {
  text-transform: capitalize !important;
}
.form-control.text-normal::-webkit-input-placeholder {
  text-transform: capitalize !important;
  opacity: 0.5;
}

.form-select {
  max-width: calc(100% - 1rem);
}
.form-select.select-pr {
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 16px 12px;
}

.select2-dropdown {
  border: none;
  margin-top: -5px;
}

.select2-container--bootstrap-5 {
  z-index: 1500;
}
.select2-container--bootstrap-5 .select2-selection {
  width: 100%;
  min-height: calc(1.5em + 1rem + 2px);
  padding: 0.75rem 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #00504B;
  background-color: transparent;
  border: 1px solid #00504B;
}

.select2-container--bootstrap-5 .select2-selection--single {
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: transparent;
  box-shadow: none;
}

.select2-container--bootstrap-5 .select2-selection {
  width: 100%;
  min-height: calc(1.5em + 1rem + 2px);
  padding: 0.75rem 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #00504B;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #00504B;
  text-align: left;
  border-radius: 0;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: #00504B;
  box-shadow: none;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
  font-weight: 400;
  line-height: 1.5;
  color: #00504B;
}

.select2-container--bootstrap-5 .select2-dropdown {
  z-index: 1056;
  overflow: hidden;
  color: #00504B;
  background-color: #96826E;
  border-color: transparent;
  border-radius: 5px;
}

.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below {
  border-top: 1px solid #00504B;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25) !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
  color: #fff;
  background-color: #00504B;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search {
  display: none;
  margin: 10px 0;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  background: transparent;
  border: 1px solid #00504B;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
  color: #fff;
  background-color: #00504B;
}

.modal,
.modal-open,
.fixed-top {
  padding-right: 0 !important;
}
.modal .form-input,
.modal-open .form-input,
.fixed-top .form-input {
  background: transparent;
}
.modal .form-input:focus,
.modal-open .form-input:focus,
.fixed-top .form-input:focus {
  transform: none;
}
.modal .form-input::placeholder,
.modal-open .form-input::placeholder,
.fixed-top .form-input::placeholder {
  text-transform: unset;
}

.inner-modal {
  padding: 10px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 482px;
  height: 340px;
  border: none;
}
.inner-modal .modal-content-box {
  background: unset;
  border: none;
  height: 100%;
}
.inner-modal .btn {
  min-width: 150px;
  min-height: 40px;
}

.btn-close.close-modal {
  position: absolute;
  z-index: 3;
  right: -30px;
  top: -25px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.5s;
  opacity: 1;
  width: 36px;
  height: 36px;
  border: 1px #00504B solid;
  border-radius: 0;
  background: #00504B;
  color: #FFFFFF;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
@media (max-width: 767px) {
  .btn-close.close-modal {
    right: -5px;
    top: -35px;
  }
}
.btn-close.close-modal:hover {
  background: #00504B;
  border: 1px #FFFFFF solid;
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.k-popup {
  border-color: #00504B !important;
  background-color: transparent !important;
}

.k-list > .k-state-focused, .k-state-focused {
  box-shadow: unset !important;
}

.modal-content .k-input[readonly] {
  background-color: transparent;
  margin-left: -12px;
}
.modal-content .k-multiselect.k-state-focused > .k-multiselect-wrap, .modal-content .k-state-focused.k-dropdowntree > .k-multiselect-wrap {
  border-color: transparent;
  background-color: transparent;
}
.modal-content .k-multiselect .k-multiselect-wrap li.k-button {
  border-color: transparent;
  color: #00504B;
  background-color: transparent;
  border-radius: 4px;
}
.modal-content .k-list > .k-state-focused, .modal-content .k-state-focused {
  box-shadow: inset 0 0 1px 1px #00504B !important;
}
.modal-content .pr-radio-group {
  display: flex;
  gap: 20px;
  margin-top: 8px;
}
.modal-content .pr-radio-group .pr-radio {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  font-size: 16px;
  color: #333;
}
.modal-content .pr-radio-group .pr-radio input[type=radio] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.modal-content .pr-radio-group .pr-radio .radio-mark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: rgba(241, 162, 178, 0.2);
  border: rgba(243, 239, 240, 0.9) 2px solid;
  border-radius: 50%;
  transition: 0.2s ease;
}
.modal-content .pr-radio-group .pr-radio input[type=radio]:checked ~ .radio-mark {
  border-color: #00504B;
  background-color: #00504B;
}
.modal-content .pr-radio-group .pr-radio .radio-mark::after {
  content: "";
  position: absolute;
  display: none;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
}
.modal-content .pr-radio-group .pr-radio input[type=radio]:checked ~ .radio-mark::after {
  display: block;
}
.modal-content .pr-radio-group .pr-radio:hover .radio-mark {
  border-color: #00504B;
}
.modal-content .form-check-input {
  z-index: 2;
  margin-top: 3px;
}
.modal-content .form-check-input:checked {
  background-color: #00504B;
  border-color: #00504B;
}
.modal-content.modal-pr {
  background: #E6F0F0;
}
.modal-content.modal-pr.bg::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  background-size: cover;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: fadeUp 0.5s ease forwards;
  animation-delay: 0.5s;
}
.modal-content.modal-pr.bg::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50px;
  background-size: contain;
  width: 146px;
  height: 213px;
  opacity: 0;
  animation: fadeUp 0.5s ease forwards;
  animation-delay: 0.5s;
}

#alertModal .modal-body {
  min-height: 200px;
  display: flex;
  align-items: center;
}

.ui-datepicker {
  background-color: white !important;
  border: 5px solid #ccc;
  padding: 10px;
  border-radius: 6px;
  z-index: 9999 !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  display: none !important;
}

.toast button {
  border: none;
  background: transparent;
  margin-left: 1rem;
  background: #00504B !important;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast button i {
  color: white;
}

#leftModalMasterplan {
  pointer-events: none;
}
#leftModalMasterplan .modal-dialog.scale-down {
  animation: zoomOutSmooth 0.5s ease-in forwards;
}
#leftModalMasterplan .modal-dialog.scale-up {
  animation: zoomInSmooth 0.5s ease-out forwards;
}
@media screen and (min-width: 992px) {
  #leftModalMasterplan .modal-dialog.scale-up {
    width: 36.5vw;
    max-width: 36.5vw;
  }
}
@media screen and (max-width: 991px) and (orientation: portrait) {
  #leftModalMasterplan .modal-dialog.scale-up {
    width: 70vw;
    max-width: 70vw;
  }
}
@media screen and (max-width: 991px) and (orientation: landscape) {
  #leftModalMasterplan .modal-dialog.scale-up {
    width: 35vw;
    max-width: 35vw;
  }
}
@keyframes zoomOutSmooth {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.8);
  }
}
@keyframes zoomInSmooth {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.modal.left {
  top: unset;
  bottom: 90px;
  left: 30px;
  z-index: 10060;
  border-radius: 30px;
  width: 40vw;
  height: 392px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@media screen and (min-width: 992px) {
  .modal.left.scale-up {
    width: 55vw;
    height: 500px;
  }
}
@media screen and (max-width: 991px) and (orientation: portrait) {
  .modal.left.scale-up {
    width: 80vw;
    height: 460px;
  }
}
@media screen and (max-width: 991px) and (orientation: landscape) {
  .modal.left.scale-up {
    width: 45vw;
    height: 380px;
  }
}
@media screen and (min-width: 992px) {
  .modal.left.scale-up-2 {
    width: 70vw;
    height: 600px;
  }
}
@media screen and (max-width: 991px) and (orientation: portrait) {
  .modal.left.scale-up-2 {
    width: 92vw;
    height: 540px;
  }
}
@media screen and (max-width: 991px) and (orientation: landscape) {
  .modal.left.scale-up-2 {
    width: 62vw;
    height: 460px;
  }
}
.modal.left .modal-dialog {
  position: fixed;
  left: 30px;
  top: unset;
  bottom: 30px;
  margin: 0;
  height: auto;
  width: 40vw;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@media screen and (max-width: 991px) and (orientation: landscape) {
  .modal.left .modal-dialog {
    left: 5px;
    bottom: 5px;
    width: 30vw;
  }
}
@media screen and (max-width: 991px) and (orientation: portrait) {
  .modal.left .modal-dialog {
    left: 5px;
    bottom: 5px;
  }
}
.modal.left .modal-dialog .modal-content {
  height: 100%;
  width: 100%;
  border-radius: 0;
}
.modal.left .modal-dialog .modal-content .modal-body {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0.25rem;
  overflow: hidden;
}
.modal.left .modal-dialog .modal-content .modal-body .thumb {
  cursor: pointer;
  border-radius: 0;
  height: 100%;
  width: 100%;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease;
}
.modal.left .modal-dialog .modal-content .modal-body .thumb:hover {
  transform: scale(1);
  filter: brightness(1.06);
}
.modal.left .modal-dialog .modal-content .modal-body .overlay-svg {
  pointer-events: none;
  position: fixed;
  z-index: 99;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
.modal.left .modal-dialog .modal-content .modal-body .overlay-svg .box-type:hover path {
  fill: rgba(243, 239, 240, 0.5);
}
.modal.left .modal-dialog .modal-content .modal-body .overlay-svg .box-type path {
  fill: rgba(243, 239, 240, 0.25);
}
.modal.left .modal-dialog .modal-content .modal-body .overlay-svg circle,
.modal.left .modal-dialog .modal-content .modal-body .overlay-svg path {
  pointer-events: all;
  cursor: pointer;
}
.modal.left .modal-dialog .modal-content .modal-body .overlay-svg circle {
  r: 25;
}
.modal.left .modal-dialog .modal-content .modal-body .overlay-svg .scene-circle {
  position: relative;
  cursor: pointer;
}
.modal.left .modal-dialog .modal-content .modal-body .overlay-svg .scene-circle.active {
  fill: #96826E;
  stroke: #00504B;
}
@keyframes pulseFade {
  0% {
    r: 16;
    opacity: 0.6;
  }
  70% {
    r: 30;
    opacity: 0;
  }
  100% {
    r: 16;
    opacity: 0;
  }
}
.modal.left .modal-dialog .modal-content .modal-body .overlay-svg .scene-circle-pulse {
  fill: #fff;
  stroke: #00504B;
  stroke-width: 2;
  pointer-events: none;
  animation: pulseFade 2s infinite;
}
.modal.left .modal-dialog .modal-content #tooltip {
  display: none;
  position: absolute;
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 999;
  pointer-events: none;
  transform: translateY(-50%);
}
@media screen and (min-width: 992px) {
  .modal.left.scale-up .modal-dialog {
    width: 55vw;
    max-width: 55vw;
  }
}
@media screen and (max-width: 991px) and (orientation: portrait) {
  .modal.left.scale-up .modal-dialog {
    width: 80vw;
    max-width: 80vw;
  }
}
@media screen and (max-width: 991px) and (orientation: landscape) {
  .modal.left.scale-up .modal-dialog {
    width: 45vw;
    max-width: 45vw;
  }
}
@media screen and (min-width: 992px) {
  .modal.left.scale-up-2 .modal-dialog {
    width: 65vw;
    max-width: 65vw;
  }
}
@media screen and (max-width: 991px) and (orientation: portrait) {
  .modal.left.scale-up-2 .modal-dialog {
    width: 92vw;
    max-width: 92vw;
  }
}
@media screen and (max-width: 991px) and (orientation: landscape) {
  .modal.left.scale-up-2 .modal-dialog {
    width: 62vw;
    max-width: 62vw;
  }
}

.modal.left.show .modal-dialog {
  transform: translateX(0);
}

.tooltip.tooltip-modal {
  display: block !important;
  z-index: 10070 !important;
}
.tooltip.tooltip-modal.bs-tooltip-top .tooltip-arrow::before {
  display: none;
}
.tooltip.tooltip-modal .tooltip-inner {
  opacity: 0.9;
  border-radius: 30px;
  border: 1px #96826E solid;
}

#operationCommingSoonModal {
  z-index: 1042;
}

#enquireModal .btn-close.close-modal {
  right: 0rem;
  top: 0;
  padding: 0 !important;
}
#enquireModal .modal-content {
  border-radius: 0;
}
#enquireModal .modal-content .form-check-input {
  background-color: #E6F0F0;
  border: 1px solid rgba(0, 80, 75, 0.25);
  border-radius: 0 !important;
}
#enquireModal .modal-content .form-check-input:focus {
  border-color: none;
  outline: 0;
  box-shadow: none;
  background-color: #00504B !important;
}
#enquireModal .modal-content input {
  color: #00504B !important;
}
#enquireModal .modal-content input::-webkit-input-placeholder,
#enquireModal .modal-content textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4) !important;
}
#enquireModal .modal-content input:-ms-input-placeholder,
#enquireModal .modal-content textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4) !important;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}

:root {
  --modal-info-close-size: 40px;
  --modal-info-title-fs: 18px;
  --modal-info-title-fs-md: 24px;
  --modal-info-reserved-h: 140px;
  --modal-info-reserved-h-md: 160px;
}

#overview-modals .modal-fullscreen, #lifestyleModal .modal-fullscreen, #popupLocationGallery .modal-fullscreen, #popupGolfs .modal-fullscreen,
#popupHotels .modal-fullscreen, .villa-info-modal .modal-fullscreen {
  background: #E6F0F0;
  height: var(--body-height) !important;
  min-height: var(--body-height) !important;
}
#overview-modals .modal-fullscreen .btn-close.close-modal, #lifestyleModal .modal-fullscreen .btn-close.close-modal, #popupLocationGallery .modal-fullscreen .btn-close.close-modal, #popupGolfs .modal-fullscreen .btn-close.close-modal,
#popupHotels .modal-fullscreen .btn-close.close-modal, .villa-info-modal .modal-fullscreen .btn-close.close-modal {
  position: fixed;
  right: 1rem;
  top: 1rem;
}
#overview-modals .modal-fullscreen .modal-content, #lifestyleModal .modal-fullscreen .modal-content, #popupLocationGallery .modal-fullscreen .modal-content, #popupGolfs .modal-fullscreen .modal-content,
#popupHotels .modal-fullscreen .modal-content, .villa-info-modal .modal-fullscreen .modal-content {
  width: 100%;
  height: var(--body-height) !important;
  overflow: hidden;
  background: #E6F0F0;
}
@media (min-width: 1600px) {
  #overview-modals .modal-fullscreen .modal-content, #lifestyleModal .modal-fullscreen .modal-content, #popupLocationGallery .modal-fullscreen .modal-content, #popupGolfs .modal-fullscreen .modal-content,
  #popupHotels .modal-fullscreen .modal-content, .villa-info-modal .modal-fullscreen .modal-content {
    height: calc(100vh - var(--header-height-pc) - var(--header-height-pc));
    width: 95%;
    margin: auto;
  }
}
#overview-modals .modal-fullscreen .modal-header, #lifestyleModal .modal-fullscreen .modal-header, #popupLocationGallery .modal-fullscreen .modal-header, #popupGolfs .modal-fullscreen .modal-header,
#popupHotels .modal-fullscreen .modal-header, .villa-info-modal .modal-fullscreen .modal-header {
  border: 0;
  padding: 0;
  height: var(--modal-info-header-h);
  display: flex;
  align-items: center;
  justify-content: center;
}
#overview-modals .modal-fullscreen .modal-title, #lifestyleModal .modal-fullscreen .modal-title, #popupLocationGallery .modal-fullscreen .modal-title, #popupGolfs .modal-fullscreen .modal-title,
#popupHotels .modal-fullscreen .modal-title, .villa-info-modal .modal-fullscreen .modal-title,
#overview-modals .modal-fullscreen .sub-heading,
#lifestyleModal .modal-fullscreen .sub-heading,
#popupLocationGallery .modal-fullscreen .sub-heading,
#popupGolfs .modal-fullscreen .sub-heading,
#popupHotels .modal-fullscreen .sub-heading,
.villa-info-modal .modal-fullscreen .sub-heading {
  font-size: var(--modal-info-title-fs);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  margin: 0;
}
@media (min-width: 768px) {
  #overview-modals .modal-fullscreen .modal-title, #lifestyleModal .modal-fullscreen .modal-title, #popupLocationGallery .modal-fullscreen .modal-title, #popupGolfs .modal-fullscreen .modal-title,
  #popupHotels .modal-fullscreen .modal-title, .villa-info-modal .modal-fullscreen .modal-title,
  #overview-modals .modal-fullscreen .sub-heading,
  #lifestyleModal .modal-fullscreen .sub-heading,
  #popupLocationGallery .modal-fullscreen .sub-heading,
  #popupGolfs .modal-fullscreen .sub-heading,
  #popupHotels .modal-fullscreen .sub-heading,
  .villa-info-modal .modal-fullscreen .sub-heading {
    font-size: var(--modal-info-title-fs-md);
    margin-bottom: 1.5rem;
  }
}
#overview-modals .modal-fullscreen .modal-body, #lifestyleModal .modal-fullscreen .modal-body, #popupLocationGallery .modal-fullscreen .modal-body, #popupGolfs .modal-fullscreen .modal-body,
#popupHotels .modal-fullscreen .modal-body, .villa-info-modal .modal-fullscreen .modal-body {
  width: 100%;
  height: calc(100vh - var(--modal-info-header-h) - var(--modal-info-tabs-h));
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
@media (min-width: 1600px) {
  #overview-modals .modal-fullscreen .modal-body, #lifestyleModal .modal-fullscreen .modal-body, #popupLocationGallery .modal-fullscreen .modal-body, #popupGolfs .modal-fullscreen .modal-body,
  #popupHotels .modal-fullscreen .modal-body, .villa-info-modal .modal-fullscreen .modal-body {
    height: calc(80vh - var(--modal-info-header-h) - var(--modal-info-tabs-h));
  }
}
#overview-modals .modal-fullscreen .nav-tabs.custom-tabs, #lifestyleModal .modal-fullscreen .nav-tabs.custom-tabs, #popupLocationGallery .modal-fullscreen .nav-tabs.custom-tabs, #popupGolfs .modal-fullscreen .nav-tabs.custom-tabs,
#popupHotels .modal-fullscreen .nav-tabs.custom-tabs, .villa-info-modal .modal-fullscreen .nav-tabs.custom-tabs {
  height: var(--modal-info-tabs-h);
}
#overview-modals .modal-fullscreen .tab-content, #lifestyleModal .modal-fullscreen .tab-content, #popupLocationGallery .modal-fullscreen .tab-content, #popupGolfs .modal-fullscreen .tab-content,
#popupHotels .modal-fullscreen .tab-content, .villa-info-modal .modal-fullscreen .tab-content {
  position: relative;
  height: calc(var(--body-height) - var(--modal-info-reserved-h));
}
#overview-modals .modal-fullscreen .tab-pane, #lifestyleModal .modal-fullscreen .tab-pane, #popupLocationGallery .modal-fullscreen .tab-pane, #popupGolfs .modal-fullscreen .tab-pane,
#popupHotels .modal-fullscreen .tab-pane, .villa-info-modal .modal-fullscreen .tab-pane {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
#overview-modals .modal-fullscreen .tab-pane .row, #lifestyleModal .modal-fullscreen .tab-pane .row, #popupLocationGallery .modal-fullscreen .tab-pane .row, #popupGolfs .modal-fullscreen .tab-pane .row,
#popupHotels .modal-fullscreen .tab-pane .row, .villa-info-modal .modal-fullscreen .tab-pane .row {
  height: 100%;
}
#overview-modals .modal-fullscreen .tab-pane .row [class*=col-], #lifestyleModal .modal-fullscreen .tab-pane .row [class*=col-], #popupLocationGallery .modal-fullscreen .tab-pane .row [class*=col-], #popupGolfs .modal-fullscreen .tab-pane .row [class*=col-],
#popupHotels .modal-fullscreen .tab-pane .row [class*=col-], .villa-info-modal .modal-fullscreen .tab-pane .row [class*=col-],
#overview-modals .modal-fullscreen .tab-pane .row .wrap-box,
#lifestyleModal .modal-fullscreen .tab-pane .row .wrap-box,
#popupLocationGallery .modal-fullscreen .tab-pane .row .wrap-box,
#popupGolfs .modal-fullscreen .tab-pane .row .wrap-box,
#popupHotels .modal-fullscreen .tab-pane .row .wrap-box,
.villa-info-modal .modal-fullscreen .tab-pane .row .wrap-box {
  height: 100%;
}
#overview-modals .modal-fullscreen .tab-pane.active.show, #lifestyleModal .modal-fullscreen .tab-pane.active.show, #popupLocationGallery .modal-fullscreen .tab-pane.active.show, #popupGolfs .modal-fullscreen .tab-pane.active.show,
#popupHotels .modal-fullscreen .tab-pane.active.show, .villa-info-modal .modal-fullscreen .tab-pane.active.show {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#overview-modals .modal-fullscreen img, #lifestyleModal .modal-fullscreen img, #popupLocationGallery .modal-fullscreen img, #popupGolfs .modal-fullscreen img,
#popupHotels .modal-fullscreen img, .villa-info-modal .modal-fullscreen img,
#overview-modals .modal-fullscreen video,
#lifestyleModal .modal-fullscreen video,
#popupLocationGallery .modal-fullscreen video,
#popupGolfs .modal-fullscreen video,
#popupHotels .modal-fullscreen video,
.villa-info-modal .modal-fullscreen video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
#overview-modals .modal-fullscreen iframe, #lifestyleModal .modal-fullscreen iframe, #popupLocationGallery .modal-fullscreen iframe, #popupGolfs .modal-fullscreen iframe,
#popupHotels .modal-fullscreen iframe, .villa-info-modal .modal-fullscreen iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
#overview-modals .modal-fullscreen .swiper, #lifestyleModal .modal-fullscreen .swiper, #popupLocationGallery .modal-fullscreen .swiper, #popupGolfs .modal-fullscreen .swiper,
#popupHotels .modal-fullscreen .swiper, .villa-info-modal .modal-fullscreen .swiper,
#overview-modals .modal-fullscreen .swiper-wrapper,
#lifestyleModal .modal-fullscreen .swiper-wrapper,
#popupLocationGallery .modal-fullscreen .swiper-wrapper,
#popupGolfs .modal-fullscreen .swiper-wrapper,
#popupHotels .modal-fullscreen .swiper-wrapper,
.villa-info-modal .modal-fullscreen .swiper-wrapper {
  width: 100%;
  height: 100%;
}
#overview-modals .modal-fullscreen .wrap-box, #lifestyleModal .modal-fullscreen .wrap-box, #popupLocationGallery .modal-fullscreen .wrap-box, #popupGolfs .modal-fullscreen .wrap-box,
#popupHotels .modal-fullscreen .wrap-box, .villa-info-modal .modal-fullscreen .wrap-box,
#overview-modals .modal-fullscreen .swiper-slide,
#lifestyleModal .modal-fullscreen .swiper-slide,
#popupLocationGallery .modal-fullscreen .swiper-slide,
#popupGolfs .modal-fullscreen .swiper-slide,
#popupHotels .modal-fullscreen .swiper-slide,
.villa-info-modal .modal-fullscreen .swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#overview-modals .modal-fullscreen .wrap-box img, #lifestyleModal .modal-fullscreen .wrap-box img, #popupLocationGallery .modal-fullscreen .wrap-box img, #popupGolfs .modal-fullscreen .wrap-box img,
#popupHotels .modal-fullscreen .wrap-box img, .villa-info-modal .modal-fullscreen .wrap-box img,
#overview-modals .modal-fullscreen .swiper-slide img,
#lifestyleModal .modal-fullscreen .swiper-slide img,
#popupLocationGallery .modal-fullscreen .swiper-slide img,
#popupGolfs .modal-fullscreen .swiper-slide img,
#popupHotels .modal-fullscreen .swiper-slide img,
.villa-info-modal .modal-fullscreen .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}
#overview-modals .modal-fullscreen .swiper-pagination, #lifestyleModal .modal-fullscreen .swiper-pagination, #popupLocationGallery .modal-fullscreen .swiper-pagination, #popupGolfs .modal-fullscreen .swiper-pagination,
#popupHotels .modal-fullscreen .swiper-pagination, .villa-info-modal .modal-fullscreen .swiper-pagination {
  position: absolute !important;
  bottom: 20px;
  left: 50% !important;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  display: flex !important;
  align-items: end;
  justify-content: center;
  gap: 10px;
  width: auto !important;
  height: calc(82vh - 100px);
}
#overview-modals .modal-fullscreen .swiper-pagination .swiper-pagination-bullet, #lifestyleModal .modal-fullscreen .swiper-pagination .swiper-pagination-bullet, #popupLocationGallery .modal-fullscreen .swiper-pagination .swiper-pagination-bullet, #popupGolfs .modal-fullscreen .swiper-pagination .swiper-pagination-bullet,
#popupHotels .modal-fullscreen .swiper-pagination .swiper-pagination-bullet, .villa-info-modal .modal-fullscreen .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 1px;
  border-radius: 0;
  background: rgba(235, 230, 220, 0.4);
  border: none;
  opacity: 1;
  margin: 0 !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  cursor: pointer;
}
#overview-modals .modal-fullscreen .swiper-pagination .swiper-pagination-bullet:hover, #lifestyleModal .modal-fullscreen .swiper-pagination .swiper-pagination-bullet:hover, #popupLocationGallery .modal-fullscreen .swiper-pagination .swiper-pagination-bullet:hover, #popupGolfs .modal-fullscreen .swiper-pagination .swiper-pagination-bullet:hover,
#popupHotels .modal-fullscreen .swiper-pagination .swiper-pagination-bullet:hover, .villa-info-modal .modal-fullscreen .swiper-pagination .swiper-pagination-bullet:hover {
  background: rgba(230, 240, 240, 0.7);
}
#overview-modals .modal-fullscreen .swiper-pagination .swiper-pagination-bullet-active, #lifestyleModal .modal-fullscreen .swiper-pagination .swiper-pagination-bullet-active, #popupLocationGallery .modal-fullscreen .swiper-pagination .swiper-pagination-bullet-active, #popupGolfs .modal-fullscreen .swiper-pagination .swiper-pagination-bullet-active,
#popupHotels .modal-fullscreen .swiper-pagination .swiper-pagination-bullet-active, .villa-info-modal .modal-fullscreen .swiper-pagination .swiper-pagination-bullet-active {
  width: 34px;
  background: #E6F0F0;
}
#overview-modals .modal-fullscreen *, #lifestyleModal .modal-fullscreen *, #popupLocationGallery .modal-fullscreen *, #popupGolfs .modal-fullscreen *,
#popupHotels .modal-fullscreen *, .villa-info-modal .modal-fullscreen * {
  box-sizing: border-box;
}
#overview-modals .modal-fullscreen .gallery-swiper-with-thumb, #lifestyleModal .modal-fullscreen .gallery-swiper-with-thumb, #popupLocationGallery .modal-fullscreen .gallery-swiper-with-thumb, #popupGolfs .modal-fullscreen .gallery-swiper-with-thumb,
#popupHotels .modal-fullscreen .gallery-swiper-with-thumb, .villa-info-modal .modal-fullscreen .gallery-swiper-with-thumb {
  --thumb-cols: 4;
  --thumb-gap: 10px;
  position: relative;
  width: 100%;
  height: 100%;
}
#overview-modals .modal-fullscreen .gallery-swiper-with-thumb > .swiper-wrapper, #lifestyleModal .modal-fullscreen .gallery-swiper-with-thumb > .swiper-wrapper, #popupLocationGallery .modal-fullscreen .gallery-swiper-with-thumb > .swiper-wrapper, #popupGolfs .modal-fullscreen .gallery-swiper-with-thumb > .swiper-wrapper,
#popupHotels .modal-fullscreen .gallery-swiper-with-thumb > .swiper-wrapper, .villa-info-modal .modal-fullscreen .gallery-swiper-with-thumb > .swiper-wrapper,
#overview-modals .modal-fullscreen .gallery-swiper-with-thumb > .swiper-pagination,
#lifestyleModal .modal-fullscreen .gallery-swiper-with-thumb > .swiper-pagination,
#popupLocationGallery .modal-fullscreen .gallery-swiper-with-thumb > .swiper-pagination,
#popupGolfs .modal-fullscreen .gallery-swiper-with-thumb > .swiper-pagination,
#popupHotels .modal-fullscreen .gallery-swiper-with-thumb > .swiper-pagination,
.villa-info-modal .modal-fullscreen .gallery-swiper-with-thumb > .swiper-pagination,
#overview-modals .modal-fullscreen .gallery-swiper-with-thumb > .swiper-button-next,
#lifestyleModal .modal-fullscreen .gallery-swiper-with-thumb > .swiper-button-next,
#popupLocationGallery .modal-fullscreen .gallery-swiper-with-thumb > .swiper-button-next,
#popupGolfs .modal-fullscreen .gallery-swiper-with-thumb > .swiper-button-next,
#popupHotels .modal-fullscreen .gallery-swiper-with-thumb > .swiper-button-next,
.villa-info-modal .modal-fullscreen .gallery-swiper-with-thumb > .swiper-button-next,
#overview-modals .modal-fullscreen .gallery-swiper-with-thumb > .swiper-button-prev,
#lifestyleModal .modal-fullscreen .gallery-swiper-with-thumb > .swiper-button-prev,
#popupLocationGallery .modal-fullscreen .gallery-swiper-with-thumb > .swiper-button-prev,
#popupGolfs .modal-fullscreen .gallery-swiper-with-thumb > .swiper-button-prev,
#popupHotels .modal-fullscreen .gallery-swiper-with-thumb > .swiper-button-prev,
.villa-info-modal .modal-fullscreen .gallery-swiper-with-thumb > .swiper-button-prev {
  display: none !important;
}
#overview-modals .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid, #lifestyleModal .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid, #popupLocationGallery .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid, #popupGolfs .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid,
#popupHotels .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid, .villa-info-modal .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(var(--thumb-cols), 1fr);
  grid-auto-rows: min-content;
  align-content: start;
  gap: var(--thumb-gap);
  padding: var(--thumb-gap);
  box-sizing: border-box;
}
@media (max-width: 992px) {
  #overview-modals .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid, #lifestyleModal .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid, #popupLocationGallery .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid, #popupGolfs .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid,
  #popupHotels .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid, .villa-info-modal .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid {
    --thumb-cols: 3;
  }
}
@media (max-width: 576px) {
  #overview-modals .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid, #lifestyleModal .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid, #popupLocationGallery .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid, #popupGolfs .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid,
  #popupHotels .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid, .villa-info-modal .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-grid {
    --thumb-cols: 2;
  }
}
#overview-modals .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item, #lifestyleModal .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item, #popupLocationGallery .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item, #popupGolfs .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item,
#popupHotels .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item, .villa-info-modal .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 77%;
  overflow: hidden;
  cursor: pointer;
  display: block;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.25s ease;
}
#overview-modals .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item img, #lifestyleModal .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item img, #popupLocationGallery .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item img, #popupGolfs .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item img,
#popupHotels .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item img, .villa-info-modal .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  margin: 0 !important;
  transition: transform 0.35s ease;
}
#overview-modals .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item:hover, #lifestyleModal .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item:hover, #popupLocationGallery .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item:hover, #popupGolfs .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item:hover,
#popupHotels .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item:hover, .villa-info-modal .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}
#overview-modals .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item:hover img, #lifestyleModal .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item:hover img, #popupLocationGallery .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item:hover img, #popupGolfs .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item:hover img,
#popupHotels .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item:hover img, .villa-info-modal .modal-fullscreen .gallery-swiper-with-thumb .gallery-thumb-item:hover img {
  transform: scale(1.06);
}
body.gallery-fullscreen-open {
  overflow: hidden;
}

.gallery-fullscreen-view {
  position: fixed;
  inset: 0;
  z-index: 999990;
  background: #E6F0F0;
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: var(--body-height);
}
.gallery-fullscreen-view.active {
  display: flex;
}
.gallery-fullscreen-view * {
  box-sizing: border-box;
}
.gallery-fullscreen-view .gallery-fullscreen-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 30;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
  width: 36px;
  height: 36px;
  border: 1px #00504B solid;
  border-radius: 0;
  background: #00504B;
  color: #FFFFFF;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.gallery-fullscreen-view .gallery-fullscreen-close:hover {
  background: #00504B;
  border: 1px #FFFFFF solid;
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
.gallery-fullscreen-view .gallery-fullscreen-close::before, .gallery-fullscreen-view .gallery-fullscreen-close::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}
.gallery-fullscreen-view .gallery-fullscreen-close::before {
  transform: rotate(45deg);
}
.gallery-fullscreen-view .gallery-fullscreen-close::after {
  transform: rotate(-45deg);
}
.gallery-fullscreen-view .gallery-main-swiper {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.gallery-fullscreen-view .gallery-main-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.gallery-fullscreen-view .gallery-main-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}
.gallery-fullscreen-view .gallery-main-swiper .swiper-button-next,
.gallery-fullscreen-view .gallery-main-swiper .swiper-button-prev {
  color: #ebe6dc;
}
.gallery-fullscreen-view .gallery-thumb-swiper-wrap {
  position: absolute;
  bottom: 0;
  z-index: 3;
  width: 100%;
  flex: 0 0 100px;
  padding: 12px 56px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.5);
}
.gallery-fullscreen-view .gallery-thumb-swiper {
  width: 100%;
  height: 100%;
}
.gallery-fullscreen-view .gallery-thumb-swiper .swiper-wrapper {
  justify-content: center;
}
.gallery-fullscreen-view .gallery-thumb-swiper .swiper-slide {
  width: 100px;
  height: 76px;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.gallery-fullscreen-view .gallery-thumb-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-fullscreen-view .gallery-thumb-swiper .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
  outline: 2px solid #E6F0F0;
  outline-offset: -2px;
}
.gallery-fullscreen-view .gallery-thumb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 10;
  width: 36px;
  height: 36px;
  border: 1px #00504B solid;
  border-radius: 0;
  background: #00504B;
  color: #FFFFFF;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.gallery-fullscreen-view .gallery-thumb-nav:hover {
  background: #00504B;
  border: 1px #FFFFFF solid;
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
.gallery-fullscreen-view .gallery-thumb-nav::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.gallery-fullscreen-view .gallery-thumb-nav.gallery-thumb-prev {
  left: 8px;
}
.gallery-fullscreen-view .gallery-thumb-nav.gallery-thumb-prev::after {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.gallery-fullscreen-view .gallery-thumb-nav.gallery-thumb-next {
  right: 8px;
}
.gallery-fullscreen-view .gallery-thumb-nav.gallery-thumb-next::after {
  transform: translate(-70%, -50%) rotate(45deg);
}
.gallery-fullscreen-view .gallery-thumb-nav.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}
@media (max-width: 768px) {
  .gallery-fullscreen-view .gallery-thumb-swiper-wrap {
    flex-basis: 80px;
    padding: 8px 44px;
  }
  .gallery-fullscreen-view .gallery-thumb-swiper .swiper-slide {
    width: 76px;
    height: 56px;
  }
  .gallery-fullscreen-view .gallery-thumb-nav {
    width: 30px;
    height: 30px;
  }
}

.modal-backdrop {
  height: var(--body-height);
}

@keyframes fadeInDelay {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeOutDelay {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(-100%);
  }
}
@keyframes fadeOutDelayMiddle {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
.hover-animation:hover {
  opacity: 0.5;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Video */
.area-video {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2s ease;
}
.area-video.show {
  opacity: 1;
}
.area-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.area-video-content {
  z-index: 10;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading-screen {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: #B4C8C8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  overflow: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loading-screen.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-screen .loading-logo {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  animation: logoZoom 0.5s ease-out forwards;
}
.loading-screen .loading-logo img {
  max-height: 90%;
}
@media (max-width: 991px) {
  .loading-screen .loading-logo img {
    max-height: unset;
    max-width: 80vw;
  }
}
.loading-screen #loadingBarContainer {
  width: 200px;
  position: fixed;
  top: calc(50% + 130px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  height: 10px;
  background: #00504B;
  border-radius: 5px;
  margin: 10px auto 5px;
  transition: opacity 2s ease;
}
.loading-screen #loadingBarContainer.hide {
  opacity: 0;
  pointer-events: none;
}
.loading-screen #loadingBarContainer.show {
  opacity: 1;
  pointer-events: none;
}
.loading-screen #loadingBar {
  height: 100%;
  width: 0%;
  background: #96826E;
  border-radius: 5px;
  transition: width 0.2s linear;
}
.loading-screen #loadingText {
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  margin-bottom: 80px;
  position: fixed;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes logoZoom {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/*USE FOR: MASTERPLAN MAP PAGE */
#map-loading {
  position: fixed;
  inset: 0;
  background: #00504b;
  z-index: 99999;
  opacity: 1;
  transition: opacity 0.5s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
}
#map-loading .spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
#wating-screen {
  position: fixed;
  inset: 0;
  z-index: 10001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
#wating-screen.active {
  opacity: 1;
  pointer-events: all;
}
#wating-screen .video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html, body {
  font-size: 14px !important;
}
@media (min-width: 1200px) {
  html, body {
    font-size: 16px !important;
  }
}
@media (min-width: 1920px) {
  html, body {
    font-size: 20px !important;
  }
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

body {
  margin: 0;
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
  color: #00504B;
  font-family: "Montserrat", serif;
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 1.5px;
  line-height: 22px;
  background: #B4C8C8;
}

main {
  position: relative;
}

a {
  text-decoration: none;
  color: #00504B;
}
a:hover {
  color: #000000;
}

@media (min-width: 768px) {
  .is-mb {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .is-pc {
    display: none;
  }
}

@media (min-width: 992px) {
  .is-lg {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .is-xl {
    display: none;
  }
}

.text-link {
  color: #9b69aa;
}

@media (min-width: 1200px) {
  .h3,
  h3 {
    font-size: 1rem;
  }
}
.sub-heading {
  font-size: 32px;
  line-height: 26px;
  position: relative;
  z-index: 3;
}

.heading {
  text-transform: uppercase;
  font-size: 2.5rem;
  line-height: 50px;
  letter-spacing: 0.15em;
}
@media (max-width: 767px) {
  .heading {
    font-style: normal;
    font-size: 30px !important;
    line-height: 35px !important;
  }
}

.typo-three {
  font-family: "NotoSerifDisplay", serif;
}

.typo-primary {
  font-family: "Montserrat", serif;
}

.text-primary {
  color: #00504B !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-weight: 200;
}

.relative-position {
  position: relative;
}

.absolute-position {
  position: absolute;
}

.fixed-position {
  position: fixed;
}

.d-flex-xy-center {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.flex-column {
  flex-direction: column;
}

.sub-title {
  font-size: 0.95rem;
}

.title {
  font-size: 1rem;
  font-weight: bold;
}

.wrap-img {
  height: 100%;
  width: 100%;
}
.wrap-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.wrap-img-padding {
  padding: 65% 0 0 !important;
  position: relative;
  width: 100%;
  padding: 60% 0 0;
  overflow: hidden;
}
.wrap-img-padding img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: 100%;
  object-fit: cover;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.icon-list {
  position: fixed;
  bottom: 30%;
  right: 18px;
  z-index: 1000;
  display: inline-flex;
  flex-direction: column;
}
.icon-list .icon {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin: 7.7px 0;
  background: #fff3dc;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 991px) {
  .icon-list {
    right: 0.25rem;
    bottom: 4rem;
    display: none;
  }
}

#page-top {
  position: fixed;
  bottom: 50px;
  right: 1.5rem;
  font-size: 77%;
  z-index: 1000;
  width: 55px;
  height: 55px;
}
#page-top a {
  background: #00504B url(../images/btn-top.png) 50% 50% no-repeat;
  background-size: 30% auto;
  text-decoration: none;
  width: 45px;
  height: 45px;
  border-radius: 100%;
  text-align: center;
  display: block;
}
#page-top a:hover {
  text-decoration: none;
  opacity: 0.8;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
@media (max-width: 991px) {
  #page-top {
    transform: scale(0.8);
    right: 10px;
    bottom: 110px;
    visibility: hidden;
    opacity: 0;
    z-index: -100;
  }
}

@media (max-width: 767px) {
  .android .area-store-btns .qr-app {
    display: none;
  }
}

@media (max-width: 767px) {
  .ios .area-store-btns .qr-google,
  .ios .area-store-btns .qr-gdmm {
    display: none;
  }
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border: none;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: #00504B;
  border-radius: 8px;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.leaflet-control-attribution {
  display: none !important;
}

.user.dropdown {
  display: none;
}

.dropup .dropdown-toggle::after {
  background: unset;
  width: auto;
}

.dropdown-toggle::after {
  content: "";
  background: url(../images/arrow-down.svg) no-repeat;
  background-size: contain;
  width: 13px;
  height: 9px;
  border: none;
  margin-left: unset;
  vertical-align: unset;
  margin-bottom: 1px;
}

.header-top.fixed-top {
  left: unset;
}
@media (max-width: 991px) {
  .header-top.fixed-top {
    z-index: 100;
    top: 0.5rem;
    scale: 0.8;
  }
}
.header-top .booking .btn, .header-top .language .btn,
.header-top .menu-module-360 .btn, .header-top .menu-gallery .btn, .header-top .menu-tienich .btn {
  text-transform: unset;
  letter-spacing: unset;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  padding: unset;
  border: 2px #FFFFFF solid;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(127.5% 98.41% at 0% 1.59%, #6E9696 0%, #E6F0F0 100%);
}
.header-top .booking .btn:hover, .header-top .language .btn:hover,
.header-top .menu-module-360 .btn:hover, .header-top .menu-gallery .btn:hover, .header-top .menu-tienich .btn:hover {
  background: radial-gradient(127.5% 98.41% at 0% 1.59%, #E6F0F0 0%, rgba(110, 150, 150, 0.5) 100%);
  color: #FFFFFF;
}
.header-top .booking .btn:hover i, .header-top .language .btn:hover i,
.header-top .menu-module-360 .btn:hover i, .header-top .menu-gallery .btn:hover i, .header-top .menu-tienich .btn:hover i {
  color: #FFFFFF;
}
.header-top .booking .btn:hover img, .header-top .language .btn:hover img,
.header-top .menu-module-360 .btn:hover img, .header-top .menu-gallery .btn:hover img, .header-top .menu-tienich .btn:hover img {
  filter: brightness(0) invert(1);
}
.header-top .booking .btn img, .header-top .language .btn img,
.header-top .menu-module-360 .btn img, .header-top .menu-gallery .btn img, .header-top .menu-tienich .btn img {
  width: 100%;
}
.header-top .booking {
  position: absolute;
  top: 60px;
  right: 15px;
  z-index: 1035;
}
@media (max-width: 991px) {
  .header-top .booking {
    top: -0.25rem;
    right: 45px;
    padding: 0.5rem 1rem;
  }
}
.header-top .language {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 1035;
}
@media (max-width: 991px) {
  .header-top .language {
    top: -0.25rem;
    right: 45px;
    padding: 0.5rem 1rem;
  }
}
.header-top .language .dropdown-toggle::after {
  display: none;
}
.header-top .menu-module-360 {
  position: absolute;
  top: 60px;
  right: 15px;
  z-index: 1035;
}
@media (max-width: 991px) {
  .header-top .menu-module-360 {
    top: -0.25rem;
    right: 45px;
    padding: 0.5rem 1rem;
  }
}
.header-top .menu-module-360 .fa-stop {
  color: rgba(0, 80, 75, 0.5);
}
.header-top .menu-gallery {
  position: absolute;
  top: 110px;
  right: 15px;
  z-index: 1035;
}
@media (max-width: 991px) {
  .header-top .menu-gallery {
    top: -0.25rem;
    right: 45px;
    padding: 0.5rem 1rem;
  }
}
.header-top .menu-tienich {
  position: absolute;
  top: 150px;
  right: 15px;
  z-index: 1035;
}
@media (max-width: 991px) {
  .header-top .menu-tienich {
    top: -0.25rem;
    right: 45px;
    padding: 0.5rem 1rem;
  }
}
.header-top .navbar-end {
  display: flex;
  justify-content: end;
  font-family: "Montserrat", serif;
}
@media (max-width: 991px) {
  .header-top .navbar-end {
    padding: 0.25rem 1rem;
  }
}
@media (min-width: 1200px) {
  .header-top .navbar-end {
    padding: 0.75rem 1rem;
  }
}
.header-top .navbar-end i {
  order: 2;
}
.header-top .navbar-end .label {
  order: 1;
  margin-right: 0.5rem;
}
.header-top .navbar-end .user .dropdown-toggle::after {
  display: none;
}
.header-top .navbar-end .user .dropdown-menu {
  z-index: 1080;
}
.header-top .navbar-end .user.dropdown .dropdown-toggle::after {
  display: none;
}
.header-top .navbar-end .user .btn {
  text-transform: unset;
  letter-spacing: unset;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  padding: unset;
  border: 2px #FFFFFF solid;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(127.5% 98.41% at 0% 1.59%, #6E9696 0%, #E6F0F0 100%);
}
.header-top .navbar-end .user .btn:hover {
  background: radial-gradient(127.5% 98.41% at 0% 1.59%, #E6F0F0 0%, rgba(110, 150, 150, 0.5) 100%);
  color: #FFFFFF;
}
.header-top .navbar-end .user .btn:hover i {
  color: #FFFFFF;
}
.header-top .navbar-end .user .btn:hover img {
  filter: brightness(0) invert(1);
}
.header-top .navbar-end .user .btn img {
  width: 100%;
}

.bottom-head {
  height: 90px;
  width: 100vw;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1060;
}

.header.header-collapse {
  z-index: 1090;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
}

header {
  border-bottom: 1px #FFFFFF solid;
}
header.header-collapse {
  z-index: 1090;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
}
header.front {
  transition: bottom 0.5s ease, opacity 0.5s ease;
  opacity: 1;
  z-index: 1060;
}
header.front.hidden {
  top: -100px;
  opacity: 0;
  pointer-events: none;
}
header.bg-header {
  background: #FFFFFF;
}
header .logo-menu {
  position: fixed;
  bottom: 15px;
  left: calc(50% - 25px);
  transform: translateX(-50%);
}
header .logo-menu img {
  height: 100%;
  width: 170px;
}
header .navbar {
  z-index: 2;
  position: relative;
}
@media (min-width: 992px) {
  header .navbar {
    height: var(--header-height);
  }
}
@media (max-width: 991px) {
  header .navbar {
    padding: 0.5rem 1rem;
    background: #00504B;
  }
}
header .navbar .navbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
header .navbar .navbar-main::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  background: #00504B;
}
@media (min-width: 992px) {
  header .navbar .navbar-main {
    padding: 0 15px;
  }
}
@media (min-width: 1200px) {
  header .navbar .navbar-main {
    padding: 0 20px;
  }
}
@media (min-width: 1400px) {
  header .navbar .navbar-main {
    padding: 0 40px;
  }
}
@media (min-width: 1900px) {
  header .navbar .navbar-main {
    padding: 0 100px;
  }
}
header .navbar .navbar-main .language {
  color: #00504B;
  font-family: "Montserrat", serif;
}
header .navbar .navbar-main .language.dropdown .btn {
  padding: unset;
  font-family: "Montserrat", serif;
  color: #00504B;
}
header .navbar .navbar-main .language.dropdown .dropdown-menu img {
  width: 32px;
}
header .navbar .navbar-main .language button {
  font-size: 14.86px;
}
header .navbar .navbar-main .navbar-start .label {
  margin-left: 0.5rem;
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translate(-300px, 0);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(300px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
header .navbar .navbar-main .navbar-start .btn,
header .navbar .navbar-main .navbar-end .btn {
  display: flex;
  align-items: center;
  padding: 0;
}
header .navbar .navbar-main .navbar-start .btn:hover,
header .navbar .navbar-main .navbar-end .btn:hover {
  background: none;
  color: #FFFFFF;
}
header .navbar .navbar-main .navbar-start .btn:hover .label,
header .navbar .navbar-main .navbar-end .btn:hover .label {
  opacity: 1;
}
header .navbar .navbar-main .navbar-start .btn i,
header .navbar .navbar-main .navbar-end .btn i {
  color: #00504B;
  background: #FFFFFF;
  width: 35px;
  height: 35px;
  padding: 10px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
header .navbar .navbar-main .navbar-start .btn .label,
header .navbar .navbar-main .navbar-end .btn .label {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: opacity 250ms linear;
}
header .navbar .navbar-main .navbar-end {
  display: flex;
  font-family: "Montserrat", serif;
}
header .navbar .navbar-main .navbar-end i {
  order: 2;
}
header .navbar .navbar-main .navbar-end .label {
  order: 1;
  margin-right: 0.5rem;
}
header .navbar .navbar-main .navbar-end .user.dropdown .dropdown-toggle::after {
  display: none;
}
header .navbar .navbar-main .navbar-end .user .btn {
  text-transform: unset;
  letter-spacing: unset;
}
header .navbar .navbar-main .navbar-end .user .btn .rounded-circle {
  margin-right: 10px;
}
@media (max-width: 767px) {
  header .navbar-expand-lg .navbar-nav .nav-link {
    margin: 0.75rem;
    font-size: 1rem;
  }
  header .btn {
    padding: unset;
  }
  header .navbar-brand img {
    max-width: 180px;
  }
  header .navbar-end div:not(:last-child),
  header .navbar-end .btn:not(:last-child) {
    margin-right: 0.75rem;
  }
}

.navbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 1400px) {
  .navbar-main .navbar-menu {
    justify-content: space-between;
  }
}
@media (min-width: 1400px) {
  .navbar-main .navbar-menu {
    justify-content: center;
  }
}
.navbar-main .navbar-nav.navbar-nav-brand {
  display: flex;
  justify-content: center;
}
.navbar-main .navbar-nav.navbar-nav-brand .nav-item-logo .nav-link {
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  z-index: 5;
  padding: 10px 15px;
}
.navbar-main .navbar-nav.navbar-nav-brand .nav-item-logo .nav-link img {
  max-height: 80px;
  padding: 10px;
}
@media (min-width: 992px) {
  .navbar-main .navbar-nav .nav-item {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 1200px) {
  .navbar-main .navbar-nav .nav-item {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 1600px) {
  .navbar-main .navbar-nav .nav-item {
    padding-left: 60px;
    padding-right: 60px;
  }
}
.navbar-main .navbar-nav .nav-item:not(.nav-item-logo) .nav-link {
  position: relative;
}
@media (min-width: 992px) {
  .navbar-main .navbar-nav .nav-item:not(.nav-item-logo) .nav-link {
    height: var(--header-height);
    display: flex;
    align-items: center;
  }
}
.navbar-main .navbar-nav .nav-item:not(.nav-item-logo) .nav-link::after {
  position: absolute;
  content: "";
  width: 0%;
  height: 1px;
  background-color: #FFFFFF;
  left: 50%;
  bottom: 25px;
  transition: all 0.4s ease-in-out;
}
.navbar-main .navbar-nav .nav-item:not(.nav-item-logo) .nav-link.active, .navbar-main .navbar-nav .nav-item:not(.nav-item-logo) .nav-link:hover {
  position: relative;
  text-shadow: 0 0 1.25px currentColor;
  /*                        &::before {
      //content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 125%;
      height: 80%;
      background: radial-gradient( 53.68% 56.26% at 50% 50.75%, #e1ebff 0%, rgba(117, 144, 197, 0) 100% );
      filter: blur(5px);
      transition: opacity 0.3s ease;
      z-index: -1;
  }*/
}
.navbar-main .navbar-nav .nav-item:not(.nav-item-logo) .nav-link.active::after, .navbar-main .navbar-nav .nav-item:not(.nav-item-logo) .nav-link:hover::after {
  width: 100%;
  left: 0;
}
.navbar-main .navbar-nav .nav-item:hover .nav-link, .navbar-main .navbar-nav .nav-item.active .nav-link {
  text-decoration: none;
}
.navbar-main .navbar-nav .nav-item:hover .nav-link.active, .navbar-main .navbar-nav .nav-item.active .nav-link.active {
  font-family: "Montserrat", serif;
}
.navbar-main .navbar-nav .nav-item .nav-link {
  padding: 10px 0;
  font-family: "Montserrat", serif;
  white-space: nowrap;
  font-size: 1.25rem;
  line-height: 20px !important;
  color: #FFFFFF;
  opacity: 1;
}

body.fixed-top .navbar {
  padding: 0;
}
body.fixed-top .navbar .navbar-main {
  padding: 0;
}
body.fixed-top .navbar .navbar-main .nav-link {
  transition: unset;
}

@media (max-width: 991px) {
  .navbar-collapse::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: #FFFFFF;
    z-index: -1;
  }
}
.navbar-collapse.show {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
}

.navbar-toggler {
  position: relative;
  padding: 0;
  width: 40px;
  height: 30px;
  border: 0;
  outline: none;
  order: 3;
}
.navbar-toggler.show {
  position: fixed;
  top: 1rem;
  right: 1rem;
  padding: 0;
  z-index: 9;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler span {
  display: block;
  position: absolute;
  background: #00504B;
  height: 1.5px;
  width: 35px;
}
.navbar-toggler span:nth-child(1) {
  top: 0px;
}
.navbar-toggler span:nth-child(2) {
  top: 12px;
  width: 25px;
  left: 10px;
}
.navbar-toggler span:nth-child(3) {
  top: 24px;
}
.navbar-toggler[aria-expanded=true] span:nth-child(2) {
  display: none;
}
.navbar-toggler[aria-expanded=true] span:nth-child(1) {
  top: 18px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.navbar-toggler[aria-expanded=true] span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.navbar-mobile {
  display: none;
}

@media (max-width: 991px) {
  .navbar-desktop {
    display: none !important;
  }
  header .navbar {
    padding: 0;
  }
  .navbar-mobile {
    text-align: center;
    display: block;
    width: 100%;
  }
  .navbar-mobile button {
    background: transparent;
    border: none;
    color: #FFFFFF;
  }
  .navbar-mobile .wrap-icon {
    justify-content: center;
    display: flex;
  }
  .heading {
    font-size: 28px;
  }
  .typo-heading {
    font-size: 52px;
  }
}
.navbar-mobile-collapse {
  height: 0;
  overflow: auto;
  transition: height 0.4s ease;
}
@media (max-width: 991px) {
  .navbar-mobile-collapse {
    position: fixed;
    left: 0;
    bottom: 0;
    background: rgba(0, 80, 75, 0.9);
    backdrop-filter: blur(5px);
  }
  .navbar-mobile-collapse.open {
    height: 100vh;
    overflow-y: scroll;
  }
}
.navbar-mobile-collapse .wrap-flex {
  display: flex;
  width: 100vw;
  flex-direction: column;
  height: 100%;
  justify-content: space-around;
  overflow-y: auto;
}
.navbar-mobile-collapse .wrap-flex .nav-link {
  opacity: 1;
}
.navbar-mobile-collapse .wrap-flex a {
  color: white;
}
.navbar-mobile-collapse .wrap-flex a.active {
  color: #96826E;
}
.navbar-mobile-collapse .top {
  margin-top: 68px;
}
.navbar-mobile-collapse .top img {
  max-width: 198px;
}
.navbar-mobile-collapse .middle {
  margin: 20px 0;
}
.navbar-mobile-collapse .middle .menu-list {
  list-style: none;
  padding: 0;
  font-size: 16px;
  line-height: 19px;
}
.navbar-mobile-collapse .middle .menu-list li {
  padding: 25px;
  font-size: 18px;
  opacity: 50%;
  opacity: 1;
}
.navbar-mobile-collapse .middle .menu-list li:not(:last-child) {
  border-bottom: 1px solid #96826E;
}
.navbar-mobile-collapse .middle .menu-list li.active a {
  color: #96826E;
}
.navbar-mobile-collapse .bottom .menu {
  display: none;
  align-content: center;
  justify-content: center;
  border-top: 1px solid #a5d7af;
}
.navbar-mobile-collapse .bottom .menu .user {
  border-right: 1px solid #a5d7af;
}
.navbar-mobile-collapse .bottom .menu .language img {
  width: 20px;
}
.navbar-mobile-collapse .bottom .menu .language .dropdown-menu {
  min-width: 25px;
}
.navbar-mobile-collapse .bottom .menu .user,
.navbar-mobile-collapse .bottom .menu .language {
  width: 50%;
  padding: 7px 0;
  display: flex;
  align-content: center;
  justify-content: center;
}
.navbar-mobile-collapse .bottom .menu button {
  font-size: 16px;
  text-transform: unset;
  font-family: "Montserrat", serif;
}
.navbar-mobile-collapse .bottom .menu .dropdown {
  height: auto;
}
.navbar-mobile-collapse .bottom .close {
  height: 53px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  margin: 30px auto;
}
.navbar-mobile-collapse .bottom .close button {
  font-size: 20px;
  display: flex;
  align-items: center;
}
.navbar-mobile-collapse .bottom .social-list {
  margin-bottom: 40px;
  display: none;
}
.navbar-mobile-collapse .bottom .social-list a {
  width: 35px;
  height: 35px;
  border-radius: 30px;
  margin: 0 12px;
  background-color: #fff5dc;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  padding: 0;
}

.body-fixed {
  overflow: hidden;
  margin: 0;
  touch-action: none;
  -ms-touch-action: none;
  height: 100vh;
}

.alert-header-content {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  transform: translate(0, 0);
  padding: 20px 15px;
  margin: 50px;
  justify-content: center;
  max-width: 612px;
  font-size: 14px;
  line-height: 17px;
  color: #FFFFFF;
}
.alert-header-content::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("../images/frame-3.png");
  opacity: 0.85;
  width: 612px;
  height: 180px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}
.alert-header-content.show {
  display: flex;
}

.info-project-header-content {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 0;
  transform: translate(0, 0);
  padding: 20px 15px;
  justify-content: space-between;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  background-image: url("../images/frame-1.png");
  width: 519px;
  height: 340px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.info-project-header-content.show {
  display: block;
}
.info-project-header-content .box {
  height: calc(100% - 5px);
  overflow-y: auto;
  overflow-x: hidden;
}
.info-project-header-content .w-100 {
  display: flex;
  flex-direction: row;
}
.info-project-header-content .w-100:not(:last-child) {
  border-bottom: 1px #00504B solid;
  margin-bottom: 1rem;
}

.floor-dropdown-tour {
  top: 100px;
}
@media (max-width: 991px) {
  .floor-dropdown-tour {
    left: 0;
  }
}
@media (min-width: 992px) {
  .floor-dropdown-tour {
    left: 15px;
  }
}
@media (min-width: 1200px) {
  .floor-dropdown-tour {
    left: 20px;
  }
}
@media (min-width: 1400px) {
  .floor-dropdown-tour {
    left: 40px;
  }
}
@media (min-width: 1900px) {
  .floor-dropdown-tour {
    left: 100px;
  }
}

footer {
  position: relative;
  background: url(../images/footer-img.jpg) no-repeat center top;
  background-size: cover;
  z-index: 1;
}
footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/line-footer.PNG) no-repeat top;
  z-index: 1;
  width: 100%;
  height: 100%;
}
footer::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.05);
  z-index: -1;
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  footer .logo {
    width: 125px;
  }
}
@media (min-width: 768px) {
  footer .logo {
    width: 180px;
  }
}
footer .footer-info {
  padding: 4rem 0;
  position: relative;
  z-index: 3;
}
@media (min-width: 1200px) {
  footer .footer-info {
    padding: 128px 0;
  }
}
footer .footer-info .email {
  margin-top: 30px;
}
footer .footer-info * {
  color: #fff5dc;
  font-size: 18px;
  line-height: 31px;
  letter-spacing: 1px;
  font-family: "HelveticaNeue-Thin";
}
footer .footer-info .title {
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 3px;
  margin-bottom: 0;
}
footer .footer-info ul.footer-social {
  list-style: none;
  margin-bottom: 0;
  margin-top: 10px;
  padding: 0;
  display: flex;
}
footer .footer-info ul.footer-social li {
  font-size: 18px;
  line-height: 31px;
  letter-spacing: 0.25px;
}
footer .footer-info ul.footer-social li:not(:last-child) {
  margin-right: 1rem;
}
footer .footer-info .item:first-child {
  text-align: center;
}
footer .footer-info .menu {
  width: 100%;
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}
footer .footer-info .footer-social {
  list-style: none;
}
@media (min-width: 768px) {
  footer .footer-info .footer-social {
    list-style: none;
    margin-bottom: 5px;
  }
}
@media (max-width: 767px) {
  footer .footer-info .footer-social {
    flex-wrap: wrap;
    text-align: center;
  }
}
@media (max-width: 767px) {
  footer .footer-info .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  footer .footer-info .footer-links li:first-child {
    width: 100%;
  }
}
footer .footer-info .sign-in-up {
  display: flex;
}
footer .footer-info .sign-in-up .action {
  text-transform: uppercase;
}
footer .footer-info .sign-in-up .action .text-link {
  font-family: "Montserrat", serif;
}
footer .footer-info .sign-in-up span + span {
  padding-left: 1rem;
}
@media (min-width: 1205px) {
  footer .footer-info .sign-in-up span + span {
    padding-left: 5rem;
  }
}
footer .footer-info .inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
@media (min-width: 768px) {
  footer .footer-info .space-top {
    margin-top: 20px;
  }
}
@media (max-width: 767px) {
  footer .footer-info .space-top {
    padding-top: 2rem;
  }
}
@media (max-width: 991px) {
  footer .footer-info {
    padding: 80px 30px;
  }
  footer .footer-info .item {
    padding: 0;
  }
  footer .footer-info .item:not(:last-child) {
    margin-bottom: 60px;
    padding: 0;
  }
  footer .footer-info .copyright {
    font-size: 17px;
  }
}

.icon-list-top {
  display: none !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  text-align: center;
  display: inline-flex;
  flex-direction: column;
}
.icon-list-top .icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0.5rem 0;
  background: #fff3dc;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-list-top .icon img {
  width: 25px;
}
@media (min-width: 768px) {
  .icon-list-top {
    right: 1.5rem;
  }
  .icon-list-top li {
    margin: 1.5rem 0;
  }
}
@media (max-width: 767px) {
  .icon-list-top {
    right: 1rem;
  }
}
.icon-list-top * {
  color: #FFFFFF;
}

@keyframes fadeInUp {
  to {
    z-index: 10;
    transform: translateX(0);
  }
}
@keyframes fadeUp {
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
.video-fullscreen, .canvas-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: opacity;
}

.area {
  position: relative;
}

.area-video {
  position: relative;
  min-height: 100vh;
}
.area-video.loading .video-background {
  opacity: 0;
}
@media (max-width: 991px) {
  .area-video .thumb {
    background: #1e4141;
    height: 100vh;
    width: 100%;
    display: block;
    z-index: -1;
    position: relative;
  }
}
.area-video.loading .thumb {
  background-image: url("../media/image/referral-program/video-youtube-thumb.jpg");
  width: 100%;
  height: 100vh;
}
.area-video .video-background {
  position: absolute;
  top: 50%;
  left: 0;
  padding-top: 56.25%;
  width: 100%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: 2s opacity ease;
  transition: 2s opacity ease;
  opacity: 1;
  z-index: -2;
}
.area-video .video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.area-video .btn-play {
  border: 0;
  background: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.area-video .btn-play img {
  opacity: 0.8;
  -webkit-transition: 1s opacity ease;
  transition: 1s opacity ease;
}
.area-video .btn-play:hover img {
  opacity: 1;
}

.area-banner .bg-img,
.banner .bg-img {
  width: 100%;
  max-width: 100%;
}

.banner-fill {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1rem;
}
.banner-fill .bg-img {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: -1;
}

@keyframes kenBurns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}
@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 20px));
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
.banner-top {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}
.banner-top.banner-text {
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.banner-top .banner {
  height: 100%;
}
.banner-top .banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.banner-top .swiper-fill.item-1 {
  width: 100%;
  height: 100%;
}
.banner-top .swiper-fill.item-1 img {
  position: absolute;
  left: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}
.banner-top .swiper-wrapper {
  height: 100%;
}
@media (min-width: 1025px) {
  .banner-top .swiper-wrapper {
    height: 100vh;
  }
}
.banner-top .swiper-wrapper .swiper-slide {
  height: 100%;
  position: relative;
}
.banner-top .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: bannerZoom 12s ease-out forwards;
}
.banner-top .bg-overlay, .banner-top .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.35) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1;
}
.banner-top .bg-overlay-bottom {
  content: "";
  position: absolute;
  inset: 0; /* top, left, right, bottom: 0 */
  background: linear-gradient(0deg, #1e4141 11.87%, rgba(217, 217, 217, 0) 74.64%);
  mix-blend-mode: multiply;
  z-index: 1;
  height: 100%;
}
.banner-top .caption {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  color: #FFFFFF;
  animation: fadeSlideUp 1s ease forwards 0.4s;
  opacity: 0;
}
.banner-top .caption .heading {
  font-size: clamp(1.5rem, 5vw, 40px);
  line-height: 1.2;
  margin-bottom: 20px;
  color: #FFFFFF;
}
@media (max-width: 767px) {
  .banner-top .caption .heading {
    max-width: 80%;
    margin: 0 auto;
    letter-spacing: 1px;
  }
}
.banner-top .caption .heading p {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
  opacity: 0;
  animation: fadeUp 1.2s ease 0.3s forwards;
}
.banner-top .banner-parallax {
  display: inline-block;
  will-change: transform;
  transition: none !important;
}
@media (max-width: 767px) {
  .banner-top {
    height: 100dvh;
  }
  .banner-top .caption {
    padding: 0 15px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .banner-top {
    height: 100vh;
  }
}

.home-page #timeLabel {
  font-size: 20px;
  margin: 10px 0;
  display: none;
}
.home-page .controls {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 700px;
}
.home-page input[type=range] {
  -webkit-appearance: none;
  flex-grow: 1;
  height: 10px;
  background: #333;
  border-radius: 5px;
  outline: none;
}
.home-page input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #fcd34d;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.home-page input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #fcd34d;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.home-page .wrap-box-molule-360 img {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
}
.home-page .action-box {
  position: absolute;
  right: 0;
  bottom: 100px;
  padding: 50px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
@media (max-width: 991px) {
  .home-page .action-box {
    padding: 20px;
    width: 100%;
  }
}
.home-page .action-box.down {
  bottom: 0;
}

:not(.masterplan-scene) .nav-bottom {
  display: none;
}

.masterplan-matsau-scene #toggleButtonFullAfter,
.masterplan-matsau-scene #toggleButtonToancanh {
  display: none !important;
}

.masterplan-scene #indoor-scene-action {
  display: none !important;
}

.indoor-scene #masterplan-scene-action,
.indoor-scene #toggleButtonToancanh {
  display: none;
}
.indoor-scene #indoor-scene-action .dropdown {
  min-width: 170px;
}
.tienich-page .area area-amenities, .tienich-page .vtour-amenities, .tienich-page .iframe-amenities {
  height: var(--amenities-height);
  width: 100%;
}
@media (max-width: 991px) {
  .tienich-page .area area-amenities, .tienich-page .vtour-amenities, .tienich-page .iframe-amenities {
    height: var(--amenities-height-mobile);
  }
}
.tienich-page .toggleHotspots {
  position: fixed;
  z-index: 1051;
  display: flex;
  align-items: center;
  top: 0;
  margin: 1rem;
  z-index: 9999;
  flex-direction: column;
}
.tienich-page .toggleHotspots .btn {
  width: 38px;
  height: 38px;
}
@media (max-width: 991px) {
  .tienich-page .toggleHotspots {
    z-index: 100;
    scale: 0.8;
  }
}

.tienich-page-wrapper {
  --bgItemAccordionItemLevel2: #ebe6dc;
  --scroll-color: #baa590;
}
.tienich-page-wrapper .accordion-item.level-2 .item {
  background-color: var(--bgItemAccordionItemLevel2) !important;
}
.tienich-page-wrapper .accordion-item.level-2 .accordion-body {
  background: var(--bgItemAccordionItemLevel2);
}
.tienich-page-wrapper .accordion-item.level-2 ul {
  max-height: 190px;
  overflow-y: auto;
  overflow-x: hidden;
}
.tienich-page-wrapper .accordion-item.level-2 ul::-webkit-scrollbar {
  width: 6px;
}
.tienich-page-wrapper .accordion-item.level-2 ul::-webkit-scrollbar-thumb {
  background: var(--scroll-color);
  border-radius: 20px;
}

.canho-360-page {
  --bgItemAccordionItemLevel2: #ebe6dc;
  --scroll-color: #baa590;
}
.canho-360-page .accordion-item.level-2 .item {
  background-color: var(--bgItemAccordionItemLevel2) !important;
}
.canho-360-page .accordion-item.level-2 .accordion-body {
  background: var(--bgItemAccordionItemLevel2);
}
.canho-360-page .accordion-item.level-2 ul {
  max-height: 190px;
  overflow-y: auto;
  overflow-x: hidden;
}
.canho-360-page .accordion-item.level-2 ul::-webkit-scrollbar {
  width: 6px;
}
.canho-360-page .accordion-item.level-2 ul::-webkit-scrollbar-thumb {
  background: var(--scroll-color);
  border-radius: 20px;
}

.location-page-wrapper .menu-module-360, .tienich-page .menu-module-360, .home-360-tour-web-wrapper .menu-module-360, .masterplan-page-wrapper .menu-module-360, .canho-360-page .menu-module-360 {
  pointer-events: none;
  user-select: none;
}

.tienich-page .action-group.action-bottom .group-btn.btn-left,
.canho-360-page .action-group.action-bottom .group-btn.btn-left {
  position: fixed;
  background: transparent;
  border: none;
  z-index: 10050;
  bottom: var(--btn-villass-info-offset-y-bottom);
  position: fixed;
  z-index: 1051;
  display: flex;
  align-items: center;
}
@media (max-width: 991px) {
  .tienich-page .action-group.action-bottom .group-btn.btn-left,
  .canho-360-page .action-group.action-bottom .group-btn.btn-left {
    left: 15px;
    bottom: 8px;
    z-index: 1060;
    opacity: 1;
  }
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .label,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .label {
  opacity: 0;
  transform: translateX(-100px) scale(0.95);
  filter: blur(4px);
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  position: fixed;
  padding: 15px;
  left: 0;
  bottom: 0;
  z-index: -1;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  height: 300px;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .label .thumb,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .label .thumb {
  height: 100%;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left:hover .label,
.canho-360-page .action-group.action-bottom .group-btn.btn-left:hover .label {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
  z-index: 1080;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .toggle-btn,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .toggle-btn {
  background: transparent;
  border: none;
  width: 38px;
  order: 2;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .toggle-btn i, .tienich-page .action-group.action-bottom .group-btn.btn-left .toggle-btn .fa, .tienich-page .action-group.action-bottom .group-btn.btn-left .toggle-btn .fas,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .toggle-btn i,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .toggle-btn .fa,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .toggle-btn .fas {
  font-weight: 300 !important;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .toggle-btn .svg-btn-open.hide,
.tienich-page .action-group.action-bottom .group-btn.btn-left .toggle-btn .svg-btn-close.hide,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .toggle-btn .svg-btn-open.hide,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .toggle-btn .svg-btn-close.hide {
  display: none;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .toggle-btn .svg-btn-open.show,
.tienich-page .action-group.action-bottom .group-btn.btn-left .toggle-btn .svg-btn-close.show,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .toggle-btn .svg-btn-open.show,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .toggle-btn .svg-btn-close.show {
  display: block;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .accordion-button::after,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  filter: invert(1);
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category {
  position: fixed;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  order: 1;
  left: var(--offset-left);
  bottom: var(--btn-villass-info-offset-y-bottom);
  margin-bottom: 0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category *,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category * {
  font-size: 12px;
  width: 190px;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .j-one .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .j-one .item {
  border-bottom: 1px solid #e6f0f0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .j-one .item:last-child,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .j-one .item:last-child {
  border-bottom: none;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .j-one .item .btn,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .j-one .item .btn {
  text-align: left;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-header,
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-item,
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-button,
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .item,
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .btn,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-header,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-item,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-button,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .btn {
  border-radius: 0 !important;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-body,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-body {
  padding: 0 !important;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .item {
  background: white;
  transition: all 0.3s ease-in-out;
  margin-bottom: 0 !important;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .item .btn,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .item .btn {
  height: auto;
  width: 100% !important;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .item .btn.active,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .item .btn.active {
  background-color: #00504B;
  color: #FFFFFF;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .item:hover *,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .item:hover * {
  color: white;
  background: #00504B;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-button,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-button {
  font-weight: 500;
  color: #00504B;
  background-color: #FFFFFF;
  border: none;
  box-shadow: none;
  padding: 5px 16px;
  text-align: left;
  justify-content: flex-start;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-button[aria-expanded=true],
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-button[aria-expanded=true] {
  background-color: #00504B;
  border: 2px #96826E solid;
  color: #FFFFFF;
  margin-bottom: 0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-button[aria-expanded=true]::after,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-button[aria-expanded=true]::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-button::after,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-button::after {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-button.collapsed::after,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-button.collapsed::after {
  transform: rotate(0deg);
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-button:focus,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-button:focus {
  box-shadow: none;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .accordion-button,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .accordion-button {
  color: #FFFFFF;
  background-color: #00504B;
  border: none;
  box-shadow: none;
  padding: 5px 16px;
  text-align: left;
  justify-content: flex-start;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .accordion-button.collapsed::after,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .accordion-button.collapsed::after {
  filter: invert(1);
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .accordion-item.level-2 .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .accordion-item.level-2 .item {
  background-color: #E6F0F0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .accordion-item.level-2 .item:not(last-child),
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .accordion-item.level-2 .item:not(last-child) {
  border-bottom: 1px solid #B4C8C8;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .accordion-button[aria-expanded=true],
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .accordion-button[aria-expanded=true] {
  border: 1px #96826e solid;
  background-color: #00504B;
  color: #E6F0F0;
  width: 100%;
  margin: 0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .accordion-button[aria-expanded=true]::after,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .accordion-button[aria-expanded=true]::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-button,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-button {
  color: #FFFFFF;
  background-color: #96826E;
  border: none;
  box-shadow: none;
  padding: 5px 16px;
  text-align: left;
  justify-content: flex-start;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-button.collapsed::after,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-button.collapsed::after {
  filter: invert(1);
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-item.level-2 .accordion-button,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-item.level-2 .accordion-button {
  color: #FFFFFF;
  background: #baa590;
  border: none;
  box-shadow: none;
  padding: 5px 16px;
  text-align: left;
  justify-content: flex-start;
  border-bottom: 1px solid #96826E;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-item.level-2 .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-item.level-2 .item {
  background-color: #ebe6dc;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-item.level-2 .item:hover *,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-item.level-2 .item:hover * {
  color: white;
  background: #96826E;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-item.level-2 .item:not(last-child),
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-item.level-2 .item:not(last-child) {
  border-bottom: 1px solid #96826E;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-button[aria-expanded=true],
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-button[aria-expanded=true] {
  border: 1px #96826E solid;
  background-color: #96826E;
  color: #ebe6dc;
  width: 100%;
  margin: 0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-button[aria-expanded=true]::after,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-button[aria-expanded=true]::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-item,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-item {
  border: none;
  background-color: unset;
  margin-bottom: 0 !important;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-item .accordion-collapse,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-item .accordion-collapse {
  margin: 0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-item.level-2 .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-item.level-2 .item {
  background: #ebe6dc;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-item .accordion-item:last-child,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-item .accordion-item:last-child {
  border-bottom: none;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-item .accordion-item .accordion-button[aria-expanded=true],
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-item .accordion-item .accordion-button[aria-expanded=true] {
  border: 1px #96826E solid;
  background: #96826E;
  width: 100%;
  margin: 0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-item .accordion-item .accordion-body .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-item .accordion-item .accordion-body .item {
  width: 100%;
  margin: 0;
  text-align: left;
  justify-content: flex-start;
  border-bottom: 1px solid #e6f0f0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-item .accordion-item .accordion-body .item:last-child,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category .accordion-item .accordion-item .accordion-body .item:last-child {
  border-bottom: none;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category.show,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category.show {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category.show .accordion-item,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category.show .accordion-item {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category.show .accordion-item:nth-child(1),
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category.show .accordion-item:nth-child(1) {
  transition-delay: 0.025s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category.show .accordion-item:nth-child(2),
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category.show .accordion-item:nth-child(2) {
  transition-delay: 0.05s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category.show .accordion-item:nth-child(3),
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category.show .accordion-item:nth-child(3) {
  transition-delay: 0.075s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category.show .accordion-item:nth-child(4),
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category.show .accordion-item:nth-child(4) {
  transition-delay: 0.1s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category.show .accordion-item:nth-child(5),
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category.show .accordion-item:nth-child(5) {
  transition-delay: 0.125s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category.show .accordion-item:nth-child(6),
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category.show .accordion-item:nth-child(6) {
  transition-delay: 0.15s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category.hide,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category.hide {
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category.hide .accordion-item,
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category.hide .accordion-item {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category.hide .accordion-item:nth-child(1),
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category.hide .accordion-item:nth-child(1) {
  transition-delay: 0.15s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category.hide .accordion-item:nth-child(2),
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category.hide .accordion-item:nth-child(2) {
  transition-delay: 0.125s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category.hide .accordion-item:nth-child(3),
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category.hide .accordion-item:nth-child(3) {
  transition-delay: 0.1s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category.hide .accordion-item:nth-child(4),
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category.hide .accordion-item:nth-child(4) {
  transition-delay: 0.075s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category.hide .accordion-item:nth-child(5),
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category.hide .accordion-item:nth-child(5) {
  transition-delay: 0.05s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-left .list-category.hide .accordion-item:nth-child(6),
.canho-360-page .action-group.action-bottom .group-btn.btn-left .list-category.hide .accordion-item:nth-child(6) {
  transition-delay: 0.025s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right,
.canho-360-page .action-group.action-bottom .group-btn.btn-right {
  position: fixed;
  z-index: 1051;
  display: flex;
  align-items: center;
}
@media (max-width: 991px) {
  .tienich-page .action-group.action-bottom .group-btn.btn-right,
  .canho-360-page .action-group.action-bottom .group-btn.btn-right {
    right: 15px;
    bottom: 8px;
    z-index: 1060;
    opacity: 1;
  }
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .toggle-btn,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .toggle-btn {
  background: transparent;
  border: none;
  width: 38px;
  order: 2;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .toggle-btn .svg-btn-open.hide,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .toggle-btn .svg-btn-open.hide {
  display: none;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .toggle-btn .svg-btn-open.show,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .toggle-btn .svg-btn-open.show {
  display: block;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .toggle-btn .svg-btn-close.hide,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .toggle-btn .svg-btn-close.hide {
  display: none;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .toggle-btn .svg-btn-close.show,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .toggle-btn .svg-btn-close.show {
  display: block;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category {
  position: fixed;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  order: 1;
  bottom: 0;
  right: var(--offset-right);
  margin-bottom: 0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category *,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category * {
  font-size: 14px;
  width: 190px;
}
@media (min-width: 1200px) {
  .tienich-page .action-group.action-bottom .group-btn.btn-right .list-category *,
  .canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category * {
    font-size: 16px;
  }
}
@media (min-width: 1600px) {
  .tienich-page .action-group.action-bottom .group-btn.btn-right .list-category *,
  .canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category * {
    font-size: 20px;
  }
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .j-one .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .j-one .item {
  border-bottom: 1px solid #e6f0f0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .j-one .item:last-child,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .j-one .item:last-child {
  border-bottom: none;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .j-one .item .btn,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .j-one .item .btn {
  text-align: left;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-header,
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item,
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-button,
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .item,
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .btn,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-header,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-button,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .btn {
  border-radius: 0 !important;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-body,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-body {
  padding: 0 !important;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .item {
  background: white;
  transition: all 0.3s ease-in-out;
  margin-bottom: 0 !important;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .item .btn,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .item .btn {
  height: auto;
  width: 100% !important;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .item .btn.active,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .item .btn.active {
  background-color: #00504B;
  color: #FFFFFF;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .item:hover *,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .item:hover * {
  color: white;
  background: #00504B;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-button,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-button {
  font-weight: 500;
  color: #00504B;
  background-color: #FFFFFF;
  border: none;
  box-shadow: none;
  padding: 5px 16px;
  text-align: left;
  justify-content: flex-start;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-button[aria-expanded=true],
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-button[aria-expanded=true] {
  background-color: #00504B;
  border: 2px #96826E solid;
  color: #FFFFFF;
  margin-bottom: 0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-button[aria-expanded=true]::after,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-button[aria-expanded=true]::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-button::after,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-button::after {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-button.collapsed::after,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-button.collapsed::after {
  transform: rotate(0deg);
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-button:focus,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-button:focus {
  box-shadow: none;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category #ResortGolfsCategory.accordion-item .accordion-button,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category #ResortGolfsCategory.accordion-item .accordion-button {
  color: #FFFFFF;
  background-color: #00504B;
  border: none;
  box-shadow: none;
  padding: 5px 16px;
  text-align: left;
  justify-content: flex-start;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category #ResortGolfsCategory.accordion-item .accordion-button.collapsed::after,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category #ResortGolfsCategory.accordion-item .accordion-button.collapsed::after {
  filter: invert(1);
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category #ResortGolfsCategory.accordion-item .accordion-item.level-2 .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category #ResortGolfsCategory.accordion-item .accordion-item.level-2 .item {
  background-color: #E6F0F0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category #ResortGolfsCategory.accordion-item .accordion-item.level-2 .item:not(last-child),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category #ResortGolfsCategory.accordion-item .accordion-item.level-2 .item:not(last-child) {
  border-bottom: 1px solid #B4C8C8;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category #ResortGolfsCategory.accordion-item .accordion-button[aria-expanded=true],
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category #ResortGolfsCategory.accordion-item .accordion-button[aria-expanded=true] {
  border: 1px #96826E solid;
  background-color: #00504B;
  color: #E6F0F0;
  width: 100%;
  margin: 0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category #ResortGolfsCategory.accordion-item .accordion-button[aria-expanded=true]::after,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category #ResortGolfsCategory.accordion-item .accordion-button[aria-expanded=true]::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category #beach-villasCategory.accordion-item .accordion-button,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category #beach-villasCategory.accordion-item .accordion-button {
  color: #FFFFFF;
  background-color: #96826E;
  border: none;
  box-shadow: none;
  padding: 5px 16px;
  text-align: left;
  justify-content: flex-start;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category #beach-villasCategory.accordion-item .accordion-button.collapsed::after,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category #beach-villasCategory.accordion-item .accordion-button.collapsed::after {
  filter: invert(1);
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category #beach-villasCategory.accordion-item .accordion-item.level-2 .accordion-button,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category #beach-villasCategory.accordion-item .accordion-item.level-2 .accordion-button {
  color: #FFFFFF;
  background: #baa590;
  border: none;
  box-shadow: none;
  padding: 5px 16px;
  text-align: left;
  justify-content: flex-start;
  border-bottom: 1px solid #96826E;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category #beach-villasCategory.accordion-item .accordion-item.level-2 .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category #beach-villasCategory.accordion-item .accordion-item.level-2 .item {
  background-color: #ebe6dc;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category #beach-villasCategory.accordion-item .accordion-item.level-2 .item:hover *,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category #beach-villasCategory.accordion-item .accordion-item.level-2 .item:hover * {
  color: white;
  background: #96826E;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category #beach-villasCategory.accordion-item .accordion-item.level-2 .item:not(last-child),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category #beach-villasCategory.accordion-item .accordion-item.level-2 .item:not(last-child) {
  border-bottom: 1px solid #96826E;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category #beach-villasCategory.accordion-item .accordion-button[aria-expanded=true],
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category #beach-villasCategory.accordion-item .accordion-button[aria-expanded=true] {
  border: 1px #96826E solid;
  background-color: #96826E;
  color: #FFFFFF !important;
  width: 100%;
  margin: 0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category #beach-villasCategory.accordion-item .accordion-button[aria-expanded=true]::after,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category #beach-villasCategory.accordion-item .accordion-button[aria-expanded=true]::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item {
  border: none;
  background-color: unset;
  margin-bottom: 0 !important;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item .accordion-collapse,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item .accordion-collapse {
  margin: 0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item.level-2 .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item.level-2 .item {
  background: #ebe6dc;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item .accordion-item:last-child,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item .accordion-item:last-child {
  border-bottom: none;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item .accordion-item .accordion-button[aria-expanded=true],
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item .accordion-item .accordion-button[aria-expanded=true] {
  border: 1px #96826E solid;
  background: #96826E;
  width: 100%;
  margin: 0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item .accordion-item .accordion-body .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item .accordion-item .accordion-body .item {
  width: 100%;
  margin: 0;
  text-align: left;
  justify-content: flex-start;
  border-bottom: 1px solid #e6f0f0;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item .accordion-item .accordion-body .item:last-child,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item .accordion-item .accordion-body .item:last-child {
  border-bottom: none;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category.show,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category.show {
  pointer-events: auto;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category.show .accordion-item,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category.show .accordion-item {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category.show .accordion-item:nth-child(1),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category.show .accordion-item:nth-child(1) {
  transition-delay: 0.025s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category.show .accordion-item:nth-child(2),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category.show .accordion-item:nth-child(2) {
  transition-delay: 0.05s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category.show .accordion-item:nth-child(3),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category.show .accordion-item:nth-child(3) {
  transition-delay: 0.075s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category.show .accordion-item:nth-child(4),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category.show .accordion-item:nth-child(4) {
  transition-delay: 0.1s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category.show .accordion-item:nth-child(5),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category.show .accordion-item:nth-child(5) {
  transition-delay: 0.125s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category.hide,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category.hide {
  pointer-events: none;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category.hide .accordion-item,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category.hide .accordion-item {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category.hide .accordion-item:nth-child(1),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category.hide .accordion-item:nth-child(1) {
  transition-delay: 0.125s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category.hide .accordion-item:nth-child(2),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category.hide .accordion-item:nth-child(2) {
  transition-delay: 0.1s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category.hide .accordion-item:nth-child(3),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category.hide .accordion-item:nth-child(3) {
  transition-delay: 0.075s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category.hide .accordion-item:nth-child(4),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category.hide .accordion-item:nth-child(4) {
  transition-delay: 0.05s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-category.hide .accordion-item:nth-child(5),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-category.hide .accordion-item:nth-child(5) {
  transition-delay: 0.025s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour {
  position: fixed;
  z-index: 1051;
  display: flex;
  align-items: center;
  order: 1;
  bottom: 0;
  right: 40px;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 2px 10px;
}
@media (max-width: 991px) {
  .tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour,
  .canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour {
    right: 40px;
    bottom: 12px;
    flex-direction: column;
  }
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour .item {
  width: 100px;
  border-radius: 30px;
  background: white;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease-in-out;
}
@media (max-width: 991px) {
  .tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour .item,
  .canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour .item {
    width: 75px;
  }
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour .item:not(:last-child),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour .item:not(:last-child) {
  margin-bottom: 3px;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour .item:hover *, .tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour .item.active *,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour .item:hover *,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour .item.active * {
  color: white;
  background: #00504B;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour .btn,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour .btn {
  background: white;
  color: #00504B;
  border-radius: 30px;
  width: 100%;
  height: unset;
  font-size: 11px;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour.show .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour.show .item {
  opacity: 1;
  transform: translateY(0);
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour.show .item:nth-child(1),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour.show .item:nth-child(1) {
  transition-delay: 0.025s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour.show .item:nth-child(2),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour.show .item:nth-child(2) {
  transition-delay: 0.05s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour.show .item:nth-child(3),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour.show .item:nth-child(3) {
  transition-delay: 0.075s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour.show .item:nth-child(4),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour.show .item:nth-child(4) {
  transition-delay: 0.1s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour.show .item:nth-child(5),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour.show .item:nth-child(5) {
  transition-delay: 0.125s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour.hide .item,
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour.hide .item {
  opacity: 0;
  transform: translateY(10px);
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour.hide .item:nth-child(1),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour.hide .item:nth-child(1) {
  transition-delay: 0.125s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour.hide .item:nth-child(2),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour.hide .item:nth-child(2) {
  transition-delay: 0.1s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour.hide .item:nth-child(3),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour.hide .item:nth-child(3) {
  transition-delay: 0.075s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour.hide .item:nth-child(4),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour.hide .item:nth-child(4) {
  transition-delay: 0.05s;
}
.tienich-page .action-group.action-bottom .group-btn.btn-right .list-vtour.hide .item:nth-child(5),
.canho-360-page .action-group.action-bottom .group-btn.btn-right .list-vtour.hide .item:nth-child(5) {
  transition-delay: 0.025s;
}
.tienich-page .nav-bottom,
.canho-360-page .nav-bottom {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.tienich-page .floor-dropdown-tour,
.canho-360-page .floor-dropdown-tour {
  position: fixed;
  z-index: 1051;
  display: flex;
  align-items: center;
  width: 250px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  padding: 10px 50px 20px;
  font-size: 14px;
}
.tienich-page .floor-dropdown-tour .floor-dropdown,
.canho-360-page .floor-dropdown-tour .floor-dropdown {
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
}
.tienich-page .floor-dropdown-tour .floor-dropdown-toggle,
.canho-360-page .floor-dropdown-tour .floor-dropdown-toggle {
  background: #e9f2fb;
  padding: 8px 12px;
  border-radius: 5px;
  color: #00504B;
  font-weight: bold;
}
.tienich-page .floor-dropdown-tour .floor-dropdown-toggle i,
.canho-360-page .floor-dropdown-tour .floor-dropdown-toggle i {
  margin-left: 0.5rem;
}
.tienich-page .floor-dropdown-tour .floor-dropdown .floor-options,
.canho-360-page .floor-dropdown-tour .floor-dropdown .floor-options {
  position: absolute;
  top: 32px;
  left: 0;
  background: white;
  border: 0px solid #ccc;
  border-radius: 5px;
  width: 100%;
  z-index: 100;
  overflow: hidden;
}
.tienich-page .floor-dropdown-tour .floor-dropdown .floor-options div,
.canho-360-page .floor-dropdown-tour .floor-dropdown .floor-options div {
  padding: 6px 12px;
  cursor: pointer;
}
.tienich-page .floor-dropdown-tour .floor-dropdown .floor-options div:hover,
.canho-360-page .floor-dropdown-tour .floor-dropdown .floor-options div:hover {
  background: #eee;
}
.tienich-page .floor-dropdown-tour .floorplan,
.canho-360-page .floor-dropdown-tour .floorplan {
  position: relative;
}
.tienich-page .floor-dropdown-tour .floorplan img,
.canho-360-page .floor-dropdown-tour .floorplan img {
  width: 150px;
  border-radius: 6px;
}
.tienich-page .floor-dropdown-tour .floorplan .dot,
.canho-360-page .floor-dropdown-tour .floorplan .dot {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #007bff;
  border-radius: 50%;
  border: 2px solid white;
  cursor: pointer;
}
.tienich-page .floor-dropdown-tour .floorplan .dot:hover,
.canho-360-page .floor-dropdown-tour .floorplan .dot:hover {
  transform: scale(1.2);
}
.tienich-page .floor-dropdown-tour .floorplan .label,
.canho-360-page .floor-dropdown-tour .floorplan .label {
  font-weight: bold;
  text-align: center;
  font-family: "Montserrat", serif;
  padding-top: 1rem;
}

.list-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
}
@media (min-width: 768px) {
  .list-info {
    max-width: 80%;
  }
}
@media (max-width: 767px) {
  .list-info {
    max-width: 100%;
    flex-wrap: wrap;
  }
  .list-info p {
    margin-bottom: 0;
  }
}

::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #00504B;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #00504B;
}

.relate .title {
  text-align: center;
}

.logo.mobile {
  margin-top: 70px;
  margin-bottom: 65px;
}

.tooltip-inner {
  background-color: #00504B !important;
}

.tooltip-arrow::before {
  border-right-color: #00504B !important;
  border-left-color: #00504B !important;
}

/*.loading-screen-vr start*/
.loading-screen-vr {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.4s ease;
}
.loading-screen-vr.visible {
  opacity: 1;
}
.loading-screen-vr .bg {
  position: absolute;
  top: -20px;
  left: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
  filter: blur(14px);
  transform: scale(1.05);
  transition: background-image 0.3s ease;
}
.loading-screen-vr .bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 80, 75, 0.35);
}
.loading-screen-vr .spinner {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vr-spin 0.8s linear infinite;
  margin-bottom: 14px;
}
.loading-screen-vr .label {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
@keyframes vr-spin {
  to {
    transform: rotate(360deg);
  }
}

/*.loading-screen-vr end*/
.notice-action {
  position: relative;
  overflow: visible;
}
.notice-action.svg-child:before, .notice-action.svg-child:after {
  right: 2px;
}

.notice-action::before {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fd7e14;
  box-shadow: 0 0 0 1px rgba(253, 126, 20, 0.5);
  z-index: 3;
}

.notice-action::after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #E6F0F0;
  background: rgba(230, 240, 240, 0.15);
  opacity: 0.6;
  z-index: 2;
  animation: noticePulse 1.6s infinite ease-out;
}

@keyframes noticePulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  70% {
    transform: scale(3.5);
    opacity: 0;
  }
  100% {
    transform: scale(4.5);
    opacity: 0;
  }
}
@media (max-width: 767px) {
  .en-lang .is-vn {
    display: none !important;
  }
}
.en-lang .is-vn {
  display: none !important;
}

@media (max-width: 767px) {
  .vn-lang .is-en {
    display: none !important;
  }
  .vn-lang .home-page .area-home-designs .heading > span::before {
    left: calc(-100% + 75px);
  }
  .vn-lang .home-page .area-home-designs .heading > span::after {
    right: calc(-100% + 75px);
  }
  .vn-lang .home-page .area-home-designs .heading > span {
    max-width: 160px;
  }
  .vn-lang .home-page .area-pr-info .btn {
    letter-spacing: 1px;
    padding: 0;
  }
  .vn-lang .introduction-page .heading p.is-vn.item {
    font-size: 18px !important;
    line-height: 45px;
  }
}
.vn-lang .is-en {
  display: none !important;
}
.vn-lang .typo-heading.typo-heading-vn {
  line-height: 95%;
}

.is-mb.is-vn.heading .icon::after {
  left: 75px !important;
}
.is-mb.heading .icon::after {
  top: 30px !important;
  left: -10px !important;
}
.is-mb.heading .item-2 .typo, .is-mb.heading .item-2 .typo-heading {
  display: flex !important;
}
.is-mb.heading .item-2 .typo {
  margin-top: 0 !important;
  justify-content: center;
}
.is-mb.heading .item-2 .typo-heading {
  margin-top: -15px !important;
}

.font-HelveticaNeue-Regular {
  font-family: HelveticaNeue-Regular !important;
}

.vn-lang .area-pr-info .heading.line-height-normal {
  line-height: normal;
}

@media (max-width: 767px) {
  .location-box .location-map .transform-mb {
    transform: translate3d(0, 0px, 0px) !important;
  }
  .en-lang .home-page .area-introduction .heading .item {
    max-width: 100%;
    margin: 33px auto;
    font-size: 25px;
    line-height: 60%;
  }
  .vn-lang .home-page .area-introduction .heading .item {
    max-width: 100%;
    margin: 33px auto;
    font-size: 18px;
    line-height: 60%;
  }
  .vn-lang .referral-program-page .icon-mb:before {
    content: "";
    position: absolute;
    z-index: 999;
    right: 20px;
    top: -110px;
    background: url(../images/pattern-bg.png) no-repeat;
    background-size: cover;
    width: 101px;
    height: 105px;
  }
}
@media (max-width: 991px) {
  .location-box .location-map {
    margin-bottom: 30px;
  }
  .amenities-page .logo {
    margin-bottom: 50px;
  }
  .gallery-page .filter-items select.label {
    background-image: none !important;
    position: relative;
    -webkit-appearance: auto !important;
  }
  .gallery-page .filter-items select.label:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background: url(../images/arrow-down.svg) no-repeat;
    background-size: contain;
    width: 13px;
    height: 9px;
    border: none;
  }
}
.mfp-iframe-scaler {
  overflow: unset !important;
}
.mfp-iframe-scaler .mfp-close {
  color: transparent;
  top: -3rem !important;
  right: -0.5rem !important;
  cursor: pointer !important;
}

.popup-layer {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
}
.popup-layer .btn-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
}
.popup-layer::before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "";
  background: url(../images/video-play-icon.png) no-repeat;
  background-size: contain;
  width: 50px;
  height: 50px;
  z-index: 9;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: unset;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --swiper-navigation-color: $primary;
  --swiper-theme-color: $primary;
  --swiper-navigation-size: 40px;
  --swiper-pagination-bottom: 20px;
  --swiper-pagination-top: 20px;
}

.swiper,
.swiper-container {
  position: relative;
}
.swiper .swiper-slide,
.swiper-container .swiper-slide {
  background-size: cover;
  background-position: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper .swiper-pagination:not(.custom-pagination),
.swiper-container .swiper-pagination:not(.custom-pagination) {
  position: absolute !important;
  bottom: 20px;
  left: 50% !important;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  display: flex !important;
  align-items: end;
  justify-content: center;
  gap: 10px;
  width: auto !important;
}
.swiper .swiper-pagination:not(.custom-pagination) .swiper-pagination-bullet,
.swiper-container .swiper-pagination:not(.custom-pagination) .swiper-pagination-bullet {
  width: 12px;
  height: 1px;
  border-radius: 0;
  background: rgba(235, 230, 220, 0.4);
  border: none;
  opacity: 1;
  margin: 0 !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  cursor: pointer;
}
.swiper .swiper-pagination:not(.custom-pagination) .swiper-pagination-bullet:hover,
.swiper-container .swiper-pagination:not(.custom-pagination) .swiper-pagination-bullet:hover {
  background: rgba(230, 240, 240, 0.7);
}
.swiper .swiper-pagination:not(.custom-pagination) .swiper-pagination-bullet-active,
.swiper-container .swiper-pagination:not(.custom-pagination) .swiper-pagination-bullet-active {
  width: 34px;
  background: #E6F0F0;
}
.swiper .swiper-button-disabled,
.swiper-container .swiper-button-disabled {
  opacity: 0 !important;
}
.swiper .swiper-button-next:not(.custom-nav),
.swiper .swiper-button-prev:not(.custom-nav),
.swiper .nav-arrow:not(.custom-nav),
.swiper-container .swiper-button-next:not(.custom-nav),
.swiper-container .swiper-button-prev:not(.custom-nav),
.swiper-container .nav-arrow:not(.custom-nav) {
  width: 36px;
  height: 36px;
  border: 1px #00504B solid;
  border-radius: 0;
  background: #00504b;
  color: #FFFFFF;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  backdrop-filter: blur(3px);
  box-shadow: none;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.swiper .swiper-button-next:not(.custom-nav):hover,
.swiper .swiper-button-prev:not(.custom-nav):hover,
.swiper .nav-arrow:not(.custom-nav):hover,
.swiper-container .swiper-button-next:not(.custom-nav):hover,
.swiper-container .swiper-button-prev:not(.custom-nav):hover,
.swiper-container .nav-arrow:not(.custom-nav):hover {
  background: #96826E;
  border: 1px #FFFFFF solid;
  color: #00504B;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
.swiper .swiper-button-next:not(.custom-nav):hover,
.swiper .swiper-button-prev:not(.custom-nav):hover,
.swiper .nav-arrow:not(.custom-nav):hover,
.swiper-container .swiper-button-next:not(.custom-nav):hover,
.swiper-container .swiper-button-prev:not(.custom-nav):hover,
.swiper-container .nav-arrow:not(.custom-nav):hover {
  color: white;
  background: #00504B;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.swiper .swiper-button-next:not(.custom-nav)::after,
.swiper .swiper-button-prev:not(.custom-nav)::after,
.swiper .nav-arrow:not(.custom-nav)::after,
.swiper-container .swiper-button-next:not(.custom-nav)::after,
.swiper-container .swiper-button-prev:not(.custom-nav)::after,
.swiper-container .nav-arrow:not(.custom-nav)::after {
  font-size: 14px;
  font-weight: 700;
}

.highlight-slide-wrapper {
  position: relative;
}
.highlight-slide-wrapper .wrap-img {
  height: unset;
  position: relative;
  width: 100%;
  padding: 0 0 0;
  overflow: hidden;
}
.highlight-slide-wrapper .swiper-button-next,
.highlight-slide-wrapper .swiper-button-prev {
  color: #000000;
  top: 45%;
}
.highlight-slide-wrapper .swiper-button-next.swiper-button-disabled,
.highlight-slide-wrapper .swiper-button-prev.swiper-button-disabled {
  opacity: 0;
}
.highlight-slide-wrapper .swiper-button-next {
  right: -3.5rem;
}
.highlight-slide-wrapper .swiper-button-next::after {
  content: "";
  background: url(../images/next.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}
.highlight-slide-wrapper .swiper-button-prev {
  left: -3.5rem;
}
.highlight-slide-wrapper .swiper-button-prev::after {
  content: "";
  background: url(../images/pre.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}

:root {
  --width-nav: 300px;
}

img[src=""],
img:not([src]) {
  display: none !important;
}

#startup-overlay {
  position: fixed;
  inset: 0;
  color: #fff;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  writing-mode: vertical-rl;
  background: url("../media/image/masterplan/masterplan-tongthe.jpg") center/cover no-repeat;
}
@media (min-width: 992px) {
  #startup-overlay {
    display: none;
  }
}
#startup-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 80, 75, 0.8);
  backdrop-filter: blur(20px);
  z-index: -1;
}

#orientation-msg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 80, 75, 0.8);
  backdrop-filter: blur(20px);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  z-index: 9999;
  animation: fadeOut 1s forwards;
  animation-delay: 4s;
}
@media (min-width: 992px) {
  #orientation-msg {
    display: none;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.keyPlanModal.show,
.galleryModal.show {
  background: #000000;
}
.keyPlanModal.show .close,
.galleryModal.show .close {
  color: #ffffff;
  text-align: right;
}

.toggle-floor-summary,
.toggle-floors-list,
.toggle-key-status-list {
  position: absolute;
  height: 100px;
  top: 0;
  right: -0.75rem;
  font-size: 20px;
  z-index: 10;
  text-align: right;
  padding: 0.5rem;
}
@media (min-width: 768px) {
  .toggle-floor-summary,
  .toggle-floors-list,
  .toggle-key-status-list {
    display: none;
  }
}
@media (max-width: 767px) {
  .toggle-floor-summary,
  .toggle-floors-list,
  .toggle-key-status-list {
    display: block;
  }
}
.toggle-floor-summary.show i,
.toggle-floors-list.show i,
.toggle-key-status-list.show i {
  rotate: 180deg;
}

.toggle-floors-list,
.toggle-key-status-list {
  right: 0;
}

.area-buiding {
  display: none;
}
.area-buiding .level-filter {
  cursor: pointer;
}
.area-buiding .level-filter.active {
  fill: rgba(162, 38, 69, 0.4156862745) !important;
}
.area-buiding .label-level-filter {
  color: inherit;
}
.area-buiding .label-level-filter.active {
  color: red;
}
.area-buiding .floor-img {
  z-index: -1;
}

.click-item[data-filter].active {
  fill: red;
}

.area-floor .floors-wrapper {
  height: 692px;
}

.area-buiding .floors-wrapper {
  height: 1140px;
}

.area-buiding,
.area-floor {
  position: relative;
}
.area-buiding .floor-summary,
.area-floor .floor-summary {
  display: none;
  position: absolute;
  z-index: 1145;
  top: 0;
  left: 0;
  height: 100%;
  background: #fff5dc;
  transition: left ease 1s;
  -webkit-animation: 1s ease 0s normal forwards 1 fadeInDelay;
  animation: 1s ease 0s normal forwards 1 fadeInDelay;
}
.area-buiding .floor-summary.hide,
.area-floor .floor-summary.hide {
  transform: translateX(0);
  left: 1.5rem;
  -webkit-animation: 1s ease 0s normal forwards 1 fadeOutDelay;
  animation: 1s ease 0s normal forwards 1 fadeOutDelay;
}
.area-buiding .floor-summary.hide .toggle-floor-summary,
.area-floor .floor-summary.hide .toggle-floor-summary {
  transform: translateX(0.25rem);
  z-index: 100000;
}
.area-buiding .floor-summary.hide i,
.area-floor .floor-summary.hide i {
  transform: rotate(0deg);
}
@media (min-width: 768px) {
  .area-buiding .floor-summary,
  .area-floor .floor-summary {
    width: 25%;
    padding: 1rem 0;
    position: relative;
  }
  .area-buiding .floor-summary::before,
  .area-floor .floor-summary::before {
    content: "";
    position: absolute;
    z-index: 9999;
    right: -38px;
    top: 0;
    transform: translateX(-50%);
    background: url(../images/bg-left.png) no-repeat;
    background-size: cover;
    width: 26px;
    height: 1140px;
  }
}
@media (max-width: 1400px) {
  .area-buiding .floor-summary,
  .area-floor .floor-summary {
    padding: 1rem 0;
  }
}
@media (max-width: 767px) {
  .area-buiding .floor-summary,
  .area-floor .floor-summary {
    max-width: 80%;
    padding: 1rem 0;
  }
}
@media (min-width: 768px) {
  .area-buiding .floor-summary .floor-summary-content,
  .area-floor .floor-summary .floor-summary-content {
    display: block;
    padding: 0 2rem;
    max-height: 96%;
    overflow: auto;
  }
}
@media (max-width: 767px) {
  .area-buiding .floor-summary .floor-summary-content,
  .area-floor .floor-summary .floor-summary-content {
    background: #fff5dc;
    padding: 2rem 0 2rem 1rem;
    position: relative;
    top: -50px;
  }
  .area-buiding .floor-summary .floor-summary-content::before,
  .area-floor .floor-summary .floor-summary-content::before {
    content: "";
    position: absolute;
    z-index: 9999;
    right: -38px;
    top: 0;
    transform: translateX(-50%);
    background: url(../images/bg-left.png) no-repeat;
    background-size: cover;
    width: 26px;
    height: 1140px;
  }
  .area-buiding .floor-summary .floor-summary-content .action-group,
  .area-floor .floor-summary .floor-summary-content .action-group {
    justify-content: space-around;
  }
  .area-buiding .floor-summary .floor-summary-content .action-group .btn,
  .area-floor .floor-summary .floor-summary-content .action-group .btn {
    scale: 0.8;
  }
}
@media (max-width: 991px) {
  .area-buiding .floor-summary .floor-summary-content .over-sroll,
  .area-floor .floor-summary .floor-summary-content .over-sroll {
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.75rem;
  }
}
.area-buiding .floor-summary .border-top,
.area-floor .floor-summary .border-top {
  border-color: #000000 !important;
}
.area-buiding .floor-summary .summary-list.more,
.area-floor .floor-summary .summary-list.more {
  display: flex;
  flex-wrap: wrap;
}
.area-buiding .floor-summary .summary-list.more li,
.area-floor .floor-summary .summary-list.more li {
  width: 50%;
}
.area-buiding .floor-summary .description,
.area-floor .floor-summary .description {
  opacity: 0.5;
}
@media (min-width: 992px) {
  .area-buiding .floor-summary .description,
  .area-floor .floor-summary .description {
    max-height: 150px;
    overflow: auto;
  }
}
.area-buiding .floor-summary .action-group,
.area-floor .floor-summary .action-group {
  max-width: 400px;
  display: flex;
  justify-content: space-between;
}
.area-buiding .floor-summary .action-group .btn,
.area-floor .floor-summary .action-group .btn {
  margin-bottom: 0.5rem;
  mix-blend-mode: multiply;
}
.area-buiding .floor-summary .key-plan .title,
.area-floor .floor-summary .key-plan .title {
  font-weight: bold;
  text-transform: unset;
}
.area-buiding .floor-summary .key-plan .wrap-img-padding,
.area-floor .floor-summary .key-plan .wrap-img-padding {
  cursor: pointer;
}
.area-buiding .floor-summary .key-plan .wrap-img-padding img,
.area-floor .floor-summary .key-plan .wrap-img-padding img {
  mix-blend-mode: multiply;
}
.area-buiding .floors-list,
.area-buiding .key-status-list,
.area-floor .floors-list,
.area-floor .key-status-list {
  position: relative;
}
.area-buiding .floors-list .floors-list-content,
.area-buiding .floors-list .key-status-list-content,
.area-buiding .key-status-list .floors-list-content,
.area-buiding .key-status-list .key-status-list-content,
.area-floor .floors-list .floors-list-content,
.area-floor .floors-list .key-status-list-content,
.area-floor .key-status-list .floors-list-content,
.area-floor .key-status-list .key-status-list-content {
  display: flex;
}
@media (max-width: 991px) {
  .area-buiding .floors-list .floors-list-content .list,
  .area-buiding .floors-list .key-status-list-content .list,
  .area-buiding .key-status-list .floors-list-content .list,
  .area-buiding .key-status-list .key-status-list-content .list,
  .area-floor .floors-list .floors-list-content .list,
  .area-floor .floors-list .key-status-list-content .list,
  .area-floor .key-status-list .floors-list-content .list,
  .area-floor .key-status-list .key-status-list-content .list {
    display: flex;
    flex-wrap: wrap;
  }
  .area-buiding .floors-list .floors-list-content .list .item-filter,
  .area-buiding .floors-list .key-status-list-content .list .item-filter,
  .area-buiding .key-status-list .floors-list-content .list .item-filter,
  .area-buiding .key-status-list .key-status-list-content .list .item-filter,
  .area-floor .floors-list .floors-list-content .list .item-filter,
  .area-floor .floors-list .key-status-list-content .list .item-filter,
  .area-floor .key-status-list .floors-list-content .list .item-filter,
  .area-floor .key-status-list .key-status-list-content .list .item-filter {
    width: 50%;
  }
  .area-buiding .floors-list .floors-list-content .list.status-list,
  .area-buiding .floors-list .key-status-list-content .list.status-list,
  .area-buiding .key-status-list .floors-list-content .list.status-list,
  .area-buiding .key-status-list .key-status-list-content .list.status-list,
  .area-floor .floors-list .floors-list-content .list.status-list,
  .area-floor .floors-list .key-status-list-content .list.status-list,
  .area-floor .key-status-list .floors-list-content .list.status-list,
  .area-floor .key-status-list .key-status-list-content .list.status-list {
    margin: 0 1rem 1rem;
  }
  .area-buiding .floors-list .floors-list-content .list.status-list li:not(:last-child),
  .area-buiding .floors-list .key-status-list-content .list.status-list li:not(:last-child),
  .area-buiding .key-status-list .floors-list-content .list.status-list li:not(:last-child),
  .area-buiding .key-status-list .key-status-list-content .list.status-list li:not(:last-child),
  .area-floor .floors-list .floors-list-content .list.status-list li:not(:last-child),
  .area-floor .floors-list .key-status-list-content .list.status-list li:not(:last-child),
  .area-floor .key-status-list .floors-list-content .list.status-list li:not(:last-child),
  .area-floor .key-status-list .key-status-list-content .list.status-list li:not(:last-child) {
    margin-right: 1.5rem;
  }
}
.area-buiding .floors-list .floors-list-content .item-filter,
.area-buiding .floors-list .key-status-list-content .item-filter,
.area-buiding .key-status-list .floors-list-content .item-filter,
.area-buiding .key-status-list .key-status-list-content .item-filter,
.area-floor .floors-list .floors-list-content .item-filter,
.area-floor .floors-list .key-status-list-content .item-filter,
.area-floor .key-status-list .floors-list-content .item-filter,
.area-floor .key-status-list .key-status-list-content .item-filter {
  padding: 0 1rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.area-buiding .floors-list .floors-list-content .item-filter.active .cata-name, .area-buiding .floors-list .floors-list-content .item-filter:hover .cata-name,
.area-buiding .floors-list .key-status-list-content .item-filter.active .cata-name,
.area-buiding .floors-list .key-status-list-content .item-filter:hover .cata-name,
.area-buiding .key-status-list .floors-list-content .item-filter.active .cata-name,
.area-buiding .key-status-list .floors-list-content .item-filter:hover .cata-name,
.area-buiding .key-status-list .key-status-list-content .item-filter.active .cata-name,
.area-buiding .key-status-list .key-status-list-content .item-filter:hover .cata-name,
.area-floor .floors-list .floors-list-content .item-filter.active .cata-name,
.area-floor .floors-list .floors-list-content .item-filter:hover .cata-name,
.area-floor .floors-list .key-status-list-content .item-filter.active .cata-name,
.area-floor .floors-list .key-status-list-content .item-filter:hover .cata-name,
.area-floor .key-status-list .floors-list-content .item-filter.active .cata-name,
.area-floor .key-status-list .floors-list-content .item-filter:hover .cata-name,
.area-floor .key-status-list .key-status-list-content .item-filter.active .cata-name,
.area-floor .key-status-list .key-status-list-content .item-filter:hover .cata-name {
  text-decoration: underline;
}
.area-buiding .floors-list .floors-list-content .item-filter.active[data-filter="*"] .cata-color, .area-buiding .floors-list .floors-list-content .item-filter:hover[data-filter="*"] .cata-color,
.area-buiding .floors-list .key-status-list-content .item-filter.active[data-filter="*"] .cata-color,
.area-buiding .floors-list .key-status-list-content .item-filter:hover[data-filter="*"] .cata-color,
.area-buiding .key-status-list .floors-list-content .item-filter.active[data-filter="*"] .cata-color,
.area-buiding .key-status-list .floors-list-content .item-filter:hover[data-filter="*"] .cata-color,
.area-buiding .key-status-list .key-status-list-content .item-filter.active[data-filter="*"] .cata-color,
.area-buiding .key-status-list .key-status-list-content .item-filter:hover[data-filter="*"] .cata-color,
.area-floor .floors-list .floors-list-content .item-filter.active[data-filter="*"] .cata-color,
.area-floor .floors-list .floors-list-content .item-filter:hover[data-filter="*"] .cata-color,
.area-floor .floors-list .key-status-list-content .item-filter.active[data-filter="*"] .cata-color,
.area-floor .floors-list .key-status-list-content .item-filter:hover[data-filter="*"] .cata-color,
.area-floor .key-status-list .floors-list-content .item-filter.active[data-filter="*"] .cata-color,
.area-floor .key-status-list .floors-list-content .item-filter:hover[data-filter="*"] .cata-color,
.area-floor .key-status-list .key-status-list-content .item-filter.active[data-filter="*"] .cata-color,
.area-floor .key-status-list .key-status-list-content .item-filter:hover[data-filter="*"] .cata-color {
  border: 1px #1e4141 solid;
  background: #1e4141;
}
.area-buiding .floors-list .floors-list-content .item-filter.active[data-filter=Basic] .cata-color, .area-buiding .floors-list .floors-list-content .item-filter:hover[data-filter=Basic] .cata-color,
.area-buiding .floors-list .key-status-list-content .item-filter.active[data-filter=Basic] .cata-color,
.area-buiding .floors-list .key-status-list-content .item-filter:hover[data-filter=Basic] .cata-color,
.area-buiding .key-status-list .floors-list-content .item-filter.active[data-filter=Basic] .cata-color,
.area-buiding .key-status-list .floors-list-content .item-filter:hover[data-filter=Basic] .cata-color,
.area-buiding .key-status-list .key-status-list-content .item-filter.active[data-filter=Basic] .cata-color,
.area-buiding .key-status-list .key-status-list-content .item-filter:hover[data-filter=Basic] .cata-color,
.area-floor .floors-list .floors-list-content .item-filter.active[data-filter=Basic] .cata-color,
.area-floor .floors-list .floors-list-content .item-filter:hover[data-filter=Basic] .cata-color,
.area-floor .floors-list .key-status-list-content .item-filter.active[data-filter=Basic] .cata-color,
.area-floor .floors-list .key-status-list-content .item-filter:hover[data-filter=Basic] .cata-color,
.area-floor .key-status-list .floors-list-content .item-filter.active[data-filter=Basic] .cata-color,
.area-floor .key-status-list .floors-list-content .item-filter:hover[data-filter=Basic] .cata-color,
.area-floor .key-status-list .key-status-list-content .item-filter.active[data-filter=Basic] .cata-color,
.area-floor .key-status-list .key-status-list-content .item-filter:hover[data-filter=Basic] .cata-color {
  border: 1px #6e91cb solid;
  background: #6e91cb;
}
.area-buiding .floors-list .floors-list-content .item-filter.active[data-filter=cuc] .cata-color, .area-buiding .floors-list .floors-list-content .item-filter:hover[data-filter=cuc] .cata-color,
.area-buiding .floors-list .key-status-list-content .item-filter.active[data-filter=cuc] .cata-color,
.area-buiding .floors-list .key-status-list-content .item-filter:hover[data-filter=cuc] .cata-color,
.area-buiding .key-status-list .floors-list-content .item-filter.active[data-filter=cuc] .cata-color,
.area-buiding .key-status-list .floors-list-content .item-filter:hover[data-filter=cuc] .cata-color,
.area-buiding .key-status-list .key-status-list-content .item-filter.active[data-filter=cuc] .cata-color,
.area-buiding .key-status-list .key-status-list-content .item-filter:hover[data-filter=cuc] .cata-color,
.area-floor .floors-list .floors-list-content .item-filter.active[data-filter=cuc] .cata-color,
.area-floor .floors-list .floors-list-content .item-filter:hover[data-filter=cuc] .cata-color,
.area-floor .floors-list .key-status-list-content .item-filter.active[data-filter=cuc] .cata-color,
.area-floor .floors-list .key-status-list-content .item-filter:hover[data-filter=cuc] .cata-color,
.area-floor .key-status-list .floors-list-content .item-filter.active[data-filter=cuc] .cata-color,
.area-floor .key-status-list .floors-list-content .item-filter:hover[data-filter=cuc] .cata-color,
.area-floor .key-status-list .key-status-list-content .item-filter.active[data-filter=cuc] .cata-color,
.area-floor .key-status-list .key-status-list-content .item-filter:hover[data-filter=cuc] .cata-color {
  border: 1px #a7bde1 solid;
  background: #a7bde1;
}
.area-buiding .floors-list .floors-list-content .item-filter.active[data-filter=Lifestyle] .cata-color, .area-buiding .floors-list .floors-list-content .item-filter:hover[data-filter=Lifestyle] .cata-color,
.area-buiding .floors-list .key-status-list-content .item-filter.active[data-filter=Lifestyle] .cata-color,
.area-buiding .floors-list .key-status-list-content .item-filter:hover[data-filter=Lifestyle] .cata-color,
.area-buiding .key-status-list .floors-list-content .item-filter.active[data-filter=Lifestyle] .cata-color,
.area-buiding .key-status-list .floors-list-content .item-filter:hover[data-filter=Lifestyle] .cata-color,
.area-buiding .key-status-list .key-status-list-content .item-filter.active[data-filter=Lifestyle] .cata-color,
.area-buiding .key-status-list .key-status-list-content .item-filter:hover[data-filter=Lifestyle] .cata-color,
.area-floor .floors-list .floors-list-content .item-filter.active[data-filter=Lifestyle] .cata-color,
.area-floor .floors-list .floors-list-content .item-filter:hover[data-filter=Lifestyle] .cata-color,
.area-floor .floors-list .key-status-list-content .item-filter.active[data-filter=Lifestyle] .cata-color,
.area-floor .floors-list .key-status-list-content .item-filter:hover[data-filter=Lifestyle] .cata-color,
.area-floor .key-status-list .floors-list-content .item-filter.active[data-filter=Lifestyle] .cata-color,
.area-floor .key-status-list .floors-list-content .item-filter:hover[data-filter=Lifestyle] .cata-color,
.area-floor .key-status-list .key-status-list-content .item-filter.active[data-filter=Lifestyle] .cata-color,
.area-floor .key-status-list .key-status-list-content .item-filter:hover[data-filter=Lifestyle] .cata-color {
  border: 1px #80ccbc solid;
  background: #80ccbc;
}
.area-buiding .floors-list .floors-list-content .item-filter.active[data-filter=Villas] .cata-color, .area-buiding .floors-list .floors-list-content .item-filter:hover[data-filter=Villas] .cata-color,
.area-buiding .floors-list .key-status-list-content .item-filter.active[data-filter=Villas] .cata-color,
.area-buiding .floors-list .key-status-list-content .item-filter:hover[data-filter=Villas] .cata-color,
.area-buiding .key-status-list .floors-list-content .item-filter.active[data-filter=Villas] .cata-color,
.area-buiding .key-status-list .floors-list-content .item-filter:hover[data-filter=Villas] .cata-color,
.area-buiding .key-status-list .key-status-list-content .item-filter.active[data-filter=Villas] .cata-color,
.area-buiding .key-status-list .key-status-list-content .item-filter:hover[data-filter=Villas] .cata-color,
.area-floor .floors-list .floors-list-content .item-filter.active[data-filter=Villas] .cata-color,
.area-floor .floors-list .floors-list-content .item-filter:hover[data-filter=Villas] .cata-color,
.area-floor .floors-list .key-status-list-content .item-filter.active[data-filter=Villas] .cata-color,
.area-floor .floors-list .key-status-list-content .item-filter:hover[data-filter=Villas] .cata-color,
.area-floor .key-status-list .floors-list-content .item-filter.active[data-filter=Villas] .cata-color,
.area-floor .key-status-list .floors-list-content .item-filter:hover[data-filter=Villas] .cata-color,
.area-floor .key-status-list .key-status-list-content .item-filter.active[data-filter=Villas] .cata-color,
.area-floor .key-status-list .key-status-list-content .item-filter:hover[data-filter=Villas] .cata-color {
  border: 1px #dcdb98 solid;
  background: #dcdb98;
}
.area-buiding .floors-list .floors-list-content .item-filter .cata-color,
.area-buiding .floors-list .key-status-list-content .item-filter .cata-color,
.area-buiding .key-status-list .floors-list-content .item-filter .cata-color,
.area-buiding .key-status-list .key-status-list-content .item-filter .cata-color,
.area-floor .floors-list .floors-list-content .item-filter .cata-color,
.area-floor .floors-list .key-status-list-content .item-filter .cata-color,
.area-floor .key-status-list .floors-list-content .item-filter .cata-color,
.area-floor .key-status-list .key-status-list-content .item-filter .cata-color {
  display: inline-flex;
  width: 25px;
  height: 25px;
  border-radius: 2px;
  background: #ffffff;
}
.area-buiding .floors-list .floors-list-content .item-filter[data-filter="*"] .cata-color,
.area-buiding .floors-list .key-status-list-content .item-filter[data-filter="*"] .cata-color,
.area-buiding .key-status-list .floors-list-content .item-filter[data-filter="*"] .cata-color,
.area-buiding .key-status-list .key-status-list-content .item-filter[data-filter="*"] .cata-color,
.area-floor .floors-list .floors-list-content .item-filter[data-filter="*"] .cata-color,
.area-floor .floors-list .key-status-list-content .item-filter[data-filter="*"] .cata-color,
.area-floor .key-status-list .floors-list-content .item-filter[data-filter="*"] .cata-color,
.area-floor .key-status-list .key-status-list-content .item-filter[data-filter="*"] .cata-color {
  border: 1px #1e4141 solid;
}
.area-buiding .floors-list .floors-list-content .item-filter[data-filter=Basic] .cata-color,
.area-buiding .floors-list .key-status-list-content .item-filter[data-filter=Basic] .cata-color,
.area-buiding .key-status-list .floors-list-content .item-filter[data-filter=Basic] .cata-color,
.area-buiding .key-status-list .key-status-list-content .item-filter[data-filter=Basic] .cata-color,
.area-floor .floors-list .floors-list-content .item-filter[data-filter=Basic] .cata-color,
.area-floor .floors-list .key-status-list-content .item-filter[data-filter=Basic] .cata-color,
.area-floor .key-status-list .floors-list-content .item-filter[data-filter=Basic] .cata-color,
.area-floor .key-status-list .key-status-list-content .item-filter[data-filter=Basic] .cata-color {
  border: 1px #6e91cb solid;
}
.area-buiding .floors-list .floors-list-content .item-filter[data-filter=cuc] .cata-color,
.area-buiding .floors-list .key-status-list-content .item-filter[data-filter=cuc] .cata-color,
.area-buiding .key-status-list .floors-list-content .item-filter[data-filter=cuc] .cata-color,
.area-buiding .key-status-list .key-status-list-content .item-filter[data-filter=cuc] .cata-color,
.area-floor .floors-list .floors-list-content .item-filter[data-filter=cuc] .cata-color,
.area-floor .floors-list .key-status-list-content .item-filter[data-filter=cuc] .cata-color,
.area-floor .key-status-list .floors-list-content .item-filter[data-filter=cuc] .cata-color,
.area-floor .key-status-list .key-status-list-content .item-filter[data-filter=cuc] .cata-color {
  border: 1px #a7bde1 solid;
}
.area-buiding .floors-list .floors-list-content .item-filter[data-filter=Lifestyle] .cata-color,
.area-buiding .floors-list .key-status-list-content .item-filter[data-filter=Lifestyle] .cata-color,
.area-buiding .key-status-list .floors-list-content .item-filter[data-filter=Lifestyle] .cata-color,
.area-buiding .key-status-list .key-status-list-content .item-filter[data-filter=Lifestyle] .cata-color,
.area-floor .floors-list .floors-list-content .item-filter[data-filter=Lifestyle] .cata-color,
.area-floor .floors-list .key-status-list-content .item-filter[data-filter=Lifestyle] .cata-color,
.area-floor .key-status-list .floors-list-content .item-filter[data-filter=Lifestyle] .cata-color,
.area-floor .key-status-list .key-status-list-content .item-filter[data-filter=Lifestyle] .cata-color {
  border: 1px #80ccbc solid;
}
.area-buiding .floors-list .floors-list-content .item-filter[data-filter=Villas] .cata-color,
.area-buiding .floors-list .key-status-list-content .item-filter[data-filter=Villas] .cata-color,
.area-buiding .key-status-list .floors-list-content .item-filter[data-filter=Villas] .cata-color,
.area-buiding .key-status-list .key-status-list-content .item-filter[data-filter=Villas] .cata-color,
.area-floor .floors-list .floors-list-content .item-filter[data-filter=Villas] .cata-color,
.area-floor .floors-list .key-status-list-content .item-filter[data-filter=Villas] .cata-color,
.area-floor .key-status-list .floors-list-content .item-filter[data-filter=Villas] .cata-color,
.area-floor .key-status-list .key-status-list-content .item-filter[data-filter=Villas] .cata-color {
  border: 1px #dcdb98 solid;
}
@media (min-width: 768px) {
  .area-buiding .floors-list .floors-list-content .item-filter,
  .area-buiding .floors-list .key-status-list-content .item-filter,
  .area-buiding .key-status-list .floors-list-content .item-filter,
  .area-buiding .key-status-list .key-status-list-content .item-filter,
  .area-floor .floors-list .floors-list-content .item-filter,
  .area-floor .floors-list .key-status-list-content .item-filter,
  .area-floor .key-status-list .floors-list-content .item-filter,
  .area-floor .key-status-list .key-status-list-content .item-filter {
    font-size: 1.75rem;
  }
}
.area-buiding .floors-list .floors-list-content .title,
.area-buiding .floors-list .key-status-list-content .title,
.area-buiding .key-status-list .floors-list-content .title,
.area-buiding .key-status-list .key-status-list-content .title,
.area-floor .floors-list .floors-list-content .title,
.area-floor .floors-list .key-status-list-content .title,
.area-floor .key-status-list .floors-list-content .title,
.area-floor .key-status-list .key-status-list-content .title {
  display: none;
}
@media (min-width: 768px) {
  .area-buiding .floors-list .floors-list-content,
  .area-buiding .floors-list .key-status-list-content,
  .area-buiding .key-status-list .floors-list-content,
  .area-buiding .key-status-list .key-status-list-content,
  .area-floor .floors-list .floors-list-content,
  .area-floor .floors-list .key-status-list-content,
  .area-floor .key-status-list .floors-list-content,
  .area-floor .key-status-list .key-status-list-content {
    margin: 2rem;
    justify-content: space-between;
    max-width: 1450px;
    margin: auto;
  }
  .area-buiding .floors-list .floors-list-content ul,
  .area-buiding .floors-list .key-status-list-content ul,
  .area-buiding .key-status-list .floors-list-content ul,
  .area-buiding .key-status-list .key-status-list-content ul,
  .area-floor .floors-list .floors-list-content ul,
  .area-floor .floors-list .key-status-list-content ul,
  .area-floor .key-status-list .floors-list-content ul,
  .area-floor .key-status-list .key-status-list-content ul {
    display: flex;
  }
  .area-buiding .floors-list .floors-list-content ul li:not(:last-child),
  .area-buiding .floors-list .key-status-list-content ul li:not(:last-child),
  .area-buiding .key-status-list .floors-list-content ul li:not(:last-child),
  .area-buiding .key-status-list .key-status-list-content ul li:not(:last-child),
  .area-floor .floors-list .floors-list-content ul li:not(:last-child),
  .area-floor .floors-list .key-status-list-content ul li:not(:last-child),
  .area-floor .key-status-list .floors-list-content ul li:not(:last-child),
  .area-floor .key-status-list .key-status-list-content ul li:not(:last-child) {
    margin-right: 2rem;
  }
}
@media (max-width: 767px) {
  .area-buiding .floors-list .floors-list-content,
  .area-buiding .floors-list .key-status-list-content,
  .area-buiding .key-status-list .floors-list-content,
  .area-buiding .key-status-list .key-status-list-content,
  .area-floor .floors-list .floors-list-content,
  .area-floor .floors-list .key-status-list-content,
  .area-floor .key-status-list .floors-list-content,
  .area-floor .key-status-list .key-status-list-content {
    flex-direction: column;
  }
}
.area-buiding .floors-wrapper,
.area-floor .floors-wrapper {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
@media (min-width: 768px) {
  .area-buiding .floors-wrapper,
  .area-floor .floors-wrapper {
    margin: auto;
  }
}
.area-buiding .floors-wrapper .floor-img,
.area-buiding .floors-wrapper .floors-svg svg,
.area-floor .floors-wrapper .floor-img,
.area-floor .floors-wrapper .floors-svg svg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  object-fit: contain;
}
.area-buiding .floors-wrapper .floors-svg svg path,
.area-floor .floors-wrapper .floors-svg svg path {
  opacity: 0.25;
}

.area-floor .circle {
  fill: red;
  stroke: black;
}
.area-floor .text {
  font-family: Arial, sans-serif;
  font-size: 12px;
  text-anchor: middle;
  fill: black;
}
.area-floor .apt-code {
  stroke: #707070;
  stroke-width: 1;
  opacity: 0;
  transition: opacity 0.5s;
}
.area-floor g[data-status=Available] .apt-code,
.area-floor g[data-status=available] .apt-code,
.area-floor g[data-status=Available].active .apt-code,
.area-floor g[data-status=available].active .apt-code {
  fill: #05ff00;
}
.area-floor g[data-status=Available] .text,
.area-floor g[data-status=available] .text,
.area-floor g[data-status=Available].active .text,
.area-floor g[data-status=available].active .text {
  fill: #ffffff;
}
.area-floor g[data-status=Available] .circle,
.area-floor g[data-status=available] .circle,
.area-floor g[data-status=Available].active .circle,
.area-floor g[data-status=available].active .circle {
  stroke: #05ff00;
  fill: #05ff00;
}
.area-floor g[data-status=Sold] .apt-code,
.area-floor g[data-status=Deposit] .apt-code,
.area-floor g[data-status=sold] .apt-code,
.area-floor g[data-status=Deposit] .apt-code,
.area-floor g[data-status=Sold].active .apt-code,
.area-floor g[data-status=Deposit].active .apt-code,
.area-floor g[data-status=sold].active .apt-code,
.area-floor g[data-status=deposit].active .apt-code {
  fill: red;
}
.area-floor g[data-status=Sold] .text,
.area-floor g[data-status=Deposit] .text,
.area-floor g[data-status=sold] .text,
.area-floor g[data-status=Deposit] .text,
.area-floor g[data-status=Sold].active .text,
.area-floor g[data-status=Deposit].active .text,
.area-floor g[data-status=sold].active .text,
.area-floor g[data-status=deposit].active .text {
  fill: #ffffff;
}
.area-floor g[data-status=Sold] .circle,
.area-floor g[data-status=Deposit] .circle,
.area-floor g[data-status=sold] .circle,
.area-floor g[data-status=Deposit] .circle,
.area-floor g[data-status=Sold].active .circle,
.area-floor g[data-status=Deposit].active .circle,
.area-floor g[data-status=sold].active .circle,
.area-floor g[data-status=deposit].active .circle {
  stroke: red;
  fill: red;
}
.area-floor g[data-status=Hold] .apt-code,
.area-floor g[data-status=hold] .apt-code,
.area-floor g[data-status=Hold].active .apt-code,
.area-floor g[data-status=hold].active .apt-code,
.area-floor g[data-status=Underoffer] .apt-code,
.area-floor g[data-status=underoffer] .apt-code,
.area-floor g[data-status=Underoffer].active .apt-code,
.area-floor g[data-status=underoffer].active .apt-code {
  fill: #ffb800;
}
.area-floor g[data-status=Hold] .text,
.area-floor g[data-status=hold] .text,
.area-floor g[data-status=Hold].active .text,
.area-floor g[data-status=hold].active .text,
.area-floor g[data-status=Underoffer] .text,
.area-floor g[data-status=underoffer] .text,
.area-floor g[data-status=Underoffer].active .text,
.area-floor g[data-status=underoffer].active .text {
  fill: #ffffff;
}
.area-floor g[data-status=Hold] .circle,
.area-floor g[data-status=hold] .circle,
.area-floor g[data-status=Hold].active .circle,
.area-floor g[data-status=hold].active .circle,
.area-floor g[data-status=Underoffer] .circle,
.area-floor g[data-status=underoffer] .circle,
.area-floor g[data-status=Underoffer].active .circle,
.area-floor g[data-status=underoffer].active .circle {
  stroke: #ffb800;
  fill: #ffb800;
}
.area-floor .action-group:hover:hover .apt-code, .area-floor .action-group:hover.active .apt-code,
.area-floor .apt-link:hover .apt-code,
.area-floor .apt-link.active .apt-code {
  opacity: 0.6;
}
.area-floor .action-group:hover:hover .text, .area-floor .action-group:hover.active .text,
.area-floor .apt-link:hover .text,
.area-floor .apt-link.active .text {
  fill: #ffffff;
}

.detail .area-apartment {
  background: #fff3dc;
}
@media (min-width: 1200px) {
  .detail .area-apartment {
    margin: 10% 5% 5% 5%;
  }
}
.detail .nav-tabs {
  display: flex;
  justify-content: space-between;
}
@media (min-width: 1200px) {
  .detail .btn-back {
    position: absolute;
    left: 0;
    top: 0;
  }
}
@media (max-width: 1200px) {
  .detail .btn-back {
    margin-bottom: 0.75rem;
  }
}
.detail .parameter {
  font-size: 2.5rem;
}
.detail .parameter .small {
  font-size: 50%;
}
.detail .compass img {
  height: 50px;
}
.detail .action-group {
  max-width: 400px;
  padding-bottom: 5%;
}
.detail .action-group .btn {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.detail .action-group .btn:nth-child(2) {
  margin-left: 0.5rem;
}

.setTopMasterplan .masterplan-page #toggleButtonHideInfoType.toggle-btn.active {
  top: calc(50% - 5px);
}

.masterplan-page {
  background: #00504b;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="$cuc", endColorstr="#ebe0fa", GradientType=1);
}
.masterplan-page .toggle-btn {
  position: absolute;
  z-index: 3;
  right: -40px;
  bottom: 0;
  width: 40px;
  height: 40px;
  background: #00504B;
  border: 1px #00504B solid;
  color: #00504B !important;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.5s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.masterplan-page .toggle-btn.active {
  right: -40px;
  border: 1px #ffffff solid;
}
.masterplan-page .toggle-btn:hover {
  border: 1px #ffffff solid;
}
.masterplan-page .toggle-btn .toggle-icon {
  font-size: 22px;
  transition: transform 0.3s ease-in-out;
}
.masterplan-page #toggleButtonHideDetailLot.toggle-btn {
  top: 1rem;
  left: unset;
  right: 1rem;
  transform: unset;
}
.masterplan-page #toggleButtonHideInfoType.toggle-btn {
  top: calc(50% - 155px);
  left: unset;
  transform: unset;
  right: -2px;
  z-index: 10050;
}
.masterplan-page #toggleButtonHideInfoType.toggle-btn.active {
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .masterplan-page #toggleButtonHideInfoType.toggle-btn.active {
    top: calc(50% - 5px);
  }
}
.masterplan-page #toggleButtonHideInfoType.toggle-btn.expand-btn {
  top: -38px;
  transform: unset;
}
@media (max-width: 767px) and (orientation: landscape) {
  .masterplan-page #toggleButtonHideInfoType.toggle-btn.expand-btn {
    top: 0;
    right: -15px;
  }
}
.masterplan-page .heading {
  margin-top: 50px;
}
.masterplan-page .info-box {
  position: relative;
}
.masterplan-page .masterplan-filter {
  position: fixed;
  right: 0;
  top: 50%;
  width: 340px;
  margin: 0.25rem 1rem;
  transition: right 0.5s ease;
  z-index: 9999;
  backdrop-filter: blur(10px);
  background: #ffffff;
  border-radius: 10px;
}
.masterplan-page .masterplan-filter.show {
  transform: translate(0, -50%);
}
.masterplan-page .masterplan-filter.less {
  max-width: 0;
  transform: translate(0, -50%);
}
@media (max-width: 767px) and (orientation: landscape) {
  .masterplan-page .masterplan-filter {
    width: 95%;
  }
  .masterplan-page .masterplan-filter .inner {
    font-size: 12px;
  }
}
.masterplan-page .masterplan-filter .inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 14px;
  color: #1e4141;
  padding: 1rem;
  overflow: hidden;
}
.masterplan-page .masterplan-filter ul {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.masterplan-page .masterplan-filter ul li {
  display: flex;
  margin-right: 10px;
  align-items: center;
}
.masterplan-page .masterplan-filter ul li .color {
  margin-right: 8px;
  width: 14px;
  height: 14px;
  border: 2px solid white;
  display: block;
}
.masterplan-page .masterplan-filter ul.category {
  display: grid;
  grid-template-columns: 22% 25% 25% 25%;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
@media (max-width: 767px) and (orientation: landscape) {
  .masterplan-page .masterplan-filter ul.category {
    display: flex;
  }
}
.masterplan-page .masterplan-filter ul.category .color {
  border-radius: 100%;
  border: 2px solid;
  padding: 5px;
  transition: all 0.2s ease-in-out;
}
.masterplan-page .masterplan-filter ul.category li {
  background-color: transparent;
  cursor: pointer;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=all] .color {
  border-color: #00504B;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=all].active .color, .masterplan-page .masterplan-filter ul.category li[data-filter=all]:hover .color {
  background-color: #00504B;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=tung] .color {
  border-color: #6e91cb;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=tung].active .color, .masterplan-page .masterplan-filter ul.category li[data-filter=tung]:hover .color {
  background-color: #6e91cb;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=cuc] .color {
  border-color: #a7bde1;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=cuc].active .color, .masterplan-page .masterplan-filter ul.category li[data-filter=cuc]:hover .color {
  background-color: #a7bde1;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=truc] .color {
  border-color: #80ccbc;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=truc].active .color, .masterplan-page .masterplan-filter ul.category li[data-filter=truc]:hover .color {
  background-color: #80ccbc;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=mai] .color {
  border-color: #b4dfd6;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=mai].active .color, .masterplan-page .masterplan-filter ul.category li[data-filter=mai]:hover .color {
  background-color: #b4dfd6;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=gio] .color {
  border-color: #ea536e;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=gio].active .color, .masterplan-page .masterplan-filter ul.category li[data-filter=gio]:hover .color {
  background-color: #ea536e;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=may] .color {
  border-color: #f596a7;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=may].active .color, .masterplan-page .masterplan-filter ul.category li[data-filter=may]:hover .color {
  background-color: #f596a7;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=nang] .color {
  border-color: #f9bfc6;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=nang].active .color, .masterplan-page .masterplan-filter ul.category li[data-filter=nang]:hover .color {
  background-color: #f9bfc6;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=phu] .color {
  border-color: #ebdbc8;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=phu].active .color, .masterplan-page .masterplan-filter ul.category li[data-filter=phu]:hover .color {
  background-color: #ebdbc8;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=thinh] .color {
  border-color: #f6b76e;
}
.masterplan-page .masterplan-filter ul.category li[data-filter=thinh].active .color, .masterplan-page .masterplan-filter ul.category li[data-filter=thinh]:hover .color {
  background-color: #f6b76e;
}
.masterplan-page .masterplan-filter ul.status .all .color {
  border: 1px #00504B solid;
}
.masterplan-page .masterplan-filter ul.status .available .color {
  border: 1px #7efd10 solid;
}
.masterplan-page .masterplan-filter ul.status .hold .color {
  border: 1px #ffe807 solid;
}
.masterplan-page .masterplan-filter ul.status .sold .color,
.masterplan-page .masterplan-filter ul.status .deposit .color {
  border: 1px #ff0000 solid;
}
.masterplan-page .masterplan-filter ul.status .color {
  border-radius: 50%;
}
.masterplan-page .masterplan-filter ul.status li[data-status=all].active .color, .masterplan-page .masterplan-filter ul.status li[data-status=all]:hover .color {
  background-color: #00504B !important;
  border: 1px #00504B solid;
}
.masterplan-page .masterplan-filter ul.status li[data-status=available].active .color, .masterplan-page .masterplan-filter ul.status li[data-status=available]:hover .color {
  background-color: #7efd10 !important;
  border: 1px #7efd10 solid;
}
.masterplan-page .masterplan-filter ul.status li[data-status=sold].active .color, .masterplan-page .masterplan-filter ul.status li[data-status=sold]:hover .color,
.masterplan-page .masterplan-filter ul.status li[data-status=deposit].active .color,
.masterplan-page .masterplan-filter ul.status li[data-status=deposit]:hover .color {
  background-color: #ff0000 !important;
  border: 1px #ff0000 solid;
}
.masterplan-page .masterplan-filter ul.status li[data-status=hold].active .color, .masterplan-page .masterplan-filter ul.status li[data-status=hold]:hover .color {
  background-color: #ffe807 !important;
}
.masterplan-page .masterplan-filter .toggle-button {
  margin-top: 15px;
  padding: 0;
  font-size: 20px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.masterplan-page .masterplan-filter .toggle-button .icon {
  display: inline-block;
  transition: transform 0.3s ease;
}
.masterplan-page .masterplan-filter .toggle-button.expanded .icon, .masterplan-page .masterplan-filter .toggle-button.open .icon {
  transform: rotate(180deg);
  height: 25px;
  margin-bottom: 2px;
}
.masterplan-page .masterplan-filter .toggle-button:hover {
  color: #96826E;
  mix-blend-mode: multiply;
}
.masterplan-page .masterplan-filter .type-info {
  max-height: 600px;
  margin: 5px auto;
  opacity: 1;
  transition: max-height, opacity 0s ease;
}
@media (max-height: 700px) {
  .masterplan-page .masterplan-filter .type-info {
    max-height: 300px;
    overflow: auto;
  }
}
@media (max-height: 700px) and (min-width: 992px) {
  .masterplan-page .masterplan-filter .type-info:not(.hide) .box {
    padding-bottom: 60px;
    max-height: unset;
  }
}
.masterplan-page .masterplan-filter .type-info.hide {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  transition: max-height 0.5s ease, opacity 0s linear;
}
@media (max-width: 991px) {
  .masterplan-page .masterplan-filter .type-info .box {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
@media (min-width: 992px) {
  .masterplan-page .masterplan-filter .type-info .box {
    max-height: 495px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
.masterplan-page .masterplan-filter .type-info .box .housing-type-section .heading {
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 0;
  line-height: normal;
}
.masterplan-page .masterplan-filter .type-info .box .housing-type-section .zone-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.masterplan-page .masterplan-filter .type-info .box .housing-type-section .lable {
  font-size: 10px;
  font-weight: bold;
}
.masterplan-page .masterplan-filter .type-info .box .housing-type-section .info-box .zone-title {
  padding: 0.25rem;
  border-radius: 4px;
  color: #ffffff;
}
.masterplan-page .masterplan-filter .type-info .box .housing-type-section .info-box.info-tung .zone-title {
  background-color: #6e91cb;
  margin-bottom: 0;
}
.masterplan-page .masterplan-filter .type-info .box .housing-type-section .info-box.info-cuc .zone-title {
  background-color: #a7bde1;
}
.masterplan-page .masterplan-filter .type-info .box .housing-type-section .info-box.info-truc .zone-title {
  background-color: #80ccbc;
}
.masterplan-page .masterplan-filter .type-info .box .housing-type-section .info-box.info-mai .zone-title {
  background-color: #b4dfd6;
}
.masterplan-page .masterplan-filter .type-info .box .housing-type-section .info-box.info-gio .zone-title {
  background-color: #ea536e;
}
.masterplan-page .masterplan-filter .type-info .box .housing-type-section .info-box.info-may .zone-title {
  background-color: #f596a7;
}
.masterplan-page .masterplan-filter .type-info .box .housing-type-section .info-box.info-nang .zone-title {
  background-color: #f9bfc6;
}
.masterplan-page .masterplan-filter .type-info .box .housing-type-section .info-box.info-phu .zone-title {
  background-color: #ebdbc8;
}
.masterplan-page .masterplan-filter .type-info .box .housing-type-section .info-box.info-thinh .zone-title {
  background-color: #f6b76e;
}
.masterplan-page .masterplan-filter .type-info .box .housing-type-section .img-thumb img {
  width: 40px;
  height: auto;
}
.masterplan-page .masterplan-filter .type-info .box .housing-type-section .row * {
  font-size: 9px;
}
.masterplan-page .masterplan-filter .type-info .box .housing-type-section .room {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
.masterplan-page .masterplan-main-filter {
  position: fixed;
  left: 0;
  bottom: calc(var(--header-height) + 15px);
  width: 300px;
  z-index: 10360;
  transform: translate(-100%, 0);
  transition: transform 0.7s cubic-bezier(0.3, 0, 0, 1);
}
.masterplan-page .masterplan-main-filter.active {
  transform: translate(0, 0);
}
.masterplan-page .masterplan-main-filter .toggle-btn {
  position: absolute;
  z-index: 3;
  right: -40px;
  bottom: 0;
  width: 40px;
  height: 40px;
  background: #00504B;
  border: 1px #00504B solid;
  color: #00504B !important;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.5s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.masterplan-page .masterplan-main-filter .toggle-btn.active {
  right: -40px;
  border: 1px #ffffff solid;
}
.masterplan-page .masterplan-main-filter .toggle-btn:hover {
  border: 1px #ffffff solid;
}
.masterplan-page .masterplan-main-filter .toggle-btn .toggle-icon {
  font-size: 22px;
  transition: transform 0.3s ease-in-out;
}
.masterplan-page .masterplan-main-filter .toggle-btn.active .toggle-icon i {
  transform: rotate(180deg);
}
.masterplan-page .masterplan-main-filter .box-filter {
  position: relative;
  background: #00504B;
}
.masterplan-page .masterplan-main-filter .box-filter *:not(.btn) {
  color: #ffffff;
}
.masterplan-page .masterplan-main-filter .box-filter .btn-outline-primary {
  border-color: #ffffff;
  color: #ffffff;
}
.masterplan-page .masterplan-main-filter .box-filter .btn-primary {
  border-color: #ffffff;
  color: #00504B;
  background: #B4C8C8;
}
.masterplan-page .masterplan-main-filter .box-filter .form-select {
  background: transparent;
  transition: none !important;
  border: none;
  border-bottom: 1px #ffffff solid;
  color: #ffffff;
}
.masterplan-page .masterplan-main-filter .box-filter .form-input {
  border-bottom: 1px #ffffff solid;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter {
  padding: 1rem;
  font-size: 15px;
  max-height: var(--body-height);
  overflow-y: auto;
  overflow-x: hidden;
}
@media (max-height: 800px) and (orientation: landscape) {
  .masterplan-page .masterplan-main-filter .box-filter .wrap-filter {
    overflow: auto;
  }
}
@media (max-height: 600px) and (orientation: landscape) {
  .masterplan-page .masterplan-main-filter .box-filter .wrap-filter {
    overflow: auto;
  }
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .title {
  text-align: left;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner #toggleMoreFilter.active .toggle-icon {
  transform: rotate(-180deg);
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .expanded {
  margin: 5px auto;
  transition: max-height 0.05s ease, opacity 0.05s ease;
  opacity: 1;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .expanded.hide {
  opacity: 0;
  max-height: 0;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old {
  display: grid;
  grid-template-columns: 35% 65%;
  align-items: center;
  gap: 1rem;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old .form-input,
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old .form-select {
  padding: 5px 0;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old .key-input {
  max-width: calc(100% - 1rem);
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.w-100 {
  grid-template-columns: 100%;
  margin-bottom: 1.5rem;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old:not(.form-group) {
  margin-top: 15px;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old:not(.form-group) .form-label {
  margin-bottom: -2px;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .form-label {
  margin-bottom: -5px;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .form-select {
  max-width: calc(100% - 1rem);
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .form-select.js-select-dropdown {
  display: none;
  background-color: #00504B !important;
  color: #ffffff;
  border-top: none;
  padding: 6px 32px 6px 10px;
  border: none;
  border-bottom: 1px solid white;
  -webkit-appearance: none;
  cursor: pointer;
  /* icon mũi tên trắng custom */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  color-scheme: only light;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .form-select.js-select-dropdown option {
  background-color: #00504B;
  color: #ffffff;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .form-select.js-select-dropdown:hover, .masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .form-select.js-select-dropdown:focus {
  background-image: none !important;
  background-color: #6E9696 !important;
  border-color: #B4C8C8;
  outline: none;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .hs-wrapper {
  width: 90%;
  position: relative;
  display: inline-block;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .hs-wrapper .hs-trigger {
  background-color: #00504B;
  color: #ffffff;
  border-bottom: 1px solid white;
  border-top: none;
  border-left: none;
  border-right: none;
  padding: 6px 32px 6px 10px;
  cursor: pointer;
  /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;*/
  user-select: none;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .hs-wrapper .hs-trigger::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #fff;
  transition: transform 0.2s;
  pointer-events: none;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .hs-wrapper .hs-trigger.is-open::after {
  transform: translateY(-50%) rotate(180deg);
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .hs-wrapper .hs-trigger:hover, .masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .hs-wrapper .hs-trigger.is-focus {
  background-color: #6E9696;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .hs-wrapper .hs-trigger:hover, .masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .hs-wrapper .hs-trigger.is-focus {
  background-image: none !important;
  background-color: transparent !important;
  border-color: #B4C8C8;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .hs-wrapper .hs-trigger.is-open {
  background-color: #6E9696;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .hs-wrapper .hs-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  background: #6E9696;
  max-height: 325px;
  overflow: auto;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .hs-wrapper .hs-dropdown.is-show {
  display: block !important;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .hs-wrapper .hs-dropdown .hs-option {
  background-color: #6E9696;
  color: #ffffff;
  padding: 6px 10px;
  cursor: pointer;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .hs-wrapper .hs-dropdown .hs-option:not(:last-child) {
  border-bottom: 1px rgba(255, 255, 255, 0.25) solid;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .hs-wrapper .hs-dropdown .hs-option:hover {
  background-color: #6E9696;
  color: #00504B;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .hs-wrapper .hs-dropdown .hs-option.is-selected {
  background-color: #6E9696;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .select2-container--bootstrap-5 {
  max-width: calc(100% - 1rem);
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .select2-container--bootstrap-5 .select2-selection--single {
  background-position: right 0 center !important;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .select2-container--bootstrap-5 .select2-selection {
  min-height: calc(1.05em + 1rem + 2px);
  padding: 0.25rem 0 0.5rem;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter-old.form-group .select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter {
  margin-bottom: 0.5rem;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter .form-label {
  display: block;
  margin-bottom: 0.25rem;
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .filter-option-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .filter-option {
  margin: 0;
  background: transparent;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .filter-option input {
  display: none;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .filter-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 36px;
  padding: 0 5px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: 0.25s;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .filter-option:hover span {
  border-color: #ffffff;
  color: #ffffff;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .filter-option input:checked + span {
  background: #ffffff;
  color: #00504B;
  border-color: #ffffff;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter .form-input {
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #ffffff;
  padding: 0;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter .form-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .filter-box .inner .item-filter .form-input:focus {
  outline: none;
  border-color: #ffffff;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .slider-group {
  margin-bottom: 0;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .noUi-horizontal {
  height: 1px;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .noUi-target {
  background-color: #ffffff;
  border-radius: 4px;
  border: none;
  box-shadow: none;
  max-width: 90%;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .noUi-connect {
  background-color: #00504B;
  height: 1px;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .noUi-tooltip {
  background: none;
  color: #00504B;
  font-size: 0.75rem;
  padding: 2px 6px;
  white-space: nowrap;
  border: none;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .noUi-handle {
  width: 14px;
  height: 14px;
  top: -7px;
  right: -6px;
  border-radius: 50%;
  background-color: #00504B;
  border: 2px solid white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .noUi-handle::before, .masterplan-page .masterplan-main-filter .box-filter .wrap-filter .noUi-handle::after {
  display: none;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .label-range {
  margin-top: -30px;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .label-range.max-label {
  padding-right: 10px;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .result-box .clicktolot,
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .result-box .detailsLot,
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .result-box .text-right {
  cursor: pointer;
}
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .result-box .clicktolot:hover,
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .result-box .detailsLot:hover,
.masterplan-page .masterplan-main-filter .box-filter .wrap-filter .result-box .text-right:hover {
  color: white;
}
.masterplan-page .masterplan-main-filter .filter-option-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.masterplan-page .masterplan-main-filter .filter-option {
  display: block;
  margin: 0;
  cursor: pointer;
  border: 1px solid rgba(0, 80, 75, 0.2);
  border-radius: 0;
  background: #ffffff;
  transition: 0.25s;
}
.masterplan-page .masterplan-main-filter .filter-option input {
  display: none;
}
.masterplan-page .masterplan-main-filter .filter-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 38px;
  padding: 0 0.9rem;
  color: #00504B;
  font-weight: 500;
  user-select: none;
  transition: inherit;
}
.masterplan-page .masterplan-main-filter .filter-option:hover {
  border-color: #00504B;
}
.masterplan-page .masterplan-main-filter .filter-option:hover span {
  color: #00504B;
}
.masterplan-page .masterplan-main-filter .filter-option:has(input:checked) {
  background: #00504B;
  border-color: #00504B;
}
.masterplan-page .masterplan-main-filter .filter-option:has(input:checked) span {
  color: #ffffff;
}
.masterplan-page .masterplan-main-filter .filter-option:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 767px) and (orientation: landscape) {
  .masterplan-page .masterplan-filter .inner {
    max-height: 90vh;
    font-size: 12px;
  }
  .masterplan-page .masterplan-filter .toggle-button {
    overflow: unset;
  }
}
@media (max-width: 991px) {
  .masterplan-page .logo {
    margin-top: 0px;
  }
  .masterplan-page .logo img {
    width: 198px;
    margin-left: auto;
    margin-right: auto;
  }
  .masterplan-page .mobile-break {
    display: block;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .masterplan-page .masterplan-filter .inner {
    display: block;
    max-height: 80vh;
  }
  .masterplan-page .masterplan-filter .inner ul li {
    margin-left: 15px;
  }
}

.masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top, .masterplan-overview .masterplan-overview-nav .action-group.action-top {
  position: fixed;
  background: transparent;
  border: none;
  z-index: 1050;
  top: var(--offset-top);
  left: 0;
  width: 300px;
}
@media (max-width: 991px) {
  .masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top, .masterplan-overview .masterplan-overview-nav .action-group.action-top {
    width: 220px;
  }
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top .toggle-btn-category, .masterplan-overview .masterplan-overview-nav .action-group.action-top .toggle-btn-category {
  position: absolute;
  top: 0;
  transform: translateY(0);
  width: 40px;
  height: 40px;
  background-color: #00504B;
  color: #ffffff;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 3px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  font-size: 18px;
  transition: background 0.3s ease, left 0.3s ease;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top .toggle-btn-category:not(.active), .masterplan-overview .masterplan-overview-nav .action-group.action-top .toggle-btn-category:not(.active) {
  left: 0;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top .toggle-btn-category.active, .masterplan-overview .masterplan-overview-nav .action-group.action-top .toggle-btn-category.active {
  left: 302px;
}
@media (max-width: 991px) {
  .masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top .toggle-btn-category.active, .masterplan-overview .masterplan-overview-nav .action-group.action-top .toggle-btn-category.active {
    left: 222px;
  }
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top .toggle-btn-category i, .masterplan-overview .masterplan-overview-nav .action-group.action-top .toggle-btn-category i,
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top .toggle-btn-category .fa,
.masterplan-overview .masterplan-overview-nav .action-group.action-top .toggle-btn-category .fa,
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top .toggle-btn-category .fas,
.masterplan-overview .masterplan-overview-nav .action-group.action-top .toggle-btn-category .fas {
  font-weight: 300 !important;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top .toggle-btn-category:hover, .masterplan-overview .masterplan-overview-nav .action-group.action-top .toggle-btn-category:hover {
  background-color: rgb(0, 54.5, 51.09375);
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top .toggle-btn-category .svg-btn-open, .masterplan-overview .masterplan-overview-nav .action-group.action-top .toggle-btn-category .svg-btn-open,
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top .toggle-btn-category .svg-btn-close,
.masterplan-overview .masterplan-overview-nav .action-group.action-top .toggle-btn-category .svg-btn-close {
  line-height: 1;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top .toggle-btn-category .svg-btn-open.hide, .masterplan-overview .masterplan-overview-nav .action-group.action-top .toggle-btn-category .svg-btn-open.hide,
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top .toggle-btn-category .svg-btn-close.hide,
.masterplan-overview .masterplan-overview-nav .action-group.action-top .toggle-btn-category .svg-btn-close.hide {
  display: none;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top .toggle-btn-category .svg-btn-open.show, .masterplan-overview .masterplan-overview-nav .action-group.action-top .toggle-btn-category .svg-btn-open.show,
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top .toggle-btn-category .svg-btn-close.show,
.masterplan-overview .masterplan-overview-nav .action-group.action-top .toggle-btn-category .svg-btn-close.show {
  display: block;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top .accordion-button::after, .masterplan-overview .masterplan-overview-nav .action-group.action-top .accordion-button::after {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group.action-top .accordion-button.collapsed::after, .masterplan-overview .masterplan-overview-nav .action-group.action-top .accordion-button.collapsed::after {
  transform: rotate(0deg);
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category, .masterplan-overview .masterplan-overview-nav .action-group .list-category {
  position: relative;
  width: 100%;
  margin: 0;
  transition: transform 0.5s cubic-bezier(0.3, 0, 0, 1);
  transform: translateX(0);
  background: #00504b;
  padding: 0.5rem;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category.hide, .masterplan-overview .masterplan-overview-nav .action-group .list-category.hide {
  transform: translateX(-100%);
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category.show, .masterplan-overview .masterplan-overview-nav .action-group .list-category.show {
  transform: translateX(0);
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category *, .masterplan-overview .masterplan-overview-nav .action-group .list-category * {
  width: 100%;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category .accordion-item, .masterplan-overview .masterplan-overview-nav .action-group .list-category .accordion-item,
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category .accordion-button,
.masterplan-overview .masterplan-overview-nav .action-group .list-category .accordion-button {
  border-radius: 0 !important;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category .accordion-item .btn, .masterplan-overview .masterplan-overview-nav .action-group .list-category .accordion-item .btn,
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category .accordion-button .btn,
.masterplan-overview .masterplan-overview-nav .action-group .list-category .accordion-button .btn {
  text-align: left;
  color: #ffffff;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category .accordion-item, .masterplan-overview .masterplan-overview-nav .action-group .list-category .accordion-item {
  border-radius: 3px !important;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 0 !important;
  transition: all 0.2s ease-in-out;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category .accordion-item:not(:first-child), .masterplan-overview .masterplan-overview-nav .action-group .list-category .accordion-item:not(:first-child) {
  margin-top: 6px;
}
@media (max-width: 991px) {
  .masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category .accordion-item, .masterplan-overview .masterplan-overview-nav .action-group .list-category .accordion-item {
    margin-top: 4px;
  }
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category .accordion-item .btn, .masterplan-overview .masterplan-overview-nav .action-group .list-category .accordion-item .btn {
  height: auto;
  width: 100% !important;
  padding: 8px 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category .accordion-button, .masterplan-overview .masterplan-overview-nav .action-group .list-category .accordion-button {
  font-weight: 400;
  letter-spacing: 0.5px;
  border: none;
  box-shadow: none;
  padding: 10px 15px;
  text-align: left;
  justify-content: flex-start;
  transition: all 0.25s ease;
}
@media (max-width: 991px) {
  .masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category .accordion-button, .masterplan-overview .masterplan-overview-nav .action-group .list-category .accordion-button {
    padding: 10px 12px;
  }
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category .accordion-button:focus, .masterplan-overview .masterplan-overview-nav .action-group .list-category .accordion-button:focus {
  box-shadow: none;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category .accordion-body, .masterplan-overview .masterplan-overview-nav .action-group .list-category .accordion-body {
  padding: 10px 15px !important;
}
@media (max-width: 991px) {
  .masterplan-beach-villas .masterplan-beach-villas-nav .action-group .list-category .accordion-body, .masterplan-overview .masterplan-overview-nav .action-group .list-category .accordion-body {
    padding: 8px 12px !important;
  }
}

.masterplan-overview .overview-zones {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.masterplan-overview .overview-zones .masterplan-svg img,
.masterplan-overview .overview-zones .masterplan-svg svg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: 100%;
}
.masterplan-overview .overview-zones .masterplan-svg {
  position: relative;
}
.masterplan-overview.show {
  display: block;
}
.masterplan-overview.hide {
  display: none;
}
.masterplan-overview .point-group {
  cursor: pointer;
}
.masterplan-overview .map-point-group {
  cursor: pointer;
}
.masterplan-overview .map-point-group .map-point {
  transition: 0.25s;
}
.masterplan-overview .map-point-group:hover .map-point {
  fill: #E6F0F0;
}
.masterplan-overview .map-point-text {
  pointer-events: none;
}
.masterplan-overview .map-point-pulse {
  fill: #fff;
  stroke: #fff;
  opacity: 0.5;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulseCircle 2s ease-out infinite;
}
@keyframes pulseCircle {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  70% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.masterplan-beach-villas.hide .top-middle-nav .go-back-beach-villas {
  display: none;
}
.masterplan-beach-villas.hide .masterplan-beach-villas-nav,
.masterplan-beach-villas.hide .info-box {
  display: none;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .accordion-button::after {
  filter: invert(1) !important;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .item {
  border-radius: 3px !important;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 0 !important;
  transition: all 0.2s ease-in-out;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .accordion-header {
  background-color: transparent !important;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .accordion-header .accordion-button {
  background-color: transparent !important;
  text-align: left;
  color: white;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .btn {
  border-radius: 3px !important;
}
.masterplan-beach-villas .masterplan-beach-villas-nav .btn.active, .masterplan-beach-villas .masterplan-beach-villas-nav .btn:hover {
  background: transparent !important;
  border: 1px solid rgb(255, 255, 255) !important;
}
@media (max-height: 768px) {
  .masterplan-beach-villas .masterplan-beach-villas-nav #villasCategory .accordion-body {
    max-height: 300px;
    overflow-y: auto;
  }
}
.masterplan-beach-villas .masterplan-beach-villas-nav #golfCategory .accordion-header .accordion-button::after {
  display: none;
}
.masterplan-beach-villas .masterplan-beach-villas-nav #golfCategory.accordion-item,
.masterplan-beach-villas .masterplan-beach-villas-nav #hotelCategory.accordion-item {
  background-color: #00504B !important;
}
.mp-tooltip {
  position: absolute;
  background-color: #00504B;
  color: #fff;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
}
.mp-tooltip .tooltip-inner {
  background-color: #00504B;
  color: #fff;
}
.mp-tooltip .tooltip-arrow::before {
  border-color: transparent !important;
  border-top-color: #00504B !important;
}

body #ui-datepicker-div {
  border: none !important;
  background: transparent !important;
}

.zone-numb.show,
.masterplan-zone.show {
  display: block;
  z-index: 20;
}
.zone-numb.hide,
.masterplan-zone.hide {
  display: none;
}
.zone-numb .zone-name,
.masterplan-zone .zone-name {
  display: none;
}
.zone-numb .zone-stage .lot,
.masterplan-zone .zone-stage .lot {
  fill: rgba(235, 230, 220, 0.5);
}
.zone-numb .zone-stage .lot:hover,
.masterplan-zone .zone-stage .lot:hover {
  fill: rgba(180, 200, 200, 0.75);
}
.zone-numb .zone-stage .lot.active,
.masterplan-zone .zone-stage .lot.active {
  fill: #b4c8c8;
}
.zone-numb .zone-stage .wrapper-zone,
.masterplan-zone .zone-stage .wrapper-zone {
  fill-opacity: 0.5;
}
.zone-numb .zone-stage .wrapper-zone path,
.masterplan-zone .zone-stage .wrapper-zone path {
  fill: rgba(235, 230, 220, 0);
  stroke: #ebe6dc;
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zone-numb .zone-stage .wrapper-zone.active path,
.masterplan-zone .zone-stage .wrapper-zone.active path {
  fill: rgba(180, 200, 200, 0.5);
}
.zone-numb .zone-stage .wrapper-zone .stroke-glow-box,
.masterplan-zone .zone-stage .wrapper-zone .stroke-glow-box {
  fill: none;
  stroke: #E6F0F0;
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 4px #E6F0F0) drop-shadow(0 0 10px rgba(230, 240, 240, 0.6));
  opacity: 0.95;
}
.zone-numb .zone-stage:hover .wrapper-zone path, .zone-numb .zone-stage.active .wrapper-zone path,
.masterplan-zone .zone-stage:hover .wrapper-zone path,
.masterplan-zone .zone-stage.active .wrapper-zone path {
  fill: #b4c8c8;
}
.zone-numb .zone-stage.active .label-zone,
.zone-numb .zone-stage.active .label-bg,
.masterplan-zone .zone-stage.active .label-zone,
.masterplan-zone .zone-stage.active .label-bg {
  display: none;
}
.zone-numb .zone-stage:not(.active) .lot-info,
.masterplan-zone .zone-stage:not(.active) .lot-info {
  display: none !important;
}
.zone-numb #masterplanMap,
.masterplan-zone #masterplanMap {
  position: absolute;
  left: 0;
  top: 0;
  transition: top 0.3s ease;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}
.zone-numb #masterplanMap.hide,
.masterplan-zone #masterplanMap.hide {
  display: none;
  opacity: 0;
}
.zone-numb #masterplanMap .name-zone,
.masterplan-zone #masterplanMap .name-zone {
  position: relative;
}
.zone-numb #masterplanMap .name-zone .label-zone,
.masterplan-zone #masterplanMap .name-zone .label-zone {
  font-size: 35px;
  text-transform: uppercase;
}
.zone-numb #masterplanMap .name-zone .label-bg,
.masterplan-zone #masterplanMap .name-zone .label-bg {
  fill: #00504B;
}
.zone-numb #masterplanMap #zone1 .wrapper-zone,
.zone-numb #masterplanMap #zone2 .wrapper-zone,
.masterplan-zone #masterplanMap #zone1 .wrapper-zone,
.masterplan-zone #masterplanMap #zone2 .wrapper-zone {
  pointer-events: none !important;
  cursor: none !important;
  fill: rgba(235, 230, 220, 0) !important;
  stroke: #ebe6dc;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(1.5px) drop-shadow(0 0 4px #ebe6dc) drop-shadow(0 0 12px rgba(230, 240, 240, 0.6));
  opacity: 0.9;
}
.zone-numb #masterplanMap #zone1 .map-hotspot,
.zone-numb #masterplanMap #zone2 .map-hotspot,
.masterplan-zone #masterplanMap #zone1 .map-hotspot,
.masterplan-zone #masterplanMap #zone2 .map-hotspot {
  pointer-events: none !important;
}
.zone-numb #masterplanMap #zone9.active .lot,
.zone-numb #masterplanMap #zone15.active .lot,
.masterplan-zone #masterplanMap #zone9.active .lot,
.masterplan-zone #masterplanMap #zone15.active .lot {
  fill: rgba(180, 200, 200, 0.5);
}
.zone-numb #masterplanMap #zone9 .lot,
.zone-numb #masterplanMap #zone15 .lot,
.masterplan-zone #masterplanMap #zone9 .lot,
.masterplan-zone #masterplanMap #zone15 .lot {
  fill: rgba(235, 230, 220, 0);
  stroke: #ebe6dc;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(1.5px) drop-shadow(0 0 4px #ebe6dc) drop-shadow(0 0 12px rgba(230, 240, 240, 0.6));
  opacity: 0.9;
}
.zone-numb #masterplanMap #zone3 .clicktolot,
.zone-numb #masterplanMap #zone10 .clicktolot,
.zone-numb #masterplanMap #zone11 .clicktolot,
.zone-numb #masterplanMap #zone13 .clicktolot,
.masterplan-zone #masterplanMap #zone3 .clicktolot,
.masterplan-zone #masterplanMap #zone10 .clicktolot,
.masterplan-zone #masterplanMap #zone11 .clicktolot,
.masterplan-zone #masterplanMap #zone13 .clicktolot {
  pointer-events: none !important;
  cursor: none !important;
}

.masterplan-map .wrapper-floorplan .apt {
  transition: all 0.2s ease-in-out;
}
.masterplan-map .wrapper-floorplan .apt path,
.masterplan-map .wrapper-floorplan .apt rect,
.masterplan-map .wrapper-floorplan .apt polygon {
  opacity: 0.5;
  stroke: none;
}
.masterplan-map .wrapper-floorplan .apt path.active,
.masterplan-map .wrapper-floorplan .apt rect.active,
.masterplan-map .wrapper-floorplan .apt polygon.active {
  opacity: 1;
}
.masterplan-map .wrapper-floorplan .apt text {
  font-family: sans-serif;
  font-size: 12px;
}
.masterplan-map .wrapper-floorplan .apt circle {
  opacity: 0;
}
.masterplan-map .wrapper-floorplan .apt.active .available path,
.masterplan-map .wrapper-floorplan .apt.active .available rect,
.masterplan-map .wrapper-floorplan .apt.active .available polygon,
.masterplan-map .wrapper-floorplan .apt.active .hold path,
.masterplan-map .wrapper-floorplan .apt.active .hold rect,
.masterplan-map .wrapper-floorplan .apt.active .hold polygon,
.masterplan-map .wrapper-floorplan .apt.active .sold path,
.masterplan-map .wrapper-floorplan .apt.active .sold rect,
.masterplan-map .wrapper-floorplan .apt.active .sold polygon {
  opacity: 1;
}
.masterplan-map .wrapper-floorplan .apt.available {
  fill: #7efd10;
}
.masterplan-map .wrapper-floorplan .apt.available path,
.masterplan-map .wrapper-floorplan .apt.available rect,
.masterplan-map .wrapper-floorplan .apt.available polygon {
  fill: #7efd10;
  stroke-width: 1px;
}
.masterplan-map .wrapper-floorplan .apt.available circle {
  fill: #7efd10;
}
.masterplan-map .wrapper-floorplan .apt.available text {
  fill: #00504B;
}
.masterplan-map .wrapper-floorplan .apt.hold {
  fill: #ffe807;
}
.masterplan-map .wrapper-floorplan .apt.hold path,
.masterplan-map .wrapper-floorplan .apt.hold rect,
.masterplan-map .wrapper-floorplan .apt.hold polygon {
  fill: #ffe807;
  stroke-width: 1px;
}
.masterplan-map .wrapper-floorplan .apt.hold circle {
  fill: #ffe807;
}
.masterplan-map .wrapper-floorplan .apt.hold text {
  fill: #00504B;
}
.masterplan-map .wrapper-floorplan .apt.sold {
  fill: #ff0000;
}
.masterplan-map .wrapper-floorplan .apt.sold path,
.masterplan-map .wrapper-floorplan .apt.sold rect,
.masterplan-map .wrapper-floorplan .apt.sold polygon {
  fill: #ff0000;
  stroke-width: 1px;
}
.masterplan-map .wrapper-floorplan .apt.sold circle {
  fill: #ff0000;
}
.masterplan-map .wrapper-floorplan .apt.sold text {
  fill: #ffffff;
}
.masterplan-map .wrapper-floorplan .apt.none {
  fill: #dcdcdc;
}
.masterplan-map .wrapper-floorplan .apt.none path,
.masterplan-map .wrapper-floorplan .apt.none rect,
.masterplan-map .wrapper-floorplan .apt.none polygon {
  fill: #dcdcdc;
  stroke: white;
  stroke-width: 1px;
}
.masterplan-map .wrapper-floorplan .apt.none circle {
  fill: #dcdcdc;
}
.masterplan-map .wrapper-floorplan .apt.none text {
  fill: #00504B;
}

.masterplan-map {
  position: relative;
  height: 100vh;
  overflow: hidden;
  color: #00504b;
  overflow: hidden;
}
.masterplan-map .action-box {
  position: fixed;
  top: 0.75rem;
  left: 1rem;
  z-index: 1000;
}
.masterplan-map .action-box .btn {
  border: 2px #96826E solid;
}
.masterplan-map .svg-box {
  pointer-events: auto;
}
.masterplan-map .click-none {
  fill: #dcdcdc !important;
  stroke: rgba(255, 255, 255, 0.25);
  opacity: 1;
}
.masterplan-map .click-none .label.show {
  display: none !important;
}
.masterplan-map .click-none.label.show {
  display: none !important;
}
.masterplan-map .lot-info {
  cursor: pointer;
}
.masterplan-map .lot-info .label {
  opacity: 0;
}
.masterplan-map .lot-info .label.show {
  opacity: 1;
}
.masterplan-map .lot-info:hover path.lot,
.masterplan-map .lot-info:hover rect.lot,
.masterplan-map .lot-info:hover polygon.lot {
  opacity: 1;
}
.masterplan-map .lot-info.click-none {
  opacity: 1;
}
.masterplan-map .lot-info.click-none path.lot.priority[data-status],
.masterplan-map .lot-info.click-none polygon.lot.priority[data-status],
.masterplan-map .lot-info.click-none rect.lot.priority[data-status] {
  fill: #dcdcdc !important;
}
@keyframes fadeInLabel {
  to {
    opacity: 1;
  }
}
.masterplan-map .clicktolot.active path.lot.opacity-1,
.masterplan-map .clicktolot.active rect.lot.opacity-1,
.masterplan-map .clicktolot.active polygon.lot.opacity-1 {
  opacity: 1 !important;
}
.masterplan-map .clicktolot.active path.lot:hover,
.masterplan-map .clicktolot.active rect.lot:hover,
.masterplan-map .clicktolot.active polygon.lot:hover {
  opacity: 1;
}
.masterplan-map path.lot,
.masterplan-map rect.lot,
.masterplan-map polygon.lot {
  fill: #dcdcdc;
  stroke: #ffffff;
  opacity: 0.75;
}
.masterplan-map path.lot.opacity-light,
.masterplan-map rect.lot.opacity-light,
.masterplan-map polygon.lot.opacity-light {
  opacity: 0.25 !important;
}
.masterplan-map path.lot.priority.disabled,
.masterplan-map rect.lot.priority.disabled,
.masterplan-map polygon.lot.priority.disabled {
  fill: #dcdcdc !important;
}
.masterplan-map path.lot.priority.disabled[data-status],
.masterplan-map rect.lot.priority.disabled[data-status],
.masterplan-map polygon.lot.priority.disabled[data-status] {
  fill: #dcdcdc !important;
}
.masterplan-map path.lot.priority.active-status,
.masterplan-map rect.lot.priority.active-status,
.masterplan-map polygon.lot.priority.active-status {
  opacity: 1 !important;
}
.masterplan-map path.lot.priority.open.active,
.masterplan-map rect.lot.priority.open.active,
.masterplan-map polygon.lot.priority.open.active {
  opacity: 1 !important;
}
.masterplan-map path.lot.priority[data-status=available],
.masterplan-map rect.lot.priority[data-status=available],
.masterplan-map polygon.lot.priority[data-status=available] {
  fill: #7efd10 !important;
}
.masterplan-map path.lot.priority[data-status=sold], .masterplan-map path.lot.priority[data-status=deposit],
.masterplan-map rect.lot.priority[data-status=sold],
.masterplan-map rect.lot.priority[data-status=deposit],
.masterplan-map polygon.lot.priority[data-status=sold],
.masterplan-map polygon.lot.priority[data-status=deposit] {
  fill: #ff0000 !important;
}
.masterplan-map path.lot.priority[data-status=hold],
.masterplan-map rect.lot.priority[data-status=hold],
.masterplan-map polygon.lot.priority[data-status=hold] {
  fill: #ffe807 !important;
}
.masterplan-map path.lot.priority[data-status=none],
.masterplan-map rect.lot.priority[data-status=none],
.masterplan-map polygon.lot.priority[data-status=none] {
  fill: rgba(0, 80, 75, 0.3019607843) !important;
}
.masterplan-map .lot.open.active path,
.masterplan-map .lot.open.active polygon,
.masterplan-map .lot.open.active rect {
  opacity: 1 !important;
}
.masterplan-map .lot.click-none {
  opacity: 1;
}
.masterplan-map .lot.click-none .priority {
  fill: #dcdcdc !important;
}
.masterplan-map .lot.lot-info text {
  stroke: none;
}
.masterplan-map .lot[data-status] .lot {
  transition: all 0.1s ease-in-out !important;
}
.masterplan-map .lot[type] .lot {
  transition: all 0.5s ease-in-out !important;
}
.masterplan-map .lot[type=A] .lot {
  fill: #6e91cb;
}
.masterplan-map .lot[type=B] .lot {
  fill: #a7bde1;
}
.masterplan-map .lot[type=C] .lot {
  fill: #80ccbc;
}
.masterplan-map .lot[type=D] .lot {
  fill: #b4dfd6;
}
.masterplan-map .lot[type=E] .lot {
  fill: #ea536e;
}
.masterplan-map .lot[type=G] .lot {
  fill: #f596a7;
}
.masterplan-map .lot[type=nang] .lot {
  fill: #f9bfc6;
}
.masterplan-map .lot[type=phu] .lot {
  fill: #ebdbc8;
}
.masterplan-map .lot[type=thinh] .lot {
  fill: #f6b76e;
}
.masterplan-map .dot-status {
  fill: #dcdcdc;
  stroke: white;
  stroke-width: 1px;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.masterplan-map .dot-status.show {
  opacity: 0;
}
.masterplan-map .dot-status.available {
  fill: #7efd10;
}
.masterplan-map .dot-status.hold {
  fill: #ffe807;
}
.masterplan-map .dot-status.sold {
  fill: #ff0000;
}
.masterplan-map .clicktolot.active:hover {
  cursor: pointer;
}
.masterplan-map .leaflet-container {
  background: #00504B;
}
.masterplan-map .detail-lot {
  position: absolute;
  top: 50%;
  right: 0;
  width: 550px;
  max-width: 550px;
  transform: translate(100%, -50%);
  transition: transform 0.5s ease;
  z-index: 9999;
  backdrop-filter: blur(10px);
  background: #E6F0F0;
}
.masterplan-map .detail-lot.open {
  transform: translate(0, -50%);
}
.masterplan-map .detail-lot:not(.open) .back_button {
  left: 0;
}
.masterplan-map .detail-lot.less .back_button {
  left: -38px;
}
@media (max-width: 1400px) {
  .masterplan-map .detail-lot {
    width: 480px;
    max-width: 480px;
  }
}
.masterplan-map .detail-lot .head .title {
  font-size: 25px;
  text-transform: uppercase;
  margin-top: 25px;
  text-align: left;
}
.masterplan-map .detail-lot .body {
  height: 400px;
  padding: 30px;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.masterplan-map .detail-lot .body .inner-head {
  display: flex;
  justify-content: space-between;
}
.masterplan-map .detail-lot .body .number {
  font-size: 50px;
  font-family: "Boska", serif;
}
.masterplan-map .detail-lot .body .group-status {
  display: flex;
  align-items: center;
  margin: 15px 0;
}
.masterplan-map .detail-lot .body .group-status .status {
  width: auto;
  height: 30px;
  border-radius: 40px;
  color: white;
  font-size: 14px;
  letter-spacing: 1px;
  display: flex;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}
.masterplan-map .detail-lot .body .group-status .status.available {
  background: #7efd10;
}
.masterplan-map .detail-lot .body .group-status .status.hold {
  color: white;
  background: #ffe807;
}
.masterplan-map .detail-lot .body .group-status .status.sold {
  color: white;
  background: #ff0000;
}
.masterplan-map .detail-lot .body .group-status .status.none {
  display: none;
}
.masterplan-map .detail-lot .body .group-status .btn-edit {
  margin-left: 0.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 100%;
  background: #96826E;
}
.masterplan-map .detail-lot .body .group-status .btn-edit i {
  font-family: "Font Awesome 5 Pro" !important;
}
.masterplan-map .detail-lot .body .content {
  margin-top: 18px;
  margin-bottom: 30px;
  font-size: 14px;
  opacity: 0.5;
  line-height: 20px;
}
.masterplan-map .detail-lot .footer-t {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
}
@media (max-width: 1400px) {
  .masterplan-map .detail-lot .footer-t {
    gap: 0.5rem;
  }
}
@media (max-width: 991px) {
  .masterplan-map .detail-lot .footer-t {
    padding-bottom: 50px;
  }
}
.masterplan-map .detail-lot .footer-t > * {
  flex: 1 1 100%;
}
.masterplan-map .detail-lot .villa-spec-card .villa-spec-title {
  color: #00504B;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.masterplan-map .detail-lot .villa-spec-card .villa-quantity {
  margin-bottom: 1rem;
}
.masterplan-map .detail-lot .villa-spec-card .villa-quantity span {
  color: rgba(0, 80, 75, 0.55);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  display: block;
}
.masterplan-map .detail-lot .villa-spec-card .villa-quantity strong {
  color: #00504B;
  font-size: 1.3rem;
}
.masterplan-map .detail-lot .villa-spec-card .villa-count-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(0, 80, 75, 0.15);
  overflow: hidden;
  margin-bottom: 1rem;
}
.masterplan-map .detail-lot .villa-spec-card .villa-count-grid .count-item {
  text-align: center;
  padding: 1rem 0.5rem;
}
.masterplan-map .detail-lot .villa-spec-card .villa-count-grid .count-item:not(:last-child) {
  border-right: 1px solid rgba(0, 80, 75, 0.15);
}
.masterplan-map .detail-lot .villa-spec-card .villa-count-grid .count-item strong {
  display: block;
  font-size: 2rem;
  color: #00504B;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.masterplan-map .detail-lot .villa-spec-card .villa-count-grid .count-item span {
  display: block;
  letter-spacing: 0.08em;
  color: #00504b;
}
.masterplan-map .detail-lot .villa-spec-card .villa-info-grid {
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.masterplan-map .detail-lot .villa-spec-card .villa-info-grid .info-item {
  /*border: 1px solid rgba($primary, .15);
  padding: 1rem;*/
  display: flex;
  align-items: center;
}
.masterplan-map .detail-lot .villa-spec-card .villa-info-grid .info-item label {
  display: block;
  color: #00504b;
  margin-bottom: 0;
  letter-spacing: 0.08em;
  min-width: 155px;
}
.masterplan-map .detail-lot .villa-spec-card .villa-info-grid .info-item span {
  margin-right: 0.25rem;
}
.masterplan-map .detail-lot .villa-spec-card .villa-info-grid .info-item div {
  color: #00504B;
  font-weight: 300;
  line-height: 1.45;
}
.masterplan-map .detail-lot .villa-spec-card .villa-amenities-box {
  border: 1px solid rgba(0, 80, 75, 0.15);
  padding: 1rem;
}
.masterplan-map .detail-lot .villa-spec-card .villa-amenities-box > label {
  display: block;
  color: #00504B;
  font-weight: 300;
  margin-bottom: 0.75rem;
}
.masterplan-map .detail-lot .villa-spec-card .villa-amenities-box .villa-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.masterplan-map .detail-lot .villa-spec-card .villa-amenities-box .villa-amenities span {
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(0, 80, 75, 0.08);
  color: #00504B;
  font-size: 0.82rem;
}
@media (max-width: 767px) {
  .masterplan-map .detail-lot .villa-spec-card .villa-count-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .masterplan-map .detail-lot .villa-spec-card .villa-count-grid .count-item:nth-child(2) {
    border-right: none;
  }
  .masterplan-map .detail-lot .villa-spec-card .villa-count-grid .count-item:nth-child(-n+2) {
    border-bottom: 1px solid rgba(0, 80, 75, 0.15);
  }
  .masterplan-map .detail-lot .villa-spec-card .villa-info-grid {
    grid-template-columns: 1fr;
  }
}
.masterplan-map .detail-lot .popup-gallery-standalone .modal-content {
  background-color: #111;
  border: none;
  border-radius: 0;
  overflow: hidden;
  position: relative;
}
.masterplan-map .detail-lot .popup-gallery-standalone .btn-close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
  filter: invert(1);
  opacity: 0.8;
}
.masterplan-map .detail-lot .popup-gallery-standalone .btn-close:hover {
  opacity: 1;
}
.masterplan-map .detail-lot .popup-gallery-standalone .gallery-cats-overlay {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px 8px;
}
.masterplan-map .detail-lot .popup-gallery-standalone .gallery-cats-overlay .gallery-cat-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}
.masterplan-map .detail-lot .popup-gallery-standalone .gallery-cats-overlay .gallery-cat-btn.is-active, .masterplan-map .detail-lot .popup-gallery-standalone .gallery-cats-overlay .gallery-cat-btn:hover {
  color: #fff;
  border-bottom-color: var(--vi-primary, #c5a059);
}
.masterplan-map .detail-lot .popup-gallery-standalone .main-gallery-swiper {
  width: 100%;
  height: min(65vh, 560px);
  margin-bottom: 12px;
}
.masterplan-map .detail-lot .popup-gallery-standalone .main-gallery-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.masterplan-map .detail-lot .popup-gallery-standalone .main-gallery-swiper .swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.masterplan-map .detail-lot .popup-gallery-standalone .main-gallery-swiper .swiper-button-prev,
.masterplan-map .detail-lot .popup-gallery-standalone .main-gallery-swiper .swiper-button-next {
  color: #fff;
}
.masterplan-map .detail-lot .popup-gallery-standalone .main-gallery-swiper .swiper-button-prev::after,
.masterplan-map .detail-lot .popup-gallery-standalone .main-gallery-swiper .swiper-button-next::after {
  font-size: 20px;
}
.masterplan-map .detail-lot .popup-gallery-standalone .thumb-gallery-swiper {
  width: 100%;
  padding: 0 16px 16px;
}
.masterplan-map .detail-lot .popup-gallery-standalone .thumb-gallery-swiper .swiper-slide {
  width: 90px;
  height: 60px;
  opacity: 0.4;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: opacity 0.2s, border-color 0.2s;
}
.masterplan-map .detail-lot .popup-gallery-standalone .thumb-gallery-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.masterplan-map .detail-lot .popup-gallery-standalone .thumb-gallery-swiper .swiper-slide-thumb-active {
  opacity: 1;
  border-color: var(--vi-primary, #c5a059);
}
.masterplan-map .back_button {
  width: 36px;
  height: 36px;
  border: 1px #00504B solid;
  border-radius: 0;
  background: #00504B;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  position: absolute;
  left: -38px;
  top: 0;
}
.masterplan-map .back_button:hover {
  background: #00504B;
  border: 1px #ffffff solid;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
.masterplan-map .back_button i {
  font-weight: 300 !important;
}
.masterplan-map .afv_button {
  background-color: transparent;
  border: unset;
  font-size: 16px;
  font-family: "Montserrat", serif;
  letter-spacing: 1px;
}
.masterplan-map .afv_button img {
  height: 13px;
  width: auto;
  margin-right: 10px;
}
.masterplan-map .afv_button img {
  height: 20px;
}
.masterplan-map .modal {
  display: none;
  position: absolute;
  z-index: 9999;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.4s ease-in-out;
}
.masterplan-map .modal ul {
  list-style: none;
  padding: 0;
}
.masterplan-map .modal .modal-content {
  background-color: white;
  padding: 20px;
  border: 1px solid #888;
  max-width: 900px;
  max-height: 750px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  animation: slideDown 0.4s;
  margin-left: auto;
  margin-right: auto;
  margin-top: 108px;
  border-radius: 10px;
}
@media (max-width: 1400px) {
  .masterplan-map .modal .modal-content {
    max-width: 700px;
    max-height: 600px;
  }
}
.masterplan-map .modal .modal-content img {
  width: 100%;
}
.masterplan-map .modal .close {
  position: absolute;
  z-index: 3;
  top: -15px;
  right: -35px;
  width: 35px;
  height: 35px;
  padding: 2px;
  overflow: hidden;
  background: linear-gradient(235.06deg, #00504B 2.63%, #00504B 131.61%);
  border: none;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.5s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  opacity: 1;
}
.masterplan-map .modal .close i {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.masterplan-map .modal .close:hover,
.masterplan-map .modal .close:focus {
  background: linear-gradient(235.06deg, #00504B 0.63%, #00504B 131.61%);
  color: #fff;
  cursor: pointer;
}
.masterplan-map .modal .owl-theme .owl-nav [class*=owl-] {
  position: absolute;
  top: 45%;
}
.masterplan-map .modal .owl-dots {
  position: absolute;
  bottom: 75px;
  left: 50%;
  transform: translateX(-50%);
}
.masterplan-map .modal .owl-dots span {
  margin: 15px 20px;
}
.masterplan-map .modal .owl-nav button:hover {
  background-color: unset;
}
.masterplan-map .modal .owl-nav button.owl-prev {
  left: -40px;
}
.masterplan-map .modal .owl-nav button.owl-next {
  right: -40px;
}
@media (min-width: 992px) {
  .masterplan-map .gallery-pd {
    padding: 30px !important;
  }
  .masterplan-map .keyplan-pd {
    padding: 95px 45px;
  }
}
@keyframes slideDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.masterplan-map .keyplan-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.masterplan-map .openModal {
  cursor: pointer;
}
.masterplan-map .keyplan-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="white"%3E%3Cpath d="M10 2a8 8 0 0 1 6.32 12.9l5.4 5.38-1.41 1.42-5.38-5.4A8 8 0 1 1 10 2m0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12z"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34px 34px;
}
.masterplan-map .keyplan-wrap:hover::after {
  opacity: 1;
}
@media (max-width: 991px) {
  .masterplan-map {
    height: 100vh;
  }
  .masterplan-map .detail-lot {
    max-width: 100%;
    overflow-y: unset;
    height: auto;
  }
  .masterplan-map .detail-lot .body {
    padding: 40px;
    overflow-y: hidden;
  }
  .masterplan-map .detail-lot .body {
    height: auto;
    overflow-y: hidden;
  }
  .masterplan-map .modal {
    z-index: 9999;
    padding: 0 20px !important;
    position: fixed;
    align-content: center;
  }
  .masterplan-map .modal .modal-content {
    max-width: 100%;
    height: auto;
    width: 100%;
    padding: 20px 25px;
  }
  .masterplan-map .owl-nav button.owl-next {
    right: -25px !important;
  }
  .masterplan-map .owl-nav button.owl-prev {
    left: -25px !important;
  }
  .masterplan-map .owl-dots {
    bottom: -20px !important;
  }
  .masterplan-map .footer-t .btn {
    max-width: 44% !important;
  }
}

.villa-info-modal.modal.right-modal .modal-fullscreen, .villa-info-modal.modal.right-modal, .villa-info-modal .modal.right-modal + .modal-backdrop {
  left: auto;
  right: 0;
  width: calc(100vw - var(--width-nav));
  height: var(--body-height);
}
.villa-info-modal.modal.right-modal .modal-content, .villa-info-modal .modal.right-modal + .modal-backdrop .modal-content {
  width: 100%;
}

.villa-type-A .nav-item:nth-child(2), .villa-type-B .nav-item:nth-child(2), .villa-type-E .nav-item:nth-child(2), .villa-type-G .nav-item:nth-child(2) {
  display: none;
}

.villa-info-modal {
  --vi-primary: $primary;
  --vi-primary-light: #0b7f72;
  --vi-bg: #eef4f2;
  --vi-surface: #ffffff;
  --vi-border: rgba(0, 80, 75, 0.15);
  --vi-text: $primary;
  --vi-text-muted: rgba(0, 0, 0, 0.45);
  background: var(--vi-bg);
  color: var(--vi-text);
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--vi-primary, #004d40) transparent !important;
}
.villa-info-modal::-webkit-scrollbar {
  width: 6px;
}
.villa-info-modal::-webkit-scrollbar-track {
  background: transparent;
}
.villa-info-modal::-webkit-scrollbar-thumb {
  background: var(--vi-primary, #004d40);
  border-radius: 10px;
  box-shadow: inset 0 20px 0 transparent, inset 0 -20px 0 transparent;
}
.villa-info-modal::-webkit-scrollbar-thumb:hover {
  background: #002e26;
}
.villa-info-modal .modal-title {
  display: none;
}
.villa-info-modal.modal {
  z-index: 9999;
  height: var(--body-height);
}
.villa-info-modal .modal-fullscreen {
  --modal-info-reserved-h: 130px;
  --modal-info-reserved-h-md: 150px;
}
.villa-info-modal .villa-panel-tabpane,
.villa-info-modal .tab-content > .tab-pane {
  height: 100%;
  overflow: hidden;
}
.villa-info-modal .vi-empty {
  display: none !important;
}
.villa-info-modal .villas-overview-wrap.no-image .villas-overview-text-scroll {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.villa-info-modal .villas-overview-wrap.no-image .villas-overview-text-scroll .villa-name,
.villa-info-modal .villas-overview-wrap.no-image .villas-overview-text-scroll .villa-desc {
  grid-column: 1/-1;
}
.villa-info-modal .villas-overview-wrap.no-image .villas-overview-text-scroll .villas-row-top {
  grid-column: 1;
}
.villa-info-modal .villas-overview-wrap.no-image .villas-overview-text-scroll .villas-row-bottom {
  grid-column: 2;
  min-width: 0;
}
.villa-info-modal .villas-overview-wrap.no-image .villas-overview-text-scroll .media-frame {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.villa-info-modal .villas-overview-wrap.no-image .villas-overview-text-scroll .media-frame img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .villa-info-modal .villas-overview-wrap.no-image .villas-overview-text-scroll {
    grid-template-columns: 1fr;
  }
  .villa-info-modal .villas-overview-wrap.no-image .villas-overview-text-scroll .villa-name,
  .villa-info-modal .villas-overview-wrap.no-image .villas-overview-text-scroll .villa-desc,
  .villa-info-modal .villas-overview-wrap.no-image .villas-overview-text-scroll .villas-row-top,
  .villa-info-modal .villas-overview-wrap.no-image .villas-overview-text-scroll .villas-row-bottom {
    grid-column: 1;
  }
}
.villa-info-modal .media-frame {
  position: relative;
  width: 100%;
  border-radius: 3px;
}
.villa-info-modal .media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.villa-info-modal .media-frame--hero {
  aspect-ratio: 4/3;
  height: auto !important;
  display: flex;
  align-items: end;
}
.villa-info-modal .media-frame--masterplan {
  aspect-ratio: 16/9;
}
.villa-info-modal .villas-overview-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 992px) {
  .villa-info-modal .villas-overview-wrap {
    flex-direction: row;
    align-items: stretch;
    height: calc(100vh - var(--modal-info-reserved-h-md, 150px));
  }
}
.villa-info-modal .villas-overview-text {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.villa-info-modal .villas-overview-text .villa-title-text {
  font-weight: 600;
}
@media (min-width: 992px) {
  .villa-info-modal .villas-overview-text {
    width: 42%;
    height: 100%;
    overflow: hidden;
  }
  .villa-info-modal .villas-overview-text .villas-overview-text-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 8px;
    overflow-y: auto;
    scrollbar-width: thin !important;
    scrollbar-color: #004d40 transparent !important;
  }
  .villa-info-modal .villas-overview-text .villas-overview-text-scroll::-webkit-scrollbar {
    width: 6px;
  }
  .villa-info-modal .villas-overview-text .villas-overview-text-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .villa-info-modal .villas-overview-text .villas-overview-text-scroll::-webkit-scrollbar-thumb {
    background: var(--vi-primary, #004d40);
    border-radius: 0;
  }
  .villa-info-modal .villas-overview-text .villas-overview-text-scroll::-webkit-scrollbar-thumb:hover {
    background: #002e26;
  }
  .villa-info-modal .villas-overview-text .villas-overview-text-scroll::-webkit-scrollbar-button {
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }
  .villa-info-modal .villas-overview-text .villas-overview-text-scroll::-webkit-scrollbar-button:single-button, .villa-info-modal .villas-overview-text .villas-overview-text-scroll::-webkit-scrollbar-button:double-button, .villa-info-modal .villas-overview-text .villas-overview-text-scroll::-webkit-scrollbar-button:start, .villa-info-modal .villas-overview-text .villas-overview-text-scroll::-webkit-scrollbar-button:end, .villa-info-modal .villas-overview-text .villas-overview-text-scroll::-webkit-scrollbar-button:increment, .villa-info-modal .villas-overview-text .villas-overview-text-scroll::-webkit-scrollbar-button:decrement {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}
.villa-info-modal .villas-overview-img {
  flex: 1 1 auto;
  width: 100%;
  margin-top: auto;
}
@media (min-width: 992px) {
  .villa-info-modal .villas-overview-img {
    width: 58%;
  }
}
@media (min-width: 992px) {
  .villa-info-modal .villas-overview-img .media-frame {
    height: 100%;
    aspect-ratio: unset;
  }
  .villa-info-modal .villas-overview-img .media-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 3px;
  }
}
.villa-info-modal .villas-quick-stats {
  display: flex;
  flex-wrap: wrap;
  border: none;
  gap: 28px;
  margin-bottom: 8px;
}
.villa-info-modal .villas-quick-stats .qs-item {
  flex: 0 0 auto;
  min-width: 60px;
  text-align: left;
  align-items: flex-start;
  padding: 4px 0;
  border-right: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.villa-info-modal .villas-quick-stats .qs-num {
  font-size: 15px;
  font-weight: 600;
  color: var(--vi-primary);
  line-height: 1;
}
.villa-info-modal .villas-quick-stats .qs-label {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #00504B;
}
.villa-info-modal .villas-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 10px;
  margin-bottom: 8px;
}
.villa-info-modal .villas-specs .spec-label {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px !important;
  color: #00504B;
}
.villa-info-modal .villas-specs .spec-item {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none;
}
.villa-info-modal .spec-label {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  color: #00504B;
}
.villa-info-modal .spec-value {
  color: #00504B;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.25;
}
.villa-info-modal .villas-amenities {
  margin-bottom: 8px;
}
.villa-info-modal .villas-amenities .spec-label {
  margin-bottom: 4px;
}
.villa-info-modal .villas-amenities .amenities-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.villa-info-modal .villas-amenities .chip {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 12px;
  font-weight: 400;
  color: #00504B;
  white-space: nowrap;
  line-height: 1.3;
}
.villa-info-modal .villas-masterplan {
  margin-top: auto;
  padding-top: 6px;
  border-top: none;
}
.villa-info-modal .villas-swiper-keyplan {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 3px;
  overflow: hidden;
}
.villa-info-modal .villas-swiper-keyplan .keyplan-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.villa-info-modal .villas-swiper-keyplan .keyplan-item {
  border-radius: 12px;
  overflow: hidden;
}
.villa-info-modal .villas-swiper-keyplan .keyplan-item img {
  display: block;
  width: 100%;
  height: 100%;
}
.villa-info-modal .villas-swiper-keyplan .swiper-slide {
  aspect-ratio: 16/10;
  background: #dfe9e6;
}
.villa-info-modal .villas-swiper-keyplan .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.villa-info-modal .villas-swiper-keyplan.is-single .swiper-button-next, .villa-info-modal .villas-swiper-keyplan.is-single .swiper-button-prev, .villa-info-modal .villas-swiper-keyplan.is-single .swiper-pagination {
  display: none;
}
.villa-info-modal .villas-gallery-stage {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--modal-info-reserved-h, 130px));
  overflow: hidden;
  border-radius: 3px;
  background: #10201c;
}
@media (min-width: 768px) {
  .villa-info-modal .villas-gallery-stage {
    height: calc(100vh - var(--modal-info-reserved-h-md, 150px));
  }
}
.villa-info-modal .villas-swiper-gallery {
  width: 100%;
  height: 100%;
}
.villa-info-modal .villas-swiper-gallery .swiper-slide {
  width: 100%;
  height: 100%;
}
.villa-info-modal .villas-swiper-gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.villa-info-modal .gallery-cats-overlay {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 4;
  max-width: 190px;
  max-height: calc(100% - 140px);
  overflow-y: auto;
  background: rgba(8, 20, 17, 0.4);
  backdrop-filter: blur(3px);
  padding: 16px 18px;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.villa-info-modal .gallery-cats-overlay .gallery-cat {
  appearance: none;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  text-align: left;
  padding: 2px 0 2px 10px;
  font-size: 12.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.villa-info-modal .gallery-cats-overlay .gallery-cat:hover {
  color: #fff;
}
.villa-info-modal .gallery-cats-overlay .gallery-cat.is-active {
  color: #fff;
  font-weight: 600;
  border-left-color: #fff;
}
.villa-info-modal .gallery-corner-btn {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.villa-info-modal .gallery-corner-btn:hover {
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.villa-info-modal .gallery-edge-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 0;
  border: 1px #00504B solid;
  background: #00504b;
  backdrop-filter: blur(3px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.villa-info-modal .gallery-edge-nav:hover {
  background: #96826E;
  color: var(--vi-primary);
}
.villa-info-modal .gallery-edge-prev {
  left: 16px;
}
.villa-info-modal .gallery-edge-next {
  right: 16px;
}
.villa-info-modal .gallery-thumb-dock {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: min(640px, 90%);
}
.villa-info-modal .gallery-dock-toggle {
  width: 26px;
  height: 26px;
  border-radius: 0;
  border: none;
  background: rgba(0, 80, 75, 0.9);
  color: whtie;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.villa-info-modal .gallery-dock-toggle i {
  color: white;
}
.villa-info-modal .gallery-dock-toggle svg {
  transition: transform 0.2s ease;
}
.villa-info-modal .gallery-dock-toggle svg path {
  stroke: white !important;
}
.villa-info-modal .gallery-thumb-dock.is-collapsed .gallery-thumb-row {
  display: none;
}
.villa-info-modal .gallery-thumb-dock.is-collapsed .gallery-dock-toggle svg {
  transform: rotate(180deg);
}
.villa-info-modal .gallery-thumb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  padding: 8px 10px;
  border-radius: 0;
}
.villa-info-modal .villas-thumbs {
  width: auto;
  max-width: 420px;
  overflow: hidden;
}
.villa-info-modal .villas-thumbs .swiper-slide {
  width: 64px !important;
  aspect-ratio: 4/3;
  cursor: pointer;
  opacity: 0.55;
  border: 1px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.villa-info-modal .villas-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.villa-info-modal .villas-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border-color: #fff;
}
.villa-info-modal .villas-thumbs-nav {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 0;
  border: none;
  background: rgba(0, 80, 75, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  /*        &.villas-thumbs-nav-prev span {
      transform: rotate(-135deg) translate(1px, -1px);
  }

  &.villas-thumbs-nav-next span {
      transform: rotate(45deg) translate(-1px, 1px);
  }*/
}
.villa-info-modal .villas-thumbs-nav i {
  color: white;
  font-size: 12px;
}
.villa-info-modal .villas-thumbs-nav span {
  /*            border-top: 1.5px solid var(--vi-primary);
  border-right: 1.5px solid var(--vi-primary);*/
}
.villa-info-modal .villas-thumbs-nav.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

body.masterplan-beach-villas-modal-opened {
  overflow: hidden;
}

#popupGolfs.modal,
#popupHotels.modal {
  z-index: 999999;
}
#popupGolfs .modal-fullscreen .tab-pane.active.show,
#popupHotels .modal-fullscreen .tab-pane.active.show {
  display: flex !important;
  flex-direction: column;
  align-items: start;
  justify-content: start;
}

.location-page-wrapper:not(.isDisplay) .hide-in-web, .location-page-wrapper:not(.isControl) .hide-in-web, .beach-villas-web:not(.isDisplay) .hide-in-web, .beach-villas-web:not(.isControl) .hide-in-web {
  display: none;
}

.locationLocationModal.show {
  background: #000000;
}
.locationLocationModal.show .close {
  color: #ffffff;
  text-align: right;
}

.location-icon-logo {
  cursor: pointer;
  position: fixed;
  z-index: 5;
  top: 0;
  left: 50%;
  transform: translate(-50%, -200px);
  transition: transform 0.7s cubic-bezier(0.3, 0, 0, 1);
}
.location-icon-logo.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.location-icon-logo.show .icon-logo,
.location-icon-logo.show .nav-link img {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.5s ease;
  transform-origin: center center;
}
.location-icon-logo.show:hover .icon-logo {
  opacity: 0;
  transform: scale(0.85);
}
.location-icon-logo.show:hover .nav-link {
  opacity: 1;
}
.location-icon-logo.show:hover .nav-link img {
  opacity: 1;
  transform: scale(1.05);
}
.location-icon-logo.show:hover .nav-link:after {
  opacity: 1;
  transition: opacity 0.5s ease 0.2s;
}
.location-icon-logo .icon-logo {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.5s ease;
}
.location-icon-logo .nav-link {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  z-index: 5;
  padding: 10px 15px 5px;
  opacity: 0;
}
.location-icon-logo .nav-link img {
  max-width: 100%;
  opacity: 0;
  transform: scale(0.85);
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.5s ease;
}
.location-icon-logo .nav-link:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 115px;
  height: 160px;
  background: url(../images/bg-gold-logo.png) no-repeat center center;
  background-size: contain;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.location-box {
  position: relative;
  overflow: hidden;
}
.location-box .location-nav {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(0) translateX(-100%);
  width: 300px;
  z-index: 100;
  transition: transform 0.5s cubic-bezier(0.3, 0, 0, 1);
  max-height: var(--location-height);
}
.location-box .location-nav.active {
  transform: translateY(0) translateX(0);
}
@media only screen and (max-width: 991px) {
  .location-box .location-nav {
    width: 220px;
  }
}
.location-box .location-nav .toggle-btn {
  position: absolute;
  right: -41px;
  width: 40px;
  height: 40px;
  top: 0;
  background-color: #00504B;
  color: #ffffff;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 3px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 1001;
}
.location-box .location-nav .toggle-btn i {
  font-weight: 300;
}
.location-box .location-nav .hotspot-filter {
  position: relative;
}
.location-box .location-nav .hotspot-filter * {
  font-weight: 400;
  letter-spacing: 0.3px;
}
.location-box .location-nav .hotspot-filter .hotspot-category {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.location-box .location-nav .hotspot-filter .hotspot-category .item-filter {
  position: relative;
  display: flex;
  align-items: center;
  padding: 9px 15px;
  background: #00504B;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.25s ease;
}
.location-box .location-nav .hotspot-filter .hotspot-category .item-filter.active:after {
  transform: rotate(180deg);
}
.location-box .location-nav .hotspot-filter .hotspot-category .item-filter:after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
}
.location-box .location-nav .hotspot-filter .hotspot-category .item-filter span.cata-icon.me-2 {
  display: none !important;
}
.location-box .location-nav .hotspot-filter .hotspot-category .item-filter.active, .location-box .location-nav .hotspot-filter .hotspot-category .item-filter:hover {
  background-color: #00504B;
  color: #ffffff;
  border-bottom: none;
}
.location-box .location-nav .hotspot-filter .hotspot-category .item-filter.active .cata-icon img, .location-box .location-nav .hotspot-filter .hotspot-category .item-filter:hover .cata-icon img {
  filter: brightness(0) saturate(100%) invert(74%) sepia(21%) saturate(542%) hue-rotate(352%) brightness(91%) contrast(85%);
}
.location-box .location-nav .local-amenites {
  display: none;
  background: #00504B;
  width: 100%;
}
.location-box .location-nav .local-amenites .menu-title,
.location-box .location-nav .local-amenites .menu-title-static {
  color: #96826E;
  letter-spacing: 0.3px;
  margin-bottom: 0;
  padding: 15px;
}
.location-box .location-nav .local-amenites .item-filter-name-list {
  padding: 0 15px 10px;
}
.location-box .location-nav .local-amenites .item-filter-name-list .amenites-category {
  display: none;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  max-height: 210px;
  overflow-y: auto;
}
.location-box .location-nav .local-amenites .item-filter-name-list .amenites-category.active {
  display: block;
}
.location-box .location-nav .local-amenites .item-filter-name-list .amenites-category::-webkit-scrollbar {
  width: 3px;
}
.location-box .location-nav .local-amenites .item-filter-name-list .amenites-category::-webkit-scrollbar-thumb {
  background-color: #96826E;
}
.location-box .location-nav .local-amenites .item-filter-name-list .amenites-category .item-filter-child {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
@media only screen and (max-width: 991px) {
  .location-box .location-nav .local-amenites .item-filter-name-list .amenites-category .item-filter-child {
    padding: 6px 10px;
    margin-top: 4px;
  }
}
.location-box .location-nav .local-amenites .item-filter-name-list .amenites-category .item-filter-child .amenites-name {
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.3px;
  line-height: 1.2;
}
.location-box .location-nav .local-amenites .item-filter-name-list .amenites-category .item-filter-child:hover, .location-box .location-nav .local-amenites .item-filter-name-list .amenites-category .item-filter-child.active {
  background: rgba(150, 130, 110, 0.15) !important;
  border-color: #ffffff !important;
}
.location-box .location-nav .local-amenites .item-filter-name-list .amenites-category .item-filter-child:hover .amenites-name, .location-box .location-nav .local-amenites .item-filter-name-list .amenites-category .item-filter-child.active .amenites-name {
  color: #ffffff !important;
}
.location-box .location-map {
  height: var(--location-height);
  position: relative;
  overflow: hidden;
}
.location-box .location-map .thong-tin-box {
  position: absolute;
  top: 15px;
  right: 50px;
  width: 320px;
  z-index: 9999;
  display: none;
}
.location-box .location-map .thong-tin-box.show {
  display: block;
  animation: fadeInSVG 0.3s ease forwards;
}
@media only screen and (max-width: 991px) {
  .location-box .location-map .thong-tin-box {
    top: 10px;
    right: 15px;
    width: 270px;
    height: 70px;
  }
}
.location-box .location-map .thong-tin-box .thong-tin-swiper {
  width: 100%;
  height: 100%;
  position: relative;
  padding-bottom: 25px;
}
.location-box .location-map .thong-tin-box .thong-tin-swiper .swiper-wrapper {
  height: 100%;
}
.location-box .location-map .thong-tin-box .thong-tin-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  width: 100% !important;
}
.location-box .location-map .thong-tin-box .thong-tin-swiper .swiper-slide .svg-style-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: #ffffff;
  text-align: left;
  width: 100%;
  margin-bottom: 1rem;
  min-height: 50px;
}
.location-box .location-map .thong-tin-box .thong-tin-swiper .swiper-slide .svg-style-row .icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  width: 20px;
}
.location-box .location-map .thong-tin-box .thong-tin-swiper .swiper-slide .svg-style-row .icon-svg svg {
  fill: #ffffff;
  width: 18px;
  height: 18px;
}
.location-box .location-map .thong-tin-box .thong-tin-swiper .swiper-slide .svg-style-row .stat-num {
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.5px;
  flex-shrink: 0;
}
.location-box .location-map .thong-tin-box .thong-tin-swiper .swiper-slide .svg-style-row .stat-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.58rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.location-box .location-map .thong-tin-box .thong-tin-swiper .swiper-slide .svg-style-row .stat-text.golf-text {
  font-size: 0.52rem;
  line-height: 1.3;
}
.location-box .location-map .thong-tin-box .thong-tin-swiper .swiper-slide .svg-style-row .unesco-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.location-box .location-map .thong-tin-box .thong-tin-swiper .swiper-slide .svg-style-row .unesco-text .sub-label {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.6px;
}
.location-box .location-map .thong-tin-box .thong-tin-swiper .swiper-slide .svg-style-row .unesco-text .main-label {
  font-size: 1.15rem;
  color: #ffffff;
  letter-spacing: 0.8px;
}
.location-box .location-map .thong-tin-box .thong-tin-swiper .swiper-pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100% !important;
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 6px;
}
.location-box .location-map .location-map:has(.thong-tin-box.show) #thong_tin {
  display: none !important;
}
@keyframes fadeInSVG {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.location-box .location-map .cata-action {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 250px;
  transform: translateY(-50%);
  height: 100%;
  width: 45px;
  background: #00504B;
  cursor: pointer;
}
@media (max-width: 767px) {
  .location-box .location-map .cata-action {
    display: block;
  }
}
@media (min-width: 768px) {
  .location-box .location-map .cata-action {
    display: none;
  }
}
.location-box .location-map .cata-action .btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.location-box .location-map .cata-action .hotspot-label {
  position: absolute;
  left: 0.75rem;
  top: 2rem;
  z-index: 1;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  font-family: "Boska", serif;
  color: #fff3dc;
}
.location-box .location-map .cata-action .hotspot-btn {
  position: absolute;
  left: 25px;
  z-index: 1;
  bottom: 1rem;
  transform: translateY(-50%);
}
.location-box .location-map .location-list {
  position: absolute;
  z-index: 9999;
  left: 0;
  bottom: 0;
  height: 50%;
  background: #fff3dc;
  -webkit-animation: 1s ease 0s normal forwards 1 fadeInDelay;
  animation: 1s ease 0s normal forwards 1 fadeInDelay;
}
@media (max-width: 767px) {
  .location-box .location-map .location-list {
    width: 250px;
    bottom: 25%;
    transform: translateY(-50%);
  }
}
@media (min-width: 768px) {
  .location-box .location-map .location-list {
    width: 450px;
    padding-left: 70px !important;
  }
}
.location-box .location-map .location-list.hide {
  left: 0;
  transform: translateX(-100%);
  -webkit-animation: 1s ease 0s normal forwards 1 fadeOutDelay;
  animation: 1s ease 0s normal forwards 1 fadeOutDelay;
}
.location-box .location-map .location-list.hide .cata-action {
  left: 100%;
}
.location-box .location-map .location-list.hide i {
  transform: rotate(180deg);
}
.location-box .location-map .location-list .heading {
  font-size: 1.875rem;
  margin-bottom: 30px !important;
  line-height: 1;
  margin-top: 45px !important;
}
.location-box .location-map .location-list .data-filter {
  cursor: pointer;
}
.location-box .location-map .location-list .data-filter .cata-name:hover {
  text-decoration: underline;
}
.location-box .location-map .location-list .heading {
  text-transform: unset;
}

.location-map {
  /*Road eff*/
  position: relative;
}
.location-map .imageLocation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.location-map .imageLocation::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(30px);
  z-index: 0;
  pointer-events: none;
}
.location-map .imageLocation .leaflet-container {
  position: relative;
  z-index: 1;
  background: transparent;
}
.location-map .imageLocation.active {
  opacity: 1;
  z-index: 2;
}
.location-map .imageLocation svg {
  fill: none;
  /*
  .hotspot.active {
      .hotspot-eff {
          fill: $white;
          stroke: $white;
          stroke-width: 2;
          transform-origin: center;
          transform-box: fill-box;
          animation: hotspotPulse-2 1.6s ease-out infinite;
      }
  }*/
  /* Keyframes phóng to nhẹ tại chỗ */
}
.location-map .imageLocation svg .hotspot.hotspot-icon.active path.no-hotspot {
  opacity: 0.36 !important;
}
.location-map .imageLocation svg .no-hotspot {
  opacity: 0.36 !important;
}
.location-map .imageLocation svg .pin-hoiana {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: hotspotPinEff 2s ease-in-out infinite;
}
.location-map .imageLocation svg .hotspot-pulse {
  fill: #E6F0F0;
  stroke: #96826E;
  stroke-width: 2;
  transform-origin: center;
  transform-box: fill-box;
  animation: hotspotPulse 1.6s ease-out infinite;
}
.location-map .imageLocation svg .hotspot-pulse.hotspot-eff {
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 2;
  transform-origin: center;
  transform-box: fill-box;
  animation: hotspotPulse-2 1.6s ease-out infinite;
}
.location-map .imageLocation svg .hotspot-pin-eff {
  transform-box: fill-box;
  transform-origin: center;
  animation: hotspotPinEff 2s ease-in-out infinite;
}
@keyframes hotspotPinEff {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025);
  }
  to {
    transform: scale(1);
  }
}
@keyframes hotspotPulse-2 {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.25);
    opacity: 1;
  }
}
@keyframes hotspotPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}
@keyframes mapHotspotPulse {
  0% {
    transform: scale(1);
    opacity: 1;
    stroke-width: 1px;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.6;
    stroke-width: 3px;
  }
  100% {
    transform: scale(1);
    opacity: 1;
    stroke-width: 1px;
  }
}
.location-map .imageLocation .hotspot-group.active {
  opacity: 1;
}
.location-map .imageLocation .hotspot-group:not(.active) {
  opacity: 0;
}
.location-map .imageLocation #bankinh_eff {
  transform-box: fill-box;
  transform-origin: center;
}
.location-map .imageLocation #bankinh_trong {
  transform-box: fill-box;
  transform-origin: center;
  animation: bankinhInnerPulse 3.2s ease-in-out infinite;
}
.location-map .imageLocation #bankinh_ngoai {
  transform-box: fill-box;
  transform-origin: center;
  animation: bankinhOuterPulse 3.2s ease-in-out infinite;
}
@keyframes bankinhInnerPulse {
  0%, 100% {
    transform: scale(0.98);
  }
  50% {
    transform: scale(1.025);
  }
}
@keyframes bankinhOuterPulse {
  0%, 100% {
    transform: scale(0.985);
  }
  50% {
    transform: scale(1.015);
  }
}
.location-map .circle-inner-eff {
  fill: rgba(0, 80, 75, 0.25);
  transform-box: fill-box;
  transform-origin: center;
  animation: pulseInner 3s ease-out infinite;
}
.location-map .circle-outer-eff {
  fill: rgba(0, 80, 75, 0.25);
  transform-box: fill-box;
  transform-origin: center;
  animation: pulseOuter 3s ease-out infinite;
  animation-delay: 1.5s;
}
@keyframes pulseInner {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@keyframes pulseOuter {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
.location-map .path-line-effect {
  stroke: #dfefee;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  /* Bí quyết quan trọng */
  stroke-dasharray: 3000; /* Giá trị đủ lớn để bao phủ toàn bộ đường */
  stroke-dashoffset: 3000;
  animation: flow 5s linear infinite;
  /* Hiệu ứng ánh sáng */
  filter: drop-shadow(0 0 10px rgba(230, 240, 240, 0.25));
}
@keyframes flow {
  0% {
    stroke-dashoffset: 3000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.location-map .path-effect {
  stroke: #00504B;
  stroke-width: 3px;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 10;
  stroke-dashoffset: 200;
  mask-size: 200% 100%;
  mask-position: 0 0;
  mask-repeat: no-repeat;
  -webkit-mask-size: 200% 100%;
  -webkit-mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  animation: dash-move 8s linear infinite;
}
@keyframes dash-move {
  to {
    stroke-dashoffset: 0;
  }
}
.location-map #locationMap {
  position: absolute;
  left: 0;
  top: 0;
  height: var(--location-height);
  width: 100vw;
  z-index: 1;
  touch-action: none !important;
}
.location-map #locationMap .zoom-eff {
  transform-box: fill-box;
  transform-origin: center;
  animation: pin-drift 1.5s ease-in-out infinite;
}
.location-map #locationMap .zoom-eff polygon,
.location-map #locationMap .zoom-eff path {
  stroke: rgb(191, 128, 27);
}
.location-map #locationMap .zoom-eff.up {
  animation: pin-drift-up 1.5s ease-in-out infinite;
}
.location-map #locationMap .zoom-eff.down {
  animation: pin-drift-down 1.5s ease-in-out infinite;
}
@keyframes pin-drift {
  0% {
    transform: scale(0.5) translate(0px, 0px);
    opacity: 0;
  }
  50% {
    transform: scale(1.75) translate(6px, -6px); /* lệch lên phải */
    opacity: 1;
  }
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.75;
  }
}
@keyframes pin-drift-up {
  0% {
    transform: scale(0.5) translate(0px, 0px);
    opacity: 0;
  }
  50% {
    transform: scale(1.5) translate(-10px, 0px); /* lệch lên trái */
    opacity: 1;
  }
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.75;
  }
}
@keyframes pin-drift-down {
  0% {
    transform: scale(0.5) translate(0px, 0px);
    opacity: 0;
  }
  50% {
    transform: scale(1.5) translate(6px, 6px); /* lệch lên phải */
    opacity: 1;
  }
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.75;
  }
}
.location-map #locationMap .path-filter {
  stroke: rgb(191, 128, 27);
  fill: none;
  stroke-width: 1.32;
  stroke-miterlimit: 10;
  stroke-dasharray: 2.64, 2.64;
}
.location-map #locationMap .path-effect {
  stroke: #00504B;
  stroke-width: 3px;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 10;
  stroke-dashoffset: 200;
  mask-size: 200% 100%;
  mask-position: 0 0;
  mask-repeat: no-repeat;
  -webkit-mask-size: 200% 100%;
  -webkit-mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  animation: dash-move 8s linear infinite;
}
@keyframes dash-move {
  to {
    stroke-dashoffset: 0;
  }
}
.location-map #locationMap svg text {
  font-family: "Montserrat", serif;
}
.location-map #Group_text_Ban_Dao_Son_Tra text {
  fill: #00504B !important;
}
.location-map .hotspot.active * {
  opacity: 1;
}
.location-map .hotspot rect {
  fill: #ffffff;
  stroke: #00504B;
}
.location-map .hotspot path,
.location-map .hotspot line,
.location-map .hotspot image,
.location-map .hotspot rect,
.location-map .hotspot text {
  opacity: 0;
}
.location-map .hotspot text {
  font-weight: 600;
  font-family: "Montserrat", serif;
  fill: #ffffff;
}
.location-map .hotspot circle:hover .hotspot * {
  opacity: 1;
}
.location-map .hotspot circle:nth-of-type(1) {
  animation: wave 1.6s linear infinite;
  animation-delay: 0.8s;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
.location-map .hotspot circle:nth-of-type(2) {
  animation: wave 1.6s linear infinite;
  opacity: 1;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  stroke: #ffffff;
  stroke-miterlimit: 1;
}
@keyframes wave {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}
.location-map .hotspot-group.active .hotspot path,
.location-map .hotspot-group.active .hotspot line,
.location-map .hotspot-group.active .hotspot image,
.location-map .hotspot-group.active .hotspot rect,
.location-map .hotspot-group.active .hotspot text {
  opacity: 1 !important;
}
.location-map .hotspot-group:not(.active) .hotspot circle {
  opacity: 0 !important;
  animation: none !important;
}
.location-map .hotspot-group:not(.active) {
  pointer-events: none !important;
}
.location-map .hotspot-group.active {
  pointer-events: auto !important;
}

.viewInfo .infoPopupSvg {
  display: none;
  opacity: 0;
}

.map-info .infoPopup {
  padding: 10px 40px 10px 20px;
  background-color: white;
  border-radius: 0;
  position: absolute;
  display: none;
  font-size: 0.8rem;
  z-index: 10000 !important;
  cursor: pointer;
  max-width: 265px;
  text-align: center;
}

.infoPopup img {
  width: 100%;
  margin-top: 10px;
}

.infoPopup .close-popup {
  position: absolute;
  font-size: 1.15rem !important;
  top: -5px;
  font-size: 30px;
  color: #000;
  right: 5px;
  z-index: 1001 !important;
  border: 0;
  background: transparent;
}

.numberMarkerStyle {
  padding-right: 5px;
}

.borderTransport {
  border: 1px #000000 solid;
}

.borderSchools {
  border: 1px #000000 solid;
}

.borderBarPubs {
  border: 1px #878f65 solid;
}

.borderCafesRestaurants {
  border: 1px #878f65 solid;
}

.borderSportLeisure {
  border: 1px #d16f50 solid;
}

.ani1 {
  animation: waves 1.6s linear infinite;
  animation-delay: 0.8s;
  opacity: 0.4;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  fill: #fff;
  border-radius: 50%;
}

.ani2 {
  animation: waves 1.6s linear infinite;
  animation-delay: 1s;
  opacity: 0.4;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  fill: #fff;
  border-radius: 50%;
}

@keyframes waves {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
#G-Pin > g {
  opacity: 0;
  transform-origin: center;
  pointer-events: bounding-box;
}

.fade-in-pin {
  opacity: 1;
  -webkit-animation: 3s ease 0s normal forwards 1 scalezoom;
  animation: 3s ease 0s normal forwards 1 scalezoom;
}

@keyframes scalezoom {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes scalezoom {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.custom-popup {
  font-family: "Montserrat", serif;
}
.custom-popup .leaflet-popup-content-wrapper {
  padding: 26px 45px 42px 40px;
  border-radius: 30px;
  background-color: #fff4dc;
  width: 367px !important;
}
.custom-popup .leaflet-popup-content-wrapper .title {
  color: #1e4141;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 5px;
  margin-bottom: 20px;
  margin-top: 10px;
}
.custom-popup .leaflet-popup-content-wrapper .info {
  color: #1e4141;
  opacity: 0.5;
  font-size: 12px;
  margin-bottom: 20px;
  letter-spacing: 0.96px;
  line-height: 16px;
}
.custom-popup .leaflet-popup-content-wrapper img {
  width: 100%;
}
.custom-popup .leaflet-popup-content {
  width: auto !important;
  margin: 0;
}
.custom-popup .leaflet-popup-tip-container {
  display: none;
}
.custom-popup .leaflet-popup-close-button {
  top: 15px !important;
  right: 15px !important;
}

.marker.active {
  opacity: 1 !important;
  transition: all 0.5s ease-in-out;
}

.marker.inactive {
  opacity: 0.2 !important;
  transition: all 0.5s ease-in-out;
}

.marker[data-click=true] {
  animation: clickAnimation 1s infinite alternate;
}

@keyframes clickAnimation {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}
.pin-mark {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: pin-breathe 2s ease-in-out infinite;
}

@keyframes pin-breathe {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
.pin-glow {
  fill: rgba(0, 174, 255, 0.4); /* Màu xanh dương nhạt mờ đẹp */
  transform-box: fill-box;
  transform-origin: center;
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.pin-halo {
  fill: #ffffff; /* Màu ánh sáng nhẹ */
  transform-box: fill-box;
  transform-origin: center;
  animation: halo-pulse 2s ease-out infinite;
}

@keyframes halo-pulse {
  0% {
    transform: scale(0.5);
    opacity: 0.6;
  }
  70% {
    transform: scale(10.5);
    opacity: 0;
  }
  100% {
    transform: scale(6.5);
    opacity: 0;
  }
}
#popupLocationGallery.modal {
  z-index: 999999;
}
#popupLocationGallery .modal-fullscreen .tab-pane.active.show {
  display: flex !important;
  flex-direction: column;
  align-items: start;
  justify-content: start;
}
#popupLocationGallery .modal-fullscreen .modal-content {
  height: calc(100vh - var(--header-height-pc) - var(--header-height-pc));
  width: 100%;
}
#popupLocationGallery .modal-fullscreen .modal-content .modal-header {
  position: absolute;
  left: 0;
  top: 0;
  padding: 1rem;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.5);
}
#popupLocationGallery .location-gallery-stage {
  position: relative;
  width: 100%;
  height: 100%;
}
#popupLocationGallery .location-gallery-swiper {
  width: 100%;
  height: 100%;
}
#popupLocationGallery .location-gallery-swiper .swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
}
#popupLocationGallery .location-gallery-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#popupLocationGallery .slide-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 32px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
  pointer-events: none;
}
#popupLocationGallery .gallery-edge-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border: 1px #00504B solid;
  border-radius: 0;
  background: #00504B;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#popupLocationGallery .gallery-edge-nav:hover {
  background: #00504B;
  border: 1px #ffffff solid;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
#popupLocationGallery .gallery-edge-nav.gallery-edge-prev {
  left: 16px;
}
#popupLocationGallery .gallery-edge-nav.gallery-edge-next {
  right: 16px;
}
#popupLocationGallery .gallery-edge-nav:hover {
  background: #96826E;
}

.hotspot-icon.has-popup {
  cursor: pointer;
}

.hotspot-group {
  opacity: 1;
}

.hotspot {
  transition: opacity 0.25s ease;
}

.default-scene #toggleButtonFullBefore {
  display: flex !important;
}
.default-scene #toggleButtonFullAfter {
  display: none !important;
}

#g_mattruoc, #g_matsau {
  max-width: 135px;
}
@media (max-width: 767px) {
  #g_mattruoc, #g_matsau {
    scale: 0.9;
  }
  #g_mattruoc rect, #g_mattruoc text, #g_matsau rect, #g_matsau text {
    width: 145px !important;
    font-size: 10px !important;
  }
}

.amenities-box {
  position: relative;
}
.amenities-box .hotspot-filter .wrap-filter {
  max-width: 1314px;
  margin: auto;
}
.amenities-box .hotspot-filter .amenities-category {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
}
@media (max-width: 767px) {
  .amenities-box .hotspot-filter .amenities-category {
    justify-content: start;
  }
}
.amenities-box .hotspot-filter .amenities-category .item-filter {
  display: flex;
  align-items: center;
  padding: 0;
  margin-bottom: 36px;
  margin-right: 50px;
  opacity: 0.6;
  cursor: pointer;
}
.amenities-box .hotspot-filter .amenities-category .item-filter:last-child {
  margin-right: 0px;
}
.amenities-box .hotspot-filter .amenities-category .item-filter .cata-color {
  margin-right: 14px;
}
.amenities-box .hotspot-filter .amenities-category .item-filter:nth-child(1) .cata-color {
  background: #FF0000;
}
.amenities-box .hotspot-filter .amenities-category .item-filter:nth-child(2) .cata-color {
  background: #00B2FF;
}
.amenities-box .hotspot-filter .amenities-category .item-filter:nth-child(3) .cata-color {
  background: #A5D7AF;
}
.amenities-box .hotspot-filter .amenities-category .item-filter:nth-child(4) .cata-color {
  background: #23BF42;
}
.amenities-box .hotspot-filter .amenities-category .item-filter:nth-child(5) {
  margin-right: 64px;
  padding-right: 14px;
}
.amenities-box .hotspot-filter .amenities-category .item-filter:nth-child(5) .cata-color {
  background: #9B69AA;
}
.amenities-box .hotspot-filter .amenities-category .item-filter:nth-child(6) {
  padding-right: 4px;
}
.amenities-box .hotspot-filter .amenities-category .item-filter:nth-child(6) .cata-color {
  background: #FF9900;
}
.amenities-box .hotspot-filter .amenities-category .item-filter .cata-color {
  display: inline-flex;
  width: 25px;
  height: 25px;
  border-radius: 100%;
}
.amenities-box .hotspot-filter .amenities-category .item-filter.active, .amenities-box .hotspot-filter .amenities-category .item-filter:hover {
  opacity: 1;
}
@media (min-width: 991px) {
  .amenities-box .hotspot-filter .amenities-category .item-filter {
    font-size: 29px;
  }
}

.amenities-map .wrapper {
  width: 100%;
  display: flex;
  position: relative;
}
@media (max-width: 991px) {
  .amenities-map .wrapper {
    flex-direction: column;
  }
}
.amenities-map .wrapper .hotspot-action {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  height: 100%;
  width: 45px;
  background: #00504B;
  cursor: pointer;
}
@media (min-width: 768px) {
  .amenities-map .wrapper .hotspot-action {
    display: none;
  }
}
@media (max-width: 991px) {
  .amenities-map .wrapper .hotspot-action {
    display: block;
  }
}
.amenities-map .wrapper .hotspot-action .btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.amenities-map .wrapper .hotspot-action .hotspot-label {
  position: absolute;
  left: 0.75rem;
  top: 2rem;
  z-index: 1;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  font-family: "Boska", serif;
  color: #fff3dc;
}
.amenities-map .wrapper .hotspot-action .hotspot-btn {
  position: absolute;
  left: 25px;
  z-index: 1;
  bottom: 1rem;
  transform: translateY(-50%);
}
.amenities-map .wrapper .amenities-list {
  padding-left: 70px;
  background: #fff3dc;
  z-index: 3;
  -webkit-animation: 1s ease 0s normal forwards 1 fadeInDelay;
  animation: 1s ease 0s normal forwards 1 fadeInDelay;
}
@media (max-width: 991px) {
  .amenities-map .wrapper .amenities-list {
    width: 100%;
    position: relative;
    order: 2;
    padding: 10px 20px 30px;
  }
  .amenities-map .wrapper .amenities-list .heading {
    text-align: center;
  }
  .amenities-map .wrapper .amenities-list .wrap-box {
    padding-right: 0 !important;
  }
  .amenities-map .wrapper .amenities-list .amenities-type {
    flex-wrap: wrap;
    flex-direction: row !important;
  }
  .amenities-map .wrapper .amenities-list .amenities-type li {
    width: 50%;
    font-size: 12px;
  }
}
@media (min-width: 768px) {
  .amenities-map .wrapper .amenities-list {
    width: 25%;
    position: relative;
  }
}
.amenities-map .wrapper .amenities-list.hide {
  transform: translateX(-100%);
  -webkit-animation: 1s ease 0s normal forwards 1 fadeOutDelay;
  animation: 1s ease 0s normal forwards 1 fadeOutDelay;
}
.amenities-map .wrapper .amenities-list.hide .hotspot-action {
  left: 100%;
}
.amenities-map .wrapper .amenities-list.hide i {
  transform: rotate(180deg);
}
.amenities-map .wrapper .amenities-list .heading {
  font-size: 1.875rem;
}
.amenities-map .wrapper .amenities-list .heading {
  text-transform: unset;
}
.amenities-map .wrapper .amenities-list .amenities-type {
  display: flex;
  flex-direction: column;
}
.amenities-map .wrapper .amenities-list .amenities-type .data-filter {
  display: flex;
  align-items: center;
}
.amenities-map .wrapper .amenities-list .amenities-type .data-filter:not(:last-child) {
  margin-bottom: 10px;
}
.amenities-map .wrapper .amenities-list .amenities-type .amenities-color {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  font-size: 12px;
  letter-spacing: 0;
  margin-right: 15px;
}
.amenities-map .wrapper .amenities-list .amenities-type .amenities-color.red {
  background: #FF0000;
}
.amenities-map .wrapper .amenities-list .amenities-type .amenities-color.blue {
  background: #00B2FF;
}
.amenities-map .wrapper .amenities-list .amenities-type .amenities-color.lightGreen {
  background: #A5D7AF;
  color: #1E4141;
}
.amenities-map .wrapper .amenities-list .amenities-type .amenities-color.green {
  background: #23BF42;
}
.amenities-map .wrapper .amenities-list .amenities-type .amenities-color.purple {
  background: #9B69AA;
}
.amenities-map .wrapper .amenities-list .amenities-type .amenities-color.orange {
  background: #FF9900;
}
.amenities-map .wrapper .amenities-list div[data-filter]:not(.active) {
  display: none;
}
.amenities-map .wrapper .amenities-list div[data-filter].active {
  display: block;
}
.amenities-map .wrapper .amenities-list .wrap-box {
  padding-right: 1rem;
  max-height: 60vh;
  overflow-y: auto;
}
.amenities-map .wrapper .masterplan-map {
  position: relative;
  height: 582px;
}
@media (min-width: 768px) {
  .amenities-map .wrapper .masterplan-map {
    width: 75%;
  }
}
@media (max-width: 767px) {
  .amenities-map .wrapper .masterplan-map {
    width: auto;
    overflow: auto;
  }
}
.amenities-map .wrapper .masterplan-map .masterplan-img {
  height: 100%;
  width: auto;
  object-fit: contain;
  z-index: 1;
}
@media (min-width: 768px) {
  .amenities-map .wrapper .masterplan-map .masterplan-img {
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media (max-width: 767px) {
  .amenities-map .wrapper .masterplan-map .masterplan-img {
    width: auto;
    overflow: auto;
  }
}
.amenities-map .wrapper .masterplan-map .masterplan-svg svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
  z-index: 2;
}
.amenities-map .wrapper .masterplan-map .masterplan-svg svg g[data-filter] {
  opacity: 0.5;
}
.amenities-map .wrapper .masterplan-map .masterplan-svg svg g[data-filter]:not(.active) circle {
  fill: #4F4F4F;
}
.amenities-map .wrapper .masterplan-map .masterplan-svg svg g[data-filter].active {
  opacity: 1;
}
.amenities-map #locationMap {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
}
.amenities-map .hotspot.active * {
  opacity: 1;
}
.amenities-map .hotspot rect {
  fill: #ffffff;
  stroke: #00504B;
}
.amenities-map .hotspot path,
.amenities-map .hotspot line,
.amenities-map .hotspot image,
.amenities-map .hotspot rect,
.amenities-map .hotspot text {
  opacity: 0;
}
.amenities-map .hotspot text {
  font-weight: bold;
  font-family: "Montserrat", serif;
  fill: #00504B;
}
.amenities-map .hotspot circle:hover .hotspot * {
  opacity: 1;
}
.amenities-map .hotspot circle:nth-of-type(1) {
  animation: wave 1.6s linear infinite;
  animation-delay: 0.8s;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
.amenities-map .hotspot circle:nth-of-type(2) {
  animation: wave 1.6s linear infinite;
  opacity: 1;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  stroke: #ffffff;
  stroke-miterlimit: 1;
}
@keyframes wave {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

.viewInfo .infoPopupSvg {
  display: none;
  opacity: 0;
}

.map-info .infoPopup {
  padding: 10px 40px 10px 20px;
  background-color: white;
  border-radius: 0;
  position: absolute;
  display: none;
  font-size: 0.8rem;
  z-index: 10000 !important;
  cursor: pointer;
  max-width: 265px;
  text-align: center;
}

.infoPopup img {
  width: 100%;
  margin-top: 10px;
}

.infoPopup .close-popup {
  position: absolute;
  font-size: 1.15rem !important;
  top: -5px;
  font-size: 30px;
  color: #000;
  right: 5px;
  z-index: 1001 !important;
  border: 0;
  background: transparent;
}

.numberMarkerStyle {
  padding-right: 5px;
}

.borderTransport {
  border: 1px #000000 solid;
}

.borderSchools {
  border: 1px #000000 solid;
}

.borderBarPubs {
  border: 1px #878F65 solid;
}

.borderCafesRestaurants {
  border: 1px #878F65 solid;
}

.borderSportLeisure {
  border: 1px #D16F50 solid;
}

.amenities-filter .dropdown-button {
  display: none;
}

@media (max-width: 991px) {
  .amenities-box .hotspot-filter .amenities-category {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 99;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    padding: 20px 10px 0px 40px;
  }
  .amenities-box .hotspot-filter .amenities-category li {
    margin-right: 0 !important;
  }
  .amenities-box .hotspot-filter .amenities-category.show {
    display: block;
  }
  .amenities-filter .wrap-filter {
    text-align: center;
  }
  .amenities-filter .dropdown-button {
    border: none;
    display: flex;
    align-items: center;
    background-color: unset;
    padding: 0;
    margin-bottom: 36px;
    margin-right: auto;
    margin-left: auto;
    cursor: pointer;
    padding: 0 40px;
    position: relative;
  }
  .amenities-filter .dropdown-button::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 0;
    width: 11px;
    height: 7px;
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.283881 1.06819C0.121525 0.881881 0.122703 0.604004 0.286633 0.419075C0.483517 0.196969 0.830818 0.19864 1.02556 0.422631L4.62256 4.55998C5.06268 5.06621 5.8476 5.06999 6.29258 4.56802L9.97335 0.415741C10.1693 0.194677 10.5145 0.194677 10.7104 0.415741C10.8757 0.602178 10.8757 0.882672 10.7104 1.06911L6.2916 6.05396C5.84697 6.55555 5.06279 6.55223 4.62243 6.04689L0.283881 1.06819Z' fill='%231E4141'/%3E%3C/svg%3E%0A");
  }
  .amenities-filter .dropdown-button .cata-color {
    margin-right: 14px;
  }
  .amenities-filter .dropdown-button[data-filter=Community-Yard] .cata-color {
    background: #FF0000;
  }
  .amenities-filter .dropdown-button[data-filter=Community-Garden] .cata-color {
    background: #00B2FF;
  }
  .amenities-filter .dropdown-button[data-filter=Entry-Garden] .cata-color {
    background: #A5D7AF;
  }
  .amenities-filter .dropdown-button[data-filter=Welcome-Area] .cata-color {
    background: #23BF42;
  }
  .amenities-filter .dropdown-button[data-filter=Pollinator-Garden] .cata-color {
    background: #9B69AA;
  }
  .amenities-filter .dropdown-button[data-filter=Jogging-Track] .cata-color {
    background: #FF9900;
  }
  .amenities-filter .dropdown-button .cata-color {
    display: inline-flex;
    width: 25px;
    height: 25px;
    border-radius: 100%;
  }
  .amenities-filter .dropdown-button.active, .amenities-filter .dropdown-button:hover {
    opacity: 1;
  }
}
@media (max-width: 991px) and (min-width: 991px) {
  .amenities-filter .dropdown-button {
    font-size: 29px;
  }
}
:root {
  --header-height: clamp(52px, 6vw, 100px);
  --offset-y-bottom: calc(var(--header-height) + 75px);
  --offset-left: 60px;
  --offset-right: 60px;
  --offset-top: 0;
  --offset-bottom: clamp(60px, 6vw, 120px);
  --btn-villass-info-offset-y-bottom: calc(var(--header-height) + 50px);
  --width-btn-item-collapse: 190px;
  --location-height: calc(100vh - var(--header-height));
  --amenities-height: calc(100vh - var(--header-height));
  --body-tour-360-page-height: calc(100vh - var(--header-height));
  --panel-w: 40%;
}

.tienich-page {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

@media (min-width: 992px) {
  .tienich-page.panel-open .amenities-box {
    width: calc(100% - var(--panel-w));
  }
}
.amenities-box {
  position: relative;
  height: var(--amenities-height);
  width: 100%;
}
@media (min-width: 992px) {
  .amenities-box {
    transition: width 0.38s cubic-bezier(0.22, 0.68, 0, 1.01);
  }
}
@media (max-width: 991px) {
  .amenities-box {
    height: var(--amenities-height-mobile);
  }
}
.amenities-box .amenities-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 400px;
  overflow: hidden;
}
.amenities-box .amenities-map::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(/media/image/amenities/amenities-map.jpg) no-repeat center/cover;
  filter: blur(10px);
  z-index: -1;
  transform: scale(1.1);
}
.amenities-box .amenities-map img {
  opacity: 1 !important;
  visibility: visible !important;
}
.amenities-box .amenities-map.leaflet-container {
  background: transparent;
}
.amenities-box .amenities-map .leaflet-map-pane {
  width: 100%;
  height: 100%;
}
.amenities-box .amenities-map .leaflet-map-pane .leaflet-overlay-pane {
  width: 100%;
  height: 100%;
}
.amenities-box .hotspot {
  cursor: pointer;
}

#amenities-leaflet g[id^=dot_] {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.05s linear;
}

.amenities-group.golf path:not(.eff), .amenities-group.resort path:not(.eff) {
  stroke: #00504B;
  stroke-width: 5px;
}
.amenities-group.hoiana-beach-villas path:not(.eff) {
  stroke: #96826e;
  stroke-width: 5px;
}

.hotspot.eff {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 1.5s ease-out infinite;
}

g[id^=dot_].active .hotspot {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
:root {
  --scroll-color-3: #E6F0F0;
  --primary-haze: #E6F0F0;
}

.action-group.action-top #lifestyleCategory .action-group.action-top .group-btn.btn-left .accordion-button.collapsed::after {
  filter: invert(0) !important;
}
@media (max-height: 700px) {
  .action-group.action-top #lifestyleCategory {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
.action-group.action-top .group-btn.btn-left {
  position: fixed;
  background: transparent;
  border: none;
  z-index: 1050;
  top: var(--offset-top);
  left: 0;
  width: 300px;
}
@media (max-width: 991px) {
  .action-group.action-top .group-btn.btn-left {
    width: 220px;
  }
}
.action-group.action-top .group-btn.btn-left .toggle-btn {
  position: absolute;
  top: 0;
  transform: translateY(0);
  width: 40px;
  height: 40px;
  background-color: #00504B;
  color: #ffffff;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 3px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  font-size: 18px;
  transition: background 0.3s ease, left 0.3s ease;
}
.action-group.action-top .group-btn.btn-left .toggle-btn:not(.active) {
  left: 0;
}
.action-group.action-top .group-btn.btn-left .toggle-btn.active {
  left: 302px;
}
@media (max-width: 991px) {
  .action-group.action-top .group-btn.btn-left .toggle-btn.active {
    left: 222px;
  }
}
.action-group.action-top .group-btn.btn-left .toggle-btn i, .action-group.action-top .group-btn.btn-left .toggle-btn .fa, .action-group.action-top .group-btn.btn-left .toggle-btn .fas {
  font-weight: 300 !important;
}
.action-group.action-top .group-btn.btn-left .toggle-btn:hover {
  background-color: rgb(0, 54.5, 51.09375);
}
.action-group.action-top .group-btn.btn-left .toggle-btn .svg-btn-open,
.action-group.action-top .group-btn.btn-left .toggle-btn .svg-btn-close {
  line-height: 1;
}
.action-group.action-top .group-btn.btn-left .toggle-btn .svg-btn-open.hide,
.action-group.action-top .group-btn.btn-left .toggle-btn .svg-btn-close.hide {
  display: none;
}
.action-group.action-top .group-btn.btn-left .toggle-btn .svg-btn-open.show,
.action-group.action-top .group-btn.btn-left .toggle-btn .svg-btn-close.show {
  display: block;
}
.action-group.action-top .group-btn.btn-left .accordion-button::after {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.action-group.action-top .group-btn.btn-left .accordion-button.collapsed::after {
  transform: rotate(0deg);
}
.action-group.action-top .group-btn.btn-left .list-category {
  position: relative;
  width: 100%;
  margin: 0;
  transition: transform 0.5s cubic-bezier(0.3, 0, 0, 1);
  transform: translateX(0);
}
.action-group.action-top .group-btn.btn-left .list-category.hide {
  transform: translateX(-100%);
}
.action-group.action-top .group-btn.btn-left .list-category.show {
  transform: translateX(0);
}
.action-group.action-top .group-btn.btn-left .list-category * {
  font-size: 14px;
  width: 100%;
}
@media (min-width: 1200px) {
  .action-group.action-top .group-btn.btn-left .list-category * {
    font-size: 16px;
  }
}
@media (min-width: 1920px) {
  .action-group.action-top .group-btn.btn-left .list-category * {
    font-size: 20px;
  }
}
.action-group.action-top .group-btn.btn-left .list-category .j-one .item .btn {
  text-align: left;
}
.action-group.action-top .group-btn.btn-left .list-category .accordion-item,
.action-group.action-top .group-btn.btn-left .list-category .accordion-button {
  border-radius: 0 !important;
}
.action-group.action-top .group-btn.btn-left .list-category .item {
  border-radius: 3px !important;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 0 !important;
  transition: all 0.2s ease-in-out;
}
@media (max-width: 991px) {
  .action-group.action-top .group-btn.btn-left .list-category .item {
    margin-top: 4px;
  }
}
.action-group.action-top .group-btn.btn-left .list-category .item .btn {
  height: auto;
  width: 100% !important;
  padding: 8px 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.action-group.action-top .group-btn.btn-left .list-category .item .btn.active {
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
}
.action-group.action-top .group-btn.btn-left .list-category .accordion-button {
  font-weight: 400;
  letter-spacing: 0.5px;
  border: none;
  box-shadow: none;
  padding: 15px;
  text-align: left;
  justify-content: flex-start;
  transition: all 0.25s ease;
}
@media (max-width: 991px) {
  .action-group.action-top .group-btn.btn-left .list-category .accordion-button {
    padding: 10px 12px;
  }
}
.action-group.action-top .group-btn.btn-left .list-category .accordion-button:focus {
  box-shadow: none;
}
.action-group.action-top .group-btn.btn-left .list-category .accordion-body {
  padding: 10px 15px !important;
}
@media (max-width: 991px) {
  .action-group.action-top .group-btn.btn-left .list-category .accordion-body {
    padding: 8px 12px !important;
  }
}
.action-group.action-top .group-btn.btn-left .list-category .accordion-item {
  border: none;
  background-color: currentColor;
  margin-bottom: 0 !important;
}
.action-group.action-top .group-btn.btn-left .list-category .accordion-item .accordion-collapse {
  margin: 0;
}
.action-group.action-top .group-btn.btn-left .list-category .accordion-item .accordion-body ul {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}
.action-group.action-top .group-btn.btn-left .list-category .accordion-item.level-1 .accordion-body {
  margin-top: -15px;
}
.action-group.action-top .group-btn.btn-left .list-category .accordion-item.level-1 .accordion-body .accordion-body {
  margin-top: 0;
}
.action-group.action-top .group-btn.btn-left .list-category .accordion-item.level-2 {
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.action-group.action-top .group-btn.btn-left .list-category .accordion-item.level-2 .accordion-header button {
  padding: 8px 12px !important;
  font-weight: 400 !important;
  border-radius: 3px !important;
}
.action-group.action-top .group-btn.btn-left .list-category .accordion-item.level-2:hover, .action-group.action-top .group-btn.btn-left .list-category .accordion-item.level-2.active {
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
.action-group.action-top .group-btn.btn-left .list-category .accordion-item.level-2 .accordion-button::after {
  opacity: 0;
}
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item > .accordion-header > .accordion-button,
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item > .accordion-button {
  background: #00504B;
  color: #ffffff;
}
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item > .accordion-header > .accordion-button::after,
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item > .accordion-button::after {
  filter: invert(1);
}
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item > .accordion-header > .accordion-button:hover,
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item > .accordion-button:hover {
  background: rgb(0, 100.4, 94.125);
}
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item > .accordion-header > .accordion-button[aria-expanded=true],
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item > .accordion-button[aria-expanded=true] {
  background: #00504B;
  color: #ffffff;
}
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item > .accordion-header > .accordion-button[aria-expanded=true]::after,
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item > .accordion-button[aria-expanded=true]::after {
  filter: invert(1);
}
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item > .accordion-collapse > .accordion-body,
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item > .accordion-body {
  background: #00504B;
}
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .accordion-item .accordion-button {
  color: #ffffff;
}
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .accordion-item .accordion-button::after {
  filter: invert(1);
}
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .item .btn {
  color: white;
}
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .item:hover, .action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .item.active {
  font-weight: 600 !important;
}
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .item:hover .btn,
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .item:hover *, .action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .item.active .btn,
.action-group.action-top .group-btn.btn-left .list-category #ResortGolfsCategory.accordion-item .item.active * {
  color: #e6f0f0;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
.action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item > .accordion-header > .accordion-button,
.action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item > .accordion-button {
  background: #00504B;
  color: #ffffff;
}
.action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item > .accordion-header > .accordion-button::after,
.action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item > .accordion-button::after {
  filter: invert(1);
}
.action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item > .accordion-header > .accordion-button:hover,
.action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item > .accordion-button:hover {
  background: rgb(0, 100.4, 94.125);
}
.action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item > .accordion-header > .accordion-button[aria-expanded=true],
.action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item > .accordion-button[aria-expanded=true] {
  background: #00504B;
  color: #ffffff;
}
.action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item > .accordion-header > .accordion-button[aria-expanded=true]::after,
.action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item > .accordion-button[aria-expanded=true]::after {
  filter: invert(1);
}
.action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item > .accordion-collapse > .accordion-body,
.action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item > .accordion-body {
  background: #00504B;
}
.action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-item .accordion-button {
  color: #ffffff;
}
.action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .accordion-item .accordion-button::after {
  filter: invert(1);
}
.action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .item .btn {
  color: white;
}
.action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .item:hover *, .action-group.action-top .group-btn.btn-left .list-category #beach-villasCategory.accordion-item .item.active * {
  color: white !important;
  background: #00504B !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item > .accordion-header > .accordion-button,
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item > .accordion-button {
  background: #00504B;
  color: #ffffff;
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item > .accordion-header > .accordion-button::after,
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item > .accordion-button::after {
  filter: invert(1);
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item > .accordion-header > .accordion-button:hover,
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item > .accordion-button:hover {
  background: rgb(0, 100.4, 94.125);
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item > .accordion-header > .accordion-button[aria-expanded=true],
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item > .accordion-button[aria-expanded=true] {
  background: #00504B;
  color: #ffffff;
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item > .accordion-header > .accordion-button[aria-expanded=true]::after,
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item > .accordion-button[aria-expanded=true]::after {
  filter: invert(1);
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item > .accordion-collapse > .accordion-body,
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item > .accordion-body {
  background: #00504B;
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item .accordion-item .accordion-button {
  color: #ffffff;
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item .accordion-item .accordion-button::after {
  filter: invert(1);
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item .accordion-button {
  background-color: #00504B !important;
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item .accordion-body .accordion-item {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item .accordion-body .accordion-item:not(:first-child) {
  margin-top: 6px;
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item .accordion-body .accordion-item:hover, .action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item .accordion-body .accordion-item.active {
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item .accordion-body .accordion-button {
  font-weight: 400 !important;
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item .level-2 .accordion-body {
  background: #00504B !important;
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item .level-2 .accordion-body .item {
  background-color: #00504B !important;
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item .level-2 .accordion-body .item .btn {
  text-align: left;
  color: white;
}
.action-group.action-top .group-btn.btn-left .list-category #lifestyleCategory.accordion-item .level-2:has(.accordion-collapse.show) {
  background: transparent !important;
  border: 1px solid #e6f0f0 !important;
  border-radius: 1px !important;
}
.action-group.action-bottom .nav-cluster {
  position: fixed;
  left: var(--offset-left);
  bottom: var(--offset-bottom);
  z-index: 3000;
}
.action-group.action-bottom .global-popup-nav {
  position: fixed;
  display: flex;
  left: 0;
  bottom: calc(10px + var(--offset-bottom));
  gap: 10px;
  z-index: 2000;
}
.action-group.action-bottom .popup-nav-btn {
  border: none;
  background: #00504B;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  border-radius: 0;
  font-size: 16px;
  padding: 10px 15px;
}
.action-group.action-bottom .popup-nav-btn:hover {
  background: #00504B;
  color: #ffffff;
  border: 1px white solid;
}
.action-group.action-bottom .nav-help-toggle {
  width: 40px;
  height: 40px;
  border: 1px #00504B solid;
  border-radius: 0;
  background: #00504B;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  position: fixed;
  left: var(--offset-left);
  bottom: var(--offset-bottom);
  z-index: 3000;
  border-radius: 0;
  animation: nav-help-pulse 2s ease-in-out infinite;
}
.action-group.action-bottom .nav-help-toggle:hover {
  background: #96826e;
  color: 18px;
  border: 1px #ffffff solid;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
@keyframes nav-help-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 80, 75, 0.35);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(0, 80, 75, 0);
  }
}
.action-group.action-bottom .nav-help-panel {
  position: fixed;
  left: var(--offset-left);
  bottom: calc(112px + var(--offset-bottom));
  width: 280px;
  background: #ffffff;
  border-left: 3px solid #00504B;
  padding: 18px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 3000;
  font-family: "Montserrat", serif;
}
.action-group.action-bottom .nav-help-panel.d-none {
  display: none;
}
.action-group.action-bottom .nav-help-panel .nav-help-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #96826e;
  margin-bottom: 8px;
}
.action-group.action-bottom .nav-help-panel .nav-help-text {
  font-size: 13px;
  line-height: 1.7;
  color: #1c2422;
  margin: 0;
}
.action-group.action-bottom .nav-help-panel .nav-help-text kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  margin: 0 1px;
  border: 1px solid rgba(28, 36, 34, 0.25);
  border-bottom-width: 2px;
  background: #f7f6f3;
  font-family: "Montserrat", serif;
  font-size: 11px;
  color: #00504B;
}
.action-group.action-bottom .nav-help-panel .nav-help-text strong {
  color: #00504B;
}
.action-group.action-bottom .nav-help-close {
  width: 22px;
  height: 22px;
  border: 1px #00504B solid;
  border-radius: 0;
  background: transparent;
  color: #00504B;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  position: absolute;
  top: 8px;
  right: 8px;
  box-shadow: none;
  border-radius: 0;
}
.action-group.action-bottom .nav-help-close:hover {
  background: #96826e;
  color: 15px;
  border: 1px #ffffff solid;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
@media (max-width: 991px) {
  .action-group.action-bottom .global-popup-nav {
    left: 12px;
    bottom: 72px;
  }
  .action-group.action-bottom .nav-help-toggle {
    left: 12px;
    bottom: 12px;
  }
  .action-group.action-bottom .nav-help-panel {
    left: 12px;
    bottom: 124px;
    width: calc(100vw - 24px);
  }
}

@media (max-width: 991px) {
  .info-panel {
    width: 100%;
    right: -100%;
  }
}
.info-panel {
  position: fixed;
  top: 0;
  right: -100%;
  height: var(--amenities-height);
  width: var(--panel-w);
  background: #e6f0f0;
  z-index: 2000;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25);
  transition: right 0.38s cubic-bezier(0.22, 0.68, 0, 1.01);
  overflow-x: hidden;
  overflow-y: auto;
}
.info-panel .text-muted {
  color: #00504B !important;
}
.info-panel.open {
  right: 0;
}

.info-panel-close {
  width: 36px;
  height: 36px;
  border: 1px #00504B solid;
  border-radius: 0;
  background: #00504B;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
}
.info-panel-close:hover {
  background: #00504B;
  color: #ffffff;
  border: 1px #ffffff solid;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.info-panel-back {
  border: none;
  background: #00504B;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  padding: 8px 15px 8px 8px;
}
.info-panel-back:hover {
  background: #00504B;
  color: #ffffff;
  border: 1px white solid;
}
.info-panel-back .icon-circle {
  width: 20px;
  height: 20px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.info-panel-back .icon-circle i {
  font-size: 14px;
}

.hc-swiper,
.carousel-wrap {
  position: relative;
}
.hc-swiper .swiper-button-prev,
.hc-swiper .swiper-button-next,
.hc-swiper .nav-arrow,
.carousel-wrap .swiper-button-prev,
.carousel-wrap .swiper-button-next,
.carousel-wrap .nav-arrow {
  width: 36px;
  height: 36px;
  border: 1px #00504B solid;
  border-radius: 0;
  background: rgba(10, 20, 18, 0.42);
  color: #ffffff;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  backdrop-filter: blur(3px);
  box-shadow: none;
}
.hc-swiper .swiper-button-prev:hover,
.hc-swiper .swiper-button-next:hover,
.hc-swiper .nav-arrow:hover,
.carousel-wrap .swiper-button-prev:hover,
.carousel-wrap .swiper-button-next:hover,
.carousel-wrap .nav-arrow:hover {
  background: #96826e;
  color: #00504B;
  border: 1px #ffffff solid;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
.hc-swiper .swiper-button-prev:hover,
.hc-swiper .swiper-button-next:hover,
.hc-swiper .nav-arrow:hover,
.carousel-wrap .swiper-button-prev:hover,
.carousel-wrap .swiper-button-next:hover,
.carousel-wrap .nav-arrow:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.hc-swiper .swiper-button-prev::after,
.hc-swiper .swiper-button-next::after,
.hc-swiper .nav-arrow::after,
.carousel-wrap .swiper-button-prev::after,
.carousel-wrap .swiper-button-next::after,
.carousel-wrap .nav-arrow::after {
  font-size: 14px;
  font-weight: 700;
}
.hc-swiper .swiper-pagination-bullet,
.carousel-wrap .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background: transparent;
  border: 1.5px solid rgba(0, 80, 75, 0.95);
  opacity: 1;
  margin: 0 5px !important;
  border-radius: 50%;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.hc-swiper .swiper-pagination-bullet-active,
.carousel-wrap .swiper-pagination-bullet-active {
  width: 22px;
  border-radius: 5px;
  background: #00504B;
  border-color: #00504B;
}
.hc-swiper .swiper-slide,
.carousel-wrap .swiper-slide {
  position: relative;
}
.hc-swiper .swiper-slide::after,
.carousel-wrap .swiper-slide::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 25%;
  background: linear-gradient(to top, rgba(0, 20, 18, 0.75), transparent);
  pointer-events: none;
}
.hc-swiper .slide-caption,
.carousel-wrap .slide-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  z-index: 2;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.hc-swiper {
  background: #eee;
  margin: 1rem 1rem 0;
  height: 40vh !important;
}
.hc-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hc-swiper .placeholder-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00504B;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  height: 45vh;
  letter-spacing: 0.05em;
}

.content span.eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00504B;
  margin-bottom: 6px;
}

.fnb-list,
.hs-child-list {
  list-style: none;
  margin: 0;
  padding: 10px !important;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  border-top: none !important;
}

@media (min-width: 420px) {
  .fnb-list,
  .hs-child-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 992px) {
  .fnb-list,
  .hs-child-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
.hs-child-item {
  justify-content: start;
  padding: 10px 8px !important;
}
.hs-child-item .text {
  white-space: nowrap;
}

.fnb-list-item,
.hs-child-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  min-height: 44px;
  padding: 10px 5px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.25;
  border: 1px solid rgba(0, 80, 76, 0.15);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fnb-list-item .fnb-arrow,
.hs-child-item .fnb-arrow {
  display: none;
}
.fnb-list-item:hover,
.hs-child-item:hover {
  border-color: #00504B;
  background: rgba(0, 80, 76, 0.06);
}
.fnb-list-item.active,
.hs-child-item.active {
  background: #00504B;
  border-color: #00504B;
  color: #ffffff;
  font-weight: 600;
}

.table {
  color: #00504B !important;
}

.hs-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 12px 12px;
}
.hs-filter-bar .hs-filter-dropdown {
  position: relative;
}
.hs-filter-bar .hs-filter-dropdown .hs-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #00504B;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.hs-filter-bar .hs-filter-dropdown .hs-filter-toggle:hover {
  border-color: #ffffff;
}
.hs-filter-bar .hs-filter-dropdown .hs-filter-toggle i {
  font-size: 10px;
  transition: transform 0.2s ease;
}
.hs-filter-bar .hs-filter-dropdown.has-active .hs-filter-toggle {
  border-color: #ffffff;
}
.hs-filter-bar .hs-filter-dropdown.open .hs-filter-toggle i {
  transform: rotate(180deg);
}
.hs-filter-bar .hs-filter-dropdown .hs-filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  background: #00504B;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0;
  padding: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.hs-filter-bar .hs-filter-dropdown.open .hs-filter-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hs-filter-bar .hs-filter-dropdown .hs-filter-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 4px 10px;
  margin: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  background: rgba(255, 255, 255, 0.04);
}
.hs-filter-bar .hs-filter-dropdown .hs-filter-option:not(:last-child) {
  margin-bottom: 0.25rem;
}
.hs-filter-bar .hs-filter-dropdown .hs-filter-option:hover {
  border-color: #ffffff;
  color: #ffffff;
}
.hs-filter-bar .hs-filter-dropdown .hs-filter-option.is-selected {
  color: #ffffff;
  font-weight: 700;
}
.hs-filter-bar .hs-filter-dropdown .hs-filter-option.is-selected::before {
  content: "✓";
  padding-right: 0.25rem;
}
.hs-filter-bar .hs-filter-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
}
.hs-filter-bar .hs-filter-status .hs-filter-count {
  white-space: nowrap;
}
.hs-filter-bar .hs-filter-status .hs-filter-clear {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  color: #00504B;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.hs-filter-bar .hs-filter-status .hs-filter-clear:hover {
  color: rgb(0, 29, 27.1875);
}

.hs-child-item.hs-filtered-out {
  display: none !important;
}

.hc-fullscreen-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(0, 20, 18, 0.55);
  color: #ffffff;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background 0.15s, transform 0.15s;
}
.hc-fullscreen-btn i {
  font-size: 14px;
}
.hc-fullscreen-btn:hover {
  background: rgba(0, 20, 18, 0.8);
  transform: scale(1.05);
}

.child-back {
  border: none;
  background: none;
  color: #00504B;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.2s ease;
  padding: 14px 16px 0;
}
.child-back:hover {
  opacity: 0.65;
}

#lifestyle-child > .accordion-item > .accordion-collapse {
  display: none !important;
}

#lifestyleModal .lifestyle-title {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00504B;
}
#lifestyleModal h2 {
  font-weight: 700;
  color: #00504B;
}
#lifestyleModal .modal-fullscreen .modal-content {
  width: 100% !important;
}

.lifestyle-placeholder-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00504B;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  height: 360px;
  border-radius: 12px;
  background: #00504B;
  font-weight: 600;
  margin-bottom: 20px;
  padding: 16px;
}

.lifestyle-placeholder-desc {
  color: white;
  font-size: 15.5px;
  max-width: 680px;
  line-height: 1.6;
}

.lifestyle-placeholder-tag {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00504B;
  display: inline-block;
  background: #f1ece3;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.lifestyle-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
  margin: 0 auto;
  height: 100%;
  max-width: 1320px;
  padding: 90px 32px;
}
@media (min-width: 1600px) {
  .lifestyle-card {
    max-width: 1800px;
  }
}
.lifestyle-card .carousel-wrap {
  position: relative;
  flex: 1 1 50%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.lifestyle-card .carousel-wrap .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  display: block;
}
.lifestyle-card .carousel-wrap .ph-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00504B;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  height: 100%;
  padding: 16px;
}
.lifestyle-card .carousel-wrap .nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.lifestyle-card .carousel-wrap .nav-arrow.prev {
  left: 20px;
}
.lifestyle-card .carousel-wrap .nav-arrow.next {
  right: 20px;
}
.lifestyle-card .lifestyle-card-content {
  flex: 1 1 40%;
}
.lifestyle-card .lifestyle-card-content .eyebrow {
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00504B;
  font-weight: 700;
  margin-bottom: 22px;
}
.lifestyle-card .lifestyle-card-content .quote {
  font-family: "Boska", serif;
  font-style: italic;
  color: #00504B;
  font-size: 28px;
  line-height: 1.35;
  margin-bottom: 20px;
}
.lifestyle-card .lifestyle-card-content .body-text {
  color: #00504B;
  font-size: 14px;
  line-height: 1.75;
  max-width: 520px;
}
.lifestyle-card .lifestyle-card-content .fact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
  max-width: 520px;
}
.lifestyle-card .lifestyle-card-content .fact-card {
  border: 1px solid rgba(0, 80, 75, 0.18);
  border-radius: 10px;
  padding: 14px 18px;
}
.lifestyle-card .lifestyle-card-content .fact-card .fact-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00504B;
  margin-bottom: 6px;
}
.lifestyle-card .lifestyle-card-content .fact-card .fact-value {
  color: #00504B;
  font-size: 15px;
  font-weight: 600;
}
@media (max-width: 991px) {
  .lifestyle-card {
    flex-direction: column;
    align-items: stretch;
    padding: 76px 22px 56px;
    gap: 28px;
  }
  .lifestyle-card .carousel-wrap {
    flex: 1 1 100%;
    aspect-ratio: 16/11;
  }
  .lifestyle-card .lifestyle-card-content {
    flex: 1 1 100%;
  }
  .lifestyle-card .lifestyle-card-content .body-text,
  .lifestyle-card .lifestyle-card-content .fact-grid {
    max-width: none;
  }
}
.lifestyle-card.lifestyle-card--gallery {
  display: block;
  padding: 0;
  gap: 0;
  max-width: none;
  width: 100%;
  height: 100%;
}
.lifestyle-card.lifestyle-card--gallery .carousel-wrap.carousel-wrap--full {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.lifestyle-card.lifestyle-card--gallery .carousel-wrap.carousel-wrap--full .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  display: block;
}
.lifestyle-card.lifestyle-card--gallery .carousel-wrap.carousel-wrap--full .slide-caption {
  top: 1rem;
  left: 1rem;
  right: auto;
  bottom: auto;
  display: inline-block;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 14px;
  backdrop-filter: blur(3px);
  font-size: 12px;
  opacity: 0;
}
.lifestyle-card.lifestyle-card--gallery .carousel-wrap.carousel-wrap--full .carousel-scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 65%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.25) 55%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.lifestyle-card.lifestyle-card--gallery .carousel-wrap.carousel-wrap--full .nav-arrow {
  z-index: 3;
}
.lifestyle-card.lifestyle-card--gallery .lifestyle-card-content.lifestyle-card-content--overlay {
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  z-index: 2;
  flex: none;
  max-width: 560px;
  padding: 36px 75px 100px;
}
.lifestyle-card.lifestyle-card--gallery .lifestyle-card-content.lifestyle-card-content--overlay .eyebrow {
  color: #ffffff;
}
.lifestyle-card.lifestyle-card--gallery .lifestyle-card-content.lifestyle-card-content--overlay .quote {
  color: #ffffff;
}
.lifestyle-card.lifestyle-card--gallery .lifestyle-card-content.lifestyle-card-content--overlay .body-text {
  color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 991px) {
  .lifestyle-card.lifestyle-card--gallery .lifestyle-card-content.lifestyle-card-content--overlay {
    max-width: none;
    right: 0;
    padding: 24px 20px 32px;
  }
  .lifestyle-card.lifestyle-card--gallery .carousel-wrap.carousel-wrap--full .slide-caption {
    top: 18px;
    left: 18px;
    padding: 4px 11px;
  }
}

.lifestyle-close {
  width: 36px;
  height: 36px;
  border: 1px #00504B solid;
  border-radius: 0;
  background: #00504B;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 2100;
}
.lifestyle-close:hover {
  background: #00504B;
  color: #ffffff;
  border: 1px #ffffff solid;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
@media (max-width: 991px) {
  .lifestyle-close {
    top: 14px;
    right: 14px;
  }
}

.map-placeholder-note {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 5;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 20px;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.popup-content-block.d-none {
  display: none !important;
}

.popup-content-child {
  padding-top: 80px;
}

.hs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 10, 9, 0.95);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  height: var(--body-height);
}
.hs-lightbox.open {
  opacity: 1;
  visibility: visible;
}
.hs-lightbox .hs-lightbox-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 8px 18px;
  margin: 0.5rem;
  letter-spacing: 0.02em;
}
.hs-lightbox .hs-lightbox-caption:empty {
  display: none;
}
.hs-lightbox .hs-lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  height: var(--body-height);
}
.hs-lightbox .hs-lightbox-close,
.hs-lightbox .hs-lightbox-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px #00504B solid;
  border-radius: 0;
  background: #00504B;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  transition: background 0.15s;
}
.hs-lightbox .hs-lightbox-close:hover,
.hs-lightbox .hs-lightbox-nav:hover {
  background: #00504B;
  color: #ffffff;
  border: 1px #ffffff solid;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
.hs-lightbox .hs-lightbox-close .far,
.hs-lightbox .hs-lightbox-nav .far {
  font-weight: 300;
}
.hs-lightbox .hs-lightbox-close {
  top: 20px;
  right: 20px;
}
.hs-lightbox .hs-lightbox-close i {
  font-size: 18px;
}
.hs-lightbox .hs-lightbox-prev {
  left: 20px;
}
.hs-lightbox .hs-lightbox-next {
  right: 20px;
}
.hs-lightbox .hs-lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
  padding: 6px 14px;
  letter-spacing: 0.02em;
}
@media (max-width: 767px) {
  .hs-lightbox .hs-lightbox-nav {
    width: 38px;
    height: 38px;
  }
  .hs-lightbox .hs-lightbox-prev {
    left: 10px;
  }
  .hs-lightbox .hs-lightbox-next {
    right: 10px;
  }
}

.canho-360-page .tooltip-scene {
  pointer-events: none;
}
.canho-360-page.villas-page {
  --font-item-collapse: 11px;
  --font-villa-button: 10px;
  --toggle-btn-offset-right: 20px;
  --width-apartment-info-nav: clamp(355px, 30vw, 306px);
}
.canho-360-page.villas-page .go-back-btn {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: var(--width-apartment-info-nav);
}
.canho-360-page.villas-page .go-back-btn img {
  filter: brightness(0) saturate(100%) invert(100%);
  mix-blend-mode: normal;
}
.canho-360-page.villas-page .go-back-btn:hover {
  color: #ffffff;
}
.canho-360-page.villas-page .apartment-info-nav {
  position: fixed;
  background: transparent;
  border: none;
  z-index: 1050;
  top: 50px;
  left: 0;
  width: var(--width-apartment-info-nav);
}
.canho-360-page.villas-page .apartment-info-nav * {
  font-size: 16px;
  width: 100%;
}
.canho-360-page.villas-page .apartment-info-nav .toggle-btn-category {
  position: absolute;
  top: 0;
  width: 36px;
  height: 36px;
  border: 1px #00504B solid;
  border-radius: 0;
  background: #00504B;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.canho-360-page.villas-page .apartment-info-nav .toggle-btn-category:hover {
  background: #00504B;
  color: #ffffff;
  border: 1px #ffffff solid;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
.canho-360-page.villas-page .apartment-info-nav .toggle-btn-category:not(.active) {
  left: 0;
}
.canho-360-page.villas-page .apartment-info-nav .toggle-btn-category.active {
  left: calc(var(--width-apartment-info-nav) + 2px);
}
.canho-360-page.villas-page .apartment-info-nav .toggle-btn-category.hide-when-other-opened {
  display: none !important;
}
.canho-360-page.villas-page .apartment-info-nav .toggle-btn-category i, .canho-360-page.villas-page .apartment-info-nav .toggle-btn-category .fa, .canho-360-page.villas-page .apartment-info-nav .toggle-btn-category .fas {
  font-weight: 300 !important;
}
.canho-360-page.villas-page .apartment-info-nav .toggle-btn-category .svg-btn-open, .canho-360-page.villas-page .apartment-info-nav .toggle-btn-category .svg-btn-close {
  line-height: 1;
}
.canho-360-page.villas-page .apartment-info-nav .toggle-btn-category .svg-btn-open.hide, .canho-360-page.villas-page .apartment-info-nav .toggle-btn-category .svg-btn-close.hide {
  display: none;
}
.canho-360-page.villas-page .apartment-info-nav .toggle-btn-category .svg-btn-open.show, .canho-360-page.villas-page .apartment-info-nav .toggle-btn-category .svg-btn-close.show {
  display: block;
}
.canho-360-page.villas-page .apartment-info-nav .list-category {
  position: relative;
  width: 100%;
  margin: 0;
  transition: transform 0.5s cubic-bezier(0.3, 0, 0, 1);
  background: rgba(0, 0, 0, 0.5);
  padding: 0.5rem;
}
.canho-360-page.villas-page .apartment-info-nav .list-category.hide {
  transform: translateX(-100%);
}
.canho-360-page.villas-page .apartment-info-nav .list-category.show {
  transform: translateX(0);
}
.canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-header .apartment-type-selector {
  position: relative;
}
.canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-header .apartment-type-selector .apartment-type-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-header .apartment-type-selector .apartment-type-toggle i {
  width: auto;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  font-weight: 300 !important;
}
.canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-header .apartment-type-selector .apartment-type-toggle.open i {
  transform: rotate(180deg);
}
.canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-header .apartment-type-selector .apartment-type-list {
  display: none;
  position: absolute;
  top: -9px;
  left: calc(100% + 8px);
  width: 160px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.5);
  margin: 0;
  padding-left: 0;
  z-index: 10;
}
.canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-header .apartment-type-selector .apartment-type-list.open {
  display: block;
}
.canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-header .apartment-type-selector .apartment-type-list .item {
  list-style: none;
}
.canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-header .apartment-type-selector .apartment-type-list .item .btn {
  padding: 9px 25px;
  color: #ffffff;
  font-weight: 400;
  text-align: left;
  width: 100% !important;
  border-radius: 0 !important;
  background: transparent;
}
.canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-header .apartment-type-selector .apartment-type-list .item .btn:hover, .canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-header .apartment-type-selector .apartment-type-list .item .btn.active {
  color: #e6f0f0;
  font-weight: 700;
}
.canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-header .apartment-type-selector .apartment-type-list .item:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-body .apartment-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  white-space: nowrap;
  overflow: hidden;
}
.canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-body .apartment-info-row .label {
  width: auto;
  color: rgb(255, 255, 255);
  flex-shrink: 0;
  margin-right: 8px;
  font-weight: 400;
}
.canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-body .apartment-info-row .value {
  width: auto;
  text-align: right;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
}
.canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-body .apartment-info-row.amenities-row {
  white-space: normal;
  align-items: flex-start;
  flex-direction: column;
}
.canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-body .apartment-info-row.amenities-row .label {
  margin-bottom: 4px;
}
.canho-360-page.villas-page .apartment-info-nav .list-category .apartment-info-body .apartment-info-row.amenities-row .value {
  text-align: left;
}
.canho-360-page.villas-page .action-group.action-bottom .group-btn.btn-right .list-category {
  bottom: var(--offset-y-bottom);
  margin-bottom: 25px;
  z-index: 2000;
}
.canho-360-page.villas-page .action-group.action-bottom .group-btn.btn-right .list-category * {
  width: var(--width-btn-item-collapse);
}
.canho-360-page.villas-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item.level-2 .btn {
  min-height: 36px;
}
.canho-360-page.villas-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item.level-2 .btn.active {
  background-color: #96826E;
}
.canho-360-page.villas-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item.level-2 .accordion-body .item:last-child {
  border-bottom: 1px #96826E solid;
}
.canho-360-page.villas-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item.level-2 .accordion-button {
  color: #00504B;
  background-color: #e6f0f0;
  border: none;
  box-shadow: none;
  padding: 6px 10px 6px 30px;
  text-align: left;
  justify-content: flex-start;
  border-bottom: 1px solid #96826E;
}
.canho-360-page.villas-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item.level-2 .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.canho-360-page.villas-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item.level-2 .accordion-button[aria-expanded=true] {
  border: 1px #96826E solid;
  background-color: #e6f0f0;
  color: #00504B;
  width: 100%;
  margin: 0;
}
.canho-360-page.villas-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item.level-2 .accordion-button[aria-expanded=true]::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.canho-360-page.villas-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item.level-2 .item {
  background-color: #f3ece3;
}
.canho-360-page.villas-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item.level-2 .item:hover * {
  color: white;
  background: #96826E;
}
.canho-360-page.villas-page .action-group.action-bottom .group-btn.btn-right .list-category .accordion-item.level-2 .item:not(last-child) {
  border-bottom: 1px solid #96826E;
}
.canho-360-page.villas-page .action-group.action-bottom .group-btn.btn-right .list-category button.scene-nav {
  font-size: var(--font-item-collapse);
}
.canho-360-page.villas-page #toggleButtonFloorSection {
  position: fixed;
  right: var(--toggle-btn-offset-right);
  bottom: var(--btn-villass-info-offset-y-bottom);
}

.villas-page .vtour {
  height: var(--body-tour-360-page-height);
}
.villas-page .type-label {
  flex: 1;
  cursor: pointer;
  text-align: left;
}
.villas-page .type-label:hover {
  text-decoration: none !important;
  color: #cfe3e3;
}
.villas-page .type-label:hover {
  text-decoration: underline;
}
.villas-page .villa-info-btn {
  position: fixed;
  max-height: 78vh;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  bottom: var(--btn-villass-info-offset-y-bottom);
  right: var(--offset-right);
  width: var(--width-btn-item-collapse);
  margin-top: 8px;
  padding: 10px 5px;
  font-size: var(--font-villa-button);
  text-transform: uppercase;
  transition: all 0.2s;
  opacity: 0;
  pointer-events: none;
}
.villas-page .villa-info-btn.active {
  opacity: 1;
  pointer-events: all;
}
.villas-page .villa-info-btn:hover {
  background: #00504B;
  color: #ffffff;
}

.villa-info-modal .modal-title {
  display: none;
}
.villa-info-modal.modal {
  z-index: 9999;
}
.villa-info-modal .modal-fullscreen {
  --modal-info-reserved-h: 130px;
  --modal-info-reserved-h-md: 150px;
}
.villa-info-modal .villas-overview-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}
@media (min-width: 768px) {
  .villa-info-modal .villas-overview-wrap {
    flex-direction: row;
    align-items: start;
  }
}
.villa-info-modal .villas-overview-img {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .villa-info-modal .villas-overview-img {
    width: 55%;
  }
}
.villa-info-modal .villas-overview-text {
  flex: 1 1 auto;
}
.villa-info-modal .villas-overview-text .villas-specs {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.villa-info-modal .villas-overview-text .villas-specs .spec-item {
  padding: 12px;
  border: 1px solid rgba(0, 80, 75, 0.15);
  border-radius: 10px;
}
.villa-info-modal .villas-overview-text .villas-specs .spec-item .spec-label {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary);
  margin-bottom: 4px;
}
.villa-info-modal .villas-overview-text .villas-specs .spec-item .spec-value {
  color: var(--primary);
}

/*.villa-info-modal {

    &.modal {
        z-index: 999999;
    }

    .modal-fullscreen {
        .btn-close.close-modal {
            right: 25px;
            top: 25px;
        }

        .modal-content {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .modal-body {
            width: 100%;
            height: 100%;
            padding: 0;
            overflow-x: hidden !important;
            overflow-y: hidden !important;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        // image
        img {
            max-width: 100%;
            max-height: 65vh;
            object-fit: contain;
            display: block;
        }
        // video
        video {
            max-width: 100%;
            max-height: 80vh;
            object-fit: contain;
            display: block;
        }
        // iframe
        iframe {
            width: 100%;
            height: 100%;
            max-height: 80vh;
            border: 0;
        }

        * {
            box-sizing: border-box;
        }
    }

    .modal-xl {

        @media (min-width: 1440px) {
            max-width: 1300px;
        }

        @media (min-width: 1600px) {
            max-width: 1550px;
        }
    }

    .modal-header {
        display: none;
    }

    .villas-overview-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        align-items: start;

        @media (max-width: 767px) {
            grid-template-columns: 1fr;
        }

        .villas-overview-img {
            overflow: hidden;
            aspect-ratio: 4/3;

            &.portrait-img {
                aspect-ratio: 3/3;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform .5s ease;

                &:hover {
                    transform: scale(1.03);
                }
            }
        }

        .villas-overview-text {
            .villas-specs {
                margin-top: 20px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px;

                .spec-item {
                    padding: 12px;
                    border: 1px solid rgba(0,80,75,.15);
                    border-radius: 10px;

                    .spec-label {
                        text-transform: uppercase;
                        letter-spacing: .5px;
                        color: rgba(0,0,0,.4);
                        margin-bottom: 4px;
                    }

                    .spec-value {
                        color: var(--primary);
                    }
                }
            }
        }
    }
    //SWIPER CHUNG//
    .villas-swiper {
        border-radius: 12px;
        overflow: hidden;

        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .swiper-button-next,
        .swiper-button-prev {
            color: var(--white);
            background: rgba($white,.35);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            backdrop-filter: blur(4px);

            &::after {
                font-size: 14px;
                font-weight: 700;
            }
        }

        .swiper-pagination-bullet-active {
            background: $primary;
        }
    }

    .villas-swiper-gallery {
        .swiper-slide {
            aspect-ratio: 16/9;
        }
    }

    .villas-swiper-keyplan {
        .swiper-slide {
            aspect-ratio: 3/2;
        }
    }
    //VIDEO//
    .villas-video-frame {
        aspect-ratio: 16/9;
        border-radius: 12px;
        overflow: hidden;
        background: #000;

        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    }
}*/
.developer-page {
  height: 100vh;
  position: relative;
  overflow: hidden;
  font-family: "Montserrat", serif;
}
.developer-page .eyebrow {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: #ffffff;
  font-size: 38px;
  line-height: 46px;
  letter-spacing: 0.15em;
  margin-bottom: 100px;
  text-transform: uppercase;
}
@media (max-width: 991px) {
  .developer-page .eyebrow {
    font-size: 12px;
    margin-bottom: 16px;
  }
}
.developer-page .bg-title {
  position: absolute;
  width: 120%;
  height: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 2rem 0;
  z-index: -1;
}
.developer-page .bg-title.right {
  padding: 3rem 0;
}
.developer-page .bg-title.right::after {
  content: "";
  position: absolute;
  width: 120%;
  height: 100%;
  left: unset;
  right: -75px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(-90deg, rgba(0, 80, 75, 0.5) 65%, rgba(255, 255, 255, 0) 95%);
  backdrop-filter: blur(2.33036px);
  -webkit-backdrop-filter: blur(2.33036px);
  pointer-events: none;
}
.developer-page .bg-title::after {
  content: "";
  position: absolute;
  width: 120%;
  height: 100%;
  left: -75px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(0, 80, 75, 0.5) 65%, rgba(255, 255, 255, 0) 95%);
  backdrop-filter: blur(2.33036px);
  -webkit-backdrop-filter: blur(2.33036px);
  pointer-events: none;
}
.developer-page .bg-title > * {
  position: relative;
  z-index: 1;
}
.developer-page .desc {
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.05em;
  color: #FBFFFF;
}
@media (min-width: 992px) {
  .developer-page .desc {
    max-width: 554px;
  }
}
@media (max-width: 767px) {
  .developer-page .desc {
    font-size: 13px;
    line-height: 1.6;
    margin-top: 12px;
  }
}
@media (max-width: 1280px) {
  .developer-page .desc {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.025em;
  }
}
.developer-page .heading, .developer-page .sub-heading {
  color: #ffffff;
  text-transform: uppercase;
}
.developer-page .sub-heading {
  font-weight: 600;
  font-size: 40.5px;
  line-height: 50px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #EBE6DC;
}
@media (max-width: 1280px) {
  .developer-page .sub-heading {
    font-size: 20.5px;
    line-height: 20px;
    letter-spacing: 0.025em;
  }
}

/* ========================================================
   IMAGE LOADING — teal bg + spinner, shared by every image
   (home banner + 4 slide background)
======================================================== */
.dev-img-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #00504B;
  overflow: hidden;
}
.dev-img-wrap img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.dev-img-wrap img.loaded {
  opacity: 1;
}

.img-loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00504B;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.img-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  animation: dev-spin 0.85s linear infinite;
}
@media (max-width: 767px) {
  .spinner {
    width: 40px;
    height: 40px;
    border-width: 2px;
  }
}

@keyframes dev-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ========================================================
   HOME — 4 block overview
======================================================== */
.dev-home {
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
}
.dev-home.active {
  display: block;
}
.dev-home .dev-img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.dev-home .dev-home-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) -5.06%, rgba(24, 24, 24, 0.686368) 35.52%, rgba(54, 54, 54, 0.419712) 54.84%, rgba(102, 102, 102, 0) 68.72%);
}
.dev-home .dev-block-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: calc(var(--header-height) * -1 / 2);
  transform: translateY(-50%);
  z-index: 2;
}
@media (min-width: 992px) {
  .dev-home .dev-block-list .container {
    flex-wrap: nowrap;
  }
  .dev-home .dev-block-list .container .dev-block {
    flex: 1 1 0%;
    max-width: 100%;
  }
}
@media (max-width: 991px) {
  .dev-home .dev-block-list .container {
    flex-wrap: wrap;
  }
  .dev-home .dev-block-list .container .dev-block {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 991px) {
  .dev-home .dev-block-list {
    flex-direction: column;
    position: relative;
    bottom: 0;
    height: unset;
  }
}
.dev-home .dev-block {
  position: relative;
  flex: 1;
  cursor: pointer;
}
.dev-home .dev-block:first-child {
  justify-content: flex-start;
}
.dev-home .dev-block .dev-block-inner {
  position: relative;
  display: flex;
  padding: 20px 28px;
  width: 100%;
  text-align: center;
  min-height: 300px;
  justify-content: center;
  align-items: center;
}
@media (max-width: 991px) {
  .dev-home .dev-block .dev-block-inner {
    min-height: unset;
  }
}
.dev-home .dev-block .dev-block-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
  min-height: 300px;
  margin: 0 0.75rem;
}
@media (max-width: 991px) {
  .dev-home .dev-block .dev-block-overlay {
    min-height: unset;
  }
}
.dev-home .dev-block .dev-block-overlay::before, .dev-home .dev-block .dev-block-overlay::after {
  content: none;
}
.dev-home .dev-block .dev-block-overlay-active {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 80, 75, 0.6) 38.18%, rgba(255, 255, 255, 0) 97.09%);
  opacity: 0;
  transition: opacity 0.3s ease;
  margin: 0 0.75rem;
}
.dev-home .dev-block .dev-block-overlay-active::before, .dev-home .dev-block .dev-block-overlay-active::after {
  content: none;
}
.dev-home .dev-block:hover .dev-block-overlay-active, .dev-home .dev-block.active .dev-block-overlay-active {
  opacity: 1;
  margin: 0 0.75rem;
}
.dev-home .dev-block.active .dev-block-name {
  font-weight: 700;
}
.dev-home .dev-block .dev-block-name {
  position: relative;
  z-index: 2;
  display: block;
  color: #ffffff;
  font-weight: 400;
  font-size: 36px;
  text-align: center;
}
@media (min-width: 768px) {
  .dev-home .dev-block .dev-block-name {
    line-height: 44px;
    letter-spacing: 0.15rem;
  }
}
@media (max-width: 767px) {
  .dev-home .dev-block .dev-block-name {
    font-size: 16px;
  }
}
@media (max-width: 991px) {
  .dev-home .dev-block {
    padding: 8px 0;
  }
  .dev-home .dev-block .dev-block-inner {
    padding: 12px 20px;
  }
}

/* ========================================================
   DETAIL — swiper 4 slides
======================================================== */
.dev-detail {
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
  /* --- overlay unique to each slide --- */
  /* < 1280px: 6 items don't fit in one row without squeezing the content,
     switch to horizontal scroll-snap, each card fixed at 300px wide so
     the content (label + icon + logo + description) isn't cramped */
  /* swipe hint — icon-only, blinking, always visible (no hide/fade logic) */
  /* --- dot pagination --- */
  /* --- prev / next arrows --- */
  /* --- back to home --- */
}
.dev-detail.active {
  display: block;
}
.dev-detail .dev-swiper,
.dev-detail .swiper-wrapper,
.dev-detail .swiper-slide {
  height: calc(100vh - var(--header-height));
}
.dev-detail .dev-slide {
  position: relative;
  overflow: hidden;
}
.dev-detail .dev-slide .dev-img-wrap {
  position: absolute;
  inset: 0;
}
.dev-detail .dev-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.dev-detail .dev-slide-content {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  padding-left: 75px;
  max-width: 640px;
}
.dev-detail .dev-slide-content--right {
  left: auto;
  right: 75px;
  text-align: right;
  max-width: 660px;
}
.dev-detail .dev-slide-content--right .desc {
  margin-left: auto;
}
@media (max-width: 767px) {
  .dev-detail .dev-slide-content {
    padding: 0 24px;
    max-width: 100%;
  }
  .dev-detail .dev-slide-content--right {
    text-align: left;
  }
}
.dev-detail .slide-hasd .dev-slide-overlay {
  background: linear-gradient(90deg, rgba(13, 13, 13, 0.5) 25.68%, rgba(69, 68, 68, 0.384135) 51.66%, rgba(91, 89, 89, 0.207983) 80.04%, rgba(102, 100, 100, 0.110517) 95.51%, rgba(115, 113, 113, 0) 111.8%);
}
@media (min-width: 992px) {
  .dev-detail .slide-vms .desc {
    max-width: 594px;
  }
}
.dev-detail .slide-vms .dev-slide-overlay {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 1.7%, rgba(24, 24, 24, 0.571973) 43.27%, rgba(54, 54, 54, 0.34976) 70.47%, rgba(102, 102, 102, 0) 101.27%);
}
@media (min-width: 992px) {
  .dev-detail .slide-nwd .desc {
    max-width: 718px;
  }
}
.dev-detail .slide-nwd .dev-slide-overlay {
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0.5) 8.54%, rgba(28, 28, 28, 0.576695) 43.06%, rgba(102, 102, 102, 0) 100.7%);
}
.dev-detail .slide-consultants .dev-slide-content {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  width: 100%;
  padding: 0;
}
@media (min-width: 1280px) {
  .dev-detail .slide-consultants .dev-slide-content {
    transform: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dev-detail .slide-consultants .dev-slide-content {
    background-color: rgba(255, 255, 255, 0.35);
  }
}
@media (min-width: 1366px) {
  .dev-detail .slide-consultants .dev-slide-content {
    bottom: 135px;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  .dev-detail .slide-consultants .dev-slide-content {
    top: calc(50% - 50px);
    transform: translateY(-50%);
  }
  .dev-detail .slide-consultants .dev-slide-content .consultant-icon {
    display: none;
  }
  .dev-detail .slide-consultants .dev-slide-content .consultant-logo {
    width: 40%;
    margin: 0 auto 0;
  }
}
.dev-detail .slide-consultants .heading {
  margin-bottom: clamp(100px, 3vh, 150px);
  margin-left: clamp(32px, 3vw, 75px);
  /* CONSULTANTS */
  line-height: 52px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FBFFFF;
}
@media (max-width: 991px) and (min-width: 768px) {
  .dev-detail .slide-consultants .heading {
    margin-bottom: 1rem;
  }
}
@media (max-width: 767px) {
  .dev-detail .slide-consultants .heading {
    margin: 1rem;
  }
}
.dev-detail .consultant-list {
  display: flex;
  background-color: rgba(180, 200, 200, 0.3);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.dev-detail .consultant-list .consultant-item {
  flex: 1;
  min-width: 140px;
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #ffffff;
  cursor: pointer;
  position: relative;
}
.dev-detail .consultant-list .consultant-item:after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.3);
  width: 1px;
  height: 90%;
  top: 5%;
  z-index: -1;
}
.dev-detail .consultant-list .consultant-item:hover:after, .dev-detail .consultant-list .consultant-item.active:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #00504B;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.dev-detail .consultant-list:hover {
  border-right: none;
}
.dev-detail .consultant-list:last-child {
  border-right: none;
}
@media (max-width: 1280px) {
  .dev-detail .heading {
    margin-bottom: 0 !important;
  }
  .dev-detail .consultant-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* let the browser know this area only pans horizontally,
       avoids conflicting with other page gestures */
    touch-action: pan-x;
    cursor: grab;
    padding: 0x;
    /* hide the scrollbar for a cleaner look, still scrollable via touch/drag */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .dev-detail .consultant-list.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
  }
  .dev-detail .consultant-list::-webkit-scrollbar {
    display: none;
  }
  .dev-detail .consultant-item {
    flex: 0 0 400px !important;
    width: 400px;
    max-width: 400px;
    scroll-snap-align: start;
    border-right: none;
    border-bottom: none;
    margin-right: 0;
    user-select: none;
  }
}
.dev-detail .consultant-item:last-child {
  margin-right: 16px;
}
@media (max-width: 767px) {
  .dev-detail .consultant-item {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100% !important;
  }
}
@media (max-width: 991px) {
  .dev-detail .consultant-item {
    width: 50%;
    max-width: 50%;
    flex: 0 0 50% !important;
  }
}
.dev-detail .scroll-hint {
  display: none;
  align-items: center;
  justify-content: center;
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}
.dev-detail .scroll-hint .scroll-hint-icon {
  display: inline-flex;
  animation: scroll-hint-nudge 1.3s ease-in-out infinite;
}
.dev-detail .scroll-hint .scroll-hint-icon svg {
  display: block;
}
@keyframes scroll-hint-nudge {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.4;
  }
  50% {
    transform: translateX(6px);
    opacity: 1;
  }
}
@media (max-width: 1280px) {
  .dev-detail .scroll-hint {
    display: flex;
  }
}
.dev-detail .consultant-label {
  display: block;
  min-height: 38px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #FFFAFA;
}
.dev-detail .consultant-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 10px;
  display: block;
}
.dev-detail .consultant-logo {
  width: 50%;
  margin: 0 auto 10px;
  display: block;
}
.dev-detail .consultant-logo.logo-4 {
  width: 60%;
}
.dev-detail .consultant-logo.logo-5 {
  width: 180px;
}
.dev-detail .consultant-logo.logo-6 {
  max-width: 70px;
}
.dev-detail .consultant-desc-group {
  min-height: 125px;
}
.dev-detail .consultant-desc {
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.5;
  margin-bottom: 0;
  color: white;
}
.dev-detail .consultant-desc:not(.desc-2) {
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1rem;
}
.dev-detail .consultant-desc.desc-2 {
  font-size: 10px;
}
.dev-detail .dev-pagination {
  position: absolute;
  top: 24px;
  right: 5rem;
  z-index: 3;
  display: flex;
  gap: 8px;
}
@media (max-width: 767px) {
  .dev-detail .dev-pagination {
    top: 16px;
    right: 16px;
  }
}
.dev-detail .dev-dot {
  width: 15px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.dev-detail .dev-dot.active {
  width: 35px;
  background: #ffffff;
}
.dev-detail .dev-nav-btn {
  position: absolute;
  z-index: 3;
  width: 36px;
  height: 36px;
  border: 1px solid #00504b;
  background: #00504B;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.dev-detail .dev-nav-btn:hover {
  border-color: #ffffff;
}
@media (max-width: 767px) {
  .dev-detail .dev-nav-btn {
    width: 34px;
    height: 34px;
  }
}
.dev-detail .dev-prev {
  right: 24px;
  bottom: calc(var(--header-height) + 64px);
}
@media (max-width: 991px) and (min-width: 768px) {
  .dev-detail .dev-prev {
    right: 64px;
    bottom: calc(var(--header-height) + 16px);
  }
}
.dev-detail .dev-next {
  right: 24px;
  bottom: calc(var(--header-height) + 20px);
}
.dev-detail .dev-back {
  position: absolute;
  left: 75px;
  bottom: calc(var(--header-height) + 20px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #ffffff;
  border: 1px #fff solid;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 0.5rem 1rem;
}
.dev-detail .dev-back:hover {
  background: #00504B;
}
.dev-detail .dev-back svg {
  justify-content: flex-start;
}
.dev-detail .dev-back i {
  font-size: 16px;
}
@media (max-width: 767px) {
  .dev-detail .dev-back {
    left: 16px;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.coming-soon {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #e6f0f0;
}
.coming-soon h1 {
  color: #00504B;
  font-size: clamp(38px, 3.5vw, 115px);
  width: 100%;
  text-align: center;
  font-family: "Boska", serif;
  padding-bottom: 140px;
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}
@media (min-width: 1200px) {
  .coming-soon h1 {
    letter-spacing: -4px;
  }
}
.coming-soon .wrapper {
  position: absolute;
  z-index: 3;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 992px) {
  .coming-soon .wrapper {
    width: 100%;
  }
}
@media (max-width: 991px) {
  .coming-soon .wrapper {
    padding: 1rem;
    max-width: 100%;
  }
}

#VueHeader.force-hide {
  transition: none !important;
  animation: none !important;
  display: none !important;
  opacity: 0;
}

.index-360-tour {
  overflow: hidden;
}

.cloud-container,
.bird {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.bird {
  position: absolute;
  z-index: 1040;
  top: 30px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bird #birdAnim svg {
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.25);
}

.cloud-container {
  position: absolute;
  z-index: 1045;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none !important;
}
@keyframes cloudRight {
  from {
    transform: translateX(-120%) translateZ(0);
  }
  to {
    transform: translateX(110vw) translateZ(0);
  }
}
@keyframes cloudLeft {
  from {
    transform: translateX(110vw) translateZ(0);
  }
  to {
    transform: translateX(-120%) translateZ(0);
  }
}
.cloud-container .cloud {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  will-change: transform;
  backface-visibility: hidden;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  pointer-events: none !important;
}
.cloud-container .cloud::after {
  content: "";
}
.cloud-container .cloud1 {
  background-image: url("../media/image/home/eff/clouds-1.png");
  width: 150px;
  height: 100px;
  top: 80px;
  opacity: 0.55;
  animation: cloudRight 50s -10s linear infinite;
}
.cloud-container .cloud2 {
  background-image: url("../media/image/home/eff/clouds-2.png");
  width: 550px;
  height: 200px;
  top: 0;
  opacity: 0.5;
  animation: cloudRight 60s -25s linear infinite;
}
.cloud-container .cloud3 {
  background-image: url("../media/image/home/eff/clouds-3.png");
  width: 200px;
  height: 100px;
  top: 100px;
  opacity: 0.45;
  animation: cloudRight 52s -38s linear infinite;
}
.cloud-container .cloud4 {
  background-image: url("../media/image/home/eff/clouds-1.png");
  width: 280px;
  height: 130px;
  bottom: 65%;
  opacity: 0.6;
  animation: cloudRight 58s -5s linear infinite;
}
.cloud-container .cloud5 {
  background-image: url("../media/image/home/eff/clouds-2.png");
  width: 650px;
  height: 300px;
  bottom: 75%;
  opacity: 0.5;
  animation: cloudRight 72s -30s linear infinite;
}
.cloud-container .cloud6 {
  background-image: url("../media/image/home/eff/clouds-3.png");
  width: 270px;
  height: 120px;
  bottom: 85%;
  opacity: 0.55;
  animation: cloudRight 56s -18s linear infinite;
}

.video-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.bg-video.active {
  opacity: 1;
}

.wave-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: -8%;
  right: 0;
  max-width: 80%;
  opacity: 0.9;
  filter: blur(0.5px);
  mix-blend-mode: multiply;
}

.wave-1 {
  animation: dapDiuWave 7s ease-in-out infinite;
}

.wave-2 {
  animation: dapDiuWave 11s ease-in-out infinite reverse;
  opacity: 0.3;
  bottom: -6%;
}

@keyframes dapDiuWave {
  0%, 100% {
    transform: translateY(15px) scaleY(0.8) scaleX(1);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-5px) scaleY(1.05) scaleX(1.02);
    opacity: 0.7;
  }
}
/* SCSS — flow chi show firs-page 1 lan khi vao 360-tour, sau thoi gian seting storage sẽ reset flow lai */
.first-page,
.end-page {
  display: none;
}

.first-page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}

.end-page {
  display: none;
}

.home-360-tour-web .first-page .logo.fixed-top {
  z-index: 1070 !important;
}
.home-360-tour-web .first-page .wrapper-video .bg-video {
  z-index: 1050 !important;
}
.home-360-tour-web .first-page .sound-toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.home-360-tour-web .first-page .sound-toggle:hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.8);
}
.home-360-tour-web .first-page .sound-toggle svg {
  width: 18px;
  height: 18px;
  color: #fff;
}
.home-360-tour-web .first-page .sound-toggle .icon-sound-off {
  display: none;
}
.home-360-tour-web .first-page .sound-toggle.is-muted .icon-sound-on {
  display: none;
}
.home-360-tour-web .first-page .sound-toggle.is-muted .icon-sound-off {
  display: block;
}
.home-360-tour-web .first-page .sound-control {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 1070;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: visible;
}
.home-360-tour-web .first-page .sound-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  outline: none;
  cursor: pointer;
}
.home-360-tour-web .first-page .sound-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.home-360-tour-web .first-page .sound-volume::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}
.home-360-tour-web .first-page .content {
  z-index: 1070 !important;
}
.home-360-tour-web .first-page .bg-overlay {
  z-index: 1060 !important;
  background: rgba(0, 0, 0, 0.35) !important;
}
.home-360-tour-web .first-page .step-info-your-home {
  z-index: 1070 !important;
  bottom: 100px;
  width: 300px;
  border-radius: 0;
  margin: auto;
  background: white;
  color: #00504B;
  cursor: pointer;
}
.home-360-tour-web .first-page .step-info-your-home:hover {
  background: #00504B;
  color: white;
}
.home-360-tour-web .end-page {
  /*      &.is-evening {
      .cloud-container,
      .bird,
      .wave-layer {
          opacity: 1;
      }
  }

  &.is-night {
      .wave-layer {
          opacity: 1;
      }
  }*/
}
.home-360-tour-web .end-page.is-morning .cloud-container,
.home-360-tour-web .end-page.is-morning .wave-layer {
  opacity: 1;
}
.home-360-tour-web .end-page.is-noon .bird,
.home-360-tour-web .end-page.is-noon .wave-layer {
  opacity: 1;
}
.home-360-tour-web .end-page.is-day .cloud-container,
.home-360-tour-web .end-page.is-day .bird,
.home-360-tour-web .end-page.is-day .wave-layer {
  opacity: 1;
}
.home-360-tour-web .end-page .timeframe {
  display: flex;
  cursor: pointer;
  user-select: none;
  gap: 6px;
  z-index: 999;
}
.home-360-tour-web .end-page .timeframe.dragging {
  cursor: grabbing;
}
.home-360-tour-web .end-page .timeframe .time-item {
  flex: 1;
  text-align: center;
  min-width: 120px;
  padding: 8px 16px;
  border-radius: 0;
  position: relative;
  transition: background 0.3s, color 0.3s, opacity 0.3s;
  color: #e6f0f0;
  backdrop-filter: blur(4px);
}
.home-360-tour-web .end-page .timeframe .time-item .name {
  display: block;
}
.home-360-tour-web .end-page .timeframe .time-item .hour {
  display: block;
  opacity: 0.7;
  display: none;
}
.home-360-tour-web .end-page .timeframe .time-item[data-time=morning] {
  background: #00504B;
  color: #ffffff;
  border: 2px #00504b solid;
  backdrop-filter: blur(4px);
}
.home-360-tour-web .end-page .timeframe .time-item[data-time=noon] {
  background: #00504B;
  color: white;
  border: 2px #00504B solid;
  backdrop-filter: blur(4px);
}
.home-360-tour-web .end-page .timeframe .time-item.active {
  opacity: 1;
  padding: 10px 16px;
}
.home-360-tour-web .end-page .timeframe .time-item.active[data-time=morning] {
  background: #00504B;
  color: #ffffff;
  border: 2px white solid;
  backdrop-filter: blur(4px);
}
.home-360-tour-web .end-page .timeframe .time-item.active[data-time=noon] {
  background: #00504B;
  color: white;
  border: 2px #ffffff solid;
  backdrop-filter: blur(4px);
}
.home-360-tour-web .end-page .timeframe .time-item.active[data-time=evening] {
  background: #00504B;
  color: white;
}
.home-360-tour-web .end-page .timeframe .time-item.active[data-time=day] {
  background: #cfe3e3;
  color: white;
}
.home-360-tour-web .end-page .timeframe .time-item.active[data-time=night] {
  background: #96826e;
  color: white;
}
.home-360-tour-web .end-page .timeframe .time-item::before {
  display: none;
}
.home-360-tour-web .end-page .timeframe .tf-dot {
  display: none;
}
.home-360-tour-web .end-page .timeframe-dot-flow {
  display: flex;
  cursor: pointer;
  user-select: none;
  gap: 0;
  z-index: 999;
}
.home-360-tour-web .end-page .timeframe-dot-flow.dragging {
  cursor: grabbing;
}
.home-360-tour-web .end-page .timeframe-dot-flow .time-item {
  flex: 1;
  text-align: center;
  padding-top: 12px;
  min-width: 100px;
  transition: opacity 0.3s;
  position: relative;
}
.home-360-tour-web .end-page .timeframe-dot-flow .time-item .name {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: white;
  color: #00504B;
  padding: 4px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, top 0.3s;
}
.home-360-tour-web .end-page .timeframe-dot-flow .time-item .name::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: white;
}
.home-360-tour-web .end-page .timeframe-dot-flow .time-item.active .name {
  opacity: 1;
  top: calc(100% + 8px);
}
.home-360-tour-web .end-page .timeframe-dot-flow .time-item .hour {
  display: none;
}
.home-360-tour-web .end-page .timeframe-dot-flow .time-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 10px;
  transition: height 0.3s, opacity 0.3s;
}
.home-360-tour-web .end-page .timeframe-dot-flow .time-item[data-time=morning]::before {
  background: #ffffff;
}
.home-360-tour-web .end-page .timeframe-dot-flow .time-item[data-time=noon]::before {
  background: #00504B;
}
.home-360-tour-web .end-page .timeframe-dot-flow .time-item[data-time=evening]::before {
  background: #00504B;
}
.home-360-tour-web .end-page .timeframe-dot-flow .time-item[data-time=day]::before {
  background: #cfe3e3;
}
.home-360-tour-web .end-page .timeframe-dot-flow .time-item[data-time=night]::before {
  background: #96826e;
}
.home-360-tour-web .end-page .timeframe-dot-flow .time-item.active {
  opacity: 1;
}
.home-360-tour-web .end-page .timeframe-dot-flow .time-item.active::before {
  height: 8px;
}
.home-360-tour-web .end-page .timeframe-dot-flow .tf-dot {
  position: absolute;
  top: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid #00504B;
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.home-360-tour-web .end-page .bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.home-360-tour-web .end-page .bg-image.active {
  opacity: 1;
}
.home-360-tour-web .end-page .wrapper-video {
  position: relative;
  overflow: hidden;
}
.home-360-tour-web .end-page .wrapper-video .time-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1000;
  color: white;
  pointer-events: none;
  font-style: italic;
}
.home-360-tour-web .end-page .wrapper-video .time-label .time-label-name {
  opacity: 0.9;
  transition: opacity 0.4s, transform 0.4s;
}
.home-360-tour-web .end-page .wrapper-video .time-label .time-label-namehour {
  opacity: 0.6;
  transition: opacity 0.4s 0.1s, transform 0.4s 0.1s;
}
.home-360-tour-web .end-page .wrapper-video .time-label.switching .time-label-namename, .home-360-tour-web .end-page .wrapper-video .time-label.switching .time-label-nameour {
  opacity: 0;
  transform: translateY(6px);
}
.home-360-tour-web .end-page .wrapper-video .video-placeholder,
.home-360-tour-web .end-page .wrapper-video .bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-360-tour-web .end-page .wrapper-video .bg-video {
  opacity: 0;
  transition: opacity 0.85s ease;
}
.home-360-tour-web .end-page .wrapper-video .bg-video.active {
  opacity: 1;
}
.home-360-tour-web .end-page .wrapper-video .bg-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: background 0.85s ease;
}
.home-360-tour-web .end-page .wrapper-video .bg-overlay.is-morning {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3));
}
.home-360-tour-web .end-page .wrapper-video .bg-overlay.is-noon {
  background: linear-gradient(to bottom, rgba(100, 50, 150, 0.4), rgba(40, 20, 80, 0.6));
  mix-blend-mode: multiply;
}
.home-360-tour-web .end-page .wrapper-video .bg-overlay.is-day {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(100, 50, 150, 0.01));
  mix-blend-mode: multiply;
}
.home-360-tour-web .end-page .wrapper-video .bg-overlay.is-evening {
  background: linear-gradient(to bottom, rgba(255, 180, 80, 0.25), rgba(255, 80, 0, 0.35));
  mix-blend-mode: multiply;
}
.home-360-tour-web .end-page .wrapper-video .bg-overlay.is-night {
  background: linear-gradient(to bottom, rgba(0, 40, 80, 0.5), rgba(0, 0, 30, 0.5));
  mix-blend-mode: multiply;
}
.home-360-tour-web .end-page .wrapper-video .container {
  position: relative;
  z-index: 1;
}
.home-360-tour-web .end-page .wrapper-video {
  position: relative;
  overflow: hidden;
}
.home-360-tour-web .end-page .wrapper-video .video-placeholder,
.home-360-tour-web .end-page .wrapper-video .bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-360-tour-web .end-page .wrapper-video .bg-video {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.home-360-tour-web .end-page .wrapper-video .bg-video.active {
  opacity: 1;
}
.home-360-tour-web .end-page .wrapper-video .container {
  position: relative;
  z-index: 1;
}
.home-360-tour-web a {
  outline: none;
  pointer-events: none;
}
.home-360-tour-web a:hover, .home-360-tour-web a:focus {
  outline: none;
}
.home-360-tour-web .logo {
  opacity: 0;
  animation: fadeInUp 1.5s ease-out forwards;
  animation-delay: 0.25s;
}
.home-360-tour-web .step {
  opacity: 0;
  transform: scale(1.2);
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.home-360-tour-web .step.show {
  opacity: 1;
  transform: scale(1);
}
.home-360-tour-web .step.step-svg.play {
  animation: svgFade 6s ease-in-out forwards;
}
.home-360-tour-web .step.step-svg.play path {
  stroke-dasharray: 2800;
  animation: pathBuild 6s ease-in-out both;
}
.home-360-tour-web .step.step-svg.play path:nth-child(1) {
  animation-delay: 0s;
}
.home-360-tour-web .step.step-svg.play path:nth-child(2) {
  animation-delay: 0.05s;
}
.home-360-tour-web .step.step-svg.play path:nth-child(3) {
  animation-delay: 0.1s;
}
.home-360-tour-web .step.step-svg.play path:nth-child(4) {
  animation-delay: 0.15s;
}
.home-360-tour-web .step.step-svg.play path:nth-child(5) {
  animation-delay: 0.2s;
}
.home-360-tour-web .step.step-svg.play path:nth-child(6) {
  animation-delay: 0.25s;
}
.home-360-tour-web .step.step-svg.play path:nth-child(7) {
  animation-delay: 0.3s;
}
.home-360-tour-web .step.step-svg.play path:nth-child(8) {
  animation-delay: 0.35s;
}
.home-360-tour-web .step.step-svg.play path:nth-child(9) {
  animation-delay: 0.4s;
}
.home-360-tour-web .step.step-svg.play path:nth-child(10) {
  animation-delay: 0.45s;
}
.home-360-tour-web .step.step-svg.play path:nth-child(11) {
  animation-delay: 0.5s;
}
.home-360-tour-web .step.step-svg.play path:nth-child(12) {
  animation-delay: 0.55s;
}
.home-360-tour-web h1, .home-360-tour-web h2 {
  color: white;
  letter-spacing: 2px;
}
.home-360-tour-web .title {
  opacity: 0;
  animation: fadeInUp 1.5s ease-out forwards;
  animation-delay: 0.25s;
}
.home-360-tour-web h1, .home-360-tour-web .title {
  font-size: clamp(38px, 4vw, 60px);
  font-family: "Boska";
  letter-spacing: 2px;
}
.home-360-tour-web h2 {
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 100;
}
.home-360-tour-web .head {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-360-tour-web .header {
  text-align: center;
  padding: 15px 0;
}
.home-360-tour-web .header .brand {
  display: flex;
  justify-content: center;
  position: relative;
}
.home-360-tour-web .header .brand.text img {
  height: clamp(70px, 10vw, 80px);
}
.home-360-tour-web .header .brand.icon svg {
  position: absolute;
  top: calc(50% + 40px);
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  height: clamp(60px, 10vw, 80px);
  width: auto;
  z-index: 2;
  overflow: visible;
  animation: none;
}
.home-360-tour-web .header .brand.icon svg path {
  fill: #fff;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-dasharray: 2800;
  stroke-dashoffset: 2800;
}
@keyframes svgFade {
  0%, 5% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  68% {
    opacity: 1;
  }
  /* giữ đồng bộ với pathBuild */
  90%, 100% {
    opacity: 0;
  }
}
@keyframes pathBuild {
  0%, 15% {
    stroke-dashoffset: 2800;
    fill-opacity: 0;
    stroke-opacity: 0;
  }
  20% {
    stroke-opacity: 1;
  }
  50% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  58% {
    fill-opacity: 1;
    stroke-opacity: 1;
  }
  /* hold, all path đứng im 1 nhịp (~0.8s với 7s) */
  68% {
    fill-opacity: 1;
    stroke-opacity: 1;
    stroke-dashoffset: 0;
  }
  /* sau đó mới ẩn */
  90% {
    stroke-dashoffset: 2800;
    fill-opacity: 0;
    stroke-opacity: 0;
  }
  100% {
    stroke-dashoffset: 2800;
    fill-opacity: 0;
    stroke-opacity: 0;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: scale(1.2);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.home-360-tour-web .wrapper-video {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.home-360-tour-web .wrapper-video .bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.home-360-tour-web .wrapper-video .bg-video.v1 {
  z-index: 2;
  opacity: 1;
}
.home-360-tour-web .wrapper-video .bg-video.v2 {
  z-index: 1;
  opacity: 0;
}
.home-360-tour-web .wrapper-video .video-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  filter: blur(15px);
  transition: opacity 0.5s ease;
}
.home-360-tour-web .wrapper-video.video-loaded .video-placeholder {
  opacity: 0;
  pointer-events: none;
}
.home-360-tour-web .wrapper-video .container {
  display: flex;
  justify-content: center;
}
.home-360-tour-web .wrapper-video .content {
  position: absolute;
  z-index: 3;
  max-width: 1440px;
  height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 992px) {
  .home-360-tour-web .wrapper-video .content {
    width: 100%;
  }
}
@media (max-width: 991px) {
  .home-360-tour-web .wrapper-video .content {
    padding: 1rem;
    max-width: 100%;
  }
}
.home-360-tour-web .wrapper-video .content h1 {
  position: absolute;
  text-align: center;
}
.home-360-tour-web .wrapper-video .content h2 {
  position: absolute;
  width: 100%;
  text-align: center;
}
.home-360-tour-web .wrapper-video .bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.bottom-control-panel {
  position: fixed;
  bottom: calc(var(--header-height, var(--header-height)) + 3rem);
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-height: 768px) {
  .bottom-control-panel {
    bottom: calc(var(--header-height, var(--header-height)) + 4rem);
  }
}

.bottom-toggle-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  /* Trạng thái BẬT (Active / ON) */
}
.bottom-toggle-btn .toggle-track {
  position: relative;
  width: 96px;
  height: 44px;
  background-color: #00504B;
  border-radius: 30px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  transition: background-color 0.3s ease;
  /* Nhãn chữ OFF và ON */
  /* Vòng tròn gạt (Thumb) - Mặc định nằm bên TẮT (Trái) */
}
.bottom-toggle-btn .toggle-track .text-off,
.bottom-toggle-btn .toggle-track .text-on {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  z-index: 1;
  width: 40%;
  text-align: center;
  transition: color 0.3s ease;
}
.bottom-toggle-btn .toggle-track .text-off {
  color: #00504B;
  z-index: 3;
}
.bottom-toggle-btn .toggle-track .text-on {
  color: rgb(255, 255, 255);
}
.bottom-toggle-btn .toggle-track .toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 36px;
  height: 36px;
  background: #e6f0f0;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
  z-index: 2;
}
.bottom-toggle-btn:not(.active) .toggle-track {
  background-color: #a09e9e;
}
.bottom-toggle-btn:not(.active) .toggle-track .text-off {
  color: rgb(255, 255, 255);
}
.bottom-toggle-btn:not(.active) .toggle-track .text-on {
  color: #00504B;
  z-index: 3;
}
.bottom-toggle-btn:not(.active) .toggle-track .toggle-thumb {
  /* Trượt sang phải */
  transform: translateX(52px);
  background: #e6f0f0;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}
.bottom-toggle-btn:hover {
  transform: scale(1.025);
}
.bottom-toggle-btn:active {
  transform: scale(1);
}

.right-icon-panel {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.light-item {
  position: relative;
  width: 72px;
  height: 72px;
  cursor: pointer;
}
.light-item .light-toggle-group {
  position: relative;
  width: 100%;
  height: 100%;
}
.light-item .icon-light-on,
.light-item .icon-light-off {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease;
}
.light-item .icon-light-on {
  opacity: 0;
  pointer-events: none;
}
.light-item .icon-light-off {
  opacity: 1;
}
.light-item.active .icon-light-on {
  opacity: 1;
}
.light-item.active .icon-light-off {
  opacity: 0;
}

.top-middle-nav {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.top-middle-nav .btn-view-beach-villas,
.top-middle-nav .go-back-beach-villas {
  min-width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}
.top-middle-nav.view-switch-buttons {
  display: flex;
  gap: 8px;
  z-index: 999;
}
.top-middle-nav.view-switch-buttons .switch-btn {
  flex: 1;
  text-align: center;
  padding: 9px 15px;
  min-width: max-content;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: #ffffff;
  border: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.95;
  transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.top-middle-nav.view-switch-buttons .switch-btn[data-view=overview] {
  background: #00504B;
}
.top-middle-nav.view-switch-buttons .switch-btn[data-view=beach] {
  background: #00504B;
}
.top-middle-nav.view-switch-buttons .switch-btn:hover {
  opacity: 0.85;
}
.top-middle-nav.view-switch-buttons .switch-btn.active {
  opacity: 1;
}
.top-middle-nav.view-switch-buttons .switch-btn[data-view=overview].active {
  border-color: #e6f0f0;
}
.top-middle-nav.view-switch-buttons .switch-btn[data-view=beach].active {
  border-color: #f3ece3;
}

.hs-pin {
  display: block;
  width: 48px;
  height: 48px;
  background: url("../hotspots/hotspot-icon.png") center/contain no-repeat;
  position: relative;
  cursor: pointer;
}
.hs-pin::before, .hs-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  animation: hs-pulse 2s ease-out infinite;
}
.hs-pin::after {
  animation-delay: 0.7s;
}

@keyframes hs-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
.tienich-page-wrapper #hs-popup:not(.is-open),
.tienich-page-wrapper #hs-popup-child:not(.is-open) {
  opacity: 0 !important;
  pointer-events: none !important;
}
.tienich-page-wrapper #hs-backdrop:not(.is-visible) {
  opacity: 0 !important;
  pointer-events: none !important;
}
.tienich-page-wrapper .hs-tooltip {
  position: fixed;
  z-index: 900;
  padding: 5px 13px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: rgba(0, 80, 75, 0.85);
  color: #fff;
}
.tienich-page-wrapper .hs-tooltip.is-visible {
  opacity: 1;
}
@media (hover: none) {
  .tienich-page-wrapper .hs-tooltip {
    display: none !important;
  }
}
.tienich-page-wrapper .hs-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}
@media (hover: none), (max-width: 768px) {
  .tienich-page-wrapper .hs-backdrop {
    background: rgba(0, 0, 0, 0.4);
  }
}
.tienich-page-wrapper .hs-backdrop.is-visible {
  opacity: 1;
  pointer-events: all;
}
.tienich-page-wrapper .hs-popup {
  position: fixed;
  z-index: 1062;
  width: 400px;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.24s ease;
}
.tienich-page-wrapper .hs-popup::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgb(255, 255, 255) 100%);
  pointer-events: none;
  z-index: 2;
}
.tienich-page-wrapper .hs-popup.is-open {
  opacity: 1 !important;
  pointer-events: all !important;
}
.tienich-page-wrapper .hs-popup .btn-close.close-modal {
  right: -35px;
  top: -15px;
}
.tienich-page-wrapper .hs-popup .card {
  border: none;
  max-height: 82vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tienich-page-wrapper .hs-popup .card .content {
  max-height: 250px;
  padding-bottom: 50px;
  overflow: auto;
}
@media (max-width: 768px) {
  .tienich-page-wrapper .hs-popup {
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    bottom: 0;
  }
  .tienich-page-wrapper .hs-popup .card {
    max-height: 82vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}
.tienich-page-wrapper .popup-swipe-bar {
  display: none;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  margin: 10px auto 4px;
}
@media (max-width: 768px) {
  .tienich-page-wrapper .popup-swipe-bar {
    display: block;
  }
}
.tienich-page-wrapper .hs-popup-child {
  position: fixed;
  z-index: 1100;
  width: 340px;
  margin-top: 30px;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.24s ease;
}
.tienich-page-wrapper .hs-popup-child.is-open {
  opacity: 1 !important;
  pointer-events: all !important;
}
.tienich-page-wrapper .hs-popup-child .card {
  border: none;
  max-height: 300vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  .tienich-page-wrapper .hs-popup-child {
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    bottom: 0;
  }
  .tienich-page-wrapper .hs-popup-child .card {
    max-height: 75vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}
.tienich-page-wrapper .hc-swiper {
  height: 220px;
}
@media (max-width: 600px) {
  .tienich-page-wrapper .hc-swiper {
    height: 180px;
  }
}
.tienich-page-wrapper .hc-swiper .swiper-slide img, .tienich-page-wrapper .hc-swiper .swiper-slide iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}
.tienich-page-wrapper .fnb-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tienich-page-wrapper .fnb-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.15s, padding-left 0.15s;
}
@media (hover: hover) {
  .tienich-page-wrapper .fnb-list-item:hover {
    padding-left: 26px;
  }
}
@media (hover: none) {
  .tienich-page-wrapper .fnb-list-item {
    padding: 15px 20px;
  }
}
.tienich-page-wrapper .fnb-list-item.is-active {
  padding-left: 26px;
}

#overview-modals .modal {
  z-index: 99999;
}
#overview-modals .modal-fullscreen {
  --modal-info-reserved-h: 150px;
  --modal-info-reserved-h-md: 170px;
}
@media (min-width: 1440px) {
  #overview-modals .modal-xl {
    max-width: 1300px;
  }
}
@media (min-width: 1600px) {
  #overview-modals .modal-xl {
    max-width: 1550px;
  }
}

/*#overview-modals {
    .modal {
        z-index: 99999;
    }

    .modal-fullscreen {
        .btn-close.close-modal {
            right: 65px;
            top: 25px;
        }

        .modal-content {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .modal-body {
            width: 100%;
            height: 100%;
            padding: 0;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        // image
        img {
            max-width: 100%;
            max-height: 65vh;
            object-fit: contain;
            display: block;
        }
        // video
        video {
            max-width: 100%;
            max-height: 80vh;
            object-fit: contain;
            display: block;
        }
        // iframe
        iframe {
            width: 100%;
            height: 100%;
            max-height: 80vh;
            border: 0;
        }

        * {
            box-sizing: border-box;
        }
    }

    .modal-xl {

        @media (min-width: 1440px) {
            max-width: 1300px;
        }

        @media (min-width: 1600px) {
            max-width: 1550px;
        }
    }

    .swiper-button-next,
    .swiper-button-prev {
        &::after {
            padding: 8px 15px;
            width: 40px;
            height: 40px;
            background: #fff !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            z-index: -1;
        }
    }

    .swiper-button-next {

        &::before {
            content: "";
            background: url(../images/next.png) no-repeat;
            background-size: contain;
            width: 100%;
            height: 100%;
        }
    }

    .swiper-button-prev {

        &::before {
            content: "";
            background: url(../images/pre.png) no-repeat;
            background-size: contain;
            width: 100%;
            height: 100%;
        }
    }

    .swiper-button-next, .swiper-rtl .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset,10px);
        left: auto
    }

    .swiper-button-next, .swiper-rtl .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset,10px);
        left: auto
    }

    .swiper-button-prev, .swiper-rtl .swiper-button-next {
        left: var(--swiper-navigation-sides-offset,10px);
        right: auto
    }

    .tab-pane {
        position: relative;
    }

    .wrap-box, .swiper-slide {
        max-width: 100%;

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
}*/
.isDisplay.location-page-wrapper .location-nav.active {
  display: none !important;
}
.isDisplay.tienich-page-wrapper .action-group.action-top, .isDisplay.tienich-page-wrapper .action-group.action-bottom, .isDisplay.tienich-page-wrapper .bottom-control-panel, .isDisplay.tienich-page-wrapper .info-box, .isDisplay .masterplan-page-wrapper .action-group.action-top, .isDisplay .masterplan-page-wrapper .action-group.action-bottom, .isDisplay .masterplan-page-wrapper .bottom-control-panel, .isDisplay .masterplan-page-wrapper .info-box {
  display: none !important;
}
.isDisplay.tienich-page-wrapper .btn-more, .isDisplay .masterplan-page-wrapper .btn-more {
  display: none !important;
}
.isDisplay .btn-more, .isDisplay .btn-view-gallery, .isDisplay .btn-enquire, .isDisplay .link-to-villas-vr-tour {
  display: none !important;
}