@charset "utf-8"; /* CSS Document ///////////////////////////////////////////////// _ _ _ _ ||¯ ¯ ¯\ |¯ \ |¯| /||¯ D 2 ¯||\ || |¯\ || | |\ | | /|| B U N 0 ||\ || |_/ || | | \ | | /|| Y N E 1 ||\ ||_ _ _// | | \ _| /||_ G O 9 _||\ ¯ ¯ ¯ dungneo@gmail.com 20/01/2019 ///////////////////////////////////////////////// */ @font-face{ font-family: 'Roboto Condensed'; font-style: normal; font-weight: 300; src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'), url(../fonts/RobotoCondensed-Light.woff) format('woff'); } @font-face{ font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url(../fonts/RobotoCondensed-Regular.woff) format('woff'); } @font-face{ font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'), url(../fonts/RobotoCondensed-Bold.woff) format('woff'); } :root {--txtcolorall: #000; --fontsizeall: 16px; --bgcolor: #FFF; --logocolor: #EB3339; --headerbg: #252B33; --headercolor: #FFF; --bannerbg: #FFF; --bannercolor: #ED3439; --menutopcolor: #1B57A0; --menutopcolorhover: #438de8; --maincolor: #ED3439; --secondcolor: #c81519; --pricecolor: #F44; --starcolor: #F4AC00; --bordercolor: #E5E5E5} :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:focus{outline: none;} a { color: #444; text-decoration: none } a, a:hover, a:focus { transition: color 0.4s ease 0s; text-decoration: none; } a:hover { color: #000; } button{cursor: pointer;} img{max-width: 100%; display: inline-block;} iframe{border: none;} input[type=button], input[type=submit],input[type=reset]{-webkit-appearance: none; -moz-appearance: none; appearance: none;} body{margin: 0; padding: 0; top: 0px !important; font-size: 14px; color: #111; font-family: 'Roboto', 'Roboto Condensed', Arial, Georgia, Helvetica, sans-serif; background: var(--bgcolor);} .page-wrapper{width: 100%; margin: 0; padding: 0; position: relative; } .neo-out{width: 100%; margin: 0 auto; padding: 0;} .neo{width: 1600px; margin: 0 auto; padding: 10px;} /* * Header */ .header-banner{position: fixed; top: 0; left: 0; width: 100%; z-index: 100; box-shadow: 0 5px 20px rgba(0,0,0,.05); -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease;} .header-banner.scrolled{top: -41px;} .header-banner.scrolled .banner .logo{height: 60px;} .header{background: var(--headerbg); color: var(--headercolor);} .header .neo{padding: 0px 10px} .header a{color: var(--headercolor);} .header .name{float: left; padding: 10px 0px; font-size: 16px; font-weight: normal; } .header .name .name-follow{} .header .name .name-follow span{text-transform: lowercase;} .header .name a{margin-left: 20px;} .header .name a:hover{} .header .hotline-info{float: right;} .header a.hotline{font-weight: bold;} .header .hotline-info a{height: 100%; font-size: 16px; display: inline-block; padding: 10px 24px; padding-right: 0px;} .header .hotline-info a:hover{} .header .hotline-info .btn-search{} .header .hotline-info .loginout{} .header .hotline-info .loginout span{} .header .hotline-info .loginout i{padding-right: 10px;} .banner.scrolled{position: fixed; top: 0px; left: 0; width: 100%; z-index: 99999; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease;} .banner{position: relative; background: var(--bannerbg); color: var(--bannercolor); border-top: 1px solid var(--bordercolor);} .banner .neo{padding: 0px 10px} .banner .logo{height: 90px; width: 350px; float: left; padding: 5px 10px;} .banner .logo a{display: block; width: 100%; height: 100%; background: url(../images/logo.webp) left center no-repeat; background-size: 50%;} .banner .logo h1, .banner .logo h2{display: none;} .banner .logo .open-menu{display: none;} .banner .bnsearch{width: 650px; float: left; padding: 22px 0px 0px 0px;} .banner .bnsearch form{width: 600px; margin: 0 auto; border: 2px solid var(--logocolor); border-radius: 30px; position: relative;} .banner .bnsearch input{text-align: left; padding: 12px 15px; border: none; background: none; appearance: none; width: 100%} .banner .bnsearch button{appearance: none; position: absolute; top: 0px; right: 0px; background: var(--logocolor); border: none; height: 100%; padding: 10px 20px; -webkit-border-top-right-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-radius-topright: 30px; -moz-border-radius-bottomright: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; margin-right: -1px; color: #FFF;} .banner .bninfo{width: calc(100% - 350px - 650px); float: left; padding: 22px 0px 0px 0px; text-align: right;} .banner .bar, .banner .boxLogout{display: none;} .box-icon-lbls{} .box-icon-lbls .item{border-right: 1px solid #DDD; display: inline-block; padding-left: 25px; padding-right: 25px;} .box-icon-lbls .item:first-child{padding-left: 0px;} .box-icon-lbls .item:last-child{border: none; padding-right: 0px;} .box-icon-lbls .item a{display: block;} .box-icon-lbls .item > a > span, .box-icon-lbls .item > span{float: left; padding-top: 5px;} .box-icon-lbls .item > a > span i, .box-icon-lbls .item > span i{font-size: 22px;} .box-icon-lbls .item > a > div, .box-icon-lbls .item > div{float: left; text-align: left; margin-left: 15px;} .box-icon-lbls .item > a > div span, .box-icon-lbls .item > div span{display: block; padding-bottom: 5px;} .box-icon-lbls .item > a > div b, .box-icon-lbls .item > div b{display: block;} .page-menu{float: left;} .page-menu > ul, .page-menu > ul li{margin: 0px; padding: 0px; list-style: none;} .page-menu > ul{position: fixed; width: 300px; height: calc(100%); left: -100px; top: 0px; opacity: 0; visibility: hidden; border-right: 1px solid var(--bordercolor); background: #FFF; transition: all 0.4s ease;} .page-menu > ul.menu-top-active{position: fixed ; z-index: 999999; left: 0px; opacity: 1; height: auto; visibility: visible;} .page-menu > ul > li{display: block; width: 100%; border-bottom: 1px solid var(--bordercolor); text-align: left;} .page-menu > ul > li a{padding: 10px 0px; display: block; font-weight: 400; padding-left: 15px; font-size: 16px;} .page-menu > ul > li a.mnt-parent{font-size: 18px; font-weight: 600; color: #444;} .page-menu > ul > li a:hover{color: var(--maincolor);} .page-menu > ul > li a i{float: right; padding-right: 15px; transition: all 0.4s ease;} .page-menu > ul > li a:hover i{padding-right: 5px;} .page-menu > ul > li.mnt-loginout{background: var(--maincolor);} .page-menu > ul > li.mnt-loginout a{color: #FFF;} .page-menu > ul > li.mnt-loginout a:after{content: ""; display: table; clear: both;} .page-menu > ul > li.mnt-loginout a span{float: left; padding-left: 10px; line-height: 40px;} .page-menu > ul > li.mnt-loginout a i.fa-user{float: left; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #FFF; text-align: center; line-height: 40px; padding: 0px;} .page-menu > ul > li.mnt-loginout a i.fa-xmark{transform: scale(1); transition: 0.15s all ease; font-size: 32px; padding-top: 5px;} .page-menu > ul > li.mnt-loginout a:hover i.fa-xmark{padding-right: 15px; transform: scale(1.3);} .overlay{overflow: hidden;} .box-overlay.fixoverlay{content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: 99999; left: 0px; top: 0px; background: rgba(0, 0, 0, 0.4);} .menu-top{position: relative; border-top: 1px solid var(--bordercolor); background: var(--menutopbg); -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.1); -moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.1); box-shadow: 0px 2px 5px rgba(0,0,0,0.1);} .menu-top .neo{padding: 0px 10px; position: relative;} .menu-top .neo > ul > li:last-child{} .menu-top .neo > ul > li > ul { display: none; position: absolute; top: 62px; left: 0px; z-index: -1000; opacity: 0; padding-top: 0px; width: 250px; background: #FFF; border: 1px solid #FFF; border-top: none; -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; margin-top: 0px; -webkit-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.55); -moz-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.55); box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.55);} .menu-top .neo > ul > li:hover > ul {display: block; z-index: 99999999; opacity: 1; } .menu-top .neo > ul > li > ul > li > a:hover{color: #000;} .menu-top .neo > ul > li > ul > li:hover > ul{display: block; z-index: 99999999; opacity: 1;} .menu-top ul{float: left;} .menu-top ul, .menu-top li{margin: 0px; padding: 0px; list-style: none;} .menu-top li{position: relative; float: left;} .menu-top li a{font-size: 18px; color: var(--menutopcolor); display: block; padding: 20px 25px; } .menu-top li a i{} .menu-top li a i.fa-home{font-size: 20px;} .menu-top li.active a, .menu-top li a:hover{ color: var(--menutopcolorhover);} .menu-top li li {display: block; width: 100%; margin: 0px; text-align: left;} .menu-top li li a {border: none; border-bottom: 1px solid #002b60; color: #333; font-size: 14px; font-weight: normal; display: block; padding: 15px 10px;} .menu-top li li:last-child a{border-bottom: none;} .menu-top .bar{float: left; position: relative;} .menu-top .bar{padding: 20px 120px 20px 0px; margin-right: 40px; position: relative;} .menu-top .bar:after{width: 1px; position: absolute; height: 40px; left: ; top: 10px; right: 0px; content: ""; background: var(--bordercolor);} .menu-top .bar:hover > ul{display: block; z-index: 99999999; opacity: 1; } .menu-top .bar a{display: block; font-size: 18px;} .menu-top .bar a i{padding-right: 10px;} .menu-top .bar > ul{display: none; z-index: -1000; opacity: 0; -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s;} .menu-top .bar > ul li{display: block; width: 100%; border-bottom: 1px solid var(--bordercolor);} .menu-top .bar > ul a{padding: 20px 0px 20px 0px; font-size: 16px; border-bottom: none; font-size: 16px;} .menu-top .bar > ul{position: absolute; top: 62px; left: 0px; width: 100%; z-index: -999999999; background: #FFF; border: 1px solid var(--bordercolor); padding: 0px 20px} .menu-top .bar > ul > li{position: relative;} .menu-top .bar > ul > li.formb{display: none;} .menu-top .bar > ul > li i{padding-right: 0px; position: absolute; right: 0px; top: 20px; width: 20px; height: 20px; display: block; text-align: center; line-height: 20px; z-index: 10; cursor: pointer;} .menu-top .bar > ul > li:hover > ul{display: block;} .menu-top .bar > ul > li > ul{width: 100%; display: none;} .menu-top .bar > ul > li > ul > li{padding-left: 20px; border-top: 1px solid var(--bordercolor); border-bottom: none;} #btnCloseMn{display: none; position: absolute; top: -23000px; z-index: -999999; right: 20px; opacity: 0; width: 40px; height: 40px; border-radius: 50%; background: #FFF; border: 1px solid #DDD; text-align: center; line-height: 40px; color: #000; font-size: 20px; cursor: pointer;} /* * Box Slider */ .box-slider-idx{height: auto; background: none; padding: 0px; width: 100%;} .box-slider-idx .neo{padding: 0px 0px;} .box-slider-idx .owl-carousel .owl-stage-outer{} .box-slider-idx .owl-carousel, .owl-carousel .owl-stage-outer, .owl-carousel .owl-stage, .owl-carousel .owl-item{height: 100%;} .box-slider-idx .owl-item .item{position: relative; height: 100%;} .box-slider-idx .owl-carousel .item a{width: 100%; height: 100%; display: block;} .owl-carousel{position: relative;} .owl-carousel .owl-dots {margin-top: 10px; position: absolute; bottom: 20px; left: 50%;} .owl-carousel .owl-item img {height: auto;} .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev{background: #FFF;} .owl-theme .owl-dots .owl-dot span{width: 15px; height: 15px; border: 2px solid #FFF; background: rgba(0, 0, 0, .25);} .owl-theme .owl-dots .owl-dot.active span{background: #000;} .owl-theme .owl-nav{margin-top: 0px;} .owl-theme .owl-nav .owl-prev{left: 20px; top: 45%;; position: absolute;} .owl-theme .owl-nav .owl-next{right: 20px; top: 45%; position: absolute;} .owl-theme .owl-nav [class*="owl-"]{height: 40px; width: 40px; display: inline-block; border-radius: 50%; text-align: center; line-height: 40px; color: #666; font-size: 24px; padding: 0px; cursor: pointer;} .owl-theme .owl-nav [class*="owl-"]:hover{background: rgba(20, 77, 187, 0.5); color: #FFF;} .owl-theme .owl-nav i{font-size: 24px;} .box-idx.box-prosaleoff .owl-carousel .item{margin-right: 10px; background: #FFF; border-radius: 10px; overflow: hidden;} .box-idx.box-prosaleoff .owl-carousel .item h2{font-weight: normal; font-size: 14px; text-align: center; margin: 0; padding: 10px 0px;} .box-idx.box-prosaleoff .owl-carousel .item span.money{padding-top: 10px;} .box-servicer{padding: 25px 0px; border: 1px solid var(--bordercolor);} .box-servicer > div{width: 25%; padding-left: 20px; text-align: center;} .box-servicer > div.item span i{color: var(--logocolor); font-size: 34px;} .box-servicer > div.item > span{padding-top: 0px; float: initial; display: inline-block;} .box-servicer > div.item > div{float: initial; display: inline-block;} .neo-bg{background: url(../images/bg-diff.jpg) left center repeat-x;} .box-neopad{padding: 10px 0px} .box-round{border-radius: 8px; background: #FFF; padding: 20px;} .box-idx{font-size: 20px;} .box-idx .title{color: #333; font-size: 24px; margin-bottom: 20px; position: relative; text-align: center; font-weight: 500} .box-idx .title:after{position: absolute; width: 76%; height: 1px; bottom: 4px; content: ""; right: 100px;} .box-idx .title .titleright{font-weight: normal; font-size: 16px; float: right;} .box-idx p{line-height: 1.8; padding: 0px; margin: 0px;} .box-idx .box-idx-50{width: 50%; float: left; padding-top: 20px;} .box-idx .box-idx-50.idx-50l{padding-right: 20px;} .box-idx .box-idx-50.idx-50r{padding-left: 20px;} .box-cats{} .box-cats:after{content: ""; display: table; clear: both;} .box-cats .item{float: left; margin: 0px 10px; padding: 20px 0px; border-radius: 10px; width: calc(100% / 6 - 20px);} .box-cats .item:hover div img{transform: scale(1.05);} .box-cats .item:hover span{color: var(--logocolor);} .box-cats .item a{display: block; text-align: center; overflow: hidden;} .box-cats .item span{padding: 20px 10px; text-align: center; font-size: 16px; font-weight: 600; display: block;} .box-cats .item div{} .box-cats .item div img{transition: transform .2s; width: 100%; height: auto;} .product-list, .product-list li{margin: 0px; padding: 0px; list-style: none;} .product-list{margin-left: -5px; margin-right: -5px; display: flex; flex-wrap: wrap;} .product-list li{width: 20%; float: left; margin-bottom: 20px; font-size: 18px; position: relative; min-height: 240px; padding-left: 5px; padding-right: 5px; text-align: center;} .product-list li span.boxicon, .box-prosaleoff div span.boxicon, .products div span.boxicon{position: relative;} .product-list li span.icon .btnAddCart{display: none;} .product-list li span.icon:hover .btnAddCart{display: block;} .product-list li .icon, .box-prosaleoff div .icon, .products div .icon{position: relative; overflow: hidden; display: block; cursor: pointer; max-height: 220px; } .product-list li .icon img, .box-prosaleoff div .icon img, .products div .icon img{height: 100%; width: 100%;} .product-list li .icon span{} .product-list li .icon > div, .box-prosaleoff div.item .icon > div, .products div.item .icon > div{position: absolute; display: none; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(0, 0, 0, .45); text-align: center;} .product-list li .icon > div .btn-cart, .product-list li .icon > div .btn-cartst, .product-list li .icon > div .btn-cartstvp, .box-prosaleoff div.item .icon > div .btn-cart, .products div.item .icon > div .btn-cart{margin-top: 45%; background: rgba(255, 255, 255, .75); color: var(--maincolor); border-color: #FFF; border-radius: 4px; font-weight: 600;} .product-list li .icon > div a{margin-top: 35%;} .product-list li .pcat a{font-size: 16px; text-transform: uppercase; color: #666;} .product-list li h2, .product-list li h3{padding: 10px 0px 0px 0px; margin: 0px; height: auto; overflow: hidden; text-align: center; text-overflow: ellipsis; margin-bottom: 0px; line-height: 1;} .product-list li h2 a, .product-list li h3 a{color: #333; font-weight: normal; font-size: 16px;} .product-list li:hover .icon > div, .box-prosaleoff div.item:hover .icon > div, .products div.item:hover .icon > div{display: block;} .product-list li > div.ctr{} /*display: none;*/ .product-listin li{width: 25%;} .products{margin-left: -10px; margin-right: -10px; display: flex; flex-wrap: wrap;} .products .item{background: #FFF; width: calc(33.3% - 20px); float: left; border-radius: 10px; overflow: hidden; text-align: center; margin-left: 10px; margin-right: 10px; margin-bottom: 20px; border: 1px solid var(--bordercolor); padding: 10px;} .products .item h2{font-weight: normal; font-size: 16px; text-align: center; min-height: 38px; margin: 10px 0px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .products .item span.money{padding-top: 10px;} .products .item span.cat, .product-list li span.cat{display: block;} .products .item span.cat a, .product-list li span.cat a{font-size: 14px; color: var(--maincolor)} .products .item span.cat a:hover, .product-list li span.cat a:hover{color: #000} .products .item a.btn-cart{width: 100%; border-radius: 20px; background: #DDD; border-color: #DDD; color: #000;} .products .item a.btn-cart:hover{background: var(--logocolor); color: #FFF} .products.products-idx .item{width: calc((100% / 6) - 20px);} .productListRight{display: flex; flex-wrap: wrap;} .box-product-slider .products{margin: 0px;} .box-product-slider .products .item{margin-right: 0px; margin-left: 0px; width: 100%;} .box-cusreview{padding: 60px 0px;} .box-cusrev{margin-left: -10px; margin-right: -10px;} .box-cusrev .item{width: calc(25% - 20px); float: left; background: #FFF; border-radius: 10px; padding: 25px; margin: 0px 10px; font-size: 16px; line-height: 1.6} .box-cusrev .item .star{display: block; margin-bottom: 20px;} .box-cusrev .item .star i{font-size: 16px; margin-right: 5px; color: #FFC30E} .box-cusrev .item .star i.full{color: #FFC30E} .box-cusrev .item .desc{margin-bottom: 30px;} .box-cusrev .item .info{} .box-cusrev .item .info .avatar{width: 60px; height: 60px; border-radius: 50%; overflow: hidden; float: left; margin-right: 10px;} .box-cusrev .item .info .name{width: calc(100% - 70px); float: left;} .box-cusrev .item .info .name b{display: block; margin-bottom: 5px;} .box-cusrev .item .info .name span{display: block;} /* * Box News */ .box-news{} .box-news .item{border-radius: 10px; border: 1px solid var(--bordercolor); overflow: hidden;} .box-news .item a{display: block;} .box-news .item div.icon{} .box-news .item div img{display: block; height: auto;} .box-news .item div.info{padding: 20px 20px 25px 20px; font-size: 16px; font-weight: 400} .box-news .item div.info span{font-size: 14px; color: #666; margin-bottom: 15px; display: block;} .box-news .item div.info h2, .box-news .item div.info h3{font-size: 16px; font-weight: 400; margin: 0px;} /* * Box News */ .news-cat-relate{width: 23%; float: left; } .news-cat-relate.news-relater .title-rdur{padding-right: 138px} .news-idx-list, .news-idx-list li{margin: 0px; padding: 0px; list-style: none; overflow: hidden;} .news-idx-list{font-size: 16px; padding-left: 40px;} .news-idx-list li{width: 100%; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #DDD; overflow: hidden;} .news-idx-list li .icon{width: 150px; float: left; padding-right: 10px;} .news-idx-list li:last-child{border-bottom: none;} .news-idx-list li h5{margin: 0px; margin-bottom: 10px; font-size: 18px; font-weight: normal;} .news-idx-list li span{color: #888; font-size: 14px;} .news-list, .news-list li { list-style: none; margin: 0px; padding: 0px;} .news-list li{width: 100%; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #DDD;} .news-list li:after{clear: both; display: table; content: ""} .news-list li > a.icon {width: 200px; float: left; overflow: hidden; } .news-list li > a.icon img { height: 100% } .news-list li > div{width: calc(100% - 200px); padding-left: 10px; float: left;} .news-list li > div > h2{margin: 0px; padding-bottom: 10px;} .news-list li > div > h2 a{font-size: 18px; font-weight: 500;} .news-list li p { color: #777; font-size: 16px; margin: 0px;} .news-list li:last-child{border-bottom: none;} .news-list li > h2{} .news-list li > h2 a{font-size: 18px; font-weight: 500} .news-relate{} .news-relate li{width: 100%; height: auto; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #EEE; font-size: 16px;} .news-relate li i{padding-right: 5px;} .news-relate li:last-child{border-bottom: none;} .line-bottom{border-bottom: 1px solid #DDD;} .box-news-details .box-main-right{width: 25%; padding-left: 15px;} .box-news-details .box-ml-news li:first-child{margin-bottom: 10px;} .box-news-details .box-left li:first-child a.icon{width: 100%; padding: 0px; margin-bottom: 10px;} .box-news-details .box-left li:first-child span.title{width: 100%;} .box-news-details .box-left li:first-child span.title a{color: #000;} .box-news-content{font-size: 18px; line-height: 1.7;} .box-news-desc{background: #f4f4f4; padding: 20px; line-height: 1.8; font-size: 18px;} .box-news-img{text-align: center;} .box-newsidx{} .box-newsidx .news-idx-list{width: 50%; float: left; padding-left: 0px;} .bggreen{background: var(--maincolor);} .neo-bg{background: url(../images/bg-diff.jpg) left center repeat-x;} .box-neopad{padding: 10px 0px} .box-round{border-radius: 8px; background: #FFF; padding: 20px;} .box-idx{font-size: 20px;} .box-idx .title{color: #333; font-size: 24px; margin-bottom: 20px; position: relative; } .box-idx .title:after{position: absolute; width: 76%; height: 1px; bottom: 4px; content: ""; right: 100px;} .box-idx .title .titleright{font-weight: normal; font-size: 16px; float: right;} .box-idx p{line-height: 1.8; padding: 0px; margin: 0px;} .box-idx .box-idx-50{width: 50%; float: left; padding-top: 20px;} .box-idx .box-idx-50.idx-50l{padding-right: 20px;} .box-idx .box-idx-50.idx-50r{padding-left: 20px;} .box-idx.box-productidx .product-list li{margin-bottom: 20px;} .box-idx.box-productidx .product-list li h3{height: auto; margin-bottom: 5px;} .box-idx.box-prosaleoff .content{width: calc(100% - 300px); float: left; height: 330px; padding: 10px 10px 10px 0px; background: #dd2e00; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px;} .prosaleoff-time{background: url(../images/sale-img.png) left center no-repeat; background-size: cover; height: 330px; width: 300px; float: left; text-align: center; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px;} .prosaleoff-time > div{margin-top: 56%;} .prosaleoff-time > div > span{display: block; margin-bottom: 10px; color: #FFF; font-size: 18px;} .prosaleoff-time a.btn{min-width: 200px; padding: 8px 10px; display: inline-block; margin-bottom: 10px;} .box-prosaleoff{} .box-prosaleoff .item div.ctr{display: none;} .countdown{font-size: 30px; color: #FFF; margin-bottom: 10px; display: inline-block;} .countdown > span{box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(165, 34, 0) 0px 4px 10px 0px; padding: 8px 10px; background: #FFF; color: #dd2e00; border-radius: 3px; display: inline-block;} .countdown > b{padding: 0px 15px; font-weight: normal; display: inline-block;} .box-ads{} .box-ads:after{content: ""; display: table; clear: both;} .box-ads .item{width: 33.3%; float: left;} .box-ads .item:nth-child(3n){padding-left: 10px; padding-right: 0px;} .box-ads .item:nth-child(3n+1){padding-left: 0px; padding-right: 10px;} .box-ads .item:nth-child(3n+2){padding-left: 5px; padding-right: 5px;} .box-ads .item a{display: block; width: 100%; border-radius: 10px; overflow: hidden;} .procat-list{margin-left: -5px; margin-right: -5px;} .procat-list:after{content: ""; display: table; clear: both;} .procat-list .item{width: 16.66%; float: left; padding: 5px;} .procat-list .item:hover .icon img{transform: scale(1.1);} .procat-list .item:hover > div{border-color: #FFF;} .procat-list .item > div{border: 1px solid var(--maincolor); border-radius: 5px;} .procat-list .item a{display: block; text-align: center; overflow: hidden;} .procat-list .item .icon{} .procat-list .item .icon img{transition: transform .2s;} .procat-list .item .name{font-size: 14px; font-weight: 400; padding: 5px; background: #F57E82;} .box-productidx{} .box-productidx .product-list li .icon{height: 170px;} .box-productidx .title .titler{ text-transform: uppercase; display: inline-block;} .box-service-idx{background: #f5f5f5;} .box-service-idx .title{text-align: center; padding: 20px 0px;} .box-service-idx .titler{text-align: center; text-transform: uppercase; color: #444; color: #444; font-size: 20px;} .box-service-idx .content{padding: 10px 20px 0px 20px;} .box-service-idx .product-list li{width: 33.3%; min-height: auto;} .box-service-idx .product-list li .icon{height: auto; max-height: 230px;} .box-bottom{background: #f2f2f2; padding: 25px 0px; color: #757575;} .box-bottom ul, .box-bottomer ul, .box-bottom li, .box-bottomer li{list-style: none; padding: 0px; margin: 0px;} .box-bottom li{float: left; width: 20%; color: #757575; font-size: 14px;} .box-bottom li i, .box-bottomer li i{font-size: 40px; float: left;} .box-bottom li > span, .box-bottomer li > span{width: calc(100% - 50px); font-size: 14px; padding-left: 10px; word-wrap: break-word; float: left; display: inline-block; padding-top: 0px;} .box-bottom li a, .box-bottomer li a{color: #FFF; font-size: 18px;} .box-bottomer{background: var(--logocolor); color: #FFF;} .box-bottomer li{float: left; width: 33.3%; color: #FFF; font-size: 18px;} .box-bottomer li > span{display: inline-block; width: auto;} .box-bottomer li > span > i{margin-right: 10px;} .box-bottomer li > span > span{font-size: 18px; width: auto;} .box-bottomer li:nth-child(1) > span > span{float: left;} .box-bottomer li:nth-child(2){text-align: center;} .box-bottomer li:nth-child(2) > span{margin: 0 auto; float: initial;} .box-bottomer li:nth-child(3) > span{float: right;} .box-regemail{} .regemail-lbl{width: 50%; float: left;} .regemail-lbl > span.icon{float: left;} .regemail-lbl > span.icon i{font-size: 50px;} .regemail-lbl > div{float: left; padding-left: 20px;} .regemail-lbl > div > span{display: block; font-size: 24px; font-weight: 500; margin-bottom: 10px;} .regemail-lbl > div > p{margin: 0px;} .regemail-frm{float: left; width: 50%; text-align: right;} .regemail-frm > span, .follow > span{font-size: 20px; text-transform: uppercase; color: #FFF; float: left; padding-top: 10px;} .regemail-frm > span{width: 35%;} .regemail-frm form{position: relative;} .regemail-frm input{width: 450px; border-radius: 25px; background: #FFF; padding: 15px 15px; border: none;} .regemail-frm button{background: #000; color: #FFF; font-size: 18px; text-transform: uppercase; padding: 12px 30px; border: none; -webkit-border-top-right-radius: 25px; -webkit-border-bottom-right-radius: 25px; -moz-border-radius-topright: 25px; -moz-border-radius-bottomright: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; position: absolute; right: 0px; top: 0px;} .regemail-frm > form > span{display: inline-block; width: 450px; text-align: left; padding-top: 10px; } .regemail-frm > form > span.err{color: #820000;} .regemail-frm > form > span.success{color: #fff;} .follow{float: left; width: 30%;} .follow > span{padding-left: 20px;} .follow .social{float: right;} .follow .social a{width: 50px; height: 50px; display: inline-block; text-align: center; line-height: 50px; color: #FFF; border-radius: 50%; border: 2px solid #FFF; margin-left: 20px;} .follow .social a i{font-size: 24px;} .box-path{background: #FFF; border-bottom: solid 1px #edeff0; border-top: solid 1px #edeff0;} .box-path .neo{position: relative;} .box-path .path{padding: 5px 0px; font-size: 16px; color: #888;} .box-path .path i.fa-angle-right{padding-left: 10px; padding-right: 10px; font-size: 18px;} .box-path .path-right{float: right;} .box-path .path-right a{margin-left: 20px;} .box-main {padding-top: 30px; padding-bottom: 30px;} .box-main-left { width: calc(25% - 30px) ; float: left; background: #FFF5FB; border-radius: 10px; margin-right: 30px;} .box-main-right { width: 20%; float: right; padding-left: 20px;} .box-main-content { width: 75%; float: left;} .box-main-content > div.title{padding: 8px 10px; font-size: 20px; background: var(--menutopcolorhover); color: #FFF; } .box-main-content h1{font-size: 22px; font-weight: 500; line-height: 1.6; margin-top:0px; } .box-menuleft{} .box-menuleft, .box-menuleft li{margin: 0px; padding: 0px; list-style: none;} .box-menuleft{padding: 15px 10px 15px 20px;} .box-menuleft li{border-bottom: 1px solid #E4DCE0;} .box-menuleft li:last-child{border-bottom: none;} .box-menuleft li a{font-size: 18px; font-weight: 600; padding: 10px 0px; display: block;} .box-menuleft li.active a, .box-menuleft li a:hover{color: var(--maincolor);} .menuleftcat{} .menuleftcat .mnt-parent{background: #EFF6FF; padding: 8px; text-align: center;} .menuleftcat .mnt-parent i{display: none;} .menuleftcat li i{float: right;} .box-left {background: #f5f5f5; padding: 0px 10px; } .box-left .box-left-title { padding: 10px; color: #000; font-size: 18px; text-transform: uppercase } .box-left ul, .box-left li { list-style: none; margin: 0px; padding: 0px; overflow: hidden } .box-left ul {} .box-left li { font-size: 16px; padding: 10px 0px 10px 10px; } .box-left li:last-child{border-bottom: none;} .box-left li a.icon { width: 90px; padding-right: 10px; display: inline-block; float: left; overflow: hidden } .box-left li span.title, .box-left li span.desc {display: block; width: 100%; float: left; width: calc(100% - 90px);} .box-left li span.desc { font-size: 14px; font-style: italic; padding-top: 10px } .person-list{padding: 0px; /*border: 1px solid #DDD; border-top: none;*/} .person-list li{} .person-list li.active a, .person-list li a:hover{color: var(--maincolor);} .person-list li i{width: 30px; padding-right: 5px;} .person-list li ul{padding-left: 20px;} .person-list li ul li{} .box-pro-lbl{float: left; font-size: 20px; text-transform: uppercase; padding-top: 10px;} .box-pro-lbl span{color: #999; text-transform: none;} .line{} .boxSort{float: right;} .boxSort select{padding: 10px 20px; border-radius: 0px; border: 1px solid #DDD; font-size: 16px;} .box-right { } .box-right .box-right-title { padding: 10px 0px; font-size: 16px; text-transform: uppercase } .box-right ul, .box-right li { list-style: none; margin: 0px; padding: 0px; overflow: hidden } .box-right li { font-size: 16px; padding: 10px 0px; position: relative;} .box-right li a.icon { width: 100%; display: block; overflow: hidden } .box-right li span.title, .box-right li span.desc { width: calc(100% - 90px); display: inline-block; float: left } .box-right li span.desc { font-size: 14px; font-style: italic; padding-top: 10px } .box-right .box-right-hotsup{padding-top: 0px;} .box-right li.hotline a, .box-right li.hotline a i{ color: #e41f1f; font-size: 26px;} .box-right .box-right-hotsup.suport-idx li{width: 100%; padding-left: 0px; padding-right: 0px;} .box-right .box-right-hotsup.suport-idx li div{padding-right: 0px;} .box-right .box-right-hotsup.suport-idx li div:after{clear: both; display: table; content: ""} .box-right .box-right-hotsup.suport-idx li div a{font-size: 14px;} .box-right .box-right-hotsup.suport-idx li div a i{float: left; width: 30px;} .box-right .box-right-hotsup.suport-idx li div a span{float: left; width: calc(100% - 30px); padding: 0px;} .box-right li h2, .box-right li h3{font-weight: normal; text-align: center; font-size: 16px;} .box-member{background: #f5f5f5; padding-top: 10px;} .created{font-size: 14px; color: #666;} .relate-list, .relate-list li { list-style: none; margin: 0px; padding: 0px; overflow: hidden } .relate-title {padding: 5px 15px; font-size: 16px; color: #c82d31; margin-top: 20px; margin-bottom: 20px; border-left: 4px solid #c82d31; font-weight: bold;} .relate-list li { width: 100%; height: auto; padding-bottom: 10px; margin-bottom: 10px; font-size: 16px;} .relate-list li i { padding-right: 5px } .relate-list li:last-child { border-bottom: none } .relate-list li h2, .relate-list li h3{font-size: 16px; font-weight: 500; margin: 0px;} .box-titleinfo{font-size: 16px;} .box-titleinfo h1, .box-titleinfo h2{font-size: 18px; font-weight: 600; margin: 0px; padding-bottom: 10px;} .box-prosaleoff div.item .icon > div a{margin-top: 30%;} .btn-cart, .btn-cartst, .btn-cartstvp, .btnBuy, .btnBorder{display: inline-block; background: var(--maincolor); color: #FFF; padding: 10px 12px; margin: 10px auto; border: 1px solid var(--maincolor); text-align: center;} .btnBorder{background: none; color: var(--maincolor);} .btn-cart:hover, .btn-cartst:hover, .btn-cartstvp:hover, .btnBuy:hover{color: #000;} .product-info .btn-cart, .product-info .btn-cartst, .product-info .btn-cartstvp, .product-info .btnBuy{width: calc(50% - 10px)} .sale-off {position: absolute; left: 10px; top: 10px; background: var(--menutopcolorhover); color: #FFF; font-size: 16px; border-radius: 50%; width: 50px; height: 50px; text-align: center; line-height: 50px;} .btnAddCart{text-align: center; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.5); } .btnAddCart .btn-cart{margin-top: 30%;} .money{display: block; font-size: 18px; text-align: center; color: #f92e2f;} .money i{text-decoration: line-through; font-style: normal; margin-right: 10px; color: #666;} .money b{margin-right: 10px; color: #f92e2f;;} .money sup{text-decoration: underline;} #boxCtDt{} #boxCtDt .frmElement{width: 50%; float: left; clear: initial;} #boxCtDt .frmElement:nth-child(1){padding-right: 15px;} #boxCtDt .frmElement:nth-child(2){padding-left: 15px;} #boxCtDt .frmElement .element{width: 100%;} #boxCtDt select{text-indent: 0px !important; width: 100%;} .tf-tree {width: 100%;text-align: center;} .tf-tree .tf-nc span, .tf-tree .tf-nc b{display: block; padding: 5px 0px;} .box-sys-off{position: relative;} .box-notes{float: left; position: absolute; left: 0px; top: 0; background: rgba(255, 255, 255, 0.75); z-index: 9; padding: 10px;} .box-notes > div{display: block; margin-bottom: 10px; text-align: left;} .box-notes > div:last-child{margin-bottom: 0px;} .box-notes > div > span{width: 50px; height: 20px; display: inline-block; background: #DDD; margin-right: 10px;} .box-notes .clr-month span{background: #229901;} .box-notes .clr-total span{background: #1C5199;} .clr-month{color: #229901;} .clr-total{color: #1C5199} .btn-red{background-color: #b20000;} .marr20{margin-right: 20px;} #frmPayment .cart-products p > input{color: #222} .img-loading{display: none; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; padding-top: 20%; background: rgba(0,0,0,.5);} .img-loading.active{display: block;} .img-loading i{font-size: 80px; color: #FFF;} .product-details{} .product-img-slide{width: 55%; float: left;} .product-img{width: 100%; overflow: hidden; position: relative; border: 1px solid #DDD;} .product-img img{cursor: pointer; display: block; } .product-img .pi-title{position: absolute; bottom: 0px; left: 0px; width: 100%; background: rgba(0, 0, 0, 0.55); text-align: center; padding: 10px 10px; font-size: 16px; color: #FFF;} .product-slide{margin-top: 20px;} .product-slide ul, .product-slide li{margin: 0px; padding: 0px; list-style: none; overflow: hidden;} .product-slide ul{overflow: hidden;} .product-slide li{width: 25%; float: left; overflow: hidden; padding: 5px; border: 1px solid #DDD; margin-right: 10px;} .product-slide li a{display: block; height: 80px; /*width: 100%;*/ text-align: center;} .product-slide li img{width: 100%; height: 100%} .product-slide li.over{display: none;} .product-slide li.active{border: 1px solid var(--maincolor);} .product-slide li.active a{} .product-slide li:last-child{margin-left: 0px;} .product-slide .control{position: relative;} .product-slide .control a{position: absolute; z-index: 99999; top: -60px; border-radius: 50%; width: 30px; height: 30px; display: block; border: 1px solid #333; text-align: center; font-size: 20px; background: rgba(255, 255, 255, .75);} .product-slide .control a:hover{border-color: var(--maincolor); color: var(--maincolor);} .product-slide .control a.btn-left{left: -10px;} .product-slide .control a.btn-right{right: -10px;} .product-slide .control a i{margin-top: 4px;} .product-slide-item{width: 100%; overflow: hidden;} .product-slide-item ul{transition: all 0.25s ease 0s;} .product-info{width: 45%; float: left; padding-left: 20px; font-size: 18px;} .product-info h1{font-size: 24px; font-weight: normal; margin: 0; padding-bottom: 10px;} .product-info > div, .product-info .product-info-price > div{margin-bottom: 10px;} .product-info > div > span{width: 100px; display: inline-block;} .product-info > div select, .product-info > div input{padding: 6px 8px; border: 1px solid #DDD; border-radius: 20px; width: 200px;} .product-info .product-info-price{background: #f5f5f5; padding: 10px 15px;} .product-info .money{text-align: left;} .product-info .price{font-size: 22px;} .product-info .btn-buy{/*padding: 10px 0px;*/} .add-favorite{font-size: 16px; color: #999; padding-bottom: 10px;} .add-favorite i{margin-right: 5px;} .free-ship{font-size: 16px; color: #00a456; text-transform: uppercase; } .free-ship i{font-size: 22px; margin-right: 5px;} .product-details-content{font-size: 16px; line-height: 1.8} .product-details-content p{line-height: 1.8} .payment-btn{} .payment-btn .btn{width: 45% !important; float: left;} /*.payment-btn .btn:first-child{margin-left: 0px;}*/ .payment-btn input.btn[type=reset]{float: right;} .box-search-main .box-main-content{width: 100%;} .news-list.nl-search li a.icon{display: block;} .news-list.nl-search li a.icon{width: 200px; float: left; padding-right: 15px;} .box-service-idx .item{float: left; text-align: center;} .box-service-idx .item .icon{width: 100%;} .box-service-idx .item a{font-size: 16px; display: block; padding-top: 20px;} .box-service-idx .owl-theme .owl-nav{position: absolute; top: 50%; width: 100%;} .box-service-idx .owl-theme .owl-nav .owl-prev{left: -40px; top: -20px;} .box-service-idx .owl-theme .owl-nav .owl-next{right: 0px; top: -20px;} .boxComment{} .boxComment .cmt-msg{border-bottom: 1px solid #DDD; margin-bottom: 20px; padding-bottom: 20px;} .boxComment .item{border-bottom: 1px solid #DDD; margin-bottom: 20px; padding-bottom: 20px;} .boxComment .item .cmt-title{} .boxComment .item .cmt-title > div{} .boxComment .item .cmt-title > div i{margin-right: 10px; color: #EB3236;} .boxComment .item .cmt-content{} .cmt-act{border-bottom: 1px solid #DDD; padding-bottom: 10px;} .cmt-act .fleft{padding: 10px 0px;} .cmt-act-total{} .cmt-act-star{margin-right: 20px;} .cmt-act-star i{margin-right: 5px; color: var(--maincolor);} .cmt-act .fright{} .frm-cmt{padding: 20px 0px; border-bottom: 1px solid #DDD;} .frm-cmt .fleft{padding-right: 10px;} .frm-cmt .fright{padding-left: 10px;} .frm-cmt .fleft.w100{padding: 0px;} .frm-cmt input{width: 100%;} .frm-cmt .frm-cmt-star i{margin-right: 5px; color: var(--maincolor); cursor: pointer;} .frm-cmt span.msg{font-size: 14px;} .cmt-item{padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #DDD;} .cmt-item-avt{width: 100px; float: left; padding-right: 20px;} .cmt-item-avt img{width: 80px; height: 80px; border-radius: 50%;} .cmt-item-info{width: 25%; float: left;} .cmt-item-info > span{display: block; margin-bottom: 10px;} .cmt-item-name{font-weight: bold;} .cmt-item-star{} .cmt-item-star i{margin-right: 5px; color: var(--maincolor);} .cmt-item-date{font-size: 14px;} .cmt-item-content{width: calc(100% - 25% - 100px); float: left;} .cmt-item-content h4{margin-top: 0px; margin-bottom: 10px} .cmt-item-content p{margin: 0px;} .box-msg-fader{position: fixed; right: 20px; bottom: 50px; z-index: 99999999999;} .box-msg-fade{position: relative; background: #00A438; color: #FFF; font-size: 18px;} .box-msg-fade .content{padding: 20px 20px 15px 15px;} .box-msg-fade .close{position: absolute; right: 5px; top: 5px; cursor: pointer;} .box-msg-fade .close i{font-size: 20px;} .fade-greener{background: #007126} .info-list{} .info-list i{padding-right: 10px;} .info-share{padding-bottom: 15px;} .is-info span{padding-right: 10px;} .is-info span i{font-style: normal;} .mbsuggest{margin-bottom: 30px;} #ggMap{width: 100%; height: 500px; border: none;} .box-contact{margin-top: 20px;} .box-contact .contact-title{font-size: 20px; font-weight: bold;} .contact-frm, .contact-content{width: 50%; float: left;} .contact-frm{padding-right: 40px;} .contact-frm .frmElement{padding: 5px 0px;} .contact-content{padding: 30px; background: #f3f3f3; font-size: 18px;} .contact-content .contact-title{text-align: center; font-weight: normal; } .contact-content .contact-title span{border-bottom: 1px solid #999; padding-bottom: 5px;} .relative{padding: 15px 0px; margin-bottom: 15px; font-size: 16px; border-bottom: 1px solid #DDD} .paging{padding: 10px 0px} .paging .page-list{float: left;} .paging .page-select{float: right;} /* * Footer */ .footer{padding: 30px 0px; color: #333; background: #fff; font-size: 16px;} .footer p{margin: 0px 0px 15px 0px; color: #333; font-size: 16px;} .footer p b{} .footer ul, .footer ul li{margin: 0px; padding: 0px; list-style: none; overflow: hidden;} .footer li{font-size: 16px; line-height: 1.85;} .footer a{color: #333; font-size: 16px; } .footer a i{padding-right: 10px;} .footer a:hover{color: #0e74ff} .footer .neo{padding-top: 20px; padding-bottom: 0px;} .footer .info{width: 20%; float: left;} .footer .info:first-child{width: calc(40% - 100px); border-right: 1px solid var(--bordercolor); margin-right: 100px; text-align: left;} .footer .info .ftlogo{display: block;} .footer .info .ftlogo a{display: block;} .footer .info .ftlogo a img{display: block; width: 60%; height: auto;} .footer .info.infofist{width: 15%;} .footer .info.infolast{width: 38.3%;} .footer .info .title{font-size: 16px; font-weight: bold;} .footer .info li a{font-size: 14px;} .footer .info form{position: relative; margin-bottom: 20px;} .footer .info input[type=text]{background: #fafafa; border: 1px solid #DDD; border-radius: 20px; padding: 10px; width: 100%;} .footer .info input[type=submit]{background: var(--maincolor); padding: 10px; border: none; position: absolute; right: 0px; color: #FFF; border: 1px solid var(--maincolor); -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px;} .footer .info p i{width: 25px;} i.icon-zalo{background: url(../images/icon-zalo.png) center center no-repeat; background-size: cover; width: 30px; height: 30px; padding: 0px; display: inline-block;} .social-bank{} .social-bank .box-social{width: 100%; text-align: center;} /*float: left;*/ .social-bank .box-social a {font-size: 40px; margin-right: 10px;} .social-bank .box-bank{width: 50%; float: right; text-align: right;} .social-bank .box-bank a:first-child{width: 100%; display: block;} .copyright{padding-top: 20px; margin-top: 30px; text-align: center; color: #444; border-top: 1px solid #DDD;} #contactFixR{position: fixed; right: 10px; bottom: 140px; z-index: 99999999;} #contactFixR a{display: block; margin-bottom: 10px; padding: 10px; border-radius: 6px; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.35); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.35); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.35); background: #FFF;} #contactFixR a:after{clear: both; display: table; content: ""} #contactFixR a svg{float: left; width: 30px; height: 30px;} #contactFixR a span{float: left; width: calc(100% - 30px); font-size: 16px; font-weight: 600; height: 30px; line-height: 30px; padding-left: 10px;} /* back top top */ .scrollup { background: var(--maincolor); bottom: 82px; display: none; position: fixed; right: 10px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; width: 40px; height: 40px; text-align: center; font-size: 13px; color: #fff; text-transform: uppercase; font-weight: 600; padding: 2px; z-index: 9999; } .scrollup .fa { display: block; } .scrollup:hover { opacity: 0.8; filter: alpha(opacity=80); color: #fff; } .pager{width: 100%; display: block; padding: 10px 0px; text-align: center; font-size: 16px; color: #999} .pager span{color: #FFF; background: var(--maincolor); padding: 4px 12px; border-radius: 4px; text-align: center; display: inline-block; margin-right: 10px;} /*border: 1px solid #DDD; */ .pager a{color: #444; padding: 4px 10px; margin-right: 10px; /*border: 1px solid #DDD; border-radius: 4px; */} .pager a:hover{color: #000} .tabs{width: 100%; border-bottom: 1px solid #EEE;} .tabs .tab{float: left; padding: 10px 40px 10px 0px; text-align: center; color: #333; position: relative;/* width: 33%; background: #F5F5F5;*/} .tabs .tab a{color: #333; width: 100%; height: 100%; display: block; font-size: 20px;} .tabs .tab.active{background: #FFF} .tabs .tab.active a, .tabs .tab a:hover{color: var(--maincolor);} /*.tabs .tab.active:before{content: "\f0d7"; display: inline-block; font-family: FontAwesome; font-size: 40px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: -30px; left: 45%; color: #AE0D0D;}*/ .tabs .tab.active:after{content: " "; display: inline-block; position: absolute; bottom: -2px; left: 0%; height: 3px; background: var(--maincolor); width: 100%;} .tabs-content{padding: 10px;} .tabs-content .content{display: none;} .tabs-content .content.active{display: block;} .product-info-share{} .product-info .product-info-share > span{padding-right: 20px; width: auto; float: left; padding-top: 10px;} .product-info-share a{margin-right: 15px; float: left;} .product-info-share a i{width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 50%; color: #FFF;} .product-info-share a i.fa-facebook{background: #204898;} .product-info-share a i.fa-youtube-play{background: #df1818;} .product-info-share a i.icon-zalo{} .copylink{margin: 15px 0px; position: relative;} .copylink .cpltitle, .copylink > a{font-weight: 500; } .copylink > a{display: inline-block;} .copylink > a i{float: right; margin-left: 10px;} /*border: 1px solid #DDD; */ .copylink .cplcontent{padding: 8px 10px; margin: 10px 0px; width: 100%; display: inline-block;} .copylink.cpright > a{position: absolute; right: 0px; background: var(--maincolor); padding: 10px; color: #FFF; top: 29px;} .dn-tab-title span{height: 100%; padding-bottom: 10px; width: auto; display: inline-block; border-bottom: 1px solid #555;} .productListRight span.icon{cursor: pointer;} .tbl-list{width:100%; } .tbl-list th{padding: 10px 10px; vertical-align:middle; font-size:14px; font-weight:normal; border-right: 1px solid #2866BB; background: #1C5199; color: #FFF; text-transform: uppercase;} .tbl-list th:last-child, .tbl-report th:last-child{border-right: none;} .tbl-list td{min-height:32px; vertical-align:middle; background:#FFF; font-size:14px; font-weight:normal; border-bottom: 1px solid #EEE; padding: 12px 5px;} .tbl-list tr:nth-child(2n) td, .tbl-list tr:hover td{background: #FBFBFB} .tbl-list tr td:first-child{text-align: center;} .tbl-list tr td:last-child a{margin-left: 10px;} .tbl-list tr td.left{text-align: left;} .tbl-list tr td.center{text-align: center;} .tbl-list tr td.right{text-align: right;} .tbl-list td img{width: 100px; max-height: 100px; cursor: pointer;} .tbl-list td img.normal{width: auto; max-height: initial; margin-right: 5px;} .tbl-list .price{text-align: right; font-weight: bold;} .tbl-list .price > span{width: 100%; display: block; font-size: 18px; margin-bottom: 10px;} .tbl-list .price > span:last-child{margin-bottom: 0px;} .tbl-list .price > span.gift{color: var(--menutopcolorhover);} .tbl-list .price > span > span{float: left; font-weight: 400; font-size: 16px;} .tbl-list .price i{width: 30px; font-size: 20px; margin-right: 10px; float: left;} .tbl-list .price i.fa-gift{color: var(--menutopcolorhover);} .tbl-list .price b{font-weight: 600} .tbl-person{} .tbl-list.tbl-person th{background: none; border: none; color: #111; font-weight: bold; border-bottom: 1px solid #DDD;} .ordRowMb{display: none;} .neo-search, .neo-cart{width: 100%; height: 100%; position: absolute; z-index: -9999; display: none; top: -9999px; left: 0px; background: #FFF; } .neo-search.active, .neo-cart.active{z-index: 9999; display: block; top: 0px;} .neo-search .neo-search-close, .neo-cart .neo-cart-close{position: absolute; right: 50px; top: 50px; font-size: 30px;} .neo-search .neo-search-close i, .neo-cart .neo-cart-close i{font-size: 30px;} .neo-search-in{margin: 20% auto 0px; text-align: center;} .neo-search-in form{font-size: 0px;} .neo-search-in input[type=text]{padding: 10px 15px; background: #FBFBFB; border: 1px solid #DDD; min-width: 250px; height: 40px;} .neo-search-in button{height: 40px; background: #333; border: 1px solid #000; padding: 10px 20px; color: #FFF; cursor: pointer;} .neo-cart .neo-cart-close{top: 10px; right: 10px; font-weight: normal; } .neo-cart .neo-cart-close i{color: #FFF; font-size: 18px;} .neo-cart .neo-cart-close a{display: block; padding: padding: 0px 10px;;} .neo-cart.active{background: rgba(0, 0, 0, .5); position: fixed; z-index: 999999999;} .neo-cart-in{right: 0px; min-width: 320px; width: 400px; background: #333; float: right; color: #FFF; position: relative; padding: 20px 20px; -webkit-box-shadow: 5px 5px 10px 10px rgba(0,0,0,0.75); -moz-box-shadow: 5px 5px 10px 10px rgba(0,0,0,0.75); box-shadow: 5px 5px 10px 10px rgba(0,0,0,0.75);} .neo-cart-in .title{border-bottom: 1px solid #999; padding-bottom: 10px;} .neo-cart-in .title span{font-size: 18px;} .neo-cart-in .content{min-height: 300px; height: 300px; border-bottom: 1px solid #999; margin-bottom: 15px; overflow-y: auto;} .neo-cart-in .action{} .neo-cart-in .action .act-btn{} .neo-cart-in .action .btnCartAct{width: 45%; display: block; padding: 10px 10px; text-align: center; font-size: 16px; background: #FFF; border: none;} /*.neo-cart-in .action .btn-payment{width: 100%; display: block; padding: 10px 15px; text-align: center; font-size: 18px; background: #FFF; border: none;}*/ .neo-cart-in .action .btn-payment{float: left; } .neo-cart-in .action .btn-payment:hover{background: #DDD} /*.neo-cart-in .action .btn-payment i{padding-left: 10px;}*/ .neo-cart-in .action a i{padding-left: 10px;} .neo-cart-in .action .btn-continue{float: right;} .cart-products, .cart-products li{margin: 0px; padding: 0px; list-style: none; overflow: hidden;} .cart-products li{border-bottom: 1px solid #e6e6e6; padding: 15px 10px 15px 0px; } .cart-products li:last-child{border-bottom: none;} .cart-products .cp-icon{width: 100px; display: inline-block; overflow: hidden; float: left; padding-right: 10px;} .cart-products .cp-icon img{width: 100%;} .cart-products .cp-name{color: #FFF; font-size: 16px;} .cart-products .cp-name > span{display: block; margin-top: 10px; font-size: 14px; text-transform: uppercase;} .cart-products p{margin: 0px; padding-top: 10px; width: 100%; float: left;} .cart-products p > input{float: left; width: 40px; height: 30px; background: none; border: 1px solid #999; color: #FFF; padding: 5px; text-align: right;} .cart-products .cp-plus, .cart-products .cp-minus{float: left; height: 30px; width: 25px; display: inline-block; color: #FFF; text-align: center; border-top: 1px solid #999; border-bottom: 1px solid #999; line-height: 30px; padding-top: 0px;} /*#frmPayment .cart-products .cp-plus, #frmPayment .cart-products .cp-minus{padding-top: 6px;}*/ .cart-products .cp-plus{border-right: 1px solid #999;} .cart-products .cp-minus{border-left: 1px solid #999;} .cart-products .cp-plus:hover, .cart-products .cp-minus:hover{color: #000; background: #EEE} .cart-products .cp-price{float: right; font-size: 18px; color: #FF3E3E;} .cart-products .cp-price i, .neo-cart-in .action .price i, .neo-cart-in .action .ship i{text-decoration: line-through; font-style: normal; } .cart-products .action .total{margin-bottom: 15px;} .cart-products .action .total:after{clear: both; display: table; content: ""} .neo-cart-in .action .ship{font-size: 16px; margin-bottom: 0px; color: #FF3E3E;} .neo-cart-in .action .ship span{float: right; font-size: 18px;} .neo-cart-in .action .ship i{padding-left: 10px;} .neo-cart-in .action .price{font-size: 18px; margin-bottom: 0px;} .neo-cart-in .action .price span{float: right; font-size: 20px;} .neo-cart-in .action .msg{text-align: center; } .neo-cart-in .loading{position: absolute; top: -9999; left: -9999px; z-index: -999999; display: none; background: rgba(256, 256,256, .75); width: 100%; height: 100%; text-align: center; padding-top: 60%;} .neo-cart-in .loading.active{top: 0px; left: 0px; z-index: 999999; display: block;} .neo-cart-in .loading i{color: #000; font-size: 70px;} .box-msg{position: absolute; z-index: -9999999; top: -999px; left: -999px; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, .55);} .box-msg.active{z-index: 9999999; top: 0px; left: 0px; display: block;} .box-msg .box-msg-in{min-width: 320px; width: 500px; background: rgba(255, 255, 255, .85); margin: 0 auto; margin-top: 20%; border: 1px solid #DDD; -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.95); box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.55);} .box-msg .box-msg-in .title{border-bottom: 1px solid #999; padding: 10px; text-align: center; position: relative; font-size: 20px; text-transform: uppercase;} .box-msg .box-msg-in .msg-close{position: absolute; top: 5px; right: 5px; font-size: 20px;} .box-msg .box-msg-in .content{padding: 10px; min-height: 100px; font-size: 14px;} .box-cus-order{} .box-customer .order-lbl{padding-left: 10px; font-size: 16px; width: 100%; float: left; margin-top: 20px; display: block;} .box-customer .order-lbl a{border-bottom: 1px solid #999; padding-bottom: 10px; display: inline-block; padding-right: 50px;} .box-customer{width: 50%; float: left; padding-left: 10px; border-left: 1px solid #e6e6e6;} /* padding-left: 10px;*/ .box-customer .frmElement:nth-child(2n), .box-customer .frmElement:nth-child(2n+1){width: 50%; float: left; clear: initial;} .box-customer .frmElement .element, #frmContact .frmElement .element, #frmRegister .frmElement .element, #frmAcc .frmElement .element{width: 100%} .box-customer .frmElement .element input[type="text"], .box-customer .frmElement .element textarea, #frmContact .frmElement .element input[type="text"], #frmContact .frmElement .element textarea, #frmRegister .frmElement .element input[type="text"], #frmRegister .frmElement .element input[type="password"], #frmRegister .frmElement .element textarea, #frmLogin .frmElement .element input[type="text"], #frmLogin .frmElement .element input[type="password"], #frmAcc .frmElement .element input[type="text"], #frmAcc .frmElement .element input[type="password"], #frmAcc .frmElement .element textarea{width: 100%; padding: 10px 10px 10px 10px; height: auto; font-size: 16px;} .box-customer .frmElement .element select{width: 100%; padding: 10px 10px; height: auto; } .box-customer .frmElement.addr, .box-customer .frmElement.request{width: 100%;} .box-customer .frmElement .btn{width: 100%} .box-customer .frmElement .btn input[type="submit"]{float: left;} .box-customer .frmElement .btn input[type="reset"]{float: right; margin-right: 0px;} .box-customer .frmElement .error {font-weight: bold; font-size: 16px;} .box-order{width: 50%; float: left; padding-right: 20px;} .box-order .cart-products li a{color: #555} .box-order .cart-products li a:hover{color: #000} .box-order .cart-products li a > span{color: #000} .box-order .cart-products p{/*width: initial; float: initial;*/} .box-order .cart-products p .cp-quan{font-size: 20px;} .box-order .cart-products li:last-child .ship{font-size: 18px; overflow: hidden; margin-bottom: 10px;} .box-order .cart-products li:last-child .ship span{float: right;} .box-order .cart-products li:last-child{font-size: 22px; overflow: hidden;} .box-order .cart-products li:last-child label{width: 200px; float: left;} .box-order .cart-products li:last-child .total-quan{float: left;} .box-order .cart-products li:last-child .total-price{float: right;} .box-order .cart-products li:last-child .total-price i, .box-order .cart-products li:last-child .ship i{font-style: normal; text-decoration: line-through;} .box-mborder{background: url(../images/bg-reg.jpg) center top no-repeat #EFEFEF;} .box-mborder .box-path{background: none; border: none; padding: 15px 0px; color: #FFF;} /*.box-mborder .box-path .path{color: #FFF;}*/ /*.box-mborder .box-path a{color: #FFF;}*/ .box-mborder .box-main-content{width: 100%; padding: 20px; background: #FFF;} .box-mborder #slFromTo{border: none; text-align: right; background: none; font-size: 18px;} .box-mborder .box-ord-sbtn .element{position: relative;} .box-mborder .box-ord-sbtn button{position: absolute; background: none; border: none; right: 5px; top: 5px; font-size: 18px; color: #555; font-weight: normal;} .box-news-main .box-main-left{width: 26%; padding: 0px;} .box-news-main .box-main-right{width: 22%; padding: 0px;} .box-news-main .box-main-content{width: 52%; padding: 0px 20px;} .box-news-main .box-right .box-right-title{padding-top: 0px;} .box-ml-news{padding: 0px 15px} .box-ml-news ul{padding-top: 20px;} .box-ml-news li{padding: 0px 0px 15px 0px;} .box-cart-main{background: #FFF;} .box-about-main{} .box-about-main .box-main-content{font-size: 16px; padding: 0px 15px} .box-details{width: 100%; font-size: 16px; line-height: 1.8;} .box-details p{margin: 6px 0px;} .news-list.srv-list .icon{display: block; width: 250px; float: left; padding-right: 20px;} .news-list.srv-list h3, .news-list.srv-list p{width: calc(100% - 270px); float: left;} .frmElement.rdo-voca label{width: 25%; cursor: pointer;} #frmRegister{font-size: 16px;} #frmLogin .frmElement .btn, #frmAcc .frmElement .btn{} #frmPayment{font-size: 16px;} #boxPayMethod{font-size: 16px; padding-left: 10px;} #walletCons > span{display: none;} #walletCons.red > span{display: block;} #boxCoin{} #boxCoin .lblCoin{font-weight: 500; display: block; margin-bottom: 10px;} #boxCoin input.txt{width: 110px; font-size: 18px;} .overhd{overflow: hidden;} .overhd body{position: relative;} .aet{position: absolute; z-index: 999; color: #FFF; left: 0px; top: 0px; font-size: 26px; display: block;} .aet i{background: #000; width: 24px; height: 26px;} .aet:hover{color: #DDD} .frmTitle { text-align: center; font-size: 16px; } .frmElement { width: 100%; padding: 5px 10px; clear: both; display: table;} .frmElement .lbl { width: 40%; float: left; padding: 10px 20px 10px 0px; margin: 10px 0px; text-align: right; font-size: 14px;} .frmElement .element{ width: 60%; float: left; padding: 10px 0px 10px 0px; position: relative;} .frmElement .element input[type=text], .frmElement .element input[type=password], .frmElement .element select, .frmElement .element span{border: 1px solid #ccc; border-radius: 3px; text-indent: 5px; padding: 8px 10px 8px 15px; font-size: 18px;} .frmElement .element input[type=text], .frmElement .element input[type=password], .frmElement .element select, .frmElement .element textarea, .frmElement .element span{width: 100%; min-width: 250px;} .frmElement .element select{text-indent: 0px;} .frmElement .element span{display: block; background: #F7F7F7; cursor: pointer;} .frmElement .element b.check{position: absolute; width: auto; top: 20px; background: none; border: none; min-width: initial; color: #FF3E3E; font-size: 20px; font-weight: bold; left: 5px;} .frmElement .element textarea{border: 1px solid #ccc; text-indent: 5px; padding: 4px 0px; min-height: 80px;} .frmElement .element label{margin-right: 10px; cursor: pointer;} .frmElement .error{width: 70%; float: left; color: #FD0100} .frmElement .txtCapt input{float: left; width: 70px !important; min-width: 70px !important; height: 30px !important; border-radius: 0 !important; border: 1px solid #DDD;} .frmElement .btn, .frmElement .msg{} /*margin-left: 30%; */ .frmElement .btn input[type=submit], .frmElement .btn input[type=reset], #frmDrafBtn input[type=submit]{font-size: 18px; text-align: center; cursor: pointer; padding: 10px 40px; color: #fff; border: none; border-radius: 1px; margin: 0px auto; margin-right: 10px;} .frmElement .btn input[type=submit]{background: var(--maincolor);} .frmElement .btn input[type=reset]{background: #666;} .frmElement .btn input[type=submit].btn-green{background: var(--menutopcolorhover);} .frmElement.elm-btn{width: 100% !important;} .frmElement.frmAct input[type=submit], .frmElement.frmAct input[type=reset]{width: calc(100% - 50% - 20px);} .frmElement.frmAct input[type=reset]{float: right;} .contact-lbl{width: 40%; text-align: right; padding-right: 20px; font-size: 20px;} input[type=radio]{cursor: pointer;} /* background: url(../images/bg-login.jpg) center top no-repeat #006d2a; */ .box-login{padding-top: 90px; padding-bottom: 90px; } .box-register, .box-login{background: url(../images/bg-reg.jpg) center top no-repeat #EFEFEF;} /*-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);*/ .box-register .box-login-in{} .box-login .box-main-content{width: 100%; padding-right: 0px;} .box-login-in{background: #FFF; border-radius: 10px; width: 90%; margin: 0 auto; min-height: 470px; overflow: hidden; padding-top: 50px; padding-bottom: 40px;} .box-login-in .box-login-frm{width: 45%; float: left; padding: 30px 40px;} .box-login-in .box-login-frm .lblAppr{font-size: 14px; color: #999; padding: 15px 0px 0px 0px;} .box-login-in .box-login-frm .lblAppr a{text-decoration: underline; color: #999;} .box-login-in .login-img{width: 55%; height: 470px; float: left; background: url(../images/img-login.png) center bottom no-repeat #f3f3f3; background-size: contain; display: block;} .box-login-in .login-img .lbl{padding: 100px; text-align: center; background: rgba(255, 255, 255, .7);} .box-login-in .box-reg-frm{width: calc(100% - 440px);} .box-login-in .reg-img{background: url(../images/img-reg.png) center bottom no-repeat #f3f3f3; width: 440px; height: 650px; background-size: cover;} .box-login-in .frmElement{padding: 5px 0px;} .box-login-in .frmElement .element{width: 100%; } .box-login-in .frmElement .element input[type="text"], .box-login-in .frmElement .element input[type="password"], .box-login-in .frmElement .element select{border: none; border-bottom: 1px solid #DDD; padding: 10px 10px 10px 20px !important;} .box-login-in .frmElement .btn input[type="submit"]{width: 100%; border-radius: 30px; padding: 15px 10px; font-size: 16px; text-transform: uppercase;} .box-login-in .frmElement .error{width: 100%; margin: 0px; font-size: 16px;} .frmElement i{position: absolute; left: 0px; top: 20px; font-size: 20px; color: var(--maincolor);} .box-mborder .box-ord-sbtn button i{position: relative; left: initial; top: initial;} .cbRmb{padding: 10px 0px 20px 0px !important;} .cbRmb .lbl{width: auto; float: initial; padding: 0px; margin: 0px;} .cbRmb .element{padding: 0px 10px 0px 0px; float: left; width: auto !important;} .cbRmb > a{float: right; font-size: 14px;} #frmDrafBtn input[type=submit]{background: var(--maincolor); margin: 0px; padding: 10px 10px;} #frmPerson{background: #FFF; padding: 15px 0px;} #frmPerson .frmElement .lbl {width: 250px;} #frmPerson .frmElement .btn, #frmUpdate > .err{margin-left: 250px;} .person-phone{margin-top: 10px; display: block; font-size: 18px;} .person-phone i{} .frm-title {padding: 10px; background: #578c6d; font-size: 16px; font-weight: bold; margin-bottom: 15px; color: #FFF;} .abtn{background: var(--menutopcolorhover); color: #FFF; padding: 10px 30px; font-size: 18px; display: inline-block; border: none; cursor: pointer;} .abtn:hover, .abtn.btn-red:hover{color: #000;} .abtn.btn-red, .btn-red{background: #F00 !important; color: #FFF !important;} .abtn.btn-red:hover{color: #000;} .box-invite{width: 100%; margin-bottom: 10px;} #frmOSearch .frmElement{padding: 0px; width: 50%; float: left; clear: initial; float: left;} #frmOSearch .frmElement .element{padding-top: 0px; width: 90%;} #frmOSearch .frmElement.right{padding-right: 0px; padding-left: 10px;} #frmOSearch .frmElement.right .element{float: right;} #boxStatistic{color: #FFF;} #boxStatistic > div{width: 25%; float: left; text-align: center; margin-bottom: 30px; padding: 10px;} #boxStatistic .sttinner{background: var(--maincolor); border-radius: 20px;} #boxStatistic > div span{display: block;} #boxStatistic > div .icon{} #boxStatistic > div .icon i{color: #FFF; text-align: center; font-size: 30px; padding: 30px;} #boxStatistic > div .lbl{font-size: 20px; padding: 10px 0px 20px 0px; color: #F5F5F5;} #boxStatistic > div b{font-size: 24px;} #mbMenuBott{display: none; background: #FFF; border-top: 1px solid #BBB; width: 100%; padding: 10px 0px;} #mbMenuBott ul, #mbMenuBott li{margin: 0px; padding: 0px; list-style: none;} #mbMenuBott li{width: 25%; float: left; text-align: center;} #mbMenuBott li a{color: #666;} #mbMenuBott li a.active, #mbMenuBott li a:hover{color: var(--maincolor);} #mbMenuBott li a i{ display: block; font-size: 30px; margin-bottom: 5px;} #mbMenuBott li a i.fa-shopping-cart{position: relative;} #mbMenuBott li a span{font-size: 16px; } #mbMenuBott .cartQuanTotal{width: 24px;height: 24px;display: block;position: absolute;right: 20px;top: 0px;font-size: 12px;font-weight: normal;background: #004a1d;border-radius: 50%;color: #FFF;text-align: center;line-height: 24px; padding: 0px;} .frmElement .element #btnMbFind{position: absolute; top: 10px; right: 0px; display: block; background: #1B57A0; padding: 9px;} .frmElement .element #btnMbFind i{position: relative; left: initial; top: initial; color: #FFF} .box-btn{} .box-btn.mb{display: none;} .tbl-resp{overflow-x:auto;} .catpcha{} .catpcha img{width: 190px; float: left;} .catpcha span{display: inline-block; line-height: 50px; padding: 0px 10px; float: left; width: 40px; text-align: center;} .catpcha span i{cursor: pointer;} .catpcha .txtCaptcha{float: left; width: calc(100% - 230px) !important; } .catpcha input, .catpcha label{width: 100% !important} .btn-act{background: var(--maincolor); margin-top: 5px; padding: 6px 10px; color: #FFF; display: inline-block;} .box-content-details{font-size: 16px;} div.skiptranslate{display: none; visibility: hidden; position: absolute; z-index: -99999;} .txt-right{text-align: right !important; } .txt-left{text-align: left !important; } .center, .ctr{ text-align: center; font-size: 14px; } .mrleft10{margin-left: 10px;} .mrright10{margin-right: 10px;} .pad{padding: 10px 20px; font-size: 14px; } .pad10{padding: 10px;} .pad10Ipt{padding: 10px !important;} .pad20{padding: 20px;} .pad20Ipt{padding: 20px !important;} .marrl10{margin: 0px 10px;} .font14{font-size: 14px;} .font16{font-size: 16px;} .font16Ipt{font-size: 16px !important;} .font18{font-size: 18px;} .font18Ipt{font-size: 18px !important;} .font20{font-size: 20px;} .font20Ipt{font-size: 20px !important;} .btn-nobor{border: none;} .continues { text-align: center; font-size: 16px; } .relativetitle { line-height: 30px; font-size: 16px; font-style: italic } .lblMsg { display: none; height: auto; color: #F00; padding-top: 10px; font-size: 14px; } .reg-success { color: #3D6AE4; padding: 20px 10px; font-size: 16px; } .success { color: #3D6AE4; } .divAdd { color: #06F; font-size: 16px; padding: 20px; } .numpages { padding: 2px 0 15px 0; font-size: 16px; } .padlr { padding: 4px 20px; } .notfound, .not-found { padding: 30px; text-align: center; font-size: 16px; color: #880000; clear: both; } .found { padding: 10px; text-align: center; font-size: 16px; color: #0066FF } .orange { background: #EB7336; } .red, .err { color: #F00 }/*#880000*/ .green{color: var(--maincolor)} .bgPink{background: #fbf4f4} .bgPurple{background: #f4f5fa} .bgGreen{background: #f2f7ee} .bgOrange{background: #fcf6ef} .bgGray{background: #f5f5f5} .dnhd { display: none !important; } .clear { clear: both; height: 0; line-height: 0; width: 0; overflow: hidden; display: block;} .clear1 { clear: both; height: 1px; background: none } .clear2 { clear: both; height: 2px; background: none } .clear3 { clear: both; height: 3px; background: none } .clear5 { clear: both; height: 5px; background: none } .clear10 { clear: both; height: 10px; background: none } .clear20 { clear: both; height: 20px; background: none } .clear30 { clear: both; height: 30px; background: none } .clear40 { clear: both; height: 40px; background: none } /* For desktop */ @media only screen and (max-width: 1899px) { .banner .logo, .banner .bnsearch, .banner .bninfo{width: 33.3%;} } /* For desktop */ @media only screen and (max-width: 1600px) { .neo{width: 100%;} } /* For desktop */ @media only screen and (max-width: 1280px) { .banner .bnsearch form {width: 450px;} .scrollup{bottom: 30px;} #contactFixR a span{display: none;} .banner .logo{width: 25%;} .banner .bnsearch{width: 35%;} .banner .bninfo{width: 40%;} } /* For desktop */ @media only screen and (max-width: 1024px) { .banner .logo, .banner .bnsearch, .banner .bninfo{width: 100%} .banner .logo a{background-position: center;} .banner .bninfo{text-align: center; margin-bottom: 20px;} .neo{width: 100%} .banner .logo a{background-size: contain;} .banner .box-search { width: calc(100% - 200px);} .banner .box-act-sys{width: 100%; float: initial; padding-bottom: 10px; display: block; text-align: center; margin-top: 0px;} .banner .box-act-sysin a{} .box-4mb{clear: both; display: block;} .box-cats .item{width: calc(100% / 3 - 20px); margin-bottom: 20px;} .box-icon-lbls .item > div{text-align: center; margin-left: 0px;} .box-icon-lbls .item{padding: 0px 15px;} .box-icon-lbls .item:first-child{padding-left: 0px;} .box-icon-lbls .item:last-child{padding-right: 0px;} .box-servicer > div.item{padding: 0px 10px;} .box-servicer > div.item > span{display: block; margin-bottom: 15px;} .box-servicer > div.item > div > span{font-weight: 600} .box-servicer > div.item > div > b{font-weight: 400} .box-login-in{width: 100%} .box-login-in .box-login-frm, .box-login-in .login-img{width: 50%;} .frmElement .btn input[type="submit"], .frmElement .btn input[type="reset"]{margin: 0;} .frmElement.elm-btn{width: 100% !important;} .box-bottom{padding-bottom: 40px;} .regemail-lbl{float: initial; width: 80%; margin: 0 auto; padding-bottom: 20px;} .regemail-lbl:after{clear: both; display: table; content: ""} .regemail-frm{width: 100%;} .regemail-frm form{width: 80%; margin: 0 auto;} .regemail-frm input {width: 100%;} .regemail-frm > form > span{width: 100%;} .footer .info{width: 33.3%; text-align: center;} .footer .info:first-child{width: 100%; border-right: none; margin-right: 0px; text-align: center; padding-bottom: 10px; border-bottom: 1px solid var(--bordercolor); margin-bottom: 20px;} .footer .info .ftlogo{} .footer .info .ftlogo a {display: inline-block; text-align: center;} .footer .info .ftlogo a img {display: inline-block;} } /* For desktop */ @media only screen and (max-width: 1023px) { .header .name, .header .hotline-info{display: none;} .banner .neo{position: relative;} .banner .bar{display: block; position: absolute; left: 10px; top: 10px; z-index: 9;} .banner .bar a{font-size: 30px; width: 40px; height: 40px; display: block; text-align: center; line-height: 40px;} .banner .boxLogout{display: block; position: absolute; right: 10px; top: 20px; z-index: 9; font-size: 18px;} .menu-top{position: initial;} .menu-top .bar{padding: 0px; margin: 0px; position: initial;} .menu-top .bar:after{display: none;} .menu-top .bar > a, .menu-top > .neo > ul{display: none;} .menu-top .bar > ul > li.formb{display: block;} .menu-top .bar ul.menu-top-active{display: block; z-index: 99999999; opacity: 1; top: -242px;} #btnCloseMn.active{display: block; top: -230px; z-index: 999999999; opacity: 1} } /* For table */ /* For table */ @media screen and (max-width: 800px) { .banner .logo a {background-size: 35%;} .banner .bnsearch form{width: 100%} .box-slider-idx {height: auto; width: 100%;} .box-slider-idx .neo{padding: 0px;} .box-slider-idx .owl-carousel .owl-stage-outer{border-radius: 0px;} .owl-carousel .owl-item img {height: auto;} .owl-theme .owl-nav .owl-prev {left: 10px;} .owl-theme .owl-nav .owl-next {right: 10px;} .procat-list .item{width: 25%} .box-cats.ctr a{margin-bottom: 15px;} .box-main-left{width: 100%} .box-main-left.box-member-left{display: block; width: 100%;} .products.products-idx .item {width: calc((100% / 4) - 20px);} .box-cusrev {margin: 0px; display: flex; flex-wrap: wrap;} .box-cusrev .item {width: calc(50% - 20px); margin-bottom: 20px; padding: 20px 10px} .box-cusrev .item .info .avatar{width: 80px; height: 80px; margin: 0 auto; float: initial;} .box-cusrev .item .info .name{width: 100%; margin-top: 15px; text-align: center;} .box-msg .box-msg-in{width: 100%;} .regemail-lbl{width: 90%;} .regemail-lbl > div{width: calc(100% - 50px); padding-left: 20px;} .regemail-lbl > div > span {font-size: 20px;} .regemail-frm form{width: 90%;} .regemail-lbl > span.icon{width: 50px;} .suport-idx li{width: 50%; margin-bottom: 20px;} .suport-idx li:nth-child(1){padding-left: 0px; padding-right: 10px;} .suport-idx li:nth-child(2){padding-left: 10px; padding-right: 0px;} .suport-idx li:nth-child(3){padding-left: 0px; padding-right: 10px;} .suport-idx li:nth-child(4){padding-left: 10px; padding-right: 0px;} .procat-list .item{width: 25%} .box-cats.ctr a{margin-bottom: 15px;} .owl-theme .owl-nav .owl-prev {left: 10px;} .owl-theme .owl-nav .owl-next {right: 10px;} .box-productidx .product-list li .icon{height: auto;} .box-productidx.box-prosaleoff .title .titler{border-bottom: none;} .box-productidx .title .titler{border-bottom: 2px solid #999; padding-bottom: 10px;} .box-prosaleoff div.item .icon > div{opacity: 0;} .box-prosaleoff .item div.ctr {display: block; } .product-list li > div.ctr{display: block;} .products .item h2 a{min-height: 38px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .neo.box-idx.box-productidx{padding: 10px 0px;} .box-main-right{width: 100%; padding: 0px;} .product-list li .icon, .box-prosaleoff div .icon{max-height: initial;} .product-list li:hover .icon > div, .box-prosaleoff div.item:hover .icon > div{display: none;} .box-idx .title{text-align: center; margin-bottom: 30px;} .box-idx .title::after{border: none;} /*.box-idx .title .titleright{display: none;}*/ .box-idx .box-idx-50{width: 100%;} .box-idx .box-idx-50.idx-50l, .box-idx .box-idx-50.idx-50r{padding-left: 0px; padding-right: 0px;} .box-idx.box-productidx .product-list li{margin-bottom: 0px; padding-top: 20px; padding-bottom: 10px;} .box-idx.box-productidx .product-list li:nth-child(1), .box-idx.box-productidx .product-list li:nth-child(2){padding-top: 0px;} .product-list li{width: 50%;} .product-list li:nth-child(3n),.product-list li:nth-child(3n+1),.product-list li:nth-child(3n+2){padding-left: 0px; padding-right: 0px;} .product-list li:nth-child(2n){padding-right: 0px; padding-left: 15px; border-bottom: 1px solid #DDD;} .product-list li:nth-child(2n+1){padding-right: 15px; padding-left: 0px; border-right: 1px solid #DDD; border-bottom: 1px solid #DDD;} .box-buynow p:last-child{margin-top: 20px;} .news-list li a.icon img{height: auto;} .neo-cart .neo-cart-close a{padding: 0px;} .box-customer .frmElement:nth-child(2n), .box-customer .frmElement:nth-child(2n+1){width: 100%;} .box-product-main .box-main-content{width: 100%;} .box-idx.box-prosaleoff .content { padding: 40px 10px 20px 10px; } .btn-cart, .owl-carousel .item a.btn-cart{width: 90%;} .box-productidx.box-idx .title .titleright.idx{display: none;} .box-idx.box-productidx .product-list li:nth-child(3) .ctr a, .box-idx.box-productidx .product-list li:nth-child(4) .ctr a{margin-bottom: 0px;} .box-idx.box-productidx .product-list li:nth-child(3), .box-idx.box-productidx .product-list li:nth-child(4){border-bottom: none; padding-bottom: 0px;} .box-btn.mb{display: block; border: 1px solid #DDD; margin-top: 30px; padding: 10px;} .neo.box-service-idx{padding-bottom: 40px;} .box-service-idx .product-list li{border: none !important;} .clear.mbsuggest{height: 40px;} .clear40.mbsrv{height: 0px;} .product-info .btn-cart, .product-info .btnBuy{width: 100%;} .product-info .btnBuy{margin-bottom: 10px;} .product-info a.mrleft10, .product-info a.mrright10{margin-left: 0px; margin-right: 0px;} .tabs-content .copylink:last-child{display: none;} .btn-cart, .btnBuy, .btnBorder{padding: 10px;} .box-right li a.icon{text-align: center;} /*display: none;*/ .box-main-left{} .box-news-main .box-main-content, .box-news-main .box-main-right{width: 100%; padding: 0px;} .box-mborder .box-main-content{padding: 10px 0px;} #boxStatistic > div{width: 50%; padding: 10px; margin-bottom: 10px;} #boxStatistic > div .lbl{font-size: 16px;} #boxStatistic .sttinner{} .owl-theme .owl-nav{margin-top: 0px;} .clear30-mb{height: 0px;} .frmElement .btn{width: 60%;} .frmElement .btn input[type="reset"]{float: right;} .box-customer{border: none;} .box-customer .frmElement .btn input[type="submit"]{width: 100%; margin-bottom: 15px;} .box-mborder .formSearch{padding: 0px 10px;} .box-mborder .box-ord-sbtn button i{position: relative; left: initial; top: initial;} .ordMbTotal{float: left;} .ordMbTotalPrice{float: right;} .tbl-ps-ord td .ordRowMb{display: block; text-align: left;} .tbl-ps-ord td > span{display: none;} .tbl-ps-ord th:nth-child(n+2), .tbl-ps-ord td:nth-child(n+2){display: none;} .tbl-ps-ord tr:nth-child(1), .tbl-ps-ord tr:nth-child(2){display: none;} .ordRowMb{display: block;} .ordRowMb > div{display: block; overflow: hidden; margin-bottom: 10px;} .ordRowMb > div i{font-size: 20px; text-align: center; width: 30px;} .ordRowMb .ormName{overflow: hidden;} .ordRowMb .ormNameOrd{width: 30px; height: 30px; float: left; background: var(--maincolor); color: #FFF; border-radius: 50%; text-align: center; line-height: 30px; display: none;} .ordRowMb .ormNameName{float: left; font-size: 16px; font-weight: bold; padding: 5px 0px 0px 10px;} .ordRowMb .ormNameDate{padding-top: 5px; font-size: 16px; float: right; /*float: left; display: block; width: 100%;*/} .ordRowMb .ormNameDate i{display: none;} .ordRowMb .ormPhone{} .ordRowMb .ormItems .np-elm{display: block; margin-bottom: 5px; margin-left: 30px;} .ordRowMb .ormPhone a{font-weight: bold; margin: 0px;} .ordRowMb .ormPhone i{font-size: 30px; text-align: center; width: 30px;} .ordRowMb .ormAddr{} .ordRowMb .ormTotal{font-size: 18px;} .ordRowMb .ormLeft{float: left;} .ordRowMb .ormRight{float: right;} .ordRowMb .ormStt{} .ordRowMb .ormStt b{float: left; font-size: 20px;} .ordRowMb .ormStt .btnOrdDetails{float: right;} .ordRowMb .ormStt input{margin-top: 15px; margin-left: 5px;} .ordRowMb .ormStt .btnUpStt{float: right;} .box-login-in{width: 100%;} .box-login-in .box-login-frm{width: 100%;} .box-login-in .login-img{width: 100%;} .productListRight li{width: 50%; float: left;} .productListRight li:nth-child(2n){padding-left: 10px; padding-right: 0px;} .productListRight li:nth-child(2n+1){padding-left: 0px; padding-right: 10px;} .productListRight li .icon{overflow: hidden; position: relative; display: block;} .productListRight li .icon .ctr{width: 100%;} .productListRight li .icon .ctr .btn-cart{width: 100%;} .productListRight li .icon img{width: 100%;} .box-left.box-ml-news{display: none;} .box-service-idx{overflow: hidden;} .box-msg .box-msg-in{width: 100%;} .box-bottom{background: #FFF;} .box-bottom li{width: 33.3%;} .box-bottom li:nth-child(4), .box-bottom li:nth-child(5), .box-bottomer li:nth-child(1){display: none;} .box-bottom li{text-align: center;} .box-bottom li span { width: 100%; padding: 0px; margin-top: 10px;} .box-bottom li i{float: initial; color: var(--maincolor);} .box-bottomer {background: var(--maincolor);} .box-bottomer .neo{padding: 0px 20px;} .box-bottomer li{width: 50%;} .box-bottomer li:last-child{display: none;} .box-bottomer li:nth-child(2){width: 100%;} .box-bottomer li:nth-child(2) i{display: none; } .box-bottomer li:nth-child(2) span{margin-top: 0px;} .box-bottomer .btm-call{width: 100%; display: block; border: 1px solid #54c881; padding: 10px;} .footer{} .footer .info.infolast { width: 50%;} .footer .neo .clear40{height: 0px;} .footer .neo{padding: 0px 10px;} .footer .info.infolast{width: 100%; border-top: 1px solid #DDD; margin-top: 20px; padding-top: 20px;} .footer .info.infolast p{text-align: left;} .footer .info.infolast p.title{text-align: center;} .footer .info{text-align: center;} .social-bank .box-social, .social-bank .box-bank{width: 100%; margin-bottom: 20px; text-align: center;} #contactFixR a span{display: none;} .tabs-content{padding: 10px 0px} .tabs .tab{width: 50%; padding: 10px;} .tabs .tab a {text-align: center; font-size: 18px}; } /* For table */ @media screen and (max-width: 768px) { .procat-list {display: flex; flex-wrap: wrap;} .box-customer, .box-order{width: 100%; padding: 0px;} .box-order{padding: 0px 10px;} .product-img-slide, .product-info{width: 100%; padding: 0px;} .product-info{margin-top: 20px;} .product-img img {width: 100%; height: auto;} .box-cats .item div img{width: 100%; height: auto;} } /* For mobile */ @media screen and (max-width: 667px) { .product-img-slide,.product-info{width: 100%; padding-left: 0px; padding-right: 0px;} .box-slider-idx {} .frmElement .btn{width: 100%; margin-left: 0px;} #frmPerson .frmElement .lbl, .frmElement .element{width: 100%;} #frmPerson .frmElement .lbl{margin-bottom: 0px; padding-bottom: 0px; text-align: left; margin-top: 0px; padding-top: 0px;} #frmPerson .frmElement .btn{margin-left: 0px;} .box-ord-cust-info{} .box-ord-cust-info .frmElement .lbl{width: 70px !important; padding-right: 10px !important; padding-left: 10px !important } .box-ord-cust-info .frmElement .element{width: calc(100% - 80px) !important;} } /* For mobile */ @media screen and (max-width: 640px) { .header .hotline-info, .header .hotline-info a{background: #1C5099} .header .hotline-info a{color: #FFF} .header .hotline-info .hotline{color: #ff9fa1;} /*.box-productidx .product-list li .icon{height: 200px;}*/ .prosaleoff-time{width: 100%; background-size: contain; background-color: #dd2e00; border-radius: 0px;} .prosaleoff-time > div{margin-top: 10%; float: right; padding-right: 50px;} .box-idx.box-prosaleoff .content{width: 100%; border-radius: 0px;} .box-ads .item{width: 100%; padding: 10px !important;} .box-ads .item img{width: 100%} .products .item {width: calc(50% - 20px);} .products.products-idx .item {width: calc((100% / 3) - 20px);} .news-list li > a.icon, .news-list.nl-search li a.icon{width: 30%;} .news-list li > div{width: calc(100% - 30%);} } /* For mobile */ @media screen and (max-width: 580px) { .box-main-content{width: 100%; padding-right: 0px;} .box-main-right{width: 100%;} .box-pro-lbl {display: block; width: 100%; text-align: center; margin-bottom: 20px;} .boxSort{float: initial; width: 100%;} .boxSort select {width: 100%;} .contact-frm, .contact-content{width: 100%; padding: 0px;} .contact-content{padding: 10px 20px;} .box-news-details img{width: 100% !important;} .box-idx.box-prosaleoff .content{height: auto;} .box-idx.box-prosaleoff .titleright{padding-right: 0px;} .procat-list .item{width: 33.33%} .prosaleoff-time{height: auto; background-size: auto; background-position: left top;} .prosaleoff-time > div{margin-top: 20px; padding-right: 20px;} .frmElement{padding:5px 0px;} .frmElement, #frmOSearch .frmElement{margin-bottom: 15px;} .frmElement .element, #frmOSearch .frmElement, #frmOSearch .frmElement .element{width: 100%; padding: 0px;} .frmElement .element b.check{top: 8px;} .frmElement .element #btnMbFind{top: 0px;} .frmElement .btn input[type="submit"], .frmElement .btn input[type="reset"]{width: 45%; padding: 10px 0px; text-align: center;} .frmElement .btn input[type="submit"]{float: left;} .frmElement .btn input[type="reset"]{float: right;} #frmOSearch .frmElement .element, #frmOSearch .frmElement.right{padding: 0px;} .boxbtnfull a{width: 100%} .box-login-in .box-login-frm{padding: 30px 15px;} .box-login-in .frmElement .element{padding: 10px 0px;} .cbRmb .element{padding: 0px !important;} } @media screen and (max-width: 520px) { .box-servicer > div {width: 50%; margin-bottom: 40px;} /* .box-servicer > div:last-child{width: 100%; margin-bottom: 0px;}*/ .box-main-content{width: 100%;} #frmPerson{padding: 10px;} .box-productidx .product-list li .icon{height: 150px;} .box-path .path-right {width: 100%; padding: 15px 0px; float: left; text-align: left;} .box-path .path-right a{margin-left: 0px;} .box-path .path-right a:last-child{float: left; font-size: 20px; padding: 10px 0px; color: var(--maincolor); width: 100%;} #boxCtDt .frmElement{width: 100%; padding: 0px !important;} } /* For mobile */ @media screen and (max-width: 480px) { .slider-call-buy .title{font-size: 20px;} .slider-left p{font-size: 18px;} .procat-list .item { width: 50%; } .box-cats .item {width: calc(100% / 2 - 10px);} .box-cats .item:nth-child(2n){margin-left: 10px; margin-right: 0px;} .box-cats .item:nth-child(2n+1){margin-left: 0px; margin-right: 10px;} .box-login-in .login-img .lbl{padding: 40px 20px;} .slider-call-buy .title{font-size: 20px;} .slider-left p{font-size: 18px;} .procat-list .item { width: 50%; } .products.products-idx .item {width: calc((100% / 2) - 20px);} .catpcha img{width: 40%;} .catpcha .txtCaptcha{width: calc(100% - 40% - 40px) !important;} .box-login-in .login-img .lbl{padding-top: 30px;} .news-list.srv-list .icon{width: 100%; padding-right: 0px;} .news-list.srv-list h3, .news-list.srv-list p{width: 100%; float: left;} .regemail-lbl, .regemail-frm form{width: 100%;} .footer .info{width: 100%; margin-bottom: 20px;} } /* For mobile */ @media screen and (max-width: 420px) { .header .hotline-info .hotline{padding: 10px 10px 10px 0px} .header .hotline-info a{padding-left: 20px; padding-right: 20px;} .box-right li a.icon img{width: 100%;} .neo.box-idx.box-productidx {padding: 10px 10px;} .box-productidx .product-list li .icon{height: 120px;} .prosaleoff-time {background-size: contain;} .box-cusrev .item{width: 100%; margin-left: 0px; margin-right:0px; } .tabs .tab{padding: 10px 2px;} .tabs .tab a{text-align: center; font-size: 16px}; } /* For mobile */ @media screen and (max-width: 380px) { .header .hotline-info a{padding: 10px 10px;} .box-idx.box-prosaleoff .titleright{display: none;} .product-info .btn-cart, .product-info .btnBuy{padding: 10px 5px; font-size: 14px;} .box-bottomer li{width: 100%; margin-bottom: 20px;} .box-bottom li i, .box-bottomer li i{width: 50px;} .box-bottom li span{font-size: 14px;} } @media screen and (max-width: 360px) { } /* For mobile */ @media screen and (max-width: 320px) { #boxStatistic > div .lbl{font-size: 14px;} } @media print { .header, .banner, .menu-top, .body-content .box-title, .body-right, .td-post-sharing, .news-list-other, .footer-wrapper, .relativetitle, #btnPrint{display: none;} .body-content{width: 100%;} }