/* ================================================== GIAO DIỆN ĐỌC LẬT SÁCH */
.doc {
  background: #eef1f6;
  border-block: 1px solid var(--line);
  min-height: calc(100vh - 66px);
  display: flex; flex-direction: column;
}
.doc:fullscreen { background: #1b2438; }

.doc-thanh {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 18px; background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 8;
}
.doc-ten { font-weight: 700; color: var(--navy); font-size: 15px; margin-right: auto; }
.doc-thanh button, .doc-thanh a.nut-nho {
  border: 1px solid var(--line); background: #fff; color: var(--navy);
  border-radius: 9px; padding: 8px 13px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit; text-decoration: none; line-height: 1.2;
}
.doc-thanh button:hover:not(:disabled), .doc-thanh a.nut-nho:hover { background: var(--card); }
.doc-thanh button:disabled { opacity: .4; cursor: not-allowed; }
.doc-so { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); }
.doc-so input {
  width: 62px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px;
  text-align: center; font-family: inherit; font-size: 14px; color: var(--ink);
}

.doc-tien { height: 3px; background: #dbe3ef; }
.doc-tien .thanh-tien { height: 100%; background: var(--red); width: 0; transition: width .25s ease; }

.doc-vung {
  flex: 1; display: grid; place-items: center; padding: 26px 18px 34px; overflow: auto;
}

.sach {
  --ti-le: .707;          /* rộng / cao của một trang */
  --ban: 1;
  display: flex; gap: 0; align-items: stretch; justify-content: center;
  transform: scale(var(--ban)); transform-origin: center top;
  transition: transform .18s ease;
  perspective: 2400px;
}
.sach.lat-toi .trang.phai, .sach.lat-toi .trang.don { animation: latToi .26s ease-in forwards; }
.sach.lat-lui .trang.trai, .sach.lat-lui .trang.don { animation: latLui .26s ease-in forwards; }
@keyframes latToi { to { transform: rotateY(-88deg); opacity: .25; } }
@keyframes latLui { to { transform: rotateY(88deg); opacity: .25; } }

/* Cỡ trang tính theo CHIỀU CAO khung xem rồi suy ra bề rộng qua aspect-ratio.
   Nếu đặt theo bề rộng, trang khổ dọc (A4) sẽ cao hơn màn hình và bị cắt. */
.trang {
  position: relative; background: #fff; box-shadow: var(--shadow-md);
  height: min(74vh, 920px); aspect-ratio: var(--ti-le); width: auto;
  max-width: 48vw;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transform-origin: left center;
}
.trang.trai { transform-origin: right center; border-radius: 4px 0 0 4px; }
.trang.phai { border-radius: 0 4px 4px 0; }
.trang.don { max-width: 94vw; border-radius: 4px; transform-origin: center; }
.trang.an { display: none; }
.trang.trang-trong { background: #e6eaf1; box-shadow: none; }

/* khe gáy sách khi mở đôi */
.mo-doi .trang.trai::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: 26px;
  background: linear-gradient(to right, transparent, rgba(27, 36, 56, .13));
}
.mo-doi .trang.phai::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 26px;
  background: linear-gradient(to left, transparent, rgba(27, 36, 56, .13));
}

.canvas-trang { width: 100%; height: 100%; object-fit: contain; display: block; }
.so-trang {
  position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; color: var(--faint); background: rgba(255, 255, 255, .9);
  padding: 1px 8px; border-radius: 999px;
}

/* thuộc tính hidden phải thắng display của lớp, nếu không vòng chờ không tắt */
[hidden] { display: none !important; }

.dang-tai { display: grid; place-items: center; gap: 12px; padding: 70px 0; color: var(--muted); }
.dang-tai .quay {
  width: 34px; height: 34px; border: 3px solid #d3ddef; border-top-color: var(--navy);
  border-radius: 50%; animation: quay 0.9s linear infinite;
}
@keyframes quay { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .doc-ten { width: 100%; margin-bottom: 2px; }
  .trang { width: 86vw; }
  .mo-doi .trang.trai { display: none; }     /* điện thoại: mỗi lần một trang */
  .mo-doi .trang.phai { border-radius: 4px; }
}