@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Josefin+Sans:wght@400;500;600;700&display=swap');
/* font-family: 'Josefin Sans', sans-serif; */
/* font-family: 'Dancing Script', cursive; */
/* CSS Document */

.bg_loader{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(255,255,255,0.7);
	z-index: 99999999;
	display: none;
}
.loader,
.loader:before,
.loader:after {
  background: #0c6efc;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  color: #0c6efc;
  text-indent: -9999em;
  margin: 0 auto;
  position: fixed;
  top: 50%;
  left: 50%;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

/* ======================== pagination ============================= */

#pagination .pagination{display: flex;align-items: center;justify-content: flex-end;}
#pagination .pagination img{width: 15px;vertical-align: unset;}
#pagination .pagination li{font-size: 20px;padding: 0 7px;font-weight: bold;}
#pagination .pagination li:hover{opacity: 0.5;}
#pagination .pagination li.active{opacity: 0.2;}

/* ======================== pagination ============================= */


/* ======================== button mobile ============================= */

.btn_mobile{display: none;}

@media (max-width:768px){
	.btn_mobile{display: flex;position: fixed;bottom: 0;left: 0;width: 100%;z-index: 99999;}
	.btn_mobile a{flex: auto;background-color: #00A8FF;text-align: center;padding: 5px 0;border-left: 1px solid #058BD1; line-height: 1;}
	.btn_mobile a:nth-child(1){border-left: none;}
    .btn_mobile a img{width: 50px;}
    .btn_mobile a:hover{opacity: 1;}
}

/* ======================== button mobile ============================= */





body{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -moz-text-size-adjust:100%;}

html{overflow-y:scroll; font-size:14px; color:#2e3347; line-height:1.7; word-spacing:0em; font-family: 'Josefin Sans', sans-serif;}

*{margin:0; padding:0; box-sizing:border-box;}



h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal;}

ol, ul{list-style:none;}



fieldset, img{border:0;}

img{vertical-align:bottom;}

img, embed, object, video, iframe{max-width:100%;}



table{border-collapse:collapse; border-spacing:0;}

caption, th{text-align:left; font-weight:normal;}


input, 
textarea,
select,
option,
optgroup,
button{-webkit-appearance: none; border-radius: 0; outline: none;}
a{outline: none;}

input[type="file"]{cursor: pointer;}

/* Common */

a{color:inherit; text-decoration:none;}

a:hover{opacity: 0.7;}



.clear{clear:both;}

.clearFix:after{display:block; clear:both; height:0; visibility:hidden; content:"."; zoom:1;}

 a[href^="tel:"]{pointer-events: none;}





.content{margin:0 auto; max-width:1600px; width:96%;}

.cont-w{margin:0 auto; max-width:1200px; width:96%;}

.sp{display: none;}

.f15{font-size: 15px;}
.f16{font-size: 16px;}
.f17{font-size: 17px;}
.f18{font-size: 18px;}
.f19{font-size: 19px;}
.f20{font-size: 20px;}
.f24{font-size: 24px;}

.txtColor{color: #586982;}

.txtColor2{color: #0c6efc;}

.txtColor3{color: #00a8ff;}





.wait_load{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 999999999;display: none;}

.bg_wait_load{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background-color: rgba(255,255,255,.6);z-index: 99999999;display: none;}



/*HEADER

====================================*/

header p{display: inline-block; margin: 0 30px 0 0; width: 231px;}

header #up{display: flex; align-items: center; position: relative; height: 70px;}

header #headLink li{font-size: 18px; font-weight: bold; display: inline-block; margin: 0 30px 0 0; color: #59607f; padding: 10px 0 0;}

header #register{position: absolute; right: 0; top: 50%; padding: 0 13px; border-left: 1px solid #a8a8a8; border-right: 1px solid #a8a8a8; -webkit-transform: translateY(-50%); transform: translateY(-50%);}

header #headLink li a:hover,header #headLink li a.active{color: #0c6efc;}



header #down{border-top: 1px solid #e9e9e9; border-bottom: 1px solid #a8a8a8;}

header #down .content{display: flex; justify-content: space-between; align-items: center; position: relative; height: 70px;}



header #search{/*width: calc(76% - 325px);*/ font-size: 0; margin: 0 0 0 24%; order: 1; position: relative; width: calc(76% - 100px);}

header #search button{display: block; cursor: pointer; width: 70px; height: 24px; text-align: center; float: right;border: none;background: none;outline: none;}

header #search button > svg{font-size: 26px; color: #000;}

header #search input{border: none; width: calc(100% - 70px); height: 100%; font-size: 16px; padding: 0 2.3%; outline: none; position: absolute; top: 0; left: 0; bottom: 0; font-family: 'Josefin Sans', sans-serif;}



header #hotline{width: 250px; position: relative; text-align: center; color: #0c6efc; font-weight: bold; order: 2;}

header #hotline:before,#hotline:after,header #headCart:after,header #headCart:before{content: ''; display: block; width: 1px; height: 28px; background: #a8a8a8; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}

header #hotline:before{left: 0;}

header #hotline:after{right: 0;}

header #hotline span{font-size: 16px;}

header #hotline a{font-size: 27px;}



header #headCart{width: 75px; position: relative; order: 3;}

header #headCart:after{right: 0;}
header #headCart:before{left: 0;}

header #headCart figure{width: 25px; margin: 0 auto; position: relative;}

header #headCart figcaption{font-size: 12px; width: 21px; height: 21px; background: #0c6efc; line-height: 22px; border-radius: 50%; text-align: center; color: #fff; position: absolute; top: -8px; right: -12px;}





/*NAVIGATION

====================================*/

#gnav{width: 24%; position: absolute; top: 70px; left: 0; z-index: 999999;}

#gnav > a{font-size: 16px; color: #fff; background: #2e3347; padding: 0 0 0 75px; display: block; line-height: 71px; position: relative; cursor: pointer;}

#gnav > a:hover{opacity: 1;}

#gnav > a:before{content: ''; display: block; width: 23px; height: 15px; position: absolute; left: 35px; top: 26px;

background: url(../images/ic_bars.png) no-repeat left center;}

#gnav ul{border: 1px solid #858998; display: none; height: 0; background: #fff; overflow: hidden;

-webkit-box-shadow: 0px 0px 9px 0px rgba(12, 110, 252, 0.35);

-moz-box-shadow:    0px 0px 9px 0px rgba(12, 110, 252, 0.35);

box-shadow:         0px 0px 9px 0px rgba(12, 110, 252, 0.35);

}

#gnav ul.active{display: block; height: auto;}

#gnav ul > li{border-bottom: 1px solid #e7e7e7;}

#gnav ul > li > a{padding: 0.8em 0 0.53em 35px; font-size: 16px; display: block; position: relative;}

#gnav ul > li > a:before{content: ''; display: block; width: 17px; height: 15px; position: absolute; top: 50%; right: 30px;

-webkit-transform: translateY(-50%); transform: translateY(-50%);

background: url(../images/ic_arr.png) no-repeat;

}

#gnav ul > li > a:hover{background: #f4f6ff; opacity: 1;}

#gnav ul > li.gnav-item1{display: none;}





/*MAIN

===================================*/

h2{font-size: 40px; font-weight: bold; color: #59607f; padding: 40px 0 30px; text-align: center;}

h3{font-size: 30px;}

.btnMore{font-size: 24px; color: #0c6efc; display: block; width: 194px; margin: 40px auto 0; text-align: center; padding: 8px 0 4px; border: 2px solid #0c6efc; border-radius: 35px; transition: all .3s linear; cursor: pointer;}

.btnMore:hover{background: #0c6efc;	color: #fff; opacity: 1;}



.main{background: #f4f6ff; padding: 0 0 150px;}

.mainTit{width: 100%; text-align: center;}

.mainTit h2{background: #fff;}
.mainTit.bgNone h2{background: none; color: #2e3347; padding: 40px 0 50px;} 

.mainTit h3{font-weight: bold; padding: 70px 0 60px; font-size: 25px;}

.boxFlex{display: flex; flex-flow: wrap; justify-content: space-between;}

.bgWhite{background: #fff;}



.breadcrumb p{padding: 30px 0 50px;}



.list{justify-content: flex-start;}

.list .item{width: 21.5%; margin: 0 4.6% 4.6% 0; background: #fff; border-radius: 5px; position: relative;

	-webkit-box-shadow: 0px 0px 7px 0px rgba(68, 86, 113, 0.11);	

	box-shadow:         0px 0px 7px 0px rgba(68, 86, 113, 0.11);

}

.list .item:nth-of-type(4n){margin: 0 0 4.6%;}

.list .item > a{display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 101;}

.list .item figure{position: relative; border-top-left-radius: 5px; border-top-right-radius: 5px; overflow: hidden;}

.list .item figure:before{content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; background: rgba(41,47,56,0.61); z-index: 100;

transition: all .2s linear; -webkit-transition: all .2s linear;}

.list .listbtn{width: 100%; position: absolute; left: 0; top: 50%; text-align: center; z-index: 101; opacity: 0;

	-webkit-transform: translateY(-50%); transform: translateY(-50%);

	transition: all .2s linear; -webkit-transition: all .2s linear;

}

.list .listbtn li{display: inline-block; width: 116px;}

.list .listbtn li a{display: block; padding: 8px 0 6px; background: #fff; border-radius: 30px;}

.list .listbtn li:first-of-type a{margin: 0 12px 0 0; color: #fff; background: #0c6efc;}

.list .listbtn li a:hover{background: #2e3347; opacity: 1; color: #fff;}



.list .item:hover figure:before{opacity: 1;}

.list .item:hover figure > img{transition: all .5s linear; -webkit-transition: all .5s linear;

	-webkit-transform: scale(1.1);	transform: scale(1.1);

}

.list .item:hover .listbtn{opacity: 1;}

.list .pro{padding: 13px;}
.list .pro h4{
	margin: 0 0 35px; line-height: 1.4;

}
.list .price{
	color: #0c6efc; font-weight: bold; display: inline-block;
	position: absolute;bottom: 13px;left: 13px;
}
.list .sales{
	display: block; float: right; padding: 4px 0 0 10px;
	position: absolute;bottom: 13px;right: 13px;
}


@media (min-width:769px) and (max-width:900px){
	.list .sales{
		bottom: 0px;
	}
}

@media (max-width:400px){
	.list .pro{
		padding-bottom: 20px;
	}
	.list .price{
		bottom: 20px;
	}
	.list .sales{
		bottom: 0px;
	}
}



#pagetop{position: fixed; right: 20px; /*bottom: 130px;*/ bottom: 70px; z-index: 99998; display: none; cursor: pointer; width: 45px;}

#chat{position: fixed; right: 20px; bottom: 20px; z-index: 99998; width: 45px;}
#chat_zalo{position: fixed; right: 20px; /*bottom: 75px;*/ bottom: 15px; z-index: 99998; width: 45px;}


@media only screen and (max-width:1600px){

	#gnav > a{padding: 0 0 0 4vw;}

	#gnav > a:before{left: 1.2vw;}

	#gnav ul > li > a{padding: 0.57vw 0 0.48vw 1vw; font-size: 1.1vw;}

	#gnav ul > li > a::before{right: 1vw;}


    
	.list .item{width: 23%; margin: 0 2.66% 2.66% 0;}
    .list .item:nth-of-type(4n){margin: 0 0 2.66%;}


	#chat{right: 10px;}
	#chat_zalo{right: 10px;}

	#pagetop{right: 10px;}

}	



@keyframes anime{

		0%{

			left: -80%;

		}

		100%{

			left: 0;

		}

	}


#gnav .space {display: none;}

@media only screen and (max-width:1200px){
	a[href^="tel:"]{pointer-events: auto;}
	

	header p{position: absolute; left: 50%; top: 50%; margin: 0;

		-webkit-transform: translate(-50%,-50%);

		transform: translate(-50%,-50%);

	}

	header #up{height: 60px;}

	header #register,header #headLink,header #hotline{display: none;}

	

	header #down .content{position: static; height: 50px;}

	header #search{width: 100%; margin: 0;}

	header #search button{width: 30px;}

	header #search a{width: 24px;}

	header #search input{padding: 0; width: calc(100% - 30px);}

	header #headCart{position: absolute; top: 20px; right: 3%; width: 25px;}

	header #headCart::after,
	header #headCart::before{display: none;}



	#gnav{width: 30px; position: static;}

	#gnav.open{background: rgba(0,0,0,0.5); position: fixed; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer;}

	#gnav.open .wrap{width: 100%; height: 100%; position: absolute; left: 0; top: 50px;}

	#gnav > a{width: 100%; height: 60px; line-height: 1; padding: 0; background: none;}

	#gnav > a::before{left: 0; top: 50%; width: 30px; height: 21px;

		-webkit-transform: translateY(-50%);

		-ms-transform: translateY(-50%);

		transform: translateY(-50%);

		background: url(../images/ic_bars_sp.png) no-repeat left center;

		-webkit-background-size: cover;

		background-size: cover;

		

	}

	#gnav > a > span{display: none;}

	#gnav ul{position: fixed; height: 100%; top: 0; left: -80%; bottom: 0; width: 80%; background: #fff; box-shadow: none;
    transition: all .4s ease-in-out; display: block; border: none; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);}
    #gnav.open ul{left: 0;}
    
    #gnav.open .space {display: block; position: absolute; top: 0; right: 0; width: 20%; height: 100%; z-index: 1000; content: '';}
/*	#gnav ul.active{animation: anime .4s forwards; -webkit-animation: anime .4s forwards;}	*/

    

	#gnav ul > li{width: 88%; margin: 0 auto;}

	#gnav ul > li.gnav-item1{display: block; position: relative;}

	#gnav ul > li.gnav-item1 a{font-size: 16px; display: inline-block; padding: 40px 0;}

	#gnav ul > li.gnav-item1 .btnClose{display: inline-block; cursor: pointer; padding: 40px 0 40px 35px;

		background: url('../images/btnClose.png') left center no-repeat;

		-webkit-background-size: 22px 22px;

		background-size: 22px 22px;

	}

	#gnav ul > li.gnav-item1 .regR{display: inline-block; position: absolute; top: 50%; right: 0;

		-webkit-transform: translateY(-50%);

		-moz-transform: translateY(-50%);

		-ms-transform: translateY(-50%);

		-o-transform: translateY(-50%);

		transform: translateY(-50%);

	}

	#gnav ul > li > a{font-size: 20px; padding: 20px 0 18px 35px;}

	#gnav ul > li > a::before{right: 30px;}



	.list .item figure:before{display: none;}

	.list .item:hover figure:before{opacity: 0;}

	.list .item:hover figure > img{transition: all .5s linear;

		-webkit-transform: scale(1);

		-ms-transform: scale(1);

		-o-transform: scale(1);

		transform: scale(1);

	}

	.list .listbtn{display: none;}    

}

/* Landscape */
@media only screen and (min-width: 769px) and (max-width: 1200px) and (orientation: landscape){
	#gnav ul > li > a{padding: 9px 0 9px 35px; font-size: 17px;}
	
}

@media only screen and (max-width:768px){

	body{position: relative;}



	.pc{display: none;}

	.sp{display: block;}



	.content,.cont-w{width: 92%!important;}



	a[href^="tel:"]{pointer-events: auto;}




	h3{font-size: 5vw;}

	

	header p{width: 176px;

		left: 50%;

		right: inherit;

		-webkit-transform: translate(-50%,-50%);

		-moz-transform: translate(-50%,-50%);

		-ms-transform: translate(-50%,-50%);

		-o-transform: translate(-50%,-50%);

		transform: translate(-50%,-50%);

		

	}

	header #down .content{height: 50px;}

	header #headCart{right: 5.5%;}



	#gnav ul.active{height: 100%;}

	#gnav ul > li.gnav-item1{padding: 0;}

	#gnav ul > li.gnav-item1 a{padding: 5.2vw 0;}

	#gnav ul > li.gnav-item1 .btnClose{padding: 5.2vw 0  5.2vw 30px; height: 100%;}

	#gnav ul > li > a{padding: 2vw 0 1.7vw 2.5vw;}

	#gnav ul > li > a::before{right: 2.5vw;}



	

	.mainTit h3{padding: 40px 0 30px; font-size: 3vw;}

	.breadcrumb p{padding: 20px 0;}



	.list .item{width: 48.5%; margin: 0 3% 4% 0;}

	.list .item:nth-of-type(2n){margin: 0 0 4% 0;}
    .list .item:nth-of-type(4n){margin: 0 0 4% 0;}
/*	.list .sales{float: none; display: block;}*/
    

/*
	#pagetop{bottom: 80px; position: absolute; display: block;}

	#chat{display: none;}
	#chat_zalo{display: none;}
*/

}



@media only screen and (max-width:480px){

	.f16{font-size: 14px;}

	.f18{font-size: 16px;}

	.f20{font-size: 18px;}

	.f24{font-size: 22px;}



	header #search input{font-size: 14px;}



	#gnav ul > li > a{font-size: 4vw;}

	#gnav ul > li.gnav-item1 a{font-size: 3.3vw;}

.main{padding: 0 0 80px;}
	h2{font-size: 24px;}    

	.btnMore{font-size: 16px; padding: 8px 0 4px; width: 180px;}

}



/*FOOTER
===================================*/
footer{padding: 50px 0 20px;}
footer .bold{font-weight: bold;}
footer a.line{text-decoration: underline;}
.footer-row1{display: flex; justify-content: space-between; margin: 0 0 10px;}
.footer-logo{margin: 0 0 15px;}
.footer-info{display: flex; flex-wrap: wrap;}
.footer-info li:nth-of-type(1){width: 480px;}
.footer-info li:nth-of-type(2){width: 280px;}
.footer-info .tit{color: #565d78;}
.footer-info .social a{margin: 0 0 0 20px;}
.copyright{text-align: center; margin: 25px 0 0 0;}
.footer-nav{display: none;}

@media only screen and (max-width:1366px){
    .footer-info li:nth-of-type(1){width: 410px;}
    .footer-info li:nth-of-type(2){width: 210px;}
}

@media only screen and (max-width:1199px){
    .footer-row1{margin: 0 0 30px;}
    .footer-row1 .col:nth-of-type(2){display: none;}
}

@media only screen and (max-width:768px){      
	footer{padding: 50px 0 10px;}
    .footer-info li{width: 100% !important;}
	.footer-info li:nth-of-type(1){margin-bottom: 20px;}
    .footer-nav{display: block;}
    .footer-nav li{margin: 5px 0 0 0;}
	.copyright{text-align: left;}
}

/* TOP */

#top #gnav > a{pointer-events: none;}

#top .slider{width: 74.63%; float: right;}



#top #alltemp{padding: 80px 0 0;}

#top #alltemp h3{margin: 0 auto 30px;}



/*===============================

             MEDIA

================================*/

@media only screen and (max-width:1600px){

	/* TOP */

/*	#top #alltemp .content{width: 88%; max-width: 1200px;}*/

}	



@media only screen and (max-width:1200px){

	/* TOP */

	#top .slider{width: 100%; float: none; padding: 20px 0 0;}

}



@media only screen and (max-width:768px){

	/* TOP */

	#top #alltemp{padding: 10vw 0 0;}

	#top #alltemp h3{margin: 0 0 15px;}

}





/* FLYER */

#flyer .list{padding: 50px 0 0;}



/*===============================

             MEDIA

================================*/

@media only screen and (max-width:1600px){

	/* FLYER */

	/*#flyer .content{width: 88%; max-width: 1200px;}*/

}	





/* FINISH */

#finish .tit{font-size: 24px; font-weight: bold; padding: 30px 0 20px;}

#finish .back{display: inline-block; padding: 70px 0 0; color: #596982; font-weight: bold;}

#finish.main{padding: 0; width: 100%; height: 620px; display: table; text-align: center;}

#finish.main .content{display: table-cell; vertical-align: middle;}
#finish.main .content > img {width: 68px;}


/*===============================

             MEDIA

================================*/

@media only screen and (max-width:768px){

	/* FINISH */

	#finish.main{height: auto; padding: 20vw 0;}

	#finish .tit{font-size: 20px;}

	#finish.main p.f16 br:first-of-type{display: none;}

}





/* SHOPPING GUIDE*/
#shopping_guide .boxFlex{margin: 0 0 80px; align-items: center;}
#shopping_guide .boxFlex:last-of-type{margin: 0;}
#shopping_guide .boxFlex .box-left{width: 45.54%;}
#shopping_guide .boxFlex .box-right{width: 48%;}

#shopping_guide .even .box-right{order: -1;}
#shopping_guide .boxFlex h3{font-size: 30px; font-weight: bold; color: #586982; line-height: 1.3; margin: 0 0 10px;}
#shopping_guide .boxFlex a{opacity: 1; font-weight: bold; text-decoration: underline;}
#shopping_guide .boxFlex ul{margin: 0 0 0 1em;}


/*===============================

             MEDIA

================================*/
@media only screen and (max-width:1000px){
    #shopping_guide .boxFlex{display: block;}    
    #shopping_guide .boxFlex .box-left{width: 90%; text-align: center; margin: 0 auto 20px;}
    #shopping_guide .boxFlex .box-right{width: 100%;}
    
    #shopping_guide .boxFlex h3.sp{display: block;}
    #shopping_guide .boxFlex .box-right h3{display: none;}
}

@media only screen and (max-width:480px){
    #shopping_guide .boxFlex{margin: 0 0 60px;}
    #shopping_guide .boxFlex h3{font-size: 20px;}
}





/* CART */

#cart .content{max-width: 1200px;}

#cart .reg{display: inline-block; position: absolute; right: 0; top: 50%;

	-webkit-transform: translateY(-50%);

	-ms-transform: translateY(-50%);

	transform: translateY(-50%);

	

}

#cart .col{width: 32%; background: #fff; padding: 2.3%; border-radius: 10px; margin: 0 0 10px;

	-webkit-box-shadow: 0px 0px 7px 0px rgba(68, 86, 113, 0.11);

	-moz-box-shadow:    0px 0px 7px 0px rgba(68, 86, 113, 0.11);

	box-shadow:         0px 0px 7px 0px rgba(68, 86, 113, 0.11);

}

#cart .col:last-of-type{width: 65%;}

#cart .col:first-of-type .row{margin: 0 0 25px;}

#cart .col:first-of-type .row:last-of-type{margin: 0;}

#cart .col .row:first-of-type{margin: 0 0 15px; position: relative;}

#cart .import{width: 100%; border-radius: 5px; border: 1px solid #c3c4c4; font-size: 14px; padding: 15px 10px; font-family: 'Josefin Sans', sans-serif;}

#cart .import:focus,#cart input:focus,#cart #info3 label input:focus, #cart #info3 label textarea:focus{

	-webkit-box-shadow: 0px 0px 8px 0px rgba(58, 136, 255, 0.25);

	-moz-box-shadow:    0px 0px 8px 0px rgba(58, 136, 255, 0.25);

	box-shadow:         0px 0px 8px 0px rgba(58, 136, 255, 0.25);

	border: 1px solid #0c6efc;

}



#cart .col:first-of-type label.c-check{width: 100%; height: 49px; position: relative; display: block; padding: 0;

	background: #fff;

}

#cart .col:first-of-type label.c-check select{background: transparent; width: 100%; height: 100%; position: absolute; left: 0; top: 0;

	-moz-appearance:none;

	-webkit-appearance:none;

	appearance:none;

	padding: 0 10px;

	cursor: pointer;

}

#cart .col:first-of-type label.c-check select::-ms-expand {display: none;}

#cart .col:first-of-type label.c-check svg{font-size: 20px; position: absolute; right: 10px; top: 50%;

	-webkit-transform: translateY(-50%);

	transform: translateY(-50%);

}



#cart .col:first-of-type label{cursor: pointer;}



#cart .pro{padding: 20px 0; border-top: 1px solid #c3c4c4;}

#cart .pro:last-of-type{border-bottom: 1px solid #c3c4c4;}

#cart #info1 .fimg{width: 13%;}

#cart #info1 table{width: 83%;}

#cart #info1 td{padding: 0 15px 0 0; vertical-align: top;}

#cart #info1 td:nth-last-of-type(2){width: 130px; text-align: right;}

#cart #info1 td:last-of-type{padding: 0; width: 17px;}

#cart #info1 td:last-of-type a{display: block; margin: -3px 0 0;}

#cart #info1 .bd{border-top: 1px dotted #c3c4c4; margin: 15px 0 20px; display: block; width: 100%;}

#cart #info1 .pd1{padding: 0 15px 15px 0;}

#cart #info1 tr:last-of-type .pd1{padding-bottom: 0;}



#cart #info2{padding: 10px 0 0;}

#cart #info2 .item,#cart #info3 .item{width: 41%;}

#cart #info2 .item:last-of-type,#cart #info3 .item:last-of-type{width: 50%;}

#cart #info2 .item:last-of-type table{width: 100%;}

#cart #info2 .item:last-of-type td:first-of-type{width: 130px; text-align: right;}

#cart #info2 .item:last-of-type td:last-of-type{padding: 0 32px 0 0; text-align: right;}

#cart #info2 .item:last-of-type tr:last-of-type{border-top: 2px solid #586982;}

#cart #info2 .item:last-of-type tr:nth-last-of-type(2) td{padding-bottom: 5px;}

#cart #info2 .item:last-of-type tr:last-of-type td{padding-top: 5px;}



#cart #info2 .infoBill{margin: 40px 0 0; border-top: 1px solid #c3c4c4; padding: 10px 0 0;}

#cart #info2 .infoBill .btnInfo3{position: relative; padding: 0 25px;}
#cart #info2 .infoBill .btnInfo3 label{cursor: pointer; width: auto; display: inline-block;}

#cart #info2 .infoBill label .check{width: 16px; margin-top: -7px;}
#cart #info2 .infoBill label{width: 100%; display: block; margin: 0 0 10px;}

#cart #info2 .infoBill label span{width: 107px; display: inline-block;}

#cart #info2 .infoBill label input,#cart .infoBill label textarea{width: calc(100% - 107px); padding: 8px 5px; border: 1px solid #c3c4c4; border-radius: 5px; font-family: 'Josefin Sans', sans-serif; font-size: 14px;line-height: 1.5;padding-bottom: 3px;}

#cart #info2 .infoBill label textarea{height: 80px; font-size: 14px; resize: none;}

#cart #info2 .infoBill label:last-of-type span{vertical-align: top; padding: 5px 0 0;}

#cart #info2 .infoBill .boxHide{padding: 10px 0 0; display: none;}



#cart #info2 .listBtn{padding: 30px 0 0;}

#cart #info2 .listBtn .btn{display: block; width: 47%; height: 47px; line-height: 50px; text-align: center; margin: 0 6% 0 0; float: left; border-radius: 5px; color: #fff; background: #2e3347;}

#cart #info2 .listBtn #btnOrder{margin: 0; outline: none; font-family: 'Josefin Sans', sans-serif; border: none;cursor: pointer;}



#cart .sum{font-size: 24px; color: #0c6efc;}

#cart .promotion{width: calc(100% - 105px); height: 35px; border: 1px solid #c3c4c4; border-radius: 5px; padding: 9px 5px; font-family: 'Josefin Sans', sans-serif;}

#cart #btnOrder{background: #ff5b1d!important;}



#cart .rel{position: relative; margin: 5px 0 0;}

#cart .rel .apply{height: 35px; width: 100px; position: absolute; top: 0; right: 0; border-radius: 5px; background: #586982;

	border: none;

	color: #fff;

	font-weight: bold;

	cursor: pointer;

}



#cart input[type=checkbox]{position: absolute; visibility: hidden; -webkit-appearance: none;}

#cart .col:first-of-type label{display: inline-block; position: relative; padding: 0 0 0 25px; z-index: 9; cursor: pointer;}

#cart .check{display: block; position: absolute; border: 1px solid #000; border-radius: 50%;

	height: 16px; 

	width: 16px;

	top: 50%;

	left: 0;

	-webkit-transform: translateY(-50%);

	-moz-transform: translateY(-50%);

	-ms-transform: translateY(-50%);

	-o-transform: translateY(-50%);

	transform: translateY(-50%);

	z-index: 5;

}

