/* =====================================================================
   Hệ tủ sách công khai · HƯỚNG B «Chuyên đề tạp chí» (D-275, chọn từ D-216)
   Dùng cho /tu-sach, /tu-sach/{slug} và các trang cùng hướng (/danh-muc, /the-loai nạp lại file này).
   Bản mẫu chuẩn: he-thong-nhan-dien/_luu-tru/huong-tu-sach/b/ (cong-cu/huong-b.css).
   Màu chỉ từ token có sẵn (public_magazine.css, mz_theme.css): sáng, tối (nền than), Quốc tang tự theo; không hex mới.
   Hiệu ứng duy nhất: bóng bìa theo --book-cover-depth-* (styles.css, D-215; Owner cho phép ở trang tủ sách, D-261).
   Ngoài bìa: không bóng, không gradient nền, không khung, không dải son tràn lề.
   Tiền tố tsb-; đặt dưới .tsb-scope. Điểm ngắt: điện thoại ≤ 699 · 700–1199 · ≥ 1200.
   ===================================================================== */

/* Chữ kim đọc được: trên nền giấy trộn --mz-gold vào mực (≥ 4.5:1); tối dùng vàng sáng; Quốc tang dùng chữ phụ. */
.tsb-scope { --tsb-kim: color-mix(in srgb, var(--mz-gold) 62%, var(--mz-ink)); font-family: var(--mz-serif); color: var(--mz-ink); font-size: 16px; line-height: 1.6; }
html[data-mz-theme="dark"] .tsb-scope { --tsb-kim: var(--mzd-gold-bright, var(--mz-gold)); }
body.theme-quoc-tang .tsb-scope, html[data-mz-theme="dark"] body.theme-quoc-tang .tsb-scope { --tsb-kim: var(--mz-muted); }

.tsb-scope, .tsb-scope *, .tsb-scope *::before, .tsb-scope *::after { box-sizing: border-box; }
:where(.tsb-scope) a { color: inherit; text-decoration: none; }
.tsb-scope :focus-visible { outline: 2px solid var(--mz-focus); outline-offset: 3px; }
:where(.tsb-scope) :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.tsb-scope) :is(p, h1, h2, h3) { margin: 0; }
:where(.tsb-scope) :is(h1, h2, h3) { font-family: var(--mz-serif); font-weight: 900; text-transform: none; letter-spacing: normal; }
:where(.tsb-scope) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; border-radius: 0; }
.tsb-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.book-list-page.tsb-page { padding-bottom: 96px; }
.tsb-emb { display: inline-block; flex: none; fill: currentColor; color: var(--mz-red); }
.tsb-arr { margin-left: 8px; vertical-align: -2px; }

