.backend-page{width:100%; float:left;padding-bottom:40px; clear:both;}
.backend-page .left-page{width:290px; float:left; position:relative;}
.backend-page .right-page{width:calc(100% - 290px); float:right; position:relative; padding-left:30px;}
.backend-page .right-page .title-page{font-size:16px; font-weight:bold; margin:0; padding:0 0 15px 0; display:block;}

@media (max-width:991px) {
    .backend-page .left-page{width:100%;}
    .backend-page .right-page{width:100%; padding-left:0;}
}

/* Combobox tìm kiếm địa giới dùng chung: Sổ địa chỉ, Account và Checkout. */
.tk-location-combobox{position:relative;width:100%;}
.tk-location-select-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;}
.tk-location-combobox-input{width:100%;min-height:42px;padding-right:42px!important;background:#fff;}
.tk-location-combobox-toggle{position:absolute;right:0;top:0;width:42px;height:42px;border:0!important;background:transparent!important;color:#657080;cursor:pointer;z-index:2;box-shadow:none!important;}
.tk-location-combobox-toggle:hover{color:#0868d9;}
.tk-location-combobox-menu{display:none;position:absolute;z-index:1065;top:calc(100% + 4px);left:0;right:0;max-height:260px;overflow-y:auto;padding:7px;border:1px solid #d9dee5;border-radius:7px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.18);}
.tk-location-combobox-menu.is-open{display:block;}
.tk-location-combobox-option{display:block;width:100%;min-height:40px;padding:8px 12px;border:0!important;border-radius:6px;background:transparent!important;color:#2e333a!important;text-align:left;font-size:15px;line-height:1.35;cursor:pointer;box-shadow:none!important;}
.tk-location-combobox-option:hover,.tk-location-combobox-option.is-highlighted{background:#eef5ff!important;color:#075fae!important;}
.tk-location-combobox-empty{padding:12px;color:#707985;font-size:14px;}
.tk-location-combobox-input:disabled+.tk-location-combobox-toggle{opacity:.45;pointer-events:none;}


/* Menu left */
@media (min-width:992px) {
    .head-account{width:100%; position:relative; float:left; border-radius:10px; padding-bottom:15px; background:#fff;}
    .head-account .banner{width:100%; height: 120px; position:relative; float:left;}
    .head-account .banner img{width:inherit; height:inherit; object-fit:cover; border-radius:10px 10px}
    .head-account .avatar{width:80px; height:80px; border-radius:50%; display:block; margin: -40px 0 0 0; float:left; z-index:2; position:relative; left:50%; transform:translateX(-50%); border-radius:50%; padding:2px; box-shadow: 0 0 0 5px rgba(255,255,255,.5); background:#fff; z-index:2;}
    .head-account .avatar img{width:100%; border-radius:50%;}
    .head-account .name{width:100%; float:left; text-align:center; font-weight:500; padding:10px 10px 5px 10px; font-size:16px;}
    .head-account .mobile{width:100%; float:left; color:rgba(0,0,0,.7); text-align:center; font-size:14px;}
    .head-account .barcode{width:100%; float:left; text-align:center;}

    ul.nav-account{width:100%; margin:20px 0 0 0; padding:0; list-style:none; padding: 15px 30px; border-radius:10px; float:left; clear:both; background:#fff;}
    ul.nav-account li{width:100%; float:left; position:relative; border-bottom:1px solid var(--color-border)}
    ul.nav-account li{width:100%; float:left; border-bottom:1px solid var(--color-border)}
    ul.nav-account li a{width:100%; line-height:48px; position:relative; font-size:15px; padding-left:32px; display:flex;}
    ul.nav-account li a img{position:absolute; top:50%; left:0; display:block; height:18px; margin-top:-9px; opacity:.5}
    ul.nav-account li a b{line-height:22px; height:22px; margin-top:-11px; color:var(--color-red); background:#fff; font-size:13px; font-weight:bold; min-width:22px; text-align:center; padding: 0; position:absolute; top:50%; right:0; border-radius:11px; display:flex; align-items:center; justify-content:center }
    ul.nav-account li:last-child{border:none;}
    ul.nav-account li.active a{pointer-events:none}
    ul.nav-account li.active a img{opacity:1;}
    ul.nav-account li.active a span{font-weight:bold; color:var(--color-blue); }
    ul.nav-account li.active a:before{content:''; width:4px; height:calc(100% - 20px); position:absolute; left:-30px; top:10px; background:var(--color-blue); border-radius:0 4px 4px 0}
    /* Nút thoát dùng chung trên các trang tài khoản; không bị dòng menu active vô hiệu hoá. */
    .backend-page .left-page ul.nav-account li .dashboard-sidebar-logout{position:absolute;top:11px;right:0;z-index:3;display:flex;align-items:center;justify-content:center;width:27px;height:27px;padding:0;overflow:hidden;border-radius:6px;background:#df2b2b;color:#fff;line-height:27px;text-decoration:none;box-shadow:0 1px 5px rgba(104,0,0,.28);pointer-events:auto;cursor:pointer;transition:width .2s ease,background .2s ease;}
    .backend-page .left-page ul.nav-account li .dashboard-sidebar-logout i{flex:0 0 27px;margin:0;color:#fff;font-size:14px;line-height:27px;text-align:center;opacity:1;}
    .backend-page .left-page ul.nav-account li .dashboard-sidebar-logout span{display:block;max-width:0;overflow:hidden;white-space:nowrap;font-size:12px;font-weight:700;opacity:0;transition:max-width .2s ease,opacity .15s ease;}
    .backend-page .left-page ul.nav-account li .dashboard-sidebar-logout:hover,.backend-page .left-page ul.nav-account li .dashboard-sidebar-logout:focus{width:76px;background:#c91d1d;color:#fff;outline:none;}
    .backend-page .left-page ul.nav-account li .dashboard-sidebar-logout:hover span,.backend-page .left-page ul.nav-account li .dashboard-sidebar-logout:focus span{max-width:42px;padding-right:8px;opacity:1;}
    .backend-page .left-page ul.nav-account li .dashboard-sidebar-logout:before{display:none!important;}
    .backend-page .left-page ul.nav-account li.active .dashboard-sidebar-logout span{color:#fff;}
}


/* Menu backend */
.backend-leftmenu{width:100%; float:left; position:relative;}
.backend-leftmenu label{font-weight:bold; font-size:16px; margin:0; padding:0; width:100%; float:left;}
.backend-leftmenu .drop-menuBackend{width:100%; float:left; position:relative;}
.backend-leftmenu .drop-menuBackend a.nav-drop{display:none;}
.backend-leftmenu .drop-menuBackend ul.dropdown-menu{margin:15px 0 0 0; padding:0; list-style:none; width:100%;  background:#f3f4f6; float:left; border-radius:10px; padding:15px 30px; position:relative!important; display:block; border:none; transform:initial!important}
.backend-leftmenu .drop-menuBackend ul.dropdown-menu li{width:100%; float:left; border-bottom:1px solid var(--color-border)}
.backend-leftmenu .drop-menuBackend ul.dropdown-menu li a{width:100%; line-height:48px; position:relative; font-size:15px; padding-left:32px; display:flex;}
.backend-leftmenu .drop-menuBackend ul.dropdown-menu li a img{position:absolute; top:50%; left:0; display:block; height:18px; margin-top:-9px; opacity:.5}
.backend-leftmenu .drop-menuBackend ul.dropdown-menu li a b{line-height:22px; height:22px; margin-top:-11px; color:var(--color-red); background:#fff; font-size:13px; font-weight:bold; min-width:22px; text-align:center; padding: 0; position:absolute; top:50%; right:0; border-radius:11px; display:flex; align-items:center; justify-content:center }
.backend-leftmenu .drop-menuBackend ul.dropdown-menu li:last-child{border:none;}
.backend-leftmenu .drop-menuBackend ul.dropdown-menu li.active a{pointer-events:none}
.backend-leftmenu .drop-menuBackend ul.dropdown-menu li.active a img{opacity:1;}
.backend-leftmenu .drop-menuBackend ul.dropdown-menu li.active a span{font-weight:bold; color:var(--color-blue); }
.backend-leftmenu .drop-menuBackend ul.dropdown-menu li.active a:before{content:''; width:4px; height:calc(100% - 20px); position:absolute; left:-30px; top:10px; background:var(--color-blue); border-radius:0 4px 4px 0}


@media (min-width: 768px) and (max-width:991px) {
    .backend-leftmenu{border:1px solid var(--color-border);  border-radius:7px; margin-bottom:20px;}
    .backend-leftmenu label{float:left; margin:0 0 0 15px; padding:0; line-height:50px; padding-left:30px; font-weight:500; background:url(../Default/icon/24-menu-line.png) no-repeat 0 center; width:initial }
    .backend-leftmenu .drop-menuBackend{float:right; position:relative; width:250px; margin:5px;}
    .backend-leftmenu .drop-menuBackend a.nav-drop{line-height:40px; width:100%; display:block; border-radius:5px; display:flex; align-items:center; color:var(--color); padding-left:20px;}
    .backend-leftmenu .drop-menuBackend a.nav-drop:before{content:''; width:20px; height:20px; margin-top:-10px; background:url(../Default/icon/24-arrow-bottom-line.png) no-repeat 0 0; background-size: 20px auto; position:absolute; top:50%; right:10px;}
    .backend-leftmenu .drop-menuBackend a.nav-drop img{height:24px;}
    .backend-leftmenu .drop-menuBackend a.nav-drop span{padding-left:10px; font-weight:500}
    .backend-leftmenu .drop-menuBackend ul.dropdown-menu{display:block; box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .1); margin-top:-5px; border:none; border-radius:10px; width:100%; padding: 10px 25px; position:absolute!important; background:#fff; opacity:0; visibility:hidden; transform:initial!important; top:100%!important; transition:.3s; }
    .backend-leftmenu .drop-menuBackend ul.dropdown-menu li a{line-height:45px!important;}
    .backend-leftmenu .drop-menuBackend ul.dropdown-menu li.active a:before{left:-25px;}
    .backend-leftmenu .drop-menuBackend.show ul.dropdown-menu{opacity:1; visibility:initial; margin-top:10px;}
}



    /* 
body{color:#061237; font-family: "Momo Trust Sans", sans-serif;  font-weight: normal; font-style: normal; width:100%; font-size:15px;  margin:initial!important; overflow:hidden;}
a{outline:none; color:#061237; text-decoration:none!important}
/***********************************************************************/
    /*                              Formart Page                           */
    /***********************************************************************/
    /*.wrap-page{margin:0; width:100%; height:100%; display:block; position:absolute; top:0; left:0;}
.wrap-page:before{content:''; position:fixed; top:0; left:0; z-index:2; background:#000; opacity:0; width:100%; height:100%; visibility:hidden;  }
.wrap-page .left-page{height:100%; width:270px; position:absolute; top:0; padding-right:0px; background:#f5f5f5; padding:100px 0px 0px 0px;}
.wrap-page .left-page .nav-toggleLayout{position:absolute; top:22px; left:100%; background:#f5f5f5; display:none; width:35px; height:35px; line-height:35px; border-radius:0 5px 5px 0; text-align:center; text-decoration:none; color:var(--color3); font-size:16px;}
.wrap-page .nav-logo{position:absolute; top:20px; left:20px; height:44px; display:flex; align-items:center; text-decoration:none; color:#000}
.wrap-page .nav-logo img{height:35px}
.wrap-page .nav-logo img:last-child{display:none;}
.wrap-page .right-page{float:right; width:calc(100% - 270px); height:100%; position:absolute; top:0; right:0; overflow:hidden; transition:.3s; }
.wrap-page .right-page .head-row{width:100%; height:65px; position:absolute; top:0; left:0; box-shadow: 0 1px rgba(0,0,0,.07); display:table; padding: 0 30px; z-index:2;}
.wrap-page .right-page .head-row .coll{position:relative; display:table-cell; vertical-align:middle;}
.wrap-page .right-page .head-row .coll .nav-toggleLayout{display:inline-block; position:relative; color:#000; font-size:16px; text-decoration:none; width:32px; height:32px; line-height:32px; text-align:center; box-shadow: 0 0 0 1px var(--color-border); border-radius:5px; margin-right:15px;}
.wrap-page .right-page .head-row .coll h4{display:inline-block; margin:0; padding:0 0 0 0px; font-size:18px; font-weight:500;}
.wrap-page .right-page .head-row .colr{position:relative;display:table-cell; text-align:right; vertical-align:middle;}
.wrap-page .right-page .body-row{width:100%; height:calc(100% - 65px); position:absolute; left:0; bottom:0; overflow:hidden; overflow-y:auto; padding: 0 30px;}
.wrap-page .right-page .body-row .page-info{width:calc(100% - 350px); float:left; padding:30px 30px 30px 0;}
.wrap-page .right-page .body-row .page-ads{width:350px; float:right}

@media (max-width:767px) {
    .wrap-page .right-page .head-row{padding: 0 10px; height:60px; text-align:right;}
    .wrap-page .right-page .head-row .coll{display:inline-block; height:60px;}
    .wrap-page .right-page .head-row .coll h4{display:none}
    .wrap-page .right-page .head-row .coll .nav-toggleLayout{display:inline-block; position:relative; text-align:center; padding:0 0px; line-height:initial; width:auto; height:36px; line-height:36px; margin:10px 15px 0 0; box-shadow:0 0 0 0px var(--color-border);  border-radius:0;}
    .wrap-page .right-page .head-row .coll .nav-toggleLayout:before{font-weight:900; font-size:16px; opacity:.5; padding-right:10px}
    .wrap-page .right-page .head-row .coll .nav-toggleLayout:after{content:'Menu'; font-family: "Momo Trust Sans", sans-serif; position:relative;font-size:15px; font-weight:500; }
    .wrap-page .right-page .head-row .colr{display:inline-block; height:60px; padding-left:15px; }
    .wrap-page .right-page .head-row .colr:before{content:''; width:1px; height:20px; top:20px; left:0; position:absolute; background:var(--color-border)}
    .wrap-page .right-page .body-row{padding: 0 10px; height:calc(100% - 60px); }
    .wrap-page .right-page .body-row .page-info{width:100%; padding:0;}
    .wrap-page .right-page .body-row .page-ads{display:none;}
}

@media (min-width: 768px) and (max-width:1199px) {
    .wrap-page .right-page .body-row .page-info{width:100%; padding-right:0; }
    .wrap-page .right-page .body-row .page-ads{display:none;}
}

@media (min-width: 1200px) and (max-width:1439px) {
    .wrap-page .right-page .body-row .page-info{width:calc(100% - 300px); }
    .wrap-page .right-page .body-row .page-ads{width:300px;}
}*/



    /* Menu left */
    /*.left-page ul.mainmenu{width:100%; height:100%; margin:0 0; padding:0 16px 20px 16px; list-style:none; float:left; overflow:hidden; overflow-y:auto }
.left-page ul.mainmenu li{width:100%; float:left; position:relative; margin-bottom:5px;}
.left-page ul.mainmenu li a{text-decoration:none; position:relative; padding:0 16px;  transition:.3s; display:block; width:100%; float:left; line-height:43px; transition:.3s; height:42px;}
.left-page ul.mainmenu li a:before{content:''; width:4px; height:100%; position:absolute; top:0; left:-15px; background:var(--color1); border-radius:3px; transition:.3s; opacity:0;}
.left-page ul.mainmenu li a span{opacity:1; transition:.3s}
.left-page ul.mainmenu li a i{position:relative; top:1px; left:0; font-size:16px; width:24px; text-align:center; line-height:24px; transition:.3s; width:24px; margin-right:10px; opacity:.5}
.left-page ul.mainmenu li a i:before{font-weight:300;}
.left-page ul.mainmenu li a b{position:absolute; top:50%; right:20px; background:var(--color3); color:#fff; line-height:17px; height:16px; border-radius:8px; padding: 0 5px; font-size:11px; transform:translateY(-50%)}
.left-page ul.mainmenu li a.active{color:var(--color1); background:#fff; font-weight:500; border-radius:5px;}
.left-page ul.mainmenu li a.active:before,
.left-page ul.mainmenu li a.active i{opacity:1;}
.left-page ul.mainmenu li a:hover{color:var(--color1)}
.left-page ul.mainmenu li a:hover:before,
.left-page ul.mainmenu li a:hover i{opacity:1;}
.left-page ul.mainmenu li .note{position:absolute; bottom:100%; margin-bottom:-3px; margin-left:-5px; left:100%; font-size:10px; white-space:nowrap; text-transform:uppercase; font-weight:bold; background:#ec1f26; color:#fff; padding: 0 5px; height:15px; line-height:15px; border-radius:3px; float:left;}
.left-page ul.mainmenu li .note:before{content:''; border-top:5px solid #ec1f26; border-right:7px solid transparent; position:absolute; left:5px; top:100%;}   
.left-page ul.mainmenu li:last-child{margin:0;}*/

    /* Head right */
    /*.dropAccount{position:relative; text-decoration:none; width:auto;text-align:left; display:inline-block; }
.dropAccount .nav-drop{float:left; position:relative; color:#000; height:34px; padding:0 30px 0 45px; font-size:15px; text-decoration:none!important; outline:none!important}
.dropAccount .nav-drop:after{font-family:"Font Awesome 5"; font-size:12px; font-weight:900; content: "\f0d7"; position:absolute; top:50%; right:0;opacity:1; margin-top:-7px; height:16px; line-height:16px; width:16px; text-align:center; box-shadow: 0 0 0 1px rgba(0,0,0,.05); border-radius:4px; transition:.3s;}
.dropAccount .nav-drop .avatar{width:34px; height:34px; position:absolute; top:1px; left:0; overflow:hidden; border-radius:50%; }
.dropAccount .nav-drop .avatar img{width:100%;}
.dropAccount .nav-drop .name{display:block; font-weight:bold;  position:relative; color:var(--color1) }
.dropAccount .nav-drop .email{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.7; font-size:13px; clear:both; margin-top:-2px;}
.dropAccount .dropdown-menu{padding:0; margin:0; border:none; box-shadow: 0 0 60px 0 rgba(0,0,0,.1);  border-radius:10px; transform:initial!important; top:100%!important; left:initial!important; right:0; margin-top:0; transition:.3s; }
.dropAccount.show .nav-drop:after{content: "\f0d8";}
.dropAccount.show .dropdown-menu{margin-top:15px;}
.dropAccount .dropdown-menu ul{margin:0; padding:15px 20px 10px 25px; float:left; position:relative; list-style:none;}
.dropAccount .dropdown-menu ul li{width:100%; float:left;}
.dropAccount .dropdown-menu ul li a{display:block; text-decoration:none; font-size:14px; color:#000; padding:8px 0 8px 30px; position:relative; float:left; font-weight:normal; transition:.3s; width:100%; float:left;}
.dropAccount .dropdown-menu ul li a i{font-size:16px; position:absolute; top:9px; left:0; opacity:.5; transition:.3s; font-weight:300;}
.dropAccount .dropdown-menu ul li a:hover{color:var(--color1)}
.dropAccount .dropdown-menu ul li a:hover i{opacity:1;}

@media (max-width:767px) {
    .left-page{left:-270px; transition:.3s;  z-index:10;}
    .right-page{width:100%!important; }
    .wrap-page.toggleLayout:before{opacity:.3; visibility:initial; z-index:9;}
    .toggleLayout .left-page{left:0; }
    .toggleLayout .left-page .nav-toggleLayout{display:block;}
    .toggleLayout .left-page .nav-logo{left:20px;}
    .toggleLayout .left-page .nav-logo span{display:flex;} 
    .toggleLayout .left-page ul.mainmenu li a{padding:0 16px; text-align:initial;}
    .toggleLayout .left-page ul.mainmenu li a i{margin-right:10px;}
    .toggleLayout .left-page ul.mainmenu li a span{display:initial; opacity:1;}
    .toggleLayout .left-page ul.mainmenu li a b{right:20px; margin-top:0;}

    .dropAccount{margin-top:10px;}
    .dropAccount .nav-drop{padding-right:15px;}
    .dropAccount .nav-drop:after{box-shadow:none; padding-top:10px;}
    .dropAccount .nav-drop .name,
    .dropAccount .nav-drop .email{display:none;}
    .dropAccount .dropdown-menu ul{min-width:180px;}

    .dropAccount .nav-drop .info-account-mobile{font-size:15px; color:var(--color1); font-weight:bold; position:relative; padding-top:15px; min-width:50px}
    .dropAccount .nav-drop .info-account-mobile:before{content:'Xin chào,'; color:#061237; font-weight:normal; font-size:12px; opacity:.75; position:absolute; top:0; left:0; white-space:nowrap}
}

@media (min-width: 768px) and (max-width:1439px){
    .left-page{width:70px!important; }
    .left-page .nav-logo{left:15px;}
    .left-page .nav-logo img:first-child{display:none;}
    .left-page .nav-logo img:last-child{display:block}
    .left-page ul.mainmenu li a{padding:0; text-align:center;}
    .left-page ul.mainmenu li a i{margin:0;}
    .left-page ul.mainmenu li a span{display:none; opacity:0;}
    .left-page ul.mainmenu li a b{right:0px; margin-top:-8px;}
    .right-page{width:calc(100% - 70px)!important; }
    
    .wrap-page.toggleLayout:before{opacity:.3; visibility:initial; z-index:9;}
    .toggleLayout .left-page{width:270px!important; z-index:10; }
    .toggleLayout .left-page .nav-toggleLayout{display:block;}
    .toggleLayout .left-page .nav-logo{left:20px;}
    .toggleLayout .left-page .nav-logo img:first-child{display:block} 
    .toggleLayout .left-page .nav-logo img:last-child{display:none;}
    .toggleLayout .left-page ul.mainmenu li a{padding:0 16px; text-align:initial;}
    .toggleLayout .left-page ul.mainmenu li a i{margin-right:10px;}
    .toggleLayout .left-page ul.mainmenu li a span{display:initial; opacity:1;}
    .toggleLayout .left-page ul.mainmenu li a b{right:20px; margin-top:0;}

    .wrap-page:not(.toggleLayout) .left-page:hover{width:270px!important; z-index:10;}
    .wrap-page:not(.toggleLayout) .left-page:hover .nav-logo{left:20px;}
    .wrap-page:not(.toggleLayout) .left-page:hover .nav-logo img:first-child{display:block;}
    .wrap-page:not(.toggleLayout) .left-page:hover .nav-logo img:last-child{display:none;}
    .wrap-page:not(.toggleLayout) .left-page:hover ul.mainmenu li a{padding:0 16px; text-align:initial;}
    .wrap-page:not(.toggleLayout) .left-page:hover ul.mainmenu li a i{margin-right:10px;}
    .wrap-page:not(.toggleLayout) .left-page:hover ul.mainmenu li a span{display:initial; opacity:1;}
    .wrap-page:not(.toggleLayout) .left-page:hover ul.mainmenu li a b{right:20px; margin-top:0;}
}

@media (min-width: 1440px) {
    .wrap-page .right-page .head-row .coll .nav-toggleLayout{display:none;}
}

.wrap-upDownSale {width: 100%; float: left; position: relative;}
.wrap-upDownSale .propose{width:100%; font-size:13px; font-weight:500; color:rgba(0,0,0,.5); border-bottom:1px dashed rgba(0,0,0,.1); margin:35px 0 0px 0; position:relative;}
.wrap-upDownSale .propose span{position:absolute; top:-10px; left:0; background:#fff; float:left; line-height:20px; height:20px; padding-right:10px;}
ul.list-upDown{width:100%; margin:0; padding:0; list-style:none; float:left; margin-top:30px; border-radius:10px; background:#fff;}
ul.list-upDown li{width:100%; margin:0;padding:0; list-style:none; float:left; margin-top:20px;}
ul.list-upDown li.title{margin-top:0; margin-bottom:-5px;} 
ul.list-upDown li.title span{font-weight:bold; float:left; font-size:17px;color:#000}
ul.list-upDown li.title .nav-more{float:right; font-size:12px; margin-top:-5px; line-height:28px; height:28px; border-radius:14px; background:rgba(0,0,0,.03); padding: 0 15px; color:#000; font-weight:500; text-decoration:none; transition:.3s;}
ul.list-upDown li.title .nav-more:hover{background:var(--color1); color:#fff;}
ul.list-upDown li .wrap-img{width:90px; float:left; position:relative; margin: 0 15px 0 0;}
ul.list-upDown li .wrap-img .link-img{position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; border-radius:5px;}
ul.list-upDown li .wrap-img .link-img img{width:inherit!important; height:inherit!important; object-fit:cover}
ul.list-upDown li .wrap-info{width:calc(100% - 105px); float:right; position:relative;}
ul.list-upDown li .name{ line-height:22px; text-decoration:none; font-weight:normal; transition:.3s; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; width:100%; float:left; margin-top:-5px;  }
ul.list-upDown li .name:hover{color:var(--color1)}

ul.list-upDown.blog li .wrap-img:after{content:''; display:block; padding-bottom:66.666666666666%}
ul.list-upDown.blog li .like{font-size:13px; font-weight:normal; opacity:.7; display:inline-block;}
ul.list-upDown.blog li .comment{font-size:13px; font-weight:normal; opacity:.8; display:inline-block; padding-left:10px; margin-left:10px; position:relative;}
ul.list-upDown.blog li .comment:before{content:''; width:1px; height:12px; background:rgba(0,0,0,.2); position:absolute; top:3px; left:0;}
ul.list-upDown.blog li .nav-catalog{display:inline-block; clear:left; text-decoration:none; font-weight:normal; font-size:13px; opacity:.5}

ul.list-upDown.product li .wrap-img:after{content:''; display:block; padding-bottom:100%}
ul.list-upDown.product li .price{ display:inline;  position:relative; text-align:left; margin-top:15px; z-index:4;}
ul.list-upDown.product li .price .old{display:inline-block; margin: 0 10px 0 0; padding-right:10px; position:relative; font-weight:500; font-size:14px; color:#b1b1b1}
ul.list-upDown.product li .price .old:before{content:''; width:100%; height:1px; position:absolute; top:50%; margin-top:-1px; left:0; background:#b1b1b1}
ul.list-upDown.product li .price .old:after{content:'đ'; position:absolute; bottom:1px; right:0; font-size:13px;}
ul.list-upDown.product li .price .new{display:inline-block; margin:0; padding-right:12px; position:relative; font-weight:bold; color:var(--color3); font-size:16px;}
ul.list-upDown.product li .price .new:after{content:'đ'; position:absolute; bottom:0px; right:0; font-size:14px;}*/












    /***********************************************************************/
    /*                                 UI                                  */
    /***********************************************************************/

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



ul.form{margin: -15px -10px 0 -10px; padding:0; list-style:none; clear:both;}
ul.form li{padding: 0 10px; position:relative;}
ul.form li .titleForm{display:block; margin:15px 0 5px 0; color:#000;}
ul.form li .titleForm.req:after{content:'*'; color:red; font-weight:bold; padding-left:3px;}
ul.form li .formGroup{width:100%; margin-top:30px; border:1px solid rgba(0,0,0,.1); padding: 20px 25px 25px 25px; position:relative; border-radius:7px;}
ul.form li .formGroup .titleGroup{ background:#fff; position:absolute; top:-12px; left:20px; padding: 0 5px; }
ul.form li .formGroup .titleGroup label{margin:0; padding:0; float:left;font-weight:bold; color:var(--color2); text-transform:uppercase}
ul.form li .formGroup .titleGroup span{padding-left:10px;}
ul.form li input[type='text'],
ul.form li input[type='password'],
ul.form li select,
ul.form li textarea{width:100%; height:38px; border:1px solid rgba(0,0,0,.1); padding: 0 8px; border-radius:4px; transition:.3s; background:rgba(0,0,0,.02)}
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(--color1); 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:15px;}*/

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

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

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

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

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

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

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

    /* List interactive */
    /*ul.list-interactive{width:100%; margin:0; padding:0; list-style:none;}
ul.list-interactive li{width:100%; float:left; position:relative; padding: 20px 20px; border-bottom:1px solid rgba(0,0,0,.05)}
ul.list-interactive li .thumbItem{width:100%; float:left; position:relative;} 
ul.list-interactive li .thumbItem .navRemove{position:absolute; top:10px; left:10px; border-radius:3px; font-size:16px; width:32px; height:32px; color:#fff; background:#b70101; display:flex; align-items:center; justify-content:center; z-index:1;} 
ul.list-interactive li .thumbItem .wrap-img{position:relative; float:left; margin:0 20px 5px 0}
ul.list-interactive li .thumbItem .wrap-img .frameImg{width:150px; float:left; }
ul.list-interactive li .thumbItem .wrap-img .link-img{position:absolute; width:100%; height:100%; position:absolute; top:0; left:0;}
ul.list-interactive li .thumbItem .name{text-decoration:none; color:#000; transition:.3s;}
ul.list-interactive li .thumbItem .name:hover{color:var(--color1)}
ul.list-interactive li .thumbItem .name h3{margin:0; font-size:16px; font-weight:500; line-height:22px;}
ul.list-interactive li .thumbItem .utiliSm{ width:calc(100% - 170px); float:right; margin:10px 0 15px 0;}
ul.list-interactive li .thumbItem p{padding:0; margin:0;}

@media (max-width:767px) {
    ul.list-interactive li .thumbItem{padding-bottom:35px;}
    ul.list-interactive li .thumbItem .utiliSm{width:100%; position:absolute; left:0; bottom:0; margin:0;}
}*/


    /* Paging */
    /*.wrap-paging{width:100%; float:left; position:relative;}
.wrap-paging a{text-decoration:none; line-height:45px; border-bottom:1px solid rgba(0,0,0,.07); padding: 0 20px; color:var(--color1); display:block; font-weight:500; position:relative;}
.wrap-paging a:after{font-family:"Font Awesome 5"; font-weight:900; content:"\f309"; font-size:16px; position:absolute; top:0; right:20px; color:#000; opacity:.5}*/

    /* Modal*/
    /*.modal-backdrop{background:#000;}
.modal-backdrop.in{opacity:.5}
.modal-content{border:none; box-shadow: 0 0px 3px rgba(0,0,0,.1)}
.modal-header{border-bottom:1px solid rgba(0,0,0,.07);padding: 15px 20px 13px 20px;}
.modal-header .modal-title{font-size:15px; text-transform:uppercase; font-weight:bold; color:#000; }
.modal-header .close{width:22px; height:22px; line-height:18px; border-radius:3px; text-align:center; opacity:1; font-weight:normal; border:1px solid rgba(0,0,0,.06); position:absolute; top:15px; right:15px; transition:.3s;}
.modal-header .close:hover{border-color:rgba(0,0,0,.1); color:#b70404}
.modal-header .close:focus{outline:none;}
.modal-body{padding:5px 20px 10px 20px;} 
.modal-footer{padding:0 20px 20px 20px; border:none;}
.modal-footer a{text-decoration:none; color:#0084ff; line-height:32px; border-radius:4px; padding: 0 15px; display:inline-block; border:1px solid rgba(0,0,0,.1); font-weight:bold; box-shadow: 0 2px rgba(0,0,0,.03); margin:10px 0 0 10px ; transition:.3s;}
.modal-footer a:hover{color:#fff; background:#0084ff}*/

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

    /* Scroll bar */
    /*.scrollbar-2px::-webkit-scrollbar {width: 2px; height:2px; background-color: rgba(0,0,0,.0); overflow-x:hidden; overflow-y:auto;}
.scrollbar-2px::-webkit-scrollbar-track { background-color: rgba(0,0,0,.0);}
.scrollbar-2px::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.5); border-radius:1px; }*/

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

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

    /*@media (max-width:991px) {*/


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

    /* Panel Right  */
    /*.panelRight{position:fixed; top:0; left:0px; padding: 65px 0 0px 0; width:100%; height:100%;  transition:.3s; z-index:35; opacity:0; visibility:hidden; transition:.3s; background:rgba(0,0,0,.5) }
    .panelRight .nav-closePanel{position:absolute; top:14px; right:20px; font-size:16px; width:32px; height:32px; line-height:28px; text-align:center; box-shadow: 0 0 0 1px rgba(0,0,0,.05); border-radius:50%; color:#fff; text-decoration:none; background:var(--color3); z-index:5; display:flex; align-items:center; justify-content:center; }
    .panelRight .inner{max-width:350px; width:100%; height:100%; position:absolute; top:0; right:-50px; background:#fff; display:block; padding:60px 0 0 0; transition:.3s; }
    .panelRight .inner .head-row{width:100%; float:left; position:relative; line-height:60px; position:absolute; top:0; left:0; padding: 0 20px}
    .panelRight .inner .head-row label{margin:0; text-transform:uppercase; font-weight:900; font-size:16px; }
    .panelRight .inner .body-row{width:100%; height:100%; float:left; position:relative; padding:0 20px 20px 20px; overflow-y:auto}
    .panelRight .inner ul{margin:-14px 0 0 0; padding:0; width:100%; float:left; list-style:none;}
    .panelRight .inner ul li{width:100%;float:left; position:relative; margin-top:15px; display:none;}
    .panelRight .inner ul li a{color:#000; text-decoration:none;font-size:15px; width:100%; float:left; line-height:40px; box-shadow: 0 0 0 1px var(--border-color); border-radius:5px;}
    .panelRight .inner ul li a:after{font-family: "Font Awesome 5"; font-weight: 900; content: "\f105"; position:absolute; top:0; right:10px; font-size:16px; opacity:.5 }
    .panelRight .inner ul li a i{line-height:40px; font-size:16px; padding: 0 12px; opacity:.5}
    .panelRight .inner ul li a b{position:absolute; top:12px; right:30px; background:var(--color3); color:#fff; line-height:17px; height:16px; border-radius:8px; padding: 0 5px; font-size:11px;}
    .panelRight .inner ul li:nth-child(n+4){display:block;}
    .isOpenPanle-right .panelRight{opacity:1; visibility:initial}
    .isOpenPanle-right .panelRight .inner{right:0;}
    .isOpenPanle-right .tabbar{bottom:-100px;} 
}*/