/* =====================================================================
   TRÌNH ĐỌC TÀI LIỆU
   ===================================================================== */

.reader-body{
  background:#2b3138;margin:0;color:#e8ecf1;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
}

.reader-bar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  background:#1f242a;border-bottom:1px solid #394048;padding:8px 14px;
}
.reader-back{
  color:#e8ecf1;font-size:1.4rem;line-height:1;text-decoration:none;
  padding:4px 10px;border-radius:8px;
}
.reader-back:hover{background:#2f363e;color:#fff}
.reader-title{
  font-weight:600;font-size:.98rem;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.reader-tools{display:flex;align-items:center;gap:6px}
.reader-sep{width:1px;height:22px;background:#3d444c;margin:0 4px}

.rbtn{
  background:#2f363e;color:#e8ecf1;border:1px solid #434b54;border-radius:8px;
  font-size:1.05rem;line-height:1;padding:7px 12px;cursor:pointer;font-family:inherit;
}
.rbtn:hover{background:#3a434c}
.rbtn.wide{padding:10px 18px;font-size:.95rem}

.reader-pager{display:flex;align-items:center;gap:6px;font-size:.9rem;color:#b9c2cc}
.reader-pager input{
  width:62px;background:#2f363e;color:#fff;border:1px solid #434b54;border-radius:7px;
  padding:6px 8px;text-align:center;font-family:inherit;font-size:.92rem;
}

.reader-notice{
  background:#3a3320;border-bottom:1px solid #4d442a;color:#f0dfb5;
  padding:9px 16px;font-size:.9rem;text-align:center;
}
.reader-notice a{color:#ffd479;font-weight:700;margin-left:6px}

/* overflow-x cho phép kéo ngang khi khách phóng to trang */
.reader-stage{padding:18px 12px 30px;display:flex;position:relative;overflow-x:auto}
.reader-page{
  width:100%;max-width:900px;position:relative;margin:0 auto;flex:none;
  background:#fff;border-radius:6px;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.reader-page img{
  width:100%;display:block;transition:opacity .15s ease;
  -webkit-user-drag:none;user-drag:none;pointer-events:none;
}
.reader-loading{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,.75);color:#4a5561;font-size:.92rem;
}

.reader-foot{
  position:sticky;bottom:0;display:flex;align-items:center;justify-content:center;gap:16px;
  background:#1f242a;border-top:1px solid #394048;padding:10px 14px;font-size:.9rem;color:#b9c2cc;
}

/* ---------- Tường phí ---------- */
.paywall{
  position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(22,26,31,.86);padding:20px;
}
/* display:flex ở trên đè mất thuộc tính hidden của HTML, phải nói lại cho rõ */
.paywall[hidden]{display:none}
.paywall-card{
  background:#fff;color:#16202b;border-radius:14px;padding:30px 26px;
  max-width:390px;width:100%;text-align:center;
}
.paywall-card h2{margin:0 0 10px;font-size:1.3rem}
.paywall-price{font-size:1.7rem;font-weight:800;color:#d99026;margin:14px 0}
.paywall-note{font-size:.86rem;color:#6b7787;margin:12px 0 0}

/* ---------- Khi in: không in được nội dung ---------- */
@media print{
  body{display:none !important}
}

@media (max-width:680px){
  .reader-title{display:none}
  .reader-stage{padding:10px 6px 24px}
  .rbtn{padding:8px 11px}
}