/*
 * WT Process Steps
 * Biến chỉnh trong Elementor (Style tab) được gán lên .wt-ps:
 *   --wt-ps-size, --wt-ps-active-size, --wt-ps-icon, --wt-ps-bg, --wt-ps-icon-color,
 *   --wt-ps-active-bg, --wt-ps-active-icon-color, --wt-ps-line, --wt-ps-line-gap, --wt-ps-row-gap
 */

.wt-ps {
	--wt-ps-size: 64px;
	--wt-ps-active-size: 88px;
	--wt-ps-icon: 20px;
	--wt-ps-bg: #fff;
	--wt-ps-icon-color: #003c7f;
	--wt-ps-active-bg: #003c7f;
	--wt-ps-active-icon-color: #fff;
	--wt-ps-line: #d5dce6;
	--wt-ps-line-gap: 14px;
	--wt-ps-row-gap: 28px;

	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Widget luôn rộng hết container chứa nó. Nếu không, trong container canh giữa (Align Items: Center)
 * widget co theo nội dung, mà container query bên dưới không cho nội dung đẩy độ rộng ra, nên widget co về 0.
 * Muốn hẹp hơn thì chỉnh Advanced → Width của widget (giá trị đó sẽ ghi đè dòng này).
 */
.elementor-widget-wt_process_steps {
	width: 100%;
}
.wt-ps {
	width: 100%;
}

/* ---------- Hàng ngang (mặc định) ---------- */
/*
 * Mỗi bước là một container query: vòng tròn, icon và đường nối tự thu nhỏ theo độ rộng
 * thực của bước, nên widget đặt trong cột hẹp vẫn cân đối. Kích thước trong Style là mức tối đa.
 */
.wt-ps-item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	text-align: center;
	container: wt-ps-item / inline-size;
}
.wt-ps-item::marker {
	content: none;
}

/* Cột icon cao bằng vòng tròn lớn nhất để tâm các vòng tròn thẳng hàng */
.wt-ps-marker {
	--s: min(var(--wt-ps-size), 60cqi);
	--a: min(var(--wt-ps-active-size), 76cqi);
	--g: min(var(--wt-ps-line-gap), 7cqi);
	position: relative;
	width: 100%;
	height: var(--a);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wt-ps-circle {
	position: relative;
	z-index: 1;
	width: var(--s);
	height: var(--s);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--wt-ps-bg);
	color: var(--wt-ps-icon-color);
	box-shadow: 0 8px 24px rgba(0, 60, 127, .08);
	--ic: min(var(--wt-ps-icon), calc(var(--s) * .4));
}
.wt-ps-circle i {
	font-size: var(--ic);
	line-height: 1;
}
.wt-ps-circle svg {
	width: var(--ic);
	height: var(--ic);
	fill: currentColor;
}

.wt-ps-item.is-active .wt-ps-circle {
	width: var(--a);
	height: var(--a);
	background: var(--wt-ps-active-bg);
	color: var(--wt-ps-active-icon-color);
	box-shadow: 0 0 0 min(10px, 4cqi) rgba(0, 60, 127, .06), 0 12px 28px rgba(0, 60, 127, .18);
	--ic: min(calc(var(--wt-ps-icon) * 1.3), calc(var(--a) * .36));
}

/* Đường nối: kẻ mảnh, có chấm ở hai đầu, chạy từ vòng tròn này tới vòng tròn kế tiếp */
.wt-ps-line-yes .wt-ps-item:not(:last-child) .wt-ps-marker::after {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(50% + var(--s) / 2 + var(--g));
	right: calc(-50% + var(--s) / 2 + var(--g));
	height: 6px;
	transform: translateY(-50%);
	background:
		radial-gradient(circle, var(--wt-ps-line) 0 2.5px, transparent 3px) left center / 6px 6px no-repeat,
		radial-gradient(circle, var(--wt-ps-line) 0 2.5px, transparent 3px) right center / 6px 6px no-repeat,
		linear-gradient(var(--wt-ps-line), var(--wt-ps-line)) center / calc(100% - 6px) 1px no-repeat;
}
.wt-ps-line-yes .wt-ps-item.is-active:not(:last-child) .wt-ps-marker::after {
	left: calc(50% + var(--a) / 2 + var(--g));
}
.wt-ps-line-yes .wt-ps-item:has(+ .is-active) .wt-ps-marker::after {
	right: calc(-50% + var(--a) / 2 + var(--g));
}
/* Bước quá hẹp: đường nối chỉ còn một mẩu nhỏ, nên ẩn đi cho gọn */
@container wt-ps-item (max-width: 130px) {
	.wt-ps-marker::after {
		display: none;
	}
}

