/**
 * DS Elements — Quy trình các bước
 *
 * Ba biến layout ở đầu quyết định mọi thứ còn lại:
 *   --ds-flow-icon      đường kính vòng icon
 *   --ds-flow-icon-gap  icon → tiêu đề
 *   --ds-flow-title-lh  chiều cao một dòng tiêu đề
 * Từ đó suy ra --ds-flow-row = tâm dòng tiêu đề đầu tiên tính từ đỉnh cột. Số
 * thứ tự và đường nối đều canh theo --ds-flow-row, nên đổi cỡ icon là cả hai tự
 * chạy theo, không phải chỉnh tay từng chỗ.
 *
 * Mọi thuộc tính chỉnh được trong tab Style đều viết dạng
 *   var(--ds-flow-X, var(--ds-token))
 * Control để trống thì biến không được set và token quyết định.
 */

/* Wrapper do Elementor sinh ra sẽ co vừa nội dung khi widget nằm trong Flexbox
   hàng ngang, làm cả hàng bị bó lại. Ép nó đủ rộng. */
.elementor-widget-ds-process-flow {
	width: 100%;
	min-width: 0;
}

.ds-flow {
	width: 100%;
	min-width: 0;

	--ds-flow-icon: 72px;
	--ds-flow-icon-gap: 16px;
	--ds-flow-title-lh: 20px;
	--ds-flow-badge: 30px;
	--ds-flow-glyph: 32px;

	/* Khoảng cách số thứ tự → nội dung, và giữa các bước khi xếp lưới. */
	--ds-flow-badge-gap: var(--ds-space-3);
	--ds-flow-grid-gap: var(--ds-space-8) var(--ds-space-6);

	--ds-flow-dash: 6px;
	--ds-flow-dash-gap: 5px;

	--ds-flow-row: calc(
		var(--ds-flow-icon) + var(--ds-flow-icon-gap) + var(--ds-flow-title-lh) / 2
	);
}

.ds-flow *,
.ds-flow *::before,
.ds-flow *::after {
	box-sizing: border-box;
}

/* --- Hàng các bước ------------------------------------------------------ */

.ds-flow__row {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	max-width: var(--ds-max-width);
	margin: 0 auto;
}

.ds-flow__step {
	display: flex;
	align-items: flex-start;
	gap: var(--ds-flow-badge-gap);
	flex: 1 1 0;
	min-width: 0;
}

.ds-flow__body {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}

/* --- Số thứ tự — ngang hàng với dòng tiêu đề ---------------------------- */

.ds-flow__badge {
	flex: 0 0 var(--ds-flow-badge);
	width: var(--ds-flow-badge);
	height: var(--ds-flow-badge);
	margin-top: calc(var(--ds-flow-row) - var(--ds-flow-badge) / 2);

	display: grid;
	place-items: center;

	border: 1.5px solid var(--ds-flow-badge-border, var(--ds-color-brand-light));
	border-radius: var(--ds-radius-pill);
	background: var(--ds-flow-badge-bg, var(--ds-color-white));
	color: var(--ds-flow-badge-color, var(--ds-color-brand-light));

	font-size: var(--ds-fs-small);
	font-weight: var(--ds-fw-bold);
	line-height: 1;
}

/* --- Icon --------------------------------------------------------------- */

.ds-flow__icon {
	width: var(--ds-flow-icon);
	height: var(--ds-flow-icon);
	margin: 0 auto var(--ds-flow-icon-gap);

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: var(--ds-radius-pill);
	background: linear-gradient(
		160deg,
		var(--ds-flow-bubble-from, var(--ds-color-bubble-from)) 0%,
		var(--ds-flow-bubble-to, var(--ds-color-bubble-to)) 100%
	);
	box-shadow: var(--ds-shadow-raised);
}

.ds-flow__icon svg {
	width: var(--ds-flow-glyph);
	height: var(--ds-flow-glyph);
	stroke: var(--ds-flow-icon-color, var(--ds-color-brand-light));
	fill: none;
}

/* Icon chọn từ thư viện Elementor có thể là font icon hoặc SVG inline. */
.ds-flow__icon i {
	font-size: var(--ds-flow-glyph);
	line-height: 1;
	color: var(--ds-flow-icon-color, var(--ds-color-brand-light));
}

