/*
 * Hải Vũ Piano Academy
 * Knowledge shell rhythm
 *
 * Visual objective:
 * Header -> thin academic subnav -> hero
 * with the same overall vertical discipline as homepage.
 */

body.hv-knowledge-shell-sync {
  --hv-k-shell-max: 1280px;
  --hv-k-shell-pad: 24px;
  overflow-x: clip;
}


/* ======================================================
   Secondary navigation
   ====================================================== */

body.hv-knowledge-shell-sync
.hv-knowledge-subnav-sync {
  box-sizing: border-box;

  width: min(
    var(--hv-k-shell-max),
    calc(100% - (var(--hv-k-shell-pad) * 2))
  );

  min-height: 40px;

  margin: 0 auto;
  padding: 0;

  display: flex;
  align-items: center;
  gap: clamp(22px, 2vw, 34px);

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;
}

body.hv-knowledge-shell-sync
.hv-knowledge-subnav-sync::-webkit-scrollbar {
  display: none;
}

body.hv-knowledge-shell-sync
.hv-knowledge-subnav-sync a {
  box-sizing: border-box;

  min-height: 40px;

  padding: 0 2px;

  display: inline-flex;
  align-items: center;

  flex: 0 0 auto;

  font-size: 14px;
  line-height: 1;
  font-weight: 600;

  white-space: nowrap;
}


/* ======================================================
   Hero
   ====================================================== */

body.hv-knowledge-shell-sync
.hv-knowledge-hero-sync {
  margin-top: 0 !important;
}

body.hv-knowledge-shell-sync
.hv-knowledge-hero-sync h1 {
  line-height: 1.04;
}

body.hv-knowledge-shell-sync
.hv-knowledge-hero-sync h1 + p {
  margin-top: clamp(18px, 1.5vw, 24px);
}

body.hv-knowledge-shell-sync
.hv-knowledge-hero-sync p {
  line-height: 1.55;
}


/* ======================================================
   Desktop 1440+
   ====================================================== */

@media (min-width: 1440px) {

  body.hv-knowledge-shell-sync {
    --hv-k-shell-pad: 32px;
  }

  body.hv-knowledge-shell-sync
  .hv-knowledge-subnav-sync {
    min-height: 42px;
  }

  body.hv-knowledge-shell-sync
  .hv-knowledge-subnav-sync a {
    min-height: 42px;
  }

}


/* ======================================================
   Laptop
   ====================================================== */

@media (max-width: 1024px) {

  body.hv-knowledge-shell-sync {
    --hv-k-shell-pad: 18px;
  }

  body.hv-knowledge-shell-sync
  .hv-knowledge-subnav-sync {
    gap: 22px;
  }

}


/* ======================================================
   Mobile
   ====================================================== */

@media (max-width: 640px) {

  body.hv-knowledge-shell-sync {
    --hv-k-shell-pad: 14px;
  }

  body.hv-knowledge-shell-sync
  .hv-knowledge-subnav-sync {
    width: 100%;

    min-height: 38px;

    padding-inline: var(--hv-k-shell-pad);

    gap: 20px;
  }

  body.hv-knowledge-shell-sync
  .hv-knowledge-subnav-sync a {
    min-height: 38px;
    font-size: 13px;
  }

  body.hv-knowledge-shell-sync
  .hv-knowledge-hero-sync h1 + p {
    margin-top: 16px;
  }

}


/* ======================================================
   Safety
   ====================================================== */

body.hv-knowledge-shell-sync main,
body.hv-knowledge-shell-sync section {
  max-width: 100%;
}