/*
 * Giao diện kiểu tạp chí (sân thử, phương án 2 — "kiểu B, trang trọng").
 * Chỉ nạp ở 17 template công khai, ngay sau public_refresh.css. Không đụng quản trị/biên tập/trình đọc.
 * Owner cho phép riêng phương án này: đường kẻ mảnh, dải màu, một chút chiều sâu cho bìa sách.
 * Không gradient loè loẹt, không phát sáng, không bo tròn kiểu "app".
 * styles.css có bộ chọn tới (0,4,1) nên ở đây lặp class để thắng, không dùng !important.
 */

/* ------------------------------------------------------------------ */
/* 1. Bảng màu và thang chữ                                            */
/* ------------------------------------------------------------------ */
:root {
  --mz-red: #8f131a;
  --mz-red-dark: #6e0f15;
  --mz-red-fill: #8f131a;
  --mz-red-fill-hover: #6e0f15;
  /* Vòng tiêu điểm (token focus, DAC-TA-WEB §5.16): sáng --mz-red; tối --mzd-focus (mz_theme.css);
     quốc tang --quoc-tang-text-strong (#111111 sáng, #F2F2F2 tối). */
  --mz-focus: #8f131a;
  --mz-cover-placeholder: #e9dfcc;
  --mz-paper: #fbf7ef;
  --mz-paper-deep: #f6efe2;
  --mz-ink: #231a14;
  --mz-muted: #6b5d4f;
  --mz-gold: #b08d4a;
  --mz-rule: rgba(35, 26, 20, 0.2);
  --mz-rule-strong: rgba(35, 26, 20, 0.55);
  --mz-band: #6e0f15;
  --mz-band-text: #f6efe2;
  --mz-band-muted: rgba(246, 239, 226, 0.72);
  --mz-on-red: #ffffff;
  --mz-field: #ffffff;
  --mz-band-accent: #e2c88f;
  --mz-band-strong: #ffffff;
  --mz-serif: "Merriweather", Georgia, "Times New Roman", serif;
  --mz-condensed: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --mz-sans: "Open Sans", Arial, sans-serif;
  --mz-shell: min(1240px, calc(100% - 48px));
}

