.gioithieu-banner p {
	padding: 20px 100px !important;
	letter-spacing: 1px;
}

.gioithieu-banner h1 {
	color: white !important;
	-webkit-text-stroke: 1.5px white;
	letter-spacing: 3px;
	font-size:42px !important;
}

.gioithieu-banner h1 span {
	color: #f97316 !important;
	-webkit-text-stroke: 1.5px #f97316;
}

.gioithieu-banner{
	background:#3e58a3 !important;
}
.gioithieu-banner img{
	filter: brightness(0.2);
}

/* Tổng thể section */
.gioithieu_story {
	padding: 60px 0;
	margin-bottom: 136px;
}

.gioithieu_story .img {
	position: relative;
	padding: 30px;
}
.gioithieu_story .img-inner img {
	border-radius: 40px !important;
	position: relative;
	z-index: 2;
}

.gioithieu_story .img::after {
	content: "";
	position: absolute;
	bottom: -17px;
	right: -3%;
	width: 250px;
	height: 250px;
	background-color: #f3811f;
	border-radius: 40px;
	z-index: 1;
}

.gioithieu_story .img::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0%;
	width: 120px;
	height: 120px;
	border: 8px solid #262264; /* Màu xanh đậm */
	border-radius: 50%;
	z-index: 1;
}