#cart input:checked ~ .check::before{display: block;}

#cart .check::before {display: none; position: absolute; content: ''; border-radius: 100%; height: 6px; width: 6px; top: 4px; left: 4px; background: #2e3347;}



#cart .modal{display: none;}

.modal.fancybox-content{width: 1200px; height: calc(100vh - 40px);}

.modal .fancybox-close-small{position: fixed; background-color: rgba(0,0,0,.6);}

.modal .fancybox-close-small svg path{fill: #ffffff;}


.btn-privacy{text-decoration: underline;}
.btn-privacy:hover{color: #0c6efc;}


#privacy .row{margin: 0 0 20px;}

#privacy b{padding: 0 0 5px;}

#privacy p{padding: 0 0 10px;}

#privacy a{font-weight: bold;}

#privacy ul{padding: 0 0 10px 25px;}



/*===============================

             MEDIA

================================*/

@media only screen and (max-width:1200px){

	/* CART */

	#cart .col{width: 100%!important;}

	#cart #info2 .infoBill{margin: 0; border-bottom: 1px solid #c3c4c4; border-top: none; padding: 10px 0;}

}



@media only screen and (max-width:768px){

	/* CART */

	#cart .import{padding: 10px; font-size: 16px;}

	#cart .col:first-of-type .row{margin: 0 0 15px;}

	#cart #info2 .item,#cart #info3 .item{width: 100%!important;}

	#cart #info2 .item:first-of-type{margin: 0 0 10px;}

}



@media only screen and (max-width:480px){

	/* CART */

	#cart .col{padding: 10px;}

	#cart .pro{display: block;}

	#cart #info1 .fimg{width: 30%; margin: 0 0 20px;}

	#cart #info1 table{width: 100%;}



	#privacy ul{padding: 0 0 10px 10px;}

}





/* DETAIL */

#detail .tit1{text-transform: uppercase; font-weight: bold; padding: 0 0 5px; border-bottom: 1px solid #000; margin: 0 0 30px;}

#detail .mb10{display: inline-block; margin: 0 0 10px;}

#detail .pro h4{margin: 0 0 35px;}

#detail .pro textarea{width: 100%; height: 90px; border-radius: 5px; border: 1px solid #c3c4c4; padding: 10px; margin: 0 0 10px; resize: none; font-family: 'Josefin Sans', sans-serif; font-size: 14px; color: #2e3347; line-height: 1.7; font-weight: normal;}

#detail .pro textarea::-webkit-input-placeholder {font-size: 12px;}

#detail .pro textarea::-moz-placeholder {font-size: 12px;}

#detail .pro textarea:-ms-input-placeholder {font-size: 12px;}



#detail .pro .item{width: 60%;}
#detail .pro .proSlider {margin: 0 auto 50px;}
#detail .pro .proSlider li a:hover{opacity: 1;;}
/*
#detail .pro .fimg{

	margin: 0 auto 90px;

	background-position: 50% 50%;

	position: relative;

	width: 100%;

	overflow: hidden;

	display: block;

}
*/



#detail .pro .group{margin: 0 0 60px;}

#detail .pro .group:nth-of-type(2){margin: 0;}

#detail .pro .row{padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px dotted #a7a7a7;}

/* #detail .pro .row:last-of-type{ padding: 0; margin: 0;} */

#detail .pro .lb1{display: block; width: 100%; position: relative; margin: 0 0 10px;}

#detail .pro .lb1 a{margin: 0 0 0 5px;}

#detail .pro .lb1 a > img{vertical-align: top;width: 22px;}

#detail .pro .lb1 .price,#detail .pro .lb1 .abscont{display: inline-block; position: absolute; right: 0; top: 50%;

	-webkit-transform: translateY(-50%);

	-ms-transform: translateY(-50%);

	transform: translateY(-50%);

	

}

#detail .pro .lb2{display: block; width: 100%;}

/* #detail .pro .group:nth-of-type(2) .lb2,#detail .pro .group:nth-of-type(2) p{padding: 0 0 0 25px;} */

#detail .pro input[type=checkbox]{position: absolute; visibility: hidden; -webkit-appearance: none;}

#detail .pro .lb1{display: inline-block; position: relative; padding: 0 0 0 25px; z-index: 9; cursor: pointer;}

#detail .pro .check{display: block; position: absolute; border: 1px solid #000; border-radius: 50%;

	height: 16px; 

	width: 16px;

	top: 4px;

	left: 0;

	z-index: 5;

}
#detail .pro .lb1.un{pointer-events: none; cursor: default;}
#detail .pro input:checked ~ .check:before{display: block;}

