/* HẢI VŨ PIANO ACADEMY — CANONICAL PUBLIC LAYOUT
   Shared coordinate system for public header/hero/footer.
   No viewport-pinned media, no transform scaling, no negative-margin centering.
*/
:root{
  --site-max:1480px;
  --site-gutter:clamp(18px,3.4vw,64px);
  --hv-public-content:1200px;
  --hv-public-navy:#0d3554;
  --hv-public-ink:#17384f;
  --hv-public-muted:#526b7c;
  --hv-public-gold:#a86a22;
  --hv-public-line:#dde6eb;
}
.site-container{
  width:min(var(--site-max),calc(100% - var(--site-gutter) - var(--site-gutter)));
  margin-inline:auto;
  min-width:0;
}

/* ---------- canonical hero ---------- */
.hv-public-hero{
  --hero-x:70%;
  --hero-y:50%;
  position:relative;
  isolation:isolate;
  overflow:clip;
  width:min(var(--site-max),calc(100% - var(--site-gutter) - var(--site-gutter)));
  min-height:clamp(460px,34vw,520px);
  margin-inline:auto;
  display:flex;
  align-items:center;
  border-bottom:1px solid rgba(13,53,84,.08);
  background:#f8f7f2;
}
.hv-public-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,.992) 0%,
    rgba(255,255,255,.97) 25%,
    rgba(255,255,255,.85) 40%,
    rgba(255,255,255,.44) 55%,
    rgba(255,255,255,.10) 70%,
    rgba(255,255,255,0) 80%);
}
.hv-public-hero__media{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:var(--hero-x) var(--hero-y);
}
.hv-public-hero__inner{
  position:relative;
  z-index:2;
  width:min(var(--hv-public-content),calc(100% - 64px));
  margin-inline:auto;
  padding:44px 0 48px;
}
.hv-public-hero__copy{
  width:min(610px,53%);
  min-width:0;
}
.hv-public-hero__eyebrow{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 16px;
  color:var(--hv-public-gold);
  font:700 12px/1.35 "Be Vietnam Pro","Segoe UI",Arial,sans-serif;
  letter-spacing:.075em;
}
.hv-public-hero__eyebrow::after{
  content:"";
  width:46px;
  height:1px;
  background:#b77a31;
  flex:0 0 auto;
}
.hv-public-hero__title{
  max-width:13ch;
  margin:0;
  color:var(--hv-public-navy);
  font:600 clamp(41px,3.7vw,57px)/1.055 "Noto Serif",Cambria,Georgia,serif;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.hv-public-hero__lead{
  max-width:600px;
  margin:18px 0 0;
  color:var(--hv-public-muted);
  font:400 clamp(15.5px,1.15vw,17.5px)/1.6 "Be Vietnam Pro","Segoe UI",Arial,sans-serif;
}
.hv-public-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:11px;
  margin-top:22px;
}
.hv-public-hero__btn{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 22px;
  border-radius:999px;
  border:1px solid #6f8aa0;
  background:rgba(255,255,255,.78);
  color:#153b59;
  text-decoration:none;
  font:700 14px/1 "Be Vietnam Pro","Segoe UI",Arial,sans-serif;
}
.hv-public-hero__btn--primary{
  color:#fff;
  background:#07395f;
  border-color:#b67b31;
}
.hv-public-hero__btn:hover{transform:translateY(-1px)}

