body {

	font-family: 'Noto Serif', 'Open Sans', Arial, serif;

	line-height: 1.8;

	font-size: 16px;

	background: #fff;

	font-weight: 300;

	position: relative;

}



a {

	color: #333;

	-webkit-transition: 0.5s;

	-o-transition: 0.5s;

	transition: 0.5s;

}

a:hover {

	text-decoration: none;

	color: #333;

}

p {

	font-size: 16px;

	color: #444;

	font-weight: 300;

	line-height: 1.6;

	font-family: 'Noto Serif', "Open Sans", Arial, serif;

}



h1, h2, h3, h4, h5, h6 {

	color: #333;

	font-family: 'Noto Serif', "Open Sans", Arial, serif;

	font-weight: 500;

	margin: 0;

	line-height: 1.6;

	font-size: 16px;

}

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{

	color: #333;

}

.clearfix{

	clear: both;

}

.header-fixed{

	position: fixed !important;

	top: 0;

	z-index: 999;

	/*border-radius: 0 !important;*/

}

.product-header-fixed{

	position: fixed !important;

	top: 55px;

	z-index: 99;

	/*bottom:0;*/

	overflow-y:scroll;

	overflow-x:hidden;

	/*border-radius: 0 !important;*/

}

.product-header-fixed::-webkit-scrollbar {

	display: none;

}

.box_button button{

	background-image: linear-gradient(to top left,#ff8a00,#de0055);

	color: #fff;

}

.box_button button:hover{

	background-image: linear-gradient(to top left,#00adff,#210af5);

	color: #fff !important;

}



#header-title{

	background: #243137;

	padding: 10px 0;

}

#header-title img{

	width: 35px;

	display: inline-block;

	transition: 0.5s ease-in-out;

	-webkit-animation:linear infinite alternate;

	-webkit-animation-name: play-title;

	-webkit-animation-duration: 2s;

}

#header-title span{

	color: #90caf9;

	font-size: 16px;

	padding-left: 5px;

	margin-right: 25px;



}

#header-title .title span{

	margin-right: 0;

}

#header-title .info, #header-title .title{

	display: inline-block;

}



#main{

	background-image: -webkit-linear-gradient(90deg, #cccccc 25%, #458da2 100%);

	padding: 20px 0;

}

#main .group-logo{

	padding-bottom: 15px;

}

#main .group-logo img{

	display: inline-block;

	width: 300px;

}

#main .group-menu{

	margin-top: 5px;

}

#main .group-menu .menu{

	display: inline-block;

	padding-top: 10px;

	padding-right: 220px;

	position: relative;

}

#main .group-menu .menu ul{

	padding: 0;

	margin: 0;

	display: inline-block;

}

#main .group-menu .menu ul li{

	display: inline-block;

	transition: 0.3s ease-in-out;

	margin-right: 20px;

}

#main .group-menu .menu ul li:hover{

	border-bottom: 2px solid #e89f10;

}

#main .group-menu .menu ul li.active{

	border-bottom: 2px solid #e89f10;

}

#main .group-menu .menu ul li a{

	font-size: 18px;

	text-transform: uppercase;

	font-weight: 500;

	color: #243137;

}

#main .group-menu .menu ul li:hover a{

	color: #e89f10;

}

#main .group-menu .menu ul li.active a{

	color: #e89f10;

}

#main .group-menu .menu ul li a:before{

	display: inline-block;

	width: 25px; 

	height: 25px;

	margin-right: 3px;

	content:"";

	transition: 0.3s ease-in-out;

}

#main .group-menu .menu ul li.home a:before{

	background-image: url(../images/_home.png);

	background-size: cover;

}

#main .group-menu .menu ul li.home:hover a:before{

	background-image: url(../images/_home_hover.png);

	background-size: cover;

}

#main .group-menu .menu ul li.home.active a:before{

	background-image: url(../images/_home_hover.png);

	background-size: cover;

}

#main .group-menu .menu ul li.about a:before{

	background-image: url(../images/_about.png);

	background-size: cover;

}

#main .group-menu .menu ul li.about:hover a:before{

	background-image: url(../images/_about_hover.png);

	background-size: cover;

}

#main .group-menu .menu ul li.about.active a:before{

	background-image: url(../images/_about_hover.png);

	background-size: cover;

}

