/*
 * LALUZ UI Patch — MODULE SEARCH
 * Thiết kế lại panel tìm kiếm ở header thành overlay nổi.
 *
 * KHÔNG đổi logic tìm kiếm, KHÔNG đổi link sản phẩm, KHÔNG thay markup của theme.
 * Chỉ đổi trình bày + thêm phím tắt (Esc / mũi tên / click ra ngoài) bằng JS.
 *
 * DOM THẬT (đọc read-only trên laluz.vn ngày 17/08):
 *   div.ic-search                      position:relative
 *     └ div.search-mb.searchFixed      0×0, transform:translateY(10px)  ← containing block
 *          └ form.search-fixed         position:absolute; left:-840px; right:0; w840 h40; z-index:11
 *               ├ button.btn-search    (img icon kính lúp)
 *               ├ input#s.search-field.monaFilterJS-input-product-mobile
 *               └ div.box-result.boxResult   position:absolute; top:25px; max-height:419px
 *                    └ div.inner
 *                         ├ div#search-product-mobile
 *                         │    ├ div.cart-it × N
 *                         │    │    ├ div.cart-img > a.img-link > img
 *                         │    │    └ div.cart-content > a.cart-name
 *                         │    │                       + div.cart-price.monawoo-price
 *                         │    └ div.mona-empty-message-large   (trạng thái rỗng)
 *                         └ a.btn.live-search-btn               ("Xem tất cả")
 *
 * Trạng thái mở của theme:
 *   .search-mb.dropdown-search-fixed   → visibility:visible; opacity:1
 *   .box-result.active-box-result      → visibility:visible; opacity:1
 * Module giữ nguyên hai class này, không thay cơ chế đóng/mở của theme.
 *
 * Lưu ý kỹ thuật:
 *  - Theme đặt CẢ left:-840px lẫn right:0. Khi width khác auto thì left thắng,
 *    nên bắt buộc phải left:auto thì right/width mới có tác dụng.
 *  - Theme còn đặt bottom:-60px. Absolute có cả top lẫn bottom mà height:auto thì
 *    chiều cao tính theo containing block (.search-mb — 0×0) nên panel xẹp còn 2px.
 *    Phải trả bottom về auto.
 *  - .search-mb có transform nên nó là containing block; position:fixed bên trong
 *    KHÔNG neo theo viewport. Vì vậy giữ position:absolute và để search.js đo
 *    và ghi --lz-sf-top / --lz-sf-right thay vì đoán toạ độ.
 *  - .header cũng có transform (theme trượt header lên khi cuộn) nên toạ độ header
 *    thay đổi theo trạng thái cuộn — search.js đo lại mỗi lần mở và mỗi lần cuộn.
 */

/* ================================================================== *
 * 1. Panel
 * ================================================================== */
