/* Duy Anh Web Pro — Sách lật PDF */
.dawp-flip{--fb-bg:#1f2937;--fb-ac:#2563eb;--fb-txt:#f9fafb;position:relative;box-sizing:border-box;margin:0 0 24px;max-width:100%}
.dawp-flip *,.dawp-flip-overlay *{box-sizing:border-box}
.dawp-flip-inline{min-height:240px}
.dawp-flip-note{padding:10px 14px;border:1px dashed #d1d5db;border-radius:8px;background:#f9fafb;color:#374151;font-size:14px}

/* Khung */
.dawp-flip-stage{display:flex;flex-direction:column;height:100%;min-height:240px;border-radius:12px;overflow:hidden;background:var(--fb-bg);color:var(--fb-txt);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.fb-area{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:8px;overflow:hidden;min-height:0}
.fb-area.fb-zoomed{overflow:auto;align-items:flex-start;justify-content:flex-start;-webkit-overflow-scrolling:touch}
.fb-area.fb-zoomed .fb-wrap{margin:auto;max-width:none}
.fb-area.fb-zoomed .fb-book{max-width:none}
.fb-wrap{flex:0 0 auto;display:flex;align-items:center;justify-content:center;max-width:100%}
.fb-book{position:relative;max-width:100%;filter:drop-shadow(0 18px 28px rgba(0,0,0,.35))}
.fb-book .stf__wrapper,.fb-book .stf__block{width:100%;height:100%}
.fb-page{background:#fff;overflow:hidden;box-shadow:inset 0 0 20px rgba(0,0,0,.06)}
.fb-page canvas{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.fb-page.--left{border-radius:6px 0 0 6px;box-shadow:inset -8px 0 18px -10px rgba(0,0,0,.25)}
.fb-page.--right{border-radius:0 6px 6px 0;box-shadow:inset 8px 0 18px -10px rgba(0,0,0,.25)}
.fb-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;opacity:.85}
.fb-msg::before{content:"";width:22px;height:22px;margin-right:10px;border:3px solid rgba(255,255,255,.35);border-top-color:var(--fb-txt);border-radius:50%;animation:fbSpin .8s linear infinite}
.fb-msg.fb-err::before{display:none}
@keyframes fbSpin{to{transform:rotate(360deg)}}

/* Thanh công cụ */
.fb-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(0,0,0,.28);backdrop-filter:blur(6px);font:500 13px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--fb-txt)}
.fb-bar-l{flex:1 1 0;min-width:0}
.fb-bar-m{flex:0 0 auto;display:flex;align-items:center;gap:2px}
.fb-bar-r{flex:1 1 0;display:flex;justify-content:flex-end;gap:2px}
.fb-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
.fb-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer;transition:background .15s;text-decoration:none}
.fb-btn:hover{background:rgba(255,255,255,.14)}
.fb-btn:focus-visible{outline:2px solid var(--fb-ac);outline-offset:1px}
.fb-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fb-num{display:inline-flex;align-items:center;margin:0 6px;white-space:nowrap}
.fb-inp{width:52px;height:30px;margin:0;padding:0 6px;border:1px solid rgba(255,255,255,.25);border-radius:6px;background:rgba(0,0,0,.25);color:inherit;font:inherit;text-align:center}
.fb-inp:focus{outline:none;border-color:var(--fb-ac)}
.fb-tot{opacity:.8}
@media (max-width:600px){.fb-bar-l{display:none}.fb-bar-r{flex:0 0 auto}.fb-bar-m{flex:1 1 auto;justify-content:center}.fb-btn{width:32px;height:32px}}

/* Popup: bìa + nút */
.dawp-flip-popup{display:inline-block;width:280px;max-width:100%;text-align:center;vertical-align:top}
.dawp-flip-cover{position:relative;display:block;width:100%;padding:0;border:0;border-radius:10px;overflow:hidden;background:#e5e7eb;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.2);transition:transform .2s,box-shadow .2s}
.dawp-flip-cover:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.dawp-flip-cover img,.dawp-flip-cover-canvas canvas{display:block;width:100%;height:auto}
.dawp-flip-cover-canvas{display:block;width:100%;min-height:180px;aspect-ratio:210/297}
.dawp-flip-cover-btn{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:9px 18px;border-radius:999px;background:var(--fb-ac);color:#fff;font:600 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.dawp-flip-cover-title{margin-top:10px;font-size:14px;font-weight:600}

/* Toàn màn hình */
.dawp-flip-overlay{--fb-bg:#111827;--fb-ac:#2563eb;--fb-txt:#f9fafb;position:fixed;inset:0;z-index:99999;background:var(--fb-bg);animation:fbIn .2s ease-out}
.dawp-flip-overlay .dawp-flip-stage{height:100%;border-radius:0;box-shadow:none}
.dawp-flip-overlay .fb-book{filter:drop-shadow(0 24px 40px rgba(0,0,0,.5))}
body.dawp-flip-open{overflow:hidden}
@keyframes fbIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.dawp-flip-overlay{animation:none}.dawp-flip-cover{transition:none}}

/* ===== 5 phong cách khung: style="dark|light|wood|minimal|magazine" ===== */
/* light — nền sáng, thanh công cụ trắng */
.dawp-flip-s-light{--fb-bg:#f3f4f6;--fb-txt:#111827}
.dawp-flip-s-light .dawp-flip-stage{box-shadow:0 10px 30px rgba(0,0,0,.08);border:1px solid #e5e7eb}
.dawp-flip-s-light .fb-bar{background:#fff;border-top:1px solid #e5e7eb;backdrop-filter:none}
.dawp-flip-s-light .fb-btn:hover{background:rgba(0,0,0,.06)}
.dawp-flip-s-light .fb-inp{background:#fff;border-color:#d1d5db}
.dawp-flip-s-light .fb-msg::before{border-color:rgba(0,0,0,.15);border-top-color:var(--fb-ac)}
.dawp-flip-s-light .fb-book{filter:drop-shadow(0 14px 24px rgba(0,0,0,.18))}
.dawp-flip-s-light.dawp-flip-overlay{--fb-bg:#e5e7eb}
/* wood — bàn gỗ, thanh công cụ đồng */
.dawp-flip-s-wood{--fb-bg:#5b3a1e;--fb-ac:#d4a24c;--fb-txt:#fbe9c8}
.dawp-flip-s-wood .dawp-flip-stage{background:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 2px,transparent 2px 9px),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 28px),linear-gradient(135deg,#6b4423,#4a2c14 55%,#5b3a1e);box-shadow:0 16px 40px rgba(0,0,0,.35),inset 0 0 80px rgba(0,0,0,.35)}
.dawp-flip-s-wood .fb-bar{background:linear-gradient(180deg,rgba(60,32,12,.75),rgba(30,16,6,.85));border-top:1px solid rgba(212,162,76,.35)}
.dawp-flip-s-wood .fb-inp{border-color:rgba(212,162,76,.45);background:rgba(0,0,0,.35)}
.dawp-flip-s-wood .fb-book{filter:drop-shadow(0 22px 26px rgba(0,0,0,.55))}
.dawp-flip-s-wood .fb-page{background:#fffdf7}
/* minimal — không khung, sách nổi, thanh công cụ tròn nổi ở dưới, rõ khi rê chuột */
.dawp-flip-s-minimal{--fb-bg:transparent;--fb-txt:#111827}
.dawp-flip-s-minimal .dawp-flip-stage{position:relative;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
.dawp-flip-s-minimal .fb-area{padding:8px 8px 64px;overflow:visible}
.dawp-flip-s-minimal .fb-area.fb-zoomed{overflow:auto}
.dawp-flip-s-minimal .fb-bar{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:auto;max-width:calc(100% - 16px);padding:6px 10px;border-radius:999px;background:#fff;color:#111827;box-shadow:0 8px 24px rgba(0,0,0,.18);opacity:.55;transition:opacity .2s}
.dawp-flip-s-minimal:hover .fb-bar,.dawp-flip-s-minimal .fb-bar:focus-within{opacity:1}
@media (hover:none){.dawp-flip-s-minimal .fb-bar{opacity:1}}
.dawp-flip-s-minimal .fb-bar-l{display:none}
.dawp-flip-s-minimal .fb-bar-r{flex:0 0 auto;margin-left:6px;padding-left:6px;border-left:1px solid #e5e7eb}
.dawp-flip-s-minimal .fb-btn:hover{background:rgba(0,0,0,.06)}
.dawp-flip-s-minimal .fb-inp{background:#f3f4f6;border-color:#e5e7eb}
.dawp-flip-s-minimal .fb-msg{color:#6b7280}
.dawp-flip-s-minimal .fb-msg::before{border-color:rgba(0,0,0,.12);border-top-color:var(--fb-ac)}
.dawp-flip-s-minimal .fb-book{filter:drop-shadow(0 24px 34px rgba(0,0,0,.28))}
.dawp-flip-s-minimal.dawp-flip-overlay{--fb-bg:#ffffff;background:#fff}
/* magazine — dải màu nhấn, thanh công cụ trên cùng, số trang dạng huy hiệu */
.dawp-flip-s-magazine{--fb-bg:#0f172a}
.dawp-flip-s-magazine .dawp-flip-stage{background:linear-gradient(160deg,var(--fb-ac) 0%,color-mix(in srgb,var(--fb-ac) 35%,#0f172a) 45%,#0f172a 100%)}
.dawp-flip-s-magazine .fb-bar{order:-1;padding:10px 14px;background:rgba(0,0,0,.35);border-bottom:1px solid rgba(255,255,255,.12)}
.dawp-flip-s-magazine .fb-title{font-size:15px;font-weight:700;letter-spacing:.01em;opacity:1}
.dawp-flip-s-magazine .fb-num{padding:4px 6px 4px 8px;border-radius:999px;background:rgba(255,255,255,.14)}
.dawp-flip-s-magazine .fb-inp{width:46px;height:26px;border:0;background:rgba(0,0,0,.35)}
.dawp-flip-s-magazine .fb-btn{border-radius:999px}
.dawp-flip-s-magazine .fb-book{filter:drop-shadow(0 26px 40px rgba(0,0,0,.5))}

/* ===== 5 phong cách thêm (1.8.4): leather, denim, vintage, marble, chalk ===== */
/* leather — bìa da nâu sẫm, đường khâu chỉ vàng quanh mép */
.dawp-flip-s-leather{--fb-bg:#2a160c;--fb-ac:#c9a35a;--fb-txt:#f5e6c8}
.dawp-flip-s-leather .dawp-flip-stage{position:relative;background:repeating-radial-gradient(circle at 20% 30%,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),radial-gradient(circle at 30% 20%,#5a3420,#2a160c 60%,#170b05);box-shadow:0 18px 44px rgba(0,0,0,.45),inset 0 0 60px rgba(0,0,0,.5)}
.dawp-flip-s-leather .dawp-flip-stage::before{content:"";position:absolute;inset:9px;border:2px dashed rgba(201,163,90,.55);border-radius:8px;pointer-events:none;z-index:1}
.dawp-flip-s-leather .fb-bar{background:rgba(15,7,3,.7);border-top:1px solid rgba(201,163,90,.3)}
.dawp-flip-s-leather .fb-inp{border-color:rgba(201,163,90,.45);background:rgba(0,0,0,.4)}
.dawp-flip-s-leather .fb-book{filter:drop-shadow(0 22px 30px rgba(0,0,0,.6))}
.dawp-flip-s-leather .fb-page{background:#fffcf5}
/* denim — vải bò xanh dệt chéo, chỉ may cam */
.dawp-flip-s-denim{--fb-bg:#2b4a78;--fb-ac:#e8a548;--fb-txt:#eef2f7}
.dawp-flip-s-denim .dawp-flip-stage{position:relative;background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 5px),repeating-linear-gradient(-45deg,rgba(0,0,0,.10) 0 2px,transparent 2px 5px),linear-gradient(160deg,#35598c,#233f68 60%,#1c3457);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.dawp-flip-s-denim .dawp-flip-stage::before{content:"";position:absolute;inset:8px;border:2px dashed rgba(232,165,72,.7);border-radius:8px;pointer-events:none;z-index:1}
.dawp-flip-s-denim .fb-bar{background:rgba(15,28,50,.75);border-top:1px solid rgba(232,165,72,.35)}
.dawp-flip-s-denim .fb-inp{border-color:rgba(232,165,72,.5);background:rgba(0,0,0,.3)}
.dawp-flip-s-denim .fb-book{filter:drop-shadow(0 20px 28px rgba(0,0,0,.5))}
/* vintage — giấy cổ ố vàng, mực nâu */
.dawp-flip-s-vintage{--fb-bg:#e7d5ad;--fb-ac:#8b5e34;--fb-txt:#4a3620}
.dawp-flip-s-vintage .dawp-flip-stage{background:repeating-linear-gradient(0deg,rgba(120,90,40,.04) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,#f3e6c6 0%,#e2cc9e 60%,#c9ad78 100%);box-shadow:0 14px 34px rgba(90,60,20,.35),inset 0 0 90px rgba(120,80,30,.25);border:1px solid #c4a774}
.dawp-flip-s-vintage .fb-bar{background:rgba(110,75,35,.14);border-top:1px solid rgba(110,75,35,.3);backdrop-filter:none}
.dawp-flip-s-vintage .fb-btn:hover{background:rgba(110,75,35,.14)}
.dawp-flip-s-vintage .fb-inp{background:rgba(255,250,235,.7);border-color:rgba(110,75,35,.4)}
.dawp-flip-s-vintage .fb-msg::before{border-color:rgba(110,75,35,.2);border-top-color:var(--fb-ac)}
.dawp-flip-s-vintage .fb-book{filter:drop-shadow(0 16px 24px rgba(90,60,20,.45))}
.dawp-flip-s-vintage .fb-page{background:#fbf5e6}
.dawp-flip-s-vintage.dawp-flip-overlay{--fb-bg:#e2cc9e}
/* marble — đá cẩm thạch trắng vân xám, viền vàng */
.dawp-flip-s-marble{--fb-bg:#eeeeef;--fb-ac:#b08d57;--fb-txt:#1f2937}
.dawp-flip-s-marble .dawp-flip-stage{background:linear-gradient(115deg,transparent 40%,rgba(110,110,125,.16) 41%,transparent 43.5%),linear-gradient(35deg,transparent 58%,rgba(110,110,125,.13) 59%,transparent 61.5%),linear-gradient(150deg,transparent 20%,rgba(110,110,125,.09) 21%,transparent 22%),linear-gradient(160deg,#f7f7f5,#e6e6ea);border:1px solid #d9d9dd;box-shadow:0 12px 32px rgba(0,0,0,.14)}
.dawp-flip-s-marble .fb-bar{background:rgba(255,255,255,.75);border-top:1px solid rgba(176,141,87,.45)}
.dawp-flip-s-marble .fb-btn:hover{background:rgba(0,0,0,.06)}
.dawp-flip-s-marble .fb-inp{background:#fff;border-color:rgba(176,141,87,.5)}
.dawp-flip-s-marble .fb-msg::before{border-color:rgba(0,0,0,.12);border-top-color:var(--fb-ac)}
.dawp-flip-s-marble .fb-book{filter:drop-shadow(0 14px 26px rgba(0,0,0,.22))}
.dawp-flip-s-marble.dawp-flip-overlay{--fb-bg:#e9e9ec}
/* chalk — bảng phấn xanh đen, viền gỗ */
.dawp-flip-s-chalk{--fb-bg:#2c3a35;--fb-ac:#fde68a;--fb-txt:#f8fafc}
.dawp-flip-s-chalk .dawp-flip-stage{background:radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.06),transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(255,255,255,.04),transparent 50%),#2c3a35;box-shadow:inset 0 0 0 10px #8b5a2b,inset 0 0 0 12px #5c3a18,0 16px 40px rgba(0,0,0,.4)}
.dawp-flip-s-chalk .fb-area{padding:18px 18px 8px}
.dawp-flip-s-chalk .fb-bar{margin:0 10px 10px;border-radius:0 0 6px 6px;background:rgba(255,255,255,.08);border-top:1px dashed rgba(255,255,255,.25)}
.dawp-flip-s-chalk .fb-inp{border-color:rgba(255,255,255,.35);background:rgba(0,0,0,.25)}
.dawp-flip-s-chalk .fb-book{filter:drop-shadow(0 18px 26px rgba(0,0,0,.5))}