@charset "UTF-8";
/* CSS Document */

/*=======================================================================
=============================--CSS FILE--================================
=======================================================================*/

/*======================================================================
============================GENERAL FORMAT==============================
======================================================================*/

/*====================Embed Font====================*/

@font-face {
	font-family:'BebasNeue-Bold';
	src: url('../../font/BebasNeue/BebasNeue-Bold.eot')format('eot'),
			 url('../../font/BebasNeue/BebasNeue-Bold.woff')format('woff'),
	     url('../../font/BebasNeue/BebasNeue-Bold.ttf')format('truetype');
}

@font-face {
	font-family:'BebasNeue-Book';
	src: url('../../font/BebasNeue/BebasNeue-Book.eot')format('eot'),
			 url('../../font/BebasNeue/BebasNeue-Book.woff')format('woff'), 
			 url('../../font/BebasNeue/BebasNeue-Book.ttf')format('truetype');
}

@font-face {
	font-family:'BebasNeue-Light';
	src: url('../../font/BebasNeue/BebasNeue-Light.eot')format('eot'),
	     url('../../font/BebasNeue/BebasNeue-Light.woff')format('woff'),  
			 url('../../font/BebasNeue/BebasNeue-Light.ttf')format('truetype');
}

@font-face {
	font-family:'BebasNeue-Regular';
	src: url('../../font/BebasNeue/BebasNeue-Regular.eot')format('eot'),
			 url('../../font/BebasNeue/BebasNeue-Regular.woff')format('woff'),
			 url('../../font/BebasNeue/BebasNeue-Regular.ttf')format('truetype');  
}

@font-face {
	font-family:'BebasNeue-Thin';
	src: url('../../font/BebasNeue/BebasNeue-Thin.eot')format('eot'),
			 url('../../font/BebasNeue/BebasNeue-Thin.woff')format('woff'),
			 url('../../font/BebasNeue/BebasNeue-Thin.ttf')format('truetype');  
}

@font-face {
	font-family:'Gidole-Regular';
	src: url('../../font/Gidole/Gidole-Regular.eot')format('eot'), 
			 url('../../font/Gidole/Gidole-Regular.woff')format('woff'),
			 url('../../font/Gidole/Gidole-Regular.ttf')format('truetype'); 
}

@font-face {
	font-family:'UTM A&S Heartbeat';
	src:url('../../font/Heartbeat/UTMA&SHeartbeat.eot')format('eot'), 
	    url('../../font/Heartbeat/UTMA&SHeartbeat.woff')format('woff'),
			url('../../font/Heartbeat/UTMA&SHeartbeat.ttf')format('truetype'); 
}

* {
			 box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

/*====================header====================*/

.logoArea a img {
	position:absolute;
	        transform:translateX(-50%);
	   -moz-transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	left:50%;
}

/*=====mainMenu=====*/
	
	.mainMenu {
		position:relative;
		height:2.3rem;
		border-bottom:solid 0.064rem #ccc;
	}
	
	.menu_color {
		position:absolute;
		transform:translate(-50%,-50%);
		left:50%;
		top:50%;
	}

	#primary_nav_wrap ul {
		list-style:none;
		position:relative;
		float:left;
		margin:0;
		padding:0;
	}
	
	#primary_nav_wrap ul a
	{
		display:block;
		color:#000;
		text-decoration:none;
		font-size:1.5rem;
		line-height:2rem;
		padding:0 1rem;
		font-family:BebasNeue-Regular;
		font-size:1.5rem;
	}
	
	#primary_nav_wrap ul li {
		position:relative;
		float:left;
		margin:0;
		padding:0;
		z-index:1;
		border-bottom:solid medium #fff;
	}
	
	#primary_nav_wrap ul li:hover, #primary_nav_wrap ul li:active
	{
		border-bottom:solid medium #000;
	}
	
	#primary_nav_wrap ul ul
	{
		display:none;
		position:absolute;
		margin-top:.2rem;
		background:#fff;
	}
	
	#primary_nav_wrap ul ul .liMen {
		width:5.3rem;
	}
	
	#primary_nav_wrap ul ul li:hover {
		background:#CCC;
		border-bottom:solid medium #ccc;
	}
	
	#primary_nav_wrap ul ul .liMen:hover {
		border-bottom:solid medium #ccc;
	}
	
	#primary_nav_wrap ul ul li:hover {
		border-bottom:solid medium #fff;
	}
	
	#primary_nav_wrap ul ul ul li
	{
		float:none;
		width:15rem;
	}
	
	#primary_nav_wrap ul ul a
	{
		line-height:120%;
		padding:10px 15px;
	}
	
	#primary_nav_wrap ul ul ul
	{
		top:0;
		left:100%;
		margin-top:0;
	}
	
	#primary_nav_wrap ul li:hover > ul
	{
		display:block;
	}
	
