.foodDate-page { padding-bottom:40px; width:100%; float:left; position:relative }
.foodDate-page .wrap-title{width:100%; float:left; display:table; margin-bottom:30px; margin-top:20px;}
.foodDate-page .wrap-title .col-left{display:block; position:relative; float:left; padding-right:25px; margin-right:25px;}
.foodDate-page .wrap-title .col-left h4{margin:0 0 5px 0; font-size:24px; font-weight:bold;}
.foodDate-page .wrap-title .col-left:after{content:''; width:2px; height:40px; margin-top:-18px; background:#000; position:absolute; right:0; top:50%; opacity:.2}
.foodDate-page .wrap-title .col-date{display:block; position:relative; float:left; padding-left:50px; margin-top:6px;}
.foodDate-page .wrap-title .col-date:before{font-family: "Font Awesome 5"; opacity:.5; font-weight: 300; content:"\f48b"; line-height:32px; height:32px; margin-top:-16px; font-size:32px; position:absolute; top:50%; left:0;}
.foodDate-page .wrap-title .col-date label{ float:left; text-transform:uppercase; font-weight:500; width:100%; margin:0;}
.foodDate-page .wrap-title .col-date b{font-size:18px; color:var(--color3)}
.foodDate-page .wrap-title .col-date span{}
.foodDate-page .wrap-title .col-date span:before{content:','; padding: 0 2px 0 0px;}
.foodDate-page .wrap-title .col-search{float:right; position:relative; width:450px;  margin-top: 5px 0 0 0; padding-left:180px;}
.foodDate-page .wrap-title .col-search .wrap-drop{position:absolute; top:0; left:0; width:165px;}
.foodDate-page .wrap-title .col-search .wrap-drop select{width:100%; height:50px; border:1px solid rgba(0,0,0,.1); border-radius:7px; transition:0.3s; padding: 0 10px;}
.foodDate-page .wrap-title .col-search .wrap-drop select:focus{outline:none; border-color:var(--color1)}
.foodDate-page .wrap-title .col-search:after{font-family: "Font Awesome 5"; font-weight: 900; content:"\f002"; font-size:16px; line-height:50px; position:absolute; top:0; right:15px; opacity:.5; outline:none;}
.foodDate-page .wrap-title .col-search input[type=text]{height:50px; font-size:15px; width:100%; border:1px solid rgba(0,0,0,.1); border-radius:7px; outline:none; padding: 0 50px 0 10px; transition:.3s;}
.foodDate-page .wrap-title .col-search input[type=text]:focus{border-color:var(--color1)}

.tbl-food{width:100%; margin:0; padding:0; float:left;}
.tbl-food thead th{padding-bottom:15px; background:rgba(0,0,0,.07); padding: 12px 10px;}
.tbl-food thead th:first-child{width:60px; border-radius: 7px 0 0 7px}
.tbl-food thead th:nth-child(4){width:150px;}
.tbl-food thead th:last-child{text-align:right;width:120px; border-radius: 0 7px 7px 0}
.tbl-food tbody td{vertical-align:middle; border-bottom:1px solid rgba(0,0,0,.1); padding: 10px;}
.tbl-food tbody td .food-item{width:100%; float:left;position:relative; display:table}
.tbl-food tbody td .food-item .wrap-img{width:90px;display:table-cell; padding-right:20px }
.tbl-food tbody td .food-item .wrap-img img{width:100%}
.tbl-food tbody td .food-item .wrap-info{position:relative; display:table-cell; vertical-align:middle }
.tbl-food tbody td .food-item .wrap-info h4{font-size:16px; font-weight:normal; margin-bottom:2px}
.tbl-food tbody td .food-item .wrap-info .unit{display:block; position:relative}
.tbl-food tbody td .food-item .wrap-info .unit b{color:var(--color3); position:relative; padding-right:10px; font-size:16px;}
.tbl-food tbody td .food-item .wrap-info .unit b:after{content:'₫'; position:absolute; right:0; font-size:13px;}
.tbl-food tbody td .food-item .wrap-info .unit span{font-size:13px;}
.tbl-food tbody td .food-item .wrap-info .unit span:before{content:'/'; padding: 0 5px}
.tbl-food tbody td .nav-weight{line-height:40px; padding: 0 10px; background:#fff; box-shadow: inset 0 0 0 2px rgba(0,0,0,.1); float:left; border-radius:5px; display:inline-block; color:#000; margin: 0 5px}
.tbl-food tbody td .nav-weight.active{background:var(--color1); color:#fff; box-shadow:none;}
.tbl-food tbody td .total-row{color:var(--color3); position:relative; padding-right:12px; font-size:18px;}
.tbl-food tbody td .total-row:after{content:'₫'; position:absolute; right:0; font-size:15px;}
.tbl-food tbody td:last-child{text-align:right}



.wrap-minusPlus{position:relative; float:left;  padding: 0 0 0 0px; width:100px; display:flex }
.wrap-minusPlus span{float:left; line-height:40; font-weight:bold; position:absolute; bottom:100%; left:0px; text-transform:uppercase; display:none;}
.wrap-minusPlus .minusPlus{float:right; position:relative; height: 40px; padding: 0 40px;border-radius:5px; box-shadow: 0 0 0 1px rgba(0,0,0,.1);}
.wrap-minusPlus .minusPlus a{width:34px; height:34px; line-height:34px; color:rgba(0,0,0,.5); text-align:center; font-size:16px; font-weight:normal; position:absolute; top:3px; text-decoration:none; border-radius:3px; transition:.3s }
.wrap-minusPlus .minusPlus a:hover{background:var(--color1); color:#fff}
.wrap-minusPlus .minusPlus a.nav-minus{left:3px;}
.wrap-minusPlus .minusPlus a.nav-plus{right:3px;}
.wrap-minusPlus .minusPlus input[type=text]{width:20px; height:40px; text-align:center; border:none; outline:none; font-weight:bold; font-size:16px; background:none;}

/* Checkbox & Radio */
.checkbox {float:left; margin:0; min-width:15px; position:relative; }
.checkbox  input[type=checkbox]{width:initial!important; margin:0!important}
.checkbox label { display: inline-block; min-width:15px; vertical-align: middle; cursor:pointer; position: relative;  padding-left: 24px; line-height:24px; padding-right:0; white-space:initial; height:24px; min-height:initial;  font-size:13px;}
.checkbox label:before{ content: ""; display: inline-block; position: absolute; width: 24px; height: 24px; left: 0; margin:0 0; border: 1px solid rgba(0,0,0,.2);  border-radius: 5px;  background-color: #fff; -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;}
.checkbox input[type=checkbox]{opacity:0; position:absolute; top:0; left:0; width:15px; height:15px; margin:0;}
.checkbox input[type="checkbox"]:focus + label:before{ outline: none;}
.checkbox input[type="checkbox"]:checked + label:after{font-family: "Font Awesome 5";content: "\f00c"; font-weight:500;  font-size:16px; position:absolute; top:2px; left:4px; color:#000; line-height:initial;}
.checkbox input[type="checkbox"]:indeterminate + label:after{ display: block; content: ""; width: 10px; height: 3px; background-color: #555555; border-radius: 2px; margin-left: -16.5px; margin-top: 7px;}
.checkbox input[type="checkbox"]:disabled + label{ opacity: 0.65; }
.checkbox input[type="checkbox"]:disabled + label:before{ background-color: #eeeeee; cursor: not-allowed; }
.checkbox.full{width:100%;}
.checkbox.full label{width:100%; display:block; float:left;}

.checkbox.right label{padding-left:0; padding-right:20px}
.checkbox.right label:before{left:initial; right:0;}
.checkbox.right input[type="checkbox"]:checked + label:after{left:inherit; right:3px;}

.checkbox.grid{width:15px; padding-left:0;}
.checkbox.grid input[type="checkbox"]{z-index:2;}
.checkbox.grid label{padding-left: 15px;}

.checkbox[columnname='IsShow'] input[type="checkbox"]{}

ul.total-info{width:100%; max-width:300px; position:relative; margin:0; padding:0; list-style:none; float:right}
ul.total-info li{width:100%; float:left; position:relative; display:table; padding-top:20px;}
ul.total-info li span{display:table-cell; position:relative; text-align:left; vertical-align:middle;}
ul.total-info li b{display:table-cell; position:relative; text-align:left; vertical-align:middle; margin:0; text-align:right}
ul.total-info li a{width:100%; float:left; display:table-cell; font-weight:500; height:50px; border-radius:7px; line-height:50px; text-align:center; vertical-align:middle; color:#fff; background: var(--color1)}
ul.total-info li a.disabled{pointer-events:none; cursor:initial; opacity:.5}
ul.total-info li b.total-price{color:var(--color3); position:relative; padding-right:12px; font-size:18px;}
ul.total-info li b.total-price:after{content:'₫'; position:absolute; right:0; font-size:15px;}