.page-wrap{
  max-width: 960px;
  margin: 24px auto;
  padding: 0 16px;
}
.page-title{
  margin: 0 0 14px;
  font-size: 26px;
  color: #15452c;
  text-shadow: 0 0 6px rgba(46,204,113,.15);
}

/* Thanh công cụ */
.tool-row{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  margin-bottom: 20px;
}
.search-input,
.select-sort{
  border: 2px solid #cfe7d9;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  background: #fff;
}
.btn-primary{
  background: #1e7f4a; color:#fff; font-weight:700;
  padding: 10px 14px; border-radius:10px;
  text-decoration: none;
  display: inline-block;
  line-height: 1;
}
.btn-primary:hover{ background:#27ae60; }

/* Danh sách truyện theo hàng ngang */
.story-list{ display: block; }
.story-row{
  display:flex; align-items:flex-start; gap:16px;
  padding:14px 6px; background:#fff;
  border-top: 1px solid #eef4f0;
}
.story-row:first-child{ border-top: none; }
.story-row:hover{ background: #fafdfb; }

/* Bìa 3:4 (cố định kích thước để ảnh luôn hiện) */
.story-thumb{
  width: 96px;         /* 3:4 */
  height: 128px;
  border-radius:12px; overflow:hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  flex-shrink:0;
  background:#f3f5f7;
  display: block;      /* vì là <a> */
}
.story-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* Nội dung chính */
.story-main{ flex:1; min-width:0; }
.story-title{
  margin:0 0 6px; font-size:18px; color:#15452c;
  line-height: 1.3;
}
.story-title a{ color:inherit; text-decoration:none; }
.story-title a:hover{ text-decoration:underline; }
.story-sub{
  display:flex; gap:12px; flex-wrap:wrap;
  font-size:14px; color:#6b8a7a;
}
.story-sub .chip{
  padding:3px 8px; border:1px solid #d6e9de;
  border-radius:999px; background:#f6fbf8;
  white-space: nowrap;
}

/* Cột phải */
.story-side{
  flex-shrink:0;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  min-width:90px;
}
.chapter-count{ font-size:14px; color:#6b8a7a; }
.btn-try{
  background:#b38b2b; color:#fff; padding:8px 12px;
  border-radius:10px; font-weight:700;
  text-decoration:none;
}
.btn-try:hover{ background:#d1a63a; }

/* Empty state */
.empty{
  background: #fdfdfd;
  border: 1px dashed #c8e6d6;
  border-radius: 12px;
  padding: 24px; text-align: center; color: #4b6351;
}

/* Mobile */
@media (max-width: 640px){
  /* Tool bar xếp dọc */
  .tool-row{
    grid-template-columns: 1fr;
  }

  .story-row{ gap:12px; }
    .story-thumb{
  width:96px; height:128px; /* 3:4 */
  border-radius:12px; overflow:hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  flex-shrink:0; background:#f3f5f7; display:block;
}

  /* Để side nằm dưới title một chút cho thoáng */
  .story-side{
    align-items:flex-start;
    margin-left: calc(82px + 12px);
  }
}

/* ===== Footer mới ===== */
.site-footer {
  margin: 28px 0 12px;
}
.site-footer .footer-inner{
  max-width: 960px;
  margin: 0 auto;
  padding: 12px 16px;
  text-align: center;
  color: #4b6351;
  background: #f6fbf8;
  border-top: 1px solid #d6e9de;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.site-footer .brand{ color:#15452c; font-weight:700; }
.site-footer .footer-link{
  color:#1e7f4a; font-weight:600; text-decoration:none;
}
.site-footer .footer-link:hover{ text-decoration:underline; }
.site-footer .dot{ margin: 0 6px; opacity:.6; }
.site-footer .spacer{ margin: 0 8px; opacity:.35; }