/*
 * Header (thiết kế Figma, cao 64px). Ghi đè một số giá trị Customizer của Flatsome
 * (chiều cao, font/viết hoa menu…) để giao diện giống nhau ở local và prod.
 * Dùng #header để thắng CSS inline Flatsome sinh ra từ Customizer.
 */

/* ---------- Khung header ---------- */

#header .header-main,
#header.stuck .header-main,
.stuck #header .header-main {
	height: 64px !important;
}

#header .header-bg-color {
	background-color: rgba(251, 249, 245, .9) !important;
}

#header .header-wrapper {
	border-bottom: 1px solid rgba(234, 232, 228, .6);
	box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .04);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

#header .top-divider {
	display: none;
}

#header .header-inner {
	max-width: 1280px;
	padding-right: 24px;
	padding-left: 24px;
}

/* ---------- Logo ---------- */

#header #logo {
	width: auto;
	margin-right: 40px;
}

#header #logo img {
	width: auto;
	height: 40px;
	max-height: 40px !important;
}

/* ---------- Menu chính ---------- */

#header .header-nav-main > li {
	margin: 0 8px;
}

#header .header-nav-main > li:first-child {
	margin-left: 0;
}

#header .header-nav-main > li > a {
	position: relative;
	padding: 4px;
	font-family: 'Be Vietnam Pro', system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	text-transform: none;
	color: #5a403e;
}

#header .header-nav-main > li > a:hover {
	color: #9d0318;
}

/* Mục đang mở (trang hiện tại, hoặc chuyên mục của bài đang xem): đỏ đậm + gạch chân 2px */
#header .header-nav-main > li.active > a,
#header .header-nav-main > li.current-menu-item > a,
#header .header-nav-main > li.current-menu-parent > a,
#header .header-nav-main > li.current-post-ancestor > a {
	font-weight: 700;
	color: #9d0318;
}

#header .header-nav-main > li.active > a::after,
#header .header-nav-main > li.current-menu-item > a::after,
#header .header-nav-main > li.current-menu-parent > a::after,
#header .header-nav-main > li.current-post-ancestor > a::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: #9d0318;
	border-radius: 9999px;
}

/* ---------- Ô tìm kiếm (desktop: rộng 320px, icon bên trái) ---------- */

#header .hide-for-medium .header-search-form {
	width: 320px;
	margin: 0;
}

#header .header-search-form .searchform .flex-row {
	position: relative;
}

#header .header-search-form input[type='search'] {
	height: 36px;
	margin: 0;
	padding: 0 16px 0 37px;
	background: #fff;
	border: 1px solid rgba(234, 232, 228, .6);
	border-radius: 9999px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
	font-family: 'Be Vietnam Pro', system-ui, sans-serif;
	font-size: 13px;
	color: #1b1c1a;
}

#header .header-search-form input[type='search']::placeholder {
	color: #545f73;
	opacity: 1;
}

#header .header-search-form input[type='search']:focus {
	border-color: rgba(157, 3, 24, .35);
	box-shadow: 0 0 0 3px rgba(157, 3, 24, .08);
}

/* Nút gửi thành icon kính lúp nằm trong ô, bên trái (vẫn bấm được để tìm) */
#header .header-search-form .ux-search-submit {
	position: absolute;
	top: 50%;
	left: 6px;
	width: 26px;
	min-height: 0;
	height: 26px;
	margin: 0;
	padding: 0;
	background: url('../img/icon-search.svg') no-repeat center / 13.5px 13.5px;
	border: 0;
	box-shadow: none;
	transform: translateY(-50%);
}

#header .header-search-form .ux-search-submit i {
	display: none;
}

/* ---------- Mobile / tablet (Flatsome ≤849px): logo giữa, icon menu + tìm kiếm hai bên ---------- */

@media (max-width: 849px) {
	#header .header-inner {
		padding-right: 16px;
		padding-left: 16px;
	}

	#header #logo {
		margin-right: 0;
	}

	#header #logo img {
		height: 34px;
		max-height: 34px !important;
	}

	#header .header-search-form {
		width: 100%;
	}
}