/* Quốc tang: bỏ màu thương hiệu, dùng màu của chủ đề. Giao diện tối: xem mz_theme.css. */
body.theme-quoc-tang {
  --mz-focus: var(--quoc-tang-text-strong, #111111);
  --mz-red: var(--ui-text-strong);
  --mz-red-dark: var(--ui-text-strong);
  --mz-red-fill: #303030;
  --mz-red-fill-hover: var(--mz-red-dark);
  --mz-paper: var(--ui-bg);
  --mz-paper-deep: var(--ui-surface);
  --mz-ink: var(--ui-text-strong);
  --mz-muted: var(--ui-text-muted);
  --mz-gold: var(--ui-border-strong);
  --mz-rule: var(--ui-border);
  --mz-rule-strong: var(--ui-border-strong);
  --mz-band: var(--ui-surface);
  --mz-band-text: var(--ui-text-strong);
  --mz-band-muted: var(--ui-text-muted);
  --mz-band-accent: #a8a8a8;
  --mz-cover-placeholder: #e2e2e2;
  --mz-on-red: var(--ui-bg);
  --mz-field: var(--ui-surface-solid);
}

html[data-mz-theme="dark"] body.theme-quoc-tang {
  --mz-red-fill: #d6d6d6;
  --mz-band-accent: #7a7a7a;
  --mz-cover-placeholder: #292929;
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang) {
  background: var(--mz-paper);
  color: var(--mz-ink);
}

/* Nhãn nhỏ viết hoa màu đỏ phía trên tiêu đề ("kicker"). */
.mz-kicker {
  margin: 0;
  color: var(--mz-red);
  font-family: var(--mz-condensed);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Nút và liên kết dùng chung */
.mz-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid var(--mz-red);
  border-radius: 0;
  font-family: var(--mz-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

html body .mz-button.mz-button--primary {
  border-color: var(--mz-red-fill, var(--mz-red));
  background: var(--mz-red-fill, var(--mz-red));
  color: var(--mz-on-red);
}

html body .mz-button.mz-button--primary:hover,
html body .mz-button.mz-button--primary:focus-visible {
  background: var(--mz-red-fill-hover, var(--mz-red-dark));
  border-color: var(--mz-red-fill-hover, var(--mz-red-dark));
  color: var(--mz-on-red);
}

.mz-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--mz-ink);
  font-family: var(--mz-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.mz-textlink:hover,
.mz-textlink:focus-visible {
  color: var(--mz-red);
}

/* ------------------------------------------------------------------ */
/* 2. Đầu trang: măng-sét (giữ huân chương) + thanh điều hướng         */
/* ------------------------------------------------------------------ */
body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead {
  background: var(--mz-paper);
  padding-block: 28px 30px;
}

/* Đường kẻ kép dưới măng-sét: dải đỏ giữa hai chỉ vàng, như tên báo. */
.public-masthead.public-masthead::after {
  height: 6px;
  border-block-start: 1px solid var(--mz-gold);
  border-block-end: 1px solid var(--mz-gold);
  background: var(--mz-red-fill, var(--mz-red));
}

body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead .public-masthead__copy {
  color: var(--mz-red);
}

/* Thanh điều hướng: nền giấy, chữ đứng viết hoa, kẻ đỏ dưới. */
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .shared-header-shell {
  --public-header-surface: var(--mz-paper);
  --topbar-surface: var(--mz-paper);
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .shared-header-shell > .topbar.shared-header.shared-header {
  background: var(--mz-paper);
  border-bottom: 2px solid var(--mz-red);
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .shared-header-shell.is-stuck > .topbar.shared-header.shared-header:not(.topbar-menu-open):not(.topbar-search-open) {
  box-shadow: 0 6px 14px -10px rgba(35, 26, 20, 0.45);
}

html body .shared-header .public-primary-nav .public-primary-nav__link.public-primary-nav__link {
  padding: 12px 0 10px;
  border-bottom: 2px solid transparent;
  color: var(--mz-ink);
  font-family: var(--mz-condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html body .shared-header .public-primary-nav .public-primary-nav__link.public-primary-nav__link:hover,
html body .shared-header .public-primary-nav .public-primary-nav__link.public-primary-nav__link:focus-visible,
html body .shared-header .public-primary-nav .public-primary-nav__link.public-primary-nav__link[aria-current="page"] {
  color: var(--mz-red);
  border-bottom-color: var(--mz-red);
}

html body .shared-header .public-primary-nav {
  gap: 28px;
}

html body .shared-header .topbar-categories .topbar-categories-toggle.topbar-categories-toggle {
  color: var(--mz-ink);
  font-family: var(--mz-condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html body .shared-header .topbar-categories .topbar-categories-toggle.topbar-categories-toggle:hover,
html body .shared-header .topbar-categories .topbar-categories-toggle.topbar-categories-toggle[aria-expanded="true"] {
  color: var(--mz-red);
}

/* Menu điện thoại: nền giấy, nhãn nhóm đỏ, mục chính chữ có chân, kẻ mảnh giữa các mục. */
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .shared-header-shell :is(.topbar-mobile-domains, .topbar-mobile-domains-panel).topbar-mobile-domains-panel,
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .shared-header-shell .topbar-mobile-domains.topbar-mobile-domains {
  background: var(--mz-paper);
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .shared-header-shell .topbar-mobile-shell-header.topbar-mobile-shell-header {
  background: transparent;
  border-bottom: 3px solid var(--mz-red);
}

html body .shared-header-shell .topbar-mobile-group .topbar-mobile-group-label.topbar-mobile-group-label {
  color: var(--mz-red);
  font-family: var(--mz-condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html body .shared-header-shell .topbar-mobile-primary-list .topbar-mobile-primary-item.topbar-mobile-primary-item {
  border-bottom: 1px solid var(--mz-rule);
}

html body .shared-header-shell .topbar-mobile-primary-item .topbar-mobile-primary-link.topbar-mobile-primary-link,
html body .shared-header-shell .topbar-mobile-primary-item .topbar-mobile-primary-toggle .topbar-mobile-primary-label {
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 18px;
  font-weight: 700;
}

html body .shared-header-shell .topbar-mobile-primary-item .topbar-mobile-primary-link.topbar-mobile-primary-link[aria-current="page"] {
  color: var(--mz-red);
}

html body .shared-header-shell .topbar-mobile-auth-block .topbar-mobile-secondary-link.topbar-mobile-secondary-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--mz-ink);
  font-family: var(--mz-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* 3. Tiêu đề mục kiểu báo: kẻ đỏ dày + kẻ mảnh, căn trái              */
/* ------------------------------------------------------------------ */
.mz-section-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin: 0 0 32px;
  padding-top: 18px;
  border-top: 3px solid var(--mz-red);
}

.mz-section-head::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 3px;
  height: 1px;
  background: var(--mz-rule-strong);
}

.mz-section-head__copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.mz-section-head__title {
  margin: 0;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: left;
  text-wrap: balance;
}

.mz-section-head__title a {
  color: inherit;
  text-decoration: none;
}

.mz-section-head__title a:hover,
.mz-section-head__title a:focus-visible {
  color: var(--mz-red);
}

.mz-section-head__more {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--mz-red);
  font-family: var(--mz-condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.mz-section-head__more:hover,
.mz-section-head__more:focus-visible {
  color: var(--mz-red-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Mục trên trang chủ: nhịp dọc rộng, mỗi mục là một "chuyên mục". */
html body[data-page-kind="home"] .home-content-stack.home-content-stack {
  row-gap: 0;
}

html body[data-page-kind="home"] .home-section.mz-home-section.mz-home-section {
  margin: 0;
  padding: 0 0 72px;
  border: 0;
}

html body[data-page-kind="home"] .home-section.mz-home-section > .mz-section-head {
  grid-column: 1 / -1;
}

html body[data-page-kind="home"] .home-section.mz-home-section.mz-home-section::before,
html body[data-page-kind="home"] .home-section.mz-home-section.mz-home-section::after {
  content: none;
}

/* ------------------------------------------------------------------ */
/* 4. Khối "Sách nổi bật" trên trang chủ                               */
/* ------------------------------------------------------------------ */
.mz-feature {
  display: grid;
  grid-template-columns: minmax(220px, 380px) minmax(0, 1fr);
  align-items: center;
  gap: 40px 72px;
  margin: 0 0 72px;
  padding: 56px 0;
  /* Nền dải giấy đậm tràn hết chiều ngang, không gây cuộn ngang. */
  border-image: linear-gradient(var(--mz-paper-deep), var(--mz-paper-deep)) fill 0 / 0 / 0 100vw;
  border-top: 1px solid var(--mz-gold);
  border-bottom: 1px solid var(--mz-gold);
  grid-column: 1 / -1;
}

.mz-feature__cover {
  display: block;
  justify-self: center;
  width: 100%;
  max-width: 360px;
}

.mz-feature__cover img {
  display: block;
  border-radius: 1px;
  width: 100%;
  height: auto;
  box-shadow: 0 22px 40px -22px rgba(35, 26, 20, 0.6), 0 2px 6px rgba(35, 26, 20, 0.12);
}

.mz-feature__copy {
  display: grid;
  gap: 18px;
  min-width: 0;
  max-width: 62ch;
}

.mz-feature__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mz-rule);
}

.mz-feature__category {
  color: var(--mz-muted);
  text-decoration: none;
  letter-spacing: 0.1em;
}

.mz-feature__category::before {
  content: "/";
  margin-right: 14px;
  color: var(--mz-gold);
}

a.mz-feature__category:hover,
a.mz-feature__category:focus-visible {
  color: var(--mz-red);
}

.mz-feature__title {
  margin: 0;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.mz-feature__title a {
  color: inherit;
  text-decoration: none;
}

.mz-feature__title a:hover,
.mz-feature__title a:focus-visible {
  color: var(--mz-red);
}

.mz-feature__byline {
  margin: 0;
  color: var(--mz-red);
  font-family: var(--mz-condensed);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mz-feature__excerpt {
  margin: 0;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 17px;
  line-height: 1.75;
}

.mz-feature__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  color: var(--mz-muted);
  font-family: var(--mz-condensed);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.mz-feature__facts span + span::before {
  content: "·";
  margin: 0 10px;
  color: var(--mz-gold);
}

.mz-feature__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 6px;
}

/* ------------------------------------------------------------------ */
/* 5. Thẻ sách: tên sách chữ có chân, tác giả chữ đứng, nút "Mở sách" */
/* ------------------------------------------------------------------ */
html body .book-grid > .book-card.book-card.book-card.book-card .book-card__title {
  margin: 0;
}

html body .book-grid > .book-card.book-card.book-card.book-card .book-card__title-link {
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: none;
}

html body .book-grid > .book-card.book-card.book-card.book-card .book-card__title-link:hover,
html body .book-grid > .book-card.book-card.book-card.book-card .book-card__title-link:focus-visible {
  color: var(--mz-red);
}

html body .book-grid > .book-card.book-card.book-card.book-card .book-card__author-line {
  color: var(--mz-red);
  font-family: var(--mz-condensed);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html body .book-grid > .book-card.book-card.book-card.book-card .book-card__publisher-line {
  color: var(--mz-muted);
  font-family: var(--mz-serif);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
}

html body .book-grid > .book-card.book-card.book-card.book-card .book-card__meta-lines {
  gap: 4px;
  margin-top: 8px;
}

html body .book-grid > .book-card.book-card.book-card.book-card .book-card__cta.book-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: auto;
  padding: 0 20px;
  border: 1px solid var(--mz-red);
  border-radius: 0;
  background: transparent;
  color: var(--mz-red);
  font-family: var(--mz-condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 160ms ease, color 160ms ease;
}

html body .book-grid > .book-card.book-card.book-card.book-card .book-card__cta.book-card__cta::after,
html body .book-grid > .book-card.book-card.book-card.book-card .book-card__cta.book-card__cta::before {
  content: none;
}

html body .book-grid > .book-card.book-card.book-card.book-card .book-card__cta.book-card__cta:hover,
html body .book-grid > .book-card.book-card.book-card.book-card .book-card__cta.book-card__cta:focus-visible {
  background: var(--mz-red-fill, var(--mz-red));
  color: var(--mz-on-red);
}

html body .book-grid > .book-card.book-card.book-card.book-card .book-card__body.book-card__body {
  gap: 10px;
}

/* ------------------------------------------------------------------ */
/* 6. Trang danh sách: /sach, /the-loai, /tu-sach, /library-search      */
/* ------------------------------------------------------------------ */
html body .book-list-page__head.book-list-page__head.book-list-page__head {
  position: relative;
  margin-bottom: 40px;
  padding-bottom: 0;
  border-bottom: 0;
}

html body .book-list-page .book-list-page__hero.book-list-page__hero {
  position: relative;
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 4px solid var(--mz-red);
  max-width: none;
  text-align: left;
}

html body .book-list-page .book-list-page__hero.book-list-page__hero::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 3px;
  height: 1px;
  background: var(--mz-rule-strong);
}

html body .book-list-page .book-list-page__eyebrow.book-list-page__eyebrow,
html body .book-list-page .book-list-page__hero .editorial-kicker.editorial-kicker {
  margin: 0;
  color: var(--mz-red);
  font-family: var(--mz-condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html body .book-list-page .book-list-page__hero .book-list-page__title.book-list-page__title.book-list-page__title {
  margin: 0;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-align: left;
  max-width: none;
}

/* Thanh chọn kiểu sắp xếp: chữ đứng, gạch chân đỏ cho mục đang chọn. */
html body .all-books-tabs.all-books-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  margin-top: 20px;
  padding: 0;
  border-bottom: 1px solid var(--mz-rule);
}

html body .all-books-tabs .all-books-tab.all-books-tab,
html body .search-mode-tabs .search-mode-tabs__item.search-mode-tabs__item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: -1px;
  padding: 0;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--mz-muted);
  font-family: var(--mz-condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
}

html body .all-books-tabs .all-books-tab.all-books-tab:hover,
html body .search-mode-tabs .search-mode-tabs__item.search-mode-tabs__item:hover {
  color: var(--mz-ink);
}

html body .all-books-tabs .all-books-tab.all-books-tab.is-active,
html body .search-mode-tabs .search-mode-tabs__item.search-mode-tabs__item.is-active {
  border-bottom-color: var(--mz-red);
  color: var(--mz-red);
  background: transparent;
}

html body .search-mode-tabs.search-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  margin-top: 12px;
  border: 0;
  border-bottom: 1px solid var(--mz-rule);
  border-radius: 0;
  background: transparent;
  padding: 0;
}

/* Đầu trang thể loại / tủ sách (thêm trong template, trước đây chỉ có breadcrumb). */
.mz-page-head {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 8px 0 44px;
  padding: 22px 0 22px;
  border-top: 4px solid var(--mz-red);
  border-bottom: 1px solid var(--mz-rule);
}

.mz-page-head::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 3px;
  height: 1px;
  background: var(--mz-rule-strong);
}

.mz-page-head__title {
  margin: 0;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.mz-page-head__meta {
  margin: 0;
  color: var(--mz-muted);
  font-family: var(--mz-serif);
  font-size: 15px;
  font-style: italic;
}

/* Breadcrumb: chữ đứng nhỏ, gọn. */
html body .site-breadcrumb.site-breadcrumb {
  font-family: var(--mz-condensed);
  font-size: 13px;
  letter-spacing: 0.04em;
}

html body .site-breadcrumb.site-breadcrumb a {
  color: var(--mz-muted);
}

html body .site-breadcrumb.site-breadcrumb .site-breadcrumb__current {
  color: var(--mz-ink);
}

/* Phân trang */
html body .public-pager .public-pager__control.public-pager__control {
  border-radius: 0;
  border-color: var(--mz-rule-strong);
  color: var(--mz-ink);
}

html body .public-pager .public-pager__status {
  font-family: var(--mz-condensed);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Thông báo / Góp ý */
html body .editorial-page .notification-item .notification-item__title.notification-item__title {
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.3;
}

html body .editorial-page .notification-item.notification-item {
  border-color: var(--mz-rule);
}

html body .editorial-page .feedback-form :is(textarea, input).feedback-field__control,
html body .editorial-page .feedback-form.feedback-form :is(textarea, input) {
  border: 1px solid var(--mz-rule-strong);
  border-radius: 0;
  background: var(--mz-field);
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .editorial-page .feedback-form .feedback-submit.feedback-submit {
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid var(--mz-red-fill, var(--mz-red));
  border-radius: 0;
  background: var(--mz-red-fill, var(--mz-red));
  color: var(--mz-on-red);
  font-family: var(--mz-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .editorial-page .feedback-form .feedback-submit.feedback-submit:hover {
  background: var(--mz-red-fill-hover, var(--mz-red-dark));
}

/* ------------------------------------------------------------------ */
/* 7. Chi tiết sách: bố cục bài báo                                    */
/* ------------------------------------------------------------------ */
html body[data-page-kind="detail"] .book-detail-layout.book-detail-layout {
  column-gap: clamp(32px, 5vw, 80px);
  padding-top: 8px;
}

html body[data-page-kind="detail"] .detail-cover-shell .detail-cover {
  box-shadow: 0 22px 40px -22px rgba(35, 26, 20, 0.6), 0 2px 6px rgba(35, 26, 20, 0.12);
}

/* Hộp ảnh bìa ôm sát ảnh (DAC-TA §4.3: không cắt, căn đáy giữa, khung ôm sát ảnh).
   Lỗi cũ: width cố định 460px + max-height theo màn hình. Khi max-height ép chiều cao,
   chiều rộng không co theo, object-fit: contain thu ảnh vào giữa, còn bóng chiều sâu vẽ theo
   hộp phần tử nên lộ "khung trắng" hai bên. Nay hộp mang đúng tỉ lệ bìa (--detail-cover-ratio,
   đặt trong detail.html) và chiều rộng đã tính sẵn giới hạn chiều cao, nên max-height không
   còn ép được hộp lệch khỏi ảnh. Chưa tải xong / thiếu ảnh: ô 2:3 nền placeholder. */
html body[data-page-kind="detail"] .detail-cover-shell {
  align-items: flex-end;
}

html body[data-page-kind="detail"] .detail-cover-shell .detail-cover {
  width: min(100%, 460px, calc(var(--detail-cover-max-height) * var(--detail-cover-ratio, 2 / 3)));
  height: auto;
  aspect-ratio: var(--detail-cover-ratio, 2 / 3);
  object-fit: contain;
  object-position: center bottom;
  background: var(--mz-cover-placeholder, #e9dfcc);
}

html body[data-page-kind="detail"] .detail-cover-shell .detail-cover[data-cover-ready="1"] {
  background: transparent;
}

.mz-detail-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 14px;
  padding-top: 16px;
  border-top: 4px solid var(--mz-red);
}

.mz-detail-kicker__year::before {
  content: "/";
  margin-right: 14px;
  color: var(--mz-gold);
}

.mz-detail-kicker a {
  color: inherit;
  text-decoration: none;
}

.mz-detail-kicker a:hover,
.mz-detail-kicker a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

html body[data-page-kind="detail"] .detail-meta-header .book-detail-title.detail-title.detail-title {
  margin: 0 0 24px;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.015em;
}

html body[data-page-kind="detail"] .detail-meta-header .detail-title .detail-title-link.detail-title-link {
  color: inherit;
  font: inherit;
  text-decoration: none;
}

/* Tác giả / Nhà xuất bản giữa hai đường kẻ mảnh */
html body[data-page-kind="detail"] .detail-meta-header .detail-primary-meta.detail-primary-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 28px;
  padding: 0;
  border-top: 1px solid var(--mz-rule-strong);
  border-bottom: 1px solid var(--mz-rule-strong);
}

html body[data-page-kind="detail"] .detail-primary-meta .detail-meta-item.detail-meta-item {
  padding: 14px 20px 14px 0;
  border: 0;
}

html body[data-page-kind="detail"] .detail-primary-meta .detail-meta-item.detail-meta-item + .detail-meta-item {
  padding-left: 20px;
  border-left: 1px solid var(--mz-rule);
}

html body[data-page-kind="detail"] .detail-content-shell dt,
html body[data-page-kind="detail"] .book-detail-content .detail-meta-item.detail-meta-item dt {
  margin: 0 0 4px;
  color: var(--mz-muted);
  font-family: var(--mz-condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html body[data-page-kind="detail"] .book-detail-content .detail-meta-item.detail-meta-item dd {
  margin: 0;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

/* Nút: "Mở sách" đỏ đậm, to; "Lưu sách" viền mảnh */
html body[data-page-kind="detail"] .detail-actions.detail-actions {
  gap: 12px 16px;
  margin: 0 0 8px;
}

html body[data-page-kind="detail"] .detail-actions .detail-action-btn.detail-action-btn {
  min-height: 48px;
  padding: 0 26px;
  border-radius: 0;
  font-family: var(--mz-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html body[data-page-kind="detail"] .detail-actions .detail-action-btn.detail-action-btn--read.detail-action-btn--read {
  min-width: 180px;
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang)[data-page-kind="detail"] .detail-actions .detail-action-btn.detail-action-btn--neutral {
  border: 1px solid var(--mz-ink);
  background: transparent;
  color: var(--mz-ink);
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang)[data-page-kind="detail"] .detail-actions .detail-action-btn.detail-action-btn--neutral:hover {
  background: var(--mz-ink);
  color: var(--mz-paper);
}

/* Tiêu đề mục phụ: chữ đứng đỏ, kẻ đậm phía trên */
html body[data-page-kind="detail"] .book-detail-content .detail-section-title.detail-section-title {
  margin: 36px 0 18px;
  padding-top: 12px;
  border-top: 2px solid var(--mz-ink);
  color: var(--mz-red);
  font-family: var(--mz-condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Giới thiệu sách như thân bài báo, có chữ hoa đầu đoạn */
html body[data-page-kind="detail"] .detail-description.detail-description .mz-detail-description-body,
html body[data-page-kind="detail"] .detail-description.detail-description .mz-detail-description-body :is(p, li) {
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 17px;
  line-height: 1.8;
}

html body[data-page-kind="detail"] .detail-description.detail-description .mz-detail-description-body:not(.is-empty)::first-letter {
  float: left;
  margin: 6px 10px 0 0;
  color: var(--mz-red);
  font-family: var(--mz-serif);
  font-size: 64px;
  font-weight: 900;
  line-height: 0.82;
}

html body[data-page-kind="detail"] .detail-tech-grid.detail-tech-grid {
  gap: 0 24px;
}

html body[data-page-kind="detail"] .detail-tech-grid .detail-meta-item.detail-meta-item {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--mz-rule);
}

/* Sách cùng thể loại: tiêu đề mục như trang chủ */
html body[data-page-kind="detail"] .detail-similar.detail-similar {
  margin-top: 80px;
  padding-top: 0;
  border-top: 0;
}

html body[data-page-kind="detail"] .detail-similar .detail-similar-heading.detail-similar-heading.detail-section-title {
  position: relative;
  margin: 0 0 32px;
  padding-top: 18px;
  border-top: 3px solid var(--mz-red);
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: left;
  text-transform: none;
}

html body[data-page-kind="detail"] .detail-similar .detail-similar-heading.detail-similar-heading::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 3px;
  height: 1px;
  background: var(--mz-rule-strong);
}

/* ------------------------------------------------------------------ */
/* 8. Tin tức                                                          */
/* ------------------------------------------------------------------ */
html body.news-v2-shell:not(.theme-quoc-tang):not(.theme-quoc-tang) {
  --news-v2-paper: var(--mz-paper);
  background: var(--mz-paper);
}

html body.news-v2-shell .news-v2-blog-masthead.news-v2-blog-masthead {
  position: relative;
  padding-top: 24px;
  border-top: 4px solid var(--mz-red);
}

html body.news-v2-shell .news-v2-blog-masthead.news-v2-blog-masthead::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 3px;
  height: 1px;
  background: var(--mz-rule-strong);
}

html body.news-v2-shell .news-v2-blog-kicker.news-v2-blog-kicker,
html body.news-v2-shell .news-v2-kicker.news-v2-kicker,
html body.news-v2-shell .news-v2-latest-label.news-v2-latest-label {
  color: var(--mz-red);
  font-family: var(--mz-condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html body.news-v2-shell .news-v2-blog-masthead.news-v2-blog-masthead h1,
html body.news-v2-shell .news-v2-article-header .news-v2-article-title.news-v2-article-title {
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

html body.news-v2-shell .news-v2-blog-masthead.news-v2-blog-masthead p:not(.news-v2-blog-kicker),
html body.news-v2-shell .news-v2-article-header .news-v2-article-dek.news-v2-article-dek {
  color: var(--mz-muted);
  font-family: var(--mz-serif);
  font-style: italic;
}

html body.news-v2-shell .news-v2-latest-header.news-v2-latest-header {
  border-top: 2px solid var(--mz-ink);
  border-bottom: 0;
  padding-top: 10px;
}

html body.news-v2-shell .news-v2-latest-header.news-v2-latest-header h2 {
  color: var(--mz-red);
  font-family: var(--mz-condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html body.news-v2-shell .news-v2-latest-item.news-v2-latest-item {
  border-color: var(--mz-rule);
}

html body.news-v2-shell .news-v2-latest-title.news-v2-latest-title,
html body.news-v2-shell .news-v2-related .news-v2-related__item :is(h2, h3) {
  font-family: var(--mz-serif);
  font-weight: 900;
  letter-spacing: -0.01em;
}

html body.news-v2-shell .news-v2-latest-title.news-v2-latest-title a {
  color: var(--mz-ink);
}

html body.news-v2-shell .news-v2-latest-title.news-v2-latest-title a:hover {
  color: var(--mz-red);
}

html body.news-v2-shell .news-v2-latest-meta.news-v2-latest-meta,
html body.news-v2-shell .news-v2-meta.news-v2-meta {
  color: var(--mz-muted);
  font-family: var(--mz-condensed);
  letter-spacing: 0.08em;
}

html body.news-v2-shell .news-v2-article-body.news-v2-article-body :is(p, li) {
  font-family: var(--mz-serif);
  font-size: 18px;
  line-height: 1.85;
}

html body.news-v2-shell .news-v2-article-body .news-v2-body-heading.news-v2-body-heading {
  font-family: var(--mz-serif);
  font-weight: 900;
}

html body.news-v2-shell .news-v2-quote.news-v2-quote {
  border-left: 3px solid var(--mz-red);
}

/* ------------------------------------------------------------------ */
/* 9. Giới thiệu                                                       */
/* ------------------------------------------------------------------ */
html body .about-page .about-hero.about-hero {
  position: relative;
  padding-top: 24px;
  border-top: 4px solid var(--mz-red);
}

html body .about-page .about-hero.about-hero::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 3px;
  height: 1px;
  background: var(--mz-rule-strong);
}

html body .about-page .about-kicker.about-kicker {
  color: var(--mz-red);
  font-family: var(--mz-condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html body .about-page .about-title.about-title {
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-transform: none;
}

html body .about-page .about-copy.about-copy {
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 17px;
  line-height: 1.85;
}

html body .about-page .about-hero__copy > .about-title + .about-copy::first-letter {
  float: left;
  margin: 6px 10px 0 0;
  color: var(--mz-red);
  font-family: var(--mz-serif);
  font-size: 64px;
  font-weight: 900;
  line-height: 0.82;
}

html body .about-page .about-stats.about-stats {
  gap: 0;
  border-top: 2px solid var(--mz-ink);
}

html body .about-page .about-stat.about-stat {
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--mz-rule);
  background: transparent;
}

html body .about-page .about-stat.about-stat strong {
  color: var(--mz-red);
  font-family: var(--mz-serif);
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
}

html body .about-page .about-stat.about-stat span {
  color: var(--mz-muted);
  font-family: var(--mz-condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* 10. Đăng nhập / Đăng ký / Quên mật khẩu                             */
/* ------------------------------------------------------------------ */
html body .container > .panel.auth-wrap.auth-wrap {
  position: relative;
  margin-block: 56px 72px;
  padding: 32px 36px 36px;
  border: 1px solid var(--mz-rule);
  border-top: 4px solid var(--mz-red);
  border-radius: 0;
  background: var(--mz-paper-deep);
  box-shadow: none;
}

html body .panel.auth-wrap.auth-wrap > h2 {
  margin: 0 0 22px;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

html body .panel.auth-wrap.auth-wrap .mz-kicker {
  margin-bottom: 8px;
}

html body .panel.auth-wrap.auth-wrap :is(input[type="email"], input[type="password"], input[type="text"]) {
  min-height: 48px;
  border: 1px solid var(--mz-rule-strong);
  border-radius: 0;
  background: var(--mz-field);
  font-family: var(--mz-sans);
  font-size: 15px;
}

html body .panel.auth-wrap.auth-wrap :is(input[type="email"], input[type="password"], input[type="text"]):focus {
  border-color: var(--mz-red);
  outline: 2px solid color-mix(in srgb, var(--mz-red) 25%, transparent);
  outline-offset: 0;
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .panel.auth-wrap.auth-wrap button[type="submit"] {
  min-height: 48px;
  border: 1px solid var(--mz-red-fill, var(--mz-red));
  border-radius: 0;
  background: var(--mz-red-fill, var(--mz-red));
  color: var(--mz-on-red);
  font-family: var(--mz-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .panel.auth-wrap.auth-wrap button[type="submit"]:hover {
  background: var(--mz-red-fill-hover, var(--mz-red-dark));
  border-color: var(--mz-red-fill-hover, var(--mz-red-dark));
}

html body .panel.auth-wrap.auth-wrap .auth-links .auth-sub-link.auth-sub-link {
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mz-ink);
  font-family: var(--mz-condensed);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-color: var(--mz-gold);
  text-underline-offset: 4px;
}

html body .panel.auth-wrap.auth-wrap .auth-links .auth-sub-link.auth-sub-link:hover {
  color: var(--mz-red);
}

/* ------------------------------------------------------------------ */
/* 11. Chân trang: dải đỏ sẫm, chữ màu giấy                             */
/* ------------------------------------------------------------------ */
html body .public-footer-v2.public-footer-v2 {
  --public-v2-footer-bg: var(--mz-band);
  --public-v2-text-primary: var(--mz-band-text);
  --public-v2-text-secondary: var(--mz-band-muted);
  --public-v2-border: rgba(246, 239, 226, 0.22);
  --public-v2-brand: var(--mz-band-accent);
  --public-v2-brand-hover: var(--mz-band-strong);
  --public-v2-focus-color: var(--mz-band-accent);
  margin-top: 0;
  border-top: 6px solid var(--mz-red);
  box-shadow: inset 0 1px 0 var(--mz-gold);
  background: var(--mz-band);
  color: var(--mz-band-text);
}

body.theme-quoc-tang .public-footer-v2.public-footer-v2 {
  --public-v2-border: var(--ui-border);
  --public-v2-brand: var(--ui-text-strong);
  --public-v2-brand-hover: var(--ui-text-strong);
  --public-v2-focus-color: var(--ui-text-strong);
}

html body .public-footer-v2.public-footer-v2 a {
  color: var(--mz-band-text);
}

html body .public-footer-v2.public-footer-v2 a:hover,
html body .public-footer-v2.public-footer-v2 a:focus-visible {
  color: var(--mz-band-strong);
  text-decoration: underline;
  text-decoration-color: var(--mz-gold);
  text-underline-offset: 3px;
}

/* Logo đỏ trên nền đỏ: chuyển thành một màu giấy, chữ "ST" vẫn khoét rỗng. */
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-footer-v2.public-footer-v2 .public-footer-v2__logo {
  filter: grayscale(1) invert(1) brightness(1.7);
  mix-blend-mode: screen;
}

/* L20 (§5.12, §8): quốc tang dùng logo chữ đã xám sẵn (sáng -chu-quoc-tang, tối -chu-quoc-tang-toi; _public_footer.html
   đổi ảnh), nên bỏ luật lọc xám ảnh quốc tang (styles.css) cho logo này. */
html body.st-non-reader-shell.theme-quoc-tang .public-footer-v2 img.public-footer-v2__logo.public-footer-v2__logo--mourning,
html body.theme-quoc-tang .public-footer-v2 img.public-footer-v2__logo.public-footer-v2__logo--mourning {
  filter: none !important;
  mix-blend-mode: normal;
}

html body .public-footer-v2.public-footer-v2 .public-footer-v2__brand-title {
  font-family: var(--mz-serif);
  font-weight: 900;
  letter-spacing: 0;
}

html body .public-footer-v2.public-footer-v2 :is(.public-footer-v2__section-title, .public-footer-v2__nav-heading) {
  color: var(--public-v2-brand);
  font-family: var(--mz-condensed);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* 12. Điện thoại và máy tính bảng                                     */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .mz-feature {
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    gap: 32px 40px;
    padding: 44px 0;
  }
}

@media (max-width: 768px) {
  .mz-kicker {
    font-size: 12px;
  }

  .mz-section-head {
    margin-bottom: 22px;
    padding-top: 14px;
  }

  .mz-section-head__title {
    font-size: 23px;
  }

  .mz-section-head__more {
    font-size: 13px;
    letter-spacing: 0.08em;
  }

  html body[data-page-kind="home"] .home-section.mz-home-section.mz-home-section {
    padding-bottom: 48px;
  }

  .mz-feature {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 48px;
    padding: 32px 0 36px;
  }

  .mz-feature__cover {
    max-width: 176px;
  }

  .mz-feature__copy {
    gap: 14px;
  }

  .mz-feature__title {
    font-size: 28px;
  }

  .mz-feature__byline {
    font-size: 15px;
  }

  .mz-feature__excerpt {
    font-size: 16px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
  }

  .mz-feature__actions .mz-button {
    flex: 1 1 100%;
  }

  html body .book-grid > .book-card.book-card.book-card.book-card .book-card__title-link {
    font-size: 14.5px;
  }

  html body .book-grid > .book-card.book-card.book-card.book-card .book-card__author-line {
    font-size: 12px;
    letter-spacing: 0.05em;
  }

  html body .book-grid > .book-card.book-card.book-card.book-card .book-card__cta.book-card__cta {
    min-height: 40px;
    padding: 0 14px;
    font-size: 12px;
  }

  html body .book-list-page .book-list-page__hero .book-list-page__title.book-list-page__title.book-list-page__title,
  .mz-page-head__title,
  html body .about-page .about-title.about-title {
    font-size: 32px;
  }

  html body .all-books-tabs.all-books-tabs,
  html body .search-mode-tabs.search-mode-tabs {
    gap: 0 16px;
  }

  html body .all-books-tabs .all-books-tab.all-books-tab,
  html body .search-mode-tabs .search-mode-tabs__item.search-mode-tabs__item {
    font-size: 12.5px;
    letter-spacing: 0.04em;
  }

  html body .public-footer-v2.public-footer-v2 .public-footer-v2__brand-title {
    font-size: 17px;
    line-height: 1.4;
  }

  html body[data-page-kind="detail"] .mz-detail-kicker {
    align-self: stretch;
    justify-content: flex-start;
    width: 100%;
  }

  html body[data-page-kind="detail"] .detail-meta-header .book-detail-title.detail-title.detail-title {
    font-size: 28px;
    margin-bottom: 18px;
  }

  html body[data-page-kind="detail"] .detail-actions .detail-action-btn.detail-action-btn {
    min-height: 48px;
  }

  html body[data-page-kind="detail"] .detail-description.detail-description .mz-detail-description-body,
  html body[data-page-kind="detail"] .detail-description.detail-description .mz-detail-description-body :is(p, li) {
    font-size: 16px;
    line-height: 1.75;
  }

  html body[data-page-kind="detail"] .detail-description.detail-description .mz-detail-description-body:not(.is-empty)::first-letter {
    font-size: 52px;
  }

  html body.news-v2-shell .news-v2-article-body.news-v2-article-body :is(p, li) {
    font-size: 17px;
  }

  html body .container > .panel.auth-wrap.auth-wrap {
    margin-block: 28px 48px;
    padding: 24px 20px 28px;
  }

  html body .panel.auth-wrap.auth-wrap > h2 {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mz-button,
  html body .book-grid > .book-card.book-card.book-card.book-card .book-card__cta.book-card__cta {
    transition: none;
  }
}

/* ================================================================== */
/* 13. Sửa sau rà soát (P1–P3). Chỉ nạp ở trang công khai.             */
/* ================================================================== */

/* 13.1 Vòng tiêu điểm bàn phím giống nhau ở mọi trang công khai (như trang chủ/chi tiết).
   Màu lấy token --mz-focus (sáng/tối/quốc tang), không lấy --mz-red: ở tối --mz-red là son sáng (L03).
   Dùng !important có chủ đích: nhiều luật cũ đặt outline:none với độ ưu tiên rất cao. */
html body :where(
  a[href],
  button:not([disabled]),
  input:not([disabled]),
  select:not([disabled]),
  textarea:not([disabled]),
  summary,
  [role="button"]:not([aria-disabled="true"]),
  [tabindex]:not([tabindex^="-"]):not([aria-disabled="true"])
):focus-visible {
  outline: 2px solid var(--mz-focus, #8f131a) !important;
  outline-offset: 3px !important;
}

html body .public-footer-v2 :where(a[href], button):focus-visible {
  outline-color: var(--mz-band-accent) !important;
}

/* 13.2 Đầu trang giống hệt nhau trên mọi trang công khai.
   Trang chủ/chi tiết dùng bản V2 (cao 50px, nút 44px, logo 36px); các trang còn lại lấy cùng số đo. */
html body .shared-header-shell:not([data-public-header-v2="true"]) {
  --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;
}

html body .shared-header-shell:not([data-public-header-v2="true"]) > .topbar.shared-header.shared-header {
  min-height: 50px;
  padding-block: 4px;
}

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

  /* Máy tính bảng: giữ biểu tượng tài khoản khi menu chính thu lại
     (styles.css ẩn .topbar-desktop-auth-block bằng !important ở ≤1024px). */
  html body .shared-header-shell .topbar.topbar-layout-12 .topbar-slot-actions .topbar-slot-user {
    display: flex !important;
    align-items: center;
  }
}

@media (max-width: 768px) {
  html body .shared-header-shell .topbar.topbar-layout-12 .topbar-slot-actions .topbar-slot-user {
    display: none !important;
  }
}

/* 13.3 Menu "Tủ sách" trên máy tính: chuyển sang mz_theme.css (một kiểu cho Tủ sách và Quản trị, mọi trang). */

/* 13.4 Menu điện thoại: chuyển sang mz_theme.css (một kiểu cho trang công khai, quản trị và tài khoản). */

/* 13.5 Nút nổi Trợ lý (D-152): ô 56 (≤ 599: 52), vị trí và kiểu ở book_qa_module.css; không thu nhỏ trên điện thoại. */

/* 13.6 Trang danh sách, máy tính bảng: lưới sách trải đúng bằng tiêu đề mục.
   (Khối sách trang chủ chia cột theo cỡ bìa — xem mục 14.) */
@media (min-width: 768px) and (max-width: 1199px) {
  html body .book-grid.book-grid[data-listing-card-tier] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    max-width: none;
    width: 100%;
    margin-inline: 0;
  }

  html body .book-list-shell.book-list-shell[data-listing-card-tier] {
    max-width: none;
    width: 100%;
    margin-inline: 0;
  }
}

/* 13.7 Khối "Sách nổi bật": tên sách co giãn theo màn hình, tối đa 4 dòng (đủ tên ở title),
   cột chữ dùng hết bề ngang bên phải. */
.mz-feature__copy {
  max-width: none;
}

.mz-feature__title {
  font-size: clamp(26px, 1.2vw + 20px, 40px);
  line-height: 1.16;
}

.mz-feature__title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.mz-feature__excerpt {
  max-width: 68ch;
}

@media (max-width: 768px) {
  .mz-feature__title {
    font-size: clamp(22px, 5.4vw, 26px);
  }

  .mz-feature__title a {
    -webkit-line-clamp: 5;
  }
}

/* 13.8 Chi tiết sách */
/* "Giới thiệu" rộng bằng các đường kẻ phía trên/dưới. */
html body[data-page-kind="detail"] .book-detail-content .detail-description.detail-description {
  max-width: none;
}

html body[data-page-kind="detail"] .detail-description .mz-detail-description-body.is-empty,
html body[data-page-kind="detail"] .detail-description .mz-detail-description-body.is-empty p {
  color: var(--mz-muted);
  font-style: italic;
}

/* ISBN không gãy giữa dãy số. */
html body[data-page-kind="detail"] .detail-tech-grid > .detail-meta-item:first-child dd {
  white-space: nowrap;
}

@media (max-width: 1024px) {
  html body[data-page-kind="detail"] .detail-tech-grid.detail-tech-grid > .detail-meta-item:first-child {
    grid-column: 1 / -1;
  }

  /* Nhãn nằm trên giá trị để "16.1 x 24.4 cm" không bị gãy trong cột hẹp. */
  html body[data-page-kind="detail"] .detail-tech-grid.detail-tech-grid > .detail-meta-item.detail-meta-item {
    display: block;
  }
}

/* Nút "thích": vùng chạm 40px. */
html body[data-page-kind="detail"] .detail-like-cluster .detail-like-toggle.detail-like-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}

html body[data-page-kind="detail"] .detail-like-cluster .detail-like-count {
  font-family: var(--mz-condensed);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--mz-muted);
}

@media (max-width: 768px) {
  /* Bìa nhỏ lại để tên sách và nút nằm trong màn đầu. */
  html body[data-page-kind="detail"] .book-detail-cover .detail-cover-shell {
    width: min(54%, 200px);
    margin-inline: auto;
  }

  /* Căn trái như thân bài; tên dài co chữ, không đứng giữa. */
  html body[data-page-kind="detail"] .book-detail-content,
  html body[data-page-kind="detail"] .detail-meta-header.detail-meta-header {
    align-items: stretch;
    text-align: left;
  }

  html body[data-page-kind="detail"] .detail-meta-header .book-detail-title.detail-title.detail-title {
    font-size: clamp(22px, 6.4vw, 28px);
    line-height: 1.2;
    text-align: left;
    text-wrap: pretty;
  }

  html body[data-page-kind="detail"] .detail-actions.detail-actions,
  html body[data-page-kind="detail"] .detail-like-cluster {
    justify-content: flex-start;
  }

  /* Tác giả / Nhà xuất bản: mỗi mục một hàng, nhãn trái – giá trị phải. */
  html body[data-page-kind="detail"] .detail-meta-header .detail-primary-meta.detail-primary-meta {
    grid-template-columns: 1fr;
  }

  html body[data-page-kind="detail"] .detail-primary-meta .detail-meta-item.detail-meta-item,
  html body[data-page-kind="detail"] .detail-primary-meta .detail-meta-item.detail-meta-item + .detail-meta-item {
    display: grid;
    grid-template-columns: 7.5em minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-left: 0;
    text-align: left;
  }

  html body[data-page-kind="detail"] .detail-primary-meta .detail-meta-item.detail-meta-item + .detail-meta-item {
    border-top: 1px solid var(--mz-rule);
  }

  html body[data-page-kind="detail"] .book-detail-content .detail-primary-meta .detail-meta-item.detail-meta-item :is(dt, dd) {
    margin: 0;
    justify-self: start;
    text-align: left;
  }

  html body[data-page-kind="detail"] .detail-meta-header .detail-like-cluster.detail-like-cluster {
    justify-self: start;
    align-self: flex-start;
    margin-inline: 0;
  }

  html body[data-page-kind="detail"] .book-detail-layout .book-detail-content.book-detail-content {
    row-gap: 0;
  }

  html body[data-page-kind="detail"] .detail-meta-header .detail-primary-meta.detail-primary-meta {
    margin-bottom: 8px;
  }

  html body[data-page-kind="detail"] .book-detail-content .detail-section-title.detail-section-title {
    margin-top: 28px;
  }

  html body[data-page-kind="detail"] .book-detail-content .detail-meta-section {
    margin-top: 0;
    padding-top: 0;
  }
}

/* 13.9 Vùng chạm trên điện thoại: tên sách trong thẻ, breadcrumb (padding, không đổi cỡ chữ). */
@media (max-width: 768px) {
  html body .book-grid > .book-card.book-card.book-card.book-card .book-card__title-link {
    padding-block: 11px;
  }

  html body .mz-section-head__title a,
  html body a.mz-feature__category,
  html body .mz-detail-kicker a {
    padding-block: 13px;
  }

  html body .site-breadcrumb.site-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

/* 13.10 Tra cứu toàn văn: một hàng chế độ (Tìm sách | Tra cứu toàn văn | Hỏi nội dung),
   thanh lọc kiểu tạp chí. */
html body .library-search-modes.search-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0 28px;
  margin: 0;
}

html body .library-search-modes .library-search-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
}

html body .library-search-modes .library-search-mode-tabs .library-search-mode-tabs__item.library-search-mode-tabs__item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: -1px;
  padding: 0;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--mz-muted);
  font-family: var(--mz-condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: none;
  cursor: pointer;
}

html body .library-search-modes .library-search-mode-tabs .library-search-mode-tabs__item.library-search-mode-tabs__item:hover {
  color: var(--mz-ink);
}

html body .library-search-modes .library-search-mode-tabs .library-search-mode-tabs__item.library-search-mode-tabs__item.is-active {
  border-bottom-color: var(--mz-red);
  color: var(--mz-red);
}

@media (max-width: 768px) {
  /* Điện thoại: giữ 3 lối trên một dòng, vuốt ngang trong hàng nếu chật (trang không cuộn ngang). */
  html body .library-search-modes.search-mode-tabs,
  html body .library-search-modes .library-search-mode-tabs {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0 14px;
  }

  html body .library-search-modes.search-mode-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  html body .library-search-modes :is(.search-mode-tabs__item, .library-search-mode-tabs__item).search-mode-tabs__item,
  html body .library-search-modes .library-search-mode-tabs .library-search-mode-tabs__item.library-search-mode-tabs__item {
    flex: none;
    width: auto;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
}

html body .library-search-shell .library-search-input.library-search-input {
  min-height: 52px;
  height: 52px;
  border: 1px solid var(--mz-rule-strong);
  background: var(--mz-field);
  font-family: var(--mz-serif);
  font-size: 17px;
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .library-search-shell .library-search-submit.library-search-submit {
  min-height: 52px;
  height: 52px;
  border: 1px solid var(--mz-red-fill, var(--mz-red));
  background: var(--mz-red-fill, var(--mz-red));
  color: var(--mz-on-red);
  font-family: var(--mz-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html body .library-search-shell .library-search-layout.library-search-layout {
  border-top: 2px solid var(--mz-ink);
}

html body .library-search-shell .library-search-filter-details summary {
  min-height: 44px;
  color: var(--mz-red);
  font-family: var(--mz-condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html body .library-search-shell .library-search-field.library-search-field > span {
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 14px;
  font-weight: 700;
}

html body .library-search-shell .library-search-field :is(input, select),
html body .library-search-shell .library-search-sort select {
  min-height: 44px;
  border: 1px solid var(--mz-rule-strong);
  background: var(--mz-field);
  font-size: 15px;
}

html body .library-search-shell .library-search-sort select {
  width: auto;
  min-width: 150px;
}

html body .library-search-shell .library-search-field--select::after {
  bottom: 18px;
}

html body .library-search-shell .library-search-summary {
  font-family: var(--mz-serif);
  font-size: 15px;
}

/* 13.11 Trạng thái rỗng kiểu tạp chí (thể loại chưa có sách, danh sách trống). */
.mz-empty-state {
  display: grid;
  justify-items: start;
  gap: 14px;
  max-width: 640px;
  margin: 8px 0 72px;
  padding: 28px 0 0;
  border-top: 2px solid var(--mz-ink);
}

.mz-empty-state__title {
  margin: 0;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 900;
  line-height: 1.2;
}

.mz-empty-state__copy {
  margin: 0 0 8px;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 17px;
  line-height: 1.75;
}

html body .book-list-empty.book-list-empty {
  color: var(--mz-muted);
  font-family: var(--mz-serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.7;
}

/* 13.12 Những chỗ còn chữ Open Sans → bộ chữ tạp chí. */
html body .notification-page__summary,
html body .notification-item__state,
html body .notification-item time,
html body .editorial-page .feedback-field .feedback-field__label,
html body .book-grid > .book-card .book-card__badge.book-card__badge {
  font-family: var(--mz-condensed);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html body .notification-item time {
  color: var(--mz-muted);
  font-weight: 400;
}

/* Chấm trạng thái trước nhãn Roboto Condensed: tâm chữ hoa cao hơn tâm dòng ≈ 0,04–0,05em, dời chấm lên 0,5 px (DAC-TA §12.3, đợt 2). */
html body .notification-item__state::before { translate: 0 round(-0.04em, 0.5px); }

html body .panel.auth-wrap.auth-wrap .auth-sub-link.auth-sub-link,
html body.news-v2-shell .news-v2-text-link.news-v2-text-link {
  font-family: var(--mz-condensed);
  letter-spacing: 0.08em;
}

html body.news-v2-shell .news-v2-article-hero__caption.news-v2-article-hero__caption,
html body.news-v2-shell .news-v2-article-hero__caption.news-v2-article-hero__caption * {
  font-family: var(--mz-serif);
  font-style: italic;
}

html body.news-v2-shell .news-v2-book-meta.news-v2-book-meta,
html body.news-v2-shell .news-v2-book-meta.news-v2-book-meta strong {
  font-family: var(--mz-condensed);
  letter-spacing: 0.04em;
}

/* 13.13 Góp ý: hai cột kiểu tạp chí (lời dẫn bên trái, khung biểu mẫu bên phải). */
.mz-feedback-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px clamp(32px, 6vw, 96px);
  align-items: start;
  margin: 0 0 72px;
}

.mz-feedback-aside {
  display: grid;
  gap: 18px;
  padding-top: 16px;
  border-top: 2px solid var(--mz-ink);
}

.mz-feedback-aside__lede {
  margin: 0;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.7;
}

.mz-feedback-aside__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mz-feedback-aside__list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--mz-rule);
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 15px;
  line-height: 1.6;
}

.mz-feedback-aside__list li::before {
  content: "—";
  margin-right: 10px;
  color: var(--mz-red);
}

html body .editorial-page .mz-feedback-layout .feedback-form.feedback-form {
  display: grid;
  gap: 22px;
  max-width: none;
  margin: 0;
  padding: 28px 32px 32px;
  border: 1px solid var(--mz-rule);
  border-top: 4px solid var(--mz-red);
  background: var(--mz-paper-deep);
}

html body .editorial-page .feedback-form .feedback-field__hint {
  color: var(--mz-muted);
  font-family: var(--mz-serif);
  font-size: 14px;
  font-style: italic;
}

html body .editorial-page .feedback-form.feedback-form :is(textarea, input) {
  width: 100%;
  min-height: 48px;
  font-family: var(--mz-serif);
  font-size: 16px;
}

@media (max-width: 860px) {
  .mz-feedback-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  html body .editorial-page .mz-feedback-layout .feedback-form.feedback-form {
    padding: 22px 18px 24px;
  }
}

/* 13.14 Trang quét QR: bố cục trang báo (kẻ đỏ đậm, tiêu đề chữ có chân, căn trái). */
html body[data-page-kind="qr-status"] .qr-status-page.qr-status-page {
  min-height: 52vh;
  align-items: start;
  padding: clamp(40px, 7vw, 88px) 24px clamp(56px, 8vw, 96px);
}

html body[data-page-kind="qr-status"] .qr-status-page__inner.qr-status-page__inner {
  position: relative;
  width: min(100%, 760px);
  padding-top: 24px;
  border-top: 4px solid var(--mz-red);
  text-align: left;
}

html body[data-page-kind="qr-status"] .qr-status-page__inner.qr-status-page__inner::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 3px;
  height: 1px;
  background: var(--mz-rule-strong);
}

html body[data-page-kind="qr-status"] .qr-status-page__eyebrow.qr-status-page__eyebrow {
  color: var(--mz-red);
  font-family: var(--mz-condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

html body[data-page-kind="qr-status"] .qr-status-page__title.qr-status-page__title {
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: clamp(32px, 4.2vw, 50px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

html body[data-page-kind="qr-status"] .qr-status-page__message.qr-status-page__message {
  max-width: none;
  margin: 20px 0 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--mz-rule);
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 18px;
  line-height: 1.75;
}

html body[data-page-kind="qr-status"] .qr-status-page__actions.qr-status-page__actions {
  justify-content: flex-start;
  margin-top: 28px;
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang)[data-page-kind="qr-status"] .qr-status-page__link.qr-status-page__link {
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid var(--mz-red-fill, var(--mz-red));
  background: var(--mz-red-fill, var(--mz-red));
  color: var(--mz-on-red);
  font-family: var(--mz-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang)[data-page-kind="qr-status"] .qr-status-page__link.qr-status-page__link:hover {
  background: var(--mz-red-fill-hover, var(--mz-red-dark));
}

/* ------------------------------------------------------------------ */
/* 14. Trang chủ: khối sách theo cỡ bìa (Lớn / Vừa / Nhỏ / Tiêu điểm)  */
/* ------------------------------------------------------------------ */
/* Khối nhận data-cover-size + data-preview-rows (+ --mz-rows) từ home.html. Số cột (--mz-cols)
   đổi theo điểm ngắt; cột luôn chia đều nên khối ít sách hơn số cột vẫn giữ đúng bề rộng thẻ. */
html body[data-page-kind="home"] .mz-home-section[data-cover-size] {
  --mz-cols: 4;
  --mz-gap-x: 48px;
  --mz-gap-y: 48px;
  --mz-scroll-gutter: 16px;
}

html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"] {
  --mz-cols: 6;
  --mz-gap-x: 32px;
  --mz-gap-y: 40px;
}

html body[data-page-kind="home"] .mz-home-section[data-cover-size="small"],
html body[data-page-kind="home"] .mz-home-section[data-cover-size="spotlight"] {
  --mz-cols: 8;
  --mz-gap-x: 22px;
  --mz-gap-y: 32px;
}

@media (max-width: 1279px) {
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"] {
    --mz-cols: 5;
    --mz-gap-x: 28px;
  }

  html body[data-page-kind="home"] .mz-home-section[data-cover-size="small"] {
    --mz-cols: 6;
  }
}

@media (max-width: 1023px) {
  html body[data-page-kind="home"] .mz-home-section[data-cover-size] {
    --mz-gap-x: 28px;
    --mz-gap-y: 36px;
  }

  html body[data-page-kind="home"] .mz-home-section[data-cover-size="large"] {
    --mz-cols: 3;
  }

  html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"] {
    --mz-cols: 4;
    --mz-gap-x: 22px;
  }

  html body[data-page-kind="home"] .mz-home-section[data-cover-size="small"] {
    --mz-cols: 5;
    --mz-gap-x: 18px;
  }
}

@media (max-width: 599px) {
  html body[data-page-kind="home"] .mz-home-section[data-cover-size] {
    --mz-gap-x: 16px;
    --mz-gap-y: 28px;
  }

  html body[data-page-kind="home"] .mz-home-section[data-cover-size="large"] {
    --mz-cols: 2;
  }

  html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"] {
    --mz-cols: 3;
    --mz-gap-x: 12px;
  }
}

html body[data-page-kind="home"] .mz-home-section[data-cover-size] .book-list-shell.home-section__grid-wrap.mz-home-shell {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

html body[data-page-kind="home"] .mz-home-section[data-cover-size] .book-grid.home-grid.home-grid.mz-home-grid {
  display: grid;
  grid-template-columns: repeat(var(--mz-cols), minmax(0, 1fr));
  gap: var(--mz-gap-y) var(--mz-gap-x);
  align-items: start;
  justify-content: stretch;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

html body[data-page-kind="home"] .mz-home-section[data-cover-size] .mz-home-grid > .book-card.book-card.book-card {
  width: auto;
  min-width: 0;
  max-width: none;
}

/* Mỗi điểm ngắt chỉ hiện đúng cột × hàng: không để hàng cuối lẻ loi vì số cột ít hơn máy tính. */
@media (min-width: 1280px) {
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="large"][data-preview-rows="1"] .mz-home-grid > .book-card:nth-child(n+5),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="large"][data-preview-rows="2"] .mz-home-grid > .book-card:nth-child(n+9),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="large"][data-preview-rows="3"] .mz-home-grid > .book-card:nth-child(n+13),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"][data-preview-rows="1"] .mz-home-grid > .book-card:nth-child(n+7),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"][data-preview-rows="2"] .mz-home-grid > .book-card:nth-child(n+13),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"][data-preview-rows="3"] .mz-home-grid > .book-card:nth-child(n+19),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="small"][data-preview-rows="1"] .mz-home-grid > .book-card:nth-child(n+9),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="small"][data-preview-rows="2"] .mz-home-grid > .book-card:nth-child(n+17),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="small"][data-preview-rows="3"] .mz-home-grid > .book-card:nth-child(n+25) {
    display: none;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="large"][data-preview-rows="1"] .mz-home-grid > .book-card:nth-child(n+5),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="large"][data-preview-rows="2"] .mz-home-grid > .book-card:nth-child(n+9),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="large"][data-preview-rows="3"] .mz-home-grid > .book-card:nth-child(n+13),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"][data-preview-rows="1"] .mz-home-grid > .book-card:nth-child(n+6),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"][data-preview-rows="2"] .mz-home-grid > .book-card:nth-child(n+11),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"][data-preview-rows="3"] .mz-home-grid > .book-card:nth-child(n+16),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="small"][data-preview-rows="1"] .mz-home-grid > .book-card:nth-child(n+7),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="small"][data-preview-rows="2"] .mz-home-grid > .book-card:nth-child(n+13),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="small"][data-preview-rows="3"] .mz-home-grid > .book-card:nth-child(n+19) {
    display: none;
  }
}

@media (min-width: 600px) and (max-width: 1023px) {
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="large"][data-preview-rows="1"] .mz-home-grid > .book-card:nth-child(n+4),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="large"][data-preview-rows="2"] .mz-home-grid > .book-card:nth-child(n+7),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="large"][data-preview-rows="3"] .mz-home-grid > .book-card:nth-child(n+10),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"][data-preview-rows="1"] .mz-home-grid > .book-card:nth-child(n+5),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"][data-preview-rows="2"] .mz-home-grid > .book-card:nth-child(n+9),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"][data-preview-rows="3"] .mz-home-grid > .book-card:nth-child(n+13),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="small"][data-preview-rows="1"] .mz-home-grid > .book-card:nth-child(n+6),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="small"][data-preview-rows="2"] .mz-home-grid > .book-card:nth-child(n+11),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="small"][data-preview-rows="3"] .mz-home-grid > .book-card:nth-child(n+16) {
    display: none;
  }
}

@media (max-width: 599px) {
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="large"][data-preview-rows="1"] .mz-home-grid > .book-card:nth-child(n+3),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="large"][data-preview-rows="2"] .mz-home-grid > .book-card:nth-child(n+5),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="large"][data-preview-rows="3"] .mz-home-grid > .book-card:nth-child(n+7),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"][data-preview-rows="1"] .mz-home-grid > .book-card:nth-child(n+4),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"][data-preview-rows="2"] .mz-home-grid > .book-card:nth-child(n+7),
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"][data-preview-rows="3"] .mz-home-grid > .book-card:nth-child(n+10) {
    display: none;
  }
}

/* Thẻ Lớn: tên chữ có chân lớn, tối đa 3 dòng; tác giả, NXB, nút "Mở sách" giữ như thẻ chuẩn. */
html body[data-page-kind="home"] .mz-home-section[data-cover-size="large"] .mz-home-grid > .book-card.book-card.book-card.book-card .book-card__title {
  --book-card-title-lines: 3;
  min-height: 0;
}

html body[data-page-kind="home"] .mz-home-section[data-cover-size="large"] .mz-home-grid > .book-card.book-card.book-card.book-card .book-card__title-link {
  font-size: clamp(17px, 0.5vw + 12px, 20px);
  line-height: 1.35;
}

/* Thẻ Vừa: tên 2 dòng + tác giả, không nút. */
html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"] .mz-home-grid > .book-card.book-card.book-card.book-card {
  row-gap: 12px;
  --home-card-body-min-height: 0px;
  --listing-card-body-min-height-current: 0px;
}

html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"] .mz-home-grid > .book-card.book-card.book-card.book-card .book-card__title {
  --book-card-title-lines: 2;
  min-height: 0;
}

html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"] .mz-home-grid > .book-card.book-card.book-card.book-card .book-card__title-link {
  font-size: 15px;
  line-height: 1.38;
}

html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"] .mz-home-grid > .book-card.book-card.book-card.book-card .book-card__author-line {
  font-size: 12px;
  letter-spacing: 0.06em;
}

html body[data-page-kind="home"] .mz-home-section[data-cover-size="medium"] .mz-home-grid > .book-card.book-card.book-card.book-card .book-card__meta-lines {
  margin-top: 6px;
}

/* Thẻ Nhỏ (cả phần phụ của Tiêu điểm): chỉ tên 2 dòng chữ nhỏ, bấm bìa để mở. */
html body[data-page-kind="home"] .mz-home-section[data-cover-size] .mz-home-grid--small > .book-card.book-card.book-card.book-card {
  row-gap: 10px;
  --home-card-body-min-height: 0px;
  --listing-card-body-min-height-current: 0px;
}

html body[data-page-kind="home"] .mz-home-section[data-cover-size] .mz-home-grid--small > .book-card.book-card.book-card.book-card .book-card__title {
  --book-card-title-lines: 2;
  min-height: 0;
}

html body[data-page-kind="home"] .mz-home-section[data-cover-size] .mz-home-grid--small > .book-card.book-card.book-card.book-card .book-card__title-link {
  font-size: 13.5px;
  line-height: 1.38;
}

html body[data-page-kind="home"] .mz-home-section[data-cover-size] .mz-home-grid--small > .book-card.book-card.book-card.book-card .book-card__meta-lines {
  display: none;
}

/* Điện thoại: khối Nhỏ và phần phụ của Tiêu điểm thành dải vuốt ngang, hiện hết sách đã lấy. */
@media (max-width: 599px) {
  html body[data-page-kind="home"] .mz-home-section[data-cover-size] .book-grid.home-grid.home-grid.mz-home-grid--small {
    display: flex;
    gap: 14px;
    width: auto;
    margin-inline: calc(-1 * var(--mz-scroll-gutter));
    padding: 6px var(--mz-scroll-gutter) 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--mz-scroll-gutter);
    scrollbar-width: thin;
    scrollbar-color: var(--mz-rule-strong) transparent;
  }

  html body[data-page-kind="home"] .mz-home-section[data-cover-size] .mz-home-grid--small > .book-card.book-card.book-card.book-card {
    display: grid;
    flex: 0 0 clamp(116px, 36vw, 150px);
    scroll-snap-align: start;
  }
}

/* Tiêu điểm: bài chính (bìa rất to + tên, tác giả, NXB, mô tả, nút) và các bài phụ bên cạnh. */
html body[data-page-kind="home"] .mz-home-section[data-cover-size="spotlight"] .mz-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  align-items: start;
  gap: 40px 0;
}

html body[data-page-kind="home"] .mz-home-section[data-cover-size="spotlight"] .mz-spotlight--solo {
  grid-template-columns: minmax(0, 1fr);
}

.mz-spotlight__lead {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px 36px;
  min-width: 0;
  padding-right: 44px;
}

.mz-spotlight--solo .mz-spotlight__lead {
  grid-template-columns: minmax(0, 360px) minmax(0, 62ch);
  padding-right: 0;
}

.mz-spotlight__cover {
  display: block;
  min-width: 0;
}

.mz-spotlight__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1px;
  box-shadow: 0 22px 40px -22px rgba(35, 26, 20, 0.6), 0 2px 6px rgba(35, 26, 20, 0.12);
  transition: transform 200ms ease;
}

.mz-spotlight__cover:hover img,
.mz-spotlight__cover:focus-visible img {
  transform: translateY(-3px);
}

.mz-spotlight__copy {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding-top: 4px;
}

.mz-spotlight__title {
  margin: 0;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: clamp(24px, 1vw + 14px, 32px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.mz-spotlight__title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.mz-spotlight__title a:hover,
.mz-spotlight__title a:focus-visible {
  color: var(--mz-red);
}

.mz-spotlight__byline {
  margin: 0;
  color: var(--mz-red);
  font-family: var(--mz-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mz-spotlight__publisher {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mz-rule);
  color: var(--mz-muted);
  font-family: var(--mz-serif);
  font-size: 14px;
  font-style: italic;
}

.mz-spotlight__publisher span + span::before {
  content: "·";
  margin: 0 8px;
  color: var(--mz-gold);
  font-style: normal;
}

.mz-spotlight__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  margin: 0;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 15.5px;
  line-height: 1.7;
}

.mz-spotlight__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 6px;
}

/* Bài phụ: cột bên phải, ngăn với bài chính bằng một đường kẻ mảnh như trang báo. */
html body[data-page-kind="home"] .mz-home-section[data-cover-size="spotlight"] .mz-spotlight > .book-list-shell.home-section__grid-wrap.mz-home-shell {
  grid-column: auto;
  min-width: 0;
}

html body[data-page-kind="home"] .mz-home-section[data-cover-size="spotlight"] .book-grid.home-grid.home-grid.mz-spotlight__rest {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 20px;
  padding-left: 40px;
  border-left: 1px solid var(--mz-rule);
}

@media (min-width: 1024px) and (max-width: 1279px) {
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="spotlight"] .mz-spotlight {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .mz-spotlight__lead {
    padding-right: 32px;
  }

  html body[data-page-kind="home"] .mz-home-section[data-cover-size="spotlight"] .book-grid.home-grid.home-grid.mz-spotlight__rest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 32px;
  }
}

@media (max-width: 1023px) {
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="spotlight"] .mz-spotlight {
    grid-template-columns: minmax(0, 1fr);
  }

  .mz-spotlight__lead,
  .mz-spotlight--solo .mz-spotlight__lead {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 20px 32px;
    padding-right: 0;
  }

  html body[data-page-kind="home"] .mz-home-section[data-cover-size="spotlight"] .book-grid.home-grid.home-grid.mz-spotlight__rest {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 32px 0 0;
    border-top: 1px solid var(--mz-rule);
    border-left: 0;
  }
}

/* Laptop và máy tính bảng: Tiêu điểm còn 1 + 4. */
@media (min-width: 600px) and (max-width: 1279px) {
  html body[data-page-kind="home"] .mz-home-section[data-cover-size="spotlight"] .mz-spotlight__rest > .book-card:nth-child(n+5) {
    display: none;
  }
}

@media (max-width: 599px) {
  .mz-spotlight__lead,
  .mz-spotlight--solo .mz-spotlight__lead {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .mz-spotlight__cover {
    justify-self: center;
    width: min(64vw, 240px);
  }

  .mz-spotlight__title {
    font-size: 24px;
  }

  .mz-spotlight__excerpt {
    -webkit-line-clamp: 4;
    font-size: 15px;
  }

  html body[data-page-kind="home"] .mz-home-section[data-cover-size="spotlight"] .book-grid.home-grid.home-grid.mz-spotlight__rest {
    padding: 20px var(--mz-scroll-gutter) 14px;
    border-top: 1px solid var(--mz-rule);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mz-spotlight__cover img {
    transition: none;
  }

  .mz-spotlight__cover:hover img,
  .mz-spotlight__cover:focus-visible img {
    transform: none;
  }
}

/* ------------------------------------------------------------------ */
/* Kích hoạt thiết bị: cùng khung tài khoản, giữ nguyên luồng xác nhận. */
/* ------------------------------------------------------------------ */
html body .panel.auth-wrap.mz-device-activation {
  overflow-wrap: anywhere;
}

html body .mz-device-activation > p {
  color: var(--mz-ink);
  line-height: 1.6;
}

html body .mz-device-activation dl {
  margin-block: 24px;
  padding-block: 16px;
  border-block: 1px solid var(--mz-rule);
}

html body .mz-device-activation dt {
  color: var(--mz-muted);
  font-size: 14px;
}

html body .mz-device-activation dd {
  margin: 4px 0 16px;
  color: var(--mz-ink);
}

html body .mz-device-activation dd:last-child {
  margin-bottom: 0;
}

html body .mz-device-activation .auth-form + .auth-form {
  margin-top: 12px;
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .panel.auth-wrap.mz-device-activation button.secondary {
  border-color: var(--mz-rule-strong);
  background: transparent;
  color: var(--mz-ink);
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .panel.auth-wrap.mz-device-activation button.secondary:hover {
  background: var(--mz-paper);
}

@media (max-width: 599px) {
  html body .container > .panel.auth-wrap.mz-device-activation {
    margin-block: 32px 48px;
    padding: 24px 20px;
  }
}

/* ================================================================== */
/* 15. Trang chủ: khối "Giới thiệu sách hay" (section_type featured) */
/*     Hai kiểu do biên tập chọn: A · Dải đỏ (red_band), B · Trang bìa */
/*     tạp chí (magazine); mỗi kiểu có bản 1 cuốn và 2 cuốn.            */
/*     Owner cho phép riêng khối này: bìa có chiều sâu nhẹ, khung kem,  */
/*     chỉ vàng. Giao diện tối: mz_theme.css mục 3.                     */
/* ================================================================== */
.mz-pick {
  grid-column: 1 / -1;
  position: relative;
  min-width: 0;
}

.mz-pick a {
  text-decoration: none;
}

.mz-pick img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1px;
}

.mz-pick figure {
  margin: 0;
}

/* Tên sách: tên chính + phụ đề (máy chủ tách ở dấu hai chấm đầu tiên). */
.mz-pick-title {
  margin: 0;
  font-family: var(--mz-serif);
  font-weight: 900;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.mz-pick-title a {
  color: inherit;
}

.mz-pick-title__main {
  display: block;
}

.mz-pick-title__sub {
  display: block;
  margin-top: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: pretty;
}

.mz-pick-by {
  margin: 0;
  font-family: var(--mz-condensed);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mz-pick-kicker {
  margin: 0;
  font-family: var(--mz-condensed);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6; /* đủ chỗ cho dấu trên chữ hoa (Ậ, Ệ, Ở…) */
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.mz-pick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 30px;
}

.mz-pick-more {
  gap: 10px;
}

.mz-pick-arrow {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 10px;
  transition: transform 160ms ease;
}

.mz-pick-more:hover .mz-pick-arrow,
.mz-pick-more:focus-visible .mz-pick-arrow {
  transform: translateX(3px);
}

/* ------------------------------------------------------------------ */
/* 15.1 A · Dải đỏ                                                     */
/* ------------------------------------------------------------------ */
.mz-pick-band {
  --mz-pick-bg: var(--mz-band);
  --mz-pick-text: var(--mz-band-text);
  --mz-pick-muted: var(--mz-band-muted);
  --mz-pick-gold: var(--mz-band-accent);
  --mz-pick-strong: var(--mz-band-strong);
  --mz-pick-rule: color-mix(in srgb, var(--mz-pick-gold) 42%, var(--mz-pick-bg));
  --mz-pick-frame: #fbf7ef;
  margin: 112px 0 136px;
  color: var(--mz-pick-text);
  /* Nền dải tràn hết bề ngang (như .mz-feature), kèm hai chỉ vàng mảnh sát mép trên/dưới. */
  border-image: linear-gradient(to bottom,
      var(--mz-pick-bg) 12px, var(--mz-pick-rule) 12px 13px,
      var(--mz-pick-bg) 13px calc(100% - 13px), var(--mz-pick-rule) calc(100% - 13px) calc(100% - 12px),
      var(--mz-pick-bg) calc(100% - 12px)) fill 0 / 0 / 0 100vw;
}

body.theme-quoc-tang .mz-pick-band {
  --mz-pick-gold: var(--ui-text-strong);
  --mz-pick-strong: var(--ui-text-strong);
  --mz-pick-rule: var(--ui-border-strong);
  --mz-pick-frame: var(--ui-surface-solid);
}

.mz-pick-band .mz-pick-kicker {
  color: var(--mz-pick-gold);
}

.mz-pick-band .mz-pick-kicker__cat {
  color: var(--mz-pick-muted);
  letter-spacing: 0.14em;
}

.mz-pick-band .mz-pick-kicker__cat::before {
  content: "/";
  margin: 0 14px;
  color: var(--mz-pick-rule);
}

.mz-pick-band .mz-pick-title {
  color: var(--mz-pick-strong);
}

.mz-pick-band .mz-pick-title a:hover,
.mz-pick-band .mz-pick-title a:focus-visible {
  color: var(--mz-pick-gold);
}

.mz-pick-band .mz-pick-title__sub {
  color: var(--mz-pick-text);
}

.mz-pick-band .mz-pick-by {
  color: var(--mz-pick-gold);
}

.mz-pick-band__cover {
  display: block;
  padding: 10px;
  background: var(--mz-pick-frame);
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.6), 0 3px 10px rgba(0, 0, 0, 0.22);
}

.mz-pick-quote {
  position: relative;
  margin: 0;
  padding: 0 0 0 56px;
}

.mz-pick-quote::before {
  content: "\201C";
  position: absolute;
  left: -4px;
  top: -18px;
  color: var(--mz-pick-gold);
  font-family: var(--mz-serif);
  font-size: 92px;
  font-weight: 900;
  line-height: 1;
}

.mz-pick-quote p {
  margin: 0;
  color: var(--mz-pick-text);
  font-family: var(--mz-serif);
  font-size: 18px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.7;
}

.mz-pick-quote cite {
  display: block;
  margin-top: 8px;
  color: var(--mz-pick-muted);
  font-family: var(--mz-serif);
  font-size: 14px;
  font-style: italic;
}

.mz-pick-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 30px;
  border: 1px solid var(--mz-pick-gold);
  color: var(--mz-pick-strong);
  font-family: var(--mz-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 160ms ease, color 160ms ease;
}

.mz-pick-band .mz-pick-btn-gold:hover,
.mz-pick-band .mz-pick-btn-gold:focus-visible {
  background: var(--mz-pick-gold);
  color: var(--mz-pick-bg);
}

.mz-pick-band .mz-textlink {
  color: var(--mz-pick-text);
}

.mz-pick-band .mz-textlink:hover,
.mz-pick-band .mz-textlink:focus-visible {
  color: var(--mz-pick-gold);
}

/* A · 1 cuốn. Bìa trồi đều ra hai mép dải. Để độ trồi không đổi theo độ dài lời giới thiệu:
   dải có chiều cao tối thiểu cố định (--mz-pick-band-h), chữ bên phải kẹp số dòng để không vượt
   chiều cao đó; bìa căn giữa dải nên trồi = (cao bìa - cao dải) / 2 ở mọi cuốn cùng tỉ lệ bìa. */
.mz-pick-band--one {
  --mz-pick-cover-w: 420px;
  --mz-pick-band-h: 500px;
  display: grid;
  grid-template-columns: var(--mz-pick-cover-w) minmax(0, 1fr);
  align-items: center;
  gap: 0 72px;
  min-height: var(--mz-pick-band-h);
  padding: 40px 56px 40px 64px;
}

.mz-pick-band--one .mz-pick-band__cover {
  align-self: center;
  margin-block: -240px; /* bìa không làm dải cao thêm; dải cao theo min-height và phần chữ */
}

.mz-pick-band--one .mz-pick-band__copy {
  display: grid;
  gap: 14px;
  max-width: 720px;
}

.mz-pick-band--one .mz-pick-title {
  font-size: clamp(34px, 3.2vw, 48px);
  line-height: 1.1;
}

/* Kẹp dòng (chỉ bản 1 cuốn, máy tính): tên 2 dòng, phụ đề 2 dòng, lời giới thiệu 4 dòng (3 ở ≤ 1260px). */
.mz-pick-band--one .mz-pick-title__main,
.mz-pick-band--one .mz-pick-title__sub,
.mz-pick-band--one .mz-pick-quote p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.mz-pick-band--one .mz-pick-title__main {
  line-height: 1.14; /* đủ khe để dấu của dòng bị ẩn không lộ lên */
  padding-top: 0.08em; /* dấu trên chữ hoa dòng đầu không bị cắt (không đệm dưới: sẽ lộ dòng bị ẩn) */
}

.mz-pick-band--one .mz-pick-title__sub {
  font-size: 18px;
  line-height: 1.5;
}

.mz-pick-band--one .mz-pick-quote {
  margin-top: 6px;
}

.mz-pick-band--one .mz-pick-quote p {
  -webkit-line-clamp: 4;
  font-size: 17.5px;
  line-height: 1.66;
}

.mz-pick-band--one .mz-pick-actions {
  margin-top: 4px;
}

/* A · 2 cuốn: bìa ở hai mép ngoài, đối xứng qua chỉ vàng giữa. */
.mz-pick-band--two {
  padding: 30px 48px 52px;
}

.mz-pick-band__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  max-width: 560px;
  margin: 0 auto 34px;
}

.mz-pick-band__head::before,
.mz-pick-band__head::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--mz-pick-rule);
}

.mz-pick-band__head .mz-pick-kicker {
  flex: 0 1 auto;
  text-align: center;
}

.mz-pick-band__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 0 48px;
}

.mz-pick-band__rule {
  background: var(--mz-pick-rule);
}

.mz-pick-band__item {
  --mz-pick-cover-w: clamp(190px, 16.5vw, 236px);
  display: grid;
  grid-template-columns: var(--mz-pick-cover-w) minmax(0, 1fr);
  align-items: start;
  gap: 0 clamp(24px, 2.5vw, 36px);
  min-width: 0;
}

.mz-pick-band__item--mirror {
  grid-template-columns: minmax(0, 1fr) var(--mz-pick-cover-w);
}

.mz-pick-band__item--mirror .mz-pick-band__side {
  order: 2;
}

.mz-pick-band__item--mirror .mz-pick-band__facts {
  text-align: right;
}

.mz-pick-band--two .mz-pick-band__cover {
  margin-top: -150px; /* trồi lên khỏi mép trên dải */
}

.mz-pick-band__side {
  display: grid;
  align-content: start;
  gap: 14px;
}

.mz-pick-band__facts {
  margin: 0;
  color: var(--mz-pick-muted);
  font-family: var(--mz-condensed);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.06em;
}

.mz-pick-band__facts span {
  display: block;
}

.mz-pick-band--two .mz-pick-band__titles {
  display: grid;
  gap: 10px;
}

.mz-pick-band--two .mz-pick-band__copy {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-self: stretch;
  gap: 14px;
  min-width: 0;
}

.mz-pick-band--two .mz-pick-band__copy > .mz-pick-actions {
  align-self: end;
}

.mz-pick-band--two .mz-pick-title {
  font-size: 27px;
  line-height: 1.18;
}

.mz-pick-band--two .mz-pick-title__sub {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.5;
}

.mz-pick-band--two .mz-pick-by {
  font-size: 13px;
}

.mz-pick-band--two .mz-pick-quote {
  margin-top: 4px;
  padding-left: 38px;
}

.mz-pick-band--two .mz-pick-quote::before {
  top: -12px;
  font-size: 64px;
}

.mz-pick-band--two .mz-pick-quote p {
  font-size: 16px;
  line-height: 1.66;
}

.mz-pick-band--two .mz-pick-quote cite {
  font-size: 13px;
}

.mz-pick-band--two .mz-pick-actions {
  gap: 10px 22px;
  margin-top: 6px;
}

.mz-pick-band--two .mz-pick-btn-gold {
  min-height: 44px;
  padding: 0 22px;
  font-size: 14px;
}

.mz-pick-band--two .mz-textlink {
  font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* 15.2 B · Trang bìa tạp chí                                          */
/* ------------------------------------------------------------------ */
.mz-pick-folio {
  margin: 0 0 80px;
  padding: 56px 0 60px;
  border-image: linear-gradient(var(--mz-paper-deep), var(--mz-paper-deep)) fill 0 / 0 / 0 100vw;
}

.mz-pick-folio__page {
  position: relative;
  padding: 18px 0 44px;
  border-top: 3px solid var(--mz-red);
  border-bottom: 1px solid var(--mz-gold);
}

.mz-pick-folio__page::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 3px;
  height: 1px;
  background: var(--mz-red);
}

.mz-pick-folio__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  margin-bottom: 40px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mz-rule);
}

.mz-pick-folio .mz-pick-kicker {
  color: var(--mz-red);
}

.mz-pick-folio__meta {
  margin: 0;
  color: var(--mz-muted);
  font-family: var(--mz-condensed);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mz-pick-no {
  display: block;
  margin: 0;
  color: var(--mz-red);
  font-family: var(--mz-serif);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums;
}

.mz-pick-folio .mz-pick-title {
  color: var(--mz-ink);
}

.mz-pick-folio .mz-pick-title a:hover,
.mz-pick-folio .mz-pick-title a:focus-visible {
  color: var(--mz-red);
}

.mz-pick-folio .mz-pick-title__sub {
  color: var(--mz-muted);
}

.mz-pick-folio .mz-pick-by {
  color: var(--mz-red);
}

.mz-pick-frame {
  display: block;
  padding: 22px;
  background: var(--mz-paper);
  border: 1px solid var(--mz-gold);
  outline: 1px solid color-mix(in srgb, var(--mz-gold) 55%, transparent);
  outline-offset: -9px;
}

.mz-pick-frame img {
  box-shadow: 0 16px 28px -18px rgba(35, 26, 20, 0.55), 0 1px 3px rgba(35, 26, 20, 0.14);
}

.mz-pick-frame__cap {
  margin: 12px 0 0;
  color: var(--mz-muted);
  font-family: var(--mz-condensed);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: center;
}

.mz-pick-frame__cap span {
  white-space: nowrap;
}

.mz-pick-frame__cap span + span::before {
  content: "·";
  margin: 0 8px;
  color: var(--mz-gold);
}

.mz-pick-lede {
  margin: 0;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 18px;
  line-height: 1.78;
}

.mz-pick-lede::first-letter {
  float: left;
  margin: 8px 8px 0 -2px;
  color: var(--mz-red);
  font-family: var(--mz-serif);
  font-size: 76px;
  font-weight: 900;
  line-height: 0.8;
}

/* Chromium/Safari: chữ thả đúng 2 dòng, tự canh theo chiều cao chữ hoa. */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .mz-pick-lede::first-letter {
    float: none;
    -webkit-initial-letter: 2;
    initial-letter: 2;
    margin: 0 10px 0 0;
    font-size: inherit;
    line-height: inherit;
  }
}

.mz-pick-sign {
  margin: 0;
  color: var(--mz-muted);
  font-family: var(--mz-serif);
  font-size: 15px;
  font-style: italic;
  text-align: right;
}

/* B · 1 cuốn (không đánh số). */
.mz-pick-folio--one .mz-pick-folio__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  align-items: center;
  gap: 0 104px;
}