#detail .pro input:checked ~ .check{border: 1px solid #07aaff;}

#detail .pro .check::before {display: none; position: absolute; content: ''; left: 4px; top: 2px; width: 4px; height: 6px; border: solid #07aaff; border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



#detail .pro .number{border: 1px solid #c3c4c4; width: 104px; border-radius: 3px; font-size: 0; margin: 0 0 10px 25px; position: relative;}

#detail .pro .number:after{content: 'trang'; font-size: 16px; display: block; position: absolute; right: -50px; top: 50%;

	-webkit-transform: translateY(-50%);

	-ms-transform: translateY(-50%);

	transform: translateY(-50%);

	

}

#detail .pro .number span{width: 31px; display: inline-block; font-size: 21px; text-align: center; height: 30px; line-height: 30px; cursor: pointer;}

#detail .pro .number .quality{width: 40px; height: 30px; border-left: 1px solid #c3c4c4; border-right: 1px solid #c3c4c4; border-top: none; border-bottom: none; line-height: 30px; text-align: center;}



#detail .pro .boxRel{position: relative;}

#detail .pro .boxRel .row:last-of-type{margin: 0 0 20px;}

#detail .pro .btnMore2{display: block; width: 156px; margin: 40px auto 0; border: 1px solid #586982; border-radius: 30px; text-align: center; padding: 8px 0 3px; cursor: pointer; transition: all .2s linear;}

