/*!
 * Pay2S Elementor Widgets — How It Works
 * Số đo pay2s.vn (#how-it-works):
 *  lưới 4 cột gap 36, cách tiêu đề 30 (≤800: 2 cột gap 20 · ≤480: gap 12)
 *  thẻ: padding 24/20 (≤480: 18/13), viền #f0f5f2, bo 12, bóng rất nhẹ
 *  icon tròn 64×64, 34px · số thứ tự 24px #d9e9e0 · mũi tên nối cách phải −28px, ẩn ở ≤800
 */

.p2sew.p2sew-how-it-works {
	scroll-margin-top: 25px;
}

.p2sew-how-it-works .p2sew-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 36px;
	margin-top: 30px;
}

.p2sew-how-it-works .p2sew-steps__item {
	position: relative;
	padding: 24px 20px;
	border: 1px solid #f0f5f2;
	border-radius: 12px;
	background: linear-gradient(140deg, #fff, #fbfdfc);
	box-shadow: 0 10px 25px rgba(40, 106, 67, 0.02);
}

.p2sew-how-it-works .p2sew-steps__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 21px;
}

.p2sew-how-it-works .p2sew-steps__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 30%, #edfff3, #ddf5e8);
	font-size: 34px;
}

.p2sew-how-it-works .p2sew-steps__number {
	color: #d9e9e0;
	font-size: 24px;
	font-weight: 650;
}

.p2sew-how-it-works .p2sew-steps__text {
	margin-top: 8px;
	font-size: 13px;
}

.p2sew-how-it-works .p2sew-steps__arrow {
	position: absolute;
	top: 55%;
	right: -28px;
	color: #409f73;
}

@media (max-width: 800px) {
	.p2sew-how-it-works .p2sew-steps {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.p2sew-how-it-works .p2sew-steps__arrow {
		display: none;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 800px) {
	.p2sew-how-it-works .p2sew-steps {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.p2sew-how-it-works .p2sew-steps__arrow {
		display: none;
	}
}

@media (max-width: 480px) {
	.p2sew-how-it-works .p2sew-steps {
		gap: 12px;
	}

	.p2sew-how-it-works .p2sew-steps__item {
		padding: 18px 13px;
	}

	.p2sew-how-it-works .p2sew-steps__title {
		font-size: 14px;
	}

	.p2sew-how-it-works .p2sew-steps__text {
		font-size: 12px;
	}
}

/* container-mode: bản sao tự sinh từ @media phía trên (tools/container-mode.js) */
@container p2sew (max-width: 480px) {
	.p2sew-how-it-works .p2sew-steps {
		gap: 12px;
	}

	.p2sew-how-it-works .p2sew-steps__item {
		padding: 18px 13px;
	}

	.p2sew-how-it-works .p2sew-steps__title {
		font-size: 14px;
	}

	.p2sew-how-it-works .p2sew-steps__text {
		font-size: 12px;
	}
}