.mz-pick-folio--one .mz-pick-folio__copy {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.mz-pick-folio__titles {
  display: grid;
  gap: 14px;
}

.mz-pick-folio--one .mz-pick-lede,
.mz-pick-folio--one .mz-pick-sign {
  max-width: 64ch;
}

.mz-pick-folio--one .mz-pick-title {
  font-size: clamp(34px, 3.4vw, 50px);
  line-height: 1.1;
}

.mz-pick-folio--one .mz-pick-title__sub {
  font-size: 20px;
  line-height: 1.5;
}

.mz-pick-folio--one .mz-pick-lede {
  margin-top: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--mz-rule);
}

.mz-pick-folio--one .mz-pick-actions {
  margin-top: 8px;
}

/* B · 2 cuốn: hai cột đối trang, ngăn bằng kẻ kép vàng; số "01" / "02". */
.mz-pick-folio--two .mz-pick-folio__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 0 56px;
}

.mz-pick-folio__gutter {
  grid-row: 1 / span 3;
  grid-column: 2;
  border-inline: 1px solid var(--mz-gold);
}

.mz-pick-folio__col {
  display: grid;
  grid-row: 1 / span 3;
  grid-template-rows: subgrid;
  gap: 26px;
  min-width: 0;
}

.mz-pick-folio__col:first-child {
  grid-column: 1;
}

