/* CSS Author: tinh.le@phangiahuy.com */
:root {
  --green:#126a35;
  --red: #df4923;
  --box-shadow:0px 0px 20px -6px rgba(0,0,0,0.24);
}

 .wow {animation-duration: 2s !important; animation-delay: 300ms;}
.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;}
 
.fancybox-container {z-index: 9999999 !important;}

header ul li, footer ul li {list-style:none;
}
 .price b {font-weight: bold; color:crimson}
.itemprop_price {font-weight:bold ;color: crimson}
del {color:#999;}
@font-face{
    font-family: "RobotoCondensed";
    src:url(../fonts/RobotoCondensed-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

 
@font-face{
    font-family: "RobotoCondensed";
    src:url(../fonts/RobotoCondensed-Bold.ttf) format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

 


.catpanel {float:left }
.mainpanel {float:right !important}

/*div {transition: width .3s, height .3s}*/
.width100 {float:left; width:100%; height:auto}
.padding50 {padding: 50px 0}

.f5f5f5 {background:#f5f5f5}
 
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


/*--------Wrapper---------*/
#wrapper {float: left; width: 100%;}
.no_padding_l {padding-left:0 !important}
.no_padding_r {padding-right:0 !important}
.no_padding {padding-left:0 !important; padding-right:0 !important}

/*---Breadcrumb---*/
#breadcrumbs {float:left; width:100%;  margin-bottom: 30px; background: #f8f9fa}
#breadcrumbs .breadcrumb {background:none; margin:0; padding-left:10px}
#breadcrumbs .breadcrumb a {color:#666; font-size: 13px}

/*---content---*/
.content { float:left; width:100%;  }
.content img {max-width: 100%; height: auto}
.main {width:100%; max-width:1200px; margin:auto; position:relative}
.colright {width:20%; float:right;}
.colmain {width:80%; float:left}

/*---Trang chủ---*/
#popup {z-index:99999999999;}

 
/*---Tour---*/

.heading2 {float: left; width: 100%; margin-bottom:30px}
.heading2 span {display: inline-block; padding:10px; border-radius:5px; background: var(--green); color:white}
 
.noidung_tin {width:100% !important}
 
.star {color:yellow; text-shadow:1px 1px 2px #666}
 
.sliding-middle-out {
	display: inline-block;
	position: relative;
}
.sliding-middle-out:after {
	content: '';
	display: block;
	margin: auto;
	height: 3px;
	width: 0px;
	background: transparent;
	transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
	width: 100%;
	background: #158EC8;
}
 
.tour_des_seo {font-size:12px !important}
  
.module-box {float: left; width: 100%;margin-bottom: 20px;}
.module-box .module-title {float: left; width: 100%; color: var(--green); font-size: 20px; margin-bottom: 20px;}

.module-border { padding: 15px; border: 2px solid #eee; }
 
/*-----Media 767px-----*/
@media screen and (max-width:767px) {
    
}
 
/*---News---*/
.news {width:100%; padding:20px;box-shadow:var(--box-shadow); text-align: center; transition: all .5s; margin-bottom: 30px; background: white;}
.news:hover {transform:translateY(-10px); transition:all .5s; }
.news:hover a {color:var(--green);}
.news:hover .date i {color:var(--green);}
.news .img {width:100%; position: relative; height: 0; padding-bottom: 70%; overflow: hidden; }
.news .img img {width:100%; min-height: 100%; object-fit: cover; position: absolute;left:0; top:0;}
.news a {text-decoration: none; color:black;}
.news a:hover, .news a:focus {text-decoration: none}
.news .title {font-size:16px; font-weight:bold; padding:0; line-height: 20px; height: 40px; margin-bottom: 10px; overflow: hidden}
.news .date {width:100%; font-size:14px; color:#666; margin:20px 0;}
.news .date i {color:var(--lightorange); width:20px;}
.news .info {width:100%; color:#aaaaaa; font-size: 14px; font-weight: 500; line-height: 20px; height:60px; overflow: hidden; margin-bottom:20px;}
.news .readmore {width:120px; margin:auto; padding:10px; font-size: 12px; border-radius: 20px; background:var(--green); font-weight:bold; text-transform:uppercase;color:white}
.news .readmore:hover {border: 1px solid var(--green); background: white; color: var(--green)}

.news_ctn {width:100%; float:left; }
.news_ctn img {max-width:100%; height: auto !important;}
.news_ctn h3 {font-size:18px}
.news_ctn ul {list-style-type: none;}
.news_ctn a {font-size:14px; color:var(--green)}

.vertical_news {float:left; width:100%; overflow:hidden; position:relative; height:150px; margin-bottom:18px; padding:10px 10px 10px 220px}
.vertical_news .img {position:absolute; left:0; top:0; width:200px; height:150px; overflow: hidden}
.vertical_news .img img {width:100%; height:100% !important; object-fit: cover; }
.vertical_news .info {float:left; width:100%;}
.vertical_news .date {float:left; width:100%; color:#3bb15b; font-size:16px}
.vertical_news .info .title {float:left; width:100%; color:#333; margin-bottom:10px; font-size:18px;}
.vertical_news .info .des {color:#ccc; font-size:14px; float:left; width:100%;}
.vertical_news a {color:#333}
 
.category {float:left; min-height:100px; width: 100%;}
.category ul {font-size:14px;font-weight:none; padding-left: 0;  padding-top:0 !important;  background: #f5f5f5;}
.category li {padding:5px; list-style: none;}
.category li a {color:#666; padding: 10px; display: inline-block; width: 100%; }
.category .active {color:black; background: white; border-left: 3px solid var(--green);font-weight: bold;}
.category a {text-decoration:none; color:#777}
.category a:hover {color:var(--green); text-decoration:none}
.category .submenu {font-size:14px;text-transform: none; list-style:square; list-style-position: inside; color:#666}
.category .submenu li {font-weight:100 !important}
/*.category .submenu li:last-child {border-bottom:1px solid #ddd}*/
.category .submenu li a {color:#218fc5;}
.category .submenu li a:hover {color:var(--green)}
.cat_news{}
  
/*---Contact---*/
.contact_ctn h2{ margin-top:0; font-size:22px !important; text-transform:uppercase; padding-bottom: 10px; color: #218fc6;}
.contact_ctn i {float:left !important}
.contact_ctn li div {padding-left:33px}
.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}
.btn_send, .btn_book {font-size:16px; display: inline-block; font-weight: bold; text-transform: uppercase; background:var(--green); color:white; padding:10px 15px; border-radius: 20px; border:1px solid var(--green); margin:10px 0; cursor:pointer; }
.btn_send:hover, .btn_book:hover {background:white; color:var(--green); transition:all .3s; text-decoration:none}
#map-canvas {width: 100%;height: 400px;margin-bottom:20px;}
 
/*---Line heading---*/
.heading {float:left; width:100%;  font-family: RobotoCondensed; font-size:25px; font-weight: bold; margin:0 auto 20px auto}
.heading-home {text-align: center; margin:30px auto}

.heading-tour {float: left; width: 100%; font-size: 25px; margin-top:30px; font-weight: bold; padding-left:10px; border-left:4px solid var(--red); font-family: RobotoCondensed}
.des-home {float:left; width:100%; text-align:center; color:#666; font-size:16px; margin-bottom:40px;}
 
/*---Pagination---*/
.pagination{text-align: right; margin: 20px 0; width:100%}
.pagination>strong{padding: 8px 12px; background:#86d66b; color: #fff; border:1px solid #ddd }
.pagination>a{padding: 8px 12px; color: #fff; border:1px solid #ddd; color:#666}
.pagination>a:hover{text-decoration: none; color:#86d66b;}

/*--Social---*/
.social {float:left; }

 
#home {overflow: hidden}

.post_content table {display:block !important; overflow-x:scroll}
.post_content td {border:1px solid #a9e1ff}
.post_content img {max-width:100% !important; height:auto !important}
.post_content .no-border td {border:none !important}
.jcarousel-control-prev, .jcarousel-control-next {top:65% !important}


.homenews {float:left; width:100%; }

#comment {padding: 30px 0}

.comment {float:left; width:100%; position:relative; background: white; box-shadow:var(--box-shadow);padding:20px 20px 10px 20px; margin-bottom: 20px;}
.comment .img { float: left; width:100%; text-align: center;}
.comment .img img {width:100px !important; height:100px; object-fit: cover; margin: auto; border-radius: 50%;}
.comment .stars {float: left; width: 100%; text-align: center; padding: 10px }
.comment .stars i {color: gold}
.comment .info {float:left; width:100%; min-height:160px; text-align: center; font-size: 15px}
.comment .title {float:left; width:100%; border-bottom:1px solid #ccc; font-size:16px; line-height:25px; height:60px; padding-bottom:10px;overflow:hidden; font-weight: bold}
.comment .boxname {float:left; width:100%; position:relative; text-align: center;}
.comment .intro {float:left; padding-top:10px;width:100%; line-height: 20px; height: 70px; overflow: hidden; color: black}
.comment .fullname {float:left; margin-top:10px; width:100%; font-size:20px;}
.comment .job {float:left; width:100%; font-size:14px }
.comment .i-star {color:orange; margin:0 3px 0 0 }
 
.comment_ctn {float:left; margin-top:0px; width:100%; position:relative; padding:10px 10px 10px 100px;}
.comment_ctn .img {position:absolute; left:10px; top:10px; border-radius:50%; width:80px; height:80px; overflow:hidden}
.comment_ctn .img img {width:100%; min-height:80px; object-fit: cover}
.comment_ctn .info {float:left;font-size:14px; width:100%; min-height:100px;}
.comment_ctn .i-star {color:orange; margin:0 3px 0 0 }
.comment_ctn b {font-size: 18px; margin-right:10px}

#right_tour {border:1px solid #eee; position:sticky; top:60px}
.slide1{display:none;animation:fading 3s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
  
.tour {width:100%; margin-bottom: 20px; transition: all .5s; box-shadow:var(--box-shadow)}
.tour:hover {transform:translateY(-10px); transition:all .5s;}

.tour .img {width:100%; position: relative; height: 0; padding-bottom: 70%;  position: relative;}
.tour .img img {width:100%; height: 100%; object-fit: cover; position: absolute; left:0; top:0;}
.tour .img .hot-label {position: absolute; left:0; top:0; background:var(--red); color:white; padding:5px 10px; font-weight:bold; font-size:12px }
.tour .stars {position: absolute;bottom: 0 ;right: 0; color:yellow; text-align: right; width:100%;padding:10px; z-index:1;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5))}
.tour .code {position: absolute; left:-10px; bottom: -10px; padding:10px 15px; z-index:2; background:white; color:var(--orange); box-shadow:0px 0 10px 0px rgba(0,0,0,0.14)}
.tour a {text-decoration: none; color:black;}
.tour a:hover, .tour:focus {text-decoration: none}
.tour .info {width:100%; line-height: 20px;  padding:10px;overflow: hidden; height:135px}
.tour .info .title {font-size:15px; font-weight: bold; line-height: 20px; height: 40px; overflow: hidden}
.tour .info .price {color:crimson; padding:10px 0; font-weight: bold;}
.tour .info .old_price {color:#ccc; text-decoration: line-through;}
.tour .info .tags {float: left; width: 100%; }
.tour .info .tags span {display: inline-block; padding:5px 10px; background: var(--red); font-size: 10px; font-weight: bold; margin-bottom: 5px; color:white; border-radius: 15px}

.tour .info .tags span:empty {display: none}


.tour-container {float: left; width: 100%}
.tour-container .des {float: left; width: 100%; font-size: 12px; color:#666; margin-top:-10px}
.tour-container .rating { display: inline-block; }
.tour-container .rating i {color:orange; }
.tour-container .price1 {font-size:20px;font-weight: bold; color:var(--red)}
.tour-container .overview {float:left; width: 100%; font-size: 15px}

.tour-container .overview>span {display: inline-block; margin-right: 20px}
.tour-container .address {float:left; display: inline-block; margin-left:20px}

.tour-container .description {float:left; width: 100%; font-size: 15px; background: lightyellow; padding:15px; border-radius: 15px; margin-bottom: 20px}
.tour-container .noidung {float:left; width: 100%; overflow: hidden}
.tour-container .noidung img {max-width: 100%; }
.tour-container .noidung h2 {font-size:20px;}
.tour-container .noidung h3 {font-size:15px;}

 
.tour-container .choose-service {float:left; width: 100%; background: var(--lightblue); padding:15px; border-radius: 15px}
.tour-container .btn-book {position: fixed; bottom:10px; right: 10px;z-index: 9999999; float: right; font-size:20px; font-weight: bold; border:3px solid var(--red); background: var(--red); color:white; display: block; padding:10px 20px; border-radius: 10px; text-align: center}
.tour-container .btn-book:hover {color:var(--red); background: white}
.tour-container .block {float:left; width: 100%; padding:15px; border-radius: 15px; background: var(--lightblue)}
.tour-container .block-service {float:left; width:100%; padding:15px;background: white; border:1px solid #ccc}
.tour-container .block-service select {font-size: 17px;  color:var(--red);height: 50px; border-radius: 10px; margin-bottom: 20px; font-weight: bold; background: #fff2ea; border:1px solid var(--red)}
.tour-container .block-gray {background: #eee}
 
.tour-album {float: left; width: 100%; margin-bottom: 30px}

.tour-info {float: left; width: 100%; margin-bottom: 30px}
 
.tour-info p {float:left; width:50%; padding:20px  0 !important; margin:0; display: inline-block; font-size: 16px}
.tour-info p i {width: 30px}
.tour-info a {color: var(--red)} 

.tour-info .heading {margin-bottom: 0; padding:0 10px 20px 0; border-bottom: 1px solid #eee} 
.tour-rating {float:left; width: 100%}

.tour-rating .tour-comment:nth-child(odd) .img {color: var(--red)}
 

.tour-rating::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}
.tour-rating::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}




.tour-album {float: left; width: 100%; margin:20px 0; }
.tour-album .img {float:left; width:33%; height: 0; padding-bottom:16.1%; position: relative;overflow: hidden; }
.tour-album .img img {object-fit: cover; position: absolute; height: calc(100% - 10px); width: calc(100% - 10px);border-radius: 10px }
.tour-album .img:first-child {width:66% !important;padding-bottom: 32% !important; }

.score-container .score {
    color: #333333;
    font-size: 14px;
    font-weight: 100;
    line-height: 50px;
    text-align: center;
}
.small-star.star-rating-non-editable-container{
    background: url(../images/star1.png) repeat-x;
    height: 24px; margin:auto; clear:both;
    width: 120px;
}
.score-container-star-rating{
    text-align: center;
    float:left; width: 100%;
}
.small-star .current-rating{
    background: url(../images/star0.png) repeat-x;
    height: 24px;
}

.show_rating{
    display: none;
    height: 24px;
    width: 120px; margin:auto;
    overflow: hidden;
}
.show_rating a{
    background: url(../images/star1.png) repeat-x;
    height: 24px;
    width: 24px;
    float: left;
    cursor: pointer;
}
.show_rating a.on{
    background: url(../images/star0.png) repeat-x;
}


.service-cat {float: left; width: 100%; padding:10px; margin-bottom:20px; text-align: center; background: var(--red); color:white; border-radius: 20px; font-weight: bold; font-size: 20px}
.service-cat:hover {text-decoration: none; color:white}

.package {float: left; width: 100%; border:1px solid #eee; padding:15px; border-radius:15px }
.package .title {float: left; width: 100%; font-weight: bold; font-size: 16px; margin-bottom: 10px}
.package .des {float: left; width: 100%; font-size: 14px}
.package .des span {margin-right: 20px}
.package .tags {float: left; width: 100%; margin-bottom:20px }
.package .tags span {display: inline-block; padding:5px 10px; background: #eee; font-size: 11px; font-weight: bold; margin-bottom: 5px; border-radius: 15px}
.package .tags span:empty {display: none}

.package .info {float:left;width: 100%}
.package .price b { font-weight: bold; color:crimson; font-size: 20px}
.package .price {float: left; margin:15px 0 0 0}
.package .booknow {width: 100px; float: right; border-radius: 20px; padding:10px; background: var(--red); color:white; text-align: center; display: inline-block;}
.total {color:red; font-weight: bold}
.package .service-info {margin-top:20px; font-size: 16px; display: inline-block;}

.choose-package {position: sticky; right:0; top:60px; width: 100%; border-radius: 15px; border:1px solid #eee; padding: 20px; clear: both}
.choose-package .price {float: left; width: 100%; font-size: 20px;; text-align: left; margin-bottom: 10px}
.choose-package .button {display: inline-block; text-align: center; width: 100%; font-size: 18px; padding:15px; border-radius: 20px; font-weight: bold; color:white; background: var(--red)}
   
@media screen and (max-width:1366px){
    
}
 
@media screen and (max-width:1199px){
 
}
 
@media screen and (max-width:991px){
  
}
 
@media screen and (max-width:767px) {
    .heading-home {margin-bottom: 30px;}
}

@media screen and (max-width:459px) {
     
    .tour {height: auto; padding: 0}

    .tour .img {position: relative; float: left; width: 100%; height: 0; padding-bottom: 60%; overflow: hidden;}
    .tour .img img {width: 100%;}
    .tour .info {padding: 10px; height: auto}
    .tour .price {padding-left: 20px}
    .tour .detail {margin-bottom: 10px; margin-top: 20px}
   
}
/*-----Media 355px-----*/
@media screen and (max-width:355px){
}
 
@media (min-width: 1440px) {
    
}

@media (min-width: 992px) {
   
}

@media (min-width: 768px) {
   
}