#detail .pro .btnMore2:hover{color: #fff; background: #586982; opacity: 1;}

#detail .pro .btnMore2.off{position: relative;}

#detail .pro .btnMore2.off:after{content:''; display: block; width: 100%; height: 100%;position: absolute; top: 0; left: 0; background:#fff; border-radius: 30px; z-index: 100; transition: all .2s linear;}

#detail .pro .btnMore2.off:before{content:'Thu gọn'; width: 100%; display: block; position: absolute; top: 8px; left: 0; z-index: 110; transition: all .2s linear;}

#detail .pro .btnMore2.off:hover{opacity: 1;}

#detail .pro .btnMore2.off:hover:after{background: #586982;}

#detail .pro .boxHide{display: none;}



#detail .pro .boxKey{padding: 50px 0;}

#detail .pro .boxKey .key{display: inline-block; padding: 5px 15px 3px 15px; border: 1px solid #d3def1; border-radius: 15px; margin: 16px 10px 0 0;}



#detail #infoPro{width: 35%; position: sticky; position: -webkit-sticky; top: 30px;}

#detail #infoPro h3{line-height: 1.4; font-weight: bold; margin: 0 0 10px;}

#detail #infoPro .tit{padding: 0 0 13px; margin: 0 0 5px; border-bottom: 1px solid #e9e9e9;}

