.daily-meals-page{}
.daily-meals-page .banner{width:100%; position:relative; text-align:left; float:left; padding:40px; margin-bottom:30px;}
.daily-meals-page .banner:before{content:''; width:100%; height:100%; position:absolute; top:0; left:0; background:url(../Default/bg-daily-food.png) no-repeat center; background-size:cover; background-position: right center; border-radius:10px;}
.daily-meals-page .banner h4{display:block; font-size:14px; font-weight:bold; position:relative; z-index:2;}
.daily-meals-page .banner h3{font-weight:bold; font-size:32px; padding-bottom:25px; position:relative; z-index:2; color:var(--color-green)}
.daily-meals-page .banner .food-search{width:500px; display:block;  position:relative; z-index:2; padding:0 0px 40px 0px;  float:left; }
.daily-meals-page .banner .food-search:before{font-family: "Font Awesome 5"; font-weight: 400; content: "\f002"; width:50px; height:44px; line-height:44px; position:absolute; left:15px; top:0px; font-size:16px; font-weight:400; opacity:.5}
.daily-meals-page .banner .food-search label{position:absolute; bottom:0; left:0; font-size:13px; color:var(--color-red); font-weight:500;}
.daily-meals-page .banner .food-search input[type="text"]{width:calc(100% - 75px); height:44px; background:#fff; border-radius:7px; float:left; border:none; outline:none; font-weight:500; padding-left:45px; }
.daily-meals-page .banner .food-search .nav-search{height:44px; line-height:44px; width:60px; background:var(--color-green); float:right; display:block; font-size:16px; border-radius:7px; color:#fff; text-align:center}
.daily-meals-page .left-page{width:290px; float:left; position:relative;}
.daily-meals-page .left-page .wrap-group{width:100%; float:left; margin-bottom:25px; padding-bottom:30px; background:#fff; border-radius:10px; padding: 20px 25px;}
.daily-meals-page .left-page .wrap-group .title-group{width:100%; float:left; font-weight:700; font-size:15px;}
.daily-meals-page .right-page{width:calc(100% - 320px); float:right; position:relative;}
.daily-meals-page .right-page .barTop{width:100%; float:left; background:#fff; margin-bottom:10px; border-radius:7px; padding: 0 15px;  }
.daily-meals-page .right-page .barTop h2{font-size:15px; font-weight:700; margin:0; line-height:45px; float:left;}
.daily-meals-page .right-page .barTop .wrap-sort{position:relative; float:right; display:block; margin-top:5px; padding-left:60px;}
.daily-meals-page .right-page .barTop .wrap-sort:before{content:'Sắp xếp:'; position:absolute; top:0; left:0; font-size:13px; opacity:.75; line-height:35px; }
.daily-meals-page .right-page .barTop .wrap-sort .nav-drop{line-height:35px; font-weight:500; color:var(--color); max-width:210px; padding-right:25px; display:block; float:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative; transition:.3s;}
.daily-meals-page .right-page .barTop .wrap-sort .nav-drop:after{font-family: "Font Awesome 5";font-weight: 900; content: "\f0dd";line-height:34px; font-size:12px; position:absolute; top:0; right:5px; opacity:.5}
.daily-meals-page .right-page .barTop .wrap-sort .dropdown-menu{display:block; top:100%!important; margin-top:-5px; transform:initial!important; left:0; padding: 15px 20px; border:none; border-radius:7px; box-shadow: 0 3px 15px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.02); opacity:0; visibility:hidden; transition:.3s; width:240px;}
.daily-meals-page .right-page .barTop .wrap-sort .dropdown-menu a{font-size:14px; padding: 0 0px; width:100%; float:left; white-space:nowrap; line-height:30px; font-weight:normal}
.daily-meals-page .right-page .barTop .wrap-sort .dropdown-menu a:nth-child(2n){border-top:1px solid var(--color-border); padding-top:10px; margin-top:10px;}
.daily-meals-page .right-page .barTop .wrap-sort.show .dropdown-menu{opacity:1; visibility:initial; margin-top:10px;}
.daily-meals-page .right-page .barTop .result-count{float:right; position:relative; font-size:13px; line-height:25px; margin-top:10px; opacity:.7; position:relative; padding-left:20px; margin-left:20px;}
.daily-meals-page .right-page .barTop .result-count:before{content:''; width:1px; height:16px; margin-top:-8px; left:0; position:absolute; top:50%; background:#000; opacity:.15;}

ul.list-catalogFood{width:calc(100% + 50px); margin:10px 0 0 -25px; padding:0; list-style:none; padding: 0 25px; float:left; clear:both;}
ul.list-catalogFood li{width:100%; float:left; position:relative; border-bottom:1px solid var(--color-border)}
ul.list-catalogFood li{width:100%; float:left; border-bottom:1px solid var(--color-border)}
ul.list-catalogFood li a{width:100%; line-height:48px; position:relative; font-size:15px; padding-left:32px; display:flex;}
ul.list-catalogFood li a img{position:absolute; top:50%; left:0; display:block; height:20px; margin-top:-10px; opacity:.5}
ul.list-catalogFood li a b{font-size:12px; font-weight:600; float:right; border:1px solid var(--color-border); line-height:21px; height:22px; border-radius:11px; margin-top:-11px; padding: 0 5px; position:absolute; top:50%; right:0; }
ul.list-catalogFood li:last-child{border:none;}
ul.list-catalogFood li.active a{pointer-events:none}
ul.list-catalogFood li.active a img{opacity:1;}
ul.list-catalogFood li.active a span{font-weight:bold; color:var(--color-blue); }
ul.list-catalogFood li.active a:before{content:''; width:4px; height:calc(100% - 20px); position:absolute; left:-26px; top:10px; background:var(--color-blue); border-radius:0 4px 4px 0}


ul.list-filter{width:100%; margin:15px 0 0 0; padding:0; list-style:none; float:left}
ul.list-filter li{width:100%;float:left; position:relative; padding: 7px 0 7px 28px; cursor:pointer}
ul.list-filter li:before{content:''; width:16px; height:16px; line-height:16px; text-align:center; margin-top:-9px; border-radius:3px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); position:absolute; top:50%; left:0; transition:.3s; font-family: "Font Awesome 5"; font-weight: 400;}
ul.list-filter li:hover:before{box-shadow: 0 0 0 1px var(--color-blue)}
ul.list-filter li span{font-size:15px; font-weight:400; float:left; }
ul.list-filter li b{font-size:12px; font-weight:600; float:right; border:1px solid var(--color-border); line-height:21px; height:22px; border-radius:11px; margin-top:-11px; padding: 0 5px; position:absolute; top:50%; right:0; }
ul.list-filter li.active:before{box-shadow: 0 0 0 1px var(--color-blue); background:var(--color-blue); content: "\f00c"; color:#fff; font-size:14px;}

ul.list-food{width:100%; margin:0px 0 0 0; padding:0; list-style:none; float:left; border-radius:10px; overflow:hidden; background:#fff;}
ul.list-food li{width:25%; float:left; padding: 15px; box-shadow: 1px 1px var(--color-border); }