.header {position:fixed !important; background: var(--header); right:0; left:0; top:0; z-index:10;  
        box-shadow:0px 0px 10px var(--box-shadow);  
        }
.header .container {padding:0px 40px; height:56px; display:flex; gap:10px; justify-content:space-between; }
.logo {display:flex; align-items:center; text-decoration:none; gap:8px; font-size:22px; font-weight:400; letter-spacing:1px; 
       color:#c5c5c5;}
.logo img {height:40px; display:block;}
.logo span {background:#0000004a; border-radius:6px; color:#d6ff00; padding:1px 0px 1px 4px; letter-spacing:0px; overflow:hidden;
           height:28px; display:flex; align-items:center}
.logo span i {font-style:italic; font-weight:600; margin-right:-5px} 
html[data-theme="light"] .logo {color:var(--text)}
/*----- menu -----*/
.top-menu {display:flex;  position:relative;
    justify-content:space-between;  gap:10px; right:0; align-items:center; width:100%;}
.top-menu::-webkit-scrollbar {display: none;} 

/*----- NAV -----*/
.nav {display:flex; width:100%; justify-content:center; position:relative; z-index:1;}
.nav .nav-dropdown button, .nav a {border:0; text-decoration:none; display:flex; align-items:center;
                                  gap:10px; white-space:nowrap; color:var(--text-muted); font-size:15px; 
                                  cursor:pointer; transition: all 0.3s;}
.nav .nav-dropdown button, .nav > a {padding:8px 12px; border-radius:12px;
                                    position:relative; z-index:1;}
.nav .nav-dropdown {position:relative;}
.nav-dropdown-menu {display:flex; flex-direction:column; position:absolute; 
                   border-radius:12px; padding:8px; top: calc(100% + 4px);
                   min-width:140px;background: var(--bg-card);
                   border: 1px solid var(--border);
                   border-radius: var(--radius-md);
                   }
.nav-dropdown-menu:before {content:""; position:absolute; height:10px; top:-10px;
                            left:0px; right:0px;}
.nav-dropdown-menu a {padding:10px 12px; border-radius:12px; font-size:14px;}
.nav-dropdown-menu a i {font-weight:var(--top-menu-icon); color:var(--top-menu-lime);}
.nav-dropdown-section {margin:8px 4px 4px 4px;} 
.nav-special {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
             border-bottom:1px solid var(--border); padding-bottom:16px; margin-bottom:0px;
            }
.nav-special a {border:1px solid var(--border); border-radius:30px;}
.nav-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px;}

/*------ menu-icon-down ---------*/
.arrow-icon {font-family: var(--font-awesome);display:flex;transition:all 0.5s;
             justify-content:center;align-items:center;font-style:normal;}
@media (min-width: 1200px){
  .arrow-icon {font-weight: 900;  font-size:9px; color:var(--text-muted);}
  .arrow-icon::before {content: "\f0d7";}
  .top-menu-list > li:hover > a > .arrow-icon {transform: rotate(0deg);}
}
@media (max-width: 1200px) {
  .top-menu-list li.is-open > a > .arrow-icon {transform: rotate(180deg);} 
  .arrow-icon {font-weight: 200; width:20px; height:20px; font-size:14px; left:4px; position:relative;}
  .arrow-icon::before {content: "\f107";}
}
/*--------------------------------*/

@media (min-width: 1200px){
  .nav-dropdown-menu {opacity: 0;visibility: hidden;transform: translateY(-6px);
    transition: opacity .0s ease,transform .25s cubic-bezier(.4,0,.2,1),visibility .22s;
    box-shadow:0px 5px 20px var(--box-shadow);                  
    }
  .nav .nav-dropdown:hover .nav-dropdown-menu {opacity: 1;visibility: visible;
                                                      transform: translateY(0);}
  .nav .nav-dropdown:hover > button {color:var(--text);}
  .nav-dropdown-menu a:hover {background:var(--hover-1);}
  .nav .nav-dropdown button:hover, .nav a:hover {color:var(--text);}
  .nav-special a:hover {border-color:var(--top-menu-lime); color:var(--top-menu-lime);} 
}

/*------ header-actions ---------*/
.header-actions {display:flex; gap:20px; align-items:center; z-index:0;}
.header-toggle {display:flex; gap:10px;}

/********* HAMBURGER **********/
.nav-toggle {position: relative; top: 0px; z-index: 12; outline:none; margin-left:-20px;
            cursor: pointer; padding: 28px 44px 26px 18px; display:none;}
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {cursor: pointer;border-radius: 1px;
  height: 2px;width: 24px;background: var(--text-muted); position: absolute;display: block;content: '';}
.nav-toggle span:before {top: -10px; }
.nav-toggle span:after {bottom: -10px;}
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {transition: all 200ms ease-in-out;}
.nav-toggle.active span {background-color: transparent; opacity: 1;}
.nav-toggle.active span:before, .nav-toggle.active span:after {top: 0;}
.nav-toggle.active span:before {transform: rotate(45deg);}
.nav-toggle.active span:after {transform: rotate(-45deg);}

