/* SÁCH LẬT — giao diện trình xem */

:root{
  --chinh:#e8b923;
  --nen-thanh:rgba(18,22,30,.82);
  --vien:rgba(255,255,255,.14);
  --chu:#fff;
  --bo:14px;
}
*{box-sizing:border-box}
/* Bắt buộc: `display` trong CSS mạnh hơn thuộc tính hidden của HTML. Thiếu dòng này thì
   #ung-dung (display:flex) hiện đè lên màn hình nạp, và các nút bị tắt quyền (.nut display:grid)
   vẫn hiện nguyên. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;overflow:hidden;color:var(--chu);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:#111;
  -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit}
svg{width:20px;height:20px;fill:currentColor;display:block}

/* ── màn hình nạp ── */
#man-tai{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:linear-gradient(135deg,#141e30,#243b55);transition:opacity .45s}
#man-tai.tat{opacity:0;pointer-events:none}
.tai-hop{text-align:center;width:min(320px,80vw)}
.tai-sach{display:flex;gap:6px;justify-content:center;margin-bottom:22px;height:52px;align-items:flex-end}
.tai-sach span{width:12px;background:var(--chinh);border-radius:3px;animation:nhay 1s infinite ease-in-out}
.tai-sach span:nth-child(1){animation-delay:0s;height:26px}
.tai-sach span:nth-child(2){animation-delay:.15s;height:40px}
.tai-sach span:nth-child(3){animation-delay:.3s;height:32px}
@keyframes nhay{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.tai-ten{font-size:16px;font-weight:600;margin-bottom:14px;opacity:.95;line-height:1.4}
.tai-thanh{height:4px;border-radius:4px;background:rgba(255,255,255,.16);overflow:hidden}
.tai-thanh i{display:block;height:100%;width:0;background:var(--chinh);transition:width .25s}
.tai-chu{margin-top:10px;font-size:13px;opacity:.6}

/* ── khung ứng dụng ── */
#ung-dung{position:fixed;inset:0;display:flex;flex-direction:column}

/* thanh trên */
#thanh-tren{
  position:absolute;top:0;left:0;right:0;z-index:30;height:52px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0));
  transition:opacity .3s, transform .3s;
}
#ung-dung.an-thanh #thanh-tren{opacity:0;transform:translateY(-10px);pointer-events:none}
.ben-trai{display:flex;align-items:center;gap:10px;min-width:0}
#logo img{height:30px;width:auto;display:block;border-radius:5px}
#ten-sach{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:min(46vw,520px);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ben-phai{display:flex;align-items:center;gap:2px}

.nut{
  width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:10px;cursor:pointer;
  background:transparent;color:#fff;opacity:.88;transition:background .18s,opacity .18s,transform .12s;
}
.nut:hover{background:rgba(255,255,255,.15);opacity:1}
.nut:active{transform:scale(.93)}
.nut.bat{background:var(--chinh);color:#1a1206;opacity:1}
.nut.chu{width:auto;padding:0 12px;font-size:13px;font-weight:600;letter-spacing:.2px}
.nut[disabled]{opacity:.28;pointer-events:none}
.vach{width:1px;height:22px;background:var(--vien);margin:0 5px}
.vach.doc{height:26px}

/* sân khấu */
#san-khau{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#vung-sach{position:relative;width:100%;height:100%;display:grid;place-items:center;
  padding:58px 62px 74px;overflow:hidden;transition:padding .28s cubic-bezier(.4,0,.2,1)}
/* mở ngăn trái thì nhường chỗ, không để ngăn đè lên sách */
@media (min-width:900px){
  #ung-dung.ngan-mo #vung-sach{padding-left:312px}
  #ung-dung.ngan-mo .mui-ten.trai{left:308px}
}
#khung-sach{transition:transform .22s ease-out;will-change:transform}
#khung-sach.keo{transition:none}
#sach{margin:0 auto}
#lop-keo{position:absolute;inset:0;z-index:12;cursor:grab}
#lop-keo.dang-keo{cursor:grabbing}

