/* --- 1. XỬ LÝ THANH GẠCH CHÂN (LINE-GROW) --- */

/* Mặc định ẩn thanh gạch khi hover */
.header-bottom-nav.nav-line-grow > li:hover > a:before {
	opacity: 0 !important;
	transform: scaleX(0) !important;
	visibility: hidden !important;
}
.header-bottom-nav.nav-line-grow > li.active > a:before {
	opacity: 1 !important;
	visibility: visible !important;
	margin-top: -6px;
	background-color: var(--color-main) !important;
}

.header-bottom-nav .menu-item {
	margin: 0px !important;
	padding: 0px 30px;
	border-right: 1px solid #660d21;
}

.header-bottom-nav .menu-item.active,
.header-bottom-nav .menu-item.active > a {
	background: #fced03 !important;
	color: var(--color-main) !important;
}

/* Khi Hover vào mục menu (Sử dụng dấu > để chỉ tác động vào chữ menu cha) */
.header-bottom-nav .menu-item:hover {
	background: var(--bright-yellow) !important;
	border-left:1px solid #660d21 !important;
	border-right:1px solid #660d21 !important;
}

.header-bottom-nav .menu-item:hover > a {
	color: var(--color-main) !important;
}


/* --- 3. XỬ LÝ MENU CON (SUB-MENU / DROPDOWN) --- */

/* Ép màu chữ menu con luôn là màu đen, không bị đỏ theo menu cha */
.header-bottom-nav .menu-item .sub-menu li a {
	color: var(--color-black) !important; 
	background: var(--color-white) !important; /* Đảm bảo nền menu con trắng */
	padding: 10px 15px !important;
	text-transform: none !important; /* Thường menu con không viết hoa hết */
}

/* Hover vào từng mục nhỏ trong menu con mới đổi màu đỏ */
.header-bottom-nav .menu-item .sub-menu li a:hover {
	color: var(--color-main) !important;
	background: #f7f7f7 !important; /* Nền xám nhẹ khi hover mục con */
}

/* Xóa padding thừa của li trong sub-menu */
.header-bottom-nav .menu-item ul li {
	padding: 0px !important;
	border: none !important; /* Xóa gạch đứng ở menu con nếu có */
}

/* Đảm bảo khi hover vào mục cha, menu con không bị thừa nền vàng */
.header-bottom-nav .menu-item:hover ul li {
	background: none !important;
}