:root {
    --color: #030712;
    --color1: #46cc5e;
    --color2: #0064d6;
    --color3: #d51243;
    --color-green: #1e8b22;
    --color-blue: #0064d6;
    --color-red: #dc2626;
    --color-border: #e5e7eb;
    --color-bg: #f3f4f6;
    --btnColor1: #0064d6;
    --btnColor2: #ffc107;
}
html{}
body{ float:left; width:100%; font-family: "Momo Trust Sans", sans-serif; font-weight:normal; font-size:14px; color:var(--color); margin:initial!important; overflow-x:hidden; overflow-y:auto; background:var(--color-bg) }
a{outline:none; color:var(--color); text-decoration:none!important}
a:hover{color:var(--color-blue)}
@media (max-width: 767px) {
    body{overflow:hidden}
    #wrapper-page{position:absolute; width:100%; height:calc(100% - 60px); top:0; left:0; overflow:hidden; overflow-y:auto}
    #wrapper-page.disabled-scroll{overflow:hidden;}
}

#clock{float:left; font-size:12px; color:#777; position:relative; border-left: 1px dotted #c6c6c6; padding-left:15px; margin-left:15px; margin-top:5px;}

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

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


/* Checkbox */
.checkbox {padding-left: 3px; display:inline-block; margin:0;  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.checkbox label { display: inline-block; vertical-align: middle; position: relative;  padding-left: 5px; padding-right:0; white-space:initial; margin-bottom:0;  }
.checkbox label::before { content: ""; display: inline-block; position: absolute; width: 15px; height: 15px; left: 0; margin:2px 0 0 -16px; border: 1px solid rgba(0,0,0,.2);  border-radius: 3px;  background-color: #fff; -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;  transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
.checkbox label::after {display: inline-block;position: absolute; line-height:14px; width: 14px; height: 14px; left: 1px;top: 1px; margin-left: -17px; padding-left: 3px; padding-top: 1px;  font-size: 10px;  color: #000; }
.checkbox input[type="checkbox"]{ opacity: 0;  z-index: 1; }
.checkbox input[type="checkbox"]:focus + label::before{ outline: none;}
.checkbox input[type="checkbox"]:checked + label::after{font-family: "Font Awesome 5";content: "\f00c"; font-weight:900;}
.checkbox input[type="checkbox"]:indeterminate + label::after{ display: block; content: ""; width: 10px; height: 3px; background-color: #555555; border-radius: 2px; margin-left: -16.5px; margin-top: 7px;}
.checkbox input[type="checkbox"]:disabled + label{   opacity: 0.65; }
.checkbox input[type="checkbox"]:disabled + label::before { background-color: #eeeeee; cursor: not-allowed; }

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



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

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

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

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

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




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


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


/* init */
.icon-contact{position:fixed; right:10px; bottom:250px; z-index:30; margin:0; padding:0; list-style:none;}
.icon-contact li{width:125px; float:left; position:relative; margin-bottom:10px; clear:both;}
.icon-contact a{width:100%; height:45px; padding-left:45px; position:relative; text-decoration:none; display:block; border-radius:5px; border: 1px solid rgba(0,0,0,.15); box-shadow: 0 0.2rem 0.35rem rgba(0, 0, 0, 0.1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:#fff; transition:.3s;}
.icon-contact .floating-cart-shortcut a{background:var(--color-blue);border-color:var(--color-blue);color:#fff;font-weight:600;overflow:visible;}
.icon-contact .floating-cart-shortcut a .icon{color:#fff;}
.icon-contact .floating-cart-shortcut a .icon svg{width:25px;height:25px;display:block;}
.icon-contact .floating-cart-shortcut a span{padding-top:5px;color:#fff;}
.icon-contact .floating-cart-shortcut a span:after{display:none;}
.icon-contact .floating-cart-shortcut .floating-cart-summary{display:block;position:absolute;top:22px;left:45px;right:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.9);font-size:10px;font-weight:400;line-height:15px;}
.icon-contact .floating-cart-shortcut .shoppingcartNumber{position:absolute;right:-7px;top:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--color-red);color:#fff;font-size:11px;line-height:20px;text-align:center;box-shadow:0 0 0 2px #fff;}
.icon-contact .floating-cart-shortcut.is-cart-updated a{animation:tk-cart-pulse .52s ease-in-out;}
.icon-contact .floating-live-chat a{background:#fff;color:var(--color-blue);}
.icon-contact .floating-live-chat a span{color:var(--color-blue);}
.tk-customer-chat{display:none;position:fixed;right:10px;bottom:305px;width:360px;max-width:calc(100vw - 20px);height:460px;z-index:1001;background:#fff;border:1px solid #dfe6ee;border-radius:12px;box-shadow:0 12px 35px rgba(0,0,0,.2);overflow:hidden;transition:width .18s ease,height .18s ease,right .18s ease,bottom .18s ease;}
.tk-customer-chat.is-open{display:flex;flex-direction:column;}.tk-customer-chat.is-expanded{right:20px;bottom:20px;width:min(760px,calc(100vw - 40px));height:min(820px,calc(100vh - 40px));}.tk-customer-chat-head{height:48px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;background:var(--color-blue);color:#fff;}.tk-customer-chat-actions{display:flex;align-items:center;gap:10px;}.tk-customer-chat-head a,.tk-customer-chat-head button{color:#fff;font-size:28px;line-height:1;text-decoration:none;background:transparent;border:0;padding:0;cursor:pointer;}.tk-customer-chat-head button{font-size:20px;}.tk-customer-chat-note{padding:9px 14px;background:#eff8ff;color:#566575;font-size:12px;}.tk-customer-chat-messages{flex:1;padding:12px;overflow-y:auto;background:#fafbfd;}.tk-chat-line{max-width:82%;margin:0 0 9px;padding:8px 10px;border-radius:10px;clear:both;font-size:13px;line-height:18px;}.tk-chat-line span,.tk-chat-line small{display:block;}.tk-chat-line span{white-space:normal;}.tk-chat-line small{font-size:10px;opacity:.65;margin-top:3px;}.tk-chat-line.is-customer{float:right;background:#0879df;color:#fff;}.tk-chat-line.is-staff{float:left;background:#e8edf2;color:#1f2d3d;}.tk-chat-empty{color:#798795;font-size:13px;text-align:center;margin:25px 12px;}.tk-customer-chat-login{padding:13px;color:#637180;font-size:13px;text-align:center;}.tk-customer-chat-compose{padding:10px;border-top:1px solid #e5eaf0;display:flex;gap:8px;}.tk-customer-chat-compose textarea{min-height:42px;max-height:80px;resize:vertical;flex:1;border:1px solid #cfd8e2;border-radius:6px;padding:8px;font-size:13px;}.tk-customer-chat-compose button{border:0;border-radius:6px;background:var(--color-green);color:#fff;padding:0 13px;font-weight:600;}
@keyframes tk-cart-pulse{0%,100%{transform:scale(1)}45%{transform:scale(1.1)}}
.icon-contact a .icon{width:26px; height:26px; margin-top:-13px; position:absolute; top:50%; left:10px; display:flex; align-items:center; justify-content:center}
.icon-contact a .icon svg{height:26px; width:26px;}
.icon-contact a .icon img{max-width:100%; max-height:100%}
.icon-contact a .icon.tel i{font-size:15px; color:var(--color1)}
.icon-contact a .icon.mess{padding:3px;}
.icon-contact a span{display:block; width:100%; display:block; float:left; clear:both; padding-top:7px; font-size:11px; font-weight:bold; color:#000;}
.icon-contact a span:after{content:'(8h00 - 22h:00)'; width:100%; float:left; clear:both; opacity:.7; font-weight:normal; font-size:10px; margin-top:-2px;} 
.icon-contact a .zaloOA img{margin-top:-8px;}
.icon-contact a .zaloOA:after{content:'OA'; font-weight:900; font-size:10px; width:100%; text-align:center; position:absolute; text-align:center; left:0; bottom:-3px; color:var(--color3)}
.icon-contact a:hover{border-color:var(--color2)}
.icon-contact a:hover b{color:var(--color2)}

@media (max-width: 767px) {
    .icon-contact{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;}
}


.floating-btn{position:fixed; z-index:22; bottom:250px; right:15px;}
.floating-btn a:not(.nav-openPopup){width:50px; height:50px; padding-bottom:14px; margin-bottom:10px; display:flex; align-items:center; justify-content:center; position:relative; background:#fff; box-shadow: 0 0 0 1px rgba(0,0,0,.1),0 2px 10px rgba(0, 0, 0, 0.1); border-radius:5px; color:var(--color3); transition:.3s; }
.floating-btn a:not(.nav-openPopup) i{font-size:18px; transition:.3s;}
.floating-btn a:not(.nav-openPopup):hover{ box-shadow: 0 0 0 1px var(--color3),0 2px 10px rgba(0, 0, 0, 0.1);}
.floating-btn a:not(.nav-openPopup) span{position:absolute; left:0; width:100%; text-align:center; font-size:11px; line-height:initial; bottom:5px; font-weight:500; color:#000; }


@media (max-width: 767px) {
    .floating-btn{bottom:70px; right:10px; display:none;}
}

/* Popover mua nhanh khi thêm sản phẩm vào giỏ hàng */
.popoverQuickBuy{position:fixed; z-index:100; background:#fff; width:760px; padding: 15px; margin-left:-380px; bottom:0; left:50%; display:flex; justify-content:right; box-shadow: 0 -5px 20px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.03); border-radius: 10px 10px 0 0; transition:.3s; }
.popoverQuickBuy:before{content:'Mua ngay'; position:absolute; top:15px; left:20px; font-weight:bold; line-height:42px; font-size:16px; }
.popoverQuickBuy .nav-order{line-height:40px; background:var(--color-red); padding: 0 40px; border-radius:5px; color:#fff; font-weight:500; font-size:14px; margin-left:20px;}
.popoverQuickBuy .wrap-navCart{line-height:40px; background:var(--color-bg); padding: 0 0; border-radius:5px; font-weight:500; font-size:14px; margin-left:10px;}
.popoverQuickBuy .wrap-navCart a{padding: 0 15px; position:relative;}
.popoverQuickBuy .wrap-navCart a:first-child:after{content:''; width:1px; height:16px; margin-top:-8px; right:0; top:50%; position:absolute; background:rgba(0,0,0,.1)}
.popoverQuickBuy span{position:relative; font-size:14px; font-weight:bold; margin-top:18px; text-align:center; width:56px; text-align:center; background:var(--color-bg); border-radius:5px; line-height:22px; height:22px; }
.popoverQuickBuy span:before{content:'Số lượng'; position:absolute; right:0; top:-20px; white-space:nowrap; font-weight:500; font-size:13px; opacity:.7; color:var(--color) }
.popoverQuickBuy b{position:relative; color:var(--color); font-size:16px; font-weight:bold; margin-top:18px; color:var(--color-red); padding-right:11px; margin-left:20px;}
.popoverQuickBuy b:after{content: '₫'; padding-left:2px; font-size:14px; font-weight:bold; display:inline-block; position:absolute; top:1px; right:0px; }
.popoverQuickBuy b:before{content:'Tổng tiền'; position:absolute; right:0; top:-18px; white-space:nowrap; font-weight:500; font-size:13px; opacity:.7; color:var(--color) }

/*  Products */
.product{width:100%; min-height:100%; float:left; position:relative; padding: 15px 15px 85px 15px ; z-index:3; box-shadow: 0 0 0 1px transparent; z-index:1; }
.product .percent{display:none;}
.product .buttons{position:absolute; top:15px; right:15px; z-index:5;transition:.3s;}
.product .buttons a{width:34px; height:34px; margin: 0 0; border-radius:50%; box-shadow:inset 0 0 0 1px var(--color-border); color:var(--color1); display:flex; align-items:center;justify-content:center; background:#fff; font-size:16px; transition:.3s;}
.product .buttons .nav-wishlist:before{content:''; width:18px; height:18px; background:url(icon/24-heart-line.png) no-repeat 0 0; background-size: auto 18px; }
.product .buttons .nav-quickView{display:none;}
.product .wrap-img{width:100%; position:relative; z-index:1; display:block; margin:auto }
.product .wrap-img:before{content:''; padding-top:100%; display:block;}
.product .wrap-img a{width:100%; height:100%; position:absolute; bottom:0; left:0; transition:.3s; }
.product .wrap-img a:before{content:''; width:40px; height:40px; margin: -20px 0 0 -20px; background:url(icon/loading.svg) no-repeat center; background-size:cover; position:absolute; top:50%; left:50%; opacity:.5}
.product .wrap-img img{width:inherit; height:inherit; object-fit:cover; position:relative; z-index:3; transition:.3s; }

.product .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; z-index:2; position:relative;}
.product .name h3{font-size:15px; font-weight:500; transition:.3s; line-height:21px; margin:0; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  white-space: normal; overflow:hidden; text-overflow:ellipsis; display:-webkit-box}
.product .meta{width:100%; float:left; position:relative; text-align:left; font-size:13px; padding:12px 20px 0 20px; display:block;}
.product .meta .unit{display:block; float:right;}
.product .meta .unit b{font-weight:bold; color:var(--color3); padding-right:3px; font-size:14px;}
.product .meta .rating{float:left; position:relative; text-align:left; z-index:4;}
.product .meta .rating .rating-value{display:inline-block;}
.product .meta .rating .total{font-size:13px; font-weight:bold; padding:3px 0 0 5px; position:absolute; left:100%; top:-1px;}
.product .abbreviation{ display:none; width:100%; float:left; padding: 0 0px; line-height:24px; }
.product .price{width:100%; float:left; position:relative; text-align:left; margin-top:20px;}
.product .price .save{position:relative; text-align:left; width:100%; display:flex; padding-bottom:8px; align-items:center; }
.product .price .save span{ margin: 0 0 0 5px; text-align:center; background:var(--color-bg); font-weight:bold; color:var(--color-red); height:20px; display:inline-block; position:relative; z-index:5; line-height:20px; border-radius:11px 5px 5px 11px; font-size:12px;  white-space:nowrap; padding: 0 13px 0 5px; }
.product .price .save span:after{content: '₫'; padding-left:2px; font-size:11px; font-weight:bold; display:inline-block; position:absolute; top:-1px; right:5px; }
.product .price .save span:before{content:'Giảm: '; font-size:11px; font-weight:500; margin-bottom:-5px; padding: 0;  }
.product .price .save b{display:inline-block; height:17px; margin: 0 0 ; padding-right:9px; position:relative; font-weight:500; font-size:14px; color:#767676; line-height:initial;}
.product .price .save b:after{content: '₫'; padding-left:2px; font-size:13px;  display:inline-block; position:absolute; top:0px; right:0px; }
.product .price .save b:before{content:''; width:100%; height:1px; background:var(--color-red); position:absolute; top:50%; left:0;}
.product .price .sell{width:100%; float:left; position:relative; display:block; align-items:center}
.product .price .sell b{display:inline-block; margin:0; padding-right:11px; position:relative; font-weight:bold; color:var(--color-red); font-size:17px; float:left}
.product .price .sell b:after{content: '₫'; padding-left:2px; font-size:15px; font-weight:bold; display:inline-block; position:absolute; top:0px; right:0px; }
.product .price .sell .coin{float:right; position:relative; font-size:13px; padding-right:20px; font-weight:500; line-height:24px; height:24px; background:url(icon/TK-Coin-24.png) no-repeat right center; background-size: auto 16px; }
.product .price .sell .coin:before{content:'+'; padding-right:3px; opacity:.5}

.product .sold{position:relative; z-index:4; padding-left:35px; width:calc(100% - 40px); max-width:150px; float:left; margin: 15px 0 0 20px; line-height:23px; height:22px; border-radius:12px; background:var(--color2); font-size:14px;}
.product .sold:before{width:36px; height:36px; background:url(sales-hours.png) no-repeat center; background-size:cover; content:''; position:absolute; bottom:-4px; left:-5px; }
.product .sold span{color:#fff;}
.product .sold b{float:right; line-height:19px; height:18px; margin: 2px; background:#fff; border-radius:11px; min-width:30px; text-align:center; padding: 0 5px;}
.product .offer{width:100%; display:flex;  background:var(--color-bg); align-items:center; border-radius:7px; margin-top:15px; clear:both; float:left; position:relative;}
.product .offer .nav-dropOffer{font-size:13px; font-weight:400; padding: 3px 45px 3px 10px; display:block; width:100%; color:var(--color); height:42px;}
.product .offer .nav-dropOffer span{display:block; clear:both} 
.product .offer .nav-dropOffer b{position:relative; padding-right:9px; font-weight:bold; margin-top:-2px; display:inline-block}
.product .offer .nav-dropOffer b:after{content: '₫'; padding-left:2px; font-size:12px; display:inline-block; position:absolute; top:-1px; right:0px; }
.product .offer .nav-dropOffer:after{content:'Xem'; font-size:11px; font-weight:500; line-height:20px; margin-top:-10px; position:absolute; top:50%; right:5px; color:#fff; border-radius:5px; padding: 0 5px; }
.product .offer .dropdown-menu{display:block; top:initial!important; bottom:100%; transform:initial!important; transition:.3s; width:calc(100% + 20px); border-radius:10px; border:none; box-shadow: 0 0 15px rgba(0,0,0,.1); padding: 15px; left:-10px!important; opacity:0; visibility:hidden; transition:.3s;}
.product .offer.show .dropdown-menu{opacity:1; visibility:initial; margin-bottom:10px;}
.product .offer .dropdown-menu .time-offer{width:100%; font-size:13px; border-bottom:1px solid var(--color-border); padding-bottom:10px; text-align:right}
.product .offer .dropdown-menu .time-offer:before{content:'Từ:'; font-weight:bold; padding-right:5px; opacity:.7; font-size:12px; float:left; }
.product .offer .dropdown-menu .info-offer{width:100%; float:left; position:relative; font-size:14px;}
.product .offer .dropdown-menu .info-offer .price-new{display:block; font-weight:bold; color:var(--color-red); font-size:14px; position:relative; padding-right:10px; display:inline-block; margin-right:2px;}
.product .offer .dropdown-menu .info-offer .price-new:after{content: '₫'; padding-left:2px; font-size:13px; font-weight:bold; display:inline-block; position:absolute; top:0px; right:0px; }
.product .offer .dropdown-menu .info-offer .price-old{display:block; font-weight:500; color:#767676; font-size:13px; position:relative; padding-right:9px; display:inline-block}
.product .offer .dropdown-menu .info-offer .price-old:before{content:''; width:100%; height:1px; background:var(--color-red); position:absolute; top:50%; left:0; margin-top:-1px;}
.product .offer .dropdown-menu .info-offer .price-old:after{content: '₫'; padding-left:2px; font-size:12px; display:inline-block; position:absolute; top:0px; right:0px; }
/* Giảm giá */
.product .offer.discount{}
.product .offer.discount .nav-dropOffer b{color:var(--color-green)}
.product .offer.discount .nav-dropOffer:after{background:var(--color-green);}
.product .offer.discount .dropdown-menu{border:1px solid var(--color-green)}
.product .offer.discount .dropdown-menu .info-offer{display:table; padding-top:10px;}
.product .offer.discount .dropdown-menu .info-offer .colL{padding-right:10px; width:100%; display:table-cell;}
.product .offer.discount .dropdown-menu .info-offer .colR{text-align:right; display:table-cell; min-width:50px;}
/* Quà tặng kèm */
.product .offer.gift{}
.product .offer.gift .nav-dropOffer{padding-left:48px}
.product .offer.gift .nav-dropOffer img{width:36px; height:36px; top:3px; left:3px; position:absolute; border-radius:5px;}
.product .offer.gift .nav-dropOffer b{color:#ec308e}
.product .offer.gift .nav-dropOffer:after{background:#ec308e;}
.product .offer.gift .dropdown-menu{border:1px solid #ec308e}
.product .offer.gift .dropdown-menu label{margin:0; padding:10px 0; width:100%; float:left; display:block; }
.product .offer.gift .dropdown-menu .gift-product{width:100%; position:relative; float:left; min-height:70px; padding-left:75px; }
.product .offer.gift .dropdown-menu .gift-product img{width:70px; position:absolute; top:0; left:0; }
.product .offer.gift .dropdown-menu .gift-product h4{font-size:14px; margin: 0 0 5px 0; width:100%; font-weight:normal}
/* Ưu đãi mua kèm */
.product .offer.together{}
.product .offer.together .nav-dropOffer{padding-left:48px}
.product .offer.together .nav-dropOffer img{width:36px; height:36px; top:3px; left:3px; position:absolute; border-radius:5px;}
.product .offer.together .nav-dropOffer b{color:#634c9f}
.product .offer.together .nav-dropOffer:after{background:#634c9f;}
.product .offer.together .dropdown-menu{border:1px solid #634c9f}
.product .offer.together .dropdown-menu label{margin:0; padding:10px 0; width:100%; float:left; display:block; }
.product .offer.together .dropdown-menu .together-product{width:100%; position:relative; float:left; min-height:70px; padding-left:75px; }
.product .offer.together .dropdown-menu .together-product img{width:70px; position:absolute; top:0; left:0; }
.product .offer.together .dropdown-menu .together-product h4{font-size:14px; margin: 0 0 5px 0; width:100%; font-weight:normal}
.product .offer.together .dropdown-menu .buy-together{background:var(--color-bg); width:100%; line-height:26px; display:block; float:left; border-radius:5px; margin-top:10px; font-size:13px; padding: 0 8px; color:var(--color-blue); font-weight:500; position:relative }
.product .offer.together .dropdown-menu .buy-together:after{font-family: "Font Awesome 5";font-weight: 900; content: "\f105"; position:absolute; top:0; right:10px; color:var(--color); font-size:14px;}


.product .wrap-btn{width:calc(100% - 30px); float:left; position:absolute; left:15px; bottom:20px; display:block!important; z-index:2; }
.product .wrap-btn .nav-addtocart{width:100%; height:34px; line-height:34px; color:var(--color-blue); margin: 0px 0 0 0; padding: 0 12px; float:left; border-radius:17px; text-align:left; font-weight:500; transition:.3s; box-shadow: 0 0 0 1px var(--color-blue); font-size:14px; transition:.3s;}
.product .wrap-btn .nav-addtocart:before{content:''; width:16px; height:16px; margin: -8px 0 0 0; background:url(icon/24-plus-line.png) no-repeat 0px 0; background-size: auto 16px; position:absolute; top:50%; right:10px; opacity:.75}
.product .wrap-btn .nav-addtocart:hover{background:var(--color-bg)}
.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)}

/* Thông báo thêm và xóa khỏi giỏ hàng */
.product .alert-addtocart{width:calc(100% - 10px); position:absolute; top:5px;  border-radius:5px 5px 0 0; left:5px; background:#4caf50;  z-index:5; color:#fff; text-align:center; float:left; }
.product .alert-addtocart:before{height:40px; width:100%; background:#4caf50; border-radius:0 0 50% 50%; position:absolute; top:100%; left:0px; content:''; margin-top:-20px;}
.product .alert-addtocart span{font-size:13px; width:100%; display:block; float:left; padding: 7px 5px 0 5px; position:relative; z-index:2;}
.product .alert-addtocart a{font-size:13px; background:#fff; white-space:nowrap; padding: 0px 15px; border-radius:5px; font-weight:500; line-height:24px; margin-top:5px; border-radius:12px; text-align:center; box-shadow: 0 0 0 2px #4caf50; position:absolute; top:100%; left:50%; transform:translateX(-50%); z-index:3; transition:.3s; }
.product .alert-addtocart a:hover{color:var(--color-red)}

.product .alert-removetocart{width:calc(100% - 10px); position:absolute; top:5px;  border-radius:5px 5px; left:5px; background:#f44336;  z-index:5; color:#fff; text-align:center; float:left; }
.product .alert-removetocart:before{height:40px; width:100%; background:#4caf50; border-radius:0 0 50% 50%; position:absolute; top:100%; left:0px; content:''; margin-top:-20px; box-shadow: 0 3px 5px rgba(0,0,0,.15), 0 1px rgba(0,0,0,.07); display:none;}
.product .alert-removetocart span{font-size:13px; width:100%; display:block; float:left; padding: 7px 5px 7px 5px; position:relative; z-index:2;}


/* Tăng/giảm số lượng */
.product .quantity-control{width:calc(100% - 30px); height:34px; line-height:34px; padding: 0 36px; border-radius:17px; text-align:left; font-weight:500; transition:.3s; box-shadow:inset 0 0 0 1px #c6d5e5; font-size:14px; display:block; position:absolute; right:15px; bottom:20px; clear:both; margin-top:20px; float:left;}
.product .quantity-control .qty-val{width:100%; text-align:center; outline:none; text-align:center; border:none; background:none; font-weight:bold; font-size:14px;}
.product .quantity-control .btn-quantity{width:36px; height:36px; position:absolute; top:0; display:flex; align-items:center; justify-content:center;  }
.product .quantity-control .btn-decrease{left:0; background:#ebf2fb; border-radius: 17px 0 0 17px; height:32px; top:1px; left:1px; color:var(--color-blue)}
.product .quantity-control .btn-decrease:before{font-family: "Font Awesome 5";  font-weight: 400; content: "\f068"; font-size:14px;}
.product .quantity-control .btn-delete{background:#ffecec; font-weight:300}
.product .quantity-control .btn-delete:before{color:var(--color-red);content: "\f2ed"; font-size:16px;}
.product .quantity-control .btn-increase{right:0; background:var(--color-blue); color:#fff; border-radius:0 17px 17px 0; height:34px;}
.product .quantity-control .btn-increase:before{font-family: "Font Awesome 5";  font-weight: 400; content: "\f067"; font-size:14px;}


/* Trạng thái tạm hết hàng */
.product.contact .name:before{content:'Tạm hết'; position:absolute; left:0px; bottom:100%;  background-image: linear-gradient(to right, #cdb6f7, #673ab7 20px); margin-bottom:15px; line-height:20px; border-radius:5px 11px 11px 5px; font-size:11px; font-weight:bold; color:#fff; padding: 0 13px 0 7px; text-transform:uppercase}
.product.contact .price{margin-top:25px;}
.product.contact .quantity-control,
.product.contact .price .new,
.product.contact .price .save{display:none;} 

/* Trạng thái hết hàng */
.product.outofstock .name:before{content:'Hết hàng'; position:absolute; left:0px; bottom:100%;  background-image: linear-gradient(to right, #ff4545, #8d0a00 20px); margin-bottom:15px; line-height:20px; border-radius:5px 11px 11px 5px; font-size:11px; font-weight:bold; color:#fff; padding: 0 13px 0 7px; text-transform:uppercase}
.product.outofstock .price{margin-top:25px;}
.product.outofstock .quantity-control,
.product.outofstock .price .new,
.product.outofstock .price .save{display:none;}





@media (max-width:767px) {
    .product{border-radius:7px; background:#fff;}
}

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


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

/* Item food */
.item-food{width:100%; float:left; padding:0; padding-bottom:55px; position:relative;}
.item-food .wrap-img{width:100%; position:relative;}
.item-food .wrap-img:before{content:''; padding-top:100%; display:block;}
.item-food .wrap-img a{width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden; }
.item-food .wrap-img a img{width:inherit; height:inherit; object-fit:cover; border-radius:10px;}
.item-food .nav-name{ display:block; margin-top:15px;}
.item-food .nav-name h3{font-weight:500; font-size:15px;}
.item-food .wrap-tags{width:100%; float:left; position:relative; display:flex; margin-top:10px;}
.item-food .wrap-tags .tag{background:var(--color-bg); padding: 0 10px; line-height:26px; height:26px; font-size:13px; margin-right:5px; font-weight:500; border-radius:5px; white-space:nowrap}
.item-food .wrap-tags .tag:before{content:'';font-family: "Font Awesome 5"; font-weight: 400; color:var(--color-red); font-size:14px; padding-right:7px;}
.item-food .wrap-tags .tag:first-child:before{content: "\f500";}
.item-food .wrap-tags .tag:first-child:after{content:'Người'; padding-left:3px; opacity:.6; font-size:13px;}
.item-food .wrap-tags .tag:nth-child(2):before{content: "\f017"; }
.item-food .wrap-tags .tag:nth-child(2):after{content:"Phút"; padding-left:3px; opacity:.6; font-size:13px;}
.item-food .difficulty{width:100%; float:left; position:relative; clear:left; display:flex;  margin-top:15px; padding-left:85px;}
.item-food .difficulty:before{content:'Độ khó món:'; font-size:13px; position:absolute; top:-2px; left:0;}
.item-food .wrap-btn{position:absolute; left:0; bottom:0; padding: 0; width:100%;}
.item-food .wrap-btn a.nav-quickView{width:calc(100% - 45px); height:34px; line-height:34px; color:var(--color-blue); margin: 0px 0 0 0; padding: 0 12px; float:left; border-radius:17px; text-align:left; font-weight:500; transition:.3s; box-shadow: 0 0 0 1px var(--color-blue); font-size:14px; transition:.3s; position:relative;}
.item-food .wrap-btn a.nav-quickView:after{content: "\f067";font-family: "Font Awesome 5"; font-weight: 300; font-size:16px; position:absolute; color:var(--color); opacity:.7; position:absolute; top:0; right:15px; }
.item-food .wrap-btn a.nav-quickView:hover{background:var(--color-bg)}
.item-food .wrap-btn a.nav-wishlist{width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:16px; float:right; border-radius:50%; box-shadow: 0 0 0 1px var(--color-border); color:var(--color); transition:.3s;}
.item-food .wrap-btn a.nav-wishlist:hover{background:var(--color-bg)}

/******************************************************************/
/*                            bootrap                             */
/******************************************************************/

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

/* Modal Bootstrap  */
.modal-backdrop{transition:.3s; background:rgba(2,11,39,.5);}

.myModal {}
.myModal .modal-content{border-radius:7px; border:none;}
.myModal .nav-close{width:32px; height:32px;top:15px; right:15px; position:absolute; color:rgba(0,0,0,.5); background:var(--color-bg); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.3s;}
.myModal .nav-close:hover{transform:rotate(90deg); color:var(--color)}
.myModal .modal-content .modal-header{border-bottom:none; padding: 0 20px;}
.myModal .modal-content .modal-header .modal-title{ font-weight:bold;  padding-top:20px; font-size:16px;}
.myModal .modal-content .modal-body{padding: 15px 20px 0 20px; display:block; width:100%;float:left;}
.myModal .modal-content .modal-footer{clear:both; border:none;}


/* Modal Thông báo thêm vào giỏ hàng */
#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; box-shadow: 0 1px var(--color-border) }
header .head-top{width:100%; float:left; position:relative; height:40px; line-height:40px; font-size:13px; box-shadow: 0 1px var(--color-border)}
header .head-top span{opacity:.75}
header .head-top b{padding-left:5px; color:var(--color-blue); font-weight:600}
header .head-top a{float:right; font-size:13px; transition:.3s; position:relative; font-weight:500}
header .head-top a:hover{color:var(--color-blue); opacity:1;}
header .head-top a.nav-tracking{ margin-left:30px;}
header .head-top a.nav-tracking:before{content:''; width:1px; height:12px; margin-top:-6px; background:var(--color-border); position:absolute; top:50%; left:-15px}

@media (max-width:767px) {
    header .head-top{display:none;}
    header.is-fixed{  position: fixed; top: 0;left: 0; z-index:100; transition: transform 0.3s ease-in-out; box-shadow:none; }
    header.is-hidden{transform: translateY(-100%);}
}

@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;}
header .head-main .col-main{position:relative; width:100%; float:left; display:table; height:150px; padding-bottom:45px; z-index:5;}
header .head-main .col-main .col-logo{display:table-cell; text-align:left; vertical-align:middle; padding-right:20px; min-width:320px;}  
header .head-main .col-main .col-logo a.logo{outline:none!important; position:relative; display:block; float:left; margin-top:-15px; }
header .head-main .col-main .col-logo a.logo svg{height: 40px;}
header .head-main .col-main .col-logo a.logo svg path:first-child{fill:var(--color2)}
header .head-main .col-main .col-logo a.logo svg path:last-child{fill:var(--color1)}
header .head-main .col-main .col-logo a.logo:before{content:'Vui khỏe mỗi ngày'; margin: -2px 0 0 0; position:absolute; top:100%; left:42px; font-size:13px; font-weight:500; white-space:nowrap }
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; width:100%;} 
header .head-main .col-main .col-right{display:table-cell; vertical-align:middle;  text-align:right; padding-left:20px;}
header .head-main .col-main .col-right .inner{display:flex;}

@media (max-width:767px) {
    header .head-main{background-image: linear-gradient(to bottom, var(--color-blue), var(--color-blue));}
    header .head-main .col-main{display:block; padding:0; height:60px; display:flex; align-items:center; width:calc(100% + 10px); margin-left:-5px; }
    header .head-main .col-main .col-logo{min-width:36px; display:block; float:left; padding-right:10px; position:initial}
    header .head-main .col-main .col-logo a.logo{width:36px; height:36px; background:url(Logo-tienkhang-icon-white.png) no-repeat center; background-size: auto 25px; border:1px solid rgba(255,255,255,.5); border-radius:7px; margin:0; position:absolute; left:0; top:12px; }
    header .head-main .col-main .col-logo a.logo:before,
    header .head-main .col-main .col-logo a.logo svg{display:none;}
    header .head-main .col-main .col-search{width:initial; position:initial}
    header .head-main .col-main .col-right{display:none;}
}

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

    
}

/* Hotline */
.drop-hotline{display:block; color:#000; position:absolute; bottom:16px; right:0; }
.drop-hotline .nav-drop{display:block; white-space:nowrap ; padding:0; border-radius:5px; font-weight:600; font-size:15px; line-height:21px; padding-right:15px; transition:.3s; }
.drop-hotline .nav-drop:hover{color:var(--color-red)}
.drop-hotline .nav-drop:before{content:'Hotline'; position:absolute; top:0;  height:20px; right:100%;  background: linear-gradient(90deg, var(--color-red) 0, #ea580c 100%); color:#fff;font-weight:600; font-size:11px; padding: 0 7px; border-radius:5px;text-transform:uppercase; margin-right:10px;}
.drop-hotline .nav-drop:after{font-family: "Font Awesome 5"; font-weight: 400; content: "\f107"; position:absolute; top:0; right:0; font-size:14px; opacity:.7}  
.drop-hotline .dropdown-menu{display:block; border:none; left:initial!important; right:-18px; top:100%!important; border-radius:10px; box-shadow: 0 10px 50px 0 rgba(0,0,0,.1); min-width: 300px; margin-top:0px; padding:10px 25px 10px 25px; transition:.3s; opacity:0; visibility:hidden; transform:initial!important}
.drop-hotline .dropdown-menu ul{width:100%; float:left; position:relative; margin:0; padding:0; list-style:none;}
.drop-hotline .dropdown-menu ul li{width:100%; float:left; position:relative; padding: 10px 0; border-bottom:1px solid var(--color-border)}
.drop-hotline .dropdown-menu ul li:last-child{border:none;}
.drop-hotline .dropdown-menu ul li a{text-decoration:none; font-weight:600; font-size:15px; white-space:nowrap; transition:.3s;}
.drop-hotline .dropdown-menu ul li a:hover{color:var(--color-red)}
.drop-hotline .dropdown-menu ul li a:before{content:'-'; padding: 0 8px; font-size:14px; color:#000; font-weight:500;}
.drop-hotline .dropdown-menu ul li a:first-of-type:before{display:none;}
.drop-hotline .dropdown-menu ul li .title{font-size:13px; opacity:.75; padding-bottom:2px; font-weight:500 }
.drop-hotline .dropdown-menu ul li .title:before{font-family: "Font Awesome 5"; display:none; font-weight: 900; font-size:16px; content: "\f82d"; width:44px; height:44px; line-height:44px; text-align:center; box-shadow: 0 0 0 1px rgba(0,0,0,.1); border-radius:50%; position:absolute; top:0; left:0;}
.drop-hotline.show .dropdown-menu{opacity:1; visibility:initial; margin-top:10px;}

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

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

/* Account */
.wrap-account{position:relative; display:block; float:left; margin-top:5px; padding-right:20px;}
.wrap-account:after{content:''; background:var(--color-border); width:1px; height:30px; margin-top:-15px; position:absolute; top:50%; right:0;}
.wrap-account .nav-login{min-height:40px; position:relative; padding-left:50px; float:left;}
.wrap-account .nav-login:hover{color:var(--color)}
.wrap-account .nav-login .icon{width:38px; height:38px; display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; box-shadow: 0 0 0 1px var(--color-border); border-radius:50%;}
.wrap-account .nav-login img{height:24px; width:24px; }
.wrap-account .nav-login span{position:relative; font-weight:500; padding-top:17px; display:inline-block; white-space:nowrap;}
.wrap-account .nav-login span:before{content:'Đăng nhập'; position:absolute; top:0px; left:0; font-size:12px; font-weight:500; opacity:.6}
.wrap-account .nav-account{min-height:40px; position:relative; padding-left:50px; float:left;}
.wrap-account .nav-account:hover{color:var(--color)}
.wrap-account .nav-account .avatar{width:38px; height:38px; display:block; align-items:center; justify-content:center; position:absolute; top:0; left:0; box-shadow: 0 0 0 1px var(--color-border); border-radius:50%; padding:5px;}
.wrap-account .nav-account .avatar img{width:28px; height:28px; border-radius:50%; }
.wrap-account .nav-account span{position:relative; font-weight:600; padding-top:17px; display:inline-block; white-space:nowrap;  min-width:55px; display:inline-block; text-align:left;}
.wrap-account .nav-account span:before{content:'Xin chào,'; position:absolute; top:0px; left:0; font-size:12px; font-weight:500; opacity:.6}


/* Cart */
.wrap-cart{position:relative; float:right; margin-left:20px; z-index:10; }
.wrap-cart .nav-cart{position:relative; display:block; padding-top:24px;}
.wrap-cart .nav-cart svg{width:24px; position:relative;  position:absolute; top:0; left:50%; transform:translateX(-50%)}
.wrap-cart .nav-cart span{font-size:13px; font-weight:500; white-space:nowrap}
.wrap-cart .nav-cart b{min-width:16px; height:16px; margin-left:5px; border-radius:8px; padding: 1px 0 0 0px; background:var(--color-red); color:#fff; text-align:center; font-weight:600; font-size:11px; position:absolute; top:-5px; left:50%; display:flex; align-items:center; justify-content:center; z-index:3; }

/* Ảnh sản phẩm bay vào giỏ sau khi API thêm giỏ trả thành công. */
.tk-cart-fly-image{position:fixed;z-index:1100;pointer-events:none;object-fit:cover;border-radius:7px;box-shadow:0 8px 20px rgba(0,0,0,.25);transition:left .68s cubic-bezier(.2,.8,.2,1),top .68s cubic-bezier(.2,.8,.2,1),width .68s ease,height .68s ease,opacity .68s ease,transform .68s ease;}

/* wishlist */
.wrap-wishlist{}
.wrap-wishlist{position:relative; float:right; margin-left:20px; z-index:10; }
.wrap-wishlist a{position:relative; display:block; padding-top:24px;}
.wrap-wishlist a svg{width:24px; position:relative;position:absolute; top:0; left:50%; transform:translateX(-50%)}
.wrap-wishlist a span{font-size:13px; font-weight:500; white-space:nowrap}
.wrap-wishlist a b{min-width:16px; height:16px; margin-left:5px; border-radius:8px; padding: 1px 0 0 0px; background:var(--color-red); color:#fff; text-align:center; font-weight:600; font-size:11px; position:absolute; top:-5px; left:50%; display:flex; align-items:center; justify-content:center; z-index:3;}



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

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

@media (min-width:992px) {
    .drop-category{float:right; position:relative; position:absolute; left:0; bottom:-1px; z-index:20;}
    .drop-category .nav-drop{height:50px; width:290px; padding:0px; font-size:14px; display:block; position:relative; text-align:left; padding-left:50px; border: 1px solid var(--color-border); border-bottom:0; border-radius:10px 10px 0 0; }
    .drop-category .nav-drop:after{font-family: "Font Awesome 5";font-weight: 400;content:"\f107"; position:absolute; top:0; right:20px; font-size:18px; white-space:nowrap; text-transform:uppercase; line-height:48px; }
    .drop-category .nav-drop span{width: 18px; height:2px; background: #000; display:block; position:absolute; top:50%; left:20px; margin-top:-2px; opacity:.5}
    .drop-category .nav-drop span:before{content:''; width:100%; height:2px; background:#000; position:absolute; top:-6px; left:0; }
    .drop-category .nav-drop span:after{content:''; width:100%; height:2px; background:#000; position:absolute; bottom:-6px; left:0;}
    .drop-category .nav-drop label{line-height:48px; margin:0; font-weight:600;  cursor:pointer; position:relative; font-size:15px;}
    
}

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

ol.product-propose{width:100%; float:left; position:relative; margin:0 0 0 ; padding:0 15px 10px 15px; 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:500; text-decoration:none; font-weight:normal; font-size:14px; 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:14px; 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:15px;}
ol.product-propose li .price .new:after{content:'₫'; position:absolute; right:0; top:0; font-size:14px; }

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

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

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

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

/*  */
.horizontal-menu{width:calc(100% - 320px); position:absolute; right:0px; bottom:0;}
.horizontal-menu ul{margin:0; padding:0; width:100%; list-style:none; float:left;}
.horizontal-menu ul li{float:left; position:relative; padding-right:25px; }
.horizontal-menu 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;}
.horizontal-menu ul li a.nav{font-weight:600; line-height:48px; transition:.3s; font-size:16px; padding: 0 0px;}
.horizontal-menu ul li:first-child a.nav{padding-left:0;}
.horizontal-menu ul li:last-child:before{display:none;}
.horizontal-menu ul li.menu-last{padding-right:0; float:right;}
.horizontal-menu ul li a.nav:hover{color:var(--color2)}
.horizontal-menu 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:48px; }
.horizontal-menu 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; }
.horizontal-menu ul li.dropdown .dropdown-menu li{padding:0 ; margin:0; width:100%; float:left; position:relative;}
.horizontal-menu 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}
.horizontal-menu ul li.dropdown .dropdown-menu a:hover{color:var(--color2)}
.horizontal-menu ul li.lastsub{float:right; padding-right:0;}
.horizontal-menu ul li.lastsub a.nav-drop{padding-left:50px; text-transform:initial; font-size:15px; font-weight:500;}
.horizontal-menu 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); }
.horizontal-menu ul li.lastsub a.nav-drop .icon svg{}
.horizontal-menu ul li.lastsub .dropdown-menu{left:initial!important; right:0!important;}
.horizontal-menu ul li.nav-orderFood{float:right; padding-right:0;}
.horizontal-menu ul li.nav-orderFood a{ padding: 0 0 0 50px; display:block; line-height:initial; }
.horizontal-menu 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; }
.horizontal-menu ul li.nav-orderFood a label{margin:0; cursor:pointer; font-size:16px; font-weight:900; transition:.3s; }
.horizontal-menu 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;}
.horizontal-menu ul li.nav-orderFood a:hover{color:var(--color3)}
.horizontal-menu ul li.mega-dropdown{position:initial;}
.horizontal-menu ul li.mega-dropdown .dropdown-menu{width:100%!important; opacity:1; visibility:initial; padding: 0 15px 20px 15px;}
.horizontal-menu ul li.mega-dropdown .dropdown-menu .col-nav{display:table-cell; vertical-align:top; padding: 0 15px;}
.horizontal-menu 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; }
.horizontal-menu 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;}
.horizontal-menu ul li.mega-dropdown .dropdown-menu.food-menu{}
.horizontal-menu ul li.mega-dropdown .dropdown-menu.food-menu .col-nav ul{width:calc(100% + 10px); margin-left:-5px;}
.horizontal-menu ul li.mega-dropdown .dropdown-menu.food-menu .col-nav li{padding: 5px;}
.horizontal-menu ul li.mega-dropdown .dropdown-menu.food-menu .col-nav ul li a:not(.nav-male,.nav-female ){background:rgba(0,0,0,.04); border-radius:5px; padding-left:10px; padding-right:10px; }
.horizontal-menu ul li.mega-dropdown .dropdown-menu.food-menu .col-nav ul li a:hover{background:#dbeaf9}

.horizontal-menu ul li.mega-dropdown .dropdown-menu.food-menu .col-nav:first-of-type{width:60%}
.horizontal-menu ul li.mega-dropdown .dropdown-menu.food-menu .col-nav:first-of-type ul li{width:33.33333333%;}
.horizontal-menu ul li.mega-dropdown .dropdown-menu.food-menu .col-nav:last-of-type ul li{width:33.33333333%;}

.horizontal-menu ul li.mega-dropdown .dropdown-menu.food-menu .nav-col{cursor:default}
.horizontal-menu ul li.mega-dropdown .dropdown-menu.food-menu .nav-male,
.horizontal-menu ul li.mega-dropdown .dropdown-menu.food-menu .nav-female{line-height:60px; padding:0; background:rgba(0,0,0,.04); margin: 5px 0; border-radius:5px; font-weight:bold;padding-left:45px; color:#fff; text-transform:uppercase; box-shadow:inset 0 0 rgba(0,0,0,0); transition:.3s;}
.horizontal-menu ul li.mega-dropdown .dropdown-menu.food-menu .nav-male{ background:#0ea6fa; transition:.3s;}
.horizontal-menu 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; }
.horizontal-menu ul li.mega-dropdown .dropdown-menu.food-menu .nav-female{background:#eb2c6b}
.horizontal-menu 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; }
.horizontal-menu ul li.mega-dropdown .dropdown-menu.food-menu .nav-male:hover,
.horizontal-menu ul li.mega-dropdown .dropdown-menu.food-menu .nav-female:hover{box-shadow:inset 0 60px rgba(0,0,0,.15)}



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

@media (min-width:768px) and (max-width:991px) {
    .horizontal-menu{width:calc(100% - 60px); position:absolute; right:0px; bottom:0;}
    .horizontal-menu ul li{padding-right:16px;}
    .horizontal-menu ul>li:first-child>a.nav{font-size:0;}
    .horizontal-menu ul>li:first-child>a.nav:before{font-family: "Font Awesome 5"; font-weight: 900; content: "\f015"; font-size:16px; }
    .horizontal-menu ul>li:last-child{padding-right:0px;}
    
    .horizontal-menu 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;}
    .horizontal-menu ul li.dropdown.show .dropdown-menu{margin-top:3px!important; opacity:1; visibility:initial}
    .horizontal-menu ul li.dropdown.show a.nav{color:var(--color2)}
    .horizontal-menu ul li.mega-dropdown .dropdown-menu.food-menu .col-nav:last-of-type li{width:25%;}
}

@media (min-width:992px){
    .horizontal-menu 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;}
    .horizontal-menu ul li.dropdown:hover a.nav{color:var(--color2)}
    .horizontal-menu ul li.dropdown:hover a.nav:after{opacity:1;}
    .horizontal-menu ul li.dropdown:hover .dropdown-menu{margin-top:-1px!important; opacity:1; visibility:initial}
    .horizontal-menu ul li.mega-dropdown .dropdown-menu{display:table}
    
}
@media (min-width:992px) and (max-width:1199px) {

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

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

    
}

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




/*********************************************************/
/*                     main search                      */
/*********************************************************/

/* 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:46px; height:46px; color:var(--color2); font-size:16px; text-align:center; line-height:46px; border-radius:50%; display:block; text-decoration:none; transition:.3s;position:absolute; top:0px; right:5px; z-index:5; pointer-events:none}
    .swap-search .textbox{position:relative; float:left;  width:100%; background:#f3f4f6; padding: 0 55px 0 20px; font-weight:500; border:none; font-size:15px; transition:.3s; height:46px; 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:calc(100% - 135px); float:left; position:absolute; top:12px; left:45px}
    .swap-search .textbox{width:100%; background:#fff; border-radius:5px; height:36px; border:none; padding: 0 40px 0 10px; outline:none; font-size:14px; font-weight:500;}
    .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;}
    
}


.ui-autocomplete{display:none!important}
.searchResult-panel{width:100%; float:left; position:absolute; top:50px; left:0; background:#fff;  border-radius:10px; box-shadow: 0 0 10px rgba(0,0,0,.03), 0 0 0 1px rgba(0,0,0,.03); display:block;}
.searchResult-panel .autocomplete-panel{width:100%; float:left; position:relative; padding:20px; display:block;}
.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;}
.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:60px; border-radius: 0 0; height: calc(100% - 120px);}
    .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){
   
}


/* sitemap */
.wrap-sitemap{width:100%; float:left; position:relative; margin:0px 0; padding: 20px 0 }
.wrap-sitemap .title-page{display:none;}
.wrap-sitemap ul{list-style:none; margin:0; padding:0; position:relative; float:left; display:block; }
.wrap-sitemap ul li{position:relative; font-size:13px;  font-weight:500; padding-right:25px; align-items:center; float:left;  }
.wrap-sitemap ul li:first-child{padding-left:25px;}
.wrap-sitemap ul li:first-child:before{font-family: "Font Awesome 5"; font-weight: 400; content: "\f80a"; font-size:14px; opacity:.75; position:absolute; top:0px; left:0;}
.wrap-sitemap ul li:after{font-family: "Font Awesome 5"; font-weight:300; content: "\f105"; font-size:16px; float:right; color:rgba(0,0,0,.5); position:absolute; top:0; right:10px; line-height:24px;}
.wrap-sitemap ul li:last-child:after{display:none;}
.wrap-sitemap ul li a{text-decoration:none;  margin:0; padding:0; font-size:13px;line-height:22px; }
.wrap-sitemap ul li h4,
.wrap-sitemap ul li h1{font-size:13px; margin:0; padding:0; float:left; line-height:24px; }

@media (max-width:767px){
    .wrap-sitemap{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;}
}




/******************************************************************/
/*                             Footer                             */
/******************************************************************/
footer{}

@media (max-width:767px){
    footer{display:none;}
}
/* Nhận bản tin */
.footer-subscribe{width:100%; float:left; position:relative; background:var(--color2)}
.footer-subscribe .col-subscribe{padding: 60px 15px; color:#fff; background:url(subscribe-bg.png) no-repeat right bottom}
.footer-subscribe h3{}
.footer-subscribe span{max-width:360px; display:block; clear:both;opacity:.75; line-height:24px; margin-top:20px;}
.footer-subscribe .wrap-input{width:100%; max-width:470px; position:relative; float:left; clear:both; margin:25px 0 10px 0;}
.footer-subscribe .wrap-input:before{font-family:"Font Awesome 5"; content: "\f0e0"; font-weight:400; position:absolute; top:19px; left:20px; z-index:5; position:absolute; color:rgba(0,0,0,.4); font-size:15px; }
.footer-subscribe .wrap-input input[type='text']{width:100%; height:60px; padding: 0 110px 0 50px; background:#fff; border-radius:5px; border:none; outline:none; font-weight:normal; font-size:15px;}
.footer-subscribe .wrap-input .nav-send{ line-height:52px; height:52px; position:absolute; top:4px; right:4px; text-align:center; font-weight:500; background:var(--color1); width:100px; border-radius:4px; z-index:2; color:#fff; box-shadow: inset 0 0 rgba(0,0,0,0); transition:.3s;}
.footer-subscribe .wrap-input .nav-send:hover{box-shadow: inset 0 52px rgba(0,0,0,.15)}

@media (min-width:768px) and (max-width:991px) {
    .footer-subscribe{ background:var(--color2) url(subscribe-bg.png) no-repeat right bottom}
    .footer-subscribe .col-subscribe{background:none;}
}

/* Service */
.footer-service{width:100%; float:left; position:relative; background:rgba(0,0,0,.03)}
.footer-service:before{content:''; width:100%; height:100%; position:absolute; top:0; left:0; background:var(--color2); opacity:.03}
.footer-service .container{position:relative; z-index:3;}
.footer-service .inner{width:100%; float:left; position:relative; border-bottom:1px solid rgba(0,0,0,.07); padding: 40px 0}
.footer-service .inner ul{width:100%; margin:0; padding:0; list-style:none; clear:both; display:table;}
.footer-service .inner ul li{width:25%; text-align:center; position:relative; border-right:1px solid rgba(0,0,0,.1); display:table-cell; vertical-align:middle; padding: 0 30px;}
.footer-service .inner ul li:last-child{border:none;}
.footer-service .inner ul li .iconbox{display:table; margin: 0 auto}
.footer-service .inner ul li span{color:#000; text-align:left; line-height:20px; display:table-cell; text-align:left; vertical-align:middle; padding-left:15px; font-weight:500;}
.footer-service .inner ul li .icon{width:32px; position:relative; text-align:center; color:#fff; display:table-cell; vertical-align:middle;}
.footer-service .inner ul li .icon svg{position:relative; z-index:2;}
.footer-service .inner ul li .icon:before{content:''; background:var(--color2); width:32px; height:32px; margin-top:-16px; position:absolute; top:50%; left:0; transform:rotate(45deg); border-radius:5px;}

@media (min-width:768px) and (max-width:991px) {
    .footer-service .inner ul li{padding: 0 10px; vertical-align:top; }
    .footer-service .inner ul li .icon{position:absolute; left:50%; margin-left:-16px; top:0;}
    .footer-service .inner ul li .iconbox{text-align:center; display:block; width:100%; position:relative; padding-top:40px;}
    .footer-service .inner ul li .iconbox span{text-align:center; padding:0; width:100%; float:left;}
}

@media (min-width:992px) and (max-width:1199px) {
    .footer-service .inner ul li{padding: 0 15px;}
}

/* Info */
.footer-info{width:100%; float:left; position:relative; padding:40px 0; background:rgba(0,0,0,.03)}
.footer-info:before{content:''; width:100%; height:100%; position:absolute; top:0; left:0; background:var(--color2); opacity:.03; }
.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;}
.footer-info .recommendation{width:100%; float:left; position:relative; color:#000; border-top:1px solid rgba(0,0,0,.07); padding-top:30px; margin-top:30px; line-height:24px;}
.footer-info .recommendation a{color:var(--color3); font-weight:500;}

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


/* Contact */
.footer-contacts{width:100%; float:left; position:relative; padding:30px 0; box-shadow: 0 -1px rgba(0,0,0,.0)}
.footer-contacts .mobile{display:block; float:left; padding: 0 0 0 55px; height:42px; color:#000; position:relative; }
.footer-contacts .mobile .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;}
.footer-contacts .mobile .icon svg{height:24px;}
.footer-contacts .mobile a.main-link{display:block; font-size:19px; width:100%; float:left; margin-top:-2px; color:var(--color3); font-weight:bold;}
.footer-contacts .mobile a.sub-link{clear:both; font-size:17px; margin-top:-6px; float:left; font-weight:900; letter-spacing:1px;}
.footer-contacts .social{float:right; position:relative; margin-top:2px;}
.footer-contacts .social .title{float:left; text-align:right; margin-top:-1px; margin-right:5px;}
.footer-contacts .social .title label{margin:0; font-weight:bold; color:#000; display:block;}
.footer-contacts .social .title span{display:block; opacity:.7; font-size:13px; float:left; margin-top:-2px; clear:both;}
.footer-contacts .social ul{margin:0; padding:0; list-style:none; float:right;}
.footer-contacts .social ul li{float:left; margin-left:10px;}
.footer-contacts .social ul li a{width:36px; height:36px; border-radius:50%; box-shadow: 0 0 0 1px rgba(0,0,0,.1); color:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; position:relative;font-size:14px; display:flex; float:left;transition:.3s;}
.footer-contacts .social ul li a:hover{box-shadow: 0 0 0 1px var(--color2); color:var(--color2)}

.footer-contacts .shopping{width:auto; text-align:right; position:relative; margin:0 0 0; padding:0 0 0 80px; float:right; }
.footer-contacts .shopping:before{content:'Mua hàng:'; font-weight:500; position:absolute; left:0; bottom:0; line-height:32px; }
.footer-contacts .shopping a{padding: 0 0px 0 15px;}
.footer-contacts .shopping a img{height: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}
.footer-copyright .inner .col-left a{color:var(--color2)}
.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;}



/* Modal 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)}
}


/******************************************************************/
/*                      Element UI  Mobile                        */
/******************************************************************/
.tabbar{position:fixed; z-index:100; height:60px; width:100%; background:#fff; left:0; bottom:0; display:flex; padding: 0 5px; box-shadow: 0 0 20px rgba(0,0,0,.15), 0 -1px rgba(0,0,0,.05)}
.tabbar .nav{flex:1; position:relative; height:60px; padding: 37px 5px 0 5px; text-align:center; display:block;}
.tabbar .nav img{width:24px!important; height:24px!important; position:absolute; top:13px; left:50%; margin-left:-12px;}
.tabbar .nav span{font-size:12px; white-space:nowrap; font-weight:500; display:block; color:var(--color)}
.tabbar .nav .shoppingcartNumber{min-width: 16px; height: 16px; margin-left: 3px; border-radius: 8px; padding: 1px 0 0 0px; background: var(--color-red); color: #fff; text-align: center;font-weight: 600;font-size: 11px; position: absolute; top: 7px; left: 50%; display: flex;align-items: center; justify-content: center; z-index: 3;}
.tabbar .nav.active:before{content:''; width:30px; margin-left:-15px; height:4px; background:var(--color-blue); top:0; left:50%; position:absolute; border-radius: 0 0 4px 4px}
.tabbar .nav-buy{flex:1.8; padding:8px 0 }
.tabbar .nav-buy a{background:var(--color-red); width:100%;  color:#fff; display:block; text-align:center; height:44px; padding-top:20px; border-radius:5px; position:relative;}
.tabbar .nav-buy a span{font-size:12px; font-weight:500; display:block; position:absolute; top:5px; left:0; width:100%;}
.tabbar .nav-buy a b{font-weight:bold; position:relative; padding-right:10px; margin-top:0px; font-size:14px;}
.tabbar .nav-buy a b:after{content: '₫'; position: absolute; top: 0px; right: 0; font-size: 12px;}

.pane-tabbarMobile{width:100%; height:calc(100% - 60px); position:fixed; top:0; left:0; background:var(--color-border); z-index:90; opacity:0; visibility:hidden; transition:.3s; }
.pane-tabbarMobile.is-view{opacity:1; visibility:initial}

.paneMobile{position:fixed; top:60px; left:0; height:calc(100% - 120px); width:100%; z-index:90;  background:var(--color-bg); overflow:hidden; overflow-y:auto; padding: 0px 5px 5px 5px; opacity:0; visibility:hidden; transition:.3s;}
.paneMobile h4{display:block; font-weight:600; font-size:15px; margin:0; padding: 15px 0 5px 5px; display:block; clear:both}
.paneMobile ul.single-list.single-list{width:100%; margin:5px 0 0 0; padding:10px 20px 5px 20px; list-style:none; float:left; background:#fff; border-radius:7px;}
.paneMobile ul.single-list:first-child{margin:0;}
.paneMobile ul.single-list li{width:100%; float:left; position:relative; font-size:14px; border-bottom:1px solid var(--color-border)}
.paneMobile ul.single-list li:last-child{border:none;}
.paneMobile ul.single-list li.title{font-weight:bold; border:none; margin-bottom:5px; color:var(--color-blue) }
.paneMobile ul.single-list li a{line-height:44px; background:url(icon/24-arrow-right-line.png) no-repeat right center; background-size: auto 18px; width:100%; display:flex; position:relative; padding-left:0px;}
.paneMobile.is-view{opacity:1; visibility:initial}
.paneMobile .accordionMobile-pane{width:100%; list-style:none; float:left; float:left;}
.paneMobile .accordionMobile-pane .card{width:100%; display:block; border:none; background:none; border-radius:0; font-size:14px; background:#fff; padding:0px 20px; border-radius:7px; margin-top:5px; float:left; }
.paneMobile .accordionMobile-pane .card .card-header{border:none; background:none; padding:0; position:relative}
.paneMobile .accordionMobile-pane .card .card-header a.card-link{font-weight:bold; color:var(--color); }
.paneMobile .accordionMobile-pane .card .card-header a.nav-toggle{font-size:14px; height:24px; margin-top:-12px; line-height:24px; width:24px; text-align:center; position:absolute; top:50%; right:-5px; border-radius:5px; background:var(--color-bg) url(icon/24-arrow-top-line.png) no-repeat center; background-size: auto 18px }
.paneMobile .accordionMobile-pane .card .card-header a.nav-toggle + a.card-link{line-height:55px; color:var(--color-blue)}
.paneMobile .accordionMobile-pane .card .card-header a.nav-toggle.collapsed{background:var(--color-bg) url(icon/24-arrow-bottom-line.png) no-repeat center; background-size: auto 18px;}
.paneMobile .accordionMobile-pane .card .card-header a.nav-toggle.collapsed + a.card-link{font-weight:normal; color:var(--color); line-height:45px;}
.paneMobile .accordionMobile-pane .card .card-body{margin:-10px 0 0 0; padding:0 0 10px 0; list-style:none; width:100%; float:left;}
.paneMobile .accordionMobile-pane .card .card-body li{width:100%; float:left; position:relative; font-size:14px; border-bottom:1px solid var(--color-border)}
.paneMobile .accordionMobile-pane .card .card-body li:last-child{border:none;}
.paneMobile .accordionMobile-pane .card .card-body li a{line-height:44px; background:url(icon/24-arrow-right-line.png) no-repeat right center; background-size: auto 18px; width:100%; display:flex; position:relative; padding-left:0px;}
.paneMobile ul.icon-contact{position:relative; display:block; z-index:initial; bottom:inherit;  right:initial; width:100%; }
.paneMobile ul.icon-contact li{width:calc(50% - 5px); margin: 3px 3px 2px 2px; float:left; clear:initial }
.paneMobile ul.icon-contact li a{box-shadow:none; border:none; border-radius:7px; padding-left:50px; }
.paneMobile ul.icon-contact li a .icon{left:15px;}
.paneMobile ul.icon-contact li a .icon.mess,
.paneMobile ul.icon-contact li a .icon.tel{left:10px;}
.paneMobile ul.icon-contact li a span{display:block; font-size:12px;}
.paneMobile ul.icon-contact li a span:after{margin-top:0;}

/*  */
.tabCatalogMobile{width:100%; float:left; position:relative; display:flex;}
.tabCatalogMobile .col-tab{width:80px;}
.tabCatalogMobile .col-tab ul{width:100%; position:relative; margin:0; padding:0; list-style:none;}
.tabCatalogMobile .col-tab ul li{width:100%; position:relative; float:left; margin-top:5px; border-radius:7px; background:#fff;}
.tabCatalogMobile .col-tab ul li:before{display:block; padding-top:100%; content:'';} 
.tabCatalogMobile .col-tab ul li a{position:absolute; top:0; left:0; width:100%; height:100%; font-size:12px; font-weight:500; text-align:center; padding:37px 5px 0 3px; color:var(--color)}
.tabCatalogMobile .col-tab ul li.active{background:var(--color-blue)}
.tabCatalogMobile .col-tab ul li.active a{color:#fff;}
.tabCatalogMobile .col-conten{width:calc(100% - 80px); float:left; position:relative; padding-left:5px; padding-top:5px;}
.tabCatalogMobile .col-conten .contenTab{width:100%; display:none; float:left; position:relative; font-size:14px;}
.tabCatalogMobile .col-conten .contenTab.active{display:block;}
.tabCatalogMobile .col-conten .contenTab .title-group{width:100%; background:#fff; border-radius:7px; line-height:40px; padding: 0 15px; }
.tabCatalogMobile .col-conten .contenTab .title-group span{font-weight:bold;}
.tabCatalogMobile .col-conten .contenTab .title-group a{font-size:13px; float:right; font-weight:500; color:var(--color-blue)}
.tabCatalogMobile .col-conten .contenTab ul.list-nav{width:100%; margin:5px 0 0 0; background:#fff; border-radius:7px; list-style:none; padding:10px 15px 5px 15px;}
.tabCatalogMobile .col-conten .contenTab ul.list-nav li{width:100%; border-bottom:1px solid var(--color-border)}
.tabCatalogMobile .col-conten .contenTab ul.list-nav li.title{padding-bottom:2px; border-bottom:none; font-weight:bold}
.tabCatalogMobile .col-conten .contenTab ul.list-nav li a{line-height:44px; background:url(icon/24-arrow-right-line.png) no-repeat right center; background-size: auto 18px; width:100%; display:flex; position:relative;}
.tabCatalogMobile .col-conten .contenTab ul.list-nav li:last-child{border:none;}
.tabCatalogMobile .col-conten .contenTab .bestselling{width:100%; position:relative; float:left; margin-top:5px; background:#fff; border-radius:7px; padding: 0 15px;}
.tabCatalogMobile .col-conten .contenTab .bestselling .title{width:100%; float:left; position:relative; margin-top:13px;}
.tabCatalogMobile .col-conten .contenTab .bestselling .title span{font-weight:bold;}
.tabCatalogMobile .col-conten .contenTab .bestselling .title a{font-size:13px; float:right; font-weight:500; color:var(--color-blue); margin-top:1px;}
.tabCatalogMobile .col-conten .contenTab .bestselling .product-propose{margin:0 0 0 -5px; padding:0 0 5px 0; width:calc(100% + 10px); list-style:none; float:left;}
.tabCatalogMobile .col-conten .contenTab .bestselling .product-propose li{width:50%; padding: 5px; float:left; position:relative}
.tabCatalogMobile .col-conten .contenTab .bestselling .product-propose li .wrap-img{max-width:100px; position:relative; display:block; margin: 0 auto;}
.tabCatalogMobile .col-conten .contenTab .bestselling .product-propose li .wrap-img:before{display:block; content:''; padding-top:100%;}
.tabCatalogMobile .col-conten .contenTab .bestselling .product-propose li .wrap-img a{display:block; width:100%; height:100%; position:absolute; top:0; left:0;}
.tabCatalogMobile .col-conten .contenTab .bestselling .product-propose li .wrap-img a img{width:inherit; height:inherit; object-fit:cover}
.tabCatalogMobile .col-conten .contenTab .bestselling .product-propose li .nav-name{width:100%; float:left; font-size:13px; color:var(--color); font-weight:500; margin-top:5px;}
.tabCatalogMobile .col-conten .contenTab .bestselling .product-propose li .price{width:100%; float:left; position:relative; clear:both; font-size:13px;}
.tabCatalogMobile .col-conten .contenTab .bestselling .product-propose li .price .new{color:var(--color-red); font-weight:bold; position:relative; padding-right:10px; display:inline-block; margin: 5px 5px 0 0}
.tabCatalogMobile .col-conten .contenTab .bestselling .product-propose li .price .new:after{content: '₫'; position: absolute; right: 0; top: 0; font-size: 12px;}
.tabCatalogMobile .col-conten .contenTab .bestselling .product-propose li .price .old{font-weight:500; position:relative; padding-right:10px; display:inline-block; opacity:.7}
.tabCatalogMobile .col-conten .contenTab .bestselling .product-propose li .price .old:before{content:''; width:calc(100% - 11px); height:1px; background:var(--color); position:absolute; top:9px; left:0;}
.tabCatalogMobile .col-conten .contenTab .bestselling .product-propose li .price .old:after{content: '₫'; position: absolute; right: 0; top: 0; font-size: 12px;}
.tabCatalogMobile .col-conten .contenTab .bestselling .product-propose li:nth-child(n+5){display:none;}


/* panel Menu Account */
.paneAccountMobile .banner{width:100%; float:left; height:100px; display:block; clear:both; background:#fff; border-radius:7px 7px 0 0; margin-top:5px; overflow:hidden;   }
.paneAccountMobile .banner img{width:inherit; height: inherit; object-fit:cover}
.paneAccountMobile .userInfo{width:100%; float:left; position:relative; padding:15px 10px 20px 95px; background:#fff; border-radius: 0 0 7px 7px}
.paneAccountMobile .userInfo .avatar{width:70px; height:70px; border-radius:50%; overflow:hidden; position:absolute; bottom:25px; left:10px; padding:5px; border-radius:50%; box-shadow: 0 0 0 5px rgba(255,255,255,.5), 0 0 0 1px var(--color-border); background:#fff; }
.paneAccountMobile .userInfo .avatar img{width:100%; border-radius:50%;}
.paneAccountMobile .userInfo span{display:block; clear:both; font-size:13px; opacity:.7}
.paneAccountMobile .myOrder{width:100%; float:left; position:relative; padding: 15px 10px; background:#fff; border-radius:7px; margin-top:5px}
.paneAccountMobile .myOrder label{font-size:14px; font-weight:bold}
.paneAccountMobile .myOrder .nav-all{position:absolute; top:15px; right:10px; font-size:13px; padding-right:20px; line-height:22px; display:inline-block; opacity:.7; transition:.3s; background:url(icon/24-arrow-right-line.png) no-repeat right center; background-size: auto 18px;}
.paneAccountMobile .myOrder .nav-all:hover{opacity:1;}
.paneAccountMobile .myOrder ul{margin:0; padding:10px 0 0 0; list-style:none; width:100%; display:flex;}
.paneAccountMobile .myOrder ul li{flex:1; position:relative;}
.paneAccountMobile .myOrder ul li a{width:100%; display:block; position:relative; padding:30px 3px 0 3px;}
.paneAccountMobile .myOrder ul li a img{width:24px; position:absolute; left:50%; margin-left:-12px; top:0;}
.paneAccountMobile .myOrder ul li a span{font-size:13px; text-align:center; display:block;}
.paneAccountMobile ul.nav-menuMobie{width:100%; margin:0; padding:0; list-style:none; padding: 15px 10px;float:left; background:#fff; border-radius:7px; margin-top:5px; }
.paneAccountMobile ul.nav-menuMobie li{width:100%; float:left; position:relative; font-size:14px; border-bottom:1px solid var(--color-border)}
.paneAccountMobile ul.nav-menuMobie li.title{font-weight:bold; border:none; margin-bottom:5px;}
.paneAccountMobile ul.nav-menuMobie li a{line-height:44px; background:url(icon/24-arrow-right-line.png) no-repeat right center; background-size: auto 18px; width:100%; display:flex; position:relative; padding-left:25px;}
.paneAccountMobile ul.nav-menuMobie li a img{height:16px; margin-top:-8px; left:0; position:absolute; top:50%; opacity:.7}
.paneAccountMobile ul.nav-menuMobie li a b{font-size:10px; background:var(--color-red); color:#fff; font-weight:normal; line-height:15px; height:14px; min-width:14px; text-align:center; border-radius:7px; display:block; margin:10px 0 0 5px;}
.paneAccountMobile ul.nav-menuMobie li:last-child{border:none;}
.paneAccountMobile .nav-logout{width:100%; margin:5px 0 0 0; float:left;  background:#fff; border-radius:7px; line-height:45px; color:var(--color-red); padding: 0 15px; font-weight:bold; position:relative;}
.paneAccountMobile .nav-logout:before{content:''; width:20px; height:100%; position:absolute; top:0; right:10px; background:url(icon/24-arrow-right-line.png) no-repeat center; background-size: auto 18px;}

/* Menu Hôm nay ăn gì trên Topbar */
.nav-dailyMenuMobile{width:36px; height:36px; display:flex; align-items:center; justify-content:center; position:absolute; top:12px; right:43px; }
.nav-dailyMenuMobile:before{content:''; width:24px; height:24px; background:url(icon/24-hot-breakfast-line.png) no-repeat right center; display:block;}

/* Menu tổng quan trên Topbar */
.nav-generalMenuMobile{width:36px; height:36px; display:flex; align-items:center; justify-content:center; position:absolute; top:12px; right:0px; }
.nav-generalMenuMobile:before{content:''; width:24px; height:24px; background:url(icon/24-thumb-line.png) no-repeat right center; display:block;}


/* Fix Main search mobile */
@media (max-width:767px) {
    .fixTop-searchMobile{position:fixed!important; width:100%!important; height:60px!important; background:var(--color-blue); z-index:1000; top:0; left:0;}
    .fixTop-searchMobile .swap-search{width:calc(100% - 65px); left:55px;}
    .fixTop-searchMobile .nav-close-pane-topbarMobile{width:36px; height:36px; display:flex; align-items:center; justify-content:center; position:absolute; top:12px; left:10px;}
    .fixTop-searchMobile .nav-close-pane-topbarMobile:before{content:''; width:24px; height:24px; background:url(icon/24-arrow-left-2-line.png) no-repeat right center; display:block;}
    header.is-hidden .fixTop-searchMobile{top:60px!important;}
}