/*-----------------------------------------------*/
/*-------------------- color --------------------*/
/*-----------------------------------------------*/
@white: #ffffff;
@black: #191919;
@l_black: #333333;
@gray: #c6c6c6;
@l_gray: #eeeeee;
@d_gray: #afafaf;
@dd_gray: #777777;
@bg_gray: #DDDDDD;
@red: #CC1E1E;
@d_red: #FF0000;
@yellow: #F6FF00;
@l_yellow: #ffe6b5;
@d_yellow: #bb8210;
@l_blue: #96F0FC;
@zalo_blue: #0068FF;
@blue: #238ADB;
@d_blue: #163b84;
@dd_blue: #3B5998;
@text_blue: #0085B2;
@green: #59b559;
@l_green: #d2edd2;
@d_green: #287528;
@violet: #8243c4;
@d_violet: #58278c;
@sky: #75d9f7;
@l_sky: #c9effb;
@brown: #926834;
@pink: #fdc0c0;


header{
	.header_contents{
		h1{
			padding-left:20px;
		}
	}
}

/*-----footer special-----*/
.footer_special{
	position: fixed;
    bottom: 0;
    /* width: 100%; */
    right: 0;
    left: 0;
    z-index: 40;

	.footer_links{
		background: #000;

		.contact_link_note{
			width: 100%;
			display: block;
			text-align: center;
			/* font-size: 40px; */
			font-size:30px;
			/* padding: 50px 0; */
			padding: 20px;
			color: @yellow;
			background: @text_blue;
			font-family: 'Playfair Display', serif;
		}
		.footer_link_list{
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			border-top: 1px solid @white;

			.link_button{
				display: flex;
				height: 80px;
				align-items: center;
    			justify-content: center;

				img{
					width: 50px;
					height: auto;
				}
			}
			.mail{
				background: @text_blue;
			}
			.face{
				background: @dd_blue;
			}
			.zalo{
				background: @zalo_blue;
			}

			a:hover{
				opacity:0.8;
			}
		}
	}
}
/*---article blog page---*/
.article_container{

}
.blog_header{
	padding-bottom:50px;
	border-bottom:1px solid @blue;

	time{
		font-size:16px;
		color:@dd_gray;
	}
	h1{
		font-size:24px;
		font-weight: bold;
	}
	ul{
		display:flex;
		flex-wrap:wrap;
		gap:5px 10px;
		margin-top:20px;

		li{
			padding:5px 10px;
			font-size:12px;
			border:1px solid @blue;

			a{
				color:@blue;
			}
		}
	}
}
.blog_body{
	margin-top: 50px;
	> a{
		color: @blue;
		text-decoration:none;
		font-weight:bold;
	}
	> p{
		line-height:2;
	}
	> img{
		text-align:center;
		display:block;
		margin:0 auto 20px;
		width:100%;
		max-width:350px;
	}
	> time{
		float:right;
		padding-top:10px;
	}
	pre{
		margin: 10px 0;
		padding: 10px;
		/* background-color: #eeeeee; */
		border-top: 1px solid @black;
		border-bottom: 1px solid @black;
		text-align: center;
		font-weight: 600;
		text-shadow: rgba(0, 0, 0, 0.15) 2px 2px 0px;
	}
	blockquote{
		margin:20px 0;
		padding:2px 0 2px 10px;
		border-left:5px solid @blue;
	}
	.table {
		width: 100%;
		max-width: 100%;
		margin-bottom: 20px;

		td {
			border: 1px solid #ddd;
			padding: 8px;
			vertical-align: top;
		}
	}
}