.mz-pick-folio__col:last-child {
  grid-column: 3;
}

.mz-pick-folio__top {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: start;
  gap: 0 32px;
}

.mz-pick-folio__heading {
  min-width: 0;
}

.mz-pick-folio__heading .mz-pick-folio__meta {
  margin-bottom: 8px;
}

.mz-pick-folio__text {
  display: grid;
  align-content: start;
  gap: 12px;
}

.mz-pick-folio--two .mz-pick-folio__col > .mz-pick-actions {
  align-self: end;
  gap: 10px 26px;
}

.mz-pick-folio--two .mz-pick-frame {
  padding: 16px;
  outline-offset: -7px;
}

.mz-pick-folio--two .mz-pick-no {
  margin-bottom: 18px;
  font-size: 104px;
}

.mz-pick-folio--two .mz-pick-title {
  font-size: 28px;
  line-height: 1.16;
}

.mz-pick-folio--two .mz-pick-title__sub {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.5;
}

.mz-pick-folio--two .mz-pick-by {
  margin-top: 14px;
  font-size: 13px;
}

.mz-pick-folio--two .mz-pick-lede {
  font-size: 16.5px;
  line-height: 1.75;
}

.mz-pick-folio--two .mz-button {
  min-height: 44px;
  padding: 0 24px;
  font-size: 14px;
}

