/**
 * Khung ảnh dùng chung cho UX Builder.
 *
 * Người biên tập chỉ cần chọn Replace image. Chiều cao/tỷ lệ nằm ở element
 * và class của layout; mọi ảnh ngang, dọc hay vuông đều crop trong khung thay
 * vì đẩy chiều cao section hoặc làm lệch hàng card.
 */
.ss-fixed-media,
.ss-auto-media-frame {
	display: block;
	width: 100%;
	overflow: hidden;
	background: #d8d6d2;
}

.ss-fixed-media .img-inner,
.ss-auto-media-frame .img-inner {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ss-fixed-media img,
.ss-auto-media-frame img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: cover;
	object-position: 50% 50%;
	transition: transform .45s ease;
}

.ss-frame-16x9 {
	aspect-ratio: 16 / 9;
	height: auto !important;
}

.ss-frame-4x3 {
	aspect-ratio: 4 / 3;
	height: auto !important;
}

.ss-frame-3x2 {
	aspect-ratio: 3 / 2;
	height: auto !important;
}

.ss-frame-square {
	aspect-ratio: 1;
	height: auto !important;
}

.ss-frame-portrait {
	aspect-ratio: 4 / 5;
	height: auto !important;
}

.ss-founder-feature > .section-content > .row {
	max-width: var(--ss-layout-canvas) !important;
}

.ss-founder-feature .ss-founder-media > .col-inner,
.ss-founder-feature .ss-founder-portrait,
.ss-founder-feature .ss-founder-portrait .img-inner {
	height: 100%;
	min-height: clamp(620px, 48vw, 780px);
}

.ss-founder-feature .ss-founder-portrait.ss-fixed-media.img > .img-inner > img {
	object-position: 50% 18%;
}

.ss-founder-feature .ss-founder-copy > .col-inner {
	display: flex;
	min-height: clamp(620px, 48vw, 780px);
	flex-direction: column;
	justify-content: center;
}

.ss-founder-feature .ss-founder-title {
	max-width: 13ch;
	margin: 0 0 28px;
	color: #101218;
	font-size: clamp(42px, 4.8vw, 76px);
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: .98;
}

.ss-founder-feature .ss-founder-intro {
	max-width: 660px;
	margin: 0 0 30px;
	color: #50545d;
	font-size: clamp(17px, 1.35vw, 21px);
	line-height: 1.65;
}

.ss-founder-feature .ss-founder-principle {
	max-width: 680px;
	margin: 0 0 34px;
	padding: 22px 0 0;
	border-top: 1px solid rgba(16, 18, 24, .24);
	color: #101218;
	font-size: clamp(22px, 2vw, 32px);
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: 1.25;
}

.ss-founder-feature .ss-instructor-profile-link,
.ss-course-instructor .ss-instructor-profile-link {
	display: inline-block;
	margin-top: 12px;
	padding-bottom: 3px;
	border-bottom: 1px solid currentColor;
	color: #101218;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.ss-founder-feature .ss-instructor-profile-link:hover,
.ss-course-instructor .ss-instructor-profile-link:hover {
	color: #e30613;
}

@media (max-width: 849px) {
	.ss-founder-feature > .section-content > .row,
	.ss-course-instructor > .section-content > .row {
		display: block;
	}

	.ss-founder-feature > .section-content > .row > .col,
	.ss-course-instructor > .section-content > .row > .col {
		width: 100%;
		max-width: 100%;
		flex-basis: 100%;
	}

	.ss-founder-feature .ss-founder-media > .col-inner,
	.ss-founder-feature .ss-founder-portrait,
	.ss-founder-feature .ss-founder-portrait .img-inner {
		min-height: 520px;
	}

	.ss-founder-feature .ss-founder-copy > .col-inner {
		min-height: 0;
	}

	.ss-founder-feature .ss-founder-title {
		font-size: clamp(38px, 9vw, 58px);
	}
}

@media (max-width: 549px) {
	.ss-founder-feature .ss-founder-media > .col-inner,
	.ss-founder-feature .ss-founder-portrait,
	.ss-founder-feature .ss-founder-portrait .img-inner {
		min-height: 420px;
	}
}