#detail #infoPro .price{color: #ff5b1d; font-size: 30px; font-weight: bold; line-height: 1; padding: 15px 0;}

#detail #infoPro .info{/*padding: 0 0 10px;*/ border-bottom: 1px solid #e9e9e9;}

#detail .btnBuy{width: 100%; max-width: 350px; margin: 30px 0 50px; cursor: pointer; background: #0c6efc; color: #fff; padding: 10px 0 5px; display: block; text-align: center; font-weight: bold; border-radius: 30px;	border: none;line-height: 1.5;outline: none;font-family: 'Josefin Sans', sans-serif;} 

#detail .btnBuy:hover{opacity: 0.8;}

#detail .btnBuy.sp{display: none;}



#detail #similar h3{padding: 50px 0 20px;}

#detail .pop{display: none;}

.pop.fancybox-content{width: 800px;}

.pop.fancybox-content .tit{color: #00a8ff; font-size: 20px; margin: 0 0 5px;}
.pop.fancybox-content ul{margin: 0 0 0 10px;}
.pop.fancybox-content li{padding: 0 0 0 1em; position: relative;}
.pop.fancybox-content li:before{content: '•'; position: absolute; top: 0; left: 0;}


.soon{text-align: center; padding: 200px 0; font-size: 5vw;}


/*===============================

             MEDIA

================================*/

@media only screen and (max-width:1600px){

	/* DETAIL */

/*
	#detail #similar h3{width: 100%; max-width: 1200px; margin: 0 auto;}

	#detail #similar .content{width: 88%; max-width: 1200px;}	
*/

}	



@media only screen and (max-width:1200px){

	/* DETAIL */

	#detail .pro .item,#detail #infoPro{width: 100%; max-width: 831px; margin: 0 auto;}

    #detail #infoPro{position: static; margin: 0 auto 20px;}

	#detail .pro .proSlider{margin: 0 auto 50px;}

}



@media only screen and (max-width:768px){

	/* DETAIL */

	#detail .pro .proSlider{margin: 0 auto 7vw;}

	#detail #infoPro h3{margin: 0 0 1.8vw;}
	#detail #infoPro .price{font-size: 6vw;}

	#detail #infoPro .price .f24{font-size: 5vw;}



	.soon{text-align: center; padding: 15vw 0;}

}



@media only screen and (max-width:480px){

	/* DETAIL */

	#detail .btnBuy.pc{display: none;}

	#detail .btnBuy.sp{display: block; max-width: 100%; margin-bottom: 0;} 

	#detail .pro .lb1{padding: 2px 0 0 20px;}
	#detail .pro .lb1 a{width: 18px; display: inline-block; margin: 0 0 0 2px;}
	#detail .pro .lb1 .price, #detail .pro .lb1 .abscont{font-size: 3.5vw;}
	#detail .pro .lb1 .price{padding: 3px 0 0;}
	

}



@media only screen and (max-width:320px){

	/* DETAIL */

	#detail .pro .lb1 .price, #detail .pro .lb1 .abscont{position: static; display: block; font-size: 12px;

		-webkit-transform: translateY(0);

		-moz-transform: translateY(0);

		-ms-transform: translateY(0);

		-o-transform: translateY(0);

		transform: translateY(0);

	}

}



/* LOGIN */

#login .boxFlex{ align-items: center;}

#login .bxlogin{ max-width: 850px; padding: 0 10px; margin: auto;}

#login h3{ padding: 50px 0 10px; line-height: 1;}

#login .txtTop{ display: flex; justify-content: center; margin: 0 auto 70px;}

#login .txtTop a{ display: inline-block; color: #0c6efc; font-weight: bold; margin-left: 5px; text-decoration: underline;}

#login .txtTop a:hover{ text-decoration: none;}



#login .col { width: 50%;}

#login .col:first-of-type{ padding: 20px 5% 20px 0; border-right: 1px #000 solid;}

#login .col:nth-of-type(2){ padding-left: 5%;}

#login .col .row { margin: 0 0 16px;}

#login .col .row:last-of-type{ margin: 0;}

#login .import { width: 100%; border-radius: 5px; border: 1px solid #c3c4c4; font-size: 14px; padding: 15px 10px; font-family: 'Josefin Sans', sans-serif;}


#login .col:nth-of-type(2) p{width: 100%;max-width: 46px;padding: 5px;background-color:#fff;}
#login .col:nth-of-type(2) span{ color: #fff; text-align: center; display: inline-block; padding: 0 10px; width: calc(100% - 46px);}

