.navbar-nav {
  overflow-y: auto;
  overflow-x: auto;
  height: 77vh;
  scrollbar-width: none;
  display: block;
}





.box-search .dropdown-menu {

  padding: 8px;

  z-index: 9999;

  width: 300px;

}



@media (max-width: 767px) {

  .dropdown-menu-end[data-bs-popper] {

      right: 0;

      top: 40px;

  }

}



  .review-star .radio-group {

    display: flex;

    flex: 1;

  }



  .thongke_star_detail ul li {

    display: flex;

    align-items: center;

    justify-content: center;

  }

  /*  */





  .nav_menu .nav-item{

    border: none;

                  }



                  .nav_menu .nav-item a{



    text-align: left;

                  }



  .offcanvas-body{

    overflow: visible;

  }

  .dropdown-menu{

    background: transparent;

  }

  .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {

    /* color: #fff; */

    background: #fff;

  }

  .nav-link{

    text-align: center;

  }

  .offcanvas{

    background-color: transparent;

  }



  #mySidenav{

    color: #fff;

  }

  img{

      max-width: 100%;

  }

  .navbar-toggler:focus {
    box-shadow: unset;
    outline: unset;
  }

  .offcanvas.offcanvas-start

  {

      width: 200px;

  }
  .offcanvas.offcanvas-start .closebtn {
    display: none;
  }
  .offcanvas.offcanvas-start.show .closebtn {
    display: block;
  }

  .nav-main{

      display: flex;

  }

  .nav-item{

    font-size: 13px;

      /* padding: 2px 6px; */

      margin: 10px;

      list-style: none;

      border: 1px solid #fff;

      border-radius: 20px;

      text-transform: uppercase;

  }





  .navbar-toggler-icon {

    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

  }

  .navbar-toggler{

    border: none;

  }

  .language-switch a{
    line-height: 25px;
    padding: 5px;    
    color: #fff;
  }
  .gtranslate_wrapper>.glink:first-of-type {

    line-height: 25px;

    padding: 5px;

  

  }

  .nav-item> .gtranslate_wrapper >a{

    color: #fff;

    padding: 5px;

  }

  
  .language-switch{

    border: 1px solid #F36F25;

    border-width: 2px;



  }

  .button-bottom-home{

    background: transparent;

    z-index: 100;

    position: absolute;

    /* top: 90%; */

    bottom: 2%;

    right: 40%;

  }

  #playButton{

    background: transparent;z-index: 100;

    /* position: absolute;top: 90%;right: 15%; */

  }



  #homeButton{

    background: transparent;

    z-index: 100;

    /* position: absolute;

    top: 90%;

    right: 12%; 

    transform: translateX(50%);  */

  }

  #musicButton{

    background: transparent;

    z-index: 100;

    /* position: absolute;

    top: 90%;

    right: 14%;  */

    /* Đặt nút lệch khỏi bên phải 50% chiều ngang */

    /* transform: translateX(50%);  */

    /* Dịch chuyển ngược lại 50% để căn giữa */

  }

  .ggskin_external_img{

    position: absolute; -webkit-user-drag: none; pointer-events: none; width: 964px; left: 50%; margin-left: -482px; bottom: 0px;

  }

  .btnf {



    border: 0px solid rgb(0, 0, 0);

      bottom: calc(50% - 100px);

      color: rgb(255, 255, 255);

      cursor: pointer;

      height: 55px;

      left: calc(50% - 120px);

      position: absolute;

      visibility: inherit;

      width: 240px;

      pointer-events: auto;

      transform-origin: 50% 50%;

      transition: left, bottom, transform;

      transform: translate(0px, 0px) rotate(0deg) scale(1, 1);



    /* width: 150px;

    height: 60px; */

    border-radius: 50px;

    background-image: linear-gradient(135deg, #83f7d5 0%, #00e8ff 100%);

    box-shadow: 0 20px 30px -6px rgba(54, 238, 214, 0.5);

    outline: none;

    /* cursor: pointer;

    border: none;

    font-size: 24px;

    color: white; */

  }

  .btnf:hover {

    

    transform: scale(1.1) translateY(3px) !important;

    box-shadow: none;

  }



  .ggskin {

    line-height: normal;

    /* font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size: 14px; */

  }


  #pano >div {
/*    opacity: 0;*/
  }
  #pano> #bg_mobi{

    display: none;

  }

  #pano> #bg_pc{

    width: 100%;

    /* height: 100vh; */

  }

  @media(max-width: 676px)

  {



    




  .navbar  
      .navbar-nav-main{

        padding-left: 1px;
        width: 100%;
        justify-content: space-between;

      }
      

      #company-infoinforeview{

        width: 90%;

      }

      .dropdown{

        padding: 2px 4px;

    }

    .info{

      padding-left: 4px;

      padding-right: 4px;

    }

    .popup {
      max-width: 80%;
    }

    .fixed-top {
/*      max-width: 96%;*/
    }
  }



 

  @media(max-width: 767px)

  {

    .navbar-nav .dropdown-menu

    {

      /* top: 0px; */

    }

    .ggskin_external_img

    {

      left: auto;

      margin-left: 0;

    }

    #pano> #bg_mobi{

      display: block;

      width: 100%;

      height: 100vh;

    }

    #pano> #bg_pc{

      display: none;

    }

  

    .button-bottom-home {

      background: transparent;

      z-index: 100;

      position: absolute;

      /* top: 86%; */

      top: 95%;

      bottom: auto;

      /* right: 50%;  */

      right: 32%;

      transform: translateX(50%);

  }

    #playButton{

      /* background: transparent;

      z-index: 100;

      position: absolute;

      top: 87%;

      right: 50%; 

      transform: translateX(50%);  */

    }



  

    .vka-wheel {

    

      right: 40px;

    

  }



    .vka-checkbox:checked~.vka {

    

      right: 40px;

    

  }



    .vka {

    

      right: 40px;

    

  }

    .container-contact 

    {

      width: 100% !important;

    }



    .modal-content{

      transform:  translate(0, 50px) rotate(0deg);

    }

    .offcanvas.offcanvas-start {

/*      width: 150px;*/

      /* height: 100vh; */

  }



    .container-fluid{

      padding-left: 0;

      flex-wrap: nowrap !important;

      /* padding-right: 0; */

      justify-content: flex-start !important;

    }

   

    .navbar-toggler{

      padding-right:0;
      font-size: 16px;

    }

    .nav-item{

      /* padding: 2px 4px; */

      font-size: 12px;

      margin: 3px;

      list-style: none;

      /* border: 1px solid #fff; */

      border-radius: 20px;

      text-transform: uppercase;

  }

  }





  .row-footer{

    position: absolute;

    top: 95%;

    left: 50%;

    transform: translate(-50%, -50%);

  }

  .row-img{

    position: absolute;

    top: 85%;

    left: 50%;

    transform: translate(-50%, -50%);

  }

  /* slider */
  .slider .swiper-slide img {
    width: 100%;
  }

  .iframe-container {

    height: 100vh; /* Hoặc bất kỳ chiều cao nào bạn muốn */

    overflow: hidden;

  }

  iframe {

    width: 100%;

    height: 100%;

    border: none;

  }

  

  /* Position the image container (needed to position the left and right arrows) */

  .container {

    z-index: 10;

    /* position: relative; */

  }

  

  /* Hide the images by default */

  .mySlides {

    display: none;

  }

  

  /* Add a pointer when hovering over the thumbnail images */

  .cursor {

    cursor: pointer;

  }

  

  /* Next & previous buttons */

  .prev,

  .next {

    cursor: pointer;

    position: absolute;

    top: 40%;

    width: auto;

    padding: 16px;

    margin-top: -50px;

    color: white;

    font-weight: bold;

    font-size: 20px;

    border-radius: 0 3px 3px 0;

    user-select: none;

    -webkit-user-select: none;

  }

  

  /* Position the "next button" to the right */

  .next {

    right: 0;

    border-radius: 3px 0 0 3px;

  }

  

  /* On hover, add a black background color with a little bit see-through */

  .prev:hover,

  .next:hover {

    background-color: rgba(0, 0, 0, 0.8);

  }

  

  /* Number text (1/3 etc) */

  .numbertext {

    color: #f2f2f2;

    font-size: 12px;

    padding: 8px 12px;

    position: absolute;

    top: 0;

  }

  

  /* Container for image text */

  .caption-container {

    text-align: center;

    background-color: #222;

    padding: 2px 16px;

    color: white;

  }

  

  .row:after {

    content: "";

    display: table;

    clear: both;

  }

  

  /* Six columns side by side */

  .column {

    float: left;

    width: 16.66%;

  }

  

  /* Add a transparency effect for thumnbail images */

  .demo {

    opacity: 0.6;

  }

  

  .active,

  .demo:hover {

    opacity: 1;

  }

  /* slider */

  .field_scene input{

    border: 1ps solid black;

  }





  /* popup */



  .btnclosen {

    position: absolute; /* Định vị tuyệt đối trong .container */

    /* top: 10px;  */

    /* right: 10px;  */



    right: -10px;

    top: 20px;

    z-index: 1001; /* Đảm bảo nút nằm trên container */

    cursor: pointer; /* Con trỏ chuột sẽ thay đổi khi di chuột qua nút */

  }

















  .modal-body::-webkit-scrollbar {

    display: none; 

  }

  .modal-title{

    display: block;

    font-size: 1.5em;

    margin-block-start: 0.83em;

    margin-block-end: 0.83em;

    margin-inline-start: 0px;

    margin-inline-end: 0px;

    font-weight: bold;

    unicode-bidi: isolate;

  }

  #review-detail p{

    color: #000;

  }