#main .group-menu .menu ul li.product a:before{

	background-image: url(../images/_product.png);

	background-size: cover;

}

#main .group-menu .menu ul li.product:hover a:before{

	background-image: url(../images/_product_hover.png);

	background-size: cover;

}

#main .group-menu .menu ul li.product.active a:before{

	background-image: url(../images/_product_hover.png);

	background-size: cover;

}

#main .group-menu .menu ul li.contact a:before{

	background-image: url(../images/_contact.png);

	background-size: cover;

}

#main .group-menu .menu ul li.contact:hover a:before{

	background-image: url(../images/_contact_hover.png);

	background-size: cover;

}

#main .group-menu .menu ul li.contact.active a:before{

	background-image: url(../images/_contact_hover.png);

	background-size: cover;

}



#main .search{

	display: inline-block;

	position: absolute;

	top: 8px;

	right: 0;

}

#main .search .input-key{

	display: inline-block;

	background-color: unset;

	border: 1px solid #243137;

}

#main .search form{

	position: relative;

}

#main .search button{

	background-color: unset;

	border: none;

	position: absolute;

	padding: 0;

	top: 0;

	right: 0;

}

#main .search button .img-btn{

	width: 34px;

	display: inline-block;

	padding: 5px 5px;

	background-color: #243137;

	border-radius: 5px;

	transition: 0.5s ease-in-out;

}

#main .search:hover .input-key{

	border: 1px solid #e89f10;

}

#main .search:hover .img-btn{

	background-color: #e89f10;

}



main{

	padding-top: 40px;

}

main #menu-category .navbar-inverse{

	background-color: unset;

	border: 2px solid #243137;

}

main #menu-category .navbar-header{

	width: 100%;

	background: #243137;

	color: #fff;

}

main #menu-category .navbar-header .navbar-brand{

	color: #fff;

	text-transform: uppercase;

}

main #menu-category #myNavbar{

	padding: 0;

	background-color: #fff;

}

main #menu-category #myNavbar ul{

	width: 100%;

	margin: 0;

}

main #menu-category #myNavbar ul li {

	width: 100%;

	border-top: 1px solid #243137;

	transition: 0.5s ease-in-out;

}

main #menu-category #myNavbar ul li:hover {

	background-color: #e89f10;

}

main #menu-category #myNavbar ul li.active {

	background-color: #e89f10;

}

main #menu-category #myNavbar ul li a{

	padding: 7px 7px 7px 15px;

	background: no-repeat;

}

main #menu-category #myNavbar ul li .title{

	color: #243137;

	transition: 0.5s ease-in-out;

}

main #menu-category #myNavbar ul li:hover .title{

	color: #fff;

	padding-left: 30px;

}

main #menu-category #myNavbar ul li.active .title{

	color: #fff;

	padding-left: 30px;

}

main #menu-category #myNavbar ul li:hover .title:before{

	display: inline-block;

	width: 26px; 

	height: 20px;

	position: absolute;

	left: 15px;

	top: 10px;

	content:"";

	transition: 0.5s ease-in-out;

	background-image: url(../images/text_hover.png);

	background-size: cover;

}

main #menu-category #myNavbar ul li.active .title:before{

	display: inline-block;

	width: 26px; 

	height: 20px;

	position: absolute;

	left: 15px;

	top: 10px;

	content:"";

	transition: 0.5s ease-in-out;

	background-image: url(../images/text_hover.png);

	background-size: cover;

}

main #group-all-product{

	/*padding-top: 40px;*/

	padding-bottom: 50px;

}

main #group-all-product .group-title .div-title{

	border-bottom: 2px solid #243137;

}

main #group-all-product .group-title .div-title .title{

	padding: 15px 25px 15px 15px;

	font-size: 18px;

	line-height: 20px;

	display: inline-block;

	color: #fff;

	background: #243137;

	text-transform: uppercase;

}

main #group-all-product .blog-product{

	padding-top: 30px;

}

main #group-all-product .blog-product .group-product{

	box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);

}

main #group-all-product .blog-product .group-product .post-thumbnail{

	overflow: hidden;

}

main #group-all-product .blog-product .group-product .post-thumbnail .img-index{

	/*opacity: 1;*/

	transition: 0.5s ease-in-out;

}

main #group-all-product .blog-product .group-product:hover .post-thumbnail .img-index{

	/*opacity: 0;*/

	transform: scale(1.2);

}