/*=====showMenu=====*/
	
	.showMenu {
		position:fixed !important;
		height:2.3rem;
		border-bottom:solid 0.064rem #ccc;
		background:#fff;
		z-index:999;
	}
	
	.menu_color {
		position:absolute;
		transform:translate(-50%,-50%);
		left:50%;
		top:50%;
	}

	#primary_nav_wrap ul {
		list-style:none;
		position:relative;
		float:left;
		margin:0;
		padding:0;
	}
	
	#primary_nav_wrap ul a
	{
		display:block;
		color:#000;
		text-decoration:none;
		font-size:1.5rem;
		line-height:2rem;
		padding:0 1rem;
		font-family:BebasNeue-Regular;
		font-size:1.5rem;
	}
	
	#primary_nav_wrap ul li {
		position:relative;
		float:left;
		margin:0;
		padding:0;
		z-index:1;
		border-bottom:solid medium #fff;
	}
	
	#primary_nav_wrap ul li:hover
	{
		border-bottom:solid medium #000;
	}
	
	#primary_nav_wrap ul ul
	{
		display:none;
		position:absolute;
		margin-top:.2rem;
		background:#fff;
	}
	
	#primary_nav_wrap ul ul .liMen {
		width:5.3rem;
	}
	
	#primary_nav_wrap ul ul li:hover {
		background:#CCC;
		border-bottom:solid medium #ccc;
	}
	
	#primary_nav_wrap ul ul .liMen:hover {
		border-bottom:solid medium #ccc;
	}
	
	#primary_nav_wrap ul ul li:hover {
		border-bottom:solid medium #fff;
	}
	
	#primary_nav_wrap ul ul ul li
	{
		float:none;
		width:15rem;
	}
	
	#primary_nav_wrap ul ul a
	{
		line-height:120%;
		padding:10px 15px;
	}
	
	#primary_nav_wrap ul ul ul
	{
		top:0;
		left:100%;
		margin-top:0;
	}
	
	#primary_nav_wrap ul li:hover > ul
	{
		display:block;
	}
	
/*========row for body=========*/
	
	/*title*/
	
	.title {
		position:relative;
		height:10rem;
		margin-top:1.25rem;
	}
	
	.title ul {
		position:absolute;
		transform:translate(-50%,-50%);
		left:50%;
		top:50%;
		margin:0;
		padding:0;
		list-style:none;
	}
	
	.title1 {
		margin:0;
		padding:0;
		text-align:center;
		font-family:BebasNeue-Bold;
		font-size:2rem;
		line-height:3rem;
	}
	
	.title2 {
		margin:0;
		padding:0;
		text-align:center;
		font-family:Gidole;
		
	}

	/*gioHang*/

.gioHang {
	margin:1rem 0 2rem 0;
}

.shpBag_pic {
	width:5rem;
	height:5rem;
	overflow:hidden;
}

.danhsach {
	font-size:0.8rem;
	/*width:auto;*/
	margin-top:0.5rem;
}
.danhsach td { 
	padding:0.5rem;
}
.danhsach tr:first-child {
	font-weight:bold;
	/*background:#ccc;*/
	color:#333;
}
.spGioHang {
	width:3rem;
	height:4rem;
	color:#CE7476;
}

/*====================giaoHang====================*/

#DI p {
	text-align:center;
	font-family:BebasNeue-Bold;
	font-size:2rem;
}

.giaoHang {
	margin:1rem 0 1rem 0;
	position:relative;
	height:45rem;
}

.giaoHang fieldset {
	position:absolute;
	transform:translateX(-50%);
	left:50%;
	border:none;
}

.giaoHang input, textarea {
	border:solid 0.064rem #999;
	padding:.3rem;
	box-shadow:.5px .5px 3px #999;
	width:20rem;
}

.giaoHang fieldset form div input {
	width:5rem;
	cursor:pointer;
}

.frmLH {
	margin-left:1rem;
}

.frmLH label, .frmLH textarea {
	display:block;
	margin:0.5rem 0;
}
.frmLH textarea {
	color:#aaa;
	width:20rem;
	height:8rem;
}
.frmLH textarea:focus {
	color:#000;
}
.frmLH label:not(.error):after {
	content:' *';
	color:red;
}
.frmLH label.error {
	margin-left:0.8rem;
	display:inline-block;
	color:red;
}
	