/* ---------- canonical footer ---------- */
.site-footer{
  position:relative;
  overflow:hidden;
  margin-top:54px;
  color:#f4f8fb;
  background:
    linear-gradient(90deg,rgba(5,46,71,.18),rgba(4,48,75,.92) 48%,rgba(4,40,63,.78)),
    url("/assets/home-footer-v31/footer-bg-v31.webp") center/cover no-repeat,
    #07314e;
  border-top:1px solid rgba(255,255,255,.10);
}
.site-footer__inner{padding:30px 0 16px}
.site-footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(155px,.72fr) minmax(250px,1.05fr) minmax(145px,.62fr);
  gap:34px;
  align-items:start;
}
.site-footer__brand-row{display:flex;gap:14px;align-items:flex-start}
.site-footer__logo{width:58px;height:58px;object-fit:contain;flex:0 0 auto;background:#70d2ec}
.site-footer__brand-name{margin:0 0 4px;font:700 22px/1.1 "Noto Serif",Georgia,serif;color:#fff}
.site-footer__slogan{color:rgba(255,255,255,.86);font:400 13.5px/1.4 "Be Vietnam Pro",sans-serif}
.site-footer__brand-copy{max-width:430px;margin:14px 0 0;color:rgba(255,255,255,.82);font:400 13.8px/1.62 "Be Vietnam Pro",sans-serif}
.site-footer__col{min-width:0;min-height:150px;padding-left:30px;border-left:1px solid rgba(255,255,255,.20)}
.site-footer__heading{margin:1px 0 12px;color:#fff;font:700 14px/1.35 "Be Vietnam Pro",sans-serif}
.site-footer__links{display:flex;flex-direction:column;gap:8px}
.site-footer__links a,.site-footer__contact a{color:rgba(255,255,255,.84);text-decoration:none;font:400 13.3px/1.4 "Be Vietnam Pro",sans-serif}
.site-footer__links a:hover,.site-footer__contact a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.site-footer__contact{display:flex;flex-direction:column;gap:10px;min-width:0}
.site-footer__contact-row{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:start;color:rgba(255,255,255,.84);font:400 13.3px/1.48 "Be Vietnam Pro",sans-serif;overflow-wrap:anywhere}
.site-footer__contact-row svg{width:16px;height:16px;margin-top:2px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.site-footer__socials{display:flex;gap:10px;margin:3px 0 17px}
.site-footer__social{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:#fff;text-decoration:none;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12)}
.site-footer__myhv{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.64);border-radius:999px;color:#fff;text-decoration:none;font:700 12.5px/1 "Be Vietnam Pro",sans-serif}
.site-footer__bottom{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:19px;padding-top:12px;border-top:1px solid rgba(255,255,255,.20);color:rgba(255,255,255,.68);font:400 11.8px/1.45 "Be Vietnam Pro",sans-serif}
.site-footer__values{color:rgba(255,255,255,.78);text-align:right}

@media(max-width:1100px){
  .hv-public-hero__inner{width:min(1000px,calc(100% - 50px))}
  .hv-public-hero__copy{width:min(600px,61%)}
  .site-footer__grid{grid-template-columns:minmax(0,1.3fr) minmax(150px,.8fr);row-gap:28px}
  .site-footer__col:nth-child(3){border-left:0;padding-left:0}
}
@media(max-width:768px){
  :root{--site-gutter:16px}
  .hv-public-hero{min-height:560px;align-items:flex-start}
  .hv-public-hero::before{background:linear-gradient(180deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.94) 37%,rgba(255,255,255,.65) 65%,rgba(255,255,255,.15) 100%)}
  .hv-public-hero__inner{width:calc(100% - 30px);padding:30px 0 34px}
  .hv-public-hero__copy{width:100%;max-width:570px}
  .hv-public-hero__title{font-size:clamp(34px,7.6vw,43px);max-width:14ch}
  .hv-public-hero__lead{font-size:15.5px;line-height:1.55}
  .hv-public-hero__actions{display:grid;grid-template-columns:1fr;max-width:360px}
  .hv-public-hero__btn{width:100%}
  .site-footer__grid{grid-template-columns:1fr;gap:23px}
  .site-footer__col{border-left:0;padding-left:0;min-height:0}
  .site-footer__bottom{flex-direction:column;align-items:flex-start}
  .site-footer__values{text-align:left}
}
@media(max-width:430px){
  .hv-public-hero{min-height:545px}
  .hv-public-hero__inner{width:calc(100% - 24px);padding-top:26px}
  .hv-public-hero__title{font-size:clamp(31px,9vw,36px)}
  .hv-public-hero__eyebrow{font-size:10.5px;gap:10px}
  .hv-public-hero__eyebrow::after{width:28px}
  .site-footer__inner{padding-top:26px}
  .site-footer__brand-name{font-size:20px}
}

/* V2 — preserve readable primary CTA even on legacy pages that globally inherit link color. */
.hv-public-hero a.hv-public-hero__btn--primary,
body.hv67-page .hv-public-hero a.hv-public-hero__btn--primary{
  color:#fff!important;
  background:#07395f!important;
  border-color:#b67b31!important;
}
.hv-public-hero a.hv-public-hero__btn--primary:hover,
body.hv67-page .hv-public-hero a.hv-public-hero__btn--primary:hover{color:#fff!important;}