@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400..900;1,400..900&family=Noto+Sans+Mono:wght@400..700&family=Noto+Serif:ital,wght@0,400..900;1,400..900&display=swap&subset=vietnamese");

:root{
  --reader-bg:#fffdf8;
  --reader-surface:rgba(255,253,248,.96);
  --reader-ink:#211f1b;
  --reader-muted:#746d63;
  --reader-line:#ddd5c8;
  --reader-accent:#6b4a3a;
  --reader-shadow:0 12px 36px rgba(31,25,20,.15);
  --reader-font-size:18px;
  --reader-line-height:1.78;
  --reader-measure:64ch;
  --reader-font-literary:"Noto Serif","Source Serif 4","Charis SIL","Times New Roman",serif;
  --reader-font-system:"Noto Sans",Inter,"Segoe UI",Arial,sans-serif;
  --reader-font-mono:"Noto Sans Mono","SFMono-Regular",Consolas,monospace;
  --reader-font-family:var(--reader-font-literary);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%;text-size-adjust:100%;font-synthesis:none;text-rendering:optimizeLegibility}
body.bl-reader{margin:0;background:var(--reader-bg);color:var(--reader-ink);padding-bottom:calc(78px + env(safe-area-inset-bottom));transition:background .18s ease,color .18s ease}
body.bl-reader[data-reader-theme="sepia"]{--reader-bg:#f3ead8;--reader-surface:rgba(243,234,216,.96);--reader-ink:#30291f;--reader-muted:#756857;--reader-line:#d5c5aa}
body.bl-reader[data-reader-theme="night"]{--reader-bg:#111214;--reader-surface:rgba(23,24,27,.96);--reader-ink:#ebe6dd;--reader-muted:#aaa39a;--reader-line:#34363a;--reader-shadow:0 12px 40px rgba(0,0,0,.46)}
.reader-shell{width:min(100%,calc(var(--reader-measure) + 52px));margin-inline:auto;padding-inline:26px}
.reader-chrome{font-family:var(--reader-font-system)}
.reader-hero{max-width:var(--reader-measure);margin-inline:auto;padding:44px 0 28px}
.reader-hero .reader-kicker{margin:0 0 10px;color:var(--reader-muted);font:800 .72rem/1.3 var(--reader-font-system);letter-spacing:.13em;text-transform:uppercase}
.reader-hero h1{margin:.1em 0 .24em;font:750 clamp(2.55rem,7vw,5.3rem)/1.04 var(--reader-font-family);letter-spacing:-.022em;text-wrap:balance}
.reader-hero .reader-lead{margin:0;max-width:46em;color:var(--reader-muted);font:400 clamp(1.02rem,2vw,1.2rem)/1.7 var(--reader-font-system)}
.reader-nav{max-width:var(--reader-measure);margin-inline:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0 20px;border-bottom:1px solid var(--reader-line);font:650 .86rem/1.4 var(--reader-font-system)}
.reader-nav a{color:inherit;text-underline-offset:.2em}
.reader-toc{max-width:var(--reader-measure);margin:18px auto 30px;border:1px solid var(--reader-line);border-radius:14px;background:color-mix(in srgb,var(--reader-surface) 88%,transparent);font-family:var(--reader-font-system)}
.reader-toc summary{cursor:pointer;padding:13px 15px;font-weight:780}
.reader-toc-list{padding:0 15px 12px;display:grid;gap:2px}
.reader-toc-list a,.reader-toc-list button{min-height:40px;display:flex;align-items:center;border:0;background:transparent;color:var(--reader-muted);text-align:left;text-decoration:none;font:650 .82rem/1.35 var(--reader-font-system);cursor:pointer}
.reader-toc-list a:hover,.reader-toc-list button:hover,.reader-toc-list [aria-current="true"]{color:var(--reader-ink)}
.reader-prose,article.prose{width:100%;max-width:var(--reader-measure);margin-inline:auto;font-family:var(--reader-font-family);font-size:var(--reader-font-size);line-height:var(--reader-line-height);font-kerning:normal;font-optical-sizing:auto;font-variant-ligatures:common-ligatures contextual;font-feature-settings:"kern" 1,"liga" 1;word-break:normal;overflow-wrap:break-word;hyphens:auto}
.reader-prose p,article.prose p{margin:0 0 1.08em;color:var(--reader-ink);text-wrap:pretty}
.reader-prose p+p,article.prose p+p{margin-top:0}
.reader-prose h2,.reader-prose h3,article.prose h2,article.prose h3{color:var(--reader-ink);text-wrap:balance;letter-spacing:-.006em}
.reader-prose h2,article.prose h2{font-size:1.62em;line-height:1.17;margin:2.35em 0 .78em;padding-top:.42em;border-top:1px solid var(--reader-line)}
.reader-prose h3,article.prose h3{font-size:1.25em;line-height:1.22;margin:1.85em 0 .62em}
.reader-prose blockquote,article.prose blockquote{margin:1.55em 0;padding:.15em 0 .15em 1.05rem;border-left:3px solid var(--reader-accent);color:var(--reader-muted)}
.reader-prose blockquote p,article.prose blockquote p{color:inherit}
.reader-prose hr,article.prose hr{width:5.25rem;height:1px;border:0;margin:2.6em auto;background:linear-gradient(90deg,transparent,var(--reader-line),transparent)}
.reader-prose ul,.reader-prose ol,article.prose ul,article.prose ol{padding-left:1.25em}
.reader-prose li,article.prose li{margin:.5em 0}
.reader-prose code,article.prose code{font:85% var(--reader-font-mono);padding:.1em .3em;border-radius:4px;background:color-mix(in srgb,var(--reader-ink) 7%,transparent)}
.reader-prose .aura-beat,article.prose .aura-beat{max-width:38ch;margin:1.72em 0;padding:.15em 0 .15em 1rem;border-left:2px solid var(--reader-accent);font-size:1.06em;line-height:1.56;font-weight:760;letter-spacing:-.006em}
.reader-notes{max-width:var(--reader-measure);margin:3.1em auto 0;border-top:1px solid var(--reader-line);color:var(--reader-muted)}
.reader-notes summary{cursor:pointer;padding:16px 0;font:750 .9rem/1.4 var(--reader-font-system)}
.reader-notes-body{font:400 15px/1.68 var(--reader-font-system)}
.reader-notes-body p,.reader-notes-body li{color:var(--reader-muted)!important}
.reader-bottom-nav{max-width:var(--reader-measure);margin:42px auto 0;padding-top:18px;border-top:1px solid var(--reader-line);display:flex;justify-content:space-between;gap:10px;font-family:var(--reader-font-system)}
.reader-bottom-nav button,.reader-bottom-nav a{min-height:44px;display:inline-flex;align-items:center;border:1px solid var(--reader-line);border-radius:999px;background:transparent;color:var(--reader-ink);padding:0 15px;font-weight:750;text-decoration:none;cursor:pointer}
.reader-bottom-nav button:disabled{opacity:.35;cursor:not-allowed}
.reader-progress-track{position:fixed;z-index:1200;top:0;left:0;right:0;height:3px;pointer-events:none}
.reader-progress-bar{height:100%;width:0;background:var(--reader-accent)}
.reader-dock{position:fixed;z-index:1190;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:5px;padding:6px;border:1px solid var(--reader-line);border-radius:999px;background:var(--reader-surface);box-shadow:var(--reader-shadow);backdrop-filter:blur(16px)}
.reader-dock button{min-width:42px;min-height:42px;padding:0 11px;border:0;border-radius:999px;background:transparent;color:var(--reader-ink);font:750 .88rem/1 var(--reader-font-system);cursor:pointer}
.reader-dock button:hover{background:color-mix(in srgb,var(--reader-ink) 7%,transparent)}
.reader-percent{min-width:42px;text-align:center;color:var(--reader-muted);font:650 .75rem/1 var(--reader-font-system);font-variant-numeric:tabular-nums}
.reader-panel{position:fixed;z-index:1185;right:12px;bottom:calc(70px + env(safe-area-inset-bottom));width:min(340px,calc(100vw - 24px));padding:14px;border:1px solid var(--reader-line);border-radius:18px;background:var(--reader-surface);color:var(--reader-ink);box-shadow:var(--reader-shadow);backdrop-filter:blur(18px);font-family:var(--reader-font-system)}
.reader-panel[hidden]{display:none!important}
.reader-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-weight:800}
.reader-panel-close{width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:var(--reader-ink);font-size:1.08rem;cursor:pointer}
.reader-setting-row{display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--reader-line);font-size:.8rem;font-weight:650}
.reader-controls{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap}
.reader-controls button{min-height:38px;padding:0 10px;border:1px solid var(--reader-line);border-radius:10px;background:var(--reader-bg);color:var(--reader-ink);font-weight:680;cursor:pointer}
.reader-controls button[aria-pressed="true"]{border-color:var(--reader-accent);box-shadow:inset 0 0 0 1px var(--reader-accent)}
body.reader-focus .reader-chrome,body.reader-focus .reader-hero .reader-kicker,body.reader-focus .reader-hero .reader-lead,body.reader-focus .reader-toc{display:none!important}
body.reader-focus .reader-hero{padding-top:26px}
body.reader-focus .reader-hero h1{font-size:clamp(2rem,5vw,3.3rem)}
@media(max-width:720px){
  :root{--reader-font-size:18px;--reader-line-height:1.76;--reader-measure:100%}
  .reader-shell{width:100%;padding-inline:18px}
  .reader-hero{padding:30px 0 22px}
  .reader-hero h1{font-size:clamp(2.35rem,12vw,3.75rem)}
  .reader-prose h2,article.prose h2{font-size:1.48em;margin-top:2.1em}
  .reader-dock{right:10px;bottom:calc(10px + env(safe-area-inset-bottom))}
  .reader-panel{right:10px;bottom:calc(68px + env(safe-area-inset-bottom));width:calc(100vw - 20px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body.bl-reader{transition:none}}
