.left { float:left}
.right { float:right}
.center {display: block; margin-left: auto; margin-right: auto;}
.center2{display: flex; justify-content: center;}
.display0 {display:none !important}
.opacity0 {opacity:0}
.opacity1 {opacity:1}

.color1 {color:#bc2800 }
.color2 {color:#936e27 }
.color3 {color:#002046  }
.hover-a {color:#936e27 ;transition: all 0.5s ease; -webkit-transition: all 0.5s ease;  -moz-transition: all 0.5s ease;}
.hover-a:hover {	color: #FFE4C4 !important;    text-decoration: none;    background-position: bottom;    text-shadow: -1px 0 4px #876f46, 0 1px 4px #876f46, 1px 0 4px #876f46, 0 -1px 4px #876f46;}

.paddingT30{padding-top:30px}
.paddingT40{padding-top:40px}
.paddingT50{padding-top:50px}

.box {background: #fff;margin: 5px; border: solid 1px #e6e6e6; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 15px; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);}
.number {font-family: "Minion W01",Georgia,serif !important;}
#back_to_top {right: 200px!important; display:none!important;}
html, body {    margin: 0;    padding: 0;width: inherit;}
body {background: #cacaca url('../images/bg6.jpg') no-repeat;background-size: 100% 100%;background-attachment: fixed;}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.show-sm {display:block}
	.hide-sm {display:none!important;}
	h1 {font-size:24px!important;}
	h2 {font-size:23px!important;}
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 601px) {
	/* .show-md {display:block} */
	/* .hide-md {display:none!important;} */
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

/******** MESSAGE **********************************************************************************************************************************************************************/

/******** TOPBAR **********************************************************************************************************************************************************************/

.to-top i {font-size:5vh;color:#936e27}

.topbar {width:100%; height:30px; margin:0 auto;background:#002046e0;position: fixed; top: 0;z-index:9999;}
.topbar .container{  width:100%; height:30px}
.topbar .container-left{  width:20%;height:30px;position:relative;float:left}
.topbar .container-left .logo-group{width:500px}
.topbar .container-left .logo-group img{ height:26px; padding:2px;}
.topbar .container-left .logo-group p{position:absolute; bottom:0px; left:30px; font-size:14px;color: #936e27;font-weight: bold;font-variant: small-caps}
.topbar .container-left .logo-group span{position:absolute; top:5px; left:30px; font-size:17px;color: #00ff43;font-weight: bold;font-variant: small-caps; text-shadow: -1px 0 4px #876f46, 0 1px 4px #876f46, 1px 0 4px #876f46, 0 -1px 4px #876f46;}
.topbar .container-left .logo-business{width:150px;height:30px;}
.topbar .container-left .logo-business .icon{width:20px;border-radius:30px;overflow: hidden;background: #fff;}
.topbar .container-left .logo-business .photo{float:left;margin:0}
.topbar .container-left .logo-business .photo img{  width:20px;  height:20px;  object-fit: cover;  display: block;  transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);}

.topbar .container-right{  width:60%;height:30px;position:relative;float:left;}
.topbar .container-right .menu-topbar{position:absolute; top:25px; left:0;height:30px;}
.topbar .container-right .menu-topbar .navigation {}
.topbar .container-right .menu-topbar .navigation ul{padding-left: 0;padding-top: 5px;}
.topbar .container-right .menu-topbar .navigation li {padding: 0 20px; height: 36px;}
.topbar .container-right .menu-topbar .navigation li a{font-size:12px;    text-transform: uppercase;   letter-spacing: 2px;}
.topbar .container-right .menu-topbar .navigation li a:before {height: 1px;    background-color: #936e27;    top: 14px;}

.topbar .container-right .menu-topbar .open-topbar { position: absolute;  right:0; top:0}
.topbar .container-right .menu-topbar .open-topbar .open-overlay {    position: absolute;    right: 0;    top:15px; width: 0}
.topbar .container-right .menu-topbar .open-topbar .open-overlay span { margin-top: 3px;border-bottom: solid 1px #FFF;width: 25px; height:0;font-size:8px}

.contact-topbar  {position:absolute; top:10px; right:150px;}
.contact-topbar  span {padding-left:20px;color: #fff;font-size:12px}
.contact-topbar  span:hover {color:#bc2800;}




@media only screen and (max-width: 600px) {
	.topbar .container-left {width:35%;margin-left: 5px;}
	.topbar .container-right {width:60%}
	.topbar .container-right .contact-topbar{right:50px}
	.bar-menu-sm {}
	.bar-menu-sm .hamburger-menu {  float: right;  display: inline-block;  height: 20px;  padding: 5px;  transition: all 0.3s ease-in-out;}
	.bar-menu-sm .hamburger-menu:hover {  cursor: pointer;}
	.bar-menu-sm .hamburger-menu .menu-item {  background: silver;  display: block;  height: 3px;  margin: 0 0 6px;  transition: all 0.3s ease-in-out;  width: 30px;}
	.bar-menu-sm .hamburger-menu.open .menu-item { width:40px;}
	.bar-menu-sm .hamburger-menu.open .menu-item:first-child {  transform: rotate(45deg);  transform-origin: 0;}
	.bar-menu-sm .hamburger-menu.open .menu-item:nth-child(2) {  opacity: 0;}
	.bar-menu-sm .hamburger-menu.open .menu-item:nth-child(3) {  transform: rotate(-45deg);  transform-origin: 8px; width:30px;}
	
	.bar-menu-sm .nav-sm ul {display: block;position: relative;top:30px;padding:0;width:100%}
	.bar-menu-sm .nav-sm {  background-color: #002046e0;  display: none;  list-style: none;  margin: 0;  padding: 0;  position: absolute;  top: 30px;  right: 0; z-index: 9999;}
	.bar-menu-sm .nav-sm li {height:30px;padding:0;width:100%}
	.bar-menu-sm .nav-sm li a {  color: white;top:0;  display: block;  padding: 15px 30px;  text-align: center;  text-decoration: none;  transition: all 0.3s ease-in-out;}
	.bar-menu-sm .nav-sm li:hover {  background-color: #002046ba;}
	.bar-menu-sm .nav-sm li a:hover {  color: red;}
	
	.bar-menu-sm .open {width:30px; height:30px; top:0; right:0; padding: 5px; overflow: hidden}
} 


/******** LAYOUT **********************************************************************************************************************************************************************/

.layout{  width:100%;  margin:0 auto;}




/******** SLIDER **********************************************************************************************************************************************************************/

.slider{background: #cacaca url('../images/bg9.jpg') no-repeat;background-size: 100% 100%;}
.slider{height: 70%;  width: 100%;display:flex;}
.slider .title {position:relative; top:50px; left:50px;z-index:999;font-weight: bold;font-variant: small-caps;font-size:30px;}
.slider .title a {color:#fff; }
.rsMinW .rsBullets {right:50% !important}
.rsMinW .rsArrowLeft{right:48% !important}
.rsMinW .rsArrowRight{right:46% !important}


@media only screen and (max-width: 600px) {
	.slider {height:50%}
} 

/******** MENU **********************************************************************************************************************************************************************/

.menu{width:100%; margin:0px auto; justify-content: center;   display: flex; background-color:#418de6; z-index:9}
/* .menu {} */
.menu .container{  width:100%; height: 120px; margin:0 auto;}
.menu .container .logo{width:300px;height:120px;text-align:center;border-right: solid 3px #fff}
.menu .container .logo img{height:90%;padding:5px}


.menu .container .logo .cus_info {height:100%;width:90%; float:right}
.menu .container .logo .cus_info table {width:100%; color:#fff; font-family: cursive; font-size:13px;border-bottom: solid 1px #fff;}
.menu .container .logo .cus_info table i {color:#bf6900}
.menu .container .logo .cus_info table td{text-align:left;}
.menu .container .logo .cus_info table tr:first-child td{text-align:center; padding: 10px}
.menu .container .logo .cus_info table tr td:first-child{text-align:center; width:40px}
.menu .container .logo .cus_info table tr td:nth-last-child(2){text-align:center; width:40px}
.menu .container .logo .cus_info table img {padding:0}
.menu .container .logo .cus_info table img.coin {width:20px; height:20px; border-radius:50%; padding:0 5px}
.menu .container .logo .cus_info table img.image {width:100px; height:30px;}
.menu .container .logo .cus_info table img.discount {width:50px; height:30px;}


.menu .container .logo .cus_info .control {margin:5px 0}
.menu .container .logo .cus_info .control i {font-size:20px; color:#bf6900}
.menu .container .logo .cus_info .control button {width:30px; height:30px; border-radius:50%; text-align:center; margin:0 5px; transition: all 1s ease;}
.menu .container .logo .cus_info .control button:hover i{color:#fff}
.menu .container .logo .cus_info .control button:hover {background:#bf6900}

.menu .container .logo .left {color:#fff;}
.menu .container .logo #name {font-size:40px; color:#bf6900; text-shadow: -1px 0 4px #fff, 0 1px 4px #fff, 1px 0 4px #fff, 0 -1px 4px #fff; font-weight:bold}


.menu .container .content {width:1600px; height: 120px;}
.menu .container .content ul {display: inline-flex;}
.menu .container .content ul li {height:120px; width: 300px;margin:0; display:flex; font-size:30px;text-transform: uppercase;}
.menu .container .content ul li {line-height:120px;color:#fff;border-right: solid 3px #fff}
/* .menu .container .content ul li:first-child {border-left: solid 3px #fff;} */
.menu .container .content ul li:hover {color: #FFE4C4; text-shadow: -1px 0 4px #876f46, 0 1px 4px #876f46, 1px 0 4px #876f46, 0 -1px 4px #876f46; background:#fff}
.menu .container .content ul li .thuc-an {width:100px;height:70px;background:url('../images/foods.png') no-repeat;background-size: 100% 100%}
.menu .container .content ul li .nuoc-uong {width:100px;height:90px;background:url('../images/drinks.png') no-repeat;background-size: 100% 100%}
.menu .container .content ul li .an-vat {width:100px;height:90px;background:url('../images/an-vat.png') no-repeat;background-size: 100% 100%}
.menu .container .content ul li .events {width:300px;height:120px;display: flex;}
.menu .container .content ul li .events img{width:auto;height:120px}



.active-menu {
	color: #FFE4C4; background:#bf6900;
    text-shadow: -1px 0 4px #876f46, 0 1px 4px #876f46, 1px 0 4px #876f46, 0 -1px 4px #876f46;
}


/************************ CUSTOMER **********************************************************/

.menu .container .customer{  width:100%; height: auto; margin:0 auto;}



#customer{width:100%; min-height: 100%; margin:0 auto;}
#customer .customer-content{  width:96%; min-height:90%; background:#ccc; padding:10px; margin:10px; border-radius:5px}

.popup-register .modal-body {min-width:600px; margin: 20px 10px}
.popup-register .tbl_update{width:90%; margin: 20px 10px}
.popup-register .tbl_update td {line-height:40px; font-size:20px; color:gray; text-align:right; padding-right:10px}
.popup-register .tbl_update td input{line-height:30px; font-size:20px; color:gray;width:100%; padding-left:10px;border: solid 1px gray;}

.top_customer {min-width:800px}
.top_customer h3 {margin: 20px 0}
.top_customer .tbl_top {width:80%; margin: 20px 10px; background:#418de6; border-radius:5px}
.top_customer .tbl_top tr th {background:#807777; color:blue}
.top_customer .tbl_top tr {height:30px}
.top_customer .tbl_top tr td{padding: 0 20px}
.top_customer .tbl_top tr {text-align:center; color:#bf6900;text-shadow: -1px 0 4px #fff, 0 1px 4px #fff, 1px 0 4px #fff, 0 -1px 4px #fff;}
.top_customer .tbl_top tr:nth-child(2) {color:#a51cbe; font-weight:bold}
.top_customer .tbl_top tr:nth-child(3) {color:#bf6900; font-weight:bold}
.top_customer .tbl_top tr:nth-child(4) {color:#bf6900; font-weight:bold}

.top_customer .tbl_top img {height:30px}


.top_customer .note {width:100%; text-align:left; padding-left:40px}
.top_customer .note span {font-style:inherit; font-size:15px}
.top_customer .note button {padding:3px 10px; background:#ccc; color:#fff; margin-bottom: 20px;}
.top_customer .note button:hover {background:#a51cbe; color:#fff;}

.top_customer .tbl_note {width:80%; margin: 50px 10px; background:#eee; border-radius:5px; border: solid 1px gray;}
.top_customer .tbl_note tr {height:25px}
.top_customer .tbl_note tr:hover {background:#ccc;}
.top_customer .tbl_note tr:first-child{background:#ccc; color:#fff}
.top_customer .tbl_note tr td {text-align:center;}
.top_customer .tbl_note tr td:nth-child(2) {text-align:left; padding-left:10px}



.bag_customer {width:100%; height:100%;}
.bag_customer .cContent {width:100%}
.bag_customer .cContent .cHeader{width:100%; height:5%; background:#bf6900; padding-top:5px; border-radius:5px 5px 0 0;}
.bag_customer .cContent .cHeader button {height:100%; width: 150px; margin-left:5px; padding: 10px 20px; font-weight:bold; font-size:20px; color:#fff; background:#ccc; border-radius: 10px 10px 0 0; float:left;}
.bag_customer .cContent .cHeader button:first-child{margin-left:40px}
.bag_customer .cContent .cHeader button.active {color:#bf6900; background:#fff; }

.bag_customer .cContent .cBody {width:100%; height:90%; background:#fff;}
.bag_customer .cContent .cFooter {width:100%; height:5%; background:#bf6900; border-radius: 0 0 5px 5px;}


@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {  font-family: 'entypo', sans-serif;  color: #C0C0C0;}
* {  border: 0;  outline: 0;  box-shadow: 0;}
.entypo-search:before {  position: absolute;  top: 0.4em;  left: 0;}
.search #form {  border-radius: 30px;  padding: 5px 20px;  width: 0;  overflow: hidden;  position: absolute;  height: 15px;  right: 0;  top: 0;	-webkit-transition: width .55s ease;	-moz-transition: width .55s ease;	-ms-transition: width .55s ease;	-o-transition: width .55s ease;	transition: width .55s ease;}
.search {position: absolute;top:5px;right:190px}
.search input {  width:0; color:#fff;   height: 30px;    border-radius: 30px;    font-size: 14px;    margin-top: -7px;    margin-left: -20px;    line-height: 10px;    padding-left: 20px;;background-color: #fff0;}
.entypo-search {  position: absolute; }
#form i {	position: absolute;color: #fff;    font-size: 12px;    top: 8px;}
#form:hover {  width: 600px; border: solid 1px #fff;}
#form:hover i {	display:none;}
#form:hover form input {  width: 640px;}
#form form input:focus, #form form input:active{ outline:none;  width: 640px;}

.slogan {letter-spacing: 5px;  text-shadow: 0 1px 0 #eaa902, 0 1px 0 #936e27, 0 2px 0 #936e27, 0 3px 0 #936e27, 0 4px 0 #936e27, 0 5px 0 #ffffff, 0 6px 0 #936e27, 0 7px 0 #936e27, 0 8px 0 #936e27, 0 9px 0 #936e27, 0 10px 0 #ffffff, 0 11px 0 #936e27, 0 12px 0 #936e27, 0 13px 0 #936e27, 0 14px 0 #936e27, 0 15px 0 #ffffff, 0 22px 30px rgba(233, 168, 5, 0);}





.list-gift {width:100%; padding:30px 10px; display:list-item}
.list-gift .item {width:29%; height:25%; background:#eee; float:left; margin:20px; padding:10px; box-shadow: -1px 0 4px #bc2800}
.list-gift .item:hover {box-shadow: -1px 0 4px #ffd356}
.list-gift .item:hover .content table button {background: #ffd356}
.list-gift .item .image {width:40%; height:100%; border: solid 3px green; background:#fff}
.list-gift .item .image img {width:100%; height:100%; }
.list-gift .item .content {width:52%; height:100%; background:#ddd; padding:0 10px; border: solid 3px #ccc;}
.list-gift .item .content table	{width:100%; height:100%;}
.list-gift .item .content table	th {height:30px; color:#bc2800; font-size:20px; font-family: cursive;}
.list-gift .item .content table	td {height:15px; font-family: monospace;}
.list-gift .item .content table	button {padding:10px 30px; background: #ccc; border-radius:5px;border: solid 1px #fff; }
.list-gift .item .content table	button:hover {border: solid 1px #bc2800; color:#fff}




/******** BREADCRUMB **********************************************************************************************************************************************************************/


#breadcrumb{width: 100% ;background-color: #bc2800d9;border-bottom: solid 2px #bc2800;border-top: solid 1px #bc2800; border-radius: 10px;}
#breadcrumb ul.breadcrumb{height: 60px;	width: 1200px ;position: relative;}
#breadcrumb ul.breadcrumb li{  height: 40px;  position: relative;    line-height: 60px;	float: left; padding-left:40px;color:#fff;} 
#breadcrumb ul.breadcrumb li:before { content: "»";  position: absolute;top:-2px;left:0;padding-left:20px;color:#fff;}
#breadcrumb ul.breadcrumb li:nth-last-child(2){ color: #fff;   font-style: italic;text-overflow: ellipsis;max-width:500px;overflow: hidden;}
#breadcrumb ul.breadcrumb li:last-child{ position: absolute;background-color: #fff;top: 40px;right:100px;line-height: 40px; }
#breadcrumb ul.breadcrumb li:nth-last-child(2):before {transform: skewX(15deg);display: inline-block; }
#breadcrumb ul.breadcrumb li:first-child:before { content: "";}
#breadcrumb ul.breadcrumb li a{color: #fff;  display: inline-block;}
#breadcrumb ul.breadcrumb li a:hover, #breadcrumb ul.breadcrumb li a:focus{    text-decoration: none;    color: #002046;}
#breadcrumb ul.breadcrumb i{font-size:20px}

#breadcrumb ul.breadcrumb .current_page{ background-color: #fff; padding: 0 40px;transform: skewX(-25deg);border: 3px solid #bc2800;}
#breadcrumb ul.breadcrumb .current_page span{ transform: skewX(25deg);display: inline-block;font-variant: small-caps;color: #936e27;font-size:24px}


@media only screen and (max-width: 600px) {
	#breadcrumb ul.breadcrumb {width:100%}
	#breadcrumb ul.breadcrumb li {padding-left: 10px;}
	#breadcrumb ul.breadcrumb li:before {left: -20px;}
	#breadcrumb ul.breadcrumb li:last-child {right:10px}
} 

/******** LINE BUSINESS **********************************************************************************************************************************************************************/

.line-bussiness {width: 100%;padding-top:50px;}
.line-bussiness .bussinessL {width: 100%}
.line-bussiness .bussinessL div {margin:0 20px;z-index:999;border-bottom: solid 3px #bc280000;}
.line-bussiness .bussinessL div:hover, .line-bussiness div.activeL{border-bottom: solid 3px #bc2800;border-radius:0 0 5px 5px;}
.line-bussiness a{line-height:30px; padding:0 5px; font-size:20px;color:#555; text-transform: uppercase;}
.line-bussiness a:hover, .line-bussiness div.activeL a{color:#bc2800;}
.hrL {width:100%;height:20px;position:relative;}
.hrL hr{width:80%; background:#fff;height:1px; margin-bottom: 20px;position:absolute;top:-3px}


/******** HOME **********************************************************************************************************************************************************************/

.home{  width:100%;  margin:0 auto; position:relative;}

/******** FOOD **********************************************************************************************************************************************************************/

.food-container {width:100%; position:relative;}

.food-container .client-order {width:410px; height:100%;float:left; top:35px;  position:sticky; }
.food-container .client {min-width:300px; height:100%;float:left; top:35px; border-radius: 5px; border: 1px solid #bf6900; background:gray; color:#fff;margin: 10px 0;}
.food-container .client .title {background:#bf6900; text-align:center;}
.food-container .client .title h3 { line-height:50px;}
.food-container .client .title span {text-align:right}
.food-container .client .content {background:#ccc; min-height:100px;  font-family: monospace;letter-spacing: -2px;}
.food-container .client .content table {width:100%; border:1px; margin:2px}
.food-container .client .content table i {color:red}
.food-container .client .content table tr {border:1px; line-height:40px}
.food-container .client .content table th {color:}
.food-container .client .content table td {color:blue; padding:0}

.food-container .ordered {min-height:100px;border: 1px solid #418de6;}
.food-container .ordered .title {background:#418de6;}
.food-container .client #ordered {padding:5px}
.food-container .client #ordered table {border:1px solid #bf6900;}
.food-container .client #ordered table tr {border:1px solid #bf6900; line-height:20px}
.food-container .client #ordered table tr div {width:255px;word-wrap: break-word;}
.food-container .client #ordered table .bottom {background:#555; color:#fff}
.food-container .client #ordered table .bottom0 {background:red; color:#fff}
.food-container .client #ordered table .bottom1 {background:blue; color:#fff}
.food-container .client #ordered table .bottom2 {background:#bf6900; color:#fff}
.food-container .client #ordered table .bottom3 {background:green; color:#fff}


.food-container .request {width:270px; height:100vh;position:sticky;right:0; top:35; background:#cad3ff38;z-index: 1;}
.food-container .request .title {text-align:center; color:#fff;background:#0000ff52;font-family: cursive; font-weight:bold; line-height:40px; padding-top: 5px;border:1px solid #bf690038;box-shadow: -1px 0 4px #fff}
.food-container .request  .request-quick {position:sticky;  bottom:0; background:#4c4f5b9c; text-align:center;}
.food-container .request  img {width:40px}
.food-container .request-body {position:relative;border-left:1px solid #bf690038;}
.food-container .request-body .reloaded-btn {width:160px; background:red; color:fff; padding:9px 0; border-radius:30px; margin:10px;box-shadow: -1px 0 4px #fff, 0 1px 4px #876f46, 1px 0 4px #876f46, 0 -1px 4px #876f46; cursor:pointer}
.food-container .request-body .reloaded-btn i {padding:0 10px; font-size:20px}
.food-container .request-body .reloaded-btn:hover {background:#539243; color:fff; }
.food-container .request-body .reloaded-btn:hover i {color:red; transform: scale(1.5);transition: all 1.5s ease;}
.food-container .request-body .body {position:relative;}
.food-container .request-body .body span {position:absolute; right:80px; bottom:5px; font-size:40px; text-shadow: -1px 0 4px red, 0 1px 4px #876f46, 1px 0 4px #876f46, 0 -1px 4px #876f46;}
.food-container .request-body .chat {position:fixed; bottom:5px; right:210px}
.food-container .request-body .chat #unread {position:absolute; top:0; left:-5px;background:red; color:#fff;z-index:2; width:17px; height:17px;border-radius:50%;border:2px solid #fff;}
.food-container .request-body .chat .chat-btn{width:50px; height:50px;border-radius:50%; background:#fff;box-shadow: 0px 0px 15px 5px #ffc000}
.food-container .request-body .chat .chat-btn img {width:50px; height:50px; padding-top: 3px;}
.food-container .request-body .chat-content {position:fixed; bottom:0px; right:205px; border:1px solid #bf690038; width:300px; height:350px; background:#fff;border-radius:10px 10px 0 0;}
.food-container .request-body .chat-content .header {background:#fff6bf;color:#de995e;box-shadow: -1px 0 4px #fff;border-radius:10px 10px 0 0;border-bottom:1px solid #bf690038; height:44px}
.food-container .request-body .chat-content .header span {margin: 10px; font-family: cursive;}
.food-container .request-body .chat-content .header i {margin: 10px; height:20px; line-height:20px;width:20px;border-radius:50%;}
.food-container .request-body .chat-content .header i:hover {background:#fff; border:1px solid red; color:red}
.food-container .request-body .chat-content .content {height:265px; background:#fff;overflow-y: scroll;height:255px; padding: 5px 0}
.food-container .request-body .chat-content .content .chat-container {position:relative;text-align:left;}
.food-container .request-body .chat-content .content .chat-container .card-content {display: grid;}
.food-container .request-body .chat-content .content .chat-container .div {position:relative;display: inline-flex; margin: 2px 0;}
.food-container .request-body .chat-content .content .chat-container .div.sender {}
.food-container .request-body .chat-content .content .chat-container .div.reveiver {display: flex; justify-content: flex-end}
.food-container .request-body .chat-content .content .chat-container .div .time {color:blue; padding:0 10px;}
.food-container .request-body .chat-content .content .chat-container .div .time.sender {position:absolute; left:0; top:5}
.food-container .request-body .chat-content .content .chat-container .div .time.reveiver {position:absolute; right:0; color:red;top:5}
.food-container .request-body .chat-content .content .chat-container .div .text.sender {margin-left:50px;}
.food-container .request-body .chat-content .content .chat-container .div .text.reveiver {margin-right:50px; background:#5d5de8; color:#fff;float:right; }
.food-container .request-body .chat-content .content .chat-container .div .text {background:#eee; padding:5px;border-radius:10px;border: 1px solid #bf690038;}
/* .food-container .request-body .chat-content .content .chat-container .div:hover {background:#ccc;} */
.food-container .request-body .chat-content .input {height:40px; background:#fff}
.food-container .request-body .chat-content .input input {height:40px;width:250px; background:#fff; padding-left:5px;border-top:1px solid #ffdc00;}
.food-container .request-body .chat-content .input button {height:40px;width:50px; background:#ffdc00;}
.food-container .request-body .chat-content .input button:hover {background:#876f46; color:#fff}
.food-container .client .bottom .message {padding:10px; color:#ccc; font-weight:bold}

.food-container .client .bottom {background:#bf6900; min-height:50px; text-align:center}
.food-container .client .bottom h3 {padding:10px; font-size:25px}
.food-container .client .bottom h4 {padding-top:10px; font-size:20px; color:red; text-shadow: -1px 0 10px #fff; font-style: initial; text-decoration-line: line-through;}
.food-container .client .bottom input {padding:10px; margin:5px; border-radius:30px; }
.food-container .client .bottom .fg-button {padding: 5px 10px;background:#fff; box-shadow: -1px 0 4px #876f46, 0 1px 4px #876f46, 1px 0 4px #876f46, 0 -1px 4px #876f46;}
.food-container .client .bottom .fg-button:hover {background:#fda01c; color:#fff; box-shadow: -1px 0 4px #fff, 0 1px 4px #fff, 1px 0 4px #fff, 0 -1px 4px #fff;}
.hover_bkgr_fricc .fg-button {padding: 5px 10px; margin:20px;background:#fda01c; box-shadow: -1px 0 4px #876f46, 0 1px 4px #876f46, 1px 0 4px #876f46, 0 -1px 4px #876f46;}
.hover_bkgr_fricc .fg-button:hover {background:green; color:#fda01c; box-shadow: -1px 0 4px #fff, 0 1px 4px #fff, 1px 0 4px #fff, 0 -1px 4px #fff;}

.food-container .event-content {position:sticky;width:100%;height:100%; top:35}
.food-container .event-content .event-body {width:100%; height:auto;}
.food-container .event-content .event-body img {width:100%; height:auto;transition: 0.5s all ease-in-out; }
.food-container .event-content .event-body img:hover {transform: scale(1.2); cursor:pointer}
.food-container .event-content .event-body .event {margin: 40px 20px;position:relative; }
.food-container .event-content .event-body .event .item {width:50px; height:50px;position:absolute; right:10px; top:0px}


.food-container .food-content {width:100%}
.food-container .food {width:100%}
.food-container .food .food-sub {position: relative; width:200px; padding:20px; margin:20px; background:#87ff6885; border-radius:5px;}
.food-container .food .food-sub .info {text-align:center; line-height:30px; font-size:20px}
.food-container .food .food-sub .info h4 {color:#fbd386;font-weight:bold; text-shadow:1px 1px 1px #ff6a0c}
.food-container .food .food-sub .info p {color:blue; font-weight:bold; text-shadow:1px 1px 1px #fff; font-size:30px}
.food-container .food .food-sub .info .add_button {color:fff; background:gray; font-weight:bold; padding:5px 20px; border-radius:30px; border: 1px solid #ccc; margin-top:10px}
.food-container .food .food-sub .info .add_button:hover { background:blue;}
.food-container .food .food-sub .image {width:200px; height:200px;}
.food-container .food .food-sub .image-hot>img {position: absolute; left: -29px; top:0; width:100px; height:100px;}
.food-container .food .food-sub .image-new>img {position: absolute; right:-11px; top:-9.5px;width:100px; height:100px;}
.food-container .food .food-sub .image img {width:100%;transition: 0.5s all ease-in-out;border-radius: 10px}
.food-container .food .food-sub:hover {box-shadow: 0px 0px 5px 1px #fff;}
.food-container .food .food-sub:hover .add_button{box-shadow: 0px 0px 5px 1px red;}
.food-container .food .food-sub:hover .image>img{transform: scale(1.1);}

.hover_bkgr_fricc font{color:red; font-size:30px; font-weight:bold}
.hover_bkgr_fricc table {color:#af6300}
.hover_bkgr_fricc textarea {background:#cccccc82; padding:5px; width:100%; border: 1px solid #cccccc82;}
.hover_bkgr_fricc{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
	color:blue;
	font-size:20px;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:10000;
}
.hover_bkgr_fricc .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.hover_bkgr_fricc > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 600px;
    min-height: 100px;
    vertical-align: middle;
    width: 80%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
}
.CloseButton {    background-color: #fff;	color:red;    border: 3px solid #999;    border-radius: 50px;    cursor: pointer;    display: inline-block;    font-family: arial;    font-weight: bold;    position: absolute;    top: -20px;    right: -20px;    font-size: 25px;    line-height: 30px;    width: 30px;    height: 30px;    text-align: center;	z-index: 9;}
.CloseButton:hover {    background-color: #ccc;border: 3px solid red;}
.popupCloseButton {    background-color: #fff;	color:red;    border: 3px solid #999;    border-radius: 50px;    cursor: pointer;    display: inline-block;    font-family: arial;    font-weight: bold;    position: absolute;    top: -20px;    right: -20px;    font-size: 25px;    line-height: 30px;    width: 30px;    height: 30px;    text-align: center;	z-index: 9;}
.popupCloseButton:hover {    background-color: #ccc;border: 3px solid red;}

.trigger_popup_fricc {
    cursor: pointer;
    font-size: 20px;
    margin: 20px;
    display: inline-block;
    font-weight: bold;
}

.popup-review .status0 {color: red; font-size:22px}
.popup-review .status1 {color: #a54200; font-size:22px}
.popup-review .status2 {color: #d2974d; font-size:22px}
.popup-review .status3 {color: green; font-size:22px}
.popup-checkin{background:rgba(0,0,0,.4);    cursor:pointer;    display:none;    height:100%;	color:blue;	font-size:20px;    position:fixed;    text-align:center;    width:100%;    z-index:10000;}
.popup-checkin > div {    background-color: #fff;    box-shadow: 10px 10px 60px #555;    display: inline-block;	top:10%;    height: auto;    max-width: 600px;    min-height: 100px;    vertical-align: middle;    width: 80%;    position: relative;    border-radius: 8px;    padding: 15px 5%;}
.popup-review{background:rgba(0,0,0,.4);    cursor:pointer;    display:none;    height:100%;	color:blue;	font-size:20px;    position:fixed;    text-align:center;    width:100%;    z-index:10000;}
.popup-review > div {    background-color: #fff;    box-shadow: 10px 10px 60px #555;    display: inline-block;	top:10%;    height: auto;    max-width: 600px;    min-height: 100px;    vertical-align: middle;    width: 80%;    position: relative;    border-radius: 8px;    padding: 15px 5%;}
.popup-bag{background:rgb(0 0 0 / 65%);    cursor:pointer;    display:none;	top:0%;    height:100%;	color:blue;	font-size:20px;    position:fixed;    text-align:center;    width:100%;    z-index:10000;}
.popup-bag > div {  background-color: #fff;  display: inline-block;top:5%; height: auto;  height: 90%; width:90%;    vertical-align: middle;    position: relative;    border-radius: 8px;    padding: 0;}
.popup-public{background:rgb(0 0 0 / 65%);    cursor:pointer;    display:none;	top:-25%;    height:130%;	color:blue;	font-size:20px;    position:fixed;    text-align:center;    width:100%;    z-index:10000;}
.popup-public > div {  background-color: #fff;  display: inline-block;top:30%; height: auto;  min-width: 400px;   min-height: 400px;max-width:800px;    vertical-align: middle;    position: relative;    border-radius: 8px;    padding: 0;}
.popup-register{background:rgb(0 0 0 / 65%);    cursor:pointer;    display:none;	top:-25%;    height:130%;	color:blue;	font-size:20px;    position:fixed;    text-align:center;    width:100%;    z-index:10000;}
.popup-register > div {  background-color: #fff;  display: inline-block;top:30%; height: auto;  min-width: 400px;   min-height: 400px;max-width:800px;    vertical-align: middle;    position: relative;    border-radius: 8px;    padding: 0;}
.popup-login{background:rgb(0 0 0 / 65%);    cursor:pointer;    display:none;	top:-25%;    height:130%;	color:blue;	font-size:20px;    position:fixed;    text-align:center;    width:100%;    z-index:10000;}
.popup-login > div {  background-color: #fff;  display: inline-block;top:30%; height: auto;  min-width: 400px;   min-height: 400px;max-width:800px;    vertical-align: middle;    position: relative;    border-radius: 8px;    padding: 0;}
.popup-login h3 {font-size:25px; padding: 20px}
.popup-login .tbl_login {width:80%; }
.popup-login .tbl_login td{height:0}
.popup-login .tbl_login span {margin-top:30px}
.popup-login .tbl_login input {border: 1px solid #dc9090; height:40px; width:100%; padding-left:20px; color: blue; font-size:20px}

.popup-login .btn .btn_login {border: 1px solid #dc9090; padding:10px 20px; color: blue; font-size:20px; margin:20px; background: #00de30; width:100px}
.popup-login .btn .btn_login:hover {border: 1px solid #dc9010; color:#fff; background: #00de10;}
.popup-login .btn .lb_forget {color:#b5340d; font-size:13px; }
.popup-login .btn #register {color: blue; font-size:16px; }
.popup-login .btn #register:hover {color: red;}

.popup-event{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
	top:-25%;
    height:130%;
	color:blue;
	font-size:20px;
    position:fixed;
    text-align:center;
    width:100%;
    z-index:10000;
}

.popup-event > div {
    /* background-color: #fff; */
    display: inline-block;
	top:30%;
    height: auto;
    min-width: 400px;
    min-height: 100px;
	/* max-width:800px; */
    vertical-align: middle;
    position: relative;
    border-radius: 8px;
    padding: 0;
}
.popup-event > div img {width:100%;}
.popup-event .detail-event{max-width:800px;}
.popup-event .card-comtainer{position:relative;width:1200px; height:560px; background:#fff; padding:20px}
.popup-event .card-comtainer .card-title{width:100%; line-height:62px;font-family: cursive;}
.popup-event .card-comtainer .card-branch{width:200px; height:100%;position:absolute; top:100px}
.popup-event .card-comtainer .card-branch .branchs{width:100%; line-height:50px; background:#c7bdfb; margin:2px; padding:5px}
.popup-event .card-comtainer .card-branch .branchs img {height:40px; width:auto; float:left}
.popup-event .card-comtainer .card-branch .branchs.checked {margin-left:18px; background:#e6e6e6;border: 1px solid #dc9090; border-right: none;}
.popup-event .card-comtainer .card-right{margin-left:228px; width:550px; height:470px; padding:10px ;background:#e6e6e6;border: 1px solid #dc9090;}
.popup-event .card-comtainer .card-cash{width:550px; height:300px; background:#e6e6e6;}
.popup-event .card-comtainer .card-orther{width:550px;display: inline-flex; background:#e6e6e6; margin:10px 0 }
/* .popup-event .card-comtainer .card-cash .cash{position:relative; width:150px; line-height:50px; background:gray; margin:1px; float:left} */
.contain{display: inline-block;  position:relative;  cursor:pointer;  font-size:30px;  user-select: none;  padding-left:40px;  margin:9px; background:#d6b654;width:120px; height:70px; line-height:70px;border: 2px solid #d6b65485;box-shadow: -1px 0 4px #fff; border-radius:3px}
.contain input {position: absolute;  opacity: 0;  cursor: pointer;}
.checkmark{  position:absolute;  top:20;  left:10;  width:30px;  height:30px;  background:#eee;  border-radius:50%;}
.contain:hover .checkmark{  background:#ccc;}
.checkmark:after{  content:"";  position:absolute;  display:none;}
.checkmark:after{  top:50%;  left:50%;  width: 15px;  height: 15px;  border-radius:50%;  border: solid 3px white;  transform:translate(-50%,-50%) rotate(45deg);}
.contain input:checked ~ .checkmark{  background:#2196F3;}
.contain input:checked ~ .checkmark:after{  display:block;}
.contain.checked {border: solid 2px #fff; color:red;font-weight:bold ;text-shadow:1px 1px 1px #fff;box-shadow: 0px 0px 20px red;}


.popup-event .card-comtainer .card-orther .contain{width:110px;height:40px;background:#ebdffb;line-height:40px; height:40px; font-size:20px;border: none!important;}
.popup-event .card-comtainer .card-orther .contain .checkmark{  position:absolute;  top:5;  left:5; background:#fff;  border-radius:50%;}
.popup-event .card-comtainer .card-orther .contain .checkmark:after{  content:"";  position:absolute;  display:none;}
.popup-event .card-comtainer .card-orther .contain .checkmark:after{  top:50%;  left:50%;  width: 15px;  height: 15px;  border-radius:50%;  border: solid 3px white;  transform:translate(-50%,-50%) rotate(45deg);}

.popup-event .card-comtainer .card-orther .contain input:checked ~ .checkmark{  background:#2196F3;}
.popup-event .card-comtainer .card-orther .contain input:checked ~ .checkmark:after{  display:block;}
.popup-event .card-comtainer .card-submit .textarea {border: 1px solid #d6b65485;  width:100%; padding:10px;  margin:10px 0; font-size:20px; }
.popup-event .card-comtainer .card-orther .input {border: 1px solid #dc9090; line-height:90px; width:360px;height:90px; margin:10px; padding-left:20px; font-size:60px; text-align:center}
.popup-event .card-comtainer .card-detail {width:350px;}
.popup-event .card-comtainer .card-detail .card-item {background:#00326d url('../images/bgf.jpg') no-repeat;background-size: 100%;background-position: center;box-shadow: 10px 10px 60px #ffc000;}
.popup-event .card-comtainer .card-detail .card-item {border: 2px solid #fff; width:300px;border-radius:10px; }
.popup-event .card-comtainer .card-detail .cards .input {line-height:20px; width:300px;height:80px; font-size:40px; text-align:center;text-shadow:1px 1px 1px #fff; font-weight:bold; color:blue}
.popup-event .card-comtainer .card-submit {width:100%; background:#fff; margin-top:100px}
.popup-event .card-comtainer .card-submit .button {border: 1px solid #d6b654; font-size:24px; padding:10px 20px; margin:20px; background:#d6b654; border-radius:10px; color:#fff;box-shadow: 0px 0px 20px green;}
.popup-event .card-comtainer .card-submit .input {border: 1px solid #dc9090; line-height:60px; width:180px;height:60px; margin:10px; padding-left:10px; font-size:30px; text-align:center}
.popup-event .card-comtainer .card-submit .button:hover {background:green}
.popup-event .card-comtainer .card-submit .require .red{background:red; line-height:20px; width:100%; padding:7px; color:#fff}


.popup-event .card-branch .promotion {width: 106%;border: 1px solid #d6b654;}
.popup-event .card-branch .promotion th {border: 1px solid #d6b654;line-height:50px; color:#723f00; font-size:20px}
.popup-event .card-branch .promotion td {border: 1px solid #d6b654; text-align:right; padding-right: 10px; line-height:40px; color:#bf6900; ; font-size:20px}
.popup-event .card-branch .promotion td:last-child{color: green; }





/******** ORDER **********************************************************************************************************************************************************************/


/******** 404 PAGE **********************************************************************************************************************************************************************/

.error-404 {width:100%;}
.error {width:600px;text-align: center;}
.error img:first-child {width:70%;padding-top:30px}
.error img{width:100%;}
.error span{left:40px; font-size:30px; color:red;font-weight:bold ;}

/******** FOOTER **********************************************************************************************************************************************************************/

.footer {background:#00326d url('../images/bgf.jpg') no-repeat;background-size: 100%;background-position: center;position:relative;}
.footer {width:100%;height:250px;margin:0 auto; border-top: solid 3px #bc2800d9;}
.footer .container{  width:100%;height:100%;}
.footer .container .footl{  width:100px;}
.footer .container .footl .logo-group {position:relative;top:30px; font-weight: bold;font-variant: small-caps}
.footer .container .footl .logo-group p{position:absolute; top:45px; right:80px; font-size:30px;color: #936e27;}
.footer .container .footl .logo-group span{position:absolute; top:25px; right:110px; font-size:25px;color: #bc2800;}
.footer .container .footl .logo-group img{  width:80px;}
.footer .container .footl .logo-fbusiness {position:relative;top:30px}
.footer .container .footl .logo-fbusiness .community{  width:40px; height:40px; border-radius:30px;overflow: hidden; margin: 5px; background: #fff;}
.footer .container .footl .logo-fbusiness img{  width:40px; height:40px;}
.footer .container .footl .info-group{text-align:left; color:#936e27; padding-top:20px}
.footer .container .footl .info-group i{margin-right:5px; color:#bc2800}
.footer .container .footl .info-group p{margin:5px 0;font-size: 14px;}

.footer .container .footc{  width:600px; color:#936e27}
.footer .container .footc .fmenu{  width:100%;}
.footer .container .footc .fmenu div{padding:5px 0}
.footer .container .footc .fmenu h3{font-size:25px; margin-top:50px; color:#00ff00; text-shadow: -1px 0 4px #876f46, 0 1px 4px #876f46, 1px 0 4px #876f46, 0 -1px 4px #876f46;}
.footer .container .footc .fmenu i{margin-right:10px;}
.footer .container .footc .fmenu a{font-size:15px; margin-left:10px; color:#936e27; transition: all 0.5s ease; -webkit-transition: all 0.5s ease;  -moz-transition: all 0.5s ease;  }
.footer .container .footc .fmenu a:hover{color:#bc2800;margin-left:25px; }

.footer .container .footc .fbusiness{  width:50%;}
.footer .container .footc .fbusiness div{padding:5px 0}
.footer .container .footc .fbusiness h3{font-size:25px; margin:20px 10px}
.footer .container .footc .fbusiness i{margin-right:10px;}
.footer .container .footc .fbusiness a{font-size:15px; margin-left:10px; color:#936e27; transition: all 0.5s ease; -webkit-transition: all 0.5s ease;  -moz-transition: all 0.5s ease;  }
.footer .container .footc .fbusiness a:hover{color:#bc2800;margin-left:25px; }

.footer .container .footr{  width:400px;}

.social {padding-top:10px}
.social p {font-size:20px; margin:15px 0; color:#0f0}
.community {margin:0; }
.community i {font-size:20px; margin:2px; color:#fff;width: 30px;    height: 30px;     line-height: 30px;    color: #fff;   border-radius: 30px;    text-align: center;     vertical-align: bottom;    background-color: #936e2750;}
.community a {line-height: 30px; margin:2px;   color: #fff;   border-radius: 30px;padding:10px }
.community .facebook:hover {background-color:#4267b2}
.community .skype:hover {background-color:#0078ca}
.community .intagram:hover {background-color:#8a49c1}
.community .gplus:hover {background-color:#dc4e41}
.community .email:hover {background-color:#f7ca59}
.community .zalo:hover {background-color:#0078ca}

@keyframes shake {  10%, 90% {    transform: translate3d(-1px, 0, 0);  }  20%, 80% {    transform: translate3d(2px, 0, 0);  }  30%, 50%, 70% {    transform: translate3d(-4px, 0, 0);  }  40%, 60% {    transform: translate3d(4px, 0, 0);  }}

.bottombar {position:absolute;width:100%; height:25px;margin:0px auto;bottom:0px; background:#80808080;}
.bot {width:1200px;font-size:12px;top:5px;position: absolute;}
.bot span{color:#fff;}
.bot-left {width:50%; text-align:left; float:left}
.bot-right{width:50%; text-align:right; float:right}


@media only screen and (max-width: 600px) {
}