.popup-content {
  position: absolute;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.booking-content,
.product-info-popup,
#company-infoinforeview {
  
  
}

.popup-content.active{
  z-index: 999;
  opacity: 1;
  visibility: visible;
}

#company-infoinforeview.popup-content {
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#company-infoinforeview.popup-content.active {
  top: 50%;
}

.product-info-popup {
  top: 5%;
  right: 20%;
  width: 400px;
  height: 400px;
  color: #fff;
  background: none rgba(0, 0, 0, 0.5);
}
.product-info-popup.popup-content.active {
  top: 20%;
}
.product-info-popup .info-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-info-popup .info-top {
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  border-bottom: 1px solid #fff;
}
.product-info-popup .info-middle {
  overflow-y: auto;
  height: 100%;
}

.booking-content.popup-content {
  width: 365px;
  max-height: 550px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -54%);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
  background: linear-gradient(to right bottom, #9e66c6, #6027e1);
}
.booking-content.popup-content.active {
  top: 50%;
}

.contact-popup {
  width: 470px;
  max-width: 90%;
  padding: 25px;
  background: none rgba(0, 0, 0, 0.8);
}
.contact-popup.popup-content {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.contact-popup .form-control {
  background: unset;
  color: #fff;
}

.walkthrough .walkthrough-footer {
    display: flex;
    flex: 0 0 auto;
    justify-content: space-around;
    padding: 0;
    flex-direction: row-reverse;
}
.walkthrough .walkthrough-footer button {
    height: 40px;
    border: 0;
    background: #5da3f2;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-radius: 0;
    color: white;
    flex: 1;
    font-size: 12px;
    padding: 12px;
  }

.walkthrough .walkthrough-footer button.book-tour {
    background: #fc8803 !important;
}
/* width */
.product-info-popup .info-middle::-webkit-scrollbar {
    width: 1px;
}

/* Track */
.product-info-popup .info-middle::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* Handle */
.product-info-popup .info-middle::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.booking-content .swiper-button-next:after,
.booking-content .swiper-button-prev:after {
  color: #fff;
  font-size: 30px;

}

  @media (min-width: 1200px) {



    .box-search{

      margin: 10px;

      list-style: none;

     

     

    }



      #company-infoinforeview{

        width: 80%;

      }



      #reviewModal .modal-content{

        width: 90%;

        transform:  translate(50px, 50px) translate(200px, -200px) rotate(0deg) translate(-200px, 200px);

      }

      .modal-content{

        position: absolute;

        z-index: 3001;

        overflow: visible;

        opacity: 1;

        background: none rgba(0, 0, 0, 0.5);

        cursor: pointer;

        pointer-events: auto;

        box-shadow: rgba(255, 255, 255, 0.3) 0px 4px 10px 0px;

        border-style: solid;

        border-color: rgb(0, 0, 0);

        border-width: 0px;

        border-radius: 0px;

        width: 400px;

        height: 400px;

        transform: translateZ(1e+12px) translate(468px, 50px) translate(200px, -200px) rotate(0deg) translate(-200px, 200px);

      }

  }