main #group-all-product .group-product .post-content{

	padding: 5px 10px 10px;

	background-image: -webkit-linear-gradient(90deg, #cccccc 25%, #58f5f5 100%);

	transition: 0.5s ease-in-out;

}

main #group-all-product .group-product:hover .post-content{

	background-image: -webkit-linear-gradient(130deg, #184f8a 25%, #54f9da 100%)

}

main #group-all-product .group-product .post-content .title{

	text-align: center;

	display: -webkit-box;

	-webkit-line-clamp: 2;

	-webkit-box-orient: vertical;

	overflow: hidden;

	color: #243137;

	height: 50px;

}

main #group-all-product .group-product .post-content .title:hover{

	color: #a40000;

}

main #group-all-product .group-product .post-content .post-info .stars{

	text-align: center;

}

main #group-all-product .group-product .post-content .post-info .stars img{

	display: inline-block;

	width: 35px;

	padding: 0 3px;

}

main #group-all-product .group-product .post-content .post-detail{

	position: relative;

	height: 30px;

}

main #group-all-product .group-product .post-content .post-detail .post-left{

	/*float: left;*/

	position: absolute;

	top: 0;

	left: 0;

	transition: 0.5s ease-in-out;

	min-width: 0px;

}

main #group-all-product .group-product .post-content .post-detail .post-left .detail-view{

	padding: 5px 7px;

	color: #fff;

	background: #1f3042;

	font-size: 12px;

	text-transform: uppercase;

	transition: 0.5s ease-in-out;

	min-width: 0px;

}

main #group-all-product .group-product .post-content .post-detail .post-left:hover{

	min-width: 100%;

	z-index: 1;

}

main #group-all-product .group-product .post-content .post-detail .post-left:hover .detail-view{

	min-width: 100%;

}

main #group-all-product .group-product .post-content .post-detail .post-right{

	/*float: right;*/

	position: absolute;

	top: 0;

	right: 0;

	transition: 0.5s ease-in-out;

	min-width: 0;

}

main #group-all-product .group-product .post-content .post-detail .post-right .detail-check-out{

	padding: 5px 7px;

	color: #fff;

	background: #a40000;

	font-size: 12px;

	text-transform: uppercase;

	transition: 0.5s ease-in-out;

	min-width: 0;

}

main #group-all-product .group-product .post-content .post-detail .post-right:hover{

	min-width: 100%;

	z-index: 1;

}

main #group-all-product .group-product .post-content .post-detail .post-right:hover .detail-check-out{

	min-width: 100%;

}



footer {

	padding-top: 50px;

	padding-bottom: 20px;

	background-image: -webkit-linear-gradient(90deg, #340573 35%, #a734c3 100%);

}

footer h3 {

	color: #fff;

	font-size: 20px;

	margin-bottom: 30px;

}

footer h3:before {

	content: '';

	position: absolute;

	top: 30px;

	height: 3px;

	width: 50%;

	background: #fff;

}

footer p {

	color: #dadada;

}



footer ul.sub-share {

	text-align: center;

	list-style: none;

	margin: 0;

	padding: 0;

	margin-top: 20px;

	padding-top: 20px;

	border-top: 1px solid #fff;

}

footer ul.sub-share li{

	display: inline-block;

	padding: 5px 7px;

}

footer ul.sub-share li i{

	color: #fff;

	font-size: 25px;

	transition: 0.5s ease-in-out;

}

footer ul.sub-share li:hover i{

	/*font-size: 30px;*/

	color: #e89f10;

	transform: scale(1.5);

}

footer .box-link a{

	display: block;

	padding: 3px 10px;

	margin-bottom: 7px;

	color: #fff;

	border: 1px solid #fff;

	background-image: -webkit-linear-gradient(155deg, #583625cf 50%, #0b0a40cc 100%);

	transition: 0.5s ease-in-out;

}

footer .box-link a:hover{

	padding-left: 20px;

}



#return-to-top {

	cursor: pointer;

	position: fixed;

	z-index: 999;

	bottom: 50%;

	right: 20px;

	background: rgb(0, 0, 0);

	background: rgba(0, 0, 0, 0.7);

	width: 50px;

	height: 50px;

	display: block;

	text-decoration: none;

	-webkit-border-radius: 35px;

	-moz-border-radius: 35px;

	border-radius: 35px;

	display: none;

	-webkit-transition: all 0.3s linear;

	-moz-transition: all 0.3s ease;

	-ms-transition: all 0.3s ease;

	-o-transition: all 0.3s ease;

	transition: all 0.3s ease;

}

#return-to-top i {

	color: #fff;

	margin: 0;

	position: relative;

	left: 16px;

	top: 11px;

	font-size: 19px;

	-webkit-transition: all 0.3s ease;

	-moz-transition: all 0.3s ease;

	-ms-transition: all 0.3s ease;

	-o-transition: all 0.3s ease;

	transition: all 0.3s ease;

}

