/* HAI VU PIANO ACADEMY – HERO RATIO V34
   Mục tiêu: dàn lại đầu trang public đúng tỷ lệ mẫu: tab trên gọn, hero rộng, ảnh chiếm ngang lớn. */

body.hv-hero-ratio-v34{
  --hv-header-h: 100px;
  --hv-left-w: min(44vw, 760px);
  --hv-title: #0f2d61;
  --hv-text: #5d7184;
  --hv-accent: #a46522;
  --hv-line: #dfe6ed;
  --hv-btn: #113f79;
  --hv-btn-border: #b8cce2;
}
body.hv-hero-ratio-v34 .topbar{display:none!important}

/* Header */
body.hv-hero-ratio-v34 .header{
  background:#fff!important;
  border-bottom:1px solid #edf1f5!important;
  box-shadow:none!important;
  position:relative;
  z-index:20;
}
body.hv-hero-ratio-v34 .header .wrap.nav{
  min-height:var(--hv-header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
body.hv-hero-ratio-v34 .header .brand{
  display:flex;
  align-items:center;
  gap:16px;
  flex:0 0 auto;
}
body.hv-hero-ratio-v34 .header .brand img{
  width:56px!important;
  height:56px!important;
  object-fit:contain;
}
body.hv-hero-ratio-v34 .header .brand strong{
  color:#14375f!important;
  font-size:18px!important;
  letter-spacing:.01em!important;
}
body.hv-hero-ratio-v34 .header .brand span{
  color:#647b8f!important;
  font-size:12px!important;
}
body.hv-hero-ratio-v34 .header .links{
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:34px;
  flex:1 1 auto;
}
body.hv-hero-ratio-v34 .header .links > a:not(.login-btn){
  font-size:13.5px!important;
  color:#16385f!important;
  font-weight:520!important;
  white-space:nowrap;
}
body.hv-hero-ratio-v34 .header .login-btn{
  border:1.5px solid #b8cce0!important;
  color:#16385f!important;
  background:#fff!important;
  border-radius:999px!important;
  padding:15px 28px!important;
  font-weight:650!important;
  min-width:150px;
  text-align:center;
}

/* Hero base */
body.hv-hero-ratio-v34 .hv-hero-wide{
  position:relative;
  overflow:hidden;
  min-height:calc(100vh - var(--hv-header-h));
  max-height:980px;
  background:#f7f9fb;
  border-bottom:1px solid #e7edf1;
  isolation:isolate;
}
body.hv-hero-ratio-v34 .hv-hero-wide .wrap{
  position:relative;
  min-height:inherit;
  max-height:inherit;
  width:100%;
  max-width:none;
  padding:0!important;
  display:flex;
  align-items:stretch;
}
body.hv-hero-ratio-v34 .hv-hero-copy{
  position:relative;
  width:var(--hv-left-w);
  min-width:560px;
  padding:150px 56px 108px 88px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background:
    linear-gradient(180deg, rgba(255,255,255,.965) 0%, rgba(250,252,253,.955) 100%);
  z-index:3;
}
body.hv-hero-ratio-v34 .hv-hero-copy::after{
  content:"";
  position:absolute;
  top:0;
  right:-185px;
  width:380px;
  height:100%;
  background:linear-gradient(90deg, rgba(255,255,255,.12), rgba(245,248,251,.62), rgba(255,255,255,0));
  transform:skewX(20deg);
  pointer-events:none;
}
body.hv-hero-ratio-v34 .hv-hero-copy::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at -12% 14%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.74) 34%, rgba(255,255,255,0) 72%);
  pointer-events:none;
}
body.hv-hero-ratio-v34 .hv-hero-kicker{
  position:relative;
  z-index:1;
  margin-bottom:22px;
  color:var(--hv-accent);
  font-size:19px;
  line-height:1.35;
  letter-spacing:.01em;
}
body.hv-hero-ratio-v34 .hv-hero-copy h1{
  position:relative;
  z-index:1;
  margin:0 0 22px;
  color:var(--hv-title);
  font-size:72px;
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:650;
  max-width:560px;
}
body.hv-hero-ratio-v34 .hv-hero-copy p{
  position:relative;
  z-index:1;
  margin:0;
  color:var(--hv-text);
  font-size:21px;
  line-height:1.55;
  max-width:560px;
}
body.hv-hero-ratio-v34 .hv-hero-actions{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:46px;
}
body.hv-hero-ratio-v34 .hv-hero-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:68px;
  padding:0 36px;
  border-radius:999px;
  text-decoration:none;
  font-size:17px;
  font-weight:600;
  transition:.18s ease;
}
body.hv-hero-ratio-v34 .hv-hero-actions .btn.primary{
  color:#fff!important;
  background:var(--hv-btn)!important;
  border:1px solid var(--hv-btn)!important;
}
body.hv-hero-ratio-v34 .hv-hero-actions .btn.secondary{
  color:#17365b!important;
  background:rgba(255,255,255,.82)!important;
  border:1.5px solid var(--hv-btn-border)!important;
}
body.hv-hero-ratio-v34 .hv-hero-actions .btn .arr{
  margin-left:12px;
  font-size:18px;
  line-height:1;
}

body.hv-hero-ratio-v34 .hv-hero-visual{
  flex:1 1 auto;
  position:relative;
  min-height:inherit;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
body.hv-hero-ratio-v34 .hv-hero-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 18%, rgba(0,0,0,0) 100%);
}
body.hv-hero-ratio-v34 .hv-hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 16%, rgba(0,0,0,0) 100%);
}

