/* Tủ sách của bạn đọc (SHELF-1; DAC-TA-WEB §6.3.3 K11, §6.3.4 K12, §7.4.2). Màu chỉ qua --mz-* (public_magazine.css,
 * tối/quốc tang ở mz_theme.css). Kiểu sách in: kẻ mảnh, góc vuông, không bóng, không gradient. */

/* ---- Chung ---- */
.mzp-cover {
  position: relative;
  /* Lưới một ô minmax(0,1fr): max-height 100 % của ảnh tính được ở cả WebKit (flex thì không). */
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  align-items: end;
  justify-items: center;
  aspect-ratio: 2 / 3;
  background: transparent;
  text-decoration: none;
}
.mzp-cover--empty { background: var(--mz-cover-placeholder); }
/* Trong lưới hàng (bìa + chữ), ô bìa giữ 2:3, không giãn theo chiều cao hàng (WebKit). */
.mzp-row > .mzp-cover, .mzp-cont > li > .mzp-cover { align-self: start; }
/* Bề rộng ô cố định để chiều cao 2:3 xác định (WebKit mới tính max-height 100 % của ảnh). */
.mzp-row > .mzp-cover { width: 64px; }
.mzp-cont > li > .mzp-cover { width: 84px; }
@media (max-width: 599px) { .mzp-cont > li > .mzp-cover { width: 64px; } }
.mzp-cover img {
  display: block;
  border-radius: 0;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  min-height: 0;
  outline: 1px solid var(--mz-rule);
  outline-offset: -1px;
}
/* Dấu sách nói (DAC-TA §4.3): ô ink-strong, biểu tượng page, góc dưới phải ảnh bìa. */
.mzp-audio {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: var(--mz-ink);
  color: var(--mz-paper);
}
.mzp-label {
  margin: 0;
  color: var(--mz-muted);
  font: 700 11px/14px var(--mz-condensed);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mzp-label--on { color: var(--mz-red); }
.mzp-title { margin: 0; font: 700 16px/22px var(--mz-serif); color: var(--mz-ink); }
.mzp-title a { color: inherit; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mzp-title a:hover, .mzp-title a:focus-visible { color: var(--mz-red); }
.mzp-author { margin: 0; color: var(--mz-red); font: 700 12px/16px var(--mz-condensed); letter-spacing: 0.08em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mzp-pos { display: flex; justify-content: space-between; gap: 8px; margin: 0; color: var(--mz-muted); font: 400 13px/18px var(--mz-condensed); font-variant-numeric: tabular-nums; }
.mzp-bar { position: relative; height: 3px; background: var(--mz-rule); overflow: hidden; }
.mzp-bar > i { position: absolute; inset: 0 auto 0 0; background: var(--mz-red-fill, var(--mz-red)); }
.mzp-go { min-height: 36px; color: var(--mz-red); font-size: 13px; gap: 0; }
.mzp-go .mz-pick-arrow { margin-left: 6px; }
.mzp-expired { display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: 36px; color: var(--mz-muted); font: 700 12.5px/16px var(--mz-condensed); letter-spacing: 0.12em; text-transform: uppercase; }
.mzp-count { margin: 6px 0 0; color: var(--mz-muted); font: italic 400 14px/20px var(--mz-serif); }

/* Khung xương khi tải (nền rule, không chuyển động khi bật Giảm chuyển động). */
.mzp-sk { display: block; background: var(--mz-rule); opacity: 0.5; }
.mzp-sk--cover { aspect-ratio: 2 / 3; }
.mzp-sk--line { height: 12px; margin-top: 10px; }
.mzp-sk--short { width: 60%; }
@media (prefers-reduced-motion: no-preference) {
  .mzp-sk { animation: mzp-pulse 1.4s ease-in-out infinite; }
  @keyframes mzp-pulse { 50% { opacity: 0.25; } }
}

/* ---- K11 Đọc tiếp: 3 thẻ/hàng, kẻ son 3 trên; điện thoại cuộn ngang 86 %. ---- */
.mzp-cont, .mzp-mine { list-style: none; margin: 0; padding: 0; }
.mzp-cont { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
.mzp-cont > li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: start; padding-top: 16px; border-top: 3px solid var(--mz-red); }
.mzp-cont.mzp-skeleton > li { display: block; }
.mzp-cont.mzp-skeleton .mzp-sk--cover { width: 84px; }
.mzp-cont__text { display: grid; gap: 6px; min-width: 0; }
.mzp-cont__text .mzp-bar { margin-top: 2px; }

/* ---- K12 Tủ sách của tôi: 8 cột khe 22; điện thoại cuộn ngang bìa 96. ---- */
.mzp-mine { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 22px; }
.mzp-mine__item { display: grid; gap: 8px; align-content: start; min-width: 0; }
.mzp-mine__title { margin: 0; font: 700 13.5px/18px var(--mz-serif); color: var(--mz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mzp-mine__title a { color: inherit; text-decoration: none; }
.mzp-mine__title a:hover, .mzp-mine__title a:focus-visible { color: var(--mz-red); }

@media (max-width: 1023px) {
  .mzp-cont { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mzp-mine { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .mzp-cont, .mzp-mine {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    padding-bottom: 8px;
  }
  .mzp-cont > li { flex: 0 0 86%; grid-template-columns: 64px minmax(0, 1fr); scroll-snap-align: start; }
  .mzp-cont.mzp-skeleton .mzp-sk--cover { width: 64px; }
  .mzp-mine > li { flex: 0 0 96px; scroll-snap-align: start; }
}

/* ---- /account/reading (§7.4.2) ---- */
.mzp-shelf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
/* Tab (§5.5): khe 28, kẻ đáy rule; mục 44, chữ hẹp 14 IN HOA muted; đang chọn son + gạch 3. */
.mzp-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--mz-rule); overflow-x: auto; scrollbar-width: none; }
html body .mzp-tabs .mzp-tab {
  display: inline-flex; align-items: center; gap: 8px; flex: none; width: auto; min-height: 44px; margin: 0 0 -1px; padding: 0;
  border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--mz-muted); font: 700 14px/1 var(--mz-condensed); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
html body .mzp-tabs .mzp-tab[aria-selected="true"] { color: var(--mz-red); border-bottom-color: var(--mz-red); }
html body .mzp-tabs .mzp-tab:hover { color: var(--mz-ink); }
.mzp-tab__n { color: var(--mz-muted); font: 400 13px/1 var(--mz-condensed); letter-spacing: 0; }
.mzp-tab[aria-selected="true"] .mzp-tab__n { color: var(--mz-muted); }
.mzp-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.mzp-tools[hidden] { display: none; }
/* Hàng tủ (§7.4.8 G): mỗi tủ là nút cao ≥ 44, Merriweather 15; đang xem 700 + gạch chân son 2 cách 7. */
.mzp-tools { padding-bottom: 8px; border-bottom: 1px solid var(--mz-rule); }
.mzp-tools { flex-wrap: nowrap; align-items: flex-start; }
.mzp-shelfbar { display: flex; flex: 1 1 auto; align-items: flex-start; gap: 0 26px; min-width: 0; }
/* Vùng cuộn ngang của hàng tủ: không thanh cuộn; mở "Xem cả N tủ" thì xuống nhiều dòng tại chỗ. */
.mzp-shelves {
  position: relative; display: flex; flex: 0 1 auto; flex-wrap: nowrap; align-items: center; gap: 0 26px; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: 8px;
}
.mzp-shelves::-webkit-scrollbar { display: none; }
.mzp-shelves > * { flex: 0 0 auto; }
.mzp-shelves.is-all { flex-wrap: wrap; overflow: visible; }
.mzp-shelfbar > [data-create] { flex: none; }
/* Vòng tiêu điểm vẽ vào trong nút để không bị vùng cuộn cắt. */
html body .mzp-shelves .mzp-shelf-pill:focus-visible, html body .mzp-shelves .mzp-tl:focus-visible { outline: 2px solid var(--mz-focus); outline-offset: -2px; }
.mzp-tools > .mzp-sort { flex: none; align-self: flex-start; min-height: 44px; margin-left: auto; }
html body .mzp-shelves .mzp-shelf-pill {
  display: inline-flex; align-items: center; width: auto; min-height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--mz-ink);
  font: 400 15px/22px var(--mz-serif); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer;
}
html body .mzp-shelves .mzp-shelf-pill:hover { color: var(--mz-red); background: transparent; }
html body .mzp-shelves .mzp-shelf-pill[aria-current="true"] {
  font-weight: 700; color: var(--mzs-strong, var(--mz-ink));
  text-decoration: underline; text-decoration-color: var(--mz-red); text-decoration-thickness: 2px; text-underline-offset: 7px;
}
.mzp-shelf-pill .mzp-tab__n { margin-left: 2px; font-size: 13px; text-decoration: none; }
html body .mzp-shelves .mzp-tl { min-height: 44px; font-size: 12.5px; letter-spacing: 0.1em; }
.mzp-tl--more[aria-expanded="true"] .mzs-i { transform: rotate(180deg); }
/* Tạo tủ trên trang: hàng ngay dưới hàng tủ, rộng tối đa 620. */
.mzp-cr { max-width: 620px; padding-bottom: 14px; border-bottom: 1px solid var(--mz-rule); }
.mzp-cr[hidden], .mzp-sh[hidden] { display: none; }
.mzp-cr .mzs-nfr, .mzp-rn .mzs-nfr { flex-wrap: wrap; }
/* Đầu tủ: tên Merriweather 900 22 · "3 cuốn · cập nhật …" nghiêng 13 muted · "Đổi tên tủ" · "Xoá tủ". */
.mzp-sh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-width: 0; }
html body .mzp-sh .mzp-sh__name { margin: 0; color: var(--mzs-strong, var(--mz-ink)); font: 900 22px/28px var(--mz-serif); letter-spacing: 0; overflow-wrap: anywhere; }
.mzp-sh__name:focus { outline: none; }
.mzp-sh__name:focus-visible { outline: 2px solid var(--mz-focus); outline-offset: 3px; }
.mzp-sh__meta { color: var(--mz-muted); font: italic 400 13px/18px var(--mz-serif); }
.mzp-sh__acts { display: flex; flex-wrap: wrap; gap: 0 18px; margin-left: auto; }
.mzp-sh .mzp-rn { flex: 1 1 100%; max-width: 620px; }
.mzp-sort { display: inline-flex; align-items: center; gap: 10px; }
.mzp-sort__label { color: var(--mz-muted); font: 700 12.5px/1 var(--mz-condensed); letter-spacing: 0.12em; text-transform: uppercase; }
html body .mzp-sort .mzp-sort__select {
  width: auto; min-height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--mz-rule-strong); border-radius: 0; box-shadow: none;
  background-color: var(--mz-field, var(--mz-paper)); color: var(--mz-ink); font: 400 14px/20px var(--mz-serif);
}
.mzp-panel { min-width: 0; }
.mzp-panel:focus { outline: none; }
.mzp-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 24px; }
/* Đang đọc: lưới 2 cột hàng; 390: một cột. */
.mzp-grid--dang-doc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.mzp-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--mz-rule); }
.mzp-row__text { display: grid; gap: 6px; min-width: 0; align-content: start; }
.mzp-grid--dang-doc.mzp-skeleton > li { display: grid; grid-template-columns: 64px 1fr; gap: 6px 16px; padding: 18px 0; border-top: 1px solid var(--mz-rule); }
.mzp-grid--dang-doc.mzp-skeleton .mzp-sk--cover { grid-row: span 3; }
/* Đã lưu, Đã đọc xong: thẻ 5 cột (1280), 3 (768), 2 (390). */
.mzp-grid--da-luu, .mzp-grid--da-doc-xong { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mzp-card { position: relative; display: grid; gap: 8px; align-content: start; min-width: 0; }
.mzp-card .mzp-title { font-size: 15px; line-height: 20.7px; }
.mzp-card__by { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 32px; margin-top: -6px; }
.mzp-when { margin: -4px 0 0; color: var(--mz-muted); font: italic 400 12.5px/18px var(--mz-serif); }
html body .mzp-card .mzp-more-btn {
  /* Vùng bấm 44, icon 20 (§7.4.2, 7.4.8 G); lề âm giữ chỗ hiển thị như cũ. */
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; margin: -6px -6px -6px 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--mz-muted); cursor: pointer;
}
html body .mzp-card .mzp-more-btn:hover, html body .mzp-card .mzp-more-btn[aria-expanded="true"] { color: var(--mz-red); background: var(--mz-paper-deep); }
/* Menu ⋯: nền page, viền rule-strong + kẻ son 3, không bóng. */
.mzp-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 188px; padding: 4px 0;
  background: var(--mz-paper); border: 1px solid var(--mz-rule-strong); border-top: 3px solid var(--mz-red);
}
html body .mzp-menu .mzp-menu__item {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 14px; margin: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; color: var(--mz-ink); font: 400 14px/20px var(--mz-serif); text-align: left; text-decoration: none; cursor: pointer;
}
html body .mzp-menu .mzp-menu__item:hover, html body .mzp-menu .mzp-menu__item:focus { background: var(--mz-paper-deep); color: var(--mz-red); outline: none; }
html body .mzp-menu .mzp-menu__item:focus-visible { outline: 2px solid var(--mz-focus); outline-offset: -2px; }
.mzp-btn { min-height: 44px; padding: 0 20px; color: var(--mz-red); background: transparent; gap: 8px; font-size: 14px; }
.mzp-more { justify-self: start; margin-top: 24px; width: auto; }
.mzp-empty { display: grid; justify-items: start; gap: 8px; padding: 28px 0; border-top: 1px solid var(--mz-rule); }
.mzp-empty__title { margin: 0; color: var(--mz-ink); font: 900 22px/30px var(--mz-serif); }
.mzp-empty p { margin: 0 0 8px; color: var(--mz-muted); font: 400 14.5px/22px var(--mz-serif); }
/* Tủ tự tạo trống (G, 7.9.1): icon library_books + chữ. */
.mzp-empty--shelf { grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; justify-items: stretch; max-width: 640px; border-bottom: 1px solid var(--mz-rule); }
.mzp-empty--shelf .mzp-empty__i { margin-top: 3px; color: var(--mz-muted); }
.mzp-empty--shelf > div { display: grid; justify-items: start; gap: 6px; }
html body .mzp-empty--shelf .mzp-empty__title { font: 700 18px/26px var(--mz-serif); }
.mzp-empty--shelf p { color: var(--mz-ink); font-size: 15px; line-height: 24px; }
.mzp-error { display: grid; justify-items: start; gap: 12px; padding: 20px 0; border-top: 1px solid var(--mz-rule); color: var(--mz-ink); font: 400 14.5px/22px var(--mz-serif); }
.mzp-error p { margin: 0; }
/* Dòng trạng thái (G): dưới đầu tủ, kẻ rule trên dưới, icon check_circle success; "Hoàn tác" chữ son. */
.mzp-status { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin: 0; padding: 8px 0; border-top: 1px solid var(--mz-rule); border-bottom: 1px solid var(--mz-rule); color: var(--mz-ink); font: 400 14.5px/21px var(--mz-serif); }
.mzp-status:empty { display: none; }
.mzp-status__lt { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; }
.mzp-status__i { flex: none; margin-top: 2px; color: var(--mzs-success, var(--mz-ink)); }
.mzp-status.is-err .mzp-status__i { color: var(--mzs-danger, var(--mz-red)); }
.mzp-status .mzs-tbtn { min-height: 32px; }
.mzp-grid--da-luu.mzp-skeleton > li, .mzp-grid--da-doc-xong.mzp-skeleton > li { display: block; }

