/**
 * DS Elements — Dải cam kết
 *
 * Lưới chứ không phải flex: 6 mục có độ dài chữ chênh nhau khá nhiều, để flex
 * thì mỗi mục một bề rộng và hàng trông xộc xệch. Grid chia đều, chữ tự xuống
 * dòng trong phần của nó.
 */

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

.ds-fb {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: var(--ds-fb-pad, var(--ds-space-6)) var(--ds-fb-pad, var(--ds-space-6));
	list-style: none;

	display: grid;
	grid-template-columns: repeat(var(--ds-fb-cols, 6), minmax(0, 1fr));
	gap: var(--ds-fb-gap, var(--ds-space-6));

	background: var(--ds-fb-bg, var(--ds-color-white));
	border: 1px solid var(--ds-fb-border, var(--ds-color-border));
	border-radius: var(--ds-fb-radius, var(--ds-radius-lg));
	box-shadow: var(--ds-shadow-card);
}

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

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

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

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

.ds-fb__icon svg {
	width: var(--ds-fb-icon-size, 32px);
	height: var(--ds-fb-icon-size, 32px);
	display: block;
	fill: currentColor;
}

.ds-fb__icon i {
	font-size: var(--ds-fb-icon-size, 32px);
	line-height: 1;
}

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

.ds-fb__title {
	color: var(--ds-fb-title-color, var(--ds-color-brand));
	font-size: var(--ds-fs-small);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-tight);
}

.ds-fb__subtitle {
	color: var(--ds-fb-subtitle-color, var(--ds-color-muted));
	font-size: var(--ds-fs-topbar);
	line-height: var(--ds-lh-small);
}

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

/* Vẽ ở mép trái của mục, trừ mục đầu mỗi hàng — dùng nth-child theo số cột thì
   sai ngay khi số cột đổi theo breakpoint, nên bám vào khoảng cách grid: vạch
   nằm giữa khe, lùi ra ngoài nửa gap. */
.ds-fb--divided .ds-fb__item::before {
	content: "";
	position: absolute;
	left: calc(var(--ds-fb-gap, var(--ds-space-6)) / -2);
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 60%;
	background: var(--ds-fb-divider, var(--ds-color-border));
}

.ds-fb--divided .ds-fb__item:first-child::before {
	display: none;
}

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

@media (max-width: 1024px) {
	.ds-fb {
		--ds-fb-radius: var(--ds-radius-md);
	}
}

@media (max-width: 767px) {
	/* Xếp một cột thì tương quan icon/chữ đảo ngược: icon 32px đứng cạnh tiêu đề
	   12px trông như biểu tượng có chú thích, không phải một mục thông tin. Thu
	   icon lại và nâng cỡ chữ cho hai thứ ngang vai nhau. */
	.ds-fb {
		--ds-fb-gap: var(--ds-space-3);
		--ds-fb-pad: var(--ds-space-4);
		--ds-fb-icon-size: 24px;
		--ds-fb-icon-gap: var(--ds-space-4);
	}

	.ds-fb__title {
		font-size: var(--ds-fs-body);
	}

	.ds-fb__subtitle {
		font-size: var(--ds-fs-small);
	}

	/* Nét ngăn ngang giữa các mục — xếp dọc thì cần ranh giới, không thì sáu
	   dòng chữ trôi thành một khối. */
	.ds-fb__item + .ds-fb__item {
		padding-top: var(--ds-fb-gap);
		border-top: 1px solid var(--ds-fb-border, var(--ds-color-border));
	}

	/* Xếp một cột thì vạch dọc giữa hai mục không còn nghĩa gì. */
	.ds-fb--divided .ds-fb__item::before {
		display: none;
	}
}