:root {
    --colorIcon: #183153;
 }

.dailyMenu-page{}
.dailyMenu-page .col-filter{width:290px; float:left; position:relative; padding-right:30px;}
.dailyMenu-page .col-filter .group-item{width:100%; float:left; position:relative; margin-bottom:40px;}
.dailyMenu-page .col-filter .group-item .title-group{width:100%; float:left; position:relative; background:#fff; margin-bottom:20px; background-image: linear-gradient(to right, #f3f3f6 50%, #fff);}
.dailyMenu-page .col-filter .group-item .title-group h4{ max-width:calc(100% - 15px); border-radius:7px 7px 0 0; white-space:nowrap; margin:0 0 0 -8px; width:auto; line-height:39px; height:38px; padding: 0 20px; float:left; position:relative; background:#ec1f26; color:#fff; text-transform:uppercase; font-size:15px; font-weight:bold; position:relative; letter-spacing:1px;}
.dailyMenu-page .col-filter .group-item .title-group h4:after{content:''; border-left:15px solid #ec1f26; border-top:33px solid transparent;position:absolute; bottom:0; left:100%;}
.dailyMenu-page .col-filter .group-item .title-group h4:before{content:''; border-top:8px solid #700008; border-left:8px solid transparent; position:absolute; top:100%; left:0;}
.dailyMenu-page .col-filter .group-item .title-filter{display:block; font-weight:900; color:#000; font-size:16px; padding-bottom:10px; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--border-color); margin-bottom:15px; position:relative;}
.dailyMenu-page .col-filter .group-item .title-filter:before{content:''; width:12px; height:12px; background:#fff; transform:rotate(45deg); display:block; position:absolute; left:20px; bottom:-6px; border-bottom:1px solid var(--border-color); border-right:1px solid var(--border-color)}
.dailyMenu-page .col-filter .group-item:last-of-type{margin-bottom:0;}
.dailyMenu-page .col-content{width: calc(100% - 290px); float:right; position:relative;}
.dailyMenu-page .col-content .bannerFood{width:100%; height:320px; float:left; background:url(../Default/bg-food.jpg) no-repeat right bottom; background-size:cover; border-radius:10px; }

ul.catalog-filter{margin:0; padding:0; list-style:none; width:100%;}
ul.catalog-filter li{width:100%; float:left; position:relative;}
ul.catalog-filter li a{text-decoration:none; color:#000; font-size:16px; position:relative; padding:6px 20px 6px 25px; display:block; font-weight:500; z-index:3 }
ul.catalog-filter li a:before{content:''; width:12px; height:12px; margin-top:-7px; border:3px solid rgba(0,0,0,.15); border-radius:0px; display:block; position:absolute; top:50%; left:0;}
ul.catalog-filter li:hover a,
ul.catalog-filter li:hover span,
ul.catalog-filter li.current a{color:var(--color2)}
ul.catalog-filter li.current a:before{border-color:var(--color2)}
ul.catalog-filter li.current span{background:var(--color2); color:#fff; box-shadow:none;}
ul.catalog-filter li span{position:absolute; right:0; top:5px; font-size:12px; font-weight:bold; background:#eff2f5; height:22px; line-height:22px; padding: 0 7px; border-radius:11px; text-align:center; min-width:26px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); background:#fff;}

ul.check-filter{margin:0; padding:0; list-style:none; width:100%; float:left; position:relative;}
ul.check-filter li{width:100%; float:left; position:relative; font-size:15px; padding: 7px 0 7px 25px; cursor:pointer }
ul.check-filter li:before{content:''; width:16px; height:16px; line-height:14px; margin-top:-9px; text-align:center; border:1px solid rgba(0,0,0,.15); border-radius:2px; position:absolute; left:0; top:50%;}
ul.check-filter li.checked{color:var(--color2)}
ul.check-filter li.checked:before{border-color:var(--color2);font-family: "Font Awesome 5"; font-size:10px; padding-left:1px;  font-weight:900;content: "\f00c"; background:var(--color2); color:#fff;}
ul.check-filter li .star{position:absolute; top:8px; font-size:12px; right:0;}
ul.check-filter li .human{position:absolute; top:6px; font-size:16px; right:0;}
ul.check-filter li.typeHuman:first-child:after{content: "\f554"; font-family: "Font Awesome 5"; font-weight: 900; font-size: 18px; position:absolute; top:5px; right:0;  color:#3cbd42}
ul.check-filter li.typeHuman:nth-child(2):after{content: "\f29d"; font-family: "Font Awesome 5"; font-weight: 900; font-size: 18px; position:absolute; top:5px; right:0;  color:#f44336}


/* Bar list */
.dailyMenu-page .col-content .head-col{width:100%; float:left; position:relative; display:table;}
.dailyMenu-page .col-content .head-col .info{display:table-cell; vertical-align:top;}
.dailyMenu-page .col-content .head-col .info h3{margin:0; display:block; color:#000; font-weight:500; font-size:22px; text-transform:capitalize}
.dailyMenu-page .col-content .head-col .info .total{display:block; clear:both; padding-top:3px; }
.dailyMenu-page .col-content .head-col .info .total b{padding-right:5px; color:#000; font-size:16px;}
.dailyMenu-page .col-content .head-col .info .total span{font-weight:500; color:rgba(0,0,0,.7); font-size:14px;}
.dailyMenu-page .col-content .head-col .info.search h3{font-weight:normal; font-size:20px;}
.dailyMenu-page .col-content .head-col .info.search h3 b{color:var(--color3); font-size:22px;}
.dailyMenu-page .col-content .head-col .toolbar{display:table-cell; vertical-align:bottom; text-align:right;}
.dailyMenu-page .col-content .head-col .searchFoods{float:right; position:relative; width: 320px;}
.dailyMenu-page .col-content .head-col .searchFoods:after{font-family: "Font Awesome 5";font-weight: 900; content: "\f002"; width:40px; height:40px; text-align:center; line-height:40px; font-size:16px; position:absolute;top:0; right:0; z-index:1; color:#000; opacity:.5}
.dailyMenu-page .col-content .head-col .searchFoods .nav-search{display:none; float:left; margin-left:10px; height:40px; width:40px; align-items:center; justify-content:center; color:rgba(0,0,0,.3); transition:.3s; background:#fff; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); font-size:16px;}
.dailyMenu-page .col-content .head-col .searchFoods input[type='text']{width:100%; height:40px; box-shadow:0 0 0 1px rgba(0,0,0,.07); border:none; border-radius:5px; background:none; outline:none; font-family:Roboto; transition:.3s; padding: 0 40px 0 10px; z-index:2; position:relative;} 
.dailyMenu-page .col-content .head-col .searchFoods input[type='text']:focus{box-shadow:0 0 0 1px var(--color2)}
.dailyMenu-page .col-content .body-col{width:100%; float:left; position:relative;}
.dailyMenu-page .col-content .body-col .note{width:100%; float:left; background:#fbf5e9; padding: 10px 15px; color:#000; margin-top:20px; border-radius:5px; font-size:15px; font-style:italic; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); display:table; }
.dailyMenu-page .col-content .body-col .note label{margin:0; font-weight:bold; text-transform:uppercase; white-space:nowrap; display:table-cell;}
.dailyMenu-page .col-content .body-col .note label:before{font-family: "Font Awesome 5"; font-weight: 900; content: "\f071"; font-style:initial; font-size:16px; padding-right:10px; color:#e78a00}
.dailyMenu-page .col-content .body-col .note label:after{content:':'; padding-right:10px;}
.dailyMenu-page .col-content .body-col .note span{display:table-cell; width:100%;}
.dailyMenu-page .col-content .body-col .note b{color:#f44336}
.dailyMenu-page .col-content .body-col .note b:last-child{color:#3cbd42}

@media (max-width:767px){
    .dailyMenu-page .col-content{width:calc(100% + 30px); margin-right:-15px}
    .dailyMenu-page .col-content .head-col{position:fixed; top:65px; height:50px; width:100%; left:0; background:#fff; z-index:20; box-shadow: 0 1px rgba(0,0,0,.07), 0 0 5px rgba(0,0,0,.07)}
    .dailyMenu-page .col-content .head-col .info{padding: 0 15px; float: left;}
    .dailyMenu-page .col-content .head-col .info h3{line-height:50px; float:left; font-size:16px; text-transform:uppercase; font-weight:900;}
    .dailyMenu-page .col-content .head-col .info .total{float:left; clear:initial; display:none;}
    .dailyMenu-page .col-content .head-col .toolbar{padding:0; vertical-align:middle}
    .dailyMenu-page .col-content .head-col .nav-openPanelFilter{position:absolute; font-size:16px; color:var(--color3); line-height:32px; width:32px; top:9px; right:9px; box-shadow: 0 0 0 1px var(--color-border); text-align:center; border-radius:4px;}
    .dailyMenu-page .col-content .body-col .note{margin-top:0; border-radius:0;}
}

.viewMode{display:block; position:relative; height:40px; float:right}
.viewMode a{display:flex; float:left; margin-left:10px; height:40px; width:40px; align-items:center; justify-content:center; color:rgba(0,0,0,.3); transition:.3s; background:#fff; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
.viewMode a:hover{color:var(--color2)}
.viewMode a.active{color:var(--color2); cursor:default; box-shadow:inset 0 0 0 1px var(--color2);}

.nav-filter{display:flex; float:right; margin-left:10px; height:40px; width:40px; align-items:center; justify-content:center; color:rgba(0,0,0,.3); transition:.3s; background:#fff; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); background:var(--color2)}
.nav-filter svg{fill:#fff;}
.nav-filter.active{color:var(--color2); cursor:default; box-shadow:inset 0 0 0 1px var(--color2);}

.star{display:block;}
.star i{float:left; padding-left:2px; color:rgba(0,0,0,.2)}
.star i:before{font-family: "Font Awesome 5";font-weight: 900; content: "\f005"; font-style:normal; }
.star-1 i:first-child{color:#ff9800}
.star-2 i:first-child,
.star-2 i:nth-child(2){color:#ff9800}
.star-3 i:first-child,
.star-3 i:nth-child(2),
.star-3 i:nth-child(3){color:#ff9800}
.star-4 i:first-child,
.star-4 i:nth-child(2),
.star-4 i:nth-child(3),
.star-4 i:nth-child(4){color:#ff9800}
.star-5 i{color:#ff9800}

.human{display:block;}
.human i{float:left; padding-left:3px; color:rgba(0,0,0,.2)}
.human i:before{font-family: "Font Awesome 5";font-weight: 900; content: "\f183"; font-style:normal; }
.human-1 i:first-child{color:#673ab7}
.human-2 i:first-child,
.human-2 i:nth-child(2){color:#673ab7}
.human-3 i:first-child,
.human-3 i:nth-child(2),
.human-3 i:nth-child(3){color:#673ab7}
.human-4 i:first-child,
.human-4 i:nth-child(2),
.human-4 i:nth-child(3),
.human-4 i:nth-child(4){color:#673ab7}
.human-5 i{color:#673ab7}

/* list food */

ul.list-dailyMenu{margin:20px 0 0 0; padding:0; list-style:none; border-radius:7px; border:1px solid var(--color-line); width:100%; float:left;}
ul.list-dailyMenu li{margin:0; padding:15px 15px 60px 15px; position:relative; border-right:1px solid var(--color-line); border-top:1px solid var(--color-line) }
ul.list-dailyMenu li .wrap-img{width:100%; float:left; position:relative;}
ul.list-dailyMenu li .wrap-img:before{content:''; display:block; padding-top:70%;}
ul.list-dailyMenu li .wrap-img a{display:block; width:100%; height:100%;  position:absolute; border-radius:5px; overflow:hidden; top:0; left:0;}
ul.list-dailyMenu li .wrap-img a img{width:inherit; height:inherit; object-fit:cover; transition:.3s;}
ul.list-dailyMenu li:hover .wrap-img a img{transform: scale(1.1);}
ul.list-dailyMenu li .wrap-info{width:100%; float:left; margin-top:15px;}
ul.list-dailyMenu li .name{display:block; text-decoration:none; padding: 0; width:100%; float:left;}
ul.list-dailyMenu li .name h3{font-size:17px; color:#000; line-height:22px; transition:.3s;}
ul.list-dailyMenu li .name:hover h3{color:var(--color2)}
ul.list-dailyMenu li .wrap-attr{width:100%; float:left; position:relative; margin: 0px 0 0px 0; top:0; left:0; color:#000}
ul.list-dailyMenu li .wrap-attr .ele{display:block; float:left; position:relative; margin-right:30px; font-size:13px;}
ul.list-dailyMenu li .wrap-attr .ele b{padding: 0 3px; font-size:14px;}
ul.list-dailyMenu li .wrap-attr .ele span{opacity:.75}
ul.list-dailyMenu li .wrap-attr .ele:first-child:after{content:''; width:5px; height:5px; border-radius:50%; background:var(--color2); position:absolute; right:-18px; top:8px;}
ul.list-dailyMenu li .wrap-attr .ele:last-of-type{margin-right:0;}

ul.list-dailyMenu li .attr-row{width:calc(100% - 30px); display:table; margin-top:10px; float:left; position:absolute; left:15px; bottom:15px;}
ul.list-dailyMenu li .attr-row .attr-col{display:table-cell; vertical-align:middle; padding-left:7px;}
ul.list-dailyMenu li .attr-row .attr-col:first-of-type{padding:0; }
ul.list-dailyMenu li .attr-row .attr-col .inner{width:100%; background:rgba(0,0,0,.06); border-radius:4px; text-align:right; position:relative; font-weight:bold; color:#000; padding:0 10px; line-height:31px; height:30px; font-size:14px; white-space:nowrap}
ul.list-dailyMenu li .attr-row .attr-col .balance{background:#3cbd42; color:#fff;}
ul.list-dailyMenu li .attr-row .attr-col .balance:before{content: "\f554"; font-family: "Font Awesome 5"; font-weight: 900; font-size:16px; float:left;}
ul.list-dailyMenu li .attr-row .attr-col .loss-balance{background:#f44336; color:#fff;}
ul.list-dailyMenu li .attr-row .attr-col .loss-balance:before{content: "\f29d"; font-family: "Font Awesome 5"; font-weight: 900; font-size:16px; float:left;}
ul.list-dailyMenu li .attr-row .attr-col .meal{}
ul.list-dailyMenu li .attr-row .attr-col .meal:before{font-family: "Font Awesome 5"; font-weight: 900; font-size:17px; float:left; content: "\f183"; color:#673ab7; }
ul.list-dailyMenu li .attr-row .attr-col .meal:after{content:'người'; font-size:12px; font-weight:500; padding-left:3px;}
ul.list-dailyMenu li .attr-row .attr-col .level{}
ul.list-dailyMenu li .attr-row .attr-col .level:before{font-family: "Font Awesome 5"; font-weight: 900; font-size:13px; float:left; content: "\f005"; color:#ff9800;}
ul.list-dailyMenu li .abbreviation{-webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;  padding: 8px 20px 0 0px; width:100%; float:right; display:none; }

@media (min-width:768px) {
    ul.listView{}
    ul.listView li{-ms-flex: 0 0 100%!important;flex: 0 0 100%!important; display:table; max-width: 100%!important; padding: 20px; border:none; border-top:1px solid var(--color-line)!important}
    ul.listView li:first-child{border:none!important}
    ul.listView li .wrap-img{width:300px; float:initial; position:relative; display:table-cell;}
    ul.listView li .wrap-info{width:calc(100% - 300px); float:initial; margin-top:0px; padding-left:20px; display:table-cell; vertical-align:top; padding-bottom:45px; position:relative;}
    ul.listView li .name h3{font-size:18px; }
    ul.listView li .attr-row{position:absolute; width:auto; left:0; margin-top:10px; float:left; left:20px; bottom:0px; position:absolute;}
    ul.listView li .attr-row .attr-col .inner:before{padding-right:10px;}
    ul.listView li .abbreviation{display:-webkit-box; color:#000; margin-top:10px;}
}



@media (max-width:767px) {
   .dailyMenu-page .col-content .head-col .toolbar{display:none;}
   .dailyMenu-page .col-content{width:calc(100% + 30px); margin:0 0 0 -15px; float:left; padding-top:50px; padding-bottom:85px;}
   ul.list-dailyMenu{border:none; margin-top:5px; border:none;}
   ul.list-dailyMenu li{padding-left:15px; padding-right:15px; border:none; padding-bottom:15px; box-shadow:none; border-top:1px solid var(--color-line)}
   ul.list-dailyMenu li:first-child{border-top:none;}
   ul.list-dailyMenu li .wrap-img{width:100%; float:left; margin:0 15px 0 0;}
   ul.list-dailyMenu li .wrap-info{float:initial; width:100%; margin:15px 0 0 0; float:left; position:relative; }
   ul.list-dailyMenu li .name{width:initial; float:initial; }
   ul.list-dailyMenu li .abbreviation{display:block; color:#000; padding-top:10px; }
   ul.list-dailyMenu li .attr-row{ bottom:initial; top:-60px;}
   ul.list-dailyMenu li .attr-row .attr-col .meal,
   ul.list-dailyMenu li .attr-row .attr-col .level{background:#fff;}
   ul.list-dailyMenu li .attr-row .attr-col:first-of-type{width:200px;}
}

@media (min-width:768px) and (max-width:991px) {
    .dailyMenu-page .col-filter{display:none;}
    .dailyMenu-page .col-content{width:100%; margin:0;}
    ul.list-dailyMenu li:nth-child(1),
    ul.list-dailyMenu li:nth-child(2){border-top:none;}
    ul.list-dailyMenu li:nth-child(2n){border-right:none;}
}

@media (min-width:992px) and (max-width:1199px) {
    ul.list-dailyMenu li:nth-child(1),
    ul.list-dailyMenu li:nth-child(2){border-top:none;}
    ul.list-dailyMenu li:nth-child(2n){border-right:none;}
}

@media (min-width:1200px) {
    ul.list-dailyMenu li:nth-child(1),
    ul.list-dailyMenu li:nth-child(2),
    ul.list-dailyMenu li:nth-child(3){border-top:none;}
    ul.list-dailyMenu li:nth-child(3n){border-right:none;}
}