.blog_container{
	display:grid;
	gap:50px;
}
.blog_row{
	display:grid;
	gap:50px;

	&.col2{
		grid-template-columns:repeat(2, 1fr);
	}
	/* &.col3{
		grid-template-columns:repeat(3, 1fr);
	}
	&.col4{
		grid-template-columns:repeat(4, 1fr);
	} */
}
.blog_column{
	h2{
		padding: 5px 0 5px 10px;
		font-size: 24px;
		border-bottom: 1px solid @blue;
		color: @blue;
		font-weight: bold;
	}
	h3{
		padding: 5px 0 5px 15px;
		font-size: 22px;
		border-left: 4px solid @blue;
		border-bottom: 1px solid @blue;
		color: @blue;
		font-weight: bold;
	}
	p{
		font-size:16px;
		line-height:2;
	}
	a{
		text-decoration:underline;
	}
	.syntaxhighlighter{
		margin:0 !important;
		padding:10px 0 !important;
		border:1px solid @l_gray;
	}
	img{
		display:block;
		width:100%;
	}
	iframe{
		display:block;
		width:100%;
		height:400px;
	}
	hr{
		margin:50px 0;
		border:none;
		border-top:2px dotted @blue;
	}
}
.blog_footer{
	padding-top:50px;
	border-top:1px solid @blue;

	h2{
		margin-bottom:10px;
		font-size:20px;
	}
}
.related_container{
	display:grid;
	gap:15px;

	a{
		display:flex;
		align-items:center;
		gap:15px;
		padding:15px;
		border:1px solid @blue;

		time{
			font-size:13px;
			color:@gray;
		}
		h3{
			font-size:16px;
			color:@black;
		}
	}
}

