:root {
    --primary-color:  #ff3366;
    --secondary-color:  #fedd5b;
    --heading-margin: 40px 0;
}

@font-face {
  font-family:'montserrat';
  src:url(../fonts/Montserrat-Regular.ttf) format('truetype'); 
  font-weight: normal;
  font-style: normal;
  font-display: auto;
}
 
@font-face {
  font-family:'montserrat';
  src:url(../fonts/Montserrat-Bold.ttf) format('truetype'); 
  font-weight:bold;
  font-style: normal;
    font-display: auto;
}


 .wow {animation-duration: 1s !important;}
.delay100 {animation-delay: 100ms;}
.delay200 {animation-delay: 200ms;}
.delay300 {animation-delay: 300ms;}
.delay400 {animation-delay: 400ms;}
.delay500 {animation-delay: 500ms;}
.delay600 {animation-delay: 600ms;}
.delay700 {animation-delay: 700ms;}
.delay800 {animation-delay: 800ms;}
.delay900 {animation-delay: 900ms;}
.delay1000 {animation-delay: 1000ms;} 
.delay1100 {animation-delay: 1100ms;} 
.delay1200 {animation-delay: 1200ms;} 
.delay1300 {animation-delay: 1300ms;} 
.delay1400 {animation-delay: 1400ms;} 
.delay1500 {animation-delay: 1500ms;} 
.delay1600 {animation-delay: 1600ms;} 
.delay1700 {animation-delay: 1700ms;} 
.delay1800 {animation-delay: 1800ms;} 
.delay1900 {animation-delay: 1900ms;} 
.delay2000 {animation-delay: 2000ms;} 

.light-effect {position: relative; overflow: hidden}
.light-effect:before {
    transform: skewX(-25deg) translateY(-50%);
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 100%;
    background-color: white;
    z-index: 0;
    animation: light-left 5s infinite alternate linear;
    left:-5%;
    z-index: 9;
}

.light-effect:after {
    transform: skewX(-25deg) translateY(-50%);
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 100%;
    background-color: white;
    z-index: 0;
    animation: light-right 5s infinite alternate linear;
    right:-5%;
    z-index: 9;
}


@keyframes light-right {
    0% {
        right:-5%;
        opacity: 0;
    }
    50% {
        right: 50%;
        opacity: 1;
    }
    100% {
        right: 105%;
        opacity: 0;
    }
}

@keyframes light-left {
    0% {
        left:-5%;
        opacity: 0;
    }
    50% {
        left: 50%;
        opacity: .5;
    }
    100% {
        left: 105%;
        opacity: 0;
    }
}




header ul, footer ul {padding: 0; margin: 0}
header li, footer li {list-style: none;}
 
.heading2 {font-family:montserrat; font-size:16px; text-transform: uppercase; float:left; width:100%; margin:10px; padding:0}
.width100, #wrapper {float:left; width:100%; height:auto}
.padding-v-30 {padding-top: 0px; padding-bottom: 30px}

.padding-h-30 {padding-left:30px; padding-right: 30px}
.main {max-width:1200px; margin:auto; height:auto}
.main-700 {max-width: 700px}
.main-800 {max-width: 800px}
.main-900 {max-width: 900px}

#home>.width100:nth-child(odd) {background: #f5f5f5;}

 

.heading {font-family:montserrat; font-size:20px; font-weight: bold; text-transform: uppercase; float:left; width:100%; margin:var(--heading-margin);  text-align: left; padding:0 10px;position: relative;}
 
.heading-home {
  position: relative;
  text-align: center;
  width:100%;
  float:left;   
  font-size: 25px; font-weight: bold; 
  text-transform: uppercase ;
  text-decoration: none;
  font-family: montserrat;
  margin: 20px 0;
  padding:0 10px;
}

.text-align-left {text-align: left}
/*.heading-home:before {content:"\f622"; display:inline-block;
font-family: FontAwesome; margin-right: 10px; color:var(--primary-color);

}*/
 
