html{}
body{ float:left; background:var(--color-bg); background:#fff; width:100%; font-family: "Momo Trust Sans", sans-serif; font-weight:400; font-size:15px; color:#000; margin:initial!important; overflow-x:hidden; overflow-y:auto }
#clock{float:left; font-size:12px; color:#777; position:relative; border-left: 1px dotted #c6c6c6; padding-left:15px; margin-left:15px; margin-top:5px;}

@media (min-width: 1440px){}

:root {
    --color1: #05a155;
    --color2: #ff9800;
    --color3: #d40f00;
    --color-border: #ececec;
    --btnColor1: #0064d6;
    --btnColor2: #ffc107;
}

@media (max-width:767px) {
    body{padding-top:65px;}
    body.extend-header{padding-top:110px}
   /* #wrapper-page{position:fixed; width:100%; height:100%; top:0; left:0; overflow-y:auto}*/
}

/* init */

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

.icon-contact{position:fixed; right:10px; bottom:10px; z-index:30; margin:0; padding:0; list-style:none;}
.icon-contact li{width:135px; 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); 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(--color1)}
.icon-contact a:hover b{color:var(--color1)}

@media (max-width: 767px) {
    .icon-contact{bottom:65px; display:none;} 
    .icon-contact li{width:44px; height:44px;}
    .icon-contact li .icon{margin-top:-15px; left:6px;}
    .icon-contact li .icon svg{width:30px; height:30px;}
    .icon-contact a{height:44px;}
    .icon-contact a span{display:none;}
    .icon-contact a .zaloOA svg{margin-top:-5px;}
    .icon-contact a .zaloOA:after{bottom:-4px;}
}

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

/******************************************************************/
/*                         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; }

/* Modal notifyAddToCart */
#myModal-notifyAddToCart .modal-content{padding:10px;}
#myModal-notifyAddToCart .label-success{width:100%; float:left; position:relative; line-height:32px; padding-left:42px; font-size:17px; font-weight:500;}
#myModal-notifyAddToCart .label-success:before{font-family: "Font Awesome 5"; font-weight: 300; content: "\f336"; font-size:32px; color:var(--color1); position:absolute; top:0; left:0;}
#myModal-notifyAddToCart .product-ele{width:100%; float:left; position:relative; min-height:150px; display:flex; margin-top:-10px; 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; }
#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:16px; font-weight:500; color:#000;}
#myModal-notifyAddToCart .product-ele .info .price{width:100%; float:left; position:relative; text-align:left; margin:10px 0; z-index:4;}
#myModal-notifyAddToCart .product-ele .info .price:before{content:'1'; font-weight:bold; font-size:16px; float:left;}
#myModal-notifyAddToCart .product-ele .info .price:after{content:'X'; float:left; font-size:14px; padding: 0 10px; opacity:.7; margin-top:2px;}
#myModal-notifyAddToCart .product-ele .info .price .old{display:none; height:17px; margin: 0 0 0 10px; padding-right:9px; position:relative; font-weight:normal; font-size:15px; color:#7d7d7d; line-height:initial;}
#myModal-notifyAddToCart .product-ele .info .price .old:before{content:''; width:100%; height:1px; position:absolute; top:50%; margin-top:0px; left:0; background:#9c9c9c; margin-top:-1px;}
#myModal-notifyAddToCart .product-ele .info .price .old .unit{position:absolute; right:0; top:1px; text-decoration:underline; text-transform:lowercase; font-size:13px;}
#myModal-notifyAddToCart .product-ele .info .new{display:inline-block; margin:0; padding-right:11px; position:relative; font-weight:bold; color:var(--color3); font-size:16px;}
#myModal-notifyAddToCart .product-ele .info .new .unit{position:absolute; top:1px; right:0; text-transform:lowercase; text-decoration:underline; font-size:14px;}
#myModal-notifyAddToCart .product-ele .info .nav-goCart{display:block; clear:left; float:left; line-height:41px; height:40px; background:var(--color2); 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)}


/* owl.carousel */
.owl-theme .owl-controls .owl-buttons div{width:40px; height:40px; margin:0; padding:0; box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 2px 7px rgba(0,0,0,.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:900; font-size:14px; 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(--color1)!important; box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 2px 15px rgba(0,0,0,.07);}
.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:16px!important; height:16px!important; margin:0 2px!important; background:none!important; position:relative; }
.owl-theme .owl-controls .owl-page span:before{content:''; width:6px; height:6px; margin: -3px 0 0 -3px; 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:16px; height:16px; border-radius:50%; background:rgba(0,0,0,.5); position:absolute; top:0; left:0; z-index:1; opacity:0; transition:.3s;}
.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;}


