/**
 * Single Case Study
 *
 * Hero sang (nen trang) + title cam uppercase + subtitle + anh bo goc,
 * intro 2 cot (video + About), cac section icon cam + box xam, CTA card.
 */

.teco-cs {
	--teco-cs-navy: #114466;
	--teco-cs-box: #f4f5f8;
	display: block;
}

/* =====================================================
   HERO
   ===================================================== */
.teco-cs__hero {
	background-color: #fff;
	padding: 56px 0 48px;
}

.teco-cs__hero-inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.teco-cs__hero-head {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.teco-cs__hero-title {
	margin: 0;
	color: var(--teco-color-orange, #f90);
	font-size: 64px;
	font-weight: 700;
	line-height: 1.125;
	letter-spacing: -1.28px;
}

.teco-cs__hero-sub {
	margin: 0;
	color: #231f20;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}

.teco-cs__hero-media {
	position: relative;
	width: 100%;
	aspect-ratio: 1320 / 500;
	border-radius: 16px;
	overflow: hidden;
}

.teco-cs__hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =====================================================
   INTRO: VIDEO + ABOUT
   ===================================================== */
.teco-cs__intro {
	padding: 0;
}

.teco-cs__intro-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.teco-cs__intro-inner--noimg {
	grid-template-columns: minmax(0, 1fr);
}

/* Video responsive 16:9 */
.teco-cs__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
}

.teco-cs__video iframe,
.teco-cs__video video,
.teco-cs__video .fluid-width-video-wrapper {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

.teco-cs__about-title {
	margin: 0 0 16px;
	color: var(--teco-cs-navy);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.teco-cs__about-content {
	color: var(--teco-color-text, #333);
	font-size: 16px;
	line-height: 1.7;
}

/* =====================================================
   SECTION: PROJECT SCOPE / SOLUTION / BENEFIT / IMPLEMENTATION
   ===================================================== */
.teco-cs__section {
	padding: var(--teco-space-lg, 24px) 0;
}

.teco-cs__section-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.teco-cs__section-ic {
	display: inline-flex;
	color: var(--teco-color-orange, #f7941d);
}

.teco-cs__section-title {
	margin: 0;
	color: var(--teco-cs-navy);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.teco-cs__section-box {
	background: var(--teco-cs-box);
	border: 1px solid #ecedf1;
	border-top: 2px solid rgba(247, 148, 29, 0.55);
	border-radius: 12px;
	padding: 32px 40px;
	color: var(--teco-color-text, #333);
	font-size: 16px;
	line-height: 1.7;
}

/* Typography noi dung WYSIWYG trong box / about */
.teco-cs__section-box h2,
.teco-cs__section-box h3,
.teco-cs__section-box h4 {
	color: #1d1d1d;
	font-weight: 600;
	margin: 0 0 12px;
}

.teco-cs__section-box h3 {
	font-size: 20px;
}

.teco-cs__section-box > *:first-child {
	margin-top: 0;
}

.teco-cs__section-box > *:last-child {
	margin-bottom: 0;
}

.teco-cs__section-box ul {
	margin: 0 0 18px;
	padding-left: 22px;
	list-style: disc;
}

.teco-cs__section-box ul li {
	margin-bottom: 8px;
}

.teco-cs__section-box p + h3,
.teco-cs__section-box ul + h3 {
	margin-top: 24px;
}

.teco-cs__section-gap {
	height: 30px;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
	.teco-cs__hero-title {
		font-size: 44px;
		line-height: 1.15;
	}

	.teco-cs__intro-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

@media (max-width: 767px) {
	.teco-cs__hero {
		padding: 40px 0 32px;
	}

	.teco-cs__hero-inner {
		gap: 24px;
	}

	.teco-cs__hero-head {
		gap: 16px;
	}

	.teco-cs__hero-title {
		font-size: 30px;
		letter-spacing: -0.5px;
	}

	.teco-cs__section-box {
		padding: 24px 20px;
	}
}