/* ---------------------------------------------------------------------------
   Dải tiêu đề ở đầu mọi trang trừ trang chủ.

   Ảnh nền dùng chung, chọn ở quản trị. Phủ lên trên một lớp màu chủ đạo đậm ở
   mép trái nhạt dần sang phải: chữ nằm bên trái nên luôn đọc được, còn nửa phải
   vẫn thấy rõ ảnh. Nhờ vậy người biên tập tải lên tấm nào cũng được, không phải
   canh ảnh sáng hay tối.
   --------------------------------------------------------------------------- */

.nv-page-hero {
  position: relative;
  background-color: var(--nv-primary);
  background-size: cover;
  background-position: center;
  padding: 46px 0 52px;
  margin-bottom: 34px;
  overflow: hidden;
}

.nv-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(var(--nv-primary-rgb), .97) 0%,
    rgba(var(--nv-primary-rgb), .93) 26%,
    rgba(var(--nv-primary-rgb), .62) 58%,
    rgba(var(--nv-primary-rgb), .34) 100%
  );
}

.nv-page-hero .container {
  position: relative;
  z-index: 1;
}

/* --- đường dẫn phân cấp --- */

.nv-page-hero__crumbs {
  font-size: 14px;
  color: rgba(255, 255, 255, .88);
  margin-bottom: 14px;
}

.nv-page-hero__crumbs a {
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
}

.nv-page-hero__crumbs a:hover {
  color: #fff;
  text-decoration: underline;
}

.nv-page-hero__sep {
  margin: 0 2px;
  color: rgba(255, 255, 255, .6);
}

/* --- tiêu đề --- */

.nv-page-hero__title {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 50ch;
}

/* --- mô tả --- */

.nv-page-hero__desc {
  margin-top: 16px;
  max-width: 62ch;
}

.nv-page-hero__desc p {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, .95);
  font-size: 16px;
  line-height: 1.6;
}

.nv-page-hero__desc p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .nv-page-hero {
    padding: 30px 0 34px;
    margin-bottom: 24px;
  }

  /* Màn hình hẹp thì chữ chiếm gần hết bề ngang, lớp phủ phải đậm đều. */
  .nv-page-hero::before {
    background: linear-gradient(
      100deg,
      rgba(var(--nv-primary-rgb), .97) 0%,
      rgba(var(--nv-primary-rgb), .88) 70%,
      rgba(var(--nv-primary-rgb), .74) 100%
    );
  }

  .nv-page-hero__desc p {
    font-size: 15px;
  }
}