/* =====================================================================
   /danh-muc và /the-loai/{slug} · hướng B «Chuyên đề tạp chí» (D-275)
   Bản mẫu: he-thong-nhan-dien/_luu-tru/huong-tu-sach/b (màn 7a, 7b). Tiền tố riêng dmb-.
   Màu chỉ từ token --mz-* có sẵn (public_magazine.css / mz_theme.css): sáng, tối, quốc tang tự theo.
   Hiệu ứng duy nhất: bóng bìa theo --book-cover-depth-* (D-215). Ngoài bìa không bóng, không gradient, không khung.
   Điểm ngắt: điện thoại < 600 · 600–899 xếp một cột · 900–1199 lưới 4 · ≥ 1200 (bản mẫu 1440).
   ===================================================================== */
.dmb-scope { --dmb-cho: var(--mz-cover-placeholder); font-family: var(--mz-serif); color: var(--mz-ink); }
.book-list-page.dmb-scope { display: block; padding-bottom: 96px; }
.book-list-page.dmb-scope > .public-content-start-shell { margin: 0; }
:where(.dmb-scope) a { color: inherit; text-decoration: none; }
.dmb-scope :focus-visible { outline: 2px solid var(--mz-focus); outline-offset: 3px; }
:where(.dmb-scope) :where(button, select) { font: inherit; }
:where(.dmb-scope) :where(ul) { list-style: none; margin: 0; padding: 0; }
:where(.dmb-scope) :where(p, h1, h2, h3) { margin: 0; }
.dmb-ico { display: block; flex: 0 0 auto; fill: currentColor; }
.dmb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dmb-arr { margin-left: 8px; vertical-align: -2px; flex: none; }

/* chữ nhỏ dùng chung */
.dmb-kick { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; font: 700 12px/16px var(--mz-condensed); letter-spacing: .16em; text-transform: uppercase; color: var(--mz-red); }
.dmb-kick--soft, .dmb-kick__soft { color: var(--mz-muted); }
.dmb-kick__sep { color: var(--mz-rule-strong); }
.dmb-meta { font: 700 12.5px/18px var(--mz-condensed); letter-spacing: .12em; text-transform: uppercase; color: var(--mz-muted); }
.dmb-dek { font-style: italic; font-size: 17px; line-height: 1.65; color: var(--mz-muted); }
.dmb-lnk { display: inline-flex; align-items: center; min-height: 44px; font: 700 12.5px/1 var(--mz-condensed); letter-spacing: .14em; text-transform: uppercase; color: var(--mz-red); }
.dmb-lnk:hover { text-decoration: underline; text-underline-offset: 5px; }
.dmb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 1px solid var(--mz-red); background: transparent; color: var(--mz-red); font: 700 13px/1 var(--mz-condensed); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.dmb-btn:hover { background: var(--mz-red-fill); border-color: var(--mz-red-fill); color: var(--mz-on-red); }
.dmb-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.dmb-btn--n { border-color: var(--mz-ink); color: var(--mz-ink); }

/* trang: dải tờ báo (folio) dưới đường dẫn */
.dmb-folio { display: flex; justify-content: space-between; gap: 16px; margin: 26px 0 0; padding: 0 0 8px; border-bottom: 1px solid var(--mz-rule-strong); font: 700 11.5px/1.4 var(--mz-condensed); letter-spacing: .16em; text-transform: uppercase; color: var(--mz-muted); }

/* ── bìa: khung 2:3, ảnh không cắt, căn đáy, góc vuông, bóng D-215 ── */
.dmb-cv { position: relative; display: flex; align-items: flex-end; justify-content: center; container-type: size; aspect-ratio: 2 / 3; min-width: 0; min-height: 0; flex: none; height: var(--h, 240px); width: calc(var(--h, 240px) * 2 / 3); }
.dmb-cv--fluid { width: 100%; height: auto; }
.dmb-cv__b { position: relative; display: block; line-height: 0; box-shadow: var(--book-cover-depth-body-shadow); border-radius: 0; }
.dmb-cv__b img { position: relative; z-index: 1; display: block; width: auto; height: auto; max-width: 100cqw; max-height: 100cqh; border-radius: 0; background: var(--dmb-cho); }
.dmb-cv__b::after { content: ""; position: absolute; inset-inline: 10%; bottom: -5px; height: 12px; border-radius: 50%; background: var(--book-cover-depth-floor-color); filter: blur(7px); z-index: 0; }
.dmb-cv__b::before { content: ""; position: absolute; inset-block: 1px; inset-inline-start: 1px; width: clamp(4px, 4%, 13px); background: var(--book-cover-depth-spine-gradient); box-shadow: 1px 0 0 var(--book-cover-depth-spine-highlight); z-index: 2; }
body.theme-quoc-tang .dmb-cv img { filter: grayscale(1); }
@media (hover: hover) { body.theme-quoc-tang a:hover .dmb-cv img, body.theme-quoc-tang a:focus-visible .dmb-cv img { filter: none; } }