/* ── chữ dùng chung ── */
.tsb-scope .tsb-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); }
.tsb-scope .tsb-kick--soft, .tsb-scope .tsb-kick__soft { color: var(--mz-muted); }
.tsb-kick__sep { color: var(--mz-rule-strong); }
.tsb-kick .tsb-kick__e { margin-right: 4px; transform: translateY(var(--tsb-emb-dy, 0%)); }
/* Tâm hình ký hiệu = tâm chữ hoa của nhãn: khung đã canh giữa dòng, nên dời nốt phần tâm hình lệch khỏi tâm khung (% chiều cao khung, âm = lên; đo trên khung 48×40 của _tsb.html). */
.tsb-emb--k-ho-chi-minh { --tsb-emb-dy: -8%; }
.tsb-emb--k-lanh-dao { --tsb-emb-dy: 0%; }
.tsb-emb--k-xay-dung-dang { --tsb-emb-dy: -3.7%; }
.tsb-emb--k-chi-bo { --tsb-emb-dy: -11.6%; }
.tsb-emb--k-bao-ve-nen-tang { --tsb-emb-dy: -0.9%; }
.tsb-emb--k-lich-su-dia-chi { --tsb-emb-dy: -2.8%; }
.tsb-emb--k-doi-ngoai { --tsb-emb-dy: -3.7%; }
.tsb-emb--k-tieng-nuoc-ngoai { --tsb-emb-dy: -10%; }
.tsb-emb--k-phap-luat { --tsb-emb-dy: -4%; }
.tsb-emb--k-kinh-te { --tsb-emb-dy: -1.4%; }
.tsb-emb--k-van-hoa { --tsb-emb-dy: -0.9%; }
.tsb-emb--k-co-so { --tsb-emb-dy: -1.7%; }
.tsb-emb--k-mac-dinh { --tsb-emb-dy: -11.4%; }
.tsb-scope .tsb-meta { font: 700 12.5px/18px var(--mz-condensed); letter-spacing: .12em; text-transform: uppercase; color: var(--mz-muted); }
.tsb-scope .tsb-dek { font-style: italic; font-size: 17px; line-height: 1.65; color: var(--mz-muted); }
.tsb-scope .tsb-dek--l { font-size: 19px; }
.tsb-scope .tsb-dek--s { font-size: 15px; }
.tsb-num { font-family: var(--mz-serif); font-weight: 900; color: var(--tsb-kim); font-variant-numeric: lining-nums; letter-spacing: -.02em; line-height: .8; }
.tsb-scope .tsb-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); }
.tsb-scope .tsb-lnk:hover { text-decoration: underline; text-underline-offset: 5px; }
.tsb-scope .tsb-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 1px solid var(--mz-red); color: var(--mz-red); font: 700 13px/1 var(--mz-condensed); letter-spacing: .12em; text-transform: uppercase; }
.tsb-scope .tsb-btn:hover { background: var(--mz-red-fill); border-color: var(--mz-red-fill); color: var(--mz-on-red); }

/* ── bản in: số báo ── */
.tsb-scope .tsb-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); }

/* đầu trang mục lục: tên trang lớn trái, lời dẫn phải */
.tsb-scope .tsb-mh { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; padding: 44px 0 40px; border-bottom: 3px solid var(--mz-red); }
.tsb-scope .tsb-mh__h { font-weight: 900; font-size: 84px; line-height: .95; letter-spacing: -.02em; color: var(--mz-ink); margin-top: 10px; }
.tsb-mh__r .tsb-meta { margin-top: 14px; }

