/* HẢI VŨ PIANO ACADEMY — CANONICAL PUBLIC HEADER V43
   Desktop: stable fixed header.
   Mobile/tablet: single header + vertical drawer, never a second horizontal nav bar.
*/
:root{
  --hv43-header-h:88px;
  --hv43-header-max:1320px;
  --hv43-navy:#103754;
  --hv43-muted:#6f8290;
  --hv43-gold:#ad7635;
  --hv43-line:rgba(18,55,84,.10);
  --hv43-drawer-w:min(420px,calc(100vw - 28px));
}

@view-transition{navigation:auto;}
html{scroll-padding-top:calc(var(--hv43-header-h) + 16px);}
body.hv43-header-ready,
body:has(> header.hv43-site-header),
body:has(> .topbar + header.hv43-site-header){padding-top:var(--hv43-header-h)!important;}

header.hv43-site-header{
  position:fixed!important;
  inset:0 0 auto 0!important;
  z-index:1500!important;
  width:100%!important;
  height:var(--hv43-header-h)!important;
  min-height:var(--hv43-header-h)!important;
  margin:0!important;
  padding:0!important;
  background:rgba(255,255,255,.985)!important;
  border:0!important;
  border-bottom:1px solid var(--hv43-line)!important;
  box-shadow:0 1px 0 rgba(16,55,84,.025),0 8px 22px rgba(16,55,84,.028)!important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  isolation:isolate;
  view-transition-name:hv-site-header;
}
header.hv43-site-header > :is(.wrap.nav,.hv67-header-inner){
  width:min(var(--hv43-header-max),calc(100% - 48px))!important;
  max-width:var(--hv43-header-max)!important;
  min-width:0!important;
  height:var(--hv43-header-h)!important;
  min-height:var(--hv43-header-h)!important;
  margin-inline:auto!important;
  padding:0!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
  overflow:visible!important;
}
header.hv43-site-header :is(.brand,.hv67-brand){
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  min-width:286px!important;
  max-width:320px!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  color:var(--hv43-navy)!important;
  text-decoration:none!important;
}
header.hv43-site-header :is(.brand,.hv67-brand) img{
  display:block!important;
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
  max-width:50px!important;
  flex:0 0 50px!important;
  object-fit:contain!important;
  margin:0!important;
}
header.hv43-site-header :is(.brand,.hv67-brand) > div{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:4px!important;
}
header.hv43-site-header :is(.brand,.hv67-brand) strong{
  display:block!important;
  margin:0!important;
  color:var(--hv43-navy)!important;
  font-family:"Be Vietnam Pro",Arial,sans-serif!important;
  font-size:16.5px!important;
  line-height:1.16!important;
  font-weight:650!important;
  letter-spacing:.018em!important;
  white-space:nowrap!important;
}
header.hv43-site-header :is(.brand,.hv67-brand) span{
  display:block!important;
  margin:0!important;
  color:var(--hv43-muted)!important;
  font-family:"Be Vietnam Pro",Arial,sans-serif!important;
  font-size:11.8px!important;
  line-height:1.25!important;
  font-weight:400!important;
  letter-spacing:.018em!important;
  white-space:nowrap!important;
}
header.hv43-site-header :is(.links,.hv67-nav){
  min-width:0!important;
  margin-left:auto!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:clamp(10px,1.05vw,18px)!important;
  overflow:visible!important;
  white-space:nowrap!important;
  color:var(--hv43-navy)!important;
  font-family:"Be Vietnam Pro",Arial,sans-serif!important;
}
header.hv43-site-header :is(.links,.hv67-nav) > a{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:44px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  color:var(--hv43-navy)!important;
  background:transparent!important;
  font-size:13.3px!important;
  line-height:1.2!important;
  font-weight:500!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
header.hv43-site-header :is(.links,.hv67-nav) > a.hv43-active:not(.login-btn):not(.hv67-login){font-weight:650!important;}
header.hv43-site-header :is(.links,.hv67-nav) > a.hv43-active:not(.login-btn):not(.hv67-login)::after{
  content:""!important;
  position:absolute!important;
  left:14%!important;
  right:14%!important;
  bottom:1px!important;
  height:1.5px!important;
  border-radius:999px!important;
  background:var(--hv43-gold)!important;
}
header.hv43-site-header :is(.login-btn,.hv67-login){
  min-width:116px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 19px!important;
  border:1px solid #b9ccda!important;
  border-radius:999px!important;
  background:#fff!important;
  color:var(--hv43-navy)!important;
  font-size:13.3px!important;
  font-weight:650!important;
}
header.hv43-site-header .mobile-toggle{
  display:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  margin-left:auto!important;
  border:0!important;
  background:transparent!important;
  color:var(--hv43-navy)!important;
  box-shadow:none!important;
}
main [id],main section[id],main article[id]{scroll-margin-top:calc(var(--hv43-header-h) + 16px)!important;}

.hv43-menu-backdrop{
  position:fixed;
  inset:var(--hv43-header-h) 0 0;
  z-index:1440;
  background:rgba(7,38,59,.26);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease;
}
body.hv43-menu-open .hv43-menu-backdrop{opacity:1;visibility:visible;pointer-events:auto;}
body.hv43-menu-open{overflow:hidden;}

::view-transition-old(hv-site-header),::view-transition-new(hv-site-header){animation:none!important;mix-blend-mode:normal!important;}
::view-transition-old(root){animation:hv43-old-root 100ms ease-out both;}
::view-transition-new(root){animation:hv43-new-root 140ms ease-out both;}
@keyframes hv43-old-root{to{opacity:.94}}
@keyframes hv43-new-root{from{opacity:.94}}

@media(max-width:1180px) and (min-width:981px){
  header.hv43-site-header > :is(.wrap.nav,.hv67-header-inner){width:min(1140px,calc(100% - 32px))!important;gap:16px!important;}
  header.hv43-site-header :is(.brand,.hv67-brand){min-width:252px!important;max-width:270px!important;gap:11px!important;}
  header.hv43-site-header :is(.brand,.hv67-brand) img{width:46px!important;height:46px!important;min-width:46px!important;max-width:46px!important;flex-basis:46px!important;}
  header.hv43-site-header :is(.brand,.hv67-brand) strong{font-size:14.9px!important;}
  header.hv43-site-header :is(.brand,.hv67-brand) span{font-size:10.8px!important;}
  header.hv43-site-header :is(.links,.hv67-nav){gap:9px!important;}
  header.hv43-site-header :is(.links,.hv67-nav)>a{font-size:12.1px!important;}
  header.hv43-site-header :is(.login-btn,.hv67-login){min-width:102px!important;padding-inline:14px!important;}
}

/* One mobile/tablet header. The nav becomes a real vertical drawer. */
@media(max-width:980px){
  :root{--hv43-header-h:74px;}
  body > .topbar{display:none!important;}
  header.hv43-site-header{height:var(--hv43-header-h)!important;min-height:var(--hv43-header-h)!important;}
  header.hv43-site-header > :is(.wrap.nav,.hv67-header-inner){
    width:calc(100% - 28px)!important;
    height:var(--hv43-header-h)!important;
    min-height:var(--hv43-header-h)!important;
    gap:12px!important;
    position:relative!important;
  }
  header.hv43-site-header :is(.brand,.hv67-brand){min-width:0!important;max-width:calc(100% - 58px)!important;gap:11px!important;}
  header.hv43-site-header :is(.brand,.hv67-brand) img{width:44px!important;height:44px!important;min-width:44px!important;max-width:44px!important;flex-basis:44px!important;}
  header.hv43-site-header :is(.brand,.hv67-brand) strong{font-size:15px!important;letter-spacing:.01em!important;}
  header.hv43-site-header :is(.brand,.hv67-brand) span{display:none!important;}
  header.hv43-site-header .mobile-toggle{
    display:inline-grid!important;
    place-items:center!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    border:1px solid rgba(16,55,84,.15)!important;
    border-radius:13px!important;
    background:#fff!important;
    font-size:0!important;
    line-height:1!important;
    cursor:pointer!important;
    position:relative!important;
    z-index:1510!important;
  }
  header.hv43-site-header .mobile-toggle::before,
  header.hv43-site-header .mobile-toggle::after,
  header.hv43-site-header .mobile-toggle span{
    content:"";
    position:absolute;
    left:13px;
    width:20px;
    height:2px;
    border-radius:2px;
    background:var(--hv43-navy);
    transition:transform .18s ease,top .18s ease,opacity .18s ease;
  }
  header.hv43-site-header .mobile-toggle::before{top:15px;}
  header.hv43-site-header .mobile-toggle span{top:22px;}
  header.hv43-site-header .mobile-toggle::after{top:29px;}
  body.hv43-menu-open header.hv43-site-header .mobile-toggle::before{top:22px;transform:rotate(45deg);}
  body.hv43-menu-open header.hv43-site-header .mobile-toggle span{opacity:0;}
  body.hv43-menu-open header.hv43-site-header .mobile-toggle::after{top:22px;transform:rotate(-45deg);}

  header.hv43-site-header :is(.links,.hv67-nav){
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    position:fixed!important;
    z-index:1490!important;
    top:var(--hv43-header-h)!important;
    right:14px!important;
    left:auto!important;
    width:var(--hv43-drawer-w)!important;
    max-width:var(--hv43-drawer-w)!important;
    max-height:calc(100dvh - var(--hv43-header-h) - 16px)!important;
    overflow-y:auto!important;
    margin:0!important;
    padding:12px!important;
    background:#fff!important;
    border:1px solid rgba(16,55,84,.11)!important;
    border-radius:0 0 18px 18px!important;
    box-shadow:0 24px 54px rgba(10,43,66,.20)!important;
    white-space:normal!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-8px)!important;
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease!important;
  }
  body.hv43-menu-open header.hv43-site-header :is(.links,.hv67-nav){
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
  }
  header.hv43-site-header :is(.links,.hv67-nav)>a{
    width:100%!important;
    min-height:48px!important;
    justify-content:flex-start!important;
    margin:0!important;
    padding:0 14px!important;
    border-radius:11px!important;
    border-bottom:1px solid rgba(16,55,84,.075)!important;
    font-size:14px!important;
    font-weight:550!important;
    white-space:normal!important;
  }
  header.hv43-site-header :is(.links,.hv67-nav)>a:last-child{border-bottom:0!important;}
  header.hv43-site-header :is(.links,.hv67-nav)>a.hv43-active:not(.login-btn):not(.hv67-login){
    color:#0b4568!important;
    background:#f2f7fa!important;
    font-weight:700!important;
  }
  header.hv43-site-header :is(.links,.hv67-nav)>a.hv43-active:not(.login-btn):not(.hv67-login)::after{display:none!important;}
  header.hv43-site-header :is(.login-btn,.hv67-login){
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    margin-top:8px!important;
    justify-content:center!important;
    border:1px solid #b9ccda!important;
    border-radius:999px!important;
  }
}