@media (max-width: 1200px) {
.nav-toggle {display: flex; order:-1;}  
.header-auth {order:2;} 
.header-auth > .btn {height:36px;}  
.top-menu {position:fixed !important;top:56px;bottom:0px; left:0px;
              display:flex !important; flex-direction:column; justify-content:start; gap:20px;
              background: var(--header); width:280px;
              overflow-y:auto; overflow-x:hidden; padding:16px 16px 20px 16px !important;
              transition: all 0.3s; transition: transform 0.3s ease;
              transform: translateX(-100%);
             }
.top-menu.show {transform: translateX(0); }  
.nav {flex-direction:column;}  
.nav-dropdown.is-open button i {transform: rotate(180deg);}  
.nav-dropdown-menu {position:relative;  background:none;border-radius:0; padding:0px; 
                    top: auto; border:0; overflow: hidden;max-height: 0;transition: max-height 0.3s ease;
                    gap: 0px;} 
.nav-dropdown-menu a:last-child {margin-bottom:20px;}  
.nav-dropdown-menu .nav-special a:last-child {margin-bottom:0px;}    
.nav-special, .nav-grid {display:contents}
.nav-special a {border:0;}  
.nav > * {border-bottom:1px solid var(--border) !important;  width:100%; box-sizing:border-box;} 
.nav .nav-dropdown button, .nav > a {padding:16px 12px; border-radius:0; width:100%; 
                                     justify-content:space-between;} 
.nav .nav-dropdown button, .nav a {color:var(--mob-menu-text);}  
.nav-dropdown-menu:before {display:none;} 
.header-actions {display:contents;}
.header-toggle {width:100%; justify-content:space-between;}  
.header-toggle .lang-picker {position:relative;}
.lang-picker .dropdown-item {margin-top:auto; bottom:42px;
                             grid-template-columns: repeat(1, 1fr); }  
.nav           { order:0; }                  
.header-toggle { order:1; margin-top:auto; } 
}
@media (max-width: 640px) {
   .header .container {padding:0px 20px;}
  
 }
@media (max-width: 360px) {
  .logo {margin-left:0px;}
  .header-auth > .btn {padding:0 10px;}
}
/* === Notifications === */

.header-notif__btn {
  background: #3e3e3e;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 20px;
  height: 36px;
  justify-content: center;
  position: relative;
  width: 36px; margin:0 10px 0 4px;
}
.header-notif__btn > i {
  transform: rotate(0deg) !important;
}
.dropdown-block.is-open .header-notif__btn > i {color: var(--lime);}
.header-notif__btn span {position:absolute; right:-8px; top:-4px; background:#d52b1e; border-radius:50%; padding:0 4px;
                        font-size:11px; color:#fff; display:flex; align-items:center; justify-content:center;
                        height:19px; min-width:19px; font-weight:600; line-height:0.1;}

.header-notif__pop {background: var(--bg-card);border: 1px solid var(--border);border-radius: var(--radius-md);
  margin-top: 8px;overflow: hidden;position: absolute;right: 0;top: 100%;width: 340px}
.header-notif__head {align-items: center;border-bottom: 1px solid var(--border);
  color: var(--text);display: flex;font-size: 14px;gap: 12px;justify-content: space-between;padding: 16px 18px}

.header-notif__readall {color: var(--lime);cursor: pointer;font-size: 14px; transition:all 0.3s;}
.header-notif__list {max-height: 360px;overflow-y: auto;}

.header-notif__item { display: flex; gap: 12px; padding: 14px 12px; border-bottom: 1px solid var(--border); 
             background:#00000000; position:relative;}
.header-notif__icon { flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; 
                   border-radius: 50%; font-size: 14px; 
                    background: rgba(214,255,0,0.12); color: var(--lime); }
.notif-item.unread .notif-item__icon { background: rgba(214,255,0,0.12); color: var(--lime); }
.header-notif__body { flex: 1; min-width: 0; }
.header-notif__text { font-size: 13px; line-height: 1.5; }
.header-notif__date { margin-top: 4px; font-size: 12px; color: var(--text-dim); }
.header-notif__empty {color: var(--text-muted);font-size: 14px;padding: 26px 18px;text-align: center}
.header-notif__all { color: var(--text-muted);display: block;font-size: 14px;padding: 14px 18px;
  text-align: center;text-decoration: none; 
                   }
@media (min-width: 1200px) {
  .header-notif__btn:hover {
    border-color:rgba(214,255,0,.4);
    color: var(--lime)
  }
  .header-notif__all:hover {color: var(--text); background:var(--hover-1);}
  .header-notif__readall:hover {color: var(--text);}
}
@media (max-width: 640px) {
  .header-notif__pop {right:-50px; width:calc(100vw - 28px); }
}