.heading-home a{ color:var(--primary-color) }
.heading-home a:hover {text-decoration: none; color: var(--primary-color)}
 
.des-home {float: left; width: 100%; font-size: 15px; letter-spacing: 1px; color:#666;  text-align: center; padding:0 10px; margin-bottom:50px} 
 .owl-item {float:left}
 
/*---Buttom---*/
.btn_send {transition:all .5s;background:white;font-family:montserrat;width:100px;text-align:center;display:block; margin:10px;float:left; padding:10px; border:1px solid #434343; color:#686868; text-decoration: none; box-shadow: inset 0 0 0 0 #666;}
.btn_send:hover {text-decoration:none; color:white;box-shadow: inset 100px 0 0 0 var(--primary-color); transition:all .5s}

/*---Product---*/
.project {transition:all .5s; width:100%; float:left; margin-bottom: 15px; position: relative; height: 0; padding-bottom: 70%; background:white; overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,.1); border-radius: 10px; overflow: hidden}
.project:hover {transition:all .3s}.
.project:hover a{color:var(--primary-color);} 
.project .img {position: absolute; left:0; top:0; height:100%; padding-bottom:100%; overflow: hidden; width: 100%;z-index: 1}
/*.project .img:after {content:""; position: absolute;left:0; top: 0; width: 100%; height: 100%; background: url('../images/se-kong-footer.png') bottom no-repeat; background-size: 100% auto}*/
.project img {width: 100%; height: 100%; width: 100%; object-fit: cover; position: absolute; left:0;   }

.project .title {width:100%;font-size:20px; line-height:20px;  font-weight: bold;  padding:0; color:white; float:left;  }
.project a {text-decoration:none; color:black;}
.project a:hover {text-decoration:none; color:#var(--primary-color) !important;}
.project_ctn {width:100%; float:left}
.project_ctn img {max-width:100%; }
.noidung_tin {width:100% !important}
 
.project .info {z-index:2;position: absolute; left:0; bottom:0; color:whitesmoke;background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0)); width: 100%; padding:20px; transition: all .5s}
.project .des {float:left; width: 100%; opacity: 0; height: 0; margin-top:10px}
.project .des p {margin:0}

.project:hover .info {transition: all .5s; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,.5));}
.project:hover .des {opacity: 1; height: auto; transition: all .5s}

#image-gallery {width: 100%; height: 0; padding-bottom: 65%; position: relative;}
#image-gallery .swiper-wrapper {position: absolute; left:0; top:0; width: 100%; height: 100%}
#image-gallery .swiper-slide {height: 100%}

#image-gallery img {width:100%; height: 100%; object-fit: cover}
.lSSlideOuter .lSPager.lSGallery img:hover {opacity:.5}
.lSGallery li {height:50px} 
.pages{
    float:left;
    width:100%;
    padding : 10px 0px;
    text-align: center;
}
 
 

#breadcrumbs {float: left; width: 100%; padding:5px 0; background:#eee }
.breadcrumb {background:transparent !important; margin-left:120px; }
.breadcrumb a {color:black;}
.breadcrumb a:hover {text-decoration: none}