@media(max-width:520px){
  :root{--hv43-header-h:70px;--hv43-drawer-w:calc(100vw - 20px);}
  header.hv43-site-header > :is(.wrap.nav,.hv67-header-inner){width:calc(100% - 20px)!important;}
  header.hv43-site-header :is(.brand,.hv67-brand){gap:9px!important;}
  header.hv43-site-header :is(.brand,.hv67-brand) img{width:40px!important;height:40px!important;min-width:40px!important;max-width:40px!important;flex-basis:40px!important;}
  header.hv43-site-header :is(.brand,.hv67-brand) strong{font-size:14.2px!important;line-height:1.15!important;}
  header.hv43-site-header .mobile-toggle{width:44px!important;height:44px!important;min-width:44px!important;border-radius:12px!important;}
  header.hv43-site-header :is(.links,.hv67-nav){right:10px!important;padding:10px!important;}
}

@media(max-width:380px){
  header.hv43-site-header :is(.brand,.hv67-brand) strong{font-size:13.1px!important;letter-spacing:0!important;}
  header.hv43-site-header :is(.brand,.hv67-brand) img{width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;flex-basis:38px!important;}
}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none!important;}
  .hv43-menu-backdrop,header.hv43-site-header :is(.links,.hv67-nav),header.hv43-site-header .mobile-toggle::before,header.hv43-site-header .mobile-toggle::after{transition:none!important;}
}