:root {
  --nen: #f4f2ee;
  --be-mat: #ffffff;
  --be-mat-2: #f8f7f4;
  --chu: #1c1d21;
  --chu-phu: #62656d;
  --vien: #e3e0d9;
  --nhan: #b8862f;
  --nhan-dam: #9a6f22;
  --nhan-nhat: #f6ecd9;
  --do: #c0392b;
  --xanh: #2f8f5b;
  --bong: 0 1px 2px rgba(20, 20, 30, .06), 0 8px 28px rgba(20, 20, 30, .07);
  --san: radial-gradient(120% 90% at 50% 35%, #3a3d45 0%, #23252b 55%, #15161a 100%);
  --kinh: rgba(28, 29, 34, .72);
  --kinh-chu: #f2f0ea;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nen: #121316;
    --be-mat: #1b1c20;
    --be-mat-2: #222328;
    --chu: #eceae5;
    --chu-phu: #a3a5ad;
    --vien: #303137;
    --nhan: #d9a84e;
    --nhan-dam: #e8bd6b;
    --nhan-nhat: #2d2618;
    --do: #ef6b5b;
    --xanh: #54c287;
    --bong: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --nen: #121316;
  --be-mat: #1b1c20;
  --be-mat-2: #222328;
  --chu: #eceae5;
  --chu-phu: #a3a5ad;
  --vien: #303137;
  --nhan: #d9a84e;
  --nhan-dam: #e8bd6b;
  --nhan-nhat: #2d2618;
  --do: #ef6b5b;
  --xanh: #54c287;
  --bong: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--nen);
  color: var(--chu);
  font: 15px/1.55 "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

/* ================= TRANG TẠO SÁCH ================= */
.dau-trang {
  max-width: 1080px; margin: 0 auto; padding: 22px 16px 6px;
  display: flex; align-items: center; gap: 12px;
}
.logo {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--nhan), var(--nhan-dam)); color: #fff;
}
.logo svg { width: 22px; height: 22px; }
.dau-trang h1 { font-size: 19px; margin: 0; letter-spacing: -.01em; }
.dau-trang p { margin: 0; color: var(--chu-phu); font-size: 13px; }

main { max-width: 1080px; margin: 0 auto; padding: 12px 16px 64px; }
.the {
  background: var(--be-mat); border: 1px solid var(--vien); border-radius: 18px;
  box-shadow: var(--bong); padding: 22px; margin-top: 16px;
}
.the h2 { font-size: 16px; margin: 0 0 4px; }
.the .mo-ta { margin: 0 0 14px; color: var(--chu-phu); font-size: 13.5px; }

