/**
 * DS Elements — Breadcrumb
 */

.ds-bc {
	--ds-bc-gap: var(--ds-space-3);

	width: 100%;
	min-width: 0;
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
}

.ds-bc__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--ds-bc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-bc__item {
	display: flex;
	align-items: center;
	gap: var(--ds-bc-gap);
	min-width: 0;
}

.ds-bc__link {
	color: var(--ds-bc-link-color, var(--ds-color-muted));
	text-decoration: none;
	transition: color var(--ds-transition);
}

.ds-bc__link:hover {
	color: var(--ds-color-brand-light);
}

.ds-bc__current {
	color: var(--ds-bc-current-color, var(--ds-color-brand));
	font-weight: var(--ds-fw-semibold);
}

.ds-bc__sep {
	color: var(--ds-bc-sep-color, var(--ds-color-border));
	user-select: none;
}

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

/* Breadcrumb dài xuống hai ba dòng trên điện thoại thì chiếm mất phần đầu
   trang. Cuộn ngang một dòng gọn hơn, và vẫn với tới được mắt cuối. */
@media (max-width: 767px) {
	.ds-bc {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.ds-bc::-webkit-scrollbar {
		display: none;
	}

	.ds-bc__list {
		flex-wrap: nowrap;
	}

	.ds-bc__item {
		/* Giữ đủ rộng cho chữ khi danh sách cuộn ngang, tránh chồng mắt xích. */
		flex-shrink: 0;
		white-space: nowrap;
	}
}