/* Chữ: phần nào trống (số, tiêu đề, mô tả) thì bỏ hẳn, không để lại khoảng cách thừa */
.wt-ps-content {
	margin-top: 16px;
	padding: 0 10px;
}
.wt-ps-content > :last-child {
	margin-bottom: 0;
}
.wt-ps-num {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	letter-spacing: .08em;
	color: #8a94a6;
}
.wt-ps-title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: #0b2545;
	overflow-wrap: break-word;
}
.wt-ps-title a {
	color: inherit;
	text-decoration: none;
}
.wt-ps-desc {
	font-size: 14px;
	line-height: 1.5;
	color: #6b7a90;
}
@container wt-ps-item (max-width: 140px) {
	/* Bước hẹp: vòng tròn nổi bật chỉ to hơn vòng thường một chút để hàng cân đối */
	.wt-ps-marker {
		--a: min(var(--wt-ps-active-size), calc(var(--s) * 1.2));
	}
	.wt-ps-content {
		margin-top: 12px;
		padding: 0 4px;
	}
	.wt-ps-title {
		font-size: 15px;
	}
	.wt-ps-desc {
		font-size: 13px;
	}
}

/* ---------- Danh sách dọc (màn hình nhỏ) ---------- */
@media (max-width: 1024px) {
	.wt-ps--stack-tablet {
		flex-direction: column;
		padding-left: 10px; /* chừa chỗ cho quầng sáng của vòng tròn nổi bật */
	}
	.wt-ps--stack-tablet .wt-ps-item {
		flex-direction: row;
		align-items: stretch;
		gap: 20px;
		min-height: calc(var(--wt-ps-size) + var(--wt-ps-line-gap) * 2 + 24px); /* luôn đủ chỗ cho đường nối */
		text-align: left;
	}
	.wt-ps--stack-tablet .wt-ps-marker {
		flex: 0 0 var(--wt-ps-size);
		width: var(--wt-ps-size);
		height: auto;
		flex-direction: column;
		justify-content: flex-start;
	}
	/* Dạng dọc: bước nổi bật giữ màu nhưng cùng kích thước với các bước khác */
	.wt-ps--stack-tablet .wt-ps-item.is-active .wt-ps-circle {
		width: var(--wt-ps-size);
		height: var(--wt-ps-size);
		box-shadow: 0 0 0 8px rgba(0, 60, 127, .06), 0 10px 22px rgba(0, 60, 127, .18);
	}
	.wt-ps--stack-tablet .wt-ps-item.is-active .wt-ps-circle i {
		font-size: var(--wt-ps-icon);
	}
	.wt-ps--stack-tablet .wt-ps-item.is-active .wt-ps-circle svg {
		width: var(--wt-ps-icon);
		height: var(--wt-ps-icon);
	}
	/* Chữ ngắn (vd. chỉ có tiêu đề) thì căn giữa với vòng tròn; chữ dài thì bắt đầu từ mép trên */
	.wt-ps--stack-tablet .wt-ps-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-self: flex-start; /* không kéo dãn theo chiều cao hàng, để căn giữa đúng với vòng tròn */
		min-height: calc(var(--wt-ps-size) + var(--wt-ps-row-gap)); /* theme dùng border-box nên cộng cả khoảng đệm dưới */
		margin-top: 0;
		padding: 0 0 var(--wt-ps-row-gap);
	}
	.wt-ps-line-yes .wt-ps--stack-tablet .wt-ps-item:not(:last-child) .wt-ps-marker::after,
	.wt-ps-line-yes .wt-ps--stack-tablet .wt-ps-item.is-active:not(:last-child) .wt-ps-marker::after,
	.wt-ps-line-yes .wt-ps--stack-tablet .wt-ps-item:has(+ .is-active) .wt-ps-marker::after {
		top: calc(var(--wt-ps-size) + var(--wt-ps-line-gap));
		bottom: var(--wt-ps-line-gap);
		left: 50%;
		right: auto;
		width: 6px;
		height: auto;
		transform: translateX(-50%);
		background:
			radial-gradient(circle, var(--wt-ps-line) 0 2.5px, transparent 3px) center top / 6px 6px no-repeat,
			radial-gradient(circle, var(--wt-ps-line) 0 2.5px, transparent 3px) center bottom / 6px 6px no-repeat,
			linear-gradient(var(--wt-ps-line), var(--wt-ps-line)) center / 1px calc(100% - 6px) no-repeat;
	}
}