/* bìa chờ: chỗ của bìa khi chưa có sách; mảng phẳng màu giữ chỗ bìa, không bóng, không viền */
.dmb-cho { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; padding: 12% 10%; background: var(--dmb-cho); text-align: center; }
.dmb-cho .dmb-ico { width: 34%; height: auto; color: var(--mz-muted); }
.dmb-cho__k { font: 700 clamp(9px, 4.6cqw, 11.5px)/1.2 var(--mz-condensed); letter-spacing: .14em; text-transform: uppercase; color: var(--mz-muted); }
.dmb-cho__t { font: 700 clamp(11px, 7cqw, 17px)/1.3 var(--mz-serif); color: var(--mz-ink); }
.dmb-cho__s { font: 700 clamp(9px, 4.6cqw, 11.5px)/1.2 var(--mz-condensed); letter-spacing: .14em; text-transform: uppercase; color: var(--mz-muted); }

/* ── bố cục so le: 1–3 bìa lớn, đáy lệch có chủ ý (không kệ, không chồng) ── */
.dmb-sole { display: flex; align-items: flex-end; justify-content: center; max-width: 100%; }
.dmb-sole--lf  { gap: 24px; height: 430px; } .dmb-sole--lf .dmb-s1 { --h: 400px; } .dmb-sole--lf .dmb-s2 { --h: 292px; margin-bottom: 62px; } .dmb-sole--lf .dmb-s3 { --h: 232px; margin-bottom: 140px; }
.dmb-sole--md  { gap: 20px; height: 330px; } .dmb-sole--md .dmb-s1 { --h: 312px; } .dmb-sole--md .dmb-s2 { --h: 224px; margin-bottom: 48px; } .dmb-sole--md .dmb-s3 { --h: 180px; margin-bottom: 108px; }
.dmb-cap { margin-top: 26px; max-width: 560px; text-align: center; font-style: italic; font-size: 13px; line-height: 1.5; color: var(--mz-muted); }
.dmb-cap b { font: 700 11.5px/1 var(--mz-condensed); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--mz-muted); margin-right: 6px; }

/* ── /danh-muc ── */
.dmb-mh { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; padding: 44px 0 40px; border-bottom: 3px solid var(--mz-red); }
.dmb-mh > * { min-width: 0; }
.dmb-mh__h { font: 900 84px/.95 var(--mz-serif); letter-spacing: -.02em; color: var(--mz-ink); margin-top: 10px; }
.dmb-mh__r .dmb-meta { margin-top: 14px; }

.dmb-lf { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; padding: 56px 0 64px; border-bottom: 1px solid var(--mz-rule-strong); }
.dmb-lf > *, .dmb-ih > * { min-width: 0; }
.dmb-lf__art, .dmb-ih__art { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.dmb-lf__h { font: 900 42px/1.16 var(--mz-serif); letter-spacing: -.01em; color: var(--mz-ink); margin: 14px 0 0; }
.dmb-lf__h a:hover, .dmb-ct__h a:hover { color: var(--mz-red); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.dmb-lf .dmb-meta { margin-top: 14px; }
.dmb-lf .dmb-dek { margin-top: 14px; font-size: 15.5px; }
.dmb-lf .dmb-btn { margin-top: 26px; }
.dmb-mini { margin-top: 22px; border-top: 2px solid var(--mz-ink); }
.dmb-mini li { border-bottom: 1px solid var(--mz-rule); }
.dmb-mini a { display: block; padding: 10px 0; font-size: 14.5px; line-height: 1.45; }
.dmb-mini a:hover { color: var(--mz-red); }

.dmb-sec { margin-top: 64px; }
.dmb-sh { position: relative; padding-top: 14px; border-top: 3px solid var(--mz-red); }
.dmb-sh::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 1px solid var(--mz-red); }
.dmb-sh .dmb-kick { margin-top: 8px; }
.dmb-sh__h { font: 900 32px/1.2 var(--mz-serif); color: var(--mz-ink); margin-top: 4px; }

.dmb-cts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; margin-top: 36px; }
.dmb-ct { display: flex; flex-direction: column; min-width: 0; padding-top: 14px; border-top: 1px solid var(--mz-rule-strong); }
.dmb-ct__h { font: 900 22px/1.3 var(--mz-serif); color: var(--mz-ink); margin-bottom: 6px; }
.dmb-ct .dmb-dek { margin-top: 8px; font-size: 14.5px; }
.dmb-ct__covers { display: flex; align-items: flex-end; gap: 14px; margin-top: 22px; min-height: 150px; }
.dmb-ct__cv { --h: 144px; }
.dmb-ct__covers .dmb-ct__cv:nth-child(2) { --h: 120px; }
.dmb-ct__covers .dmb-ct__cv:nth-child(3) { --h: 132px; }
.dmb-ct__covers .dmb-ct__cv:nth-child(4) { --h: 110px; }
.dmb-ct__kids { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 14px; }
.dmb-ct__kids a { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; font-size: 14.5px; line-height: 1.4; }
.dmb-ct__kids a:hover { color: var(--mz-red); }
.dmb-ct__kids small { font: 700 12.5px/1 var(--mz-condensed); letter-spacing: .04em; color: var(--mz-muted); }
.dmb-empty { margin-top: 56px; padding-top: 14px; border-top: 1px solid var(--mz-rule-strong); }
.dmb-empty__l { display: flex; flex-wrap: wrap; align-items: center; margin-top: 4px; font-weight: 700; font-size: 17px; line-height: 1.7; }
.dmb-empty__l li + li::before { content: "·"; margin: 0 10px; color: var(--mz-muted); font-weight: 400; }
.dmb-empty__l a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--mz-rule-strong); text-underline-offset: 4px; }
.dmb-empty__l a:hover { color: var(--mz-red); }
.dmb-empty__t { font-style: italic; font-size: 14.5px; color: var(--mz-muted); margin-top: 4px; }
.dmb-to { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-top: 48px; font-style: italic; color: var(--mz-muted); }

