/* ============================================================
   HẢI VŨ PIANO ACADEMY — PUBLIC HERO SYSTEM V96.0
   Centered responsive shell; no viewport-pinned hero media.
   Image heroes use a real <img> layer + object-fit/object-position.
   ============================================================ */
:root{
  --hv96-shell-max:1480px;
  --hv96-content-max:1200px;
  --hv96-gutter:32px;
}

/* Every public hero patched by V96 gets one centered coordinate system. */
[data-hv96-hero]{
  box-sizing:border-box!important;
  width:min(var(--hv96-shell-max),calc(100% - var(--hv96-gutter)))!important;
  max-width:var(--hv96-shell-max)!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  position:relative;
  overflow:clip;
}
[data-hv96-hero] *,[data-hv96-hero] *::before,[data-hv96-hero] *::after{box-sizing:border-box}
[data-hv96-hero] img{max-width:100%}
[data-hv96-hero] :where(.wrap,.hv5-wrap,.hv9-wrap,.hv15-wrap,.hv19-wrap,.hv21-wrap,.hv23-wrap,.hv44-wrap,.hvp2-wrap,.hv67-wrap,.hvab40-wrap){
  min-width:0!important;
}
[data-hv96-hero] :where([class*="hero-grid"],[class*="index-grid"],.record-grid,.hv75-achievement-intro-grid) > *{
  min-width:0!important;
}

/* ------------------------------------------------------------
   Image heroes: media + overlay + content share the SAME shell.
   ------------------------------------------------------------ */
[data-hv96-hero][data-hv96-media]{
  isolation:isolate!important;
  display:flex!important;
  align-items:center!important;
  min-height:clamp(460px,38vw,560px)!important;
  height:auto!important;
  background:none!important;
  background-image:none!important;
  border-bottom:1px solid rgba(13,45,75,.08);
}
[data-hv96-hero][data-hv96-media]::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,
    rgba(255,255,255,.992) 0%,
    rgba(255,255,255,.965) 25%,
    rgba(255,255,255,.84) 39%,
    rgba(255,255,255,.43) 53%,
    rgba(255,255,255,.10) 68%,
    rgba(255,255,255,0) 78%)!important;
}
[data-hv96-hero][data-hv96-media]::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,0) 72%,rgba(245,242,235,.08) 100%)!important;
}
[data-hv96-hero] > .hv96-hero-media{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  display:block!important;
  object-fit:cover!important;
  object-position:var(--hv96-object-position,70% 50%)!important;
}

/* Per-page crop at desktop. */
[data-hv96-page="index"]{--hv96-object-position:72% 52%}
[data-hv96-page="thu-vien-tri-thuc"]{--hv96-object-position:72% 50%}
[data-hv96-page="hoat-dong-hoc-thuat"]{--hv96-object-position:69% 50%}
[data-hv96-page="ve-hai-vu"]{--hv96-object-position:62% 50%}

/* Independent content container, centered inside the same media shell. */
body.hv43-home [data-hv96-page="index"] .hv43-hero-inner,
body.hv45-subhero-page [data-hv96-media] .hv45-subhero-inner{
  position:relative!important;
  z-index:2!important;
  width:min(var(--hv96-content-max),calc(100% - 64px))!important;
  max-width:var(--hv96-content-max)!important;
  margin-inline:auto!important;
  padding-block:clamp(42px,5vw,64px)!important;
  min-width:0!important;
}
body.hv43-home [data-hv96-page="index"] .hv43-copy,
body.hv45-subhero-page [data-hv96-media] .hv45-subhero-copy{
  width:min(620px,52%)!important;
  max-width:620px!important;
  min-width:0!important;
  position:relative!important;
  z-index:2!important;
}
body.hv43-home [data-hv96-page="index"] .hv43-title,
body.hv45-subhero-page [data-hv96-media] .hv45-subhero-title{
  font-size:clamp(42px,4vw,62px)!important;
  line-height:1.045!important;
  max-width:12ch!important;
  text-wrap:balance;
}
body.hv43-home [data-hv96-page="index"] .hv43-lead,
body.hv45-subhero-page [data-hv96-media] .hv45-subhero-lead{
  font-size:clamp(16px,1.25vw,18px)!important;
  line-height:1.58!important;
  max-width:600px!important;
}
body.hv43-home [data-hv96-page="index"] .hv43-actions,
body.hv45-subhero-page [data-hv96-media] .hv45-subhero-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px!important;
}

/* Old v49 rule used 100vw on Knowledge hero. V96 explicitly neutralizes it. */
body.hv45-subhero-page [data-hv96-page="thu-vien-tri-thuc"]{
  width:min(var(--hv96-shell-max),calc(100% - var(--hv96-gutter)))!important;
  max-width:var(--hv96-shell-max)!important;
}

/* ------------------------------------------------------------
   Non-image public heroes: centered shell, preserve page identity.
   ------------------------------------------------------------ */
