@charset "UTF-8";
/* ======== common settings ======== */
/* ----- settings ----- */

html {
	font-size: 62.5%;
	overflow: auto;
	scroll-behavior: smooth;
}

body {
	width: 100%;
	background: url('/assets/img/bg_top_pc.png') no-repeat top center / 100% !important;
	background-color: #fff;
	line-height: 1.8;
	-webkit-text-size-adjust: none;
	color: #191919;
	font-size: 14px;
	font-size: 1.4rem;
	word-break: break-all;
	overflow: auto;
}

ul,
ol,
dl {
	list-style: none;
}

img {
	width: 100%;
	vertical-align: bottom;
}

a {
	color: #000;
	text-decoration: none;
}

sup {
	font-size: 0.8em;
	vertical-align: super;
}

.fw-bold {
	font-weight: 700;
}

.text-pink {
	color: #F859A4;
}

.break-line {
	display: block;
}

.d-block {
	display: block;
}

.d-mb-block {
	display: none;
}

header.scroll {
	position: fixed;
	width: 100%;
	z-index: 999;
}

.container_1 {
	position: relative;
	width: 100%;

	& .deco-pc {
		position: absolute !important;
		top: -50px;
		right: 30px;
		width: 110px;
		height: 149px;
	}

	& .content_mb {
		display: none;
	}

	> :not(.bg) {
		z-index: 2;
		position: relative;
	}

	& .bg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #A9C9FF 0%, #FFBBEC 100%);
		clip-path: polygon(50% 0, 100% 0, 100% 60%, 0 49%, 0% 15%);
	}
}


.header {

	& * {
		z-index: 1;
	}

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding:28px;
	height: 100px;
	align-items: center;
	position: relative;

	& .logo {
		width: 330px;
		height: 29px;
	}

	& .top-button {
		display: flex;
		gap: 20px;
	}
}

.btn {
	padding: 11.5px 18px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 21px;
	font-weight: 600;
	letter-spacing: 0;
}

.btn.btn-gray {
	background-color: #8395B3;
	color: #fff;
}

.btn.btn-pink {
	background-color: #F859A4;
	color: #fff;
}


.content {
	max-width: 1080px;
	margin: 0 auto;
	margin-top: 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.container_1 .content .title_1 {
	color: #fff;
	text-align: center;

	img {
		width: 885px;
	}

	margin-bottom: 35px;
}

.container_1 .content .bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 52px;
	margin-top: 50px;
}

.container_1 .content .bottom .text {
	color: #8395B3;
	font-size: 17px;
	line-height: 30.6px;
	font-weight: 600;
	text-align: center;
}

.btn-line:hover {
	opacity: 0.7;
	background: url('/assets/img/arrow-right-white.png') no-repeat calc(100% - 31.25px) center / 15px, #FB9BC8 !important;
}

.container_1 .content .bottom .btn-line {
	position: relative;
	font-size: 24px;
	line-height: 28.8px;
	color: #fff;
	padding: 35.5px 90px;
	border-radius: 88px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 40px;
	margin-bottom: 30px;
	background: url('/assets/img/arrow-right-white.png') no-repeat calc(100% - 31.25px) center / 15px, #F859A4;
}

.container_1 .content .bottom .btn-line .tooltip {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	border: 1px solid #F859A4;
	border-radius: 18px;
	padding: 10px;
	padding-left:27.08px;
	height: 36px;
	width: 250px;
	text-align: center;
	font-size: 15px;
	line-height: 15px;
	font-weight: 700;
	color: #586781;
	background: url('/assets/img/logo_LINE.png') no-repeat 27px center, #fff;
	border-bottom: none;

}

.container_1 .content .bottom .btn-line .tooltip::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid #F859A4;
	border-right: 6px solid #F859A4;
	border-top: 6px solid #fff;
	clear: both;
}

.container_1 .content .media-info {
	position: relative;
	margin-top: 60px;
	border-top: 1px solid #DDE3F1;
	border-bottom: 1px solid #DDE3F1;
	padding: 39px 73px 19px;
	margin-bottom: 80px;
}

.container_1 .content .media-info .media-title {
	position: absolute;
	display: flex;
	gap: 20px;
	font-size: 24px;
	line-height: 24px;
	color: #586781;
	font-weight: 700;
	width: 316px;
	height: 40px;
	left: 50%;
	top: -20px;
	background-color: #fff;
	transform: translateX(-50%);
	align-items: center;
	justify-content: center;

	& img {
		width: 45px;
		height: 40px;
	}
}

.container_1 .content .media-info .list-img-media {
	display: flex;
	flex-direction: row;
	gap: 50px;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	margin-top: 20px;
	height: 49px;
}

.container_1 .content .media-info .media-bottom {
	text-align: right;
	font-size: 14px;
	line-height: 21px;
	font-weight: 400;
	color: #586781;
}

.bg_top {
	position: absolute;
	width: 100%;
	height: 100px;
	top: 0;
}

.bg_bottom {
	position: absolute;
	width: 100%;
	height: 100px;
	bottom: -1px;
}

.bg_top.bg_left {
	clip-path: var(--polygon, polygon(0% 0%, 100% 0%, 0% 100%));
	background: var(--bg);
}

.bg_top.bg_right {
	clip-path: var(--polygon, polygon(0% 0%, 100% -1%, 100% 100%));
	background: var(--bg) !important;
}

.bg_bottom.bg_left {
	clip-path: var(--polygon, polygon(0% 0%, 100% 100%, 0% 120%));
	background: var(--bg);
}

.bg_bottom.bg_right {
	clip-path: var(--polygon, polygon(100% 100%, 0% 100%, 100% 0%));
	background: var(--bg);
}

.info-tech {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
	background-color: rgb(245, 248, 251);
	padding: 170px 0 100px;
	position: relative;
	color: #586781;

	&>.bg_top {
		background-color: #fff;
	}

	& .info-tech-top {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		& img {
			width: 433px;
			height: 293px;
			margin-bottom: 20px;
		}

		& p {
			color: #586781;
			font-size: 18px;
			line-height: 36px;
			font-weight: 400;
			letter-spacing: 0;
			text-align: center;
		}
	}

	& .info-tech-img {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 45px;
		background: #fff;
		padding: 56px 77px;
		position: relative;

		& .border-left {
			position: absolute;
			left:0;
			top:0;
			width: 21px;
			height: 100%;
			border-left:1px solid #8395B3;
			border-top:1px solid #8395B3;
			border-bottom:1px solid #8395B3;
		}

		& .border-right {
			position: absolute;
			right:0;
			top:0;
			width: 21px;
			height: 100%;
			border-right:1px solid #8395B3;
			border-top:1px solid #8395B3;
			border-bottom:1px solid #8395B3;
		}

		& .block {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 16px;
			text-align: center;
			font-size: 14px;
			line-height: 22.4px;
			color: #586781;
			padding: 0 15px;

			& img {
				border-radius: 50%;
				width: 170px;
				height: 170px;
			}
		}
	}

	.info-tech-text {
		font-size: 22px;
		line-height: 44px;
		letter-spacing: 1px;
		font-weight: 600;
		width: 1089px;
		text-align: center;
	}
}