#return-to-top:hover {

	background: rgba(0, 0, 0, 0.9);

}

#return-to-top:hover i {

	color: #fff;

	top: 5px;

}



#slide-text {

	height: 35px;

	overflow: hidden;

	position: relative;

	margin-bottom: 20px;

	background-image: linear-gradient(to top left,#ff8a00,#da1b60);

	border-radius: 10px;

}

#slide-text .marquee {

	overflow: hidden;

}

#slide-text .title {

	vertical-align: middle;

	font-size: 20px;

	color: #fff;

	text-align: center;

	margin: 0;

	padding: 0;

}

#slide-text .title:before{

	display: inline-block;

	width: 22px; 

	height: 17px;

	margin-right: 20px;

	content:"";

	transition: 0.5s ease-in-out;

	background-image: url(../images/text_hover.png);

	background-size: cover;

}

#slide-text .title:after{

	display: inline-block;

	width: 22px; 

	height: 17px;

	margin-left: 20px;

	content:"";

	transition: 0.5s ease-in-out;

	background-image: url(../images/text_hover.png);

	background-size: cover;

}



@keyframes  play-title {

	0% {

		transform: scale(1);

	}

	50% {

		transform: scale(1.3);

	}

	100% {

		transform: scale(1);

	}

}



.call {

	position: fixed;

	right: 20px;

	bottom: 90px;

	z-index: 999;

	width: 50px;

	height: 50px;

	line-height: 33px;

	margin: 0 auto;

	border-radius: 50%;

	animation: play 1.5s ease infinite;

	-webkit-backface-visibility: hidden;

	-moz-backface-visibility: hidden;

	-ms-backface-visibility: hidden;

	backface-visibility: hidden;

}

