.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

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


 .wow {animation-duration: 2s !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:Roboto; 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: 30px; padding-bottom: 30px}

.padding-h-30 {padding-left:30px; padding-right: 30px}
.main {max-width:85%; margin:auto; height:auto}
.main-700 {max-width: 700px}

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

 

.heading {font-family:Roboto; font-size:25px; text-transform: uppercase; float:left; width:100%; margin:var(--heading-margin); font-weight: normal; text-align: left; color:var(--secondary-color); position: relative;}
.heading:after {content:""; height: 5px; width: 80px; background: var(--primary-color); position: absolute; bottom:-15px; left:3px;
}
 

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

.heading-home:before {content:"\f084"; display:inline-block;
/* width:30px; height:30px;background: url('../images/icon-title.png'); margin-right: 10px*/
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} 
 .owl-item {float:left}
 
/*---Buttom---*/
.btn_send {transition:all .5s;background:white;font-family:Roboto;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 img {width:100%}
.lSSlideOuter .lSPager.lSGallery img:hover {opacity:.5}
.lSGallery li {height:50px} 
.pages{
    float:left;
    width:100%;
    padding : 10px 0px;
    text-align: center;
}
 
.project-gallery {float: left; width: 100%}
.project-info {float: left; width: 100%}
.project-info .heading {margin-top:0 }
.project-info p {float:left; width:100%; padding:20px  10px !important; margin:0;border-bottom: 1px solid #eee; display: inline-block; font-size: 16px}
.project-info p i {width: 30px}
.project-info label {font-family:Roboto}

#breadcrumbs {float: left; width: 100%; padding:20px 0; background: #eee; text-align: center}
.breadcrumb-heading {float: left; width: 100%;  font-size: 25px; font-weight: bolder; text-transform: uppercase; margin-bottom: 10px}
.breadcrumb {background:transparent !important; }
.breadcrumb a {color:black; text-transform: uppercase;}
.breadcrumb a:hover {text-decoration: none}

.main_booking {float:left; width:100%}
.main_booking .label {color:#666; font-size:16px; font-family:Roboto; 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%; float:left; margin-bottom: 15px; margin-top: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; position: relative;}
.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 { letter-spacing:1px; font-size:18px; margin-top:0; margin-bottom: 20px; line-height:24px; height:48px; overflow: hidden; float:left; width:100%;  padding-bottom:10px; padding-top:5px}
.news a {color:var(--secondary-color);}
.news .info {float:left; position:relative; padding:10px 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: 43px; overflow:hidden; padding-bottom:10px;}
.news .readmore {float:left; color:var(--primary-color); font-weight: bold; width:100%}

.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;}

/*---News---*/
.listnews {float:left; width:100%; margin-left:0; padding-left:0}
.listnews li{
    overflow: hidden;
    padding: 10px 0px;
}
.listnews p {padding:10px}
.listnews h2 {font-family:Roboto; font-size:18px; margin:5px}

.listnews li .img{
    float: left;
    width: 150px;
    height: 100px;
    float: left;
    margin-right: 10px;
}
.listnews li .img a{
    float: left;
    width: 150px;
    height: 100px;
    overflow: hidden;
    display: block;
}
.listnews li .img a img{
    width: 150px;
    min-height: 100px;
}

.other_news h1{
    color: #097EAF;
    font-size: 16px;
    font-weight: bold;
}

.other_news>ul{
    float:left;
    margin: 10px 0;
}

.other_news>ul>li{
    list-style-type: circle;
    margin-left: 20px;
    padding: 5px 0;
}

/*---Contact---*/
.contact_ctn h2{font-family:Roboto; margin-top:0; font-size:30px !important; text-transform:uppercase}
.contact_ctn i {float:left !important}
.contact_ctn li div {padding-left:33px}
.contact_ctn ul {padding: 10px;}
.contact_ctn li {list-style: none;}
.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;
    line-height: 18px;
    font-size: 12px; 
}

.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%; padding:10px; 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_ctn {padding: 30px 0; background:#eee;}
 
.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:5px}

#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: 60%}
#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: var(--primary-color); 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: var(--secondary-color); 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}


@media screen and (max-width: 991px){
    .main {max-width: 90%;}
}

@media screen and (max-width: 767px){
    .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){
    .main {max-width: 100%;}
    .padding-h-30 {padding-left:0; padding-right: 0}
    .khachhangctn {width: 300px}
    .khachhang1 {width: 200px;}
    .khachhang2 {width: 100px;}
 
}



.qna {float:left; width:100%;  border-left:2px dashed #ccc;}
.qna .title {float:left;  width:100%; font-weight: bold; font-size: 20px; cursor: pointer; border-bottom:1px dashed #ccc;  padding:10px; background:white;}
.qna .title i {margin-right: 20px; margin-left:-1px; 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 .title .collapse {float:right; display: none}
.qna .title .expand {float:right}
.call1 {float: left; width: 100%; background: var(--primary-color) ; color: white;text-align: center; padding:10px; border-radius: 5px; 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: var(--primary-color); 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 {float: left; width: 100%;margin-bottom:20px }
.thuexe .img {float: left; width: 100%; height: 0; padding-bottom: 60%; position: relative; overflow: hidden}
.thuexe .img img {position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover;}
.thuexe .info {float: left; width: 100%; padding: 10px 10px 20px 10px; background:#eee; text-align: center; }
.thuexe .info .title {float: left; width: 100%; font-size: 16px; text-transform: uppercase; font-weight: bold; text-align: center; margin: 10px 0}
.thuexe .info .des {float: left; width: 100%; text-align:left }
.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}