@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'); }
body {margin: 0; padding: 0; top: 0px !important; font-size: 14px; color: #111; font-family: 'Roboto', 'Roboto Condensed', Arial, Georgia, Helvetica, sans-serif; background: #FFF}
:root {--txtcolorall: #000; --fontsizeall: 16px; --bgcolor: #FFF; --logocolor: #7EB732; --headerbg: #27255F; --headercolor: #27255F; --bannerbg: #FFF; --bannercolor: #252B33 ; --menutopbg: #FFF; --menutopcolor: #FFF; --menutopcolorhover: #30c7b5; --maincolor: #30c7b5; --secondcolor: #F3EC19; --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%; height: auto; display: inline-block;}
iframe{border: none;}
input[type=button], input[type=submit],input[type=reset]{-webkit-appearance: none; -moz-appearance: none; appearance: none;}
.page-wrapper{width: 100%; margin: 0; padding: 0; position: relative; }
.neo-out{width: 100%; margin: 0 auto; padding: 0;}
.neo{width: 1120px; margin: 0 auto; padding: 10px;}
.neo:after{clear: both; display: table; content: "";}
/*
* 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: #FFF;}
.header .neo{padding: 15px 10px}
.header a{color: #FFF; font-size: 16px; font-weight: 500;}
.header a:hover{color: var(--secondcolor);}
.header .item{text-align: center;}
.header .item.w30{}
.header .item.last{position: relative;}
.header .item.last a{margin-left: 10px;}
.header #btnHdSearch{display: none; position: absolute; right: 10px; top: 0px; font-size: 16px; cursor: pointer;}

.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(--secondcolor);}
.banner .neo{padding: 10px 10px}
.banner .logo{height: 110px;}
.banner .logo a{display: block; margin: 0 auto; width: 90%; height: 100%; background: url(../images/logo-banner.webp) center center no-repeat; background-size: contain;}
.banner .logo h1, .banner .logo h2{display: none;}

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

/*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{position: fixed; top: 0; right: 0; left: 0; z-index: 9999999; text-align: center; transition: background-color .2s,transform .4s; background-position: 50%; background-size: cover;}
.menu-top.scroll{background-color: rgba(0, 0, 0, 0.79);}
.menu-top .logo{width: 25%; float: left;}
.menu-top .logo a{color: #FFF; text-align: left;}
.menu-top ul, .menu-top li{margin: 0px; padding: 0px; list-style: none;}
.menu-top ul{display: inline-block; width: 75%; float: right; padding: 30px 0px 30px 0px; text-align: right;}
.menu-top li{position: relative; display: inline-block;}
.menu-top li a{font-size: 18px; font-weight: 400; text-transform: uppercase; color: var(--menutopcolor); display: block; padding: 1px 30px; }
.menu-top li a i{}
.menu-top li a i.fa-home{font-size: 20px;}
.menu-top li.active a span, .menu-top li a:hover span{ color: var(--menutopcolorhover); border-bottom: 1px solid var(--menutopcolor);}
.menu-top .bar{display: none;}
.menu-top .bar span{font-size: 30px; width: 30px; height: 30px; display: block; text-align: center; line-height: 30px; cursor: pointer;}

/*
* Box Slider
*/
.box-slider{background: url(../images/bg-slider.webp?v=1245454) center center no-repeat; background-size: cover; padding: 170px 20px 140px 20px; position: relative;}
.box-slider .neo{padding-top: 50px; text-align: center; min-height: 500px; position: relative;}
.box-slider .neo > .lbl{font-size: 40px;}
.box-slider .neo > .desc{font-size: 20px;}


.box-slider-idx{height: auto; background: none; padding: 0px;}
.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%;}

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

.box-slider .neo{padding-top: 0px;}
.box-highlight{line-height: 1.7; font-size: 16px;}
.box-highlight .info{width: 50%; float: left; text-align: left; padding-right: 40px;}
.box-highlight .info h2{text-transform: uppercase; color: #fff; font-size: 20px; margin: 0px;}
.box-highlight .info h2 a{color: #fff;}
.box-highlight .info h3{text-transform: capitalize; margin: 0px; color: var(--maincolor); font-size: 60px; text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.45); margin-top: 20px;}
.box-highlight .info h3 a{color: var(--maincolor)}
.box-highlight .info p{color: #fff; margin-top: 20px;}
.box-highlight .info div{padding-top: 30px;}
.box-highlight .info div a{border-radius: 0px; background: none; color: #FFF; text-transform: uppercase; padding: 10px 30px;}
.box-highlight .info div a:hover{color: var(--menutopcolorhover);}
.box-highlight .img{width: 50%; float: left;}
.box-highlight .img img{width: 100%; box-shadow: 1px 1px 15px 3px rgba(0, 0, 0, 0.45); border: 10px solid #fff; animation-duration: 1s; animation-fill-mode: both; }
.box-highlight .img img:hover{animation-name: pulse; animation-timing-function: ease-in-out}
.box-highlight:after{clear: both; display: table; content: ""}

.box-idx{font-size: 20px; padding: 50px 0px 0px 0px;}
.box-idx .title{color: #333; font-size: 30px; margin-bottom: 50px; position: relative; text-align: center; font-weight: 500}
.box-idx .title a.btn{text-transform: uppercase;}
.box-idx .title a.btn:hover{background: var(--maincolor); color: var(--secondcolor);}
.box-idx .desc{text-align: center; padding-bottom: 30px;}
.box-idx .desc a{color: var(--maincolor);}
.box-idx .desc a:hover{color: #000;}
.box-idx .content{}
.box-idx p{line-height: 1.8; padding: 0px; margin: 0px;}

@-webkit-keyframes pulse {
	0% { transform: scaleX(1) }
	50% { transform: scale3d(1.04, 1.04, 1.04) }
	to { transform: scaleX(1) }
}
@keyframes pulse {
	0% { transform: scaleX(1) }
	50% { transform: scale3d(1.04, 1.04, 1.04) }
	to { transform: scaleX(1) }
}

/*
* Box Product
*/
.box-product{}
.box-product .icon{width: 100%;}
.box-product .icon img{display: block; width: 100%; max-width: 400px; box-shadow: 1px 1px 15px 3px rgba(0, 0, 0, 0.45); border: 10px solid #3b3b3b; animation-duration: 1s; animation-fill-mode: both; }
.box-product .icon img:hover{animation-name: pulse; animation-timing-function: ease-in-out}
.box-product .info{max-width: 400px;}
.box-product .info h2{color: #30c7b5; font-size: 25px; line-height: 1.2; font-weight: 700; margin: 30px 0px 20px 0px; text-transform: uppercase;}
.box-product .info p{font-size: 18px; line-height: 1.6}

.box-products{display: flex; flex-wrap: wrap;}
.box-products .box-product{text-align: center; width: 33.3%; float: left; margin-bottom: 50px;}
.box-products .box-product > a{max-width: 310px; display: block;}
.box-products .box-product .icon{width: 100%;}
.box-products .box-product .icon img{width: 100%}
.box-products .box-product .info span{display: block; margin: 20px 0px 10px;}
.box-products .box-product .info h2{font-size: 25px; line-height: 1.2; font-weight: 700; text-transform: uppercase; margin: 15px 0px 0px 0px;}
.box-products .box-product:nth-child(3n+2) > a{margin: 0 auto;}
.box-products .box-product:nth-child(3n) > a{float: right;}
.box-products.bpmnl .box-product > a{max-width: 250px;}

.box-glridx{}
.box-glridx .info{margin-bottom: 50px;}
.box-glridx .info h2{margin-top: 0px; text-transform: none; font-size: 40px;}
.box-glridx .info h2 a{color: var(--maincolor);}
.box-glridx .info p{margin-bottom: 30px;}
.box-glridx .info a.btn{border-radius: 0; border-width: 2px; border-color: #000; text-transform: uppercase; font-weight: 400; font-size: 20px; padding: 10px 25px;}
.box-glridx .info a.btn:hover{color: var(--maincolor);}

.box-artistidx{background: url(../images/bg-artist.webp) center center no-repeat; background-size: cover;}
.box-artistidx{}
.box-artistidx .neo{position: relative;}
.box-artist-info{width: 67%; float: left; background: #FFF}
.artist-img{float: left; width: 250px;}
.artist-img img{display: block;}
.artist-info{float: left; width: calc(100% - 250px); padding-left: 50px; padding-right: 40px;}
.artist-info h2{color: var(--maincolor); font-size: 40px; line-height: 1.5; font-weight: 700; margin: 20px 0px 20px 0px}
.artist-info p{font-size: 18px; line-height: 1.6; font-weight: 400;}
.artist-info div{margin-top: 30px; margin-bottom: 20px;}
.artist-info div a.btn{border-radius: 0; padding: 10px 30px; border-color: var(--maincolor); border-width: 2px; color: var(--maincolor);}
.artist-info div a.btn:hover{color: #000}
.box-artist-tesmo{width: 33%; float: left; color: #FFF; padding-left: 50px; padding-top: 100px;}
.artist-tesmo{font-size: 16px; line-height: 1.8; font-weight: 400; text-align: right;}
.artist-art{text-align: right; font-size: 20px; font-weight: 500; padding-top: 20px;}

.bg-gradient{position: relative;}
.bg-gradient:before{background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;}
.btnupper{text-transform: uppercase; font-weight: 400; font-size: 20px;}


.box-arter{}
.arter-info{width: 50%; float: left; padding-right: 50px; text-align: right;}
.arter-info h2{font-size: 60px; color: var(--maincolor); margin-top: 100px; margin-bottom: 20px;}
.arter-info p{font-size: 16px; font-weight: 400; line-height: 1.7}
.arter-img{width: 50%; float: left; text-align: center;}
.arter-img.box-product .icon img{width: 100%; max-width: initial;}
.arter-img.box-product .icon{margin-bottom: 40px;}
.arter-img.box-product .info{max-width: initial;}
.arter-img span{}
.arter-img h3{margin-top: 10px; margin-bottom: 0; color: var(--maincolor); text-transform: uppercase; font-weight: 500;}

/*
* Box News
*/
.newss{display: flex; flex-wrap: wrap;}
.newss .item{width: calc((100% / 4)); float: left; padding: 10px;}
.newss .item > div{display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--bordercolor);}
.newss .item > div a{display: block;}
.newss .item div.icon{}
.newss .item div img{display: block; height: auto;}
.newss .item div.info{text-align: center; min-height: 160px; line-height: 1.4; padding: 20px 20px 25px 20px; font-size: 16px; font-weight: 400}
.newss .item div.info h2, .newss .item div.info h3{font-size: 16px; font-weight: 500; margin: 0px;}
.newss .item div.info p{font-size: 16px; color: #666; padding-top: 5px; display: block;}

/*background: #FFF; border-top: solid 1px #edeff0;*/
.box-path{background: url(../images/bg-artist.webp) center center no-repeat; background-size: cover; border-bottom: solid 1px #edeff0; position: relative; padding-top: 200px; padding-bottom: 20px;}
.box-path:before{background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;}

.box-path .neo{position: relative; padding: 0px 10px;}
.box-path .path{padding: 10px 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 i:first-child{padding-left: 0px;}*/
.box-path .path-right{float: right;}
.box-path .path-right a{margin-left: 20px;}
.box-path a{color: #FFF; font-size: 20px;}

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

.box-main { padding: 0px 10px; }
.box-main-content { width: 75%; float: left; background: #FFF; padding-left: 20px;}
.box-main-content.bmc-right{float: right; line-height: 1.6; font-size: 16px;}
.box-main-content.bmc-right > h1{margin: 0px 0px 10px 0px; font-size: 20px; font-weight: 600;}
.box-main-content.main-full{width: 100%}
.box-main-left { width: calc(25%); position: relative; float: left; background: #FFF; border: 1px solid var(--bordercolor); -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;}
.box-main-left.inactive{display: none;}
.box-main-right { width: 20%; float: right; padding-left: 20px;}
#btnCloseML{display: none; cursor: pointer; right: 20px; top: 5px; position: absolute; font-size:30px}

.box-main-content > div.title{padding: 8px 10px; font-size: 20px; background: var(--menutopcolorhover); color: #FFF; }
.box-product-main .box-main-content, .box-about-main .box-main-content{width: 100%; padding-left: 0px;}

.box-about-main .box-main{padding: 20px 30px; line-height: 1.6; font-size: 16px;}

.box-menuleft{}
.box-menuleft, .box-menuleft li{margin: 0px; padding: 0px; list-style: none;}
.box-menuleft{padding: 10px 10px 10px 15px;}
.box-menuleft li{}
.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;}*/

.menuleftcat{padding: 0px 20px}
.menuleftcat li{display: block; width: 100%; border-bottom: 1px solid var(--bordercolor);}
.menuleftcat li:last-child{border-bottom: none;}
.menuleftcat li a{padding: 20px 0px 20px 0px; font-size: 16px; border-bottom: none; font-size: 16px; font-weight: 500}
.menuleftcat li a i{padding-right: 10px;}
.menuleftcat > li{position: relative;}
.menuleftcat > li.formb{display: none;}
.menuleftcat > li i{width: 20px; height: 20px; display: inline-block; text-align: center; line-height: 20px; cursor: pointer;}
/*padding-right: 0px; position: absolute; right: 0px; top: 20px; z-index: 10; */
.menuleftcat > li:hover > ul{display: block;}
.menuleftcat > li > ul{width: 100%; display: none; padding: 0px;}
.menuleftcat > li > ul > li{padding-left: 20px; border-top: 1px solid var(--bordercolor); border-bottom: none;}

.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:first-child{padding-top: 0px;}*/
/*padding-bottom: 0px;*/
.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 }

.box-pro-lbl{float: left; font-size: 20px; text-transform: uppercase;}
.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;}


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

.product-details{}
.product-details h1{font-size: 24px; font-weight: normal; margin: 0; padding-bottom: 10px;}
.product-details .product-title{padding-bottom: 20px; margin-bottom: 30px; border-bottom: 1px solid #DDD;}
.product-details .product-title h1{display: inline-block; font-size: 28px; margin-bottom: 0px; padding-bottom: 0px;}
.product-details .product-title .price{float: right; font-size: 20px;}
.product-details .product-title .price b, .product-details .product-title .price sup{font-size: 26px; color: #f00; font-weight: 400}
.product-details .product-title:after{clear: both; display: table; content: ""}
.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;}

.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-slide{margin-top: 20px; position: relative;}
.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{}
.product-slide .control a{position: absolute; z-index: 99999; top: calc( (100% - 40px) - 50% / 2); 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 > div, .product-info .product-info-price > div{margin-bottom: 20px;}
.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: 20px 15px;}
.product-info .product-info-price > div:last-child{margin-bottom: 0px;}
.product-info .money{text-align: left;}
.product-info .price{font-size: 22px;}
.product-info .btn-buy{/*padding: 10px 0px;*/}
.product-info > div.border-linear{margin-bottom: 0px;}
.product-info-tbl{}
.product-info-tbl div{padding: 10px 0px; border-bottom: 1px solid #DDD;}
.product-info-tbl div:after{clear: both; display: block; content: "	"}
.product-info-tbl span{width: 150px; float: left;}
.product-info-tbl b{width: calc(100% - 150px); float: left;}

.product-details-content{font-size: 16px;}

.box-search-main .box-main-content{width: 100%;}
#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: 0px 0px 30px 0px; margin-top: 30px; color: #FFF; background: #121212; font-size: 16px;}
.footer a{color: #FFF; font-size: 16px; }
.footer a:hover{color: var(--maincolor)}
.footer p{margin: 0px 0px 15px 0px; color: #FFF; font-size: 16px; line-height: 1.6}
.footer p i{padding-right: 10px; color: var(--maincolor);}
.footer ul, .footer ul li{margin: 0px; padding: 0px; list-style: none; overflow: hidden;}
.footer li{font-size: 16px; line-height: 1.85;}
.footer li h3{font-size: 16px; font-weight: 400; margin: 0px;}
.footer .neo{padding: 50px 0px 0px 0px;}
.footer .info{width: 20%; float: left;}
.footer .info .ftlogo{display: block;}
.footer .info .ftlogo a{display: block;}
.footer .info .ftlogo a img{display: block; width: 80%; height: auto;}
.footer .info .ftname{font-size: 24px; font-weight: 500; color: var(--maincolor);}
.footer .info .title{font-size: 20px; font-weight: 500; color: var(--maincolor);}
.footer .info .title span{border-bottom: 1px solid #A29FFF; padding-bottom: 5px;}
.footer .info li a{font-size: 16px;}
.footer .info p.social{}
.footer .info p.social a{font-size: 30px; margin-right: 10px;}
.footer .info p.social a:hover i{color: #FFF}
.footer .info:nth-child(1){width: 30%;}
.footer .info:nth-child(2){width: 25%;}
.footer .info:nth-child(3){width: 15%}
.footer .info:nth-child(4){width: 30%}
/*.footer .info:first-child{width: calc(40% - 100px); border-right: 1px solid var(--bordercolor); margin-right: 100px;}*/
/*.footer .info.infofist{width: 15%;}
.footer .info.infolast{width: 38.3%;}*/
.border-linear{background-image: linear-gradient(90deg, rgba(39,37,95,1) 0%, rgba(48, 199, 181,1) 100%); height: 5px;}
/*linear-gradient(90deg,#26A9E0 0%,#903F97 100%)*/
.copyright{text-align: center; color: #FFF; background: #000}
/*padding-top: 20px; margin-top: 30px; */


/* 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: bold;}
.copylink .cplcontent{border: 1px solid #DDD; 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; }

.dn-tab-title span{height: 100%; padding-bottom: 10px; width: auto; display: inline-block; border-bottom: 1px solid #555;}
.productListRight span.icon{cursor: pointer;}

.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: #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-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;}
.pad20 {padding: 20px;}
.padidx{padding: 100px 10px}
.marrl10{margin: 0px 10px;}
.font14{font-size: 14px;}
.font16{font-size: 16px;}
.font18{font-size: 18px;}
.font20{font-size: 20px;}
.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) {
}
/* For desktop */
@media only screen and (max-width: 1600px) {
	.neo{width: 100%;}
}
/* For desktop */
@media only screen and (max-width: 1366px) {
	.box-slider .neo{min-height: 350px;}
}
/* For desktop */
@media only screen and (max-width: 1280px) {
	.box-slider .neo{min-height: 300px;}
	.menu-top li a {padding: 1px 30px;}
	.box-services .item .lbl{font-size: 20px; padding-left: 10px;}
	#frmProSearch .frmElement .element select, #frmProSearch .frmElement .element input{min-width: initial;}
}
/* For desktop */
@media only screen and (max-width: 1024px) {
	.box-slider .neo{min-height: 280px;}
	.banner .logo, .banner .bnsearch, .banner .bninfo{width: 100%}
	.banner .logo a{background-position: center;}
	.neo{width: 100%}

	.box-path .neo{padding: 15px 10px;}
	.box-path .path{padding: 0px;}
	.box-about-main .box-main {padding: 20px 10px;}

	.products .item {width: calc((100% / 3) - 20px);}

	.frmElement .btn input[type="submit"], .frmElement .btn input[type="reset"]{margin: 0;}
	.frmElement.elm-btn{width: 100% !important;}

	.box-bottom{padding-bottom: 40px;}
	.footer .info, .footer .info:nth-child(1), .footer .info:nth-child(2), .footer .info:nth-child(3), .footer .info:nth-child(4){width: 100%; 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 #4B489D; margin-bottom: 20px;}
	.footer .info .ftlogo{}
	.footer .info .ftlogo a {display: block;}
	.footer .info .ftlogo a img{display: inline-block; width: auto; height: 200px;}
	.footer .info ul li{width: calc(100% / 3); float: left;}
	.footer .info:nth-child(3){margin-bottom: 20px;}
	.ftmap img{height: 200px; width: auto;}
}
/* For desktop */
@media only screen and (max-width: 1023px) {
}
/* For table */
@media screen and (max-width: 800px) {
	.menu-top .neo{padding: 0px; position: relative;}
	.menu-top .logo{padding-left: 10px; width: 50%;}
	.menu-top .bar{display: block; display: block; color: var(--maincolor); position: absolute; z-index: 9999; right: 20px; top: 20px;}
	.menu-top ul{display: none;}
	.menu-top ul.menu-top-active{display: block; width: 100%; background: rgba(0, 0, 0, .75); text-align: center;}
	.menu-top ul li{width: 100%;}
	.menu-top li a {padding: 15px 30px;}

	.box-product a{display: block;}
	.box-product:nth-child(2n) a{padding-left: 15px;}
	.box-product:nth-child(2n+1) a{padding-right: 15px;}
	.w50.fleft .box-product.box-glridx{padding-left: 15px;}

	.box-artist-info{width: 100%;}
	.box-artist-tesmo{width: 100%; padding-left: 0px;}

	.box-products{}
	.box-products .box-product{width: 50%;}
	.box-products .box-product > a{margin: 0 auto;}
	.box-products .box-product:nth-child(3n) > a {float: initial;}
	.box-products .box-product:nth-child(2n) a {padding-left: 0px;}
	.box-products .box-product:nth-child(2n+1) a {padding-right: 0px;}

	.box-main-left.active{display: block; position: fixed; z-index: 99999; top: 0px; left: 0px; background: #FFF; width: 100%; height: 100%; padding: 40px 20px 20px 20px;}
	.newss .item {width: 50%;}
	.products .item {width: calc((100% / 3) - 20px);}
	.bmc-right .products .item{width: calc((100% / 2) - 20px);}

	.box-main-left{display: none;}
	.box-main-left.box-member-left{display: block; width: 100%;}

	.neo.box-idx.box-productidx{padding: 10px 20px;}

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

	.box-idx .title{text-align: center; margin-bottom: 30px;}
	.box-idx .title::after{border: 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;}

	.news-list li a.icon img{height: auto;}
	.box-main-content{width: 100%; padding-left: 0px}
	.box-customer .frmElement:nth-child(2n), .box-customer .frmElement:nth-child(2n+1){width: 100%;}
	.box-product-main .box-main-content{width: 100%; padding-left: 0px; padding-right: 0px;}

	.box-productidx.box-idx .title .titleright.idx{display: none;}
	.product-info a.mrleft10, .product-info a.mrright10{margin-left: 0px; margin-right: 0px;}

	.tabs-content .copylink:last-child{display: none;}
	.box-right li a.icon{text-align: center;}

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

	.product-details .product-title h1{display: block; margin-bottom: 15px;}

	.frmElement .btn{width: 60%;}
	.frmElement .btn input[type="reset"]{float: right;}
	.box-msg .box-msg-in{width: 100%;}

	.footer{}
	.footer .neo{padding: 50px 20px 0px 20px;}
	.footer .neo .clear40{height: 0px;}
	.footer .info.infolast { width: 50%;}
	.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;}
}
/* For table */
@media screen and (max-width: 768px) {
	.product-img-slide, .product-info{width: 100%; padding: 0px;}
	.product-info{margin-top: 20px;}
	.product-img img {width: 100%; height: auto;}
	.contact-frm, .contact-content{width: 100%;}
	.contact-frm{padding-right: 0px; padding-bottom: 40px;}
	.frmElement .element{width: 100%;}
}
/* For mobile */
@media screen and (max-width: 667px) {
	.product-img-slide,.product-info{width: 100%; padding-left: 0px; padding-right: 0px;}
	.box-highlight .info, .box-highlight .img{width: 100%;}
	.box-highlight .info{padding-right: 0px; padding-bottom: 40px;}
	.frmElement .btn{width: 100%; margin-left: 0px;}
	.box-products .box-product:nth-child(2n) a{padding-left: 10px;}
	.box-products .box-product:nth-child(2n+1) a{padding-right: 10px;}
}
/* For mobile */
@media screen and (max-width: 640px) {
	.box-highlight .info h3, .arter-info h2{font-size: 40px;}
	.artist-info h2{font-size: 30px;}
	.products .item, .bmc-right .products .item{width: calc(50% - 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) {
	.artist-img{width: 100%; margin-bottom: 20px; text-align: center; margin-top: 40px;}
	.artist-img img{display: inline-block;}
	.artist-info{width: 100%; padding: 0px 10px;}
	.artist-info h2{text-align: center;}

	.box-catidx{}
	.box-catidx .w50.fleft{width: 100%;}
	.box-catidx .w50.fleft .box-product:nth-child(2n+1) a, .box-catidx .w50.fleft .box-product:nth-child(2n) a{padding: 0px 40px; text-align: center;}
	.box-catidx .w50.fleft .box-product .info{max-width: initial;}
	.box-catidx .w50.fleft .box-product a img{display: inline-block;}
	.w50.fleft .box-product.box-glridx{padding: 0px 40px; margin-top: 30px; text-align: center;}

	.arter-info, .arter-img{width: 100%;}
	.arter-info{padding-right: 40px; padding-left: 40px; text-align: center; margin-bottom: 40px;}
	.arter-info h2{margin: 0px 0px 20px 0px;}
	.arter-img a{padding: 0px 40px !important;}

	.box-products .box-product .info h2{font-size: 20px;}
	.box-products .box-product .info span{font-size: 16px;}

	.box-main-content{width: 100%; padding-right: 0px;}
	.box-main-right{width: 100%;}
	.contact-frm, .contact-content{width: 100%; padding: 0px;}
	.contact-content{padding: 10px 20px;}
	.box-news-content *{max-width: 100%;}
	.box-news-details img{width: 100% !important;}

	.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 .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;}
	.cbRmb .element{padding: 0px !important;}
}
@media screen and (max-width: 520px) {
	.product-details .product-title h1{font-size: 22px}
	.box-main-content{width: 100%; padding: 0px;}
	.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: right;}
}
/* For mobile */
@media screen and (max-width: 480px) {
	.products .item,.bmc-right .products .item { width: calc(100% - 20px);}
	.newss .item {width: 100%;}
	.newss .item div.info{min-height: initial;}

	.catpcha img{width: 40%;}
	.catpcha .txtCaptcha{width: calc(100% - 40% - 40px) !important;}
	.footer .info{width: 100%; margin-bottom: 20px;}
}
/* For mobile */
@media screen and (max-width: 420px) {
	.box-right li a.icon img{width: 100%;}
}
/* For mobile */
@media screen and (max-width: 380px) {
	.header .item.w20:first-child{text-align: right;}
}
@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-list-other, .footer-wrapper, .relativetitle, #btnPrint{display: none;}
    .body-content{width: 100%;}
}