html body .search-mb .search-fixed {
	left: auto !important;
	right: var( --lz-sf-right, 0px ) !important;
	top: var( --lz-sf-top, 89px ) !important;
	/* Theme đặt bottom:-60px. Absolute có cả top lẫn bottom + height:auto thì
	   chiều cao bị tính theo containing block (.search-mb — 0×0) và panel xẹp
	   còn 2px. Bắt buộc trả bottom về auto thì height:auto mới có tác dụng. */
	bottom: auto !important;
	width: min( 840px, calc( 100vw - 48px ) ) !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;

	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	padding: 0 !important;

	background: var( --lz-paper, #F6F5F2 ) !important;
	border: 1px solid var( --lz-line, #E3E1D9 ) !important;
	border-radius: 6px !important;
	box-shadow: 0 26px 64px rgba( 20, 19, 16, .16 ) !important;
	overflow: hidden !important;
	z-index: 12 !important;
}

/* ================================================================== *
 * 2. Hàng nhập liệu — cao 52px
 * ================================================================== */
html body .search-mb .search-fixed .btn-search {
	order: 1 !important;
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 50px !important;
	height: 52px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

html body .search-mb .search-fixed .btn-search img {
	display: block !important;
	width: 17px !important;
	height: 17px !important;
	opacity: .55 !important;
	filter: grayscale( 1 ) !important;
}

html body .search-mb .search-fixed input.search-field {
	order: 2 !important;
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	height: 52px !important;
	margin: 0 !important;
	padding: 0 8px 0 0 !important;

	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;

	font-family: var( --lz-sans, 'Be Vietnam Pro', sans-serif ) !important;
	font-size: 15px !important;
	font-weight: 300 !important;
	line-height: 52px !important;
	color: var( --lz-ink, #141310 ) !important;
}

/* input là type="search" → Chrome vẽ sẵn một dấu × của trình duyệt,
   đứng cạnh nút đóng của module thành hai dấu × liền nhau. Ẩn cái của trình duyệt. */
html body .search-mb .search-fixed input.search-field::-webkit-search-cancel-button,
html body .search-mb .search-fixed input.search-field::-webkit-search-decoration {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: none !important;
}

html body .search-mb .search-fixed input.search-field::placeholder {
	color: var( --lz-grey, #6E6B63 ) !important;
	opacity: .75 !important;
}

/* Nút đóng — do search.js chèn, gỡ sạch khi tắt module */
html body .search-mb .search-fixed .lz-sf-close {
	order: 3 !important;
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 52px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	color: var( --lz-grey, #6E6B63 ) !important;
	font-size: 17px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: color .18s ease !important;
}

html body .search-mb .search-fixed .lz-sf-close:hover {
	color: var( --lz-ink, #141310 ) !important;
}

/* ================================================================== *
 * 3. Khối kết quả — đưa vào trong dòng chảy để nằm chung một card
 * ================================================================== */
html body .search-mb .search-fixed .box-result {
	order: 4 !important;
}

html body .search-mb .search-fixed .box-result:not( .active-box-result ) {
	display: none !important;
}

html body .search-mb .search-fixed .box-result.active-box-result {
	position: static !important;
	display: block !important;
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	background: transparent !important;
	border: 0 !important;
	border-top: 1px solid var( --lz-line, #E3E1D9 ) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

html body .search-mb .search-fixed .box-result .inner {
	display: block !important;      /* theme để flex-column + gap:16px → hở 16px trước footer */
	gap: 0 !important;
	max-height: 420px !important;   /* 5 dòng × 80px + footer */
	overflow-y: auto !important;
	overscroll-behavior: contain !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

/* ================================================================== *
 * 4. Dòng kết quả — tối đa 5
 * ================================================================== */
html body .search-mb .search-fixed #search-product-mobile > .cart-it:nth-child( n + 6 ) {
	display: none !important;
}

html body .search-mb .search-fixed #search-product-mobile > .cart-it {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	min-height: 80px !important;
	margin: 0 !important;
	padding: 12px 16px !important;
	border: 0 !important;
	border-bottom: 1px solid var( --lz-line, #E3E1D9 ) !important;
	background: transparent !important;
	transition: background .16s ease !important;
}

html body .search-mb .search-fixed #search-product-mobile > .cart-it:last-child {
	border-bottom: 0 !important;
}

html body .search-mb .search-fixed #search-product-mobile > .cart-it:hover,
html body .search-mb .search-fixed #search-product-mobile > .cart-it.lz-sf-active {
	background: rgba( 20, 19, 16, .045 ) !important;
}

html body .search-mb .search-fixed #search-product-mobile .cart-img {
	flex: 0 0 56px !important;
	width: 56px !important;
	height: 56px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border-radius: 3px !important;
	background: #FFFFFF !important;
}

html body .search-mb .search-fixed #search-product-mobile .cart-img .img-link {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

html body .search-mb .search-fixed #search-product-mobile .cart-img img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	mix-blend-mode: multiply !important;
}

html body .search-mb .search-fixed #search-product-mobile .cart-content {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 5px !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

html body .search-mb .search-fixed #search-product-mobile .cart-name {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	margin: 0 !important;
	font-family: var( --lz-sans, 'Be Vietnam Pro', sans-serif ) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	color: var( --lz-ink, #141310 ) !important;
	text-decoration: none !important;
}

html body .search-mb .search-fixed #search-product-mobile .cart-price,
html body .search-mb .search-fixed #search-product-mobile .cart-price .amount,
html body .search-mb .search-fixed #search-product-mobile .cart-price bdi {
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: var( --lz-grey, #6E6B63 ) !important;
}

/* Trạng thái rỗng */
html body .search-mb .search-fixed .mona-empty-message-large {
	margin: 0 !important;
	padding: 26px 16px !important;
	text-align: center !important;
	font-size: 13.5px !important;
	font-weight: 300 !important;
	color: var( --lz-grey, #6E6B63 ) !important;
}

/* ================================================================== *
 * 5. Footer "Xem tất cả"
 * ================================================================== */
html body .search-mb .search-fixed .live-search-btn {
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 15px 16px !important;
	border: 0 !important;
	border-top: 1px solid var( --lz-line, #E3E1D9 ) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	font-size: 10.5px !important;
	font-weight: 500 !important;
	letter-spacing: .2em !important;
	color: var( --lz-ink, #141310 ) !important;
	transition: background .16s ease !important;
}

html body .search-mb .search-fixed .live-search-btn:hover {
	background: rgba( 20, 19, 16, .045 ) !important;
}

/* ================================================================== *
 * 6. Nền mờ — div.lz-sf-scrim do search.js chèn vào <body>
 *    Header có z-index 10 nên scrim để 9: làm mờ trang, không mờ header.
 * ================================================================== */
.lz-sf-scrim {
	/* Thuần trang trí. Đóng-khi-bấm-ra-ngoài do onDocDown trong JS lo.
	   Không bao giờ để lớp nền nuốt thao tác của người dùng. */
	pointer-events: none;
	position: fixed;
	inset: 0;
	z-index: 9;
	background: rgba( 20, 19, 16, .30 );
	opacity: 0;
	transition: opacity .2s ease;
	cursor: default;
}

.lz-sf-scrim.is-on {
	opacity: 1;
}

/* ================================================================== *
 * 7. Mobile / tablet — panel bám mép màn hình thay vì mép icon
 * ================================================================== */
@media ( max-width: 1024px ) {
	html body .search-mb .search-fixed {
		width: calc( 100vw - 24px ) !important;
		border-radius: 8px !important;
	}

	html body .search-mb .search-fixed .box-result .inner {
		max-height: min( 420px, calc( 100vh - var( --lz-sf-top, 89px ) - 140px ) ) !important;
	}

	html body .search-mb .search-fixed #search-product-mobile > .cart-it {
		min-height: 76px !important;
		padding: 10px 14px !important;
	}

	html body .search-mb .search-fixed #search-product-mobile .cart-img {
		flex: 0 0 52px !important;
		width: 52px !important;
		height: 52px !important;
	}

	html body .search-mb .search-fixed #search-product-mobile .cart-name {
		font-size: 15px !important;
	}

	html body .search-mb .search-fixed #search-product-mobile .cart-price,
	html body .search-mb .search-fixed #search-product-mobile .cart-price .amount,
	html body .search-mb .search-fixed #search-product-mobile .cart-price bdi {
		font-size: 14px !important;
	}
}