/* Hộp "Lưu vào tủ", ô tên tủ, hộp xác nhận xoá tủ (SHELF-2; DAC-TA-WEB §7.4.3, §7.4.8 D–G). Lớp `mzs-`.
 * Màu: token --mz-* (public_magazine.css; tối, quốc tang ở mz_theme.css); màu trạng thái chưa có trong --mz-*
 * khai báo cục bộ --mzs-* (cùng giá trị --mza-* của public_account.css, st-tokens 1.2.8).
 * Kiểu sách in: kẻ mảnh, góc vuông, không bóng, không gradient, không bo góc. */

body {
  --mzs-success: #2f6f34;
  --mzs-danger: #b3121c;
  --mzs-on-danger: #ffffff;
  --mzs-scrim: rgba(26, 18, 13, 0.48);
  --mzs-control: #847d77;
  --mzs-strong: var(--mz-ink);
}
html[data-mz-theme="dark"] body:not(.theme-quoc-tang) {
  --mzs-success: #a5d49c;
  --mzs-danger: #f29488;
  --mzs-on-danger: #2a2119;
  --mzs-scrim: rgba(0, 0, 0, 0.56);
  --mzs-control: #b08d4a;
  --mzs-strong: var(--mzd-strong, var(--mz-ink));
}
body.theme-quoc-tang {
  --mzs-success: #303030;
  --mzs-danger: #303030;
  --mzs-on-danger: #ffffff;
  --mzs-scrim: rgba(17, 17, 17, 0.48);
  --mzs-control: #8a8a8a;
}
html[data-mz-theme="dark"] body.theme-quoc-tang {
  --mzs-success: #d6d6d6;
  --mzs-danger: #d6d6d6;
  --mzs-on-danger: #161616;
  --mzs-scrim: rgba(0, 0, 0, 0.64);
  --mzs-control: #7a7a7a;
}

.mzs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mzs-i { flex: none; }
.mzs-ok { color: var(--mzs-success); }

/* ---- Nút (DAC-TA-WEB §5.4): chính, viền, chữ ---- */
html body .mzs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; min-height: 48px; margin: 0; padding: 0 28px;
  border: 1px solid var(--mz-ink); border-radius: 0; background: transparent; box-shadow: none; color: var(--mz-ink);
  font: 700 15px/1 var(--mz-condensed); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
}
html body .mzs-btn:hover { border-color: var(--mz-red); color: var(--mz-red); background: transparent; }
html body .mzs-btn--sm { min-height: 44px; padding: 0 22px; font-size: 14px; }
html body .mzs-btn--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 .mzs-btn--primary:hover { border-color: var(--mz-red-fill-hover, var(--mz-red)); background: var(--mz-red-fill-hover, var(--mz-red)); color: var(--mz-on-red); }
html body .mzs-btn--danger { border-color: var(--mzs-danger); background: var(--mzs-danger); color: var(--mzs-on-danger); }
html body .mzs-btn--danger:hover { border-color: var(--mzs-danger); background: var(--mzs-danger); color: var(--mzs-on-danger); }
html body .mzs-btn:disabled, html body .mzs-btn--primary:disabled {
  border-color: var(--mz-rule); background: var(--mz-paper-deep); color: var(--mz-muted); cursor: default;
}
html body .mzs-tbtn {
  display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 44px; margin: 0; padding: 0 4px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--mz-ink);
  font: 700 13px/16px var(--mz-condensed); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
}
html body .mzs-tbtn > span { text-decoration: underline; text-decoration-color: var(--mz-rule-strong); text-decoration-thickness: 1px; text-underline-offset: 5px; }
html body .mzs-tbtn:hover { color: var(--mz-red); background: transparent; }
html body .mzs-tbtn--red { color: var(--mz-red); }
html body .mzs-tbtn--red > span { text-decoration-color: currentColor; }
html body .mzs-tbtn:disabled { color: var(--mz-muted); cursor: default; }
html body :is(.mzs-btn, .mzs-tbtn, .mzs-x, .mzs-new, .mzs-in, .mzs-cb):focus-visible { outline: 2px solid var(--mz-focus); outline-offset: 3px; }

/* ---- Nút trên trang Chi tiết: icon + nhãn; đã lưu = bookmark đặc (§7.4.8 C) ---- */
.mzs-btn-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.mzs-btn-ic:empty { display: none; }
.detail-action-btn[data-save-shelf] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
/* Dòng trạng thái sau "Xong" (dưới cụm nút, chỗ dòng "Định dạng chưa mở được"). */
.mzs-dstatus { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 12px; color: var(--mz-ink); font: 400 14.5px/21px var(--mz-serif); }
.mzs-dstatus__lt { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; }
.mzs-dstatus__lt > .mzs-i { flex: none; margin-top: 2px; }
.mzs-dstatus .mzs-tbtn { min-height: 32px; }

