/* ==================================================================
 * Header: top bar thông báo, thanh chính (search – logo – tài khoản/giỏ), menu
 * Một hệ thống chung: chữ 13px ở top bar, control cao 44px, bo tròn pill,
 * icon trong nút tròn nền xám nhạt, hover teal.
 * ================================================================== */

:root {
	--cv-header-control: 44px;
}

/* ---- top bar ---- */

#top-bar.header-top {
	background-color: var(--cv-dark);
	font-size: 13px;
	min-height: 36px;
}

#top-bar .flex-row {
	min-height: 36px;
}

#top-bar .nav {
	gap: 22px;
}

#top-bar .nav>li {
	margin: 0;
}

#top-bar .nav>li>a,
#top-bar .html_topbar_left,
.cv-announce {
	font-family: var(--cv-font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 36px;
	letter-spacing: 0;
	text-transform: none;
	padding: 0;
	color: rgba(255, 255, 255, .72);
}

#top-bar .nav>li>a:hover {
	color: #fff;
}

/* bỏ gạch phân cách giữa các link */
#top-bar .nav-divided>li+li>a:after,
#top-bar .nav>li.header-divider {
	display: none;
}

.cv-announce {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
}

.cv-announce strong {
	color: #6fe0d6;
	font-weight: 600;
}

.cv-announce strong:before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 8px;
	border-radius: 50%;
	background: #6fe0d6;
	vertical-align: middle;
	box-shadow: 0 0 0 3px rgba(111, 224, 214, .2);
}

/* icon mạng xã hội */
#top-bar .social-icons {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
}

#top-bar .social-icons .icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: rgba(255, 255, 255, .72);
	opacity: 1;
	transition: background-color .2s var(--cv-ease), color .2s var(--cv-ease);
}

#top-bar .social-icons .icon:hover {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

#top-bar .social-icons .icon i {
	font-size: 13px;
	top: 0;
}

/* ---- thanh chính ---- */

#masthead {
	border-bottom: 1px solid var(--cv-border);
}

#masthead .header-inner {
	gap: 24px;
}

/* đường kẻ trong .header-bottom của Flatsome (trùng với viền dưới #masthead) */
#wide-nav .top-divider,
#masthead .top-divider {
	display: none;
}

/* ---- ô tìm kiếm (header + mọi [search] trong trang) ---- */

.searchform .flex-row.relative {
	align-items: center;
	height: var(--cv-header-control);
	padding: 0 4px 0 0;
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius-pill);
	background: var(--cv-surface-alt);
	transition: border-color .2s var(--cv-ease), background-color .2s var(--cv-ease), box-shadow .2s var(--cv-ease);
}

.searchform .flex-row.relative:focus-within {
	border-color: var(--cv-primary);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(26, 167, 156, .14);
}

.searchform .flex-row.relative>.flex-col {
	height: 100%;
}

.searchform .search-field,
.searchform .search-field:focus,
.header-search-form .searchform-wrapper .search-field {
	height: 100%;
	margin: 0;
	padding: 0 8px 0 20px;
	border: 0;
	border-radius: var(--cv-radius-pill) 0 0 var(--cv-radius-pill);
	background: transparent;
	box-shadow: none;
	font-size: 14px;
	color: var(--cv-text);
}

.searchform .search-field::placeholder {
	color: var(--cv-text-subtle);
	opacity: 1;
}

/* nút kính lúp: icon trơn trong ô (form-flat của Flatsome ép nền trong suốt + currentColor bằng !important) */
.searchform .flex-col .ux-search-submit.button,
.searchform .flex-col .ux-search-submit.button.secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 36px;
	min-height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	line-height: 1;
	box-shadow: none;
}

.searchform .flex-col .ux-search-submit.button:hover {
	color: var(--cv-primary) !important;
}

.searchform .ux-search-submit i {
	display: block;
	top: 3px;
	margin: 0;
	font-size: 17px !important;
	line-height: 1;
}

/* nền / màu chữ cho mọi biến thể form (kể cả .dark .form-flat có !important) */
.searchform-wrapper .searchform {
	color: var(--cv-text);
}

.form-flat .searchform .search-field,
.dark .form-flat .searchform .search-field {
	background-color: transparent !important;
}

.dark .form-flat .searchform .search-field::placeholder {
	color: var(--cv-text-subtle);
}

.header-search-form-wrapper {
	width: 100%;
	max-width: 380px;
}

.header-search-form {
	flex: 1 1 auto;
}

/* gợi ý tìm kiếm (live search) – khung rỗng khi chưa gõ, chỉ hiện khi có gợi ý */
.live-search-results:not(:has(.autocomplete-suggestion)) {
	display: none;
}

