/* ============================================================
   HẢI VŨ PIANO ACADEMY — VISUAL BALANCE V97.0
   Base: V96.0 centered responsive hero system
   Scope: major navigation pages + approved value statements
   ============================================================ */
:root{
  --hv97-hero-h:clamp(460px,34vw,510px);
  --hv97-title:clamp(36px,3.25vw,50px);
  --hv97-lead:clamp(15.5px,1.12vw,17.5px);
  --hv97-content:1160px;
}

/* ------------------------------------------------------------
   1) PUBLIC HEADER RHYTHM — same visual scale between tabs
   ------------------------------------------------------------ */
:where(body.hv43-home,body.hv45-subhero-page,body.hv-achievements,body.hv67-repertoire) > header{
  min-height:72px!important;
}
:where(body.hv43-home,body.hv45-subhero-page,body.hv-achievements) > header :where(.wrap.nav,.nav),
body.hv67-repertoire > header .hv67-header-inner{
  width:min(1200px,calc(100% - 40px))!important;
  max-width:1200px!important;
  margin-inline:auto!important;
  min-height:72px!important;
  height:auto!important;
  min-width:0!important;
}
:where(body.hv43-home,body.hv45-subhero-page,body.hv-achievements) > header .brand img,
body.hv67-repertoire > header .hv67-brand img{
  width:43px!important;
  height:43px!important;
  object-fit:contain!important;
  flex:0 0 43px!important;
}
:where(body.hv43-home,body.hv45-subhero-page,body.hv-achievements) > header .brand strong,
body.hv67-repertoire > header .hv67-brand strong{
  font-size:13.5px!important;
  line-height:1.16!important;
  letter-spacing:.02em!important;
}
:where(body.hv43-home,body.hv45-subhero-page,body.hv-achievements) > header .brand span,
body.hv67-repertoire > header .hv67-brand span{
  font-size:11.5px!important;
  line-height:1.25!important;
  letter-spacing:.015em!important;
}
:where(body.hv43-home,body.hv45-subhero-page,body.hv-achievements) > header .links,
body.hv67-repertoire > header .hv67-nav{
  min-width:0!important;
  gap:clamp(7px,1vw,15px)!important;
}
:where(body.hv43-home,body.hv45-subhero-page,body.hv-achievements) > header .links > a,
body.hv67-repertoire > header .hv67-nav > a{
  font-size:13px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}

/* ------------------------------------------------------------
   2) SAME PHOTO-HERO HEIGHT AT THE SAME VIEWPORT / ZOOM
   Source image resolution no longer affects the visible band.
   ------------------------------------------------------------ */