@media (max-width: 767px) {
	.wt-ps--stack-mobile {
		flex-direction: column;
		padding-left: 10px; /* chừa chỗ cho quầng sáng của vòng tròn nổi bật */
	}
	.wt-ps--stack-mobile .wt-ps-item {
		flex-direction: row;
		align-items: stretch;
		gap: 20px;
		min-height: calc(var(--wt-ps-size) + var(--wt-ps-line-gap) * 2 + 24px); /* luôn đủ chỗ cho đường nối */
		text-align: left;
	}
	.wt-ps--stack-mobile .wt-ps-marker {
		flex: 0 0 var(--wt-ps-size);
		width: var(--wt-ps-size);
		height: auto;
		flex-direction: column;
		justify-content: flex-start;
	}
	/* Dạng dọc: bước nổi bật giữ màu nhưng cùng kích thước với các bước khác */
	.wt-ps--stack-mobile .wt-ps-item.is-active .wt-ps-circle {
		width: var(--wt-ps-size);
		height: var(--wt-ps-size);
		box-shadow: 0 0 0 8px rgba(0, 60, 127, .06), 0 10px 22px rgba(0, 60, 127, .18);
	}
	.wt-ps--stack-mobile .wt-ps-item.is-active .wt-ps-circle i {
		font-size: var(--wt-ps-icon);
	}
	.wt-ps--stack-mobile .wt-ps-item.is-active .wt-ps-circle svg {
		width: var(--wt-ps-icon);
		height: var(--wt-ps-icon);
	}
	/* Chữ ngắn (vd. chỉ có tiêu đề) thì căn giữa với vòng tròn; chữ dài thì bắt đầu từ mép trên */
	.wt-ps--stack-mobile .wt-ps-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-self: flex-start; /* không kéo dãn theo chiều cao hàng, để căn giữa đúng với vòng tròn */
		min-height: calc(var(--wt-ps-size) + var(--wt-ps-row-gap)); /* theme dùng border-box nên cộng cả khoảng đệm dưới */
		margin-top: 0;
		padding: 0 0 var(--wt-ps-row-gap);
	}
	.wt-ps-line-yes .wt-ps--stack-mobile .wt-ps-item:not(:last-child) .wt-ps-marker::after,
	.wt-ps-line-yes .wt-ps--stack-mobile .wt-ps-item.is-active:not(:last-child) .wt-ps-marker::after,
	.wt-ps-line-yes .wt-ps--stack-mobile .wt-ps-item:has(+ .is-active) .wt-ps-marker::after {
		top: calc(var(--wt-ps-size) + var(--wt-ps-line-gap));
		bottom: var(--wt-ps-line-gap);
		left: 50%;
		right: auto;
		width: 6px;
		height: auto;
		transform: translateX(-50%);
		background:
			radial-gradient(circle, var(--wt-ps-line) 0 2.5px, transparent 3px) center top / 6px 6px no-repeat,
			radial-gradient(circle, var(--wt-ps-line) 0 2.5px, transparent 3px) center bottom / 6px 6px no-repeat,
			linear-gradient(var(--wt-ps-line), var(--wt-ps-line)) center / 1px calc(100% - 6px) no-repeat;
	}
}