/* ---- Hộp ---- */
.mzs-dlg { z-index: 1200; display: flex; flex-direction: column; color: var(--mz-ink); background: var(--mz-paper); text-align: left; }
.mzs-dlg--pop { position: absolute; width: 360px; border: 1px solid var(--mz-rule-strong); border-top: 3px solid var(--mz-red); }
.mzs-dlg--sheet {
  position: fixed; left: 0; right: 0; bottom: 0; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px);
  border-top: 3px solid var(--mz-red); padding-bottom: env(safe-area-inset-bottom);
}
.mzs-scrim { position: fixed; inset: 0; z-index: 1190; background: var(--mzs-scrim); }
.mzs-scroll { min-height: 0; }
.mzs-dlg--sheet .mzs-scroll { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; }
.mzs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 4px 0 16px; }
html body .mzs-head h2 { margin: 0; color: var(--mz-red); font: 700 12px/16px var(--mz-condensed); letter-spacing: 0.16em; text-transform: uppercase; }
.mzs-dlg--sheet .mzs-head { min-height: 60px; border-bottom: 1px solid var(--mz-rule-strong); }
html body .mzs-dlg--sheet .mzs-head h2 { color: var(--mzs-strong); font: 900 22px/28px var(--mz-serif); letter-spacing: 0; text-transform: none; }
html body .mzs-x {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--mz-ink); cursor: pointer;
}
html body .mzs-x:hover { color: var(--mz-red); background: transparent; }
.mzs-book { display: flex; align-items: flex-end; gap: 12px; padding: 0 16px 12px; border-bottom: 1px solid var(--mz-rule); }
.mzs-dlg--sheet .mzs-book { padding-top: 14px; }
.mzs-cov { display: grid; align-items: end; justify-items: center; flex: none; width: 32px; aspect-ratio: 2 / 3; }
.mzs-cov--empty { background: var(--mz-cover-placeholder); }
.mzs-cov img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 0; outline: 1px solid var(--mz-rule); outline-offset: -1px; }
.mzs-book__t { min-width: 0; }
.mzs-book__t b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--mzs-strong); font: 700 14px/19px var(--mz-serif); }
.mzs-book__t small { display: block; margin-top: 2px; color: var(--mz-red); font: 700 11.5px/15px var(--mz-condensed); letter-spacing: 0.08em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Danh sách tủ: fieldset không viền, mỗi tủ một label ≥ 48. */
html body .mzs-list { min-width: 0; margin: 0; padding: 6px 0; border: 0; border-bottom: 1px solid var(--mz-rule); }
.mzs-dlg--pop .mzs-list { max-height: 296px; overflow: auto; }
.mzs-row { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; padding: 4px 16px; color: var(--mz-ink); font: 400 15px/20px var(--mz-serif); cursor: pointer; }
.mzs-row:hover { background: var(--mz-paper-deep); }
.mzs-row.is-off { cursor: default; color: var(--mz-muted); }
.mzs-row.is-off:hover { background: transparent; }
.mzs-row--def { margin-bottom: 6px; border-bottom: 1px solid var(--mz-rule); }
.mzs-nm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mzs-nm small { display: block; color: var(--mz-muted); font: italic 400 12.5px/17px var(--mz-serif); }
.mzs-n { color: var(--mz-muted); font: 400 13px/18px var(--mz-condensed); white-space: nowrap; font-variant-numeric: tabular-nums; }
html body .mzs-cb {
  -webkit-appearance: none; appearance: none; display: grid; place-items: center; flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0;
  border: 1.5px solid var(--mzs-control); border-radius: 0; background: var(--mz-field, var(--mz-paper)); box-shadow: none; cursor: pointer;
}
html body .mzs-cb::after { content: ""; width: 5px; height: 10px; border: solid var(--mz-on-red); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); opacity: 0; }
html body .mzs-cb:checked { border-color: var(--mz-red-fill, var(--mz-red)); background: var(--mz-red-fill, var(--mz-red)); }
html body .mzs-cb:checked::after { opacity: 1; }
html body .mzs-cb:disabled { border-color: var(--mz-rule-strong); background: var(--mz-paper-deep); cursor: default; }

.mzs-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--mz-rule); color: var(--mz-ink); font: italic 400 13.5px/19px var(--mz-serif); }
.mzs-note .mzs-i { margin-top: 1px; color: var(--mz-muted); }
.mzs-note--hint { padding: 8px 16px 10px; }
html body .mzs-new {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 48px; margin: 0; padding: 0 16px;
  border: 0; border-bottom: 1px solid var(--mz-rule); border-radius: 0; background: transparent; box-shadow: none; color: var(--mz-red);
  font: 700 13px/16px var(--mz-condensed); letter-spacing: 0.12em; text-transform: uppercase; text-align: left; cursor: pointer;
}
html body .mzs-new > span { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 4px; }
html body .mzs-new:hover { background: var(--mz-paper-deep); color: var(--mz-red); }
html body .mzs-new:disabled { color: var(--mz-muted); cursor: default; background: transparent; }
html body .mzs-new:disabled > span { text-decoration: none; }