#login .col:nth-of-type(2) a{ display: flex; align-items: center;}

#login .col:nth-of-type(2) .row{ max-width: 300px;}

#login .face{ background: #3a5b9b; padding: 1px;}

#login .face a:hover{ background: #1f4183; opacity: 1;}

#login .goog{ background: #0086f9; padding: 1px;}

#login .goog a:hover{ background: #0035f9; opacity: 1;}



#login .btnLogin {display: block; width: 156px; border: 1px solid #586982; margin: 40px auto 0; font-size: 18px;

border-radius: 30px; text-align: center; padding: 8px 0 3px; cursor: pointer; transition: all .2s linear;

line-height: 1.5;background-color:#f4f6ff ;color: #2e3347;font-family: 'Josefin Sans', sans-serif;}

#login .btnLogin:hover{color: #fff; background: #586982; opacity: 1;}



/*===============================

             MEDIA

================================*/

@media only screen and (max-width:480px){

    /* LOGIN */

    #login .txtTop{ display: block; margin: 0 auto 40px;}

    #login .txtTop a{ margin: auto;}

    #login .boxFlex{ display: block;}

    #login .import{ padding: 12px 10px;}

    #login .col{ width: 100%;}

    #login .col:first-of-type{ padding: 0; margin: 0 0 8vw; border-right: none;}

    #login .col:nth-of-type(2){ padding: 0;}

    #login .col:nth-of-type(2) .row{ margin: 0 auto 10px; max-width: 220px;}

	#login .col:nth-of-type(2) img{ height: 35px;}
	
	#login .col:nth-of-type(2) p{width: 36px;padding: 3px;}

    #login .col:nth-of-type(2) span{ width: calc( 100% - 35px);}

    

    #login .btnLogin{ font-size: 16px; padding: 5px 0 3px; width: 120px; margin: 30px auto 0;}

}

