/* =====================================
   BAT GROUP – CLEAN TECH HEADER
===================================== */

:root{
  --bat-bg-glass: rgba(255,255,255,.86);
  --bat-bg-solid: #ffffff;
  --bat-border: rgba(0,0,0,.06);
  --bat-accent: #1fd3a6;
  --bat-text: #0f172a;
  --bat-text-dim:#475569;
}

/* =====================
   BASE HEADER
===================== */

#header{
  background: var(--bat-bg-glass);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bat-border);
  transition: background .3s ease, box-shadow .3s ease;
}

/* sticky */
.bat-scrolled #header{
  background: var(--bat-bg-solid);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* =====================
   TOP BAR – GỌN
===================== */

#top-bar{
  background: #0f172a;
  color: #e5e7eb;
  font-size: 12.5px;
}

/* =====================
   LOGO
===================== */

#logo img{
  max-height: 58px !important;
  transition:.25s;
}

/* =====================
   MENU
===================== */

.header-nav-main > li > a{
  color: var(--bat-text);
  font-weight:600;
  letter-spacing:.04em;
  padding: 0 14px;
  position:relative;
}

/* underline mảnh */
.header-nav-main > li > a:after{
  content:"";
  position:absolute;
  bottom:-6px;
  left:50%;
  width:0;
  height:2px;
  background: linear-gradient(90deg,#2dd4bf,#38bdf8);
  transform:translateX(-50%);
  transition:.3s ease;
}
.header-nav-main > li:hover > a:after{
  width:26px;
}

/* =====================
   CTA BUTTON
===================== */

.header-button .button.primary:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}

/* =====================
   DROPDOWN CLEAN
===================== */

.nav-dropdown{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.08);
  border-radius:14px;
}

.nav-dropdown a{
  color:#0f172a;
}

/* =====================
   MOBILE
===================== */

@media(max-width:849px){
  #logo img{max-height:48px;}
}
#top-bar{
  height:28px!important;
  min-height:28px!important;
  background:rgba(255,255,255,.65)!important;
  border-bottom:1px solid rgba(0,0,0,.04);
  color:#64748b;
}

#top-bar .flex-row{
  min-height:28px!important;
}
#masthead{
  padding:8px 0!important;
	  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.header-button .button.primary{
  background: linear-gradient(90deg,#0c8b3f,#21c26c);
  border-radius: 999px;
  padding: 5px !important;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(16,185,129,.25);
}
.header-nav-main > li > a{
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .25px;
  padding: 20px 18px;
  text-transform: uppercase; 
	  color: #0f172a;
}

.header-nav-main > li:hover > a{
  opacity:1;
}
.stuck .header-main,
.bat-scrolled #header{
  background:#ffffff!important;
}
#header .header-wrapper{
  box-shadow:none!important;
}

#header{
  border-bottom:1px solid rgba(0,0,0,.05);
}