.live-search-results {
	margin-top: 8px;
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius);
	box-shadow: var(--cv-shadow-lg);
	overflow: hidden;
	background: #fff;
}

.live-search-results .autocomplete-suggestion {
	padding: 10px 14px;
	border-color: var(--cv-border);
	font-size: 14px;
}

.live-search-results .autocomplete-selected {
	background: var(--cv-primary-soft);
}

/* lightbox tìm kiếm (mobile) */
#search-lightbox .searchform .flex-row.relative {
	height: 52px;
	background: #fff;
	border-color: #fff;
}

#search-lightbox {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
}

#search-lightbox .searchform .search-field {
	font-size: 16px;
}

#search-lightbox .live-search-results {
	text-align: left;
	color: var(--cv-text);
}

/* .dark của lightbox làm giá trong gợi ý thành chữ trắng */
#search-lightbox .live-search-results .amount {
	color: var(--cv-text-subtle);
}

#search-lightbox .live-search-results ins .amount,
#search-lightbox .live-search-results .price>.amount {
	color: var(--cv-accent);
}

/* ---- tài khoản + giỏ hàng: nút icon tròn cùng kiểu ---- */

.header-main .header-nav-main.nav-right {
	gap: 8px;
}

.header-main .header-nav-main.nav-right>li {
	margin: 0;
}

.header-main .account-item>a,
.header-main .cart-item>a.header-cart-link,
.header-main .mobile-nav .header-search>a,
.header-main .mobile-nav .cart-item>a {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: 0;
	color: var(--cv-text);
}

.header-main .account-item>a>i,
.header-main .cart-item .header-cart-link>i,
.header-main .mobile-nav .header-search>a>i,
.header-main .mobile-nav .cart-item>a>i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--cv-header-control);
	height: var(--cv-header-control);
	margin: 0;
	border-radius: 50%;
	background: var(--cv-surface-alt);
	color: var(--cv-text);
	font-size: 19px;
	top: 0;
	transition: background-color .2s var(--cv-ease), color .2s var(--cv-ease);
}

.header-main .account-item>a:hover>i,
.header-main .account-item.active>a>i,
.header-main .cart-item .header-cart-link:hover>i,
.header-main .cart-item.current-dropdown .header-cart-link>i,
.header-main .mobile-nav .header-search>a:hover>i {
	background: var(--cv-primary-soft);
	color: var(--cv-primary);
}

/* số lượng trong giỏ */
.header-main [data-icon-label]:after {
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--cv-radius-pill);
	background: var(--cv-accent);
	color: #fff;
	font-family: var(--cv-font-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	box-shadow: 0 0 0 2px #fff;
	transform: none;
}

/* tổng tiền cạnh icon giỏ */
.header-cart-link .header-cart-title {
	order: 2;
	font-family: var(--cv-font-heading);
	font-size: 15px;
	font-weight: 600;
	color: var(--cv-text);
	text-transform: none;
	letter-spacing: 0;
}

.header-cart-link .header-cart-title .cart-price {
	font-weight: 600;
	color: var(--cv-text);
}

.header-cart-link>i {
	order: 1;
}

/* dropdown giỏ mini */
.cart-item .nav-dropdown {
	min-width: 300px;
	padding: 18px;
}

.cart-item .widget_shopping_cart .button {
	margin-bottom: 8px;
}

/* ---- menu chính ---- */

#wide-nav.header-bottom {
	border-bottom: 1px solid var(--cv-border);
	min-height: 52px;
}

.header-bottom-nav.nav {
	gap: 36px;
}

.header-bottom-nav.nav>li {
	margin: 0;
}

#wide-nav .header-bottom-nav>li>a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 52px;
	padding: 0;
	font-family: var(--cv-font-heading);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cv-text);
}

#wide-nav .header-bottom-nav>li>a:hover,
#wide-nav .header-bottom-nav>li.active>a,
#wide-nav .header-bottom-nav>li.current-menu-item>a,
#wide-nav .header-bottom-nav>li.current-menu-ancestor>a,
#wide-nav .header-bottom-nav>li.current-dropdown>a {
	color: var(--cv-primary);
}

/* trang sản phẩm: Flatsome gắn .active cho mọi danh mục cha của sản phẩm (nhiều mục sáng cùng lúc)
 * -> không đánh dấu, chỉ giữ hiệu ứng hover / dropdown đang mở */
.single-product #wide-nav .header-bottom-nav>li.active:not(:hover):not(.current-dropdown)>a {
	color: var(--cv-text);
}