/* ── bìa: khung 2:3, ảnh không cắt, căn đáy, góc vuông, bóng D-215 ── */
.tsb-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); }
.tsb-cv--fluid { width: 100%; height: auto; }
.tsb-cv__b { position: relative; display: block; line-height: 0; box-shadow: var(--book-cover-depth-body-shadow); border-radius: 0; }
.tsb-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(--mz-cover-placeholder); }
.tsb-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; }
.tsb-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 .tsb-cv img { filter: grayscale(1); }
@media (hover: hover) { body.theme-quoc-tang a:hover .tsb-cv img, body.theme-quoc-tang a:focus-visible .tsb-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 */
.tsb-cv--cho .tsb-cho { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; padding: 12% 10%; background: var(--mz-cover-placeholder); text-align: center; }
.tsb-cho__e { width: 44%; height: auto; color: var(--mz-muted); }
.tsb-cho__k { font: 700 clamp(9px, 4.6cqw, 11.5px)/1.2 var(--mz-condensed); letter-spacing: .14em; text-transform: uppercase; color: var(--tsb-kim); margin-bottom: 6%; }
.tsb-cho__t { font: 700 clamp(11px, 7cqw, 17px)/1.3 var(--mz-serif); color: var(--mz-ink); }
.tsb-cho__s { font: 700 clamp(9px, 4.6cqw, 11.5px)/1.2 var(--mz-condensed); letter-spacing: .14em; 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) ── */
.tsb-sole { display: flex; align-items: flex-end; justify-content: center; max-width: 100%; }
.tsb-sole--lg  { gap: 22px; height: 440px; } .tsb-sole--lg .s1 { --h: 410px; } .tsb-sole--lg .s2 { --h: 296px; margin-bottom: 66px; } .tsb-sole--lg .s3 { --h: 236px; margin-bottom: 146px; }
.tsb-sole--lf  { gap: 24px; height: 430px; } .tsb-sole--lf .s1 { --h: 400px; } .tsb-sole--lf .s2 { --h: 292px; margin-bottom: 62px; } .tsb-sole--lf .s3 { --h: 232px; margin-bottom: 140px; }
.tsb-sole--md  { gap: 20px; height: 330px; } .tsb-sole--md .s1 { --h: 312px; } .tsb-sole--md .s2 { --h: 224px; margin-bottom: 48px; } .tsb-sole--md .s3 { --h: 180px; margin-bottom: 108px; }
.tsb-sole--sm  { gap: 14px; height: 230px; } .tsb-sole--sm .s1 { --h: 214px; } .tsb-sole--sm .s2 { --h: 156px; margin-bottom: 32px; } .tsb-sole--sm .s3 { --h: 124px; margin-bottom: 74px; }
.tsb-sole--xs  { gap: 6px; height: 104px; } .tsb-sole--xs .s1 { --h: 98px; } .tsb-sole--xs .s2 { --h: 72px; margin-bottom: 14px; } .tsb-sole--xs .s3 { --h: 58px; margin-bottom: 34px; }

/* ── bài mở đầu (tủ tiêu điểm) ── */
.tsb-scope .tsb-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); }
.tsb-lf__art, .tsb-ih__art { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.tsb-lf > *, .tsb-ih > *, .tsb-next > * { min-width: 0; }
.tsb-scope .tsb-cap { margin-top: 26px; max-width: 560px; text-align: center; font-style: italic; font-size: 13px; line-height: 1.5; color: var(--mz-muted); }
.tsb-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; }
.tsb-scope .tsb-lf__h { font-weight: 900; font-size: 38px; line-height: 1.16; letter-spacing: -.01em; color: var(--mz-ink); margin: 14px 0 16px; }
.tsb-lf__h a:hover, .tsb-tl__h a:hover, .tsb-ed__h a:hover { color: var(--mz-red); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tsb-lf .tsb-meta { margin-top: 14px; }
.tsb-scope .tsb-lf .tsb-btn { margin-top: 26px; }
.tsb-scope .tsb-lf--c { grid-template-columns: auto minmax(0, 1fr); gap: 44px; padding: 8px 0 0; border: 0; }
.tsb-scope .tsb-lf--c .tsb-lf__h { font-size: 28px; }
.tsb-scope .tsb-lf--c .tsb-dek { font-size: 15.5px; }

/* mục lục nhỏ "Trong tủ này": số · tên · chấm dẫn · số cuốn */
.tsb-scope .tsb-toc-cap { margin-top: 26px; padding-bottom: 6px; border-bottom: 2px solid var(--mz-ink); font: 700 12px/16px var(--mz-condensed); letter-spacing: .16em; text-transform: uppercase; color: var(--mz-ink); }
.tsb-toc li { border-bottom: 1px solid var(--mz-rule); }
.tsb-toc__a { display: flex; align-items: baseline; gap: 10px; min-height: 46px; padding: 12px 0 10px; }
.tsb-toc__n { flex: 0 0 22px; font: 700 12.5px/1 var(--mz-condensed); letter-spacing: .06em; color: var(--tsb-kim); }
.tsb-toc__t { font-weight: 700; font-size: 15.5px; line-height: 1.4; }
.tsb-toc--sub .tsb-toc__t { font-weight: 400; font-style: italic; font-size: 14.5px; }
.tsb-toc--sub .tsb-toc__n { flex-basis: 38px; }
.tsb-toc__d { flex: 1 1 24px; min-width: 24px; border-bottom: 1px dotted var(--mz-rule-strong); transform: translateY(-4px); }
.tsb-toc__c { font: 700 13px/1 var(--mz-condensed); color: var(--mz-muted); }
.tsb-toc__a:hover .tsb-toc__t { color: var(--mz-red); }

/* ── mục và lưới các tủ khác: kẻ son 3 + kẻ 1 ── */
.tsb-scope .tsb-sec { margin-top: 64px; }
.tsb-sh { display: grid; grid-template-columns: 1fr auto; align-items: end; padding-top: 14px; border-top: 3px solid var(--mz-red); position: relative; }
.tsb-sh::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 1px solid var(--mz-red); }
.tsb-sh .tsb-kick { grid-column: 1; margin-top: 8px; }
.tsb-scope .tsb-sh__h { grid-column: 1; font-weight: 900; font-size: 32px; line-height: 1.2; color: var(--mz-ink); margin-top: 4px; }
.tsb-sh__r { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.tsb-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 32px; margin-top: 36px; }
.tsb-tl { display: flex; flex-direction: column; padding-top: 14px; border-top: 1px solid var(--mz-rule-strong); }
.tsb-tl__top { display: flex; justify-content: space-between; align-items: flex-end; min-height: 52px; }
.tsb-tl__no { font-size: 52px; }
.tsb-tl--empty .tsb-tl__e { color: var(--mz-muted); }
.tsb-tl__kick { margin-top: 14px; }
.tsb-scope .tsb-tl__h { font-weight: 900; font-size: 19px; line-height: 1.35; color: var(--mz-ink); margin-top: 6px; }
.tsb-scope .tsb-tl__lead { font-style: italic; font-size: 14.5px; line-height: 1.6; color: var(--mz-muted); margin-top: 10px; }
.tsb-scope .tsb-tl__k { font-size: 13.5px; line-height: 1.55; margin-top: 10px; color: var(--mz-ink); }
.tsb-tl__k a { text-decoration: underline; text-decoration-color: var(--mz-rule-strong); text-underline-offset: 3px; }
.tsb-tl__kl { font: 700 11.5px/1 var(--mz-condensed); letter-spacing: .14em; text-transform: uppercase; color: var(--mz-muted); margin-right: 4px; }
.tsb-tl__m { margin-top: auto; padding-top: 14px; }
.tsb-tl--dm { border-top: 3px solid var(--mz-ink); }
.tsb-scope .tsb-tl--dm .tsb-tl__h { margin-top: 30px; font-size: 21px; }
.tsb-tl--dm .tsb-lnk { margin-top: auto; }

