// Color
@color-black     : #333333;
@color-gray      : #aaaaaa;
@color-gray-hover: #ECECEC;
@color-white     : #ffffff;
@color-gold      : #ffd700;
@color-gold-hover: #DBBB0A;

// no Responsive
@width           : 1170px;
@full-width      : 100%;


// Public
.margin-top-0     { margin-top: 0px; }
.margin-top-5     { margin-top: 5px; }
.margin-top-10    { margin-top: 10px; }
.margin-top-15    { margin-top: 15px; }
.margin-top-20    { margin-top: 20px; }
.margin-top-30    { margin-top: 30px; }
.margin-top-40    { margin-top: 40px; }
.margin-top-50    { margin-top: 50px; }
.margin-bottom-0  { margin-bottom: 0px; }
.margin-bottom-5  { margin-bottom: 5px; }
.margin-bottom-10 { margin-bottom: 10px; }
.margin-bottom-15 { margin-bottom: 15px; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-bottom-30 { margin-bottom: 30px; }
.margin-bottom-40 { margin-bottom: 40px; }
.margin-bottom-50 { margin-bottom: 50px; }
.padding-top-0    { padding-top: 0px; }
.padding-top-5    { padding-top: 5px; }
.padding-top-10   { padding-top: 10px; }
.padding-top-15   { padding-top: 15px; }
.padding-top-20   { padding-top: 20px; }
.padding-top-30   { padding-top: 30px; }
.padding-top-40   { padding-top: 40px; }
.padding-top-50   { padding-top: 50px; }
.padding-bottom-0 { padding-bottom: 0px; }
.padding-bottom-5 { padding-bottom: 5px; }
.padding-bottom-10{ padding-bottom: 10px; }
.padding-bottom-15{ padding-bottom: 15px; }
.padding-bottom-20{ padding-bottom: 20px; }
.padding-bottom-30{ padding-bottom: 30px; }
.padding-bottom-40{ padding-bottom: 40px; }
.padding-bottom-50{ padding-bottom: 50px; }
.padding-left-0   { padding-left: 0px; }
.padding-right-0  { padding-right: 0px; }
.zero             { margin: 0px; padding: 0px; }

// Function
.zeroPadding() {
	padding: 0;
}
.zeroMargin() {
	margin: 0;
}
.zero() {
	.zeroPadding();
	.zeroMargin();
}
.padding-top-bottom(@padding: 0px) {
	padding-top   : @padding;
	padding-bottom: @padding;
}
.padding-left-right(@padding: 0px) {
	padding-left : @padding;
	padding-right: @padding;
}
.transition(@ms: 300ms) {
	-webkit-transition: all @ms;
	   -moz-transition: all @ms;
	    -ms-transition: all @ms;
	     -o-transition: all @ms;
	        transition: all @ms;
}
.full-width() {
	width    : 100%;
	min-width: @width + 30;
}


// Base
body {
	background-color: #f7f7f7;
	color           : @color-black;
}
a {
	cursor: pointer;
	color : @color-white;
	&:hover {
		color          : @color-gold;
		text-decoration: none;
	}
}
.container {
	width: @width;
}
.container-fluid {
	.zero();
	.full-width();
}
.btn-main {
	.transition(200ms);
	background-color: @color-gold;
	color           : @color-black;
	&:hover {
		background-color: @color-gold-hover;
	}
}
.pagination {
	.zero();
}


// Static
body.bg-contrast {
	background-color: @color-black;
	color           : @color-white;
	.navbar-nav li a {
		color: @color-white;
		&.active, &:hover {
			a {
				background-color: rgba(255, 255, 255, 0.3);
			}
		}
	}
}

.navbar {
	.full-width();
	@padding-top-bottom: 30px;
	@font-size         : 13px;

	.zero();
	background-color   : rgba(255, 255, 255, 0.4);
	border             : none;

	.navbar-contact {
		.full-width();
		background-color: #f7f7f7;
		color           : @color-gray;
		.padding-top-bottom(2px);
		ul.navbar-contactus {
			margin-bottom: 0px;
			li {
				.padding-left-right(10px);
				font-size: @font-size;
				&:first-child {
					padding-left: 0px;
				}
			}
		}
		ul.navbar-language {
			.zero();
			float       : right;
			display     : inline-block;
			margin-right: 10px;
			margin-left : 20px;
			margin-right: 10px;
			li {
				.zero();
				a {
					padding         : 0 3px;
					color           : @color-gray;
					font-weight     : bold;
					background-color: #f7f7f7;
				}
				&.active_lan, &:hover {
					a {
						color: @color-gold;
					}
				}
			}
		}
		ul.navbar-social {
			display: inline-block;
			li {
				a {
					font-size: @font-size;
					color    : @color-gray;
					background-color: #f7f7f7;
				}
				&:hover {
					a {
						color: @color-gold;
					}
				}
			}
		}
	}
	.navbar-header {
		float  : left;
		display: inline-block !important;
		.navbar-brand {
			.padding-top-bottom(@padding-top-bottom);
		}
	}
	.navbar-nav {
		float: right;
		@media (max-width: 768px) {
			float  : right;
			display: inline-block !important;
			.zero();
			li {
				display: block;
				float  : left;
			}
		}
		.transition(200ms);
		li {
			border-right: 1px solid rgba(33, 33, 33, 0.3);
			a {
				.padding-top-bottom(@padding-top-bottom);
				.padding-left-right(15px);
				color: @color-black;
			}
			&.active, &:hover, &.active:hover {
				a {
					background-color: rgba(255, 255, 255, 0.6);
					color           : @color-black;
				}
			}
			&:first-child {
				border-left: 1px solid rgba(33, 33, 33, 0);
			}
			&:last-child {
				border-right: 1px solid rgba(33, 33, 33, 0);
			}
		}
	}


	&.navbar-static {
		background-color: @color-white;
		float: right;
		@media (max-width: 768px) {
			float  : left;
			display: inline-block !important;
			.zero();
			li {
				display: block;
				float  : left;
			}
		}
		li {
			border-right: 1px solid #f7f7f7;
			a {
				.transition(200ms);
			}
			&.active, &:hover, &.active:hover {
				a{
					background-color: @color-gold;
					color           : @color-white;
				}
			}
		}
	}
}

.content-slide {
	.zero();
	.row {
		.zero();
		.col-xs-12 {
			.zeroPadding();
			#owl, #owl-main {
				.zeroPadding();
				width    : 100%;
				min-width: @width;
				.item {
					text-align: center;
					width     : 100%;
					min-width : @width;
					img {
						max-height: 720px;
						display   : block;
						width     : 100%;
						min-width : @width;
						height    : auto;
					}
				}
			}
		}
	}
	&.slide-sub {
		#owl {
			.item {
				img {
					max-height: 300px;
				}
			}
		}
	}
}


