/* KHUNG SEARCH */
.search-box-custom {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

/* FORM */
.search-box-custom form {
	display: flex;
	align-items: center;
	width: 700px;
	max-width: 100%;
	background: var(--color-white);
	border-radius: 8px;
	overflow: hidden;
}

/* INPUT */
.search-input-custom {
	flex: 1;
	min-width: 0;
	height: 42px !important;
	padding: 0 14px;
	border: none;
	outline: none;
	background: #f5f5f5;
	font-size: 15px;
	color: #333;
	border-radius: 8px 0 0 8px !important;
}

/* PLACEHOLDER */
.search-input-custom::placeholder {
	color: #8d8d8d;
	font-size: 15px;
}

/* BUTTON */
.search-btn-custom {
	height: 42px !important;
	padding: 0 20px;
	border: none;
	outline: none;
	background: var(--sage-green);
	color: var(--color-white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	cursor: pointer;
	white-space: nowrap;
	border-radius: 0 8px 8px 0 !important;
	flex-shrink: 0;
}

/* ===== KHUNG KẾT QUẢ ===== */
#live-search-result {
	position: absolute;
    left: 30%;
    right: 0;
    top: -110px;
    background: var(--color-white);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    max-height: 250px;
    max-width: 500px;
    overflow-y: auto;
    z-index: 9999;
}

/* Scroll */
#live-search-result::-webkit-scrollbar {
	width: 6px;
}

#live-search-result::-webkit-scrollbar-thumb {
	background: var(--color-main);
	border-radius: 20px;
}

/* ITEM */
.search-item {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	padding: 8px;
	border-radius: 12px;
	transition: 0.3s;
}

.search-item:hover {
	background: #f5f5f5;
}

/* ẢNH */
.search-thumb {
	width: 58px;
	height: 58px;
	flex-shrink: 0;
	border-radius: 10px;
	overflow: hidden;
}

.search-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* TITLE */
.search-title {
	font-size: 15px;
	color: #222;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* EMPTY */
.search-empty {
	padding: 15px;
	text-align: center;
	font-size: 14px;
	color: #777;
}

/* DANH MỤC */
.search-category-list {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 700px;
	max-width: 100%;
	margin-top: 14px;
	padding-bottom: 4px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}

.search-category-list::-webkit-scrollbar {
	display: none;
}

.search-category-list:active {
	cursor: grabbing;
}

/* ITEM */
.search-category-item {
	flex: 0 0 auto;
	padding: 8px 16px;
	background: #f5f5f5;
	border-radius: 999px;
	font-size: 14px;
	color: #333;
	text-decoration: none;
	transition: 0.3s;
	white-space: nowrap;
}

.search-category-item:hover {
	background: var(--sage-green);
	color: var(--color-white);
}

/* KHÔNG CHO BÔI ĐEN */
.search-category-list, .search-category-item {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

/* MƯỢT KHI KÉO */
.search-category-list {
	scroll-behavior: smooth;
}

.search-category-list.dragging {
	cursor: grabbing;
	scroll-behavior: auto;
}

.search-category-item img,
.search-category-item a {
	pointer-events: none;
}

/* MOBILE */
@media (max-width: 768px) {
	.search-box-custom form {
		width: 100%;
	}

	.search-input-custom {
		height: 40px !important;
		font-size: 14px;
		padding: 0 12px;
	}

	.search-input-custom::placeholder {
		font-size: 14px;
	}

	.search-btn-custom {
		height: 40px !important;
		padding: 0 14px;
		font-size: 11px;
	}

	.search-category-list {
		width: 100%;
		gap: 8px;
		margin-top: 12px;
	}

	.search-category-item {
		font-size: 13px;
		padding: 7px 12px;
	}
}