.doc218-viewer{--doc218-bg:#eef4f8;--doc218-ink:#08233f;--doc218-blue:#0b5bd3;--doc218-visual-zoom:1;margin:34px 0;border:1px solid #d9e3ec;border-radius:20px;background:linear-gradient(180deg,#f8fbfd,#edf4f8);box-shadow:0 18px 45px rgba(20,60,90,.08);overflow:hidden;color:var(--doc218-ink)}.doc218-titlebar{display:flex;justify-content:space-between;gap:18px;align-items:end;padding:19px 22px 13px}.doc218-titlebar span{font-size:.69rem;font-weight:900;letter-spacing:.14em;color:#547587}.doc218-titlebar h2{margin:5px 0 0;font-size:clamp(1.2rem,2.6vw,1.85rem)}.doc218-status{font-size:.78rem;color:#6f8090;text-align:right}.doc218-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid #dce5ed;border-bottom:1px solid #d7e1ea;background:#fff}.doc218-toolbar button,.doc218-download{border:1px solid #d3dde7;background:#fff;color:#163a5d;border-radius:9px;padding:8px 10px;font:inherit;font-size:.8rem;font-weight:800;cursor:pointer;text-decoration:none}.doc218-toolbar button:hover,.doc218-toolbar button.active,.doc218-download:hover{border-color:#8cb4df;background:#edf6ff;color:#0753ad}.doc218-sep{width:1px;height:25px;background:#dbe2ea;margin:0 3px}.doc218-page-input{display:flex;align-items:center;gap:5px;font-size:.8rem}.doc218-page-input input{width:58px;border:1px solid #d3dde7;border-radius:8px;padding:7px 6px;text-align:center;font:inherit}.doc218-zoom{font-size:.75rem;font-weight:900;min-width:40px;text-align:center}.doc218-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:35px 18px;color:#607485;font-weight:700}.doc218-loading i{width:20px;height:20px;border:3px solid #c8d9ea;border-top-color:#0b5bd3;border-radius:50%;animation:doc218spin .8s linear infinite}@keyframes doc218spin{to{transform:rotate(360deg)}}.doc218-book{position:relative;min-height:620px;padding:30px 52px 42px;display:grid;place-items:center;overflow:auto;background:radial-gradient(circle at 50% 15%,#fff,#dce7ee 85%)}.doc218-book-stage{display:grid;grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr);align-items:center;max-width:1180px;width:100%;perspective:1800px;transform-origin:center top}.doc218-sheet{position:relative;background:#fff;min-height:260px;box-shadow:0 16px 35px rgba(12,42,65,.17);transition:transform .28s ease,opacity .28s ease;overflow:hidden}.doc218-sheet:first-child{border-radius:8px 2px 2px 8px;transform-origin:right center}.doc218-sheet:last-child{border-radius:2px 8px 8px 2px;transform-origin:left center}.doc218-sheet canvas{display:block;max-width:100%;height:auto;margin:auto;background:#fff}.doc218-sheet>span{position:absolute;bottom:5px;right:9px;background:rgba(255,255,255,.78);padding:2px 5px;border-radius:5px;font-size:.65rem;color:#6d7d8a}.doc218-sheet.is-empty{visibility:hidden}.doc218-gutter{height:94%;background:linear-gradient(90deg,rgba(30,45,55,.13),rgba(255,255,255,.6),rgba(30,45,55,.13));border-radius:999px}.doc218-book-stage.flip-next .doc218-sheet:last-child{animation:doc218Next .34s ease}.doc218-book-stage.flip-prev .doc218-sheet:first-child{animation:doc218Prev .34s ease}@keyframes doc218Next{0%{transform:rotateY(0)}50%{transform:rotateY(-13deg)}100%{transform:rotateY(0)}}@keyframes doc218Prev{0%{transform:rotateY(0)}50%{transform:rotateY(13deg)}100%{transform:rotateY(0)}}.doc218-edge{position:absolute;top:0;bottom:0;width:44px;border:0;background:transparent;cursor:pointer;z-index:3}.doc218-edge.prev{left:0}.doc218-edge.next{right:0}.doc218-edge:hover{background:linear-gradient(90deg,rgba(11,91,211,.09),transparent)}.doc218-edge.next:hover{background:linear-gradient(270deg,rgba(11,91,211,.09),transparent)}.doc218-scroll{padding:26px 14px 36px;display:grid;gap:22px;justify-items:center;background:#dfe8ee;max-height:82vh;overflow:auto}.doc218-scroll-page{width:min(920px,100%);background:#fff;box-shadow:0 8px 25px rgba(20,40,55,.16);position:relative}.doc218-scroll-page canvas{display:block;width:100%;height:auto}.doc218-scroll-page span{position:absolute;right:9px;bottom:7px;background:rgba(255,255,255,.8);padding:3px 6px;border-radius:5px;font-size:.68rem}.doc218-sentinel{height:1px}.doc218-error{padding:30px;color:#a02929;background:#fff3f3;font-weight:700}.doc218-viewer:fullscreen{background:#dce7ee;overflow:auto}.doc218-viewer:fullscreen .doc218-book{min-height:calc(100vh - 150px)}.doc218-viewer:fullscreen .doc218-scroll{max-height:calc(100vh - 150px)}@media(max-width:760px){.doc218-titlebar{align-items:flex-start;flex-direction:column}.doc218-status{text-align:left}.doc218-toolbar{position:sticky;top:0;z-index:8}.doc218-toolbar .doc218-sep{display:none}.doc218-book{min-height:440px;padding:20px 35px}.doc218-book-stage{grid-template-columns:1fr}.doc218-book-stage .doc218-gutter,.doc218-book-stage [data-right]{display:none}.doc218-sheet:first-child{border-radius:8px;transform-origin:center}.doc218-scroll{max-height:none;padding:14px 8px}.doc218-titlebar{padding:15px}.doc218-toolbar button,.doc218-download{padding:7px 8px;font-size:.74rem}}


/* =========================================================
   TRƯỜNG 218 - PAGE CURL V3
   Hướng vật lý đúng:
   - Trang phải -> lật sang TRÁI để đi tới
   - Trang trái -> lật sang PHẢI để quay lại
   ========================================================= */

/* Không hiện thông báo tải đầu trang */
.doc218-loading{display:none!important}

/* Viewer rộng hơn thân bài trên desktop */
@media(min-width:1000px){
  .doc218-viewer{
    width:min(1320px,calc(100vw - 56px));
    max-width:none;
    position:relative;
    left:50%;
    transform:translateX(-50%);
  }
  .doc218-book{min-height:760px;padding:34px 56px 48px}
  .doc218-book-stage{width:calc(100% * var(--doc218-visual-zoom));max-width:1480px}
}

.doc218-book-stage{
  position:relative;
  isolation:isolate;
  perspective:2200px;
  perspective-origin:50% 50%;
  overflow:visible;
  transition:width .18s ease;
}
.doc218-sheet{
  z-index:2;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.doc218-gutter{z-index:4}

/* Trang nằm dưới tờ đang lật */
.doc218-turn-under{
  position:absolute;
  top:0;
  width:calc((100% - 14px)/2);
  height:100%;
  z-index:5;
  background:#fff;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  box-shadow:0 14px 32px rgba(15,42,66,.15);
  transition:opacity .12s ease;
}
.doc218-turn-under.next{left:calc(50% + 7px);border-radius:2px 8px 8px 2px}
.doc218-turn-under.prev{left:0;border-radius:8px 2px 2px 8px}
.doc218-turn-under.is-ready{opacity:1}
.doc218-turn-under canvas{display:block;width:100%;height:auto;background:#fff}

/* Một "tờ giấy" thật có 2 mặt */
.doc218-flip-sheet{
  --angle:0deg;
  position:absolute;
  top:0;
  width:calc((100% - 14px)/2);
  height:100%;
  z-index:8;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  pointer-events:none;
  will-change:transform;
  filter:drop-shadow(0 16px 22px rgba(15,42,66,.16));
}
.doc218-flip-sheet.next{
  left:calc(50% + 7px);
  transform-origin:left center;
  transform:rotateY(var(--angle));
}
.doc218-flip-sheet.prev{
  left:0;
  transform-origin:right center;
  transform:rotateY(var(--angle));
}
.doc218-flip-face{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#fff;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px rgba(10,40,66,.035);
}
.doc218-flip-sheet.next .doc218-flip-front{border-radius:2px 8px 8px 2px}
.doc218-flip-sheet.prev .doc218-flip-front{border-radius:8px 2px 2px 8px}
.doc218-flip-back{
  transform:rotateY(180deg);
}
.doc218-flip-sheet.next .doc218-flip-back{border-radius:8px 2px 2px 8px}
.doc218-flip-sheet.prev .doc218-flip-back{border-radius:2px 8px 8px 2px}
.doc218-flip-face canvas{display:block;width:100%;height:auto;background:#fff}

/* Ánh sáng ở nếp cong */
.doc218-flip-front::after,
.doc218-flip-back::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:var(--curl-shadow,0);
}
.doc218-flip-sheet.next .doc218-flip-front::after{
  background:linear-gradient(270deg,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.34) 11%,
    rgba(85,108,127,.14) 28%,
    transparent 54%);
}
.doc218-flip-sheet.next .doc218-flip-back::after{
  background:linear-gradient(90deg,
    rgba(255,255,255,.78) 0%,
    rgba(72,96,116,.16) 22%,
    transparent 50%);
}
.doc218-flip-sheet.prev .doc218-flip-front::after{
  background:linear-gradient(90deg,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.34) 11%,
    rgba(85,108,127,.14) 28%,
    transparent 54%);
}
.doc218-flip-sheet.prev .doc218-flip-back::after{
  background:linear-gradient(270deg,
    rgba(255,255,255,.78) 0%,
    rgba(72,96,116,.16) 22%,
    transparent 50%);
}

/* Góc giấy cong lên để gợi ý có thể lật */
.doc218-flip-sheet::after{
  content:"";
  position:absolute;
  top:0;
  width:115px;
  height:105px;
  z-index:15;
  opacity:var(--corner-opacity,0);
  pointer-events:none;
  filter:drop-shadow(0 9px 10px rgba(18,43,65,.15));
}
.doc218-flip-sheet.next::after{
  right:0;
  background:
    radial-gradient(ellipse at 100% 0,
      rgba(255,255,255,.98) 0 12%,
      rgba(246,249,251,.92) 22%,
      rgba(104,123,139,.20) 37%,
      transparent 58%);
  clip-path:polygon(28% 0,100% 0,100% 100%,78% 72%,61% 43%);
}
.doc218-flip-sheet.prev::after{
  left:0;
  background:
    radial-gradient(ellipse at 0 0,
      rgba(255,255,255,.98) 0 12%,
      rgba(246,249,251,.92) 22%,
      rgba(104,123,139,.20) 37%,
      transparent 58%);
  clip-path:polygon(0 0,72% 0,39% 43%,22% 72%,0 100%);
}

/* Vùng nhận thao tác thật: chỉ mép ngoài của đúng trang */
.doc218-sheet[data-turnable="next"]{cursor:default}
.doc218-sheet[data-turnable="prev"]{cursor:default}
.doc218-sheet.is-turn-hover{cursor:grab}
.doc218-book-stage.is-dragging{cursor:grabbing}
.doc218-book-stage.is-dragging .doc218-sheet{cursor:grabbing}

/* Gợi ý mũi tên ở mép */
.doc218-turn-hint{
  position:absolute;
  z-index:12;
  top:50%;
  transform:translateY(-50%);
  width:42px;height:76px;
  display:grid;place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(11,91,211,.18);
  color:#0b5bd3;
  font-size:28px;
  font-weight:900;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  box-shadow:0 10px 25px rgba(15,45,76,.12);
}
.doc218-turn-hint.prev{left:10px;transform:translateY(-50%) translateX(-8px)}
.doc218-turn-hint.next{right:10px;transform:translateY(-50%) translateX(8px)}
.doc218-turn-hint.active{opacity:.9}
.doc218-turn-hint.prev.active{transform:translateY(-50%) translateX(0)}
.doc218-turn-hint.next.active{transform:translateY(-50%) translateX(0)}

.doc218-scroll-page{
  width:min(calc(920px * var(--doc218-visual-zoom)),calc(100% - 8px));
}

/* Full screen */
.doc218-viewer:fullscreen{
  width:100vw;
  max-width:none;
  left:0;
  transform:none;
  margin:0;
  border:0;
  border-radius:0;
}
.doc218-viewer:fullscreen .doc218-titlebar{padding:12px 18px 8px}
.doc218-viewer:fullscreen .doc218-toolbar{padding:8px 12px}
.doc218-viewer:fullscreen .doc218-book{
  min-height:calc(100vh - 118px);
  height:calc(100vh - 118px);
  padding:18px 54px 22px;
  overflow:auto;
}
.doc218-viewer:fullscreen .doc218-book-stage{
  width:calc(100% * var(--doc218-visual-zoom));
  max-width:1720px;
  perspective:2600px;
}
.doc218-viewer:fullscreen .doc218-scroll{
  max-height:calc(100vh - 118px);
  height:calc(100vh - 118px);
}

/* Tắt animation flip cũ để không xung đột */
.doc218-book-stage.flip-next .doc218-sheet:last-child,
.doc218-book-stage.flip-prev .doc218-sheet:first-child{
  animation:none!important;
}

@media(max-width:999px){
  .doc218-viewer{--doc218-visual-zoom:1}
}
@media(hover:none),(max-width:760px){
  .doc218-flip-sheet,.doc218-turn-under,.doc218-turn-hint{display:none!important}
}


/* =====================================================
   FIX 218: chế độ Lật sách / Cuộn trang không chồng nhau
   ===================================================== */
.doc218-viewer [hidden]{
  display:none!important;
}

/* Khi đang cuộn dọc, ẩn các điều khiển chỉ dành cho lật sách */
.doc218-viewer[data-view-mode="scroll"] [data-action="prev"],
.doc218-viewer[data-view-mode="scroll"] [data-action="next"],
.doc218-viewer[data-view-mode="scroll"] .doc218-page-input{
  display:none!important;
}

/* Cuộn dọc không được tạo thanh cuộn ngang */
.doc218-viewer[data-view-mode="scroll"] .doc218-scroll{
  overflow-x:hidden;
}
.doc218-viewer[data-view-mode="scroll"] .doc218-scroll-page{
  max-width:calc(100% - 8px);
}

/* Lật sách thì sentinel/scroll tuyệt đối không chiếm chỗ */
.doc218-viewer[data-view-mode="book"] .doc218-scroll,
.doc218-viewer[data-view-mode="book"] .doc218-sentinel{
  display:none!important;
}