/* Ô tên tủ (hộp, hàng tạo tủ, đổi tên trên trang). */
.mzs-nf { min-width: 0; }
.mzs-nf--dlg { padding: 12px 16px; border-bottom: 1px solid var(--mz-rule); }
.mzs-lbl { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: var(--mzs-strong); font: 700 12px/16px var(--mz-condensed); letter-spacing: 0.12em; text-transform: uppercase; }
.mzs-lbl label { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.mzs-count { color: var(--mz-muted); font-weight: 400; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.mzs-count.is-over { color: var(--mzs-danger); font-weight: 700; }
.mzs-nfr { display: flex; align-items: center; gap: 8px; }
html body .mzs-in {
  flex: 1; min-width: 0; width: auto; height: 44px; min-height: 44px; margin: 0; padding: 0 12px;
  border: 1px solid var(--mzs-control); border-radius: 0; background: var(--mz-field, var(--mz-paper)); box-shadow: none;
  color: var(--mzs-strong); font: 400 15px/20px var(--mz-serif);
}
html body .mzs-in::placeholder { color: var(--mz-muted); opacity: 1; }
html body .mzs-in[aria-invalid="true"] { border: 2px solid var(--mzs-danger); padding: 0 11px; }
.mzs-err { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; color: var(--mzs-danger); font: 400 14px/20px var(--mz-serif); }
.mzs-err[hidden] { display: none; }
.mzs-err .mzs-i { margin-top: 1px; }
.mzs-ferr { margin: 0; padding: 10px 16px 0; }

/* Chân hộp: "Bỏ lưu" trái · "Xong" phải (một nút chính). */
.mzs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 12px; }
html body .mzs-foot .mzs-done { min-height: 44px; min-width: 112px; margin-left: auto; padding: 0 24px; font-size: 14px; }
.mzs-dlg--sheet .mzs-foot { flex: none; padding: 12px 16px; border-top: 1px solid var(--mz-rule-strong); }
html body .mzs-dlg--sheet .mzs-foot .mzs-done { min-width: 148px; }

/* Khối trạng thái trong hộp: chưa đăng nhập, lỗi tải. */
.mzs-state { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; padding: 16px 16px 18px; }
.mzs-state > .mzs-i { margin-top: 1px; color: var(--mz-muted); }
html body .mzs-state h3 { margin: 0; color: var(--mzs-strong); font: 700 16px/22px var(--mz-serif); }
.mzs-state p { margin: 4px 0 0; color: var(--mz-ink); font: 400 14px/21px var(--mz-serif); }
.mzs-state__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }

/* Đang tải: vạch 3 son chạy (giảm chuyển động: đứng yên) + ba hàng khung xương tĩnh. */
.mzs-bar { position: relative; height: 3px; overflow: hidden; background: var(--mz-rule); }
.mzs-bar > i { position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: var(--mz-red-fill, var(--mz-red)); animation: mzs-run 1.2s linear infinite; }
@keyframes mzs-run { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .mzs-bar > i { animation: none; left: 0; width: 40%; } }
.mzs-wait { padding-bottom: 6px; }
.mzs-wait__t { margin: 0; padding: 8px 16px 2px; color: var(--mz-muted); font: italic 400 13.5px/19px var(--mz-serif); }
.mzs-sk { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 16px; }
.mzs-sk i { display: block; flex: none; width: 20px; height: 20px; border: 1px solid var(--mz-rule); background: var(--mz-cover-placeholder); }
.mzs-sk b { display: block; height: 11px; background: var(--mz-rule); }

/* ---- Hộp xác nhận xoá tủ (alertdialog như 7.7): rộng 640, kẻ trên 4 danger, giữa trang cách đỉnh 96 ---- */
.mzs-scrim--confirm { z-index: 1290; }
.mzs-confirm {
  position: fixed; z-index: 1300; top: 96px; left: 50%; width: 640px; max-width: calc(100vw - 32px); transform: translateX(-50%);
  padding: 26px 32px 28px; border-top: 4px solid var(--mzs-danger); background: var(--mz-paper); color: var(--mz-ink);
}
.mzs-confirm__k { margin: 0; color: var(--mzs-danger); font: 700 12px/16px var(--mz-condensed); letter-spacing: 0.16em; text-transform: uppercase; }
html body .mzs-confirm h2 { margin: 8px 0 0; color: var(--mzs-strong); font: 900 28px/34px var(--mz-serif); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.mzs-confirm__b { margin: 10px 0 0; color: var(--mz-ink); font: 400 15.5px/24px var(--mz-serif); }
.mzs-confirm__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 22px; }
@media (max-width: 599px) {
  .mzs-confirm { top: 0; bottom: 0; left: 0; width: auto; max-width: none; transform: none; padding: 22px 16px 28px; overflow: auto; }
  html body .mzs-confirm h2 { font-size: 24px; line-height: 30px; }
  .mzs-confirm__acts { flex-direction: column; align-items: stretch; }
  html body .mzs-confirm__acts .mzs-btn, html body .mzs-confirm__acts .mzs-tbtn { width: 100%; justify-content: center; }
}