/* =========================================================================
   reader.css — lớp "sách mini có lật trang"
   Được chèn tự động vào mỗi cuốn sách lúc build (tools/build.mjs).
   Nguyên tắc: KHÔNG đụng vào CSS gốc của sách. Chỉ bọc bên ngoài.
   ========================================================================= */

:root{
  --fbk-chrome:#1B2340;
  --fbk-chrome-soft:#6A7196;
  --fbk-paper:#fff;
  --fbk-edge:rgba(27,35,64,.10);
  --fbk-accent:#E4572E;          /* build.mjs ghi đè bằng màu của từng cuốn */
  --fbk-bar:64px;
}

/* ---- khoá cuộn trang, sách chiếm trọn màn hình ---- */
html.fbk-on, html.fbk-on body{
  height:100%; overflow:hidden;
}
html.fbk-on body{
  display:flex; flex-direction:column;
  /* nền phòng đọc, tối hơn giấy để trang sách nổi lên */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(168deg,#232B4E 0%,#161C36 100%) !important;
}

/* ---- nội dung gốc dựa vào scroll để hiện ra: ép hiện luôn ---- */
html.fbk-on .rv{opacity:1 !important; transform:none !important; transition:none !important}

/* ---- ẩn thanh chrome cố định của bản cuộn (XP bar, rail, counter) ---- */
html.fbk-on .xp,
html.fbk-on .xp-tag,
html.fbk-on .rail,
html.fbk-on .counter{display:none !important}

/* =============================== THANH TRÊN =============================== */
.fbk-top{
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:10px 14px; color:#fff;
  padding-top:max(10px, env(safe-area-inset-top));
}
.fbk-back{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 14px 0 11px; border-radius:99px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  color:#fff; text-decoration:none; font:600 14px/1 "Be Vietnam Pro",system-ui,sans-serif;
  white-space:nowrap; transition:background .2s ease;
}
.fbk-back:hover{background:rgba(255,255,255,.22)}
.fbk-title{
  flex:1 1 auto; min-width:0; text-align:center;
  font:600 14.5px/1.35 "Be Vietnam Pro",system-ui,sans-serif;
  color:rgba(255,255,255,.92);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fbk-count{
  flex:0 0 auto; font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:rgba(255,255,255,.62); font-variant-numeric:tabular-nums;
  min-width:56px; text-align:right;
}

/* =============================== SÂN KHẤU =============================== */
.fbk-stage{
  flex:1 1 auto; position:relative; min-height:0;
  perspective:2200px; perspective-origin:50% 45%;
  padding:4px 12px 0;
}

/* mỗi trang là một tờ giấy xếp chồng */
.fbk-page{
  position:absolute; inset:4px 12px 0;
  background:var(--fbk-paper);
  border-radius:16px 6px 6px 16px;   /* bo tròn phía gáy */
  overflow:hidden;
  box-shadow:
    0 22px 50px rgba(0,0,0,.34),
    0 2px 0 rgba(255,255,255,.5) inset;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  visibility:hidden;
  will-change:transform;
}
/* gáy sách: dải tối dọc mép trái */
.fbk-page::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:22px; z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,0,0,.16) 0%, rgba(0,0,0,.06) 42%, transparent 100%);
}
.fbk-page.is-current{visibility:visible; z-index:2}
.fbk-page.is-anim{visibility:visible}

/* vùng cuộn bên trong một trang */
.fbk-scroll{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:auto;
  padding-bottom:26px;
  overscroll-behavior:contain;
}
.fbk-scroll::-webkit-scrollbar{width:9px}
.fbk-scroll::-webkit-scrollbar-thumb{
  background:rgba(27,35,64,.20); border-radius:9px;
  border:2px solid transparent; background-clip:padding-box;
}

/* gợi ý "còn nội dung bên dưới" — dùng đúng màu giấy của cuốn sách */
.fbk-page.has-more::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46px; z-index:3;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--fbk-paper));
}