/* ── /the-loai/{slug} ── */
.dmb-ih { display: grid; grid-template-columns: 6fr 6fr; gap: 56px; align-items: center; padding: 32px 0 44px; border-bottom: 3px solid var(--mz-ink); }
.dmb-ih__h { font: 900 40px/1.14 var(--mz-serif); letter-spacing: -.015em; color: var(--mz-ink); margin: 14px 0 0; }
.dmb-ih .dmb-meta { margin-top: 16px; }
.dmb-ih .dmb-dek { margin-top: 16px; font-size: 15.5px; max-width: 520px; }
.dmb-ih--plain { grid-template-columns: minmax(0, 1fr); }

.dmb-sib { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; margin-top: 28px; border-bottom: 1px solid var(--mz-rule); }
.dmb-sib::-webkit-scrollbar { display: none; }
.dmb-sib__a { display: inline-flex; align-items: center; gap: 6px; min-height: 52px; white-space: nowrap; font-weight: 700; font-size: 15px; color: var(--mz-muted); border-bottom: 3px solid transparent; }
.dmb-sib__a small { font: 700 13px/1 var(--mz-condensed); color: var(--mz-muted); }
.dmb-sib__a:hover { color: var(--mz-red); }
.dmb-sib__a[aria-current] { color: var(--mz-ink); border-bottom-color: var(--mz-red); }

.dmb-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 26px 0 30px; }
.dmb-tools--tabs { align-items: flex-end; margin: 14px 0 30px; border-bottom: 1px solid var(--mz-rule); }
.dmb-tools--tabs .dmb-sib { margin: 0; border-bottom: 0; }
.dmb-sort { display: inline-flex; align-items: center; gap: 12px; margin: 0; }
.dmb-tools--tabs .dmb-sort { padding-bottom: 8px; }
.dmb-sort label { white-space: nowrap; }
.dmb-sel { position: relative; display: inline-flex; align-items: center; }
.dmb-sel select { appearance: none; -webkit-appearance: none; height: 40px; min-width: 150px; box-sizing: border-box; padding: 0 40px 0 12px; border: 1px solid var(--mz-rule-strong); border-radius: 0; background: var(--mz-field); color: var(--mz-ink); font-size: 14px; cursor: pointer; }
.dmb-sel svg { position: absolute; right: 12px; pointer-events: none; color: var(--mz-ink); }

