/* BNSG Search Bar — responsive PC / tablet / phone */

.bnsg-sb {
	--bnsg-sb-accent: #E8557F;      /* nhấn hồng */
	--bnsg-sb-accent-dark: #cf3f68;
	--bnsg-sb-gold: #FFCF6B;        /* accent gold theo header */
	--bnsg-sb-border: #ecd9c7;
	--bnsg-sb-bg: #ffffff;
	--bnsg-sb-text: #3a2b22;
	--bnsg-sb-muted: #9a8b80;
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto 8px;
	padding: 0 16px;
}

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

.bnsg-sb__form {
	position: relative;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}

.bnsg-sb--align-left .bnsg-sb__form { margin-left: 0; }
.bnsg-sb--align-right .bnsg-sb__form { margin-right: 0; }

/* --- ô nhập --- */
.bnsg-sb__box {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--bnsg-sb-bg);
	border: 1.5px solid var(--bnsg-sb-border);
	border-radius: 999px;
	padding: 5px 6px 5px 16px;
	box-shadow: 0 4px 18px rgba(90, 60, 40, 0.08);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.bnsg-sb__box:focus-within {
	border-color: var(--bnsg-sb-gold);
	box-shadow: 0 6px 22px rgba(232, 85, 127, 0.16);
}

.bnsg-sb__icon {
	display: inline-flex;
	color: var(--bnsg-sb-accent);
	flex: 0 0 auto;
}

.bnsg-sb__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 16px;              /* >=16px để iOS không tự zoom */
	line-height: 1.4;
	color: var(--bnsg-sb-text);
	padding: 10px 4px;
	font-family: inherit;
}

.bnsg-sb__input::placeholder { color: var(--bnsg-sb-muted); }

/* ẩn nút clear mặc định của input[type=search] */
.bnsg-sb__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.bnsg-sb__clear {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 0;
	background: transparent;
	color: var(--bnsg-sb-muted);
	cursor: pointer;
	border-radius: 50%;
}
.bnsg-sb__clear:hover { background: #f4ece5; color: var(--bnsg-sb-text); }

.bnsg-sb__submit {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	border-radius: 999px;
	padding: 11px 22px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--bnsg-sb-accent);
	transition: background .18s ease, transform .05s ease;
	white-space: nowrap;
	font-family: inherit;
}
.bnsg-sb__submit:hover { background: var(--bnsg-sb-accent-dark); }
.bnsg-sb__submit:active { transform: translateY(1px); }

/* --- panel gợi ý --- */
.bnsg-sb__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 9999;
	background: #fff;
	border: 1px solid var(--bnsg-sb-border);
	border-radius: 16px;
	box-shadow: 0 12px 34px rgba(60, 43, 34, 0.16);
	overflow: hidden;
	max-height: min(70vh, 460px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.bnsg-sb__state {
	padding: 16px 18px;
	color: var(--bnsg-sb-muted);
	font-size: 14px;
}

.bnsg-sb__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	text-decoration: none;
	color: var(--bnsg-sb-text);
	border-bottom: 1px solid #f4ece5;
	transition: background .12s ease;
}
.bnsg-sb__item:last-of-type { border-bottom: 0; }
.bnsg-sb__item:hover,
.bnsg-sb__item.is-active {
	background: #fdf4ee;
}

.bnsg-sb__thumb {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	object-fit: cover;
	background: #f4ece5;
}
.bnsg-sb__thumb--ph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bnsg-sb-muted);
}

.bnsg-sb__meta { min-width: 0; flex: 1 1 auto; }

.bnsg-sb__name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bnsg-sb__sub {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--bnsg-sb-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bnsg-sb__badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	color: var(--bnsg-sb-accent-dark);
	background: #fce7ee;
	border-radius: 6px;
	padding: 1px 7px;
	margin-right: 6px;
	vertical-align: middle;
}

.bnsg-sb__price {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--bnsg-sb-accent-dark);
	white-space: nowrap;
}

.bnsg-sb__more {
	display: block;
	text-align: center;
	padding: 12px 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bnsg-sb-accent-dark);
	text-decoration: none;
	background: #fdf4ee;
	position: sticky;
	bottom: 0;
}
.bnsg-sb__more:hover { background: #fce7ee; }

/* ================= Tablet ================= */
@media (max-width: 782px) {
	.bnsg-sb__form { max-width: 560px; }
	.bnsg-sb__submit { padding: 10px 18px; }
}

/* ================= Phone ================= */
@media (max-width: 520px) {
	.bnsg-sb { padding: 0 12px; }
	.bnsg-sb__box { padding: 4px 5px 4px 12px; gap: 4px; }
	.bnsg-sb__input { padding: 10px 2px; }
	/* Nút thu gọn thành icon để không tràn màn hình */
	.bnsg-sb__submit {
		padding: 0;
		width: 42px;
		height: 42px;
		font-size: 0;
		border-radius: 50%;
		position: relative;
	}
	.bnsg-sb__submit::before {
		content: "";
		position: absolute;
		inset: 0;
		margin: auto;
		width: 18px;
		height: 18px;
		background: #fff;
		-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center / contain no-repeat;
		mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center / contain no-repeat;
	}
	.bnsg-sb__thumb { width: 42px; height: 42px; }
	.bnsg-sb__name { font-size: 14.5px; }
	.bnsg-sb__price { font-size: 13px; }
}