/*==========row for footer==========*/

	/*=====row for signUp=====*/
	
	footer .signUp {
		font-family:BebasNeue-Light;
		font-size:1.5rem;
		line-height:2.25rem;
		color:#FFF;
	}
	
	.signUp {
		background-color:#333;
	}
	
	.signUp .strong {
		font-family:BebasNeue-Regular;
	}
	
	.footer-form__submit {
		vertical-align:middle;
	}
	
	/*place for email*/
	
	footer .signUp .footer-form__input {
    position: relative;
    display: inline-block;
    width: 8rem;;
    height: 1.5rem;
    background: #454C51 none repeat scroll 0% 0%;
    color: #FFF;
    font-family:Gidole;
	}
	
	input[type="text"],
	input[type="email"],
	input[type="password"] {
		line-height: inherit;
	}
	
	.signUp .footer-form {
		text-align:left;
	}
	
	input {
    border: none;
    padding:0 0.25rem;
	}
	
	/*place for submit button*/
	
	footer .footer-form__submit {
    				transition: all 0.3s ease 0s;
			 -moz-transition: all 0.3s ease 0s;
		-webkit-transition: all 0.3s ease 0s;
    position: relative;
    display: inline-block;
    width: 4rem;
    height: 1.5rem;
    border: thin solid #fff;
    background: transparent none repeat scroll 0% 0%;
    color: #fff;
    text-align: center;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-family: BebasNeue-Bold;
    cursor: pointer;
    letter-spacing: 0.064rem;
		margin-left:1rem;
	}
	
	footer .footer-form__input {
		vertical-align:middle
	}
	
	footer .footer-form__submit:hover {
		background-color:#fff;
		color:#000;
	}

	/*=====row for real_footer=====*/
	
	.footer ul li ul li a {
		text-decoration:none;
		color:#000;
	}
	
	#footer_small_1 ul li div ul li a {
		text-decoration:none;
		color:#000;
	}

/*======================================================================
============================MOBILE VERSION==============================
======================================================================*/
@media only screen and (max-width: 40em) {
	
	/*==========Row for logoArea + smallSch + smallMenu==========*/
	
	/*=====logoArea=====*/
	header {
		background-color:#000000;
		height:6.5rem;
	}
	
	.logoArea {
		height:6.188rem;
	}
	
	/*====================mainMenu-SMALL====================*/
	.menu3Vach {
		background-color:#E333A5;
		margin-left:87%;
	}
	
	.hamburgerMenu {
		position:absolute;
		top:2.3%;
		height:3rem;
		width:3rem;
		/*background:#C14A4C;*/
		/*border:0.05rem solid #fff;*/	
	}
	
	.hamburgerMenu i {
		text-align:center;
		line-height:2.5rem;
		margin:0 0 0 0.6rem;
	}
	
	.hamburgerMenu a {
		color:#fff;
		font-size:2.5rem;
		text-decoration:none;
	}
	
	.hamburgerMenu a:hover {
		color:#EEEEEE;
	}
	
	.mainMenuHolder {
		/*background:#A0494B;*/
		position:relative;
		overflow:hidden;
		min-height:100%;
	}
	
	.smallMainMenu {
		background:rgba(51,51,51,1);
		position:absolute;
		top:0;
		width:50%;
		margin-left:4rem;
		/*right:-50%;*/
		z-index:999;
	}
	
	.smallMainMenu ul {
		list-style-type:none;
		padding:0.5rem;
	}
	
	.smallMainMenu ul li {
		/*background:#FD1C1F;*/
		margin:0.5rem 0 0 0.3rem;
		border-bottom:0.05rem dashed #fff;
		width:80%;
	}
	
	.smallMainMenu ul li a {
		text-decoration:none;
		color:#fff;
		font-family:'BebasNeue-Regular';
		font-size:1.250rem;
		-webkit-transition:all .5s ease;
			 -moz-transition:all .5s ease;
				-ms-transition:all .5s ease;
						transition:all .5s ease;
	}
	
	.smallMainMenu ul li a:hover {
		color:#eee;
		/*border-bottom:0.1rem #fff solid;*/
	}
	
	.smallMainMenu ul li .titleSM {
		margin-left:1rem;
	}
	
	.smallMainMenu ul li .contentSM {
		font-family:'BebasNeue-Book';
		margin-left:2rem;
	}
	
	/*=====smallSch=====*/
	
	.smallSch {
		height:6.188rem;
		position:relative;
	}
	
	.smallSch a i {
		font-size:2.5rem;
		position:absolute;
		transform:translate(-50%,-50%);
		left:50%;
		top:50%;
	}
	
	.smallSch a {
		text-decoration:none;
		color:#eee;
	}
	
	.smallSch a:hover {
		color:#999;
	}
	
	/*=====smallMenu=====*/
	
	.smallMenu {
		height:6.188rem;
	}
	
	.smallMenu a i {
		font-size:2.5rem;
		position:absolute;
		transform:translate(-50%,-50%);
		left:50%;
		top:50%;
	}
	
	.smallMenu a {
		text-decoration:none;
		color:#eee;
	}
	
	.smallMenu a:hover {
		color:#999;
	}
	
	/*new*/
	
	/*==========Main Menu Area==========*/
	.smallMenu {
		height:100%; /*collapse parent*/
	}
	.smallMenu ul {
		position:absolute;
		top:50%;
		right:1rem; /*from right a little bit*/
		transform:translateY(-50%);
	}
	.smallMenu li {
		margin:0 0 0 0.3rem;
	}
	.smallMenu a, smallMenu a:hover {
		color:#fff;
		font-size:1.6rem;
	}
	
	/*==========row for footer==========*/
	
	/*=====real_footer=====*/
	
	#footer_small_1 {
		padding-top:0.5rem;
		border-top:solid 0.25rem #000;
		position:relative;
		height:15rem;
		margin-top:0.5rem;
	}
	
	#footer_small_1 ul li {
		list-style:none;
		font-family:Gidole;
	}
	
	#footer_small_1 ul li .social h5 {
		font-family:BebasNeue-Bold;
		font-size:2.5rem;
		position:absolute;
		transform:translateX(-50%);
		left:50%;
	}
	
	#footer_small_1 ul .text1 {
		position:absolute;
		transform:translateX(-50%);
		left:50%;
		margin-top:3.5rem;
	}
	
	#footer_small_1 ul .text2 {
		position:absolute;
		transform:translateX(-50%);
		left:50%;
		margin-top:5rem;
	}
	
	#footer_small_1 ul li .small_footer_fb_menu {
		position:absolute;
		transform:translateX(-50%);
		left:50%;
		margin-top:8rem;
		width:70%;
	}
	
	#footer_small_1 ul li .small_footer_fb_menu ul li {
		font-size:2.5rem;
		margin-left:2rem;
		border:solid 0.064rem #000;
		padding:0 1.2rem;
	}
	
}

