/* Trang đọc sách E-book — giao diện SÁNG, tối giản, phù hợp môi trường doanh nghiệp. Tự chứa, không phụ thuộc CSS của portal (layout _EbookLayout.cshtml cố ý không nạp css portal). */ /* ===== Font thương hiệu ===== Nạp bản .woff2 chứ không dùng thẳng .ttf trong thư mục font/: cùng một bộ chữ, hai nét .ttf nặng 761KB còn .woff2 chỉ 149KB — tiết kiệm gần 80% băng thông mà hình chữ y hệt. File .ttf gốc vẫn giữ trong Content/ebook/font/ để sau còn tạo lại bản khác, nhưng KHÔNG khai báo trong csproj nên không bị đẩy lên máy chủ. Chỉ nạp Regular và Bold; nét Thin (610KB) chưa chỗ nào dùng nên không nạp. font-display: swap — chữ hiện ngay bằng font hệ thống rồi mới đổi sang Proxima khi tải xong, không để người đọc nhìn trang trắng chữ trong lúc chờ. */ @font-face { font-family: 'Proxima Nova'; src: url('font/proxima-nova-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova'; src: url('font/proxima-nova-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Một chỗ duy nhất khai báo bộ font, mọi nơi khác trỏ về đây. Font hệ thống đứng sau làm nền đỡ: máy nào chặn tải font ngoài thì chữ vẫn đúng cỡ, đúng dấu tiếng Việt. */ --eb-font: 'Proxima Nova', "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --eb-bg: #eef1f5; --eb-bg-2: #e4e9ef; --eb-surface: #ffffff; --eb-line: #dde3ea; --eb-text: #1e2a37; --eb-text-2: #4a5766; --eb-muted: #7a8797; --eb-accent: #0b5d8f; --eb-accent-soft: #e8f1f8; --eb-gold: #b0842f; /* Sắc vàng dùng TRÊN nền xanh đậm. --eb-gold vẽ cho nền trắng, đặt lên xanh thì quá tối. Tông ở đây cố ý nhạt hơn vàng trên bìa sách: nút là chữ để ĐỌC chứ không phải hoa văn, phải đủ tương phản với nền xanh ở cỡ chữ thường. Đổi --eb-brand sang tông sáng hơn thì nhớ kiểm tra lại cặp màu này. */ --eb-gold-light: #f0d89a; --eb-danger: #d64541; /* màu báo lỗi (thông báo nhỏ ở góc màn hình) */ --eb-radius: 10px; --eb-shadow-sm: 0 1px 2px rgba(20, 35, 55, .06), 0 2px 8px rgba(20, 35, 55, .05); --eb-shadow-md: 0 6px 24px rgba(20, 35, 55, .10); --eb-shadow-book: 0 22px 55px rgba(20, 35, 55, .22); --eb-brand: #006c32; /* xanh thương hiệu BIM Group — nền header khi đọc sách */ --eb-topbar-h: 48px; --eb-rail-w: 58px; /* Chiều cao thật của khu sách — JS đo và ghi đè (xem measureBook trong ebook.js). Giá trị ở đây chỉ là mặc định cho lần vẽ đầu, trước khi JS kịp đo. */ --eb-book-h: 560px; } * { box-sizing: border-box; } .eb-hidden { display: none !important; } .eb-body { margin: 0; background: linear-gradient(180deg, var(--eb-bg) 0%, var(--eb-bg-2) 100%); color: var(--eb-text); font-family: var(--eb-font); font-size: 14px; -webkit-font-smoothing: antialiased; } /* Trang đọc KHÔNG cuộn: toàn bộ khung cao đúng 100vh và tự chia phần bên trong. Trước đây chiều cao khu sách tính bằng calc(100vh - hằng số ước lượng), lệch một chút là sinh thanh cuộn và khoảng trắng thừa ở dưới. */ /* 100dvh = chiều cao vùng NHÌN THẤY THẬT, tự co giãn khi thanh địa chỉ của trình duyệt di động hiện ra hay thu lại. Bắt buộc phải có: 100vh trên Chrome Android là chiều cao lúc thanh địa chỉ ĐÃ THU LẠI, nên khi nó đang hiện thì khung cao hơn màn hình chừng 60-70px — mà khung này overflow: hidden, phần dôi ra bị cắt mất chứ không cuộn tới được. Dải lời chúc ở đáy bị xén mất một nửa chính là vì vậy. Dòng 100vh đứng trước làm bản dự phòng cho trình duyệt cũ chưa biết đơn vị dvh. */ .eb-app { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } /* Khối bọc phần thân (thanh công cụ + khu đọc), nằm dưới header. ĐỪNG đặt tên lớp này là .eb-body: thẻ của layout đã mang lớp đó, trùng tên thì bị áp display:flex và .eb-app co lại bằng bề rộng nội dung — cả trang trắng trơn. */ .eb-shell { flex: 1 1 auto; min-height: 0; display: flex; } .eb-main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* Toàn màn hình: mặc định trình duyệt tô nền ĐEN cho phần tử fullscreen — phải tự đặt lại nền sáng, nếu không cả trang chuyển tối, không hợp với ấn phẩm doanh nghiệp. */ .eb-app:fullscreen, .eb-app:-webkit-full-screen { background: linear-gradient(180deg, var(--eb-bg) 0%, var(--eb-bg-2) 100%); } /* ===== Header thương hiệu (chỉ hiện khi đang đọc) ===== */ .eb-topbar { flex: 0 0 auto; height: var(--eb-topbar-h); display: flex; align-items: center; gap: 14px; padding: 0 18px; background: var(--eb-brand); position: relative; z-index: 12; } .eb-topbar-brand { flex: 0 0 auto; display: block; height: 26px; width: auto; } /* Logo tên sách căn giữa TUYỆT ĐỐI theo header, không theo chỗ trống còn lại — nếu căn bằng flex thì logo sẽ lệch qua lại mỗi khi chỉ số trang đổi độ dài (1 chữ số sang 3 chữ số). Ảnh đã cắt sát: 1200x148 (tỉ lệ 8.11) nên 32px cao ứng với 260px rộng. */ .eb-topbar-title { position: absolute; left: 52%; top: 50%; transform: translate(-50%, -50%); width: 260px; height: 32px; background-repeat: no-repeat; background-position: center; background-size: contain; text-align:center; } .eb-topbar-page { margin-left: auto; flex: 0 0 auto; color: rgba(255, 255, 255, .92); font-size: 13px; white-space: nowrap; } /* ===== Thanh công cụ DỌC ở cạnh trái ===== */ .eb-rail { flex: 0 0 auto; width: var(--eb-rail-w); padding: 10px 0; background: var(--eb-surface); border-right: 1px solid var(--eb-line); box-shadow: var(--eb-shadow-sm); z-index: 10; } /* Cụm công cụ tách riêng khỏi .eb-rail vì trên điện thoại nó được CHUYỂN vào header (xem placeTools trong ebook.js) — chuyển cả cụm nên id và sự kiện giữ nguyên. */ .eb-rail-tools { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; height: 100%; } .eb-rail-btn { width: 38px; height: 38px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--eb-text-2); font-size: 15px; cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s; } .eb-rail-btn:hover { background: #f2f6fa; border-color: var(--eb-line); color: var(--eb-accent); } .eb-rail-btn.eb-btn-on { background: var(--eb-accent-soft); border-color: #b9d6e9; color: var(--eb-accent); } .eb-rail-sep { width: 26px; height: 1px; background: var(--eb-line); margin: 2px 0; } .eb-rail-spacer { flex: 1 1 auto; } .eb-rail-page { text-align: center; } .eb-rail-input { width: 42px; text-align: center; background: var(--eb-surface); color: var(--eb-text); border: 1px solid var(--eb-line); border-radius: 7px; padding: 5px 2px; font-size: 13px; font-family: inherit; -moz-appearance: textfield; } .eb-rail-input::-webkit-outer-spin-button, .eb-rail-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .eb-rail-input:focus { outline: none; border-color: var(--eb-accent); } .eb-rail-total { font-size: 10px; color: var(--eb-muted); margin-top: 2px; } /* Tiến độ đọc: vạch dọc ở đáy thanh công cụ, không tốn chiều cao khu sách */ .eb-rail-progress { width: 4px; height: 90px; border-radius: 3px; background: var(--eb-line); overflow: hidden; display: flex; align-items: flex-end; } .eb-rail-progress-bar { width: 100%; height: 0; background: linear-gradient(180deg, #1a86c7, var(--eb-accent)); transition: height .35s ease; } /* ===== Công cụ khi nằm TRONG header (điện thoại) ===== Nền xanh đậm nên toàn bộ nút/ô nhập phải đổi sang tông sáng. Dùng bộ chọn theo vị trí (.eb-topbar .eb-rail-*) chứ không theo media query, để hễ cụm công cụ được chuyển vào header là tự đúng màu — không phải đồng bộ hai chỗ. */ .eb-topbar .eb-rail-tools { flex-direction: row; align-items: center; width: auto; height: auto; flex: 1 1 auto; min-width: 0; gap: 4px; overflow-x: auto; overflow-y: hidden; } .eb-topbar .eb-rail-btn { color: rgba(255, 255, 255, .88); width: 34px; height: 34px; } .eb-topbar .eb-rail-btn:hover { background: rgba(255, 255, 255, .16); border-color: transparent; color: #fff; } .eb-topbar .eb-rail-btn.eb-btn-on { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .32); color: #fff; } .eb-topbar .eb-rail-sep { width: 1px; height: 22px; margin: 0 2px; background: rgba(255, 255, 255, .28); } .eb-topbar .eb-rail-page { display: flex; align-items: center; gap: 4px; } .eb-topbar .eb-rail-input { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); color: #fff; } .eb-topbar .eb-rail-total { color: rgba(255, 255, 255, .72); margin-top: 0; } .eb-topbar .eb-rail-spacer { display: none; } .eb-topbar .eb-rail-progress { width: 56px; height: 4px; align-items: stretch; background: rgba(255, 255, 255, .24); } .eb-topbar .eb-rail-progress-bar { height: 100%; width: 0; background: #fff; } /* Bảng mục lục nổi cạnh thanh công cụ */ .eb-pop { position: fixed; left: calc(var(--eb-rail-w) + 8px); top: 60px; z-index: 40; min-width: 240px; max-width: 320px; max-height: 70vh; overflow-y: auto; background: var(--eb-surface); border: 1px solid var(--eb-line); border-radius: 12px; box-shadow: var(--eb-shadow-md); padding: 6px; } .eb-pop-item { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 9px 12px; font-size: 13px; font-family: inherit; color: var(--eb-text-2); cursor: pointer; } .eb-pop-item:hover { background: var(--eb-accent-soft); color: var(--eb-accent); } .eb-pop-item .eb-pop-page { float: right; color: var(--eb-muted); font-size: 12px; } /* ===== Nút & control ===== */ .eb-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--eb-surface); color: var(--eb-text-2); border: 1px solid var(--eb-line); border-radius: 8px; padding: 7px 12px; font-size: 13px; font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .eb-btn:hover { background: #f5f8fb; border-color: #c9d3de; color: var(--eb-text); } .eb-btn:disabled { opacity: .45; cursor: default; } .eb-btn.eb-btn-on { background: var(--eb-accent-soft); border-color: #b9d6e9; color: var(--eb-accent); } .eb-btn-icon { padding: 7px 10px; } .eb-btn-primary { /* 700 chứ không phải 600: bộ font chỉ có hai nét Regular và Bold, xin nét 600 thì trình duyệt tự bôi đậm nét Regular ra (bôi đậm giả), chữ dày bệt và mất nét thanh đậm. */ background: var(--eb-accent); border-color: var(--eb-accent); color: #fff; font-weight: 700; padding: 11px 22px; font-size: 14px; border-radius: 9px; box-shadow: 0 4px 14px rgba(11, 93, 143, .28); } .eb-btn-primary:hover { background: #0a6fa9; border-color: #0a6fa9; color: #fff; } /* Nút mang màu thương hiệu — dùng cho nút vào đọc ở màn giới thiệu. Ở đó nút đứng một mình trên ảnh bìa (xanh lá + mạ vàng), không còn hộp trắng ngăn cách, nên để màu xanh dương mặc định của portal thì nó thành vệt lạc lõng duy nhất trên cả trang. Chữ dùng --eb-gold-light chứ không phải --eb-gold: sắc vàng kia vẽ cho nền trắng, đặt lên xanh đậm thì tương phản quá thấp, đọc mỏi mắt. */ .eb-btn-brand { background: var(--eb-brand); border-color: var(--eb-brand); color: var(--eb-gold-light); font-weight: 700; padding: 11px 22px; font-size: 14px; border-radius: 9px; box-shadow: 0 6px 18px rgba(12, 80, 57, .32); } .eb-btn-brand:hover { background: #00813c; border-color: #00813c; color: #f7e7bd; } .eb-select, .eb-input { background: var(--eb-surface); color: var(--eb-text); border: 1px solid var(--eb-line); border-radius: 8px; padding: 7px 9px; font-size: 13px; font-family: inherit; max-width: 230px; } .eb-select:focus, .eb-input:focus { outline: none; border-color: var(--eb-accent); } .eb-pager { display: inline-flex; align-items: center; gap: 6px; color: var(--eb-muted); font-size: 13px; } .eb-pager .eb-input { width: 62px; text-align: center; } /* ===== Sân khấu sách ===== */ /* flex-basis 0 (không phải auto): chiều cao lấy từ CHỖ TRỐNG còn lại, KHÔNG lấy từ nội dung. Thư viện lật trang đặt chiều cao pixel cố định cho khung sách của nó; nếu để basis auto thì khung đó đẩy khu sách dài ra, tràn xuống đè lên dải thumbnail — nhìn thấy thumbnail nhưng bấm thì trúng lớp sách nằm đè bên trên (phím mũi tên vẫn chạy vì không cần chuột). */ /* --eb-stage-lead: phần đệm CÂN BẰNG chèn thêm ở trên, do JS tính (xem balanceStage). Không phải số cứng — nó bằng chênh lệch chiều cao giữa dải lời chúc bên dưới và dải tên sách bên trên, và chỉ lấy trong phần chiều cao đang thừa. */ .eb-stage { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; padding: calc(10px + var(--eb-stage-lead, 0px)) 14px calc(10px + var(--eb-stage-trail, 0px)); min-height: 0; overflow: hidden; position: relative; } /* Tên sách in ngay trên quyển sách. MẶC ĐỊNH ẨN — chỉ điện thoại màn hình dọc mới bật lên (xem media query cuối file). Máy tính đã có logo tên sách nằm giữa header rồi. Dùng chữ chứ không dùng ảnh logo: file logo là chữ vàng gold vẽ cho nền xanh đậm, đặt lên nền sáng của khu đọc sẽ chìm. Chữ thì đổi màu tuỳ nền, và cuốn sách nào cũng có tên. */ .eb-book-name { display: none; flex: 0 0 auto; max-width: 100%; padding: 2px 10px 8px; position: relative; font-family: var(--eb-font); font-weight: 700; font-size: 13px; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--eb-brand); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Gạch chỉ mảnh bên dưới tên sách, màu xanh thương hiệu. Bề rộng để số cố định chứ không tính theo phần trăm tên sách: sách tên dài thì gạch chỉ dài ngoằng ra theo, nhìn không còn giống một nét trang trí nữa. */ .eb-book-name::after { content: ''; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); width: 72px; height: 1px; background: var(--eb-brand); } /* Chiều cao khu sách phải XÁC ĐỊNH: StPageFlip đọc offsetWidth/offsetHeight của khung để tính khổ trang và để quyết định 1 trang hay 2 trang. Nếu để chiều cao tự do thì khung cao 0 lúc khởi tạo, thư viện tính ra trang bé xíu và tưởng màn hình hẹp. */ /* Hàng chứa sách ăn hết chỗ trống còn lại của khu sách (flex), KHÔNG tính bằng calc. min-height: 0 để flex item được phép co lại nhỏ hơn nội dung, nếu không nó đẩy trang dài ra. */ .eb-stage-row { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; flex: 1 1 0; min-height: 0; overflow: hidden; } .eb-nav { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--eb-surface); border: 1px solid var(--eb-line); color: var(--eb-text-2); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: var(--eb-shadow-sm); transition: background .15s, color .15s; } .eb-nav:hover { background: var(--eb-accent); border-color: var(--eb-accent); color: #fff; } .eb-nav:disabled { opacity: .35; cursor: default; background: var(--eb-surface); color: var(--eb-text-2); } /* Khung StPageFlip. - Chiều cao: 100% của hàng (đã xác định ở trên). - Chiều rộng: chặn theo tỉ lệ trang (--eb-aspect do JS đặt) để 2 trang luôn vừa màn hình. `100%` ở đây tính theo .eb-flip-wrap (flex: 1 1 auto -> chiều rộng xác định), KHÔNG tính theo chính nó — đây là chỗ trước đó bị vòng lặp làm khung co lại. */ .eb-flip-wrap { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; /* chặn khung sách tràn ra đè lên các phần bên dưới */ /* Mốc toạ độ cho các lớp phủ đặt theo vị trí trang sách */ position: relative; } /* Bìa trước và bìa sau đứng MỘT MÌNH trong khung rộng bằng 2 trang: thư viện đặt bìa trước ở nửa phải, bìa sau ở nửa trái (đúng như sách in mở ra). Trên màn hình rộng nhìn như lệch lề, nên dịch sách đi nửa bề rộng một trang để phần có nội dung về giữa. Khoảng dịch tính bằng JS theo bề rộng trang THẬT (xem updateCoverOffset) — dùng % của khung sẽ sai khi chiều cao là thứ giới hạn và trang bị thu hẹp lại. */ #ebFlip { transform: translateX(var(--eb-book-shift, 0px)); transition: transform .32s ease; } /* --eb-book-h là chiều cao THẬT của khu sách, do JS đo sau khi layout xong (xem measureBook). Đo thật thay vì ước lượng nên bật/tắt dải lời chúc hay thanh chọn trang đều khớp chính xác. */ #ebFlip { height: 100%; width: min(100%, calc(var(--eb-book-h, 560px) * var(--eb-aspect, .707) * 2)); } #ebFlip .stf__parent { margin: 0 auto; } /* Chế độ HTML: mỗi trang là một thẻ thật, ảnh vẽ ở đúng độ phân giải màn hình (chế độ canvas của thư viện không nhân devicePixelRatio nên chữ bị mờ trên màn hình scale/Retina). */ .eb-page { background: #fff; overflow: hidden; box-shadow: 0 8px 26px rgba(20, 35, 55, .16); } .eb-page img { display: block; width: 100%; height: 100%; object-fit: contain; /* Ảnh trang thường lớn hơn khung -> thu nhỏ; giữ nét chữ khi thu nhỏ. */ image-rendering: auto; user-select: none; -webkit-user-drag: none; } /* Trang chưa nạp ảnh: để trống, không hiện khung ảnh lỗi. */ .eb-page img:not([src]) { visibility: hidden; } /* ===== Thanh chọn trang ===== */ .eb-thumbs { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 12px 16px 14px; background: var(--eb-surface); border-top: 1px solid var(--eb-line); scrollbar-width: thin; position: relative; z-index: 5; /* nằm trên khung sách, tránh bị lớp khác nuốt cú bấm */ } .eb-thumb { flex: 0 0 auto; width: 66px; cursor: pointer; border: 2px solid transparent; border-radius: 5px; background: #f2f5f8; padding: 2px; transition: border-color .15s, transform .15s; } .eb-thumb:hover { transform: translateY(-2px); } .eb-thumb.eb-thumb-active { border-color: var(--eb-accent); } .eb-thumb img { display: block; width: 100%; height: auto; border-radius: 3px; min-height: 40px; } .eb-thumb-num { font-size: 10px; text-align: center; color: var(--eb-muted); padding-top: 3px; } /* Chữ dành cho máy tìm kiếm: phải CÓ TRONG TRANG nhưng không hiện ra cho người đọc. Cố ý KHÔNG dùng display:none — nội dung bị ẩn kiểu đó thường bị máy tìm kiếm đánh giá thấp. Cách dưới đây thu khối về 1px và cắt hết phần tràn: vẫn nằm trong bố cục, vẫn đọc được bằng trình đọc màn hình, mà mắt thường không thấy. */ .eb-seo-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ===== Thông báo nhỏ ===== */ .eb-toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 8px; align-items: center; } .eb-toast { background: var(--eb-text); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13px; box-shadow: var(--eb-shadow-md); animation: eb-toast-in .18s ease; max-width: 90vw; } .eb-toast-error { background: var(--eb-danger); } @keyframes eb-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ===== Trạng thái ===== */ .eb-loading { text-align: center; color: var(--eb-muted); padding: 70px 20px; } .eb-spinner { width: 26px; height: 26px; margin: 0 auto 14px; border: 3px solid var(--eb-line); border-top-color: var(--eb-accent); border-radius: 50%; animation: eb-spin .8s linear infinite; } @keyframes eb-spin { to { transform: rotate(360deg); } } .eb-unavailable { max-width: 520px; margin: 12vh auto; text-align: center; padding: 34px 30px; background: var(--eb-surface); border: 1px solid var(--eb-line); border-radius: 14px; box-shadow: var(--eb-shadow-md); } .eb-unavailable h1 { font-family: var(--eb-font); font-size: 22px; margin: 0 0 12px; } .eb-unavailable p { color: var(--eb-text-2); line-height: 1.75; } @media (max-width: 767px) { /* Điện thoại: GỘP header và thanh công cụ làm một hàng duy nhất — chiều cao ở đây quý hơn trên máy tính. Cụm công cụ do JS chuyển vào header; thanh dọc bỏ hẳn. */ .eb-shell { flex-direction: column; } .eb-rail { display: none; } .eb-topbar { min-height: 46px; height: auto; padding: 5px 8px; gap: 8px; } .eb-topbar-brand { height: 18px; } /* Logo tên sách tỉ lệ 8:1 — trên màn hẹp nó chiếm hết chỗ của cụm nút nên bỏ */ .eb-topbar-title { display: none; } .eb-topbar-page { margin-left: 0; font-size: 11px; } .eb-pop { left: 8px; right: 8px; top: 56px; max-width: none; } .eb-stage { padding: calc(8px + var(--eb-stage-lead, 0px)) 8px calc(8px + var(--eb-stage-trail, 0px)); } .eb-stage-row { gap: 4px; position: relative; } .eb-nav { width: 32px; height: 32px; font-size: 14px; } /* Hai nút lật NỔI ĐÈ lên rìa trang thay vì đứng thành hai cột riêng. Lý do: trên điện thoại khổ trang bị giới hạn bởi BỀ NGANG (chiều cao còn thừa nhiều), mà hai nút cũ ăn mất ~72px trong khoảng 390px — tức khoảng 1/5 khổ trang. Bỏ chúng ra khỏi dòng chảy thì trang rộng thêm ~24%, ảnh vẽ ở nhiều điểm ảnh hơn và chữ nét hơn hẳn. Đặt ở giữa chiều cao, sát mép trái/phải: đó là phần lề của trang sách, gần như không có chữ. Vẫn là