[data-hv96-hero][data-hv96-media],
body.hv67-repertoire .hv67-rep-hero{
  height:var(--hv97-hero-h)!important;
  min-height:var(--hv97-hero-h)!important;
  max-height:var(--hv97-hero-h)!important;
  overflow:clip!important;
}
[data-hv96-hero][data-hv96-media] > .hv96-hero-media{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
body.hv67-repertoire .hv67-rep-hero{
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:66% center!important;
  display:flex!important;
  align-items:center!important;
}

/* ------------------------------------------------------------
   3) ELEGANT, SMALLER HERO TYPOGRAPHY + CONSISTENT READING WIDTH
   ------------------------------------------------------------ */
body.hv43-home [data-hv96-page="index"] .hv43-hero-inner,
body.hv45-subhero-page [data-hv96-media] .hv45-subhero-inner,
body.hv67-repertoire .hv67-rep-hero-inner{
  position:relative!important;
  z-index:2!important;
  width:min(var(--hv97-content),calc(100% - 52px))!important;
  max-width:var(--hv97-content)!important;
  min-width:0!important;
  margin-inline:auto!important;
  padding-block:clamp(26px,3vw,38px)!important;
}
body.hv43-home [data-hv96-page="index"] .hv43-copy,
body.hv45-subhero-page [data-hv96-media] .hv45-subhero-copy,
body.hv67-repertoire .hv67-rep-copy{
  width:min(610px,54%)!important;
  max-width:610px!important;
  min-width:0!important;
}
body.hv43-home [data-hv96-page="index"] .hv43-title,
body.hv45-subhero-page [data-hv96-media] .hv45-subhero-title,
body.hv67-repertoire .hv67-rep-copy h1{
  font-size:var(--hv97-title)!important;
  line-height:1.065!important;
  letter-spacing:-.026em!important;
  max-width:15ch!important;
  text-wrap:balance!important;
  margin-bottom:14px!important;
}
body.hv45-subhero-page [data-hv96-page="hoat-dong-hoc-thuat"] .hv45-subhero-title,
body.hv45-subhero-page [data-hv96-page="ve-hai-vu"] .hv45-subhero-title,
body.hv67-repertoire .hv67-rep-copy h1{
  max-width:16.5ch!important;
}
body.hv43-home [data-hv96-page="index"] .hv43-lead,
body.hv45-subhero-page [data-hv96-media] .hv45-subhero-lead,
body.hv67-repertoire .hv67-rep-copy > p{
  font-size:var(--hv97-lead)!important;
  line-height:1.58!important;
  max-width:600px!important;
  margin-top:0!important;
}
body.hv43-home [data-hv96-page="index"] .hv43-eyebrow,
body.hv45-subhero-page [data-hv96-media] .hv45-subhero-eyebrow,
body.hv67-repertoire .hv67-kicker{
  font-size:11.5px!important;
  letter-spacing:.12em!important;
}
body.hv43-home [data-hv96-page="index"] .hv43-actions,
body.hv45-subhero-page [data-hv96-media] .hv45-subhero-actions,
body.hv67-repertoire .hv67-rep-actions{
  margin-top:18px!important;
  gap:10px!important;
}

/* Achievement landing hero: same type scale, but no artificial photo height. */
body.hv-achievements [data-hv96-page="thanh-qua-hoc-tap"] h1,
body.hv-achievements .hv75-achievement-intro h1{
  font-size:clamp(34px,3vw,47px)!important;
  line-height:1.08!important;
  letter-spacing:-.024em!important;
  text-wrap:balance!important;
}
body.hv-achievements .hv75-achievement-intro{
  padding-block:clamp(38px,4vw,56px)!important;
}

/* ------------------------------------------------------------
   4) COUNTER: ONE FINAL SMALLER STEP, still prominent
   ------------------------------------------------------------ */
.hv94-achievement{padding:6px 0!important}
.hv94-achievement .hv94-wrap{width:min(820px,calc(100% - 36px))!important}
.hv94-achievement .hv94-panel{padding:15px 18px 14px!important;border-radius:20px!important}
.hv94-achievement .hv94-head{margin-bottom:11px!important;max-width:660px!important}
.hv94-achievement .hv94-title{font-size:clamp(24px,2.45vw,34px)!important}
.hv94-achievement .hv94-desc{font-size:13.5px!important;line-height:1.48!important;margin-top:6px!important}
.hv94-achievement .hv94-stats{max-width:750px!important;gap:12px!important}
.hv94-achievement .hv94-card{grid-template-columns:88px minmax(0,1fr)!important;height:138px!important;min-height:138px!important;max-height:138px!important;padding:10px 13px!important;border-radius:17px!important}
.hv94-achievement .hv94-art{height:96px!important;min-height:96px!important;max-height:96px!important}
.hv94-achievement .hv94-art img{width:80px!important;height:90px!important;border-radius:12px!important}
.hv94-achievement .hv94-num{font-size:clamp(38px,3.25vw,50px)!important}
.hv94-achievement .hv94-label{font-size:clamp(19px,1.45vw,24px)!important;margin-top:3px!important}
.hv94-achievement .hv94-note{font-size:12px!important;line-height:1.38!important;margin-top:5px!important}
.hv94-achievement .hv94-actions{margin-top:10px!important}
.hv94-achievement .hv94-btn{padding:8px 17px!important;font-size:13px!important}

/* ------------------------------------------------------------
   5) VALUE / PHILOSOPHY STATEMENTS — no colored banner
   ------------------------------------------------------------ */
.hv97-value-quote{
  background:transparent!important;
  color:inherit!important;
  padding:clamp(42px,5vw,68px) 0!important;
  border:0!important;
}
.hv97-value-quote .hv97-value-inner{
  width:min(920px,calc(100% - 44px));
  margin-inline:auto;
  text-align:center;
  padding:0;
}
.hv97-value-quote blockquote{
  margin:0 auto;
  max-width:900px;
  color:#31485e;
  font-family:"Noto Serif",Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(19px,1.65vw,25px);
  line-height:1.68;
  letter-spacing:.005em;
  text-wrap:balance;
}
.hv97-value-quote .hv97-value-label{
  display:block;
  margin-top:16px;
  color:#8793a0;
  font-family:"Be Vietnam Pro",Arial,sans-serif;
  font-size:11px;
  font-style:normal;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hv97-value-quote .hv97-value-rule{
  display:block;
  width:54px;
  height:1px;
  margin:0 auto 18px;
  background:#d8dee5;
}

/* ------------------------------------------------------------
   6) BREAKPOINT NORMALIZATION
   ------------------------------------------------------------ */
@media(max-width:1366px){
  :root{--hv97-hero-h:clamp(440px,34.5vw,475px);--hv97-title:clamp(35px,3.15vw,46px);--hv97-lead:16px}
  body.hv43-home [data-hv96-page="index"] .hv43-hero-inner,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-inner,
  body.hv67-repertoire .hv67-rep-hero-inner{width:min(1120px,calc(100% - 46px))!important;padding-block:28px!important}
}
@media(max-width:1100px){
  :where(body.hv43-home,body.hv45-subhero-page,body.hv-achievements) > header .links > a,
  body.hv67-repertoire > header .hv67-nav > a{font-size:12px!important}
  :where(body.hv43-home,body.hv45-subhero-page,body.hv-achievements) > header .links,
  body.hv67-repertoire > header .hv67-nav{gap:7px!important}
}
@media(max-width:1024px){
  :root{--hv97-hero-h:clamp(420px,43vw,455px);--hv97-title:clamp(34px,4.2vw,42px);--hv97-lead:15.5px}
  body.hv43-home [data-hv96-page="index"] .hv43-hero-inner,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-inner,
  body.hv67-repertoire .hv67-rep-hero-inner{width:min(900px,calc(100% - 38px))!important;padding-block:26px!important}
  body.hv43-home [data-hv96-page="index"] .hv43-copy,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-copy,
  body.hv67-repertoire .hv67-rep-copy{width:min(580px,68%)!important}
}
@media(max-width:820px){
  .hv94-achievement .hv94-wrap{width:min(100% - 24px,820px)!important}
  .hv94-achievement .hv94-stats{grid-template-columns:1fr!important;max-width:500px!important}
  .hv94-achievement .hv94-card{height:120px!important;min-height:120px!important;max-height:120px!important}
}
@media(max-width:768px){
  :root{--hv97-hero-h:clamp(465px,68vw,510px);--hv97-title:clamp(32px,6.4vw,38px);--hv97-lead:15px}
  body.hv43-home [data-hv96-page="index"] .hv43-hero-inner,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-inner,
  body.hv67-repertoire .hv67-rep-hero-inner{width:calc(100% - 30px)!important;padding-block:24px!important}
  body.hv43-home [data-hv96-page="index"] .hv43-copy,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-copy,
  body.hv67-repertoire .hv67-rep-copy{width:100%!important;max-width:550px!important}
  .hv97-value-quote{padding:38px 0!important}
}
@media(max-width:390px){
  :root{--hv97-hero-h:clamp(500px,138vw,540px);--hv97-title:clamp(30px,8.8vw,34px);--hv97-lead:14.5px}
  body.hv43-home [data-hv96-page="index"] .hv43-hero-inner,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-inner,
  body.hv67-repertoire .hv67-rep-hero-inner{width:calc(100% - 22px)!important;padding-block:22px!important}
  .hv94-achievement .hv94-wrap{width:min(100% - 16px,820px)!important}
  .hv94-achievement .hv94-panel{padding:13px 9px 12px!important}
  .hv94-achievement .hv94-card{grid-template-columns:64px minmax(0,1fr)!important;height:108px!important;min-height:108px!important;max-height:108px!important;padding:9px!important}
  .hv94-achievement .hv94-art{height:72px!important;min-height:72px!important;max-height:72px!important}
  .hv94-achievement .hv94-art img{width:58px!important;height:66px!important}
  .hv97-value-quote .hv97-value-inner{width:calc(100% - 28px)}
  .hv97-value-quote blockquote{font-size:18px;line-height:1.62}
}