/* CSS Author: tinh.le@phangiahuy.com */

:root{
	--yellow:#ebd164;
	--brown:#373536;
	--red:#f57151;
}
.fancybox-overlay {z-index:9999999 !important}
/*div {transition: width .3s, height .3s}*/
.width100 {float:left; width:100%; height:auto}

ul {list-style: none;padding:0;margin-bottom:0 !important}
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 13px !important;
  background:#fff !important;
  color:#eee !important;
}


@font-face {
	font-family:'prime'; 
	src: url(../fonts/TUV-Prime-Regular.ttf) format('truetype'); 
	font-weight: normal;
	font-style: normal;
}

a {color:var(--yellow);}
a:hover {color:var(--red);}
/*--------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%; position:relative; margin-bottom: 30px; background:linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url('../images/khonggian.jpg') left top repeat fixed; background-size:cover; padding:30px 0 }
#breadcrumbs:after {content:""; z-index: 0; position: absolute; left:0; top:0; width: 100%; height: 100%; position:absolute; background:url('../images/overlay-pattern.png') ; background-attachment: fixed}
.breadcrumb a {color:white; font-size:20px; font-family:prime; z-index: 1; position: relative;}
.breadcrumb {float:left; width:100%; background:transparent !important; padding:8px 10px !important;  text-align: center}
.logo_title {position: relative; z-index: 1; font-size: 40px}

/*---content---*/
.box {float:left; background:black; width:100%; }

.main {width:100%; max-width:1200px; margin:auto; margin-bottom:10px; clear:both}
.colright {width:20%; float:right;}
.colmain {width:80%; float:left}

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

/*-----Media 767px-----*/
@media screen and (max-width:767px) {
}