.mz-pick-folio--two .mz-textlink {
  font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* 15.3 Máy tính xách tay nhỏ / máy tính bảng ngang (≤ 1260px)         */
/* ------------------------------------------------------------------ */
@media (max-width: 1260px) {
  .mz-pick-band--one {
    --mz-pick-cover-w: 360px;
    --mz-pick-band-h: 440px;
    gap: 0 40px;
    padding: 28px 28px 28px 32px;
  }

  .mz-pick-band--one .mz-pick-band__copy {
    gap: 12px;
  }

  .mz-pick-band--one .mz-pick-kicker__cat {
    display: block;
  }

  .mz-pick-band--one .mz-pick-kicker__cat::before {
    content: none;
  }

  .mz-pick-band--one .mz-pick-title {
    font-size: 30px;
  }

  .mz-pick-band--one .mz-pick-title__sub {
    margin-top: 8px;
    font-size: 16px;
  }

  .mz-pick-band--one .mz-pick-quote p {
    -webkit-line-clamp: 3;
    font-size: 16px;
  }

  .mz-pick-band--two {
    padding-inline: 32px;
  }

  .mz-pick-band__pair {
    gap: 0 32px;
  }

  .mz-pick-band__item,
  .mz-pick-band__item--mirror {
    grid-template-columns: 1fr;
    gap: 22px 0;
  }

  .mz-pick-band__item--mirror .mz-pick-band__side {
    order: 0;
  }

  .mz-pick-band__side {
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: end;
    gap: 0 20px;
  }

  .mz-pick-band__item--mirror .mz-pick-band__facts {
    text-align: left;
  }

  /* Bìa không trồi nữa: ở bề ngang này bìa cuốn thứ hai sẽ đè lên nhãn giữa dải. */
  .mz-pick-band--two {
    margin-top: 72px;
  }

  .mz-pick-band--two .mz-pick-band__cover {
    margin-top: 0;
  }

  .mz-pick-band--two .mz-pick-title {
    font-size: 24px;
  }

  .mz-pick-folio--one .mz-pick-folio__body {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 0 48px;
  }

  .mz-pick-folio--two .mz-pick-folio__body {
    gap: 0 32px;
  }

  .mz-pick-folio__top {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 0 22px;
  }

  .mz-pick-folio--two .mz-pick-frame {
    padding: 12px;
    outline-offset: -6px;
  }

  .mz-pick-folio--two .mz-pick-no {
    margin-bottom: 12px;
    font-size: 76px;
  }

  .mz-pick-folio--two .mz-pick-title {
    font-size: 24px;
  }
}

/* ------------------------------------------------------------------ */
/* 15.4 Máy tính bảng dọc / điện thoại (≤ 860px): một cột               */
/* ------------------------------------------------------------------ */
@media (max-width: 860px) {
  .mz-pick-band {
    margin: 88px 0 64px;
  }

  .mz-pick-band--one {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: 0;
    padding: 0 20px 40px;
  }

  .mz-pick-band--one .mz-pick-band__cover {
    justify-self: center;
    width: 64%;
    max-width: 260px;
    margin: -64px auto 0;
  }

  .mz-pick-band--one .mz-pick-title {
    font-size: 30px;
  }

  .mz-pick-band--one .mz-pick-title__main,
  .mz-pick-band--one .mz-pick-title__sub,
  .mz-pick-band--one .mz-pick-quote p {
    display: block;
    overflow: visible;
    -webkit-line-clamp: none;
  }

  .mz-pick-band--one .mz-pick-title__sub {
    font-size: 17px;
  }

  .mz-pick-band .mz-pick-kicker__cat {
    display: block;
  }

  .mz-pick-band .mz-pick-kicker__cat::before {
    content: none;
  }

  .mz-pick-quote {
    padding-left: 34px;
  }

  .mz-pick-quote::before {
    left: -2px;
    top: -10px;
    font-size: 58px;
  }

  .mz-pick-band--one .mz-pick-quote p {
    font-size: 17px;
  }

  .mz-pick-band--two {
    margin-top: 56px;
    padding: 26px 20px 40px;
  }

  .mz-pick-band__head {
    gap: 14px;
    margin-bottom: 26px;
  }

  .mz-pick-band__head .mz-pick-kicker {
    font-size: 12px;
    letter-spacing: 0.16em;
  }

  .mz-pick-band__pair {
    grid-template-columns: 1fr;
    gap: 32px 0;
  }

  .mz-pick-band__rule {
    height: 1px;
  }

  .mz-pick-band__item,
  .mz-pick-band__item--mirror {
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 18px 18px;
  }

  .mz-pick-band__side {
    display: block;
  }

  .mz-pick-band__facts {
    display: none;
  }

  .mz-pick-band--two .mz-pick-band__cover {
    margin-top: 0;
    padding: 6px;
  }

  .mz-pick-band--two .mz-pick-band__copy {
    display: contents;
  }

  .mz-pick-band--two .mz-pick-band__titles {
    align-content: start;
  }

  .mz-pick-band__item .mz-pick-quote,
  .mz-pick-band__item .mz-pick-actions {
    grid-column: 1 / -1;
  }

  /* Trích dẫn trải hết bề ngang dưới bìa, dấu ngoặc nhỏ lại để chữ không thụt sâu. */
  .mz-pick-band--two .mz-pick-quote {
    margin-top: 0;
    padding-left: 28px;
  }

  .mz-pick-band--two .mz-pick-quote::before {
    top: -8px;
    font-size: 48px;
  }

  .mz-pick-band--two .mz-pick-title {
    font-size: 21px;
  }

  .mz-pick-band--two .mz-pick-title__sub {
    font-size: 14.5px;
  }

  .mz-pick-band--two .mz-pick-quote p {
    font-size: 16px;
  }

  .mz-pick-folio {
    margin-bottom: 56px;
    padding: 36px 0 40px;
  }

  .mz-pick-folio__head {
    margin-bottom: 26px;
  }

  .mz-pick-folio--one .mz-pick-folio__body {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .mz-pick-folio--one .mz-pick-folio__copy {
    display: contents;
  }

  .mz-pick-folio--one .mz-pick-folio__titles {
    order: -2;
  }

  .mz-pick-folio--one .mz-pick-folio__figure {
    order: -1;
    justify-self: center;
    width: 78%;
    max-width: 360px;
  }

  .mz-pick-folio--one .mz-pick-title {
    font-size: 30px;
  }

  .mz-pick-folio--one .mz-pick-title__sub {
    font-size: 17px;
  }

  .mz-pick-folio--one .mz-pick-lede {
    margin-top: 0;
    font-size: 17px;
  }

  .mz-pick-folio--one .mz-pick-frame {
    padding: 16px;
    outline-offset: -7px;
  }

  .mz-pick-folio--two .mz-pick-folio__body {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 36px 0;
  }

  .mz-pick-folio__gutter,
  .mz-pick-folio__col,
  .mz-pick-folio__col:first-child,
  .mz-pick-folio__col:last-child {
    grid-row: auto;
    grid-column: auto;
  }

  .mz-pick-folio__gutter {
    height: 3px;
    border-inline: 0;
    border-block: 1px solid var(--mz-gold);
  }

  .mz-pick-folio__col {
    grid-template-rows: none;
    gap: 20px;
  }

  /* Tên thể loại lên hàng riêng, trải hết bề ngang (không ngắt dòng trong cột hẹp cạnh bìa). */
  .mz-pick-folio__top {
    grid-template-columns: 128px minmax(0, 1fr);
    grid-template-areas:
      "meta meta"
      "fig  no"
      "fig  title"
      "fig  by"
      "fig  .";
    grid-template-rows: auto auto auto auto 1fr;
    align-items: start;
    gap: 0 18px;
  }

  .mz-pick-folio__heading {
    display: contents;
  }

  .mz-pick-folio__top > .mz-pick-folio__figure {
    grid-area: fig;
    align-self: start;
  }

  .mz-pick-folio__heading > .mz-pick-no {
    grid-area: no;
  }

  .mz-pick-folio__heading > .mz-pick-folio__meta {
    grid-area: meta;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mz-rule);
  }

  .mz-pick-folio__heading > .mz-pick-title {
    grid-area: title;
    align-self: start;
  }

  .mz-pick-folio__heading > .mz-pick-by {
    grid-area: by;
    align-self: start;
  }

  .mz-pick-folio--two .mz-pick-frame {
    padding: 10px;
    outline-offset: -5px;
  }

  .mz-pick-folio--two .mz-pick-no {
    margin-bottom: 10px;
    font-size: 64px;
  }

  .mz-pick-folio--two .mz-pick-title {
    font-size: 21px;
  }

  .mz-pick-folio--two .mz-pick-title__sub {
    font-size: 14.5px;
  }

  .mz-pick-folio--two .mz-pick-by {
    margin-top: 10px;
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  .mz-pick-band--one {
    padding-inline: 16px;
  }

  .mz-pick-band__item,
  .mz-pick-band__item--mirror {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mz-pick-arrow {
    transition: none;
  }
}

/* ================================================================== */
/* 16. Trang chủ: "Khối chia cột" (section_type columns, HOME-COLUMNS-1) */
/*     Một khối = 2 hoặc 3 nguồn cạnh nhau. Biên tập chọn khung         */
/*     (news = Hai cột báo, kẻ dọc kép chỉ vàng · rule = Kẻ mảnh ·      */
/*     panel = Tấm nền xen màu), và cho từng cột: trình bày (grid =     */
/*     lưới bìa · ranking = xếp hạng) + tiêu đề (red = dải đỏ sẫm ·     */
/*     light = nền sáng). Giao diện tối: mz_theme.css mục 3.            */
/* ================================================================== */
/* Đầu cột thẳng hàng nhờ subgrid: hàng 1 = tiêu đề cột, hàng 2 = thân cột, nên tiêu đề 2 dòng ở một
   cột không đẩy lệch thân cột bên cạnh; các cột kéo giãn bằng nhau nên đáy (kẻ dọc, tấm nền) thẳng hàng. */
html body[data-page-kind="home"] .mz-cols.mz-cols {
  --mz-cols-n: 2;
  --mz-cols-pad: 40px;
  --mz-cols-rule-w: 1px;
  --mz-cols-band: var(--mz-band);
  --mz-cols-panel-light: color-mix(in srgb, var(--mz-gold) 14%, var(--mz-paper));
  --mz-cols-panel-deep: color-mix(in srgb, var(--mz-gold) 26%, var(--mz-paper));
  grid-column: 1 / -1;
  min-width: 0;
}

html body[data-page-kind="home"] .mz-cols[data-cols="3"] {
  --mz-cols-n: 3;
  --mz-cols-pad: 32px;
}

html body[data-page-kind="home"] .mz-cols.mz-cols--news {
  --mz-cols-rule-w: 4px;
}

.mz-cols > .mz-cols__banner,
.mz-cols > .mz-cols__row {
  grid-column: 1 / -1;
  min-width: 0;
}

.mz-cols__row {
  display: grid;
  grid-template-columns: repeat(var(--mz-cols-n), minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: calc(2 * var(--mz-cols-pad) + var(--mz-cols-rule-w));
  row-gap: 0;
  align-items: stretch;
}

.mz-cols__col {
  position: relative;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  min-width: 0;
}

.mz-cols__body {
  min-width: 0;
}

/* Kẻ dọc giữa hai cột nằm chính giữa khe cột (vẽ bằng ::before, không dùng padding) để mọi cột rộng bằng nhau. */
.mz-cols--news .mz-cols__col + .mz-cols__col::before,
.mz-cols--rule .mz-cols__col + .mz-cols__col::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--mz-cols-pad) - var(--mz-cols-rule-w));
  width: 0;
  border-left: 1px solid var(--mz-rule);
  pointer-events: none;
}

.mz-cols--news .mz-cols__col + .mz-cols__col::before {
  border-left: var(--mz-cols-rule-w) double var(--mz-gold);
}

/* Lưới bìa trong cột: chia 2 → 3 bìa/hàng; chia 3 → 2 bìa/hàng (bìa ~170px ở 1440). Thẻ Vừa: tên 2 dòng + tác giả. */
html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-cover-size] {
  --mz-cols: 3;
  --mz-gap-x: 24px;
  --mz-gap-y: 36px;
  --mz-scroll-gutter: 16px;
}

