:root{
  --bg:#001d1a;--bg2:#002b26;--panel:#003b34;--panel2:#005247;--line:#087c70;
  --text:#f6fffd;--muted:#9ed7d0;--teal:#0ec5ad;--yellow:#ffd400;--orange:#ff8a00;
  --danger:#ff5d5d;--shadow:0 18px 45px rgba(0,0,0,.22);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#001a17 0,#00221e 100%);color:var(--text);min-height:100vh}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(1320px,calc(100% - 32px));margin:auto}.topbar{position:sticky;top:0;z-index:50;background:rgba(0,52,46,.96);border-top:2px solid #08aa96;border-bottom:1px solid #076b60;backdrop-filter:blur(14px)}.topbar-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-logo{width:54px;height:54px;border-radius:14px;border:2px solid #1dd8c0;background:#fff;display:grid;place-items:center;color:#00463e;font-size:27px;font-weight:900;box-shadow:var(--shadow);overflow:hidden}.brand-logo img{width:100%;height:100%;object-fit:cover}.brand-title{font-size:22px;font-weight:900;line-height:1.05;letter-spacing:-.4px}.brand-sub{color:#b7e7e0;font-size:12px;margin-top:5px}.top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.pill,.btn{border:1px solid #0b8d7e;background:#00695e;color:#fff;border-radius:13px;padding:10px 15px;font-weight:800;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:.2s}.pill:hover,.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}.btn-yellow{background:linear-gradient(90deg,var(--yellow),var(--orange));color:#111;border:0}.btn-dark{background:#002e29}.btn-danger{background:#641616;border-color:#a22b2b;color:#fff}.btn-outline{background:transparent}.hero-shell{border:1px solid #06675e;border-radius:26px;margin:24px 0;padding:24px;background:#00231f}.hero{position:relative;overflow:hidden;border:1px solid #0b6f66;border-radius:20px;min-height:310px;background:radial-gradient(circle at 70% 30%,#44368c 0,#202859 42%,#111d3e 100%);padding:38px 40px;display:flex;align-items:center}.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.22));pointer-events:none}.hero-content{position:relative;z-index:2;max-width:790px}.hero-kicker{display:inline-flex;align-items:center;gap:8px;border:1px solid #b28215;background:#5d4e273d;color:#ffd733;border-radius:999px;padding:7px 13px;font-weight:900;font-size:13px}.hero h1{font-size:clamp(30px,4vw,48px);margin:14px 0 8px;line-height:1.04}.hero h3{color:#ffd846;margin:0 0 10px}.hero p{color:#d4ddf2;line-height:1.7}.hero-controls{position:absolute;left:16px;right:16px;bottom:18px;z-index:3;display:flex;justify-content:space-between;pointer-events:none}.hero-nav{pointer-events:auto;width:40px;height:40px;border-radius:50%;border:1px solid #4f586d;background:#11192dcf;color:#fff;cursor:pointer}.search-row{display:grid;grid-template-columns:1fr 190px;gap:10px;margin-top:16px}.searchbox{display:flex;align-items:center;gap:10px;border:1px solid #0b766b;background:#002f2a;border-radius:15px;padding:0 15px}.searchbox input{width:100%;border:0;outline:0;background:transparent;color:#fff;padding:14px}.searchbox input::placeholder{color:#4ab9ad}.main-grid{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}.side-card,.card{background:#003a34;border:1px solid #086d63;border-radius:18px;box-shadow:var(--shadow)}.side-card{position:sticky;top:105px;padding:18px}.side-title{display:flex;align-items:center;justify-content:space-between;color:#ffd929;font-weight:900;font-size:15px;border-bottom:1px solid #11796f;padding:2px 0 15px}.cat-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}.cat-item{border-radius:12px}.cat-parent{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;font-weight:800;color:#fff;cursor:pointer}.cat-parent:hover,.cat-parent.active{background:#006e62}.cat-children{border-left:2px solid #0c8f81;margin:2px 0 8px 10px;padding-left:12px;display:none}.cat-item.open .cat-children{display:block}.child-link{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid #0a786d;background:#00473f;border-radius:11px;margin:7px 0;font-size:13px}.child-link:hover,.child-link.active{border-color:#e3b600;background:#5b4c0b55}.muted{color:var(--muted)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:0 0 16px}.section-head h2{margin:0;font-size:24px}.book-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.book-card{overflow:hidden;background:#003831;border:1px solid #096b61;border-radius:16px;transition:.2s}.book-card:hover{transform:translateY(-3px);border-color:#11b4a1}.cover{aspect-ratio:3/4;background:linear-gradient(145deg,#075a50,#052e2a);display:grid;place-items:center;overflow:hidden;position:relative}.cover img{width:100%;height:100%;object-fit:cover}.cover-placeholder{font-size:58px;opacity:.72}.book-body{padding:13px}.book-title{font-weight:900;line-height:1.35;min-height:42px}.book-meta{font-size:12px;color:#a8d7d1;margin-top:7px}.badge{display:inline-flex;padding:5px 8px;border:1px solid #158e80;border-radius:7px;color:#ffe13d;background:#003f39;font-size:11px;font-weight:800}.empty{padding:45px;text-align:center;border:1px dashed #11766b;border-radius:18px;color:#a6d4cf}.pagination{display:flex;gap:8px;justify-content:center;margin:24px 0}.pagination a,.pagination span{min-width:40px;height:40px;padding:0 12px;border-radius:10px;display:grid;place-items:center;border:1px solid #0c776c;background:#003d36}.pagination .active{background:#0e9f8f;color:#fff}.footer{margin-top:45px;padding:28px 0;border-top:1px solid #075c54;color:#93cbc4;text-align:center}.alert{padding:12px 14px;border-radius:12px;margin-bottom:14px}.alert-ok{background:#0f6b5b;border:1px solid #1bb39e}.alert-error{background:#6b2020;border:1px solid #a93434}.form-card{max-width:640px;margin:45px auto;padding:24px;background:#003a34;border:1px solid #0d756a;border-radius:18px}.form-row{margin-bottom:14px}.form-row label{display:block;font-weight:800;margin-bottom:7px;color:#d5fff8}.input,select,textarea{width:100%;background:#002d28;color:#fff;border:1px solid #0a766a;border-radius:12px;padding:12px 13px;outline:0}.input:focus,select:focus,textarea:focus{border-color:#17b9a5;box-shadow:0 0 0 3px #0cb6a31d}.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}.table-wrap{overflow:auto;border:1px solid #0a7066;border-radius:14px}.table{width:100%;border-collapse:collapse;min-width:760px;background:#003a34}.table th,.table td{padding:13px 12px;border-bottom:1px solid #0b625a;text-align:left;vertical-align:middle}.table th{color:#ffe32c;background:#002a26;font-size:12px;text-transform:uppercase}.table tr:hover td{background:#004139}.actions{display:flex;gap:7px;flex-wrap:wrap}.small{font-size:12px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{padding:18px;border:1px solid #0b756a;border-radius:16px;background:#003a34}.stat strong{display:block;font-size:28px;color:#ffe233;margin-top:6px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.admin-shell{display:grid;grid-template-columns:285px 1fr;min-height:calc(100vh - 86px)}.admin-sidebar{background:#002c27;border-right:1px solid #0a6c62;padding:18px 14px;position:sticky;top:86px;height:calc(100vh - 86px);overflow:auto}.admin-menu-title{font-size:12px;color:#ffd52b;font-weight:900;margin:6px 10px 10px}.admin-link{display:flex;gap:10px;align-items:center;padding:12px;border-radius:13px;font-weight:800;margin:4px 0}.admin-link small{display:block;color:#62c6ba;font-weight:500;margin-top:2px}.admin-link:hover,.admin-link.active{background:#078f80}.admin-content{padding:26px;min-width:0}.admin-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.admin-head h1{font-size:24px;margin:0}.dropzone{border:2px dashed #0a8d7e;border-radius:18px;min-height:200px;display:grid;place-items:center;text-align:center;background:#00352f;padding:22px}.dropzone input{max-width:100%}.preview-box{min-height:200px;border:2px dashed #0a8d7e;border-radius:18px;background:#00352f;display:grid;place-items:center;overflow:hidden}.preview-box img{max-width:100%;max-height:300px}.category-box{padding:16px;border:1px solid #0a776d;border-radius:16px;background:#003831;margin-bottom:14px}.category-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.child-admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.child-admin{padding:9px;border:1px solid #0a7167;border-radius:9px;background:#00312c;display:flex;justify-content:space-between;gap:8px}.viewer-body{background:#eef2f5;color:#16202a;min-height:100vh}.viewer-top{position:sticky;top:0;z-index:20;background:#00665a;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:8px 14px;gap:10px;flex-wrap:wrap}.viewer-tools{display:flex;gap:7px;flex-wrap:wrap}.viewer-btn{border:1px solid #178f80;background:#0b796c;color:#fff;border-radius:999px;padding:7px 12px;font-weight:800;cursor:pointer}.viewer-toolbar{background:#fff;border-bottom:1px solid #d4dde4;padding:6px 12px;display:flex;gap:10px;align-items:center;position:sticky;top:50px;z-index:15}.viewer-toolbar input{width:52px}.viewer-stage{min-height:calc(100vh - 100px);padding:24px;display:flex;justify-content:center;gap:18px;align-items:flex-start;position:relative}.viewer-stage.dark{background:#171b1e}.pdf-canvas{background:#fff;box-shadow:0 3px 18px rgba(0,0,0,.2);max-width:100%;height:auto}.page-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:#8794a380;color:#fff;font-size:26px;cursor:pointer;z-index:30}.page-prev{left:5%}.page-next{right:3%}@media(max-width:1100px){.book-grid{grid-template-columns:repeat(3,1fr)}.admin-shell{grid-template-columns:235px 1fr}.child-admin-grid{grid-template-columns:repeat(2,1fr)}.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.topbar-inner{padding:10px 0;align-items:flex-start}.brand-sub{display:none}.top-actions{gap:6px}.main-grid{grid-template-columns:1fr}.side-card{position:static}.book-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.search-row{grid-template-columns:1fr}.hero{padding:26px 24px;min-height:280px}.admin-shell{display:block}.admin-sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid #0a6c62}.admin-content{padding:18px}.two-col,.split{grid-template-columns:1fr}.viewer-toolbar{top:90px}.viewer-stage{padding:12px}.page-nav{top:auto;bottom:20px}.page-prev{left:18px}.page-next{right:18px}}
@media(max-width:540px){.container{width:min(100% - 18px,1320px)}.brand-title{font-size:17px}.brand-logo{width:45px;height:45px}.pill{padding:8px 10px;font-size:12px}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.stat-grid{grid-template-columns:1fr}.child-admin-grid{grid-template-columns:1fr}.hero h1{font-size:29px}.hero-shell{padding:10px;margin-top:12px}.hero{border-radius:15px}.admin-head{align-items:flex-start;flex-direction:column}.viewer-top{font-size:12px}.viewer-btn{padding:6px 9px}.viewer-toolbar{top:110px;overflow:auto}.viewer-stage.two-page{gap:6px}}

/* ===== V3: nút đọc sách + 3 chế độ đọc PDF ===== */
.book-cover-link{display:block}
.book-title-link{display:block;color:inherit}
.book-title-link:hover .book-title{color:#ffe13d}
.book-info-row{margin-top:9px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.book-read-main{margin-top:12px;min-height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(90deg,#ffd400,#ff9d00);color:#10221f;font-size:13px;font-weight:950;border:1px solid #ffc400;box-shadow:0 6px 16px rgba(0,0,0,.12);transition:.18s}
.book-read-main:hover{transform:translateY(-1px);filter:brightness(1.05)}
.book-read-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:7px}
.book-read-modes a{min-width:0;text-align:center;padding:7px 4px;border:1px solid #0c8174;border-radius:8px;background:#00483f;color:#d7fff8;font-size:10px;font-weight:850;white-space:nowrap;transition:.18s}
.book-read-modes a:hover{background:#087f70;border-color:#24c7b4;color:#fff}

.viewer-book-name{min-width:220px;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-category{opacity:.8;margin-left:8px}
.viewer-btn.active{background:#ffc400;border-color:#ffd839;color:#18221f;box-shadow:0 0 0 2px rgba(255,212,0,.16)}
.viewer-btn:disabled,.page-nav:disabled{opacity:.28;cursor:not-allowed;filter:none}
.viewer-toolbar .input{width:68px;padding:5px 8px;background:#fff;color:#16202a;border-color:#bdcbd5;border-radius:7px}
.viewer-mini-btn{min-width:34px;padding:5px 10px;border-radius:8px}
.viewer-fit-btn{padding:6px 10px;border-radius:8px}
.viewer-mode-label{margin-left:8px;padding:4px 9px;border-radius:999px;background:#e7f7f4;color:#12665d;font-size:12px;font-weight:800;white-space:nowrap}
.viewer-loading{margin-left:auto;color:#63727e;font-size:12px}
.viewer-stage{overflow:auto;scroll-behavior:smooth}
.paged-view{display:flex;justify-content:center;gap:18px;align-items:flex-start;width:max-content;min-width:100%;margin:auto}
.viewer-stage.mode-two .paged-view{justify-content:center}
.scroll-view{width:100%;max-width:1240px;margin:0 auto;padding:0 18px 50px}
.scroll-page{position:relative;min-height:780px;margin:0 auto 24px;display:flex;justify-content:center;align-items:flex-start;padding-top:34px;scroll-margin-top:118px}
.scroll-page .pdf-canvas{display:block;margin:0 auto}
.scroll-page-number{position:absolute;top:4px;left:50%;transform:translateX(-50%);background:#52616d;color:#fff;border-radius:999px;padding:4px 11px;font-size:11px;font-weight:800;z-index:2;white-space:nowrap}
.scroll-page-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#75828b;font-weight:700;font-size:13px}
.scroll-page.rendered{min-height:0}
.native-pdf{width:100%;height:calc(100vh - 112px);border:0}
.viewer-stage.dark,.viewer-dark{background:#15191c}
.viewer-stage.dark .scroll-page-number{background:#0d766b}
.viewer-stage.dark .scroll-page-loading{color:#a9b2b8}
.viewer-stage.dark .pdf-canvas{box-shadow:0 3px 22px rgba(0,0,0,.65)}

@media(max-width:820px){
  .viewer-book-name{max-width:100%;width:100%;white-space:normal}
  .viewer-top{align-items:flex-start}
  .viewer-tools{width:100%}
  .viewer-toolbar{gap:7px}
  .viewer-mode-label{display:none}
  .viewer-loading{display:none}
  .viewer-zoom-label{margin-left:6px}
  .scroll-view{padding-left:0;padding-right:0}
  .scroll-page{min-height:520px;scroll-margin-top:166px}
  .paged-view{gap:7px}
  .viewer-stage.mode-two{padding-left:5px;padding-right:5px}
}
@media(max-width:540px){
  .book-read-modes a{font-size:9px;padding:7px 2px}
  .viewer-tools .viewer-btn{font-size:11px}
  .viewer-fit-btn{display:none}
  .viewer-toolbar{font-size:12px}
  .scroll-page{min-height:430px}
}

/* ===== V4: phân trang quản trị + quảng cáo + trình đọc cuộn ổn định ===== */
.admin-book-filter{grid-template-columns:minmax(280px,1fr) 320px 150px 110px auto;margin:0 0 12px}
.admin-list-summary{margin:0 0 12px;color:#9ed7d0;font-size:13px}
.admin-pagination{flex-wrap:wrap}
.admin-pagination a,.admin-pagination span{min-width:auto;padding:0 14px}

.ad-admin-card{padding:20px;margin-bottom:16px}
.ad-admin-card h2{margin:0 0 6px;font-size:18px;color:#fff}
.code-textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;font-size:12px;line-height:1.55;min-height:130px;resize:vertical;background:#001f1c;color:#d7fff8;border:1px solid #0a766a;border-radius:12px;padding:12px}
.ad-config-panel{margin-top:12px}
.ad-save-btn{min-width:260px;justify-content:center;margin-bottom:24px}

.home-ad-slot{width:100%;margin:18px 0;overflow:hidden;border-radius:14px;text-align:center}
.home-ad-banner{background:#002f2a;border:1px solid #0a7066;padding:8px}
.home-ad-banner a{display:block}
.home-ad-banner img{display:block;width:100%;max-height:190px;object-fit:cover;border-radius:10px;margin:auto}
.home-ad-code{min-height:1px;display:block;overflow:visible}
.home-ad-middle{margin:0 0 18px}
.home-ad-bottom{margin-top:24px}
.home-ad-code ins.adsbygoogle{display:block;max-width:100%}

/* Viewer dùng chính vùng stage làm khung cuộn. Nhờ vậy IntersectionObserver luôn bắt đúng trang. */
body.viewer-body{height:100vh;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:#eef2f5;color:#16202a}
.viewer-body .viewer-top{position:relative;top:auto;flex:0 0 auto}
.viewer-body .viewer-toolbar{position:relative;top:auto;flex:0 0 auto;z-index:15}
.viewer-body .viewer-stage{flex:1 1 auto;min-height:0;height:auto;overflow:auto;overscroll-behavior:contain;scroll-behavior:smooth;width:100%;padding:24px}
.viewer-body .scroll-view{display:block;width:100%;max-width:1240px;margin:0 auto;padding:0 18px 60px}
.viewer-body .scroll-view[hidden],.viewer-body .paged-view[hidden]{display:none!important}
.viewer-body .scroll-page{width:100%;min-height:760px;margin:0 auto 24px;padding:34px 0 0;position:relative;display:flex;justify-content:center;align-items:flex-start}
.viewer-body .scroll-page.rendered{min-height:0}
.viewer-body .scroll-page .pdf-canvas{display:block;max-width:100%;height:auto;margin:0 auto}
.viewer-body .native-pdf{height:100%;min-height:100%;width:100%}
.viewer-body.viewer-dark .viewer-toolbar{background:#20262a;color:#eef6f5;border-color:#323d43}
.viewer-body.viewer-dark .viewer-toolbar .input{background:#11181b;color:#fff;border-color:#49545a}

@media(max-width:1100px){
  .admin-book-filter{grid-template-columns:1fr 260px 140px 100px}
  .admin-book-filter .btn-outline{grid-column:1/-1;width:max-content}
}
@media(max-width:820px){
  .admin-book-filter{grid-template-columns:1fr 1fr}
  .admin-book-filter .searchbox{grid-column:1/-1}
  .viewer-body .viewer-toolbar{top:auto}
  .viewer-body .viewer-stage{padding:12px}
  .viewer-body .scroll-page{min-height:520px}
}
@media(max-width:540px){
  .admin-book-filter{grid-template-columns:1fr}
  .admin-book-filter .searchbox{grid-column:auto}
  .home-ad-banner img{max-height:130px}
  .viewer-body .scroll-page{min-height:430px}
}


/* ===== V5: lưới sách mobile/tablet + logo upload ===== */
.logo-setting-preview{display:flex;align-items:center;gap:14px;padding:12px;margin-bottom:10px;border:1px solid #0a766a;border-radius:12px;background:#002d28}
.logo-setting-preview img{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:12px;border:1px solid #0b8d7e}

/* Tablet: luôn 3 cuốn / hàng. */
@media (min-width:541px) and (max-width:1100px){
  .book-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}

/* Điện thoại: luôn 2 cuốn / hàng. */
@media (max-width:540px){
  .book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .book-card{border-radius:12px}
  .book-body{padding:9px}
  .book-title{font-size:13px;min-height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .book-meta{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .book-info-row{align-items:flex-start;gap:4px;flex-direction:column}
  .book-info-row .badge{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;padding:4px 5px}
  .book-read-main{font-size:11px;min-height:34px;margin-top:8px}
  .book-read-modes{gap:3px;margin-top:5px}
  .book-read-modes a{font-size:8px;padding:6px 1px;border-radius:6px}
}