/* --- Chữ ---------------------------------------------------------------- */

.ds-flow__name {
	margin: 0;
	color: var(--ds-flow-name-color, var(--ds-color-brand));
	font-size: var(--ds-fs-button);
	font-weight: var(--ds-fw-bold);
	/* Khớp với --ds-flow-row ở trên: đổi cái này thì số thứ tự lệch khỏi dòng. */
	line-height: var(--ds-flow-title-lh);
	letter-spacing: var(--ds-ls-nav);
	text-transform: uppercase;
}

.ds-flow__desc {
	margin: var(--ds-space-2) 0 0;
	color: var(--ds-flow-desc-color, var(--ds-color-muted));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
}

/* --- Đường nối: nét đứt cùng hàng với số thứ tự ------------------------- */

.ds-flow__conn {
	position: relative;
	flex: 1 1 44px;
	min-width: 30px;
	height: 2px;
	margin-top: calc(var(--ds-flow-row) - 1px);

	/* Nét đứt vẽ bằng gradient lặp thay vì border-dashed: kiểm soát được đúng
	   độ dài nét và khoảng hở, border-dashed thì trình duyệt tự quyết. */
	background:
		linear-gradient(
			90deg,
			var(--ds-flow-line-color, var(--ds-color-line-soft)) 0 var(--ds-flow-dash),
			transparent var(--ds-flow-dash) calc(var(--ds-flow-dash) + var(--ds-flow-dash-gap))
		)
		repeat-x left center /
		calc(var(--ds-flow-dash) + var(--ds-flow-dash-gap)) 2px;
}

/* Mũi tên ở cuối nét — tam giác dựng bằng border. */
.ds-flow--arrow .ds-flow__conn::after {
	content: "";
	position: absolute;
	right: -1px;
	top: -4px;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 7px solid var(--ds-flow-line-color, var(--ds-color-line-soft));
}

/* --- Xếp lưới: bỏ đường nối ngang -------------------------------------- */

.ds-flow--grid .ds-flow__row {
	flex-wrap: wrap;
	gap: var(--ds-flow-grid-gap);
}

.ds-flow--grid .ds-flow__step {
	flex: 0 1 calc(
		(100% - (var(--ds-flow-cols) - 1) * var(--ds-space-6)) / var(--ds-flow-cols)
	);
	min-width: 190px;
}

.ds-flow--grid .ds-flow__conn {
	display: none;
}

/* --- Xếp dọc: số nằm trên icon, mũi tên chỉ xuống ---------------------- */