html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols__col[data-cover-size] {
  --mz-cols: 2;
  --mz-gap-x: 22px;
}

/* Bìa đúng tỉ lệ ảnh, không bo góc. */
html body[data-page-kind="home"] .mz-cols .book-card .book-card__media,
html body[data-page-kind="home"] .mz-cols .book-card .book-cover,
html body[data-page-kind="home"] .mz-cols .book-card img,
html body[data-page-kind="home"] .mz-cols .mz-cols-rank__cover,
html body[data-page-kind="home"] .mz-cols .mz-cols-rank__cover img {
  border-radius: 0 !important;
}

/* Tiêu đề cột: cùng kiểu tiêu đề mục (kẻ đỏ dày + kẻ mảnh) nhưng nhỏ hơn một bậc. */
html body[data-page-kind="home"] .mz-cols .mz-cols__head {
  align-items: flex-end;
  margin: 0 0 28px;
  padding-top: 16px;
}

html body[data-page-kind="home"] .mz-cols .mz-cols__head .mz-section-head__title {
  font-size: clamp(21px, 1.6vw + 4px, 28px);
}

html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols__head .mz-section-head__title {
  font-size: clamp(20px, 1vw + 8px, 24px);
}

html body[data-page-kind="home"] .mz-cols .mz-cols__head .mz-section-head__more {
  font-size: 13px;
  letter-spacing: 0.1em;
}

