:root {
    --color1: #127948;
    --color2: #ffc107;
    --color3: #d61b14;
    --color-border: #e5e7eb;
    --colorBg: #f4f5ec;
    --color-line: #e5e6e9;
}

html{}
body{ float:left; padding-top:0px; background:var(--color-bg); background:#fff;  font-family: "Roboto", sans-serif;  font-weight: normal; font-style: normal; width:100%; font-size:15px; color:#000; margin:initial!important; overflow-x:hidden; overflow-y:auto;}
body:before{content:''; width:100%; height:100%;  background:#000; opacity:.5; z-index:-1; position:fixed; top:0; left:0; opacity:0; visibility:hidden; transition:.3s;}
b, strong{font-weight:bold;}

@media (max-width:767px){
    body{padding-bottom:75px; background:var(--color-bg)}
}
.font-title{font-family: "Signika", sans-serif; font-optical-sizing: auto; font-weight: normal; font-style: normal;}

/* Container */
@media (min-width: 1440px) {
    .container { max-width: 1400px}
}

.top-sticky{width:100%; float:left; position:relative; height:100px; background:red;}

/*****************************************************************/
/*                             Header                            */
/****************************************************************/


header{width:100%; float:left;  padding: 0; position:relative; top:0; left:0; z-index:30; background:#fff;}
header .head-top{width:100%; float:left; position:relative; background:var(--color1); height:40px; font-size:14px;}
header .head-top a{margin-right:20px; font-weight:normal; height:40px; line-height:42px; position:relative; display:block; transition:.3s; color:rgba(255,255,255,.85); float:left}
header .head-top a:hover{color:var(--color2)}
header .head-top a .icon{float:left; position:relative;margin-right:8px; height:40px; display:flex; align-items:center; justify-content:center}
header .head-top a .icon svg{ opacity:.7; fill:#fff; height:16px;}
header .head-top a i{font-size:16px; margin-right:10px; transition:.3s; color:var(--color2)}
header .head-top a:hover i{opacity:1}
header .head-top a:hover .icon svg{opacity:1;}
header .head-top .col-contact{display:block; text-align:left; height:40px; float:left; }
header .head-top .col-contact label{margin:0; color:#fff; opacity:.75; float:left; line-height:40px;}
header .head-top .col-contact label:after{content:':'; padding: 0 0 0 5px; opacity:.5; margin-right:10px}
header .head-top .col-account{display:block; text-align:right; float:right;}
header .head-top .col-account a{margin: 0 0 0 20px; font-weight:normal}
header .head-top .col-account a.nav-notify{position:relative;}
header .head-top .col-account a.nav-notify i{font-size:16px; margin-right:5px;}
header .head-top .col-account a.nav-notify .number{position:absolute; top:5px;left:-5px; background:var(--color2); line-height:14px;height:14px; text-align:center; min-width:14px; font-size:9px;font-weight:bold; z-index:2; border-radius:6px; color:#000 }

header .col-header{height:90px; position:relative;}
header .col-header .nav-logo{position: absolute;top: 15px; left: 50%; width: 160px; margin-left: -80px;}
header .col-header .nav-logo:before{content: ''; width: 320px;margin-left: -160px; height: 70px; position: absolute;left: 50%;bottom: -20px;background: url(LP-bg-logo.svg) no-repeat center bottom; background-size: 100% auto;}
header .col-header .nav-logo img{width:100%; position:relative; z-index:2;}
header .top-hotline{float:right; position:relative; font-family: "Signika", sans-serif; color:#000; font-weight:400; margin-top:25px; height:40px; padding: 0 20px 0 0;}
header .top-hotline span{display:block; clear:left; text-align:left;  font-size:15px;}
header .top-hotline b{font-size:20px; font-weight:600; margin-top:-5px;  float:left; } 
header .top-hotline:hover{color:var(--color1)}

@media (max-width:767px){
    header .col-header{height:150px!important;}
    header .head-top .col-contact{width:100%;}
    header .head-top .col-contact label{display:none;}
    header .head-top .col-contact a:last-child{float:right; margin-right:0;}
    header .head-top .col-account{display:none;}
    header .col-header .nav-logo{width:140px; margin-left:-70px;}
    header .col-header .nav-logo:before{display:none;}
    header .col-header .nav-logo:after{width:86px!important; height:86px!important; margin-left:-43px!important;}
    header .top-hotline {display:none;}

    header.fixed:before{content:''; width:100%; height:65px; background:#fff; position:fixed; top:0; left:0; z-index:90; box-shadow: 0 1px rgba(0,0,0,.05), 0 2px 10px rgba(0,0,0,.1) } 
}

@media (min-width: 768px) and (max-width:1199px){
    header .head-top .col-contact label{display:none;}
}

@media (max-width:1439px){
    header .col-header{height:155px;}
    header .col-header .nav-logo{top:-32px}
    header .col-header .nav-logo:after{width:96px; height:96px; margin-left:-48px; background:#fff; content:''; border-radius:50%; position:absolute; top:-8px; left:50%;}
    header .top-hotline{margin-right:60px;}
}



header .wrap-mainmeu{float:left; position:relative; z-index:3;}
header .wrap-mainmeu>ul{margin:25px 0 0 0; padding:0; list-style:none;}
header .wrap-mainmeu>ul>li{float:left; margin-right:20px; position:relative; height:51px;}
header .wrap-mainmeu>ul>li>a{text-decoration:none; font-weight:600; color:rgba(0,0,0,.8); font-size:16px; transition:.3s; height:40px; line-height:40px; text-transform:uppercase; font-family: "Signika", sans-serif;  }
header .wrap-mainmeu>ul>li:hover>a{color:var(--color1)}
header .wrap-mainmeu>ul>li>a.sub:after{font-family: "Font Awesome 5"; font-weight:900; content: "\f0d7"; font-size:10px; padding-left:5px; display:none;}
header .wrap-mainmeu>ul>li>ul{display:block; position:absolute; top:100%; left:0;width:220px; background:#fff; box-shadow: 0 0 60px 0 rgb(53 57 69 / 15%); margin:10px 0 0 0; padding:15px 0; list-style:none; opacity:0; visibility:hidden; transition:.3s; pointer-events:none; border-radius:15px 15px; }
header .wrap-mainmeu>ul>li>ul>li{width:100%; float:left; position:relative;}
header .wrap-mainmeu>ul>li>ul>li>a{color:rgba(0,0,0,1); font-family: "Signika", sans-serif;  padding: 10px 20px; font-size:16px; display:block; font-weight:400; width:100%; float:left; transition:.3s; position:relative;}
header .wrap-mainmeu>ul>li>ul>li>a:before{content:''; height:2px; margin-top:-1px; width:0px; background:var(--color1); position:absolute; top:50%; left:20px; transition:.3s;}
header .wrap-mainmeu>ul>li>ul>li:hover>a{padding-left:40px; color:var(--color1) }
header .wrap-mainmeu>ul>li>ul>li:hover>a:before{width:13px;}
header .wrap-mainmeu>ul>li:hover>ul{margin-top:0px; opacity:1; visibility:initial; pointer-events:initial}
header .wrap-mainmeu>ul>li>ul>li>ul{width:220px; padding:15px 0; min-height:100%; position:absolute; top:-15px; left:100%; opacity:0; visibility:hidden; pointer-events:none; transition:.3s; background:#fff; list-style:none; box-shadow: 0 0 60px 0 rgb(53 57 69 / 15%); border-radius:15px 15px;}
header .wrap-mainmeu>ul>li>ul>li>ul>li{width:100%; float:left;}
header .wrap-mainmeu>ul>li>ul>li>ul>li>a{color:rgba(0,0,0,1); font-family: "Signika", sans-serif;  padding: 10px 20px; font-size:16px; display:block; font-weight:400; width:100%; float:left; transition:.3s;position:relative;}
header .wrap-mainmeu>ul>li>ul>li>ul>li>a:before{content:''; height:2px; margin-top:-1px; width:0px; background:var(--color1); position:absolute; top:50%; left:20px; transition:.3s;}
header .wrap-mainmeu>ul>li>ul>li>ul>li>a:hover{padding-left:40px; color:var(--color1) }
header .wrap-mainmeu>ul>li>ul>li>ul>li>a:hover:before{width:13px;}
header .wrap-mainmeu>ul>li>ul>li:hover>ul{opacity:1; visibility:initial; pointer-events:initial}

@media (max-width:767px){
    header .wrap-mainmeu{display:none!important;}
}

@media (min-width: 768px) and (max-width:991px){
    header .wrap-mainmeu>ul>li{margin-right:12px!important; margin-left:12px!important;}
}

@media (max-width:1439px){
    header .wrap-mainmeu{width:100%; float:left; display:flex;}
    header .wrap-mainmeu>ul{margin: 35px auto 0 auto}
    header .wrap-mainmeu>ul>li{margin-right:15px; margin-left:15px;}
}

@media (min-width:1440px) and (max-width:1599px){
    header .container{min-width:1400px;}
    header .wrap-mainmeu>ul>li{margin-right:15px;}
    header .wrap-mainmeu>ul>li.nav-mainHome>a{font-size:0;}
    header .wrap-mainmeu>ul>li.nav-mainHome>a:before{font-family: "Font Awesome 5"; font-weight: 900; content: "\f80a"; font-size:16px;}
}
@media (min-width:1600px){
    header .container{min-width:1600px;}
}


/* Cart */
.nav-cart{position:absolute; top:22px; right:15px; width:46px; height:46px; border-radius:50%; background:var(--color1); display:flex; justify-content:center; align-items:center;}
.nav-cart:before{content:"\f291";font-family: "Font Awesome 5"; font-weight: 300; color:#fff; font-size:20px; }
.nav-cart b{position:absolute; top:-3px; right:-3px; background:var(--color2); width:20px; height:20px; line-height:21px; padding-left:1px; text-align:center; text-align:center; border-radius:50%; display:block; color:#000; font-size:12px;}
@media (max-width:767px) {
    .nav-cart{top:20px; background:var(--color-bg); box-shadow:inset 0 0 0 1px rgba(0,0,0,.03); width:44px; height:44px; }
    .nav-cart:before{color:var(--color1); font-weight:400;}

    header.fixed .nav-cart{position:fixed; top:10px; right:15px; z-index:92}
}
@media (min-width:768px) {
    
}

/* Search */

@media (max-width:767px) {
    .swap-search{ position:absolute; width:calc(100% - 30px); height:44px; z-index:15; transition:.3s; float:right; margin: 0 0 0 0px; background:#fff; border-radius:20px; bottom:20px; left:15px;}
    .swap-search .search-bnt{width:38px; height:38px; color:var(--color1); font-size:18px; text-align:center; line-height:38px; border-radius:0; display:block; text-decoration:none; transition:.3s;position:absolute; top:3px; right:3px; z-index:5; font-weight:400; transition:.3s; pointer-events:none;}
    .swap-search .textbox{position:absolute; float:left; width:100%; padding:0 46px 0 15px; color:#000; background:var(--colorBg); border:none; font-weight:500; transition:.3s; height:44px; transition:.3s; z-index:1;  border-radius:23px; color:rgba(0,0,0,.75); top:0; right:0; font-size:14px;}
    .swap-search .textbox:focus{outline:none; box-shadow: 0 0 0 2px var(--color1); background:#fff;}

    header.fixed .swap-search{width:calc(100% - 130px); position:fixed; top:10px; left:65px; z-index:92}
 }

@media (min-width:768px) {
    .swap-search{ position:relative; width:400px; height:46px; z-index:15; transition:.3s; float:right; margin: 22px 0 0 0px; background:#fff; border-radius:23px; margin-right:70px;}
    .swap-search .search-bnt{width:40px; height:40px; color:var(--color1); font-size:18px; text-align:center; line-height:40px; border-radius:0; display:block; text-decoration:none; transition:.3s;position:absolute; top:3px; right:3px; z-index:5; font-weight:400; transition:.3s; pointer-events:none;}
    .swap-search .textbox{position:absolute; float:left; width:100%; padding:0 46px 0 15px; color:#000; background:var(--colorBg); border:none; font-weight:500; transition:.3s; height:46px; transition:.3s; z-index:1;  border-radius:23px; color:rgba(0,0,0,.75); top:0; right:0; font-size:14px;}
    .swap-search .textbox:focus{outline:none; box-shadow: 0 0 0 2px var(--color1); background:#fff;}
    .mainsearch-open{z-index:20; position:relative;}
        
}
@media (min-width: 768px) and (max-width:991px){
    .swap-search{float:left; margin-right:0; width:250px }
}
@media (min-width: 992px) and (max-width:1199px){
    .swap-search{float:left; margin-right:0; width:350px }
}
@media (min-width: 1200px) and (max-width:1439px){
    .swap-search{float:left; margin-right:0; }
}
@media (min-width:1440px) and (max-width:1599px){
     .swap-search{ width:320px;}
}

.ui-autocomplete,
.ui-helper-hidden-accessible{display:none!important}
.searchResult-panel{width:400px; float:left; position:absolute; top:51px; right:0; background:#fff;  box-shadow: 0 0 60px 0 rgb(53 57 69 / 15%); display:none; padding: 0 15px; border-radius:15px;}
.searchResult-panel.is-open{display:block;}
.searchResult-panel .lab-key{width:100%; float:left; position:relative; padding:10px; margin-bottom:10px; font-weight:500; background:rgba(0,0,0,.03); border-radius:7px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.02); display:none;}
.searchResult-panel .lab-key b{color:var(--color3); font-weight:bold; font-size:16px;}


.searchSuggest-panel{width:100%; float:left; position:relative; display:none; padding-bottom:20px;}
.searchSuggest-panel.is-open{display:block;}
.searchSuggest-panel .groupSuggest{width:100%; float:left; position:relative; margin-top:10px;}
.searchSuggest-panel .groupSuggest .title-group{width:100%; float:left; position:relative; display:block; border-bottom:1px solid rgba(0,0,0,.1); padding: 7px 0; }
.searchSuggest-panel .groupSuggest .title-group:before{content:''; width:30px; height:1px; background:var(--color1); position:absolute; left:0; bottom:-1px;}
.searchSuggest-panel .groupSuggest .title-group span{text-transform:uppercase; font-size:13px; font-weight:500; float:left;}
.searchSuggest-panel .groupSuggest .title-group a{display:block; position:absolute; top:5px; right:0; font-size:14px; color:#000; transition:.3s;}
.searchSuggest-panel .groupSuggest .title-group a:hover{color:#ec1f26}
.searchSuggest-panel ul.link{width:calc(100% + 10px); margin:0; padding:5px 0 0 0; list-style:none; float:left; }
.searchSuggest-panel ul.link li{float:left; padding:0; margin: 10px 10px 0 0;}
.searchSuggest-panel ul.link li a{white-space:nowrap; background:var(--colorBg); line-height:21px; height:22px; border-radius:11px; padding: 0 10px; display:block; float:left; color:#000; transition:.3s;}
.searchSuggest-panel ul.link li a:hover{background:var(--color1); color:#fff;}

.autocomplete-panel{width:100%; float:left; position:relative; display:none;}
.autocomplete-panel.is-open{display:block;}
.autocomplete-panel .nav-viewAll{width:100%; float:left; position:relative; padding:0 0; line-height:50px; text-align:left;  border-radius:0px; color:#000; font-weight:400; transition:.3s; border-top:1px solid rgba(0,0,0,.07); margin-bottom:0; display:none; }
.autocomplete-panel .nav-viewAll.is-open{display:block;}
.autocomplete-panel .nav-viewAll:after{font-family: "Font Awesome 5"; font-weight:400; content: "\f178"; float:right; font-size:16px;}
.autocomplete-panel .nav-viewAll:hover{color:var(--color1)}

.swap-search ul.listProduct-search{margin:0; padding:0; list-style:none; width:100%; float:left; position:relative; overflow-y:auto;}
.swap-search ul.listProduct-search li{width:100%; float:left; position:relative; min-height:90px; padding: 10px 0 3px 75px; display:flex; align-items:center; border-top:1px solid rgba(0,0,0,.07); }
.swap-search ul.listProduct-search li:first-child{border:none;}
.swap-search ul.listProduct-search li a{width:100%; height:100%; float:left; display:block; position:absolute; top:0; left:0; z-index:3; }
.swap-search ul.listProduct-search li .inner{display:block; width:100%; float:left;}
.swap-search ul.listProduct-search li .wrap-img{width:60px; height:60px; position:absolute; top:15px; left:0; overflow:hidden; border-radius:5px;}
.swap-search ul.listProduct-search li .wrap-img img{width:inherit; height:inherit; object-fit:cover;}
.swap-search ul.listProduct-search li h4{display:block; width:100%; font-family: "Signika", sans-serif;  margin:-5px 0 0 0; padding:0; font-size:17px; font-weight:500; transition:.3s; color:rgba(0,0,0,.8)}
.swap-search ul.listProduct-search li:hover h4{color:var(--color1)}
.swap-search ul.listProduct-search li .wrap-price{width:100%; float:left; position:relative; padding-top:2px;}
.swap-search ul.listProduct-search li .wrap-price:before{content:'Giá:'; opacity:.5}
.swap-search ul.listProduct-search li .wrap-price b{font-weight:bold; color:var(--color3); font-weight:bold; font-size:15px; position:relative; padding-right:12px; margin-left:10px;}
.swap-search ul.listProduct-search li .wrap-price b:after{content:'₫'; position:absolute; top:-3px; right:0; font-size:13px; }
.swap-search ul.listProduct-search li .wrap-price .compare{font-size:15px; font-weight:normal; color:rgba(0,0,0,.75); padding-right:10px;}
.swap-search ul.listProduct-search li .wrap-price .compare:after{font-size:13px;}
.swap-search ul.listProduct-search li .wrap-price .compare:before{content:''; width:100%; height:1px; background:#7c7c7c; top:50%; left:0; position:absolute; margin-top:-1px; z-index:3;}
.swap-search ul.listProduct-search li:nth-child(n+6){display:none;}
.swap-search ul.listProduct-search li.no-result{padding:15px 0 ; display:block; min-height:initial; color:var(--color3); font-size:15px; text-align:center;}


@media (min-width: 768px) and (max-width:1439px){
    .searchResult-panel{right:initial; left:0;}
}

/* ele account on mobile */
@media (max-width:767px){
   
    .accHeaderMobile{position:absolute; top:20px; right:65px;}
    .accHeaderMobile .dropdown-menu{display:block; margin-top:-5px; padding:10px 0px; top:100%!important; left:initial!important; right:0!important; transform:initial!important; border:none; border-radius:10px; box-shadow: 0 0 60px 0 rgb(53 57 69 / 15%); float:left; transition:.3s; opacity:0; visibility:hidden;}
    .accHeaderMobile .show .dropdown-menu{opacity:1; visibility:initial; margin-top:5px;}
    .accHeaderMobile .dropdown-menu li{width:100%; float:left; position:relative;}
    .accHeaderMobile .dropdown-menu a{width:100%; float:left; clear:both; font-size:15px; color:#000; padding: 8px 20px;}
    .accHeaderMobile .dropdown-menu a i{font-size:16px; width:16px; text-align:center; margin-right:15px; }
    .accHeaderMobile .dropdown-menu a i:before{font-weight:300; color:var(--color1)}
    .accHeaderMobile .accNotLogin .nav-drop{width:44px; height:44px; border-radius:50%; background:var(--color-bg); display:flex; justify-content:center; align-items:center; font-size:20px; color:var(--color1); box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
    .accHeaderMobile .accIsLogin{display:none;}
    .accHeaderMobile .accIsLogin .nav-drop{width:42px; height:42px; display:block; background-size: 24px auto; border-radius:50%;  }
    .accHeaderMobile .accIsLogin .nav-drop img{width:100%; height:100%; border-radius:5px;}
    .accHeaderMobile .accIsLogin .dropdown-menu{width:250px; padding: 15px 20px}
    .accHeaderMobile .accIsLogin .dropdown-menu li.name{font-weight:bold; padding: 5px 0 0 0px; margin-bottom:10px;}
    .accHeaderMobile .accIsLogin .dropdown-menu li.name span{width:100%; border-bottom:1px solid var(--color-border); width:100%; float:left; padding-bottom:12px; color:var(--color1)}
    .accHeaderMobile .accIsLogin .dropdown-menu li.notify .number{font-weight:bold; position:absolute; right:0; top:7px; color:var(--color3); font-size:13px; background:var(--color2); width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
    .accHeaderMobile .accIsLogin .dropdown-menu li:last-child{border-top:1px solid var(--color-border); padding-top:8px; margin-top:12px;}
    .accHeaderMobile .accIsLogin .dropdown-menu a{padding: 8px 0px;}
    .accHeaderMobile.isLogin .accNotLogin{display:none;}
    .accHeaderMobile.isLogin .accIsLogin{display:block;}

}

.wrap-page{padding-bottom:100px; width:100%; float:left; position:relative;}
.wrap-page:after{content:''; opacity:.2; width:100%; height:250px; position:absolute; left:0; bottom:0; background:url(../Default/bgBottom-page.png) repeat-x 0 bottom; background-size: auto 100%; display:block;}
@media (max-width:767px){
    .wrap-page{padding-bottom:0px;}
    .wrap-page:after{display:none;}
}

/* mainmenu on mobile */
@media (max-width:767px){
    .nav-panelLeft{position:absolute; left:15px; top:20px; width:44px; height:44px; border-radius:50%; background:var(--color1); display:flex; justify-content:center; align-items:center; font-size:20px; color:#fff!important; }
    .panelLeft-mainMenu{width:350px; height:calc(100% - 10px); position:fixed; left:-350px; top:5px; z-index:101; transition:.3s; opacity:0; }
    .panelLeft-mainMenu .head-panel{width:100%; float:left; position:relative; }
    .panelLeft-mainMenu .head-panel label{width:calc(100% - 60px); background:#fff; color:var(--color1); margin:0; padding:15px 0 0 20px; height:65px; font-family: "Signika", sans-serif; font-size: 22px; font-weight: 600;}
    .panelLeft-mainMenu .head-panel:after{ content: ''; width: 60px; height: 60px; background: url(LP-clip-modalBg-rt.svg) no-repeat right 0; background-size: auto 61px;  position: absolute;  top: 0;   right: 0;}
    .panelLeft-mainMenu .head-panel .nav-panleClose{width:32px; height:32px; background:#ec1f26; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; position:absolute; top:0; right:0; font-size:18px; z-index:5;}
    .panelLeft-mainMenu .body-panel{width:100%; height:calc(100% - 80px); position:absolute; padding: 0 20px; left:0; bottom:20px; background:#fff; border-radius: 0 0; box-shadow: 0 -2px #fff, 0 2px #fff; overflow-y:auto }
    .panelLeft-mainMenu>.body-panel>ul{margin:0; padding:0 0; width:100%; float:left; list-style:none; border-radius:16px; position:relative; z-index:2;}
    .panelLeft-mainMenu>.body-panel>ul>li{width:100%; float:left; position:relative; background:var(--color-bg); border-radius:10px; margin-bottom:10px;}
    .panelLeft-mainMenu>.body-panel>ul>li>a{text-transform:uppercase; font-size:15px; font-weight:bold; color:#000; padding:13px 15px 10px 15px; display:block; }
    .panelLeft-mainMenu>.body-panel>ul>li>ul{width:100%; margin:-5px 0 0 0; padding:0 0 10px 0; list-style:none; float:left;}
    .panelLeft-mainMenu>.body-panel>ul>li>ul>li{width:100%; float:left;}
    .panelLeft-mainMenu>.body-panel>ul>li>ul>li>a{color:#000; font-weight:500; padding: 5px 0 5px 15px; width:100%; float:left; display:block; font-size:15px; }
    .panelLeft-mainMenu>.body-panel>ul>li>ul>li>ul{width:100%; float:left; padding-bottom:10px;}
    .panelLeft-mainMenu>.body-panel>ul>li>ul>li>ul a{color:#000; padding: 5px 0; display:block;}
    .panelLeft-mainMenu:after{content:''; width:100%; height:20px; background:#fff; border-radius: 0 0 20px 0; position:absolute; left:0; bottom:0; }

    .isOpenPanle-mainMenu:before{opacity:.5; z-index:100; visibility:initial}
    .isOpenPanle-mainMenu .panelLeft-mainMenu{left:0; opacity:1;} 

    header.fixed .nav-panelLeft{position:fixed; left:15px; top:9px; z-index:92 }
}
/*****************************************************************/
/*                             Footer                            */
/****************************************************************/

footer{width:100%; float:left; position:relative; background:url(bg-footer.jpg) no-repeat center; background-size:cover}
footer:before{content:''; background:#022500; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; opacity:.8}
footer .inner{width:100%; float:left; position:relative; padding-left:430px;}
footer .rowTop{width:100%; float:left; position:relative; padding: 40px 0 30px 0; border-bottom:1px solid rgba(255,255,255,.4); z-index:3; margin-bottom:30px;}
footer .rowTop ul.certification-list{margin:0 0 0; padding:0; list-style:none; display:table;float:left;}
footer .rowTop ul.certification-list li{position:relative; height:100px; display:block; vertical-align:middle; padding: 0px; float:left; background:#fff;  display:flex; align-items:center; justify-content:center;background:var(--color-bg); margin:0 40px 0 0;}
footer .rowTop ul.certification-list li svg{width:100px; height:auto; fill:#fff}
footer .rowTop ul.certification-list li:first-child svg{width:80px;}
footer .rowTop ul.certification-list li:last-child{margin-right:0;}
footer .rowTop .advise{float:right; position:relative; width:400px;}
footer .rowTop .advise .register-mobile{width:100%; float:left; position:relative; padding-right:70px; background:#ffff; border-radius:7px; margin-top:0px;}
footer .rowTop .advise .register-mobile:before{content:"\f10b"; font-family: "Font Awesome 5"; font-weight:300; position:absolute; left:15px; top:0; line-height:46px; font-size:16px; opacity:.5 }
footer .rowTop .advise .register-mobile input[type="text"]{width:100%; float:left; position:relative; border:none; height:46px; outline:none; border:none; padding-left:35px; transition:.3s; background:none; z-index:2; }
footer .rowTop .advise .register-mobile input[type="text"]:focus{border-bottom-color:var(--color1); }
footer .rowTop .advise .register-mobile .nav-send{height:36px; line-height:37px; position:absolute; top:5px; right:5px; background:var(--color2); text-align:center; width:60px; color:#000; text-transform:uppercase; font-weight:500; letter-spacing:1px; border-radius:5px; font-size:14px; z-index:3;}

footer .col-foot{display:block; position:relative; float:left; z-index:5;}
footer .col-foot .logo-foot{height:80px; float:left; margin-top:0px;}
footer .title-col{width:100%; float:left; position:relative; padding-bottom:15px; color:#fff; font-size:22px; font-weight:600;}
footer .col-office{width:calc(100% - 180px - 260px); float:right}
footer .col-office ul{margin:25px 0 0 0; padding:0; list-style:none; color:#fff; float:left; width:100%;}
footer .col-office ul li{display:block; width:100%; float:left; margin-top:5px;}
footer .col-office ul li strong{}
footer .col-office ul li strong:after{content:':'; padding-right:5px;}
footer .col-office ul li a{color:#fff; transition:.3s;}
footer .col-office ul li a:hover{color:var(--color2)}
footer .col-about{width:180px; padding-left:0px;}
footer .col-policy{width:260px; padding: 0 30px}
footer ul.nav-list{margin:0; padding:0; list-style:none; width:100%; float:left;}
footer ul.nav-list li{width:100%; float:left; position:relative;}
footer ul.nav-list li:first-child{margin:0;}
footer ul.nav-list li.title{font-weight:bold; font-size:16px; color:#000; padding-bottom:10px;}
footer ul.nav-list li.title .icon{display:none;}
footer ul.nav-list li a{display:block; color:rgba(255,255,255,.85); transition:.3s; position:relative; font-size:15px; padding: 5px 0; transition:.3s; width:100%; float:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
footer ul.nav-list li a:before{font-family:"Font Awesome 5"; font-weight:900; content:"\f0da"; position:absolute; left:-5px; font-size:12px; margin-top:2px; opacity:0; transition:.3s;}
footer ul.nav-list li a:hover{color:var(--color2); padding-left:12px; font-weight:400;}
footer ul.nav-list li a:hover:before{left:0; opacity:1;}
footer ul.nav-list li a .icon{display:none!important}
footer ul.nav-list li ul{display:none;}




.subscribe{width:380px; float:left; padding: 80px 40px 50px 40px; border-radius: 0 0 20px 20px; position:absolute; z-index:3; background:var(--color1); left:0; top:0; overflow:hidden }
.subscribe .iconMail{color:#fff; height:60px; fill:#fff}
.subscribe .iconBg{color:#fff; height:200px; fill:#fff; position:absolute; right:-90px; top:-20px; opacity:.1}
.subscribe label{ position:relative; font-weight:500; clear:left; color:#fff; font-family: "Signika", sans-serif; font-size:30px; padding-bottom:10px; float:left; width:100%; margin:25px 0 0 0;}
.subscribe span{font-size:15px; width:100%; color:#fff; float:left; padding-bottom:20px;}
.subscribe input[type="text"]{width:100%; float:left; position:relative; border:none; height:46px; border-radius:7px; outline:none; border:none; padding:0 20px; transition:.3s; background:#fff; z-index:2;}
.subscribe input[type="text"]:focus{ }
.subscribe .nav-send{ width:100%; float:left; position:relative; background:var(--color2); color:#fff; line-height:46px; border-radius:7px; text-align:center; color:#000; font-weight:500; margin-top:15px;}
footer .col-copyright{ position:relative; z-index:3; margin-top:40px; width:100%; }
footer .col-copyright .wrap-copyright{display:table; width:100%; float:left; padding:20px 0; font-size:13px; border-top:1px solid rgba(0,0,0,.07);  }
footer .col-copyright .wrap-copyright .col-left{display:table-cell; text-align:left; vertical-align:middle; color:#fff;}
footer .col-copyright .wrap-copyright .col-left a{color:var(--color1); color:#fff}
footer .col-copyright .wrap-copyright .col-right{display:table-cell; text-align:right;}
footer .col-copyright .wrap-copyright .col-right ul{margin:5px 0 0 0; padding:0; list-style:none; float:right; display:flex}
footer .col-copyright .wrap-copyright .col-right ul li{margin-left:10px;}
footer .col-copyright .wrap-copyright .col-right ul li:first-child{margin-left:0;}
footer .col-copyright .wrap-copyright .col-right ul li a{width:40px; height:40px; border-radius:7px; border: 1px dashed rgba(255,255,255,.5); color:#fff; display:flex; align-items:center; justify-content:center; position:relative;font-size:16px; display:flex; float:left;transition:.3s;}
footer .col-copyright .wrap-copyright .col-right ul li a:hover{ background:var(--color2); border-color:var(--color2); color:#000}


@media (max-width:767px) {
    footer{display:none;}
}

@media (min-width:768px) and (max-width:991px){
    .subscribe{width:100%; padding-top:30px}
    .subscribe label{font-size:28px;}
    .subscribe input[type="text"]{width:calc(50% - 10px);}
    .subscribe .nav-send{ width:calc(50% - 10px); float:right; margin-top:0;}
    .subscribe .iconMail{position:absolute; top:40px; left:40px;}
    .subscribe label{padding-left:80px; margin-top:0;}
    .subscribe span{padding-left:80px;}
    footer .inner{padding-left:0px; padding-top:280px}
    footer .col-about{width:33.333333333333%; float:left; padding-right:30px;}
    footer .col-policy{width:33.333333333333%; float:left; padding-right:30px; padding-left:0;}
    footer .col-office{width:100%; margin-left:0px; padding-left:150px;  border-top:1px dashed rgba(255,255,255,.5); margin-top:30px;}
    footer .col-office .logo-foot{position:absolute; top:40px; left:0;}
    footer .rowTop{width:33.333333333%;  border-bottom:none; float:right; margin:0; padding:0;}
    footer .rowTop .advise{width:100%; margin-top:40px; }
    footer .col-copyright{border-top:1px dashed rgba(255,255,255,.5);}
}

@media (min-width:991px) and (max-width:1200px){
    .subscribe{width:350px;}
    .subscribe label{font-size:28px;}
    footer .inner{padding-left:390px;}
    footer .col-about{width:50%;}
    footer .col-policy{width:50%;}
    footer .col-office{width:calc(100% + 390px); margin-left:-390px; padding-left:150px;}
    footer .col-office .logo-foot{position:absolute; top:40px; left:0;}
    footer .rowTop .advise{width:280px;}
    footer .col-copyright{border-top:1px dashed rgba(255,255,255,.5)}
}

@media (min-width:1200px) and (max-width:1439px){
    /*footer .col-about{width:50%;}
    footer .col-policy{width:50%;}
    footer .col-office{width:100%}*/
}

.product-item{width:100%; float:left; position:relative; padding:0 0 75px 0; z-index:5; overflow:hidden}
.product-item:before{content:''; width:100%; height:100%; background:rgba(0,0,0,.1); position:absolute; top:0; left:0;  --border-radius: 16px; --size-corner: 40px;  --mask: /calc(2*var(--border-radius)) calc(2*var(--border-radius)) radial-gradient(#000 70%,#0000 74%) no-repeat; border-radius:12px ; transition: all .5s ease; mask: right 0 bottom calc(var(--size-corner) + var(--border-radius)) var(--mask), right calc(var(--size-corner) + var(--border-radius)) bottom 0 var(--mask), radial-gradient(var(--size-corner) at 100% 100%, #0000 99%, #000 101%) calc(-1* var(--border-radius)) calc(-1* var(--border-radius)) no-repeat, conic-gradient(from 90deg at calc(100% - var(--size-corner) - 2* var(--border-radius)) calc(100% - var(--size-corner) - 2* var(--border-radius)), #0000 25%, #000 0);}
.product-item:after{content:''; width:calc(100% - 2px); height:calc(100% - 2px); background:#fff url(bg-itemProduct.png) no-repeat 80px bottom; background-size: auto 130px; z-index:2; position:absolute; top:1px; left:1px;  --border-radius: 16px; --size-corner: 40px;  --mask: /calc(2*var(--border-radius)) calc(2*var(--border-radius)) radial-gradient(#000 70%,#0000 74%) no-repeat; border-radius:12px ; transition: all .5s ease; mask: right 0 bottom calc(var(--size-corner) + var(--border-radius)) var(--mask), right calc(var(--size-corner) + var(--border-radius)) bottom 0 var(--mask), radial-gradient(var(--size-corner) at 100% 100%, #0000 99%, #000 101%) calc(-1* var(--border-radius)) calc(-1* var(--border-radius)) no-repeat, conic-gradient(from 90deg at calc(100% - var(--size-corner) - 2* var(--border-radius)) calc(100% - var(--size-corner) - 2* var(--border-radius)), #0000 25%, #000 0);}
.product-item .wrap-img{width:100%; float:left; position:relative; z-index:3;border-radius:15px 15px 0 0}
.product-item .wrap-img:before{content:''; padding-top:100%; display:block;}
.product-item .wrap-img a{width:calc(100% - 20px); height:calc(100% - 20px); overflow:hidden; position:absolute; top:10px;left:10px; padding:5px; border-radius:8px; background:#fff;}
.product-item .wrap-img a img{max-width:100%; max-height:100%; transition:.3s; }
.product-item:hover .wrap-img a img{transform:scale(0.9)}
.product-item .nav-catalog{float:left; margin: 25px 0 8px 5px; padding-left:18px; color:rgba(0,0,0,.8); font-family: "Signika", sans-serif; text-transform:uppercase; font-size:13px; position:relative; z-index:2; font-weight:500; transition:.3s;}
.product-item .nav-catalog:before{content:''; width:8px; height:8px;border-radius:50%; background:var(--color2); position:absolute; top:4px; left:0;}
.product-item .nav-catalog:hover{opacity:1; color:var(--color1)}
.product-item .name{float:left; position:relative; color:#000; transition:.3s; z-index:3; padding: 10px 20px 0 20px; }
.product-item .name:hover{color:var(--color1)}
.product-item .name h3{font-family: "Signika", sans-serif; margin:0; padding:0; line-height:22px; font-size:19px; font-weight:500; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; text-overflow: ellipsis;   display: -webkit-box;}
.product-item .abbreviation{font-size:15px; width:100%; margin:0 0; float:left; -webkit-line-clamp: 5; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; text-overflow: ellipsis;   display: -webkit-box; z-index:2; position:relative;}
.product-item .price{width:100%; float:left; position:absolute; display:flex; z-index:4; padding-left:5px; position:absolute; left:20px; bottom:20px; padding: 0;  }
.product-item .price .new{font-weight:900; color:var(--color3); font-size:20px; position:relative; padding-right:20px; }
.product-item .price .new .unit{font-size:17px; padding-left:3px; font-weight:bold}
.product-item .wrap-caption{width:calc(100% - 10px); float:left; left:5px; bottom:-180px; z-index:5; position:absolute; background:rgba(255,255,255,.85); padding:20px; -webkit-backdrop-filter: blur(0.625em);   backdrop-filter: blur(0.625em);overflow:hidden; visibility:hidden; opacity:0; transition:.3s; border-radius:12px; box-shadow: 0 1px 15px rgba(0,0,0,.07)}
.product-item:hover .wrap-caption{bottom:60px; opacity:1; visibility:initial}
.product-item .wrap-caption h4{font-family: "Signika", sans-serif; margin:0; padding:0 0 10px 0; line-height:22px; font-size:19px; font-weight:500; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; text-overflow: ellipsis;   display: -webkit-box; color:var(--color1)}
.product-item a.nav-link{font-size:0; width:50px; height:50px; background:var(--color-bg); border-radius:50%; position:absolute; right:0px; bottom:0px; transition:.3s; padding:0; z-index:3; display:none;}
.product-item a.nav-link:before{font-family: "Font Awesome 5"; font-weight:400; content: "\f178"; font-size:24px; display:block; color:var(--color1); transition:.3s; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out; width:50px; height:50px; line-height:50px; text-align:center;  }
.product-item:hover a.nav-link{background:var(--color1)}
.product-item:hover a.nav-link:before{transform: scale(0) translate(60px, 0); opacity:0;}
.product-item a.nav-link span:before{font-family: "Font Awesome 5"; transform: scale(0) translate(-70px, 0); font-weight:400; content: "\f178"; font-size:24px; display:block; color:var(--color3); transition:.3s; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out; position:absolute; top:0; left:0; width:50px; height:50px; line-height:50px; text-align:center; color:#fff;}
.product-item:hover a.nav-link span:before{transform: scale(1) translate(0px, 0); opacity:1;}
.product-item .wrap-btn{position:absolute; bottom:0; right:0; z-index:5;}
.product-item .wrap-btn a{width:46px; height:46px; background:var(--color1); font-size:0; display:block; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 var(--color1); transition:.3s;}
.product-item .wrap-btn a:hover{box-shadow:inset 0 50px rgba(0,0,0,.5); color:#fff;}
.product-item .wrap-btn a:before{content: "\f291"; font-family: "Font Awesome 5"; font-weight: 300; font-size: 20px; }

.listBg .product-item:before{}
.listBg .product-item .wrap-img a{}

ul.listProduct-full{margin:-20px 0 0 -10px; padding:0; list-style:none; width:calc(100% + 20px); overflow:initial}
ul.listProduct-full li{-ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; padding: 0 10px; margin-top:20px; }

@media (max-width:767px){
    ul.listProduct-full li{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 0 5px; margin-top:10px;} 
}

@media (min-width:768px) and (max-width:991px){
    ul.listProduct-full li{-ms-flex: 0 0 33.33333333333333%; flex: 0 0 33.33333333333333%; max-width: 33.33333333333333%;} 
}
@media (min-width:992px) and (max-width:1199px) {
    ul.listProduct-full li{-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;} 
}
@media (min-width:1200px) and (max-width:1439px) {
    ul.listProduct-full li{-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;} 
}



.frame-bg .product-item:before{content:''; background:var(--color-bg); border-radius:20px 20px 0 20px; position:absolute; top:0; left:0px; width:100%; height:100%;  }
.frame-bg .product-item:after{content:''; width: 100px; height: 100px; right: -4px; bottom: -4px; background: url(../Default/LP-clip-angle-rb.svg) no-repeat 0 0; background-size: 100% auto;   position: absolute;    z-index: 3; }


/* sitemap */
.wrap-sitemap{width:100%; position:relative; float:left }
.wrap-sitemap:before { content: ''; background: #022500; position: absolute; top: 0; left: 0; width: 100%;height: 100%; z-index: 1; opacity:.5;}
.wrap-sitemap .inner{width:100%;margin:0px auto; display:block; clear:both; background-size:cover ; }
.wrap-sitemap .col-sitemap{position:relative; height:350px; display:flex; align-items:center; justify-content:center;}
.wrap-sitemap ul{list-style:none; margin:0; padding:85px 0 0 0; position:relative; float:left; z-index:3; color:#fff; }
.wrap-sitemap ul:before{width:55px; display:none; height:100%; content:''; background:url(LP-bg-sitemap.svg) no-repeat 0 0; background-size: auto 45px; position:absolute; top:0; right:100%;}
.wrap-sitemap ul:after{width:55px; display:none; height:100%; content:''; background:url(LP-bg-sitemap.svg) no-repeat right 0; background-size: auto 45px; position:absolute; top:0; left:100%;}
.wrap-sitemap ul li{float:left; position:relative; padding-right:20px; margin-right:15px;}
.wrap-sitemap ul li:after{font-family: "Font Awesome 5"; font-weight:900; content: "\f0da"; font-size:12px; padding:0; color:#fff; position:absolute; top:3px; right:0;}
.wrap-sitemap ul li:last-child{padding-right:0; margin-right:0;}
.wrap-sitemap ul li:last-child:after{display:none;}
.wrap-sitemap ul li a{text-decoration:none; color:#fff; font-size:16px; margin:0; padding:0;  font-weight:normal;}
.wrap-sitemap ul li span{color:#000; font-size:14px; margin:0 0 -2px 0; padding:0; font-weight:500; float:left; display:block; }
.wrap-sitemap .title-page{ line-height:60px; font-size:45px; font-weight:400; margin:0; position:absolute; width:100%; top:135px; text-align:center; color:#fff; z-index:3; font-family: "Signika", sans-serif;}
.wrap-sitemap .titleSub-page{height:60px; padding-top:7px;  }
.wrap-sitemap .titleSub-page span{display:block;}
.wrap-sitemap .titleSub-page h3{font-size:17px; text-transform:uppercase; font-weight:bold; display:block; margin:0;}

.wrap-sitemap .sitemap-products{background:url(LP-bg-sitemap-work-products.jpg) no-repeat center center; }
.wrap-sitemap .sitemap-news{background:url(LP-bg-sitemap-news.jpg) no-repeat center bottom; }
.wrap-sitemap .sitemap-about{background:url(LP-bg-sitemap-about.jpg) no-repeat center; }
.wrap-sitemap .sitemap-work-products{background:url(LP-bg-sitemap-work-products.jpg) no-repeat center center; }
.wrap-sitemap .sitemap-work-ingredient{background:url(LP-bg-sitemap-work-ingredient.jpg) no-repeat center center; }
.wrap-sitemap .sitemap-work-packaging{background:url(LP-bg-sitemap-work-packaging.jpg) no-repeat center center; }
.wrap-sitemap .sitemap-work-machining{background:url(LP-bg-sitemap-work-machining.jpg) no-repeat center center}
.wrap-sitemap .sitemap-distribution{background:url(LP-bg-sitemap-distribution.jpg) no-repeat center center; }
.wrap-sitemap .sitemap-search-products{background:url(LP-bg-sitemap-search-products.jpg) no-repeat center center; }
.wrap-sitemap .sitemap-cart{background:url(LP-bg-sitemap-cart.jpg) no-repeat center 0; }
.wrap-sitemap .sitemap-order{background:url(LP-bg-sitemap-order.jpg) no-repeat center 0; }

@media (max-width:767px){
    .wrap-sitemap ul li:first-child a{font-size:0;}
    .wrap-sitemap ul li:first-child a:before{font-family: "Font Awesome 5"; font-weight: 900; content: "\f80a"; font-size:14px; margin-top:0px; float:left; color:#fff}
    .wrap-sitemap .col-sitemap{height:250px;}
    .wrap-sitemap .title-page{top:55px; font-size:32px; font-weight:400}
    .wrap-sitemap ul{padding-top:0px;}
    .wrap-sitemap .sitemap-news{background-size:auto 350px; }
    .wrap-sitemap .sitemap-order{background-size:auto 100%; }
}

@media (min-width:768px) and (max-width:1199px){
}
@media (min-width:1200px) and (max-width:1439px){
}

@media (min-width:1440px) and (max-width:1599px){
}
@media (min-width:1600px){
}



/* View more */
.view-moreList{width:100%; float:left; margin-top:1px; position:relative; display:block; justify-content:center; z-index:1; border-top:0; margin-top:30px;}
.view-moreList a{line-height:46px; height:46px; display:block; margin:0 auto; width:250px; border-radius:23px;  background:#fff; text-align:center; display:block; text-decoration:none; color:#000; font-size:15px; transition:.3s; position:relative; z-index:2; box-shadow: 0 0 60px 0 rgb(53 57 69 / 15%);  }
.view-moreList a span{font-weight:900; padding: 0 5px; color:var(--color3);}

@media (max-width:767px) {
    .view-moreList{ width:calc(100% - 20px); margin-left:10px;}
}




/*****************************************************************/
/*                            Element                            */
/****************************************************************/
/* owl.carousel */
.owl-theme .owl-controls .owl-buttons div{width:50px; height:50px; margin:0; padding:0; background:#fff!important; opacity:1!important; font-size:0!important; padding:0!important; position:relative; color:#404144!important; transition:.3s;}
.owl-theme .owl-controls .owl-buttons div:before{font-family:"Font Awesome 5"; font-weight:400; font-size:16px; width:100%; height:100%; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; transition:.3s;}
.owl-theme .owl-controls .owl-buttons div:hover{color:var(--color3)!important; }
.owl-theme .owl-controls .owl-buttons .owl-prev:before{content: "\f053"; padding-right:2px;}
.owl-theme .owl-controls .owl-buttons .owl-next:before{content:"\f054"; padding-left:2px;}

.owl-theme .owl-controls .owl-page span{opacity:1!important; width:20px!important; height:20px!important; margin:0 2px!important; background:none!important; position:relative; }
.owl-theme .owl-controls .owl-page span:before{content:''; width:10px; height:10px; margin: -5px 0 0 -5px; position:absolute; top:50%; left:50%; background:rgba(0,0,0,.5); border-radius:50%; z-index:2;}
.owl-theme .owl-controls .owl-page span:after{content:''; width:20px; height:20px; border-radius:50%; position:absolute; top:0; left:0; z-index:1; opacity:0; transition:.3s; box-shadow: 0 0 0 1px var(--color1);}
.owl-theme .owl-controls .owl-page.active span:before{background:var(--color1); box-shadow: 0 0 0 1px rgba(255,255,255,.5)}
.owl-theme .owl-controls .owl-page.active span:after{opacity:1;}

/* */
.myModal{box-shadow:none;}
.myModal .modal-content{background:none; box-shadow:none; z-index:2;}
.myModal .modal-content:before{content:''; width:calc(100% - 80px); height:100%; background:#fff; border-radius:16px 0 0 16px; position:absolute; top:0; left:0;}
.myModal .modal-content:after{content:''; width:80px; height:calc(100% - 80px); background:#fff; border-radius: 0 0 16px 0; position:absolute; right:0; bottom:0;}
.myModal .modal-content .modal-header{padding-left:25px;}
.myModal .modal-content .modal-header:after{content:''; width:80px; height:80px;background:url(LP-clip-modalBg-rt.svg) no-repeat right 0; background-size: auto 81px; position:absolute; top:0; right:0; }
.myModal .modal-content .modal-header .nav-close{width:40px; height:40px; border-radius:50%; background:#fff; position:absolute; top:0; right:0; color:#e41727; transition:.3s; }
.myModal .modal-content .modal-header .nav-close:hover{background:#e41727; color:#fff;}
.myModal .modal-content .modal-header .title-modal{font-family:"Signika", sans-serif; font-size:22px; font-weight:600}
.myModal .modal-content .modal-body{padding: 0 25px 25px 25px; position:relative; z-index:3;}


/* Modal notifyAddToCart */
#myModal-notifyAddToCart .product-ele{width:100%; float:left; position:relative; min-height:150px; display:flex; margin-top:0px; padding-left:170px; margin-bottom:10px; align-items:center;}
#myModal-notifyAddToCart .product-ele .wrap-img{width:150px; height:150px; position:absolute; top:0; left:0; border-radius:10px; overflow:hidden; }
#myModal-notifyAddToCart .product-ele .wrap-img img{width:inherit; height:inherit; object-fit:cover}
#myModal-notifyAddToCart .product-ele .info{width:100%; float:left; position:relative;}
#myModal-notifyAddToCart .product-ele .info h4{margin:0; padding:0 0; display:block; font-size:18px; font-weight:500; color:#000; font-family:"Signika", sans-serif;}
#myModal-notifyAddToCart .product-ele .info .quantity{width:100%; float:left; margin: 8px 0}
#myModal-notifyAddToCart .product-ele .info .quantity b{float:left; position:relative; font-size:17px; font-weight:bold }
#myModal-notifyAddToCart .product-ele .info .quantity b:after{content:'x'; padding: 0 10px; font-weight:400; opacity:.7}
#myModal-notifyAddToCart .product-ele .info .quantity .price{font-family:"Signika", sans-serif; float:left; position:relative; text-align:left;z-index:4; color:#f44336; font-weight:600; font-size:18px;}
#myModal-notifyAddToCart .product-ele .info .quantity .price:after{content:'đ'; font-size:16px; padding-left:3px; font-weight:600;}
#myModal-notifyAddToCart .product-ele .info .quantity .price span{display:none;}
#myModal-notifyAddToCart .product-ele .info .nav-goCart{display:block; clear:left; float:left; line-height:41px; height:40px; background:var(--color1); padding: 0 20px; border-radius:5px; font-weight:500; color:#fff; box-shadow: inset 0 0 rgba(0,0,0,0); transition:.3s;}
#myModal-notifyAddToCart .product-ele .info .nav-goCart:after{font-family: "Font Awesome 5"; font-weight: 900; content: "\f061"; font-size:15px; margin-left:10px;} 
#myModal-notifyAddToCart .product-ele .info .nav-goCart:hover{box-shadow:inset 0 40px rgba(0,0,0,.15)}



/* Modal */
.myModal-bootrap{}
.myModal-bootrap .modal-content{border-radius:7px; border:none; padding: 0 0px;}
.myModal-bootrap .modal-content .modal-header{border:none; padding: 0 30px;}
.myModal-bootrap .modal-content .modal-header .modal-title{text-transform:uppercase; font-weight:bold; font-size:17px; line-height:60px; height:60px;  color:var(--color1)}
.myModal-bootrap .modal-content .modal-header .nav-close{width:30px; height:26px; line-height:26px; text-align:center; color:#fff; background:#ec1f26; font-size:25px; text-decoration:none; position:absolute; top:-1px; right:30px; box-shadow: 0 2px 10px rgba(0,0,0,.15)}
.myModal-bootrap .modal-content .modal-header .nav-close:before{content:''; border-top:4px solid #ec1f26; border-left: 15px solid transparent; border-right: 15px solid transparent; position:absolute; top:100%; left:0;}
.myModal-bootrap .modal-content .modal-body{padding: 0 30px;}
.myModal-bootrap .modal-content .modal-footer{border:none; padding: 15px 25px; }
.myModal-bootrap .modal-content .modal-footer .nav-modal{display:inline-block; line-height:36px; height:36px; white-space:nowrap; font-size:14px; text-decoration:none; color:#fff; border-radius:3px; padding: 0 15px 0 35px; position:relative; margin: 0 5px; opacity:1; transition:.3s; box-shadow: inset 0 0 rgba(0,0,0,0); }
.myModal-bootrap .modal-content .modal-footer .nav-modal:hover{box-shadow: inset 0 36px rgba(0,0,0,.15)}
.myModal-bootrap .modal-content .modal-footer .nav-modal i{font-size:16px; position:absolute; top:0; line-height:36px; left:12px;}
.myModal-bootrap .modal-content .modal-footer .bg-red{background:var(--danger)}
.myModal-bootrap .modal-content .modal-footer .bg-green{background:var(--green)}
.myModal-bootrap .modal-content .modal-footer .bg-orange{background:var(--orange)}

.popover{border:none; box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 0 10px rgba(0,0,0,.05); border-radius:7px; padding: 0 15px; text-align:left;}
.popover-header{background:none; padding: 15px 0 10px 0; font-family:Roboto; font-size:15px; color:#000; }
.popover-body{padding: 10px 0 15px 0; text-align:left; font-size:14px; font-family:Roboto;}


ul.form{margin: -15px -10px 0 -10px; padding:0; list-style:none; clear:both;}
ul.form li{padding: 0 10px; position:relative;}
ul.form li .titleForm{display:block; margin:15px 0 5px 0; color:#000;}
ul.form li .titleForm.req:after{content:'*'; color:red; font-weight:bold; padding-left:3px;}
ul.form li .formGroup{width:100%; margin-top:30px; border:1px solid rgba(0,0,0,.1); padding: 20px 25px 25px 25px; position:relative; border-radius:7px;}
ul.form li .formGroup .titleGroup{ background:#fff; position:absolute; top:-12px; left:20px; padding: 0 5px; }
ul.form li .formGroup .titleGroup label{margin:0; padding:0; float:left;font-weight:bold; color:var(--color2); text-transform:uppercase}
ul.form li .formGroup .titleGroup span{padding-left:10px;}
ul.form li input[type='text'],
ul.form li input[type='password'],
ul.form li select,
ul.form li textarea{width:100%; height:42px; padding: 0 8px; border-radius:7px; transition:.3s; border:1px solid rgba(0,0,0,.1);}
ul.form li textarea{height:80px;resize:none; padding-top:7px;}
ul.form li input[type='text']:focus,
ul.form li input[type='password']:focus,
ul.form li select:focus,
ul.form li textarea:focus{outline:none;}
ul.form li.col-btn{padding-top:0px!important;}
ul.form li.col-btn a{line-height:42px; height:42px; display:inline-block; position:relative; border-radius:7px; box-shadow: inset 0 0 0 rgba(0,0,0,.0), 0 2px rgba(0,0,0,.03); padding: 0 20px 0 42px; color:#fff; font-weight:500; text-decoration:none; position:relative; transition:.3s;}
ul.form li.col-btn a i{font-size:16px; position:absolute; top:0; left:15px; line-height:42px;}
ul.form li.col-btn a:hover{box-shadow: inset 0 38px rgba(0,0,0,.1),0 2px rgba(0,0,0,.03)}
ul.form li.col-btn a.green{background:#4CAF50}
ul.form li.col-btn a.red{background:#F44336}
ul.form li.col-btn a.orange{background:#FF9800}
ul.form li.col-btn a.blue{background:#2196F3}

ul.form.inside li{margin-top:20px; position:relative;}
ul.form.inside li.req:before{content:'';border-top:8px solid #ec1f26; border-left:8px solid transparent; position:absolute; top:2px; right:12px;}
ul.form.inside li .formGroup{margin-top:15px; padding-top:30px}

.item-product{width:100%; float:left; position:relative; padding: 20px; }
.item-product:before{content:''; width:100%; height:100%; position:absolute;box-shadow:0 0 0 1px var(--color-border); z-index:1; top:0; left:0; transition:.15s; background:#fff; }
.item-product .wrap-img{width:100%; float:left; position:relative; z-index:5;}
.item-product .wrap-img:before{content:''; padding-bottom:100%; display:block;}
.item-product .wrap-img a{width:100%; height:100%; float:left; position:absolute; top:0; left:0; z-index:2;}
.item-product .wrap-img a img{width:inherit; height:inherit; object-fit:cover}
.item-product .wrap-info{width:100%; float:left; position:relative; margin-top:20px; z-index:6}
.item-product .wrap-info h3{margin:0; display:block;}
.item-product .wrap-info h3 a{text-decoration:none; font-size:15px; display:block; color:#000; transition:.3s; line-height:20px; transition:.3s; }
.item-product .wrap-info h3 a:hover{color:var(--color1)}
.item-product .wrap-info .price-box .price{font-weight:bold; font-size:17px; color:#ec1f26; float:left; clear:both; position:relative; padding-right:11px;}
.item-product .wrap-info .price-box .price:after{content:'₫'; position:absolute; right:0; top:1px; font-size:15px;}
.item-product .wrap-info .price-box .price-compare{display:block;  font-weight:500; margin: 4px 0 0 5px; color:#8f8f8f; font-size:14px; position:relative; padding-right:10px; float:left; }
.item-product .wrap-info .price-box .price-compare:before{content:''; width:100%; height:1px; float:left; position:absolute; top:50%; left:0; background:#8f8f8f; margin-top:-1px; }
.item-product .wrap-info .price-box .price-compare:after{content:'₫'; position:absolute; right:0; top:1px; font-size:13px;}
.item-product .nav-AddCart{position:absolute; left:20px; bottom:0; font-size:14px; text-decoration:none; width:calc(100% - 40px); height:38px; border-radius:5px; z-index:3; line-height:39px; font-weight:500; background:var(--color1); color:#fff; text-align:center; box-shadow:inset 0 0 rgba(0,0,0,.0); transition:.2s; opacity:0; visibility:hidden;}
.item-product .nav-AddCart:hover{box-shadow:inset 0 38px rgba(0,0,0,.15)}
.item-product .percent{position:absolute; left:20px; top:20px; z-index:5; background:var(--color2); color:#fff; padding: 0 8px; line-height:25px; height:24px; font-weight:bold; border-radius:3px; }
.item-product .percent:before{content:'-'; padding-right:2px;}
.item-product .percent:after{content:'%'; padding-left:2px; font-weight:500}
.item-product:hover:before{box-shadow: 0 0 0 1px var(--color1), 0 0 20px rgba(0,0,0,.2); height:calc(100% + 60px); border-radius:7px; }
.item-product:hover .nav-AddCart{bottom: -36px; opacity:1; visibility:initial;}


/* Checkbox */
.checkbox {padding-left: 3px; display:inline-block; margin:0;  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.checkbox label { display: inline-block; vertical-align: middle; position: relative;  padding-left: 5px; padding-right:0; white-space:initial; margin-bottom:0;  }
.checkbox label::before { content: ""; display: inline-block; position: absolute; width: 15px; height: 15px; left: 0; margin:2px 0 0 -16px; border: 1px solid rgba(0,0,0,.2);  border-radius: 3px;  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 label::after {display: inline-block;position: absolute; line-height:14px; width: 14px; height: 14px; left: 1px;top: 1px; margin-left: -17px; padding-left: 3px; padding-top: 1px;  font-size: 10px;  color: #000; }
.checkbox input[type="checkbox"]{ opacity: 0;  z-index: 1; }
.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:900;}
.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; }

/* radio */
.radio{ padding-left: 3px; display:inline-block; margin:0 10px 0 0; }
.radio label { display: inline-block; vertical-align: middle; position: relative; padding-left: 5px; margin-bottom:0; }
.radio label::before { content: ""; display: inline-block; position: absolute; width: 16px; height: 16px; left: 0; margin:1px 0 0 -16px; border: 1px solid rgba(0,0,0,.2); border-radius: 50%; background-color: #fff; -webkit-transition: border 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out; transition: border 0.15s ease-in-out; }
.radio label::after {display: inline-block; position: absolute; content: " "; width: 6px; height: 6px;left: 5px;top: 6px;margin-left: -16px; border-radius: 50%; background-color: #000; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0);transform: scale(0, 0); -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
.radio input[type="radio"] {opacity: 0; z-index: 1; }
.radio input[type="radio"]:focus + label::before {outline:none;}
.radio input[type="radio"]:checked + label::after {-webkit-transform: scale(1, 1);-ms-transform: scale(1, 1);-o-transform: scale(1, 1); transform: scale(1, 1); }
.radio input[type="radio"]:disabled + label { opacity: 0.65; }
.radio input[type="radio"]:disabled + label::before {cursor: not-allowed; }


.icon-contact{position:fixed; right:10px; bottom:10px; z-index:30; margin:0; padding:0; list-style:none;}
.icon-contact li{width:125px; float:left; position:relative; margin-bottom:10px; clear:both;}
.icon-contact a{width:100%; height:45px; padding-left:45px; position:relative; text-decoration:none; display:block; border-radius:5px; border: 1px solid rgba(0,0,0,.15); box-shadow: 0 0.2rem 0.35rem rgba(0, 0, 0, 0.1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:#fff; transition:.3s;}
.icon-contact a .icon{width:26px; height:26px; margin-top:-13px; position:absolute; top:50%; left:10px; display:flex; align-items:center; justify-content:center}
.icon-contact a .icon svg{height:26px; width:26px;}
.icon-contact a .icon img{max-width:100%; max-height:100%}
.icon-contact a .icon.tel i{font-size:15px; color:var(--color1)}
.icon-contact a .icon.mess{padding:3px;}
.icon-contact a span{display:block; width:100%; display:block; float:left; clear:both; padding-top:7px; font-size:11px; font-weight:bold; color:#000;}
.icon-contact a span:after{content:'(8h00 - 22h:00)'; width:100%; float:left; clear:both; opacity:.7; font-weight:normal; font-size:10px; margin-top:-2px;} 
.icon-contact a .zaloOA img{margin-top:-8px;}
.icon-contact a .zaloOA:after{content:'OA'; font-weight:900; font-size:10px; width:100%; text-align:center; position:absolute; text-align:center; left:0; bottom:-3px; color:var(--color3)}
.icon-contact a:hover{border-color:var(--color2)}
.icon-contact a:hover b{color:var(--color2)}

@media (max-width: 767px) {
    .icon-contact{width:100%; padding: 8px 15px 0 0; height:60px; float:left; right:0; bottom:0; background:#fff; display:flex; justify-content:right; box-shadow: 0 -1px rgba(0, 0, 0, .05), 0 2px 10px rgba(0, 0, 0, .1); border-radius:0;}
    .icon-contact:before{content:'Xin chào'; position:absolute; top:10px; left:15px; font-family:"Signika", sans-serif; font-weight:600; font-size:17px; color:var(--color1)}
    .icon-contact:after{content:'Tư vấn, mua hàng tại đây'; position:absolute; bottom:10px; left:15px;  font-size:13px;}
    .icon-contact li{height:45px; margin:0 0 0 7px; width:45px; clear:initial; float:initial;}
    .icon-contact li span{display:none;}
    .icon-contact a{height:45px; width:45px; border-radius:7px; border:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); background:var(--color-bg); padding:0; }
    .icon-contact a .icon{width:45px; height:45px; left:0; top:0; margin:0;}
    .icon-contact a .icon img{}
    .icon-contact a .icon.zalo img{width:32px;}
    .icon-contact a .icon.zaloOA img{width:32px;}
    .icon-contact a .zaloOA:after{bottom:5px;}
    .icon-contact a .icon.tel i{font-size:20px;}
    .icon-contact a .icon.mess img{width:26px}
    
}


/* Drop Account */
.drop-account{float:left; position:relative;}
.drop-account .nav-drop{padding-left:36px; position:relative; padding-right:15px;}
.drop-account .nav-drop .avatar{width:26px; height:26px; margin-top:-13px; position:absolute; top:50%; left:0; display:flex; border-radius:50%; overflow:hidden;}
.drop-account .nav-drop .avatar img{max-width:inherit!important; max-height:inherit; object-fit:cover;}
.drop-account .nav-drop:after{font-family:"Font Awesome 5"; font-weight:900; content:"\f0d7"; font-size:10px; position:absolute; right:0px;}
.drop-account .dropdown-menu{left:initial!important; right:0; width:220px; display:block; transform:initial!important; margin:0; padding:15px 25px; top:100%!important; max-width:initial!important; list-style:none; border:none; border-radius:15px; transition:.3s; opacity:0; visibility:hidden; pointer-events:none; box-shadow: 0 0 60px 0 rgb(53 57 69 / 15%);}
.drop-account .dropdown-menu li{width:100%; float:left; position:relative;}
.drop-account .dropdown-menu li a{color:#000; font-size:14px; line-height:initial; height:initial; padding: 10px 0px 10px 27px; display:block; float:left; margin:0; white-space:nowrap; transition:.3s; position:relative; }
.drop-account .dropdown-menu li a i{float:left; height:initial; font-size:16px; position:absolute; top:10px; left:0px; transition:.3s; color:var(--color1) }
.drop-account .dropdown-menu li a i:before{font-weight:300; transition:.3s;}
.drop-account .dropdown-menu li a:hover{color:var(--color1)}
.drop-account .dropdown-menu li a:hover i:before{font-weight:900;}
.drop-account .dropdown-menu li:last-child{border-top:1px solid rgba(0,0,0,.07); padding-top:10px; margin-top:10px;}
.drop-account.show .dropdown-menu{margin-top:5px; pointer-events:initial; opacity:1; visibility:initial;}








































/*****************************************************************/
/*                          Responsive                          */
/****************************************************************/


@media (max-width:991px) {
    
    .barHeader,
    header .wrap-mainmenu,
    header .col-header .col-logo{display:none;}
    
    /* Cart */
    /*header .col-header .col-right .nav-myCart{position:fixed; z-index:999999; top:10px; right:10px; width:40px; height:40px; margin:0; background:none; font-size:24px; font-weight:300; color:#fff }
    header .col-header .col-right .nav-myCart span{top:22px; right:initial; left:50%; margin-left:-8px;}*/


     /* navbar */
     .navbar{width:100%; height:60px; position:fixed; top:0; z-index:0; z-index:10; /*box-shadow: 0 1px rgba(0,0,0,.01), 0 0 20px rgba(0,0,0,.07);*/ display:flex; padding:0;}
     .navbar .col-account{display:flex; width:60px; vertical-align:middle; position:relative; }
     .navbar .col-search{display:flex; width:calc(100% - 120px); vertical-align:middle; position:relative;}
     .navbar .col-cart{display:flex; width:60px; vertical-align:middle; position:relative;}
     .navbar .wrap-account{width:60px; height:60px; position:relative}
     .navbar .wrap-account .nav-drop{display:flex; width:60px; height:60px; justify-content:center; align-items:center; text-decoration:none; color:#fff }
     .navbar .wrap-account .nav-drop i{font-size:24px;}
     .navbar .wrap-account .nav-drop img{width:32px; border-radius:50%;}
     .navbar .wrap-account ul.login{left:15px; border:none; border-radius:7px; box-shadow: 0 0 10px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.05); padding: 10px 0 }
     .navbar .wrap-account ul.login li{width:100%;float:left; position:relative;}
     .navbar .wrap-account ul.login li a{text-decoration:none; color:#000; font-size:15px; padding: 6px 20px; display:block;}
     .navbar .wrap-account ul.account{left:15px; border:none; border-radius:7px; box-shadow: 0 0 10px rgba(0,0,0,.05); padding: 15px 20px 10px 20px;  min-width:210px; }
     .navbar .wrap-account ul.account li{width:100%; float:left;}
     .navbar .wrap-account ul.account li:nth-child(2){border-bottom:1px solid rgba(0,0,0,.07); padding-bottom:15px; margin-bottom:10px;}
     .navbar .wrap-account ul.account li:last-child{border-top:1px solid rgba(0,0,0,.07); padding-top:10px; margin-top:10px;}
     .navbar .wrap-account ul.account li label{margin:0; padding:0 0 10px 0; font-weight:bold; font-size:15px; }
     .navbar .wrap-account ul.account li a{color:#000; font-size:16px; text-decoration:none; padding: 8px 0; display:block; transition:.3s; white-space:nowrap}
     .navbar .wrap-account ul.account li a:hover{ color:var(--color1); font-weight:500; padding-left:10px;}
     .navbar .wrap-account ul.account li .level-memeber{width:100%; float:left;position:relative; padding-left:40px; }
     .navbar .wrap-account ul.account li .level-memeber span{white-space:nowrap; font-size:13px; float:left; display:block; padding-bottom:5px;}
     .navbar .wrap-account ul.account li .level-memeber label{margin:0; display:block; text-transform:uppercase; font-weight:bold; font-size:14px; color:var(--color1); white-space:nowrap; width:100%; float:left;}
     .navbar .wrap-account ul.account li .level-memeber.lv1:before{content:''; width:30px; height:35px; margin:0; background:url(../Backend/member-lever-1.png) no-repeat center 0; background-size: 100% auto; display:block; position:absolute; top:3px; left:0;}
     .navbar .wrap-account ul.account li .level-memeber.lv2:before{content:''; width:30px; height:35px; margin:0; background:url(../Backend/member-lever-2.png) no-repeat center 0; background-size: 100% auto; display:block; position:absolute; top:3px; left:0;}
     .navbar .wrap-account ul.account li .level-memeber.lv3:before{content:''; width:30px; height:35px; margin:0; background:url(../Backend/member-lever-3.png) no-repeat center 0; background-size: 100% auto; display:block; position:absolute; top:3px; left:0;}
     .navbar .wrap-account ul.account li .level-memeber.lv3 .nav-upgrade{display:none;}
     .navbar .nav-search{width:100%; height:40px; line-height:40px; font-size:15px; background:#fff; display:block; text-decoration:none; border-radius:7px; padding: 0 0 0 10px; color:rgba(0,0,0,.7); position:relative; background:#f3f3f6; }
     .navbar .nav-search:after{font-family: "Font Awesome 5"; font-weight: 900; content: "\f002"; font-size:16px; position:absolute; top:0; right:10px; opacity:.5} 

    /* tabbar */
    .tabbar{position:fixed; padding:20px 5px 0 5px; bottom:0; left:0; z-index:1000; height:80px; background:url(tabbar-bg.png) no-repeat center 0 ; width:100%; display:flex; justify-content:space-between; align-content:center; align-items:center;  transition:.3s; z-index:1007 }
    .tabbar .item{display:flex; width:100%; height:100%; position:relative;  align-items:center; justify-content:center;}
    .tabbar a.nav-tabbar{padding-top:35px; height:60px; font-weight:500; position:relative; font-size:12px; color:#000; text-decoration:none; transition:.3s; }
    .tabbar a.nav-tabbar svg{width:24px; fill:var(--color2); margin-left:-12px; text-align:center; position:absolute; top:10px; left:50%;}
    .tabbar a.nav-tabbar .icon-home{width:50px; height:50px; margin-left:-25px; position:absolute; top:-25px; left:50%; background:var(--color2); border-radius:50%; box-shadow: 0 0 10px rgba(0,0,0,.15)}
    .tabbar a.nav-tabbar .icon-home svg{top:50%; margin-top:-12px; opacity:1; fill:#fff;}
    .tabbar a.nav-tabbar span{font-size:12px; font-weight:bold; white-space:nowrap; width:100%; overflow:hidden; text-overflow:ellipsis; text-align:center}
    .tabbar a.nav-tabbar.active:before{content:''; width:44px; margin-left:-22px; height:3px; background:var(--color2); position:absolute; top:0px; left:50%;}
    .tabbar .nav-tabbar-logo{}
    .tabbar .nav-tabbar-logo img{}

    .panel{}
    .panel .dropdown-menu{position:fixed!important; width:100%; height:100%; background:rgba(0,0,0,.5); display:block; z-index:5000; top:0; left:0; margin:0; padding:0; border:none; border-radius:0; visibility:hidden; opacity:0; transition:.3s; pointer-events:none; transform:initial!important}
    .panel .dropdown-menu .inner{width:320px; height:100%; background:#f3f3f6; overflow-y:auto; padding: 60px 0 0 0; position:absolute; top:0; transition:.3s; }
    .panel-left .dropdown-menu .inner{left:-320px;} 
    .panel-right .dropdown-menu .inner{right:-320px;} 
    .panel.show .dropdown-menu{opacity:1; visibility:initial; pointer-events:inherit}
    .panel-left.show .dropdown-menu .inner{left:0;}
    .panel-right.show .dropdown-menu .inner{right:0;}
    
    
    .panel .dropdown-menu .inner .title-panel{position:absolute; top:0; width:100%; }
    .panel .dropdown-menu .inner .title-panel label{margin:0; font-weight:bold; text-transform:uppercase; line-height:60px; padding-left:15px; color:var(--color1) }
    .panel .dropdown-menu .inner .title-panel .nav-close{position:absolute; border-radius:5px; right:15px; top:50%; font-size:16px; line-height:32px; width:32px; margin-top:-16px; text-align:center; background:#ec1f26; color:#fff; text-decoration:none;}
    .panel .dropdown-menu .inner .content-panel{width:100%; height:100%; position:relative; overflow-y:auto; padding: 0 15px;}
    
    .panel .dropdown-menu ul.nav-group{width:100%; margin:0; padding:10px 15px 10px 15px; list-style:none; background:#fff; border-radius:7px; float:left;}
    .panel .dropdown-menu ul.nav-group li{width:100%; float:left; position:relative; border-top:1px solid #f3f3f6}
    .panel .dropdown-menu ul.nav-group li:first-child{border:none;}
    .panel .dropdown-menu ul.nav-group li a{width:100%; float:left; position:relative; background:#fff; line-height:46px; color:#000; padding: 0 0px; font-size:15px; text-decoration:none; font-weight:500;}
    .panel .dropdown-menu ul.nav-group li a:after{font-family: "Font Awesome 5"; font-weight: 900; content: "\f0da"; font-size:16px; position:absolute; top:0; right:0px; opacity:.5}

    .panel .dropdown-menu ul.nav-group-title{width:100%; margin:30px 0 0 0; padding:10px 15px 10px 15px; list-style:none; background:#fff; border-radius:7px; float:left; position:relative;}
    .panel .dropdown-menu ul.nav-group-title li{width:100%; float:left; position:relative; border-bottom:1px solid #f3f3f6}
    .panel .dropdown-menu ul.nav-group-title li.title{position:absolute; left:0; bottom:100%; width:100%; text-transform:uppercase; font-size:13px; font-weight:bold; letter-spacing:1px; padding-bottom:10px; opacity:.75 }
    .panel .dropdown-menu ul.nav-group-title li:last-child{border:none;}
    .panel .dropdown-menu ul.nav-group-title li a{width:100%; float:left; position:relative; background:#fff; line-height:46px; color:#000; padding: 0 0px; font-size:15px; text-decoration:none; font-weight:500;}
    .panel .dropdown-menu ul.nav-group-title li a:after{font-family: "Font Awesome 5"; font-weight: 900; content: "\f0da"; font-size:16px; position:absolute; top:0; right:0px; opacity:.5}
    .panel .dropdown-menu a.nav-community{width:100%; position:relative; height:60px; padding-top:10px; color:#fff; padding-left:60px; text-decoration:none; background:#32a2d2; border-radius:7px; float:left; margin-bottom:20px;}
    .panel .dropdown-menu a.nav-community span{display:block; font-size:14px; width:100%; float:left;}
    .panel .dropdown-menu a.nav-community b{display:block; font-size:16px; width:100%; float:left; position:relative; margin-top:-3px;}
    .panel .dropdown-menu a.nav-community i{font-size:32px; line-height:32px; height:32px; margin-top:-16px; position:absolute; left:15px; top:50%;}
    .panel .dropdown-menu a.nav-banner{width:100%; float:left; padding: 18px 0px 18px 80px; position:relative; color:#000; text-decoration:none; background:#fff; z-index:2; border-radius:7px; margin-top:15px;}
    .panel .dropdown-menu a.nav-banner img{height:48px; position:absolute; top:15px; left:15px;}
    .panel .dropdown-menu a.nav-banner span{font-size:15px; display:block;}
    .panel .dropdown-menu a.nav-banner b{font-size:16px;}
    .panel .dropdown-menu a.nav-banner.course{background:#cadfef; margin-top:20px}
    .panel .dropdown-menu a.nav-banner.live{background:#d6e7d9;}
    .panel .dropdown-menu a.nav-banner.drink{background:#faebd7}
    .panel .dropdown-menu a.nav-banner.knyt{background:#fddcdc}
    .panel .dropdown-menu a.nav-banner.adsProduct{background:#d2e8f9}
    .panel .dropdown-menu .social{width:100%; float:left; margin-top:20px;}
    .panel .dropdown-menu .social label{margin:0; padding:0; text-transform:uppercase; font-size:13px; font-weight:bold; letter-spacing:1px; padding-bottom:10px; opacity:.75 }
    .panel .dropdown-menu .social ul{margin:0 0 0 5px; padding:0 10px; list-style:none; display:block; float:left; background:#fff; border-radius:7px; width:100%; display:flex; justify-content:space-between; align-content:center; align-items:center;  }
    .panel .dropdown-menu .social li{display:flex; width:100%; height:100%; padding: 15px 0; position:relative;  align-items:center; justify-content:center;}
    .panel .dropdown-menu .social li a{width:36px; height:36px; line-height:36px; text-align:center; color:#fff; background:#f3f3f6; font-size:16px; border-radius:3px; text-decoration:none; transition:.3s;}
    .panel .dropdown-menu .social li .fa-facebook-f{background:#1977e5}
    .panel .dropdown-menu .social li .fa-twitter{background:#2098e4}
    .panel .dropdown-menu .social li .fa-youtube{background:#f40014}
    .panel .dropdown-menu .social li .fa-pinterest-p{background:#c41e2a}
    .panel .dropdown-menu .social li .fa-linkedin-in{background:#0870a8}

    ul.toggle-menu{width:100%; float:left; position:relative; list-style:none; margin:0; padding:0;}
    ul.toggle-menu>li{width:100%; float:left; margin-bottom:10px; border-radius:7px; background:#fff; position:relative;}
    ul.toggle-menu>li>i{width:46px; height:46px; font-size:13px; text-align:center; position:absolute; top: 0px; right:0px; z-index:5; cursor:pointer  }
    ul.toggle-menu>li>i:before{position:relative; z-index:2; font-family: "Font Awesome 5"; font-weight: 900; content: "\f0de"; line-height:53px;}
    ul.toggle-menu>li>i:after{content:''; z-index:1; width:20px; height:20px; margin: -10px 0 0 -10px; background:#f3f3f6; border-radius:3px; position:absolute; top:50%; left:50%;}
    ul.toggle-menu>li>a{width:100%; float:left; position:relative; line-height:46px; color:#000; padding: 0 15px 0 50px; font-size:15px; text-decoration:none; font-weight:500; }
    ul.toggle-menu>li>a svg{height:24px; margin-top:-12px; left:15px; position:absolute; top:50%; fill:var(--color2)}
    ul.toggle-menu>li>ul{width:100%; margin:0; padding:0 0 10px 0; list-style:none; float:left;}
    ul.toggle-menu>li>ul>li{width:100%; float:left; position:relative;}
    ul.toggle-menu>li>ul>li>a{text-decoration:none; color:#000;padding: 8px 15px 8px 40px ; font-size:15px; display:block;}
    
    ul.toggle-menu>li.is-close>i:before{line-height:44px;}
    ul.toggle-menu>li.is-close>i:before{content:"\f0dd";}
    ul.toggle-menu>li.is-close>ul{display:none; }

    ul.toggle-menu>li>a:before{ display:none!important; font-family: "Font Awesome 5"; font-weight: 400; width:32px; height:32px; line-height:32px; margin-top:-16px; text-align:center;font-size:16px; margin-right:10px; text-align:center; display:block; position:absolute; left:5px; top:50%; color:var(--color2); transition:.3s;  }
    ul.toggle-menu>li:nth-child(1)>a:before{content: "\f400";}
    ul.toggle-menu>li:nth-child(2)>a:before{content: "\f4d8";}
    ul.toggle-menu>li:nth-child(3)>a:before{content: "\f645";}
    ul.toggle-menu>li:nth-child(4)>a:before{content: "\f183";}
    ul.toggle-menu>li:nth-child(5)>a:before{content: "\f004";}
    ul.toggle-menu>li:nth-child(6)>a:before{content: "\f291";}
    ul.toggle-menu>li:nth-child(7)>a:before{content: "\f4be";}
    ul.toggle-menu>li:nth-child(8)>a:before{content: "\f81e";}
    ul.toggle-menu>li:nth-child(9)>a:before{content: "\f64b";}

    
}

@media (max-width:767px) {

    .barList{margin-bottom:15px;}
    .barList .viewType{display:none;}

}

@media (min-width: 992px) and (max-width:1199px) {
    /* Bar top */ 
    .barHeader .col-social{width:250px;}
    .barHeader .col-account{width:calc(100% - 250px)!important}

    /* Header */
    header .col-header .col-logo{width:250px;}
    header .col-header .col-right{width:240px!important; padding-left:0px; }
    header .col-header .col-right .nav-myCart{margin-left:20px;}
    /* Mainmenu */ 
    .wrap-mainmenu .mainmenu-left{width:250px!important}
    .wrap-mainmenu .mainmenu-right{width:calc(100% - 250px)!important}
    .dropdown-blog>ul>li>ul{width:250px!important}
    ul.menu-channels li{padding: 0 12px!important}

    /* Footer */
    footer .content-footer{display:block; width:calc(100% + 30px); margin-left:-15px;}
    footer .content-footer .col-info{display:block; padding: 0 15px; width:100%; float:left; clear:both;}
    footer .content-footer .col-info ul{border-bottom:1px solid rgba(0,0,0,.07); width:100%; float:left; padding-bottom:40px; margin-bottom:10px;}
    footer .content-footer .col-info ul li{float:left; width:initial; margin-top:10px; margin-right:40px; }
    footer .content-footer .col-info ul li:nth-child(1),
    footer .content-footer .col-info ul li:nth-child(2){width:100%; margin-right:0;}
    footer .content-footer .col-info ul li strong{width:initial;}
    footer .content-footer .col-menu{width:25%; float:left; padding: 0 15px;}

}


ul.ads{width:100%; margin:0; padding:0; list-style:none;}
ul.ads li{width:100%; float:left; position:relative; margin-bottom:20px;}
ul.ads li img{width:100%;}
ul.ads li .inner{width:100%; float:left; position:relative;}
ul.ads li:last-child{margin:0;}




























/******************************************************************/
/*                             Modal                              */
/******************************************************************/

/* Chuyển trang sau khi đăng nhập thành công */
.myModal-navigationPage{width:100%; height:100%; position:fixed; top:0; left:0; z-index:100; background:rgba(0,0,0,.5)}

/******************************************************************/
/*                          Elements                              */
/******************************************************************/

.wrap-img .link-img{z-index:5!important;}




.featureInfo{width:100%; margin:0; padding:5px 0; float:left; font-size:13px; display:none; }
.featureInfo .date{float:left; color:#111; padding-left:20px; position:relative; }
.featureInfo .date:before{width:14px; height:14px; background:url(icon/date-14.svg) no-repeat center; position:absolute; top:1px; left:0; content:""; opacity:.3}
.featureInfo .view{float:left; color:#111; margin-left:15px; padding-left:20px; position:relative;}
.featureInfo .view:before{width:14px; height:14px; background:url(icon/eye-14.svg) no-repeat center; position:absolute; top:1px; left:0; content:""; opacity:.3}
.featureInfo .comment{float:left; font-size:14px; margin-left:15px; padding-left:20px; position:relative;}
.featureInfo .comment:before{width:14px; height:14px; background:url(icon/comment-14.svg) no-repeat center; position:absolute; top:1px; left:0; content:""; opacity:.3}






.wrap-utilities-info{position:absolute; z-index:5; left:0; display:block; width:calc(100% + 5px);}
.wrap-utilities-info .link-main{text-decoration:none; height:28px; line-height:28px; float:left; display:block; text-align:center; transition:.3s; width:calc(20% - 5px); margin-left:5px; transition:.3s; position:relative; outline:none; color:#000; background:#f3f3f6; border-radius:0px;}
.wrap-utilities-info .link-main i{font-size:14px; opacity:.7;}
.wrap-utilities-info .link-main span{line-height:30px; padding-left:3px; font-weight:500;}
.wrap-utilities-info .navLike:hover{color:#00b42a}
.wrap-utilities-info .navLike:hover i{opacity:1;}
.wrap-utilities-info .navLike.active{color:#00b42a; background:#d5f3dc}
.wrap-utilities-info .navLike.active i{opacity:1;}
.wrap-utilities-info .navLike.active i:before{font-weight:900}

.wrap-utilities-info .like{color:#00b42a;}
.wrap-utilities-info .like i{opacity:1;}
.wrap-utilities-info .like i:before{font-weight:900;}
.wrap-utilities-info .dislike{color:#ec1f26;}
.wrap-utilities-info .dislike i{opacity:1;}
.wrap-utilities-info .dislike i:before{font-weight:900;}
.wrap-utilities-info .save{color:#0082ff; }
.wrap-utilities-info .save i{opacity:1;}
.wrap-utilities-info .save i:before{font-weight:900;}

.wrap-utilities-info .navDisLike:hover{color:#ec1f26}
.wrap-utilities-info .navDisLike:hover i{opacity:1;}
.wrap-utilities-info .navDisLike.active{color:#ec1f26; background:#ffdfe0}
.wrap-utilities-info .navDisLike.active i{opacity:1;}
.wrap-utilities-info .navDisLike.active i:before{font-weight:900}

.wrap-utilities-info .navSave:hover{color:#0082ff}
.wrap-utilities-info .navSave:hover i{opacity:1;}
.wrap-utilities-info .navSave.active{color:#0082ff; background:#cbe6ff}
.wrap-utilities-info .navSave.active i{opacity:1;}
.wrap-utilities-info .navSave.active i:before{font-weight:900}

.wrap-utilities-info .social-share{float:left; position:relative; display:none; }
.wrap-utilities-info .social-share .drop-share{position:absolute; top:100%; right:0; left:initial!important; display:flex;padding:15px 10px; box-shadow: 0 0 5px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05); border:none; background:#fff; border-radius:5px; text-align:right; opacity:0; visibility:hidden; transition:.3s;}
.wrap-utilities-info .social-share .drop-share:before{content:''; border-bottom:5px solid #fff; border-left:5px solid transparent; border-right:5px solid transparent; position:absolute; bottom:100%; right:8px;}
.wrap-utilities-info .social-share .drop-share span{line-height:30px; float:left; white-space:nowrap}
.wrap-utilities-info .social-share .drop-share a{text-decoration:none; width:30px; height:30px; color:#fff; display:flex; border-radius:4px; font-size:16px; margin-left:10px; align-items:center; justify-content:center; }
.wrap-utilities-info .social-share .drop-share a.fa-facebook-f{background:#3b5998}
.wrap-utilities-info .social-share .drop-share a.fa-twitter{background:#2fc2ff}
.wrap-utilities-info .social-share .drop-share a.fa-instagram{background:#c91160}
.wrap-utilities-info .social-share .drop-share a.fa-pinterest-p{background:#ca242d}
.wrap-utilities-info .social-share.open .drop-share{margin-top:5px; opacity:1; visibility:initial;}


.utiliLg{height:34px; position:relative; float:left; width:100%;}
.utiliLg .wrap-utilities-info{width:calc(100% + 10px); margin-left:-10px}
.utiliLg .wrap-utilities-info .link-main{height:34px; width:calc(20% - 10px); margin-left:10px;}
.utiliLg .wrap-utilities-info .link-main i{font-size:16px; line-height:34px;}
.utiliLg .wrap-utilities-info .link-main span{font-size:15px; line-height:34px; padding-left:5px;}

.utiliSm{height:24px; position:relative; float:left; width:100%;}
.utiliSm .wrap-utilities-info{width:calc(100% + 5px); margin-left:-5px;}
.utiliSm .wrap-utilities-info .link-main{height:24px; width:calc(20% - 5px); margin-left:5px; padding: 0 1px;}
.utiliSm .wrap-utilities-info .link-main i{font-size:11px; line-height:24px;}
.utiliSm .wrap-utilities-info .link-main span{font-size:12px; line-height:24px;}


.listItem{width:100%; float:left; position:relative; min-height:160px; padding:0px 0 0px 260px;}
.listItem .wrap-img{width:100%; float:left; position:absolute!important; width:240px; top:0px; left:0; display:block; }
.listItem .wrap-img:before{content:''; display:block; padding-bottom:66.666666666666666%}
.listItem .wrap-img .link-img{width:100%; height:100%; float:left;  border-radius:0; position:absolute; top:0; left:0; z-index:2; border-radius:5px;}
.listItem .wrap-img .link-img img{width: inherit; height: inherit; object-fit: cover;}
.listItem .name{text-decoration:none; color:#111; transition:.3s; display:block; margin:-5px 0 3px 0; color:#111}
.listItem .name:hover{color:var(--color1)}
.listItem .name h3{margin:0; padding:0; font-size:16px; line-height:25px; font-weight:500;  }
.listItem .detail{width:100%; float:left; position:relative; color:rgba(0,0,0,.85); margin-top:15px; line-height:24px;}
.listItem .wrap-utilities-info{position:relative; margin: 10px 0 0px -5px;}

.wrap-exchange{border: 2px solid #EBEBEB; padding: 0; width: 100%; margin-bottom:15px; float:left;}
.wrap-exchange iframe{width:100%; height:230px;}
.wrap-exchange .caption{width:100%; float:left; background:#EBEBEB; padding:7px 6px 5px 6px; text-align:right;}
.wrap-exchange .caption label{float:left; font-size:12px; color:#333; margin-top:5px;}
.wrap-exchange table{width:100%; font-size:11px; color:#444}
.wrap-exchange table th, .wrap-exchange table td{border-bottom:1px solid #EBEBEB; border-left:1px solid #EBEBEB; padding: 4px 4px;}
.wrap-exchange table th{font-size:12px; color:#111; padding:6px 4px;} 
.wrap-exchange table th:first-child{border-left:none;}

/*.typePost{}
.typePost .link-img:after{content:''; font-family:"Font Awesome 5"; font-weight:900; position:absolute; bottom:5px; left:5px; width:34px; height:34px; display:none; justify-content:center; align-items:center; border-radius:4px; font-size:16px; z-index:5; color:#fff; line-height:initial!important}
.typePost.normal .link-img:after{display:none;}
.typePost.video .link-img:after{content:"\f04b"; background:#ec1f26; font-size:14px; padding-left:1px; display:flex;}
.typePost.photo .link-img:after{content:"\f03e"; background:#689F38; padding-top:2px; display:flex; }
.typePost.sm .link-img:after{left:2px; bottom:2px; box-shadow:none; font-size:13px!important; width:24px; height:24px;} 
.typePost.sm.video .link-img:after{font-size:11px!important}
.typePost.lg .link-img:after{font-size:24px; bottom:20px; left:20px; width:48px; height:48px; border-radius:6px; box-shadow:none} */

.title-section {float:left; width:100%; color: #222222; font-size: 15px; font-weight: 700; margin: 0 0 20px 0; box-shadow: inset 3px 0 var(--color2); padding-left:3px;  text-transform: uppercase; width:100%; height:10px; background:rgba(0,0,0,.05); }
.title-section h3 {display: inline-block;position:relative; background:#fff; padding: 0 10px 0 15px; margin-top:-4px; float:left; color:var(--color2); font-size:17px; font-weight:500;}

.title-listPost{width:100%; float:left; position:relative;  }
.title-listPost h3{float:left; margin:0; font-size:17px; font-weight:500; text-transform:uppercase;}

.sidebar{width:100%; float:left; position:relative;}
.sidebar.stick{margin-top:0!important; padding-top:0!important;}


/* object-fit-image */
.object-fit-image{border-radius:0px; overflow:hidden;}
.object-fit-image img{width: inherit; height: inherit;object-fit: cover;}
.object-fit-image.object-fit-image-ie{position: relative; background-size: cover; background-position: center center;}
.object-fit-image.object-fit-image-ie img{opacity:0;}

/* myModal Processing */
.myModal-processing{width:100%; height:100%; position:fixed; top:0; left:0; z-index:100; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; transition:.3s; padding:30px;}
.myModal-processing .inner{min-width:110px; height:110px;  padding:20px 0 0 0; background:#fff; border-radius:7px; text-align:center; text-align:center}
.myModal-processing .inner .db-spinner{width: 46px; height: 46px; border-radius: 50%; display:block; margin: 0 auto; background-color: transparent; border: 3px solid rgba(0,0,0,.07); border-top: 3px solid var(--color1); border-bottom: 3px solid var(--color1); -webkit-animation: 1s spin linear infinite; animation: 1s spin linear infinite;}
.myModal-processing .inner span{display:block; font-weight:500; font-size:13px; padding-top:8px; display:block;}
@-webkit-keyframes spin {from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
@keyframes spin {from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}    

/* Modal send mail */
#myModal-sendMail{}
#myModal-sendMail .modal-content{border-radius:5px; border:none; box-shadow: 0 1px 3px rgba(0,0,0,.1)}
#myModal-sendMail .modal-content .modal-header{padding:13px 15px; border-bottom:1px solid rgba(0,0,0,.07); box-shadow: 0 1px rgba(0,0,0,.015)}
#myModal-sendMail .modal-content .modal-header .modal-title{font-size:15px; font-weight:bold; font-family:Roboto; color:var(--color1)}
#myModal-sendMail .modal-content .modal-body{padding: 0px 20px 20px 20px}
#myModal-sendMail .modal-content .modal-body ul{margin:0 -10px; padding:0; list-style:none; position:relative;}
#myModal-sendMail .modal-content .modal-body ul li{position:relative; margin-top:15px; padding: 0 10px; }
#myModal-sendMail .modal-content .modal-body ul li label{font-size:13px; color:rgba(0,0,0,.5);  margin-bottom:5px;}
#myModal-sendMail .modal-content .modal-body ul li .title-sendMail{color:rgba(0,0,0,.85); font-size:18px; margin:0; padding:0 0 5px 0; clear:both; display:block; }
#myModal-sendMail .modal-content .modal-body ul li input[type='text'],
#myModal-sendMail .modal-content .modal-body ul li textarea{width:100%; background:rgba(0,0,0,.02); border:1px solid rgba(0,0,0,.07); border-radius:4px; padding: 0 5px; height:36px; transition:.3s;}
#myModal-sendMail .modal-content .modal-body ul li input[type='text']:focus,
#myModal-sendMail .modal-content .modal-body ul li textarea:focus{outline:none; border-color:rgba(0,0,0,.2); background:#fff;}
#myModal-sendMail .modal-content .modal-body ul li textarea{height:100px; resize:none; padding:5px;}
#myModal-sendMail .modal-content .modal-body ul li .sendMail{line-height:34px; padding: 0 15px; text-decoration:none; background:rgba(0,0,0,.7); color:#fff; transition:.3s; display:inline-block; border-radius:4px; font-weight:bold;}
#myModal-sendMail .modal-content .modal-body ul li .sendMail:hover{background:var(--color1)}



.modalSend{position:fixed; top:0; left:0; width:100%; height:100%; padding:20px; z-index:999; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; }
.modalSend.is-open{opacity:1; visibility:initial}
.modalSend .inner{display:inline-block;background:#fff; border-radius:15px; position:relative; padding:20px; }
.modalSend .inner .row01{width:100%; float:left; position:relative; text-align:center;}
.modalSend .inner .row01 .icon{width:60px; height:60px; display:block; margin: 0 auto}
.modalSend .inner .row01 .icon svg{height:100%;}
.modalSend .inner .row01 span{display:block; padding-top:20px;}
.modalSend .inner .row02{ width:300px; float:left; text-align:center; padding:150px 20px 15px 20px;} 
.modalSend .inner .row02 img,
.modalSend .inner .row02 svg{height:100px; margin-left:-50px; display:block; position:absolute; top:40px; left:50%;}
.modalSend .inner .row02 span{display:block; line-height:24px; width:100%; float:left; font-size:16px;}
.modalSend .inner .row02 .nav-close{line-height:43px; display:inline-block; height:42px; padding: 0 50px; color:#fff; background:var(--color1); border-radius:7px; margin-top:25px; text-decoration:none; box-shadow:inset 0 0 rgba(0,0,0,0); transition:.3s; text-transform:uppercase; font-weight:500;}
.modalSend .inner .row02 .nav-close:hover{box-shadow: inset 0 42px rgba(0,0,0,.1); }

#myModalIsLogin{}
#myModalIsLogin .modal-footer a{height:34px; line-height:34px; padding: 0 15px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); border-radius:5px; color:var(--color1); transition:.3s; margin-left:10px; text-decoration:none; display:inline-block; background:rgba(0,0,0,.02); font-weight:500;}
#myModalIsLogin .modal-footer a:hover{color:#fff; background:var(--color1)}

/*********************************************************/
/*                           backend                    */
/********************************************************/

/* Filter */
@media (max-width:991px) {
    .col-filter-ba .inner{width:100%; float:left; position:relative; border-bottom:1px solid rgba(0,0,0,.07); height:50px; margin-bottom:0px; }
    .col-filter-ba .tottal{float:left; position:relative; line-height:50px;}
    .col-filter-ba .tottal label{margin:0; font-size:15px; font-weight:bold; text-transform:uppercase; color:var(--color1); padding-right:10px;}
    .col-filter-ba .tottal b{font-size:16px; color:#ec1f26; font-weight:bold; padding-right:5px;}
    .col-filter-ba .tottal span{}
    .col-filter-ba .drop-filter{position:relative; z-index:10; font-family:Roboto; float:right; }
    .col-filter-ba .drop-filter .nav-drop{font-family:Roboto; line-height:48px; color:var(--color1); font-weight:500; font-size:16px; text-decoration:none;}
    .col-filter-ba .drop-filter .nav-drop:before{font-family:"Font Awesome 5"; font-size:16px; padding-right:5px; color:rgba(0,0,0,.5); font-weight:900}
    .col-filter-ba .drop-filter .dropdown-menu{display:block; left:initial; right:0; margin:-5px 0 0 0; padding:10px 20px 20px 20px; width:250px; border:none; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 0 10px rgba(0,0,0,.1); opacity:0; transition:.3s; visibility:hidden;}
    .col-filter-ba .drop-filter.is-open .dropdown-menu{opacity:1; visibility:initial; margin-top:5px;}
    .col-filter-ba .drop-filter .dropdown-menu .nav-close{position:absolute; top:5px; right:5px; background:#d70404; border-radius:3px; color:#fff; width:24px; height:24px; display:flex; align-items:center; justify-content:center;}
    .col-filter-ba .drop-filter .dropdown-menu .nav-close svg{height:16px;}
    .col-filter-ba .drop-filter .dropdown-menu .item{float:left; position:relative; margin-top:10px; width:100%;}
    .col-filter-ba .drop-filter .dropdown-menu .item span{padding-bottom:5px; width:100%; float:left; font-weight:500;}
    .col-filter-ba .drop-filter input[type="text"],
    .col-filter-ba .drop-filter select{height:34px; border:1px solid rgba(0,0,0,.1); border-radius:4px; outline:none; transition:.3s; padding: 0 5px; width:100%;}
    .col-filter-ba .drop-filter input[type="text"]:focus,
    .col-filter-ba .drop-filter select:focus{border-color:var(--color1)}
    .col-filter-ba .drop-filter .navFilter{line-height:34px; height:34px; margin-top:5px; line-height:34px; padding: 0 20px; width:100%; text-align:center; background:var(--color1); text-decoration:none; color:#fff; font-weight:500; border-radius:5px; box-shadow: inset 0 0 rgba(0,0,0,0); transition:.3s; display:block;}
    .col-filter-ba .drop-filter .navFilter:hover{box-shadow:inset 0 34px rgba(0,0,0,.15); }
}

@media (min-width:992px){
    .col-filter-ba{position:relative;}
    .col-filter-ba .inner{width:100%; float:left; position:relative; border-bottom:1px solid rgba(0,0,0,.07); height:60px; margin-bottom:10px; background:rgba(0,0,0,.02); padding: 0 20px;}
    .col-filter-ba .tottal{float:left; position:relative; line-height:60px;}
    .col-filter-ba .tottal label{margin:0; font-size:15px; font-weight:bold; text-transform:uppercase; color:var(--color1); padding-right:10px;}
    .col-filter-ba .tottal b{font-size:16px; color:#ec1f26; font-weight:bold; padding-right:5px;}
    .col-filter-ba .tottal span{}
    .col-filter-ba .drop-filter{position:relative; float:right; }
    .col-filter-ba .drop-filter .nav-drop{float:left; line-height:60px; font-family:Roboto; text-transform:uppercase; color:var(--color1); font-weight:bold; font-size:15px; margin-right:25px; text-decoration:none;}
    .col-filter-ba .drop-filter .nav-drop:before{display:none;}
    .col-filter-ba .drop-filter .dropdown-menu{display:block; position:relative;top:initial; border:none; box-shadow:none; z-index:1; margin:13px 0 0 0; padding: 0px 0 0 0; float:left; background:none;}
    .col-filter-ba .drop-filter .dropdown-menu .nav-close{display:none;}
    .col-filter-ba .drop-filter .dropdown-menu .item{float:left; margin-right:20px; display:flex;}
    .col-filter-ba .drop-filter .dropdown-menu .item:last-child{margin:0;}
    .col-filter-ba .drop-filter .dropdown-menu .item span{font-weight:500; padding-right:5px; white-space:nowrap; line-height:34px;}
    .col-filter-ba .drop-filter input[type="text"],
    .col-filter-ba .drop-filter select{height:34px; border:1px solid rgba(0,0,0,.1); border-radius:4px; outline:none; transition:.3s; padding: 0 5px; width:100%;}
    .col-filter-ba .drop-filter input[type="text"]:focus,
    .col-filter-ba .drop-filter select:focus{border-color:var(--color1)}
    .col-filter-ba .drop-filter .navFilter{line-height:34px; height:34px; line-height:34px; padding: 0 20px; background:var(--color1); text-decoration:none; color:#fff; font-weight:500; border-radius:5px; box-shadow: inset 0 0 rgba(0,0,0,0); transition:.3s;}
    .col-filter-ba .drop-filter .navFilter:hover{box-shadow:inset 0 34px rgba(0,0,0,.15); }
}











































/*********************************************************************************************************/
/*                                             library                                                   */
/*********************************************************************************************************/

/* init */

a,a:hover{color:#0d1e4c; text-decoration:none!important; opacity:1;}




/******************************************************************/
/*                         Modal bootrap                          */
/******************************************************************/

/* Modal bootrap 4 */
.modal{padding-right:0!important}
.modal-header{position:relative; border:none;}
.modal-header .nav-close{width:36px; height:36px; position:absolute; top:20px; right:20px; background:rgba(0,0,0,.05); color:var(--color3); margin:0; padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; opacity:1; z-index:5; transition:.3s;}
.modal-header .nav-close:hover{background:var(--color3); color:#fff;}
.modal-content{border-radius:10px; box-shadow:none; border:none; }










/* Drop Hotline */
.drop-hotline{display:block; float:right;color:#000; position:relative;}
.drop-hotline .slider-hotline{width:100%; float:left; position:relative; height:44px; padding: 0 0 0 55px;}
.drop-hotline .slider-hotline .icon{width:44px; height:44px; border-radius:50%; box-shadow: 0 0 0 1px rgba(0,0,0,.1); display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0px; font-size:16px;}
.drop-hotline .slider-hotline .icon svg{height:24px;}
.drop-hotline .slider-hotline label{margin:0; padding:0; display:block; font-size:11px; text-transform:uppercase; font-weight:900; text-align:left;}
.drop-hotline .slider-hotline .wrap-slide{height: 30px; overflow: hidden; float:left; clear:both; margin-top:-4px; position:relative; z-index:3;}
.drop-hotline .slider-hotline ul.v-slides {list-style-type: none; padding:0;}
.drop-hotline .slider-hotline ul.v-slides li.v-slide {font-size: 19px; line-height: 30px; color: #4BB3FD; font-weight:900; color:var(--color3)}
.drop-hotline .slider-hotline:after{content:'Click xem tất cả'; text-transform:uppercase; position:absolute; width:calc(100% - 55px); left:55px; top:100%; margin-top:-5px; white-space:nowrap; font-size:9px; font-weight:bold; background:#ffeb3b; padding: 0px 10px; z-index:1; text-align:center; letter-spacing:1px; border-radius:4px; color:#000;}
.drop-hotline .nav-drop{display:block; position:absolute; width:100%; height:100%; top:0; left:0; z-index:5; }
.drop-hotline .dropdown-menu{display:block; border:none; left:initial!important; right:0; top:100%!important; border-radius:10px; box-shadow: 0 0 0 1px rgba(0,0,0,.03), 0 0 15px rgba(0,0,0,.05); min-width: 350px; margin-top:10px; padding:10px 20px 20px 20px; transition:.3s; opacity:0; visibility:hidden; transform:initial!important}
.drop-hotline .dropdown-menu ul{width:100%; float:left; position:relative; margin:0; padding:0; list-style:none;}
.drop-hotline .dropdown-menu ul li{width:100%; float:left; position:relative;box-shadow: 0 0 0 1px rgba(0,0,0,.0); background:rgba(0,0,0,.03); border-radius:7px; margin-top:10px; padding:10px 15px 7px 15px; text-align:center}
.drop-hotline .dropdown-menu ul li a{text-decoration:none; color:var(--color3); font-weight:900; font-size:18px;}
.drop-hotline .dropdown-menu ul li a:before{content:'-'; padding: 0 8px; font-size:14px; color:#000; font-weight:500;}
.drop-hotline .dropdown-menu ul li a:first-of-type:before{display:none;}
.drop-hotline .dropdown-menu ul li .title{font-size:14px; font-weight:500; }
.drop-hotline .dropdown-menu ul li .title:before{font-family: "Font Awesome 5"; display:none; font-weight: 900; font-size:16px; content: "\f82d"; width:44px; height:44px; line-height:44px; text-align:center; box-shadow: 0 0 0 1px rgba(0,0,0,.1); border-radius:50%; position:absolute; top:0; left:0;}
.drop-hotline.show .dropdown-menu{opacity:1; visibility:initial; margin-top:20px;}
.drop-hotline.show label,
.drop-hotline.show ul.v-slides,
.drop-hotline.show .slider-hotline:after{filter: blur(3px);-webkit-filter: blur(3px); opacity:.5}
@media (max-width:767px) {
    .drop-hotline{display:none;}
}

@media (min-width:768px) and (max-width:991px) {
    .drop-hotline .slider-hotline{width:44px; height:44px; padding:0;}
    .drop-hotline .slider-hotline label,
    .drop-hotline .slider-hotline .wrap-slide,
    .drop-hotline .slider-hotline:after{display:none;}
    .drop-hotline .slider-hotline .icon svg{color:var(--color3)}
}





/*****************************************************************/
/*                      Category Products                        */
/*****************************************************************/
.mainmenu-open{position:relative; z-index:20; box-shadow:none!important}
.bg-mainMenuOverlay{background:#28323a!important; opacity:.5!important; position:fixed; width:100%; height:100%; z-index:15; top:0; left:0;}
@media (min-width:768px) {
    
    .drop-category .dropdown-menu{display:block; width:270px; z-index:3; border:none; border-radius:0 0 10px 10px; box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 0 20px rgba(0,0,0,.1); box-shadow: none; padding:0; left:0px; transform:initial!important; top:100%!important; margin-top:0px; opacity:0; visibility:hidden; transition:.3s;}
    .drop-category.show .dropdown-menu{opacity:1; visibility:initial; }
    .drop-category .dropdown-menu img{display:none;}
    .drop-category .dropdown-menu>ul{margin:0; padding:0px 0 20px 0; list-style:none; width:100%; float:left; position:relative;  }
    .drop-category .dropdown-menu>ul>li{width:100%; float:left; padding: 0 20px;}
    .drop-category .dropdown-menu>ul>li>a{display:block; color:#000; padding: 0px 15px 0px 0;line-height:48px; font-weight:normal; font-size:15px; border-bottom:1px solid #f2f2f2; position:relative; transition:.3s; z-index:5;}
    .drop-category .dropdown-menu>ul>li:hover>a{color:var(--color2); z-index:2;}
    .drop-category>.dropdown-menu>ul>li.sub>a:after{content:"\f054"; font-family:"Font Awesome 5"; font-weight:900; font-size:12px; position:absolute; right:10px; top:0; opacity:0; visibility:hidden; transition:.3s; line-height:48px;}
    .drop-category>.dropdown-menu>ul>li.sub:hover>a{ background-image: linear-gradient(to right, #fff , var(--color-bg)); width:calc(100% + 20px); box-shadow: 0 -1px #f2f2f2}
    .drop-category>.dropdown-menu>ul>li.sub:hover>a:after{right:0; opacity:1; visibility:initial;}
    .drop-category>.dropdown-menu>ul>li:last-child>a{border:none;}
    .drop-category>.dropdown-menu>ul>li>.sub-mainMenu{position:absolute; top:-1px; left:0; min-height:100%; background:#fff; border-radius:0 0 10px 10px; opacity:0; visibility:hidden; transition:.3s; pointer-events:none; overflow-y:auto}
    .drop-category>.dropdown-menu>ul>li:hover>.sub-mainMenu{opacity:1; visibility:initial; pointer-events:initial;}
    .drop-category>.dropdown-menu>ul>li>a{padding-left:35px; white-space:nowrap}
    .drop-category>.dropdown-menu>ul>li>a>.icon{height:24px; margin-top:-12px; position:absolute; left:0; transition:.3s; top:50%;}
    .drop-category>.dropdown-menu>ul>li>a>.icon>svg{height:24px; opacity:.4;}
    .drop-category>.dropdown-menu>ul>li>a>.icon>img{height:24px; display:block;}
    .drop-category>.dropdown-menu>ul>li:hover>a{font-weight:500;}
    .drop-category>.dropdown-menu>ul>li:hover>a>.icon>svg{opacity:1}
}

@media (min-width:768px) and (max-width:991px) {
    .drop-category{position:absolute; bottom:2px; left:0px;}
    .drop-category .nav-drop{width:40px; height:40px; box-shadow: 0 0 0 1px rgba(0,0,0,.0); border-radius:5px; display:block; background:var(--color2)}
    .drop-category .nav-drop span{width: 20px; height:2px; background:#fff; display:block; position:absolute; top:50%; left:10px; margin-top:-2px;}
    .drop-category .nav-drop span:before{content:''; width:100%; height:2px; background:#fff; position:absolute; top:-6px; left:0; }
    .drop-category .nav-drop span:after{content:''; width:100%; height:2px; background:#fff; position:absolute; bottom:-6px; left:0;}
    .drop-category .nav-drop label{display:none;}
}

@media (min-width:992px) {
    .drop-category{float:right; position:relative; position:absolute; left:0; bottom:-1px; z-index:20;}
    .drop-category .nav-drop{height:48px; width:270px; padding:0px; font-size:14px; display:block; position:relative; text-align:left; padding-left:50px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); box-shadow:none; border-radius:10px 10px 0 0; background:var(--color1)}
    .drop-category .nav-drop:after{content:''; position:absolute; top:100%; font-size:10px; white-space:nowrap; font-weight:bold; text-transform:uppercase}
    .drop-category .nav-drop span{width: 20px; height:2px; background: #000; display:block; position:absolute; top:50%; left:15px; margin-top:-2px; opacity:.5}
    .drop-category .nav-drop span:before{content:''; width:100%; height:2px; background:#000; position:absolute; top:-6px; left:0; }
    .drop-category .nav-drop span:after{content:''; width:100%; height:2px; background:#000; position:absolute; bottom:-6px; left:0;}
    .drop-category .nav-drop label{text-transform:uppercase; line-height:48px; margin:0; font-weight:bold; color:#fff; cursor:pointer; position:relative; font-size:15px;}
    
}

/* sub Mainmeu */
.sub-mainMenu{display:table}
.sub-mainMenu .inner{background:var(--color-bg); display:table-cell; position:relative;border-radius: 7px; padding: 10px 10px 5px 10px; }   
.sub-mainMenu .inner .head-propose{width:100%; float:left; position:relative; margin-top:20px;}
.sub-mainMenu .inner .head-propose label{ float:left; position:relative;margin: 0px 10px; font-weight:bold; color:var(--color2); font-size:16px; }
.sub-mainMenu .inner .head-propose .nav-all{float:right; color:#000; position:relative; padding-right:25px; transition:.3s; font-weight:500; float:right;font-size:14px;}
.sub-mainMenu .inner .head-propose .nav-all:after{font-family: "Font Awesome 5";font-weight: 900; content: "\f0da"; position:absolute; top:2px; right:0; font-size:12px; padding-left:2px; width:18px; height:18px; line-height:18px; border-radius:50%; text-align:center; background:var(--color2); transition:.3s; color:#fff;}
.sub-mainMenu .inner .head-propose .nav-all:hover{color:var(--color2)}
.sub-mainMenu ol.menu-sub{position:relative; float:left; width:calc(100% + 10px);list-style:none; margin:0 0 0 -5px; padding:0 10px; }
.sub-mainMenu ol.menu-sub li{margin:10px 5px 0 5px; float:left; position:relative; }
.sub-mainMenu ol.menu-sub li a{width:100%; float:left; position:relative; line-height:45px; padding: 0 10px; background:#fff; border-radius:5px; font-size:15px; color:#000; font-weight:normal; white-space:nowrap; transition:.3s; overflow:hidden; text-overflow:ellipsis}
.sub-mainMenu ol.menu-sub li a:hover{color:var(--color2)}

ol.product-propose{width:calc(100% + 10px); float:left; position:relative; margin:0 0 0 -5px; padding:0 10px 10px 10px; list-style:none; clear:both;}
ol.product-propose li{margin:10px 5px 0 5px; float:left;}
ol.product-propose li .wrap-img{width:100%; float:left; position:relative; background:#fff; border-radius:7px; box-shadow:inset 0 0 0 1px #fff; transition:.3s}
ol.product-propose li:hover .wrap-img{box-shadow:inset 0 0 0 1px var(--color2)}
ol.product-propose li .wrap-img:before{content:''; padding-top:100%; position:relative; display:block;}
ol.product-propose li .wrap-img a{width:calc(100% - 20px); height:calc(100% - 20px); display:block; position:absolute; border-radius:7px; overflow:hidden; top:10px; left:10px;}
ol.product-propose li .wrap-img a img{width:100%; height:100%; object-fit:cover; display:block;}
ol.product-propose li .nav-name{font-weight:bold; text-decoration:none; font-weight:normal; font-size:15px; color:#000; margin-top:15px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; width:100%; float:left; transition:.3s;}
ol.product-propose li .nav-name:hover{color:var(--color2)}
ol.product-propose li .price{width:100%; float:left; position:relative; text-align:left; margin-top:5px; z-index:4;}
ol.product-propose li .price .old{display:inline-block; height:17px; margin: 0 0 0 10px; padding-right:9px; position:relative; font-weight:500; font-size:15px; color:#7d7d7d; line-height:initial;}
ol.product-propose li .price .old:before{content:''; width:100%; height:1px; position:absolute; top:50%; margin-top:0px; left:0; background:#9c9c9c; margin-top:-1px;}
ol.product-propose li .price .old:after{content:'₫'; position:absolute; right:0; top:0; font-size:13px; }
ol.product-propose li .price .new{display:inline-block; margin:0; padding-right:10px; position:relative; font-weight:bold; color:var(--color3); font-size:16px;}
ol.product-propose li .price .new:after{content:'₫'; position:absolute; right:0; top:0; font-size:14px; }

@media (min-width:768px) and (max-width:991px) {
    .sub-mainMenu{width:720px; padding:0px 15px 15px 15px; padding-left:270px; }
    .sub-mainMenu ol.menu-sub{padding-bottom:10px;}
    .sub-mainMenu ol.menu-sub li{width:calc(50% - 10px)}
    .sub-mainMenu .inner label,
    ol.product-propose{display:none;}
}

@media (min-width:992px) and (max-width:1199px) {
    .sub-mainMenu{width:960px; padding:0px 15px 15px 15px; padding-left:270px; }
    .sub-mainMenu ol.menu-sub li{width:calc(25% - 10px)}
    ol.product-propose li{width:calc(25% - 10px)}
    ol.product-propose li:nth-child(n+5){display:none;}
}

@media (min-width:1200px) and (max-width:1439px) {
    .sub-mainMenu{width:1140px; padding:0px 15px 15px 15px; padding-left:270px; }
    .sub-mainMenu ol.menu-sub li{width:calc(25% - 10px)}
    ol.product-propose li{width:calc(25% - 10px)}
    ol.product-propose li:nth-child(n+5){display:none;}
}

@media (min-width:1440px) {
    .sub-mainMenu{width:1270px; padding:0px 15px 15px 15px; padding-left:270px; }
    .sub-mainMenu ol.menu-sub li{width:calc(20% - 10px)}
    ol.product-propose li{width:calc(20% - 10px)}
    ol.product-propose li:nth-child(n+6){display:none;}
}

/* Icon mainmenu */

ul.icon-mainMenu>li>a:before{content:''; width:24px; height:24px; margin-top:-12px; background-size:auto -24px; background-position: -48px center;background-repeat:no-repeat; position:absolute; top:50%; left:0;}
ul.icon-mainMenu>li:hover>a:before{background-position-x:-48px; opacity:1}
ul.icon-mainMenu>li:nth-child(1)>a:before{background-image:url(icon/discount.png);}
ul.icon-mainMenu>li:nth-child(2)>a:before{background-image:url(icon/CanhDuongSinh.png);}
ul.icon-mainMenu>li:nth-child(3)>a:before{background-image:url(icon/flag-australia.png);}
ul.icon-mainMenu>li:nth-child(4)>a:before{background-image:url(icon/flag-japan.png);}
ul.icon-mainMenu>li:nth-child(5)>a:before{background-image:url(icon/flag-taiwan.png);}
ul.icon-mainMenu>li:nth-child(6)>a:before{background-image:url(icon/ThaoDuocVietNam.png);}
ul.icon-mainMenu>li:nth-child(7)>a:before{background-image:url(icon/TroPhuongSucKhoe.png);}
ul.icon-mainMenu>li:nth-child(8)>a:before{background-image:url(icon/ThucPhamThucDuong.png);}
ul.icon-mainMenu>li:nth-child(9)>a:before{background-image:url(icon/NhuYeuPham.png);}

/* fixed header  */
@media (max-width:767px){
}

@media (min-width:768px) and (max-width:991px) {
    header.fixed .head-main{position:fixed; top:0; background:#fff; box-shadow: 0 1px rgba(0,0,0,.03), 0 0 10px rgba(0,0,0,.07) }
    header.fixed .head-main .col-main{padding-bottom:75px;}
    header.fixed .drop-category{bottom:22px;}
    header.fixed .sub-mainmenu{bottom:18px;} 
}

@media (min-width:992px){
    header.fixed .head-main{position:fixed; top:0; background:#fff; box-shadow: 0 1px rgba(0,0,0,.03), 0 0 10px rgba(0,0,0,.07)}
    header.fixed .head-main .col-main{height:80px; padding-bottom:0;}
    header.fixed .head-main .col-main .col-logo a.logo{margin-top:-7px;}
    header.fixed .head-main .col-main .col-logo a.logo:before{left:35px; font-size:11.5px;}
    header.fixed .head-main .col-main .col-logo a.logo svg{height:35px;}

    header.fixed .drop-category{position:relative; top:initial; bottom:initial; }
    header.fixed .drop-category .nav-drop{width:44px; height:44px; padding-left:44px; background:var(--color1); box-shadow:none; border-radius:50%;}
    header.fixed .drop-category .nav-drop span{left:12px; opacity:1; background:#fff;}
    header.fixed .drop-category .nav-drop span:before,
    header.fixed .drop-category .nav-drop span:after{background:#fff;}
    header.fixed .drop-category .nav-drop label{display:none;}
    header.fixed .drop-category .dropdown-menu{left:initial!important; right:0; margin-top:5px;}
    header.fixed .drop-category.show .dropdown-menu{ margin-top:18px;}
    header.fixed .sub-mainmenu{display:none;}
}






/* wishlist */
.wrap-wishlist{}
.wrap-wishlist .panel{position:absolute; top:100%; right:0; margin-top:10px; background:#fff; border-radius:7px; box-shadow: 0 0 0 1px rgba(0,0,0,.04), inset 0 3px #01c123, 0 0 20px rgba(0,0,0,.1);}
.wrap-wishlist .panel .phead{width:100%; position:relative; padding: 5px 60px 0 55px;}
.wrap-wishlist .panel .phead:before{content:''; border-bottom:6px solid #01c123; border-left:8px solid transparent; border-right:8px solid transparent; position:absolute; right:15px; bottom:100%;}
.wrap-wishlist .panel .phead span{white-space:nowrap; font-size:16px; color:#000; font-weight:bold; line-height:50px;}
.wrap-wishlist .panel .phead .nav-close{height:32px; width:32px; margin-top:-16px; display:flex; align-items:center; justify-content:center; position:absolute; top:50%; right:10px; color:rgba(0,0,0,.5); transition:.3s; }
.wrap-wishlist .panel .phead .nav-close:hover{color:var(--color3)}
.wrap-wishlist .panel .phead .icon{width:24px; margin-top:-12px; fill:var(--color1); position:absolute; top:50%;left:20px;}
.wrap-wishlist .panel .pbody{width:100%; float:left; position:relative; text-align:left; padding: 20px; border-top:1px solid rgba(0,0,0,.07)}

@media (min-width:768px) {
    .wrap-wishlist{position:relative; float:right; margin-left:20px; z-index:10;}
    .wishlist{width:46px; height:46px; border-radius:50%; position:relative; display:flex; align-items:center; justify-content:center; color:#000!important}
    .wishlist:before{content:''; width:100%; height:100%; border-radius:50%; background:var(--color2); position:absolute; top:0; left:0; border-radius:50%; opacity:.07}
    .wishlist svg{height:24px; position:relative; z-index:2;}
    .wishlist b{min-width:18px; height:18px; margin-left:-14px; border-radius:9px; padding: 1px 0 0 1px; background:var(--color2); color:#fff; text-align:center; font-weight:bold; font-size:11px; position:absolute; top:0; left:100%; display:flex; align-items:center; justify-content:center; z-index:3;}
    .wishlist span{display:none;}
}
@media (max-width:767px) {
    .wrap-wishlist{position:absolute; top:15px; right:45px; width:35px; height:35px; display:none;}
    .wishlist{width:35px; height:35px; color:#fff!important; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1); border-radius:5px; text-decoration:none;}
    .wishlist:before{font-family:"Font Awesome 5"; font-weight: 900; content:"\f004"; font-size:16px; }
    .wishlist b{min-width:18px; height:18px; margin-left:-14px; display:none; border-radius:9px; padding: 1px 0 0 1px; background:var(--color2); color:#fff; text-align:center; font-weight:bold; font-size:11px; position:absolute; top:0; left:100%; align-items:center; justify-content:center; z-index:3;}
    .wishlist svg{position:relative; z-index:2; display:none;}
    .wishlist span{display:none;}
}


.sub-mainmenu{width:calc(100% - 290px); position:absolute; right:0px; bottom:0; z-index:21;}
.sub-mainmenu ul{margin:0; padding:0; width:100%; list-style:none; float:left;}
.sub-mainmenu ul li{float:left; position:relative; padding-right:30px; }
.sub-mainmenu ul li:before{content:''; width:1px; height:10px; margin-top:-5px; background:rgba(0,0,0,.2); position:absolute; top:50%; right:0; display:none;}
.sub-mainmenu ul li a.nav{font-weight:500; text-transform:uppercase; color:#000; line-height:48px; transition:.3s; font-size:15px; padding: 0 0px;}
.sub-mainmenu ul li:first-child a.nav{padding-left:0;}
.sub-mainmenu ul li:last-child:before{display:none;}
.sub-mainmenu ul li.menu-last{padding-right:0; float:right;}
.sub-mainmenu ul li a.nav:hover{color:var(--color2)}
.sub-mainmenu ul li.dropdown a.nav:after{font-family: "Font Awesome 5"; font-weight:900; content: "\f0d7"; font-size:12px; margin-left:5px; opacity:.5; line-height:42px; }
.sub-mainmenu ul li.dropdown .dropdown-menu{box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 0 20px rgba(0,0,0,.1); border-radius:7px; padding: 14px 0; padding:14px 25px; border:none; }
.sub-mainmenu ul li.dropdown .dropdown-menu li{padding:0 ; margin:0; width:100%; float:left; position:relative;}
.sub-mainmenu ul li.dropdown .dropdown-menu a{padding: 6px 0px; display:block; font-size:15px; width:100%; float:left; color:#000; transition:.3s; white-space:nowrap}
.sub-mainmenu ul li.dropdown .dropdown-menu a:hover{color:var(--color2)}
.sub-mainmenu ul li.lastsub{float:right; padding-right:0;}
.sub-mainmenu ul li.lastsub a.nav-drop{padding-left:50px; text-transform:initial; font-size:15px; font-weight:500;}
.sub-mainmenu ul li.lastsub a.nav-drop .icon{position:absolute; color:#fff; left:0px; top:50%; margin-top:-20px; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--color3); }
.sub-mainmenu ul li.lastsub a.nav-drop .icon svg{}
.sub-mainmenu ul li.lastsub .dropdown-menu{left:initial!important; right:0!important;}
.sub-mainmenu ul li.nav-orderFood{float:right; padding-right:0;}
.sub-mainmenu ul li.nav-orderFood a{ padding: 0 0 0 50px; display:block; line-height:initial; }
.sub-mainmenu ul li.nav-orderFood a:before{content: "\f2e6";font-family: "Font Awesome 5"; font-size:20px; font-weight:900; width:40px; height:40px; line-height:40px; border-radius:5px; display:block; text-align:center; position:absolute; top:0; left:0; background:var(--color3); color:#fff; }
.sub-mainmenu ul li.nav-orderFood a label{margin:0; cursor:pointer; font-size:16px; font-weight:900; transition:.3s; }
.sub-mainmenu ul li.nav-orderFood a span{text-transform:initial; display:block; clear:both; font-weight:normal; font-weight:500; padding-top:3px; opacity:.7; color:#000;}
.sub-mainmenu ul li.nav-orderFood a:hover{color:var(--color3)}
.sub-mainmenu ul li.mega-dropdown{position:initial;}
.sub-mainmenu ul li.mega-dropdown .dropdown-menu{width:100%!important; opacity:1; visibility:initial; padding: 0 10px 20px 10px;}
.sub-mainmenu ul li.mega-dropdown .dropdown-menu .col-nav{display:table-cell; vertical-align:top; padding: 0 20px;}
.sub-mainmenu ul li.mega-dropdown .dropdown-menu .col-nav .nav-col{text-transform:uppercase; font-weight:500; font-size:14px; color:#000; border-bottom:1px solid rgba(0,0,0,.05); line-height:44px; padding:0; margin-block:10px; position:relative; }
.sub-mainmenu ul li.mega-dropdown .dropdown-menu .col-nav .nav-col:before{content:''; width:10px; height:10px; border:1px solid rgba(0,0,0,.07); position:absolute; left:20px; bottom:-5px; transform:rotate(45deg); background:#fff; border-left:none; border-top:none;}
.sub-mainmenu ul li.mega-dropdown .dropdown-menu.food-menu{}
.sub-mainmenu ul li.mega-dropdown .dropdown-menu.food-menu .col-nav:last-of-type{width:75%}
.sub-mainmenu ul li.mega-dropdown .dropdown-menu.food-menu .col-nav:last-of-type ul{width:calc(100% + 10px); margin-left:-5px;}
.sub-mainmenu ul li.mega-dropdown .dropdown-menu.food-menu .col-nav:last-of-type li{padding: 5px; width:20%;}
.sub-mainmenu ul li.mega-dropdown .dropdown-menu.food-menu .col-nav:last-of-type li a{background:rgba(0,0,0,.04); border-radius:5px; padding-left:10px; padding-right:10px; }
.sub-mainmenu ul li.mega-dropdown .dropdown-menu.food-menu .col-nav:last-of-type li a:hover{background:#dbeaf9}
.sub-mainmenu ul li.mega-dropdown .dropdown-menu.food-menu .nav-male,
.sub-mainmenu ul li.mega-dropdown .dropdown-menu.food-menu .nav-female{line-height:45px; background:rgba(0,0,0,.04); margin: 5px 0; border-radius:5px; font-weight:bold;padding-left:45px; color:#fff; text-transform:uppercase}
.sub-mainmenu ul li.mega-dropdown .dropdown-menu.food-menu .nav-male{ background:#0ea6fa;}
.sub-mainmenu ul li.mega-dropdown .dropdown-menu.food-menu .nav-male:before{font-family: "Font Awesome 5"; font-weight: 400; content: "\f222"; font-size:24px; position:absolute; left:15px; }
.sub-mainmenu ul li.mega-dropdown .dropdown-menu.food-menu .nav-female{background:#eb2c6b}
.sub-mainmenu ul li.mega-dropdown .dropdown-menu.food-menu .nav-female:before{font-family: "Font Awesome 5"; font-weight: 400; content: "\f221"; font-size:24px; position:absolute; left:15px; }



@media (max-width:767px) {
    .sub-mainmenu{display:none;}
    .panelRight .dropdown-menu{display:block;}
}

@media (min-width:768px) and (max-width:991px) {
    .sub-mainmenu{width:calc(100% - 60px); position:absolute; right:0px; bottom:0;}
    .sub-mainmenu ul li{padding-right:16px;}
    .sub-mainmenu ul>li:first-child>a.nav{font-size:0;}
    .sub-mainmenu ul>li:first-child>a.nav:before{font-family: "Font Awesome 5"; font-weight: 900; content: "\f015"; font-size:16px; }
    .sub-mainmenu ul>li:last-child{padding-right:0px;}
    
    .sub-mainmenu ul li.dropdown .dropdown-menu{width:calc(100% + 60px)!important; margin:0px 0 0 -60px; width:initial; display:block; transform:initial!important; top:100%!important; opacity:0; visibility:hidden; pointer-events:none; transition:.3s; margin-top:0; opacity:1; visibility:initial; pointer-events:initial; margin-top:10px!important; opacity:0; visibility:hidden;}
    .sub-mainmenu ul li.dropdown.show .dropdown-menu{margin-top:3px!important; opacity:1; visibility:initial}
    .sub-mainmenu ul li.dropdown.show a.nav{color:var(--color2)}
    .sub-mainmenu ul li.mega-dropdown .dropdown-menu.food-menu .col-nav:last-of-type li{width:25%;}
}

@media (min-width:992px){
    .sub-mainmenu ul li.dropdown .dropdown-menu{margin:0px 0; width:initial; display:block; transform:initial!important; top:100%!important; opacity:0; visibility:hidden; pointer-events:none; transition:.3s; margin-top:0; opacity:1; visibility:initial; pointer-events:initial; margin-top:10px!important; opacity:0; visibility:hidden;}
    .sub-mainmenu ul li.dropdown:hover a.nav{color:var(--color2)}
    .sub-mainmenu ul li.dropdown:hover a.nav:after{opacity:1;}
    .sub-mainmenu ul li.dropdown:hover .dropdown-menu{margin-top:-1px!important; opacity:1; visibility:initial}
    .sub-mainmenu ul li.mega-dropdown .dropdown-menu{display:table}
    
}
@media (min-width:992px) and (max-width:1199px) {

    .sub-mainmenu ul li{padding-right:18px;}
    .sub-mainmenu ul>li:first-child>a.nav{font-size:0;}
    .sub-mainmenu ul>li:first-child>a.nav:before{font-family: "Font Awesome 5"; font-weight: 900; content: "\f015"; font-size:16px; }
    .sub-mainmenu ul>li:last-child{padding-right:0px;}
    .sub-mainmenu ul li.mega-dropdown .dropdown-menu.food-menu .col-nav:last-of-type li{width:25%;}
}

@media (min-width:1200px) and (max-width:1439px) {

    
}




/******************************************************************/
/*                           Content                              */
/******************************************************************/



/* Title page Mobile */
.title-pageMobile{position: fixed;top: 65px; width: 100%; left: 0;background: #fff; z-index: 5; box-shadow: 0 1px rgba(0,0,0,.07), 0 0 5px rgba(0,0,0,.07); display:none;}
.title-pageMobile .namePage{line-height: 50px;float: left; font-size: 16px; text-transform: uppercase; font-weight: 900; padding: 0 15px;}

@media (max-width:767px){
    .title-pageMobile{display:block;}
}


ul[data-minMaxList]{}
ul[data-minMaxList] li.nav-toggle{display:block!important; cursor:pointer; font-size:14px; font-weight:500; margin-top:5px; color:var(--color2)}
ul.expanded[data-minMaxList] li{display:block!important}
ul.expanded[data-minMaxList] li.nav-toggle{font-size:0;}
ul.expanded[data-minMaxList] li.nav-toggle:after{content:'Thu lại'; font-size:14px;}

/* Scroll to top */
.scrollToTop{width:45px; height:45px; display:none; padding-top:22px; text-align:center; font-size:16px; color:#fff!important; background:var(--color3); border-radius:5px; box-shadow: 0 0 0 1px rgba(0,0,0,.07); z-index:50; position:fixed; right:10px;bottom:240px; text-decoration:none; transition:.3s; text-align:center; font-size:10px; white-space:nowrap; text-transform:uppercase; font-weight:bold; box-shadow: 0 0.2rem 0.35rem rgba(0, 0, 0, 0.1); }
.scrollToTop:before{font-family: "Font Awesome 5";font-weight: 900; content: "\f077"; font-size:14px; width:100%; text-align:center; position:absolute; top:6px; left:0; line-height:initial}
@media (max-width:767px){
    .scrollToTop{display:none!important;}
}


@media (max-width:991px) {
    .nav-toTop{display:none;}
}
@media (min-width:992px) {
    .nav-toTop{bottom:-50px; }
    .nav-toTop.show{bottom:20px;}
}




/******************************************************************/
/*                             Mobile                             */
/******************************************************************/
/* */
.modal-backdrop{transition:.3s;}
/* tabbar */
.tabbar{position:fixed; padding:0; bottom:0; left:0; z-index:30; height:70px; background:url(tabbar-bg.png) no-repeat center bottom; background-size:auto 100%; width:100%; transition:.3s; }
.tabbar a.nav{display:block; width:calc(25% - 18px); height:70px; position:relative; font-weight:bold; top:0; font-size:12px; color:#000; text-decoration:none; transition:.3s; float:left; z-index:5; white-space:nowrap }
.tabbar a.nav svg{height:24px; width:24px; position:absolute; top:18px; left:50%; margin-left:-12px; fill:var(--color2)}
.tabbar a.nav span{font-size:12px; font-weight:500; white-space:nowrap; width:100%; overflow:hidden; text-overflow:ellipsis; text-align:center; position:absolute; left:0; bottom:7px;}
.tabbar a.nav:nth-child(2){margin-right:72px;}
.tabbar a.nav.active:before{content:''; width:44px; margin-left:-22px; height:3px; background:var(--color2); position:absolute; top:0px; left:50%;}
.tabbar a.nav.center{width:50px; height:50px; margin-left:-25px; border-radius:50%; display:block; align-items:center; justify-content:center; color:#fff!important; position:absolute; left:50%; top:-15px; z-index:20 }
.tabbar a.nav.center:before{content:''; width:100%; height:100%; background:var(--color2); border-radius:12px; position:absolute; top:0; left:0; transform:rotate(45deg); box-shadow: 2px 0 5px 2px rgba(0,0,0,.15), inset 0 0 20px rgba(0,0,0,.15)}
.tabbar a.nav.center svg{height:24px; position:relative; z-index:3; top:50%; margin-top:-12px; color:#fff!important; opacity:1;}
.tabbar a.nav.center span{bottom:-28px; color:#000;}

/* navbar*/
.navbar{width:100%; height:50px; position:fixed; top:0; left:0; background:#fff; z-index:10; box-shadow: 0 1px rgba(0,0,0,.1)}

/* Panel Left  */
.panelLeft{position:fixed; top:0; left:-50px; padding: 115px 0 0px 0; width:100%; height:100%;  transition:.3s; z-index:25; opacity:0; visibility:hidden; pointer-events:none; transition:.3s; background:#fff; }
.panelLeft .headPanel{position:absolute; width:100%; position:absolute; top:65px; left:0; padding:0 0 0 45px; height:50px; box-shadow: 0 1px var(--color-border),0 3px 5px rgba(0,0,0,.05) ; z-index:2; }
.panelLeft .headPanel .icon{width:50px; height:50px; color:#000; display:flex; align-items:center; justify-content:center; position:absolute; top:0px; left:0px;}
.panelLeft .headPanel .icon svg{height:24px; fill:#000}
.panelLeft .headPanel label{text-transform:uppercase; font-weight:bold; color:#000; font-size:17px; line-height:50px; margin:0;}
.panelLeft .headPanel .nav-closePanel{position:absolute; top:50%; right:10px; font-size:16px; width:28px; height:28px; margin-top:-14px; line-height:28px; text-align:center; border-radius:4px; background:var(--color3); text-decoration:none; color:#fff; display:flex; align-items:center; justify-content:center}
.panelLeft .bodyPanel{width:100%; height:100%; overflow-x:hidden; overflow-y:auto; float:left; position:relative; padding:0 0px 0px 0px;} 


/* Sản phẩm */
ul.catalog-navMobile{margin:0 0 0 0; padding:0 0; list-style:none; width:100%; float:left; position:relative; z-index:5;}
ul.catalog-navMobile>li{width:100%; float:left; position:relative; z-index:2; border-top:7px solid var(--color-border);padding: 0 15px;}
ul.catalog-navMobile>li:first-child{border:none;}
ul.catalog-navMobile li a.nav-group{display:block; color:var(--color2); width:100%; line-height:50px; font-size:16px; font-weight:500; float:left; position:relative; padding: 0 0 0 35px; transition:.3s; }
ul.catalog-navMobile li a.nav-group:after{font-family: "Font Awesome 5";  font-weight: 900; content: "\f0da"; font-size:11px; background:var(--color2); width:20px; height:20px; margin-top:-10px; line-height:20px; text-align:center; color:#fff; border-radius:50%; position:absolute; right:0px; top:50%;}
ul.catalog-navMobile li.sub{padding-top:5px;}
ul.catalog-navMobile li.sub a.nav-group{border-bottom:1px solid var(--color-border)}
ul.catalog-navMobile li.sub a.nav-group:before{content:''; width:12px; height:12px; background:#fff; transform:rotate(45deg); display:block; position:absolute; left:20px; bottom:-6px; border-bottom:1px solid var(--color-border); border-right:1px solid var(--color-border)} 
ul.catalog-navMobile ul{padding:10px 0 15px 0px; width:100%; float:left; list-style:none;}
ul.catalog-navMobile ul li a{font-size:15px; color:#000; padding: 0 0 0 20px; line-height:40px; display:block; font-weight:normal; position:relative;}
ul.catalog-navMobile ul li a:before{content: '';width: 10px;height: 10px;margin-top: -5px;position: absolute;left: 0px;top: 50%;box-shadow: inset 0 0 0 3px rgba(0,0,0,.15);border-radius: 2px; opacity:1;}

ul.catalog-navMobile>li:before{content:''; width:24px; height:24px; background-size:auto 24px; background-position: -24px center;background-repeat:no-repeat; position:absolute; top:13px; left:15px;}
ul.catalog-navMobile>li.sub:before{top:18px;}
ul.catalog-navMobile>li:nth-child(1):before{background-image:url(icon/SanPhamKhuyenMai.png);}
ul.catalog-navMobile>li:nth-child(2):before{background-image:url(icon/CanhDuongSinh.png);}
ul.catalog-navMobile>li:nth-child(3):before{background-image:url(icon/TroPhuongSucKhoe.png);}
ul.catalog-navMobile>li:nth-child(4):before{background-image:url(icon/ThucPhamThucDuong.png);}
ul.catalog-navMobile>li:nth-child(5):before{background-image:url(icon/MeVaBe.png);}
ul.catalog-navMobile>li:nth-child(6):before{background-image:url(icon/DoDungGiaDinh.png);}
ul.catalog-navMobile>li:nth-child(7):before{background-image:url(icon/ThieBiYTe.png);}
ul.catalog-navMobile>li:nth-child(8):before{background-image:url(icon/ChamSocCaNhan.png);}
ul.catalog-navMobile>li:nth-child(9):before{background-image:url(icon/SachThamKhao.png);}

/* Kiến thức */
.knowledge-navMobile{width:100%; float:left; position:relative;}
.knowledge-navMobile .col-nav{width:100%; float:left; position:relative; border-top:7px solid var(--color-border); padding: 5px 15px 0 15px;}
.knowledge-navMobile .col-nav:first-of-type{border:none;}
.knowledge-navMobile .col-nav .nav-col{line-height:50px; font-weight:bold; font-size:16px; width:100%;float:left; position:relative; color:var(--color2); position:relative; border-bottom:1px solid var(--color-border)}
.knowledge-navMobile .col-nav .nav-col:before{content:''; width:12px; height:12px; background:#fff; transform:rotate(45deg); display:block; position:absolute; left:20px; bottom:-6px; border-bottom:1px solid var(--color-border); border-right:1px solid var(--color-border)}
.knowledge-navMobile .col-nav .nav-col:after{font-family: "Font Awesome 5";  font-weight: 900; content: "\f0da"; font-size:11px; background:var(--color2); width:20px; height:20px; margin-top:-10px; line-height:20px; text-align:center; color:#fff; border-radius:50%; position:absolute; right:0; top:50%;}
.knowledge-navMobile .col-nav ul{padding:10px 0 0 0px; width:100%; float:left; list-style:none;}
.knowledge-navMobile .col-nav ul li a{font-size:15px; color:#000; padding: 0 0 0 20px; line-height:40px; display:block; font-weight:normal; position:relative;}
.knowledge-navMobile .col-nav ul li a:before{content: '';width: 10px;height: 10px;margin-top: -5px;position: absolute;left: 0px;top: 50%;box-shadow: inset 0 0 0 3px rgba(0,0,0,.15);border-radius: 2px; opacity:1;}
.knowledge-navMobile .col-nav ul li:after{display:none;}

/* Panel Right  */
.panelRight{position:fixed; top:0; left:50px; padding: 115px 0 0px 0; width:100%; height:100%;  transition:.3s; z-index:25; opacity:0;transition:.3s; visibility:hidden; pointer-events:none; background:#fff;  }
.panelRight .headPanel{position:absolute; width:100%; position:absolute; top:65px; left:0; padding:0 0 0 45px; height:50px; box-shadow: 0 1px var(--color-border),0 3px 5px rgba(0,0,0,.05) ; z-index:2; }
.panelRight .headPanel .icon{width:50px; height:50px; color:#000; display:flex; align-items:center; justify-content:center; position:absolute; top:0px; left:0px;}
.panelRight .headPanel .icon svg{height:24px; fill:#000}
.panelRight .headPanel label{text-transform:uppercase; font-weight:bold; color:#000; font-size:17px; line-height:50px; margin:0;}
.panelRight .headPanel .nav-closePanel{position:absolute; top:50%; right:10px; font-size:16px; width:28px; height:28px; margin-top:-14px; line-height:28px; text-align:center; border-radius:4px; background:var(--color3); text-decoration:none; color:#fff; display:flex; align-items:center; justify-content:center}
.panelRight .bodyPanel{width:100%; height:100%; overflow-x:hidden; overflow-y:auto; float:left; position:relative; padding:0 0px 0px 0px;} 
.panelRight .nav-registrationAdvise{width:100%; height:50px; position:relative; top:0px; left:0; padding-left:50px; display:block; float:left; box-shadow: 0 1px rgba(0,0,0,.04)}
.panelRight .nav-registrationAdvise .icon{width:24px; height:24px; margin-top:-12px; left:15px; position:absolute; top:50%; color:#02bb23}
.panelRight .nav-registrationAdvise span{color:#02bb23; font-weight:bold; line-height:50px; text-transform:uppercase}
.panelRight .bodyPanel .group-menu{width:100%; float:left; border-top:5px solid var(--color-border)}
.panelRight .bodyPanel .group-menu:first-child{border:none;}
.panelRight .bodyPanel .group-menu .title-col{line-height:50px; font-weight:bold; color:#000; font-weight:bold; padding-left:15px; font-size:16px;}
.panelRight .bodyPanel .group-menu ul{width:100%; margin:-5px 0 0 0; padding:0 0 15px 15px; list-style:none; float:left; } 
.panelRight .bodyPanel .group-menu ul li{width:100%; float:left; position:relative; }
.panelRight .bodyPanel .group-menu ul li a{font-size:15px; color:#000; padding: 0 0 0 20px; line-height:40px; display:block; font-weight:normal; position:relative;}
.panelRight .bodyPanel .group-menu ul li a:before{content: '';width: 10px;height: 10px;margin-top: -5px;position: absolute;left: 0px;top: 50%;box-shadow: inset 0 0 0 3px rgba(0,0,0,.15);border-radius: 2px; opacity:1;}

/* Món ngon */
.menu-navMobile{width:100%; float:left; position:relative; border-top:7px solid var(--color-border); padding: 5px 15px 0 15px;}
.menu-navMobile:first-of-type{border:none;}
.menu-navMobile .title-nav{line-height:50px; font-weight:bold; font-size:16px; width:100%;float:left; position:relative; color:var(--color2); position:relative; border-bottom:1px solid var(--color-border)}
.menu-navMobile .title-nav:before{content:''; width:12px; height:12px; background:#fff; transform:rotate(45deg); display:block; position:absolute; left:20px; bottom:-6px; border-bottom:1px solid var(--color-border); border-right:1px solid var(--color-border)}
.menu-navMobile ul{padding:10px 0 0 0px; width:100%; float:left; list-style:none;}
.menu-navMobile ul li a{font-size:15px; color:#000; padding: 0 0 0 20px; line-height:40px; display:block; font-weight:normal; position:relative;}
.menu-navMobile ul li a:before{content: '';width: 10px;height: 10px;margin-top: -5px;position: absolute;left: 0px;top: 50%;box-shadow: inset 0 0 0 3px rgba(0,0,0,.15);border-radius: 2px; opacity:1;}
.menu-navMobile ul li:after{display:none;}

/* Khác */
.menu-navMore{width:100%; float:left; position:relative; border-top:7px solid var(--color-border); padding: 5px 15px 0 15px;}
.menu-navMore:first-of-type{border:none;}
.menu-navMore .title-col{line-height:50px; font-weight:bold; font-size:16px; width:100%;float:left; position:relative; color:var(--color2); position:relative; border-bottom:1px solid var(--color-border)}
.menu-navMore .title-col:before{content:''; width:12px; height:12px; background:#fff; transform:rotate(45deg); display:block; position:absolute; left:20px; bottom:-6px; border-bottom:1px solid var(--color-border); border-right:1px solid var(--color-border)}
.menu-navMore ul{padding:10px 0 0 0px; width:100%; float:left; list-style:none;}
.menu-navMore ul li a{font-size:15px; color:#000; padding: 0 0 0 20px; line-height:40px; display:block; font-weight:normal; position:relative;}
.menu-navMore ul li a:before{content: '';width: 10px;height: 10px;margin-top: -5px;position: absolute;left: 0px;top: 50%;box-shadow: inset 0 0 0 3px rgba(0,0,0,.15);border-radius: 2px; opacity:1;}
.menu-navMore ul li:after{display:none;}


/* Panel Support */
.panelSupport{position:fixed; top:50px; left:0px; padding: 115px 0 0px 0; width:100%; height:100%;  transition:.3s; z-index:25; opacity:0;transition:.3s; visibility:hidden; background:#fff; pointer-events:none;   }
.panelSupport .headPanel{position:absolute; width:100%; position:absolute; top:65px; left:0; padding:0 0 0 50px; height:50px; box-shadow: 0 1px var(--color-border),0 3px 5px rgba(0,0,0,.05) ; z-index:2; }
.panelSupport .headPanel .icon{width:50px; height:50px; color:#000; display:flex; align-items:center; justify-content:center; position:absolute; top:0px; left:0px; opacity:.5 }
.panelSupport .headPanel label{text-transform:uppercase; font-weight:bold; color:#000; font-size:17px; line-height:50px; margin:0;}
.panelSupport .headPanel .nav-closePanel{position:absolute; top:50%; right:10px; font-size:16px; width:28px; height:28px; margin-top:-14px; line-height:28px; text-align:center; border-radius:4px; background:var(--color3); text-decoration:none; color:#fff; display:flex; align-items:center; justify-content:center}
.panelSupport .bodyPanel{width:100%; height:100%; overflow-x:hidden; overflow-y:auto; float:left; position:relative; padding:0 0px 20px 0px;} 
.panelSupport .bodyPanel .row-spr{width:100%; float:left; padding: 0 15px 15px 15px; margin:0; position:relative; border-top:7px solid var(--color-border)  }
.panelSupport .bodyPanel .row-spr .title-col{width:100%; float:left; line-height:50px; font-weight:bold; font-size:16px; padding: 0px 0 0 0px; color:#000;  position:relative; margin-top:5px;}

.spr-app{background:var(--color-border); border-top:none!important; }
.spr-app ul{position:relative; margin:0; padding:5px 0 0 0; list-style:none; width:calc(100% + 10px); margin-left:-5px;}
.spr-app ul li{width:calc(50% - 10px); float:left; position:relative; margin:10px 5px 0 5px; border-radius:7px;background:#fff; }
.spr-app ul a{width:100%; height:60px; padding-left:65px; position:relative; text-decoration:none; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;  transition:.3s;}
.spr-app ul a .icon{width:40px; height:40px; margin-top:-20px; position:absolute; top:50%; left:15px; display:flex; align-items:center; justify-content:center; background:var(--color-bg); border-radius:50%; padding:7px;}
.spr-app ul a .icon svg{height:40px; width:40px;}
.spr-app ul a .icon img{max-width:100%; max-height:100%;}
.spr-app ul a .icon.tel i{font-size:16px; color:var(--color1)}
.spr-app ul a span{display:block; width:100%; display:block; float:left; clear:both; padding-top:10px; font-size:14px; font-weight:bold; color:#000;}
.spr-app ul a span:after{content:'(8h00 - 22h00)'; width:100%; font-weight:normal; opacity:.8; font-size:12px; clear:both; float:left; letter-spacing:1px;}
.spr-app ul a .zaloOA img{margin-top:-10px;}
.spr-app ul a .zaloOA:after{content:'OA'; font-weight:900; font-size:11px; width:100%; text-align:center; position:absolute; text-align:center; left:0; bottom:0; color:var(--color3)}
.spr-app ul a:hover{border-color:var(--color2)}
.spr-app ul a:hover b{color:var(--color2)}

.spr-hotline{border-top:none!important;}
.spr-hotline .title-col{margin-top:0;}
.spr-hotline .title-col:before{display:none;}
.spr-hotline ul{width:calc(100% + 10px); float:left; position:relative; margin:-10px 0 0 -5px; padding:0; list-style:none;}
.spr-hotline ul li{width:calc(50% - 10px); float:left; position:relative;box-shadow: 0 0 0 1px rgba(0,0,0,.0); background:var(--color-bg); border-radius:7px; margin:10px 5px 0 5px; padding:10px 15px 7px 15px;}
.spr-hotline ul li a{text-decoration:none; color:var(--color3); font-weight:900; font-size:18px;}
.spr-hotline ul li a:before{content:'-'; padding: 0 8px; font-size:14px; color:#000; font-weight:500;}
.spr-hotline ul li a:first-of-type:before{display:none;}
.spr-hotline ul li .title{font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.spr-hotline ul li .title:before{font-family: "Font Awesome 5"; display:none; font-weight: 900; font-size:16px; content: "\f82d"; width:44px; height:44px; line-height:44px; text-align:center; box-shadow: 0 0 0 1px rgba(0,0,0,.1); border-radius:50%; position:absolute; top:0; left:0;}
.spr-hotline ul li:first-child{width:calc(100% - 10px);}

.spr-office ul{margin:-10px 0 0 0; padding:0px 0 0 0; list-style:none; width:100%; float:left; font-size:15px; color:#000}
.spr-office ul li{width:100%; float:left; position:relative; display:flex; padding:0 0 0 100px; margin-top:10px; font-weight:500; }
.spr-office ul li div:first-child{position:absolute; left:0; font-weight:500; color:#000;}
.spr-office ul li a{text-decoration:none; color:#000; transition:.3s;}
.spr-office ul li a:hover{color:var(--color2)}
.spr-office ul li strong{position:absolute; top:0; left:0px; width: 76px; font-weight:normal; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.spr-office ul li strong:after{content:':'; float:right; font-weight:normal; opacity:.5}

.spr-shop{}
.spr-shop a{float:left; margin-top:5px;}
.spr-shop a:last-child{ margin-left:30px;} 
.spr-shop img{height:40px}

.spr-pay{border-bottom:7px solid var(--color-border); padding-bottom:25px!important}
.spr-pay ul{width:calc(100% + 10px); margin: 0px 0 0 -5px; padding:0; list-style:none; float:left;}
.spr-pay ul li{width:calc(25% - 10px); height:50px; margin: 10px 5px 0 5px; float:left; padding:8px; background:#fff; display:flex; align-items:center; justify-content:center; border-radius:5px; box-shadow: 0 0 0 1px rgba(0,0,0,.1) }
.spr-pay ul li img{max-width:100%; max-height:100%;}
.spr-pay ul li.money{display:block; text-align:center; padding:7px;}
.spr-pay ul li.money i{font-size:20px; opacity:.5}
.spr-pay ul li.money span{display:block; padding-top:2px; width:100%; float:left; text-transform:uppercase; font-size:11px; font-weight:bold; letter-spacing:1px}
.spr-pay ul li.banking{display:block; text-align:center; padding:7px; position:relative;}
.spr-pay ul li.banking:before{content:''; width:100%; height:5px; background:#000; position:absolute; top:8px; left:0; opacity:.1}
.spr-pay ul li.banking span{display:block; padding-top:13px; width:100%; float:left; text-transform:uppercase; font-size:11px; font-weight:bold; letter-spacing:1px; line-height:11px;}

.spr-recommendation{background:#ffd24c; border-radius:7px; width:calc(100% - 30px); margin: 15px 15px 0px 15px; padding:20px;float:left; text-align:justify}
.spr-recommendation a{width:100%; line-height:37px; height:39px; text-align:center; float:left; background:#fff; border-radius:5px; margin-top:10px; color:var(--color3); font-weight:500;}

/* Open Panel */
@media (max-width:767px) {
    .isOpenPanle-left{overflow:hidden; padding-top:65px!important}
    .isOpenPanleLeft-Catalog .panelLeft-catalog,
    .isOpenPanleLeft-Knowledge .panelLeft-knowledge{left:0; opacity:1; visibility:initial; pointer-events:initial}
    .isOpenPanle-right{overflow:hidden; padding-top:65px!important}
    .isOpenPanleLeft-more .panelRight-more,
    .isOpenPanleLeft-menu .panelRight-menu{left:0; opacity:1; visibility:initial; pointer-events:initial}
    .isOpenPanle-support{overflow:hidden; padding-top:65px!important}
    .isOpenPanle-support .panelSupport{top:0; opacity:1; visibility:initial; pointer-events:initial}
    
    .isOpenPanle-left .tabbar,
    .isOpenPanle-right .tabbar,
    .isOpenPanle-support .tabbar{ bottom:-100px;}

    .contractHeader header{height:65px!important}
    .contractHeader header .head-main .col-main .col-logo{width:35px!important; height:35px!important;}
    .contractHeader header .head-main .col-main .col-logo a.logo{display:block; border-radius:6px; padding:5px!important; padding-left:7px!important;  overflow:hidden; background:#fff!important;}
    .contractHeader header .head-main .col-main .col-logo a.logo:after{display:block!important}
    .contractHeader header .head-main .col-main .col-logo a.logo svg path:first-child{fill:var(--color2)!important}
    .contractHeader header .head-main .col-main .col-logo a.logo svg path:last-child{fill:var(--color1)!important}
    .contractHeader header .head-main .col-main .col-search{width:calc(100% - 135px)!important; left:45px!important; margin-top:15px!important;}
}

/* panel-filter */
@media (max-width:767px) {
    .panel-filter{position:fixed!important; width:100%!important; height:calc(100% - 65px); display:block!important; top:65px; z-index:25; padding:0px!important; left:50px; background:#fff; opacity:0; visibility:hidden; transition:.3s;}
    .panel-filter .title-panelFilter{position:absolute; top:0;left:0; box-shadow: 0 1px rgba(0,0,0,.07), 0 0 5px rgba(0,0,0,.07); height:50px; line-height:50px; font-weight:900; color:var(--color3); background:#fff; text-transform:uppercase;padding: 0 15px; font-size:15px; width:100%;}
    .panel-filter .nav-closePanelFilter{position:absolute; top:10px; right:10px; font-size:16px; width:32px; height:32px; line-height:32px; text-align:center; border-radius:5px; color:#fff; text-decoration:none; background:var(--color3); z-index:5; display:flex; align-items:center; justify-content:center; }
    .panel-filter .inner{width:100%; height:calc(100% - 50px); top:50px; left:0; overflow-y:auto; padding: 20px; position:absolute}
    .isOpenPanle-filter{overflow-y:hidden!important}
    .isOpenPanle-filter .panel-filter{left:0!important; opacity:1!important; visibility:inherit!important;}   
    .isOpenPanle-filter .tabbar{bottom:-100px;}
}

/******************************************************************/
/*                         Item Product                           */
/******************************************************************/

.product{width:100%; min-height:100%; float:left; position:relative; padding-bottom:20px; z-index:3; box-shadow: 0 0 0 1px transparent; z-index:1; }
.product:before{content:''; width:100%; height:calc(100% + 55px); position:absolute; top:0; left:0; border-radius:7px; box-shadow: 0 0 0 1px var(--color-border), 0 3px 15px rgba(0,0,0,.1); background:#fff; opacity:0; pointer-events:none; transition:.0s; visibility:hidden;}
.product:hover{z-index:2;}
.product:hover:before{opacity:1; visibility:initial; pointer-events:initial}
.product .percent{display:none;}
.product .buttons{position:absolute; top:15px; right:0px; z-index:5; opacity:0; pointer-events:none; transition:.3s;}
.product .buttons a{width:38px; height:38px; margin: 0 0 8px 0; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 5px rgba(0,0,0,.04); color:var(--color1); display:flex; align-items:center;justify-content:center; background:#fff; font-size:16px; transition:.3s;}
.product .buttons a:hover{color:#fff; background:var(--color1)}
.product .buttons a:last-child{margin:0;}
.product:hover .buttons{opacity:1; right:15px; pointer-events:initial;}
.product .wrap-img{width:calc(100% - 40px); float:left; position:relative; z-index:4; margin:20px; }
.product .wrap-img:before{content:''; padding-top:100%; display:block;}
.product .wrap-img a{width:100%; height:100%; position:absolute; bottom:0; left:0; transition:.3s; }
.product .wrap-img a:before{content:''; width:40px; height:40px; margin: -20px 0 0 -20px; background:url(icon/loading.svg) no-repeat center; background-size:cover; position:absolute; top:50%; left:50%; opacity:.5}
.product .wrap-img img{width:inherit; height:inherit; object-fit:cover; position:relative; z-index:3; transition:.3s; }
.product:hover .wrap-img img{transform: scale(1.1)}
.product .wrap-img .save{position:absolute; right:-5px; top:-5px; z-index:5; width:100%;display:block; text-align:right; }
.product .wrap-img .save span{ margin: 0 auto; text-align:center; background:var(--color3); font-weight:bold; font-size:13px; color:#fff; line-height:22px; height:22px; display:inline-block; position:relative; z-index:5; padding: 0 7px 0 7px; border-radius:11px 3px 3px 11px; white-space:nowrap; }
.product .wrap-img .save span:after{content: '₫'; padding-left:2px; font-size:11px; font-weight:bold; line-height:22px; display:inline-block; float:right; }
.product .wrap-img .save span:before{content:'Giảm: '; font-size:13px; font-weight:normal; margin-bottom:-5px; padding: 0;  }

.product .status{display:none;} 
.product.out-of-stock .status,
.product.stop-business .status{position:absolute; width:100%; line-height:42px; height:40px; top:50%; margin-top:-20px; z-index:2; text-align:center; box-shadow: 0 0px 5px 0px rgba(0,0,0,.1); text-transform:uppercase; font-size:13px; font-weight:bold; color:var(--color3); letter-spacing:1px; display:block; background:#fff;}
.product.out-of-stock .link-img,
.product.stop-business .link-img{opacity:.5}
.product.sold-out .status{display:block; position:absolute; left:2px; bottom:0; z-index:2; background:var(--color3); color:#fff; font-size:13px; font-weight:bold; text-transform:uppercase; letter-spacing:0px; line-height:32px; height:30px; border-radius:15px; padding: 0 15px 0 40px;}
.product.sold-out .status:after{content:''; width:50px; height:60px; background:url(fire-icon.svg) no-repeat center; background-size: auto 100%; position:absolute; left:-8px; bottom:-5px}
.product .name{display:block; text-align:left; margin-top:0px; width:100%; float:left; padding: 0 20px; z-index:3; position:relative; color:#000}
.product .name:hover{color:var(--color2)}
.product .name h3{font-size:15px; font-weight:500; transition:.3s; line-height:24px; margin:0; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  white-space: normal; overflow:hidden; text-overflow:ellipsis; display:-webkit-box}
.product .meta{width:100%; float:left; position:relative; text-align:left; font-size:13px; padding:12px 20px 0 20px; display:block;}
.product .meta .unit{display:block; float:right;}
.product .meta .unit b{font-weight:bold; color:var(--color3); padding-right:3px; font-size:14px;}
.product .meta .rating{float:left; position:relative; text-align:left; z-index:4;}
.product .meta .rating .rating-value{display:inline-block;}
.product .meta .rating .total{font-size:13px; font-weight:bold; padding:3px 0 0 5px; position:absolute; left:100%; top:-1px;}
.product .abbreviation{ display:none; width:100%; float:left; padding: 0 0px; line-height:24px; }
.product .price{width:100%; float:left; position:relative; text-align:left; margin-top:15px; z-index:4; padding-left:20px;}
.product .price .old{display:inline-block; height:17px; margin: 0 0 0 10px; padding-right:9px; position:relative; font-weight:normal; font-size:15px; color:#7d7d7d; line-height:initial;}
.product .price .old:before{content:''; width:100%; height:1px; position:absolute; top:50%; margin-top:0px; left:0; background:#9c9c9c; margin-top:-1px;}
.product .price .old .unit{position:absolute; right:0; top:1px; text-decoration:underline; text-transform:lowercase; font-size:13px;}
.product .price .new{display:inline-block; margin:0; padding-right:11px; position:relative; font-weight:bold; color:var(--color3); font-size:16px;}
.product .price .new .unit{position:absolute; top:1px; right:0; text-transform:lowercase; text-decoration:underline; font-size:14px;}

.product .price .save:after{content: '₫'; position:absolute; top:-3px; right:0; font-size:13px; font-weight:500}
.product .wrap-btn{width:100%; float:left; position:relative; display:block!important}
.product .wrap-btn .nav-addtocart{width:calc(100% - 40px); background:var(--color2); color:#fff; margin: 0px 20px; padding: 0 12px; float:left; position:relative; height:38px; line-height:39px; border-radius:5px; text-align:left; font-weight:500; font-size:14px; box-shadow: inset 0 0 0 rgba(0,0,0,0); transition:.3s;}
.product .wrap-btn .nav-addtocart:after{font-family: "Font Awesome 5"; font-weight:400; content: "\f067"; font-size:13px; float:right;}
.product .wrap-btn .nav-addtocart:hover{box-shadow: inset 0 38px rgba(0,0,0,.1)}
.product.out-of-stock .wrap-btn .nav-addtocart,
.product.stop-business .wrap-btn .nav-addtocart{background:rgba(0,0,0,.15); pointer-events:none; color:rgba(0,0,0,.75)}

.product.noneHover:before{display:none;}
.product.noneHover .wrap-btn{opacity:1; margin:20px 0 0 0!important; pointer-events:initial; visibility:initial; position:relative; top:initial}

@media (max-width:767px) {
    .product{padding-bottom:15px;}
    .product:before,
    .product .meta,
    .product .wrap-btn{display:none;}
    .product .link-img{width:calc(100% - 30px); margin:15px;}
    .product .name{padding: 0 15px;}
    .product .name h3{font-size:15px;}
    .product .rating{}
    .product .price{margin-top:10px; padding:0 15px;}
    .product .price .old{font-size:13px; padding-right:9px;}
    .product .price .old:before{}
    .product .price .old:after{font-size:12px; bottom:0 }
    .product .price .new{clear:left;}
    .product .percent{top:15px; left:15px; padding: 0 5px;}
    .product .buttons{opacity:1; right:15px;}
    .product .buttons .nav-quickView{display:none;}
    .product .wrap-btn{display:none!important}
}

@media (min-width:768px) and (max-width:991px) {
    .product{padding-bottom:15px;}
    .product:before{display:none;}
    .product .buttons{opacity:1; right:15px;}
    .product .wrap-btn{display:none!important}
}

@media (min-width:992px) {
    .product .wrap-btn{position:absolute; top:100%; left:0px; margin-top:-5px;border-top:none; transition:.3s; opacity:0; pointer-events:none; visibility:hidden;}
    .product:hover .wrap-btn{opacity:1; pointer-events:initial; visibility:initial; margin-top:0;}
}


ul.list-product{margin:20px 0 0 0; padding:0; list-style:none; clear:both; width:100%; float:left; position:relative; overflow:hidden;}
ul.list-product:hover{overflow:initial;}
ul.list-product li{padding:0; margin:0;  }
ul.list-product li:hover{z-index:2; position:relative;}

@media (min-width:768px) {
    ul.viewlist{}
    ul.viewlist li{-ms-flex: 0 0 100%!important; flex: 0 0 100%!important; max-width: 100%!important; box-shadow: 0 -1px var(--color-border)!important}
    ul.viewlist li .product{padding:20px 20px 20px 240px; position:relative; min-height:240px;  }
    ul.viewlist li .product:before{display:none;}
    ul.viewlist li .product .wrap-img{width:200px; margin:0; float:left; position:absolute; top:20px; left:20px;}
    ul.viewlist li .product .name{float:initial; padding:0; }
    ul.viewlist li .product .price{padding-left:0; margin-top:10px;}
    ul.viewlist li .product .abbreviation{display:block; width:100%; float:left; position:relative; font-size:14px; color:#000; margin-top:10px; -webkit-line-clamp: 3; -webkit-box-orient: vertical;  white-space: normal; overflow:hidden; text-overflow:ellipsis; display:-webkit-box}
    ul.viewlist li .product .buttons{opacity:1; right:initial; left:240px; bottom:20px; top:initial}
    ul.viewlist li .product .buttons a{float:left; margin: 0 10px 0 0px; width:auto; border-radius:19px; height:38px; line-height:19px; position:relative; padding: 0 15px 0 40px;}
    ul.viewlist li .product .buttons a:before{line-height:38px; position:absolute; top:0; left:15px;}
    ul.viewlist li .product .buttons a:hover:after{color:#fff!important;}
    ul.viewlist li .product .buttons a.nav-quickView:after{content:'Xem nhanh'; float:left; font-family:Roboto; color:#000; font-size:14px; font-weight:500;}
    ul.viewlist li .product .buttons a.nav-wishlist:after{content:'Lưu'; float:left; font-family:Roboto; color:#000; font-size:14px; font-weight:500;}
    ul.viewlist li .product .wrap-btn{opacity:1; position:absolute; visibility:initial; pointer-events:initial; top:initial; bottom:20px; right:20px; left:initial; width:160px; display:block!important}
    ul.viewlist li .product .wrap-btn a{width:100%!important; margin:0!important;}
    ul.viewlist li:first-child{box-shadow:none!important}
}


/* product info */

.product-info{width:100%; margin:0; padding:0; float:left; position:relative; height:100%;}
.product-info .row-head{width:100%; float:left; position:relative; border-bottom:1px solid rgba(0,0,0,.07); padding-bottom:20px; margin-bottom:20px; background:#fff;}
.product-info .row-head .nameProduct{margin:0 0 7px 0; font-size:22px; font-weight:500; display:block; color:#000; width:100%; float:left; padding-right:40px; line-height:30px;}
.product-info .row-head .rating{float:left; position:relative; text-align:center;}
.product-info .row-head .rating .rating-value{display:inline-block;}
.product-info .row-head .rating .total{display:inline-block; font-size:13px; font-weight:500; padding-left:5px; text-transform:uppercase}
.product-info .row-head .code{float:left; font-size:13px; font-weight:500; position:relative; margin-right:15px;}
.product-info .row-head .code:before{content:''; width:1px; height:12px; background:rgba(0,0,0,.15); position:absolute; top:5px; left:0;}
.product-info .row-head .code label{margin:1px 0 0 0; opacity:.6; padding-left:15px;}
.product-info .row-head .code label:after{content:':'; padding: 0 3px;}
.product-info .row-head .brands{float:left; font-size:13px; font-weight:500; position:relative; margin-right:15px;}
.product-info .row-head .brands a{color:var(--color2); font-weight:500;}
.product-info .row-head .brands label{margin:1px 0 0 0; opacity:.6; }
.product-info .row-head .brands label:after{content:':'; padding: 0 3px;}
.product-info .row-head .item{float:left; font-size:13px; font-weight:500; position:relative; margin-right:15px; padding-left:15px;}
.product-info .row-head .item:before{content:''; width:1px; height:12px; background:rgba(0,0,0,.15); position:absolute; top:5px; left:0;}
.product-info .row-head .item a{color:var(--color2); font-weight:500;}
.product-info .row-head .item label{margin:1px 0 0 0; opacity:.6; }
.product-info .row-head .item label:after{content:':'; padding: 0 3px;}

.product-info .row-body{position:relative; background:#fff; }
.product-info .row-body .sliderFor{width:100%; float:left; position:relative; margin-bottom:20px;}
.product-info .row-body .sliderFor .owl-item{position:relative;}
.product-info .row-body .sliderFor .owl-item:before{content:''; display:block; padding-bottom:100%; position:relative;}
.product-info .row-body .sliderFor .owl-item .item{width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden;}
.product-info .row-body .sliderFor .owl-item .item img{width:inherit; height:inherit; object-fit:cover; }
/*.product-info .row-body .sliderFor:before{font-family: "Font Awesome 5"; font-weight: 900; content: "\f002"; position:absolute; left:50%; top:50%; margin: -20px 0 0 -20px; z-index:3; font-size:16px; background:rgba(0,0,0,.3); width:40px; height:40px; text-align:center; line-height:40px; display:block; color:#fff; border-radius:5px; opacity:0; transition:.3s}
.product-info .row-body .sliderFor:hover:before{opacity:1;}*/

.product-info .row-body .sliderNav{width:330px;display:block; margin: 0 auto; clear:both;}
.product-info .row-body .sliderNav .owl-item{position:relative;}
.product-info .row-body .sliderNav .owl-item:after{content:''; display:block; padding-bottom:100%;}
.product-info .row-body .sliderNav .owl-item .item{width:calc(100% - 10px); height:calc(100% - 10px); padding:6px; position:absolute; top:5px; left:5px; overflow:hidden; border-radius:5px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); transition:.3s; display:flex; align-items:center; justify-content:center; cursor:pointer}
.product-info .row-body .sliderNav .owl-item .item img{max-width:100%; max-height:100%;}
.product-info .row-body .sliderNav .owl-item.current .item{box-shadow: 0 0 0 1px var(--color1)}
.product-info .row-body .percent{line-height:28px; height:28px; border-radius:5px; color:#fff; background:#2bbef9; padding: 0 12px; font-size:15px; font-weight:500; position:absolute; top:20px; left:20px; z-index:5;}
.product-info .row-body .percent:after{content:'đ'; font-weight:normal}
.product-info .row-body .price{width:100%; float:left; position:relative; text-align:left; margin:10px 0; z-index:4;}
.product-info .row-body .price .old{display:inline-block; margin: 0 0 0 10px; padding-right:11px; position:relative; font-weight:normal; font-size:18px; color:#7d7d7d}
.product-info .row-body .price .old:before{content:''; width:100%; height:1px; position:absolute; bottom:50%; margin-bottom:1px; left:0; background:#9c9c9c}
.product-info .row-body .price .old .unit{text-transform:lowercase; position:absolute; right:0; font-size:15px; top:1px; text-decoration:underline}
.product-info .row-body .price .new{display:inline-block; margin:0; padding-right:16px; position:relative; font-weight:bold; color:var(--color3); font-size:28px;}
.product-info .row-body .price .new .unit{text-transform:lowercase; position:absolute; right:0; font-size:21px; top:5px; text-decoration:underline;}
.product-info .row-body .price label{margin:0;}
.product-info .row-body .price .save{color:#000; font-weight:500; position:relative; font-size:15px; clear:left; display:table; padding-right:10px;}
.product-info .row-body .price .save:before{content:'Tiết kiệm: '; font-weight:normal; opacity:.7}
.product-info .row-body .price .save:after{content: '₫'; position:absolute; top:0; right:0; font-size:13px;}
.product-info .row-body .meta{width:100%; float:left; position:relative;}
.product-info .row-body .meta .unit{display:inline; line-height:27px; font-weight:500; margin-right:10px;  }
.product-info .row-body .meta .unit b{color:var(--color3); font-size:17px; padding-right:5px;}
.product-info .row-body .status{position:relative; float:left; padding: 0 10px; margin-right:10px; line-height:26px; height:26px; border-radius:13px; text-transform:uppercase; font-size:12px; font-weight:bold; }
.product-info .row-body .status.stocking{color:#04a94a; background:#e5f8ed}
.product-info .row-body .status.out-of-stock{color:var(--color3); background:#f7ebee;}
.product-info .row-body .linked{width:calc(100% + 10px); margin-left:-5px; margin-top:10px; float:left;}
.product-info .row-body .linked a{display:block; width:calc(33.3333333% - 10px); float:left; margin: 10px 5px 0 5px; padding: 8px 10px 5px 10px; text-align:center; background:rgba(0,0,0,.03); border-radius:5px; position:relative; }
.product-info .row-body .linked a .filter-name{display:block; position:relative;}
.product-info .row-body .linked a .filter-price{display:inline-block; position:relative;}
.product-info .row-body .linked a .filter-price b{font-size:16px; font-weight:500;}
.product-info .row-body .linked a .filter-price .unit{padding-left:3px; text-decoration:underline; text-transform:lowercase; font-size:13px; font-weight:500; margin-top:1px; float:right;}
.product-info .row-body .linked a.active{background:#e8f3ff; box-shadow: inset 0 0 0 1px var(--color2); border-radius:6px; cursor:default;}
.product-info .row-body .linked a.active:before{font-family: "Font Awesome 5"; font-weight: 900; content:"\f00c"; position:absolute; top:0; left:0; background:var(--color2); border-radius: 6px 0 6px 0; padding: 0 5px; font-size:12px; color:#fff;}
.product-info .row-body .product-option{width:100%; float:left; position:relative; margin-top:20px; display:block;}
.product-info .row-body .product-option label{width:100%; font-weight:bold; font-size:15px; margin:0;}
.product-info .row-body .product-option ul{width:calc(100% + 15px); margin:0 0 0 -15px; padding:0; float:left; list-style:none;}
.product-info .row-body .product-option ul li{float:left; margin: 10px 0 0 15px; position:relative;}
.product-info .row-body .product-option ul li a{display:block; line-height:36px; height:35px; text-decoration:none; background:rgba(0,0,0,.03); box-shadow: 0 0 0 1px rgba(0,0,0,.07); border-radius:5px; padding: 0 15px; font-weight:500; color:#000;}
.product-info .row-body .product-option ul li a.active{box-shadow:inset 0 0 0 1px var(--color2); color:var(--color2); background:#e8f3ff}
.product-info .row-body .wrap-btn{width:100%; float:left; position:relative;}
.product-info .row-body .info{width:100%; margin:30px 0 0 0; padding:0;float:left; line-height:24px;}
.product-info .row-body .panel-outOfStock{position:relative; width:100%; float:left; margin-top:20px; padding: 25px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 10px rgba(0,0,0,.05); border-radius:7px; overflow:hidden;}
.product-info .row-body .panel-outOfStock .line{height: .1875rem;width: 100%; display:block; background-position-x: -1.875rem; background-size: 7.25rem .1875rem; background-color:#fff;  background-image: repeating-linear-gradient(45deg,#6fa6d6,#6fa6d6 33px,transparent 0,transparent 41px,#f18d9b 0,#f18d9b 74px,transparent 0,transparent 82px); position:absolute; top:0; left:0;}
.product-info .row-body .panel-outOfStock h3{font-size:22px; font-weight:bold; color:var(--color3)}
.product-info .row-body .panel-outOfStock span{width:100%; float:left; margin-top:-5px;}
.product-info .row-body .panel-outOfStock ul{margin:0 0px; padding:0; list-style:none; clear:both; width:calc(100% - 105px); float:left;}
.product-info .row-body .panel-outOfStock ul li{padding: 0 0px; position:relative; width:100%; margin-top:15px;}
.product-info .row-body .panel-outOfStock ul li input[type='text']{width:100%;height:38px; border:1px solid rgba(0,0,0,.15); border-radius:5px; outline:none; padding: 0 10px; transition:.3s;}
.product-info .row-body .panel-outOfStock ul li input[type='text']:focus{border-color:var(--color2)}
.product-info .row-body .panel-outOfStock .nav-send{width:90px; height:90px; display:block; float:right; background:var(--color3); color:#fff; text-align:center; margin-top:15px; border-radius:6px; font-weight:500; font-size:15px; box-shadow: inset 0 0 rgba(0,0,0,0); transition:.3s;}
.product-info .row-body .panel-outOfStock .nav-send:hover{box-shadow:inset 0 90px rgba(0,0,0,.15)}
.product-info .row-body .panel-outOfStock .nav-send:before{font-family:"Font Awesome 5"; content:"\f1d8"; font-weight:900; font-size:24px; width:100%; text-align:center; display:block; padding-top:14px; opacity:.7 ; transition:.3s;}
.product-info .row-body .quantity-addCart{width:100%; float:left; position:relative; min-height:44px; padding-left: 150px; margin-top:30px;}
.product-info .row-body .quantity-addCart .quantity{width:130px; height:44px; position:absolute; top:0; left:0; padding: 0 44px;}
.product-info .row-body .quantity-addCart .quantity span{width:44px; height:44px; font-size:11px; display:flex; align-items:center; justify-content:center; border-radius:7px; cursor:pointer; position:absolute; top:0; background:rgba(0,0,0,.04); transition:.3s;}
.product-info .row-body .quantity-addCart .quantity span:hover{background:var(--btnColor2)}
.product-info .row-body .quantity-addCart .quantity .minus{left:0;}
.product-info .row-body .quantity-addCart .quantity .plus{right:0;}
.product-info .row-body .quantity-addCart .quantity input[type='text']{width:100%; height:44px; border:none; outline:none; text-align:center; font-weight:bold; font-size:15px;}
.product-info .row-body .quantity-addCart .btn-addtoCart{width:100%; height:44px; line-height:45px; background:var(--color2); border-radius:7px; font-weight:bold; color:#fff; text-align:center; display:block; transition:.3s; box-shadow: inset 0 0 rgba(0,0,0,0); text-transform:uppercase}
.product-info .row-body .quantity-addCart .btn-addtoCart:hover{box-shadow: inset 0 44px rgba(0,0,0,.15);}
.product-info .row-body .nav-wishlist{display:block; clear:left; margin-top:30px; float:left; line-height:34px; height:32px; border-radius:16px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); padding: 0 20px 0 20px; transition:.3s;}
.product-info .row-body .nav-wishlist i{font-size:16px; line-height:34px; float:left;}
.product-info .row-body .nav-wishlist span{text-transform:uppercase; font-weight:500; font-size:13px; margin-left:5px;}
.product-info .row-body .nav-wishlist:hover{color:var(--color2)}
.product-info .row-body .nav-wishlist.actve{color:var(--color2)}
.product-info .row-body .nav-wishlist.actve i{font-weight:900;}
.product-info .row-body ul.checklist{width:100%; margin:30px 0 0 0; padding:0; list-style:none; float:left;}
.product-info .row-body ul.checklist li{width:100%; margin:0; padding:0 0 0 30px; position:relative; display:flex; margin-top:8px;}
.product-info .row-body ul.checklist li:before{font-family:"Font Awesome 5"; content:"\f00c"; font-size:10px; position:absolute; top:-2px; left:0; font-weight:900; color:#008a0f; width:20px; height:20px; line-height:20px; text-align:center; border-radius:50%; box-shadow: 0 0 0 1px rgba(0,0,0,.1)}
/*.product-info .row-body ul.checklist li div:first-child:after{content:':'; padding: 0 3px;} */
.product-info .product_other{width:100%; float:left; position:relative; border-top:1px solid rgba(0,0,0,.07); margin-top:30px; padding-top:25px; } 
.product-info .product_other .rowItem{width:100%; margin:0; padding:0; list-style:none; font-size:13px;}
.product-info .product_other .rowItem label{margin:5px 0 0 0; opacity:.8; margin-right:5px;}
.product-info .product_other .rowItem label:after{content:':'; padding-left:2px;}
.product-info .product_other .rowItem a{text-decoration:none; color:#404144; font-weight:500; margin-left:5px; transition:.3s; margin-top:5px;}
.product-info .product_other .rowItem a:hover{color:var(--color1)}
.product-info .product_other .rowItem a:after{content:','}
.product-info .product_other .rowItem a:last-child:after{display:none;}

/* Cháy hàng */
.product-info .sold-out .status{display:block; margin-top:40px; position:relative; z-index:2; background:var(--color3); color:#fff; font-size:16px; font-weight:bold; text-transform:uppercase; letter-spacing:0px; border-radius:15px 15px 0 0; padding: 15px 15px 0 70px;}
.product-info .sold-out .status:after{content:''; width:70px; height:100px; position:absolute; left:-8px; bottom:-15px; background:url(fire-icon.svg) no-repeat center; background-size: auto 100%; } 
.product-info .sold-out .note-sold-out{background:var(--color3); width:100%; color:#fff; padding:5px 20px 15px 30px; border-radius:0 0 15px 40px;} 
.product-info .sold-out .panel-outOfStock{display:none!important;}
.product-info .sold-out .quantity-addCart{display:block!important;}

/* Hết hàng */
.product-info .out-of-stock .meta .status{display:none!important}
.product-info .out-of-stock .note-sold-out,
.product-info .out-of-stock .quantity-addCart{display:none;} 

/* Ngừng kinh doanh */
.product-info .stop-business .meta{padding-top:65px;}
.product-info .stop-business .meta .status{position:absolute; top:15px; left:0; font-size:24px; color:var(--color3); text-transform:uppercase; font-weight:bold; }
.product-info .stop-business .price,
.product-info .stop-business .panel-outOfStock,
.product-info .stop-business .quantity-addCart,
.product-info .stop-business .note-sold-out{display:none!important}

@media (max-width:767px) {
    .title-product{position:relative!important; z-index:1!important; padding: 0 15px; border-bottom:none!important; margin:0!important; padding:0 15px;}
    .title-product .nameProduct{font-size:18px!important; font-weight:bold!important; line-height:24px!important; margin-bottom:15px!important;}
    .product-info .row-head .code{margin-left:0; margin-top:5px; clear:both;}
    .product-info .row-head .code:before{display:none;}
    .product-info .row-head .code label{padding-left:0;}
    .product-info .row-body ul.checklist{margin-top:20px;}
    .product-info .product_other{width:calc(100% + 30px); margin: 20px 0 0 -15px; border-top:8px solid #e9eef3; padding: 15px;}
    .product-info .row-body .linked a{width:calc(50% - 10px)}
}