/* ===== DMCTN Shelf Pro (mobile-first) ===== */
.dmctn-shelf-pro{
  --primary:#0ea5e9; --accent:#111827; --highlight:#dc2626;
  --cols-m:2; --cols-t:3; --cols-d:5;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* Toolbar */
.dmctn-shelf-pro .shelf-toolbar{
  display:flex; gap:.5rem; align-items:center; margin: .5rem 0 1rem;
}
.dmctn-shelf-pro .shelf-toolbar input[type=search]{
  flex:1 1 auto; padding:.55rem .7rem; border:1px solid #e5e7eb; border-radius:.75rem;
  font-size:14px; outline:none;
}
.dmctn-shelf-pro .shelf-toolbar select{
  padding:.55rem .7rem; border:1px solid #e5e7eb; border-radius:.75rem; background:#fff;
}
.dmctn-shelf-pro .shelf-toolbar .btn-filter{
  padding:.6rem .9rem; border-radius:999px; border:0; color:#fff; background:var(--primary); cursor:pointer;
}

/* Grid */
.dmctn-shelf-pro .shelf-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(var(--cols-m), minmax(0,1fr));
}
@media (min-width: 768px){
  .dmctn-shelf-pro .shelf-grid{ grid-template-columns: repeat(var(--cols-t), minmax(0,1fr)); gap:14px; }
}
@media (min-width: 1024px){
  .dmctn-shelf-pro .shelf-grid{ grid-template-columns: repeat(var(--cols-d), minmax(0,1fr)); gap:16px; }
}

/* Card */
.dmctn-shelf-pro .book-card{
  background:#fff; border-radius:18px; padding:10px; box-shadow:0 8px 22px rgba(0,0,0,.06);
  display:flex; flex-direction:column; height:100%;
}
.dmctn-shelf-pro .book-card .cover{
  position:relative; border-radius:14px; overflow:hidden; background:#f3f4f6;
  aspect-ratio:3/4; /* trình duyệt cũ: fallback phía dưới */
}
.dmctn-shelf-pro .book-card .cover .ph{ width:100%; height:0; padding-top:133%; background:linear-gradient(135deg,#e5f2ff,#f9fafb); }
.dmctn-shelf-pro .book-card .cover img{ width:100%; height:100%; object-fit:cover; display:block; }

.dmctn-shelf-pro .book-card .badges{
  position:absolute; top:8px; left:8px; display:flex; gap:6px; flex-wrap:wrap;
}
.dmctn-shelf-pro .badge{
  font-weight:700; font-size:11px; padding:4px 8px; border-radius:999px; color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.dmctn-shelf-pro .badge.new{ background:var(--highlight); }
.dmctn-shelf-pro .badge.price{ background:var(--accent); }
.dmctn-shelf-pro .badge.free{ background:#10b981; }

.dmctn-shelf-pro .title{
  font-weight:800; font-size:16px; line-height:1.25; margin:10px 2px 8px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

.dmctn-shelf-pro .actions{
  margin-top:auto; display:flex; gap:8px;
}
.dmctn-shelf-pro .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .8rem; border-radius:999px; text-decoration:none; font-weight:700;
  font-size:14px; transition:transform .05s ease;
}
.dmctn-shelf-pro .btn:active{ transform:translateY(1px); }
.dmctn-shelf-pro .btn.read{ background:var(--primary); color:#fff; }
.dmctn-shelf-pro .btn.download{ background:#e5e7eb; color:#111827; }

.dmctn-shelf-pro .empty{ color:#6b7280; padding:.75rem; }

/* Pagination */
.dmctn-shelf-pro .shelf-pagination{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:14px 0 4px;
}
.dmctn-shelf-pro .shelf-pagination .page a,
.dmctn-shelf-pro .shelf-pagination .page span{
  display:inline-block; padding:.45rem .7rem; border-radius:10px; background:#f3f4f6; color:#111827;
}
.dmctn-shelf-pro .shelf-pagination .page .current{ background:var(--primary); color:#fff; }