html[data-vg-reading] {
  --vg-reading-bg: var(--ivory);
  --vg-reading-ink: #332f2a;
  --vg-reading-control: var(--control-border);
  --vg-reading-accent: var(--accent);
  background: var(--vg-reading-bg);
  color: var(--vg-reading-ink);
  scrollbar-gutter: stable;
}
html[data-vg-reading][data-vg-theme=light] { --vg-reading-bg: var(--elevated); --vg-reading-ink: #242424; }
html[data-vg-reading][data-vg-theme=dark] {
  --vg-reading-bg: #1d2421;
  --vg-reading-ink: #e9e5da;
  --vg-reading-control: #87958c;
  --vg-reading-accent: #e6b88f;
  color-scheme: dark;
}
html[data-vg-reading]:has(dialog[open]) { overflow: hidden; }
.vg-reading.vg-reader {
  --reader-bg: var(--vg-reading-bg);
  --reader-text: var(--vg-reading-ink);
  --reader-accent: var(--vg-reading-accent);
  --reader-border: var(--vg-reading-control);
  --reader-line: var(--vg-pref-line, 1.8);
  --vg-reader-paragraph: 1.3em;
  --vg-reader-font: var(--serif);
  --vg-reader-top: 0px;
  min-height: 100dvh;
  border: 0;
  border-radius: 0;
  transition: none;
}
[data-vg-font=sans] .vg-reading { --vg-reader-font: var(--sans); }
[data-vg-spacing=compact] .vg-reading { --vg-reader-paragraph: .85em; }
[data-vg-spacing=relaxed] .vg-reading { --vg-reader-paragraph: 1.8em; }
[data-vg-width=narrow] .vg-reading { --reader-width: 37.5rem; }
[data-vg-width=wide] .vg-reading { --reader-width: 51.25rem; }

.vg-reading.admin-bar { --vg-reader-top: 32px; }
@media (max-width: 782px) { .vg-reading.admin-bar { --vg-reader-top: 46px; } }
@media (max-width: 600px) { .vg-reading.admin-bar { --vg-reader-top: 0px; } }
.vg-reading-header {
  position: sticky; top: var(--vg-reader-top); z-index: 5;
  background: var(--reader-bg); border-bottom: 1px solid var(--reader-border);
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  padding-top: env(safe-area-inset-top, 0px);
}
.vg-reading-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 56px; }
.vg-reading .vg-reading-back { min-width: 0; max-width: 100%; justify-content: flex-start; padding-inline: var(--s1) var(--s2); }
.vg-reading-back svg { flex: none; }
.vg-reading-back span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vg-reading-tools { display: flex; flex: none; gap: var(--s2); }
.vg-reading [data-vg-open], .vg-reading.vg-site-nav-ready .vg-reading-directory-fallback { display: none; }
.vg-reading.vg-site-nav-ready [data-vg-open] { display: inline-flex; }
.vg-reading-progress { position: absolute; inset: auto 0 0; width: 100%; height: 3px; border: 0; appearance: none; background: transparent; }
.vg-reading-progress::-webkit-progress-bar { background: transparent; }
.vg-reading-progress::-webkit-progress-value { background: var(--reader-accent); }
.vg-reading-progress::-moz-progress-bar { background: var(--reader-accent); }

.vg-reading-main { scroll-margin-top: calc(var(--vg-reader-top) + 60px); }
.vg-reading-copy.vg-reader-copy { padding-block: clamp(2.25rem, 7vw, 5rem) var(--s10); }
.vg-reading-title { display: grid; gap: var(--s3); margin-bottom: clamp(1.75rem, 5vw, 3rem); }
.vg-reading-title .vg-overline { color: var(--reader-accent); }
.vg-reading-title .vg-h1 { font-size: clamp(1.85rem, 4.8vw, 3.25rem); line-height: 1.2; text-wrap: balance; }
.vg-reading-text { font: 400 var(--vg-pref-size, var(--reader-size))/var(--reader-line) var(--vg-reader-font); text-align: start; min-width: 0; }
.vg-reading-editorial > :is(p,h2) { white-space: pre-wrap; }
.vg-reading-editorial > h2 { font: 600 1.2em/1.4 var(--vg-reader-font); }
.vg-reading-illustration {
  margin-block-end: clamp(var(--s6), 5vw, var(--s10));
  overflow: hidden;
  border: 1px solid var(--reader-border);
  border-radius: var(--radius);
}
.vg-reading-illustration img { display: block; width: 100%; height: auto; }
.vg-reader-copy .vg-reading-text :where(p,h3) { margin-block-end: 0; }
.vg-reading-text > * + * { margin-block-start: var(--vg-reader-paragraph); }
.vg-reading-text :is(img,video,iframe) { max-width: 100%; }
.vg-reading-text img { height: auto; }
.vg-reading-text :is(pre,.wp-block-table) { max-width: 100%; overflow: auto; }
.vg-reading-text pre { white-space: pre-wrap; }
.vg-reading-text table { max-width: 100%; overflow-wrap: anywhere; }
.vg-reading-text ul, .vg-reading-text ol { padding-inline-start: 1.5em; }

