/**
 * DS Elements — Dải chỉ số
 *
 * Nền phủ hết bề ngang, nội dung neo vào lưới 1200 (.ds-sb__inner) để thẳng cột
 * với các khối boxed phía trên. Lưới chia đều bằng grid như dải cam kết: con số
 * dài ngắn chênh nhau nhiều, để flex thì mỗi mục một bề rộng, hàng xộc xệch.
 */

.elementor-widget-ds-stat-bar {
	width: 100%;
	min-width: 0;
}

.ds-sb {
	--ds-sb-cols: 4;
	--ds-sb-gap: var(--ds-space-6);
	--ds-sb-pad-y: var(--ds-space-8);
	--ds-sb-icon-size: 40px;

	width: 100%;
	min-width: 0;
	background: var(--ds-sb-bg, var(--ds-color-surface));
}

.ds-sb--line {
	border-top: 1px solid var(--ds-sb-line, var(--ds-color-border));
}

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

/* Neo nội dung vào lưới 1200, thẳng cột với khối boxed phía trên.
   Container boxed của Elementor cho nội dung rộng đúng 1200 (padding gutter bị
   nuốt vào lề canh giữa khi màn > 1200, chỉ hiện ra khi màn hẹp hơn). Nhân đôi
   cách đó: max-width = 1200 + 2·gutter rồi padding-inline = gutter. Ở màn rộng
   nội dung ra đúng 1200 và thẳng cột x=120; ở màn hẹp gutter thành lề thật.
   Đã đo: icon mục đầu trùng x với cột ảnh ở cả 1440/820/390. */
.ds-sb__inner {
	max-width: calc(var(--ds-max-width) + 2 * var(--ds-gutter));
	margin-inline: auto;
	padding: var(--ds-sb-pad-y, var(--ds-space-8)) var(--ds-gutter);
}

.ds-sb__grid {
	display: grid;
	grid-template-columns: repeat(var(--ds-sb-cols, 4), minmax(0, 1fr));
	gap: var(--ds-sb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Một mục ------------------------------------------------------------ */

.ds-sb__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ds-sb-icon-gap, var(--ds-space-4));
	min-width: 0;
}

.ds-sb__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	color: var(--ds-sb-icon-color, var(--ds-color-brand));
}

.ds-sb__icon i {
	font-size: var(--ds-sb-icon-size, 40px);
	line-height: 1;
}

/* SVG của Elementor không kế thừa color — thiếu dòng này là icon đen kịt. */
.ds-sb__icon svg {
	width: var(--ds-sb-icon-size, 40px);
	height: var(--ds-sb-icon-size, 40px);
	display: block;
	fill: currentColor;
}

.ds-sb__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ds-sb__stat {
	color: var(--ds-sb-stat-color, var(--ds-color-brand));
	font-size: var(--ds-sb-stat-fs, var(--ds-fs-h4));
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-tight);
	text-transform: uppercase;
}

.ds-sb__label {
	color: var(--ds-sb-label-color, var(--ds-color-muted));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
}

/* --- Vạch ngăn ---------------------------------------------------------- */

/* Nằm giữa khe, lùi ra ngoài nửa gap — bám khoảng cách grid chứ không nth-child
   theo số cột, vì số cột đổi theo breakpoint. */
.ds-sb--divided .ds-sb__item::before {
	content: "";
	position: absolute;
	left: calc(var(--ds-sb-gap, var(--ds-space-6)) / -2);
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 60%;
	background: var(--ds-sb-divider, var(--ds-color-border));
}

.ds-sb--divided .ds-sb__item:first-child::before {
	display: none;
}

/* --- Màn nhỏ ------------------------------------------------------------ */

@media (max-width: 767px) {
	/* Hai cột thì mục thứ ba, thứ tư nằm hàng dưới — vạch dọc giữa hai cột không
	   còn ứng với thứ tự nào, tắt đi. */
	.ds-sb--divided .ds-sb__item::before {
		display: none;
	}

	.ds-sb {
		--ds-sb-icon-size: 32px;
		--ds-sb-gap: var(--ds-space-4);
	}
}