/* ============================================================
   Pharbaco shared site navbar — identical to the landing topbar.
   Self-contained (literal brand values), drop into any sub-page:
     <link rel="stylesheet" href="assets/site-nav.css">
     ...inline <header class="topbar">…</header> + <div class="mobile-menu">…</div>
     <script src="assets/site-nav.js"></script>   (after GSAP)
   ============================================================ */

html{overflow-x:hidden}

/* fixed translucent bar sits over a dark hero */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  background:linear-gradient(180deg, rgba(8,38,92,0.55), rgba(8,38,92,0.25));
  border-bottom:1px solid rgba(255,255,255,0.22);
}
.topbar-inner{
  max-width:1240px; margin:0 auto; padding:16px 56px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
@media(max-width:760px){ .topbar-inner{ padding:14px 24px; } }
.topbar img{ height:34px; display:block; }
.topbar .brand-lockup{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.topbar .brand-sub{
  font-family:'Be Vietnam Pro',system-ui,sans-serif; font-weight:600; font-size:14px; letter-spacing:.015em;
  color:#CFE6FA; white-space:nowrap; padding-left:12px; border-left:1px solid rgba(255,255,255,0.28);
}
@media(max-width:560px){ .topbar .brand-sub{ display:none; } }
.topbar nav{ display:flex; gap:32px; }
@media(max-width:900px){ .topbar nav{ display:none; } }
.topbar nav a{
  color:rgba(255,255,255,0.85); text-decoration:none;
  font-size:13.5px; font-weight:500; letter-spacing:.02em; transition:color 200ms;
}
.topbar nav a:hover, .topbar nav a.active{ color:#fff; }

/* dropdown (Giới thiệu / Sản phẩm) */
.nav-has-dd{ display:flex; align-items:center; }
.nav-has-dd > a::after{ content:" ⌄"; opacity:.7; }
.nav-dd{ position:absolute; top:100%; width:320px; z-index:1; opacity:0; visibility:hidden; pointer-events:none; }
.nav-dd.nav-dd-text{ width:232px; }
.nav-dd-inner{
  background:linear-gradient(180deg, rgba(8,38,92,0.98), rgba(10,46,120,0.97));
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.16); border-top:none; border-radius:0; padding:6px;
  box-shadow:0 26px 60px rgba(5,20,60,0.45);
}
.nav-dd-link{
  display:block; padding:13px 16px; text-decoration:none;
  color:rgba(255,255,255,0.9); font-weight:600; font-size:13.5px;
  border-bottom:1px solid rgba(255,255,255,0.09); white-space:nowrap;
  transition:background .2s, color .2s, padding-left .2s;
}
.nav-dd-link:last-child{ border-bottom:none; }
.nav-dd-link:hover{ background:rgba(255,255,255,0.10); color:#fff; padding-left:21px; }

/* nav CTA pill (white, like landing) */
.topbar .nav-cta{
  display:inline-flex; align-items:center; gap:10px; border-radius:9999px;
  padding:10px 22px; font-family:'Be Vietnam Pro',system-ui,sans-serif; font-size:13px; font-weight:600;
  text-decoration:none; cursor:pointer; border:none; background:#fff; color:#0A2A6B;
  box-shadow:0 12px 36px rgba(4,20,60,0.35);
  transition:transform 200ms cubic-bezier(0.22,1,0.36,1), box-shadow 200ms;
}
.topbar .nav-cta:hover{ transform:translateY(-2px); box-shadow:0 18px 46px rgba(4,20,60,0.45); }

/* hamburger */
.nav-toggle{
  display:none; flex-direction:column; gap:5px; width:44px; height:44px;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.35); border-radius:12px;
  cursor:pointer; padding:0; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background 200ms;
}
.nav-toggle:hover{ background:rgba(255,255,255,0.16); }
.nav-toggle span{ display:block; width:20px; height:2px; border-radius:2px; background:#fff;
  transition:transform 300ms cubic-bezier(0.22,1,0.36,1), opacity 200ms; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile slide-down menu */
.mobile-menu{
  display:none; position:fixed; top:0; left:0; right:0; z-index:45; padding:86px 24px 30px;
  background:linear-gradient(180deg, rgba(8,38,92,0.97), rgba(10,46,120,0.95));
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.22); box-shadow:0 26px 60px rgba(5,20,60,0.4);
  opacity:0; visibility:hidden;
}
.mobile-menu .m-link{
  display:block; width:100%; color:rgba(255,255,255,0.92); text-decoration:none;
  font-size:18px; font-weight:600; padding:15px 4px; text-align:left;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.mobile-menu .m-link:active{ color:#DCEFFC; }
.mobile-menu button.m-link{
  background:none; border:none; border-bottom:1px solid rgba(255,255,255,0.1);
  font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
}
.m-caret{ font-size:14px; opacity:.7; transition:transform .3s ease; }
.m-toggle.open .m-caret{ transform:rotate(180deg); }
.m-sub{ overflow:hidden; }
.m-sublink{
  display:block; text-decoration:none; padding:12px 4px 12px 22px;
  border-bottom:1px solid rgba(255,255,255,0.07); color:#7FC3F5; font-weight:600; font-size:15px;
}
.m-sublink:active{ color:#fff; }
.mobile-menu .nav-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:22px;
  border-radius:9999px; padding:14px 22px; font-family:'Be Vietnam Pro',system-ui,sans-serif;
  font-size:15px; font-weight:700; text-decoration:none; background:#fff; color:#0A2A6B; border:none;
}

@media(max-width:900px){
  .nav-toggle{ display:flex; }
  .topbar .nav-cta{ display:none; }   /* CTA lives in the mobile menu */
}