/* Tiêu đề chung (tuỳ chọn) của cả khối giữ kẻ đỏ; khi đó tiêu đề cột nền sáng lùi xuống kẻ mảnh.
   Khoảng cách dưới đầu khối nằm ở tiêu đề chung: chỉ có nhãn nhỏ thì nhãn sát hàng cột (chỉ còn row-gap
   của khối), không để hở một khoảng trống dành cho tiêu đề vắng mặt. */
.mz-cols__banner {
  position: relative;
  display: grid;
  gap: 6px;
  margin: 0;
  padding-top: 18px;
  border-top: 3px solid var(--mz-red);
}

.mz-cols__banner::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 3px;
  height: 1px;
  background: var(--mz-rule-strong);
}

.mz-cols__banner-title {
  margin: 0 0 32px;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

html body[data-page-kind="home"] .mz-cols--has-banner .mz-cols__col[data-heading="light"] .mz-cols__head {
  padding-top: 14px;
  border-top: 1px solid var(--mz-rule-strong);
}

html body[data-page-kind="home"] .mz-cols--has-banner .mz-cols__col[data-heading="light"] .mz-cols__head::before {
  content: none;
}

/* Tiêu đề cột "Đỏ sẫm": dải đỏ sẫm cả bề ngang cột, nhãn nhỏ vàng nhạt, tên cột trắng, "Xem tất cả" kem.
   Dải kéo giãn hết hàng tiêu đề nên cạnh cột tiêu đề nền sáng vẫn cân. */
html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-heading="red"] .mz-cols__head {
  align-items: flex-end;
  padding: 20px 24px 18px;
  border-top: 0;
  background: var(--mz-cols-band);
}

html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-heading="red"] .mz-cols__head::before {
  content: none;
}

html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-heading="red"] .mz-cols__head .mz-kicker {
  color: var(--mz-band-accent);
}

html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-heading="red"] .mz-cols__head .mz-section-head__title,
html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-heading="red"] .mz-cols__head .mz-section-head__title a {
  color: var(--mz-band-strong);
}

html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-heading="red"] .mz-cols__head .mz-section-head__more {
  color: var(--mz-band-text);
}

html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-heading="red"] .mz-cols__head .mz-section-head__title a:hover,
html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-heading="red"] .mz-cols__head .mz-section-head__title a:focus-visible,
html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-heading="red"] .mz-cols__head .mz-section-head__more:hover,
html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-heading="red"] .mz-cols__head .mz-section-head__more:focus-visible {
  color: var(--mz-band-accent);
}

html body .mz-cols .mz-cols__col[data-heading="red"] .mz-cols__head :where(a[href]):focus-visible {
  outline-color: var(--mz-band-accent) !important;
}

/* Tấm nền xen màu: mỗi cột là một chuyên mục riêng, kẻ đỏ trên đầu tấm; tấm lẻ nhạt, tấm chẵn đậm. */
html body[data-page-kind="home"] .mz-cols--panel .mz-cols__row {
  column-gap: 20px;
}

html body[data-page-kind="home"] .mz-cols--panel .mz-cols__col {
  --mz-cols-inset: 28px;
  --mz-scroll-gutter: var(--mz-cols-inset);
  padding: 0 var(--mz-cols-inset) 32px;
  border-top: 3px solid var(--mz-red);
  background: var(--mz-cols-panel-light);
}

html body[data-page-kind="home"] .mz-cols--panel[data-cols="3"] .mz-cols__col {
  --mz-cols-inset: 24px;
}

html body[data-page-kind="home"] .mz-cols--panel .mz-cols__col[data-tone="deep"] {
  background: var(--mz-cols-panel-deep);
}

html body[data-page-kind="home"] .mz-cols--panel .mz-cols__col .mz-cols__head.mz-cols__head {
  margin: 0 calc(-1 * var(--mz-cols-inset)) 28px;
  padding: 20px var(--mz-cols-inset) 16px;
  border-top: 0;
  border-bottom: 1px solid var(--mz-rule);
}

html body[data-page-kind="home"] .mz-cols--panel .mz-cols__col .mz-cols__head::before {
  content: none;
}

html body[data-page-kind="home"] .mz-cols--panel .mz-cols__col[data-heading="red"] {
  border-top-color: var(--mz-cols-band);
}

html body[data-page-kind="home"] .mz-cols--panel .mz-cols__col[data-heading="red"] .mz-cols__head.mz-cols__head {
  border-bottom: 0;
  background: var(--mz-cols-band);
}

/* Cột chưa có sách: một dòng nhẹ, không để trống trơn. */
.mz-cols__empty {
  margin: 0;
  padding: 8px 0 24px;
  color: var(--mz-muted);
  font-family: var(--mz-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
}

/* Xếp hạng: số lớn đỏ, bìa nhỏ, tên 2 dòng, tác giả. Các dòng chia đều chiều cao cột. */
.mz-cols-rank {
  display: grid;
  grid-template-rows: repeat(var(--mz-cols-rank-count, 5), minmax(0, 1fr));
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mz-cols-rank__item {
  display: grid;
  grid-template-columns: 52px 68px minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  min-height: 0;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--mz-rule);
}

.mz-cols-rank__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.mz-cols-rank__item:last-child {
  padding-bottom: 0;
}

.mz-cols-rank__num {
  color: var(--mz-red);
  font-family: var(--mz-serif);
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  text-align: center;
}

.mz-cols-rank__cover {
  display: block;
  min-width: 0;
}

.mz-cols-rank__cover img {
  display: block;
  width: 100%;
  height: auto;
}

.mz-cols-rank__copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.mz-cols-rank__title {
  margin: 0;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.mz-cols-rank__title > a,
.mz-cols-rank__title > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--mz-ink);
  text-decoration: none;
}

.mz-cols-rank__title > a:hover,
.mz-cols-rank__title > a:focus-visible {
  color: var(--mz-red);
}

.mz-cols-rank__author {
  margin: 0;
  overflow: hidden;
  color: var(--mz-muted);
  font-family: var(--mz-condensed);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mz-cols-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html body[data-page-kind="home"] .mz-cols[data-cols="2"] .mz-cols-rank__item {
  grid-template-columns: 56px 76px minmax(0, 1fr);
  column-gap: 22px;
}

html body[data-page-kind="home"] .mz-cols[data-cols="2"] .mz-cols-rank__title {
  font-size: 17.5px;
}

html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols-rank__item {
  grid-template-columns: 40px 60px minmax(0, 1fr);
  column-gap: 14px;
}

html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols-rank__num {
  font-size: 36px;
}

html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols-rank__title {
  font-size: 15px;
}

/* Quốc tang: dải tiêu đề dùng màu chủ đề nên chữ theo màu chữ của dải, không trắng cứng. */
html body.theme-quoc-tang .mz-cols {
  --mz-band-strong: var(--mz-band-text);
  --mz-band-accent: var(--mz-band-muted);
}

/* ---- Máy tính nhỏ (≤ 1279px, gồm 1024): khe hẹp lại, bìa nhỏ lại, vẫn giữ 2 / 3 cột ---- */
@media (max-width: 1279px) {
  html body[data-page-kind="home"] .mz-cols.mz-cols {
    --mz-cols-pad: 32px;
  }

  html body[data-page-kind="home"] .mz-cols.mz-cols[data-cols="3"] {
    --mz-cols-pad: 24px;
  }

  html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-cover-size],
  html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols__col[data-cover-size] {
    --mz-gap-x: 18px;
    --mz-gap-y: 30px;
  }

  html body[data-page-kind="home"] .mz-cols--panel .mz-cols__col,
  html body[data-page-kind="home"] .mz-cols--panel[data-cols="3"] .mz-cols__col {
    --mz-cols-inset: 20px;
  }

  html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-heading="red"] .mz-cols__head {
    padding-inline: 20px;
  }

  html body[data-page-kind="home"] .mz-cols[data-cols="2"] .mz-cols-rank__item {
    grid-template-columns: 48px 68px minmax(0, 1fr);
    column-gap: 18px;
  }

  html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols-rank__item {
    grid-template-columns: 32px 52px minmax(0, 1fr);
    column-gap: 12px;
  }

  html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols-rank__num {
    font-size: 30px;
  }

  html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols-rank__title {
    font-size: 14.5px;
  }
}

/* ---- Xếp chồng: chia 3 từ ≤ 959px, chia 2 từ ≤ 820px; mỗi cột thành một khối cả hàng ---- */
@media (max-width: 959px) {
  html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols__row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 56px;
  }

  html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols__col {
    grid-row: auto;
    grid-template-rows: auto auto;
  }

  html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols__col + .mz-cols__col::before {
    content: none;
  }

  html body[data-page-kind="home"] .mz-cols--panel[data-cols="3"] .mz-cols__row {
    row-gap: 16px;
  }

  html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols__col[data-cover-size] {
    --mz-cols: 4;
  }

  html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols-rank {
    height: auto;
    grid-template-rows: none;
  }
}