.relate_area{
	.relate_item{
		border:1px solid @blue;
		margin-bottom:15px;
		padding:0 10px 10px;


		h3{
			margin:10px 0;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
		}

		a{
			color:#000;
		}

		.item{
			li:first-child{
				color:@black;
				border-right:1px solid @blue;
				padding-left:0;
			}

			li{
				display:inline-block;
				padding:0 5px;

				a{
					color:@blue;
				}
			}
		}
	}
}
/*-----------------------------------------------*/
/*------------------- lp page -------------------*/
/*-----------------------------------------------*/
.main_container{
	padding-top: 100px;
	font-family: 'Nunito', sans-serif;
	line-height: normal;

	h1, h2, h3, h4, .title {
		font-family: 'Playfair Display', serif;
	}
	img{
		width: 100%;
	}
}
.kv_section{
	background-image: url("/images/lp_images/kv_bg_img.webp");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
	margin-bottom: 100px;
}
.kv_contents{
	width: 100%;
	display: flex;
	justify-content: space-between;	
	padding: 39px 50px 40px 46px;

	.kv_title{
		padding-top: 81px;

		.title{
			font-size: 60px;
			font-weight: bold;
			margin-bottom: 30px;
		}
		.detail{
			font-size: 34px;
		}
	}
	.kv_img{
		max-width: 400px;
	}
}
.lp_page{
	padding-bottom:200px;
	
	.lp_section_1{
		padding: 0 20px;
		margin-bottom: 100px;

		.lp_section_content{
			max-width: 1100px;
			margin: 0 auto;

			.title{
				/* font-size: 45px; */
				font-size:30px;
				margin-bottom: 24px;
				font-weight: 500;

				p{

				}
				span{
					font-size: 70px;
					color: @d_red;
				}
			}
			.detail{
				display: flex;
				font-size: 30px;
				gap: 40px;

				.text_box{
					width: 70%;
					padding-top: 36px;
					line-height: 50px;

					.blue_text{
						font-size:30px;
						color: @blue;
						margin-bottom: 30px;
					}
				}
				.img_box{
					width: 30%;
				}
			}
		}
	}
	.lp_section_2{
		padding: 0 20px;
		margin-bottom: 100px;

		.lp_section_content{
			background-color: @bg_gray;
			max-width: 1380px;
			margin: 0 auto;
			padding:20px;
			border-radius: 30px;

			.title{
				/* font-size: 40px; */
				font-size:30px;
				text-align: center;
				/* margin-bottom: 60px; */
				margin: 20px 0 40px;
				font-weight: 500;

				h3{

				}
			}
			.detail{
				display: flex;
				justify-content: space-between;
				align-items: stretch;
				gap:10px;

				.contnent_box{
					width: 560px;
					background-color: @white;
					padding:20px;
					border-radius: 30px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					gap:5px;

					.content{
						font-size: 16px;
						display: flex;
						align-items: center;
						gap: 10px;
						height:90px;

						img{
							width: 40px;
						}
					}

					@media(max-width:840px){
						.content{
							height:100px;
						}
					}
					.content:last-child{
						margin-bottom: 0;
					}
				}
				.detail_arrow_box{
					display: flex;
					align-items: center;
					.detail_arrow{
						max-width: 100px;
						height: auto;
					}
				}
			}
			.detail::before{
				position: absolute;
				background-image: url("images/lp_images/blue_right_arrow.webp");
				background-repeat: no-repeat;
				background-size: contain;
				height: 80px;
				width: 100px;
				top: 50%;
				left: 50%;
				transform: translate(50%, 50%);
			}
		}
	}
	.lp_section_3{
		padding: 0 20px;
		margin-bottom: 100px;
		
		.lp_section_content{
			max-width: 1380px;
			margin: 0 auto;

			.title{
				display: flex;
				gap: 50px;
				align-items: center;
    			justify-content: center;
				margin-bottom: 100px;

				.img_box{
					max-width: 250px;
				}
				h3{
					display: inline-block;
					max-width: 870px;
					font-size: 30px;
					font-family: 'Nunito', sans-serif;

					.spe_text{
						font-size: 40px;
						background-image: linear-gradient(#f6ff1d, #f6ff1d);
						background-size: 100% 10px; 
						background-repeat: no-repeat;
						background-position: 0 87%;
					}
				}
			}
			.detail{
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap:20px;

				.contnent_box{
					position: relative;
					height: 100%;
					text-align: center;
					padding: 150px 0 170px;
					display: inline-block;
					overflow: hidden;
					border-radius: 30px;

					.bg_img{
						position: absolute;
						z-index: 10;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						object-fit: cover;
						filter: brightness(90%);
					}
					.poster_tex_box{
						position: absolute;
						left: 16px;
						top: 30px;
						font-size: 23px;
						z-index: 30;
						color: @white;
						text-align: left;
						text-shadow: 4px 4px 2px rgba(37, 37, 37, 0.7);
						transform: rotate(-6deg); 
						display: inline-block;
					}
					.poster_tex{
						position: relative;
						z-index: 0;
						display: inline-block;
						padding-right: 10px;
						font-weight: bold !important;
					}
					.poster_tex::after {
						content: "";
						position: absolute;
						left: 0;
						bottom: 4px;
						width: 100%;
						height: 10px;
						background-color:#015fff;
						transform-origin: left bottom;
						z-index: -1;
					  }
					  .poster_tex_line_2{
						margin-left: 20px;
						white-space: nowrap;
					  }
					h4{
						font-size: 50px;
						position: relative;
						z-index: 30;
						color: @white;
						font-weight: 900;
						text-shadow: 4px 4px 0 rgba(37, 37, 37, 0.7);
					}
					.note_text{
						position: absolute;
						z-index: 30;
						text-align: left;
						background-color: rgba(255, 255, 255, 0.7);
						border-radius: 20px;
						height: 128px;
						display: flex;
						align-items: center;
						padding:15px;
						right: 0;
						bottom: 0;

						p{
							font-size: 20px;
							font-weight: bold !important;
						}
						.spe_text{
							font-size: 26px;
						}
						.blue_text{
							color: @blue;
						}
						.red_text{
							color: @red;
						}
					}
				}
			}
		}
	}
	.lp_section_4{
		padding: 0 20px;
		margin-bottom: 100px;

		.lp_section_content{
			background-color: @bg_gray;
			max-width: 1380px;
			margin: 0 auto;
			padding: 50px 40px;
			border-radius: 30px;

			.title{
				font-size: 30px;
				text-align: center;
				margin-bottom: 50px;
				color: @text_blue;
				font-weight: bold;

				h3{

				}
			}
			.detail{
				display: flex;
				justify-content: center;
				position: relative;
				gap: 40px;
				margin-bottom: 50px;
				position: relative;

				.contnent_box{
					max-width: 320px;
					text-align: center;
					padding: 20px;
					background: @white;
					border-radius: 20px;

					.img_box{
						height: 181px;
						display: flex;
						justify-content: center;

						img{
							height: 100%;
							width: auto;
						}
					}
					.title_box{
						height: 60px;
						display: flex;
						font-size: 24px;
						font-weight: bold;
						justify-content: center;
    					align-items: flex-end;
						margin-bottom: 12px;
					}
					.content_box{
						font-size: 16px;
						width: 100%;
						text-align: left;
						line-height: 28px;
					}
				}
			}
			.section_content_link{
				text-align: center;

				a{
					padding: 20px 192px;
					background: @text_blue;
					color: @yellow;
					font-size: 24px;
					font-weight: bold;
					display: inline-block;
					border-radius: 36px;
				}

				a:hover{
					opacity:0.8;
				}
			}
		}
	}
}