/* ── đầu trang tủ: «bìa chuyên đề» ── */
.tsb-scope .tsb-ih { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; padding: 48px 0 56px; border-bottom: 3px solid var(--mz-red); }
.tsb-scope .tsb-ih__h { font-weight: 900; font-size: 46px; line-height: 1.14; letter-spacing: -.015em; color: var(--mz-ink); margin: 14px 0 18px; }
.tsb-ih .tsb-meta { margin-top: 16px; }
.tsb-scope .tsb-ih--md { grid-template-columns: 6fr 6fr; padding: 32px 0 44px; }
.tsb-scope .tsb-ih--md .tsb-ih__h { font-size: 40px; }

/* ── ngăn = chuyên mục ── */
.tsb-scope .tsb-dept { margin-top: 64px; }
.tsb-dp { display: grid; grid-template-columns: 112px 1fr auto; gap: 32px; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--mz-rule-strong); }
.tsb-dp__no { display: flex; flex-direction: column; gap: 10px; }
.tsb-dp__num { font-size: 92px; }
.tsb-scope .tsb-dp__h { font-weight: 900; font-size: 34px; line-height: 1.18; color: var(--mz-ink); margin-bottom: 10px; }
.tsb-dp__h a:hover { color: var(--mz-red); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tsb-dp__r { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.tsb-dp__sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 12px; padding: 10px 0 0; border-top: 1px solid var(--mz-rule); }
.tsb-dp__sub + .tsb-dp__sub { margin-top: 0; }
.tsb-dp__subt { font-weight: 700; font-size: 15.5px; line-height: 1.4; }
.tsb-dp__subc { font: 700 12.5px/1 var(--mz-condensed); letter-spacing: .12em; text-transform: uppercase; color: var(--mz-red); display: inline-flex; align-items: center; }
.tsb-dp__sub:hover .tsb-dp__subt { color: var(--mz-red); }

/* hàng bìa cuộn ngang */
.tsb-rowwrap { position: relative; margin-top: 32px; }
.tsb-rowctl { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 4px; }
.tsb-rowctl[hidden] { display: none; }
.tsb-sq { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--mz-rule-strong); color: var(--mz-ink); }
.tsb-sq:disabled { color: var(--mz-rule-strong); border-color: var(--mz-rule); cursor: default; }
.tsb-row { --h: 250px; display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 2px 10px; }
.tsb-row--s { --h: 200px; }
.tsb-row::-webkit-scrollbar { display: none; }
.tsb-row .tsb-bk { flex: 0 0 auto; width: calc(var(--h) * 2 / 3); scroll-snap-align: start; }
.tsb-bk__a { display: block; }
.tsb-bk .tsb-cv { --h: inherit; }
.tsb-row .tsb-bk .tsb-cv { height: var(--h); width: calc(var(--h) * 2 / 3); }
.tsb-scope .tsb-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); }
.tsb-bk__a:hover .tsb-bk__t { color: var(--mz-red); text-decoration: underline; text-underline-offset: 3px; }
.tsb-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; }
.tsb-bk__f { display: block; margin-top: 4px; font: 400 12.5px/1.3 var(--mz-condensed); color: var(--mz-muted); }
.tsb-bk[hidden] { display: none; }

