/* =========================================================
   YeuNovel – COMPLETED list page (fix tooltip & layout)
   ========================================================= */
:root{ --brand:#2563eb; --ink:#0f172a; --muted:#6b7280; --card:#fff; --border:#e5e7eb; --radius:12px; }

.page-title{font-size:22px;font-weight:700;color:var(--ink);margin:6px 0 14px}

/* ----- Grid & equal-height columns ----- */
.completed-grid .tile-col{ display:flex }            /* cột là flex-item */
.completed-grid .novel-tile{
    position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden; margin-bottom:16px; transition:box-shadow .15s ease, transform .08s ease, border-color .2s ease;
    display:flex; flex-direction:column; width:100%;   /* fill chiều cao cột */
}
.completed-grid .novel-tile:hover{box-shadow:0 12px 28px -14px rgba(0,0,0,.35); transform:translateY(-2px); border-color:#dbe1ea}

/* Cover giữ tỉ lệ, không ảnh hưởng layout */
.novel-tile .thumb{
    display:block; width:100%; background:#eef2ff center/cover no-repeat;
    height:220px; /* cố định để hàng thẳng nhau */
}

/* Meta dưới cover */
.novel-tile .meta{padding:10px 12px; display:flex; flex-direction:column; gap:6px}
.novel-tile .title{font-size:14px;font-weight:700;margin:0}
.novel-tile .title a{color:var(--ink)}
.novel-tile .title a:hover{color:var(--brand);text-decoration:none}

/* clamp 2 dòng để không đội chiều cao */
.novel-tile .title a{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    min-height:38px; line-height:1.35;
}
.meta-row{ display:flex; justify-content:space-between; align-items:center }

/* badges & views */
.badge-complete{background:#dcfce7;color:#166534;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700}
.views{background:rgba(0,0,0,.55);color:#fff;border-radius:999px;padding:2px 8px;font-size:11px}

/* ----- Overlay hover (thay tooltip JS) ----- */
.tile-hover{
    pointer-events:none;                                  /* không chặn hover thẻ cha */
    position:absolute; inset:8px; border-radius:10px;
    background:rgba(17,24,39,.86); color:#e5e7eb;
    padding:10px; opacity:0; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease;
    display:flex; flex-direction:column; gap:8px;
}
.novel-tile:hover .tile-hover{ opacity:1; transform:translateY(0) }

.tile-hover .th-title{ font-weight:700; color:#fff; max-height:2.7em; overflow:hidden }
.tile-hover .th-info p{margin:0;font-size:12px;color:#cbd5e1}
.tile-hover .th-info label{margin-right:4px;color:#94a3b8}
.tile-hover .th-summary{font-size:12px;color:#e2e8f0; max-height:60px; overflow:hidden}
.tile-hover .th-chapters{ list-style:none; padding:0; margin:0; max-height:72px; overflow:auto }
.tile-hover .th-chapters li{ line-height:1.35 }
.tile-hover .th-chapters a{ color:#93c5fd }
.tile-hover .th-chapters a:hover{ color:#fff; text-decoration:none }

/* pagination wrap */
.pagination-outter{margin:8px 0 16px}

/* Responsive */
@media (max-width:767px){
    .novel-tile .thumb{height:200px}
}