/* Hộp gợi ý tìm kiếm header (assets/js/ds-live-search.js) */
.ds-ls {
	position: absolute;
	top: calc(100% + var(--spacing-2xs));
	left: 0;
	right: 0;
	z-index: 1000;
	max-height: min(calc(var(--scale-1600) * 8), 70vh);
	overflow-y: auto;
	padding: var(--spacing-2xs);
	background: var(--surface-primary);
	border: var(--border-width-xs) solid var(--border-neutral-subtle);
	border-radius: var(--border-radius-sm);
	box-shadow: 0 var(--scale-100) var(--scale-300) color-mix(in srgb, var(--color-neutral-500) 25%, transparent);
	text-align: start;
}
.ds-ls[hidden] { display: none; }
@media (min-width: 768px) {
	.ds-ls { min-width: calc(var(--scale-1600) * 6); }
}
/* Mobile: ô tìm kiếm hẹp → hộp gợi ý trải gần hết màn hình (JS đặt --ds-ls-left = khoảng lệch của form so với lề trái) */
@media (max-width: 767px) {
	.ds-ls { left: var(--ds-ls-left, 0); right: auto; width: calc(100vw - var(--spacing-md) * 2); }
}
.ds-ls__item {
	display: grid;
	grid-template-columns: var(--scale-1200) minmax(0, 1fr);
	grid-template-areas: "img name" "img price";
	column-gap: var(--spacing-sm);
	align-items: center;
	padding: var(--spacing-xs);
	border-radius: var(--border-radius-xs);
	color: var(--text-body);
	text-decoration: none;
}
.ds-ls__item:hover,
.ds-ls__item[aria-selected="true"] { background: var(--surface-subtle); }
.ds-ls__item img,
.ds-ls__noimg {
	grid-area: img;
	width: var(--scale-1200);
	height: var(--scale-1200);
	object-fit: contain;
	border-radius: var(--border-radius-xs);
	background: var(--surface-primary);
}
.ds-ls__name {
	grid-area: name;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: var(--font-size-body-sm);
	line-height: var(--line-height-body-sm);
}
.ds-ls__price {
	grid-area: price;
	font-size: var(--font-size-body-sm);
	line-height: var(--line-height-body-sm);
	font-weight: var(--type-font-weight-bold);
	color: var(--text-price);
}
.ds-ls__empty {
	margin: 0;
	padding: var(--spacing-sm);
	font-size: var(--font-size-body-sm);
	color: var(--color-neutral-500);
}
.ds-ls__all {
	display: block;
	padding: var(--spacing-sm) var(--spacing-xs);
	border-top: var(--border-width-xs) solid var(--border-neutral-subtle);
	font-size: var(--font-size-body-sm);
	font-weight: var(--type-font-weight-bold);
	color: var(--text-primary);
	text-decoration: none;
}
.ds-ls__all:hover { color: var(--text-action-hover); }
.ds-ls-loading input[name="s"] { cursor: progress; }