.dmb-gridw { margin-top: 0; }
.dmb-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 52px 32px; }
.dmb-bk { min-width: 0; }
.dmb-bk__a { display: block; }
.dmb-bk__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 18px; font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--mz-ink); }
.dmb-bk__a:hover .dmb-bk__t, .dmb-bk__a:focus-visible .dmb-bk__t { color: var(--mz-red); text-decoration: underline; text-underline-offset: 3px; }
.dmb-bk__au { display: block; margin-top: 6px; font: 700 12px/1.3 var(--mz-condensed); letter-spacing: .08em; text-transform: uppercase; color: var(--mz-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmb-bk__f { display: block; margin-top: 4px; font: 400 12.5px/1.3 var(--mz-condensed); color: var(--mz-muted); }
.dmb-loadmore { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 52px; }
.dmb-loadmore p { font-style: italic; font-size: 14px; line-height: 1.5; color: var(--mz-muted); }

.dmb-state { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: start; max-width: 640px; margin-top: 40px; padding: 22px 0 26px; border-top: 1px solid var(--mz-rule-strong); border-bottom: 1px solid var(--mz-rule); }
.dmb-state .dmb-ico { grid-row: 1 / span 3; width: 40px; height: 40px; color: var(--mz-muted); }
.dmb-state h2 { font: 900 24px/1.3 var(--mz-serif); color: var(--mz-ink); }
.dmb-state p { font-style: italic; color: var(--mz-muted); }
.dmb-state .dmb-btn { justify-self: start; margin-top: 16px; }

.dmb-cotu { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; max-width: 520px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--mz-rule-strong); }
.dmb-cotu + .dmb-cotu { margin-top: 14px; }
.dmb-cotu .dmb-ico { width: 48px; height: 40px; color: var(--mz-red); }
.dmb-cotu b { display: block; font-size: 16px; line-height: 1.4; margin-top: 4px; }
.dmb-cotu i { display: block; font-size: 14px; color: var(--mz-muted); margin-top: 4px; }
.dmb-cotu:hover b { color: var(--mz-red); }

/* ── 900–1199: lưới 4; đầu trang xếp một cột (ba bìa lớn cần ≥ 700 px) ── */
@media (max-width: 1199px) { .dmb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1099px) {
  .dmb-mh { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .dmb-lf, .dmb-ih { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .dmb-ih__art { order: 2; }
  .dmb-cts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 600–899 ── */
@media (max-width: 899px) {
  .dmb-sole--lf { gap: 20px; height: 330px; } .dmb-sole--lf .dmb-s1 { --h: 312px; } .dmb-sole--lf .dmb-s2 { --h: 224px; margin-bottom: 48px; } .dmb-sole--lf .dmb-s3 { --h: 180px; margin-bottom: 108px; }
  .dmb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px; }
}

/* ── điện thoại ── */
@media (max-width: 599px) {
  .book-list-page.dmb-scope { padding-bottom: 72px; }
  .dmb-folio { margin-top: 6px; font-size: 10.5px; letter-spacing: .12em; }
  .dmb-folio span:last-child { display: none; }
  .dmb-mh { padding: 28px 0 28px; }
  .dmb-mh__h { font-size: 52px; }
  .dmb-dek { font-size: 15.5px; }
  .dmb-sole--lf { gap: 10px; height: 236px; } .dmb-sole--lf .dmb-s1 { --h: 222px; } .dmb-sole--lf .dmb-s2 { --h: 156px; margin-bottom: 36px; } .dmb-sole--lf .dmb-s3 { --h: 120px; margin-bottom: 84px; }
  .dmb-sole--md { gap: 10px; height: 206px; } .dmb-sole--md .dmb-s1 { --h: 192px; } .dmb-sole--md .dmb-s2 { --h: 138px; margin-bottom: 28px; } .dmb-sole--md .dmb-s3 { --h: 110px; margin-bottom: 66px; }
  .dmb-lf { gap: 28px; padding: 32px 0 40px; }
  .dmb-lf__h { font-size: 26px; }
  .dmb-sec { margin-top: 48px; }
  .dmb-sh__h { font-size: 24px; }
  .dmb-cts { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .dmb-ct__cv { --h: 112px; }
  .dmb-ct__covers .dmb-ct__cv:nth-child(2) { --h: 94px; }
  .dmb-ct__covers .dmb-ct__cv:nth-child(3) { --h: 104px; }
  .dmb-ct__covers .dmb-ct__cv:nth-child(4) { --h: 86px; }
  .dmb-ct__covers { min-height: 118px; gap: 10px; }
  .dmb-empty__l { font-size: 16px; }
  .dmb-ih { gap: 28px; padding: 24px 0 36px; }
  .dmb-ih__h { font-size: 27px; line-height: 1.2; }
  .dmb-sib { margin-left: calc(-1 * var(--tsh-gutter, 16px)); margin-right: calc(-1 * var(--tsh-gutter, 16px)); padding: 0 var(--tsh-gutter, 16px); gap: 22px; }
  .dmb-tools { flex-wrap: wrap; }
  .dmb-tools--tabs { display: block; border-bottom: 0; }
  .dmb-tools--tabs .dmb-sib { padding: 0; border-bottom: 1px solid var(--mz-rule); }
  .dmb-tools--tabs .dmb-sort { width: 100%; justify-content: space-between; padding: 14px 0 0; }
  .dmb-sel select { min-width: 0; }
  .dmb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
  .dmb-bk__t { font-size: 14px; margin-top: 14px; }
  .dmb-loadmore .dmb-btn { width: 100%; }
  .dmb-cotu { grid-template-columns: auto minmax(0, 1fr); }
  .dmb-cotu .dmb-ico { width: 40px; height: 34px; }
}