.main-content {
	// min-height: 313px;
}

.post {
	position: relative;
	img {
		width:100%;
	}
	.post-caption {
		.zero();
		.padding-top-bottom(10px);
		.padding-left-right(15px);
		position        : absolute;
		bottom          : 0;
		font-size       : 14px;
		text-align      : right;
		background-color: rgba(0, 0, 0, 0.5);
		width           : 360px;
	}
}

.gallery-image {
	img {
		border: 2px solid @color-gold;
	}
	h4 {
		color       : @color-gray;
		padding-left: 20px;
	}
}

.nav-pills {
	li {
		margin       : 0px !important;
		border-bottom: 1px solid @color-gray;
		a {
			.padding-top-bottom(10px);
			.padding-left-right(5px);
			color: @color-black;
		}
		h4 {
			.padding-left-right(5px);
		}
		ul.nav-sub {;
			.zero();
			li {
				.zero();
					.padding-top-bottom(5px);
				border-bottom: 0px;
				list-style   : none;
				width        : 100%;
				box-sizing   : border-box;
				padding-left : 20px;
				a {
					text-decoration: none;
					font-weight    : 300;
					width          :100px;
					box-sizing     :  border-box;
					font-size      : 14px;
					.zero();
					.padding-top-bottom(10px);
					.padding-left-right(5px);
					padding-right: 140px;
				}
				&:hover {
					background-color: @color-gray-hover;
				}
			}
		}
		&:hover {
			a {
				background-color: none;
			}
			// a {
			// 	border-radius: 0;
			// 	color        : @color-gold;
			// }
			// ul.nav-sub {
			// 	li {
			// 		a {
			// 			color: @color-black;
			// 		}
			// 	}
			// }
		}
		&.nav-title {
			.zero();
			border-top: 2px solid @color-gold-hover;
			h3 {
				@padding      : 15px;
				.zero();
				.padding-top-bottom(15px);
				padding-top   : @padding;
				padding-bottom: @padding - 5;
			}
		}
	}
}

.content-fillter {
	border-top: 2px solid @color-gold-hover;
}

.content-product {
	a {
		color: @color-black;
		h4, p {
			.transition(250ms);
			color: @color-black;
		}
		&.cart-add {
			i {
				.transition(250ms);
				color: @color-black;
				&:hover {
					color: @color-gold;
				}
			}
		}
		&:hover {
			h4, p {
				color: @color-gray;
			}
		}
	}
}

.footer-bar {
	background-color: @color-black;
	color           : @color-white;
	border-top      : 1px solid @color-gray;
	#copyright-text {
		font-size: 11px;
	}
	ul.list-inline {
		li {
			.padding-left-right(15px);
			font-size: 12px;
		}
	}
}