/*---News---*/
.food {position:relative; width:100%; float:left; height: 300px}
.food .img {width:230px; margin:auto; height:230px;  position: relative; transition: all 15s }
.food .img img {position: absolute; left:2.5%; top:2.5%; width: 95%; height:95%; object-fit: cover; border-radius: 50%; transition:all 1s}
.food:hover .circle {left:-10%; top:-10%; width: 120%; height: 120%; transition: all .5s; border-color:var(--red);}
.food:hover .title {margin-top:30px; transition: all .5s}
.food:hover .img {animation: spin 10s linear infinite;transition: all 15s}
.food .title {color: white;   font-size:25px; line-height:20px; float:left; width:100%; font-family: prime; text-transform: uppercase; transition: all .5s;
margin-top:10px; padding-bottom:10px; padding-top:5px; height: 40px; text-align: center;}
.food a {color:white; display: block}
.food:hover  .title  {color:var(--red);}
.food .info {padding:10px; float:left; position:relative}
.food .des {font-size:13px;color:#666; line-height: 20px; height: 40px; float:left; text-align: justify; padding-bottom:10px;}
.food .readmore {float:left; text-align:right; height:40px; width:100%}

.food .circle {transition:all .5s; position: absolute; left:0; top:0; width: 100%; height: 100%; border: 5px dashed var(--yellow);animation: spin 10s linear infinite; border-radius: 50%; }

.product {transition:all .5s; position:relative;  width:100%; float:left;  overflow: hidden; margin-bottom: 30px;}
.product:hover {box-shadow: 0 0 20px rgba(0,0,0,.2); transition: all .5s;filter: grayscale(0) !important;}
.product:hover .title {color:var(--red); transition:all .3s}
.product .img {float:left; width: 100%; height: 0; padding-bottom: 65%; position: relative;}
.product .img img {transition:all .5s;object-fit: cover; height:100%; left:0; right:0; width: 100%; position:absolute; top:0;}
.product .info {float:left; width: 100%; padding:10px;}
.product .title {float:left; font-size:17px; text-transform: uppercase; font-weight: bold; font-family: prime; color:#c1272e; line-height:20px; margin-bottom: 10px}
.product .des {float: left; width: 100%; font-family: prime}
.product a {text-decoration:none; color:#999}
.product .stars {font-size: 15px}

@keyframes spin { 
  100% { 
    transform: rotateZ(360deg);
  }
}


.steam {
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: #fff;
  margin-top: -75px;
  margin-left: 75px;
  z-index: 0;
  opacity: 0;
  filter:blur(10px);
}

#steam-1 {animation: steam-one 4s ease-out infinite;}
#steam-2 {animation: steam-two 4s ease-out 0.5s infinite;}
#steam-3 {animation: steam-one 4s ease-out 1s infinite;}
#steam-4 {animation: steam-two 4s ease-out 1.5s infinite;}
#steam-5 {animation: steam-one 4s ease-out 2s infinite;}
#steam-6 {animation: steam-two 4s ease-out 2.5s infinite;}
#steam-7 {animation: steam-one 4s ease-out 3s infinite;}
#steam-8 {animation: steam-two 4s ease-out 3.5s infinite;}

@keyframes steam-one {
  0% {transform: translateY(0) translateX(0) scale(0.25); opacity: 0.2;}
  100% {transform: translateY(-200px) translateX(-20px) scale(1); opacity: 0;}
}
@keyframes steam-two {
  0% {transform: translateY(0) translateX(0) scale(0.25); opacity: 0.2;}
  100% {transform: translateY(-200px) translateX(20px) scale(1); opacity: 0;}
}



.product_tab {float: left; width: 100%; position: sticky; background:#eee; top:0; left:0 ; z-index: 999; border-bottom: 3px solid var(--green)}
.product_tab .title {float: left; padding:15px; font-family: prime; text-transform: uppercase; font-weight: bold; font-size: 20px; color:var(--green);}
.product_tab ul {padding:0; margin:0; float:left; }
.product_tab ul li {float: left; list-style: none}
.product_tab ul li a { padding:20px; font-size: 16px; font-family: prime; color:black; cursor: pointer; text-transform: uppercase; display: inline-block; border-bottom: 3px solid #eee}
.product_tab ul li a:hover {  color:var(--green);}

.fancybox-thumbs {background:black !important;}
/*---News---*/
.news {position:relative;  width:100%; float:left;  margin-bottom: 30px; overflow: hidden;}
.news .img {width:100%;float:left; height:0; padding-bottom: 60%; overflow: hidden; position: relative;}
.news .img img {width:100%; position: absolute; left:0; top:0; height:100%; object-fit: cover; transition:all .3s}
.news .img img:hover {transition:all .5s; transform:rotate(7deg) scale(1.3,1.3)}
.news .title {color: #e8640f;  font-size:16px; line-height:20px; float:left; width:100%; font-family: prime;
margin:0px; padding-bottom:10px; padding-top:5px;  height: 40px;}
.news a {color:#333;}
.news:hover .title {color:var(--red);}
.news .info {padding:10px; float:left; position:relative}
.news .des {font-size:13px;color:#999; line-height: 20px; margin-top:15px; max-height: 40px; float:left; text-align: justify; padding-bottom:10px; overflow: hidden}
.news .readmore {float:left; text-align:right; height:40px; width:100%}
.news_ctn {width:100%; float:left; text-align:justify}
.news_ctn img {max-width:100%;}
.news_ctn h3 {font-size:18px}
.news_ctn ul {list-style-type: none;}
.news_ctn a {font-size:15px; color:#83c124}


.category {font-size:15px;font-family:bold;}
.category>ul {padding: 0; float:left; width:100%; margin-bottom:0}
.category>ul>li>a {background:white; border-bottom:1px solid #ddd}
.category a {display:block;color:#6e4a37; padding:6px 10px;}
.submenu {font-size:13px;font-family:Helvetica, Arial, sans-serif}
.submenu {list-style:none}
.submenu>li {}
.submenu>li:last-child {border-bottom:none}
.submenu a {padding-left:20px;color:black; background:#f6f7f9; border-bottom:1px solid #ccc;}
.category a.active {color:#00a650}
.category a:hover {color:#00a650; text-decoration:none}


.about {float: left; width:100%;padding:50px 10px;  text-align: center;  }
.about img {border-radius: 30px}
.about .content {text-align: justify;  }
.about .content, .about .content * {float: left; font-size: 17px; width:100%; line-height: 25px; color:#999}

.about_heading {float: left; width:100%; font-size: 30px; text-transform: uppercase; font-family: prime; color:white;}
.about_heading2 {float: left; width:100%; font-size: 25px; color:var(--red); text-transform: uppercase;}
/*---Khách hàng---*/
.description {float: left; width: 100%; font-size: 15px; margin:20px 0;}


.khachhang { width:100%; float:left;  margin-bottom: 15px; overflow: hidden; height: 250px; background:white; box-shadow: 4px 4px 5px 0 rgba(50, 50, 50, 0.09)}
.khachhang:hover {background:#83c124; transition:all .3s; color:white}
.khachhang:hover a {color:white}
.khachhangpic {width:100%;float:left; height:200px; overflow: hidden; position: relative;}
.khachhangpic img {width:100%; float:left; min-height:200px;}
.khachhang .infokhachhang {font-size:13px; padding:0 10px; font-family:prime; float:left; posittion:absolute; bottom:0; left:0; width:100%;}
.khachhang .title {font-size:14px; height:35px; line-height:18px; font-family:prime; margin-top:10px; text-transform: uppercase; float:left; posittion:absolute; bottom:0; left:0; width:100%;}
.khachhang a {text-decoration:none; color:#333}
.khachhang a:hover {text-decoration:none; color:white}
/**/

.gallery {float:left; width: 100%; position: relative; height: 0; padding-bottom: 60%; overflow: hidden; margin-bottom: 20px}
.gallery img {position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover}

.gallery .overlay {position: absolute; left:0; bottom:0; width: 100%; height: 0; background:rgba(0,0,0,.5); transition: all .5s}
.gallery .overlay i {position: absolute; margin:auto; left:0; top:0; right: 0; bottom: 0}
.gallery:hover .overlay {height: 100%; transition: all .5s}
/*---Contact---*/
.contact_ctn h2{font-family:prime; margin-top:0; color:var(--red); font-size:30px !important; text-transform:uppercase}
.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 {border:none; transition:all .5s;font-size:20px;background:#6e4a37; text-transform: uppercase; font-family: prime; color:white; padding:10px 15px; margin:10px 0; cursor:pointer; }
.btn_send:hover, .btn_book:hover {transition:all .5s;background:#6e4a37; text-decoration:none}
#map-canvas {width: 100%;height: 400px;margin-bottom:20px;}
.map {height: 400px; float: left; width:100%;}
/*---owl---*/
#owl-demo .item{
  margin: 3px;
}
#owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;
}

/*---Line heading---*/
.xemthem {background:white; border:1px solid #ccc; padding:5px; margin-top:25px; color:#333; border-radius:2px; float:right; display:block}
.xemthem:hover {text-decoration: none; background:#eee}

.heading_home {margin-top:20px; font-family:prime; letter-spacing: 2px; text-transform: uppercase; margin-bottom:20px;font-size:40px !important; text-align: center; margin-top:0; padding:0px;color:var(--red); }

.heading {margin-top:20px; font-family:prime;margin-bottom:20px;font-size:40px !important;padding:0px;color:var(--yellow); }
.white {color:white !important;}
.module_heading {color:#ebd164; text-align:center; text-shadow:2px 2px 5px black; font-size:18px !important; float:left; width:100%;background:#6e4a37; padding:10px; font-family:bold;}
.module_box {float:left; width:100%;}
.module_box img {max-width:100% !important}
.white_box .module_box {background:white; border:1px solid #ddd}


.gallery {float:left; width: 100%; position: relative; height: 0; padding-bottom: 60%; overflow: hidden; margin-bottom: 20px}
.gallery img {position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover}

.gallery .overlay {position: absolute; left:0; bottom:0; width: 100%; height: 0; background:rgba(0,0,0,.5); transition: all .5s}
.gallery .overlay i {position: absolute; margin:auto; left:0; top:0; right: 0; bottom: 0}
.gallery:hover .overlay {height: 100%; transition: all .5s}

/*---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;}

.contact_ul {float: left; width:100%;  margin-top:20px; color:#ccc;}
.contact_ul li {float: left; width: 100%; padding:7px 0; font-size: 16px;}
/*--Social---*/
.social {margin-top:15px}
.monan {float: left; width: 100%; overflow:hidden;position: relative; padding:50px 0; text-align: center; background-position: center;  background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.3)), url('../images/khonggian.jpg'); background-attachment: fixed; background-size: cover}
.monan:after {content:""; z-index: 0; position: absolute; left:0; top:0; width: 100%; height: 100%; position:absolute; background:url('../images/overlay-pattern.png');background-attachment: fixed}

.monan .heading-home, .monan .food {position: relative; z-index: 1}

 
.fulltext {color:#999 !important;}
.fulltext span {color:#999 !important;}

/*-----Media 1199px-----*/
@media screen and (max-width:1199px){
.main {width:100%; padding:0 10px;}
.link2 {display:block}
.link1 {display:none}
}

@media (min-width:1200px){
	.width20 {width: 20%}
}

/*-----Media 1000px-----*/
@media screen and (max-width:1000px){
}

/*-----Media 991px-----*/
@media screen and (max-width:991px){
.otherfixed {position:relative; margin-top:0; width:100%; margin-bottom:20px}
.colmain, .colleft {width:100%}
.contact {display:none}
.no_padding_l {padding-left:0px !important; padding-left:0 !important}
.no_padding_r {padding-right:0px !important; padding-left: 0 !important}
.catpanel {float:right; width:100%; padding:0;}
.mainpanel {float:left; width:100%; padding:0}

}
/*-----Media 767px-----*/
@media screen and (max-width:767px) {
.banner {text-align:center}
#article {padding-left:0 !important; padding-right:0 !important}
#left {display:none}
.news .img {height:180px; }
    .news .img img {height:180px;}
}
/*-----Media 459px-----*/
@media screen and (max-width:459px) {
	.khonggian {height: 300px}
	.heading_home, .logo_title {font-size: 30px !important}
	/*.food .img {width: 100%; height: 0; padding-bottom:100%}*/
	.about {padding:30px 0;}
	.about_heading, .about_heading2 {font-size: 20px}
 
    .col-xs-6 {width:100% !important}
    .news {height:auto}
    .post_content img {width: 100% !important; height: auto !important; }
    

}
/*-----Media 355px-----*/
@media screen and (max-width:355px){
}


#contact .form-control {border-radius: 0; background:#333; border:none; padding:20px; font-size: 15px}
#contact .form-control:focus {border:1px solid var(--red); color:var(--red);}