/* HẢI VŨ PIANO ACADEMY — GLOBAL FLOW V22
   Quy tắc dài hạn:
   - Không dùng số lượng bài/chuyên đề như một thông điệp quảng bá nổi bật.
   - Nội dung hữu ích phải xuất hiện sớm trên viewport, đặc biệt laptop 14".
   - Giữ khoảng trắng sang trọng nhưng không tạo "khoảng rơi" giữa điều hướng và nội dung.
   - Không giảm cỡ chữ bài đọc.
*/

body.hv22-flow{
  --hv22-section-top:28px;
  --hv22-section-bottom:76px;
}

/* Header: giữ trang trọng nhưng tiết kiệm chiều cao. */
body.hv22-flow .header{
  min-height:70px!important;
}
body.hv22-flow .header > .wrap,
body.hv22-flow .header .wrap{
  padding-top:7px!important;
  padding-bottom:7px!important;
}
body.hv22-flow .header .brand img{
  max-height:48px!important;
  width:auto!important;
}

/* Các hero học thuật: vẫn có khoảng thở nhưng không chiếm gần trọn màn hình. */
body.hv22-flow .hv15-hero,
body.hv22-flow .hv19-hero,
body.hv22-flow .hv21-hero,
body.hv22-flow .library-hero,
body.hv22-flow .hero-section{
  padding-top:36px!important;
  padding-bottom:30px!important;
}

/* Các dải điều khiển/search/select: gọn hơn và nối trực tiếp với danh sách. */
body.hv22-flow .hv18-controls-inner,
body.hv22-flow .hv19-controls-inner,
body.hv22-flow .hv21-controls-inner{
  padding-top:14px!important;
  padding-bottom:12px!important;
}
body.hv22-flow .hv18-partbar,
body.hv22-flow .hv19-partbar,
body.hv22-flow .hv21-partbar{
  margin-top:10px!important;
  padding-top:10px!important;
}

/* QUAN TRỌNG: bỏ "khoảng rơi" trước danh sách bài. */
body.hv22-flow .hv15-index,
body.hv22-flow .hv19-index,
body.hv22-flow .hv21-index{
  padding-top:20px!important;
  padding-bottom:var(--hv22-section-bottom)!important;
}
body.hv22-flow .hv15-part,
body.hv22-flow .hv19-part,
body.hv22-flow .hv21-part{
  padding-top:0!important;
}

/* Giảm khoảng hở giữa tiêu đề phần và danh sách bên phải. */
body.hv22-flow .hv15-part,
body.hv22-flow .hv19-part,
body.hv22-flow .hv21-part{
  align-items:start!important;
}
body.hv22-flow .hv15-part-meta,
body.hv22-flow .hv19-part-meta,
body.hv22-flow .hv21-part-meta{
  margin-top:0!important;
  padding-top:0!important;
}

/* Article pages: title và đoạn đọc đầu tiên phải vào viewport sớm. */
body.hv22-flow .hv15-article-hero,
body.hv22-flow .hv19-article-hero,
body.hv22-flow .hv21-article-hero{
  padding-top:22px!important;
  padding-bottom:18px!important;
}
body.hv22-flow .hv15-breadcrumb,
body.hv22-flow .hv19-breadcrumb,
body.hv22-flow .hv21-breadcrumb{
  margin-bottom:12px!important;
}
body.hv22-flow .hv15-article-layout,
body.hv22-flow .hv19-article-layout,
body.hv22-flow .hv21-article-layout{
  padding-top:22px!important;
}
body.hv22-flow .hv15-copy::before,
body.hv22-flow .hv19-copy::before,
body.hv22-flow .hv21-copy::before{
  margin-bottom:20px!important;
}

/* Generic public sections: ngăn các patch cũ tạo spacer quá lớn. */
body.hv22-flow main > section{
  scroll-margin-top:96px;
}
body.hv22-flow main > section + section{
  margin-top:0!important;
}

/* Giữ typography đã chốt. */
body.hv22-flow .hv15-copy p,
body.hv22-flow .hv19-copy p,
body.hv22-flow .hv21-copy p{
  font-size:18.5px!important;
  line-height:1.82!important;
}

/* Laptop 14 inch / viewport thấp */
@media (min-width:980px) and (max-height:920px){
  body.hv22-flow .header{
    min-height:66px!important;
  }
  body.hv22-flow .header .brand img{
    max-height:44px!important;
  }

  body.hv22-flow .hv15-hero,
  body.hv22-flow .hv19-hero,
  body.hv22-flow .hv21-hero,
  body.hv22-flow .library-hero,
  body.hv22-flow .hero-section{
    padding-top:28px!important;
    padding-bottom:24px!important;
  }

  body.hv22-flow .hv15-index,
  body.hv22-flow .hv19-index,
  body.hv22-flow .hv21-index{
    padding-top:14px!important;
  }

  body.hv22-flow .hv15-article-hero,
  body.hv22-flow .hv19-article-hero,
  body.hv22-flow .hv21-article-hero{
    padding-top:18px!important;
    padding-bottom:15px!important;
  }

  body.hv22-flow .hv15-article-layout,
  body.hv22-flow .hv19-article-layout,
  body.hv22-flow .hv21-article-layout{
    padding-top:18px!important;
  }
}

/* Mobile: không ép chặt như desktop. */
@media (max-width:760px){
  body.hv22-flow .header{
    min-height:unset!important;
  }

  body.hv22-flow .hv15-hero,
  body.hv22-flow .hv19-hero,
  body.hv22-flow .hv21-hero,
  body.hv22-flow .library-hero,
  body.hv22-flow .hero-section{
    padding-top:40px!important;
    padding-bottom:34px!important;
  }

  body.hv22-flow .hv15-index,
  body.hv22-flow .hv19-index,
  body.hv22-flow .hv21-index{
    padding-top:28px!important;
  }

  body.hv22-flow .hv15-copy p,
  body.hv22-flow .hv19-copy p,
  body.hv22-flow .hv21-copy p{
    font-size:17.5px!important;
    line-height:1.78!important;
  }
}