/* ========== Card & Cover ========== */

/* Bo tròn toàn bộ card kệ sách & book */
a.grid-card{
  display:block;
  border-radius:12px;
  overflow:hidden;                 /* đảm bảo con bám theo bo góc */
  background-clip:padding-box;
}

/* Wrapper chứa cover bám theo bo góc trên (phần nội dung dưới giữ nguyên) */
a.grid-card .featured-image-container-wrap,
a.grid-card .bg-bookshelf.featured-image-container-wrap{
  overflow:hidden;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}

/* Ảnh cover dùng background-image: hiển thị TRỌN, không cắt */
.featured-image-container{
  box-sizing:border-box;
  background-size:contain !important;          /* thay vì cover */
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:transparent !important;     /* KHÔNG nền trắng */
  padding:8px;                                 /* tạo khoảng cách với viền trong */
  border-radius:12px;
  height:180px;                                /* chiều cao mặc định */
}

/* PC: ảnh “thoáng” hơn một chút */
@media (min-width:1200px){
  .featured-image-container{ height:220px; }
}

/* Mobile: gọn lại */
@media (max-width:640px){
  .featured-image-container{ height:140px; }
}

/* ========== Spacing (khoảng cách) ========== */

/* Hạ dải card xuống một chút so với hàng “Sắp xếp” */
.grid.half + .grid.third,
.grid.third{
  margin-top:16px !important;
}

/* Khoảng hở giữa các item trong grid (cả Grid lẫn Flex) */
.grid.half, .grid.third{
  gap:16px;                        /* ưu tiên nếu layout là CSS Grid */
}
.grid .grid-card{
  margin-bottom:16px;              /* dự phòng nếu layout là flex */
}

/* ========== Header: hạn chế xuống dòng ========== */

.header h1,
.header .title,
.header .logo-text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Mobile: thu font để hạn chế wrap */
@media (max-width:480px){
  .header h1,
  .header .title,
  .header .logo-text{
    font-size:18px;
  }
}

/* ========== Watermark góc trên-trái (ẩn) ========== */
#bsStampTL{ display:none !important; }

/* (Tuỳ chọn) Nếu đôi khi ảnh có nền cực nhạt muốn ảnh “nổi” hơn:
.featured-image-container::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background:#000; opacity:.02; pointer-events:none;
}
*/

/* ===== Thu nhỏ tiêu đề cho Kệ & Sách/Trang (an toàn, không ảnh hưởng form) ===== */
:root{
  --ru-h1-size: 1.75rem;      /* H1 ở trang Sách/Trang */
  --ru-list-heading: 1.25rem; /* Tiêu đề “Kệ sách”, “Giá sách”… */
}

/* 1) H1 trong Sách/Trang – biến thể có flex */
h1.flex.fit-content.break-text,
.card.content-wrap h1.flex.fit-content.break-text,
.book-content h1.flex.fit-content.break-text {
  font-size: var(--ru-h1-size) !important;
  line-height: 1.25 !important;
  margin: .5rem 0 .75rem !important;
}

/* 2) H1 trong Sách/Trang – biến thể chỉ có .break-text (main.content-wrap.card) */
main.content-wrap.card > h1.break-text,
.card.content-wrap > h1.break-text,
.book-content > h1.break-text,
#content .card.content-wrap > h1.break-text {
  font-size: var(--ru-h1-size) !important;
  line-height: 1.25 !important;
  margin: .5rem 0 .75rem !important;
}

/* 3) Tiêu đề “Kệ sách”, “Giá sách”… */
.list-heading{
  font-size: var(--ru-list-heading) !important;
  line-height: 1.3 !important;
  margin: .25rem 0 .5rem !important;
}

/* Tuỳ chọn: nhỏ thêm trên màn hẹp */
@media (max-width: 900px){
  :root{
    --ru-h1-size: 1.55rem;
    --ru-list-heading: 1.125rem;
  }
}
/* ================================= */
/* Ẩn mục “Chế độ Tối” trong khối Hành động (sidebar) */
  form[action$="/preferences/toggle-dark-mode"] {
    display: none !important;
  }

  /* Nếu đang dùng icon chuyển theme ở thanh tiêu đề, ẩn luôn */
  .theme-toggle, a.theme-toggle, button.theme-toggle {
    display: none !important;
  }
/* ================================= */