/* ngăn trống: gom lại thành một hàng các «chuyên mục sắp có» */
.tsb-eds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 72px; }
.tsb-ed { padding-top: 14px; border-top: 1px solid var(--mz-rule-strong); display: grid; grid-template-columns: 1fr; }
.tsb-ed__top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; }
.tsb-ed__num { font-size: 64px; color: var(--mz-rule-strong); }
.tsb-ed__e { color: var(--mz-muted); }
.tsb-scope .tsb-ed__h { font-weight: 900; font-size: 24px; line-height: 1.3; color: var(--mz-ink); margin: 6px 0 10px; }
.tsb-scope .tsb-ed__t { font-style: italic; font-size: 15px; color: var(--mz-muted); margin-top: 4px; }

/* thanh ngăn cùng cấp (trang ngăn) */
.tsb-sib { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--mz-rule); }
.tsb-sib::-webkit-scrollbar { display: none; }
.tsb-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; }
.tsb-sib__a span { font: 700 13px/1 var(--mz-condensed); color: var(--mz-muted); }
.tsb-sib__a:hover { color: var(--mz-red); }
.tsb-scope .tsb-sib__a.is-on { color: var(--mz-ink); border-bottom-color: var(--mz-red); }
.tsb-scope .tsb-sib__a--back { font: 700 12px/1 var(--mz-condensed); letter-spacing: .12em; text-transform: uppercase; color: var(--mz-red); }

/* công cụ + lưới đủ sách */
.tsb-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 26px 0 30px; }
.tsb-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 52px 32px; }
.tsb-loadmore { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 48px; }
.tsb-loadmore p { font: 400 13px/1.4 var(--mz-condensed); color: var(--mz-muted); }
.tsb-loadmore .dm-loadmore__err { color: var(--mz-red); }
.tsb-btn[hidden] { display: none; }
.tsb-scope .tsb-btn[aria-busy="true"] { opacity: .6; cursor: progress; }