.single-product #wide-nav .header-bottom-nav.nav-line-bottom>li.active:not(:hover):not(.current-dropdown)>a:before {
	opacity: 0;
}

.header-bottom-nav.nav-line-bottom>li>a:before {
	bottom: 0;
	top: auto;
	/* height: 2px; */
	height: 0;
	border-radius: 2px 2px 0 0;
	background-color: var(--cv-primary);
}

.header-bottom-nav .icon-angle-down {
	margin: 0;
	font-size: 12px;
	opacity: .55;
	transition: transform .2s var(--cv-ease), opacity .2s var(--cv-ease);
}

.header-bottom-nav>li.current-dropdown .icon-angle-down,
.header-bottom-nav>li:hover .icon-angle-down {
	opacity: 1;
	transform: rotate(180deg);
}

/* dropdown + mega menu */
.nav-dropdown {
	border: 1px solid var(--cv-border) !important;
	border-radius: var(--cv-radius);
	box-shadow: var(--cv-shadow-lg) !important;
	padding: 10px !important;
}

.nav-dropdown-has-arrow li.has-dropdown:before,
.nav-dropdown-has-arrow li.has-dropdown:after {
	display: none;
}

.nav-dropdown>li>a,
.nav-dropdown .ux-menu-link__link {
	padding: 9px 14px;
	border-radius: var(--cv-radius-sm);
	font-family: var(--cv-font-body);
	font-size: 14px;
	color: var(--cv-text-muted);
	text-transform: none;
	transition: background-color .15s var(--cv-ease), color .15s var(--cv-ease);
}

.nav-dropdown-default>li>a {
	border-bottom: 0 !important;
}

.nav-dropdown>li>a:hover,
.nav-dropdown .ux-menu-link__link:hover {
	/* background: var(--cv-primary-soft); */
	color: var(--cv-primary);
}

.nav-dropdown .nav-column>li>a,
.nav-dropdown h4,
.nav-dropdown .menu-item-has-children>a {
	font-family: var(--cv-font-heading);
	font-weight: 600;
	color: var(--cv-text);
	text-transform: none;
}

.menu-item-has-block .nav-dropdown {
	padding: 20px 14px;
	border: 0;
}

.nav-dropdown h4 {
	margin: 0 0 6px;
	padding: 0 14px;
	font-size: 14px;
}

.nav-dropdown .ux-menu-link__link {
	border-bottom-color: transparent !important;
	min-height: 0;
}

.nav-dropdown .ux-menu-link__icon {
	display: none;
}

.nav-dropdown .ux-menu-link__icon+.ux-menu-link__text {
	padding-left: 0;
}

/* nhãn New/Hot/Sale trên menu */
.label-new.menu-item>a:after,
.label-hot.menu-item>a:after,
.label-sale.menu-item>a:after,
.label-popular.menu-item>a:after {
	font-family: var(--cv-font-body);
	border-radius: var(--cv-radius-pill);
	font-weight: 600;
}

/* sticky */
.stuck #masthead {
	box-shadow: var(--cv-shadow-sm);
}

/* ---- mobile ---- */

@media (max-width: 849px) {
	:root {
		--cv-header-control: 40px;
	}

	#top-bar .html_topbar_left {
		justify-content: center;
		font-size: 12px;
	}

	.cv-announce {
		font-size: 12px;
	}

	#masthead .header-inner {
		gap: 8px;
	}

	.header-main .mobile-nav.nav-right {
		gap: 6px;
	}

	.header-main .mobile-nav>li {
		margin: 0;
	}

	.header-main .nav-icon a,
	.header-main .mobile-nav .icon-menu {
		color: var(--cv-text);
	}

	.header-main .mobile-nav .icon-menu {
		font-size: 22px;
	}

	.header-main .mobile-nav .header-search>a>i,
	.header-main .mobile-nav .cart-item>a>i {
		font-size: 17px;
	}

	.header-main .mobile-nav .header-cart-title {
		display: none;
	}
}

/* off-canvas menu mobile */
.off-canvas .sidebar-menu,
.off-canvas-left .mfp-content {
	background: #fff;
}

.off-canvas .nav-vertical>li>a {
	font-family: var(--cv-font-heading);
	font-weight: 500;
	font-size: 15px;
	text-transform: none;
	color: var(--cv-text);
}

.off-canvas .nav-vertical li li>a {
	font-family: var(--cv-font-body);
	font-size: 14px;
	color: var(--cv-text-muted);
	text-transform: none;
}

.off-canvas .nav-sidebar.nav-vertical>li+li {
	border-top-color: var(--cv-border);
}

.off-canvas .searchform {
	padding: 4px 0;
}