.skill-challenge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 60px;
	background: linear-gradient(0deg, #FEE5EF, #FFFBFE);
	padding-top: 180px;
	padding-bottom: 100px;
	position: relative;

	&>.bg_top {
		background-color: rgb(245, 248, 251);
	}

	& .skill-challenge-top img {
		width: 513px;
		height: 341px;
	}

	& .skill-challenge-bottom {
		background-color: #FFFEFE;
		border-radius: 20px;
		max-width: 1000px;
		padding: 70px;

		& .block:not(:last-child) {
			margin-bottom: 50px;
		}


		& .block {
			display: flex;
			flex-direction: row;
			gap: 50px;
			align-items: start;

			& .item-1 {
				flex: 0 50%;

				& .title {
					font-size: 22px;
					line-height: 22px;
					color: #586781;
					font-weight: 600;
					letter-spacing: 1px;
					margin-bottom: 30px;

					& p:first-child {
						line-height: 35.2px;
						margin-bottom: 3px;
					}

					& span {
						background: linear-gradient(90deg,#719DD6, #EDA8C5);
						padding: 3.5px 6px 5.5px;
						margin-right: 5px;
						color: #fff;
						display: inline-block;
					}
				}

				& .text {
					font-size: 16px;
					line-height: 32px;
					color: #586781;
					font-weight: 400;

					& span {
						font-weight: 700;
					}
				}
			}

			& .item-2 {
				flex: 0 50%;

				& img {
					border-radius: 10px;
				}

				& p {
					margin-top: 15px;
					font-size: 15px;
					line-height: 24px;
					color: #8395B3;
					font-weight: 400;
				}
			}
		}
	}
}

.scale-job {

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 60px;
	padding: 180px;
	background: linear-gradient(150deg, #F4F8FB, #E6EBF7);
	position: relative;

	&>.bg_top {
		background: linear-gradient(135deg, #FEE9F3, #FFE2EF);
	}

	& .scale-job-top {
		display: flex;
		flex-direction: column;
		gap: 30px;
		justify-content: center;
		align-items: center;

		&>img:first-child {
			width: 57px;
			height: 30px;
		}

		&>img:nth-child(2) {
			width: 642px;
			height: 103px;
		}

		& .block-1 {
			background-color: #fff;
			padding: 32px 35.5px;
			padding-top: 0;
			display: grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: 32px 140px 1fr;
			grid-template-areas: 'title title' 'item-1 item-3'
				'item-2 item-3';
			width: 955px;
			border-radius: 20px;
			color: #586781;

			&>.title {
				grid-area: title;
				text-align: right;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;

				& span {
					color: #fff;
					line-height: 10.5px;
					font-weight: 600;
					font-size: 11px;
					padding: 11px 19.5px;
					background: url('/assets/img/short_logo_white.png') no-repeat 20px center / 20px 10px, #F859A4;
					padding-left: 48.5px;
					display: inline-block;
					border-top-left-radius: 4px;
					border-top-right-radius: 4px;
				}
			}

			& .item-1 {
				grid-area: item-1;
				border: 1px solid #F859A4;
				border-bottom: 0;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: end;
				justify-content: center;
				padding-right: 40px;

				& .text-top {
					font-size: 13px;
					line-height: 19px;
					font-weight: 600;
					color: #586781;
					margin-bottom: 15px;
				}

				& .text-bottom {
					font-size: 24px;
					line-height: 31px;
					font-weight: 600;
					color: #F859A4;
					letter-spacing: 1px;
				}

				& img {
					position: absolute;
					bottom: 0;
					left: 14px;
					width: 141px;
					height: 171px;
				}

			}

			& .item-2 {
				grid-area: item-2;
				border: 1px solid #F859A4;

				& .item-2-top {
					padding: 23px 55px 23px 35px;

					& a.btn {
						font-size: 11px;
						line-height: 16.5px;
						font-weight: 500;
						letter-spacing: 1px;
						color: #586781;
						border: 1px solid #586781;
						border-radius: 22px;
						padding: 6px 14px;
						margin-bottom: 10px;
					}

					& ul {
						list-style: disc;
						margin-top: 10px;
						padding-left: 25px;

						& li {
							font-size: 14px;
							line-height: 22.4px;
							color: #586781;
							text-indent: -5px;
						}
					}
				}

				& .item-2-bottom {
					background: #E7EEF666;
					padding: 26.5px 34.5px;

					& a.btn {
						font-size: 11px;
						line-height: 16.5px;
						font-weight: 500;
						letter-spacing: 1px;
						color: #fff;
						border: 1px solid #F859A4;
						background-color: #F859A4;
						border-radius: 22px;
						padding: 6px 14px;
					}

					& .title {
						margin-top: 8px;
						font-weight: 600;
						font-size: 18px;
						line-height: 23px;
						letter-spacing: 1px;
						color: #586781;
						text-align: left;
					}

					& .acquired-skills {
						background: #fff;
						padding: 10px 15px;
						color: #586781;

						& p {
							font-size: 13px;
							line-height: 20.8px;
						}
					}

					& ul.list-1 {
						list-style: disc;
						padding-left: 27px;
						margin-top: 10px;
						margin-bottom: 15px;

						& li {
							list-style: disc;
							font-size: 14px;
							line-height: 22.4px;
							color: #586781;
						}
					}

					& ul.list-2 {
						width: 374px;
						list-style: disc;
						list-style-position: outside;
						margin-top: 10px;
						margin-left: 20px;
						display: flex;
						justify-content: space-between;
						padding-right: 15px;

						& li {
							font-size: 13px;
							line-height: 22.4px;
							text-indent: -5px;
							color: #586781;
							font-weight: 700;
							float: left;
							margin-right: 10px;
						}
					}

					& ul.list-2::after {
						content: '';
						display: block;
						clear: both;
					}

				}
			}

			& .item-3 {
				grid-area: item-3;
				border: 1px solid #F859A4;
				border-left: 0;
				background-image:
					linear-gradient(rgba(255, 182, 193, 0.3) 1px, transparent 1px),
					linear-gradient(90deg, rgba(255, 182, 193, 0.3) 1px, transparent 1px);
				background-size: 10px 10px;
				/* Adjust grid spacing */
				padding: 42px 19.5px;

				& .title {
					color: #F859A4;
					font-size: 18px;
					font-weight: 700;
					line-height: 23.4px;
					letter-spacing: 1px;
					text-align: center;
					margin-bottom: 20px;

					& span {
						font-size: 24px;
						line-height: 31.2px;
					}
				}

				& .sliders {
					padding: 0 20px;
					display: flex;
					flex-direction: column;
					letter-spacing: 1px;
					text-align: center;
					margin-bottom: 21px;

					& .slick-slide {
						width: 402px !important;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						flex-direction: column;
					}

					& .slick-slide > div {
						width: 100%;
						display: flex;
						justify-content: center;
						flex-direction: column;
						align-items: center;
					}

					& img {
						width: 320px;
						height: 196px;
						margin-bottom: 20px;
					}

					& .time {
						color: #F859A4;
						font-size: 22px;
						line-height: 28.6px;
						font-weight: 700;
						margin-bottom: 10px;
					}

					& .action {
						font-weight: 700;
						font-size: 20px;
						line-height: 26px;
						height: 2lh;
						color: #586781;
						margin-bottom: 15px;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					& .purpose {
						font-size: 16px;
						line-height: 26px;
						font-weight: 400;
						color: #586781;
						letter-spacing: 0;
					}
				}

				& .custom-navigation {
					display: flex;
					flex-direction: row;
					gap: 40px;
					align-items: center;
					justify-content: center;

					& .custom-prev,
					.custom-next {
						cursor: pointer;
						width: 30px;
						height: 30px;
						background: #C8C8C8;
						border: none;
						color: #fff;
					}

					& .custom-next {
						background: #F859A4;
					}

					& .slick-dots {
						display: flex;
						align-items: center;
						justify-content: center;

						& li:not(:last-child) {
							margin-right: 6px;
						}

						& li.slick-active {
							& button {
								background: #F859A4 !important;
							}
						}

						& li {
							display: flex;
							align-items: center;
							justify-content: center;

							& button {
								border: none;
								border-radius: 50%;
								width: 6px;
								height: 6px;
								background: #C8C8C8;
								padding: 0;
								font-size: 0;
								line-height: 0;
								cursor: pointer;
								transition: background 0.3s ease;
							}
						}
					}
				}
			}
		}

		& .block-1.profile-2 {
			& .item-1 {
				padding-right: 21px;

				& img {
					width: 156px;
					height: 168px;
					left: 3.5px;
				}
			}


			& .item-2 {
				& .item-2-bottom {
					& ul.list-2 {
						& li {
							margin-right: 3px;
						}
					}
				}
			}

		}

		& .block-2 {
			max-width: 955px;
			height: 334px;
			background-color: #fff;
			padding: 50px 56px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: stretch;
			gap: 40px;
			border-radius: 20px;
			color: #586781;

			& .item-1 {
				flex: 1 0 405px;

				& .title {
					background: url('/assets/img/icon_movie.png') no-repeat left center / 34px 34px;
					padding-left: 53.08px;
					font-size: 24px;
					line-height: 36px;
					font-weight: 600;
					margin-bottom: 24px;
				}

				& .block-description {
					font-size: 15px;
					line-height: 30px;
					font-weight: 400;
					text-align: justify;
					letter-spacing: 0.3px;
				}
			}

			& .item-2 {
				flex: 1 0 405px;

				& iframe {
					width: 100%;
					height: 100%;
					border-radius: 8px;
				}
			}

		}

		&>.text {
			font-size: 18px;
			line-height: 36px;
			color: #586781;
			font-weight: 400;
			text-align: center;
			margin-bottom: 60px;
		}

		& .description {
			width: 757px;
			position: relative;
			background-color: #fff;
			border-radius: 15px;

			& .description-top {
				& .title {
					height: 43px;
					display: flex;
					align-items: center;
					border-top-left-radius: 15px;
					border-top-right-radius: 15px;
					color: #fff;
					font-size: 16px;
					line-height: 20.8px;
					padding: 5px 40px 5px;
					gap: 2.5px;
					font-weight: 600;
					background: url('/assets/img/icon-look.png') no-repeat 20px center / 16px, #F859A4 !important;
				}
			}

			& .description-bottom {
				padding: 20px 45px 30px;
				font-size: 14px;
				line-height: 25px;
				font-weight: 400;
				color: #586781;
				width: 60%;
			}

			& .description-img {
				position: absolute;
				top: 50%;
				left: 54%;
				transform: translateY(-50%);
				width: 328px;

				& img {
					width: 100%;
					height: 104px;
					float: left;
				}
			}
		}
	}
}

.block-line.left {
	background: url('/assets/img/bg_block_line_left.png') no-repeat center center / cover !important;
}

.block-line {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: url('/assets/img/bg_block_line.png') no-repeat center center / cover;
	padding: 120px 0;
	position: relative;

	&>img {
		width: 480px;
		height: 102px;
		margin-bottom: 20px;
	}

	& .text {
		font-size: 18px;
		line-height: 32.4px;
		font-weight: 600;
		color: #fff;
		margin-bottom: 50px;
		text-align: center;
	}

	& .btn-line {
		position: relative;
		font-size: 24px;
		line-height: 28.8px;
		color: #fff;
		padding: 35.5px 90px;
		border-radius: 88px;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 40px;
		margin-bottom: 30px;
		background: url('/assets/img/arrow-right-white.png') no-repeat calc(100% - 31.25px) center / 15px, #F859A4;

		& .tooltip {
			position: absolute;
			top: -18px;
			left: 50%;
			transform: translateX(-50%);
			border: 1px solid #fff;
			border-radius: 18px;
			padding: 10px;
			padding-left: 27.08px;
			height: 36px;
			width: 250px;
			text-align: center;
			font-size: 15px;
			line-height: 15px;
			font-weight: 700;
			color: #586781;
			background: url('/assets/img/logo_LINE.png') no-repeat 27px center, #fff;
			border-bottom: none;

		}

		& .tooltip::after {
			content: "";
			position: absolute;
			left: 50%;
			top: 100%;
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border-left: 6px solid #F859A4;
			border-right: 6px solid #F859A4;
			border-top: 6px solid #fff;
			clear: both;
		}
	}
}

.block-line:last-child {
	&>img {
        margin-bottom: 30px;
	}

	& .text {
		font-size: 17px;
		line-height: 30.6px;
		letter-spacing: calc(10/100 * 17px);
		margin-bottom: 52px;
	}
}

.block-reason {
	background: #F3F7FA;
	text-align: center;
	padding: 100px 120px;

	& .top {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 32px;
		margin-bottom: 60px;

		& img:nth-child(1) {
			width: 416px;
			height: 74px;
		}

		& img:nth-child(2) {
			width: 110px;
			height: 113px;
		}

		& img:nth-child(3) {
			width: 434px;
			height: 60px;
		}
	}

	& .bottom {
		width: 1000px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: 40px;

		& .item {
			background: #fff;
			border-radius: 20px;
			padding: 70px 80px;
			color: #586781;
			text-align: center;

			& .title {
				border-bottom: 1px solid #D0D5DB;
				padding-bottom: 30px;
				display: flex;
				align-items: center;
				justify-content: start;
				gap: 25px;
				margin-bottom: 40px;

				& .num_order {
					color: #BECDED;
					font-size: 60px;
					line-height: 48px;
					font-weight: 400;
					font-family: "Jost", serif;
					;
				}

				& .text {
					font-size: 30px;
					line-height: 30px;
					font-weight: 700;
				}

				& .option {
					color: #F859A4;
					border: 1px solid #F859A4;
					background: #fff;
					border-radius: 16px;
					padding: 5px;
					width: 90px;
					font-size: 12px;
					line-height: 18px;
					text-align: center;
					font-weight: 600;
				}
			}

			& .item-content {
				& .wrapper-item {
					display: flex;
					flex-direction: column;
					gap: 50px;

					& .item-position {
						& .top-position {
							text-align: left;

							& span {
								display: inline-block;
								background: url('/assets/img/short_logo_white.png') no-repeat 20.5px center / 20px 10px, #F859A4;
								font-size: 11px;
								line-height: 16.5px;
								font-weight: 600;
								color: #fff;
								font-family: "Montserrat", serif;
								padding-left: 49.5px;
								padding-right: 20px;
								padding-top: 12px;
								padding-bottom: 12px;
								border-top-left-radius: 5px;
								border-top-right-radius: 5px;
							}
						}

						& .bottom-position {
							background: #FCF7F9;
							padding: 32.5px 60px;
							display: flex;
							flex-direction: row;
							gap: 35px;
							align-items: start;
							border-radius: 10px;
							margin-bottom: 18px;

							& .avatar {
								flex: 1 0 143px;

								& img {
									border-radius: 50%;
									width: 138px;
									height: 138px;
									margin-bottom: 18px;
								}

								& p {
									font-weight: 400;
									font-size: 11px;
									line-height: 16.5px;
									font-family: yu-mincho-pr6n, sans-serif;
									text-align: left;

									& span {
										font-size: 15px;
										line-height: 22.5px;
									}
								}
							}

							& .text {
								font-size: 14px;
								line-height: 28px;
								font-weight: 400;
								text-align: justify;

								& p {
									text-align: left;
									font-size: 16px;
									line-height: 24px;
									font-weight: 600;
									margin-bottom: 15px;
								}
							}
						}
					}

					& .item-2-column {
						display: flex;
						flex-direction: row;
						gap: 40px;
						align-items: start;

						& .description {
							flex: 1 0 443px;

							& .sub-title {

								display: flex;
								align-items: end;
								justify-content: start;
								gap: 10px;
								font-size: 22px;
								line-height: 22px;
								font-weight: 600;
								margin-bottom: 20px;

								& img {
									width: 16px;
									height: 16px;
								}
							}

							& .text {
								text-align: justify;
								font-size: 16px;
								line-height: 32px;
								font-weight: 400;
							}

							& .link {
								margin-top: 36px;
								display: flex;
								align-items: center;
								justify-content: start;
								gap: 10px;

								& span {
									font-size: 16px;
									line-height: 32px;
									font-weight: 500;
									padding-bottom: 4px;
									color: #586781;
									border-bottom: 1px solid #586781;
								}

								& img {
									width: 30px;
									height: 30px;
								}

							}

							& .list-app {
								margin-top: 30px;
								display: flex;
								flex-direction: row;
								align-items: center;
								gap: 20px;

								& .btn-other {
									padding:0 25.5px;
									border-radius: 15px;
									text-align: center;
									font-size: 17px;
									background: #F2F5FC;
									font-weight: 600;
									color: #586781;
								}
							}
						}

						& > img {
							width: 357px;
							height: auto;
						}
					}
				}
			}
		}
	}
}

.block-curriculum {
	padding: 90px 220px;
	color: #586781;

	& .top {
		display: flex;
		flex-direction: column;
		align-items: center;

		& img:nth-child(1) {
			width: 52px;
			height: 52px;
			margin-bottom: 20px;
		}

		& img:nth-child(2) {
			width: 230px;
			height: 56px;
			margin-bottom: 20px;
		}

		& p.diagram {
			& img {
				width: 1000px;
				height: 553px;
			}
		}

		& .text {
			font-size: 18px;
			line-height: 36px;
			font-weight: 400;
			margin-bottom: 60px;
		}
	}

	& .bottom {
		margin-top: 60px;
		display: flex;
		flex-direction: column;
		gap: 40px;

		& .item {
			background: #F4F6F9;
			border-radius: 20px;
			box-shadow: 0, 0, #000, 0.5;
			padding: 50px 56px;
		}

		& .item.row {
			display: flex;
			flex-direction: row;
			justify-content: center;
			gap: 30px;

			& .item-1 {
				/* flex: 1 0 460px; */
				flex: 1 0 60%;
                max-width: 468px;

				& .text-1 {
					& p {
						display: inline-block;
						font-size: 14px;
						line-height: 14px;
						font-weight: 700;
						padding-bottom: 5px;
						color: #F859A4;
						border-bottom: 1px solid #F859A4;

						& span {
							font-family: 'jost', sans-serif;
							margin-left:4px;
							font-size: 24px;
							line-height: 24px;
							font-weight: 500;
						}
					}

					margin-bottom: 15px;
				}

				& .text-2 {
					font-size: 26px;
					line-height: 39px;
					font-weight: 600;
					padding-bottom: 20px;
					border-bottom: 1px solid #D0D5DB;
					margin-bottom: 20px;
				}

				& .text-3 {
					font-size: 15px;
					line-height: 30px;
					font-weight: 400;
					text-align: justify;
				}
			}

			& img {
				flex: 1 0 40%;
				width: 40%;
			}
		}

		& .item.column {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 30px;

			& .item-1 {

				& .text-1 {
					& p {
						display: inline-block;
						font-size: 14px;
						line-height: 14px;
						font-weight: 700;
						padding-bottom: 5px;
						color: #F859A4;
						border-bottom: 1px solid #F859A4;

						& span {
							font-size: 24px;
							line-height: 24px;
							font-weight: 500;
							font-family: 'jost', sans-serif;
							margin-left:4px;
						}
					}

					margin-bottom: 15px;
				}

				& .text-2 {
					padding-bottom: 20px;
					border-bottom: 1px solid #D0D5DB;
					margin-bottom: 20px;
					display: flex;
					align-items: center;

					& p {
						font-size: 26px;
						line-height: 39px;
						font-weight: 600;
					}


					& .option {
						display: inline-block;
						padding-top: 5px;
						padding-bottom: 5px;
						margin-left: 10px;
						font-size: 12px;
						line-height: 10px;
						color: #F859A4;
						border-radius: 16px;
						border: 1px solid #F859A4;
						background: #fff;
						width: 90px;
						height: 24px;
						text-align: center;
						font-weight: 600;
					}
				}

				& .text-3 {
					font-size: 15px;
					line-height: 30px;
					font-weight: 400;
					text-align: justify;
					margin-bottom: 20px;
				}

				& .list-app-circle {
					display: flex;
					flex-direction: row;
					gap: 25px;
					justify-content: start;

					& img {
						max-width: calc((100% / 6) - 20px);
						height: auto;
					}
				}
			}
		}
	}
}

.block-price-list {
	color: #586781;
	padding: 90px 220px;
	background: #F4F6F9;
	display: flex;
	flex-direction: column;
	align-items: center;

	& .top {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		margin-bottom: 60px;

		& img:nth-child(1) {
			width: 62px;
			height: 36px;
		}

		& img:nth-child(2) {
			width: 120px;
			height: 56px
		}

		& .text {
			text-align: center;
			font-size: 18px;
			line-height: 36px;
			font-weight: 400;

			& span {
				font-weight: 600;
			}
		}
	}

	& .bottom {
		width: 1000px;

		& .type-register {
			display: flex;
			flex-direction: row;
			gap: 20px;

			& .panel {
				flex: 1 0 auto;
				height: 308px;
				background: #fff;
				border-radius: 10px;

				& .title {
					border-top-left-radius: 10px;
					border-top-right-radius: 10px;
					background: #8395B3;
					text-align: center;
					font-size: 24px;
					line-height: 24px;
					font-weight: 700;
					color: #fff;
					padding-top: 18.5px;
					padding-bottom: 18.5px;
				}

				& .text {
					background: #fff;
					padding: 25px 30px;

					& .text-top {
						color: #F859A4;
						font-size: 48px;
						line-height: 67.2px;
						font-weight: 700;
						text-align: center;
						padding-bottom: 20px;
						border-bottom: 1px solid #D0D5DB;
						margin-bottom: 20px;
					}

					& .text-bottom {
						font-size: 14px;
						line-height: 25.2px;
						text-align: center;
						font-weight: 400;
					}
				}
			}

			& .panel:nth-child(1) {
				flex: 0 1 448px;
			}
		}

		& .upgrade-guide {
			background: url('/assets/img/arrow_bg.png') no-repeat center center / 148px 148px;
			height: 148px;
			display: flex;
			align-items: center;
			justify-content: center;

			& p {
				padding: 10px 25.5px;
				font-size: 16px;
				line-height: 22.4px;
				font-weight: 700;
				background: #fff;
				letter-spacing: 1;
			}
		}

		& .panel-full {
			position: relative;

			&> :not(.circle-comming-soon) {
				position: relative;
				z-index: 1;
			}

			& .note {
				text-align: left;
				margin-top: 10px;
				font-size: 11px;
				line-height: 19.8px;
				font-weight: 400;
			}

			& .title {
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				background: #F859A4;
				text-align: center;
				font-size: 24px;
				line-height: 24px;
				font-weight: 700;
				color: #fff;
				padding-top: 18.5px;
				padding-bottom: 18.5px;
			}

			& .text {
				background: #fff;
				padding: 25px 30px;
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;

				& .text-top {
					padding-bottom: 20px;
					border-bottom: 1px solid #D0D5DB;
					margin-bottom: 20px;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 10px;

					& .text-1 {
						font-size: 14px;
						line-height: 19.6px;

						& span:nth-child(1) {
							color: #F859A4;
							font-weight: 700;
							text-align: center;
							display: block;
							margin-bottom: 10px;
						}

						& span:nth-child(2) {
							color: #8395B3;
							font-weight: 600;
							text-align: center;
							padding: 2px 12.5px;
							background: #F4F6F9;
							display: block;
						}
					}

					& .text-2 {
						font-size: 24px;
						line-height: 33.6px;
						color: #F859A4;
						font-weight: 600;

						& span {
							font-size: 48px;
							line-height: 67.2px;
						}
					}

				}

				& .text-bottom {
					font-size: 14px;
					line-height: 25.2px;
					text-align: center;
					font-weight: 400;
				}
			}

			& .circle-comming-soon {
				position: absolute;
				width: 164px;
				height: 164px;
				border: 3.26px solid #F859A4;
				color: #F859A4;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				gap: 9px;
				z-index: 2;
				top: -41px;
				right: -20px;
				background: #fff;

				& p:nth-child(1) {
					font-size: 21px;
					line-height: 21px;
					font-weight: 600;
					font-family: "Jost", serif;
					text-align: center;
				}

				& p:nth-child(2) {
					font-size: 12px;
					line-height: 12px;
					font-weight: 700;
				}
			}
		}
	}

	& .table-compare {

		width: 854px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 90px;

		&>img {
			width: 431px;
			height: 56px;
			margin-bottom: 60px;
		}

		.bg-azure {
			background: #8395B3;
			color: #fff;
		}

		.bg-pink {
			background: #F859A4;
			color: #fff;
		}

		& .tabs {
			display: flex;
			align-items: center;
			justify-content: end;
			font-size: 16px;
			line-height: 19.2px;
			font-weight: 700;
			height: 84px;
			width: 100%;
			gap: 5px;

			& .tab-1,
			& .tab-2 {
				flex: 0 1 287px;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
			}

			& .tab-2 {
				position: relative;

				& .text {
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					flex-direction: column;
				}

				& .tab-comming-soon {
					position: absolute;
					font-size: 18px;
					line-height: 18px;
					font-weight: 600;
					color:#F859A4;
					text-align: center;
					border-radius: 18px;
					background: #fff;
					border:1.5px solid #F859A4;
					padding: 10px 29px;
					letter-spacing: calc(8/100 * 18px);
					top:-25px;
					font-family: 'jost',	sans-serif;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				& .tab-comming-soon::after {
					content: "";
					position: absolute;
					left: 50%;
					top: 100%;
					transform: translateX(-50%);
					width: 0;
					height: 0;
					border-left: 6px solid #F859A4;
					border-right: 6px solid #F859A4;
					border-top: 6px solid #fff;
					clear: both;
				}
			}
		}

		& .tabs-content {
			width: 100%;

			& .row {
				display: flex;
				align-items: center;
				justify-content: end;
				gap: 5px;
				font-size: 12px;
				line-height: 15.6px;
				font-weight: 700;

				&>div {
					height: 55px;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
				}

				&>div:not(:first-child) {
					justify-content: end;

					& img {
						position: absolute;
						width: 24px;
						height: 24px;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}

					& span {
						flex: 0 1 50%;
						padding-left: 22px;
						text-align: left;
					}


				}

				& .column-1 {
					flex: 0 1 270px;
					border: 2px solid #F4F6F9;
					background: #fff;
				}

				& .column-2 {
					flex: 0 1 287px;
					background: #F7FAFF;
				}

				& .column-3 {
					flex: 0 1 287px;
					background: #FFF9FC;
				}
			}

			& .row:nth-child(2n+1) {
				& .column-2 {
					background: #E2ECFD;
				}

				& .column-3 {
					background: #FAE8F1;
				}
			}
		}

	}
}

.block-qa {
	display: flex;
	background: #FFF1F7;
	align-items: center;
	justify-content: start;
	flex-direction: column;
	color: #586781;
	padding: 90px 220px;
	padding-top: 180px;
	position: relative;

	& .top {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 80px;

		& img:nth-child(1) {
			width: 60px;
			height: 48px;
			margin-bottom: 20px;
		}

		& img:nth-child(2) {
			width: 238px;
			height: 56px;
		}
	}

	& .bottom {
		width: 1000px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px;

		& .item {
			width: 100%;
			padding: 40px;
			background: #fff;
			border-radius: 10px;

			& .question {
				display: flex;
				align-items: center;
				justify-content: space-between;
				user-select: none;
				cursor: default;

				& p {
					font-size: 18px;
					line-height: 28.6px;
					font-weight: 700;
					display: flex;
					align-items: center;
					pointer-events: none;

					& span {
						font-size: 26px;
						line-height: 26px;
						font-weight: 500;
						color: #F859A4;
						font-family: "jost", sans-serif;
						margin-right: 25px;
					}

					
				}

				& .btn-arrow {
					height: 16px;
					width: 16px;
				}

				& .btn-arrow.up.focus {
					padding:12px;
					border:1px solid #70acfa;
					background: url('/assets/img/arrow_button_up.png') no-repeat center center / 16px, #b8cfec !important;

				}

				& .btn-arrow.down.focus {
					padding:12px;
					border:1px solid #70acfa;
					background: url('/assets/img/arrow_button_down.png') no-repeat center center / 16px, #b8cfec !important;
				}

				& .btn-arrow.up {
					padding:12px;
					background: url('/assets/img/arrow_button_up.png') no-repeat center center / 16px;
				}

				& .btn-arrow.down {
					padding:12px;
					background: url('/assets/img/arrow_button_down.png') no-repeat center center / 16px;
				}
			}

			& .answer {
				font-size: 16px;
				line-height: 32px;
				font-weight: 400;
				text-align: justify;
				display: none;
			}

		}

		& .item.show {
			& .question {
				margin-bottom: 33px;
				border-bottom: 1px solid #C8C8C8;
				padding-bottom: 40px;
			}

			& .answer {
				display: block;
			}
		}
	}
}

.footer {
	background: #586781;
	color: #fff;
	display: flex;
	align-items: center;
	position: relative;

	& .ft_inner {
		width: 100%;
		padding-top: 70px;
		padding-bottom: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		&>img {
			width: 236px;
			height: 21px;
			margin-bottom: 34px;
		}

		& .img-app {
			display: flex;
			align-items: center;
			flex-direction: row;
			gap: 24px;
			margin-bottom: 40px;

			& img {
				width: 50px;
				width: 50px;
			}
		}

		& ul {
			margin-bottom: 24px;
		}

		& ul li {
			float:left;
			& a {
				font-size: 12px;
				line-height: 10px;
				font-weight: 500;
				letter-spacing: 0.5px;
				color:#fff;
			}
		}

		& ul li:not(:last-child):after {
			content: "|";
			margin-left: 16px;
			margin-right: 16px;
		}

		& small {
			font-size: 12px;
			line-height: 18px;
			font-weight: 400;
			font-family: Arial, Helvetica, sans-serif;
		}
	}

	& .btnTop {
		position: absolute;
		width: 46px;
		height: 46px;
		background: url('/assets/img/toTop.png') no-repeat center center / cover;
		top: 40px;
		right: 40px;
	}
}

@keyframes rotation {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(-360deg);
	}
}

.floating-circle:hover {
	opacity: 0.7;
}

.floating-circle {
	position: fixed;
	width: 156px;
    height: 156px;
    right: 47px;
	color: white;
	bottom: 47px;
	z-index: 9999;
}

.floating-circle .floating-ring {
	position: fixed;
	bottom: 30px;
	height: 190px;
	width: 190px;
	right: 30px;
	animation: 10s linear infinite rotation;
}

@media screen and (min-width:1530px) {
	.container_1 {
		& .content {
			& > img {
				width: 90%;
			}
		}
	}

	.content {
		max-width: 1480px;
	}
}

@media screen and (max-width:600px) {
	body {
		background: none !important;
	}

	.header {
		height: 48px !important;
		padding: 0 !important;

		& .logo {
			flex: 0 1 42.4% !important;
			width: 42.4%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			background: #fff;

			& img {
				width: 125px;
			}
		}

		& .top-button {
			width: calc(100% - 42.4%);
			display: flex;
			flex-direction: row;
			gap: 0;
			height: 100%;

			& a {
				flex: 0 1 50%;
				border-radius: 0;
				font-size: 11px;
				line-height: 15.4px;
				text-align: center;
				display: flex;
                align-items: center;
				justify-content: center;
				padding: 0;
				flex-direction: column;
			}
		}
	}

	& .container_1 {


		& .content {
			display: none;
		}

		& .content_mb {
			color: #8395B3;
			display: block;
			margin-top: 0;
			display: flex;
			align-items: center;
			justify-content: start;
			flex-direction: column;

			& .banner {
				padding-top: 30px;
				width: 100%;
				background: url('/assets/img/bg_top_mb.png') no-repeat top center / 100% 100% !important;
				display: flex;
				align-items: center;
				justify-content: start;
				flex-direction: column;

				& .img-1 {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					gap: 6px;

					& img:nth-child(1) {
						width: 140px;
					}

					& img:nth-child(2) {
						width: 133px;
					}
				}

				&>img.img-title-3 {
					width: 262px;
				}

				&>img.img-title-4 {
					width: 296px;
				}

				& .top {
					width: 100%;

					&>img {
						width: 100%;
					}

					& .list-tab {
						display: flex;
						align-items: center;
						padding: 0 18.5px;
						margin-bottom: 46px;
						gap: 10px;
						justify-content: space-around;

						& img:nth-child(1) {
							width: 65px;
							height: 87px;
						}

						& img:nth-child(2) {
							width: 263px;
							height: 54px;
						}
					}
				}
			}

			& .bottom {
				padding-top: 30px;

				& .text {
					font-size: 13px;
					line-height: 22.1px;
					font-weight: 600;
					text-align: center;
					margin-bottom: 41px;
				}

				.btn-line {
					position: relative;
					font-size: 14px;
					line-height: 16.8px;
					color: #fff;
					border-radius: 88px;
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 40px;
					margin-bottom: 30px;
					background: url('/assets/img/arrow-right-white.png') no-repeat calc(100% - 18.25px) center / 9px, #F859A4 !important;
					width: 300px;
					height: 60px;
					justify-content: center;
				}

				.btn-line .tooltip {
					position: absolute;
					top: -11px;
					left: 50%;
					font-weight: 700;
					transform: translateX(-50%);
					border: 1px solid #F859A4;
					border-radius: 18px;
					padding: 5px 11px;
					padding-left: 25px;
					height: 22px;
					width: 150px;
					text-align: center;
					font-size: 10px;
					line-height: 10px;
					color: #586781;
					background: url('/assets/img/logo_LINE.png') no-repeat 12px center / 12px 11.6px, #fff;
					border-bottom: none;

				}

				.btn-line .tooltip::after {
					content: "";
					position: absolute;
					left: 50%;
					top: 100%;
					transform: translateX(-50%);
					width: 0;
					height: 0;
					border-left: 4px solid #F859A4;
					border-right: 4px solid #F859A4;
					border-top: 4px solid #fff;
					clear: both;
				}
			}

			& .wrapper-media {
				padding: 0 24px;

				& .media-info {
					position: relative;
					margin-top: 40px;
					border-top: 1px solid #DDE3F1;
					margin-bottom: 60px;
				}

				& .media-info .media-title {
					position: absolute;
					display: flex;
					gap: 8px;
					font-size: 15px;
					line-height: 15px;
					color: #586781;
					font-weight: 700;
					left: 50%;
					top: -10px;
					background-color: #fff;
					padding: 0 8px;
					transform: translateX(-50%);
					align-items: center;
					justify-content: center;

					& img {
						width: 22px;
						height: 20px;
					}
				}

				& .media-info .list-img-media {
					display: flex;
					flex-direction: row;
					gap: 50px;
					row-gap: 20px;
					align-items: start;
					justify-content: space-between;
					padding-top: 38.5px;
					flex-wrap: wrap;
					padding-left: 29.5px;
					padding-right: 29.5px;

					&>div {
						display: flex;
						flex-direction: column;
						row-gap: 20px;
						align-items: center;
						justify-content: center;
					}

					& .left {


						& img {
							max-width: 107px;
						}
					}

					& .right {

						& img {
							max-width: 111px;
						}

						& img:nth-child(1) {
							max-width: 76px;
						}
					}

					/* 
					& img {
						max-width: 107px;
						flex:0 1 50%;
					}

					& img:nth-child(2) {
						max-width: 76px;
						height: 27px;
					} */
				}

				& .media-info .media-bottom {
					text-align: right;
					font-size: 11px;
					line-height: 16.5px;
					font-weight: 400;
					color: #8395B3;
				}
			}
		}

		& .content {
			margin-top: 0;
			padding-top: 30px;

			& .title_1 {
				& img {
					width: 304px;
				}
			}
		}
	}

	& .info-tech {
		padding-top: 80px;
		padding-left: 23px;
		padding-right: 17px;
		padding-bottom: 30px;
		gap: 30px;

		& .info-tech-top {
			& img {
				width: 320px;
				height: 207px;
				margin-bottom: 30px;
			}

			& p {
				font-size: 13px;
				line-height: 26px;
				text-align: justify;
				padding:0 5px;
			}
		}

		& .info-tech-img {
			padding: 20px;
			gap: 15px;
			row-gap: 40px;
			flex-wrap: wrap;
			background: #fff;

			& .block {
				flex: 1 0 calc(50% - 15px);
				padding: 0 11px;
				gap: 10px;
				padding: 0;

				& img {
					width: 124px;
					height: 124px;
				}

				& p {
					font-size: 12px;
					line-height: 19.5px;
					text-align: center;
				}
			}
		}

		& .info-tech-text {
			width: 100%;
			padding: 0 2.5px;
			font-size: 16px;
			line-height: 28.8px;
		}
	}

	& .skill-challenge {
		padding: 80px 20px 50px 20px;

		& .skill-challenge-top img {
			width: 308px;
			height: 202px;
		}

		& .skill-challenge-bottom {
			padding: 20px 15px;

			& .block:not(:last-child) {
				margin-bottom: 40px;
			}

			& .block {
				flex-direction: column;
				gap: 20px;

				& .item-1 {
					& .title {
						font-size: 18px;
						line-height: 18px;
						margin-bottom: 20px;

						& p:first-child {
							line-height: 28.8px;
						}

						& p.d-mb-block {
							display: flex;
							flex-direction: column;
							align-items: start;
							justify-content: center;
							gap:3px;
						}

						& span {
							padding: 5.5px 6px 7.5px
						}
					}

					& .text {
						font-size: 14px;
						line-height: 25.2px;
					}
				}

				& .item-2 {
					& p {
						font-size: 12px;
						line-height: 19.2px;
					}
				}
			}
		}
	}

	& .scale-job {
		padding: 80px 20px 50px 20px;

		& .scale-job-top {
			width: 100%;

			&>img {
				width: 213px;
				height: 130px;
			}

			& .description {
				width: 100%;
				padding-bottom: 20px;
				border-top-left-radius: 15px;
				border-top-right-radius: 15px;

				& .description-top {
					& .title {
						font-size: 16px;
						line-height: 20.8px;
						padding: 14.5px 20px 14.5px 44px;
					}
				}

				& .description-bottom {
					padding: 20px;
					width: 100%;
				}

				& .description-img {
					position: unset;
					width: 295px;
					height: 104px;
					margin: 0 auto;
					transform: none;
				}
			}

			&>.text {
				font-size: 13px;
				line-height: 26px;
				text-align: left;
				margin-bottom: 17px;
				padding: 0 5px;
			}

			& .block-1 {
				grid-template-areas:
					'title'
					'item-1'
					'item-2'
					'item-3';
				width: 100%;
				grid-template-rows: 24px 1fr;
				grid-template-columns: 100%;
				padding: 0;
				background-color: unset;

				&>.title {
					& span {
						font-size: 8px;
						line-height: 12px;
						padding: 4px 17px;
						background: url(/assets/img/short_logo_white.png) no-repeat 17px center / 15px 7.5px, #F859A4;
						padding-left: 39.5px;
					}
				}

				& .item-1 {
					background: #fff;
					padding-right: 15px;

					& img {
						width: 106px;
						height: 127px;
					}

					& .text {
						padding-top: 22px;
						padding-bottom: 22px;
						height: 109.7px;
					}

					& .text-top {
						font-size: 11px;
						line-height: 16.5px;
						margin-bottom: 11.7px;
					}

					& .text-bottom {
						font-size: 18px;
						line-height: 23.4px;
					}
				}

				& .item-2 {
					background: #fff;

					& .item-2-top {
						padding: 15px;

						& ul {
							& li {
								font-size: 13px;
								line-height: 20.8px;
							}
						}
					}

					& .item-2-bottom {
						padding:20px;
						& .title {
							font-size: 16px;
							line-height: 20.8px;
							letter-spacing: 0;
						}

						& ul {
							margin-bottom: 15px;

							& li {
								font-size: 12px;
								line-height: 20.8px;
							}
						}

						& .acquired-skills {
							& p {
								font-size: 12px;
								line-height: 19.5px;
							}
						}

						& ul.list-1 {
							& li {
								font-size: 13px;
								line-height: 20.8px;
							}
						}

						& ul.list-2 {
							width: 295px;
                            gap:5px;
                            flex-wrap: wrap;
							flex-direction: column;
							margin-bottom: 0;

							& li {
								font-size: 13px;
								line-height: 20.8px;
								float: none;
							}
						}
					}
				}

				& .item-3 {
					border-left: 1px solid #F859A4;
					border-top: 0;
					padding: 25px 16.5px;
					background-color: #fff;

					& .title {
						font-size: 13px;
						line-height: 16.9px;

						& span {
							font-size: 16px;
							line-height: 20.8px;
						}
					}

					& .sliders {
						padding: 0 31px;
						margin-bottom: 20px;

						& .slick-slide {
							width: 300px !important;
							display: flex;
							justify-content: center;
							align-items: center;
							text-align: center;
							flex-direction: column;
						}
	
						& .slick-slide > div {
							width: 100%;
							display: flex;
							justify-content: center;
							flex-direction: column;
							align-items: center;
						}

						& img {
							margin-bottom: 10px;
							height: 146px;
						}

						& .time {
							font-size: 16px;
							line-height: 20.8px;
							margin-bottom: 5px;
						}

						& .action {
							font-size: 14px;
							line-height: 18px;
						}

						& .purpose {
							font-size: 12px;
							line-height: 19px;
						}
					}

					& .custom-navigation {
						& .slick-dots {
							& li {
								& button {
									width: 4px;
									height: 4px;
								}
							}

							& li:not(:last-child) {
								margin-right: 4px;
							}
						}
					}
				}
			}

			& .block-1.profile-2 {
				& .item-1 {
					& img {
						width: 116px;
						height: 127px;
					}
				}

				& .item-2 {
					& .item-2-bottom {
						& ul.list-2 {
							row-gap:5px;
							column-gap: 25px;
                            flex-wrap: wrap;
							flex-direction: row;
							justify-content: flex-start;
						}
					}
				}
			}

			& .block-2 {
				flex-direction: column;
				padding: 25px 20px;
				height: auto;
				gap: 20px;

				& .item-1 {
					flex: auto;

					& .title {
						background: url(/assets/img/icon_movie.png) no-repeat center top / 34px 34px;
						padding-top: 44px;
						padding-left: 0;
						font-size: 18px;
						line-height: 27px;
						text-align: center;
						margin-bottom: 0;
					}

					& .block-description {
						font-size: 14px;
						line-height: 25.2px;
					}
				}

				& .item-2 {
					flex: auto;
					height: 171px;
					width: 100%;
				}

				& .block-description {
					font-size: 14px;
					line-height: 25.2px;
				}
			}
		}
	}

	.block-line {
		padding: 60px 0;
		background: url(/assets/img/bg_block_line_mb.png) no-repeat center center / 100% 100%;

		&>img {
			width: 288px;
			height: 59px;
		}

		& .text {
			font-size: 12px;
			line-height: 22.4px;
		}

		.btn-line {
			position: relative;
			font-size: 14px;
			line-height: 16.8px;
			color: #fff;
			padding: 24px 33.6px;
			border-radius: 88px;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 40px;
			margin-bottom: 30px;
			background: url('/assets/img/arrow-right-white.png') no-repeat calc(100% - 18.25px) center / 9px, #F859A4 !important;
			width: 300px;
			height: 60px;
			justify-content: center;
		}

		.btn-line .tooltip {
			position: absolute;
			top: -11px;
			left: 50%;
			transform: translateX(-50%);
			border: 1px solid #F859A4;
			border-radius: 18px;
			padding: 5px 11px;
			padding-left: 25px;
			height: 22px;
			width: 150px;
			text-align: center;
			font-size: 10px;
			line-height: 10px;
			color: #586781;
			background: url('/assets/img/logo_LINE.png') no-repeat 12px center / 12px 11.6px, #fff;
			border-bottom: none;

		}

		.btn-line .tooltip::after {
			content: "";
			position: absolute;
			left: 50%;
			top: 100%;
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border-left: 4px solid #F859A4;
			border-right: 4px solid #F859A4;
			border-top: 4px solid #fff;
			clear: both;
		}
	}

	.block-line:last-child {
		padding-top: 70px;
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 20px;
				
		&>img {
			margin-bottom: 20px;
		}
	
		& .text {
			font-size: 12px;
			line-height: 21.6px;
			letter-spacing: 0;
			margin-bottom: 32px;
		}
	}

	.block-reason + .block-line.left {
		padding-top: 112px;
	}

	.block-reason {
		padding: 0;
		padding-top: 60px;

		& .top {
			margin-bottom: 30px;

			& img:nth-child(1) {
				width: 272px;
				height: 47px;
			}

			& img:nth-child(2) {
				width: 73px;
				height: 74px;
			}

			& img:nth-child(3) {
				width: 264px;
				height: 34px;
			}
		}

		& .bottom {
			width: 100%;

			& .item {
				padding: 40px 20px;
				gap: 10px;
				border-radius: 0;

				& .title {
					flex-direction: column;
					padding-bottom: 20px;
					margin-bottom: 40px;

					& .num_order {
						font-size: 40px;
						line-height: 32px;
					}

					& .text {
						font-size: 20px;
						line-height: 28px;
					}

					& .option {
						padding: initial;
						font-size: 12px;
						height: 24px;
						line-height: 16px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				& .item-content {
					& .wrapper-item {
						gap: 20px;

						& .item-2-column {
							flex-direction: column-reverse;
							gap: 30px;

							& .description {
								flex: auto;

								& .sub-title {
									font-size: 18px;
									line-height: 18px;

									& img {
										display: none;
									}
								}

								& .text {
									font-size: 14px;
									line-height: 25.2px;

									& .fw-bold {
										font-weight: inherit;
									}
								}

								& .link {
									& span {
										font-size: 14px;
										line-height: 28px;
									}
								}

								& .list-app {
									& .btn-other {
										font-size: 14px;
										line-height: 32px;
										width: 140px;
										height: 29px;
										line-height: 29px;
									}

									& img {
										width: 29px;
										height: 29px;
									}
								}
							}

							& > img {
								width: 100%;
							}
						}

						& .item-position {
							& .top-position {
								& span {
									font-size: 8px;
									line-height: 12px;
									padding: 9px 15.12px;
									background: url('/assets/img/short_logo_white.png') no-repeat 15px center / 15px 7.5px, #F859A4;
									padding-left: 37px;
								}
							}

							& .bottom-position {
								flex-direction: column;
								padding: 20px;
								gap: 20px;
								padding-bottom: 30px;

								& .avatar {
									flex: auto;
									width: 100%;
									display: flex;
									flex-direction: row;
									gap: 18px;
									align-items: center;
									text-align: center;
									justify-content: center;

									& img {
										width: 107px;
										height: 107px;
									}

									& p {
										font-size: 11px;
										line-height: 16.5px;
									}
								}

								& .text {
									font-size: 14px;
									line-height: 25.2px;

									& p {
										font-size: 16px;
										line-height: 24px;
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.block-curriculum {
		padding: 0;
		padding-top: 80px;
		margin-bottom: 48.44px;

		& .top {
			padding: 0 25px;

			& img:nth-child(1) {
				width: 52px;
				height: 52px;
				margin-bottom: 10px;
			}

			& img:nth-child(2) {
				width: 150px;
				height: 34px;
				margin-bottom: 10px;
			}

			& p.diagram {
				overflow-x: scroll;
				width: 100%;

				& img {
					width: 1000px;
					height: 553px;
				}


			}

			& p.diagram::-webkit-scrollbar {
				height: 6px;
			}

			& p.diagram::-webkit-scrollbar-track {
				background: #fff;
				border-radius: 3px;
				width: 241px;
			}

			& p.diagram::-webkit-scrollbar-thumb {
				background: #C8C8C8;
				border-radius: 3px;
			}

			& p.diagram::-webkit-scrollbar-thumb:hover {
				background: #C8C8C8;
			}

			& .text {
				font-size: 13px;
				line-height: 26px;
				margin-bottom: 30px;
			}
		}

		& .bottom {
			padding: 0 20px;

			& .item {
				padding: 20px 15px;
			}

			& .item.row {
				flex-direction: column;

				& .item-1 {
					flex: auto;

					& .text-1 {
						margin-bottom: 20px;
					}

					& .text-2 {
						font-size: 20px;
						line-height: 28px;
					}

					& .text-3 {
						font-size: 14px;
						line-height: 25.2px;
					}
				}

				& img {
					width: 100%;
				}
			}

			& .item.column {
				& .item-1 {
					& .list-app-circle {
						padding: 0 15px;
						flex-wrap: wrap;

						& img {
							max-width: calc((100% / 3) - 20px);
							height: auto;
						}
					}

					& .text-2 {
						flex-direction: column;
						align-items: start;
						gap:10px;
						& p {
							font-size: 20px;
							line-height: 28px;
						}
						
						& .option {
							margin-left: 0;
						}
					}
				}
			}
		}
	}

	.block-price-list {
		padding: 80px 20px;

		& .top {
			margin-bottom: 30px;
			padding: 0 5px;

			& img:nth-child(2) {
				width: 77px;
				height: 34px;
			}

			& .text {
				font-size: 13px !important;
				line-height: 26px !important;
				text-align: justify !important;
			}

			;
		}

		& .bottom {
			width: 100%;

			& .type-register {
				flex-direction: column;
				gap: 46px;

				& .panel {
					flex: auto !important;
					height: auto;
					border-radius: 10px;

					& .text {
						font-size: 14px;
						line-height: 25.2px;
						border-bottom-left-radius: 10px;
						border-bottom-right-radius: 10px;

						& .text-top {
							font-size: 36px;
							line-height: 50.4px;
						}
					}
				}
			}

			& .upgrade-guide {
				background: url('/assets/img/arrow_bg.png') no-repeat center center / 130px 156px;
				height: 156px;
				align-items: start;
				padding-top: 21.55px;

				& p {
					padding: 7px 22.5px;
					font-size: 15px;
					line-height: 21px;
					text-align: center;
					letter-spacing: calc((5/100)*15px);
					flex: 0 1 281px;
				}
			}

			& .panel-full {
				& .title {
					font-size: 22px;
					line-height: 26.4px;
					padding: 19px 34px;
					text-align: justify;
				}

				& .circle-comming-soon {
					width: 105px;
					height: 105px;
					gap: 4px;
					right: -12px;
					top: -60.44px;
					border: 2.09px solid #F859A4;

					& p:nth-child(1) {
						font-size: 14px;
						line-height: 14px;
					}

					& p:nth-child(2) {
						font-size: 10px;
						line-height: 10px;
						text-align: center;
					}
				}

				& .text {
					padding-bottom: 30px;

					& .text-top {
						flex-direction: column;

						& .text-1 {
							& span {
								display: inline-block !important;
								background: none !important;
							}
						}

						& .text-2 {
							font-size: 16px;
							line-height: 22.4px;
						}
					}

					& .text-bottom {
						font-size: 14px;
						line-height: 25.2px;
					}
				}
			}
		}

		& .table-compare {
			width: 100%;
			margin-top: 30px;

			&>img {
				width: 77px;
				height: 34px;
				margin-bottom: 30px;
			}

			& .tabs {
				gap: 3px;

				& .tab-1,
				& .tab-2 {
					flex: 0 1 calc((100% - 131px)/2 - 3px);
					font-size: 13px;
					line-height: 14.3px;
					padding: 0 10.5px;
					flex-direction: column;

					& .tab-comming-soon {
						font-size: 8px;
						line-height: 8px;
						padding:4.54px 0;
						width: 89px;
						height: 17px;
						top:-12px;
					}

					& .tab-comming-soon:after {
						border-left: 4px solid #F859A4;
						border-right: 4px solid #F859A4;
					}
				}
			}

			& .tabs-content {
				& .row {
					font-size: 11px;
					line-height: 14.3px;
					gap: 3px;

					& .column-1 {
						flex: 1 0 131px;
						flex-direction: column;
					}

					&>div:not(:first-child) {
						justify-content: start;
						flex-direction: column;

						& span {
							padding-left: 0;
							padding-top: 37.5px;
						}
					}

					&>div.text:not(:first-child) {

						& img {
							top: calc(50% - 2px);
							transform: translate(-50%, calc(-50% - 2px));
						}
					}
				}
			}
		}

	}

	.block-qa {
		padding: 80px 20px;

		& .top {
			margin-bottom: 30px;

			& img:nth-child(1) {
				width: 55px;
				height: 44px;
				margin-bottom: 10px;
			}

			& img:nth-child(2) {
				width: 155px;
				height: 34px;
			}
		}

		& .bottom {
			width: 100%;
			gap: 30px;

			& .item {
				padding: 24px;
				& .question {
					& p {
						font-size: 15px;
						line-height: 21px;
						letter-spacing: 0.7px;
					}

					& .btn-arrow.down {
						margin-left:11px;
					}
				}

				& .answer {
					font-size: 14px;
					line-height: 25.2px;
				}
			}

			& .item.show {
				.question {
					margin-bottom: 24px;
					padding-bottom: 24px;
				}
			}
		}
	}

	.footer {
		& .btnTop {
			right: 20px;
			top:20px;
		}
		& .ft_inner {
			padding:40px 24px 48px;

			& img {
				width: 171px;
				height: 15px;
				margin-bottom: 24px;
			}

			& .img-app {
				margin-bottom: 32px;
				& a {
					width: 46px;
					height: 46px;
					& img {
						width: 46px;
						height: 46px;
					}
				}
			}
			& small {
				font-size: 10px;
			}
		}
	}

	.floating-circle {
		width: 120px;
		height: 120px;
		right: 24px;
        bottom: 24px;
		z-index: 9999;
	}

	.floating-circle .floating-ring {
		bottom: 10px;
		right: 10px;
        height: 146px;
        width: 146px;
	}
	

	& .bg_top {
		height: var(--height, 40px);
	}

	.bg_bottom {
		height: 40px;
		bottom: 0px;
	}

	.break-line-mb {
		display: block;
	}

	.d-block {
		display: none;
	}

	.d-mb-block {
		display: block;
	}
}