/*
 * LALUZ UI Patch 1.0.2 — MODULE HEADER (desktop một hàng)
 *
 * Bố cục đích: logo | navigation menu | right-side icons.
 *
 * assets/js/header-one-row.js chuyển NGUYÊN KHỐI .hd-down vào .hd-mid-inner
 * (đặt trước .hd-mid-right) rồi gắn class .lz-hd-merged lên .header.
 *
 * ── VÌ SAO CHUYỂN .hd-down CHỨ KHÔNG PHẢI .nav-menu ────────────────────────
 * Đọc CSS thật của laluz.vn: 20 rule viết theo chuỗi hậu duệ bắt đầu bằng
 * `.header .header-inner .hd-down .hd-down-inner .nav-menu …`, trong đó có
 * `position:absolute; top:131%` của submenu thường và trạng thái hover mở submenu.
 * Nhấc riêng .nav-menu ra là mất hết 20 rule. Không rule nào dùng combinator con
 * trước .hd-down nên chuyển cả khối thì chuỗi hậu duệ vẫn đúng.
 *
 * ── BA RỦI RO ĐÃ ĐO TRÊN TRANG THẬT (preview phía client, không ghi gì) ────
 * 1. overflow / z-index của tổ tiên mới:
 *    .hd-mid-inner, .hd-mid > .container, .hd-mid đều overflow:visible,
 *    z-index:auto, isolation:auto, không transform/filter/clip-path/contain
 *    — hồ sơ giống hệt tổ tiên cũ. Mega menu không bị cắt.
 *    Đo khi hover thật: mega rect 212→1439 trong viewport 1680, không tràn hai mép,
 *    offsetParent vẫn là .nav-menu.
 * 2. Chật ở dải hẹp:
 *    Menu cần 785px (đo thật: item span 425→1210). Chỗ trống =
 *    min(1200, vw-30) - 134 (logo) - 174 (icon) - 2×32 (gap).
 *    vw 1025 → 623px (thiếu 162) · 1100 → 698 (thiếu 87) · 1200 → 798 (chỉ dư 13)
 *    vw 1240 → 828px (dư 43) ✔
 *    => breakpoint đặt 1240px, KHÔNG phải 1025px. Dưới mức đó giữ 2 tầng như hiện tại.
 *    Thêm column-gap co giãn để còn dư địa nếu sau này thêm mục menu.
 * 3. Chiều cao header fixed:
 *    .header bị set CỨNG height:165px, còn main.spc-hd có padding-top 163px bù trừ.
 *    Nếu để .header-inner co lại còn 120px thì thừa ra dải trống 45px trong header
 *    (đã tái hiện được). Cách xử lý: GIỮ NGUYÊN chiều cao header, cho .hd-mid giãn
 *    lấp phần trống bằng flex-column. Kết quả đo: header vẫn 165px, dải trống 0px,
 *    khoảng cách header→nội dung vẫn +30px y như trước khi gộp, main không bị đụng.
 *
 * ── PHẠM VI ────────────────────────────────────────────────────────────────
 * Chỉ chạm wrapper: .header-inner, .hd-up, .hd-mid, .hd-mid > .container,
 * .hd-mid-inner, .logo, .hd-mid-right, .hd-down, .hd-down > .container.
 * Đúng MỘT khai báo chạm vào bên trong menu: `column-gap` trên .menu-list —
 * thuần khoảng cách, không phải thuộc tính định vị. KHÔNG có rule nào đặt
 * position/top/left/width cho .menu-item, .menu-mega hay .nav-menu, nên
 * containing block của mega menu và submenu giữ nguyên .nav-menu như hiện tại.
 *
 * Mọi rule khoá sau .lz-hd-merged: JS không chạy thì file này im lặng tuyệt đối.
 */

@media (min-width: 1240px) {

	/* --- giữ nguyên chiều cao header, cho hàng giữa giãn ra lấp chỗ (rủi ro 3) --- */
	.header.lz-hd-merged .header-inner {
		display: flex !important;
		flex-direction: column !important;
		height: 100% !important;
	}

	.header.lz-hd-merged .hd-up {
		flex: 0 0 auto !important;
	}

	.header.lz-hd-merged .hd-mid {
		flex: 1 1 auto !important;
		display: flex !important;
		align-items: center !important;
		border-bottom: 1px solid var(--lz-line, #E3E1D9) !important;
	}

	.header.lz-hd-merged .hd-mid > .container {
		width: 100% !important;
	}

	/* --- hàng header: logo | nav | icon --- */
	.header.lz-hd-merged .hd-mid-inner {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		flex-wrap: nowrap !important;
		gap: 32px !important;
	}

	.header.lz-hd-merged .hd-mid-inner > .logo {
		flex: 0 0 auto !important;
		margin: 0 !important;
	}

	.header.lz-hd-merged .hd-mid-inner > .hd-mid-right {
		flex: 0 0 auto !important;
	}

	/* --- khối nav thành cột giữa --- */
	.header.lz-hd-merged .hd-mid-inner > .hd-down {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		width: auto !important;
		background: transparent !important;
		border-top: 0 !important;
		border-bottom: 0 !important;
	}

	/* .container lồng trong .container: bỏ giới hạn và padding của cái bên trong */
	.header.lz-hd-merged .hd-mid-inner > .hd-down > .container {
		max-width: none !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Khoảng cách giữa các mục menu co giãn theo bề rộng (rủi ro 2).
	   Ở >=1667px giá trị bằng đúng 40px như theme hiện dùng. */
	.header.lz-hd-merged .hd-mid-inner > .hd-down .nav-menu > .menu-list {
		column-gap: clamp(20px, 2.4vw, 40px) !important;
	}
}

/*
 * Dưới 1240px JS đã trả .hd-down về đúng vị trí gốc. Vì mọi rule đều nằm trong
 * media query trên, tablet và mobile không nhận bất kỳ khai báo nào từ file này.
 */