/* BOX CONTACT */
.boxContact{text-align:center; margin: 120px 0 0 0;}
.boxContact .tit{font-size:30px; margin:0 0 25px;}
.boxContact .btn p{font-size:30px; display:inline-block; vertical-align:middle; padding:0 15px;}
.boxContact .btn a{width:300px; padding:12px 0 11px; display:inline-block; vertical-align:middle; background:#fff; position:relative; font-size: 18px;}
.boxContact .btn a span{font-weight:bold; color:#0c6efc;}

@media only screen and (max-width:768px){    
    .boxContact .btn a{display: block; margin: 0 auto;}
}
@media only screen and (max-width:480px){
    .boxContact{margin: 80px 0 0 0;}    
    .boxContact .tit{font-size: 5.5vw;}
}

/* ABOUT */
#about .box1{margin: 0 auto 120px;}
#about .box1 h3{font-size: 30px; line-height: 1.3; color: #59607f; font-weight: bold; margin: 0 0 50px;}
#about .box1-left{width: 42%; padding: 5px 0 0 0;}
#about .box1-right{width: 56%;}
#about .box1-right p{margin: 0 0 30px;}
#about .box1-right p:last-of-type{margin: 0;}

#about .box2{text-align: center;}

@media only screen and (max-width:1000px){
    #about .box1-left{width: 100%; padding: 0; margin: 0 0 30px;}
    #about .box1-right{width: 100%;}
}

@media only screen and (max-width:480px){
    #about .box1 h3{font-size: 24px; margin: 0 0 30px;}
    #about .box1{margin: 0 auto 60px;}       
}


/* SERVICES */
#service .box1{margin: 0 auto 80px;}
#service .box1 h3{font-size: 30px; line-height: 1.3; margin: 0 0 50px;}
#service .box1 h3 span{font-family: 'Dancing Script', cursive; font-size: 40px; line-height: 1; display: block;}
#service .box1-left{width: 42%; padding: 5px 0 0 0;}
#service .box1-right{width: 56%;}
#service .box1-right p{margin: 0 0 30px;}
#service .box1-right p:last-of-type{margin: 0;}

#service .box2{text-align: center; padding: 0 5%; margin: 0 0 50px;}

#service .box3 .row{margin: 0 0 120px; position: relative; font-size: 16px;}
#service .box3 .box-txt{padding: 4%; width: 55%; max-width: 630px; text-align: justify;}
#service .box3 h4{font-size: 26px; color: #586982; font-weight: bold; margin: 0 0 10px;}
#service .box3 li{position: relative; padding: 0 0 0 15px;}
#service .box3 li:before{content: ''; display: block; width: 8px; height: 8px; background: #586982; border-radius: 100%; position: absolute; left: 0; top: 10px;}
#service .box3 a{display: inline-block; margin: 30px 0 0; padding: 0 80px 0 0; position: relative;} 
#service .box3 a:before{content: ''; display: block; width: 15px; height: 1px; background: #000; position: absolute; top: 9px; right: -1px; transform: rotate(45deg);}
#service .box3 a:after{content: ''; display: block; width: 65px; height: 1px; background: #000; position: absolute; top: 15px; right: 0;}
#service .box3 .img{width: 45%; position: absolute; bottom: -50px;}

#service .box3 .row.odd{background: linear-gradient(to right, rgba(255,255,255,1) 85%, rgba(255,255,255,0) 15%);}
#service .box3 .row.odd .img{right: 0;}

#service .box3 .row.even{background: linear-gradient(to left, rgba(255,255,255,1) 85%, rgba(255,255,255,0) 15%); display: flex; justify-content: flex-end;}
#service .box3 .row.even .img{left: 0;}

#service .box4 h3{font-size:30px; line-height:1; margin:0 0 35px;}
#service .box4 h4{font-size:22px; line-height:0.8; margin:0 0 25px;}
#service .box4 h4 span{font-size:28px; color:#0c6efc; font-weight:bold;}
#service .box4 ul{margin:0 auto 80px; display: flex;}
#service .box4 ul:last-of-type{margin:0 auto;}
#service .box4 li{width:16.667%; line-height:1.4; position:relative;}
#service .box4 li p:nth-of-type(1){font-size:24px; color:#0c6efc; font-weight:bold;}
#service .box4 li i{width:calc(100% - 4em); display:block; position:absolute; top:1em; left:2.5em; border-top:1px dashed #000; vertical-align:middle;}
#service .box4 li i:before{border:solid black; border-width:0 1px 1px 0; display:block; padding:5px; transform:rotate(-45deg); position:absolute; top:-6px; right:-4px; content:'';}


@media only screen and (max-width:1000px){
    #service .box1-left{width: 100%; padding: 0; margin: 0 0 30px;}
    #service .box1-right{width: 100%;}
    
    #service .box3 .row{background: none !important; height: auto !important; display: block !important;}
    #service .box3 .box-txt{width: 100%; max-width: 100%; background: #fff; padding: 5% 5% calc(30px + 7%);}
    #service .box3 .img{position: static; width: 80%; margin: -6% auto 0; max-width: 642px;}
        
    #service .box4 ul{max-width:250px; margin:0 auto 80px; display: block;}
    #service .box4 li{width:100%; margin:0 0 20px; font-size: 16px;}
    #service .box4 li p:nth-of-type(1){font-size:20px; position:absolute; left:0; line-height:1;}
    #service .box4 li p:nth-of-type(2){padding:0 0 0 32px;}
    #service .box4 li i{width:1px; height:40px; margin:10px 0 0; position:relative; border-right:1px dashed #000; border-top:none; top:inherit; left:30%;}
    #service .box4 li i:before{transform:rotate(45deg); top:auto; right:-6px; bottom:-4px;}
    
    #service .box4 h3{text-align: center;}
    #service .box4 h4{text-align: center;}    
}

@media only screen and (max-width:480px){    
    #service .box1{margin: 0 auto 50px;}   
    #service .box1-left{margin: 0 0 20px;}
    #service .box1 h3{font-size: 24px; margin: 0 0 20px;}
    #service .box1 h3 span{font-size: 32px;}
    #service .box1-right p{margin: 0 0 20px;}

    #service .box3 .row{margin: 0 0 80px;}
    #service .box3 h4{font-size: 22px;}
    #service .box3 .box-txt{text-align: left;}  
    #service .box3 li:before{width: 6px; height: 6px;}

    #service .box4 h3{font-size: 24px;}
    #service .box4 h4{font-size: 20px;}
    #service .box4 h4 span{font-size: 23px;}
}





/* Q&A */

#qa{padding: 130px 0;}

#qa .content{display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px;}

#qa-left{width: 28%;}

#qa-left h2{padding: 0 30px 60px 30px; text-align: left;}

#qa-left #subnav a{font-size: 20px; display: block; color: #586982; border-bottom: 1px dotted #b1b1b4; padding: 10px 0 10px 50px; background: url("../images/qa_ic.png") no-repeat left center/33px 25px; cursor: pointer;}

#qa-left #subnav a:hover,

#qa-left #subnav a.active{color: #0c6efc; opacity: 1;}



#qa-right{width: 63%; font-size: 18px;}

#qa-right h3{display: none;}

#qa-right .tab{display: none;}

#qa-right .tab li{margin: 0 0 50px;}

#qa-right .tab li p{position: relative; padding: 15px 30px;}

#qa-right .tab li p:before{width: 36px; height: 36px; line-height: 40px; text-align: center; border-radius: 100%; position: absolute; top: 8px; left: -18px; color: #fff; font-size: 18px; font-weight: 600;}



#qa-right .tab li p:nth-of-type(1){color: #0c6efc;}

#qa-right .tab li p:nth-of-type(1):before{content: 'Q'; background: #0c6efc;}

#qa-right .tab li p:nth-of-type(2){color: #2e3347; background: #fff; border-radius: 8px;}

#qa-right .tab li p:nth-of-type(2):before{content: 'A'; background: #586982;}

#qa-right .tab li a{font-weight: bold; text-decoration: underline;}

#qa-right .tab li a:hover{opacity: 1; color: #0c6efc;}

#qa-right #tab1{display: block;}



/* Media */

@media only screen and (max-width:1000px){

#qa{padding: 50px 0;}

    

#qa-left{width: 100%; margin: 0 0 70px;}

#qa-left h2{text-align: center; padding: 0;}

#qa-left h2 img{max-width: 120px; width: 30%;}

#qa-left #subnav{display: none !important;}



#qa-right{width: 100%;}

#qa-right .tab{display: block !important;}

#qa-right h3{display: block; font-size: 20px; color: #000; border-bottom: 1px dotted #b1b1b4; padding: 10px 0 10px 50px; background: url("../images/qa_ic.png") no-repeat left center/33px 25px; position: relative;}

#qa-right h3:after{content: ''; position: absolute; top: 20px; right: 5px; border: solid black;

border-width: 0 1px 1px 0; display: inline-block; padding: 5px;transform: rotate(45deg); -webkit-transform: rotate(45deg);}

#qa-right h3.open:after{top: 21px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}

#qa-right .tab ul{display: none; padding: 0 20px;}

#qa-right #tab1 ul{display: block;}

}

@media only screen and (max-width:480px){
    #qa-right{font-size: 16px;}    
}


/* USER INFORMATION */

#user_info{ padding: 90px 0;}
#user_info table, #user_info tbody{ width: 100%;}
#user_info .content{ max-width: 1284px; margin: auto; display: flex; flex-wrap: wrap;}
#user_info .boxL{ width: 350px; margin-right: 60px;}
#user_info .boxL .tit_user{ display: flex; line-height: 1.3; align-items: flex-end; margin: 0 0 35px;}
#user_info .boxL .tit_user span{ display: block;}
#user_info .boxL .tit_user .acc_txt{ padding: 0 0 7px; font-size: 14px;}
#user_info .boxL .tit_user .nameUser{ font-weight: bold; font-size: 20px;}
#user_info .boxL .tit_user .ico_user{ width: 62px; margin-right: 22px;}
#user_info .boxL .boxInfo .tit{ display: flex; align-items: center; cursor: pointer; line-height: 1.3; font-size: 18px; padding: 0 0 15px; margin: 0 0 15px; border-bottom: 1px #a8a8a9 dotted;}
#user_info .boxL .boxInfo .tit.active{ color: #0c6efc; cursor: default;}
#user_info .boxL .boxInfo .tit:hover{ color: #0c6efc;}
#user_info .boxL .boxInfo .tit span{ margin-right: 12px; margin-top: -0.1em;}
#user_info .boxL .boxInfo .tit span img{width: 29px;}
#user_info .boxL .boxInfo .tit:last-of-type{ margin: 0;}

#user_info .userIn{ text-align: left; width: calc( 100% - 410px);}
#user_info .userIn .titR{ font-size: 20px; padding: 0 0 10px; font-weight: bold;}
#user_info .userIn .item{ background: #fff; border-radius: 7px; padding: 40px; margin: 0 0 25px;}
#user_info .userIn .item:last-of-type{ margin: 0;}

#infoUs .item2{ display: none;}
#infoUs .item2.active{ display: block;}
#infoUs .item2 tr{ margin: 15px 0;}
#infoUs table{ font-size: 0;}
#infoUs tbody{ display: block;}
#infoUs tr{ margin: 5px 0; font-size: 16px; display: block; font-size: 0;}
#infoUs th{ width: 140px; display: inline-block; font-size: 16px;font-weight: bold;}
#infoUs td{ display: inline-block; width: calc(100% - 140px); font-size: 16px;}
#infoUs .edit{ color: #0c6efc; text-decoration: underline; display: block; margin: 10px 0 0;cursor: pointer;}
#infoUs .edit:hover{ text-decoration: none;}
#infoUs input{ width: 70%; border-radius: 5px; border: 1px solid #c3c4c4; font-size: 14px; padding: 10px 10px; font-family: 'Josefin Sans', sans-serif;}

#infoUs .tab_bor{ padding: 25px 0 0; margin: 25px 0 0; border-top: 1px #aeaeae dotted; padding-right: 10px;}
#infoUs .tab_bor span{ position: relative; padding-right: 13px; cursor: pointer;}
#infoUs .tab_bor span:after{ position: absolute; content: ''; top: 2px; right: 0; border: solid black; border-width: 0 1px 1px 0; display: inline-block; padding: 3px; transform: rotate(45deg);}
#infoUs .tab_bor span.active:after{ border-width: 1px 0 0 1px; top: 5px;}

#infoUs .btnPass{ text-align: center; color: #fff; margin: 30px 0;}
#infoUs .btnPass p{ display: inline-block; width: 176px; line-height: 1; padding: 15px 0; border-radius: 10px; cursor: pointer;}
#infoUs .btnPass p:hover{ opacity: .8;}
#infoUs .btnPass .remove{ background: #2e3347; margin-right: 15px;}
#infoUs .btnPass .update{ background: #ff5b1d;}

#infoUs .pass_hide{ display: none;}
#infoUs .pass_hide.active{ display: block;}


#infoUs label.c-check{width: 70%; height: 37px; position: relative; display: block; padding: 0;
	background: #fff;
}

#infoUs label.c-check select{background: transparent; width: 100%;position: absolute; left: 0; top: 0;
	-moz-appearance:none;
	-webkit-appearance:none;
	appearance:none;
	padding: 10px;
	cursor: pointer;
}

#infoUs .import {
    width: 100%;
    border-radius: 5px;
    border: 1px solid #c3c4c4;
    font-size: 14px;
    padding: 15px 10px;
    font-family: 'Josefin Sans', sans-serif;
}
#wrap_btn{ display: none;}

/* Media */
@media only screen and (max-width:1200px){
	#wrap_btn{ padding: 20px 0 0; display: block;width: 200px;margin: 0 auto;}
	#logOut{display: block;line-height: 44px;text-align: center; border: 1px solid #0c6efc; color: #0c6efc; font-weight: bold; height: 44px; width: 100%; font-size: 15px; border-radius: 2px; background: rgb(255, 255, 255) none repeat scroll 0% 0%;}
}

