.bstory { --bstory-bg: #FAF8F4; --bstory-text: #262320; --bstory-text-strong: #2b2721; --bstory-muted: #857f74; --bstory-muted-2: #5c574f; --bstory-border: #e4ddd2; --bstory-border-light: #eee9de; --bstory-accent: #2f6f6a; --bstory-accent-hover: #265854; --bstory-accent-bg: #e7f0ee; --bstory-accent-text: #1f4f4b; --bstory-badge-bg: #efe9df; --bstory-badge-text: #423e37; --bstory-placeholder: #a39c8f; --bstory-surface: #fff; /* KHỔ NGANG DÙNG CHUNG cho MỌI khối của trang truyện — hero, thanh chuyển ngôn ngữ, đoạn truyện, từ vựng, ý nghĩa, câu hỏi, footer. Mọi khối phải canh đúng một mép trái và một mép phải; lệch một khối là nhìn ra ngay như lỗi dựng trang. Đặt thành biến vì trang từng trôi mất bất biến này: có lúc tồn tại song song 3 khổ (1040 cho hero/switcher/footer, 880 cho nội dung, 980 cho ảnh phá khung). Sửa ở đây là cả trang đổi theo, không phải đi sửa 8 chỗ rời rạc. Đổi số này cũng chính là đổi CHIỀU CAO ảnh đoạn truyện: ảnh khoá tỉ lệ 3:2 nên cao = rộng x 0.5625 (1040px -> 585px). */ --bstory-measure: 1040px; /* Độ dài dòng tối đa cho văn xuôi đọc liên tục ("Ý nghĩa & bài học", câu hỏi thảo luận). Khổ ngang ở trên là cho KHUNG, không phải cho chữ: thả cho văn xuôi chạy hết 1040px thì mỗi dòng ~106 ký tự, quá dài. 90ch ~ 810px, tức giữ gần đúng bề rộng các mục này vốn có khi khổ nội dung còn là 880px. Từng thử 68ch cho "chuẩn sách" nhưng hẹp hơn hiện trạng tới 200px, đặt cạnh bảng từ vựng chạy hết khổ thì lộ ra như hụt lề — chỉnh độ dài dòng phải nhìn cả khối bên cạnh chứ không chỉ nhìn con số lý thuyết. */ --bstory-prose: 90ch; font-family: 'Source Serif 4', Georgia, serif; font-size: 16px; color: var(--bstory-text); background: var(--bstory-bg); line-height: 1.5; } /* ===== Dark reading theme ===== Custom properties scoped to .bstory — almost everything below reads color through these, so overriding them here is enough for the story content itself; no rule duplication needed. The site header/footer chrome lives outside .bstory (separate stylesheet, site-chrome.css) and can't see this attribute, so story.js also toggles Theme của TOÀN SITE do một class duy nhất trên quyết định (`html.bstory-dark`, server in sẵn — xem bstory_html_dark_class). Mọi stylesheet đều thấy thẻ nên không còn phải gắn cờ ở 2 nơi như trước. */ html.bstory-dark .bstory { --bstory-bg: #1c1a17; --bstory-text: #e8e3d9; --bstory-text-strong: #f2ede2; --bstory-muted: #a39a8c; --bstory-muted-2: #b9b0a1; --bstory-border: #3a352d; --bstory-border-light: #2e2a24; --bstory-accent: #6fb3ac; --bstory-accent-hover: #8cc5bf; --bstory-accent-bg: #24413f; --bstory-accent-text: #bfe6e1; --bstory-badge-bg: #2c2822; --bstory-badge-text: #d8d0c2; --bstory-placeholder: #8a8175; --bstory-surface: #2a2620; } .bstory a { color: var(--bstory-accent); } .bstory a:hover { color: var(--bstory-accent-hover); } /* ===== Hero ===== */ .bstory__hero { max-width: var(--bstory-measure); margin: 0 auto; padding: 48px 24px 32px; display: flex; gap: 40px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--bstory-border); } .bstory__hero-text { flex: 1 1 320px; min-width: 280px; } .bstory__title-vi { font-family: 'Source Serif 4', Georgia, serif; font-size: 40px; line-height: 1.15; margin: 0 0 6px; font-weight: 600; } .bstory__title-en { font-family: 'Source Serif 4', Georgia, serif; font-size: 22px; line-height: 1.25; margin: 0 0 20px; font-weight: 400; font-style: italic; color: var(--bstory-muted-2); } .bstory__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; } .bstory__badge { font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 100px; text-decoration: none; display: inline-block; } .bstory__badge--neutral { background: var(--bstory-badge-bg); color: var(--bstory-badge-text); } .bstory__badge--accent { background: var(--bstory-accent-bg); color: var(--bstory-accent-text); font-weight: 600; } .bstory__badge--plain { background: transparent; color: var(--bstory-muted); padding: 6px 4px; } a.bstory__badge--neutral:hover { color: var(--bstory-badge-text); background: var(--bstory-border); } .bstory__hero-media { flex: 1 1 400px; min-width: 320px; max-width: 560px; } .bstory__hero-media img { /* TỈ LỆ ẢNH = 2:1, và BA CHỖ PHẢI KHỚP NHAU: `STYLE_SUFFIX` trong prompt ("2:1 wide landscape composition"), `size: 1536x768` gửi cho API, và mọi `aspect-ratio` ở đây. Lệch một chỗ là object-fit:cover xén ngầm — đã dính ở 3.12.0 (prompt nói 16:9, khung vẽ thật 3:2, CSS ép lại 16:9 → mất 15,6% chiều cao). 3:2 → 2:1 ở 4.7.0 vì lý do đọc chứ không phải lý do ảnh: bố cục là TRANH TRÊN, CHỮ DƯỚI, nên ảnh cao là mỗi đoạn một bức tường phải cuộn qua. Đo ở khổ 1040px, truyện 40 đoạn: 3:2 cho trang cao 38.840px, 2:1 còn 31.920px (−18%). Không đi dẹt hơn (16:7 / 3:1) vì luật đóng khung là FULL-LENGTH — nhân vật phải thấy trọn từ đầu tới chân. Ở 2:1 ảnh còn cao 520px, đủ rõ mặt và tay; xuống 3:1 còn 347px thì nhân vật thành vệt nhỏ giữa hai bên trống, tức phải bỏ luôn luật toàn thân — một quyết định khác hẳn, không phải chỉnh một con số. MỌI khung hiện ảnh AI đều 2:1 (hero, đoạn, ý-nghĩa, thumb truyện liên quan, thẻ lưới archive, thẻ demo trang chủ, thẻ lưới trang chủ). Ngoại lệ DUY NHẤT (trừ `.bstory__media-embed` 16:9 — khung nhúng video, không phải ảnh sinh) là truyện có `data-image-ratio="16:9"` — xem khối override ngay dưới CHUNG cho cả 7 khung, dành cho truyện vẽ bằng Google Flow (không hỗ trợ 2:1, xem docs/decisions.md). Truyện thường KHÔNG có attribute đó nên luật 2:1 gốc không đổi gì. */ width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 12px; display: block; } /* ===== Audio controls ===== */ .bstory__audio-controls { display: flex; gap: 10px; flex-wrap: wrap; } .bstory__audio-btn { display: flex; align-items: center; gap: 8px; border: none; padding: 12px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none; /* the "Xem video" control is an , not a