@media (max-width: 1023px) {
  .mzp-grid--da-luu, .mzp-grid--da-doc-xong { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .mzp-grid--dang-doc { grid-template-columns: minmax(0, 1fr); }
  .mzp-tabs { gap: 20px; }
  html body .mzp-tabs .mzp-tab { font-size: 12.5px; }
}
@media (max-width: 599px) {
  .mzp-grid--da-luu, .mzp-grid--da-doc-xong { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .mzp-tools { align-items: stretch; flex-direction: column; gap: 4px; }
  .mzp-shelfbar { gap: 0 18px; }
  /* 390: hàng tủ cuộn ngang trong khung; Sắp xếp thành hàng riêng căn phải; hai nút đầu tủ xuống dòng dưới tên. */
  .mzp-shelves { gap: 0 22px; }
  .mzp-tools > .mzp-sort { align-self: flex-end; min-height: 0; }
  html body .mzp-sh .mzp-sh__name { font-size: 20px; line-height: 26px; }
  .mzp-sh__acts { flex-basis: 100%; margin-left: -4px; }
  .mzp-cr .mzs-nfr .mzs-btn { flex: 1 1 auto; }
  .mzp-menu { right: 0; min-width: 172px; }
}

/* Trang chủ: khối nằm trong lưới 12 cột của .home-section ⇒ danh sách chiếm trọn hàng. */
html body[data-page-kind="home"] .mzp-block > :is(.mzp-cont, .mzp-mine) { grid-column: 1 / -1; min-width: 0; }
/* Ô thẻ một cột co được: ảnh bìa không kéo rộng cột theo cỡ ảnh gốc. */
.mzp-card, .mzp-mine__item { grid-template-columns: minmax(0, 1fr); }
.mzp-cover { min-width: 0; width: 100%; min-height: 0; }
.mzp-cover img { min-width: 0; }