/**
 * Popup tìm kiếm trên header (Flatsome: Header → Search → kiểu Lightbox).
 *
 * Nền tối gần như đặc + làm mờ để chỉ còn ô tìm kiếm; nút tắt tròn lớn,
 * luôn thấy rõ. Flatsome mở popup này bằng Magnific Popup với class
 * "off-canvas" giống menu điện thoại, nên mọi selector đều nhắm theo
 * :has(#search-lightbox) để không ảnh hưởng menu / giỏ hàng.
 */

/* ---------- Nền ---------- */
.mfp-bg:has(+ .mfp-wrap #search-lightbox) {
	background: rgba(12, 12, 12, 0.94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.mfp-bg.mfp-ready:has(+ .mfp-wrap #search-lightbox) {
	opacity: 1;
}

/* ---------- Khung nội dung: căn giữa màn hình ---------- */
.mfp-wrap:has(#search-lightbox) .mfp-container {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
}

.mfp-wrap:has(#search-lightbox) .mfp-content {
	width: min(760px, 100%);
	max-width: none;
	margin: 0;
	transform: none;
	background: transparent;
	box-shadow: none;
}

#search-lightbox {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

/* Tiêu đề + gợi ý (CSS thuần — template Flatsome không có hook bên trong). */
#search-lightbox::before {
	content: "Bạn đang tìm gì?";
	display: block;
	margin-bottom: 26px;
	color: #fff;
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

#search-lightbox::after {
	content: "Nhấn Enter để tìm  ·  Esc để đóng";
	display: block;
	margin-top: 18px;
	color: rgba(255, 255, 255, 0.45);
	font-size: 14px;
	white-space: pre;
}

/* ---------- Ô tìm kiếm ---------- */
#search-lightbox .searchform-wrapper {
	margin: 0;
}

#search-lightbox .searchform .flex-row {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

#search-lightbox .searchform .flex-row:focus-within {
	border-color: rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
}

#search-lightbox .search-field {
	height: 64px;
	padding: 0 8px 0 28px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 20px;
	box-shadow: none;
}

#search-lightbox .search-field:focus {
	border: 0;
	background: transparent;
	box-shadow: none;
}

#search-lightbox .search-field::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

#search-lightbox .ux-search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	min-height: 0;
	margin: 0 6px 0 0;
	padding: 0;
	border-radius: 50%;
	background: #fff;
	color: #141414;
	box-shadow: none;
	transition: transform .2s ease;
}

#search-lightbox .ux-search-submit:hover {
	transform: scale(1.06);
}

#search-lightbox .ux-search-submit i {
	font-size: 20px;
}

/* Gợi ý tìm kiếm trực tiếp (nếu bật trong Customizer). */
#search-lightbox .live-search-results {
	margin-top: 10px;
	border-radius: 12px;
	overflow: hidden;
}

/* ---------- Nút tắt ---------- */
.mfp-wrap:has(#search-lightbox) .mfp-close {
	position: fixed;
	top: 24px;
	right: 24px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	opacity: 1;
	transition: background-color .2s ease, color .2s ease, transform .3s ease, border-color .2s ease;
}

.mfp-wrap:has(#search-lightbox) .mfp-close svg {
	width: 22px;
	height: 22px;
	transition: transform .3s ease;
}

.mfp-wrap:has(#search-lightbox) .mfp-close:hover,
.mfp-wrap:has(#search-lightbox) .mfp-close:focus-visible {
	border-color: #fff;
	background: #fff;
	color: #141414;
}

.mfp-wrap:has(#search-lightbox) .mfp-close:hover svg {
	transform: rotate(90deg);
}

/* ---------- Hiệu ứng mở ---------- */
@keyframes nt-search-in {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

@keyframes nt-search-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.mfp-ready #search-lightbox {
	animation: nt-search-in .45s cubic-bezier(.2, .7, .3, 1) both;
}

.mfp-ready:has(#search-lightbox) .mfp-close {
	animation: nt-search-fade .4s ease .15s both;
}

/* Đang mở popup: ẩn nút liên hệ nổi + nút lên đầu trang để không phân tán. */
html:has(.mfp-wrap #search-lightbox) .shc-qc,
html:has(.mfp-wrap #search-lightbox) .back-to-top {
	visibility: hidden;
}

/* ---------- Điện thoại ---------- */
@media (max-width: 549px) {
	.mfp-wrap:has(#search-lightbox) .mfp-close {
		top: 14px;
		right: 14px;
		width: 46px;
		height: 46px;
	}

	#search-lightbox .search-field {
		height: 56px;
		padding-left: 22px;
		font-size: 17px;
	}

	#search-lightbox .ux-search-submit {
		width: 46px;
		height: 46px;
	}

	#search-lightbox::after {
		content: "Nhấn Enter để tìm";
	}
}

@media (prefers-reduced-motion: reduce) {
	.mfp-ready #search-lightbox,
	.mfp-ready:has(#search-lightbox) .mfp-close {
		animation: none;
	}
}