/* ------------------------- HIỆU ỨNG LẬT ------------------------- */
@keyframes fbk-out-next{
  from{transform:rotateY(0deg)      translateZ(0);   filter:brightness(1)}
  to  {transform:rotateY(-118deg)   translateZ(30px);filter:brightness(.72)}
}
@keyframes fbk-in-next{
  from{transform:rotateY(26deg)  translateZ(-40px); filter:brightness(.82)}
  to  {transform:rotateY(0deg)   translateZ(0);     filter:brightness(1)}
}
@keyframes fbk-out-prev{
  from{transform:rotateY(0deg)    translateZ(0);    filter:brightness(1)}
  to  {transform:rotateY(26deg)   translateZ(-40px);filter:brightness(.82)}
}
@keyframes fbk-in-prev{
  from{transform:rotateY(-118deg) translateZ(30px); filter:brightness(.72)}
  to  {transform:rotateY(0deg)    translateZ(0);    filter:brightness(1)}
}
.fbk-page.out-next{transform-origin:left center;  animation:fbk-out-next .52s cubic-bezier(.5,.05,.35,1) both; z-index:4}
.fbk-page.in-next {transform-origin:left center;  animation:fbk-in-next  .52s cubic-bezier(.3,.4,.2,1)   both; z-index:3}
.fbk-page.out-prev{transform-origin:left center;  animation:fbk-out-prev .52s cubic-bezier(.5,.05,.35,1) both; z-index:3}
.fbk-page.in-prev {transform-origin:left center;  animation:fbk-in-prev  .52s cubic-bezier(.3,.4,.2,1)   both; z-index:4}

@media (prefers-reduced-motion:reduce){
  .fbk-page.out-next,.fbk-page.in-next,
  .fbk-page.out-prev,.fbk-page.in-prev{animation-duration:.001s}
}

/* vùng bấm trái/phải trên desktop */
.fbk-hit{
  position:absolute; top:0; bottom:0; width:9%; z-index:6; cursor:pointer;
  background:transparent; border:0; -webkit-tap-highlight-color:transparent;
}
.fbk-hit--prev{left:0}
.fbk-hit--next{right:0}
@media (hover:none){.fbk-hit{display:none}}

/* =============================== THANH DƯỚI =============================== */
.fbk-bot{
  flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding:12px 16px; padding-bottom:max(12px, env(safe-area-inset-bottom));
}
.fbk-nav{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.20);
  color:#fff; cursor:pointer; transition:background .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.fbk-nav:hover:not(:disabled){background:var(--fbk-accent); border-color:transparent}
.fbk-nav:disabled{opacity:.25; cursor:default}