.mui-ten{
  position:absolute;top:50%;transform:translateY(-50%);z-index:20;
  width:48px;height:70px;border:0;border-radius:12px;cursor:pointer;
  background:rgba(0,0,0,.32);color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(6px);transition:background .2s,opacity .2s;opacity:.75;
}
.mui-ten svg{width:26px;height:26px}
.mui-ten:hover{background:rgba(0,0,0,.55);opacity:1}
.mui-ten[disabled]{opacity:.15;pointer-events:none}
.mui-ten.trai{left:8px}
.mui-ten.phai{right:8px}
#ung-dung.an-thanh .mui-ten{opacity:0;pointer-events:none}

/* thanh dưới */
#thanh-duoi{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:30;
  display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:16px;
  background:var(--nen-thanh);border:1px solid var(--vien);backdrop-filter:blur(14px);
  box-shadow:0 10px 34px rgba(0,0,0,.45);transition:opacity .3s,transform .3s;
}
#ung-dung.an-thanh #thanh-duoi{opacity:0;transform:translateX(-50%) translateY(14px);pointer-events:none}
.cum{display:flex;align-items:center;gap:2px}
.so-trang{display:flex;align-items:center;gap:5px;padding:0 6px;font-size:13px;font-variant-numeric:tabular-nums}
#o-trang{width:44px;height:30px;text-align:center;border-radius:8px;border:1px solid var(--vien);
  background:rgba(0,0,0,.3);color:#fff;font-size:13px;outline:none}
#o-trang:focus{border-color:var(--chinh)}
#tong-trang{opacity:.6;white-space:nowrap}

/* ngăn kéo trái */
#ngan{
  position:absolute;top:0;left:0;bottom:0;width:300px;z-index:40;
  background:rgba(14,17,23,.94);backdrop-filter:blur(16px);border-right:1px solid var(--vien);
  transform:translateX(-104%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
#ngan.mo{transform:none}
.ngan-dinh{display:flex;align-items:center;justify-content:space-between;padding:10px 8px 10px 16px;
  border-bottom:1px solid var(--vien);flex:0 0 auto}
.ngan-ten{font-size:14px;font-weight:600}
.ngan-than{flex:1;overflow-y:auto;overscroll-behavior:contain}
.ngan-than::-webkit-scrollbar{width:8px}
.ngan-than::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:8px}
.bang{padding:12px}

/* trang thu nhỏ */
#bang-thumb{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.thumb{cursor:pointer;border-radius:7px;overflow:hidden;border:2px solid transparent;background:rgba(255,255,255,.06);
  transition:border-color .18s,transform .12s;position:relative}
.thumb:hover{transform:translateY(-2px)}
.thumb.dang{border-color:var(--chinh)}
.thumb canvas,.thumb .tam{display:block;width:100%;height:auto;background:#fff}
.thumb .tam{aspect-ratio:.707}
.thumb b{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:11px;font-weight:600;
  background:rgba(0,0,0,.6);padding:2px 0}

/* mục lục */
.ml-muc{display:block;width:100%;text-align:left;background:transparent;border:0;color:#fff;
  padding:9px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;line-height:1.45;opacity:.9}
.ml-muc:hover{background:rgba(255,255,255,.1);opacity:1}
.ml-c1{padding-left:24px;font-size:13px;opacity:.78}
.ml-c2{padding-left:38px;font-size:12.5px;opacity:.68}
.trong{opacity:.5;font-size:13px;padding:16px 10px;text-align:center;line-height:1.6}

/* tìm kiếm */
.tim-o{display:flex;gap:6px;margin-bottom:10px}
#o-tim{flex:1;height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--vien);
  background:rgba(0,0,0,.3);color:#fff;font-size:14px;outline:none}
#o-tim:focus{border-color:var(--chinh)}
.tim-tt{font-size:12px;opacity:.6;margin-bottom:8px;min-height:16px}
.kq{display:block;width:100%;text-align:left;background:rgba(255,255,255,.05);border:0;color:#fff;
  padding:9px 11px;border-radius:9px;cursor:pointer;margin-bottom:6px;font-size:13px;line-height:1.5}
.kq:hover{background:rgba(255,255,255,.13)}
.kq i{color:var(--chinh);font-style:normal;font-weight:700}
.kq u{display:block;font-size:11px;opacity:.55;text-decoration:none;margin-bottom:3px}

/* lớp phủ + hộp thoại */
#lop-phu{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.hop-thoai{
  position:fixed;z-index:50;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(460px,92vw);max-height:88vh;overflow:auto;border-radius:18px;
  background:#1b2029;border:1px solid var(--vien);box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.ht-dinh{display:flex;align-items:center;justify-content:space-between;padding:14px 10px 14px 20px;
  border-bottom:1px solid var(--vien);font-size:15px}
