/* STIs Dashboard – หน้าหลัก hero (scoped: .sti-hero*) */

/* กรอบ #kt_content ของหน้าหลัก: ขอบโค้ง + ยกนูน */
.sti-hero-card {
	position: relative;
	border-radius: 32px;
	overflow: hidden;
	background: #F4FAFD;
	border: 1px solid rgba(22, 50, 74, .08);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 2px 4px rgba(22, 50, 74, .06),
		0 12px 24px -8px rgba(22, 50, 74, .14),
		0 32px 64px -24px rgba(22, 50, 74, .28);
	margin-bottom: 32px;
}

.sti-hero {
	--sti-accent: #C73E26;
	--sti-navy: #16324A;
	--sti-highlight: #F7D3D3;
	--sti-dot: #F5E98F;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 56px;
	padding: 48px 48px 88px;
	background: #F4FAFD;
	overflow-x: clip;
}

.sti-hero__text {
	flex: 1 1 480px;
	min-width: 0;
}

.sti-hero__title {
	margin: 0;
	font-family: "Sarabun", sans-serif;
	font-weight: 700;
	font-size: clamp(32px, 4.8vw, 62px);
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: var(--sti-navy);
}

.sti-hero__em {
	font-size: 0.78em; /* คงขนาดวลีเน้นไว้ใกล้เดิม (สูงสุด ~48px) */
	white-space: nowrap;
	color: var(--sti-accent);
	background: linear-gradient(transparent 68%, var(--sti-highlight) 68%);
}

.sti-hero__media {
	flex: 1 1 380px;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.sti-hero__stage {
	position: relative;
	width: 100%;
	max-width: 404px; /* กรอบรูป 380px + padding ขวา 24px */
	padding: 0 24px 24px 0;
	margin: 0;
}

.sti-hero__block {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 86%;
	height: 86%;
	background: var(--sti-accent);
	border-radius: 40px;
}

.sti-hero__frame {
	position: relative;
	background: #fff;
	border: 2px solid var(--sti-navy);
	border-radius: 40px;
	overflow: hidden;
	box-shadow: 0 24px 48px -24px rgba(22, 50, 74, .4);
}

.sti-hero__frame img {
	display: block;
	width: 100%;
	height: auto;
}

.sti-hero__dot {
	position: absolute;
	left: -28px;
	top: 36px;
	z-index: 1;
	width: 84px;
	height: 84px;
	background: var(--sti-dot);
	border: 2px solid var(--sti-navy);
	border-radius: 50%;
}

@media (max-width: 767.98px) {
	.sti-hero {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
		padding: 32px 32px 56px;
	}

	.sti-hero__text,
	.sti-hero__media {
		flex-basis: auto;
	}
}