.gioithieu_story h1 {
	font-size: 36px;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.gioithieu_story p {
	color: #504c4c;
	font-family: sans-serif;
	line-height: 1.6;
	font-size:20px;
	margin-bottom: 25px;
	text-align: justify;
}

.gioithieu_story .img-inner.image-cover{
	padding-top:0px !important;
}

.gioithieu-tamnhin .col .col-inner {
	position: relative;
	padding: 45px 35px;
	background: #ffffff;
	border-radius: 30px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
	transition: all 0.4s ease;
	overflow: hidden;
	border: none;
	height: 100%;
}

.gioithieu-tamnhin .icon-box-img {
	background-color: var(--color-main);
	border-radius: 12px;
	width: 60px;
	height: 60px;
	padding: 15px;
	margin-bottom: 20px;
	transition: all 0.4s ease;
}

.gioithieu-tamnhin .icon img {
	filter: brightness(0) invert(1);
}

.gioithieu-tamnhin h3 span strong {
	color: var(--color-main);
	font-size: 24px;
	transition: all 0.4s ease;
	display: block;
	margin-bottom: 15px;
	text-transform: uppercase;
}

.gioithieu-tamnhin p {
	color: #666;
	transition: all 0.4s ease;
}

.gioithieu-tamnhin .col .col-inner::after {
	content: "";
	position: absolute;
	width: 150px;
	height: 80px;
	top: 10%;
	right: -24px;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.04;
	transition: all 0.4s ease;
	pointer-events: none;
}

.gioithieu-tamnhin .col:nth-child(1) .col-inner::after {
	background-image: url('https://myhope.thietkewebgiatot.top/wp-content/uploads/2026/04/view-3.png');
}

.gioithieu-tamnhin .col:nth-child(2) .col-inner::after {
	background-image: url('https://myhope.thietkewebgiatot.top/wp-content/uploads/2026/04/shuttle-1.png');
}

.gioithieu-tamnhin .col .col-inner:hover {
	background-color: var(--color-main);
	transform: translateY(-5px);
}

.gioithieu-tamnhin .col .col-inner:hover .icon-box-img {
	background-color: var(--color-chu);
}

.gioithieu-tamnhin .col .col-inner:hover h3 span strong,
.gioithieu-tamnhin .col .col-inner:hover p {
	color: #ffffff;
}

.gioithieu-tamnhin .col .col-inner:hover::after {
	opacity: 0.1;
	filter: brightness(0) invert(1);
}

.gioithieu-giatri {
	background: #1a1a3a;
	padding: 80px 0;
	position: relative;
}

.gioithieu-giatri .text h3 strong {
	color: #fff;
	font-size: 32px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.gioithieu-giatri .col.medium-3 .col-inner {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 15px;
	padding: 40px 20px;
	height: 100%;
	transition: all 0.3s ease-out;
	position: relative;
	z-index: 1;
}

.gioithieu-tamnhin .col .col-inner {
	position: relative;
	padding: 45px 35px;
	background: #ffffff;
	border-radius: 30px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
	transition: all 0.4s ease;
	overflow: hidden;
	border: none;
	height: 100%;
}

.gioithieu-tamnhin .icon-box-img {
	background-color: var(--color-main);
	border-radius: 12px;
	width: 60px;
	height: 60px;
	padding: 15px;
	margin-bottom: 20px;
	transition: all 0.4s ease;
}

.gioithieu-tamnhin .icon img {
	filter: brightness(0) invert(1);
}

.gioithieu-tamnhin h3 span strong {
	color: var(--color-main);
	font-size: 24px;
	transition: all 0.4s ease;
	display: block;
	margin-bottom: 15px;
	text-transform: uppercase;
}

.gioithieu-tamnhin p {
	color: #666;
	transition: all 0.4s ease;
}

.gioithieu-tamnhin .col .col-inner::after {
	content: "";
	position: absolute;
	width: 150px;
	height: 80px;
	top: 10%;
	right: -24px;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.04;
	transition: all 0.4s ease;
	pointer-events: none;
}

.gioithieu-tamnhin .col:nth-child(1) .col-inner::after {
	background-image: url('https://myhope.thietkewebgiatot.top/wp-content/uploads/2026/04/view-3.png');
}

.gioithieu-tamnhin .col:nth-child(2) .col-inner::after {
	background-image: url('https://myhope.thietkewebgiatot.top/wp-content/uploads/2026/04/shuttle-1.png');
}

.gioithieu-tamnhin .col .col-inner:hover {
	background-color: var(--color-main);
	transform: translateY(-5px);
}

.gioithieu-tamnhin .col .col-inner:hover .icon-box-img {
	background-color: var(--color-chu);
}

.gioithieu-tamnhin .col .col-inner:hover h3 span strong,
.gioithieu-tamnhin .col .col-inner:hover p {
	color: #ffffff;
}

.gioithieu-tamnhin .col .col-inner:hover::after {
	opacity: 0.1;
	filter: brightness(0) invert(1);
}

.gioithieu-giatri {
	background: #1a1a3a;
	padding: 80px 0;
	position: relative;
}

.gioithieu-giatri .text h3 strong {
	color: #fff;
	font-size: 32px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.gioithieu-giatri .col.medium-3 .col-inner {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 15px;
	padding: 40px 20px;
	height: 100%;
	transition: all 0.3s ease-out;
	position: relative;
	z-index: 1;
}

.gioithieu-giatri .col:nth-child(2) .col-inner::before { content: "01"; }
.gioithieu-giatri .col:nth-child(3) .col-inner::before { content: "02"; }
.gioithieu-giatri .col:nth-child(4) .col-inner::before { content: "03"; }
.gioithieu-giatri .col:nth-child(5) .col-inner::before { content: "04"; }

.gioithieu-giatri .col.medium-3 .col-inner::before {
	position: absolute;
	top: 5px;
	right: 15px;
	font-size: 50px;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.04);
	z-index: -1;
	transition: all 0.3s ease;
}

/* Box chứa Icon */
.gioithieu-giatri .icon-box-img {
	background: #ffffff;
	width: 70px;
	height: 70px;
	border-radius: 12px;
	margin: 0 auto 25px auto;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Khi Hover vào cả ô */
.gioithieu-giatri .col.medium-3:hover .col-inner {
	transform: translateY(-10px); /* Ô bay lên nhẹ */
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid #ec5b13; /* Viền đổi sang màu cam */
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* Khi Hover: Icon phóng to nhẹ và đổi màu nền */
.gioithieu-giatri .col.medium-3:hover .icon-box-img {
	background: #ec5b13; /* Nền icon chuyển cam */
	transform: scale(1.1); /* Phóng lớn nhẹ 10%, không xoay */
	box-shadow: 0 0 20px rgba(236, 91, 19, 0.4); /* Hiệu ứng phát sáng cam */
}

/* Đổi màu icon sang trắng khi nền icon thành màu cam */
.gioithieu-giatri .col.medium-3:hover .icon img {
	filter: brightness(0) invert(1);
}

/* Nội dung chữ */
.gioithieu-giatri .icon-box-text h3 {
	color: #fff;
	font-size: 19px;
	margin-bottom: 10px;
	transition: all 0.3s ease;
}

.gioithieu-giatri .col.medium-3:hover h3 {
	color: #ec5b13; /* Tiêu đề chữ chuyển cam khi hover */
}

.gioithieu-giatri .icon-box-text p {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	line-height: 1.6;
}

/* Đường gạch ngang trang trí bên dưới tiêu đề chính */
.gioithieu-giatri .is-divider {
	height: 3px;
	border-radius: 50px;
}
.gioithieu-giatri .icon-box-img{
	padding:15px !important;
	width: 70px !important;
}

.counter-section {
	display: flex;
	justify-content: space-around;
	margin-top:30px;
	text-align: center;
	padding: 10px 0;
	font-family: 'Montserrat', sans-serif;
}
.counter-item {
	flex: 1;
}
.counter-number-wrapper {
	color:var(--color-main);
	font-size: 30px;
	font-weight: 900;
	line-height: 1;
	margin-bottom: 10px;
	text-align:left;
	align-items: baseline;
}
.counter-label {
	color: #6b7280;
	font-size: 12px;
	text-transform: uppercase;
	text-align:left;
	letter-spacing: 1px;
}

@media (max-width: 768px) {
	.gioithieu-banner h1 {
		color: white !important;
		-webkit-text-stroke: 1.5px white;
		letter-spacing: 3px;
		font-size:32px !important;
	}
	.gioithieu-banner p{
		padding: 20px 40px !important;
	}
	.gioithieu_story .img::before{
		display:none;
	}
	.gioithieu_story .img{
		padding: 8px;
	}
	.gioithieu_story .col-inner{
		padding:0px !important;
	}
	.gioithieu_story h1 {
		font-size: 27px;
		text-transform: uppercase;
		margin-bottom: 20px;
	}
	.gioithieu_story p {
		color: #504c4c;
		font-family: sans-serif;
		line-height: 1.6;
		font-size: 15px;
		margin-bottom: 25px;
		text-align: justify;
	}
	.gioithieu_story{
		margin-bottom:0px !important;
	}
}