@charset "utf-8";
/* CSS Document
/////////////////////////////////////////////////
_ _ _ _
||¯ ¯ ¯\    |¯ \  |¯|   /||¯    D     2 ¯||\
|| |¯\  ||  | |\  | |   /||  B  U  N  0  ||\
|| |_/  ||  | | \ | |   /||  Y  N  E  1  ||\
||_ _ _//   | |  \ _|   /||_    G  O  9 _||\
¯ ¯ ¯
				dungneo@gmail.com
					20/01/2019
///////////////////////////////////////////////// */
@import "util.css";
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
:root {--txtcolorall: #000; --fontsizeall: 16px; --bgcolor: #FFF; --bgcolorsecond: #FFF; --headerbg: #FFF; --headercolor: #3e464a; --menutopcolor: #3e464a; --menutopcolorhover: #368c17; --maincolor: #2f0908; --secondcolor: #c81519; --pricecolor: #F44; --starcolor: #F4AC00;}
:before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { margin: 0; padding: 0; top: 0px !important; position: relative; line-height: 1.6; font-size: var(--fontsizeall); font-weight: 400; color: var(--txtcolorall); font-family: 'Open Sans', 'Roboto', 'Roboto Condensed', Arial, Georgia, Helvetica, sans-serif; }
a { color: #444; text-decoration: none }
a, a:hover, a:focus { transition: color 0.4s ease 0s; text-decoration: none; }
a:hover { color: var(--maincolor); }
.page-wrapper{width: 100%; margin: 0; padding: 0; position: relative; }
.neo-out{width: 100%; margin: 0 auto; padding: 0; position: relative; }
.neo{width: 1440px; margin: 0 auto; padding: 10px;}
button{cursor: pointer;}
img{max-width: 100%; display: block;}
iframe{border: none;}
input[type=submit],input[type=reset]{-webkit-appearance: none; -moz-appearance: none; appearance: none;}
/*
* Header
*/
.header{color: var(--headercolor); background: var(--headerbg); text-align: center; border-bottom: 1px solid #DDD;}
.header a{color: var(--headercolor); display: inline-block;}
.header a:hover{color: #000;}
.header .fleft a{margin-right: 10px;}
.header .fleft button{display: none;}
.header .fright{text-align: right;}
.header .fright a{margin-left: 10px;}
.header .logo{ height: 50px; width: 150px; padding: 0px 0px; margin: 0 auto; display: inline-block;}
.header .logo a{display: block; width: 100%; height: 100%; background: url(../images/logo.webp) center center no-repeat; background-size: contain; padding: 0px; transition: all 0.3s;}
.header .logo h1, .header .logo h2{display: none;}
.header .btnCartAll i b{padding-left: 5px; font-weight: 500;}
.header.fixed{position: fixed; z-index: 999999999; top: 0px; border-bottom: 2px solid #dee0e3;}

.hdlogin{width: calc(100% - 200px);}
.hdlogin .frmElement{display: inline-block; width: auto;}
.hdlogin .frmElement .element{padding: 0px; width: 100%;}
.hdlogin .frmElement .element i {left: 5px; top: 12px; font-size: 16px;}

.box-idx{margin: 40px 0px 20px 0px;}
.box-idx .title{color: #000; font-size: 20px; font-weight: 600; text-align: center; margin-bottom: 40px;}
.box-idx .title a{color: #000; display: inline-block; position: relative; text-transform: uppercase;}
.box-idx .title a:after{height: 2px; background: var(--headerbg); width: 120%; content: ""; position: absolute; bottom: -5px; left: -10%;}
.box-idx .title p{font-size: 16px; color: #555; font-weight: normal;}
.box-idx .content{}
/*margin-left: -15px; margin-right: -15px;*/
.box-info{padding: 100px 0px;}
.box-info:after{clear: both; display: table; content: ""}
.box-info .item{width: calc(33.3% - 30px); float: left; margin: 0px 15px;}
.box-info .item .icon{width: 80px; height: 80px; line-height: 80px; text-align: center; border-radius: 50%; float: left; font-size: 36px; color: #FFF; font-weight: 800;}
.box-info .item .lbl{width: calc(100% - 80px); float: left; padding-left: 20px;}
.box-info .item .lbl *{display: block; display: block; font-size: 24px; text-transform: uppercase; font-weight: 500;}
.box-info .item .lbl span{}
.box-info .item .lbl b{}
.box-info .item .link{width: 100%; margin-top: 20px; padding-top: 20px; border-top: 2px solid #DDD; text-align: center;}
.box-info .item .link a{font-size: 20px; font-weight: 500}

.company{font-size: 30px; text-align: center; font-weight: 600; text-transform: uppercase; margin-top: 70px;}

.box-about{min-height: 300px; margin-bottom: 40px; background: url(../images/bg_about.jpg) center center no-repeat; background-size: contain;}
.box-about .content{margin-left: 740px; padding-top: 15px; width: 360px; font-size: 17px; font-weight: 500;}

.money{display: block; font-size: 18px; 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;}

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

.neo-title{font-size: 24px; font-weight: normal; color: #3c3e3f; position: relative; padding-bottom: 50px; text-align: center; text-transform: uppercase;}
.neo-title .titler{position: relative;}
.neo-title .titler:after{content: " "; position: absolute; left: 25%; bottom: -15px; width: 50%; height: 2px; background: var(--maincolor);}
.neo-title .btn.btn0x.fright{border-radius: 15px; background: none !important; border-color: var(--maincolor); color: var(--maincolor); }
.neo-desc{ margin: 15px auto 25px; font-size: 20px; text-align: center; width: 80%; line-height: 28px; color: #3c3d3f;}

.box-main {}
.box-main .neo > h1{margin-top: 0px; font-size: 24px; margin-bottom: 20px; color: #186209;}
.box-main-content { width: 100%; line-height: 1.8}
.box-main-content > div.title{padding: 8px 10px; font-size: 20px; background: #309C5A; color: #FFF; }
.box-main-content .box-details, .main-content .content{font-size: 16px;}

.box-details-ctn{font-size: 18px; line-height: 1.6;}

.relate-list, .relate-list li { list-style: none; margin: 0px; padding: 0px; overflow: hidden }
.relate-title { padding: 10px 15px; font-size: 16px; color: #222; margin-bottom: 20px; font-weight: bold; border-left: 2px solid var(--maincolor);}
.relate-list li { width: 100%; height: auto; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #EEE; font-size: 16px }
.relate-list li i { padding-right: 5px }
.relate-list li:last-child { border-bottom: none }

.titleList, .titleList li{margin: 0px; padding: 0px; list-style: none;}
.titleList li{padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #F0F0F0;}
.titleList li a{font-size: 18px;}

.contact-content{margin-top: 20px;}
.contact-frm, .contact-info{width: 50%; float: left;}
.contact-frm{padding-right: 15px;}
.contact-info{padding-left: 15px;}

.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{background: #f4f5f6; border-top: 1px solid #DDD;}
.footer .neo{padding: 50px 10px 20px 10px; color: #545f63; font-size: 16px;}
.footer p{margin: 0px 0px 10px 0px; font-size: 16px;}
.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: #545f63; font-size: 16px; }
.footer a:hover{color: #000;}
.footer .connect iframe{width: 330px; height: 260px; overflow: hidden;}

.box-footer{}
.box-footer-item{width: 25%; float: left;}
.box-footer-item.w20{width: 20%;}
.box-footer-item.w30{width: 30%;}
.box-footer-item.w40{width: 40%;}
.box-footer-item .logo{text-align: center; padding-right: 20px;}
.box-footer-item .logo a{display: block;}
.box-footer-item .logo img{width: auto; height: auto;}
.box-footer-item .name{font-size: 16px; font-weight: bold; margin-top: 0px;}
.box-footer-item p.title{font-weight: bold; font-size: 16px; padding-bottom: 10px;}
.box-footer-item p{font-size: 14px;}
.box-footer-item p i{width: 20px; font-size: 20px; color: #000;}
.box-footer-item p i.fa-envelope{font-size: 14px;}
.box-footer-item p span{width:calc(100% - 20px); display: inline-block;}
.box-footer-item .icon-social{display: inline-block; border-radius: 50%; width: 40px; height: 40px; border: 1px solid #DDD; margin-right: 10px; line-height: 40px; text-align: center; position: relative; float: left;}
.box-footer-item .icon-social i{}
.box-footer-item .icon-social.is-zl{padding-top: 2px;}
.box-footer-item i.icon-zalo{background: url(../images/icon-zalo.webp) center center no-repeat; background-size: cover; width: 20px; height: 20px; padding: 0px; display:inline-block;}
.box-map{text-align: right;}
.box-map a{display: block;}
.box-map a img{display: inline-block;}

.box-footer-addr{width: 75%;}
.box-footer-addr .box-footer-item{padding-right: 8px; width: 33.3%;}

/*text-align: center; */
.copyright{padding: 2px 0px; padding-left: 25%;}

/* 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 *{display: inline-block; margin-bottom: 10px;}
.pager span{font-weight: normal; color: var(--maincolor);; padding: 4px 10px; border: 1px solid #DDD; border-radius: 4px;}
.pager a{color: #999; padding: 4px 10px; border: 1px solid #DDD; border-radius: 4px;}
.pager a:hover{color: #000}
.tabs{width: 100%; border-bottom: 1px solid #EEE;}
.tabs .tab{/*width: 33%;*/ width: 50%; float: left; padding: 10px; text-align: center; color: #333; position: relative; 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-content{padding: 10px;}
.tabs-content .content{display: none;}
.tabs-content .content.active{display: block;}
.copylink{margin: 15px 0px;}
.copylink .cpltitle, .copylink > a{font-weight: bold;}
.copylink .cplcontent{border: 1px solid #DDD; padding: 8px 10px; margin: 0 10px; display: inline-block;}
/* */
.dn-tab-title span{height: 100%; padding-bottom: 10px; width: auto; display: inline-block; border-bottom: 1px solid #555;}

.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: #F2F2F2}
.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;}

.box-msg{position: absolute; z-index: -9999999; top: -999px; left: -999px; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, .75);}
.box-msg.active{z-index: 9999999; top: 0px; left: 0px; display: block;}
.box-msg .box-msg-in{min-width: 320px; width: 500px; background: rgba(256, 256, 256, .75); 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.75);}
.box-msg .box-msg-in .title{border-bottom: 1px solid #999; padding: 10px; text-align: center; position: relative; font-size: 16px;}
.box-msg .box-msg-in .msg-close{position: absolute; top: 5px; right: 5px; font-size: 20px; cursor: pointer;}
.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 20px; 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: 48%;}
.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;}

.frmElement.elm-btn{width: 100%}
.frmElement.elm-btn input[type="submit"]{float: left;}
.frmElement.elm-btn input[type="reset"]{float: right; margin-right: 0px;}

#frmPayment .frmElement.elm-btn{width: 100%;}
#frmPayment .cart-products p > input{color: #000; font-size: 16px;}

.overhd{overflow: hidden;}
.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; font-size: 16px;}
.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 span{display: block; background: #F7F7F7; cursor: pointer;}
.frmElement .element b.check{position: absolute; width: auto; top: 16px; background: none; border: none; min-width: initial; color: #FF3E3E; font-size: 24px; 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);}
.contact-lbl{width: 40%; text-align: right; padding-right: 20px; font-size: 20px;}
.frmElement.elm-btn{width: 100% !important;}
input[type=radio]{cursor: pointer;}

.frm-title {padding: 10px; background: #1C5199; font-size: 16px; font-weight: bold; margin-bottom: 15px; color: #FFF;}

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


.box-login{padding-top: 90px; padding-bottom: 90px; }
/*background: url(../images/bg-login.jpg) center top no-repeat #006d2a; */
.box-register{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: 80%; 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 top no-repeat #f3f3f3; display: block;}
.box-login-in .login-img .lbl{padding: 100px 0px 0px 60px;}
.box-login-in .box-reg-frm{width: calc(100% - 440px);}
.box-login-in .reg-img{background: url(../images/img-reg.jpg) right top no-repeat #f3f3f3; width: 440px; height: 550px;}
.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;}
.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-path{background: #1C5199; border: none; color: #FFF; position: relative; padding-bottom: 10px;}
.box-path .path{font-size: 16px; color: #FFF; padding-top: 10px;}
.box-path .path i{padding-left: 10px; padding-right: 10px;}
.box-path .path > div > span:first-child{font-weight: 500}
.box-path .path-right {float: right;}
.box-path a{color: #FFF;}

/*background: url(../images/bg-member.jpg) center top no-repeat #F5F5F5;*/
.box-mborder{background: #F5F5F5;}
.box-mborder .formSearch{padding: 0px 10px;}
.box-mborder .box-ord-sbtn button i{position: relative; left: initial; top: initial;}
.box-mborder .box-main-content{width: 100%; padding: 20px; background: #FFF;}
.box-mborder #slFromTo{border: none; text-align: right;}
.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;}

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

#frmOSearch .frmElement{padding-left: 0px; padding-top: 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;}

#frmPerson{background: #FFF; padding: 0px 0px;}
#frmPerson .frmElement .lbl {width: 250px;}
#frmPerson .frmElement .btn, #frmUpdate > .err{margin-left: 250px;}

.box-main-content.bmc-right{float: right; }

.box-member-left{width: 20%;}
.box-member-right{width: 80%;}
.box-member{background: #f5f5f5;}

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


.fixLeft{position: fixed; left: 10px; bottom: 80px; z-index: 999999999; }
.fixLeft .icon{ width: 40px; height: 40px; border-radius: 4px; display: inline-block; position: relative; overflow: hidden; }
.zaloLeft{}
.hotline-phone-ring-wrap { position: fixed; bottom: 0; left: 0; z-index: 999999 }
.hotline-phone-ring-wrap-zl { position: fixed; bottom: 0; right: 0; z-index: 999999 }
.text-hotline { color: #fff; font-size: 20px }
.hotline-phone-ring { position: relative; visibility: visible; background-color: transparent; width: 110px; height: 110px; cursor: pointer; z-index: 11; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); transition: visibility .5s; left: 0; bottom: 0; display: block }
.hotline-phone-ring-zl { position: relative; visibility: visible; background-color: transparent; width: 110px; height: 110px; cursor: pointer; z-index: 11; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); transition: visibility .5s; right: 0; bottom: 0; display: block }
.hotline-phone-ring-circle { width: 110px; height: 110px; top: 0; left: 0; position: absolute; background-color: #E91E63; border-radius: 100%; border: 2px solid #1564a7; -webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out; animation: phonering-alo-circle-anim 1.2s infinite ease-in-out; transition: all .5s; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; opacity: .5 }
.hotline-phone-ring-circle-zl { width: 110px; height: 110px; top: 0; right: 0; position: absolute; background-color: #0182ca; border-radius: 100%; border: 2px solid #1564a7; -webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out; animation: phonering-alo-circle-anim 1.2s infinite ease-in-out; transition: all .5s; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; opacity: .5 }
.hotline-phone-ring-circle-fill { width: 80px; height: 80px; top: 16px; left: 16px; position: absolute; background-color: #E91E63; border-radius: 100%; border: 2px solid transparent; -webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out; animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out; transition: all .5s; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50% }
.hotline-phone-ring-circle-fill-zl { width: 80px; height: 80px; top: 16px; right: 16px; position: absolute; background-color: #0182ca; border-radius: 100%; border: 2px solid transparent; -webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out; animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out; transition: all .5s; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50% }
.hotline-phone-ring-img-circle { background-color: #E91E63; width: 50px; height: 50px; top: 31px; left: 31px; position: absolute; background-size: 20px; border-radius: 100%; border: 2px solid transparent; -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out; animation: phonering-alo-circle-img-anim 1s infinite ease-in-out; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; justify-content: center }
.hotline-phone-ring-img-circle-zl { background-color: #0182ca; width: 50px; height: 50px; top: 31px; right: 31px; position: absolute; background-size: 20px; border-radius: 100%; border: 2px solid transparent; -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out; animation: phonering-alo-circle-img-anim 1s infinite ease-in-out; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; justify-content: center }
.hotline-phone-ring-img-circle .pps-btn-img { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex }
.hotline-phone-ring-img-circle .pps-btn-img img { width: 33px; height: 33px }
.hotline-bar { position: absolute; background: var(--maincolor); height: 45px; width: 185px; line-height: 46px; border-radius: 3px; padding: 0 5px 0px 50px; background-size: 100%; cursor: pointer; transition: all 0.8s; -webkit-transition: all 0.8s; z-index: 9; border-radius: 50px !important; left: 52px; bottom: 31px }
.hotline-bar>a { color: #fff; text-decoration: none; font-size: 16px; font-weight: 700; text-indent: 32px; letter-spacing: 1px; display: block; line-height: 45px; font-family: Arial }
.hotline-bar>a:hover, .hotline-bar>a:active { color: #fff }
@-webkit-keyframes phonering-alo-circle-anim {
	0% { -webkit-transform: rotate(0) scale(.5) skew(1deg); -webkit-opacity: .1 }
	30% { -webkit-transform: rotate(0) scale(.7) skew(1deg); -webkit-opacity: .5 }
	100% { -webkit-transform: rotate(0) scale(1) skew(1deg); -webkit-opacity: .1 }
}
@-webkit-keyframes phonering-alo-circle-fill-anim {
	0% { -webkit-transform: rotate(0) scale(.7) skew(1deg); opacity: .6 }
	50% { -webkit-transform: rotate(0) scale(1) skew(1deg); opacity: .6 }
	100% { -webkit-transform: rotate(0) scale(.7) skew(1deg); opacity: .6 }
}
@-webkit-keyframes phonering-alo-circle-img-anim {
	0% { -webkit-transform: rotate(0) scale(1) skew(1deg) }
	10% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg) }
	20% { -webkit-transform: rotate(25deg) scale(1) skew(1deg) }
	30% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg) }
	40% { -webkit-transform: rotate(25deg) scale(1) skew(1deg) }
	50% { -webkit-transform: rotate(0) scale(1) skew(1deg) }
	100% { -webkit-transform: rotate(0) scale(1) skew(1deg) }
}

.zaloLeft { position: fixed; width: 40px; height: 40px; left: 30px; bottom: 140px; z-index: 9999999; }
.zaloLeft img { max-width: 100%; height: auto; }
.zaloLeft a { display: block; }
.zaloLeft span { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1182FC; position: relative; }
@keyframes zoomIn_zalo {
	from { opacity: 0; transform: scale3d(.3, .3, .3); }
	50% { opacity: 1; }
}
.zoomIn_zalo { animation-name: zoomIn_zalo; }
.animated_zalo { animation-duration: 1s; animation-fill-mode: both; }
.animated_zalo.infinite { animation-iteration-count: infinite; }
.cmoz-alo-circle { width: 50px; height: 50px; top: -5px; right: -5px; position: absolute; background-color: transparent; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid rgba(17, 130, 252, .8); opacity: .1; border-color: #1182FC; opacity: .5; }
.cmoz-alo-circle-fill { width: 60px; height: 60px; top: -10px; position: absolute; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; background-color: rgba(17, 130, 252, 0.45); opacity: .75; right: -10px; }
@-webkit-keyframes pulse_zalo {
	from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
	50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); }
	to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes pulse_zalo {
	from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
	50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); }
	to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
.pulse_zalo { -webkit-animation-name: pulse_zalo; animation-name: pulse_zalo; }
/* For desktop */
@media only screen and (max-width: 1440px) {
	.neo{width: 100%; padding: 0px;}
	.neo.box-info{padding: 50px;}
	.header .neo{padding: 10px;}
	.box-path .path-right {padding-right: 20px;}
	.box-about .content {margin-left: 750px; padding-top: 25px;}
}
/* For desktop */
@media only screen and (max-width: 1280px) {
	.box-about .content {margin-left: 670px;}
}
/* For desktop */
@media only screen and (max-width: 1024px) {
	.neo{width: 100%; padding: 0px 10px;}
	.box-body-main{margin-top: 20px;}
	.neo.box-info {padding: 30px 10px;}
	.box-about .content {margin-left: 530px;}
	.box-info .item .lbl *{font-size: 20px;}
	.menu-top .neo > ul .cat-img {width: 25%;}
	.menu-top .neo > ul .cat-info {width: 75%; padding-top: 30px; padding-left: 20px;}
	.frmElement.elm-btn{width: 100% !important;}
}
/* For table */
@media screen and (max-width: 800px) {
	.header .name{padding-left: 10px;}
	.header .logo{width: 100%; height: 40px;}
	.header .box-adv{display: none;}

	.header .neo{padding: 10px 20px;}
	.header .fleft button{display: block; background: none; border: none; margin-top: 5px;}
	.header .fleft button i{font-size: 30px;}
	.header .fleft a.icon-social{display: none;}
	.header .fright{width: 100%; text-align: center; margin-top: 20px;}
	.box-info .item{width: 100%; margin: 0px 0px 15px 0px; padding-bottom: 15px; border-bottom: 1px solid #DDD; padding-left: 10%;}
	.box-info .item:after{clear: both; display: table; content: ""}
	.box-info .item .link{text-align: left; border-top: none; margin-top: 0px; padding-top: 0px; padding-left: 100px; width: calc(100% - 80px); float: left;}
	.box-about{background: none;}
	.box-about .content{margin-left: 0px; padding: 0px 10px 0px; width: auto; font-size: 20px; line-height: 2; padding-top: 0px;}

	.box-path{padding-top: 12px;}
	.box-idx .neo{padding: 10px;}
	.box-idx .idx-main, .box-idx .idx-right{width: 100%}
	.box-idx .idx-main{padding-right: 0px}

	.box-body-main, .box-body-right{width: 100%; padding-right: 0px; margin-bottom: 20px;}
	.product{width: 50%;}

	.main-content, .main-right{width: 100%;}
	.main-content {padding-right: 0px;}

	.box-login-in .box-login-frm{width: 100%; padding: 30px 10px;}
	.box-login-in .login-img{display: none;}

	.footer{padding-bottom: 0px;}
	.box-footer-item .logo img {display: inline-block; height: auto; width: auto;}
	.box-footer-item:first-child{width: 100%}
	.box-footer-item.w30{width: 100%; margin-bottom: 20px;}
	.box-footer-item.box-footer-addr{width: 100%; text-align: center;}
	.box-footer-item:nth-child(3), .box-footer-item:nth-child(4){width: 50%; text-align: center;}
	.box-footer-item.w30:nth-child(2){width: 100%; text-align: center; margin-top: 20px;}
	.box-footer-item.w30:nth-child(2) p{text-align: center;}
	.box-footer-item.w20{width: 50%;}
	.box-footer-item .icon-social{float: initial;}
	.box-footer-item p.title{text-align: center;}
	.box-footer-item.w40.box-map{width: 100%;}
	.copyright{padding-left: 0px; text-align: center;}
	.frmElement .element{width: 100%;}
	.neo-title {font-size: 24px;}
}
/* For table */
@media screen and (max-width: 768px) {
	.box-customer, .box-order{width: 100%; padding: 0px;}
	.box-order{padding: 0px 0px;}
	.box-customer{border-left: none;}
	.box-customer .frmElement:nth-child(2n), .box-customer .frmElement:nth-child(2n+1){width: 100%;}
	.box-customer .order-lbl{padding-left: 0px;}
}
/* For mobile */
@media screen and (max-width: 667px) {
	#frmSearch{margin-bottom: 10px;}
	#frmSearch input{width: 100%}
}
/* For mobile */
@media screen and (max-width: 640px) {
	.neo-search-in { padding: 50px 10px 10px 10px;}
	.neo-search .neo-search-close{top: 80px; right: 10px;}
	.neo-search-in input[type="text"] {min-width: 100%};
	#frmSearch{width: 100%;}
	.frmElement{padding: 5px 0px}
	.frmElement .element{width: 100%;}
	.frmElement .error{width: 100%; font-size: 14px;}
}
/* For mobile */
@media screen and (max-width: 580px) {
	.box-main-content{width: 100%; padding-right: 0px;}
	.box-main-content img{width: 100%; height: auto;}
	.box-main-right{width: 100%;}
	.tabs .tab{padding: 10px 5px;}
	.hdlogin .frmElement{width: 100%;}
}
@media screen and (max-width: 520px) {
	.box-main-content{width: 100%; padding-right: 0px;}
	.tabs .tab {padding: 10px 0px;}
	.box-login-in{padding: 20px 0px; min-height: initial; width: 100%;}
}
/* For mobile */
@media screen and (max-width: 480px) {
	.catpcha img{width: 40%;}
	.catpcha .txtCaptcha{width: calc(100% - 40% - 40px) !important;}
	.copylink .cpltitle, .copylink .cplcontent{width: 100%; margin: 0px 0px 10px 0px; display: block;}
	.box-info .item{padding-left: 10px;}
}
/* For mobile */
@media screen and (max-width: 420px) {
}
/* For mobile */
@media screen and (max-width: 380px) {
	.box-footer-item.w20 {width: 100%;}
}
@media screen and (max-width: 360px) {
}
/* For mobile */
@media screen and (max-width: 320px) {
}
@media print {
    .header, .banner, .menu-top, .body-content .box-title, .body-right, .td-post-sharing, .news-item-list-other, .footer-wrapper, .relativetitle, #btnPrint{display: none;}
    .body-content{width: 100%;}
}