/* HẢI VŨ PIANO ACADEMY — VISUAL HERO V33
   Chỉ dành cho các trang public được JS đánh dấu hv-public-visual-v33. */

body.hv-public-visual-v33 .topbar{display:none!important}

body.hv-public-visual-v33 .header{
  position:relative;
  z-index:50;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #e7edf1;
  box-shadow:0 1px 0 rgba(17,48,72,.02);
}
body.hv-public-visual-v33 .header .wrap.nav{
  min-height:76px;
  display:flex;
  align-items:center;
}
body.hv-public-visual-v33 .header .brand img{
  width:46px;
  height:46px;
  object-fit:contain;
}
body.hv-public-visual-v33 .header .brand strong{
  color:#173c5a;
  letter-spacing:.015em;
}
body.hv-public-visual-v33 .header .brand span{
  color:#657b8b;
  font-size:11.5px;
}
body.hv-public-visual-v33 .header .links{
  gap:clamp(15px,1.8vw,30px);
  align-items:center;
}
body.hv-public-visual-v33 .header .links>a:not(.login-btn){
  color:#173c5a;
  font-weight:560;
  white-space:nowrap;
}
body.hv-public-visual-v33 .header .login-btn{
  border:1px solid #b8cad6;
  border-radius:999px;
  padding:11px 20px;
  background:#fff;
  color:#173c5a;
  font-weight:650;
}