.main_booking {float:left; width:100%}
.main_booking .label {color:#666; font-size:16px; font-family:montserrat; font-weight:bold}


.news_ctn {float:left; width:100%;  padding:50px 0; overflow-x:hidden;}
.heading2, .news_ctn .heading {float:left; width:100%; padding-bottom:10px; padding-top:0; padding-right:50px; border-bottom:1px solid #eee; margin-bottom:20px}
.heading2 span, .news_ctn .heading a {color:#333; font-size:30px; text-transform: uppercase }
.news {position:relative; width:100%; background: #f5f5f5; float:left; margin-bottom: 15px; overflow: hidden; }
.news:hover .title {color:var(--primary-color);}

.news .img {width:100%;float:left; height:0; position: relative; padding-bottom:60%; overflow: hidden}
.news .img img {width:100%; float:left; position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover; transition:all .3s}
.news .img img:hover {transition:all .5s; transform: scale(1.3,1.3)}
.news .title {font-size:16px; font-weight: bold; margin:0 0 10px 0 ;line-height:20px; height:40px; overflow: hidden; float:left; width:100%; padding: 0}
.news a {color:black}
.news .info {float:left; position:relative; padding:10px }
.news .date {float:left; width:100%; margin:20px 0 0 0}
.news .date i {color:var(--primary-color); margin-right:10px}
.news .des {color:#333; float:left; text-align: justify; height: 60px; line-height: 20px; overflow:hidden; }
.news .readmore {float:left; color:var(--primary-color); font-weight: bold; width:100%}

.vertical-news {padding-left:110px; height: 70px; overflow: hidden; margin-bottom: 10px}
.vertical-news .img {position: absolute; left:0; top:0; width: 100px !important; height: 70px !important; padding: 0}
.vertical-news .img img {width: 100%; height: 100%; object-fit: cover}

.vertical-news .info {padding:5px 10px 5px 0; height: 70px;  }
.vertical-news .info .title {height: auto; font-size: 14px;margin:0; line-height: auto}

.custom {float: left; width: 100%; position: relative; height: 60px; padding-left:90px; margin-bottom: 20px;}
.custom .img {position: absolute; left: 0; top: 0; width: 70px; height:70px; text-align: center; padding: 12px; font-size: 30px; color: var(--primary-color); border: 2px solid var(--primary-color); border-radius: 50%;}
.custom .title {float: left; width: 100%; font-size: 18px; font-weight: bold; letter-spacing: 1px;text-transform: uppercase; color: var(--primary-color);}
.custom .des {float: left; width: 100%; font-size: 16px; letter-spacing: 1px; line-height: 20px;}
  


#contact {margin-top: 50px; float: left;}
#contact ul {line-height: 30px; padding:0; margin:0}
#contact ul li {float:left; width: 100%; font-size:16px; list-style: none;}
#contact h2{font-family:montserrat; margin-top:0; margin-bottom: 30px;}
#contact i {width: 25px; color: var(--primary-color);  }
 
#contact .error {color:crimson !important; font-size:15px}
#contact .show_success {color:green; font-size:18px}
 
#form-contact { margin-top:30px; float: left; width: 100%}
#form-contact h2 {border-top-left-radius: 10px; border-top-right-radius: 10px;height: 70px; padding: 20px; margin-bottom: 0; font-size: 25px;background: linear-gradient(to right, var(--blue), var(--blue2)); color: white;  font-weight: bold;text-align: center;}
#form-contact>.width100 {padding: 30px; background: #f2f5fa; }

#form-contact input.form-control {padding: 20px; height: 50px; border: none; background: #eee}
#form-contact textarea.form-control {padding: 20px;   border: none; background: #eee}
.error { color: #D8000C; float:left; width:100%; margin-bottom:5px}
.show_success {color: #4F8A10; background-color: #DFF2BF; margin:20px 0; width:100%; float:left; padding:10px}

#map-canvas {width: 100%;height: 400px;margin-bottom:20px;}


.pages a{
    background: -moz-linear-gradient(center top , #F9F9F9 0%, #EEEEEE 100%) repeat scroll 0 0 transparent;
    border: 1px solid #D3D3D3;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 0 #DFDFDF;

    cursor: pointer;
    font-size: 11px;
    margin: 0 2px;
    padding: 4px 7px;
}
.pages .current{
    background: none repeat scroll 0 0 #6F6F6F;

    box-shadow: 0 1px 2px #545454 inset, 0 1px 0 #FFFFFF;
    color: #FFFFFF;
    font-weight: bold; 
    cursor: pointer;
    font-size: 11px;
    margin: 0 2px;
    padding: 4px 7px;
    border: 1px solid #646464;
    border-radius: 3px 3px 3px 3px;
}

.show_success,
.show_notice{
    background: none repeat scroll 0 0 #E7FDD0;
    border: 1px solid #B9FA78;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 5px #CCCCCC;
    padding: 5px;
    text-align:center;
}
body{
    padding: 0px;
    margin: 0px;
    color: #333333;
    font-family:montserrat; 
    font-size: 14px; 
}

.page_content {  
    float: left;
    margin-bottom: 5px;
    width: 1000px;
}

.fb-like fb_iframe_widget {
    width: 150px;
    float: left;
    }
.plusone {
    width: 90px !important;
    float: left;
}

p.des{
    margin-bottom: 10px;
    float:left;
    width:100%;
    padding:10px;
}

.introtext{
    float:left;
    width:100%;
    padding:10px;
    font-weight: bold;
    margin-bottom: 10px;
}
.fulltext {float:left; width:100%;  height:auto; line-height: 25px;}
.fulltext img {max-width:100% !important; height:auto !important}
 
.fulltext ul, .fulltext ol {margin-bottom: 20px;} 
.fulltext li {margin-bottom: 10px;}
div.error {
    color: #cf0911;
    font-size: 11px;
}
.facegoogle {
    float: left;
    width: 380px;
    margin-top: 2px;
}
.face_book  {
    float:right;
    width: 160px;
    overflow: hidden;
}
.google_plus {
    float:right;
    width: 200px;
}

input.w300 {
    width: 300px;
}
/* @media (min-device-width:1024px) and (max-width:509px),(max-device-width:480px) and (orientation:portrait)  */


@media (max-width:459px){
    .col-xs-6 {width:100% !important}
    .owl-dot {margin: 5px !important;}
 

}
.mapouter, .gmap_canvas {float:left; height: 500px; width: 100%}
 
.huongdan_ctn {background: linear-gradient(
    to bottom, 
    #ffffff 0%, 
    #ffffff 50%, 
    #ffcad7 50%, 
    #ffcad7 100%); padding: 30px 0}
.huongdan {float: left; width: 100%; margin-bottom: 20px; }
.huongdan .img {float: left; width: 100%;text-align: center; }
.huongdan .img img {width: 100%}
.huongdan .title {float: left; width: 100%; text-align: center; font-size: 20px; font-weight: bold;}


.carousel {width: 100%; position: relative; }
.carousel-inner {height: 100%;}

.carousel .item {height: 100% !important; flex; flex-direction: column;}
.carousel-text {flex-grow: 1;
    background: rgba(0,0,0,.4);
    display: flex;
    flex-direction: column;
    width: 100%; height: 100%; text-align: center; position: absolute ;
    justify-content: center; 
}
.carousel-text-border { border: 5px solid rgba(255,255,255,.5); margin:0 10%; padding: 50px}
.carousel-text h4 {color:#eee; font-family:Moontime; font-size: 150px; margin-bottom: -20px; }
.carousel-text h3 {color:#eee; font-family: brasika; font-size: 90px; margin-top: -20px}
.carousel-text .xem-ngay {margin-top: 20px; margin-bottom: 20px;color:#eee; padding: 10px 15px;border: 1px solid white; 
    text-decoration: none; display: inline-block;font-size: 25px; font-family: montserrat;}
.carousel-inner .active {z-index: 9999;}
.carousel-control {z-index: 99999;}
.carousel-indicators {z-index: 99999 !important}
.carousel-indicators>li {z-index: 99999;}
.carousel-text .xem-ngay:hover {background: white; color: black; text-decoration: none;}
.img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {height: 100% !important; width: 100%; object-fit: cover;}

.carousel.fade {
     opacity: 1;
}
.carousel.fade .item {
    transition: opacity ease-out 1.5s;
    left: 0;
    opacity: 0; /* hide all slides */
    top: 0;
    position: absolute;
    width: 100%;
    display: block;
}
.carousel.fade .item:first-child {
    top: auto;
    opacity: 1; /* show first slide */
    position: relative;
}
.carousel.fade .item.active {
    opacity: 1;
}
 
 
.comment {float:left; width:100%; position:relative; text-align:center; }
.comment .line {float:left; width:20%; height:5px; margin-left:40%; margin-right:40%;  margin-top:30px; margin-bottom:20px; background:#73b239}
.comment .position {position:relative; background: #f5f5f5;  font-size: 15px; border-radius:5px;float:left;width:100%; color:var(--gray2); padding:20px; margin-bottom:50px }
.comment .position:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -10px;
    right: 0;
    left: -115px;
    margin: 0 auto;
    width: 20px;
    height: 20px;
    background: #f5f5f5;
    border-right: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.comment .avatar {position:relative;height:100px; width: 100px; text-align: center; overflow:hidden;margin:auto; position: relative;}
.comment .avatar img {z-index:1;  height:100px; width:100px; margin:auto; object-fit: cover;  border-radius:50%;  border: 2px solid white;}    
.comment .rating {float: left; width: 100%; color:var(--primary-color); text-align: center; font-size: 12px; margin-bottom: 20px}

.comment .author {text-align: center}
.comment .author img {width: 80px; height: 80px; border-radius: 50%; object-fit: cover}
.comment .author .author-info {display: inline-block; position: relative; margin-left:15px; top:15px; text-align: left}
.comment .author .author-info h5 {font-weight: bold}
.comment .author .author-info p {color:var(--gray2)}

 
.banquanly {float:left; width:100%; position:relative; text-align:center; }
.banquanly .line {float:left; width:20%; height:5px; margin-left:40%; margin-right:40%;  margin-top:30px; margin-bottom:20px; background:#73b239}
.banquanly .position {position:relative; font-size: 15px; border-radius:5px;float:left;width:100%; color:black; padding:10px; margin-bottom:10px }
.banquanly .fullname {float:left;font-size:17px; margin-top:20px; text-align:center;  color:var(--secondary-color);  letter-spacing: 1px; width:100%;  font-weight: bold;}
.banquanly .avatar {position:relative;height:150px;  text-align: center; overflow:hidden; width:100%; margin:auto; position: relative;}
.banquanly .avatar img {z-index:1;  height:150px; width:150px; margin:auto; object-fit: cover; border: 2px solid white;}    

#ykien .owl-next, #ykien .owl-prev {
    width: 40px;
    padding: 8px 10px 6px 12px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #ccc;
    color: #ccc;
    margin-top:-200px;
}
#ykien .owl-next {position:relative; float:right}
#ykien .owl-prev {position:relative; float:left}
 


.nhamau {float:left; width:100%; height: 0; padding-bottom: 60%; position: relative; margin-bottom: 20px;  transition: all .5s}
.nhamau img {position: absolute; transition: all .5s; left:0; top:0; right:0; bottom:0; height: 100%; width:100%; object-fit: cover;   }
.nhamau:hover {transform: scale(1.1,1.1); transition: all .5s}

#image-gallery .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
/*.video {float:left; width:100%;  margin-bottom:20px;}
.video .embed {float:left; width: 100%; height: 0; padding-bottom: 60%; position: relative;}
.video .embed iframe {position: absolute; left:0; top:0; right:0; bottom:0; height: 100%; width:100%; }
.video .info {float:left; width: 100%;}
.video .info .title {float:left; width: 100%; text-transform: uppercase; font-weight: bold}
*/

.embed {float:left; width: 100%; height: 0; padding-bottom: 60%; position: relative;}
.embed iframe {position: absolute; left:0; top:0; right:0; bottom:0; height: 100%; width:100%; }

.album {float:left; width: 100%; height: 0; padding-bottom: 70%; position: relative; margin-bottom: 20px; overflow: hidden}
.album img {position: absolute; width: 100%; height: 100% !important; left:0; top:0; object-fit: cover; z-index: 1}
.album .info {position: absolute; left:0; top:0; width: 100%;height: 100%; background: rgba(0,0,0,.5); z-index: 2; text-align: center; opacity: 0}
.album .info i {color:white; margin: 0; font-size: 30px;
  position: absolute;
  top: 50%; left:50%;
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);}
.album:hover .info {opacity: 1}
.box-baogia {float: left; width: 100%; padding-left:50%; position: relative; background: #eee}
.box-baogia .video {position: absolute; width: 50%; left:0; top:0; height: 100%}
.box-baogia .video iframe {position: absolute; left:0; top:0; width: 100%; height: 100%}
.box-baogia .baogia {float: left; width: 100%; padding:20px 20px 0 20px; overflow-y:auto; height: 500px}
.box-baogia .baogia .vertical-news {float: left; width: 100%; padding-left:150px; position: relative; margin-bottom:20px }
.box-baogia .baogia .vertical-news  .img {position: absolute; left:0; top: 0; height: 100px; width: 140px}
.box-baogia .baogia .vertical-news  .img img {position: absolute; height: 100%; width: 100%; object-fit: cover}
.box-baogia .baogia .vertical-news  .info {float: left; width: 100%; line-height: 20px;}
.box-baogia .baogia .vertical-news  .info .title {float: left; width: 100%; font-size: 16px; color:black; font-weight: bold; height: 40px; overflow: hidden}
.box-baogia .baogia .vertical-news  .info .des {float: left; width: 100%; height: 60px; overflow: hidden; color: #666}




#project-cat {margin: 30px 0}
#project-cat li a {text-transform: capitalize; }
#project-cat li.active a {background: var(--primary-color)}
#project-cat li:not(.active) a {background: #eee; border-radius:5px; margin:0 5px; color:#333}
#project-cat li:not(.active):hover a {background: var(--primary-color); color: white}

 
#image-gallery-thumbs {margin-top:15px; width: 100%; height:0; padding-bottom: 15%; position: relative;}
#image-gallery-thumbs .swiper-wrapper {position: absolute; left:0; top:0; width: 100%; height: 100%}

#image-gallery-thumbs .swiper-slide:hover {cursor: pointer; border-radius: 5px !important}
#image-gallery-thumbs .swiper-slide-thumb-active {border-radius: 5px !important; border:2px solid var(--secondary-color)}
#image-gallery-thumbs .swiper-slide {width: 100%; height: 100%}
#image-gallery-thumbs .swiper-slide img {height: 100%; width: 100%; object-fit: cover}


.category {float:left; width: 100%; margin:0; padding:0}
.category li {float:left; width: 100%;  position: relative; border-bottom: 1px solid #eee; list-style: none}
.category li a {color:black; display: inline-block; padding:10px 15px; width: 100%}
.category>li>a:hover {background:var(--primary-color); color:white; text-decoration: none}
.category li a i {width: 25px}
.category>li>.active {background: #127883; color:white}
.category>li>.sub-category {display: block}
.category>li>.expand {display: none}

.category .expand, .category .collapse {position: absolute; top:0; right: 0; padding:10px}

.category .sub-category {display: none; float: left; width: 100%;background: #f9f9f9; padding: 0}
.category .sub-category .sub-category {background: #eee}
.category .sub-category .active {color:var(--primary-color)}
.category .sub-category a:hover {color: var(--primary-color);}

.module-box {float: left; width: 100%;margin-bottom: 20px;}
.module-box .module-title {float: left; width: 100%; background: green; font-size: 18px; text-align: center; text-transform: uppercase; font-weight: bold; color:white; padding:8px  }
.module-box .module-content {float: left; width: 100%; }
.module-border .module-content {border: 1px solid #eee; }

.col-md-3>.module-box:first-child {margin-top:40px}




.qna {float:left; width:100%;  }
.qna>.title {float:left;  width:100%; font-weight: bold; font-size: 17px; cursor: pointer;  padding:10px; background:white; border-bottom: 2px solid #eee}
.qna>.title i {float: right;  color:var(--primary-color);}
.qna>.title:hover {color: var(--primary-color)}

.qna .fa-chevron-right, .qna .fa-chevron-down {margin-left:0 !important; margin-right: 0 !important} 
.qna .content {float:left; width:100%; padding:10px; display: none}

.qna .content ul {float: left; width: 100%; margin:0; padding: 0}
.qna .content ul li {float: left; width: 100%; list-style: none; margin-bottom: 10px}
.qna .content ul li a {display: inline-block;width: 100%; float: left; color:#333}
.qna .content ul li a:hover {text-decoration: none; color:var(--primary-color)}

.qna .title .collapse {float:right; display: none}
.qna .title .expand {float:right}
.call1 {float: left; width: 100%; background: #ff0000 ; color: white;text-align: center; padding:10px; border-radius: 30px; cursor: pointer;}
.call1 div:first-child {float: left; width: 100%; font-size: 20px; text-transform: uppercase; font-weight: bold}
.call1 a {color: white}
.call1:hover a {text-decoration: none; color: white}
.call1:hover {background: var(--secondary-color)}

.call2 {float: left; width: 100%; text-align: center; border: 2px solid var(--primary-color); border-radius: 5px; cursor: pointer;}
.call2 div:first-child {background: #7bb246; color: white; padding:5px}
.call2 div:last-child {color:var(--primary-color); font-size: 20px; padding:3px}
.call2 i {margin-right: 10px}
.call2 a {color: white}

.call2:hover a {text-decoration: none;  }
.call2:hover {border-color: var(--orange)}
.call2:hover div:first-child {background: var(--primary-color);}


.swiper:not(#slide) {--swiper-pagination-color: var(--primary-color); --swiper-navigation-color:var(--primary-color)}

#thuexe-home>.width100:nth-child(odd) .thuexe .img {float: right; }
#thuexe-home>.width100:nth-child(odd) .thuexe .info {text-align: right;}

#thuexe-home>.width100 {padding:50px 0}
#thuexe-home>.width100:nth-child(3n-2) {background: linear-gradient(113deg,rgba(118,198,242,.9),rgba(0,103,190,.9)), url('../images/video.jpg'); background-size: cover;background-attachment: fixed;}
#thuexe-home>.width100:nth-child(3n-2) .thuexe .info .title {color:#f9ff00}
#thuexe-home>.width100:nth-child(3n-2) .thuexe .img:before {background: url('../images/cloud.webp'); background-size: 100% 100%}

#thuexe-home>.width100:nth-child(3n-1) {background: linear-gradient(113deg,rgba(255,117,250,.9),rgba(60,28,110,.9)), url('../images/video.jpg');background-size: cover;background-attachment: fixed;}
#thuexe-home>.width100:nth-child(3n-1) .thuexe .info .title {color:#07ffd8}
#thuexe-home>.width100:nth-child(3n-1) .thuexe .img:before {background: url('../images/cloud2.webp'); background-size: 100% 100%}

#thuexe-home>.width100:nth-child(3n) {background: linear-gradient(113deg,rgba(11,137,108,.9),rgba(32,119,141,.9)), url('../images/video.jpg');background-size: cover; background-attachment: fixed;}
#thuexe-home>.width100:nth-child(3n) .thuexe .info .title {color:#92f4f5}
#thuexe-home>.width100:nth-child(3n) .thuexe .img:before {background: url('../images/cloud.webp'); background-size: 100% 100%}

.thuexe {float: left; width: 100%; color:white;}
.thuexe .img {float: left; width: 50%; height: 0; padding-bottom: 35%; position: relative; overflow: hidden; }
.thuexe .img img {position: absolute; left:0; top:0; width: 100%; height: 100%; padding:10%; object-fit: cover;transition: all .5s; border-radius: 80px;  }
.thuexe .img:before {position: absolute; left:0; top:0; height: 100%; width: 100%; content:"";  }
.thuexe .info {float: left; width: 50%; padding:10px 30px;  }
.thuexe .info .title {float: left; width: 100%; font-size:40px; text-transform: uppercase; font-weight: bold;  margin: 10px 0; position: relative;}
/* .thuexe .info .title:before {content:"Thuê xe"; font-size: 20px; float: left; width: 100%; color:white} */
.thuexe .info .des {float: left; width: 100%;  }

.thuexe .info .des li {float:left; width:100%;list-style-type: square; }

.thuexe .info .thuenhanh {margin:auto;clear: both; width: 100px; text-align: center; color:white; background: var(--primary-color); border-radius: 10px; display: inline-block; padding:10px}
.thuexe .info .call {background: #07a881; color:white; padding:10px 20px; font-weight: bold; display: inline-block; margin:10px 0; border-radius: 10px; font-size: 20px}

.thuexe .img:hover img {transform: scale(1.05,1.05); transition: all .5s}


#hotel-slider {width: 100%; height:0; padding-bottom: 28%; margin: 20px 0; --swiper-pagination-color:white !important; --swiper-navigation-size:20px;
--swiper-navigation-color:black !important}
#hotel-slider .swiper-wrapper {position: absolute; left:0; top:0; width: 100%; height: 100%}
#hotel-slider .swiper-slide {width: 50%; border-radius: 5px; overflow: hidden}
#hotel-slider .swiper-slide img {height:100%; object-fit: cover; width: 100%; display: block}



#hotel-slider .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {width: 30px; opacity: 1}
#hotel-slider .swiper-pagination-bullets .swiper-pagination-bullet { 
    width: 8px;
    border-radius: 50px;
    outline: 0;
    opacity: .3;
    transition: .3s;}

#hotel-slider .swiper-button-next, #hotel-slider .swiper-button-prev {background: rgba(255,255,255,.5); padding:30px 20px}

.video-player {float: left; width: 100%; height: 0; padding-bottom:60%; border-radius:20px; position: relative; background: #2c2536; margin:20px 0 50px 0; box-shadow: 0 24px 40px #187abf38; }
.video-player img {position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px}

.video-player .play-button {margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0; width: 80px; height: 80px;color:white; background: #333; padding:17px 20px; font-size: 35px; border-radius: 50%; text-align: center;}
 
.video-player:hover .play-button {background: var(--primary-color)}

.video-player:after {
    background: url('../images/bubble.webp');
    bottom: -40px;
    content: "";
    height: 214px;
    position: absolute;
    right: -79px;
    width: 158px;
    z-index: 1;
}

 
.box {float: left;width: 100%; background: white; padding:15px; border-radius: 10px; margin-bottom: 20px}
#right-panel {position: sticky; left:0; top:0}
 
@media screen and (max-width: 991px){
     #right-panel {position: relative;}
    .main {max-width: 90%;}
}

@media screen and (max-width: 767px){

    .thuexe {margin-bottom: 30px}
    .thuexe .img {padding-bottom: 60%}
    .thuexe .info .title {font-size: 20px}
    .thuexe .info .des p {margin:5px 0}
    .main {max-width: 95%;}
    :root {
        --heading-margin: 20px 0;
    }
 
    .box-baogia {padding-left:0}
    .box-baogia .video {position: relative; float: left;width: 100%; height: 0; padding-bottom: 60%}
 
}




@media screen and (max-width: 459px){

    .thuexe .img {width: 100%}
    .thuexe .info {width: 100%}
    .main {max-width: 100%;}
    .padding-h-30 {padding-left:0; padding-right: 0}
    .khachhangctn {width: 300px}
    .khachhang1 {width: 200px;}
    .khachhang2 {width: 100px;}
 
}