/* Layout: container, section, trang con */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.section { padding-block: var(--section-space); }
.section--tight { padding-block: calc(var(--section-space) * 0.7); }

/* Tiêu đề section: chữ viết tay + tiêu đề in hoa (theo mockup) */
.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(28px, 4vw, 40px); }
.section-head__script {
  display: block;
  font-family: var(--font-script); font-weight: 700;
  font-size: var(--text-section-script); line-height: 1;
  color: var(--color-secondary);
}
.section-head__title {
  font-size: var(--text-section-title);
  letter-spacing: 0.005em;
  margin-top: 2px;
  text-wrap: balance;
}
.section-head__desc { margin-top: 8px; color: var(--color-muted); }
.section-head__divider { display: block; width: 120px; height: 12px; margin: 10px auto 0; color: var(--color-primary); }
/* Nét cọ dưới tiêu đề – lặp lại motif của Hero cho mọi khối */
.section-head__brush { display: block; width: 112px; height: auto; margin: 8px auto 0; color: var(--color-primary); }
.section-head__brush + .section-head__desc { margin-top: 12px; }

/* Tiêu đề căn trái (đổi nhịp với các khối căn giữa) */
@media (min-width: 900px) {
  .section-head--split.section-head--start { text-align: left; grid-template-columns: minmax(0, 1fr) auto; }
  .section-head--split.section-head--start > .section-head__main { grid-column: 1; margin-inline: 0; }
  .section-head--split.section-head--start > .section-head__aside { grid-column: 2; }
  .section-head--start .section-head__brush { margin-left: 0; }
}

/* Tiêu đề trên nền tối */
.section-head--light .section-head__script { color: var(--color-primary); }
.section-head--light .section-head__title { color: #fff; }
.section-head--light .section-head__desc { color: var(--color-on-dark-muted); }

/* Section head có nút bên phải (menu carousel) */
.section-head--split {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
  max-width: none; gap: 16px;
}
.section-head--split > .section-head__main { grid-column: 2; max-width: 680px; }
.section-head--split > .section-head__aside { grid-column: 3; justify-self: end; }

/* ---------- Trang con (archive / single / page / search) ---------- */
.page-hero {
  position: relative; isolation: isolate;
  padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px);
  color: var(--color-on-dark);
  background: var(--color-dark-2);
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(30, 24, 24, 0.92) 0%, rgba(30, 24, 24, 0.75) 55%, rgba(30, 24, 24, 0.45) 100%);
}
.page-hero__script { font-family: var(--font-script); font-weight: 700; font-size: var(--text-section-script); color: var(--color-primary); line-height: 1; }
.page-hero__title { color: #fff; font-size: clamp(1.875rem, 1.3rem + 2vw, 3rem); margin-top: 6px; max-width: 820px; }
.page-hero__desc { margin-top: 12px; max-width: 640px; color: var(--color-on-dark-muted); }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--text-small); color: var(--color-on-dark-muted); margin-bottom: 14px; }
.breadcrumb a { color: var(--color-on-dark); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; opacity: 0.6; }

.content-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 48px);
  align-items: start;
}