/* background assignment */
body.hv-hero-ratio-v34[data-hv-page="home"] .hv-hero-visual{background-image:url("hero-home-v34.webp")}
body.hv-hero-ratio-v34[data-hv-page="knowledge"] .hv-hero-visual{background-image:url("hero-knowledge-v34.webp")}
body.hv-hero-ratio-v34[data-hv-page="outcomes"] .hv-hero-visual{background-image:url("hero-outcomes-v34.webp")}
body.hv-hero-ratio-v34[data-hv-page="activities"] .hv-hero-visual{background-image:url("hero-activities-v34.webp")}
body.hv-hero-ratio-v34[data-hv-page="repertoire"] .hv-hero-visual{background-image:url("hero-repertoire-v34.webp")}
body.hv-hero-ratio-v34[data-hv-page="about"] .hv-hero-visual{background-image:url("hero-about-v34.webp")}

/* inner pages slightly tighter but still wide like the approved screenshot */
body.hv-hero-ratio-v34:not([data-hv-page="home"]) .hv-hero-wide{
  min-height:820px;
}
body.hv-hero-ratio-v34:not([data-hv-page="home"]) .hv-hero-copy{
  padding-top:170px;
  padding-bottom:90px;
}
body.hv-hero-ratio-v34:not([data-hv-page="home"]) .hv-hero-copy h1{
  font-size:68px;
  max-width:590px;
}
body.hv-hero-ratio-v34:not([data-hv-page="home"]) .hv-hero-copy p{
  max-width:570px;
}

/* responsive — keep correct hierarchy on 14-inch */
@media (max-width: 1440px){
  body.hv-hero-ratio-v34{ --hv-header-h: 92px; --hv-left-w: min(46vw, 690px); }
  body.hv-hero-ratio-v34 .header .brand img{width:52px!important;height:52px!important}
  body.hv-hero-ratio-v34 .header .links{gap:24px}
  body.hv-hero-ratio-v34 .header .links > a:not(.login-btn){font-size:12.6px!important}
  body.hv-hero-ratio-v34 .header .login-btn{padding:13px 24px!important; min-width:138px}
  body.hv-hero-ratio-v34 .hv-hero-copy{min-width:500px;padding:126px 46px 90px 64px}
  body.hv-hero-ratio-v34 .hv-hero-copy h1{font-size:62px}
  body.hv-hero-ratio-v34 .hv-hero-copy p{font-size:18px;max-width:500px}
  body.hv-hero-ratio-v34 .hv-hero-actions{margin-top:34px;gap:14px}
  body.hv-hero-ratio-v34 .hv-hero-actions .btn{min-height:60px;padding:0 30px;font-size:15px}
  body.hv-hero-ratio-v34:not([data-hv-page="home"]) .hv-hero-wide{min-height:700px}
  body.hv-hero-ratio-v34:not([data-hv-page="home"]) .hv-hero-copy h1{font-size:56px}
}

@media (max-width: 1100px){
  body.hv-hero-ratio-v34 .header .links{gap:18px}
  body.hv-hero-ratio-v34 .header .links > a:not(.login-btn){font-size:11.8px!important}
  body.hv-hero-ratio-v34 .hv-hero-wide{min-height:620px}
  body.hv-hero-ratio-v34 .hv-hero-copy{min-width:420px;width:min(50vw,620px);padding:94px 36px 72px 42px}
  body.hv-hero-ratio-v34 .hv-hero-copy h1{font-size:48px}
  body.hv-hero-ratio-v34 .hv-hero-copy p{font-size:16px;max-width:460px}
  body.hv-hero-ratio-v34 .hv-hero-kicker{font-size:16px}
  body.hv-hero-ratio-v34 .hv-hero-actions .btn{min-height:56px;padding:0 26px}
}

@media (max-width: 900px){
  body.hv-hero-ratio-v34 .header .wrap.nav{min-height:78px}
  body.hv-hero-ratio-v34 .header .brand strong{font-size:16px!important}
  body.hv-hero-ratio-v34 .hv-hero-wide,
  body.hv-hero-ratio-v34:not([data-hv-page="home"]) .hv-hero-wide{
    min-height:auto;
  }
  body.hv-hero-ratio-v34 .hv-hero-wide .wrap{
    display:block;
  }
  body.hv-hero-ratio-v34 .hv-hero-visual{
    min-height:330px;
    height:42vh;
  }
  body.hv-hero-ratio-v34 .hv-hero-copy{
    width:auto;
    min-width:0;
    padding:42px 22px 36px;
  }
  body.hv-hero-ratio-v34 .hv-hero-copy::after{display:none}
  body.hv-hero-ratio-v34 .hv-hero-kicker{font-size:16px;margin-bottom:16px}
  body.hv-hero-ratio-v34 .hv-hero-copy h1{
    font-size:42px!important;
    max-width:none;
  }
  body.hv-hero-ratio-v34 .hv-hero-copy p{
    font-size:15px!important;
    max-width:none;
  }
  body.hv-hero-ratio-v34 .hv-hero-actions{
    margin-top:24px;
    gap:12px;
  }
  body.hv-hero-ratio-v34 .hv-hero-actions .btn{
    width:100%;
    min-height:54px;
  }
}