[data-hv96-hero]:not([data-hv96-media]){
  height:auto!important;
  min-width:0!important;
}
[data-hv96-hero]:not([data-hv96-media]) :where(.wrap,.hv5-wrap,.hv9-wrap,.hv15-wrap,.hv19-wrap,.hv21-wrap,.hv23-wrap,.hv44-wrap,.hvp2-wrap,.hv67-wrap,.hvab40-wrap){
  width:min(var(--hv96-content-max),calc(100% - 64px))!important;
  max-width:var(--hv96-content-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Common hero grids never create a fixed horizontal canvas. */
[data-hv96-hero] :where(.hv15-hero-grid,.hv19-hero-grid,.hv21-hero-grid,.hv44-hero-grid,.hv9-topic-hero-grid,.hvab40-index-grid,.hv67-rep-grid,.record-grid,.archive-hero-grid,.hv75-achievement-intro-grid){
  min-width:0!important;
  max-width:100%!important;
}

/* 1366 / ordinary laptop: nearly full width but still symmetric. */
@media (max-width:1366px){
  :root{--hv96-gutter:24px}
  [data-hv96-hero][data-hv96-media]{min-height:clamp(440px,39vw,520px)!important}
  body.hv43-home [data-hv96-page="index"] .hv43-hero-inner,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-inner{
    width:min(1160px,calc(100% - 52px))!important;
    padding-block:clamp(38px,4.6vw,56px)!important;
  }
  body.hv43-home [data-hv96-page="index"] .hv43-copy,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-copy{width:min(590px,53%)!important}
}

/* 1024-ish: crop and content both move together, still centered. */
@media (max-width:1024px){
  :root{--hv96-gutter:22px}
  [data-hv96-hero][data-hv96-media]{min-height:clamp(430px,48vw,500px)!important;align-items:flex-end!important}
  [data-hv96-page="index"]{--hv96-object-position:67% 50%}
  [data-hv96-page="thu-vien-tri-thuc"]{--hv96-object-position:68% 50%}
  [data-hv96-page="hoat-dong-hoc-thuat"]{--hv96-object-position:67% 50%}
  [data-hv96-page="ve-hai-vu"]{--hv96-object-position:59% 50%}
  [data-hv96-hero][data-hv96-media]::before{
    background:linear-gradient(90deg,rgba(255,255,255,.985) 0%,rgba(255,255,255,.94) 35%,rgba(255,255,255,.67) 55%,rgba(255,255,255,.20) 76%,rgba(255,255,255,.02) 100%)!important;
  }
  body.hv43-home [data-hv96-page="index"] .hv43-hero-inner,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-inner{
    width:min(900px,calc(100% - 42px))!important;
    padding-block:40px!important;
  }
  body.hv43-home [data-hv96-page="index"] .hv43-copy,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-copy{width:min(590px,68%)!important}
  body.hv43-home [data-hv96-page="index"] .hv43-title,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-title{font-size:clamp(39px,5.2vw,52px)!important}
}

/* Tablet: hero grids stack instead of forcing a wide canvas. */
@media (max-width:768px){
  :root{--hv96-gutter:18px}
  [data-hv96-hero][data-hv96-media]{min-height:clamp(500px,75vw,570px)!important;align-items:flex-start!important}
  [data-hv96-page="index"]{--hv96-object-position:69% 50%}
  [data-hv96-page="thu-vien-tri-thuc"]{--hv96-object-position:70% 50%}
  [data-hv96-page="hoat-dong-hoc-thuat"]{--hv96-object-position:69% 50%}
  [data-hv96-page="ve-hai-vu"]{--hv96-object-position:60% 50%}
  [data-hv96-hero][data-hv96-media]::before{
    background:linear-gradient(180deg,rgba(255,255,255,.985) 0%,rgba(255,255,255,.94) 37%,rgba(255,255,255,.62) 62%,rgba(255,255,255,.12) 100%)!important;
  }
  body.hv43-home [data-hv96-page="index"] .hv43-hero-inner,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-inner{
    width:calc(100% - 32px)!important;
    padding-block:32px!important;
  }
  body.hv43-home [data-hv96-page="index"] .hv43-copy,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-copy{width:100%!important;max-width:560px!important}
  body.hv43-home [data-hv96-page="index"] .hv43-title,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-title{font-size:clamp(35px,7.4vw,44px)!important;max-width:13ch!important}
  body.hv43-home [data-hv96-page="index"] .hv43-lead,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-lead{font-size:16px!important}
  [data-hv96-hero] :where(.hv15-hero-grid,.hv19-hero-grid,.hv21-hero-grid,.hv44-hero-grid,.hv9-topic-hero-grid,.hvab40-index-grid,.hv67-rep-grid,.record-grid,.archive-hero-grid,.hv75-achievement-intro-grid){
    grid-template-columns:minmax(0,1fr)!important;
    gap:24px!important;
  }
  [data-hv96-hero]:not([data-hv96-media]) :where(.wrap,.hv5-wrap,.hv9-wrap,.hv15-wrap,.hv19-wrap,.hv21-wrap,.hv23-wrap,.hv44-wrap,.hvp2-wrap,.hv67-wrap,.hvab40-wrap){
    width:calc(100% - 30px)!important;
  }
}

/* 390/mobile: compact symmetric gutter, single-column actions. */
@media (max-width:390px){
  :root{--hv96-gutter:14px}
  [data-hv96-hero][data-hv96-media]{min-height:clamp(520px,142vw,570px)!important}
  body.hv43-home [data-hv96-page="index"] .hv43-hero-inner,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-inner{width:calc(100% - 24px)!important;padding-block:27px!important}
  body.hv43-home [data-hv96-page="index"] .hv43-title,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-title{font-size:clamp(32px,9.6vw,38px)!important;line-height:1.06!important}
  body.hv43-home [data-hv96-page="index"] .hv43-actions,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important;max-width:350px!important}
  body.hv43-home [data-hv96-page="index"] .hv43-actions a,
  body.hv45-subhero-page [data-hv96-media] .hv45-subhero-actions a{width:100%!important;text-align:center!important;justify-content:center!important}
  [data-hv96-hero]:not([data-hv96-media]) :where(.wrap,.hv5-wrap,.hv9-wrap,.hv15-wrap,.hv19-wrap,.hv21-wrap,.hv23-wrap,.hv44-wrap,.hvp2-wrap,.hv67-wrap,.hvab40-wrap){width:calc(100% - 22px)!important}
}