@media (max-width: 820px) {
  html body[data-page-kind="home"] .mz-cols .mz-cols__row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 56px;
  }

  html body[data-page-kind="home"] .mz-cols .mz-cols__col {
    grid-row: auto;
    grid-template-rows: auto auto;
  }

  html body[data-page-kind="home"] .mz-cols .mz-cols__col + .mz-cols__col::before {
    content: none;
  }

  html body[data-page-kind="home"] .mz-cols--panel .mz-cols__row {
    row-gap: 16px;
  }

  html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-cover-size] {
    --mz-cols: 4;
  }

  /* 5–6 bìa: đủ hai hàng đều nhau thay vì 4 + 2. */
  html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-cover-size][data-book-count="5"],
  html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-cover-size][data-book-count="6"] {
    --mz-cols: 3;
  }

  html body[data-page-kind="home"] .mz-cols .mz-cols-rank {
    height: auto;
    grid-template-rows: none;
  }
}

/* ---- Điện thoại: lưới bìa thành dải vuốt ngang, xếp hạng giữ dạng danh sách ---- */
@media (max-width: 599px) {
  html body[data-page-kind="home"] .mz-cols .mz-cols__head {
    margin-bottom: 20px;
  }

  html body[data-page-kind="home"] .mz-cols .mz-cols__head .mz-section-head__title,
  html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols__head .mz-section-head__title {
    font-size: 22px;
  }

  html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-heading="red"] .mz-cols__head {
    padding: 16px 16px 14px;
  }

  html body[data-page-kind="home"] .mz-cols .mz-cols__row,
  html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols__row {
    row-gap: 44px;
  }

  html body[data-page-kind="home"] .mz-cols--panel .mz-cols__row,
  html body[data-page-kind="home"] .mz-cols--panel[data-cols="3"] .mz-cols__row {
    row-gap: 12px;
  }

  /* Tấm nền tràn sát mép màn hình để dải vuốt có đủ chỗ. */
  html body[data-page-kind="home"] .mz-cols--panel .mz-cols__col,
  html body[data-page-kind="home"] .mz-cols--panel[data-cols="3"] .mz-cols__col {
    --mz-cols-inset: 16px;
    margin-inline: -16px;
    padding-bottom: 20px;
  }

  html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-cover-size] .book-grid.home-grid.home-grid.mz-cols__grid {
    display: flex;
    gap: 14px;
    width: auto;
    margin-inline: calc(-1 * var(--mz-scroll-gutter));
    padding: 2px var(--mz-scroll-gutter) 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--mz-scroll-gutter);
    scrollbar-width: thin;
    scrollbar-color: var(--mz-rule-strong) transparent;
  }

  html body[data-page-kind="home"] .mz-cols .mz-cols__col[data-cover-size] .mz-cols__grid > .book-card.book-card.book-card.book-card {
    display: grid;
    flex: 0 0 clamp(118px, 34vw, 150px);
    scroll-snap-align: start;
  }

  html body[data-page-kind="home"] .mz-cols[data-cols="2"] .mz-cols-rank__item,
  html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols-rank__item {
    grid-template-columns: 36px 56px minmax(0, 1fr);
    column-gap: 14px;
    padding: 12px 0;
  }

  html body[data-page-kind="home"] .mz-cols[data-cols="2"] .mz-cols-rank__item:first-child,
  html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols-rank__item:first-child {
    padding-top: 0;
  }

  html body[data-page-kind="home"] .mz-cols[data-cols="2"] .mz-cols-rank__num,
  html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols-rank__num {
    font-size: 34px;
  }

  html body[data-page-kind="home"] .mz-cols[data-cols="2"] .mz-cols-rank__title,
  html body[data-page-kind="home"] .mz-cols[data-cols="3"] .mz-cols-rank__title {
    font-size: 15px;
  }
}

/* 17. Hero banner: horizontal drag; vertical gestures keep page scrolling. */
[data-banner-slider].is-slider .st-public-banner-slider__viewport {
  touch-action: pan-y pinch-zoom;
}
[data-banner-slider].is-dragging .st-public-banner-slider__track {
  transition: none;
}
[data-banner-slider].is-dragging .st-public-banner-slider__viewport {
  -webkit-user-select: none;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  [data-banner-slider].is-slider .st-public-banner-slider__viewport { cursor: grab; }
  [data-banner-slider].is-dragging .st-public-banner-slider__viewport { cursor: grabbing; }
}

/* ------------------------------------------------------------------ */
/* 18. Khối "Xếp hạng" đứng riêng một hàng (display: ranking, K09)     */
/*     (2026-10-05) Dùng hết bề rộng được cấp; số cột theo bề rộng      */
/*     khối, không theo màn: < 600 → 1 cột · 600–899 → 2 cột gọn ·      */
/*     ≥ 900 → 2 cột đủ cỡ. Đọc dọc theo cột (1–5 | 6–10).              */
/*     Trong cột của khối chia cột (K10) vẫn giữ kiểu .mz-cols-rank cũ. */
/* ------------------------------------------------------------------ */
html body[data-page-kind="home"] .mz-rank-block > .mz-rank-block__body,
html body[data-page-kind="home"] .mz-tiles-block > .home-block-tiles {
  grid-column: 1 / -1;
  min-width: 0;
}

html body[data-page-kind="home"] .mz-rank-block > .mz-rank-block__body {
  container-type: inline-size;
}

html body[data-page-kind="home"] .mz-rank-block .mz-rank-block__list {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-auto-flow: row;
  height: auto;
  border-top: 1px solid var(--mz-rule-strong);
}

html body[data-page-kind="home"] .mz-rank-block .mz-rank-block__list > .mz-cols-rank__item {
  grid-template-columns: 44px 56px minmax(0, 1fr);
  column-gap: 14px;
  padding: 14px 0;
  border-top: 0;
  border-bottom: 1px solid var(--mz-rule);
}

html body[data-page-kind="home"] .mz-rank-block .mz-cols-rank__num {
  font-size: 40px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-align: right;
}

/* Bìa: ô 2:3, ảnh giữ tỉ lệ gốc, không cắt, căn đáy giữa, viền trong 1px ôm sát ảnh (DAC-TA §4.3). */
html body[data-page-kind="home"] .mz-rank-block .mz-cols-rank__cover {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 2 / 3;
}

html body[data-page-kind="home"] .mz-rank-block .mz-cols-rank__cover img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
  outline: 1px solid var(--mz-rule);
  outline-offset: -1px;
}

html body[data-page-kind="home"] .mz-rank-block .mz-cols-rank__title {
  font-size: 16px;
}

@container (min-width: 600px) {
  html body[data-page-kind="home"] .mz-rank-block .mz-rank-block__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--mz-rank-rows, 5), auto);
    grid-auto-flow: column;
    column-gap: 40px;
  }

  html body[data-page-kind="home"] .mz-rank-block .mz-rank-block__list > .mz-cols-rank__item {
    grid-template-columns: 52px 56px minmax(0, 1fr);
    column-gap: 16px;
    padding: 16px 0;
  }

  html body[data-page-kind="home"] .mz-rank-block .mz-cols-rank__num {
    font-size: 44px;
  }
}

@container (min-width: 900px) {
  html body[data-page-kind="home"] .mz-rank-block .mz-rank-block__list {
    column-gap: 64px;
  }

  html body[data-page-kind="home"] .mz-rank-block .mz-rank-block__list > .mz-cols-rank__item {
    grid-template-columns: 72px 64px minmax(0, 1fr);
    column-gap: 20px;
    padding: 18px 0;
  }

  html body[data-page-kind="home"] .mz-rank-block .mz-cols-rank__num {
    font-size: 56px;
  }

  html body[data-page-kind="home"] .mz-rank-block .mz-cols-rank__title {
    font-size: 17px;
  }
}

/* ------------------------------------------------------------------ */
/* 19. Bốn kiểu khối trang chủ (2026-10-05, WEB-HOME-BLOCKS)            */
/*     cards K14 · collection K15 · list K16 · stack K17.               */
/*     Khung mục chuẩn, dùng hết bề rộng được cấp; số cột theo bề rộng  */
/*     khối (container): < 600 · 600–899 · ≥ 900. Không bóng, gradient, */
/*     khung, nền; chỉ kẻ mảnh và token màu.                            */
/* ------------------------------------------------------------------ */
html body[data-page-kind="home"] .mz-blk > .mz-blk__body {
  grid-column: 1 / -1;
  min-width: 0;
  container-type: inline-size;
}

.mz-blk ul,
.mz-blk ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mz-blk h3,
.mz-blk p {
  margin: 0;
}

/* Bìa: ô 2:3, ảnh giữ tỉ lệ gốc, không cắt, căn đáy giữa, viền trong 1px ôm sát ảnh (DAC-TA §4.3). */
.mz-blk .mz-blk-cover {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 2 / 3;
  min-width: 0;
}

html body[data-page-kind="home"] .mz-blk .mz-blk-cover img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
  outline: 1px solid var(--mz-rule);
  outline-offset: -1px;
}

.mz-blk :is(.mz-cards__title, .mz-coll__title, .mz-dlist__title, .mz-stack__title) > :is(a, span) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--mz-ink);
  text-decoration: none;
}

.mz-blk :is(.mz-cards__title, .mz-coll__title, .mz-dlist__title, .mz-stack__title) > a:is(:hover, :focus-visible) {
  color: var(--mz-red);
}

.mz-blk .mz-blk-tag {
  color: var(--mz-red);
  font-family: var(--mz-condensed);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mz-blk .mz-blk-by {
  overflow: hidden;
  color: var(--mz-muted);
  font-family: var(--mz-condensed);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mz-blk .mz-blk-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 14px;
  line-height: 1.55;
}

.mz-blk .mz-blk-meta {
  color: var(--mz-muted);
  font-family: var(--mz-serif);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
}

.mz-blk .mz-blk-more {
  justify-self: start;
  font-size: 14px;
}

html body .mz-blk .mz-button.mz-blk-button {
  justify-self: start;
  min-height: 44px;
  padding: 0 22px;
  background: transparent;
  color: var(--mz-red);
  font-size: 14px;
}

html body .mz-blk .mz-button.mz-blk-button:is(:hover, :focus-visible) {
  background: var(--mz-red-fill, var(--mz-red));
  border-color: var(--mz-red-fill, var(--mz-red));
  color: var(--mz-on-red);
}

/* Hàng cuộn ngang tràn mép khi khối hẹp (< 600): lề trong 16, bắt điểm theo thẻ, không thanh cuộn. */
.mz-blk .mz-cards,
.mz-blk .mz-coll__row {
  grid-auto-flow: column;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: -16px;
  padding-inline: 16px;
  scroll-padding-inline: 16px;
}

.mz-blk .mz-cards::-webkit-scrollbar,
.mz-blk .mz-coll__row::-webkit-scrollbar {
  display: none;
}

.mz-blk .mz-cards > *,
.mz-blk .mz-coll__row > * {
  scroll-snap-align: start;
}

/* ---- K14 · Thẻ biên tập ---- */
.mz-blk .mz-cards {
  display: grid;
  grid-auto-columns: 86%;
  gap: 16px;
}

.mz-blk .mz-cards__item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-top: 16px;
  border-top: 1px solid var(--mz-rule-strong);
}

.mz-blk .mz-cards__copy {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
}

.mz-blk .mz-cards__title {
  font-family: var(--mz-serif);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
}

.mz-blk .mz-cards__desc {
  -webkit-line-clamp: 3;
}

/* ---- K15 · Tủ sách chủ đề ---- */
.mz-blk .mz-coll {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.mz-blk .mz-coll__copy {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.mz-blk .mz-coll__lede {
  max-width: 60ch;
  color: var(--mz-muted);
  font-family: var(--mz-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.65;
}

.mz-blk .mz-coll__row {
  display: grid;
  grid-auto-columns: 112px;
  gap: 14px;
}

.mz-blk .mz-coll__item {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.mz-blk .mz-coll__title {
  font-family: var(--mz-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

/* ---- K16 · Danh sách có mô tả ---- */
.mz-blk .mz-dlist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--mz-rule-strong);
}

.mz-blk .mz-dlist__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--mz-rule);
}

.mz-blk .mz-dlist__copy {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
}

.mz-blk .mz-dlist__title {
  font-family: var(--mz-serif);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3;
}

/* ---- K17 · Chồng sách: lệch bằng vị trí, cuốn 1 nằm trên cùng ---- */
.mz-blk .mz-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.mz-blk .mz-stack__pile {
  --w: 104px;
  --dx: 20px;
  --dy: 18px;
  position: relative;
  width: calc(var(--w) + (var(--n, 3) - 1) * var(--dx));
  height: calc(var(--w) * 1.5 + (var(--n, 3) - 1) * var(--dy));
}

.mz-blk .mz-stack__pile > .mz-blk-cover {
  position: absolute;
  left: calc((var(--i, 1) - 1) * var(--dx));
  top: calc((var(--n, 3) - var(--i, 1)) * var(--dy));
  width: var(--w);
}

.mz-blk .mz-stack__copy {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}

.mz-blk .mz-stack__lede {
  max-width: 68ch;
  color: var(--mz-muted);
  font-family: var(--mz-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.65;
}

.mz-blk .mz-stack__count {
  font-style: normal;
}

.mz-blk .mz-stack__books {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 32px;
  border-top: 1px solid var(--mz-rule-strong);
}

.mz-blk .mz-stack__book {
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--mz-rule);
}

.mz-blk .mz-stack__title {
  font-family: var(--mz-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

/* ---- Khối 600–899 (768): 2 thẻ / 2 cột / dải 4 bìa ---- */
@container (min-width: 600px) {
  .mz-blk .mz-cards,
  .mz-blk .mz-coll__row {
    grid-auto-flow: row;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .mz-blk .mz-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 40px;
  }

  .mz-blk .mz-cards__item {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 18px;
    padding-top: 20px;
  }

  .mz-blk .mz-cards__title {
    font-size: 18px;
  }

  .mz-blk .mz-coll {
    gap: 24px;
  }

  .mz-blk .mz-coll__row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .mz-blk .mz-coll__item:nth-child(n + 5) {
    display: none;
  }

  .mz-blk .mz-dlist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }

  .mz-blk .mz-dlist__item {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
  }

  .mz-blk .mz-dlist__title {
    font-size: 17px;
  }

  .mz-blk .mz-stack {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 40px;
  }

  .mz-blk .mz-stack__pile {
    --w: 132px;
    --dx: 24px;
    --dy: 22px;
  }
}

/* ---- Khối ≥ 900 (1024, 1280) ---- */
@container (min-width: 900px) {
  .mz-blk .mz-cards {
    gap: 48px 64px;
  }

  .mz-blk .mz-cards__item {
    grid-template-columns: 136px minmax(0, 1fr);
    gap: 28px;
    padding-top: 24px;
  }

  .mz-blk .mz-cards__copy {
    gap: 8px;
  }

  .mz-blk .mz-cards__title {
    font-size: 21px;
    line-height: 1.25;
  }

  .mz-blk :is(.mz-cards__desc, .mz-dlist__desc) {
    font-size: 15px;
    line-height: 1.6;
  }

  .mz-blk .mz-coll {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 56px;
    align-items: start;
  }

  .mz-blk .mz-coll__row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .mz-blk .mz-coll__item:nth-child(n + 5) {
    display: grid;
  }

  .mz-blk .mz-coll__item:nth-child(n + 6) {
    display: none;
  }

  .mz-blk .mz-dlist {
    column-gap: 64px;
  }

  .mz-blk .mz-dlist__item {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 22px;
    padding: 24px 0;
  }

  .mz-blk .mz-dlist__title {
    font-size: 18px;
  }

  .mz-blk .mz-stack {
    column-gap: 64px;
  }

  .mz-blk .mz-stack__pile {
    --w: 168px;
    --dx: 30px;
    --dy: 26px;
  }

  .mz-blk .mz-stack__books {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mz-blk .mz-stack__book {
    padding: 16px 0;
  }
}