.vg-reading-end {
  width: min(100% - 2 * var(--s4), var(--reader-width)); margin-inline: auto;
  text-align: center; border-top: 1px solid var(--reader-border);
  padding-block: var(--s5) max(var(--s10), env(safe-area-inset-bottom, 0px));
}
.vg-reading-end > * + * { margin-top: var(--s3); }
.vg-reading-neighbors { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: var(--s2); align-items: center; }
.vg-reading-neighbors [rel=prev] { grid-column: 1; justify-self: start; }
.vg-reading-neighbors [rel=next] { grid-column: 3; justify-self: end; }
.vg-reading-position { grid-column: 2; white-space: nowrap; }
.vg-reading-end-links { justify-content: center; }
.vg-reading a:not(.vg-button) { text-underline-offset: .2em; }
.vg-reading .vg-button--outline { border-color: var(--reader-border); }
.vg-reading :is(a,button,input,select):focus-visible { outline-color: var(--reader-accent); }

.vg-reading-panel.vg-dialog {
  background: var(--reader-bg); color: var(--reader-text); border: 1px solid var(--reader-border);
  inset: auto 0 0; position: fixed; width: min(100%, 35rem); height: auto; max-height: min(82dvh, 44rem);
  margin: 0 auto; padding: var(--s4) max(var(--s4), env(safe-area-inset-right, 0px)) max(var(--s4), env(safe-area-inset-bottom, 0px)) max(var(--s4), env(safe-area-inset-left, 0px));
  overflow: auto; overscroll-behavior: contain; border-radius: var(--radius) var(--radius) 0 0;
}
.vg-reading-panel-heading { justify-content: space-between; margin-bottom: var(--s3); }
.vg-reading-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s3); margin-block: var(--s4); }
.vg-reading-panel .vg-label { min-width: 0; }
.vg-reading-panel .vg-label :is(select,input) { background: var(--reader-bg); color: var(--reader-text); border-color: var(--reader-border); min-height: 44px; }
.vg-reading-size { border: 0; margin: 0; padding: 0; min-width: 0; }
.vg-reading-size legend { padding: 0; font-weight: 600; }
.vg-reading-size output { font-size: .875rem; white-space: nowrap; }
.vg-reading-directory-form { display: grid; gap: var(--s2); margin-block: var(--s3); }
.vg-reading-directory-pages { align-items: end; margin-bottom: var(--s3); }
.vg-reading-directory-list { padding: 0; list-style: none; margin: var(--s2) 0; }
.vg-reading-directory-list a { text-decoration: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2); min-height: 44px; border-bottom: 1px solid var(--reader-border); }
.vg-reading-directory-list a[aria-current=page] { font-weight: 700; border-inline-start: 3px solid var(--reader-accent); }
.vg-reading-directory-list a > span { color: var(--reader-accent); }
@media (max-width: 23rem) { .vg-reading-fields { grid-template-columns: minmax(0,1fr); } }
@media (min-width: 48rem) {
  .vg-reading-panel.vg-dialog { inset: 0 0 0 auto; margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: var(--s6); }
  .vg-reading-directory-form { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: end; }
}

/* UX/UI giai đoạn 3 — điều hướng khi đọc */
.vg-reading-header { transition: top 200ms ease; }
.vg-reading-chrome-hidden .vg-reading-header { top: calc(var(--vg-reader-top) - var(--vg-reading-header-h, 64px) - 4px); }
.vg-reading-top-nav { display: none; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); font-size: .875rem; }
.vg-reading-top-nav a { color: var(--reader-accent); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.vg-reading-top-nav a:hover { text-decoration: underline; }
.vg-reading-keys { color: var(--reader-text); opacity: .6; font-size: .8125rem; margin-inline-start: auto; }
.vg-reading-dock { display: none; }
.vg-reading-directory-list a[data-read] { opacity: .72; }

.vg-reading-pref { display: grid; gap: var(--s2); }
.vg-reading-pref-label { font-weight: 600; }
.vg-reading-seg { display: flex; padding: 2px; border: 1px solid var(--reader-border); border-radius: var(--radius); }
.vg-reading-seg button {
  flex: 1 1 0; min-height: 40px; padding: var(--s1) var(--s2); border: 0; border-radius: calc(var(--radius) - 2px);
  background: transparent; color: var(--reader-text); font-weight: 600;
}
.vg-reading-seg button[aria-pressed=true] { background: var(--reader-text); color: var(--reader-bg); }
.vg-reading-seg [data-swatch] { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); }
.vg-reading-seg [data-swatch]::before { content: ''; width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid #857867; flex: none; }
.vg-reading-seg [data-swatch=paper]::before { background: #f5f0e6; }
.vg-reading-seg [data-swatch=light]::before { background: #fff; }
.vg-reading-seg [data-swatch=dark]::before { background: #1d2421; }

@media (min-width: 48rem) {
  .vg-reading-top-nav { display: flex; }
}
@media (max-width: 47.999rem) {
  /* Phone dock: previous, chapter list, settings, next — within thumb reach. */
  .vg-reading-dock {
    position: fixed; z-index: 6; inset: auto 0 0; display: grid; grid-template-columns: 48px 1fr 1fr 48px; gap: var(--s1);
    padding: var(--s2) var(--s3) max(var(--s2), env(safe-area-inset-bottom, 0px));
    background: var(--reader-bg); border-top: 1px solid var(--reader-border); transition: transform 200ms ease;
  }
  .vg-reading-dock .vg-button { color: var(--reader-text); padding-inline: var(--s2); }
  .vg-reading-dock .vg-button:hover { background: color-mix(in srgb, var(--reader-bg), var(--reader-text) 10%); }
  .vg-reading-chrome-hidden .vg-reading-dock { transform: translateY(110%); }
  .vg-reading:has(#vg-reader-tts:not([hidden])) .vg-reading-dock { display: none; }
  .vg-reading-main { padding-block-end: 4.5rem; }
  .vg-reading-panel .vg-reading-pref--readingWidth { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-reading-header, .vg-reading-dock { transition: none; }
}