.header-area{
    background-color: #fff;
}
.site-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.main-navigation ul li a{
    color: #FFF;
    padding: 10px 15px;
}
.main-navigation ul li a:hover{
    color: #d91b5c;
}

.normal-btn:hover a{
    color: #f5f5f5;
}
.menu-container{
    background: #21383e;
    position: relative;
}
.login-area{
    flex-shrink: 0;
}
.notification-bell{
    flex-shrink: 0;
}
/* Custom Search Form */
.custom-search-form {
  max-width: 400px;
  margin: 20px auto;
}

.search-input-wrapper {
  position: relative;
  display: block;
}

.search-area .custom-search-field {
  width: 100%;
  padding: 10px 40px 10px 15px; 
  border: 1px solid #ccc;
  border-radius: 50px;
  font-size: 16px;
  background: #f3f2f2 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M 20.5 6 C 12.509634 6 6 12.50964 6 20.5 C 6 28.49036 12.509634 35 20.5 35 C 23.956359 35 27.133709 33.779044 29.628906 31.75 L 39.439453 41.560547 A 1.50015 1.50015 0 1 0 41.560547 39.439453 L 31.75 29.628906 C 33.779044 27.133709 35 23.956357 35 20.5 C 35 12.50964 28.490366 6 20.5 6 z M 20.5 9 C 26.869047 9 32 14.130957 32 20.5 C 32 23.602612 30.776198 26.405717 28.791016 28.470703 A 1.50015 1.50015 0 0 0 28.470703 28.791016 C 26.405717 30.776199 23.602614 32 20.5 32 C 14.130953 32 9 26.869043 9 20.5 C 9 14.130957 14.130953 9 20.5 9 z" fill="gray"/></svg>') no-repeat 96% center;
  background-size: 18px 18px;
  transition: border-color 0.3s ease;
}

.custom-search-field:focus {
  border-color: #d91b5c;
  outline: none;
}
.search-area{
    margin-left: auto;
    width: 350px;
}
/* ----- Nút hamburger ----- */
.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px;
	position: relative;
}

.menu-toggle .hamburger {
	width: 25px;
	height: 3px;
	background: #333;
	display: block;
	position: relative;
	transition: all 0.3s ease;
}

.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after {
	content: '';
	position: absolute;
	width: 25px;
	height: 3px;
	background: #333;
	left: 0;
	transition: all 0.3s ease;
}

.menu-toggle .hamburger::before {
	top: -8px;
}

.menu-toggle .hamburger::after {
	top: 8px;
}

/* ----- Menu Mobile Wrapper ----- */
.menu-mobile {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 10000;
	padding: 20px;
	overflow-y: auto;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.admin-bar .menu-mobile{
    top: 45px;
}

.menu-mobile.active {
	display: block;
}

/* ----- Close Button ----- */
.menu-close {
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: 30px;
	color: #333;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 10001;
    padding: 0;
}

/* ----- Menu list ----- */
.mobile-menu-list {
	list-style: none;
	padding: 0;
	margin: 30px 0 0;
}

.mobile-menu-list li {
	border-bottom: 1px solid #eee;
}

.mobile-menu-list li a {
	display: block;
	padding: 15px 10px;
	color: #333;
	text-decoration: none;
	font-weight: 500;
	transition: background 0.3s;
}

/* ----- Submenu ----- */
.mobile-menu-list .sub-menu li:last-child {
    border-bottom: none;
}
.mobile-menu-list .sub-menu {
	padding-left: 0;
    list-style: none;
}

.mobile-menu-list li.menu-item-has-children > a::after {
	content: '▼';
	float: right;
	font-size: 12px;
	margin-left: 10px;
}

/* Show submenu when parent is active (optional toggle logic can be added in JS) */
.mobile-menu-list li.open > .sub-menu {
	display: block;
}

.login-area-mobile{
    display: none;
    text-align: right;
    padding: 10px 0;
}
.wrapper-login-area a{
    color: #FFF;
    text-decoration: underline;
}

.area-mobile{
    display: none;
}

.mobile-search-form {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    padding: 20px;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 999;
    background: #fff;
    text-align: center;
}
.mobile-search-form .search-field,
.mobile-search-form button[type="submit"] {
    padding: 5px 10px;
}


.mobile-search-form.active {
  display: block;
}
.mobile-search-form {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-search-form.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-search-toggle{
    display: none;
    cursor: pointer;
}
#desktop-header-section{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-profile-link {
  display: inline-block;
  background-color: #d91b5c;
  color: #fff;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 50px;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 3px 8px rgba(217, 27, 92, 0.2);
}

.user-profile-link:hover {
  background-color: #b3154c;
  color: #fff;
}

/* Chỉ hiển thị ở mobile */
@media (max-width: 599px) {
	.menu-toggle {
		display: block;
	}

	.menu-mobile {
		display: none;
	}

	.menu-mobile.active {
		display: block;
	}
    .login-area{
        display: none;
    }
    .main-navigation{
        display: none;
    }
    .login-area-mobile{
        display: block;
    }
    .site-branding img{
        max-width: 225px;
        height: auto;
    }
    .mobile-search-toggle{
        display: block;
    }
    .search-area{
        display: none;
    }
    .area-mobile{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-left: auto;
    }
}