@media(max-width: 990px)
{
  .product-info-popup{
    right: unset;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
  }
}







.btn-close{

  z-index: 3001;

  overflow: visible;

  opacity: 1;

  cursor: pointer;

  pointer-events: auto;

  background: url(https://phuyensmile.com/assets/images/floorplan_close.png) 0px 0px / 35px 35px no-repeat;

  border-style: solid;

  border-color: rgb(0, 0, 0);

  border-width: 0px;

  border-radius: 0px;

 position: absolute;
 top: 5px;
 right: 5px;

  

}

.modal-body{

  scroll-behavior: smooth; /* Tạo hiệu ứng cuộn mượt mà nếu có hỗ trợ */

  margin: 2px 2px 2px 2px;

  text-align: justify;

  font-style: italic;

  font-size: 12pt;

  color: #FFFFFF;

  padding-left: 5px;

  padding-right: 5px;

  /* display: block !important; */

}





.modal-body {

  overflow-y: auto;

}

.modal-header {

  padding: 0 10px;

}



/* .offcanvas-backdrop.show{

  opacity: 0;

} */









.modal-content{

  

  z-index: 3001;

  overflow: visible;

  opacity: 1;

  background: none rgba(0, 0, 0, 0.5);

  cursor: pointer;

  pointer-events: auto;

  box-shadow: rgba(255, 255, 255, 0.3) 0px 4px 10px 0px;

  border-style: solid;

  border-color: rgb(0, 0, 0);

  border-width: 0px;

  border-radius: 0px;

  height: 400px;

  

}









.container-contact {

  padding: 25px;

  background: none rgba(0, 0, 0, 0.5);

  display: block;

  opacity: 1;

  position: absolute;

  left: 50%;

  width: 465px;

  top: 50%;

  transform: translate(-50%, -50%);

  /* transform: translate(-50%, -54%); */

  transition: opacity 0.5s ease;

  -webkit-transition:all 0.5s ease;

  -moz-transition:all 0.5s ease;

}

.form-group{

  font-weight: 700;

}

.form-group input, .form-group textarea {

  /* background: #ededed; */





  height: 46px;

  color: #000;

  line-height: 46px;

  border-radius: 0;

  padding: 0 20px;

}

.form-group:not(:last-child) {

  margin-bottom: 15px;

}

.btn-send button {

  width: 100%;

  background: #fc8803;

  color: #fff;

  font-weight: 700;

  text-transform: uppercase;

  font-size: 20px;

  line-height: 26px;

  padding-top: 13px;

  padding-bottom: 13px;

  border-radius: 0;

}

.form-group textarea {

  height: 109px;

}



/*  */





#review-detail{

  overflow: hidden;

  height: 250px;

  overflow-y: auto;

}

