/* =============================================================================
   MGN Steps Cards Widget
   Item lẻ  (1,3,5…): card xanh — grid-row 1 — số badge ở DƯỚI card.
   Item chẵn (2,4…) : card cam  — grid-row 2 — số badge ở TRÊN card.
   ============================================================================= */

/* ── Section wrapper ─────────────────────────────────────────────────────── */

/* ── Grid ────────────────────────────────────────────────────────────────── */
.mgn-sc-grid {
	max-width: 1300px;
	margin: 0 auto;
	display: grid;
	gap: 35px;
	align-items: start;
}

/* ── Item wrapper ────────────────────────────────────────────────────────── */
.mgn-sc-item {
	width: 100%;
	max-width: 403px;
	margin: 0 auto;
	position: relative;
	align-self: stretch;
}

/* ── BLUE CARD (default / odd items) ─────────────────────────────────────── */
.mgn-sc-card-top {
	background-color: #dce3f2;
	border-radius: 22px 22px 0 0;
	overflow: visible;
	position: relative;
	padding-top: 27px;
	height: 100%;
	box-sizing: border-box;
}

/* Wave decoration — blue (bottom of card) */
.mgn-sc-card-top::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -119px;
	height: 119px;
	background-image: var(--mgn-sc-wave-blue);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	z-index: 1;
	pointer-events: none;
}

/* Tab nhô ra phía dưới card xanh */
.mgn-sc-item:not(.mgn-sc-orange) .mgn-sc-card-top::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 77%;
	height: 18px;
	background-color: rgba(222, 233, 255, 1);
	border-radius: 10px 10px 0 0;
	border-bottom: 8px solid rgba(0, 0, 0, 0.1);
	z-index: 3;
}

.mgn-sc-card-header {
	background-color: #bfcbe2;
	padding: 14px;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	color: #173b84;
	line-height: 1.4;
	position: relative;
	z-index: 2;
}

.mgn-sc-card-content {
	padding: 22px 19px 21px;
	text-align: center;
	font-size: 15px;
	line-height: 1.8;
	color: #173b84;
	position: relative;
	z-index: 2;
}

/* ── Number badge — blue ─────────────────────────────────────────────────── */
.mgn-sc-number {
	position: absolute;
	bottom: -97px;
	left: 50%;
	transform: translateX(-50%);
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 2px solid #173b84;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	color: #173b84;
	background-color: #dce3f2;
	z-index: 5;
}

/* ── ORANGE CARD (even items) ────────────────────────────────────────────── */
.mgn-sc-orange {
	align-self: stretch;
	margin-top: 110px
}

.mgn-sc-orange .mgn-sc-card-top {
	background-color: #ff6400;
	border-radius: 0 0 22px 22px;
	padding-top: 24px;
	padding-bottom: 18px;
	height: 100%;
	box-sizing: border-box;
}

/* Tab nhô ra phía trên card cam */
.mgn-sc-orange .mgn-sc-card-top::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 77%;
	height: 18px;
	background-color: rgba(255, 92, 0, 1);
	border-radius: 0 0 10px 10px;
	border-top: 8px solid rgba(0, 0, 0, 0.1);
	z-index: 3;
}

/* Wave decoration — orange (top of card) */
.mgn-sc-orange .mgn-sc-card-top::after {
	top: -118px;
	bottom: auto;
	height: 119px;
	background-image: var(--mgn-sc-wave-orange);
}

.mgn-sc-orange .mgn-sc-card-header {
	background-color: #ff7b2d;
	color: #fff;
	padding: 16px 20px 14px;
}

.mgn-sc-orange .mgn-sc-card-content {
	color: #fff;
	padding: 18px 24px 13px;
}

/* Number badge — orange */
.mgn-sc-orange .mgn-sc-number {
	background-color: #ff6400;
	border-color: #fff;
	color: #fff;
	top: -97px;
	bottom: auto;
}


/* ── Responsive: 1 column ────────────────────────────────────────────────── */
@media (max-width: 680px) {
	.mgn-sc-grid {
		grid-template-columns: 1fr !important;
		display: flex;
		flex-direction: column;
		gap: 60px;
	}

	.mgn-sc-item {
		max-width: 100%;
		align-self: auto;
	}

	/* Reset orange về layout bình thường */
	.mgn-sc-orange {
		margin-top: 205px;
		align-self: auto;
	}

	.mgn-sc-orange .mgn-sc-card-top {
		border-radius: 0 0 22px 22px;
		padding-top: 24px;
		height: auto;
	}

	/* Số badge — về vị trí dưới cho tất cả */
	.mgn-sc-orange .mgn-sc-number {
		top: auto;
		bottom: 236px;
	}
}