/* ===== HEADER TÁCH RIÊNG + ĐỒNG BỘ THEME WEBSITE ===== */
body{padding-top:0!important}

.topbar-pro{
  position:sticky!important;
  top:0!important;
  z-index:60!important;
  margin:0!important;
  padding:8px 0 0!important;
  background:var(--bg)!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.topbar-pro .nav-pro{
  width:min(1180px,calc(100% - 28px))!important;
  min-height:56px!important;
  margin:0 auto 10px!important;
  padding:6px 8px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:18px!important;

  /* Đây là khung riêng giống mẫu */
  border:1px solid color-mix(in srgb,var(--red) 38%,var(--line))!important;
  border-radius:14px!important;
  background:color-mix(in srgb,var(--panel) 94%,var(--red) 6%)!important;
  box-shadow:
    0 8px 28px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.018) inset!important;
}

/* Logo */
.brand-pro{gap:9px!important}
.brand-icon-pro{
  width:40px!important;
  height:40px!important;
  flex:0 0 40px!important;
  border-radius:11px!important;
  background:var(--panel2)!important;
  border:1px solid color-mix(in srgb,var(--red) 50%,var(--line))!important;
  box-shadow:0 5px 16px rgba(0,0,0,.28)!important;
}
.brand-icon-pro img{border-radius:10px!important}
.brand-copy strong{
  color:var(--text)!important;
  font-size:13px!important;
}
.brand-copy small{
  color:var(--muted)!important;
  font-size:6.5px!important;
}

/* Menu nằm thành nhóm riêng phía phải, gần tìm kiếm */
.navlinks-pro{
  justify-content:flex-end!important;
  gap:3px!important;
  margin:0!important;
}
.navlinks-pro a{
  color:var(--muted)!important;
  background:transparent!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  padding:8px 9px!important;
  font-size:9px!important;
}
.navlinks-pro a:hover{
  color:var(--text)!important;
  background:var(--panel2)!important;
  border-color:var(--line)!important;
}
.navlinks-pro a.active{
  color:#fff!important;
  background:linear-gradient(135deg,var(--red),var(--red2))!important;
  border-color:color-mix(in srgb,var(--red) 72%,white 12%)!important;
  box-shadow:0 6px 18px color-mix(in srgb,var(--red) 22%,transparent)!important;
}

/* Tìm kiếm + sáng/tối dùng đúng màu trang */
.search-wrap-pro{
  padding-left:8px!important;
  border-left:1px solid var(--line)!important;
  gap:6px!important;
}
.searchbox-pro{
  width:170px!important;
  height:34px!important;
  background:var(--bg)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  border-radius:9px!important;
}
.searchbox-pro:focus{
  border-color:var(--red)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 12%,transparent)!important;
}
.theme-pro{
  min-width:62px!important;
  height:34px!important;
  background:var(--panel2)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  border-radius:9px!important;
}

/* Tạo khoảng tách thật giữa header và phần website bên dưới */
.topbar-pro + main,
.topbar-pro + .hero,
header.topbar-pro ~ main:first-of-type{
  margin-top:0!important;
}
.hero{
  border-top:1px solid var(--line)!important;
}

/* Tablet */
@media(max-width:980px){
  .topbar-pro .nav-pro{
    width:min(100% - 20px,1180px)!important;
    gap:10px!important;
  }
  .navlinks-pro a{padding:7px 6px!important;font-size:8.5px!important}
  .searchbox-pro{width:125px!important}
}

/* Mobile: header vẫn là một khối riêng, không dính nội dung */
@media(max-width:760px){
  .topbar-pro{padding-top:6px!important}
  .topbar-pro .nav-pro{
    width:calc(100% - 12px)!important;
    margin-bottom:7px!important;
    padding:7px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:7px!important;
    border-radius:12px!important;
  }
  .brand-icon-pro{width:38px!important;height:38px!important;flex-basis:38px!important}
  .search-wrap-pro{
    border-left:0!important;
    padding-left:0!important;
  }
  .navlinks-pro{
    grid-column:1/-1!important;
    width:100%!important;
    padding-top:6px!important;
    border-top:1px solid var(--line)!important;
    justify-content:flex-start!important;
  }
  .navlinks-pro a{
    padding:7px 8px!important;
    font-size:8.5px!important;
  }
}