/*======================================================================
============================TABLET VERSION==============================
======================================================================*/
@media only screen and (min-width: 40.063em) {
	
	.logoArea {
		height:149px;
		margin:0.5rem 0 0 0;
	}
	
header {
	position:relative;
}

	/*===============gioHang-Medium===============*/
	.danhsach {
		width:44rem;
	}
	
	.menu_color {
		width:35.8rem;
	}
	
	/*==========row for footer==========*/

	/*=====row for signUp=====*/

	/*=====row for real_footer=====*/
	
	footer div ul {
		list-style:none;
	}
	
	footer div ul li a {
		text-decoration:none;
	}
	
	footer .borderLeft {
		border-left:solid 0.063rem #999;
	}
	
	.footer {
		margin-top:1.5rem;
		margin-bottom:1.5rem;
	}
	
	.footer h5 {
		font-family:BebasNeue-Bold;
		font-size:1.2rem;
	}
	
	.footer ul li ul li a {
		font-family:Gidole;
		font-size:0.9rem;
	}
	
	.footer ul li ul li {
		font-family:Gidole;
		font-size:0.9rem;
	}
	
	.footer ul li ul li a i {
		font-size:2rem;
	}
	
}

/*======================================================================
==============================PC VERSION================================
======================================================================*/
@media only screen and (min-width: 64.063em) {
	
	/*==========Row for header==========*/
	
	.logoArea {
		height:149px;
	}
	
	/*row for body*/
	
	/*===============gioHang-Large===============*/
		.danhsach {
			width:59rem;
		}
	
	/*==========Row for footer==========*/
	
	/*=====Row for signUp=====*/
	
	.footerForm form {
		margin-left:7rem;
	}
	
	/*=====Row for real footer=====*/
	
	footer div ul {
		list-style:none;
	}
	
	footer div ul li a {
		text-decoration:none;
	}
	
	footer .borderLeft {
		border-left:solid 0.063rem #999;
	}
	
	footer .borderLeft_site {
		border-left:solid 0.063rem #999;
	}
	
	.footer {
		margin-top:1.5rem;
		margin-bottom:1.5rem;
	}
	
	.footer h5 {
		font-family:BebasNeue-Bold;
		font-size:1.2rem;
	}
	
	.footer ul li ul li a {
		font-family:Gidole;
		font-size:0.9rem;
	}
	
	.footer ul li ul li {
		font-family:Gidole;
		font-size:0.9rem;
	}
	
	.footer ul li ul li a i {
		font-size:2rem;
	}
		
}
