/* HAI VU PIANO ACADEMY — LỊCH SỬ ÂM NHẠC V21
   Institutional – Academic – Premium
   One selected historical period at a time.
*/

body.hv21-history-page{
  --hv21-ink:#18384f;
  --hv21-muted:#647681;
  --hv21-line:rgba(24,56,79,.12);
  --hv21-gold:#9a7040;
  --hv21-soft:#fbfaf7;
}

body.hv21-history-page .header{
  min-height:72px!important;
}
body.hv21-history-page .header > .wrap,
body.hv21-history-page .header .wrap{
  padding-top:8px!important;
  padding-bottom:8px!important;
}
body.hv21-history-page .header .brand img{
  max-height:50px!important;
  width:auto!important;
}

.hv21-main{
  color:var(--hv21-ink);
  background:#fff;
}
.hv21-wrap{
  width:min(1220px,calc(100% - 48px));
  margin-inline:auto;
}

/* Hero kept compact for 14-inch laptop. */
.hv21-hero{
  padding:48px 0 40px;
  background:linear-gradient(90deg,#fbfaf6 0%,#f7fafb 100%);
  border-bottom:1px solid rgba(24,56,79,.07);
}
.hv21-eyebrow{
  display:block;
  margin-bottom:11px;
  color:var(--hv21-gold);
  font-size:12px;
  font-weight:650;
  letter-spacing:.055em;
}
.hv21-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(280px,.62fr);
  gap:64px;
  align-items:end;
}
.hv21-hero h1{
  margin:0 0 15px;
  max-width:780px;
  font-size:clamp(42px,3.8vw,50px);
  line-height:1.08;
  letter-spacing:-.034em;
  font-weight:610;
}
.hv21-hero p{
  max-width:830px;
  margin:0;
  color:var(--hv21-muted);
  font-size:17px;
  line-height:1.7;
}
.hv21-summary{
  padding-left:24px;
  border-left:1px solid var(--hv21-line);
}
.hv21-summary strong{
  display:block;
  margin-bottom:8px;
  font-size:27px;
  font-weight:600;
  letter-spacing:-.02em;
}
.hv21-summary span{
  display:block;
  color:var(--hv21-muted);
  font-size:14px;
  line-height:1.65;
}