.ds-flow--stack .ds-flow__row {
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.ds-flow--stack .ds-flow__step {
	flex: 0 0 auto;
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.ds-flow--stack .ds-flow__badge {
	margin: 0 0 var(--ds-space-3);
}

.ds-flow--stack .ds-flow__body {
	flex: 0 1 auto;
	width: 100%;
}

.ds-flow--stack .ds-flow__conn {
	flex: 0 0 auto;
	width: 2px;
	height: 42px;
	min-width: 0;
	margin: var(--ds-space-4) auto var(--ds-space-6);

	background:
		linear-gradient(
			180deg,
			var(--ds-flow-line-color, var(--ds-color-line-soft)) 0 var(--ds-flow-dash),
			transparent var(--ds-flow-dash) calc(var(--ds-flow-dash) + var(--ds-flow-dash-gap))
		)
		repeat-y center top /
		2px calc(var(--ds-flow-dash) + var(--ds-flow-dash-gap));
}

.ds-flow--arrow.ds-flow--stack .ds-flow__conn::after {
	right: auto;
	left: -5px;
	top: auto;
	bottom: -7px;
	border-top: 8px solid var(--ds-flow-line-color, var(--ds-color-line-soft));
	border-bottom: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
}

/* --- Breakpoint: bám đúng ngưỡng mặc định của Elementor ---------------- */

@media (max-width: 1024px) {
	.ds-flow--grid-tablet .ds-flow__row,
	.ds-flow--stack-tablet .ds-flow__row {
		flex-wrap: wrap;
		gap: var(--ds-flow-grid-gap);
	}

	.ds-flow--grid-tablet .ds-flow__step {
		flex: 0 1 calc(
			(100% - (var(--ds-flow-cols-tablet) - 1) * var(--ds-space-6))
			/ var(--ds-flow-cols-tablet)
		);
		min-width: 190px;
	}

	.ds-flow--grid-tablet .ds-flow__conn {
		display: none;
	}

	.ds-flow--stack-tablet .ds-flow__row {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	.ds-flow--stack-tablet .ds-flow__step {
		flex: 0 0 auto;
		width: 100%;
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	.ds-flow--stack-tablet .ds-flow__badge {
		margin: 0 0 var(--ds-space-3);
	}

	.ds-flow--stack-tablet .ds-flow__conn {
		flex: 0 0 auto;
		width: 2px;
		height: 42px;
		min-width: 0;
		margin: var(--ds-space-4) auto var(--ds-space-6);
		background:
			linear-gradient(
				180deg,
				var(--ds-flow-line-color, var(--ds-color-line-soft)) 0 var(--ds-flow-dash),
				transparent var(--ds-flow-dash) calc(var(--ds-flow-dash) + var(--ds-flow-dash-gap))
			)
			repeat-y center top /
			2px calc(var(--ds-flow-dash) + var(--ds-flow-dash-gap));
	}

	.ds-flow--arrow.ds-flow--stack-tablet .ds-flow__conn::after {
		right: auto;
		left: -5px;
		top: auto;
		bottom: -7px;
		border-top: 8px solid var(--ds-flow-line-color, var(--ds-color-line-soft));
		border-bottom: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
	}
}

@media (max-width: 767px) {
	/* Xếp dọc thì màn hình rộng rãi trở lại — phóng to cho dễ đọc. */
	.ds-flow--stack-mobile {
		--ds-flow-icon: 88px;
		--ds-flow-glyph: 38px;
		--ds-flow-badge: 38px;
	}

	.ds-flow--grid-mobile .ds-flow__row,
	.ds-flow--stack-mobile .ds-flow__row {
		flex-wrap: wrap;
		gap: var(--ds-flow-grid-gap);
	}

	.ds-flow--grid-mobile .ds-flow__step {
		flex: 0 1 calc(
			(100% - (var(--ds-flow-cols-mobile) - 1) * var(--ds-space-6))
			/ var(--ds-flow-cols-mobile)
		);
		min-width: 0;
	}

	.ds-flow--grid-mobile .ds-flow__conn {
		display: none;
	}

	.ds-flow--stack-mobile .ds-flow__row {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	.ds-flow--stack-mobile .ds-flow__step {
		flex: 0 0 auto;
		width: 100%;
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	.ds-flow--stack-mobile .ds-flow__badge {
		margin: 0 0 var(--ds-space-3);
		border-width: 2px;
		font-size: var(--ds-fs-body);
	}

	.ds-flow--stack-mobile .ds-flow__body {
		flex: 0 1 auto;
		width: 100%;
	}

	.ds-flow--stack-mobile .ds-flow__name {
		font-size: var(--ds-fs-h4);
	}

	.ds-flow--stack-mobile .ds-flow__desc {
		margin-top: var(--ds-space-3);
		font-size: var(--ds-fs-body);
	}

	/* Rule ẩn đường nối của breakpoint tablet vẫn còn hiệu lực ở đây (max-width
	   1024 bao trùm 767), nên phải bật lại tường minh. */
	.ds-flow--stack-mobile .ds-flow__conn {
		display: block;
		flex: 0 0 auto;
		width: 2px;
		height: 42px;
		min-width: 0;
		margin: var(--ds-space-4) auto var(--ds-space-6);
		background:
			linear-gradient(
				180deg,
				var(--ds-flow-line-color, var(--ds-color-line-soft)) 0 var(--ds-flow-dash),
				transparent var(--ds-flow-dash) calc(var(--ds-flow-dash) + var(--ds-flow-dash-gap))
			)
			repeat-y center top /
			2px calc(var(--ds-flow-dash) + var(--ds-flow-dash-gap));
	}

	.ds-flow--arrow.ds-flow--stack-mobile .ds-flow__conn::after {
		right: auto;
		left: -5px;
		top: auto;
		bottom: -7px;
		border-top: 8px solid var(--ds-flow-line-color, var(--ds-color-line-soft));
		border-bottom: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
	}
}