.public-header-v2-page {
  --public-header-v2-nav-height: var(--shared-header-height, 64px);
  scroll-padding-block-start: calc(var(--public-header-v2-nav-height) + 8px);
}

.public-masthead {
  --public-header-v2-masthead-copy-color: var(--public-v2-brand, #c51215);
  --public-header-v2-masthead-rule-color: #c9cdd1;
  display: flex;
  position: relative;
  isolation: isolate;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 31.5px clamp(24px, 5vw, 72px);
  background: var(--public-v2-surface, #ffffff);
}

.public-masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/static/brand/stbook-masthead-bg.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

.public-masthead__link {
  display: block;
  position: relative;
  z-index: 1;
  width: min(100%, 782px);
  border-radius: var(--public-v2-radius-sm, 8px);
}

.public-masthead__logo {
  display: block;
  width: 100%;
  height: auto;
}

.public-masthead__copy {
  display: grid;
  position: relative;
  z-index: 1;
  width: min(100%, 782px);
  gap: 4px;
  color: var(--public-header-v2-masthead-copy-color);
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.public-masthead__copy p {
  min-width: 0;
  margin: 0;
  font-size: calc(100cqw / 33.25);
  white-space: nowrap;
}

.public-masthead::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  inset-block-end: 0;
  height: 3px;
  box-sizing: border-box;
  border-block-start: 1px solid var(--public-header-v2-masthead-rule-color);
  border-block-end: 1px solid var(--public-header-v2-masthead-rule-color);
  pointer-events: none;
}

.public-header-v2__sentinel {
  display: block;
  width: 100%;
  height: 1px;
  margin-block-end: -1px;
  pointer-events: none;
}

body.public-ui-v2 .shared-header-shell[data-public-header-v2="true"] {
  --public-header-surface: #ffffff;
  --shared-header-height: 50px;
  --shared-header-height-mobile: 50px;
  --shared-header-logo-size: 36px;
  --shared-header-logo-size-mobile: 36px;
  --shared-header-control-size-mobile: 44px;
  position: sticky;
  inset-block-start: 0;
  top: 0;
  z-index: 200;
  overflow: visible;
}

body.public-ui-v2 .shared-header-shell[data-public-header-v2="true"] > .topbar.shared-header {
  --topbar-surface: var(--public-header-surface);
  position: relative;
  inset-block-start: auto;
  top: auto;
  min-height: 50px;
  padding-block: 4px;
}

body.public-ui-v2 .shared-header-shell[data-public-header-v2="true"] .topbar-logo {
  opacity: 1;
  transform: none;
  transform-origin: center;
  transition: opacity 180ms ease, transform 180ms ease;
}

body.public-ui-v2 .shared-header-shell[data-public-header-v2="true"][data-compact-logo-state="hidden"] .topbar-logo-link:not(:focus):not(:focus-within) {
  visibility: hidden;
  pointer-events: none;
}

body.public-ui-v2 .shared-header-shell[data-public-header-v2="true"][data-compact-logo-state="hidden"] .topbar-logo-link:not(:focus):not(:focus-within) .topbar-logo {
  opacity: 0;
  transform: translateY(-3px) scale(0.94);
}

body.public-ui-v2:not(.theme-quoc-tang):not(.theme-quoc-tang) .shared-header-shell[data-public-header-v2="true"] > .topbar.shared-header {
  background: var(--public-header-surface);
}

body.public-ui-v2:not(.theme-quoc-tang):not(.theme-quoc-tang) .shared-header-shell[data-public-header-v2="true"].is-stuck > .topbar.shared-header:not(.topbar-menu-open):not(.topbar-search-open) {
  box-shadow: 0 4px 12px rgb(32 32 32 / 6%);
}

body.public-ui-v2.theme-quoc-tang .shared-header-shell[data-public-header-v2="true"] {
  --public-header-surface: var(--shared-header-surface-solid);
}

body.public-ui-v2 .shared-header-shell[data-public-header-v2="true"] :is(
  .topbar-categories-dropdown,
  .topbar-search-dropdown,
  .topbar-auth-panel,
  .topbar-account-menu-panel
) {
  background: var(--public-header-surface);
}

body.public-ui-v2 .shared-header-shell[data-public-header-v2="true"] .topbar-mobile-domains,
body.public-ui-v2 .shared-header-shell[data-public-header-v2="true"] .topbar-mobile-domains-panel {
  background: var(--public-header-surface);
}

body.public-ui-v2.theme-quoc-tang .public-masthead {
  --public-header-v2-masthead-copy-color: var(--ui-text-strong);
  --public-header-v2-masthead-rule-color: var(--shared-header-border-color, #c9cdd1);
  background: var(--shared-header-surface, var(--public-v2-surface, #ffffff));
}

/* These approved SVGs are already monochrome, including the lighter dark ST shield. */
body.st-non-reader-shell.theme-quoc-tang .public-masthead .public-masthead__logo {
  filter: none !important;
  transition: none;
}

body.public-ui-v2.theme-quoc-tang .public-masthead::before {
  filter: grayscale(1);
}

.public-header-v2-page body.public-ui-v2 [id] {
  scroll-margin-block-start: calc(var(--public-header-v2-nav-height) + 8px);
}

@media (max-width: 1024px) {
  body.public-ui-v2 .shared-header-shell[data-public-header-v2="true"] .topbar-categories {
    line-height: 0;
  }
}

@media (max-width: 768px) {
  .public-masthead {
    padding: 18px 16px 16px;
    gap: 10px;
  }

  .public-header-v2-page body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead {
    padding-block: 18px 16px;
  }

  .public-masthead::before {
    display: none;
  }

  .public-masthead__link,
  .public-masthead__copy {
    width: min(100%, 440px);
  }

  .public-masthead__copy {
    gap: 3px;
    line-height: 1.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.public-ui-v2 .shared-header-shell[data-public-header-v2="true"] > .topbar.shared-header,
  body.public-ui-v2 .shared-header-shell[data-public-header-v2="true"] .topbar-categories-toggle,
  body.public-ui-v2 .shared-header-shell[data-public-header-v2="true"] .topbar-logo {
    transition: none;
  }
}

/* Kem sậm dùng chung cho các khối tra cứu của trang công khai: khối Thể loại/Khám phá của thanh bên trái (public_sidebar.css)
   và bảng thả xuống «Danh mục» của menu trên. Nền sậm hơn nền trang, theo biến theme (sáng và tối). */
body {
  --ps-block: color-mix(in srgb, var(--mz-paper-deep) 88%, var(--mz-ink));
  --ps-block-rule: color-mix(in srgb, var(--mz-ink) 20%, transparent);
}
html body .tmn-panel--danh-muc.dm-menu {
  background: var(--ps-block);
  border-top: 3px solid var(--mz-band);
}
html body .tmn-panel--danh-muc .dm-cols { column-rule: 1px solid var(--ps-block-rule); }
html body .tmn-panel--danh-muc .dm-it { border-top: 1px solid var(--ps-block-rule); }