/* khối trạng thái */
.tsb-st { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 56px 16px; border-bottom: 1px solid var(--mz-rule); }
.tsb-st__i { color: var(--mz-muted); }
.tsb-scope .tsb-st__h { font-weight: 900; font-size: 24px; color: var(--mz-ink); }
.tsb-scope .tsb-st__t { max-width: 560px; font-style: italic; color: var(--mz-muted); }
.tsb-scope .tsb-st--row { grid-template-columns: auto 1fr auto; justify-items: start; text-align: left; gap: 24px; align-items: center; padding: 40px 0; margin-top: 56px; border-top: 1px solid var(--mz-rule); }
.tsb-st--row .tsb-st__t { margin-top: 6px; }
.tsb-scope .tsb-after { margin-top: 32px; }
.tsb-next { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; margin-top: 36px; }
.tsb-next__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }

/* Trang tủ: chỗ cho page_banner và hỏi đáp giữ nguyên khoảng cách */
.tsb-page .public-banner-shell, .tsb-page .page-banner { margin-top: 28px; }
.tsb-page #brs { margin-top: 56px; }

/* ── 1024 ── */
@media (max-width: 1199px) {
  .tsb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tsb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tsb-scope .tsb-lf, .tsb-scope .tsb-ih { gap: 40px; }
  /* cột bìa chỉ rộng ~540px: bìa lớn dùng cỡ vừa để không tràn ngang */
  .tsb-sole--lg, .tsb-sole--lf { gap: 20px; height: 330px; } .tsb-sole--lg .s1, .tsb-sole--lf .s1 { --h: 312px; } .tsb-sole--lg .s2, .tsb-sole--lf .s2 { --h: 224px; margin-bottom: 48px; } .tsb-sole--lg .s3, .tsb-sole--lf .s3 { --h: 180px; margin-bottom: 108px; }
}
/* máy tính bảng: một cột, bìa chuyên đề đặt dưới chữ */
@media (min-width: 700px) and (max-width: 1023px) {
  .tsb-scope .tsb-lf, .tsb-scope .tsb-ih, .tsb-scope .tsb-ih--md { grid-template-columns: 1fr; gap: 36px; }
  .tsb-ih__art { order: 2; }
  .tsb-scope .tsb-mh { grid-template-columns: 1fr; gap: 16px; }
  .tsb-scope .tsb-lf--c { grid-template-columns: 1fr; }
  .tsb-next__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── điện thoại ── */
@media (max-width: 699px) {
  .tsb-scope .site-breadcrumb { display: none; }
  .tsb-scope .tsh-crumb--m { display: block; }
  .book-list-page.tsb-page { padding-bottom: 72px; }
  .tsb-scope .tsb-folio { margin-top: 6px; font-size: 10.5px; letter-spacing: .12em; }
  .tsb-folio span:last-child { display: none; }
  .tsb-scope .tsb-mh { grid-template-columns: 1fr; gap: 14px; padding: 28px 0 28px; }
  .tsb-scope .tsb-mh__h { font-size: 52px; }
  .tsb-scope .tsb-dek { font-size: 15.5px; }
  .tsb-scope .tsb-dek--l { font-size: 16.5px; }
  .tsb-sole--lg, .tsb-sole--lf { gap: 10px; height: 236px; } .tsb-sole--lg .s1, .tsb-sole--lf .s1 { --h: 222px; } .tsb-sole--lg .s2, .tsb-sole--lf .s2 { --h: 156px; margin-bottom: 36px; } .tsb-sole--lg .s3, .tsb-sole--lf .s3 { --h: 120px; margin-bottom: 84px; }
  .tsb-sole--md { gap: 10px; height: 206px; } .tsb-sole--md .s1 { --h: 192px; } .tsb-sole--md .s2 { --h: 138px; margin-bottom: 28px; } .tsb-sole--md .s3 { --h: 110px; margin-bottom: 66px; }
  .tsb-scope .tsb-lf, .tsb-scope .tsb-lf--c, .tsb-next .tsb-lf--c { grid-template-columns: 1fr; gap: 28px; padding: 32px 0 40px; }
  .tsb-scope .tsb-lf__h, .tsb-scope .tsb-lf--c .tsb-lf__h { font-size: 26px; }
  .tsb-scope .tsb-sec { margin-top: 48px; }
  .tsb-scope .tsb-sh__h { font-size: 24px; }
  .tsb-sh__r { grid-column: 1; grid-row: auto; margin-top: 4px; }
  .tsb-tiles { grid-template-columns: 1fr; gap: 0; margin-top: 20px; }
  .tsb-tl { display: grid; grid-template-columns: 52px 1fr 36px; column-gap: 12px; padding: 16px 0 18px; border-top: 1px solid var(--mz-rule); }
  .tsb-tl__top { display: contents; }
  .tsb-tl__no { grid-column: 1; grid-row: 1 / span 4; font-size: 34px; padding-top: 4px; }
  .tsb-tl__e { grid-column: 3; grid-row: 1; width: 36px; height: 30px; }
  .tsb-tl__kick { grid-column: 2; grid-row: 1; margin-top: 0; }
  .tsb-scope .tsb-tl__h { grid-column: 2; font-size: 17px; }
  .tsb-scope .tsb-tl__lead { display: none; }
  .tsb-scope .tsb-tl__k { grid-column: 2; font-size: 13px; }
  .tsb-tl__m { grid-column: 2; padding-top: 8px; }
  .tsb-tl--dm { display: block; border-top: 3px solid var(--mz-ink); margin-top: 18px; padding-top: 16px; }
  .tsb-scope .tsb-tl--dm .tsb-tl__h { margin-top: 10px; }
  .tsb-scope .tsb-tl--dm .tsb-tl__lead { display: block; }
  .tsb-scope .tsb-ih, .tsb-scope .tsb-ih--md { grid-template-columns: 1fr; gap: 28px; padding: 24px 0 36px; }
  .tsb-ih__art { order: 2; }
  .tsb-scope .tsb-ih__h, .tsb-scope .tsb-ih--md .tsb-ih__h { font-size: 27px; line-height: 1.2; }
  .tsb-scope .tsb-dept { margin-top: 44px; }
  .tsb-dp { grid-template-columns: 64px 1fr; gap: 6px 16px; align-items: start; }
  .tsb-dp__num { font-size: 52px; }
  .tsb-dp__no { gap: 6px; }
  .tsb-scope .tsb-dp__h { font-size: 22px; }
  .tsb-dp__r { grid-column: 1 / -1; align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; }
  .tsb-dp__r .tsb-meta { align-self: center; }
  .tsb-rowwrap { margin: 20px -16px 0; }
  .tsb-rowctl { display: none; }
  .tsb-row { padding: 6px 16px 10px; scroll-padding: 0 16px; gap: 16px; }
  .tsb-row, .tsb-row--s { --h: 168px; }
  .tsb-scope .tsb-bk__t { font-size: 14px; margin-top: 14px; }
  .tsb-eds { grid-template-columns: 1fr; gap: 0; margin-top: 44px; }
  .tsb-ed { grid-template-columns: 52px 1fr; column-gap: 12px; padding: 16px 0 20px; }
  .tsb-ed__top { grid-column: 1; grid-row: 1 / span 4; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; }
  .tsb-ed__num { font-size: 38px; }
  .tsb-ed__e { width: 32px; height: 27px; }
  .tsb-ed > :not(.tsb-ed__top) { grid-column: 2; }
  .tsb-scope .tsb-ed__h { font-size: 19px; margin-top: 2px; }
  .tsb-sib { margin: 0 -16px; padding: 0 16px; }
  .tsb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
  .tsb-tools { flex-wrap: wrap; }
  .tsb-scope .tsb-st--row { grid-template-columns: 1fr; justify-items: start; gap: 12px; }
  .tsb-next { grid-template-columns: 1fr; gap: 24px; }
  .tsb-next__side { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .tsb-row { scroll-behavior: auto; } }