/* Header */
header{width:100%; float:left; padding: 0; background:#fff; }
header.fixed{z-index:35; position:relative;}
header .head-top{width:100%; float:left; position:relative;  height:40px; box-shadow: 0 1px rgba(0,0,0,.07)}
header .head-top a{margin-right:20px; font-weight:400; height:40px; line-height:40px; position:relative; display:block; transition:.3s; color:#000; float:left; font-size:14px;}
header .head-top a:hover{color:var(--color1); font-weight:500;}
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; opacity:1; transition:.3s; color:var(--color1)}
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; line-height:40px; }
header .head-top .col-contact label{margin:0; color:#000; opacity:.7; float:left; font-size:13px; }
header .head-top .col-contact label:after{content:':'; padding: 0 0 0 5px; opacity:.5; margin-right:10px}
header .head-top .social{float:right; position:relative;}
header .head-top .social .title{font-size:13px; float:left; opacity:.7; line-height:40px; padding-right:10px;}
header .head-top .social ul{margin:0; padding:0; list-style:none; display:flex;}
header .head-top .social ul li{display:flex; position:relative; width:40px;}
header .head-top .social ul li a{display:block; width:40px; height:40px; position:relative; float:left; font-size:16px; text-align:center; margin:0; padding:0;}

@media (max-width:767px) {
}

@media (min-width:768px) and (max-width:991px) {
}

@media (min-width:992px) and (max-width:1199px) {
}


header .head-main{width:100%; float:left; position:relative; padding-bottom:60px;}
header .head-main .col-main{position:relative; width:100%; float:left; display:table; height:120px;}
header .head-main .col-main .col-logo{display:table-cell; text-align:left; vertical-align:middle; padding-right:20px; width:300px;}  
header .head-main .col-main .col-logo a.logo{outline:none!important; position:relative; display:block; float:left; }
header .head-main .col-main .col-logo a.logo img{height:53px;}
header .head-main .col-main .col-page{display:table-cell; vertical-align:middle; position:relative; padding-right:30px; }
header .head-main .col-main .col-page ul{margin:0; padding:0; list-style:none; list-style:none; display:inline-block;}
header .head-main .col-main .col-page ul li{position:relative; padding:35px 20px 0 20px; float:left; }
header .head-main .col-main .col-page ul li:before{content:''; width:1px; height:12px; background:rgba(0,0,0,.1); position:absolute; right:0; bottom:5px;}
header .head-main .col-main .col-page ul li:first-child{padding-left:0;}
header .head-main .col-main .col-page ul li:last-child{padding-right:0;}
header .head-main .col-main .col-page ul li:last-child:before{display:none;}
header .head-main .col-main .col-page ul li a{text-decoration:none; text-transform:uppercase; font-weight:bold; color:#000; position:relative; font-size:15px; transition:.3s; white-space:nowrap}
header .head-main .col-main .col-page ul li a:hover{color:var(--color1)}
header .head-main .col-main .col-page ul li a .icon{position:absolute; bottom:100%; left:100%; margin-bottom:5px; margin-left:-5px; opacity:.4; transition:.3s; }
header .head-main .col-main .col-page ul li a:hover .icon{opacity:1;}
header .head-main .col-main .col-search{display:table-cell; vertical-align:middle; position:relative; z-index:30; width:500px;} 
header .head-main .col-main .col-right{display:table-cell; vertical-align:middle; position:relative; text-align:right; padding-left:0px; }
header .head-main .col-main .col-right .hotline{display:block; float:right; padding: 0 0 0 55px; height:42px; color:#000; position:relative; }
header .head-main .col-main .col-right .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;}
header .head-main .col-main .col-right .hotline .icon svg{height:24px;}
header .head-main .col-main .col-right .hotline a.main-link{display:block; font-size:19px; width:100%; float:left; margin-top:-2px; color:var(--color3); font-weight:bold;}
header .head-main .col-main .col-right .hotline a.sub-link{clear:both; font-size:17px; margin-top:-6px; float:left; font-weight:900; letter-spacing:1px;}

@media (max-width:767px) {
    header .head-main .col-main{display:block; height:initial; padding-bottom:0;}
    header .head-main .col-main .col-logo{display:block; position:absolute; top:15px; left:0px; width:35px; height:35px;padding:0; float:left;}
    header .head-main .col-main .col-logo a.logo{float:left; margin:0 0 0 0; width:100%; height:100%; display:block; border-radius:6px; padding:5px; padding-left:7px;  overflow:hidden; background:#fff;}
    header .head-main .col-main .col-search{width:calc(100% - 135px); float:left; position:relative; left:45px; margin-top:15px;}
    header .head-main .col-main .col-right{display:block; width:0; height:0; position:initial;}
    header .head-main .col-main .col-right .hotline{display:none;}
    

    .extend-header header .col-main .col-logo{width:initial!important; height:32px!important}
    .extend-header header .col-main .col-logo a.logo{box-shadow:none!important; padding:0!important; background:none!important;}
    .extend-header header .col-main .col-search{width:100%!important; float:left; position:relative; left:0px!important; margin-top:60px!important;}
}

@media (min-width:768px) and (max-width:991px) {
    header .head-main .col-main{height:initial!important; padding-top:25px; padding-bottom:55px;}
    header .head-main .col-main .col-logo{text-align:center; display:block; width:250px; padding:0; }
    header .head-main .col-main .col-search{display:block; width:305px; float:left; position:absolute; right:195px; top:25px;   }
    header .head-main .col-main .col-right .hotline{display:none;}
    
}


/* Cart */
.wrap-cart{}
@media (min-width:768px) {
    .wrap-cart{position:relative; float:right; margin-left:20px; z-index:10;  }
    .wrap-cart .nav-cart{width:44px; height:44px; margin:3px 0; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#000; position:relative; box-shadow: inset 0 0 0 2px rgba(0,0,0,.1); transition:.3s; background:#fff;}
    .wrap-cart .nav-cart i{font-size:16px; position:relative; z-index:2;}
    .wrap-cart .nav-cart b{width:22px; height:22px; line-height:18px; margin-left:-12px; border-radius:11px; padding: 2px 0 0 1px; background:var(--color3); color:#fff; text-align:center; font-weight:bold; font-size:11px; position:absolute; top:-10px; left:100%; display:block; z-index:3; text-align:center; }
    .wrap-cart .nav-cart span{ position:absolute; bottom:100%; width:80px; margin-left:-40px; text-align:center; left:50%; color:#fff; font-size:13px; z-index:5; background:rgba(0,0,0,.75); border-radius:5px; line-height:26px; height:26px; display:block; transition:.0s; opacity:0; visibility:hidden; z-index:2; transition:.1s; }
    .wrap-cart .nav-cart span:after{content:''; margin-left:-7px; border-top:5px solid rgba(0,0,0,.75); border-left:7px solid transparent; border-right:7px solid transparent; position:absolute; left:50%; top:100%;}
    .wrap-cart:hover .nav-cart span{opacity:1; visibility:initial; margin-bottom:10px;}
    .wrap-cart .nav-cart:hover{color:#fff; box-shadow:none; background:var(--color1)}
    .wrap-cart .nav-cart:hover:before{background:var(--color1)}
    .wrap-cart.fixed{position:fixed; bottom:405px; right:10px; z-index:35;}
    .wrap-cart.fixed .nav-cart b{margin:0; top:0px; right:0px; left:initial; width:18px; height:18px; border-radius:0 7px 0 7px; line-height:18px; padding:0; }
    .wrap-cart.fixed .nav-cart span{width:initial; margin:0 0 -13px 0 ; left:initial; right:100%; float:left; white-space:nowrap; padding: 0 10px; bottom:50%;}
    .wrap-cart.fixed .nav-cart span:after{content:''; margin:-7px 0 0 0; top:50%; border:none; border-left:5px solid rgba(0,0,0,.75); border-top:7px solid transparent; border-bottom:7px solid transparent; position:absolute; left:100%; }
    .wrap-cart.fixed:hover .nav-cart span{margin-right: 7px;}
}

@media (max-width:767px) {
    .wrap-cart{position:absolute; top:15px; right:45px; width:35px; height:35px;}
    .nav-cart{width:35px; height:35px; position:relative; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.15) url(icon/cart-24.png) no-repeat center; border-radius:5px; text-decoration:none; background:rgba(255,255,255,.15); color:#fff;}
    .nav-cart 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;}
    .nav-cart svg{position:relative; z-index:2; }
    .nav-cart .number{display:none;}
}

/* wishlist */
.wrap-wishlist{}

@media (min-width:768px) {
    .wrap-wishlist{position:relative; float:right; margin-left:20px; z-index:10;}
    .wrap-wishlist .wishlist{width:44px; height:44px; margin:3px 0; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#000; position:relative; box-shadow: inset 0 0 0 2px rgba(0,0,0,.1); transition:.3s; background:#fff; }
    .wrap-wishlist .wishlist i{font-size:16px;}
    .wrap-wishlist .wishlist b{width:22px; height:22px; line-height:18px; margin-left:-12px; border-radius:11px; padding: 2px 0 0 1px; background:var(--color2); color:#fff; text-align:center; font-weight:bold; font-size:11px; position:absolute; top:-10px; left:100%; display:block; z-index:3; text-align:center; }
    .wrap-wishlist .wishlist:hover{background:var(--color1); color:#fff; box-shadow:none;}
    .wrap-wishlist .wishlist span{ position:absolute; bottom:100%; width:140px; margin-left:-70px; text-align:center; left:50%; color:#fff; font-size:13px; z-index:5; background:rgba(0,0,0,.75); border-radius:5px; line-height:26px; height:26px; display:block; transition:.0s; opacity:0; visibility:hidden; z-index:2; transition:.1s; }
    .wrap-wishlist .wishlist span:after{content:''; margin-left:-7px; border-top:5px solid rgba(0,0,0,.75); border-left:7px solid transparent; border-right:7px solid transparent; position:absolute; left:50%; top:100%;}
    .wrap-wishlist .wishlist:hover span{opacity:1; visibility:initial; margin-bottom:10px;}
    .wrap-wishlist.fixed{position:fixed; bottom:351px; right:10px; z-index:35; margin:0;}
    .wrap-wishlist.fixed .wishlist b{margin:0; top:0px; right:0px; left:initial; width:18px; height:18px; border-radius:0 7px 0 7px; line-height:18px; padding:0; }
    .wrap-wishlist.fixed .wishlist span{width:initial; margin:0 0 -13px 0 ; left:initial; right:100%; float:left; white-space:nowrap; padding: 0 10px; bottom:50%;}
    .wrap-wishlist.fixed .wishlist span:after{content:''; margin:-7px 0 0 0; top:50%; border:none; border-left:5px solid rgba(0,0,0,.75); border-top:7px solid transparent; border-bottom:7px solid transparent; position:absolute; left:100%; }
    .wrap-wishlist.fixed:hover .wishlist span{margin-right: 7px;}
}
@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;}
}

/* Hotline */
.wrap-hotline{display:block; float:right;color:#000; position:relative; padding-left:60px; height:50px;}
.wrap-hotline .icon{width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0px; font-size:16px;}
.wrap-hotline .icon:before{content:''; width:100%; height:100%; background:var(--color1); border-radius:50%; position:absolute; top:0; left:0; opacity:.07}
.wrap-hotline .icon i{position:relative; z-index:2; color:var(--color1); font-size:24px;}
.wrap-hotline label{margin:0; padding:2px 0 0 0; display:block; font-size:12px; text-transform:uppercase; font-weight:500; text-align:left;}
.wrap-hotline b{font-size:20px; color:var(--color3); font-weight:600; width:100%; float:left; margin-top:-2px;}

/* account*/
.wrap-account{float:right; position:relative; height:44px; padding-left:20px; margin:3px 0 0 20px; border-left:1px solid rgba(0,0,0,.1)}
.wrap-account .acc-nav{font-size:15px; font-weight:500; margin-top:12px; float:left; transition:.3s;}
.wrap-account .acc-nav:hover{color:var(--color1)}
.wrap-account .nav-register:before{content:'/'; float:left; font-weight:300; padding: 0 2px;color:rgba(0,0,0,.5)}

.wrap-account .drop-account{float:left; position:relative; padding-top:12px;}
.wrap-account .drop-account .nav-drop{padding-left:36px; position:relative; padding-right:15px;}
.wrap-account .drop-account .nav-drop span{font-size:15px; font-weight:500;}
.wrap-account .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;}
.wrap-account .drop-account .nav-drop .avatar img{max-width:inherit!important; max-height:inherit; object-fit:cover;}
.wrap-account .drop-account .nav-drop:after{font-family:"Font Awesome 5"; font-weight:900; content:"\f0d7"; font-size:10px; position:absolute; right:0px; top:2px;}
.wrap-account .drop-account .dropdown-menu{left:initial!important; right:-20px; 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:10px;box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 3px 10px rgba(0, 0, 0, .07); transition:.3s; opacity:0; visibility:hidden;}
.wrap-account .drop-account .dropdown-menu li{width:100%; float:left; position:relative;}
.wrap-account .drop-account .dropdown-menu li:first-child{border-bottom:1px solid rgba(0,0,0,.07); padding-bottom:5px; margin-bottom:10px;}
.wrap-account .drop-account .dropdown-menu li:last-child{border-top:1px solid rgba(0,0,0,.07); padding-top:5px; margin-top:10px;}
.wrap-account .drop-account .dropdown-menu li a{color:rgba(0,0,0,1); font-size:14px; font-weight:400; line-height:initial; height:initial; padding: 10px 0px 10px 30px; display:block; float:left; margin:0; white-space:nowrap; transition:.3s; position:relative; width:100%; float:left; }
.wrap-account .drop-account .dropdown-menu li a i{float:left; height:initial; font-size:16px; position:absolute; top:10px; left:0px; opacity:.7; transition:.3s; }
.wrap-account .drop-account .dropdown-menu li a:hover{color:var(--color1)}
.wrap-account .drop-account .dropdown-menu li a:hover i{opacity:1;}
.wrap-account .drop-account .dropdown-menu li a:hover i:before{font-weight:900}
.wrap-account .drop-account .dropdown-menu li a.nav-notify b{float:right; font-size:13px; font-weight:500; color:var(--color3)}
.wrap-account .drop-account.show .dropdown-menu{margin-top:15px; pointer-events:initial; opacity:1; visibility:initial;}

/*****************************************************************/
/*                      Category Products                        */
/*****************************************************************/
@media (min-width:768px) {
    .drop-category .dropdown-menu{display:block; width:280px; z-index:3; border:none; box-shadow: none; padding:0; left:0px; transform:initial!important; top:100%!important; margin-top:20px; opacity:0; visibility:hidden; transition:.3s; background:none;}
    .drop-category.show .dropdown-menu{opacity:1; visibility:initial; margin-top:10px; }
    .drop-category .dropdown-menu img{display:none;}
    .drop-category .dropdown-menu>ul{margin:0; padding:10px 0; list-style:none; background:#fff; width:100%; float:left; position:relative; box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 3px 10px rgba(0,0,0,.07); border-radius:12px; box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 3px 10px rgba(0,0,0,.07); border-radius:12px;}
    .drop-category .dropdown-menu>ul>li{width:100%; float:left; padding: 0 20px; position:relative;}
    .drop-category .dropdown-menu>ul>li>a{display:block; color:rgba(0,0,0,.7); 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(--color1); 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% + 0px); 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>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{}
    .drop-category>.dropdown-menu>ul>li:hover>a>.icon>svg{opacity:1}
    .drop-category>.dropdown-menu>ul>li>ol{margin:0; padding:10px 0; list-style:none; width:250px; float:left; background:#fff; box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 3px 10px rgba(0,0,0,.07); border-radius:12px; position:absolute; top:0px; left:100%; transition:.3s; opacity:0; visibility:hidden; }
    .drop-category>.dropdown-menu>ul>li>ol>li{width:100%; float:left; padding: 0 20px; position:relative;}
    .drop-category>.dropdown-menu>ul>li>ol>li>a{display:block; color:rgba(0,0,0,.7); 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; transition:.3s;}
    .drop-category>.dropdown-menu>ul>li>ol>li>a:hover{color:var(--color1)}
    .drop-category>.dropdown-menu>ul>li>ol>li:last-child>a{border-bottom:none;}
    .drop-category>.dropdown-menu>ul>li:hover>ol{opacity:1; visibility:initial; top:-10px;}
}

@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; top:100%; z-index:20; margin-top:0px;}
    .drop-category .nav-drop{height:45px; width:280px; padding:0px; font-size:14px; display:block; position:relative; text-align:left; padding-left:55px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); box-shadow:none; border-radius:23px; background:var(--color1)}
    .drop-category .nav-drop:after{font-family:"Font Awesome 5"; content:"\f107"; position:absolute; top:0; right:20px; color:#fff; line-height:45px; font-size:16px; white-space:nowrap; font-weight:400; text-transform:uppercase; transition:.3s;}
    .drop-category .nav-drop span{width: 8px; height:2px; background: #fff; display:block; position:absolute; top:50%; left:25px; margin-top:-2px; }
    .drop-category .nav-drop span:before{content:''; width:200%; height:2px; background:#fff; position:absolute; top:-6px; left:0; }
    .drop-category .nav-drop span:after{content:''; width:200%; height:2px; background:#fff; position:absolute; bottom:-6px; left:0;}
    .drop-category .nav-drop label{text-transform:uppercase; line-height:46px; margin:0; font-weight:bold; color:#fff; cursor:pointer; position:relative; font-size:14px;}
    .drop-category.show .nav-drop:after{transform:rotate(-180deg)}
}



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) {
 
    ol.product-propose{display:none;}
}

@media (min-width:992px) and (max-width:1199px) {
  
    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) {
 
    ol.product-propose li{width:calc(25% - 10px)}
    ol.product-propose li:nth-child(n+5){display:none;}
}

@media (min-width:1440px) {
   
    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:26px; height:26px; margin-top:-13px; background-size:100% 100%; background-position: center;background-repeat:no-repeat; position:absolute; top:50%; left:0;}
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;}
    
}

@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;}
}


/* Search */

.bg-mainSearchOverlay{background:#28323a!important; opacity:.5!important; position:fixed; width:100%; height:100%; z-index:18; top:0; left:0;}
@media (min-width:768px) {
    .swap-search{ position:relative; width:100%; z-index:15; transition:.3s;border-left:1px solid rgba(255,255,255,.15)}
    .swap-search .search-bnt{width:40px; height:40px; color:#000; font-size:16px; text-align:center; line-height:40px; border-radius:5px; display:block; text-decoration:none; transition:.3s;position:absolute; top:5px; right:5px; z-index:5; background:var(--color1); color:#fff; }
    .swap-search .textbox{position:relative; float:left;  width:100%;padding: 0 55px 0 20px; font-weight:normal; border:none; font-size:15px; transition:.3s; background:rgba(0,0,0,.03); height:50px; transition:.3s; z-index:1;  border-radius:7px; color:rgba(0,0,0,.75)}
    .swap-search .textbox:focus{font-style:normal; outline:none;}
    .mainsearch-open{z-index:20; position:relative;}
}

@media (max-width:767px) {
    .swap-search{width:100%; float:left; position:relative; margin-top:0px;}
    .swap-search .textbox{width:100%; background:#fff; border-radius:5px; height:35px; border:none; padding: 0 40px 0 10px; outline:none;}
    .swap-search .search-bnt{height:100%; position:absolute; top:0; right:0; padding: 0 10px; display:flex; align-items:center; justify-content:center; font-size:14px; color:#000; font-size:15px; color:#000;}
    
}



/* main search */
.ui-autocomplete{display:none!important}
.searchResult-panel{width:100%; float:left; position:absolute; top:55px; left:0;   display:block;}
.searchResult-panel .autocomplete-panel{width:100%; float:left; position:relative; background:#fff; padding:20px; display:block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 3px 10px rgba(0, 0, 0, .07); border-radius: 10px;}
.searchResult-panel .autocomplete-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)}
.searchResult-panel .autocomplete-panel .lab-key b{color:var(--color3); font-weight:bold; font-size:16px;}
.searchResult-panel .autocomplete-panel ul{margin:0; padding:0; list-style:none; width:100%; float:left; position:relative; max-height:400px; overflow-y:auto}
.searchResult-panel .autocomplete-panel ul li{width:100%; float:left; position:relative; min-height:90px; padding: 10px 0 10px 85px; display:flex; align-items:center; border-top:1px solid rgba(0,0,0,.07); }
.searchResult-panel .autocomplete-panel ul li:first-child{border:none;}
.searchResult-panel .autocomplete-panel ul li a{width:100%; height:100%; float:left; display:block; position:absolute; top:0; left:0; z-index:3; }
.searchResult-panel .autocomplete-panel ul li .inner{display:block; width:100%; float:left;}
.searchResult-panel .autocomplete-panel ul li .wrap-img{width:70px; height:70px; position:absolute; top:10px; left:0; overflow:hidden; border-radius:5px;}
.searchResult-panel .autocomplete-panel ul li .wrap-img img{width:inherit; height:inherit; object-fit:cover;}
.searchResult-panel .autocomplete-panel ul li h4{display:block; width:100%; margin:0; padding:0; font-size:16px; font-weight:normal; transition:.3s;}
.searchResult-panel .autocomplete-panel ul li:hover h4{color:var(--color2)}
.searchResult-panel .autocomplete-panel ul li .wrap-price{width:100%; float:left; position:relative; padding-top:5px;}
.searchResult-panel .autocomplete-panel ul li .wrap-price:before{content:'Giá:'; opacity:.5}
.searchResult-panel .autocomplete-panel ul li .wrap-price b{font-weight:bold; color:var(--color3); font-weight:bold; font-size:17px; position:relative; padding-right:12px; margin-left:15px;}
.searchResult-panel .autocomplete-panel ul li .wrap-price b:after{content:'đ'; position:absolute; top:-3px; right:0; font-size:14px; text-decoration:underline}
.searchResult-panel .autocomplete-panel ul li .wrap-price .compare{font-size:15px; font-weight:normal; color:rgba(0,0,0,.75); padding-right:10px;}
.searchResult-panel .autocomplete-panel ul li .wrap-price .compare:after{font-size:13px;}
.searchResult-panel .autocomplete-panel ul li .wrap-price .compare:before{content:''; width:100%; height:1px; background:#7c7c7c; top:50%; left:0; position:absolute; margin-top:-1px; z-index:3;}
.searchResult-panel .autocomplete-panel ul li.no-result{padding:10px; display:block; min-height:initial; color:var(--color3); font-size:15px;}
.searchResult-panel .autocomplete-panel .nav-viewAll{width:100%; float:left; position:relative; padding:0 15px; line-height:44px; background:var(--color3); border-radius:5px; text-align:center; color:#fff; font-weight:500; margin-top:10px; transition:.3s; box-shadow:inset 0 0 rgba(0,0,0,0)}
.searchResult-panel .autocomplete-panel .nav-viewAll:hover{box-shadow:inset 0 44px rgba(0,0,0,.1)}

.searchResult-panel .searchSuggest-panel{width:100%; float:left; position:relative; padding:0 20px 15px 20px; display:none!important}
.searchResult-panel .searchSuggest-panel .groupSuggest{width:100%; float:left; position:relative; margin:20px 0 10px;}
.searchResult-panel .searchSuggest-panel .groupSuggest .title-group{width:100%; float:left; position:relative;}
.searchResult-panel .searchSuggest-panel .groupSuggest .title-group:before{font-family: "Font Awesome 5"; font-weight: 900; content: "\f78a"; font-size:16px; color:var(--color3); float:left; margin-right:10px;}
.searchResult-panel .searchSuggest-panel .groupSuggest .title-group span{float:left; position:relative; font-weight:bold; color:#000; font-size:17px; }
.searchResult-panel .searchSuggest-panel .groupSuggest .title-group .nav-all{float:right; color:#000; position:relative; padding-right:25px; transition:.3s; font-weight:500;}
.searchResult-panel .searchSuggest-panel .groupSuggest .title-group .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;}
.searchResult-panel .searchSuggest-panel .groupSuggest .title-group .nav-all:hover{color:var(--color2)}
.searchResult-panel .searchSuggest-panel .groupSuggest .title-group .nav-dete{float:right; text-decoration:none; color:rgba(0,0,0,.75); font-size:13px; font-weight:500;}
.searchResult-panel .searchSuggest-panel .groupSuggest .title-group .nav-dete:hover{color:var(--color3)}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.link{width:calc(100% + 10px); margin: 0 0 0 -5px; float:left; position:relative; list-style:none; padding:0;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.link li{float:left; padding: 0 5px; float:left; margin-top:10px;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.link li a{text-decoration:none; padding: 0 10px; line-height:30px; color:#000; background:rgba(0,0,0,.03); border-radius:15px; display:block; transition:.3s;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.link li a:hover{background:var(--color1); color:#fff;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.productSuggest{width:calc(100% + 6px); margin: 0 0 0 -3px; float:left; position:relative; list-style:none; padding:0;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.productSuggest li{width:33.333333333%; padding: 0 3px; margin-top:6px; float:left;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.productSuggest li a{width:100%; height: 48px; padding: 0 8px 0 50px; float:left; position:relative; display:flex; align-items:center; text-decoration:none;background:rgba(0,0,0,.03); color:#000; transition:.3s; border-radius:5px;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.productSuggest li a:hover{background:var(--color1); color:#fff;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.productSuggest li a img{height:32px; position:absolute; top:8px; left:8px; border-radius:3px;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.productSuggest li a span{font-size:14px; line-height:18px; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; white-space: normal; overflow: hidden;  text-overflow: ellipsis;    display: -webkit-box;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.catalogSuggest{width:calc(100% + 10px); margin: 0 0 0 -5px; float:left; position:relative; list-style:none; padding:0;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.catalogSuggest li{float:left; padding: 0 5px; float:left; margin-top:10px;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.catalogSuggest li a{text-decoration:none; padding: 0 10px; line-height:30px; color:#000; background:rgba(0,0,0,.03); border-radius:15px; display:block; transition:.3s;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.catalogSuggest li a:before{font-family: "Font Awesome 5"; width:18px; font-weight: 900; content: "\f07b"; font-size:16px; color:var(--color2); margin-right:8px;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.catalogSuggest li a:hover{background:var(--color1); color:#fff;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.catalogSuggest li a:hover:before{color:#fff; content: "\f07c";}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.brand{width:calc(100% + 10px); margin: 0 0 0 -5px; float:left; position:relative; list-style:none; padding:0;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.brand li{float:left; padding: 0 5px; float:left; margin-top:10px; width:20%;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.brand li a{text-decoration:none; height:50px; padding: 0 10px; line-height:30px; color:#000; padding: 5px; display:block; transition:.3s; display:flex; align-items:center; justify-content:center; box-shadow: 0 0 0 1px rgba(0,0,0,.07); border-radius:5px;}
.searchResult-panel .searchSuggest-panel .groupSuggest ul.brand li a img{max-height:100%; max-width:100%;}
.bg-overlay{width:100%; height:100%; position:fixed; top:0; left:0; background:#000; opacity:.5; z-index:24;}

@media (max-width:767px){
    
    .searchResult-panel{width:100%; position:fixed; top:65px; border-radius: 0 0 10px 10px;}
    .extend-header .searchResult-panel{top:110px;} 
    .searchResult-panel .searchSuggest-panel .groupSuggest ul.productSuggest li{width:50%;}
}

@media (min-width:768px) and (max-width:991px) {
    .searchResult-panel{width:690px; left:50%; margin-left:-375px;}
}

@media (min-width:1440px){
   
}


ul.nav-menu{margin:0; padding:0; list-style:none;}
ul.nav-menu li{}


.sub-mainmenu{width:calc(100% - 300px); position:absolute; right:0px; top:100%; 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; color:#000; line-height:45px; height:45px; transition:.3s; font-size:16px; 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(--color1)!important}
.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(--color1)}
.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(--color1)}
    .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) {

    
}

/* sitemap */
.wrap-sitemap{width:100%; float:left; position:relative; margin:0px 0;}
.wrap-sitemap .col-sitemap{position:relative; padding:0 0px;  -ms-flex: 0 0 calc(100% - 30px);  flex: 0 0 calc(100% - 30px);    max-width: calc(100% - 30px); margin: 0 15px 0 15px;}
.wrap-sitemap ul{list-style:none; margin:0; padding:0; position:relative; float:left; }
.wrap-sitemap ul li{float:left; position:relative;}
.wrap-sitemap ul li:after{font-family: "Font Awesome 5"; font-weight:300; content: "\f105"; font-size:16px; float:right; line-height:50px; padding:0 8px; color:rgba(0,0,0,.5)}
.wrap-sitemap ul li:last-child:after{display:none;}
.wrap-sitemap ul li a{text-decoration:none; color:rgba(0,0,0,.7); font-size:13px; margin:0; padding:0; line-height:50px; font-weight:500;}
.wrap-sitemap ul li h4{color:#000; font-size:13px; margin:0; padding:0; line-height:50px; font-weight:500; float:left;}
.wrap-sitemap .title-page{ line-height:60px; font-size:17px; text-transform:uppercase; font-weight:bold; margin:0; display:none;}
.wrap-sitemap .titleSub-page{height:60px; padding-top:7px;  }
.wrap-sitemap .titleSub-page span{display:block; padding-bottom:3px;}
.wrap-sitemap .titleSub-page h3{font-size:17px; text-transform:uppercase; font-weight:bold; display:block; margin:0;}

@media (max-width:767px){
    .wrap-sitemap{display:none;}
}


/******************************************************************/
/*                           Content                              */
/******************************************************************/
.content-page{width:100%; float:left; position:relative;}
.content-page .container{position:relative;clear:both;}
.content-page:after{background-image: linear-gradient(rgba(0,0,0,.03), rgba(0,0,0,0)); box-shadow: inset 0 1px rgba(0,0,0,.02); width:100%; height:3px; position:absolute; top:0; left:0; z-index:1; }

@media (max-width:767px) {
    .content-page{overflow:hidden; padding-bottom:85px;}
    .content-page:after{display:none;}
}

/* View more */
.view-moreList{width:100%; float:left; margin-top:1px; position:relative; display:block; justify-content:center; z-index:1; border-radius: 10px 10px; border-top:0;}
.view-moreList a{line-height:40px; height:40px; display:block; margin:0 auto; width:250px; border-radius:0 0 10px 10px;  background:var(--color-bg); text-align:center; display:block; text-decoration:none; color:#000; font-size:14px; transition:.3s; position:relative; z-index:2; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
.view-moreList a span{font-weight:900; padding: 0 2px; color:var(--color3); font-size:17px;}

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

/* 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;}


.wrap-navFixedRight{position:fixed; right:10px; z-index:38; bottom:300px; }
.wrap-navFixedRight .nav-toTop{position:relative; width:44px; height:44px; margin:0; border-radius:7px;  align-items:center; justify-content:center; color:#000; box-shadow: inset 0 0 0 2px rgba(0,0,0,.1); transition:.3s; background:#fff; display:none; }
.wrap-navFixedRight .nav-toTop.is-view{display:flex;}
.wrap-navFixedRight .nav-toTop i{font-size:16px; position:relative; z-index:2;}
.wrap-navFixedRight .nav-toTop b{min-width:18px; height:18px; line-height:18px; border-radius:0 7px 0 7px; padding: 0; background:#2196f3; color:#fff; text-align:center; font-weight:bold; font-size:11px; position:absolute; top:0px; right:0; display:block; z-index:3; text-align:center; }
.wrap-navFixedRight .nav-toTop span{ position:absolute; right:100%; color:#fff; font-size:13px; z-index:5; background:rgba(0,0,0,.75); border-radius:5px; line-height:26px; height:26px; display:block; transition:.0s; opacity:0; visibility:hidden; z-index:2; transition:.1s; padding:0 10px; white-space:nowrap }
.wrap-navFixedRight .nav-toTop span:after{content:''; margin-top:-7px; border-left:5px solid rgba(0,0,0,.75); border-top:7px solid transparent; border-bottom:7px solid transparent; position:absolute; top:50%; left:100%;}
.wrap-navFixedRight .nav-toTop:hover{background:var(--color1); color:#fff; box-shadow:none;}
.wrap-navFixedRight .nav-toTop:hover span{margin-right:7px; opacity:1; visibility:initial}

@media (max-width:991px) {
    
}
@media (min-width:992px) {
    
}

/******************************************************************/
/*                             Footer                             */
/******************************************************************/
/* Nhận bản tin */
.footer-subscribe{width:100%; float:left; position:relative; border-top:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1); padding: 30px 0}
.footer-subscribe .col-logo{float:left; position:relative;}
.footer-subscribe .col-logo img{height:46px; margin-top:2px; float:left;}
.footer-subscribe .col-subscribe{padding: 0; float:right; position:relative; display:flex}
.footer-subscribe .col-subscribe:before{font-family:"Font Awesome 5"; content: "\f658"; font-weight:100; position:absolute; top:1px; right:100%; z-index:5; position:absolute; color:var(--color2); font-size:32px; margin-right:15px; }
.footer-subscribe .col-subscribe .col-title{padding-right:25px; position:relative; padding-top:5px; height:50px; padding-left:25px;}
.footer-subscribe .col-subscribe .col-title:before{content:''; width:1px; height:40px; margin-top:-20px; position:absolute; top:50%; left:0; background:#000; opacity:.1}
.footer-subscribe .col-subscribe .col-title h3{font-size:16px; font-weight:bold; text-transform:uppercase}
.footer-subscribe .col-subscribe .col-title span{display:block; clear:both; margin-top:-5px; font-size:14px; font-weight:400; opacity:.8; white-space:nowrap; }
.footer-subscribe .col-subscribe .col-input{width:370px;  position:relative; float:left; clear:both; margin:0;}
.footer-subscribe .col-subscribe .col-input input[type='text']{width:100%; height:50px; padding: 0 100px 0 15px; background:rgba(0,0,0,.03); border-radius:5px; border:none; outline:none; font-weight:500; font-size:14px;}
.footer-subscribe .col-subscribe .col-input .nav-send{ line-height:40px; height:40px; position:absolute; top:5px; right:5px; font-size:14px; text-align:center; font-weight:600; background:var(--color1); width:90px; border-radius:4px; z-index:2; color:#fff; box-shadow: inset 0 0 rgba(0,0,0,0); transition:.3s;}
.footer-subscribe .col-subscribe .col-input .nav-send:hover{box-shadow: inset 0 52px rgba(0,0,0,.15)}

/* Service */
.footer-service{width:100%; float:left; position:relative; margin-bottom:30px;}
.footer-service .container{position:relative; z-index:3;}
.footer-service .inner{width:100%; float:left; position:relative;  padding: 0px}
.footer-service .inner ul{width:calc(100% + 20px); margin:0 0 0 -10px; padding:0; list-style:none; clear:both; display:flex;}
.footer-service .inner ul li{width:25%; padding: 0 10px; display:block; position:relative;}
.footer-service .inner ul li .inner{width:100%; float:left; position:relative; border:1px solid rgba(0,0,0,.1); display:table; border-radius:10px; padding: 20px;}
.footer-service .inner ul li .inner .icon{display:table-cell; position:relative; width:50px; text-align:center; vertical-align:middle}
.footer-service .inner ul li .inner .icon i{font-size:32px; color:var(--color1)}
.footer-service .inner ul li .inner .info{display:table-cell; position:relative; text-align:left; vertical-align:middle; padding-left:10px;}
.footer-service .inner ul li .inner .info label{width:100%; margin:0; padding:0; float:left; font-weight:500; font-size:16px;}
.footer-service .inner ul li .inner .info span{float:left; width:100%; float:left; font-size:14px; color:rgba(0,0,0,.7); padding-top:2px;}

@media (min-width:768px) and (max-width:991px) {
    
}

@media (min-width:992px) and (max-width:1199px) {
    
}

/* Info */
.footer-info{width:100%; float:left; position:relative; padding:40px 0;}
.footer-info .container{position:relative; z-index:3;}
.footer-info .inner{display:table; width:100%; float:left; position:relative; color:#000;}
.footer-info .inner .title-col{width:100%; float:left; position:relative; text-transform:uppercase; font-size:14px; font-weight:900; letter-spacing:1px; border-bottom:1px solid rgba(0,0,0,0); padding-bottom:10px; color:#000 }
.footer-info .inner .title-col:before{width:12px; height:12px; background:#eff2f5; transform:rotate(45deg); display:block; position:absolute; left:20px; bottom:-6px; border-bottom:1px solid rgba(0,0,0,.1); border-right:1px solid rgba(0,0,0,.1)}
.footer-info .inner .col-company{display:table-cell; text-align:left; vertical-align:top; position:relative}
.footer-info .inner .col-company .logo{display:block; clear:both; float:left;}
.footer-info .inner .col-company .logo img{height:40px;}
.footer-info .inner .col-company ul{margin:0; padding:5px 0 0 0; list-style:none; width:100%; float:left; font-size:15px; color:#000}
.footer-info .inner .col-company ul li{width:100%; float:left; position:relative; display:block; padding:0 0 0 100px; margin-top:15px; font-weight:500; }
.footer-info .inner .col-company ul li div:first-child{position:absolute; left:0; font-weight:500; color:#000;}
.footer-info .inner .col-company ul li:first-child a{font-weight:normal; color:var(--color2); font-size:14px; margin-left:10px;}
.footer-info .inner .col-company ul li:first-child a:before{font-family: "Font Awesome 5"; font-weight:900; content: "\f3c5"; padding-right:3px;}
.footer-info .inner .col-company ul li:first-child a:hover{text-decoration:underline!important}
.footer-info .inner .col-company ul li a{text-decoration:none; color:#000; transition:.3s;}
.footer-info .inner .col-company ul li a:hover{color:var(--color2)}
.footer-info .inner .col-company ul li strong{position:absolute; top:0; left:0px; width: 80px; font-weight:normal; opacity:.8}
.footer-info .inner .col-company ul li strong:after{content:':'; float:right; font-weight:normal; opacity:.5}
.footer-info .inner .col-menu{display:table-cell; width:270px; text-align:left; vertical-align:top; position:relative; padding-left:30px;}
.footer-info .inner .col-menu ul{margin:0; padding:0; list-style:none; width:100%; float:left;}
.footer-info .inner .col-menu ul li{width:100%; float:left; position:relative;}
.footer-info .inner .col-menu ul li:first-child{margin:0;}
.footer-info .inner .col-menu ul li.title{font-weight:bold; font-size:16px; color:#000; padding-bottom:10px;}
.footer-info .inner .col-menu ul li.title .icon{display:none;}
.footer-info .inner .col-menu ul li a{display:block; color:#000; transition:.3s; position:relative; padding: 7px 0; transition:.3s; width:100%; float:left; font-weight:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.footer-info .inner .col-menu ul 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-info .inner .col-menu ul li a:hover{color:var(--color2); padding-left:12px;}
.footer-info .inner .col-menu ul li a:hover:before{left:0; opacity:1;}
.footer-info .inner .col-menu ul li a .icon{display:none!important}
.footer-info .inner .col-menu ul li ul{display:none;}
.footer-info .inner .col-app{display:table-cell; width:350px; text-align:left; vertical-align:top; position:relative; padding-left:30px;}
.footer-info .inner .col-app .link-shop{width:100%;float:left; position:relative;}
.footer-info .inner .col-app .link-shop a{float:left; margin-top:5px;}
.footer-info .inner .col-app .link-shop a:last-child{float:right;} 
.footer-info .inner .col-app .link-shop img{height:40px}
.footer-info .inner .wrap-pay{width:100%; float:left; position:relative; margin-top:40px;}
.footer-info .inner ul.list-pay{width:calc(100% + 10px); margin: 0px 0 0 -5px; padding:0; list-style:none; float:left;}
.footer-info .inner ul.list-pay 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; }
.footer-info .inner ul.list-pay li img{max-width:100%; max-height:100%;}
.footer-info .inner ul.list-pay li.money{display:block; text-align:center; padding:7px 0;}
.footer-info .inner ul.list-pay li.money i{font-size:20px; opacity:.5}
.footer-info .inner ul.list-pay li.money span{display:block; padding-top:2px; width:100%; float:left; text-transform:uppercase; font-size:11px; font-weight:bold; letter-spacing:1px}
.footer-info .inner ul.list-pay li.banking{display:block; text-align:center; padding:7px; position:relative;}
.footer-info .inner ul.list-pay li.banking:before{content:''; width:100%; height:5px; background:#000; position:absolute; top:8px; left:0; opacity:.1}
.footer-info .inner ul.list-pay 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;}

@media (min-width:768px) and (max-width:991px) {
    .footer-info .inner{padding-bottom:180px; display:block; float:left;}
    .footer-info .inner .col-company{width:100%; float:left; display:block;}
    .footer-info .inner .menuFoot-info{width:50%; float:left; display:block; padding-left:0; padding-top:50px;}
    .footer-info .inner .menuFoot-support{width:50%; float:left; display:block; padding-left:0; padding-top:50px;}

    .footer-info .inner .col-app{position:absolute; left:0; bottom:0; display:block; padding:0; width:100%;}
    .footer-info .inner .col-app .wrap-shop{float:left;width:240px;}
    .footer-info .inner .col-app .link-shop a img{height:35px;}
    .footer-info .inner .col-app .wrap-pay{max-width:420px; float:right; margin:0;}
    .footer-info .inner .col-app .wrap-pay ul.list-pay li{width:calc(20% - 10px)}

}

@media (min-width:992px) and (max-width:1199px) {
    .footer-info .inner{padding-bottom:150px; display:block; float:left;}
    .footer-info .inner .col-company{width:calc(100% - 450px) ; float:left; display:block;}
    .footer-info .inner .menuFoot-info{width:200px; float:left; display:block;}
    .footer-info .inner .menuFoot-support{width:250px; float:left; display:block;}

    .footer-info .inner .col-app{position:absolute; left:0; bottom:0; display:block; padding:0; width:100%;}
    .footer-info .inner .col-app .wrap-shop{float:left;width:280px;}
    .footer-info .inner .col-app .wrap-pay{max-width:420px; float:right; margin:0;}
    .footer-info .inner .col-app .wrap-pay ul.list-pay li{width:calc(20% - 10px)}
}

@media (min-width:1200px) and (max-width:1439px) {
    .footer-info .inner .menuFoot-info{width:170px; padding-left:40px;}
}

@media (min-width:1440px) {
    .footer-info .inner .menuFoot-info{width:190px; padding-left:40px;}
}



/* copyright */
.footer-copyright{width:100%; float:left; position:relative;}
.footer-copyright .inner{display:table; width:100%; float:left; border-top:1px solid rgba(0,0,0,.07); padding:20px 0; }
.footer-copyright .inner .col-left{display:table-cell; text-align:left; vertical-align:middle; font-size:13px;}
.footer-copyright .inner .col-left a{color:var(--color1)}
.footer-copyright .inner .col-right{display:table-cell; text-align:right;}
.footer-copyright .inner .col-right .dmca-badge{}
.footer-copyright .inner .col-right .dmca-badge img{height:45px;}
.footer-copyright .inner .col-right .link-bct img{height:50px;}


/******************************************************************/
/*                             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 70px 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; background:#fff; 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:3; }
.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 */
/*.panelLeft-catalog{left: 0!important;opacity: 1!important;visibility: initial!important;pointer-events: initial!important;}*/
.navListMobile-Catalog{width:100%; float:left; position:relative; list-style:none; margin:0; padding:0; border-bottom:3px solid var(--color-border); background:#fff; z-index:2}
.navListMobile-Catalog li{width:100%; border-bottom:1px solid var(--color-border); position:relative;}
.navListMobile-Catalog li a{line-height:50px; color:#000; padding-left:45px;}
.navListMobile-Catalog li:before{content: '';width: 30px;height: 30px;background-size: auto 30px; background-position: center; background-repeat: no-repeat;position: absolute;top: 10px;left: 10px;}
.navListMobile-Catalog li:first-child:before{background-image: url(icon/discount.png);}
.navListMobile-Catalog li:nth-child(2):before{background-image: url(icon/CanhDuongSinh.png);}
.navTabMobile-Catalog{margin:0; padding:0; display:block; list-style:none; width:104px; position:relative; left:0; float:left; z-index:3; box-shadow: inset -4px 0 var(--color-border) } 
.navTabMobile-Catalog li{display:block; text-align:center; width:100%; height:95px; margin:0; padding:0;  border-bottom:1px solid var(--color-border); float:left;}
.navTabMobile-Catalog li:last-child{border:none;}
.navTabMobile-Catalog li a{display:table-cell; width:104px; height:95px; color:#000; padding: 0px 7px 0 7px; position:relative; vertical-align:middle}
.navTabMobile-Catalog li a span{width:100%; font-size:14px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden;text-overflow: ellipsis; display: -webkit-box;}
.navTabMobile-Catalog li a.active{box-shadow:inset -3px 0 var(--color2)}
.navTabMobile-Catalog li a.active:after{content:''; border-right:10px solid var(--color2); margin-top:-10px; border-top:10px solid transparent; border-bottom:10px solid transparent; position:absolute; top:50%; right:0;}
.tabContentMobile-Catalog{width:calc(100% - 104px); position:relative; right:0; float:right; z-index:2; box-shadow: -4px 0 var(--color-border)}
.tabContentMobile-Catalog .tab-pane{width:100%; height:100%; position:relative; padding-top:44px;}
.tabContentMobile-Catalog .titleContent{width:100%; position:absolute; top:0; left:0; height:44px; line-height:40px; font-size:14px; border-bottom:4px solid var(--color-border); padding-left:10px;}
.tabContentMobile-Catalog .titleContent span{float:left; font-weight:500; width:calc(100% - 85px); white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.tabContentMobile-Catalog .titleContent a{position:absolute; right:10px; color:var(--color2)}
.tabContentMobile-Catalog .bodyContent{width:100%;left:0; float:left;}
.tabContentMobile-Catalog .titleProposeProducts{position:relative; top:initial; float:left;margin: 0; border:none; border-top:4px solid var(--color-border); margin-top:15px;}
.tabContentMobile-Catalog .titleProposeProducts a{}
.tabContentMobile-Catalog ul.subMenu{width:100%; margin:0; padding:10px 0 0 0; list-style:none;}
.tabContentMobile-Catalog ul.subMenu li{width:33.3333333%; float:left;  height:100px; }
.tabContentMobile-Catalog ul.subMenu li a{width:100%; padding: 50px 5px 0 5px; line-height:18px; text-align:center; float:left; font-size:14px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden;text-overflow: ellipsis; display: -webkit-box; position:relative; color:#000;}
.tabContentMobile-Catalog ul.product-propose{width:100%; margin:0; padding:0 10px 10px 10px; list-style:none; float:left;}
.tabContentMobile-Catalog ul.product-propose li{float:left; width:100%; display:block; border-top:1px solid var(--color-border); padding: 5px 0 }
.tabContentMobile-Catalog ul.product-propose li .wrap-img{width:50px; float:left;}
.tabContentMobile-Catalog ul.product-propose li .wrap-img a{width:100%;}
.tabContentMobile-Catalog ul.product-propose li .wrap-img a img{width:100%;}
.tabContentMobile-Catalog ul.product-propose li .price{display:none;}
.tabContentMobile-Catalog ul.product-propose li .nav-name{font-size:13px; height:50px; display:flex; align-items:center; color:#000; width:calc(100% - 50px); float:left; padding-left:10px;  }

.navTabMobile-Catalog li a:before{content:''; width:30px; height:30px; margin:0 auto 2px auto; position:relative; display:block; background-size: auto 30px; background-position: center; background-repeat: no-repeat;}
.navTabMobile-Catalog li:first-child a:before{background-image: url(icon/flag-australia.png);}
.navTabMobile-Catalog li:nth-child(2) a:before{background-image: url(icon/flag-japan.png);}
.navTabMobile-Catalog li:nth-child(3) a:before{background-image: url(icon/flag-taiwan.png);}
.navTabMobile-Catalog li:nth-child(4) a:before{background-image: url(icon/ThaoDuocVietNam.png);}
.navTabMobile-Catalog li:nth-child(5) a:before{background-image: url(icon/TroPhuongSucKhoe.png);}
.navTabMobile-Catalog li:nth-child(6) a:before{background-image: url(icon/ThucPhamThucDuong.png);}
.navTabMobile-Catalog li:nth-child(7) a:before{    background-image: url(icon/NhuYeuPham.png);}

.panelLeft-catalog .tab-content ul.subMenu a:before{content:''; width:30px; height:30px; margin-left:-15px; top:15px; background-size: auto 30px; background-position: center; background-repeat: no-repeat; display:block; position:absolute; left:50%; }
#menuTab-2 ul.subMenu li:nth-child(1) a:before{background-image: url(icon/HangUc-ThaoDuocGWaust.png)}
#menuTab-2 ul.subMenu li:nth-child(2) a:before{background-image: url(icon/HangUc-DoHuuCo.png)}
#menuTab-2 ul.subMenu li:nth-child(3) a:before{background-image: url(icon/SanPhamKhac.png)}

#menuTab-3 ul.subMenu li:nth-child(1) a:before{background-image: url(icon/HangNhat-GiaVi.png)}
#menuTab-3 ul.subMenu li:nth-child(2) a:before{background-image: url(icon/HangNhat-DoUong.png)}
#menuTab-3 ul.subMenu li:nth-child(3) a:before{background-image: url(icon/HangNhat-ThucPham.png)}
#menuTab-3 ul.subMenu li:nth-child(4) a:before{background-image: url(icon/HangNhat-RongTao.png)}
#menuTab-3 ul.subMenu li:nth-child(5) a:before{background-image: url(icon/HangNhat-NuocTuongTamari.png)}
#menuTab-3 ul.subMenu li:nth-child(6) a:before{background-image: url(icon/SanPhamKhac.png)}

#menuTab-4 ul.subMenu li:nth-child(1) a:before{background-image: url(icon/HangDaiLoan-CanhDuongSinhKingKung.png)}
#menuTab-4 ul.subMenu li:nth-child(2) a:before{background-image: url(icon/HangDaiLoan-ThucPhamAnLien.png)}
#menuTab-4 ul.subMenu li:nth-child(3) a:before{background-image: url(icon/SanPhamKhac.png)}

#menuTab-5 ul.subMenu li:nth-child(1) a:before{background-image: url(icon/ThaoDuocVietNam-NguyenLieuKho.png)}
#menuTab-5 ul.subMenu li:nth-child(2) a:before{background-image: url(icon/ThaoDuocVietNam-ThaoDuocKhac.png)}

#menuTab-6 ul.subMenu li:nth-child(1) a:before{background-image: url(icon/TroPhuongSucKhoe-MauNhiemMo.png)}
#menuTab-6 ul.subMenu li:nth-child(2) a:before{background-image: url(icon/TroPhuongSucKhoe-HoTroHuyetApTimMach.png)}
#menuTab-6 ul.subMenu li:nth-child(3) a:before{background-image: url(icon/TroPhuongSucKhoe-HoTroTieuDuong.png)}
#menuTab-6 ul.subMenu li:nth-child(4) a:before{background-image: url(icon/TroPhuongSucKhoe-BoTroXuongKhop.png)}
#menuTab-6 ul.subMenu li:nth-child(5) a:before{background-image: url(icon/TroPhuongSucKhoe-ViemXoangViemMui.png)}
#menuTab-6 ul.subMenu li:nth-child(6) a:before{background-image: url(icon/TroPhuongSucKhoe-BoPheHoHap.png)}
#menuTab-6 ul.subMenu li:nth-child(7) a:before{background-image: url(icon/TroPhuongSucKhoe-BoGanThanhNhiet.png)}
#menuTab-6 ul.subMenu li:nth-child(8) a:before{background-image: url(icon/TroPhuongSucKhoe-BoThanTangSinhLy.png)}
#menuTab-6 ul.subMenu li:nth-child(9) a:before{background-image: url(icon/TroPhuongSucKhoe-BoNaoMatNgu.png)}
#menuTab-6 ul.subMenu li:nth-child(10) a:before{background-image: url(icon/TroPhuongSucKhoe-BenhNgoaiDa.png)}
#menuTab-6 ul.subMenu li:nth-child(11) a:before{background-image: url(icon/TroPhuongSucKhoe-HoTroUngThu.png)}
#menuTab-6 ul.subMenu li:nth-child(12) a:before{background-image: url(icon/TroPhuongSucKhoe-BoMatSangMat.png)}
#menuTab-6 ul.subMenu li:nth-child(13) a:before{background-image: url(icon/TroPhuongSucKhoe-HoTroTieuHoa.png)}
#menuTab-6 ul.subMenu li:nth-child(14) a:before{background-image: url(icon/TroPhuongSucKhoe-HoTroGianTinhMach.png)}
#menuTab-6 ul.subMenu li:nth-child(15) a:before{background-image: url(icon/TroPhuongSucKhoe-HoTRoTriTaoBon.png)}
#menuTab-6 ul.subMenu li:nth-child(16) a:before{background-image: url(icon/TroPhuongSucKhoe-DanhChoBe.png)}
#menuTab-6 ul.subMenu li:nth-child(17) a:before{background-image: url(icon/TroPhuongSucKhoe-DanhChoMe.png)}
#menuTab-6 ul.subMenu li:nth-child(18) a:before{background-image: url(icon/TroPhuongSucKhoe-LamDepGiamCan.png)}
#menuTab-6 ul.subMenu li:nth-child(19) a:before{background-image: url(icon/TroPhuongSucKhoe-VitaminVaKhoangChat.png)}
#menuTab-6 ul.subMenu li:nth-child(20) a:before{background-image: url(icon/TroPhuongSucKhoe-MocTocTriHoi.png)}

#menuTab-7 ul.subMenu li:nth-child(1) a:before{background-image: url(icon/ThucPhamThucDuong-DoUongThucDuong.png)}
#menuTab-7 ul.subMenu li:nth-child(2) a:before{background-image: url(icon/ThucPhamThucDuong-GaoHuuCoSauThang.png)}
#menuTab-7 ul.subMenu li:nth-child(3) a:before{background-image: url(icon/ThucPhamThucDuong-BunMiPho.png)}
#menuTab-7 ul.subMenu li:nth-child(4) a:before{background-image: url(icon/ThucPhamThucDuong-DauHat.png)}
#menuTab-7 ul.subMenu li:nth-child(5) a:before{background-image: url(icon/ThucPhamThucDuong-RongBien.png)}
#menuTab-7 ul.subMenu li:nth-child(6) a:before{background-image: url(icon/ThucPhamThucDuong-GiaViTuNhien.png)}
#menuTab-7 ul.subMenu li:nth-child(7) a:before{background-image: url(icon/ThucPhamThucDuong-AnVat.png)}
#menuTab-7 ul.subMenu li:nth-child(8) a:before{background-image: url(icon/ThucPhamThucDuong-DoAnLien.png)}
#menuTab-7 ul.subMenu li:nth-child(9) a:before{background-image: url(icon/ThucPhamThucDuong-SanPhamKhac.png)}

#menuTab-8 ul.subMenu li:nth-child(1) a:before{background-image: url(icon/NhuYeuPham-MayTaoOxy.png)}
#menuTab-8 ul.subMenu li:nth-child(2) a:before{background-image: url(icon/NhuYeuPham-MayDoHuyetAp.png)}
#menuTab-8 ul.subMenu li:nth-child(3) a:before{background-image: url(icon/NhuYeuPham-CanSucKhoe.png)}
#menuTab-8 ul.subMenu li:nth-child(4) a:before{background-image: url(icon/NhuYeuPham-VoYKhoa.png)}
#menuTab-8 ul.subMenu li:nth-child(5) a:before{background-image: url(icon/NhuYeuPham-NoiComDien.png)}
#menuTab-8 ul.subMenu li:nth-child(6) a:before{background-image: url(icon/NhuYeuPham-NoiNauCham.png)}
#menuTab-8 ul.subMenu li:nth-child(7) a:before{background-image: url(icon/NhuYeuPham-SachTaiLieu.png)}
#menuTab-8 ul.subMenu li:nth-child(8) a:before{background-image: url(icon/NhuYeuPham-BinhDunSieuToc.png)}
#menuTab-8 ul.subMenu li:nth-child(9) a:before{background-image: url(icon/NhuYeuPham-BinhGiuNhiet.png)}
#menuTab-8 ul.subMenu li:nth-child(10) a:before{background-image: url(icon/NhuYeuPham-CanNhaBep.png)}
#menuTab-8 ul.subMenu li:nth-child(11) a:before{background-image: url(icon/NhuYeuPham-NhietKe.png)}
#menuTab-8 ul.subMenu li:nth-child(12) a:before{background-image: url(icon/NhuYeuPham-ChamSocCaNhan.png)}
#menuTab-8 ul.subMenu li:nth-child(13) a:before{background-image: url(icon/NhuYeuPham-SanPhamKhac.png)}
#menuTab-8 ul.subMenu li:nth-child(14) a:before{background-image: url(icon/NhuYeuPham-AoMua.png)}


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 70px 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:20px; z-index:3; box-shadow: 0 0 0 1px transparent; z-index:1; border-radius:8px; transition:.3s;}
.product:hover{ box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 3px 10px rgba(0,0,0,.07);}
.product .percent{display:none;}
.product .buttons{position:relative; right:0px; z-index:5; opacity:1; height:0; width:100%; float:left;}
.product .buttons a{width:50%; padding: 10px 0 5px 0; margin: 0; color:#000; display:block; position:absolute; bottom:-30px; left:0; background:rgba(255,255,255,.9); font-size:15px; transition:.3s; font-weight:500; text-align:center; opacity:0;}
.product .buttons a i:before{font-size:16px; font-weight:400; transition:.3s;}
.product .buttons a span{font-size:13px; font-weight:500; width:100%; float:left; text-align:center; opacity:.75; transition:.3s;}
.product .buttons a:last-child{left:initial; right:0;}
.product .buttons a:hover{color:var(--color1)}
.product .buttons a:hover span{opacity:1;}
.product:hover .buttons a{bottom:0; opacity:1;}
.product .wrap-img{width:100%; float:left; position:relative; z-index:4; margin-bottom:0px; }
.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; border-radius:7px; }
.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 .nav-catalog{font-size:13px; margin-top:20px; font-weight:normal; color:rgba(0,0,0,.8); height:24px; line-height:25px; border-radius:12px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); display:inline-block; padding: 0 15px; transition:.3s;}
.product .nav-catalog:hover{background:var(--color1); color:#fff; box-shadow:none;}
.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:10px; width:100%; float:left; padding: 0 0px; z-index:5; position:relative; color:#000; font-weight:500;}
.product .name:hover{color:var(--color1)}
.product .name h3{font-size:15px; font-weight:normal; 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 .specifications{width:100%; float:left; font-size:13px; color:rgba(0,0,0,.75); margin-top:3px;}
.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:10px; z-index:4; padding-left:0px;}
.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:100%; background:var(--color1); color:#fff; margin: 0px 0px; 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.contact .price{display:block!important}
.product.contact .price .new,
.product.contact .price .old{display:none;} 
.product.contact .price:before{content:'Giá:'; opacity:.75; font-size:13px;}
.product.contact .price:after{content:'Liên hệ'; font-weight:700; color:var(--color3); padding-left:5px; font-size:17px;}
.product.contact:before,
.product.noneHover:before{display:none;}
.product.contact .wrap-btn,
.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)}
}