@media only screen and (max-width:1000px){
#user_info .boxL{ width: 290px; margin-right: 20px;}
#user_info .userIn{ width: calc( 100% - 310px);}
#user_info .userIn .item{ padding: 30px 15px;}
#infoUs input{ width: 100%;}
#infoUs .btnPass p{ width: 150px; padding: 12px 0;}
}
@media only screen and (max-width:768px){
#user_info .content{ display: block;}
#user_info .boxL{ width: 100%; margin: 0 0 50px;}
#user_info .userIn{ width: 100%;}
#infoUs .item1 tr{margin: 0 0 10px; border-bottom: 1px #9999 dotted; padding: 0 0 10px;}
#infoUs .item1 tr:last-of-type{ margin: 0; padding: 0; border: none;}
#infoUs .item2 tr { margin: 0 0 20px;}    
#infoUs .item2 tr:last-of-type{ margin: 0;}
#infoUs th{ display: block;}
#infoUs td{ width: 100%;}

#wrap_btn{ padding: 20px 0 0; display: block;}
#logOut{display: block;line-height: 44px;text-align: center; border: 1px solid #0c6efc; color: #0c6efc; font-weight: bold; height: 44px; width: 100%; font-size: 15px; border-radius: 2px; background: rgb(255, 255, 255) none repeat scroll 0% 0%;}
}
@media only screen and (max-width:480px){
#infoUs .btnPass p{ display: block; margin: auto;}
#infoUs .btnPass .remove{ margin: 0 auto 10px;}
#user_info .userIn .titR{ text-align: center;}    
}

/* ODER STUS */

#oder_stus.userIn .item{ padding-bottom: 70px;}
#oder_stus .bxTit li{ float: left; margin: 0 50px 0 0;}
#oder_stus .bxTit li:last-of-type{ margin: 0;}
#oder_stus .bxTit li:nth-of-type(1) .titsp{ color: #47a0d9;}
#oder_stus .bxTit{ font-weight: bold; padding: 0 0 30px; margin: 0 0 30px; border-bottom: 1px #e3e3e3 solid;}
#oder_stus .bxTit .txt1{ font-size: 16px; padding: 0 0 7px;}
#oder_stus .bxTit .titsp{ font-size: 14px;}

#oder_stus .proce{ margin: 0 0 35px; text-align: center; display: flex; flex-flow: wrap; justify-content: space-between; position: relative;}
#oder_stus .proce:after{ position: absolute; content: ''; top: 20px; z-index: 2; border-top: 7px #c9c9ca dotted; width: 95%; left: 0; right: 0; margin: auto; height: 7px;}
#oder_stus .proce li{ position: relative; padding: 55px 0 0;}
#oder_stus .proce li:before{ position: absolute; content: ''; width: 72px; height: 44px; top: 0; left: 0; right: 0; z-index: 5; margin: auto; background: url("../images/user_info/icon_4.png") no-repeat #fff;}
#oder_stus .proce li.active:before{ background: url("../images/user_info/icon_3.png") no-repeat #fff;}
#oder_stus .bxTotal{ display: flex;}
#oder_stus .bxTotal .img{  width: 100px; margin-right: 25px;}
#oder_stus .bxTotal .tit{ font-weight: bold; line-height: 1.4; padding: 0 0 4px;}
#oder_stus .bxTotal ol{ line-height: 1.4; padding: 0 0 20px; border-bottom: 1px #e3e3e3 solid; margin: 0 0 20px;}
#oder_stus .bxTotal .total_end{ font-weight: bold;}
#oder_stus .bxTotal .total_end span:nth-of-type(1){ padding-right: 50px;}

@media only screen and (max-width:768px){ 
#oder_stus .bxTit li{float: none; margin: 0 0 15px; padding: 0 0 15px; border-bottom: 1px #9999 dotted;}
#oder_stus .bxTit{ text-align: center;}
#oder_stus .bxTit li:last-of-type{ border: none; padding: 0;}  
#oder_stus .proce{ display: block;}
#oder_stus .proce:after{ display: none;}
#oder_stus .proce li{ margin: 0 0 15px; padding-bottom: 15px; border-bottom: 1px #9999 dotted;}
#oder_stus .proce li:last-of-type{ border: none;}
#oder_stus .bxTotal{ display: block;}
#oder_stus .bxTotal .img{ margin: 0 0 15px;}
}


/* HISTORY */

#history{ padding-bottom: 70px;}
#history tr{ padding: 0 0 10px; border-bottom: 1px #e3e3e3 solid; font-size: 14px; line-height: 1.4;}
#history tr:last-of-type{ border: none; padding: 0;}
#history tr:nth-of-type(1) th{ font-size: 16px; color:#586982 ;}
#history th, #history td{ padding: 15px 5px; vertical-align: top;}
#history th{ font-weight: bold; color:#47a0d9;}
#history th:nth-of-type(3){ width: 36%;}
#history th:nth-of-type(4){ width: 100px;}

@media only screen and (max-width:1300px){
#history.userIn .item{ padding: 30px 15px;}
}

@media only screen and (max-width:768px){
#history tr{ padding: 0 0 15px; margin: 0 0 15px; display: block;}
#history tr:nth-of-type(1){ display: none;}
#history th, #history td{ display: block; position: relative; padding: 10px 5px 10px 130px;}
#history th:before, #history td:before{ position: absolute; left: 0;}
#history th:nth-of-type(1):before{ content: 'Mã sản phẩm';}    

#history td:nth-of-type(1):before{ content: 'Ngày mua';}
#history td:nth-of-type(2):before{ content: 'Tên sản phẩm';}
#history td:nth-of-type(3):before{ content: 'Tổng tiền';}
#history td:nth-of-type(4):before{ content: 'Tình trạng';}
}


header #user{position: absolute; z-index: 999999; right: 0; top: 50%; border-left: 1px solid #a8a8a8; border-right: 1px solid #a8a8a8; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
header #user > a{padding: 0 13px;}
header #user .name{padding: 0 25px 0 20px; position: relative;}
header #user .name:after{content: ''; display: block; width: 16px; height: 90px;
background: url(../images/ic_arr2.png) right center no-repeat;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
header #user #login{
position: absolute;
width: 250px;
left: 50%;
top: -1000%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
header #user #login ul{margin: 15px 0 0; padding: 10px 23px; width: 100%;}
header #user #login li{overflow:hidden; height: 40px; transition:.25s; width: 100%; text-align: center;}
header #user #login li a{
display: block;
width:100%;
height:100%;
line-height:40px;
padding: 0 0 0 40px;
border-bottom: 1px solid #e9e9e9;
text-align: left;
}
header #user #login li:last-of-type a{border-bottom: none;}
header #user #login li:first-of-type a{
background: url(../images/avatar2.png) left center no-repeat;
}
header #user #login li:nth-of-type(2) a{
background: url(../images/ic_box.png) left center no-repeat;
}

header #user:hover #login{
	top: 100%;
}

header #user:hover #login ul{
background: #fff;
-webkit-box-shadow: 0px 0px 9px 0px rgba(12, 110, 252, 0.35);
-moz-box-shadow: 0px 0px 9px 0px rgba(12, 110, 252, 0.35);
box-shadow: 0px 0px 9px 0px rgba(12, 110, 252, 0.35);
}
header #user:hover #login li{overflow:visible;}
header #user #login li a#btnlogout{
line-height: 30px;
width: 125px;
margin: 15px auto 0;
display: block;
border: 1px solid #47a0d9;
padding: 0;
text-align: center;
height: auto;
border-radius: 30px;
}

@media only screen and (max-width:1600px){
header #user #login{width: 210px;}
header #user #login ul{padding: 15px;}
}

@media only screen and (max-width:1200px){
header #user{display: none;}

#gnav ul > li.gnav-item1 .regR .name{padding: 0 0 0 10px; vertical-align: middle; line-height: 32px;}
}



#password .boxFlex{
	justify-content: center;
}
#password .txtTop{margin-bottom: 20px;}
#password .col:first-of-type{border: none;padding: 0;}


.title_common{
	background-color: #fff;
	padding-top: 30px; font-size: 16px;
}
.title_common p{
	color: #2e3347;
	font-size: 20px;
	padding: 30px 5px;
}