.vung-tha {
  display: block; border: 2px dashed var(--vien); border-radius: 16px; padding: 46px 18px; text-align: center;
  background: var(--be-mat-2); transition: border-color .2s, background .2s, transform .2s;
  cursor: pointer;
}
.vung-tha:hover, .vung-tha.dang-keo { border-color: var(--nhan); background: var(--nhan-nhat); }
.vung-tha.dang-keo { transform: scale(1.01); }
.vung-tha__icon {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center;
  background: var(--be-mat); border: 1px solid var(--vien); color: var(--nhan);
}
.vung-tha__icon svg { width: 30px; height: 30px; }
.vung-tha b { display: block; font-size: 17px; margin-bottom: 4px; }
.vung-tha span { color: var(--chu-phu); font-size: 13.5px; }
.cac-loai { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.cac-loai i {
  font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px;
  background: var(--be-mat); border: 1px solid var(--vien); color: var(--chu-phu);
}

.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--vien); background: var(--be-mat); border-radius: 12px;
  padding: 10px 16px; font-weight: 600; font-size: 14.5px; text-decoration: none; color: var(--chu);
  transition: background .15s, border-color .15s, transform .1s;
}
.nut:hover { border-color: var(--nhan); }
.nut:active { transform: scale(.98); }
.nut:disabled { opacity: .5; cursor: not-allowed; }
.nut--chinh { background: var(--nhan); border-color: var(--nhan); color: #fff; }
.nut--chinh:hover { background: var(--nhan-dam); border-color: var(--nhan-dam); }
.nut--nho { padding: 6px 10px; font-size: 13px; border-radius: 9px; }
.nut--do { color: var(--do); }

.hang-tieu-de { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0 10px; }
.hang-tieu-de label { font-weight: 600; font-size: 13.5px; }
.o-nhap {
  flex: 1; min-width: 200px; padding: 10px 13px; border-radius: 11px; border: 1px solid var(--vien);
  background: var(--be-mat-2); outline: none;
}
.o-nhap:focus { border-color: var(--nhan); }

.ds-tep { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ds-tep li {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--vien); background: var(--be-mat-2);
}
.ds-tep li.keo { opacity: .45; }
.ds-tep li.tren { border-color: var(--nhan); }
.ds-tep .tay-nam { cursor: grab; color: var(--chu-phu); display: grid; }
.nhan-loai {
  width: 46px; height: 46px; flex: none; border-radius: 10px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: #fff; text-transform: uppercase; overflow: hidden;
}
.nhan-loai img { width: 100%; height: 100%; object-fit: cover; }
.ds-tep .thong-tin { flex: 1; min-width: 0; }
.ds-tep .ten { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-tep .phu { font-size: 12.5px; color: var(--chu-phu); }
.ds-tep .phu .ok { color: var(--xanh); font-weight: 600; }
.ds-tep .phu .canh-bao { color: var(--do); }
.ds-tep .cum-nut { display: flex; gap: 4px; }
.ds-tep .cum-nut button {
  border: 0; background: transparent; width: 32px; height: 32px; border-radius: 8px; color: var(--chu-phu);
  display: grid; place-items: center;
}
.ds-tep .cum-nut button:hover { background: var(--vien); color: var(--chu); }
.ds-tep .cum-nut svg { width: 17px; height: 17px; }

.hang-nut { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }
.thanh-tien-do { height: 8px; border-radius: 99px; background: var(--vien); overflow: hidden; margin-top: 14px; }
.thanh-tien-do i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--nhan), var(--nhan-dam)); transition: width .25s; }
.dong-tien-do { font-size: 13px; color: var(--chu-phu); margin-top: 8px; min-height: 20px; }

.khung-xem-thu { height: min(78vh, 820px); min-height: 440px; border-radius: 16px; overflow: hidden; margin-top: 4px; }
.hop-link {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; padding: 12px;
  border-radius: 12px; background: var(--nhan-nhat); border: 1px solid var(--nhan);
}
.hop-link input { flex: 1; min-width: 220px; border: 0; background: transparent; font-weight: 600; outline: none; }

.ds-da-tao { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ds-da-tao li {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--vien); background: var(--be-mat-2); flex-wrap: wrap;
}
.ds-da-tao .thong-tin { flex: 1; min-width: 160px; }
.ds-da-tao a.ten { font-weight: 600; color: var(--chu); text-decoration: none; }
.ds-da-tao a.ten:hover { color: var(--nhan); }
.ds-da-tao .phu { font-size: 12.5px; color: var(--chu-phu); }
.trong { color: var(--chu-phu); font-size: 13.5px; margin: 0; }

.thong-bao {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
  background: #1c1d21; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px;
  transition: .25s; pointer-events: none; z-index: 99; max-width: calc(100% - 32px);
}
.thong-bao.hien { opacity: 1; transform: translate(-50%, 0); }

/* ================= KHUNG ĐỌC SÁCH ================= */
.doc-sach {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%;
  background: var(--san); color: var(--kinh-chu); overflow: hidden; user-select: none;
  -webkit-user-select: none;
}
.doc-sach:fullscreen { border-radius: 0; }
.san-khau { position: relative; flex: 1; min-height: 0; }

