/* =========================================================
   Bổ sung cho template (public/css/site.css giữ NGUYÊN BẢN template).
   Chỉ chứa phần template không có sẵn: trang đọc chương, trạng thái loading/validate,
   ảnh QR thật, layout tài khoản. Dùng lại design token (:root) của template.
   ========================================================= */

/* ---------- Trang đọc chương ---------- */
.reader{ padding-bottom:3.5rem; }
.reader-nav{ display:flex; align-items:center; justify-content:space-between; gap:0.625rem; margin:1.375rem 0; flex-wrap:wrap; }
.reader-nav-disabled{ opacity:.45; pointer-events:none; }
.reader-content{ padding:2.25rem 2.5rem; font-size:1.0625rem; line-height:1.95; color:var(--text); overflow-wrap:anywhere; }
.reader-content p{ margin:0 0 1.1em; }
.reader-content img{ max-width:100%; height:auto; margin:0 auto; }

/* ---------- Form ---------- */
.field.is-invalid{ border-color:var(--danger); }
.field-error{ color:var(--danger); font-size:0.78125rem; margin-top:0.375rem; }
.btn[disabled], .btn:disabled{ opacity:.65; cursor:not-allowed; transform:none; }
.form-note{ font-size:0.8125rem; color:var(--text-2); line-height:1.7; }
.alert-box{ border-radius:var(--r-sm); padding:0.75rem 1rem; font-size:0.84375rem; line-height:1.6; margin-bottom:1rem; }
.alert-box.success{ background:var(--free-bg); color:var(--free-text); }
.alert-box.error{ background:#FCEEF1; color:var(--danger); }

/* ---------- Thanh toán: QR thật thay cho lưới giả của template ---------- */
.qr-grid.qr-image{ display:block; padding:0.375rem; }
.qr-grid.qr-image img{ width:100%; height:100%; object-fit:contain; border-radius:0.625rem; }
/* QR thanh toán: to hơn 9.375rem của template và đặt TRÊN, thông tin ngân hàng nằm DƯỚI */
.bank-panel .qr-row{ grid-template-columns:1fr; gap:1.25rem; justify-items:center; }
.bank-panel .qr-grid.qr-image{ width:18.75rem; max-width:100%; height:auto; aspect-ratio:1/1; padding:0.5rem; }
.bank-panel .qr-row .bank-rows{ width:100%; }
.copy-btn{ cursor:pointer; background:none; padding:0; color:var(--text-3); display:inline-flex; }
.copy-btn:hover{ color:var(--pink-dark); }

/* ---------- Tài khoản (dùng lại .list-layout/.filter-box của template) ---------- */
.account-menu a{ display:flex; align-items:center; gap:0.625rem; padding:0.6875rem 0.75rem; border-radius:var(--r-sm); font-weight:600; font-size:0.875rem; color:var(--text-2); }
.account-menu a.active{ background:var(--bg-alt); color:var(--pink-dark); }
.account-menu a:hover{ color:var(--pink-dark); }
.account-panel{ padding:1.75rem; }
.order-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.375rem; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.order-row:last-child{ border-bottom:none; }

@media (max-width: 900px){
  .reader-content{ padding:1.375rem 1.125rem; font-size:1rem; }
  .account-panel{ padding:1.25rem; }
}

/* ---------- Logo ảnh ở header/drawer ---------- */
@media (max-width: 560px){
  .brand-logo{ height:2.25rem !important; }
}

/* ---------- Đề cử hot (trang chủ): tinh chỉnh thẻ .hot-card của template ---------- */
.hot-list .hot-card{ position:relative; color:var(--text); transition:transform .15s, box-shadow .15s; }
.hot-list .hot-card:hover{ transform:translateY(-0.1875rem); box-shadow:var(--shadow); color:var(--text); }
.hot-list .hot-cover{ position:relative; flex-shrink:0; width:8rem; }
.hot-list .hot-cover img{ width:100%; height:100%; min-height:11rem; object-fit:cover; }
.hot-list .hot-cover::after{ content:''; position:absolute; inset:0; background:linear-gradient(200deg,rgba(246,168,194,.22),rgba(150,110,210,.22)); pointer-events:none; }
.hot-list .hot-rank{
  position:absolute; top:0.625rem; left:0.625rem; z-index:1; width:1.875rem; height:1.875rem; border-radius:0.625rem;
  background:var(--grad); color:#fff; font-family:'Baloo 2'; font-weight:800; font-size:0.9375rem;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0.375rem 0.875rem -0.375rem rgba(197,80,120,.6);
}
.hot-list .hot-card .body{ display:flex; flex-direction:column; gap:0.4375rem; padding:1rem 1.125rem; min-width:0; flex:1; }
.hot-list .hot-card .title{
  color:var(--text); font-size:1rem; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hot-list .hot-card .meta{ color:var(--text-2); font-size:0.78125rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hot-list .hot-card .rating{ display:flex; align-items:center; gap:0.3125rem; color:var(--vip-ic); font-size:0.78125rem; }
.hot-list .hot-card .rating .icon{ fill:currentColor; }
.hot-list .hot-card .rating span{ color:var(--text-2); }
.hot-list .hot-card .chapters{ display:flex; gap:0.375rem; flex-wrap:wrap; margin-top:auto; }
@media (max-width: 560px){
  .hot-list .hot-cover{ width:6.5rem; }
  .hot-list .hot-cover img{ min-height:9.375rem; }
}
/* "Mới cập nhật" dùng cùng kiểu thẻ ngang, 2 cột (8 truyện = 4 hàng) */
.hot-list.new-list{ grid-template-columns:repeat(2,1fr); }
@media (max-width: 760px){
  .hot-list, .hot-list.new-list{ grid-template-columns:1fr; }
}

/* Mobile: menu ngang bị ẩn nên .header-actions (giỏ hàng, menu) phải tự đẩy sang phải */
.site-header .header-actions{ margin-left:auto; }
@media (max-width: 900px){
  .site-header .container{ gap:0.75rem; }
}

/* ---------- Responsive bổ sung ---------- */
.detail-info{ min-width:0; }
.detail-info h1{ overflow-wrap:anywhere; }
/* Mobile: ảnh bìa lên trên (căn giữa), các nút hành động nằm CÙNG 1 HÀNG */
@media (max-width: 560px){
  .detail-head{ grid-template-columns:1fr; gap:1.25rem; }
  .detail-cover{ width:9.5rem; margin:0 auto; }
  .detail-cover img{ height:13.5rem; }
  .detail-info h1{ text-align:center; }
  .detail-info .author{ text-align:center; }
  .detail-tags{ justify-content:center; }
  .detail-stats{ justify-content:flex-start; }
  .detail-actions{ flex-wrap:nowrap; gap:0.5rem; align-items:stretch; }
  .detail-actions .btn{ flex:1 1 0; min-width:0; white-space:normal; text-align:center; padding:0.625rem 0.5rem; font-size:0.8125rem; line-height:1.25; gap:0.375rem; }
  .detail-actions .icon-round{ flex:0 0 auto; width:2.75rem; height:auto; align-self:stretch; border-radius:var(--r-pill); }
  .report-link{ display:flex; justify-content:center; }
}
@media (max-width: 900px){
  .detail-head{ padding-top:1rem; }
  .detail-cover .status-pill{ top:0.4rem; left:0.4rem; font-size:0.6875rem; padding:0.2rem 0.5rem; }
  .detail-stats{ gap:0.5rem 1rem; margin-top:0.875rem; }
  .detail-tags{ margin-top:0.625rem; }
  .detail-desc{ margin-top:0.875rem; }
}
@media (max-width: 900px){
  .hero .container > *{ min-width:0; }
  .hero-search input{ min-width:0; width:100%; }
  .hero-search .btn{ padding:0.75rem 1.125rem; }
  .hero-sub{ max-width:none; }
  .hero-stats{ gap:1.5rem; flex-wrap:wrap; }
  .hero{ padding:2rem 0 3rem; }
}

/* Màn hẹp (≤ 360px): các ô lưới/flex không được ép bề ngang theo nội dung dài */
.list-layout > *, .cart-layout > *, .checkout-layout > *, .contact-layout > *, .intro-grid > *{ min-width:0; }
.search-bar input, .coupon-row .field, .newsletter input{ min-width:0; }
.bank-row{ flex-wrap:wrap; gap:0.25rem 0.75rem; }
.bank-row span:last-child{ overflow-wrap:anywhere; text-align:right; margin-left:auto; }
.cart-item .info{ min-width:0; }
.cart-item .title{ overflow-wrap:anywhere; }
.order-row > *{ min-width:0; }
@media (max-width: 560px){
  .search-bar{ padding-left:1rem; }
  .search-bar .btn{ padding:0.625rem 1rem !important; }
  .cart-item{ gap:0.75rem; padding:0.875rem; }
  .cart-item img{ width:3rem; height:4.25rem; }
  .cart-item .price{ font-size:0.9375rem; }
  .bank-panel{ padding:1.25rem; }
  .checkout-title h1{ font-size:1.375rem; }
  .checkout-steps{ gap:1rem; }
  .contact-form{ padding:1.25rem; }
  .account-panel{ padding:1rem; }
}
.bank-panel .qr-row > *{ min-width:0; }
.bank-panel .qr-grid.qr-image{ width:min(300px, 100%); }
.order-row > div:last-child{ flex-wrap:wrap; }
.section-link{ white-space:nowrap; }
@media (max-width: 900px){
  .section-head{ gap:0.75rem; }
  .section-head h2{ font-size:1.25rem; }
  .banner-free{ flex-direction:column; align-items:flex-start; gap:1.25rem; padding:1.5rem; }
  .banner-guide{ padding:1.75rem 1.5rem; }
  .banner-guide h3{ font-size:1.375rem; }
  .guide-hero h1{ font-size:1.625rem; }
}

/* Mobile: ảnh bìa trong danh sách truyện thấp hơn (8rem) và bo góc nhỏ hơn */
@media (max-width: 560px){
  .story-card{ border-radius:0.75rem; }
  .story-card .cover img{ height:8rem !important; }
  .story-card .status-pill{ top:0.5rem; left:0.5rem; }
  .related-grid .card{ border-radius:0.75rem; }
}

/* Mobile: ẩn icon kính lúp trong ô tìm kiếm ở hero cho gọn */
@media (max-width: 560px){
  .hero-search > .icon{ display:none; }
  .hero-search{ padding-left:1rem; }
}

/* Mobile: danh sách chương ẩn nhãn "Mở khóa" / "Free" bên phải (icon khóa/mở ở đầu dòng đã đủ phân biệt) */
@media (max-width: 560px){
  .chapter-list .chapter-row > .pill{ display:none; }
  .chapter-list .chapter-row{ padding:0.875rem 1rem; }
}

/* Mobile: nút hành động ở trang chi tiết ẩn icon, chữ nhỏ hơn */
@media (max-width: 560px){
  .detail-actions .btn .icon{ display:none; }
  .detail-actions .btn{ font-size:0.75rem; padding:0.625rem 0.5rem; }
}

/* Mobile: banner mở khóa - nút mua truyện rộng hết dòng */
@media (max-width: 560px){
  .unlock-banner{ flex-direction:column; align-items:stretch; gap:0.875rem; }
  .unlock-banner > .btn{ width:100%; }
}

/* Thẻ truyện: 2 nhãn free / VIP luôn nằm cùng 1 hàng (thu nhỏ trên màn hẹp) */
.story-card .chapters{ flex-wrap:nowrap; }
.story-card .chapters .pill{ min-width:0; }
@media (max-width: 900px){
  .story-card .chapters{ gap:0.25rem; }
  .story-card .chapters .pill{ font-size:0.6875rem; padding:0.25rem 0.5rem; gap:0.25rem; }
  .story-card .chapters .pill .icon{ width:0.6875rem; height:0.6875rem; }
}
@media (max-width: 560px){
  .story-card .body{ padding:0.75rem; }
}

/* Các khối vừa là .container vừa có shorthand padding "x 0" của template (page-head, breadcrumb, detail-head...)
   làm mất padding ngang của container -> chữ/nội dung lệch ra ngoài mép container. Trả lại padding ngang. */
.container.page-head, .container.breadcrumb, .container.detail-head, .container.list-layout,
.container.cart-layout, .container.contact-layout, .container.checkout-title, .container.checkout-layout,
.container-narrow.guide-hero, .container-narrow.steps-grid, .container-narrow.breadcrumb, .container-narrow.faq-list{
  padding-left:2.5rem; padding-right:2.5rem;
}
@media (max-width: 900px){
  .container.page-head, .container.breadcrumb, .container.detail-head, .container.list-layout,
  .container.cart-layout, .container.contact-layout, .container.checkout-title, .container.checkout-layout,
  .container-narrow.guide-hero, .container-narrow.steps-grid, .container-narrow.breadcrumb, .container-narrow.faq-list{
    padding-left:1.25rem; padding-right:1.25rem;
  }
}

/* Sticky footer: nội dung ngắn / đang tải vẫn kéo footer xuống đáy màn hình */
body{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.main{ flex:1 0 auto; width:100%; }
.site-footer, .footer-simple{ flex-shrink:0; }

/* Nhãn số chương: mobile chỉ hiện số, desktop thêm chữ "chương" */
@media (max-width: 560px){
  .pill-word{ display:none; }
}