/*========= new layout - layout 3 (setting layout 1) ===========*/
.header-nav .nav > li{text-transform:capitalize}
.ui3-main-header .header-nav .nav > li > a{font-size:1.1rem; color:#ffffff; font-weight: bold}
@media only screen and (max-width:996px) {
   .ui3-main-header .header-nav .nav > li > a {
       color:#071021;
   }
}
.ui3-main-header .header-nav .nav > li > a:hover {font-size:1.1rem; color:#105F6B}
.ui3-main-header .color-fill .header-nav .nav > li > a{color:#ffffff}
.ui3-main-header .color-fill .header-nav .nav > li:hover > a:hover,.ui3-main-header .color-fill .header-nav .nav > li:hover > a{color: #105F6B;}
.ui3-main-header.site-header .sticky-wrapper .main-bar {height:99px; background-color:transparent}
.site-header.ui3-main-header .sticky-wrapper .is-fixed .logo-header{max-height:160px; height:160px; padding:15px; width:auto; border-radius:5px; margin-top:20px}
.ui3-main-header .logo-header img {max-width: 100%; width: auto; max-height: 100%; border-radius:0px; min-width:120px}
.ui3-main-header .sticky-wrapper .main-bar .header-nav{ justify-content:flex-end; align-items:center}

.ui3-main-header.site-header .sticky-wrapper .is-fixed .main-bar{background-color:transparent;  box-shadow:none;  }
.ui3-main-header.site-header .sticky-wrapper .is-fixed.color-fill .main-bar{z-index:1001; height:70px;background-color:#323839; background-image:none; box-shadow:0px 1px 6px #0000006e; }
.ui3-main-header .sticky-wrapper .is-fixed .main-bar .container{background-color:transparent}
.ui3-main-header .header-botton .header-nav .nav {float:none;}
.ui3-main-header .header-botton .header-nav .nav > li > a {padding:6px 20px; border-radius:20px; }
.site-header.ui3-main-header .sticky-wrapper .is-fixed.color-fill .logo-header {background:#ffffff; max-height:60px; height:60px; margin-top:0px; padding:0px 5px}
.site-header.ui3-main-header .sticky-wrapper .is-fixed.color-fill .logo-header img{min-width:60px}
.ui3-main-header .header-botton .extra-nav {padding: 13px 0;}
.ui3-main-header .extra-nav a{white-space:nowrap; transition:none}
.ui3-main-header .header-botton .extra-nav .site-search-btn {color:#fff;padding:7px 15px;}
.ui3-main-header .header-botton .extra-nav .wt-cart .woo-cart-count {border: 2px solid #fff;color: #fff; min-width:36px; padding: 5px 5px 5px;}
.ui3-main-header .header-botton .extra-nav .wt-cart .woo-cart-count::before { border-color:#fff;}

.ui3-main-header .group-btn-header{display:flex; align-items:center}
@media only screen and (max-width:1280px) {
    .ui3-main-header .sticky-wrapper .is-fixed .logo-header{ max-height:130px; height:130px; padding:5px 5px 0px 5px; min-width:120px; z-index:1}
    .ui3-main-header .sticky-wrapper .is-fixed .logo-header img{max-height:99px; height:99px; min-width:90px;}
    .ui3-main-header .sticky-header.main-bar-wraper.is-fixed.color-fill .logo-header{ max-height:60px; height:60px; min-width:auto}
    .ui3-main-header .sticky-header.main-bar-wraper.is-fixed.color-fill .logo-header img{ max-height:60px; height:60px; min-width:auto}

}
@media only screen and (max-width:1240px) {
.ui3-main-header .header-botton .navbar-toggle { float:left;margin:9px 0;}
.ui3-main-header .header-botton .navbar-toggle span { background-color:#fff;}
.ui3-main-header .header-botton .header-nav .nav > li > a {	padding:12px 12px;color:#777;}
/*.ui3-main-header.header-style-1 .color-fill .navbar-toggler .icon-bar{background:#ffffff}*/
.ui3-main-header .color-fill .header-nav.navbar-collapse.collapse .nav > li > a{color:#071021}
.ui3-main-header .group-btn-header .booking{margin-right:15px}
.ui3-main-header .sticky-wrapper .is-fixed .logo-header{max-height:140px; height:140px; }
}

@media only screen and (max-width:767px) {
.ui3-main-header .sticky-header.main-bar-wraper.is-fixed.color-fill{
    top: 0px;
    position: fixed;
    left: 0px;
    width: 100%;
}
    .ui3-main-header .is-fixed .main-bar{position:relative}
    .ui3-main-header .header-middle .logo-header {
        float:none;margin:9px auto;

    }
    .ui3-main-header .sticky-wrapper .is-fixed .logo-header{ max-height:120px; height:120px; padding:5px 5px 0px 5px; min-width:120px; z-index:1}
    .ui3-main-header .sticky-wrapper .is-fixed .logo-header img{max-height:80px; height:80px; min-width:60px;}
    .ui3-main-header .sticky-header.main-bar-wraper.is-fixed.color-fill .logo-header{ max-height:60px; height:60px; min-width:auto}
    .ui3-main-header .sticky-header.main-bar-wraper.is-fixed.color-fill .logo-header img{ max-height:60px; height:60px; min-width:auto}
    .ui3-main-header .extra-nav.booking .hide-mobile{width:44px; padding-left:0px; padding-right:0px; justify-content:center}
    .ui3-main-header .extra-nav.booking .hide-mobile a i{margin-right:0px}
    .ui3-main-header .extra-nav.booking .hide-mobile a span{display:none}
}

/*========= kingston layout - layout 1  ===========*/
.ui3-main-header .sticky-wrapper .is-fixed .logo-header2{height:auto; padding:10px; min-height:50px}
.ui3-main-header .sticky-wrapper .is-fixed .logo-header2 img{height:auto; border-radius:0px;min-height:50px}
.site-header .sticky-wrapper .is-fixed.color-fill .logo-header{height:auto; padding-top:5px; padding-bottom:5px}
@media only screen and (max-width:1280px) {
    .ui3-main-header .sticky-wrapper .is-fixed .logo-header2{ height:auto; }
    .ui3-main-header .sticky-wrapper .is-fixed .logo-header2 img{ height:auto;}
    .ui3-main-header .sticky-header.main-bar-wraper.is-fixed.color-fill .logo-header2{  height:auto;}
    .ui3-main-header .sticky-header.main-bar-wraper.is-fixed.color-fill .logo-header2 img{ height:auto;}
}
@media only screen and (max-width:991px) {
.ui3-main-header .sticky-wrapper .is-fixed .logo-header2{ height:auto; }
}

@media only screen and (max-width:767px) {
    .ui3-main-header .sticky-wrapper .is-fixed .logo-header2{ height:auto;max-width:180px; margin-top:10px}
    .ui3-main-header .sticky-wrapper .is-fixed .logo-header2 img{ height:auto;}
    .ui3-main-header .sticky-header.main-bar-wraper.is-fixed.color-fill .logo-header2{ height:auto; max-width:180px}
    .ui3-main-header .sticky-header.main-bar-wraper.is-fixed.color-fill .logo-header2 img{ height:auto;}
}

/*========= the best beauty layout - layout 1  ===========*/
.ui3-main-slider .ui3-main-slider-txt { position: sticky; top: 0; left: 0;  max-width: none !important; width: 100%; height: 100vh}
/*.ui4-main-slider .ui3-main-slider-txt{top:0px; left:calc(50% - 660px); max-width:1320px; height:700px}*/
.ui4-main-slider .ui3-main-slider-txt .inner{max-width:100%; margin-top:-12px; padding-bottom: 0; height: 100vh}
.ui3-main-slider {
  max-height: 100vh !important;
  height: 100vh;
}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper{height:100vh}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .row{width:100%; }
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .row .text{ padding-left:20%; justify-content: center;}
/*.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .container-fluid{padding-left:0rem; padding-right:4rem; padding-bottom:2rem}*/
.ui4-main-slider .ui3-main-slider-txt .inner .swiper .swiper-button-next{width:50px; height:50px; position: absolute !important; top: 40%!important; color:var(--site-primary-color)}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper .swiper-button-prev{width:50px; height:50px; position: absolute !important; top: 40%!important; left: 10px !important; color:var(--site-primary-color)}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper .swiper-button-next:after,
.ui4-main-slider .ui3-main-slider-txt .inner .swiper .swiper-button-prev:after{
    font-size:24px;  border-radius:100px; width:50px; height:50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper .swiper-button-next:hover:after,
.ui4-main-slider .ui3-main-slider-txt .inner .swiper .swiper-button-prev:hover:after{
     background:#f8f8f8;
}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .text{display:flex; flex-direction:column; font-size:24px; height:100%; text-align:left; line-height:120%}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .text h1{font-size: 3.2vw;
  background: -webkit-linear-gradient(#fff, #fff, #b1b1b1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .text p {
  font-weight: 200;
  font-size: 2rem;
  color: #fff;
  margin-bottom: 50px;
}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left{height:98%; margin-top:0px}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside{background:#fff; padding:4px; border-radius:1rem; box-shadow:0px 0px 6px #0000004d; display:unset; margin:0.5rem 1rem; width:100%}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside > div {height:100%; flex-direction:column; overflow: hidden;border-radius:1rem!important;}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside video{max-height:100%; object-fit: cover; min-height:100%; border-radius:1rem!important;}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside img{object-fit:cover; height:100%}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper .swiper-pagination{position:absolute!important; bottom:0px; left:46% !important}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper .swiper-pagination-bullet-active{background:var(--site-primary-color)}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside .vjs-control-bar{position: absolute !important; background-color: #00000059;}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside .vjs-progress-control{display:none}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside .vjs-play-control{justify-content:center}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside .vjs-play-control .vjs-icon-placeholder{width:30px}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside .vjs-mute-control{justify-content:center}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside .vjs-control-bar .vjs-icon-placeholder{width:30px}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside .vjs-control-bar .vjs-picture-in-picture-control{justify-content:center}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside .vjs-control-bar .vjs-fullscreen-control{justify-content:center}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside .vjs-control-bar .vjs-seek-to-live-control{display:none!important}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside .vjs-control-bar .vjs-remaining-time{display:none!important}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside .vjs-control-bar div, .ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside .vjs-control-bar button{padding-left:0.5rem; padding-right:0.5rem}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside .vjs-control-bar  .vjs-control{width:50px}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside .vjs-control-bar .vjs-time-divider{width:16px; padding-left:0px; padding-right:0px; min-width:16px}
.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside .vjs-control-bar .vjs-custom-control-spacer.vjs-spacer {display:none!important}
.swiper-pagination-bullet{width:12px!important; height:12px!important; background:#fff!important; margin-left:1rem; opacity:0.5!important}
.swiper-pagination-bullet-active{background:var(--site-primary-color)!important; }

@media only screen and (max-width:1280px) {
    .ui4-main-slider .ui3-main-slider-txt{left:calc(50% - 570px); max-width:1140px; }
}

@media only screen and (max-width:992px){
    .ui4-main-slider{height:780px; min-height: 780px;}
    .ui4-main-slider .img-banner img{min-height: 780px; height: 78px;}
    .ui4-main-slider .ui3-main-slider-txt{ left:calc(50% - 360px); max-width:720px; height:780px}
    .ui4-main-slider .ui3-main-slider-txt .inner{margin-top:80px}
    .ui4-main-slider .ui3-main-slider-txt .inner .swiper{height:650px}
    /*.ui3-main-slider .ui3-main-slider-txt .inner .tp-caption{justify-content:center}*/
    .ui4-main-slider .ui3-main-slider-txt .inner .swiper .swiper-button-next, .ui4-main-slider .ui3-main-slider-txt .inner .swiper .swiper-button-prev{display:none}
    .ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .container-fluid{padding-left:2rem; padding-right:2rem; justify-content:center; padding-bottom:0.5rem}
    .ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .row{display:flex; flex-flow:column-reverse; justify-content:flex-end}
    .ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .row .text {
        justify-content: start;
        margin-top: 50px;
        
    }
    .ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .row .text h1 {
        font-size: 26px;
        margin-bottom: 12px;
    }
    .ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .row .text p {
        font-size: 18px;
        margin-bottom: 8px;
    }
    /*.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left{ height:380px; margin-top: 0.8rem;}*/
    /*.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .text{height:auto; padding-bottom:0px; margin-top:0px; padding-top:0px}*/
    /*.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .row .text h1{font-size:1.5rem; text-align:center; display:flex; justify-content:center; margin-top:10px}*/
    /*.ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .row .text p{text-align:center; display:flex; justify-content:center}*/
    .ui4-main-slider .ui3-main-slider-txt .inner .swiper .swiper-pagination{bottom:10px}
}

@media only screen and (max-width:600px){
    .ui4-main-slider .img-banner{justify-content:center}
    .ui4-main-slider .ui3-main-slider-txt{ left:0px; max-width:100%; }
    .ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left{ height:280px; margin-top: 0.5rem;}
    .ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .container-fluid{padding-left:0rem; padding-right:0rem}
    .ui4-main-slider .ui3-main-slider-txt .inner .swiper .swiper-pagination{left:43% !important}
    .ui4-main-slider .ui3-main-slider-txt .inner .swiper-slide .swiper-slide-left .inside .vjs-control-bar .vjs-seek-to-live-control{display:none!important}


}


/* social-section */
.social-section{position:fixed; bottom:5.5rem; width:100px; left:calc(100% - 80px); z-index:1000;}
.social-section .section-container{padding-top:0px; padding-bottom:0px}
.social-section ul{display: flex; justify-content:flex-end;
    flex-direction:column;
        margin-top: 0px;
        gap:0rem
}
.social-section ul li{display: flex; gap:0.8rem; margin-bottom:0.5rem }
.social-section ul li a{
    display:flex; justify-content:center; align-items:center; gap:0.5rem; flex-direction:row;
    border: 1px var(--site-primary-color) solid;
    width:50px; height:50px;
    border-radius: 30px;
    background-color:#ffffff;
    box-shadow:1px 1px 3px #00000042;
}
.social-section ul li a .fa{font-size:20px}
.social-section ul li a .text{display:none; flex-direction:column; }

@media only screen and (max-width:992px) {
    .social-section ul{margin-right:0px; margin-top:2rem}
}

.social-section .zalo img{width:30px; height:auto}
.social-icons{display:flex}
.social-icons a{font-size:18px}
.social-icons .zalo img{width:16px; height:16px}
@media only screen and (max-width:992px) {
    .social-icons{justify-content:center}
}