/**
 * NEM Header SAFE
 *
 * Phạm vi: phần đầu website Nệm trên desktop.
 * Nguyên tắc an toàn:
 * - Không đổi ID/class/Walker của menu gốc.
 * - Không can thiệp dropdown/mega menu đang hoạt động.
 * - Mọi quy tắc desktop được khóa từ 992px để không tràn xuống tablet/mobile.
 * - Mobile giữ nguyên cơ chế hiện tại của theme.
 */

.v247-nem-topbar {
	display: none;
}

@media (min-width: 992px) {
	.v247-nem-topbar {
		display: block;
		height: var(--v247-nem-topbar-height);
		background: var(--v247-nem-topbar-bg);
		color: var(--v247-nem-topbar-text);
		font-family: var(--v247-font-family);
		font-size: 11px;
		font-weight: 600;
		line-height: var(--v247-nem-topbar-height);
	}

	.v247-nem-topbar__inner,
	#header-cua-toi > header > .container,
	#header-cua-toi > nav.navbar-main > .container.nav-wrapper {
		box-sizing: border-box;
		width: calc(100% - 30px);
		max-width: var(--v247-nem-header-content-width);
		margin-right: auto;
		margin-left: auto;
	}

	.v247-nem-topbar__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		padding: 0 15px;
	}

	.v247-nem-topbar__item {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		white-space: nowrap;
	}

	.v247-nem-topbar__item i {
		font-size: 12px;
	}

	#header-cua-toi > header {
		height: var(--v247-nem-header-main-height);
		margin-bottom: 0;
		background: var(--v247-nem-header-bg);
		border: 0;
		box-shadow: none;
	}

	#header-cua-toi > header > .container,
	#header-cua-toi > header > .container > .row {
		height: 100%;
	}

	#header-cua-toi > header > .container > .row {
		display: flex;
		align-items: center;
	}

	#header-cua-toi > header > .container > .row > [class*="col-"] {
		float: none;
	}

	#header-cua-toi > header .logo {
		display: flex;
		align-items: center;
		height: var(--v247-nem-header-main-height);
		line-height: normal;
	}

	#header-cua-toi > header .logo a {
		display: inline-flex;
		align-items: center;
		max-width: 100%;
		height: 100%;
	}

	#header-cua-toi > header .logo img {
		display: block;
		width: auto;
		max-width: 100%;
		max-height: var(--v247-nem-logo-max-height);
	}

	#header-cua-toi > header .box-search,
	#header-cua-toi > header .box-right-top-header {
		padding-top: 0;
		padding-bottom: 0;
	}

	#header-cua-toi > header .box-search .box-input {
		display: flex;
		align-items: stretch;
		height: var(--v247-nem-search-height);
		border: 1px solid #cfa994;
		border-radius: 5px;
		background: #fffdf8;
		overflow: hidden;
	}

	#header-cua-toi > header .box-search .box-input .input-group-search {
		float: none;
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	#header-cua-toi > header .box-search .box-input input[type="text"],
	#header-cua-toi > header .box-search .box-input input[type="search"] {
		height: 30px;
		padding: 0 10px;
		text-indent: 0;
		font-size: 12px;
		line-height: 30px;
		color: var(--v247-nem-header-text);
	}

	#header-cua-toi > header .box-search .box-input input::placeholder {
		color: #92776b;
		opacity: 1;
	}

	#header-cua-toi > header .box-search .box-input .btn-searchbox {
		flex: 0 0 44px;
		width: 44px;
		height: 30px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: var(--v247-nem-nav-bg);
		color: #ffffff;
	}

	#header-cua-toi > header .box-search .box-input .btn-searchbox i {
		font-size: 14px;
	}

	#header-cua-toi > header .box-right-top-header {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: var(--v247-nem-header-main-height);
		margin: 0;
		color: var(--v247-nem-header-text);
	}

	#header-cua-toi > header .box-right-top-header > li {
		margin: 0 0 0 14px;
		vertical-align: middle;
	}

	#header-cua-toi > header .support-phone-header a,
	#header-cua-toi > header .icon-control-header li > a {
		display: inline-flex;
		align-items: center;
		padding: 0;
		color: var(--v247-nem-header-text);
		font-size: 12px;
		line-height: 1.2;
		text-decoration: none;
	}

	#header-cua-toi > header .support-phone-header i {
		float: none;
		flex: 0 0 var(--v247-nem-control-size);
		width: var(--v247-nem-control-size);
		height: var(--v247-nem-control-size);
		margin-right: 6px;
		line-height: var(--v247-nem-control-size);
		background: var(--v247-nem-header-control-bg);
		color: var(--v247-nem-header-text);
	}

	#header-cua-toi > header .support-phone-header span {
		padding: 0;
	}

	#header-cua-toi > header .icon-control-header li > a {
		padding-right: 0;
	}

	#header-cua-toi > nav.navbar-main.navbar {
		min-height: var(--v247-nem-header-nav-height);
		height: var(--v247-nem-header-nav-height);
		margin: 0;
		background: var(--v247-nem-nav-bg);
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	#header-cua-toi > nav.navbar-main > .container.nav-wrapper,
	#header-cua-toi > nav.navbar-main > .container.nav-wrapper > .row,
	#header-cua-toi > nav.navbar-main #navbar,
	#header-cua-toi > nav.navbar-main #navbar > .row,
	#header-cua-toi > nav.navbar-main #navbar > .row > [class*="col-"] {
		height: var(--v247-nem-header-nav-height);
	}

	#header-cua-toi > nav.navbar-main .navbar-nav {
		display: flex;
		height: var(--v247-nem-header-nav-height);
		margin: 0;
		padding: 0;
	}

	#header-cua-toi > nav.navbar-main .navbar-nav > li {
		float: none;
		min-width: 0;
		height: var(--v247-nem-header-nav-height);
		border-right: 1px solid rgba(255, 255, 255, 0.15);
	}

	#header-cua-toi > nav.navbar-main .navbar-nav > li:last-child {
		border-right: 0;
	}

	#header-cua-toi > nav.navbar-main.navbar-default .navbar-nav > li > a,
	#header-cua-toi > nav.navbar-main.navbar-default .navbar-nav > li > a:focus,
	#header-cua-toi > nav.navbar-main.navbar-default .navbar-nav > li > a:hover,
	#header-cua-toi > nav.navbar-main.navbar-default .navbar-nav > .active > a,
	#header-cua-toi > nav.navbar-main.navbar-default .navbar-nav > .active > a:focus,
	#header-cua-toi > nav.navbar-main.navbar-default .navbar-nav > .active > a:hover,
	#header-cua-toi > nav.navbar-main.navbar-default .navbar-nav > .open > a,
	#header-cua-toi > nav.navbar-main.navbar-default .navbar-nav > .open > a:focus,
	#header-cua-toi > nav.navbar-main.navbar-default .navbar-nav > .open > a:hover {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: var(--v247-nem-header-nav-height);
		min-width: 0;
		padding: 0 8px;
		line-height: 1.2;
		font-size: var(--v247-nem-menu-font-size);
		font-weight: 600;
		color: var(--v247-nem-nav-text);
		background: transparent;
		text-align: center;
		white-space: nowrap;
	}

	#header-cua-toi > nav.navbar-main.navbar-default .navbar-nav > li > a:hover,
	#header-cua-toi > nav.navbar-main.navbar-default .navbar-nav > li > a:focus-visible,
	#header-cua-toi > nav.navbar-main.navbar-default .navbar-nav > .active > a,
	#header-cua-toi > nav.navbar-main.navbar-default .navbar-nav > .open > a {
		color: var(--v247-nem-nav-text);
		background: var(--v247-nem-nav-hover-bg);
	}

	/* Dropdown/mega menu giữ nguyên toàn bộ class, ID và Walker của bản gốc. */
	#header-cua-toi #main-top-menu .menu-item-has-children:hover > .dropdown-menu,
	#header-cua-toi #main-top-menu .menu-item-has-children:focus-within > .dropdown-menu {
		display: block;
	}
}