.call a {

    position: absolute;

    color: #fff;

    text-decoration: none;

    padding: 10px;

    text-align: center;

    z-index: 999999 !important;

    /*background: #e89f10;*/

    background-image: -webkit-linear-gradient(90deg, #e89f10 35%, #f74704 100%);

    width: 100%;

    height: 100%;

    border-radius: 50%;

    font-size: 25px;

    border: 1px solid #fff;

	transition: .5s ease-in-out;

}

.call:hover {

	animation: none;

	transform: scale(1.2);

}



.hotline {

	position: fixed;

	right: 50px;

	bottom: 100px;

	z-index: 99;

}

.hotline a {

	color: #fff;

	padding: 5px 30px 5px 10px;

	text-align: center;

	z-index: 999999 !important;

	/*background: #e89f10;*/

	background-image: -webkit-linear-gradient(90deg, #e89f10 35%, #f74704 100%);

	width: 100%;

	border: 1px solid #fff;

	border-radius: 20px;

}

.zalo {
	position: fixed;
	left: 50px;
	bottom: 80px;
	z-index: 99;
	animation: play_zalo 2s ease infinite;
}
.zalo a {
	text-align: center;
	width: 100%;
	border-radius: 20px;
	box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
}
.zalo img {
	width: 50px;
	height: auto;
}



@keyframes play_zalo {

	0% {
		rotate: 0deg;
	}
	25% {
		rotate: 20deg;
	}
	50% {
		rotate: 0deg;
	}
	75% {
		rotate: -20deg;
	}
	100% {
		rotate: 0deg;
	}

}

@keyframes play {

	0% {

		transform: scale(1);

	}

	15% {

		box-shadow: 0 0 0 20px hsla(21, 90%, 75%, 0.42);

	}

	25% {

		box-shadow: 0 0 0 20px hsla(21, 90%, 75%, 0.42), 0 0 0 40px hsla(21, 90%, 75%, 0.42);

	}

	30% {

		transform: scale(1.2);

	}

}



body{

	position: relative;

}

#loading {

	display: block;

	position: fixed;

	top: 0;

	bottom: 0;

	z-index: 9999;

	width: 100%;

	height: 100%;

	/*background-color: rgba(192, 192, 192, 0.5);*/

	background-image: url("../images/load.png");

	background-repeat: no-repeat;

	background-position: center;

	animation: play-loading 1s ease infinite;

	transition: .3s ease-in-out;

}

.hidden-background::before {

	background-image: -webkit-linear-gradient(155deg, #7c059aa6 50%, #0400efdb 100%);

	/*background-color: rgba(255,255,255,0.8);*/

	transition: .3s ease-in-out;

	width: 100%;

	height: 100%;

	content: "";

	position: absolute;

	z-index: 8888;

}

@keyframes  play-loading {

	0% {

		transform: scale(0.8);

	}

	50% {

		transform: scale(1.1);

	}

	100% {

		transform: scale(0.8);

	}

}



.pagination{

	padding-top: 20px;

}

.pagination li:hover a{

	color: #fff;

	background-image: -webkit-linear-gradient(90deg, #e89f10 35%, #f74704 100%);

}

.pagination li.active a{

	background-image: -webkit-linear-gradient(90deg, #1f3e5f 35%, #065cb7 100%);

}





/* lg */ 

@media (min-width: 1331px) {

}

@media (max-width: 1330px) {

}



/* md */

@media (max-width: 1199px) {

	main #menu-category .navbar-header .navbar-brand{

		font-size: 14px;

	}

	main #menu-category #myNavbar ul li .title{

		font-size: 14px;

	}

	main #menu-category #myNavbar ul li:hover .title:before{

		width: 20px;

		height: 16px;

	}

	main #group-all-product .group-title .div-title .title{

		font-size: 14px;

	}

	main #group-all-product .group-product .post-content .post-detail .post-left .detail-view{

		padding: 5px 5px;

		font-size: 11px;

	}

	main #group-all-product .group-product .post-content .post-detail .post-right .detail-check-out{

		padding: 5px 5px;

		font-size: 11px;

	}

}

/* sm */

@media (max-width: 991px) {



	.product-header-fixed{

		top: 30px !important;

	}

	#menu-nav{

		background-color: #fff;

	}

	.navbar-collapse.collapse {

		display: none !important;

	}

	.navbar-toggle{

		display: inline-block;

	}

	#main .group-menu .menu{

		padding-right: 0;

	}

	#main .search{

		position: unset;

		width: 70%;

		padding-top: 15px;

	}



	#loading {

		width: 100%;

		height: 100%;

	}

}



/* xs */

@media (max-width: 767px){

	#header-title .title span{

		font-size: 14px;

	}

	#main .group-logo img{

		width: 250px;

	}

	#main .group-menu .menu ul li:last-child{

		margin-right: 0 !important;

	}

	#main .group-menu .menu ul li a{

		font-size: 14px;

	}

	#main .group-menu .menu ul li a:before{

		width: 18px;

		height: 18px;

	}

	main #group-all-product .group-product .post-content .post-detail .post-left .detail-view{

		padding: 5px 10px;

	}

	main #group-all-product .group-product .post-content .post-detail .post-right .detail-check-out{

		padding: 5px 10px;

	}

}

@media (max-width: 570px){

	#main .group-logo img{

		width: 200px;

	}

	#main .group-menu .menu ul li{

		margin-right: 10px;

	}

	#main .group-menu .menu ul li a:before{

		margin-right: 1px;

	}

}

@media (max-width: 440px){

	#main .group-logo{

		padding-bottom: 0;

	}

	#header-title img{

		width: 25px;

	}

	#header-title span{

		font-size: 14px;

		margin-left: 3px;

		margin-right: 0px;

	}

	#header-title a span{

		margin-right: 15px;

	}

	#main .group-menu .menu ul li{

		margin-right: 7px;

	}

	#main .group-menu .menu ul li a{

		font-size: 10px;

	}

	#main .group-menu .menu ul li a:before {

		width: 15px;

		height: 15px;

	}

}

@media (max-width: 340px){

	.navbar-inverse .navbar-toggle{

		margin-right: 0;

	}

	main #menu-category .navbar-header .navbar-brand{

		padding-right: 0;

	}

}

@media (max-width: 260px){

}