.ht-than{padding:18px 20px 22px}
.ht-than label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.6px;opacity:.55;
  margin:14px 0 7px;font-weight:600}
.ht-than label:first-child{margin-top:0}
.hang{display:flex;gap:8px}
.hang input,.hang textarea{flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--vien);
  background:rgba(0,0,0,.32);color:#fff;font-size:13px;outline:none;font-family:inherit;resize:vertical}
.hang textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.5}
.nut-chinh{padding:10px 16px;border:0;border-radius:10px;background:var(--chinh);color:#20160a;
  font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.nut-chinh:hover{filter:brightness(1.08)}
.nut-chinh.rong{width:100%;margin-top:8px}
.nut-phu{padding:9px 14px;border:1px solid var(--vien);border-radius:10px;background:transparent;
  color:#fff;font-size:13px;cursor:pointer}
.nut-phu:hover{background:rgba(255,255,255,.1)}
.mxh{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.nut-mxh{display:block;text-align:center;padding:10px;border-radius:10px;text-decoration:none;color:#fff;
  font-size:13px;font-weight:600;cursor:pointer}
.nut-mxh.fb{background:#1877f2}
.nut-mxh.zl{background:#0068ff}
.nut-mxh.x{background:#000;border:1px solid #333}
.nut-mxh.mail{background:#5a6472}
.nut-mxh:hover{filter:brightness(1.12)}
.qr-hop{display:flex;align-items:center;gap:14px}
#qr{background:#fff;padding:8px;border-radius:10px;line-height:0}
#qr img,#qr canvas{display:block;width:104px;height:104px;image-rendering:pixelated}
.phim div{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:13.5px}
.phim span{margin-left:auto;opacity:.7}
kbd{background:rgba(255,255,255,.12);border:1px solid var(--vien);border-bottom-width:2px;border-radius:6px;
  padding:2px 7px;font-size:12px;font-family:inherit;min-width:26px;text-align:center;display:inline-block}
.ghi-chu{display:block!important;margin-top:14px;padding-top:14px;border-top:1px solid var(--vien);
  font-size:12.5px;opacity:.6;line-height:1.6}

/* bánh mì báo nhanh */
#banh-mi{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:60;
  background:rgba(0,0,0,.86);color:#fff;padding:10px 18px;border-radius:12px;font-size:13.5px;
  border:1px solid var(--vien);animation:len .25s}
@keyframes len{from{opacity:0;transform:translateX(-50%) translateY(8px)}}

/* nút kêu gọi hành động */
#cta{position:absolute;right:16px;bottom:78px;z-index:31;background:var(--chinh);color:#20160a;
  padding:12px 20px;border-radius:12px;font-weight:700;font-size:14px;text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.4)}
#cta:hover{filter:brightness(1.08)}

/* ── trang sách ── */
.trang{background:#fff;overflow:hidden;position:relative}
.trang.mem{box-shadow:inset 0 0 22px rgba(0,0,0,.12)}
.trang canvas{display:block;width:100%;height:100%;position:absolute;inset:0}
.trang .cho{position:absolute;inset:0;display:grid;place-items:center;background:#f4f4f6;color:#999;
  font-size:13px;letter-spacing:.5px}
.trang .cho::after{content:'';width:26px;height:26px;border:3px solid #ddd;border-top-color:#aaa;
  border-radius:50%;animation:xoay .8s linear infinite}
@keyframes xoay{to{transform:rotate(360deg)}}
.trang .cho span{display:none}
/* bìa cứng */
.trang.bia{background:#2b2b2b}

/* lớp chữ (chọn/copy + tô sáng khi tìm) */
.lop-chu{position:absolute;inset:0;overflow:hidden;opacity:1;line-height:1;
  text-align:initial;transform-origin:0 0;z-index:2;forced-color-adjust:none}
.lop-chu span,.lop-chu br{color:transparent;position:absolute;white-space:pre;cursor:text;
  transform-origin:0% 0%}
.lop-chu ::selection{background:rgba(0,110,255,.32)}
.lop-chu .to{background:rgba(255,196,0,.45);border-radius:2px}
.lop-chu .to.dang{background:rgba(255,120,0,.62)}
#ung-dung.dang-lat .lop-chu{opacity:0;pointer-events:none}
.lop-lien-ket{position:absolute;inset:0;z-index:3}
.lop-lien-ket a{position:absolute;display:block;border-bottom:1px solid rgba(232,185,35,.0)}
.lop-lien-ket a:hover{background:rgba(232,185,35,.22);border-radius:2px}

/* page-flip cần vị trí tương đối.
   QUAN TRỌNG: dùng autoSize:false nên thư viện KHÔNG tự đặt chiều cao cho wrapper.
   Thư viện đo khung sách qua .stf__block (nằm trong wrapper) — thiếu height:100%
   thì block cao 0, các trang bị đẩy lên trên khỏi vùng nhìn và màn hình trống trơn. */
.stf__parent{position:relative;display:block;box-sizing:border-box;transform:translateZ(0);
  -ms-touch-action:pan-y;touch-action:pan-y}
.stf__wrapper{position:relative;width:100%;height:100%;box-sizing:border-box;
  -webkit-perspective:2000px;perspective:2000px}
.stf__block{position:absolute;width:100%;height:100%;box-sizing:border-box;left:0;top:0;overflow:hidden}
.stf__item{display:none;position:absolute;transform-style:preserve-3d}
.--simple{transition:transform .5s ease-in-out}
.stf__outerShadow,.stf__innerShadow,.stf__hardShadow,.stf__hardInnerShadow{position:absolute;left:0;top:0}

/* điện thoại */
@media (max-width:760px){
  #vung-sach{padding:52px 8px 84px}
  .mui-ten{width:38px;height:56px;opacity:.6}
  .mui-ten.trai{left:2px}
  .mui-ten.phai{right:2px}
  #ngan{width:min(86vw,320px)}
  #ten-sach{max-width:38vw;font-size:13px}
  #thanh-duoi{bottom:10px;gap:2px;padding:4px 6px}
  .chi-rong{display:none}
  .nut{width:34px;height:34px}
  .nut svg{width:18px;height:18px}
  #cta{right:10px;bottom:72px;padding:10px 16px;font-size:13px}
  .mxh{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  .ben-phai .nut[data-ngan="muc-luc"],#nut-in{display:none}
}

/* ───────── chế độ đọc: chữ chảy theo bề ngang, không tràn lề ───────── */
#doc{position:fixed;inset:0;z-index:120;background:#fbf7f2;color:#241d16;display:flex;flex-direction:column}
#doc[hidden]{display:none!important}
#doc-thanh{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 2px 10px rgba(0,0,0,.05);flex:0 0 auto}
#doc-thanh .nut{background:transparent;border:0;color:#241d16;cursor:pointer;padding:6px;border-radius:8px;line-height:0}
#doc-thanh .nut:hover{background:rgba(0,0,0,.06)}
#doc-thanh .nut svg{width:22px;height:22px;fill:currentColor}
#doc-ten{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
#doc-co{display:flex;align-items:center;gap:8px;flex:0 0 auto}
#doc-co .co-nho{font-size:12px;opacity:.6}
#doc-co .co-lon{font-size:19px;opacity:.6}
#doc-truot{width:130px;max-width:34vw;accent-color:#b0154a}
#doc-than{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:18px 0 60px}
#doc-noi-dung{width:100%;max-width:720px;margin:0 auto;padding:0 18px;box-sizing:border-box;
  font:19px/1.75 "Segoe UI","Noto Serif",Georgia,serif;
  overflow-wrap:anywhere;word-break:normal;hyphens:auto}
#doc-noi-dung p{margin:0 0 .85em;text-align:left}
#doc-noi-dung h2{font-size:1.28em;line-height:1.35;margin:1.4em 0 .5em;color:#8a1338;font-weight:700}
#doc-noi-dung h3{font-size:1.1em;margin:1.2em 0 .4em;color:#8a1338;font-weight:700}
#doc-noi-dung .moc-trang{display:flex;align-items:center;gap:10px;margin:1.6em 0 1em;
  color:rgba(0,0,0,.35);font-size:.72em;letter-spacing:2px;text-transform:uppercase}
#doc-noi-dung .moc-trang::before,#doc-noi-dung .moc-trang::after{content:"";flex:1;height:1px;background:rgba(0,0,0,.12)}
#doc-noi-dung img{max-width:100%;height:auto;display:block;margin:1em auto;border-radius:8px}
#doc-noi-dung .dang-tai{text-align:center;opacity:.6;padding:30px 0}
@media (max-width:520px){
  #doc-noi-dung{padding:0 15px}
  #doc-ten{font-size:13px}
  #doc-truot{width:104px}
}
@media (prefers-color-scheme:dark){
  #doc{background:#16120e;color:#e9e2d8}
  #doc-thanh{background:#1e1913;border-bottom-color:rgba(255,255,255,.08)}
  #doc-thanh .nut{color:#e9e2d8}
  #doc-noi-dung h2,#doc-noi-dung h3{color:#e8a0b8}
}

/* ───────── màn chào: hướng dẫn + mở khoá nhạc ───────── */
#chao{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(12,16,24,.72);backdrop-filter:blur(6px)}
#chao[hidden]{display:none!important}
.chao-hop{width:100%;max-width:420px;background:#fff;color:#241d16;border-radius:18px;padding:22px 20px 18px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);animation:chao-len .32s ease}
@keyframes chao-len{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.chao-ten{font-weight:700;font-size:16px;line-height:1.35;margin-bottom:14px;text-align:center;color:#8a1338}
.chao-muc{display:flex;gap:12px;align-items:flex-start;margin:12px 0;font-size:14px;line-height:1.6}
.chao-muc[hidden]{display:none}
.chao-icon{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:#fdeef3;color:#b0154a;
  display:grid;place-items:center}
.chao-icon svg{width:21px;height:21px;fill:currentColor}
#chao-vao{width:100%;margin-top:18px;padding:13px;border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,#b0154a,#7c0f35);color:#fff;font-size:15px;font-weight:600;letter-spacing:.3px}
#chao-vao:hover{filter:brightness(1.08)}
/* nhắc chỗ nút sau khi đóng màn chào */
.nut.nhac-nho{animation:nhac-nho 1.1s ease 3;border-radius:10px}
@keyframes nhac-nho{0%,100%{box-shadow:0 0 0 0 rgba(232,160,184,0)}50%{box-shadow:0 0 0 7px rgba(232,160,184,.55)}}
@media (max-width:520px){ .chao-hop{padding:18px 16px 15px} .chao-muc{font-size:13.5px} }
@media (prefers-color-scheme:dark){ .chao-hop{background:#1e1913;color:#e9e2d8} .chao-icon{background:#33232b} }