.fbk-dots{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  gap:7px; flex-wrap:nowrap; overflow:hidden;
}
.fbk-dot{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto; padding:0;
  background:rgba(255,255,255,.26); border:0; cursor:pointer;
  transition:background .2s ease, width .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.fbk-dot.is-on{background:var(--fbk-accent); width:22px; border-radius:99px}

/* nhiều trang quá thì đổi sang thanh tiến trình */
.fbk-bar{flex:1 1 auto; height:6px; border-radius:99px; background:rgba(255,255,255,.18); overflow:hidden}
.fbk-bar i{display:block; height:100%; width:0; border-radius:99px;
  background:var(--fbk-accent); transition:width .35s cubic-bezier(.3,.4,.2,1)}

/* =============================== ĐỌC TIẾP =============================== */
.fbk-resume{
  position:fixed; left:50%; bottom:calc(var(--fbk-bar) + 18px); transform:translateX(-50%);
  z-index:40; display:flex; align-items:center; gap:10px;
  background:#fff; color:var(--fbk-chrome); border-radius:99px;
  padding:9px 10px 9px 18px; box-shadow:0 12px 34px rgba(0,0,0,.30);
  font:500 14px/1 "Be Vietnam Pro",system-ui,sans-serif;
  animation:fbk-pop .35s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes fbk-pop{from{opacity:0; transform:translate(-50%,14px)} to{opacity:1; transform:translate(-50%,0)}}
.fbk-resume button{
  border:0; border-radius:99px; padding:9px 15px; cursor:pointer;
  font:600 14px/1 "Be Vietnam Pro",system-ui,sans-serif;
}
.fbk-resume .yes{background:var(--fbk-accent); color:#fff}
.fbk-resume .no{background:transparent; color:var(--fbk-chrome-soft)}

/* ============================ HUY HIỆU PHÚT ============================ */
.fbk-earn{
  position:fixed; left:50%; top:calc(env(safe-area-inset-top) + 62px); transform:translateX(-50%);
  z-index:45; pointer-events:none;
  background:#fff; color:var(--fbk-chrome); border-radius:99px;
  padding:9px 17px; box-shadow:0 12px 30px rgba(0,0,0,.28);
  font:600 13.5px/1 "Be Vietnam Pro",system-ui,sans-serif; white-space:nowrap;
  animation:fbk-earn 2.4s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes fbk-earn{
  0%  {opacity:0; transform:translate(-50%,-12px) scale(.9)}
  12% {opacity:1; transform:translate(-50%,0) scale(1)}
  80% {opacity:1; transform:translate(-50%,0) scale(1)}
  100%{opacity:0; transform:translate(-50%,-8px) scale(.98)}
}

/* ============================ MÀN HÌNH RỘNG ============================ */
@media (min-width:900px){
  .fbk-stage{padding:8px 0 0}
  .fbk-page{
    inset:8px 0 0; left:50%; right:auto; width:min(780px, 92vw);
    transform:translateX(-50%);
    border-radius:8px 18px 18px 8px;
  }
  /* animation phải giữ luôn phần translateX khi ở desktop */
  @keyframes fbk-out-next{
    from{transform:translateX(-50%) rotateY(0deg);    filter:brightness(1)}
    to  {transform:translateX(-50%) rotateY(-118deg); filter:brightness(.72)}
  }
  @keyframes fbk-in-next{
    from{transform:translateX(-50%) rotateY(26deg);   filter:brightness(.82)}
    to  {transform:translateX(-50%) rotateY(0deg);    filter:brightness(1)}
  }
  @keyframes fbk-out-prev{
    from{transform:translateX(-50%) rotateY(0deg);    filter:brightness(1)}
    to  {transform:translateX(-50%) rotateY(26deg);   filter:brightness(.82)}
  }
  @keyframes fbk-in-prev{
    from{transform:translateX(-50%) rotateY(-118deg); filter:brightness(.72)}
    to  {transform:translateX(-50%) rotateY(0deg);    filter:brightness(1)}
  }
}

/* ===================== VÒNG TIẾN ĐỘ Ở THANH TRÊN =====================
   Con phải nhìn thấy đồng hồ đang chạy. Không có cái này thì con ngồi
   đọc cả phút mà màn hình im lặng — và sẽ tưởng là hệ thống hỏng. */
.fbk-ring{
  flex:0 0 auto; width:22px; height:22px; display:block; margin-right:2px;
  opacity:.9; cursor:default;
}
.fbk-ring svg{width:100%; height:100%; display:block; overflow:visible}
.fbk-ring .bg{
  fill:none; stroke:rgba(255,255,255,.18); stroke-width:3;
}
.fbk-ring .arc{
  fill:none; stroke:var(--fbk-accent); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:62.8; stroke-dashoffset:62.8;
  transition:stroke-dashoffset .9s linear, stroke .3s ease;
}
.fbk-ring.done .arc{stroke:#5FD08A}
.fbk-ring.done{opacity:.55}
@media (prefers-reduced-motion:reduce){
  .fbk-ring .arc{transition:none}
}

/* thông báo mốc chuỗi ngày — dùng chung với trang chủ */
.tv-mung{
  position:fixed; left:50%; bottom:calc(var(--fbk-bar) + 20px); transform:translateX(-50%);
  z-index:60; pointer-events:none; text-align:center;
  background:#fff; color:#1B2340; border-radius:18px;
  padding:15px 24px; box-shadow:0 16px 40px rgba(0,0,0,.34);
  font:400 17px/1.5 "Be Vietnam Pro",system-ui,sans-serif;
  max-width:min(340px,88vw);
  animation:tv-mung 4.6s cubic-bezier(.2,.8,.3,1) both;
}
.tv-mung b{font-family:"Baloo 2",sans-serif; font-weight:700; font-size:19px}
.tv-mung span{display:block; margin-top:5px; font-size:14.5px; color:#6A7196; font-weight:300}
@keyframes tv-mung{
  0%{opacity:0; transform:translate(-50%,18px) scale(.94)}
  8%{opacity:1; transform:translate(-50%,0) scale(1)}
  88%{opacity:1; transform:translate(-50%,0) scale(1)}
  100%{opacity:0; transform:translate(-50%,-8px) scale(.98)}
}
@media (prefers-reduced-motion:reduce){ .tv-mung{animation:none} }