.review-detail{

  color: #000;

}

.thongke_star{

  color: #000;

}

/*  */



.wishlist-button {

  border: none;

  background: transparent;

  padding: 0;

}

a {

  text-decoration: none;

  color: #000;

}

.ic-heart-o {

  width: 15px;

  height: 18px;

  display: block;

  background: url(../img/ic-heart-o.png) no-repeat;

  background-size: 100%;

}

.ic-heart {

  width: 15px;

  height: 18px;

  display: block;

  background: url(../img/heart.png) no-repeat center center;

  background-size: 100%;

}

.gtranslate_wrapper select{
    font-weight: 700;
    font-size: 1.5rem;
    background: transparent;
    border: none;
}


.skiptranslate,
#goog-gt-tt,
.goog-te-banner-frame.skiptranslate {
    display: none !important;
} 
body {
    top: 0px !important; 
}
.goog-logo-link {
    display:none !important;
}
.trans-section {
    margin: 100px;
}


/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader1 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #fff;

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

#preloader1 h5{
    margin-top: 15px;
    font-size: 26px;
    color: #000;
}
#preloader1 h5 span.fast-flicker{
    color: #000;
}

img.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
img.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
.loading-text {
    font-size: 24px;
    font-weight: bold;
    color: #1914ff;
}
.dots::after {
    content: '';
    display: inline-block;
    width: 1em;
    text-align: left;
    animation: dots 0.5s steps(4, end) infinite;
}
@keyframes dots {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.';
    }
    60% {
        content: '..';
    }
    80%, 100% {
        content: '...';
    }
}