.che-do-lat { position: absolute; top: 46px; bottom: 78px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; perspective: 2400px; }
.khung-sach { position: relative; transition: transform .95s cubic-bezier(.35, .05, .2, 1); will-change: transform; }
.khung-sach::after { /* bóng đổ dưới quyển sách */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -26px; height: 34px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); filter: blur(6px); z-index: -1;
}
.vung-sach {
  opacity: 0; transform: translateY(46px) scale(.9) rotateX(10deg); transform-origin: 50% 100%;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1);
}
.doc-sach.vao .vung-sach { opacity: 1; transform: none; }

.trang { background: #fff; }
.trang__giay { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; }
.trang__giay img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.trang--video .trang__giay { background: #0d0d0f; }
/* nếp gáy sách: gradient mờ ở mép trong mỗi trang */
.stf__item.--left .trang__giay::after,
.stf__item.--right .trang__giay::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none;
}
.stf__item.--left .trang__giay::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .05) 35%, transparent); }
.stf__item.--right .trang__giay::after { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .2), rgba(0, 0, 0, .05) 35%, transparent); }
.trang--bia.stf__item .trang__giay::after { display: none; }
.stf__item.--hard { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.quyen-sach { cursor: grab; }
.quyen-sach:active { cursor: grabbing; }

.trang-media { position: relative; }
.trang-video { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.trang-video video { width: 100%; height: 100%; object-fit: contain; background: #000; }

.trang-tep {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8%;
  background: linear-gradient(160deg, #fbf8f2, #efe8db); color: #2a2b30;
}
.the-tep { text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.the-tep__icon { position: relative; width: 34%; max-width: 120px; aspect-ratio: 1; color: #b8862f; margin-bottom: 6px; }
.the-tep__icon svg { width: 100%; height: 100%; stroke-width: 1.2; }
.the-tep__icon span {
  position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); background: #b8862f; color: #fff;
  font: 700 clamp(9px, 1.4vw, 13px)/1 "Be Vietnam Pro", sans-serif; padding: 4px 7px; border-radius: 5px;
}
.the-tep__ten { font-weight: 700; font-size: clamp(12px, 1.6vw, 17px); word-break: break-word; max-width: 100%; }
.the-tep__co { font-size: clamp(11px, 1.2vw, 13px); color: #6c6e75; }
.the-tep audio { width: min(300px, 100%); margin-top: 8px; }
.the-tep__tai {
  margin-top: 10px; padding: 8px 16px; border-radius: 99px; background: #1c1d21; color: #fff !important;
  text-decoration: none; font-weight: 600; font-size: clamp(11px, 1.3vw, 14px);
}

.mui-ten {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .08); color: #fff;
  display: grid; place-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .25s, background .2s; z-index: 5;
}
.mui-ten--truoc { left: 18px; }
.mui-ten--sau { right: 18px; }
.che-do-lat:hover .mui-ten:not(:disabled) { opacity: 1; }
.mui-ten:hover { background: rgba(255, 255, 255, .2); }
.mui-ten:disabled { opacity: 0 !important; pointer-events: none; }

.goi-y-mo {
  position: absolute; left: 50%; top: -34px; transform: translateX(-50%); font-size: 12.5px; font-weight: 600;
  letter-spacing: .02em; padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .85); pointer-events: none; animation: nhip 2.2s ease-in-out infinite;
  transition: opacity .4s;
}
.doc-sach.da-mo .goi-y-mo { opacity: 0; animation: none; }
@keyframes nhip { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---- chế độ Cuộn ---- */
.che-do-cuon { position: absolute; inset: 0; overflow-y: auto; container-type: size; overscroll-behavior: contain; }
.cot-trang { display: flex; flex-direction: column; align-items: center; gap: 34px; padding: 34px 16px 110px; perspective: 1600px; }
.trang-cuon {
  position: relative; flex: none;
  width: min(900px, calc(100cqw - 32px), calc((100cqh - 120px) * var(--ti-le)));
  aspect-ratio: var(--ti-le); border-radius: 4px; background: #fff; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25), 0 22px 50px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(70px) rotateX(16deg) scale(.95); transform-origin: 50% 0;
  transition: opacity .8s ease, transform 1s cubic-bezier(.2, .75, .2, 1), box-shadow .35s;
}
.trang-cuon.hien { opacity: 1; transform: none; }
.trang-cuon.hien:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 4px 10px rgba(0, 0, 0, .25), 0 34px 70px rgba(0, 0, 0, .45); }
.trang-cuon .trang__giay img { pointer-events: auto; }
.trang-cuon__so {
  position: absolute; right: 10px; bottom: 10px; font-size: 11.5px; font-weight: 700; padding: 3px 8px;
  border-radius: 99px; background: rgba(0, 0, 0, .55); color: #fff; opacity: 0; transition: opacity .25s;
}
.trang-cuon:hover .trang-cuon__so { opacity: 1; }

/* ---- thanh công cụ ---- */
.thanh-cong-cu {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 10;
  display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 16px;
  background: var(--kinh); border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); max-width: calc(100% - 24px); white-space: nowrap;
}
.nut-tron {
  width: 38px; height: 38px; border-radius: 11px; border: 0; background: transparent; color: var(--kinh-chu);
  display: grid; place-items: center; transition: background .15s; text-decoration: none;
}
.nut-tron:hover { background: rgba(255, 255, 255, .12); }
.nut-tron:disabled { opacity: .3; cursor: default; background: transparent; }
.so-trang { min-width: 74px; text-align: center; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vach { width: 1px; height: 22px; background: rgba(255, 255, 255, .14); margin: 0 2px; }
.chon-che-do { display: flex; background: rgba(255, 255, 255, .07); border-radius: 11px; padding: 3px; }
.chon-che-do button {
  display: flex; align-items: center; gap: 6px; border: 0; background: transparent; color: rgba(242, 240, 234, .7);
  padding: 6px 11px; border-radius: 8px; font-size: 13px; font-weight: 600; transition: .2s;
}
.chon-che-do button svg { width: 17px; height: 17px; }
.chon-che-do button.dang-chon { background: var(--kinh-chu); color: #1c1d21; }

@media (max-width: 640px) {
  .mui-ten { display: none; }
  .thanh-cong-cu { bottom: 10px; gap: 2px; padding: 4px; }
  .chon-che-do button span { display: none; }
  .chon-che-do button { padding: 7px 10px; }
  .so-trang { min-width: 60px; font-size: 12.5px; }
  .vach { display: none; }
  .nut-tron { width: 36px; height: 36px; }
  .che-do-lat { top: 44px; bottom: 62px; }
  .goi-y-mo { top: auto; bottom: -2px; }
  .the { padding: 16px; border-radius: 16px; }
  .vung-tha { padding: 30px 14px; }
  .khung-xem-thu { height: 72vh; min-height: 380px; }
}

/* ================= TRANG XEM ================= */
.trang-xem, .trang-xem body { height: 100%; overflow: hidden; background: #15161a; }
.trang-xem #sach { position: fixed; inset: 0; }
.tieu-de-xem {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; pointer-events: none; padding: 13px 16px 16px;
  background: linear-gradient(rgba(21, 22, 26, .92), rgba(21, 22, 26, 0));
  color: #f2f0ea; font-weight: 700; font-size: 15px; text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.man-cho {
  position: fixed; inset: 0; display: grid; place-items: center; color: #d6d3cc; text-align: center;
  background: radial-gradient(120% 90% at 50% 35%, #3a3d45 0%, #23252b 55%, #15161a 100%); padding: 16px;
}
.vong-xoay { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .15); border-top-color: #d9a84e; animation: xoay 1s linear infinite; margin: 0 auto 14px; }
@keyframes xoay { to { transform: rotate(360deg); } }