/* Shared visual hero */
body.hv-public-visual-v33 .hv-visual-hero{
  --hv-hero-img:none;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:330px;
  display:flex;
  align-items:center;
  padding:0!important;
  border-bottom:1px solid #e3e9ed;
  background:#eef4f6;
}
body.hv-public-visual-v33 .hv-visual-hero::before{
  content:"";
  position:absolute;
  z-index:-3;
  inset:0 0 0 34%;
  background-image:var(--hv-hero-img);
  background-size:cover;
  background-position:center center;
  filter:saturate(.94) contrast(1.02);
}
body.hv-public-visual-v33 .hv-visual-hero::after{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(251,253,253,.995) 0%,
      rgba(249,252,253,.985) 34%,
      rgba(248,251,252,.91) 46%,
      rgba(248,251,252,.45) 58%,
      rgba(248,251,252,.08) 72%,
      rgba(248,251,252,0) 100%);
}
body.hv-public-visual-v33 .hv-visual-hero .wrap{
  width:100%;
  position:relative;
  padding-top:45px!important;
  padding-bottom:45px!important;
}
body.hv-public-visual-v33 .hv-hero-copy{
  max-width:610px;
}
body.hv-public-visual-v33 .hv-hero-eyebrow,
body.hv-public-visual-v33 .hv-visual-hero .crumb,
body.hv-public-visual-v33 .hv-visual-hero .eyebrow{
  color:#9a6424!important;
  font-size:12px!important;
  font-weight:650!important;
  letter-spacing:.045em!important;
  text-transform:none!important;
  margin-bottom:12px!important;
}
body.hv-public-visual-v33 .hv-visual-hero h1{
  max-width:600px;
  margin:0 0 14px!important;
  color:#0f3150!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(38px,4vw,60px)!important;
  line-height:1.01!important;
  letter-spacing:-.034em!important;
  font-weight:500!important;
}
body.hv-public-visual-v33 .hv-visual-hero p{
  max-width:580px;
  margin:0!important;
  color:#506a7c!important;
  font-size:14px!important;
  line-height:1.63!important;
}
body.hv-public-visual-v33 .hv-visual-hero .hero-actions{
  margin-top:24px!important;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
body.hv-public-visual-v33 .hv-visual-hero .hero-actions .btn,
body.hv-public-visual-v33 .hv-visual-hero .actions .btn{
  border-radius:999px!important;
  min-height:46px;
  padding:0 23px!important;
}
body.hv-public-visual-v33 .hv-visual-hero .btn.primary{
  background:#113f67!important;
  border-color:#113f67!important;
  color:#fff!important;
}

/* A soft architectural curve similar to the approved visual direction. */
body.hv-public-visual-v33 .hv-visual-hero .hv-curve{
  position:absolute;
  z-index:-1;
  left:-7vw;
  top:-35%;
  width:58vw;
  height:175%;
  border:1px solid rgba(188,207,218,.28);
  border-radius:50%;
  pointer-events:none;
}

/* Home is taller and retains its CTA. */
body.hv-public-visual-v33 .hv-home-hero{
  min-height:clamp(510px,63vh,690px);
}
body.hv-public-visual-v33 .hv-home-hero::before{
  inset:0 0 0 28%;
  background-position:center center;
}
body.hv-public-visual-v33 .hv-home-hero::after{
  background:
    linear-gradient(90deg,
      rgba(252,253,253,.995) 0%,
      rgba(251,253,253,.99) 30%,
      rgba(250,252,252,.90) 43%,
      rgba(250,252,252,.33) 57%,
      rgba(250,252,252,0) 73%);
}
body.hv-public-visual-v33 .hv-home-hero .wrap{
  padding-top:56px!important;
  padding-bottom:56px!important;
}
body.hv-public-visual-v33 .hv-home-hero .hero-grid{
  display:block!important;
}
body.hv-public-visual-v33 .hv-home-hero .hero-mark{
  display:none!important;
}
body.hv-public-visual-v33 .hv-home-hero h1{
  max-width:610px;
  font-size:clamp(48px,5.1vw,74px)!important;
  line-height:1.02!important;
}
body.hv-public-visual-v33 .hv-home-hero p{
  max-width:585px;
  font-size:16px!important;
}
body.hv-public-visual-v33 .hv-home-hero .actions{
  display:flex!important;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px!important;
}

/* Per-page image assets */
body.hv-public-visual-v33 .hv-home-hero{--hv-hero-img:url("hero-home-v33.webp")}
body.hv-public-visual-v33 .hv-knowledge-hero{--hv-hero-img:url("hero-knowledge-v33.webp")}
body.hv-public-visual-v33 .hv-outcomes-hero{--hv-hero-img:url("hero-outcomes-v33.webp")}
body.hv-public-visual-v33 .hv-activities-hero{--hv-hero-img:url("hero-activities-v33.webp")}
body.hv-public-visual-v33 .hv-repertoire-hero{--hv-hero-img:url("hero-repertoire-v33.webp")}
body.hv-public-visual-v33 .hv-about-hero{--hv-hero-img:url("hero-about-v33.webp")}
body.hv-public-visual-v33 .hv-contact-hero{--hv-hero-img:url("hero-contact-v33.webp")}

/* The old archive hero has a two-column system; v33 intentionally simplifies only its heading area. */
body.hv-public-visual-v33 .hv-visual-hero .archive-hero-grid,
body.hv-public-visual-v33 .hv-visual-hero .record-grid{
  display:block!important;
}
body.hv-public-visual-v33 .hv-visual-hero .archive-feature-card,
body.hv-public-visual-v33 .hv-visual-hero .record-stamp{
  display:none!important;
}

/* 14-inch laptop: compact header + hero, no excessive vertical drop. */
@media (max-width:1366px) and (min-width:821px){
  body.hv-public-visual-v33 .header .wrap.nav{min-height:68px}
  body.hv-public-visual-v33 .header .brand img{width:42px;height:42px}
  body.hv-public-visual-v33 .header .links{gap:14px}
  body.hv-public-visual-v33 .header .links>a{font-size:12px}
  body.hv-public-visual-v33 .header .login-btn{padding:9px 16px}
  body.hv-public-visual-v33 .hv-visual-hero{min-height:300px}
  body.hv-public-visual-v33 .hv-visual-hero .wrap{padding-top:34px!important;padding-bottom:34px!important}
  body.hv-public-visual-v33 .hv-visual-hero h1{font-size:44px!important;max-width:530px}
  body.hv-public-visual-v33 .hv-home-hero{min-height:510px}
  body.hv-public-visual-v33 .hv-home-hero h1{font-size:58px!important}
  body.hv-public-visual-v33 .hv-home-hero p{font-size:14px!important}
}

@media (max-width:820px){
  body.hv-public-visual-v33 .header .wrap.nav{min-height:64px}
  body.hv-public-visual-v33 .header .brand img{width:40px;height:40px}
  body.hv-public-visual-v33 .hv-visual-hero{
    min-height:430px;
    align-items:flex-end;
  }
  body.hv-public-visual-v33 .hv-visual-hero::before{
    inset:0;
    background-position:center 38%;
  }
  body.hv-public-visual-v33 .hv-visual-hero::after{
    background:
      linear-gradient(180deg,
        rgba(250,252,252,.07) 0%,
        rgba(250,252,252,.27) 37%,
        rgba(250,252,252,.96) 68%,
        rgba(250,252,252,1) 100%);
  }
  body.hv-public-visual-v33 .hv-visual-hero .wrap{
    padding-top:170px!important;
    padding-bottom:30px!important;
  }
  body.hv-public-visual-v33 .hv-hero-copy{max-width:none}
  body.hv-public-visual-v33 .hv-visual-hero h1{
    font-size:36px!important;
    max-width:92%;
  }
  body.hv-public-visual-v33 .hv-visual-hero p{
    font-size:13.5px!important;
    max-width:94%;
  }
  body.hv-public-visual-v33 .hv-home-hero{min-height:560px}
  body.hv-public-visual-v33 .hv-home-hero h1{font-size:44px!important}
  body.hv-public-visual-v33 .hv-home-hero .actions{margin-top:20px!important}
  body.hv-public-visual-v33 .hv-curve{display:none}
}