/* Section selection */
.hv21-controls{
  border-bottom:1px solid rgba(24,56,79,.08);
  background:#fff;
}
.hv21-controls-inner{
  width:min(1220px,calc(100% - 48px));
  margin-inline:auto;
  padding:18px 0 17px;
}
.hv21-control-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(310px,390px);
  gap:16px;
  align-items:end;
}
.hv21-field label{
  display:block;
  margin-bottom:6px;
  color:#758690;
  font-size:11px;
  font-weight:650;
  letter-spacing:.055em;
}
.hv21-search,
.hv21-select{
  width:100%;
  min-height:46px;
  padding:0 14px;
  border:1px solid rgba(24,56,79,.16);
  border-radius:9px;
  background:#fff;
  color:var(--hv21-ink);
  font:inherit;
  font-size:15px;
  outline:none;
}
.hv21-search:focus,
.hv21-select:focus{
  border-color:rgba(18,63,91,.42);
  box-shadow:0 0 0 3px rgba(18,63,91,.05);
}
.hv21-partbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(24,56,79,.08);
}
.hv21-current{min-width:0}
.hv21-current small{
  display:block;
  margin-bottom:3px;
  color:var(--hv21-gold);
  font-size:11px;
  font-weight:650;
  letter-spacing:.05em;
}
.hv21-current strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--hv21-ink);
  font-size:15px;
  font-weight:600;
}
.hv21-part-actions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}
.hv21-part-btn{
  min-height:38px;
  padding:0 13px;
  border:1px solid rgba(24,56,79,.15);
  border-radius:999px;
  background:#fff;
  color:var(--hv21-ink);
  font:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
.hv21-part-btn:disabled{opacity:.38;cursor:not-allowed}

/* Index */
.hv21-index{
  padding:50px 0 94px;
}
.hv21-part{
  display:grid;
  grid-template-columns:310px minmax(0,1fr);
  gap:64px;
  padding:0 0 70px;
}
.hv21-part[hidden]{display:none!important}
.hv21-part.hv21-active{display:grid!important}
.hv21-part-meta{align-self:start}
.hv21-part-no{
  display:block;
  margin-bottom:9px;
  color:var(--hv21-gold);
  font-size:12px;
  font-weight:650;
  letter-spacing:.05em;
}
.hv21-part h2{
  margin:0 0 12px;
  font-size:31px;
  line-height:1.22;
  letter-spacing:-.022em;
  font-weight:610;
}
.hv21-part-intro{
  margin:0;
  color:#536b7a;
  font-size:16px;
  line-height:1.74;
}
.hv21-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:36px;
}
.hv21-item{
  border-bottom:1px solid rgba(24,56,79,.1);
}
.hv21-item a{
  display:grid;
  grid-template-columns:42px 1fr 18px;
  gap:12px;
  align-items:center;
  min-height:78px;
  padding:12px 0;
  color:var(--hv21-ink);
  text-decoration:none;
}
.hv21-item a:hover .hv21-item-title{color:#0d547e}
.hv21-num{
  color:var(--hv21-gold);
  font-size:13px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
}
.hv21-item-title{
  font-size:17px;
  line-height:1.48;
  font-weight:560;
}
.hv21-arrow{color:#8da0aa}
.hv21-empty{
  display:none;
  padding:34px 0;
  color:var(--hv21-muted);
  font-size:16px;
  line-height:1.65;
}

/* Article */
.hv21-article-hero{
  padding:30px 0 24px;
  background:#fbfaf7;
  border-bottom:1px solid rgba(24,56,79,.08);
}
.hv21-breadcrumb{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:16px;
  color:#788993;
  font-size:12px;
}
.hv21-breadcrumb a{
  color:inherit;
  text-decoration:none;
}
.hv21-article-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:66px;
  align-items:end;
}
.hv21-article-no{
  display:block;
  margin-bottom:8px;
  color:var(--hv21-gold);
  font-size:12px;
  font-weight:650;
  letter-spacing:.05em;
}
.hv21-article-hero h1{
  max-width:860px;
  margin:0;
  font-size:clamp(38px,3.4vw,46px);
  line-height:1.08;
  letter-spacing:-.032em;
  font-weight:610;
}
.hv21-context{
  padding-left:22px;
  border-left:1px solid var(--hv21-line);
  color:var(--hv21-muted);
  font-size:14px;
  line-height:1.68;
}
.hv21-context strong{
  display:block;
  margin-bottom:7px;
  color:var(--hv21-ink);
  font-size:14px;
  font-weight:620;
}

.hv21-article-layout{
  display:grid;
  grid-template-columns:minmax(0,780px) 300px;
  gap:74px;
  justify-content:space-between;
  padding:30px 0 96px;
}
.hv21-copy::before{
  content:"";
  display:block;
  width:54px;
  height:1px;
  margin-bottom:26px;
  background:#b89161;
}
.hv21-copy p{
  margin:0 0 27px;
  color:#2f4a5b;
  font-size:18.5px;
  line-height:1.82;
}
.hv21-copy p:last-child{margin-bottom:0}
.hv21-aside{
  align-self:start;
  position:sticky;
  top:96px;
}
.hv21-aside-title{
  margin-bottom:13px;
  color:var(--hv21-gold);
  font-size:11px;
  font-weight:650;
  letter-spacing:.06em;
}
.hv21-aside a{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:9px;
  padding:10px 0;
  border-bottom:1px solid rgba(24,56,79,.08);
  color:#6e7e87;
  text-decoration:none;
  font-size:13.5px;
  line-height:1.48;
}
.hv21-aside a.current{
  color:var(--hv21-ink);
  font-weight:620;
}
.hv21-aside a span:first-child{
  color:#a17a4c;
  font-variant-numeric:tabular-nums;
}
.hv21-prevnext{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:48px;
  padding-top:22px;
  border-top:1px solid var(--hv21-line);
}
.hv21-prevnext a{
  padding:14px 0;
  color:var(--hv21-ink);
  text-decoration:none;
}
.hv21-prevnext a:last-child{text-align:right}
.hv21-prevnext small{
  display:block;
  margin-bottom:5px;
  color:#83929b;
  font-size:11px;
}
.hv21-prevnext strong{
  font-size:15px;
  line-height:1.5;
  font-weight:600;
}

/* References */
.hv21-references{
  margin-top:26px;
  padding-top:26px;
  border-top:1px solid var(--hv21-line);
}
.hv21-references details{
  padding:0;
}
.hv21-references summary{
  cursor:pointer;
  color:var(--hv21-ink);
  font-size:15px;
  font-weight:600;
}
.hv21-references p{
  margin:14px 0 12px;
  color:var(--hv21-muted);
  font-size:14px;
  line-height:1.65;
}
.hv21-references ul{
  margin:0;
  padding-left:20px;
  color:#526a79;
  font-size:14px;
  line-height:1.7;
}

@media (min-width:980px) and (max-height:920px){
  body.hv21-history-page .header{
    min-height:68px!important;
  }
  body.hv21-history-page .header .brand img{
    max-height:46px!important;
  }
  .hv21-hero{
    padding-top:34px;
    padding-bottom:30px;
  }
  .hv21-index{
    padding-top:42px;
  }
  .hv21-article-hero{
    padding-top:24px;
    padding-bottom:20px;
  }
  .hv21-article-layout{
    padding-top:24px;
  }
}

@media(max-width:960px){
  .hv21-hero-grid,
  .hv21-article-grid{
    grid-template-columns:1fr;
    gap:26px;
  }
  .hv21-summary,
  .hv21-context{
    padding-left:0;
    padding-top:18px;
    border-left:0;
    border-top:1px solid var(--hv21-line);
  }
  .hv21-control-top{grid-template-columns:1fr}
  .hv21-part.hv21-active{display:block!important}
  .hv21-part-meta{margin-bottom:24px}
  .hv21-article-layout{
    grid-template-columns:1fr;
    gap:50px;
  }
  .hv21-aside{position:static}
}

@media(max-width:720px){
  .hv21-wrap,
  .hv21-controls-inner{
    width:min(100% - 32px,1220px);
  }
  .hv21-hero{
    padding:44px 0 36px;
  }
  .hv21-hero h1,
  .hv21-article-hero h1{
    font-size:clamp(36px,10vw,42px);
  }
  .hv21-partbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .hv21-current strong{white-space:normal}
  .hv21-index{padding:44px 0 72px}
  .hv21-part h2{font-size:29px}
  .hv21-list{grid-template-columns:1fr}
  .hv21-item-title{font-size:16.5px}
  .hv21-article-hero{padding:38px 0 30px}
  .hv21-article-layout{padding:42px 0 72px}
  .hv21-copy p{
    font-size:17.5px;
    line-height:1.78;
  }
  .hv21-prevnext{grid-template-columns:1fr}
  .hv21-prevnext a:last-child{text-align:left}
}