/*
 * Mobile/tablet header guard for Nệm logo.
 * The Nệm demo logo has a wider natural size than the previous site logo.
 * Keep the existing mobile HTML/menu/JS intact and constrain only its box/image.
 */
@media (max-width: 991px) {
	#header-cua-toi > nav.navbar-main.navbar,
	#header-cua-toi > nav.navbar-main > .container.nav-wrapper,
	#header-cua-toi > nav.navbar-main > .container.nav-wrapper > .row,
	#header-cua-toi > nav.navbar-main .navbar-header,
	#header-cua-toi > nav.navbar-main .flexbox-grid-default {
		min-height: var(--v247-mobile-header-offset);
		height: var(--v247-mobile-header-offset);
	}

	#header-cua-toi > nav.navbar-main .navbar-header {
		position: relative;
		width: 100%;
	}

	#header-cua-toi > nav.navbar-main .flexbox-grid-default {
		display: flex;
		align-items: center;
		width: 100%;
		margin: 0;
	}

	#header-cua-toi > nav.navbar-main .sfix-logo {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: var(--v247-mobile-header-offset);
		margin: 0;
		padding: 0 100px 0 58px;
		min-width: 0;
	}

	#header-cua-toi > nav.navbar-main .logo-mobile {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 210px;
		height: var(--v247-mobile-header-offset);
		margin: 0 auto;
		padding: 0;
	}

	#header-cua-toi > nav.navbar-main .logo-mobile > a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	#header-cua-toi > nav.navbar-main .logo-mobile img {
		display: block;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 44px;
		object-fit: contain;
	}

	#header-cua-toi > nav.navbar-main .sfix-right {
		top: 5px;
		right: 8px;
	}
}