/* The "library" design. Colours (the palette, the stone-grey light
   version, the light/dark switch) apply on every screen; the PC / laptop
   layout (1100px and wider, or 1024px and wider held sideways, so iPads
   on their side get it too) sits inside its own media queries,
   and the PC header pieces (.dk-nav, .dk-search) are hidden elsewhere. */
.dk-nav, .dk-search, .dk-acct, .dk-login, .dk-theme { display: none; }
.cm-card { cursor: pointer; }
.sh-thumbs { display: none; }
.home-below, .home-main, .home-side { display: contents; }
.ex-side, .ex-main, .mh-me-side, .mh-me-main { display: contents; }
.ex-filters { display: none; }
.cl-left, .cl-center { display: contents; }
.cl-right { display: none; }


/* ---- the "library" palette shared by every page on every screen: dark
   wood desk, ivory paper, brown-black ink, vermilion seal, kraft paper,
   gilt. Cormorant for titles, typewriter mono for small labels. ---- */
:root {
  --lib-desk: #120e0b; --lib-desk-2: #1b1410; --lib-cream: #efe6cc; --lib-cream-2: rgba(239, 230, 204, .66);
  --lib-paper: #f3ead8; --lib-paper-2: #e9dcc3; --lib-ink: #2b2219; --lib-ink-2: #6d5f4d; --lib-ink-3: #9a8b74;
  --lib-seal: #9b2c25; --lib-seal-light: #c8574b; --lib-gold: #d8b25a; --lib-kraft: #c3a372; --lib-line: rgba(216, 178, 90, .18);
  /* light version: one warm stone grey for the whole page; every block
     (panels, cards, notes, the book) is a lighter sheet of paper on it */
  --lib-day: #e4e0d8; --lib-sheet: #fbf8f1; --lib-sheet-line: rgba(43, 34, 25, .12);
  --lib-sheet-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(43, 34, 25, .1), 0 14px 30px -20px rgba(60, 45, 30, .45);
}
@media (min-width: 1100px), (min-width: 1024px) and (orientation: landscape) {
  /* ---- header: text menu + search; the ☰ menu keeps account items ---- */
  .header-inner { max-width: 1240px; padding: .45rem 24px; gap: 1.2rem; }
  .dk-nav { display: flex; align-items: center; gap: .2rem; margin-left: 1.2rem; }
  .dk-nav a {
    padding: .55rem .9rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
    color: rgba(244, 247, 248, .72); font: 600 .9rem/1 "Plus Jakarta Sans", system-ui, sans-serif;
    transition: color .15s, background .15s;
  }
  .dk-nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
  .dk-nav a.on { color: #aeeaf3; background: rgba(38, 194, 220, .15); }
  .dk-search {
    display: flex; align-items: center; gap: .55rem; position: relative; margin-left: auto;
    width: min(320px, 24vw); padding: .55rem .95rem; border-radius: 999px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
  }
  .dk-search:focus-within { border-color: rgba(38, 194, 220, .6); background: rgba(255, 255, 255, .09); }
  .dk-search svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: rgba(244, 247, 248, .65); stroke-width: 2; stroke-linecap: round; }
  .dk-search input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #f4f7f8;
    font: 500 .88rem/1.2 "Plus Jakarta Sans", system-ui, sans-serif;
  }
  .dk-search input::placeholder { color: rgba(244, 247, 248, .5); }
  .dk-search .dk-hits { top: calc(100% + 10px); right: 0; width: 380px; }
  .nav-actions { margin-left: .2rem; }
  /* no ☰ on PC: the header already has the links and the search; the
     avatar opens the same panel as a small account menu */
  .nav-actions .menu-btn.menu-btn { display: none !important; }
  .dk-acct {
    display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 2px solid rgba(38, 194, 220, .55); background: transparent; transition: border-color .15s, transform .15s;
  }
  .dk-acct:hover, .dk-acct[aria-expanded="true"] { border-color: #26c2dc; transform: scale(1.04); }
  .dk-acct .member-avatar { width: 32px; height: 32px; border-radius: 50%; font-size: .85rem; }
  .dk-acct .member-avatar img { border-radius: 50%; }
  .dk-login {
    display: inline-flex; align-items: center; padding: .55rem 1.05rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
    background: #26c2dc; color: #04222a; font: 700 .86rem/1 "Plus Jakarta Sans", system-ui, sans-serif;
  }
  #mobileMenu.mobile-menu { left: auto; right: max(24px, calc((100vw - 1240px) / 2 + 24px)); width: 300px; top: 64px; }
  #mobileMenu .mm-group--nav, #mobileMenu .mm-search, #mobileMenu #searchBox { display: none !important; }
  #app[data-theme="light"] .dk-acct { border-color: rgba(14, 127, 147, .5); }
  /* light pages (story page in light mode) */
  #app[data-theme="light"] .dk-nav a { color: rgba(34, 29, 22, .66); }
  #app[data-theme="light"] .dk-nav a:hover { color: #221d16; background: rgba(34, 29, 22, .06); }
  #app[data-theme="light"] .dk-nav a.on { color: #0e7f93; background: rgba(14, 127, 147, .1); }
  #app[data-theme="light"] .dk-search { background: rgba(34, 29, 22, .05); border-color: rgba(34, 29, 22, .14); }
  #app[data-theme="light"] .dk-search svg { stroke: rgba(34, 29, 22, .55); }
  #app[data-theme="light"] .dk-search input { color: #221d16; }
  #app[data-theme="light"] .dk-search input::placeholder { color: rgba(34, 29, 22, .45); }

  /* ---- footer: four columns side by side ---- */
  .foot2-body {
    max-width: 1240px; display: grid; align-items: start;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); column-gap: 3rem;
  }
  .foot2-body > .brand { grid-column: 1; grid-row: 1; }
  .foot2-body > .foot2-kicker { grid-column: 1; grid-row: 2; }
  .foot2-body > .foot2-desc { grid-column: 1; grid-row: 3; }
  .foot2-body > .foot2-section { grid-column: 2; grid-row: 1 / span 3; margin-top: .4rem; }
  .foot2-cols { display: contents; }
  .foot2-cols > .foot2-section { grid-row: 1 / span 3; margin-top: .4rem; }
  .foot2-cols > .foot2-section:nth-child(1) { grid-column: 3; }
  .foot2-cols > .foot2-section:nth-child(2) { grid-column: 4; }
  .foot2-desc { font-size: .92rem; }

  .signal-hero {
    /* row 1: the open book; row 2: Trạm Preview; the side column runs
       down beside both */
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(290px, 25vw, 340px); grid-template-rows: auto auto;
    column-gap: clamp(36px, 3.6vw, 56px); row-gap: 52px; align-items: start;
    min-height: 0; padding: 96px var(--dk-left) 64px; box-sizing: border-box;
  }
  .sh-book { grid-column: 1; grid-row: 1; max-width: 900px; justify-self: start; height: min(560px, 66vh); min-height: 470px; }

}
@media all {
  /* ---- home banner, every screen: an open book that stays open.
     Changing story turns the right page over to the left (.sh-leaf,
     turnTo() in app.js). The only cover shown is on the bookmark. ---- */
  .signal-hero {
    --paper: #f3ead8; --paper-2: #e9dcc3; --ink: #2b2219; --ink-2: #6d5f4d; --ink-3: #9a8b74; --seal: #9b2c25;
    --dk-w: min(1240px, calc(100vw - 64px)); --dk-left: calc((100vw - var(--dk-w)) / 2);
    overflow-x: clip;
  }
  .sh-book {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); position: relative; z-index: 6; width: 100%; perspective: 2600px;
    /* lying on the desk, seen a little from above */
    transform: perspective(2200px) rotateX(9deg); transform-origin: 50% 100%;
  }

  .sh-cover { display: none; }
  .sh-bg {
    background:
      radial-gradient(60% 55% at 58% 38%, rgba(255, 214, 150, .16), transparent 70%),
      radial-gradient(90% 60% at 50% 105%, rgba(90, 58, 34, .55), transparent 70%),
      linear-gradient(180deg, #0d0c10 0%, #17120f 60%, #120e0b 100%);
  }
  .sh-scrim::before { display: none; }
  .sh-scrim::after { background: radial-gradient(70% 80% at 50% 45%, transparent 40%, rgba(5, 8, 14, .55) 100%), linear-gradient(180deg, transparent 75%, var(--bg) 100%); }
  /* the book's soft shadow on the desk */
  .sh-book::before {
    content: ""; position: absolute; z-index: -2; left: 4%; right: 4%; bottom: -46px; height: 80px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); filter: blur(10px);
  }
  .sh-poster { display: none; }
  /* the hard cover under the pages: cloth in the story's colour, a
     little larger than the page block, with a dark board edge */
  .sh-book::after {
    content: ""; position: absolute; z-index: -1; inset: -9px -13px -15px -13px; border-radius: 7px;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, 0) 47%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, 0) 53%, rgba(0, 0, 0, 0) 96%, rgba(0, 0, 0, .35) 100%),
      linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .25)),
      var(--cloth, #5a3a2a);
    box-shadow: 0 2px 0 rgba(255, 255, 255, .08) inset, 0 -3px 0 rgba(0, 0, 0, .35) inset, 0 40px 70px -28px rgba(0, 0, 0, .95), 0 14px 22px -10px rgba(0, 0, 0, .7);
    transition: background-color .6s;
  }
  .signal-hero .sh-content {
    grid-column: 2; grid-row: 1; min-height: 0; height: 100%; position: relative; flex: none; display: flex; flex-direction: column; justify-content: center; max-width: none; width: auto; margin: 0;
    padding: 28px 36px 24px 42px; box-sizing: border-box; overflow: hidden; border-radius: 2px 6px 6px 2px; text-shadow: none; color: var(--ink);
    background:
      linear-gradient(90deg, rgba(50, 32, 15, .38) 0, rgba(50, 32, 15, .12) 3%, rgba(255, 252, 240, .35) 7%, rgba(255, 252, 240, 0) 13%, rgba(60, 40, 20, 0) 90%, rgba(60, 40, 20, .08) 100%),
      radial-gradient(120% 90% at 70% 20%, rgba(255, 255, 255, .45), transparent 60%),
      linear-gradient(180deg, var(--paper), var(--paper-2));
    box-shadow: 1px 1px 0 #e3d5b8, 2px 2px 0 #cbb994, 3px 3px 0 #e3d5b8, 4px 4px 0 #c6b38d, 5px 5px 0 #ddcfb0, 6px 6px 0 #bfac86;
  }
  .signal-hero.is-morphing .sh-content { opacity: 1; }
  .sh-content > * { max-width: none; flex-shrink: 0; }
  .signal-hero .sh-content > .sh-desc { flex-shrink: 1; }
  .sh-content .sh-tags { min-height: 0; margin-bottom: 12px; gap: 10px; }
  .sh-content .sh-tag { padding: 0; border: 0; background: none; color: var(--ink-2); font-size: .62rem; letter-spacing: .18em; }
  .sh-content .sh-tag--accent { color: var(--seal); }
  .sh-content .sh-tag--accent::before { content: ""; width: 14px; height: 1.5px; background: var(--seal); }
  .sh-content .sh-tag-dot { background: var(--seal); }
  .sh-content .sh-tag + .sh-tag::before { content: "·"; margin-right: 10px; color: var(--ink-3); }
  .sh-content h1.sh-title {
    font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; letter-spacing: 0; line-height: 1.14; color: var(--ink);
    height: 5rem; margin: 0 0 6px;
    /* accents above the letters (í, ô, ế) and the parts hanging below
       (ạ, ị, g, p) reach outside a tight line: room for them, and nothing
       cut off at the box's edge */
    padding: .04em 0 .1em; overflow: visible;
  }
  .sh-content h1.sh-title em { color: var(--seal); font-style: italic; font-weight: 500; }
  .sh-content .sh-author { color: var(--ink-2); margin-bottom: 14px; font-size: .88rem; }
  .sh-content .sh-author b { color: var(--ink); }
  .sh-content .sh-desc {
    display: block; position: relative; flex: 0 1 auto; min-height: 0; max-height: calc(1.5em * 4 + 12px); overflow: hidden; margin: 2px 0 14px; padding-top: 4px; box-sizing: border-box;
    color: #3d3226; font: 500 1.04rem/1.5 "Cormorant Garamond", Georgia, serif;
    -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent); mask-image: linear-gradient(180deg, #000 74%, transparent);
  }
  .sh-content .sh-desc::first-letter { float: left; margin: .06em .1em 0 0; font: 600 3.2em/.8 "Cormorant Garamond", Georgia, serif; color: var(--seal); }
  .sh-content .sh-stats { gap: 26px; padding: 0; margin-bottom: 18px; }
  .sh-content .sh-stat-num { color: var(--ink); font: 600 1.3rem/1 "Cormorant Garamond", Georgia, serif; }
  .sh-content .sh-stat-label { color: var(--ink-3); }
  .sh-content .sh-ctas { margin-bottom: 12px; gap: 8px; }
  .sh-content .sh-btn { padding: 11px 16px; border-radius: 4px; letter-spacing: .05em; font-size: .82rem; }
  .sh-content .sh-btn--primary { background: var(--ink); color: var(--paper); }
  .sh-content .sh-btn--ghost { background: transparent; color: var(--ink); border-color: rgba(43, 34, 25, .35); }
  .sh-content .sh-btn--ghost:hover { border-color: var(--ink); }
  .sh-content .sh-trust { color: var(--ink-3); font-size: .66rem; }
  .sh-content .sh-trust b { color: var(--ink-2); }
  .sh-content .sh-trust svg { color: var(--seal); }
  /* left page: endpaper with a kraft pocket and the borrow card */
  .sh-lpage {
    display: block; grid-column: 1; grid-row: 1; position: relative; overflow: hidden; border-radius: 6px 2px 2px 6px;
    background:
      linear-gradient(270deg, rgba(50, 32, 15, .38) 0, rgba(50, 32, 15, .12) 3%, rgba(255, 252, 240, .35) 7%, rgba(255, 252, 240, 0) 13%, rgba(60, 40, 20, 0) 90%, rgba(60, 40, 20, .08) 100%),
      radial-gradient(circle at 12px 12px, rgba(110, 80, 50, .07) 2px, transparent 2.5px) 0 0 / 24px 24px,
      radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .4), transparent 60%),
      linear-gradient(180deg, var(--paper), var(--paper-2));
    box-shadow: -1px 1px 0 #e3d5b8, -2px 2px 0 #cbb994, -3px 3px 0 #e3d5b8, -4px 4px 0 #c6b38d, -5px 5px 0 #ddcfb0, -6px 6px 0 #bfac86;
  }
  /* the old left page held on show while the page turns onto it */
  .signal-hero .sh-book > .sh-hold { position: absolute; z-index: 5; grid-column: auto; grid-row: auto; top: 0; bottom: 0; left: 0; right: auto; width: 50%; height: auto; }
  /* the turning page: lies on the right, hinged on the spine (its left
     edge), turns over to the left */
  .sh-leaf {
    display: block; position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; z-index: 7; pointer-events: none;
    transform-origin: left center; transform-style: preserve-3d; visibility: hidden;
  }
  .sh-leaf.is-turning { visibility: visible; }
  .signal-hero .sh-leaf > .sh-leaf-front, .sh-leaf > .sh-leaf-back {
    position: absolute; inset: 0; width: auto; height: auto; margin: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: none;
  }
  .sh-leaf > .sh-leaf-back { transform: rotateY(180deg); }
  /* light and shadow sweeping over the page as it turns */
  .sh-leaf.is-turning > div::after {
    content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none;
    animation: shTurnLight 1.2s cubic-bezier(.45, .05, .3, 1) both;
  }
  .sh-leaf.is-turning > .sh-leaf-front::after { background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 45%, rgba(255, 255, 255, .12)); }
  .sh-leaf.is-turning > .sh-leaf-back::after { background: linear-gradient(270deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 50%); }
  @keyframes shTurnLight { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
  /* a low kraft pocket glued at the foot of the left page */
  .sh-pocket {
    position: absolute; left: 12%; right: 12%; bottom: 7%; height: 30%; border-radius: 2px 2px 4px 4px;
    background: linear-gradient(180deg, #cfb58a, #bf9f6e); box-shadow: 0 2px 0 rgba(255, 255, 255, .25) inset, 0 10px 18px -10px rgba(60, 35, 10, .6);
  }
  .sh-pocket::before { /* the pocket's front flap, drawn over the bookmark */
    content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit;
    background: linear-gradient(180deg, #d6bd92, #c3a372); clip-path: polygon(0 30%, 50% 40%, 100% 30%, 100% 100%, 0 100%);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .06);
  }
  .sh-pocket-label {
    position: absolute; z-index: 3; left: 0; right: 0; bottom: 14%; text-align: center; color: rgba(70, 45, 20, .62);
    font: 600 .58rem/1.5 "JetBrains Mono", monospace; letter-spacing: .22em; text-transform: uppercase;
  }
  .sh-pocket-label b { font: 600 1rem/1.2 "Cormorant Garamond", Georgia, serif; letter-spacing: .04em; text-transform: none; color: rgba(70, 45, 20, .78); }
  /* the bookmark: long and narrow like the ones given away with a book —
     the cover on top, the borrowing details under it */
  .sh-card {
    position: absolute; z-index: 1; left: 50%; width: 48%; bottom: 34%; height: 236%; margin-left: -24%;
    display: flex; flex-direction: column; box-sizing: border-box; border-radius: 4px 4px 2px 2px;
    transform: rotate(-3deg); transform-origin: 50% 100%; color: var(--ink); background: #fbf6e8;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 8px 18px -8px rgba(60, 35, 10, .55), 0 0 0 1px rgba(120, 90, 50, .14);
  }
  .sh-mark-art { position: relative; display: block; flex: 0 0 46%; margin: 22px 7px 0; overflow: hidden; border-radius: 2px; background: #2a2018; }
  .sh-mark-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .sh-mark-art::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); background: linear-gradient(160deg, rgba(255, 255, 255, .16), transparent 40%); }
  .sh-mark-hole {
    position: absolute; z-index: 2; left: 50%; top: 7px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%;
    background: radial-gradient(circle, #2a2018 0 45%, #e9dcc3 50% 62%, rgba(0, 0, 0, .25) 66%, transparent 70%);
  }
  .sh-mark-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 9px 12px 10px; }
  .sh-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin: 0 0 3px; min-width: 0; }
  .sh-card-head span { min-width: 0; overflow: hidden; white-space: nowrap; padding-top: 2px; color: var(--seal); font: 700 .54rem/1.6 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
  .sh-card-head em { flex: none; color: var(--ink-3); font: 600 .54rem/1 "JetBrains Mono", monospace; font-style: normal; }
  .sh-card-book { display: grid; gap: 1px; margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(155, 44, 37, .45); }
  .sh-card-book b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .98rem/1.15 "Cormorant Garamond", Georgia, serif; }
  .sh-card-book span { color: var(--ink-2); font: italic 500 .76rem/1.2 "Cormorant Garamond", Georgia, serif; }
  .sh-card dl { margin: 0; display: grid; background: repeating-linear-gradient(180deg, transparent 0 19px, rgba(155, 44, 37, .16) 19px 20px); }
  .sh-card dl > div { display: flex; justify-content: space-between; gap: 8px; height: 20px; align-items: flex-end; padding-bottom: 2px; box-sizing: border-box; }
  .sh-card dt { color: var(--ink-3); font: 600 .52rem/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
  .sh-card dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3a2a1c; font: italic 500 .84rem/1 "Cormorant Garamond", Georgia, serif; }
  .sh-card-stamp {
    align-self: flex-end; margin: auto 0 0; padding: 3px 7px; border: 2px solid rgba(155, 44, 37, .7); border-radius: 4px;
    color: rgba(155, 44, 37, .78); font: 700 .52rem/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase;
    transform: rotate(7deg); mix-blend-mode: multiply;
  }
  /* the numbers now live on the card, so the introduction page breathes */
  .sh-content .sh-stats { display: none; }
  .sh-content .sh-desc { max-height: calc(1.5em * 6 + 12px); }
}
@media all {
  /* ---- every screen: Live Resonance as a library register card, the
     comments this week as taped paper notes, Trạm Preview with its covers
     drawn as books and the story's details on a "preview ticket". Where
     they sit is set per screen below. ---- */
  .home-main .shelf { border: 0; background: none; box-shadow: none; }
  .home-main .shelf-hero {
    --stub: 88px; position: relative; isolation: isolate;
    margin: 0; text-align: left;
    filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .45)) drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
  }
  .home-main .shelf-ticket { animation: shTicketIn .5s cubic-bezier(.2, .7, .2, 1); }
  /* a few more tickets stacked behind, their corners showing */
  .home-main .shelf-hero::before, .home-main .shelf-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      repeating-linear-gradient(180deg, rgba(43, 34, 25, .3) 0 5px, transparent 5px 10px) calc(100% - var(--stub)) 0 / 1.5px 100% no-repeat,
      linear-gradient(180deg, #f1e5c9, #dfcba4);
    -webkit-mask: radial-gradient(circle 10px at calc(100% - var(--stub)) 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle 10px at calc(100% - var(--stub)) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle 10px at calc(100% - var(--stub)) 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle 10px at calc(100% - var(--stub)) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
  }
  .home-main .shelf-hero::before { transform: translate(14px, 9px) rotate(2.6deg); }
  .home-main .shelf-hero::after { transform: translate(-10px, 14px) rotate(-4.2deg); background-color: #d8c39b; filter: brightness(.94); }
  .home-main .shelf-hero:has(.shelf-ticket) { padding: 0; }
  .home-side .reshome { margin: 0; padding: 0; max-width: none; }
  .home-side .reshome-card {
    max-width: none; margin: 0; padding: 18px 20px 16px; border: 0; border-radius: 3px; text-align: left; color: var(--lib-ink);
    background:
      linear-gradient(180deg, transparent 0 38px, rgba(155, 44, 37, .5) 38px 39px, transparent 39px),
      radial-gradient(120% 90% at 30% 10%, rgba(255, 255, 255, .45), transparent 60%),
      linear-gradient(180deg, var(--lib-paper), var(--lib-paper-2));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 18px 30px -16px rgba(0, 0, 0, .85);
    transform: rotate(-1deg);
  }
  .home-side .reshome-kicker { color: var(--lib-seal); font-size: .6rem; letter-spacing: .2em; }
  .home-side .reshome-kicker i { background: var(--lib-seal); box-shadow: none; }
  .home-side .reshome-stats { justify-content: space-between; gap: 6px; margin-top: 18px; }
  .home-side .reshome-stat { min-width: 0; }
  .home-side .reshome-stat b, .home-side .reshome-card.is-counting .reshome-stat b {
    color: var(--lib-ink); font: 600 1.9rem/1 "Cormorant Garamond", Georgia, serif; text-shadow: none;
  }
  .home-side .reshome-stat span { color: var(--lib-ink-3); font-size: .54rem; }
  .home-side .reshome-ratio-bar { height: 4px; margin-top: 14px; background: rgba(43, 34, 25, .12); }
  .home-side .reshome-ratio-bar .res-ratio-fill { background: var(--lib-seal); }
  .home-side .reshome-ratio-caption { color: var(--lib-ink-2); }
  .home-side .reshome-ratio-caption b { color: var(--lib-ink); }
  .home-side .reshome-social-row { justify-content: flex-start; gap: 10px; margin-top: 14px; }
  .home-side .reshome-social { color: var(--lib-ink); border: 1.5px solid rgba(43, 34, 25, .45); border-radius: 50%; padding: 6px; width: 34px; height: 34px; box-sizing: border-box; background: none; box-shadow: none; }
  .home-side .reshome-social svg { color: var(--lib-ink); fill: currentColor; }
  .home-side .cm-head { flex: none; padding: 0; margin-bottom: 4px; }
  .home-side .cm-kicker { color: var(--lib-gold); font-size: .6rem; letter-spacing: .2em; }
  .home-side .cm-kicker i { background: var(--lib-gold); box-shadow: none; }
  .home-side .cm-track { display: block; width: auto; animation: none; }
  .home-side .cm-group[data-cm-clone] { display: none; }
  .home-side .cm-card {
    --tilt: .8deg;
    position: relative; width: auto; padding: 14px 16px 12px; gap: 6px; border: 0; border-radius: 2px; color: var(--lib-ink);
    background: linear-gradient(180deg, #fbf6e8, #f1e7d2); box-shadow: 0 12px 20px -14px rgba(0, 0, 0, .9);
    transform: rotate(var(--tilt)); transform-origin: 50% 0;
  }
  .home-side .cm-card:nth-child(2n) { --tilt: -1.1deg; }
  /* touched, hovered or scrolled: the note swings a little on its tape
     (comment-marquee-v1.js adds .is-swaying) */
  .home-side .cm-card.is-swaying { animation: cmSway 1.25s cubic-bezier(.25, .6, .35, 1); }
  @keyframes cmSway {
    0% { transform: rotate(var(--tilt)); }
    18% { transform: rotate(calc(var(--tilt) + 3.4deg)); }
    40% { transform: rotate(calc(var(--tilt) - 2.4deg)); }
    60% { transform: rotate(calc(var(--tilt) + 1.3deg)); }
    80% { transform: rotate(calc(var(--tilt) - .5deg)); }
    100% { transform: rotate(var(--tilt)); }
  }
  /* a strip of paper tape holding each note */
  .home-side .cm-card::before {
    content: ""; position: absolute; top: -7px; left: 50%; width: 58px; height: 14px; margin-left: -29px;
    background: rgba(214, 189, 146, .75); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transform: rotate(-3deg);
  }
  .home-side .cm-card { min-width: 0; box-sizing: border-box; }
  .home-side .cm-avatar { width: 28px; height: 28px; background: rgba(43, 34, 25, .08); color: var(--lib-ink); border: 1px solid rgba(43, 34, 25, .3); }
  .home-side .cm-who b { color: var(--lib-ink); font: 600 1rem/1.1 "Cormorant Garamond", Georgia, serif; }
  .home-side .cm-who span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lib-ink-3); }
  .home-side .cm-body { color: #3d3226; font: 500 .98rem/1.4 "Cormorant Garamond", Georgia, serif; -webkit-line-clamp: 2; }
  .home-main .shelf-head { grid-column: 1 / -1; display: flex; margin: 0 0 6px; padding: 0; }
  /* a shelf label in a thin brass holder */
  .home-main .shelf-title {
    display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 18px 7px 14px; border-radius: 2px;
    color: var(--lib-ink); -webkit-text-fill-color: currentColor; background: linear-gradient(180deg, #fbf6e8, #ece0c6);
    font: 600 1.15rem/1 "Cormorant Garamond", Georgia, serif; letter-spacing: .05em; text-transform: none; text-shadow: none;
    box-shadow: 0 0 0 2px #b8955a, 0 0 0 3px rgba(60, 40, 15, .5), 0 8px 14px -8px rgba(0, 0, 0, .6);
  }
  .home-main .shelf-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lib-seal); box-shadow: none; }
  .home-main .shelf-title::after { display: none; }
  /* story cards turning in the ring: library catalogue cards standing
     up — the cover pasted on like a photo with two strips of tape, ruled
     lines below with the call number, the title in ink and the author,
     an index tab with the title's first letter on top */
  /* taller cards, so the whole cover fits on (covers are 2:3) */
  .home-main .shelf-carousel { --shelf-card-aspect: 1.52; }
  .home-main .shelf-card { --cw: var(--shelf-card-w, 220px); }
  .home-main .shelf-card-face {
    overflow: visible; border-radius: 3px;
    background:
      linear-gradient(180deg, transparent 68.5%, rgba(155, 44, 37, .5) 68.5% calc(68.5% + 1px), transparent calc(68.5% + 1px)),
      repeating-linear-gradient(180deg, transparent 0 calc(var(--cw) * .085), rgba(60, 90, 140, .14) calc(var(--cw) * .085) calc(var(--cw) * .085 + 1px)),
      linear-gradient(180deg, #fbf6e8, #f0e4ca);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(120, 90, 50, .2), 0 18px 28px -14px rgba(0, 0, 0, .7);
  }
  .home-main .shelf-card.is-front .shelf-card-face { box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(155, 44, 37, .3), 0 26px 40px -14px rgba(0, 0, 0, .78); }
  .home-main .shelf-card-face img {
    inset: 4.6% 19% auto 19%; width: 62%; height: auto; aspect-ratio: 2 / 3; border-radius: 1px; object-fit: cover; transform: rotate(-1.4deg);
    box-shadow: 0 0 0 calc(var(--cw) * .014) #fffdf6, 0 4px 9px -3px rgba(40, 25, 10, .45);
  }
  .home-main .shelf-cat { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  /* tape over the photo's top corners */
  .home-main .shelf-cat::before, .home-main .shelf-cat::after {
    content: ""; position: absolute; top: 2.6%; width: 24%; height: 4.4%; background: rgba(222, 202, 160, .78); box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  }
  .home-main .shelf-cat::before { left: 10%; transform: rotate(-24deg); }
  .home-main .shelf-cat::after { right: 10%; transform: rotate(20deg); }
  .home-main .shelf-cat-tab {
    position: absolute; top: calc(var(--cw) * -.1); left: 12%; width: 22%; height: calc(var(--cw) * .11); border-radius: 5px 5px 0 0;
    display: grid; place-items: center; font: italic 600 calc(var(--cw) * .085)/1 "Cormorant Garamond", Georgia, serif; color: var(--lib-seal);
    background: linear-gradient(180deg, #fbf6e8, #f5ecd6); box-shadow: 0 0 0 1px rgba(120, 90, 50, .2), 0 -3px 6px -4px rgba(0, 0, 0, .4);
  }
  .home-main .shelf-cat-no, .home-main .shelf-cat b, .home-main .shelf-cat small {
    position: absolute; left: 9%; right: 9%; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left;
  }
  .home-main .shelf-cat-no { top: 70.5%; color: var(--lib-seal); font: 700 calc(var(--cw) * .042)/1.4 "JetBrains Mono", monospace; letter-spacing: .1em; font-style: normal; }
  .home-main .shelf-cat b { top: 75.5%; color: #26324a; font: italic 600 calc(var(--cw) * .085)/1.2 "Cormorant Garamond", Georgia, serif; }
  .home-main .shelf-cat small { top: 87%; color: var(--lib-ink-2); font: 600 calc(var(--cw) * .04)/1.4 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
  /* playing a teaser: the video fills the card */
  .home-main .shelf-card-face.is-playing { background: #000; overflow: hidden; }
  @keyframes shTicketIn { from { opacity: 0; transform: translateY(14px) rotate(-2deg); } to { opacity: 1; transform: none; } }
  .home-main .shelf-ticket {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); column-gap: 18px;
    grid-template-areas: "kick stub" "title stub" "author stub" "pills stub" "quote stub" "teaser stub" "cta play";
    padding: 18px 0 16px 22px; color: var(--lib-ink); transform: rotate(-1deg);
    background:
      repeating-linear-gradient(180deg, rgba(43, 34, 25, .38) 0 5px, transparent 5px 10px) calc(100% - var(--stub)) 0 / 1.5px 100% no-repeat,
      radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, .55), transparent 60%),
      linear-gradient(180deg, #f8f0de, #ebddbf);
    -webkit-mask: radial-gradient(circle 10px at calc(100% - var(--stub)) 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle 10px at calc(100% - var(--stub)) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle 10px at calc(100% - var(--stub)) 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle 10px at calc(100% - var(--stub)) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
  }
  .home-main .shelf-ticket-kicker { grid-area: kick; display: block; overflow: hidden; white-space: nowrap; text-overflow: clip; margin: 0 0 6px; padding-top: 2px; color: var(--lib-seal); font: 700 .56rem/1.7 "JetBrains Mono", monospace; letter-spacing: .22em; text-transform: uppercase; }
  .home-main .shelf-ticket h3 { grid-area: title; margin: 0 0 .2rem; color: var(--lib-ink); font: 600 1.7rem/1.1 "Cormorant Garamond", Georgia, serif; }
  .home-main .shelf-ticket .shelf-hero-author { grid-area: author; margin: 0 0 .55rem; color: var(--lib-ink-2); font-size: .8rem; }
  .home-main .shelf-ticket .shelf-hero-pills { grid-area: pills; display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 0; }
  .home-main .shelf-ticket .shelf-hero-pills span {
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--lib-ink-3);
    font: 700 .56rem/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase;
  }
  /* the status as a red rubber stamp */
  .home-main .shelf-ticket .shelf-hero-pills span:first-child {
    padding: 4px 8px; border: 1.5px solid rgba(155, 44, 37, .75); border-radius: 3px; color: rgba(155, 44, 37, .85); transform: rotate(-3deg); mix-blend-mode: multiply;
  }
  .home-main .shelf-ticket .shelf-hero-quote { grid-area: quote; display: block; margin: .8rem 0 0; padding: .1rem 0 .1rem .9rem; border-left: 2px solid var(--lib-seal); }
  .home-main .shelf-ticket .shelf-hero-quote p {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; max-width: none;
    color: #3a2c20; font: italic 500 1.18rem/1.4 "Cormorant Garamond", Georgia, serif; text-wrap: pretty;
  }
  .home-main .shelf-ticket .shelf-hero-teaser { grid-area: teaser; margin: .7rem 0 0; color: var(--lib-ink-2); text-align: left; text-align-last: auto; font: 500 1rem/1.5 "Cormorant Garamond", Georgia, serif; }
  .home-main .shelf-hero.has-quote .shelf-hero-teaser { display: none; }
  .home-main .shelf-ticket .shelf-hero-more { color: var(--lib-seal); }
  .home-main .shelf-ticket .shelf-hero-actions { display: contents; }
  .home-main .shelf-ticket .shelf-hero-cta {
    grid-area: cta; justify-self: start; margin-top: .9rem; padding: .6rem 1.05rem; border: 0; border-radius: 3px; box-shadow: none;
    background: var(--lib-ink); color: var(--lib-paper); font-size: .8rem; letter-spacing: .04em;
  }
  /* the stub: "Xem video" where the ticket gets checked */
  .home-main .shelf-ticket .shelf-hero-play {
    grid-area: play; align-self: end; justify-self: stretch; display: flex; align-items: center; justify-content: center; gap: 4px;
    margin: .9rem 12px 0 0; padding: .55rem .3rem; border: 1px solid rgba(43, 34, 25, .4); border-radius: 3px; box-shadow: none;
    background: none; color: var(--lib-ink); font-size: .7rem; line-height: 1.2; text-align: center; white-space: normal;
  }
  .home-main .shelf-ticket .shelf-hero-play:hover { border-color: var(--lib-seal); color: var(--lib-seal); box-shadow: none; }
  .home-main .shelf-ticket .shelf-hero-play-icon { color: var(--lib-seal); }
  .home-main .shelf-ticket-stub {
    grid-area: stub; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 12px 0 0;
  }
  .home-main .shelf-ticket-stub b, .home-main .shelf-ticket-stub i { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  .home-main .shelf-ticket-stub b { color: var(--lib-ink-2); font: 700 .6rem/1 "JetBrains Mono", monospace; letter-spacing: .24em; text-transform: uppercase; }
  .home-main .shelf-ticket-stub i { color: var(--lib-seal); font: italic 600 1rem/1 "Cormorant Garamond", Georgia, serif; }
}
@media (min-width: 1100px), (min-width: 1024px) and (orientation: landscape) {
  /* ---- side column beside the open book: Live Resonance as a library
     register card, comments this week as paper notes ---- */
  .signal-hero > .home-side {
    /* as tall as the book and Trạm Preview together; contain: size keeps
       the notes from stretching the rows (they scroll instead) */
    grid-column: 2; grid-row: 1 / span 2; align-self: stretch; contain: size; position: relative; z-index: 6;
    display: flex; flex-direction: column; gap: 18px; min-width: 0;
  }
  .signal-hero > .home-side > * { min-width: 0; }
  .home-side .reshome { flex: none; }
  .home-side .cm-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; max-width: none; }
  /* every note this week, in a column that scrolls (wheel / drag) */
  .home-side .cm-marquee {
    flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity;
    padding: 12px 8px 18px 4px; margin: 0 -8px 0 -4px;
    scrollbar-width: thin; scrollbar-color: rgba(216, 178, 90, .45) transparent;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 26px), transparent 100%);
  }
  .home-side .cm-marquee::-webkit-scrollbar { width: 6px; }
  .home-side .cm-marquee::-webkit-scrollbar-thumb { background: rgba(216, 178, 90, .45); border-radius: 3px; }
  .home-side .cm-card { scroll-snap-align: start; scroll-margin-top: 12px; }
  .home-side .cm-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 0; }

  /* ---- Trạm Preview under the open book (moved there by placeHomeSide()
     in app.js): the same carousel, smaller, its covers drawn as books; the
     story's details on a "preview ticket" ---- */
  .home-below { display: none; }
  .signal-hero > .home-main { grid-column: 1; grid-row: 2; position: relative; z-index: 6; display: block; width: 100%; max-width: 900px; min-width: 0; }
  .home-main .shelf {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 29vw, 400px); grid-template-rows: auto auto; column-gap: 28px; align-items: center;
    margin: 0; padding: 0; max-width: none; width: 100%; box-sizing: border-box; border: 0; background: none; box-shadow: none;
  }
  .home-main .shelf-stage { grid-column: 1; grid-row: 2; min-width: 0; }
  .home-main .shelf-carousel { height: 340px; min-height: 0; }
  /* the ticket: main part | perforation | stub, notched at the tear */
  .home-main .shelf-hero { grid-column: 2; grid-row: 2; margin: 0; align-self: center; }

  /* ---- Khám phá: filter column (sticky) | covers 5 across ---- */
  #exScope > .ex-wrap { max-width: 1240px; display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 44px; align-items: start; padding-top: 1.6rem; }
  #exScope > .ex-wrap > .pg-nav { grid-column: 1 / -1; }
  .ex-side { display: block; grid-column: 1; position: sticky; top: 76px; }
  .ex-main { display: block; grid-column: 2; min-width: 0; padding-top: .3rem; }
  .ex-side .ex-head { flex-direction: column; gap: .8rem; }
  .ex-side .ex-title { font-size: 2.4rem; }
  .ex-side .ex-find { margin-bottom: 1.2rem; }
  .ex-filters { display: grid; gap: 1.3rem; }
  .ex-fgroup { display: grid; gap: .2rem; }
  .ex-fgroup h3 { margin: 0 0 .35rem; color: var(--ex-accent); font: 700 .66rem/1 "JetBrains Mono", monospace; letter-spacing: .18em; text-transform: uppercase; }
  .ex-f {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .75rem; border-radius: 10px;
    color: var(--ex-muted); text-decoration: none; font: 600 .88rem/1.2 "Plus Jakarta Sans", system-ui, sans-serif;
  }
  .ex-f:hover { color: var(--ex-ink); background: var(--ex-field-on); }
  .ex-f.is-on { color: var(--ex-ink); background: var(--ex-field-on); box-shadow: inset 3px 0 0 var(--ex-accent); }
  .ex-f span { color: var(--ex-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
  .ex-main .ex-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.8rem 1.2rem; }

  /* ---- Góc của tôi: profile + card (sticky) | tier + badges ---- */
  .mh-wrap { max-width: 1240px; }
  .mh-me { grid-template-columns: 400px minmax(0, 1fr); column-gap: 44px; align-items: start; padding: 2rem 2rem 1.8rem; overflow: clip; }
  .mh-me-side { display: grid; gap: 1.1rem; min-width: 0; position: sticky; top: 80px; align-self: start; }
  .mh-me-main { display: grid; gap: 1.1rem; min-width: 0; align-content: start; }
  .mh-me-main > .mh-me-h:first-of-type { margin-top: .4rem; }
  .mh-me .mh-badges { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  /* ---- Nhật ký bình luận: filters (sticky) | feed | this week (sticky) ---- */
  #clScope .cl-head, #clScope #tin-hieu.sig-wrap { max-width: 1240px; }
  #clScope #tin-hieu .sig-board { grid-template-columns: 250px minmax(0, 1fr) 280px; column-gap: 36px; align-items: start; }
  #clScope #tin-hieu .cl-left { display: grid; gap: 1.1rem; position: sticky; top: 80px; min-width: 0; }
  #clScope #tin-hieu .cl-left .cl-pulse { margin: 0; }
  #clScope #tin-hieu .cl-center { display: grid; gap: 1.2rem; min-width: 0; }
  #clScope #tin-hieu .cl-sort { flex-direction: column; gap: .15rem; border-bottom: 0; overflow: visible; }
  #clScope #tin-hieu .cl-sort .sig-tab { padding: .5rem .7rem; border-radius: 10px; text-align: left; }
  #clScope #tin-hieu .cl-sort .sig-tab:hover { background: var(--cl-card); }
  #clScope #tin-hieu .cl-sort .sig-tab.on { background: var(--cl-card); box-shadow: inset 3px 0 0 var(--cl-accent); }
  #clScope #tin-hieu .cl-sort .sig-tab.on::after { display: none; }
  #clScope #tin-hieu .cl-tools { gap: 1.2rem; }
  #clScope #tin-hieu .cl-stories::before { content: "Lọc theo truyện"; margin: 0 0 .35rem; color: var(--cl-accent); font: 700 .64rem/1 "JetBrains Mono", monospace; letter-spacing: .18em; text-transform: uppercase; }
  #clScope #tin-hieu .cl-sort::before { content: "Sắp xếp"; margin: 0 0 .35rem; color: var(--cl-accent); font: 700 .64rem/1 "JetBrains Mono", monospace; letter-spacing: .18em; text-transform: uppercase; }
  #clScope #tin-hieu .cl-stories { flex-direction: column; gap: .15rem; overflow: visible; }
  #clScope #tin-hieu .cl-story { justify-content: space-between; border: 0; border-radius: 10px; padding: .5rem .7rem; background: none; text-align: left; }
  #clScope #tin-hieu .cl-story:hover { background: var(--cl-card); }
  #clScope #tin-hieu .cl-story.on { background: var(--cl-card); color: var(--cl-ink); box-shadow: inset 3px 0 0 var(--cl-accent); }
  #clScope #tin-hieu .cl-story.on em { color: var(--cl-faint); opacity: 1; }
  #clScope #tin-hieu .cl-right { display: grid; gap: 1.6rem; position: sticky; top: 80px; min-width: 0; }
  #clScope #tin-hieu .cl-side h3 { margin: 0 0 .7rem; color: var(--cl-accent); font: 700 .64rem/1 "JetBrains Mono", monospace; letter-spacing: .18em; text-transform: uppercase; }
  #clScope #tin-hieu .cl-side ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; counter-reset: clside; }
  #clScope #tin-hieu .cl-side li { display: flex; align-items: center; gap: .65rem; min-width: 0; }
  #clScope #tin-hieu .cl-side li > a { display: flex; align-items: center; gap: .65rem; min-width: 0; color: inherit; text-decoration: none; }
  #clScope #tin-hieu .cl-side img { width: 38px; height: 56px; flex: 0 0 auto; object-fit: cover; border-radius: 6px; }
  #clScope #tin-hieu .cl-side span { display: grid; gap: .15rem; min-width: 0; }
  #clScope #tin-hieu .cl-side b { color: var(--cl-ink); font: 700 .84rem/1.3 "Plus Jakarta Sans", system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #clScope #tin-hieu .cl-side small { color: var(--cl-muted); font-size: .74rem; }
  #clScope #tin-hieu .cl-side li > a:hover b { color: var(--cl-accent); }
}
/* ---- the library palette on every page and every screen (phones and
   tablets too): header, footer, Khám phá, Nhật ký bình luận, Góc của
   tôi, story and reading pages. Only tokens and accent colours change
   here, never the layout. ---- */
@media all {
  :root {
    --bg: #120e0b; --bg-2: #1b1410; --ink: #efe6cc; --muted: #a8997f; --line: rgba(216, 178, 90, .14);
    --cyan: #d8b25a; --cyan-2: #c39a45; --violet: #c8574b; --accent: #c8574b;
    --accent-fill: rgba(200, 87, 75, .32); --accent-fill-2: rgba(200, 87, 75, .22); --accent-line: rgba(216, 178, 90, .6); --accent-glow: 0 0 16px rgba(216, 178, 90, .18);
    --sh-ink: #f3ead8; --sh-muted: rgba(239, 230, 204, .72); --sh-muted-dim: rgba(239, 230, 204, .48);
    --sh-accent: #d8b25a; --sh-accent-soft: #e7cf96; --sh-accent-ink: #1b1410; --sh-accent-line: rgba(216, 178, 90, .44);
    --sh-line: rgba(239, 230, 204, .14); --sh-line-soft: rgba(239, 230, 204, .08);
  }
  body { background: var(--lib-desk); color: var(--lib-cream); }
  /* header: dark wood, the open page underlined in seal red */
  .site-header { background: rgba(18, 14, 11, .9); border-bottom-color: rgba(216, 178, 90, .16); }
  body:has(#signalHero) .site-header { background: rgba(18, 14, 11, .55); }
  .dk-nav a { color: rgba(239, 230, 204, .7); border-radius: 0; padding-left: .2rem; padding-right: .2rem; margin: 0 .55rem; position: relative; }
  .dk-nav a:hover { color: var(--lib-cream); background: none; }
  .dk-nav a.on { color: var(--lib-cream); background: none; }
  .dk-nav a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px; background: var(--lib-seal-light); }
  .dk-search { background: rgba(239, 230, 204, .05); border-color: rgba(216, 178, 90, .2); }
  .dk-search:focus-within { border-color: rgba(216, 178, 90, .6); background: rgba(239, 230, 204, .08); }
  .dk-search svg { stroke: rgba(239, 230, 204, .6); }
  .dk-search input { color: var(--lib-cream); }
  .dk-search input::placeholder { color: rgba(239, 230, 204, .45); }
  .dk-login { background: var(--lib-paper); color: var(--lib-ink); border-radius: 4px; letter-spacing: .02em; }
  .dk-login:hover { background: #fff8e8; }
  .dk-acct { border-color: rgba(216, 178, 90, .6); }
  .dk-acct:hover, .dk-acct[aria-expanded="true"] { border-color: var(--lib-gold); }
  #app[data-theme="light"] .site-header { background: rgba(251, 250, 247, .94); border-bottom-color: rgba(43, 34, 25, .12); }
  #app[data-theme="light"] .dk-nav a.on { color: var(--lib-ink); background: none; }
  #app[data-theme="light"] .dk-nav a.on::after { background: var(--lib-seal); }
  #app[data-theme="light"] .dk-login { background: var(--lib-ink); color: var(--lib-paper); }
  #app[data-theme="light"] .dk-acct { border-color: rgba(155, 44, 37, .5); }
  /* footer: gilt rule and kraft headings */
  .foot2-body::before { background: radial-gradient(closest-side, rgba(216, 178, 90, .22), transparent 72%); }
  .foot2-body::after { background: radial-gradient(closest-side, rgba(200, 87, 75, .16), transparent 72%); }
  .foot2-rule-top { background: linear-gradient(90deg, transparent, rgba(216, 178, 90, .55) 20%, rgba(216, 178, 90, .8) 50%, rgba(216, 178, 90, .55) 80%, transparent); }
  .foot2-kicker { color: var(--lib-seal-light); }
  .foot2-section h4 { color: var(--lib-gold); }
  .foot2-section a::before { color: var(--lib-seal-light); }
  .foot2-desc.foot2-quote { max-width: none; font: italic 500 1.08rem/1.6 "Cormorant Garamond", Georgia, serif; letter-spacing: .005em; text-wrap: pretty; }
  /* Khám phá */
  .ex-scope {
    --ex-ink: #efe6cc; --ex-muted: #a8997f; --ex-accent: #d8b25a;
    --ex-field: rgba(239, 230, 204, .05); --ex-field-line: rgba(216, 178, 90, .2);
    --ex-field-on: rgba(216, 178, 90, .12); --ex-field-on-line: rgba(216, 178, 90, .55);
    --ex-go-bg: #d8b25a; --ex-go-ink: #1b1410;
    --ex-cover-shadow-hover: 0 4px 10px rgba(0, 0, 0, .5), 0 22px 40px -14px rgba(0, 0, 0, .9), 0 0 0 1px rgba(216, 178, 90, .45);
    --ex-st-ongoing-bg: #9b2c25; --ex-st-ongoing-ink: #f3ead8;
    --ex-st-completed-bg: #1b1410; --ex-st-completed-ink: #efe6cc;
    --ex-st-upcoming-bg: #d8b25a; --ex-st-upcoming-ink: #1b1410;
  }
  .ex-scope[data-theme="light"] {
    --ex-bg: var(--lib-day); --ex-ink: #2b2219; --ex-muted: #6d5f4d; --ex-accent: #9b2c25;
    --ex-field: #f3efe6; --ex-field-line: rgba(43, 34, 25, .16);
    --ex-field-on: rgba(155, 44, 37, .08); --ex-field-on-line: rgba(155, 44, 37, .55);
    --ex-go-bg: #2b2219; --ex-go-ink: #f3ead8;
    --ex-cover-shadow-hover: 0 4px 10px rgba(43, 34, 25, .25), 0 22px 40px -14px rgba(43, 34, 25, .5), 0 0 0 1px rgba(155, 44, 37, .4);
  }
  /* Nhật ký bình luận */
  #clScope { --cl-ink: #efe6cc; --cl-muted: #a8997f; --cl-faint: #75685a; --cl-accent: #d8b25a; --cl-hot: #e0a050; --cl-heart: #e2766b; --cl-line: rgba(216, 178, 90, .12); --cl-card: rgba(239, 230, 204, .04); --cl-bg: #120e0b; }
  #clScope[data-theme="light"] { --cl-ink: #2b2219; --cl-muted: #6d5f4d; --cl-faint: #9a8b74; --cl-accent: #9b2c25; --cl-hot: #a8681a; --cl-heart: #b8443a; --cl-line: rgba(43, 34, 25, .12); --cl-card: #fbf8f1; --cl-bg: var(--lib-day); }
  /* Góc của tôi / tủ truyện */
  .mh-scope { --mh-page: #120e0b; --mh-card: linear-gradient(160deg, rgba(239, 230, 204, .06), rgba(239, 230, 204, .025)); --mh-card-line: rgba(216, 178, 90, .14); }
  .mh-scope[data-theme="light"] { --mh-page: var(--lib-day); --mh-card: linear-gradient(160deg, #fdfbf6, #f7f2e7); --mh-card-line: rgba(43, 34, 25, .13); --mh-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 14px 30px -20px rgba(60, 45, 30, .45); }
  /* story page and the reading dock */
  .story-page, .story-dock {
    --story-accent: #d8b25a; --story-accent-soft: #e7cf96; --story-accent-ink: #1b1410;
    --story-accent-line: rgba(216, 178, 90, .44); --story-accent-fill: rgba(216, 178, 90, .14); --story-accent-glow: 0 0 16px rgba(216, 178, 90, .2);
    --story-accent-onlight: #9b2c25;
  }
  #app:not([data-theme="light"]) .story-landscape-meta h2,
  #app:not([data-theme="light"]) .story-side-section h2 { color: var(--lib-gold); }
  #app:not([data-theme="light"]) .story-landscape-meta .landscape-info-body p { color: #e4d9bf; }
  #app:not([data-theme="light"]) .story-landscape-meta .landscape-info-body strong,
  #app:not([data-theme="light"]) .story-side-copy small { color: #9a8b74; }
  #app:not([data-theme="light"]) .story-side-copy b { color: var(--lib-cream); }
  #app:not([data-theme="light"]) .story-side-copy em { color: #b3a487; border-color: rgba(216, 178, 90, .22); }
  #app:not([data-theme="light"]) .story-side-section + .story-side-section { border-top-color: rgba(216, 178, 90, .14); }
  #app:not([data-theme="light"]) .story-dock { background: rgba(18, 14, 11, .92); border-top-color: rgba(216, 178, 90, .18); }
  #app:not([data-theme="light"]) .foot2-copy { color: #8a7c66; }
}

/* ---- light version ("reading room by day"), every screen: the same
   library on warm stone grey, each block a sheet of paper. Switched by
   the header button (.dk-theme, bindPcTheme() in app.js), which also
   keeps each page's own switch in step. ---- */
@media all {
  .dk-theme {
    display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
    color: var(--lib-cream); background: none; border: 1px solid rgba(216, 178, 90, .32); transition: border-color .15s, color .15s;
  }
  .dk-theme:hover { border-color: var(--lib-gold); color: var(--lib-gold); }
  .dk-theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .dk-theme-moon { display: none; }
  #app[data-theme="light"] .dk-theme-sun { display: none; }
  #app[data-theme="light"] .dk-theme-moon { display: block; }
  #app[data-theme="light"] .dk-theme { color: var(--lib-ink); border-color: rgba(43, 34, 25, .25); }
  #app[data-theme="light"] .dk-theme:hover { color: var(--lib-seal); border-color: var(--lib-seal); }

  #app[data-theme="light"] { --bg: var(--lib-day); --bg-2: #f3f1ec; --ink: #2b2219; --muted: #6d5f4d; --line: rgba(43, 34, 25, .12); color: var(--lib-ink); }
  body:has(#app[data-theme="light"]) { background: var(--lib-day); color: var(--lib-ink); }
  .story-page[data-theme="light"] { --story-light-bg: var(--lib-day); }
  #clScope[data-theme="light"] { background: var(--lib-day); }
  #app[data-theme="light"] .story-dock { background: rgba(251, 248, 241, .96); }
  .story-page[data-theme="light"] { --story-light-panel: var(--lib-sheet); }

  /* light: the blocks of each page sit on the stone as sheets of paper */
  #exScope[data-theme="light"] .ex-side, #exScope[data-theme="light"] .ex-main {
    padding: 22px 22px 26px; border-radius: 10px; background: var(--lib-sheet); box-shadow: var(--lib-sheet-shadow);
  }
  #exScope[data-theme="light"] .ex-main { padding: 22px 26px 30px; }
  #clScope[data-theme="light"] #tin-hieu .cl-left,
  #clScope[data-theme="light"] #tin-hieu .cl-right { padding: 18px 16px 20px; border-radius: 10px; background: var(--lib-sheet); box-shadow: var(--lib-sheet-shadow); }
  #clScope[data-theme="light"] #tin-hieu .cl-card, #clScope[data-theme="light"] #tin-hieu .sig-card { box-shadow: var(--lib-sheet-shadow); border-color: transparent; }
  .story-page[data-theme="light"] .intro-card, .story-page[data-theme="light"] .info-card { background: var(--lib-sheet); }
  #app[data-theme="light"] .vc-notif-hero { background: var(--lib-sheet); box-shadow: var(--lib-sheet-shadow); border-color: transparent; }
  #app[data-theme="light"] .vc-notif-card { background: var(--lib-sheet); box-shadow: var(--lib-sheet-shadow); border-color: transparent; }
  #app[data-theme="light"] .site-header { background: rgba(251, 248, 241, .96); border-bottom-color: rgba(43, 34, 25, .14); box-shadow: 0 6px 18px -14px rgba(60, 45, 30, .4); }
  #app[data-theme="light"] .site-header .brand, #app[data-theme="light"] .site-header .logo { color: var(--lib-ink); }
  #app[data-theme="light"] .vc-notification-bell { color: var(--lib-seal); }
  #app[data-theme="light"] .dk-acct { border-color: rgba(155, 44, 37, .45); }

  /* home: the banner on a light desk */
  /* one flat ivory-white from header to footer: no gradient, no vignette */
  #app[data-theme="light"] .signal-hero { background: var(--lib-day); }
  #app[data-theme="light"] .sh-bg { background: var(--lib-day); }
  #app[data-theme="light"] .sh-scrim::after { background: none; }
  #app[data-theme="light"] .sh-book::before { background: radial-gradient(closest-side, rgba(70, 45, 20, .32), rgba(70, 45, 20, 0)); }
  #app[data-theme="light"] .sh-book::after { box-shadow: 0 2px 0 rgba(255, 255, 255, .12) inset, 0 -3px 0 rgba(0, 0, 0, .3) inset, 0 34px 60px -30px rgba(70, 45, 20, .7), 0 12px 20px -10px rgba(70, 45, 20, .45); }
  #app[data-theme="light"] .home-side .reshome-card,
  #app[data-theme="light"] .home-side .cm-card { box-shadow: 0 0 0 1px rgba(43, 34, 25, .1), 0 12px 22px -14px rgba(70, 45, 20, .45); }
  #app[data-theme="light"] .home-side .cm-kicker { color: var(--lib-seal); }
  #app[data-theme="light"] .home-side .cm-kicker i { background: var(--lib-seal); }
  #app[data-theme="light"] .home-side .cm-marquee { scrollbar-color: rgba(43, 34, 25, .35) transparent; }
  #app[data-theme="light"] .home-side .cm-marquee::-webkit-scrollbar-thumb { background: rgba(43, 34, 25, .35); }

  /* Trạm Preview on paper */
  #app[data-theme="light"] .home-main .shelf-hero { filter: drop-shadow(0 14px 16px rgba(60, 45, 30, .3)) drop-shadow(0 1px 2px rgba(60, 45, 30, .25)); }
  #app[data-theme="light"] .home-main .shelf-card-face { box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(120, 90, 50, .22), 0 16px 24px -14px rgba(60, 45, 30, .5); }

  /* footer */
  #app[data-theme="light"] .foot2-section h4 { color: var(--lib-seal); }
  #app[data-theme="light"] .foot2-kicker { color: var(--lib-seal); }
  #app[data-theme="light"] .foot2-section a::before { color: var(--lib-seal); }
  #app[data-theme="light"] .foot2-rule-top { background: linear-gradient(90deg, transparent, rgba(155, 44, 37, .4) 20%, rgba(155, 44, 37, .6) 50%, rgba(155, 44, 37, .4) 80%, transparent); }

  /* story page (light): the info column and "Đề xuất khác" were pale on
     paper — give them ink */
  #app[data-theme="light"] .story-landscape-meta h2,
  #app[data-theme="light"] .story-side-section h2 { color: var(--lib-seal); }
  #app[data-theme="light"] .story-landscape-meta .landscape-info-body p { color: var(--lib-ink); }
  #app[data-theme="light"] .story-landscape-meta .landscape-info-body strong,
  #app[data-theme="light"] .story-side-copy small { color: var(--lib-ink-2); }
  #app[data-theme="light"] .story-side-copy b { color: var(--lib-ink); }
  #app[data-theme="light"] .story-side-copy em { color: var(--lib-ink-2); border-color: rgba(43, 34, 25, .2); }
  #app[data-theme="light"] .story-landscape-sidebar { background: none; border-left-color: rgba(43, 34, 25, .12); }
  #app[data-theme="light"] .story-side-section + .story-side-section { border-top-color: rgba(43, 34, 25, .1); }

  /* account menu and search suggestions on paper */
  #app[data-theme="light"] #mobileMenu.mobile-menu {
    background: #fbf6e8; color: var(--lib-ink); border: 1px solid rgba(43, 34, 25, .14);
    box-shadow: 0 26px 44px -22px rgba(70, 45, 20, .55); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  #app[data-theme="light"] #mobileMenu .mm-profile { border-bottom-color: rgba(43, 34, 25, .1); }
  #app[data-theme="light"] #mobileMenu .mm-group { border-top-color: rgba(43, 34, 25, .1); }
  #app[data-theme="light"] #mobileMenu .member-identity strong, #app[data-theme="light"] #mobileMenu .mm-item span { color: var(--lib-ink); }
  #app[data-theme="light"] #mobileMenu .member-identity span { color: var(--lib-ink-3); }
  #app[data-theme="light"] #mobileMenu .mm-item svg, #app[data-theme="light"] #mobileMenu .mm-item svg * { stroke: var(--lib-ink-2); }
  #app[data-theme="light"] #mobileMenu .mm-item:hover { background: rgba(43, 34, 25, .05); }
  #app[data-theme="light"] #mobileMenu .mm-item--danger span { color: var(--lib-seal); }
  #app[data-theme="light"] #mobileMenu .mm-item--danger svg, #app[data-theme="light"] #mobileMenu .mm-item--danger svg * { stroke: var(--lib-seal); }
  #app[data-theme="light"] .search-panel { background: #fbf6e8; border-color: rgba(43, 34, 25, .14); box-shadow: 0 22px 40px -22px rgba(70, 45, 20, .5); }
  #app[data-theme="light"] .search-hit { color: var(--lib-ink); }
  #app[data-theme="light"] .search-hit b { color: var(--lib-ink); }
  #app[data-theme="light"] .search-hit .sub { color: var(--lib-ink-2); }
  #app[data-theme="light"] .search-hit:hover { background: rgba(43, 34, 25, .05); }

  /* Thông báo (page and the bell's popover) */
  #app[data-theme="light"] .vc-notif-hero { border-color: rgba(43, 34, 25, .12); background: linear-gradient(130deg, #fbf6e8, #f1e7d2); box-shadow: 0 18px 34px -24px rgba(70, 45, 20, .5); }
  #app[data-theme="light"] .vc-notif-hero::after { background: radial-gradient(circle, rgba(155, 44, 37, .1), transparent 70%); }
  #app[data-theme="light"] .vc-notif-hero h1 { color: var(--lib-ink); }
  #app[data-theme="light"] .vc-notif-hero small { color: var(--lib-seal); }
  #app[data-theme="light"] .vc-notif-hero p { color: var(--lib-ink-2); }
  #app[data-theme="light"] .vc-notif-hero-icon { border-color: rgba(155, 44, 37, .3); background: rgba(155, 44, 37, .07); color: var(--lib-seal); }
  #app[data-theme="light"] .vc-notif-filters button { color: var(--lib-ink-2); }
  #app[data-theme="light"] .vc-notif-filters button.on { border-color: rgba(155, 44, 37, .4); background: rgba(155, 44, 37, .07); color: var(--lib-seal); }
  #app[data-theme="light"] .vc-notif-card, body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-card { border-color: rgba(43, 34, 25, .12); background: #fbf6e8; }
  #app[data-theme="light"] .vc-notif-card:hover, body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-card:hover { border-color: rgba(43, 34, 25, .24); background: #fffaf0; }
  #app[data-theme="light"] .vc-notif-card.is-unread, body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-card.is-unread { border-color: rgba(155, 44, 37, .35); background: linear-gradient(105deg, rgba(155, 44, 37, .08), #fbf6e8 48%); }
  #app[data-theme="light"] .vc-notif-icon, body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-icon { border-color: rgba(43, 34, 25, .16); background: rgba(43, 34, 25, .04); color: var(--lib-seal); }
  #app[data-theme="light"] .vc-notif-line b, body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-line b { color: var(--lib-ink); }
  #app[data-theme="light"] .vc-notif-copy p, body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-copy p { color: var(--lib-ink-2); }
  #app[data-theme="light"] .vc-notif-copy time, body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-copy time { color: var(--lib-ink-3); }
  #app[data-theme="light"] .vc-notif-empty b, body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-empty b { color: var(--lib-ink); }
  #app[data-theme="light"] .vc-notif-empty p, body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-empty p { color: var(--lib-ink-2); }
  #app[data-theme="light"] .vc-notif-empty span { color: var(--lib-seal); border-color: rgba(155, 44, 37, .3); background: rgba(155, 44, 37, .05); }
  body:has(#app[data-theme="light"]) .vc-notif-popover { background: #fbf6e8; border-color: rgba(43, 34, 25, .14); color: var(--lib-ink); box-shadow: 0 26px 44px -22px rgba(70, 45, 20, .55); }
  body:has(#app[data-theme="light"]) .vc-notif-popover > header { border-bottom-color: rgba(43, 34, 25, .1); }
  body:has(#app[data-theme="light"]) .vc-notif-popover h3 { color: var(--lib-ink); }
}
@media (min-width: 1100px), (min-width: 1024px) and (orientation: landscape) {
  .story-page[data-theme="light"] .story-detail-layout { padding: 22px; border-radius: 12px; background: var(--lib-sheet); box-shadow: var(--lib-sheet-shadow); }
}
/* ---- phones and tablets (anything that is not the PC / laptop layout):
   the same open book on top, then Trạm Preview, Live Resonance and the
   taped notes one after another. Tablets show both pages of the book;
   phones show the right page only, with the bookmark sticking up out of
   the book above it. ---- */
@media (max-width: 1099.98px) and (orientation: portrait), (max-width: 1023.98px) {
  .signal-hero { display: block; min-height: 0; padding: 96px 24px 40px; box-sizing: border-box; }
  .signal-hero .sh-book { max-width: 760px; height: clamp(430px, 64vw, 560px); margin: 0 auto; }
  .signal-hero .sh-content { padding: 24px 24px 20px 30px; }
  .signal-hero .sh-content .sh-desc { max-height: calc(1.5em * 5 + 12px); }

  /* Trạm Preview: the carousel, the ticket under it */
  .home-main .shelf { margin-top: 18px; overflow-x: clip; }
  .home-main .shelf-head { justify-content: center; margin: 0 0 4px; }
  .home-main .shelf-hero { max-width: 460px; margin: 14px auto 0; padding: 0 16px; box-sizing: border-box; }

  /* Live Resonance and the notes */
  .home-side .reshome { max-width: 720px; margin: 34px auto 0; padding: 0 18px; box-sizing: border-box; }
  .home-side .reshome-card { width: auto; box-sizing: border-box; }
  /* the numbers slide in from the side when they come into view: keep
     that slide inside the page */
  .home-side .reshome { overflow-x: clip; }
  .home-side .cm-wrap { max-width: 760px; margin: 30px auto 0; padding: 0; }
  .home-side .cm-head { padding: 0 20px; margin-bottom: 0; }
  .home-side .cm-marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .home-side .cm-track { display: block; width: auto; animation: none; transform: none; }
  .home-side .cm-card { width: auto; min-width: 0; box-sizing: border-box; }
}
/* phones and tablets held upright: one page of the book, the bookmark
   sticking up above it; the notes in a row you swipe sideways */
@media (max-width: 1099.98px) and (orientation: portrait), (max-width: 1023.98px) {
  /* the banner fills the first screen: the page takes all the height
     left under the bookmark */
  .signal-hero { height: 100vh; height: 100svh; min-height: 640px; padding: 254px 16px 28px; display: flex; flex-direction: column; }
  .signal-hero .sh-book { flex: 1 1 auto; min-height: 0; grid-template-columns: 1fr; height: auto; max-width: 560px; width: 100%; margin: 0 auto; transform: perspective(1600px) rotateX(5deg); }
  .signal-hero .sh-content { grid-column: 1; position: relative; z-index: 1; height: 100%; min-height: 0; padding: 24px 20px 20px 26px; }
  .signal-hero .sh-content .sh-ctas { flex-wrap: wrap; }
  /* the left page is only there for its bookmark (and the copy held while
     a page turns), placed above the top edge of the page */
  .signal-hero .sh-book > .sh-lpage {
    position: absolute; z-index: 0; grid-column: auto; grid-row: auto; top: -204px; right: 22px; bottom: auto; left: auto;
    width: 122px; height: 360px; overflow: visible; border-radius: 0; background: none; box-shadow: none;
  }
  .signal-hero .sh-book > .sh-lpage .sh-pocket { inset: 0; left: 0; right: 0; bottom: 0; height: auto; background: none; box-shadow: none; }
  .signal-hero .sh-book > .sh-lpage .sh-pocket::before, .signal-hero .sh-book > .sh-lpage .sh-pocket-label { display: none; }
  .signal-hero .sh-book > .sh-lpage .sh-card { left: 0; right: auto; top: 0; bottom: auto; width: 100%; height: 100%; margin: 0; transform: rotate(4deg); }
  .sh-leaf { left: 0; width: 100%; }

  .home-side .cm-marquee {
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding: 16px 18px 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .home-side .cm-marquee::-webkit-scrollbar { display: none; }
  .home-side .cm-group { display: flex; gap: 16px; width: max-content; padding: 0; }
  .home-side .cm-card { flex: 0 0 min(76vw, 300px); scroll-snap-align: center; }
}
/* tablets held upright (and other screens 700px and wider that are not
   the PC layout): the phone layout made for the bigger screen.
   - The book is the phone's single page with the bookmark sticking up,
     zoomed up so that the page fills the first screen; the rest is below
     and reached by scrolling.
   - Trạm Preview, then its ticket, in one 600px column.
   - Live Resonance (left, a register with one line per number) and the
     comments this week (right, taped notes in a column that scrolls,
     each with its quoted line, a heart and a reply) side by side. */
@media (min-width: 700px) and (max-width: 1099.98px) and (orientation: portrait), (min-width: 700px) and (max-width: 1023.98px) {
  :root { --tab-w: min(calc(100vw - 48px), 920px); }
  .signal-hero { height: 100vh; height: 100svh; min-height: 760px; padding: 372px 24px 40px; display: flex; flex-direction: column; }
  .signal-hero .sh-book > .sh-lpage { top: -216px; right: 26px; width: 132px; height: 400px; }
  .signal-hero .sh-book { flex: 1 1 auto; min-height: 0; max-width: none; width: 100%; zoom: 1.4; }
  .signal-hero .sh-content { min-height: 0; height: 100%; }
  .signal-hero .sh-content .sh-desc { max-height: calc(1.5em * 8 + 12px); }

  /* the blocks below use most of the width, with an even margin */
  .home-main .shelf { max-width: var(--tab-w); margin-left: auto; margin-right: auto; }
  .home-main .shelf-carousel { height: 500px; min-height: 0; }
  .home-main .shelf-hero { max-width: var(--tab-w); padding: 0; }
  .home-main .shelf-hero { --stub: 104px; }
  .home-main .shelf-ticket { padding: 24px 0 22px 30px; }
  .home-main .shelf-ticket h3 { font-size: 2.1rem; }
  .home-main .shelf-ticket .shelf-hero-quote p { font-size: 1.35rem; -webkit-line-clamp: 4; }

  .home-side {
    display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 24px; align-items: stretch;
    max-width: var(--tab-w); margin: 48px auto 0; padding: 0; box-sizing: border-box;
  }
  .home-side .reshome { max-width: none; margin: 0; padding: 0; overflow: visible; }
  .home-side .reshome-card { height: 100%; display: flex; flex-direction: column; padding: 18px 18px 16px; }
  .home-side .reshome-stats { flex-direction: column; justify-content: flex-start; gap: 0; margin-top: 18px; }
  .home-side .reshome-stat { display: flex; flex-direction: row-reverse; align-items: baseline; justify-content: space-between; padding: 12px 0 10px; border-bottom: 1px dashed rgba(43, 34, 25, .25); }
  .home-side .reshome-stat span { margin: 0; font-size: .6rem; }
  .home-side .reshome-stat b, .home-side .reshome-card.is-counting .reshome-stat b { font-size: 2rem; }
  .home-side .reshome-social-row { margin-top: auto; padding-top: 16px; }

  .home-side .cm-wrap { display: flex; flex-direction: column; min-width: 0; max-width: none; margin: 0; }
  .home-side .cm-head { padding: 0; margin: 0 0 2px; }
  .home-side .cm-marquee {
    height: 560px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity;
    padding: 14px 8px 20px 4px; margin: 0 -8px 0 -4px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
  }
  .home-side .cm-marquee::-webkit-scrollbar { display: none; }
  .home-side .cm-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; width: auto; padding: 0; }
  .home-side .cm-card { flex: none; scroll-snap-align: start; scroll-margin-top: 12px; }
  .home-side .cm-body { -webkit-line-clamp: 3; }
  /* the footer quote runs across the whole width */
  .foot2-desc.foot2-quote { max-width: none; font-size: 1.2rem; }
}
/* phones and upright tablets (one page of the book): the reads, chapters
   and hearts go on the page itself (the bookmark only shows its cover),
   and the latest chapter is set off in seal red, above the buttons */
@media (max-width: 699.98px), (min-width: 700px) and (max-width: 1099.98px) and (orientation: portrait), (min-width: 700px) and (max-width: 1023.98px) {
  .signal-hero .sh-content .sh-stats { display: flex; gap: 30px; margin: 0 0 14px; padding: 0; border: 0; }
  .signal-hero .sh-content .sh-stats > div { min-width: 0; }
  .signal-hero .sh-content .sh-stat-num { font-size: 1.45rem; }
  .signal-hero .sh-content .sh-stat-label { margin-top: 4px; font-size: .56rem; }
  /* the latest chapter in seal red, its name marked as with a highlighter */
  .signal-hero .sh-content .sh-trust {
    order: 1; align-self: stretch; height: auto; margin: 0 0 16px; padding: 0; border: 0; background: none;
    color: var(--seal); font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  }
  .signal-hero .sh-content .sh-trust svg { color: var(--seal); width: 15px; height: 15px; }
  .signal-hero .sh-content .sh-trust b {
    color: var(--seal); font-weight: 700; font-size: .82rem; padding: 0 3px;
    background: linear-gradient(180deg, transparent 58%, rgba(155, 44, 37, .16) 58%);
  }
  .signal-hero .sh-content .sh-ctas { order: 2; margin-bottom: 0; }
  .signal-hero .sh-content h1.sh-title { height: auto; min-height: 0; margin-bottom: 8px; }
  /* one page showing: the right-hand page of an open book. The cover
     board shows as an even, thin edge all round (no rolled spine); on
     the left the paper bends down into the binding, so it darkens softly
     towards the gutter and its top and bottom corners dip a little */
  .signal-hero .sh-book::after {
    inset: -5px -9px -11px -7px; border-radius: 3px 5px 6px 3px;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, .38) 0, rgba(0, 0, 0, 0) 7px, rgba(0, 0, 0, 0) calc(100% - 4px), rgba(0, 0, 0, .28) 100%),
      linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .22)),
      var(--cloth, #5a3a2a);
  }
  .signal-hero .sh-content { padding-left: 30px; border-radius: 10px 6px 6px 10px / 5px 6px 6px 5px; }
  .signal-hero .sh-content::before {
    content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 26%; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(45, 28, 12, .42) 0, rgba(45, 28, 12, .2) 3%, rgba(45, 28, 12, .08) 9%, rgba(255, 250, 236, .22) 20%, rgba(255, 250, 236, 0) 46%, rgba(60, 40, 20, 0) 100%);
  }
  /* while the page turns, the bookmark changes to the next story's just
     as the turning page uncovers it (turnTo() in app.js); the turning
     page carries no copy of it */
  .signal-hero .sh-leaf .sh-pocket, .signal-hero .sh-book > .sh-hold { display: none; }
}
/* ---- reading page: the comment drawer takes the reader's own ink
   (it read an unset --rtext, so dark brown on the dark page) and the
   library accents, on every reading background ---- */
.reader-page { --rtext: var(--rink); --raccent: #b0473c; }
.reader-page[data-theme="light"], .reader-page[data-theme="sepia"] { --raccent: #9b2c25; }
.reader-page:not([data-theme="light"]):not([data-theme="sepia"]) { --raccent: #d8b25a; }
.reader-page .chapter-youtube-audio { --yt-accent: var(--raccent); }
/* the comment button beside a paragraph: seal red on paper, gilt at night */
.reader-page[data-theme="light"] .r-p .p-bubble, .reader-page[data-theme="sepia"] .r-p .p-bubble {
  background: #9b2c25 !important; color: #fbf6e8 !important; border-color: transparent !important;
  box-shadow: 0 5px 16px rgba(80, 30, 20, .25), 0 0 0 3px rgba(155, 44, 37, .1) !important;
}
.reader-page:not([data-theme="light"]):not([data-theme="sepia"]) .r-p .p-bubble {
  background: #d8b25a !important; color: #1b1410 !important; border-color: transparent !important;
}
.reader-page .r-p .p-bubble::after, .reader-page .r-p .p-bubble.has::after { background: #9b2c25; }

/* ---- sign-in page, every screen: the card is a library card — ivory
   paper, brown-black ink, a seal-red rule — on the dark desk or on the
   stone-grey of the light version (it was a see-through glass card,
   washed out on the light background) ---- */
.auth-google-only .auth-bg-glow, .auth-google-only .auth-bg-grain { display: none; }
.auth-google-only .auth-card {
  border: 0; border-radius: 6px; color: var(--lib-ink);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(180deg, #fbf6e8, #efe4cb);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(120, 90, 50, .16), 0 30px 60px -28px rgba(0, 0, 0, .75), 0 10px 22px -12px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.auth-google-only .auth-card::before {
  content: "Thẻ thư viện"; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  color: var(--lib-seal); font: 700 .58rem/1.6 "JetBrains Mono", monospace; letter-spacing: .26em; text-transform: uppercase; white-space: nowrap;
}
.auth-google-only .auth-card-brand { margin-top: .6rem; }
.auth-google-only .auth-card-mark { filter: brightness(0); opacity: .88; }
.auth-google-only .auth-card-intro { color: var(--lib-ink-2); font: italic 500 1.12rem/1.5 "Cormorant Garamond", Georgia, serif; }
.auth-google-only .auth-card-divider { max-width: 10rem; height: 2px; background: var(--lib-seal); opacity: .75; }
.auth-google-only .auth-card-google-fallback {
  border: 0; border-radius: 4px; background: var(--lib-ink); color: var(--lib-paper); box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .7);
}
.auth-google-only .auth-card-google-fallback:hover { border: 0; background: #3a2c20; box-shadow: 0 0 0 2px rgba(155, 44, 37, .4), 0 12px 22px -12px rgba(0, 0, 0, .7); }
.auth-google-only .auth-card-note { color: var(--lib-ink-3); }
.auth-google-only .auth-back { color: var(--lib-cream); }
#app[data-theme="light"] .auth-google-only .auth-back { color: var(--lib-ink); }
#app[data-theme="light"] .auth-google-only .auth-card { box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(120, 90, 50, .16), 0 24px 44px -26px rgba(60, 45, 30, .55), 0 8px 16px -10px rgba(60, 45, 30, .3); }

/* ---- member box opened by the QR (#/tv/<no>), every screen: the pass
   becomes a library borrower's card — ivory paper, brown-black ink,
   seal-red labels, perforated kraft stubs — same in both themes; the
   member card skin and the badge keep their own colours ---- */
.mp-scope .mp-pass {
  color: var(--lib-ink); border-radius: 8px;
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(155, 44, 37, .07) 27px 28px),
    radial-gradient(120% 80% at 15% 0%, rgba(255, 255, 255, .6), transparent 60%),
    linear-gradient(180deg, #fbf6e8, #efe3c8);
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, .2), inset 0 1px 0 rgba(255, 255, 255, .7), 0 26px 50px -26px rgba(0, 0, 0, .7), 0 8px 18px -10px rgba(0, 0, 0, .4);
}
.mh-scope[data-theme="light"].mp-scope .mp-pass, .mp-scope[data-theme="light"] .mp-pass {
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, .2), inset 0 1px 0 rgba(255, 255, 255, .7), 0 24px 44px -26px rgba(60, 45, 30, .55), 0 8px 16px -10px rgba(60, 45, 30, .3);
}
.mp-scope .mp-pass::before { display: none; }
.mp-scope .mp-pass-top { padding: 1.1rem 1.2rem 0; border-bottom: 0; }
.mp-scope .mp-pass-logo { filter: brightness(0); opacity: .85; }
.mp-scope .mp-pass-brand { color: var(--lib-seal); }
.mp-scope .mp-pass-brand small { color: var(--lib-ink-3); font-family: "JetBrains Mono", monospace; letter-spacing: .08em; }
.mp-scope .mp-pass-ava { border-radius: 10px; padding: 3px; background: linear-gradient(140deg, #e8cf8e, #c39a45 50%, #8a6a2c); box-shadow: 0 10px 20px -12px rgba(60, 40, 15, .7); }
.mp-scope .mp-ava.member-avatar { border-radius: 8px; background: #2b2219; color: var(--lib-gold); }
.mp-scope .mp-ava.member-avatar img { border-radius: 8px; }
.mp-scope .mp-pass-id h1 { color: var(--lib-ink); font: 600 clamp(1.6rem, 7vw, 2.1rem)/1.05 "Cormorant Garamond", Georgia, serif; letter-spacing: 0; }
.mp-scope .mp-pass-id p { color: var(--lib-ink-2); }
.mp-scope .mp-pass-no { background: none; padding: 3px 7px; border: 1.5px solid rgba(155, 44, 37, .6); border-radius: 3px; color: var(--lib-seal); transform: rotate(-2deg); }
.mp-scope .mp-pass-bio { border-left-color: var(--lib-seal); color: #3d3226; }
.mp-scope .mp-pass-stub, .mp-scope .mp-pass-show { border-top: 2px dashed rgba(120, 90, 50, .35); background: rgba(195, 163, 114, .14); }
.mp-scope .mp-pass-show { background: rgba(195, 163, 114, .22); }
.mp-scope .mp-pass-stub li + li { border-left-color: rgba(120, 90, 50, .22); }
.mp-scope .mp-pass-stub b { color: var(--lib-ink); font: 600 1.6rem/1 "Cormorant Garamond", Georgia, serif; }
.mp-scope .mp-pass-stub small { color: var(--lib-ink-3); }
.mp-scope .mp-pass-stub span { color: var(--lib-ink-2); font-family: "JetBrains Mono", monospace; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.mp-scope .mp-pass-label { color: var(--lib-seal); }
.mp-scope .mp-none { color: var(--lib-ink-2); }
.mp-scope .mp-cta { border-radius: 4px; background: var(--lib-ink); color: var(--lib-paper); border: 0; box-shadow: none; font-family: "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .03em; }
.mp-scope .mp-cta:hover { background: #3a2c20; }
.mp-scope[data-theme="dark"] .mp-cta, .mp-scope:not([data-theme="light"]) .mp-cta { background: var(--lib-paper); color: var(--lib-ink); }

/* ---- footer, every screen: the librarian's desk. A wooden counter
   (dark wood; light oak in the light version) with three things on it:
   a catalogue card (brand + quote), a request slip on kraft paper
   (message / report) and brass shelf signs (the links); the library's
   round seal and the small print along its base ---- */
.site-footer.desk-foot {
  --wood: #2c1f15; --wood-2: #1d140d; --wood-edge: #4a3424; --wood-ink: #e9dcc0; --wood-ink-2: rgba(233, 220, 192, .6); --wood-seal: #d0705f;
  position: relative; margin-top: 40px; padding: 0 16px 28px; border: 0; text-align: left; color: var(--wood-ink); font-size: 1rem;
  box-shadow: none;
}
/* (home-desktop-layout.css clears every #app > .site-footer background
   with !important, so the wood has to win the same way) */
#app > .site-footer.desk-foot {
  background:
    repeating-linear-gradient(91deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(89deg, rgba(255, 220, 170, .04) 0 1px, transparent 1px 23px),
    linear-gradient(180deg, var(--wood), var(--wood-2)) !important;
}
#app[data-theme="light"] .site-footer.desk-foot {
  --wood: #b8966b; --wood-2: #9d7b52; --wood-edge: #d2b58c; --wood-ink: #2b2219; --wood-ink-2: rgba(43, 34, 25, .8); --wood-seal: #8f2a22;
}
.site-footer.desk-foot::after { display: none; }
/* the counter's front edge */
.df-top { position: absolute; left: 0; right: 0; top: -14px; height: 14px; background: linear-gradient(180deg, var(--wood-edge), var(--wood)); box-shadow: 0 -10px 24px -14px rgba(0, 0, 0, .6); }
.df-inner {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .9fr); gap: clamp(22px, 3.4vw, 46px); align-items: start;
  max-width: 1140px; margin: 0 auto; padding: 46px 0 30px;
}
.df-inner h4 { margin: 0 0 12px; font: 700 .6rem/1.6 "JetBrains Mono", monospace; letter-spacing: .22em; text-transform: uppercase; }
/* catalogue card */
.df-card {
  position: relative; padding: 18px 22px 34px 34px; color: var(--lib-ink); transform: rotate(-1.2deg);
  background:
    linear-gradient(90deg, transparent 22px, rgba(155, 44, 37, .45) 22px 23px, transparent 23px),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(60, 90, 140, .13) 25px 26px),
    linear-gradient(180deg, #fbf6e8, #f0e5cd);
  border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 28px -16px rgba(0, 0, 0, .75), 0 4px 8px -4px rgba(0, 0, 0, .4);
}
.df-card-no { display: block; margin: 0 0 10px; color: var(--lib-ink-3); font: 600 .56rem/1.6 "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }
.df-card .brand { margin: 0; justify-content: flex-start; }
.df-card .brand-mark-img { filter: brightness(0); }
.df-card .brand-word-img { display: none; }
.df-card .brand-word-img-light { display: block; }
.df-kicker { margin: 8px 0 6px; color: var(--lib-seal); font: 700 .62rem/1.6 "JetBrains Mono", monospace; letter-spacing: .24em; text-transform: uppercase; }
.df-quote { margin: 0; color: #3d3226; font: italic 500 1.05rem/1.6 "Cormorant Garamond", Georgia, serif; text-wrap: pretty; }
.df-card-hole { position: absolute; left: 50%; bottom: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--wood-2); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6), 0 0 0 1px rgba(120, 90, 50, .25); }
/* request slip */
.df-slip {
  position: relative; padding: 26px 20px 22px; color: var(--lib-ink); transform: rotate(1.4deg);
  background: radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .25), transparent 60%), linear-gradient(180deg, #d9c095, #c6a676);
  border-radius: 2px; box-shadow: 0 16px 26px -16px rgba(0, 0, 0, .75), 0 3px 6px -3px rgba(0, 0, 0, .35);
}
.df-slip h4 { color: rgba(60, 35, 15, .8); }
.df-clip { position: absolute; top: -12px; left: 26px; width: 16px; height: 40px; border: 2.5px solid #8d8d8d; border-radius: 9px; box-shadow: 1px 1px 0 rgba(0, 0, 0, .25); }
.df-clip::after { content: ""; position: absolute; left: 3px; top: 6px; width: 6px; height: 24px; border: 2px solid #a5a5a5; border-radius: 5px; }
.df-req { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px dashed rgba(60, 35, 15, .35); background: none; cursor: pointer; text-align: left; color: inherit; }
.df-req i { flex: none; width: 16px; height: 16px; border: 1.5px solid rgba(43, 34, 25, .7); border-radius: 2px; position: relative; }
.df-req:hover i::after { content: "✓"; position: absolute; left: 1px; top: -6px; color: var(--lib-seal); font: 700 1.1rem/1 Georgia, serif; }
.df-req span { display: grid; gap: 2px; }
.df-req small { color: rgba(60, 35, 15, .65); font: 600 .56rem/1.4 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.df-req b { color: var(--lib-ink); font: 600 1.12rem/1.2 "Cormorant Garamond", Georgia, serif; }
.df-req:hover b { color: var(--lib-seal); }
.df-stamp {
  position: absolute; right: 14px; bottom: 12px; padding: 4px 8px; border: 2px solid rgba(155, 44, 37, .7); border-radius: 4px; transform: rotate(-8deg);
  color: rgba(155, 44, 37, .8); font: 700 .58rem/1 "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; mix-blend-mode: multiply;
}
/* brass shelf signs */
.df-signs { display: grid; gap: 10px; justify-items: start; }
.df-signs h4 { color: var(--wood-ink-2); }
.df-signs a {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 2px; text-decoration: none;
  color: var(--lib-ink); background: linear-gradient(180deg, #fbf6e8, #ece0c6); font: 600 1.02rem/1 "Cormorant Garamond", Georgia, serif; letter-spacing: .03em;
  box-shadow: 0 0 0 2px #b8955a, 0 0 0 3px rgba(60, 40, 15, .55), 0 6px 10px -6px rgba(0, 0, 0, .7);
  transition: transform .15s;
}
.df-signs a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lib-seal); }
.df-signs a:hover { transform: translateX(3px); color: var(--lib-seal); }
/* the seal and the small print */
.df-base { display: flex; align-items: center; justify-content: center; gap: 16px; max-width: 1140px; margin: 0 auto; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
#app[data-theme="light"] .df-base { border-top-color: rgba(43, 34, 25, .18); }
.df-seal { flex: none; width: 64px; height: 64px; color: var(--wood-seal); opacity: .85; transform: rotate(-12deg); font-family: "JetBrains Mono", monospace; }
.df-copy { margin: 0; color: var(--wood-ink-2); font: 500 .68rem/1.6 "JetBrains Mono", monospace; letter-spacing: .06em; }
@media (max-width: 899.98px) {
  .df-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 40px; }
  .df-card { grid-column: 1 / -1; }
}
@media (max-width: 599.98px) {
  .df-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .df-base { flex-direction: column; text-align: center; }
}

/* the taped comment notes, every screen: the quoted line, a heart and a
   reply on each note */
@media all {
  .home-side .cm-quote {
    display: block; margin: 2px 0 0; padding: 2px 0 2px 10px; border-left: 2px solid var(--lib-seal);
    color: #5a4a3a; font: italic 500 .95rem/1.4 "Cormorant Garamond", Georgia, serif;
  }
  .home-side .cm-actions { display: flex; align-items: center; gap: 14px; margin-top: 2px; padding-top: 8px; border-top: 1px dashed rgba(43, 34, 25, .2); }
  .home-side .cm-act {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px; border: 0; background: none; cursor: pointer; text-decoration: none;
    color: var(--lib-ink-2); font: 600 .62rem/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase;
  }
  .home-side .cm-act i { font-style: normal; font-size: .95rem; line-height: 1; color: var(--lib-seal); }
  .home-side .cm-like.is-on { color: var(--lib-seal); }
  .home-side .cm-act:hover { color: var(--lib-seal); }
}
/* phones held sideways (short landscape screens below the PC layout):
   the upright-tablet layout, but the book cannot fill a screen this
   short, so it keeps its own height (taller than the screen): half of it
   shows, the rest is reached by scrolling */
@media (max-width: 1023.98px) and (max-height: 600px) and (orientation: landscape) {
  .signal-hero { display: block; height: auto; min-height: 0; padding: 300px 32px 44px; }
  .signal-hero .sh-book { zoom: 1; flex: none; width: 100%; max-width: 640px; height: 600px; margin: 0 auto; }
  .signal-hero .sh-content { height: 100%; min-height: 0; padding: 30px 30px 26px 36px; }
  .signal-hero .sh-book > .sh-lpage { top: -238px; right: 30px; width: 142px; height: 420px; }
}
/* the ☰ menu on wider phones / tablets (and phones held sideways): a
   compact panel under the button instead of a sheet across the screen */
@media (min-width: 600px) and (max-width: 1099.98px) and (orientation: portrait), (min-width: 600px) and (max-width: 1023.98px) {
  #mobileMenu.mobile-menu {
    left: auto; right: 14px; width: 340px; max-width: calc(100vw - 28px);
    max-height: calc(100vh - 84px); max-height: calc(100svh - 84px); overflow-y: auto; overscroll-behavior: contain;
    border-radius: 18px;
  }
}
/* narrower laptops (1100–1299px): tighten the header so the search and
   the account button always fit */
@media (min-width: 1100px) and (max-width: 1299px), (min-width: 1024px) and (max-width: 1299px) and (orientation: landscape) {
  .header-inner { gap: .8rem; padding: .45rem 18px; }
  .dk-nav { margin-left: .4rem; }
  .dk-nav a { padding: .5rem .15rem; margin: 0 .42rem; font-size: .84rem; }
  .dk-search { width: min(200px, 17vw); }
  .dk-theme { width: 34px; height: 34px; }
  .nav-actions { gap: 10px; }
  .home-main .shelf-ticket-kicker { letter-spacing: .14em; }
}
/* tablets held sideways that are a little narrower (1024–1099px): the
   header tightened once more */
@media (min-width: 1024px) and (max-width: 1099.98px) and (orientation: landscape) {
  .header-inner { gap: .55rem; padding: .45rem 14px; }
  .dk-nav { margin-left: .2rem; }
  .dk-nav a { margin: 0 .3rem; font-size: .8rem; }
  .dk-search { width: 168px; }
}

/* ---- Nhật ký bình luận as a guest book ("sổ lưu bút"), every screen.
   The comments are written one after another on one ruled page with a
   red margin: the avatar and the time sit out in the margin, the words on
   the lines, a fleuron between two entries, each day headed like a diary
   page. The book stays paper on the dark desk and in the light version;
   the sort tabs and the story labels (kraft) sit above it.
   Markup: homeLower() / pageCommentLog() in app.js. ---- */
@media all {
  #clScope {
    --nb-paper: #f7efdc; --nb-paper-2: #f3e9d2; --nb-ink: #2b2219; --nb-ink-2: #6d5f4d; --nb-ink-3: #9a8b74;
    --nb-seal: #9b2c25; --nb-rule: rgba(70, 95, 140, .13); --nb-margin: rgba(178, 56, 46, .42);
    --nb-line: 28px; --nb-mx: 60px;
    --nb-margin-bg: linear-gradient(90deg, transparent calc(var(--nb-mx) - 1px), var(--nb-margin) calc(var(--nb-mx) - 1px) var(--nb-mx), transparent var(--nb-mx) calc(var(--nb-mx) + 3px), rgba(178, 56, 46, .22) calc(var(--nb-mx) + 3px) calc(var(--nb-mx) + 4px), transparent calc(var(--nb-mx) + 4px));
  }
  /* title: a serif title with a small typewriter line above it */
  #app #clScope .cl-kicker {
    display: grid; gap: .35rem; margin: 0; color: var(--cl-ink); text-shadow: none;
    font: 600 clamp(2rem, 7.4vw, 2.7rem)/1.12 "Cormorant Garamond", Georgia, serif; letter-spacing: 0; text-transform: none;
  }
  #app #clScope .cl-kicker small { color: var(--cl-accent); font: 700 .62rem/1.4 "JetBrains Mono", monospace; letter-spacing: .2em; text-transform: uppercase; }
  #app #clScope .cl-theme-toggle { border-color: var(--cl-line); color: var(--cl-muted); background: none; }
  #clScope #tin-hieu .cl-pulse { margin: -.4rem 0 0; font: 600 .66rem/1.6 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
  #clScope #tin-hieu .cl-pulse i { background: var(--cl-accent); }
  #clScope #tin-hieu .cl-pulse b { font: 700 .8rem/1 "JetBrains Mono", monospace; }

  /* sort: typewriter words, the chosen one underlined in red */
  #clScope #tin-hieu .cl-sort .sig-tab { font: 700 .68rem/1.3 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
  #clScope #tin-hieu .cl-sort .sig-tab.on { color: var(--cl-accent); }
  #clScope #tin-hieu .cl-sort .sig-tab.on::after { background: var(--cl-accent); }
  /* stories: kraft shelf labels */
  #clScope #tin-hieu .cl-story {
    padding: .42rem .7rem; border: 1px solid rgba(110, 75, 35, .3); border-radius: 2px; color: #4a3520;
    background: linear-gradient(180deg, #dcc59a, #cfb383); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 3px 8px -5px rgba(0, 0, 0, .5);
    font: 700 .64rem/1.2 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase;
  }
  #clScope #tin-hieu .cl-story em { color: #7a5a35; font-weight: 600; }
  #clScope #tin-hieu .cl-story.on { border-color: var(--nb-seal); color: var(--nb-seal); background: linear-gradient(180deg, #f3e6c8, #e7d3a8); box-shadow: 0 0 0 1px var(--nb-seal) inset, 0 3px 8px -5px rgba(0, 0, 0, .5); }
  #clScope #tin-hieu .cl-story.on em { color: var(--nb-seal); opacity: .75; }

  /* the page */
  #clScope #tin-hieu .sig-board.signal-window-ready .sig-list, #clScope #tin-hieu .sig-list {
    position: relative; display: grid; gap: 0; padding: 18px 16px 8px 6px; color: var(--nb-ink);
    border-radius: 4px 4px 0 0; scrollbar-color: rgba(155, 44, 37, .35) transparent;
    background:
      linear-gradient(90deg, transparent calc(var(--nb-mx) - 1px), var(--nb-margin) calc(var(--nb-mx) - 1px) var(--nb-mx), transparent var(--nb-mx) calc(var(--nb-mx) + 3px), rgba(178, 56, 46, .22) calc(var(--nb-mx) + 3px) calc(var(--nb-mx) + 4px), transparent calc(var(--nb-mx) + 4px)),
      repeating-linear-gradient(180deg, transparent 0 calc(var(--nb-line) - 1px), var(--nb-rule) calc(var(--nb-line) - 1px) var(--nb-line)),
      var(--nb-paper-2);
    background-attachment: local;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -10px 30px -24px rgba(0, 0, 0, .6);
  }
  #clScope #tin-hieu .sig-list::-webkit-scrollbar-thumb { background: rgba(155, 44, 37, .35); }
  /* a day: headed like a diary page */
  #clScope #tin-hieu .cl-day {
    display: flex; align-items: baseline; gap: .7rem; margin: 6px 0 10px; padding-left: calc(var(--nb-mx) + 14px);
    color: var(--nb-seal); font: italic 600 1.3rem/var(--nb-line) "Cormorant Garamond", Georgia, serif; letter-spacing: 0; text-transform: none;
  }
  #clScope #tin-hieu .cl-day::after { content: ""; flex: 1; height: 1px; background: rgba(155, 44, 37, .35); }
  #clScope #tin-hieu .cl-day:first-child { margin-top: 0; }
  #clScope #tin-hieu .sig-list > .cl-day:not(:first-child) { margin-top: 26px; }
  /* an entry: avatar and time in the margin, the words on the lines */
  #clScope #tin-hieu .sig-card {
    position: relative; grid-template-columns: calc(var(--nb-mx) - 6px) minmax(0, 1fr); column-gap: 14px; padding: 4px 0 10px; border-radius: 0; background: none;
  }
  #clScope #tin-hieu .sig-card + .sig-card { margin-top: 30px; }
  #clScope #tin-hieu .sig-card + .sig-card::before {
    content: "❦"; position: absolute; top: -29px; left: var(--nb-mx); right: 0; text-align: center;
    color: rgba(155, 44, 37, .55); font: 400 1.05rem/1 "Cormorant Garamond", Georgia, serif;
  }
  #clScope #tin-hieu .sig-card > .sig-ava { justify-self: center; width: 2.3rem; height: 2.3rem; margin-top: 2px; }
  #clScope #tin-hieu .sig-main { position: static; display: grid; gap: 4px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  #clScope #tin-hieu .sig-meta { min-height: var(--nb-line); align-items: baseline; }
  #clScope #tin-hieu .sig-meta b { color: var(--nb-ink); font: 600 1.14rem/var(--nb-line) "Cormorant Garamond", Georgia, serif; }
  #clScope #tin-hieu .sig-card > .sig-main > .sig-meta time {
    position: absolute; left: 0; top: 50px; width: calc(var(--nb-mx) - 6px); text-align: center;
    color: var(--nb-ink-3); font: 600 .54rem/1.35 "JetBrains Mono", monospace; letter-spacing: .04em;
  }
  #clScope #tin-hieu .sig-meta time { color: var(--nb-ink-3); font: 600 .6rem/1.4 "JetBrains Mono", monospace; }
  #clScope #tin-hieu .cl-hot { color: var(--nb-seal); padding: 1px 6px; border: 1.5px solid rgba(155, 44, 37, .7); border-radius: 3px; transform: rotate(-3deg); font: 700 .54rem/1.3 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
  #clScope #tin-hieu .cl-hot::before { content: none; }
  #clScope #tin-hieu .cl-tag { color: var(--nb-seal); font: 700 .62rem/1.5 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
  #clScope #tin-hieu .cl-tag span { color: var(--nb-ink-3); }
  #clScope #tin-hieu .cl-quote { margin: 2px 0; padding: 0 0 0 .8rem; border-left: 2px solid rgba(155, 44, 37, .55); }
  #clScope #tin-hieu .cl-quote p { color: #5b4a38; font: italic 500 1.08rem/var(--nb-line) "Cormorant Garamond", Georgia, serif; }
  #clScope #tin-hieu .cl-quote-more { color: var(--nb-ink-2); }
  #clScope #tin-hieu .sig-main > .sig-text { color: var(--nb-ink); font: 500 1.16rem/var(--nb-line) "Cormorant Garamond", Georgia, serif; }
  #clScope #tin-hieu .sig-acts { margin-top: 2px; }
  #clScope #tin-hieu .sig-chip, #clScope #tin-hieu .sig-act { min-height: 1.8rem; color: var(--nb-ink-2); font: 700 .6rem/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
  #clScope #tin-hieu .sig-chip:hover, #clScope #tin-hieu .sig-act:hover { color: var(--nb-seal); }
  #clScope #tin-hieu .sig-chip::before, #clScope #tin-hieu .sig-act::before { color: inherit; }
  #clScope #tin-hieu .sig-chip.on, #clScope #tin-hieu .sig-chip.on::before { color: var(--nb-seal); }
  #clScope #tin-hieu .sig-act em { color: var(--nb-ink); }
  /* replies: written in under the entry, set in from a dotted line */
  #clScope #tin-hieu .sig-reply { padding: 4px 0 4px 12px; border-left: 1px dashed rgba(109, 95, 77, .45); }
  #clScope #tin-hieu .sig-reply .sig-meta b { font-size: 1.02rem; }
  #clScope #tin-hieu .sig-reply .sig-meta time { position: static; }
  #clScope #tin-hieu .sig-reply .sig-text { color: var(--nb-ink); font: 500 1.06rem/var(--nb-line) "Cormorant Garamond", Georgia, serif; }
  #clScope #tin-hieu .sig-to, #clScope #tin-hieu .sig-more-replies { color: var(--nb-ink-3); font: 600 .6rem/1.6 "JetBrains Mono", monospace; letter-spacing: .06em; }
  #clScope #tin-hieu .sig-card.is-highlight .sig-main, #clScope #tin-hieu .sig-card.is-highlight { background: rgba(216, 178, 90, .2); }
  #clScope #tin-hieu .sig-empty { margin-left: var(--nb-mx); border: 0; color: var(--nb-ink-2); font: italic 500 1.1rem/1.5 "Cormorant Garamond", Georgia, serif; }
  #clScope #tin-hieu .sig-empty b { color: var(--nb-ink); }

  /* the foot of the page, all one sheet with the lines above: the last
     entry in view fades into the paper, a short italic note tells what is
     left, then the line to write on and the red seal to send; under the
     page, the edges of the pages beneath */
  #clScope #tin-hieu .sig-board.signal-window-ready .sig-list, #clScope #tin-hieu .sig-list { border-radius: 4px 4px 0 0; }
  #clScope #tin-hieu .sig-scroll-status {
    position: relative; min-height: 0; margin-top: -1.2rem; padding: 6px 16px 2px calc(var(--nb-mx) + 14px); justify-content: center; gap: .6rem;
    color: var(--nb-ink-3); border: 0; font: italic 500 1rem/1.4 "Cormorant Garamond", Georgia, serif; letter-spacing: 0; text-transform: none;
    background: var(--nb-margin-bg), var(--nb-paper-2);
  }
  #clScope #tin-hieu .sig-scroll-status::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 72px; pointer-events: none;
    background: var(--nb-margin-bg), linear-gradient(180deg, rgba(243, 233, 210, 0), rgba(243, 233, 210, .85) 45%, var(--nb-paper-2) 70%);
  }
  #clScope #tin-hieu .sig-scroll-status::before { width: 18px; height: 1px; border-radius: 0; background: rgba(155, 44, 37, .45); box-shadow: none; opacity: 1; transform: none; }
  #clScope #tin-hieu .sig-scroll-status::after { transform: none; }
  #clScope #tin-hieu .sig-scroll-status.is-done::before { opacity: 1; }
  #clScope #tin-hieu .sig-compose {
    position: relative; margin-top: -1.2rem; padding: 10px 16px 22px 6px; border: 0; border-radius: 0 0 4px 4px;
    display: grid; grid-template-columns: calc(var(--nb-mx) - 6px) minmax(0, 1fr) auto; column-gap: 14px; align-items: end;
    background: var(--nb-margin-bg), var(--nb-paper-2);
    box-shadow: 0 1px 0 rgba(109, 95, 77, .18), 0 3px 0 -1px #e9dcbf, 0 4px 0 -1px rgba(120, 95, 60, .35), 0 6px 0 -2px #e3d3b2, 0 7px 0 -2px rgba(120, 95, 60, .35), 0 24px 34px -22px rgba(0, 0, 0, .7);
  }
  #clScope #tin-hieu .sig-compose > .sig-ava { justify-self: center; align-self: center; width: 2.3rem; height: 2.3rem; }
  #clScope #tin-hieu .sig-fake {
    min-height: 2.4rem; padding: 0 2px 2px; border: 0; border-bottom: 1px solid rgba(70, 95, 140, .4); border-radius: 0; background: none; text-align: left;
    color: var(--nb-ink-3); font: italic 500 1.16rem/1.2 "Cormorant Garamond", Georgia, serif;
  }
  #clScope #tin-hieu .sig-fake:hover { color: var(--nb-ink-2); border-bottom-color: var(--nb-seal); }
  #clScope #tin-hieu .sig-send {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; color: #f7efdc;
    background: radial-gradient(circle at 35% 30%, #b0433a, #8a241e 72%); box-shadow: 0 0 0 1.5px rgba(247, 239, 220, .9) inset, 0 0 0 2.5px rgba(138, 36, 30, .8) inset, 0 4px 8px -4px rgba(80, 20, 15, .7);
    transform: rotate(-8deg);
  }
  #clScope #tin-hieu .sig-send svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  #clScope #tin-hieu .sig-login { color: var(--cl-muted); }
  #clScope #tin-hieu .sig-login a { color: var(--cl-accent); }
  /* light version: the tools and side notes sit on the stone as sheets;
     the book is the same paper */
  #clScope[data-theme="light"] #tin-hieu .cl-card, #clScope[data-theme="light"] #tin-hieu .sig-card { box-shadow: none; }
  #clScope[data-theme="light"] #tin-hieu .sig-list { box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -10px 30px -24px rgba(60, 45, 30, .45); }
  #clScope[data-theme="light"] #tin-hieu .sig-compose { box-shadow: 0 1px 0 rgba(109, 95, 77, .18), 0 3px 0 -1px #e9dcbf, 0 4px 0 -1px rgba(120, 95, 60, .3), 0 6px 0 -2px #e3d3b2, 0 7px 0 -2px rgba(120, 95, 60, .3), 0 22px 30px -22px rgba(60, 45, 30, .55); }
}
@media (max-width: 699.98px) {
  #clScope { --nb-mx: 54px; }
  #clScope #tin-hieu .sig-list { padding-right: 12px; }
}

/* ---- Nhật ký bình luận: the same blocks on every screen.
   - "Kệ đang bàn": "Tất cả" and the five stories talked about most this
     week, each a small paper slip with its cover; "Mục lục" opens an index
     card listing every story with comments, by first letter, searchable.
   - "Bảng vàng tuần này": the members who wrote most this week.
   PC / iPad landscape: the shelf as a list in the left column, the honour
   roll in the right one. Phones / iPad portrait: the shelf as a row you
   swipe, the honour roll under the book with the members in a row. ---- */
@media all {
  #clScope #tin-hieu .cl-tools { min-width: 0; }
  #clScope #tin-hieu .cl-label, #clScope #tin-hieu .cl-side h3 {
    margin: 0 0 .55rem; color: var(--cl-accent); font: 700 .62rem/1.4 "JetBrains Mono", monospace; letter-spacing: .18em; text-transform: uppercase;
  }
  #clScope #tin-hieu .cl-shelf { min-width: 0; }
  #clScope #tin-hieu .cl-stories { display: flex; gap: .55rem; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
  #clScope #tin-hieu .cl-stories::before { content: none; }
  /* a story on the shelf: paper slip, cover, title, count */
  #clScope #tin-hieu .cl-book {
    flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; width: 168px; min-width: 0; padding: 6px 10px 6px 6px; box-sizing: border-box;
    border: 0; border-radius: 3px; text-align: left; color: var(--nb-ink); text-transform: none; letter-spacing: 0;
    background: linear-gradient(180deg, #fbf6e8, #f1e6cc); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(120, 90, 50, .18), 0 6px 12px -8px rgba(0, 0, 0, .55);
  }
  #clScope #tin-hieu .cl-book > img { flex: none; width: 32px; height: 46px; object-fit: cover; border-radius: 1px; box-shadow: 0 2px 5px -2px rgba(40, 25, 10, .6); }
  #clScope #tin-hieu .cl-book > span { display: grid; gap: 2px; min-width: 0; }
  #clScope #tin-hieu .cl-book b { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; color: var(--nb-ink); font: 600 .98rem/1.12 "Cormorant Garamond", Georgia, serif; }
  #clScope #tin-hieu .cl-book small { color: var(--nb-ink-3); font: 600 .56rem/1.3 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
  #clScope #tin-hieu .cl-book:hover { background: linear-gradient(180deg, #fbf6e8, #f1e6cc); }
  #clScope #tin-hieu .cl-book:hover b { color: var(--nb-seal); }
  #clScope #tin-hieu .cl-book.on { background: linear-gradient(180deg, #fff9ec, #f5e9cd); box-shadow: 0 0 0 1.5px var(--nb-seal), 0 6px 14px -8px rgba(80, 20, 15, .6); }
  #clScope #tin-hieu .cl-book.on b { color: var(--nb-seal); }
  /* "Tất cả": three covers fanned out */
  #clScope #tin-hieu .cl-book--all { width: 136px; }
  #clScope #tin-hieu .cl-book-stack { position: relative; flex: none; width: 40px; height: 46px; }
  #clScope #tin-hieu .cl-book-stack img { position: absolute; top: 0; width: 28px; height: 42px; object-fit: cover; border-radius: 1px; box-shadow: 0 2px 5px -2px rgba(40, 25, 10, .7); }
  #clScope #tin-hieu .cl-book-stack img:nth-child(1) { left: 0; transform: rotate(-8deg); }
  #clScope #tin-hieu .cl-book-stack img:nth-child(2) { left: 6px; transform: rotate(-1deg); }
  #clScope #tin-hieu .cl-book-stack img:nth-child(3) { left: 12px; transform: rotate(7deg); }
  /* "Mục lục": a kraft card at the end of the shelf */
  #clScope #tin-hieu .cl-index-btn {
    flex: 0 0 auto; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: .5rem; align-content: center; align-items: center;
    padding: 6px 12px; min-height: 58px; box-sizing: border-box; border: 1px solid rgba(110, 75, 35, .3); border-radius: 3px; cursor: pointer; text-align: left;
    color: #4a3520; background: linear-gradient(180deg, #dcc59a, #cfb383); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 6px 12px -8px rgba(0, 0, 0, .55);
  }
  #clScope #tin-hieu .cl-index-btn b { font: 700 .66rem/1.3 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
  #clScope #tin-hieu .cl-index-btn small { grid-row: 2; color: #7a5a35; font: 600 .56rem/1.3 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
  #clScope #tin-hieu .cl-index-btn svg { grid-row: 1 / 3; grid-column: 2; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
  #clScope #tin-hieu .cl-index-btn.on { border-color: var(--nb-seal); color: var(--nb-seal); }
  #clScope #tin-hieu .cl-index-btn.on svg { transform: rotate(180deg); }
  /* the index card */
  #clScope #tin-hieu .cl-index {
    margin-top: .5rem; padding: 12px 14px 10px; border-radius: 3px; color: var(--nb-ink);
    background:
      linear-gradient(180deg, transparent 46px, rgba(155, 44, 37, .45) 46px 47px, transparent 47px),
      repeating-linear-gradient(180deg, transparent 0 25px, rgba(70, 95, 140, .1) 25px 26px),
      linear-gradient(180deg, #fbf6e8, #f1e6cc);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(120, 90, 50, .18), 0 14px 26px -16px rgba(0, 0, 0, .65);
  }
  #clScope #tin-hieu .cl-index-q { display: flex; align-items: center; gap: .5rem; height: 30px; margin-bottom: 12px; border-bottom: 1px solid rgba(70, 95, 140, .4); }
  #clScope #tin-hieu .cl-index-q svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--nb-ink-3); stroke-width: 2; stroke-linecap: round; }
  #clScope #tin-hieu .cl-index-q input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--nb-ink); font: italic 500 1.06rem/1 "Cormorant Garamond", Georgia, serif; -webkit-appearance: none; appearance: none; }
  #clScope #tin-hieu .cl-index-q input::placeholder { color: var(--nb-ink-3); }
  #clScope #tin-hieu .cl-index-list { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(155, 44, 37, .35) transparent; }
  #clScope #tin-hieu .cl-index-group { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: start; }
  #clScope #tin-hieu .cl-index-group h4 { grid-row: span 99; margin: 0; color: var(--nb-seal); font: italic 600 1.2rem/26px "Cormorant Garamond", Georgia, serif; }
  #clScope #tin-hieu .cl-index-item {
    grid-column: 2; display: flex; align-items: baseline; gap: .5rem; width: 100%; height: 26px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer;
    color: var(--nb-ink); text-align: left; text-transform: none; letter-spacing: 0; font: 500 1.02rem/26px "Cormorant Garamond", Georgia, serif;
  }
  #clScope #tin-hieu .cl-index-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #clScope #tin-hieu .cl-index-item::after { content: ""; flex: 1; order: 1; min-width: 12px; border-bottom: 1px dotted rgba(109, 95, 77, .5); transform: translateY(-4px); }
  #clScope #tin-hieu .cl-index-item em { order: 2; color: var(--nb-ink-3); font: 600 .62rem/1 "JetBrains Mono", monospace; font-style: normal; }
  #clScope #tin-hieu .cl-index-item:hover, #clScope #tin-hieu .cl-index-item.on { background: none; box-shadow: none; border: 0; }
  #clScope #tin-hieu .cl-index-item:hover span, #clScope #tin-hieu .cl-index-item.on span { color: var(--nb-seal); }
  #clScope #tin-hieu .cl-index-item.on span { font-weight: 700; }
  #clScope #tin-hieu .cl-index-item[hidden], #clScope #tin-hieu .cl-index-group[hidden], #clScope #tin-hieu .cl-index[hidden], #clScope #tin-hieu .cl-index-none[hidden] { display: none !important; }
  #clScope #tin-hieu .cl-index-none { margin: 4px 0; color: var(--nb-ink-3); font: italic 500 1rem/1.4 "Cormorant Garamond", Georgia, serif; }

  /* "Bảng vàng tuần này": a paper card */
  #clScope #tin-hieu .cl-honor {
    position: relative; padding: 16px 16px 14px; border-radius: 3px; color: var(--nb-ink);
    background: linear-gradient(180deg, #fbf6e8, #f1e6cc); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(120, 90, 50, .18), 0 14px 26px -16px rgba(0, 0, 0, .65);
  }
  #clScope #tin-hieu .cl-honor h3 { color: var(--nb-seal); padding-bottom: .55rem; margin-bottom: .7rem; border-bottom: 1px solid rgba(155, 44, 37, .4); }
  #clScope #tin-hieu .cl-honor ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
  #clScope #tin-hieu .cl-honor li { position: relative; display: flex; align-items: center; gap: .65rem; min-width: 0; }
  #clScope #tin-hieu .cl-honor .sig-ava { flex: none; width: 2.4rem; height: 2.4rem; border: 0; box-shadow: 0 0 0 2px #fbf6e8, 0 0 0 3px rgba(120, 90, 50, .3); }
  #clScope #tin-hieu .cl-honor li > span { display: grid; gap: 1px; min-width: 0; }
  #clScope #tin-hieu .cl-honor b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nb-ink); font: 600 1.08rem/1.15 "Cormorant Garamond", Georgia, serif; }
  #clScope #tin-hieu .cl-honor small { color: var(--nb-ink-3); font: 600 .56rem/1.3 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
  #clScope #tin-hieu .cl-honor-seal {
    margin-left: auto; flex: none; padding: 2px 6px; border: 1.5px solid rgba(155, 44, 37, .75); border-radius: 3px; transform: rotate(-6deg);
    color: var(--nb-seal); font: 700 .5rem/1.3 "JetBrains Mono", monospace; font-style: normal; letter-spacing: .12em; text-transform: uppercase; mix-blend-mode: multiply;
  }
  /* the honour roll is its own paper card: no sheet around it */
  #clScope[data-theme="light"] #tin-hieu .cl-right { padding: 0; background: none; box-shadow: none; border-radius: 0; }
  /* the numbers line */
  #clScope #tin-hieu .cl-pulse .cl-pulse-it { color: var(--cl-muted); }
  #clScope #tin-hieu .cl-pulse .cl-pulse-sep { color: var(--cl-faint); }
}
/* PC / iPad landscape */
@media (min-width: 1100px), (min-width: 1024px) and (orientation: landscape) {
  /* the numbers as a small register: big figure, label under it */
  #clScope #tin-hieu .cl-left .cl-pulse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: 0; }
  #clScope #tin-hieu .cl-pulse > i, #clScope #tin-hieu .cl-pulse .cl-pulse-sep { display: none; }
  #clScope #tin-hieu .cl-pulse .cl-pulse-it { display: grid; gap: 3px; font-size: .52rem; line-height: 1.3; }
  #clScope #tin-hieu .cl-pulse .cl-pulse-it b { color: var(--cl-ink); font: 600 1.7rem/1 "Cormorant Garamond", Georgia, serif; }
  /* sort: a list of words, the chosen one in red with a short rule */
  #clScope #tin-hieu .cl-sort .sig-tab, #clScope #tin-hieu .cl-sort .sig-tab:hover, #clScope #tin-hieu .cl-sort .sig-tab.on { background: none; box-shadow: none; border-radius: 0; padding: .45rem 0; }
  #clScope #tin-hieu .cl-sort .sig-tab.on { color: var(--cl-accent); }
  #clScope #tin-hieu .cl-sort .sig-tab.on::before { content: ""; display: inline-block; width: 14px; height: 1.5px; margin-right: .5rem; vertical-align: middle; background: currentColor; }
  #clScope #tin-hieu .cl-sort .sig-tab:hover { color: var(--cl-ink); }
  /* the shelf as a list down the column */
  #clScope #tin-hieu .cl-stories { flex-direction: column; overflow: visible; padding: 0; gap: .45rem; }
  #clScope #tin-hieu .cl-book, #clScope #tin-hieu .cl-book--all, #clScope #tin-hieu .cl-index-btn { width: 100%; justify-content: flex-start; }
  #clScope #tin-hieu .cl-index-btn { grid-template-columns: minmax(0, 1fr) auto; min-height: 44px; }
  #clScope #tin-hieu .cl-index-list { max-height: 260px; }
  #clScope #tin-hieu .cl-right { gap: 0; }
}
/* phones / iPad portrait: the honour roll under the book, members in a row */
@media (max-width: 1099.98px) and (orientation: portrait), (max-width: 1023.98px) {
  #clScope #tin-hieu .cl-right { display: block; min-width: 0; }
  #clScope #tin-hieu .cl-honor { margin-top: 1rem; }
  #clScope #tin-hieu .cl-honor ol { display: flex; gap: 1rem; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 2px; }
  #clScope #tin-hieu .cl-honor ol::-webkit-scrollbar { display: none; }
  #clScope #tin-hieu .cl-honor li { flex: 0 0 auto; flex-direction: column; gap: .35rem; width: 84px; text-align: center; }
  #clScope #tin-hieu .cl-honor li > span { justify-items: center; width: 100%; }
  #clScope #tin-hieu .cl-honor b { max-width: 100%; font-size: 1rem; }
  #clScope #tin-hieu .cl-honor .sig-ava { width: 3rem; height: 3rem; }
  #clScope #tin-hieu .cl-honor-seal { position: absolute; top: -8px; right: -14px; margin: 0; padding: 1px 4px; font-size: .46rem; background: rgba(251, 246, 232, .85); }
  #clScope #tin-hieu .cl-honor ol { padding-top: 8px; }
  #clScope #tin-hieu .cl-stories::-webkit-scrollbar { display: none; }
}
/* the shelf, the book and the honour roll each scroll on their own:
   reaching the end of one never carries the scroll on to another or to
   the page */
@media all {
  #clScope #tin-hieu .cl-stories, #clScope #tin-hieu .cl-honor ol, #clScope #tin-hieu .sig-list, #clScope #tin-hieu .cl-index-list { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  #clScope #tin-hieu .cl-honor ol { scrollbar-width: thin; scrollbar-color: rgba(155, 44, 37, .35) transparent; }
}
@media (min-width: 1100px), (min-width: 1024px) and (orientation: landscape) {
  /* the shelf: about six slips in view, "Mục lục" stays at its foot */
  #clScope #tin-hieu .cl-stories {
    max-height: min(372px, calc(100vh - 420px)); min-height: 200px; overflow-x: hidden; overflow-y: auto; padding: 2px 6px 0 2px; margin: 0 -6px 0 -2px;
    scrollbar-width: thin; scrollbar-color: rgba(155, 44, 37, .35) transparent;
  }
  #clScope #tin-hieu .cl-book { flex: none; }
  #clScope #tin-hieu .cl-index-btn { position: sticky; bottom: 0; z-index: 2; flex: none; margin-top: .1rem; box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 -10px 14px -6px var(--cl-fade, rgba(0, 0, 0, .35)); }
  #clScope[data-theme="light"] #tin-hieu .cl-index-btn { --cl-fade: rgba(251, 248, 241, .95); }
  /* the honour roll: about seven names in view */
  #clScope #tin-hieu .cl-honor ol { max-height: 21rem; overflow-y: auto; padding-right: 4px; }
}
@media (max-width: 1099.98px) and (orientation: portrait), (max-width: 1023.98px) {
  #clScope #tin-hieu .cl-stories, #clScope #tin-hieu .cl-honor ol { overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
  #clScope #tin-hieu .cl-stories > *, #clScope #tin-hieu .cl-honor li { scroll-snap-align: start; }
}

/* ---- Góc của tôi as a reader's file ("hồ sơ độc giả"), every screen.
   Each part is its own piece of library stationery on the desk:
   - the reader's slip: photo taped on, name in the book serif, the tier
     as a red rubber stamp, the number like a call number, the bio on
     ruled lines, the numbers as a small register;
   - the member card in a kraft sleeve, "Xưởng Thẻ" as a tag;
   - the tier on a ruled card: a ruler for the progress, the tiers as
     stamp boxes;
   - the badges in a paper-lined case;
   - 14 days of reading as book spines on a wooden shelf, the streak as
     a round stamp;
   - "Đọc tiếp" covers with a red bookmark ribbon;
   - the shelves behind index tabs, the covers standing on a plank.
   The paper is the same in the light and dark versions; only the desk
   around it changes. Markup: pageLibrary() / memberTabs() in app.js. ---- */
@media all {
  #mhScope {
    --pp-paper: #fbf6e8; --pp-paper-2: #f1e6cc; --pp-ink: #2b2219; --pp-ink-2: #6d5f4d; --pp-ink-3: #9a8b74; --pp-seal: #9b2c25;
    --pp-rule: rgba(70, 95, 140, .12); --pp-line: rgba(120, 90, 50, .2);
    --pp-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(120, 90, 50, .16), 0 16px 30px -18px rgba(0, 0, 0, .7);
    --pp-sheet: linear-gradient(180deg, var(--pp-paper), var(--pp-paper-2));
    --pp-kraft: linear-gradient(180deg, #d9c194, #c9ab78);
  }
  #mhScope[data-theme="light"] { --pp-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(120, 90, 50, .16), 0 16px 30px -20px rgba(60, 45, 30, .5); }

  /* title */
  #mhScope .mh-top { align-items: flex-end; }
  #mhScope .mh-title { display: grid; gap: .35rem; margin: 0; color: var(--ex-ink); font: 600 clamp(2rem, 7.4vw, 2.7rem)/1.12 "Cormorant Garamond", Georgia, serif; }
  #mhScope .mh-title small { color: var(--ex-accent); font: 700 .62rem/1.4 "JetBrains Mono", monospace; letter-spacing: .2em; text-transform: uppercase; }
  #mhScope .mh-me-h, #mhScope .mh-h2 { color: var(--ex-accent); font: 700 .64rem/1.4 "JetBrains Mono", monospace; letter-spacing: .2em; text-transform: uppercase; }
  #mhScope .mh-me-h::after { background: currentColor; opacity: .35; }
  #mhScope .mh-me-h em, #mhScope .mh-h2 span { padding: 0; border-radius: 0; background: none; color: var(--ex-muted); font: 600 .64rem/1 "JetBrains Mono", monospace; letter-spacing: .08em; }
  #mhScope .mh-h2 { gap: .6rem; }

  /* the old big panel is gone: its parts stand on the desk */
  #mhScope .mh-me { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
  #mhScope .mh-me::before, #mhScope .mh-me::after { content: none; }

  /* the reader's slip */
  #mhScope .mh-file {
    position: relative; display: grid; gap: 1rem; padding: 34px 20px 20px; border-radius: 3px; color: var(--pp-ink);
    background:
      linear-gradient(180deg, transparent 24px, rgba(155, 44, 37, .5) 24px 25px, transparent 25px),
      var(--pp-sheet);
    box-shadow: var(--pp-shadow);
  }
  #mhScope .mh-file::before {
    content: "Phiếu độc giả"; position: absolute; left: 20px; top: 7px; color: var(--pp-seal);
    font: 700 .58rem/1 "JetBrains Mono", monospace; letter-spacing: .2em; text-transform: uppercase;
  }
  #mhScope .mh-me-edit { top: 34px; right: 14px; width: 2.1rem; height: 2.1rem; border: 1px solid var(--pp-line); background: none; color: var(--pp-ink-2); box-shadow: none; }
  #mhScope .mh-me-edit:hover { color: var(--pp-seal); border-color: var(--pp-seal); }
  /* the photo, taped on */
  #mhScope .mh-me-ring {
    width: 96px; height: 112px; padding: 5px 5px 14px; border-radius: 1px; background: #fffdf6 !important; transform: rotate(-2.5deg);
    box-shadow: 0 0 0 1px rgba(120, 90, 50, .14), 0 8px 14px -8px rgba(40, 25, 10, .6);
  }
  #mhScope .mh-me-ring::before {
    content: ""; position: absolute; z-index: 2; left: 50%; top: -9px; width: 54px; height: 18px; margin-left: -27px; transform: rotate(4deg);
    background: rgba(222, 202, 160, .8); box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  }
  #mhScope .mh-me-ring::after { content: none; }
  #mhScope .mh-me-ava.member-avatar { border: 0; border-radius: 0; background: #e9dcc3; color: var(--pp-ink); font: 600 2.4rem/1 "Cormorant Garamond", Georgia, serif; }
  #mhScope .mh-me-ava.member-avatar img { border-radius: 0; }
  #mhScope .mh-me-name { margin-top: .5rem; color: var(--pp-ink); font: 600 2rem/1.1 "Cormorant Garamond", Georgia, serif; letter-spacing: 0; font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
  #mhScope .mh-me-sub { gap: .5rem .8rem; color: var(--pp-ink-3); }
  /* the tier: a red rubber stamp */
  #mhScope .mh-me-tier {
    padding: 3px 9px; border: 2px solid rgba(155, 44, 37, .8); border-radius: 4px; background: none !important; box-shadow: none !important; transform: rotate(-4deg);
    color: var(--pp-seal) !important; font: 700 .62rem/1.3 "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; mix-blend-mode: multiply;
  }
  #mhScope .mh-me-no { color: var(--pp-ink-2); font: 600 .66rem/1.3 "JetBrains Mono", monospace; letter-spacing: .1em; }
  /* the bio, written on the lines */
  #mhScope .mh-me-bio {
    width: 100%; max-width: none; margin: .2rem 0 0; padding: 0 2px; box-sizing: border-box; color: var(--pp-ink); text-align: left;
    font: italic 500 1.16rem/30px "Cormorant Garamond", Georgia, serif;
    background: repeating-linear-gradient(180deg, transparent 0 29px, var(--pp-rule) 29px 30px);
  }
  #mhScope .mh-me-bio::before, #mhScope .mh-me-bio::after { color: var(--pp-seal); }
  #mhScope a.mh-me-bio.is-empty { color: var(--pp-ink-3); font: italic 500 1.08rem/30px "Cormorant Garamond", Georgia, serif; }
  #mhScope a.mh-me-bio.is-empty:hover { color: var(--pp-seal); }
  /* the numbers as a small register */
  #mhScope .mh-me-stats { padding: .8rem 0 .7rem; border-top: 1px solid var(--pp-ink); border-bottom: 1px solid var(--pp-ink); }
  #mhScope .mh-me-stats div + div { border-left: 1px dashed var(--pp-line); }
  #mhScope .mh-me-stats dd { color: var(--pp-ink); font: 600 2rem/1 "Cormorant Garamond", Georgia, serif; }
  #mhScope .mh-me-stats dd small { color: var(--pp-ink-3); font: 600 .9rem/1 "Cormorant Garamond", Georgia, serif; }
  #mhScope .mh-me-stats dt { color: var(--pp-ink-3); font: 700 .52rem/1.3 "JetBrains Mono", monospace; letter-spacing: .1em; }
  #mhScope .mh-me-meta { margin: 0; color: var(--pp-ink-2); font: 600 .62rem/1.5 "JetBrains Mono", monospace; letter-spacing: .04em; }
  #mhScope .mh-me-meta svg { stroke: var(--pp-seal); }
  #mhScope .mh-pass-acts .mh-btn, #mhScope .mh-btn {
    border-radius: 3px; border: 0; color: var(--pp-paper); background: var(--pp-ink); box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .6);
    font: 700 .66rem/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase;
  }
  #mhScope .mh-pass-acts .mh-btn--ghost, #mhScope .mh-btn--ghost { color: #4a3520; background: var(--pp-kraft); box-shadow: 0 0 0 1px rgba(110, 75, 35, .3) inset, 0 6px 12px -8px rgba(0, 0, 0, .5); }
  #mhScope .mh-btn svg { stroke: currentColor; }

  /* the member card in a kraft sleeve, the studio as a tag */
  #mhScope .mh-pass {
    position: relative; display: grid; gap: .9rem; padding: 26px 16px 16px; border-radius: 4px; background: var(--pp-kraft);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 0 0 1px rgba(110, 75, 35, .3), 0 16px 30px -18px rgba(0, 0, 0, .75);
  }
  #mhScope .mh-pass::before { /* the thumb cut at the mouth of the sleeve */
    content: ""; position: absolute; left: 50%; top: -1px; width: 64px; height: 18px; margin-left: -32px; border-radius: 0 0 32px 32px;
    background: var(--mh-page); box-shadow: inset 0 -1px 0 rgba(110, 75, 35, .35);
  }
  #mhScope .mh-pass::after { /* stitching */
    content: ""; position: absolute; inset: 7px; border: 1px dashed rgba(90, 60, 25, .35); border-radius: 2px; pointer-events: none;
  }
  #mhScope .mh-cc-stage { padding: 0; position: relative; z-index: 1; }
  #mhScope .mh-studio {
    position: relative; z-index: 1; max-width: none; padding: .7rem .9rem .7rem 2.2rem; border: 0; border-radius: 2px 10px 10px 2px; color: var(--pp-ink);
    background: var(--pp-sheet); box-shadow: 0 0 0 1px rgba(120, 90, 50, .2), 0 6px 12px -8px rgba(0, 0, 0, .55);
  }
  #mhScope .mh-studio::before { /* the tag's eyelet */
    content: ""; position: absolute; left: .8rem; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
    background: radial-gradient(circle, #c9ab78 0 40%, #8a6a3a 45% 60%, transparent 65%);
  }
  #mhScope .mh-studio svg { stroke: var(--pp-seal); }
  #mhScope .mh-studio b { color: var(--pp-ink); font: 600 1.12rem/1.1 "Cormorant Garamond", Georgia, serif; }
  #mhScope .mh-studio small { color: var(--pp-ink-3); font: 600 .58rem/1.4 "JetBrains Mono", monospace; letter-spacing: .04em; }
  #mhScope .mh-studio i { color: var(--pp-seal); }
  #mhScope .mh-preview-note { position: relative; z-index: 1; color: #4a3520; }

  /* the tier on a ruled card */
  #mhScope .mh-me .mh-tier, #mhScope .mh-tier {
    padding: 18px 18px 16px; border: 0; border-radius: 3px; color: var(--pp-ink);
    background: repeating-linear-gradient(180deg, transparent 0 27px, var(--pp-rule) 27px 28px), var(--pp-sheet); box-shadow: var(--pp-shadow);
  }
  #mhScope .ex-kicker { color: var(--pp-seal); font: 700 .58rem/1.4 "JetBrains Mono", monospace; letter-spacing: .2em; }
  #mhScope .ex-kicker i { background: var(--pp-seal); box-shadow: none; }
  #mhScope .mh-top .ex-kicker { color: var(--ex-accent); }
  #mhScope .mh-tier-name { color: var(--pp-ink); font: 600 2rem/1.1 "Cormorant Garamond", Georgia, serif; }
  #mhScope .mh-tier-name span { color: var(--pp-ink-3); font: 600 .62rem/1 "JetBrains Mono", monospace; letter-spacing: .06em; }
  /* progress: a ruler */
  #mhScope .mh-tier .mh-bar {
    height: 16px; border-radius: 1px; overflow: hidden; background-color: #efe0bd;
    background-image:
      repeating-linear-gradient(90deg, rgba(60, 40, 20, .55) 0 1px, transparent 1px 10%),
      repeating-linear-gradient(90deg, rgba(60, 40, 20, .3) 0 1px, transparent 1px 2%);
    background-size: 100% 100%, 100% 45%; background-repeat: no-repeat; background-position: 0 0, 0 0;
    box-shadow: 0 0 0 1px rgba(110, 75, 35, .35) inset;
  }
  #mhScope .mh-tier .mh-bar i { border-radius: 0; background: rgba(155, 44, 37, .55); box-shadow: 2px 0 0 var(--pp-seal); }
  #mhScope .mh-tier-next { color: var(--pp-ink-2); }
  #mhScope .mh-tier-next b { color: var(--pp-seal); }
  /* the tiers: stamp boxes */
  #mhScope .mh-tier-ladder li {
    border: 1.5px dashed rgba(109, 95, 77, .45); border-radius: 3px; background: none; color: var(--pp-ink-3); box-shadow: none;
  }
  #mhScope .mh-tier-ladder b { color: var(--pp-ink-2); font: 700 .56rem/1.2 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
  #mhScope .mh-tier-ladder em { color: var(--pp-ink-3); font: 600 .52rem/1.2 "JetBrains Mono", monospace; }
  #mhScope .mh-tier-ladder li.is-past { border-style: solid; border-color: rgba(43, 34, 25, .45); }
  #mhScope .mh-tier-ladder li.is-past b { color: var(--pp-ink); }
  #mhScope .mh-tier-ladder li.is-on { border: 2px solid var(--pp-seal); background: rgba(155, 44, 37, .07); transform: rotate(-3deg); box-shadow: none; }
  #mhScope .mh-tier-ladder li.is-on b, #mhScope .mh-tier-ladder li.is-on em { color: var(--pp-seal); }
  #mhScope .mh-tier-ladder li[data-tier-preview]:hover, #mhScope .mh-tier-ladder li.is-preview { background: rgba(155, 44, 37, .1); border-color: var(--pp-seal); }
  #mhScope .mh-tier-tryhint { color: var(--pp-ink-3); font: italic 500 .98rem/1.4 "Cormorant Garamond", Georgia, serif; }
  #mhScope .mh-tier-how summary { color: var(--pp-seal); font: 700 .6rem/1.4 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
  #mhScope .mh-tier-how ul, #mhScope .mh-tier-how p { color: var(--pp-ink-2); }
  #mhScope .mh-tier-how li b { color: var(--pp-ink); }
  #mhScope .mh-tier-how li em { color: var(--pp-seal); }
  #mhScope .mh-tier-how li svg { stroke: var(--pp-seal); }

  /* the badges in a paper-lined case */
  #mhScope .mh-me .mh-honors, #mhScope .mh-honors {
    padding: 16px 14px 14px; border-radius: 6px; color: var(--pp-ink);
    background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .5), transparent 60%), #efe3c6;
    box-shadow: inset 0 2px 8px rgba(90, 60, 25, .25), inset 0 0 0 1px rgba(110, 75, 35, .25), 0 0 0 5px #6b4a2c, 0 0 0 6px #4a311c, 0 18px 30px -16px rgba(0, 0, 0, .75);
    margin: 6px;
  }
  #mhScope .mh-me .mh-honors-head, #mhScope .mh-honors-head { padding: 0 0 .8rem; border-radius: 0; background: none; border-bottom: 1px solid rgba(155, 44, 37, .35); }
  #mhScope .mh-honors-text p { color: var(--pp-ink-2); }
  #mhScope .mh-honors-text p b { color: var(--pp-seal); }
  #mhScope .mh-ring::before { background: #efe3c6; }
  #mhScope .mh-ring--big b { color: var(--pp-ink); font: 600 1.4rem/1 "Cormorant Garamond", Georgia, serif; }
  #mhScope .mh-ring--big small { color: var(--pp-ink-3); }
  #mhScope .mh-badge:hover, #mhScope .mh-badge.is-picked { background: rgba(255, 255, 255, .45); }
  #mhScope .mh-badge > b { color: var(--pp-ink); font: 600 .92rem/1.15 "Cormorant Garamond", Georgia, serif; }
  #mhScope .mh-badge:not(.is-done) > b { color: var(--pp-ink-3); }
  #mhScope .mh-badge em { color: var(--pp-ink-3); font: 600 .56rem/1 "JetBrains Mono", monospace; letter-spacing: .06em; }
  #mhScope .mh-badge.is-done em { color: var(--pp-seal); }
  #mhScope .mh-badge-prog { height: 3px; background: rgba(109, 95, 77, .2); }
  #mhScope .mh-badge-prog i { background: var(--pp-seal); }
  #mhScope:not([data-theme="light"]) .mh-badge:not(.is-done) .mh-pin { opacity: .45; filter: grayscale(1) contrast(.85) brightness(1.05); }
  #mhScope .mh-medal-info { color: var(--pp-ink-2); background: none; border: 1px dashed rgba(109, 95, 77, .4); border-radius: 3px; font: italic 500 1rem/1.4 "Cormorant Garamond", Georgia, serif; }

  /* reading: spines on a shelf */
  #mhScope .mh-pulse {
    padding: 18px 18px 16px; border: 0; border-radius: 3px; color: var(--pp-ink); background: var(--pp-sheet); box-shadow: var(--pp-shadow);
  }
  #mhScope .mh-pulse::before, #mhScope .mh-pulse::after { content: none; }
  #mhScope .mh-pulse-big { color: var(--pp-ink-3); font: 600 .62rem/1.4 "JetBrains Mono", monospace; letter-spacing: .06em; }
  #mhScope .mh-pulse-big b { color: var(--pp-ink); font: 600 2.6rem/1 "Cormorant Garamond", Georgia, serif; }
  #mhScope .mh-pulse-big span { font: italic 500 1rem/1.3 "Cormorant Garamond", Georgia, serif; letter-spacing: 0; }
  /* the streak: a round stamp */
  #mhScope .mh-streak {
    min-width: 0; width: 84px; height: 84px; padding: 0; box-sizing: border-box; align-content: center; gap: 0; border-radius: 50%;
    border: 2px solid rgba(155, 44, 37, .75); background: none; color: var(--pp-seal); transform: rotate(-8deg); box-shadow: inset 0 0 0 3px var(--pp-paper), inset 0 0 0 4px rgba(155, 44, 37, .5);
  }
  #mhScope .mh-streak.is-lit { border-color: var(--pp-seal); background: rgba(155, 44, 37, .06); }
  #mhScope .mh-streak svg { width: 15px; height: 15px; stroke: var(--pp-seal); fill: none; animation: none; }
  #mhScope .mh-streak b { color: var(--pp-seal); font: 600 1.7rem/1 "Cormorant Garamond", Georgia, serif; }
  #mhScope .mh-streak span { color: var(--pp-seal); font: 700 .46rem/1.25 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 0 8px; }
  #mhScope .mh-chart {
    position: relative; height: 118px; gap: 3px; padding: 0 8px 12px; border: 0; background: none; align-items: end;
  }
  #mhScope .mh-chart::after { /* the plank */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; border-radius: 1px;
    background: linear-gradient(180deg, #8a5d36, #6b4527 55%, #4f321c); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 10px -4px rgba(40, 25, 10, .55);
  }
  #mhScope .mh-col { z-index: 1; }
  #mhScope .mh-col i {
    width: min(78%, 22px); min-height: 0; border-radius: 2px 2px 0 0; opacity: 1;
    background:
      linear-gradient(180deg, transparent 10%, rgba(232, 200, 120, .75) 10% calc(10% + 2px), transparent calc(10% + 2px) calc(88% - 2px), rgba(232, 200, 120, .75) calc(88% - 2px) 88%, transparent 88%),
      linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .14) 35%, rgba(0, 0, 0, .18)),
      var(--spine, #6b3a2e);
    box-shadow: 1px 0 0 rgba(0, 0, 0, .25);
  }
  #mhScope .mh-col:nth-child(5n + 1) { --spine: #6b3a2e; }
  #mhScope .mh-col:nth-child(5n + 2) { --spine: #2f4a3a; }
  #mhScope .mh-col:nth-child(5n + 3) { --spine: #3a3f5c; }
  #mhScope .mh-col:nth-child(5n + 4) { --spine: #7a5a2c; }
  #mhScope .mh-col:nth-child(5n + 5) { --spine: #4a2f3f; }
  #mhScope .mh-col.is-today { --spine: #9b2c25; }
  #mhScope .mh-col.is-today i { box-shadow: 1px 0 0 rgba(0, 0, 0, .25), 0 0 0 1.5px rgba(232, 200, 120, .8); }
  #mhScope .mh-col.is-zero i { height: 5px; background: #c9ab78; box-shadow: none; border-radius: 1px; }
  #mhScope .mh-col.is-picked i, #mhScope .mh-col:hover i { transform: translateY(-4px); transition: transform .2s; }
  #mhScope .mh-col small { bottom: -30px; color: var(--pp-ink-3); font: 700 .54rem/1 "JetBrains Mono", monospace; }
  #mhScope .mh-chart-tip { margin-top: 1.2rem; color: var(--pp-ink-2); font: italic 500 1rem/1.4 "Cormorant Garamond", Georgia, serif; }
  #mhScope .mh-kpis { border-top: 1px solid var(--pp-ink); padding-top: .7rem; }
  #mhScope .mh-kpi { border: 0; background: none; color: var(--pp-ink-2); }
  #mhScope .mh-kpi + .mh-kpi { border-left: 1px dashed var(--pp-line); }
  #mhScope .mh-kpi svg { stroke: var(--pp-seal); }
  #mhScope .mh-kpi dt { color: var(--pp-ink-3); font: 700 .54rem/1.3 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
  #mhScope .mh-kpi dd { color: var(--pp-ink); font: 600 1.5rem/1 "Cormorant Garamond", Georgia, serif; }

  /* continue reading: covers with a red ribbon */
  #mhScope .mh-cont-item { border: 0; border-radius: 3px; color: var(--pp-ink); background: var(--pp-sheet); box-shadow: var(--pp-shadow); }
  #mhScope .mh-cont-cover { position: relative; overflow: visible; border-radius: 1px; box-shadow: 0 6px 10px -6px rgba(40, 25, 10, .7); }
  #mhScope .mh-cont-cover::after {
    content: ""; position: absolute; z-index: 2; top: -4px; right: 8px; width: 10px; height: 46%;
    background: linear-gradient(90deg, #8a241e, #b8443a 50%, #8a241e); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
  }
  #mhScope .mh-cont-text > b { color: var(--pp-ink); font: 600 1.18rem/1.15 "Cormorant Garamond", Georgia, serif; }
  #mhScope .mh-cont-text > span { color: var(--pp-ink-3); font: 600 .6rem/1.4 "JetBrains Mono", monospace; letter-spacing: .04em; }
  #mhScope .mh-bar { background: rgba(109, 95, 77, .2); }
  #mhScope .mh-bar i { background: var(--pp-seal); }
  #mhScope .mh-cont-prog em { color: var(--pp-seal); font: 700 .62rem/1 "JetBrains Mono", monospace; }
  #mhScope .mh-cont-foot time { color: var(--pp-ink-3); font: 600 .58rem/1 "JetBrains Mono", monospace; }
  #mhScope .mh-cont-foot strong { color: var(--pp-seal); font: 700 .6rem/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }

  /* the shelves: index tabs, covers standing on planks */
  #mhScope .mh-tabs { gap: 3px; padding: 6px 2px 0; border-bottom: 2px solid rgba(155, 44, 37, .55); }
  #mhScope .mh-tab {
    margin-bottom: -2px; padding: .55rem .8rem .5rem; border: 1px solid rgba(110, 75, 35, .3); border-bottom: 0; border-radius: 6px 6px 0 0;
    color: #4a3520; background: var(--pp-kraft); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
    font: 700 .6rem/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase;
  }
  #mhScope .mh-tab-ico svg { stroke: #6b4a2c; width: 14px; height: 14px; }
  #mhScope .mh-tab-n { padding: 0; background: none; color: #7a5a35; font: 700 .6rem/1 "JetBrains Mono", monospace; }
  #mhScope .mh-tab[aria-selected="true"] {
    position: relative; z-index: 1; padding-top: .7rem; transform: translateY(0); border-color: rgba(155, 44, 37, .55); border-bottom: 2px solid var(--pp-paper);
    color: var(--pp-seal); background: var(--pp-paper); box-shadow: none;
  }
  #mhScope .mh-tab[aria-selected="true"] .mh-tab-ico svg { stroke: var(--pp-seal); }
  #mhScope .mh-tab[aria-selected="true"] .mh-tab-n { background: none; color: var(--pp-seal); }
  #mhScope .mh-panel { padding: 18px 16px 6px; border-radius: 0 0 3px 3px; color: var(--pp-ink); background: var(--pp-sheet); box-shadow: var(--pp-shadow); }
  #mhScope .mh-group-h { color: var(--pp-seal); font: 700 .62rem/1.4 "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }
  #mhScope .mh-group-h::before { width: 14px; height: 1.5px; border-radius: 0; background: var(--pp-seal); box-shadow: none; }
  #mhScope .mh-group-h span { padding: 0; background: none; color: var(--pp-ink-3); font-size: .62rem; }
  #mhScope .mh-panel .ex-card .ex-meta h3 { color: var(--pp-ink); }
  #mhScope .mh-panel .ex-card .ex-by { color: var(--pp-ink-3); }
  /* each story stands on a plank that runs along the row */
  #mhScope .mh-shelf-item { position: relative; padding-bottom: 22px; }
  #mhScope .mh-shelf-item::after {
    content: ""; position: absolute; left: -12px; right: -12px; bottom: 0; height: 10px;
    background: linear-gradient(180deg, #8a5d36, #6b4527 55%, #4f321c); box-shadow: 0 6px 8px -4px rgba(40, 25, 10, .5);
  }
  #mhScope .mh-chip { border: 0; border-radius: 3px; color: #4a3520; background: var(--pp-kraft); box-shadow: 0 0 0 1px rgba(110, 75, 35, .3) inset; font: 700 .58rem/1.2 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
  #mhScope .mh-chip--on { color: var(--pp-paper); background: var(--pp-ink); box-shadow: none; }
  #mhScope .mh-x { border: 1px solid var(--pp-line); background: none; color: var(--pp-ink-3); }
  #mhScope .mh-x:hover { color: var(--pp-seal); border-color: var(--pp-seal); }
  /* lists in the panels (history, comments, hearts, ratings) */
  #mhScope .mh-day { color: var(--pp-seal); font: italic 600 1.15rem/1.4 "Cormorant Garamond", Georgia, serif; letter-spacing: 0; text-transform: none; }
  #mhScope .mh-row { border: 0; border-bottom: 1px dashed var(--pp-line); border-radius: 0; background: none; box-shadow: none; }
  #mhScope .mh-row-main b { color: var(--pp-ink); font: 600 1.06rem/1.2 "Cormorant Garamond", Georgia, serif; }
  #mhScope .mh-row-main span, #mhScope .mh-row time { color: var(--pp-ink-3); font: 600 .6rem/1.4 "JetBrains Mono", monospace; }
  #mhScope .mh-comment { border: 0; border-left: 2px solid rgba(155, 44, 37, .5); border-radius: 0; background: rgba(255, 255, 255, .35); box-shadow: none; color: var(--pp-ink); }
  #mhScope .mh-comment p { color: var(--pp-ink); font: 500 1.08rem/1.5 "Cormorant Garamond", Georgia, serif; }
  #mhScope .mh-comment blockquote { color: var(--pp-ink-2); }
  #mhScope .mh-comment-meta, #mhScope .mh-comment-meta a, #mhScope .mh-comment-meta time { color: var(--pp-ink-3); }
  #mhScope .mh-empty p { color: var(--pp-ink-2); font: italic 500 1.06rem/1.5 "Cormorant Garamond", Georgia, serif; }
}
@media (min-width: 1100px), (min-width: 1024px) and (orientation: landscape) {
  #mhScope .mh-me { column-gap: 40px; }
  #mhScope .mh-me-side { gap: 1.4rem; }
  #mhScope .mh-me-main { gap: 1.4rem; }
}
/* Góc của tôi, PC / iPad landscape: reading in 14 days kept to a column on
   the left (as wide as the reader's slip), "Đọc tiếp" beside it on the
   right, its covers in two columns that scroll on their own when there
   are more than fit beside the shelf. Phones / iPad portrait: one after
   the other as before. */
.mh-duo { display: contents; }
@media (min-width: 1100px), (min-width: 1024px) and (orientation: landscape) {
  #mhScope .mh-duo { display: grid; grid-template-columns: 400px minmax(0, 1fr); column-gap: 40px; align-items: stretch; }
  #mhScope .mh-duo:not(:has(.mh-cont)) { grid-template-columns: minmax(0, 1fr); }
  #mhScope .mh-duo > .mh-pulse { margin: 0; min-width: 0; }
  #mhScope .mh-duo .mh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #mhScope .mh-duo .mh-kpi + .mh-kpi { border-left: 0; }
  #mhScope .mh-duo .mh-kpis .mh-kpi:nth-child(even) { border-left: 1px dashed var(--pp-line); padding-left: .8rem; }
  #mhScope .mh-duo > .mh-section { contain: size; display: flex; flex-direction: column; gap: .8rem; min-width: 0; min-height: 0; margin: 0; }
  #mhScope .mh-duo .mh-cont {
    flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: .9rem;
    margin: 0; padding: 2px 8px 4px 2px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: none;
    scrollbar-width: thin; scrollbar-color: rgba(155, 44, 37, .4) transparent;
  }
  #mhScope .mh-duo .mh-cont-item { flex: none; width: auto; min-width: 0; }
}

/* ---- Khám phá as the reading room, every screen: the books stand on
   wooden shelves, one shelf per status with a brass name plate, each
   cover with a call number label on the shelf's edge; the search is a
   catalogue slip with a red stamp to send; on PC the filters are a small
   card cabinet, each group a drawer, and a catalogue slip comes out
   beside a cover on hover; on phones the status is a row of index tabs
   that stays at the top, the genres kraft labels, the order a small
   "Xếp theo" label. Markup: pageExplore() in app.js. ---- */
@media all {
  #exScope {
    --pp-paper: #fbf6e8; --pp-paper-2: #f1e6cc; --pp-ink: #2b2219; --pp-ink-2: #6d5f4d; --pp-ink-3: #9a8b74; --pp-seal: #9b2c25;
    --pp-sheet: linear-gradient(180deg, var(--pp-paper), var(--pp-paper-2)); --pp-kraft: linear-gradient(180deg, #d9c194, #c9ab78);
    --pp-wood: linear-gradient(180deg, #8a5d36, #6b4527 55%, #4f321c);
    --ex-gx: 1rem;
  }
  /* title */
  #exScope .ex-title { display: grid; gap: .35rem; margin: 0; color: var(--ex-ink); font: 600 clamp(2rem, 7.4vw, 2.7rem)/1.12 "Cormorant Garamond", Georgia, serif; letter-spacing: 0; }
  #exScope .ex-title small { color: var(--ex-accent); font: 700 .62rem/1.4 "JetBrains Mono", monospace; letter-spacing: .2em; text-transform: uppercase; }
  #exScope .ex-title small b { font-weight: 700; }
  /* search: a catalogue slip, written on its line, a red stamp to send */
  #exScope .ex-find {
    border: 0; border-radius: 3px; padding: 6px 6px 6px 14px; background: var(--pp-sheet);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(120, 90, 50, .18), 0 12px 24px -16px rgba(0, 0, 0, .7);
  }
  #exScope .ex-find > svg { stroke: var(--pp-ink-3); }
  #exScope .ex-find input { color: var(--pp-ink); border-bottom: 1px solid rgba(70, 95, 140, .35); font: italic 500 1.12rem/1.3 "Cormorant Garamond", Georgia, serif; }
  #exScope .ex-find input::placeholder { color: var(--pp-ink-3); }
  #exScope .ex-go { border-radius: 50%; color: #f7efdc; background: radial-gradient(circle at 35% 30%, #b0433a, #8a241e 72%); box-shadow: 0 0 0 1.5px rgba(247, 239, 220, .9) inset, 0 0 0 2.5px rgba(138, 36, 30, .8) inset, 0 4px 8px -4px rgba(80, 20, 15, .7); transform: rotate(-8deg); }
  #exScope .ex-active { color: var(--ex-muted); font: 600 .62rem/1.5 "JetBrains Mono", monospace; letter-spacing: .04em; }
  #exScope .ex-active b { color: var(--ex-accent); }

  /* a shelf: brass name plate, books standing on planks */
  #exScope .ex-group + .ex-group { margin-top: 2.6rem; }
  #exScope .ex-plate {
    display: inline-flex; align-items: baseline; gap: .6rem; margin: 0 0 1.1rem; padding: .45rem .9rem .4rem; border-radius: 2px;
    color: #3a2810; background: linear-gradient(180deg, #e6c878, #b8913f 55%, #a07a2e); text-shadow: 0 1px 0 rgba(255, 240, 200, .5);
    box-shadow: 0 1px 0 rgba(255, 245, 210, .7) inset, 0 -1px 0 rgba(80, 55, 15, .4) inset, 0 3px 6px -3px rgba(0, 0, 0, .6);
    font: 700 .66rem/1.2 "JetBrains Mono", monospace; letter-spacing: .18em; text-transform: uppercase;
  }
  #exScope .ex-plate::before, #exScope .ex-plate::after { /* the two screws */
    content: ""; position: static; flex: none; width: 5px; height: 5px; margin: 0; border-radius: 50%; align-self: center; box-shadow: none; opacity: 1;
    background: radial-gradient(circle at 35% 35%, #fff3c4, #7a5a1e 70%);
  }
  #exScope .ex-plate::after { order: 2; }
  #exScope .ex-plate span { padding: 0; border: 0; border-radius: 0; background: none; color: #5a4214; font: 700 .62rem/1 "JetBrains Mono", monospace; }
  #exScope .ex-books { column-gap: var(--ex-gx); row-gap: 1.6rem; }
  #exScope .ex-book { position: relative; min-width: 0; }
  #exScope .ex-book[hidden] { display: none !important; }
  #exScope .ex-card { gap: 0; }
  #exScope .ex-cover { border-radius: 2px 4px 4px 2px; transform-origin: 50% 100%; box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 4px 0 10px -6px rgba(0, 0, 0, .6); }
  #exScope .ex-cover::after { border-radius: inherit; box-shadow: inset 3px 0 0 rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(0, 0, 0, .12); }
  /* the plank under the row, the call number tag on its edge */
  #exScope .ex-callno {
    position: relative; z-index: 1; display: flex; justify-content: center; margin: 0 calc(var(--ex-gx) / -2) .7rem; padding: 4px 0 5px;
    background: var(--pp-wood); box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 7px 10px -5px rgba(30, 18, 8, .55);
  }
  #exScope .ex-callno i {
    padding: 2px 7px 1px; border-radius: 1px; color: var(--pp-ink); background: #f7efdc; box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    font: 700 .5rem/1.3 "JetBrains Mono", monospace; font-style: normal; letter-spacing: .1em; white-space: nowrap;
  }
  #exScope .ex-meta { padding: 0 2px; gap: 3px; }
  #exScope .ex-meta h3 { color: var(--ex-ink); font: 600 1.12rem/1.15 "Cormorant Garamond", Georgia, serif; }
  #exScope .ex-by { color: var(--ex-muted); font: 600 .56rem/1.4 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
  /* status: a small stamp on the cover */
  #exScope .ex-status {
    left: 6px; top: 7px; padding: 2px 6px; border-radius: 2px; border: 1.5px solid currentColor; transform: rotate(-4deg);
    background: rgba(251, 246, 232, .9) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    font: 700 .5rem/1.3 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase;
  }
  #exScope .ex-status--ongoing { color: #9b2c25 !important; }
  #exScope .ex-status--completed { color: #2b2219 !important; }
  #exScope .ex-status--upcoming { color: #7a5a1e !important; }
  /* "Xem cả kệ" */
  #exScope .ex-more {
    display: block; margin: 1.2rem auto 0; padding: .55rem 1rem; border: 1px solid rgba(110, 75, 35, .3); border-radius: 2px; cursor: pointer;
    color: #4a3520; background: var(--pp-kraft); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 6px 12px -8px rgba(0, 0, 0, .55);
    font: 700 .62rem/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase;
  }
  #exScope .ex-more[hidden] { display: none; }
  #exScope .ex-empty { color: var(--ex-muted); font: italic 500 1.15rem/1.5 "Cormorant Garamond", Georgia, serif; }
  #exScope .ex-empty a { color: var(--ex-accent); }
  /* the catalogue slip: PC only */
  #exScope .ex-slip { display: none; }

  /* phones / upright tablets: filters bar */
  #exScope .ex-mbar { display: grid; gap: .8rem; margin: .2rem 0 1.4rem; }
  #exScope .ex-mtabs {
    position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 5; display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px; padding: 8px 16px 0; background: var(--ex-bg); border-bottom: 2px solid rgba(155, 44, 37, .55);
  }
  #exScope .ex-mtabs::-webkit-scrollbar { display: none; }
  #exScope .ex-mtab {
    flex: none; display: inline-flex; align-items: baseline; gap: .4rem; margin-bottom: -2px; padding: .55rem .8rem .5rem; border: 1px solid rgba(110, 75, 35, .3); border-bottom: 0;
    border-radius: 6px 6px 0 0; color: #4a3520; background: var(--pp-kraft); text-decoration: none;
    font: 700 .6rem/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase;
  }
  #exScope .ex-mtab span { color: #7a5a35; }
  #exScope .ex-mtab.is-on { padding-top: .7rem; border-color: rgba(155, 44, 37, .55); border-bottom: 2px solid var(--ex-bg); color: var(--pp-seal); background: var(--pp-paper); }
  #exScope .ex-mtab.is-on span { color: var(--pp-seal); }
  #exScope .ex-mgenres { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  #exScope .ex-mgenres::-webkit-scrollbar { display: none; }
  #exScope .ex-mgenre {
    flex: none; padding: .42rem .7rem; border: 1px solid rgba(110, 75, 35, .3); border-radius: 2px; color: #4a3520; background: var(--pp-kraft); text-decoration: none;
    font: 700 .6rem/1.2 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase;
  }
  #exScope .ex-mgenre.is-on { color: var(--pp-seal); background: var(--pp-paper); box-shadow: 0 0 0 1px var(--pp-seal) inset; }
  #exScope .ex-msort {
    justify-self: start; display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .4rem .3rem .7rem; border-radius: 2px;
    background: var(--pp-sheet); box-shadow: 0 0 0 1px rgba(120, 90, 50, .2), 0 6px 12px -8px rgba(0, 0, 0, .5);
  }
  #exScope .ex-msort span { color: var(--pp-ink-3); font: 700 .56rem/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
  #exScope .ex-msort select {
    padding: .2rem 1.4rem .2rem .2rem; border: 0; border-radius: 0; background: transparent; color: var(--pp-seal); -webkit-appearance: none; appearance: none;
    font: italic 600 1.05rem/1.2 "Cormorant Garamond", Georgia, serif;
    background-image: linear-gradient(45deg, transparent 50%, var(--pp-seal) 50%), linear-gradient(135deg, var(--pp-seal) 50%, transparent 50%);
    background-position: calc(100% - 9px) 55%, calc(100% - 5px) 55%; background-size: 4px 4px; background-repeat: no-repeat;
  }
}
@media (max-width: 699.98px) {
  #exScope { --ex-gx: .9rem; }
  #exScope .ex-books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* PC / iPad landscape */
@media (min-width: 1100px), (min-width: 1024px) and (orientation: landscape) {
  #exScope { --ex-gx: 1.3rem; }
  #exScope .ex-mbar { display: none; }
  #exScope .ex-main .ex-grid { gap: 2.2rem var(--ex-gx); }
  /* the card cabinet */
  #exScope .ex-filters {
    gap: 10px; padding: 12px; border-radius: 4px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 6%, transparent 94%, rgba(0, 0, 0, .25)), linear-gradient(180deg, #6b4527, #4f321c);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 18px 30px -16px rgba(0, 0, 0, .8);
  }
  #exScope .ex-fgroup {
    position: relative; gap: 3px; padding: 10px 10px 12px; border-radius: 2px;
    background: linear-gradient(180deg, #a77a4c, #8a5d36); box-shadow: 0 1px 0 rgba(255, 230, 190, .35) inset, 0 -2px 0 rgba(0, 0, 0, .25) inset, 0 2px 4px rgba(0, 0, 0, .45);
  }
  /* the label in its brass holder */
  #exScope .ex-fgroup h3 {
    justify-self: center; margin: 0 0 8px; padding: 3px 12px 2px; border: 2px solid #b8913f; border-radius: 2px; color: var(--pp-ink); background: #f3e6c8;
    box-shadow: 0 0 0 1px #6f5420, 0 1px 2px rgba(0, 0, 0, .4); font: 700 .56rem/1.3 "JetBrains Mono", monospace; letter-spacing: .16em;
  }
  /* the cards in the drawer */
  #exScope .ex-f {
    padding: .42rem .65rem; border-radius: 1px; color: var(--pp-ink); background: var(--pp-sheet); box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    font: 600 1rem/1.15 "Cormorant Garamond", Georgia, serif;
  }
  #exScope .ex-f span { color: var(--pp-ink-3); font: 600 .58rem/1 "JetBrains Mono", monospace; }
  #exScope .ex-f:hover { color: var(--pp-seal); background: var(--pp-sheet); }
  #exScope .ex-f.is-on { color: var(--pp-seal); background: #fff9ec; box-shadow: 0 0 0 1.5px var(--pp-seal) inset, 0 1px 2px rgba(0, 0, 0, .3); font-weight: 700; }
  #exScope .ex-f.is-on span { color: var(--pp-seal); }
  #exScope[data-theme="light"] .ex-side { padding: 0; background: none; box-shadow: none; }
  #exScope[data-theme="light"] .ex-main { padding: 22px 26px 30px; }
  /* hover: the book leans out, its catalogue slip comes out beside it */
  #exScope .ex-book:hover { z-index: 6; }
  #exScope .ex-book:hover .ex-cover { transform: rotate(-3deg) translateY(-6px); box-shadow: 0 4px 8px rgba(0, 0, 0, .35), 8px 10px 18px -8px rgba(0, 0, 0, .65); }
  #exScope .ex-book:hover h3 { color: var(--ex-accent); }
  #exScope .ex-slip {
    display: grid; gap: .45rem; position: absolute; z-index: 7; top: 6%; left: calc(100% - 10px); width: 236px; padding: 26px 14px 14px; border-radius: 2px;
    color: var(--pp-ink); pointer-events: none; opacity: 0; transform: translateX(-8px) rotate(1.5deg); transition: opacity .18s ease, transform .18s ease;
    background:
      linear-gradient(180deg, transparent 18px, rgba(155, 44, 37, .5) 18px 19px, transparent 19px),
      repeating-linear-gradient(180deg, transparent 0 23px, rgba(70, 95, 140, .1) 23px 24px),
      var(--pp-sheet);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(120, 90, 50, .2), 0 18px 30px -14px rgba(0, 0, 0, .7);
  }
  #exScope .ex-book:nth-child(5n) .ex-slip, #exScope .ex-book:nth-child(5n - 1) .ex-slip { left: auto; right: calc(100% - 10px); transform: translateX(8px) rotate(-1.5deg); }
  #exScope .ex-book:hover .ex-slip, #exScope .ex-book:focus-within .ex-slip { opacity: 1; pointer-events: auto; transform: none; }
  #exScope .ex-slip-no { position: absolute; left: 14px; top: 5px; color: var(--pp-seal); font: 700 .5rem/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
  #exScope .ex-slip b { font: 600 1.25rem/1.1 "Cormorant Garamond", Georgia, serif; }
  #exScope .ex-slip p { margin: 0; color: var(--pp-ink-2); font: 500 1rem/24px "Cormorant Garamond", Georgia, serif; }
  #exScope .ex-slip-meta { color: var(--pp-ink-3); font: 600 .56rem/1.4 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
  #exScope .ex-slip-go { justify-self: start; color: var(--pp-seal); font: 700 .6rem/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
  #exScope .ex-slip-go:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* ---- story page head: alignment only (same design).
   - The status line above the title had the top of its accents cut off
     by the column's edge ("SẮP RA MẮT" showed as "SAP RA MAT"): a little
     room above it.
   - Phones held upright: the cover sat on the screen's left edge and the
     numbers and buttons ran into its right edge; the head now keeps the
     same 16px margin on both sides as the blocks below it. ---- */
main.story-page .story-copy { padding-top: .32em; }
@media (max-width: 719px) and (orientation: portrait) {
  main.story-page .story-top { box-sizing: border-box; padding-inline: 16px !important; }
  /* a label too long for its button wraps instead of being cut */
  main.story-page .story-acts .btn { white-space: normal; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
}

/* one light/dark switch: the one in the top bar (#dkTheme, every screen).
   The pages' own switches are hidden; the top bar's switch still drives
   them (bindPcTheme() clicks the page's switch), so each page keeps
   following the choice. */
#exThemeToggle, #clThemeToggle, #btnStoryTheme, #mhThemeToggle, #accThemeToggle, #mbThemeToggle, #mpThemeToggle { display: none !important; }
/* Khám phá on phones: the status tabs stay under the top bar while the
   page scrolls. They used to sit inside the small filter block, so they
   only stuck for its own height and the genre labels and the "Xếp theo"
   label slid under them and showed through the top bar; now they are
   a block of their own on the page's edge, flush under the bar, on a
   solid ground. On this page the top bar is solid too (it let the
   page show through faintly). */
#app:has(> #exScope) .site-header { background: #120e0b !important; }
#app[data-theme="light"]:has(> #exScope) .site-header { background: #fbf8f1 !important; }
#exScope .ex-mtabs { top: var(--vcbg-header-h, 57px); z-index: 20; margin: 0 -16px .9rem; padding-top: 10px; background: var(--ex-bg); box-shadow: 0 8px 10px -10px rgba(0, 0, 0, .35); }
@media (min-width: 1100px), (min-width: 1024px) and (orientation: landscape) {
  #exScope .ex-mtabs { display: none; }
}

/* ---- notifications (the bell's panel and #/thong-bao): same layout as
   before, only the type and colours brought into the library: titles in
   the book serif, small labels and times in the typewriter face, seal red
   on paper (light) and gilt on the dark desk; the old cyan/purple and the
   old sans-serif titles are gone. ---- */
.vc-notif-popover h3, .vc-notif-hero h1 { font: 600 1.7rem/1.1 "Cormorant Garamond", Georgia, serif !important; letter-spacing: 0; }
.vc-notif-hero h1 { font-size: clamp(2rem, 6vw, 2.5rem) !important; }
.vc-notif-hero small { font: 700 .6rem/1.4 "JetBrains Mono", monospace !important; letter-spacing: .2em; }
.vc-notif-hero p { font: italic 500 1.05rem/1.4 "Cormorant Garamond", Georgia, serif !important; }
.vc-notif-popover header button[data-notif-read-all], .vc-notif-hero-actions .btn, .vc-notif-filters button {
  font: 700 .6rem/1.2 "JetBrains Mono", monospace !important; letter-spacing: .1em; text-transform: uppercase;
}
.vc-notif-line b { font: 600 1.12rem/1.2 "Cormorant Garamond", Georgia, serif !important; letter-spacing: 0; }
.vc-notif-copy p { font: 500 .84rem/1.45 "Be Vietnam Pro", system-ui, sans-serif !important; }
.vc-notif-copy time { font: 600 .56rem/1.4 "JetBrains Mono", monospace !important; letter-spacing: .08em; text-transform: uppercase; }
.vc-notif-new { padding: 1px 6px !important; border-radius: 2px !important; font: 700 .5rem/1.4 "JetBrains Mono", monospace !important; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.vc-notif-icon { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.15rem; border-radius: 3px !important; }
.vc-notif-view-all { font: 700 .62rem/1.2 "JetBrains Mono", monospace !important; letter-spacing: .14em; text-transform: uppercase; }
.vc-notif-empty b { font: 600 1.35rem/1.2 "Cormorant Garamond", Georgia, serif !important; }
.vc-notif-empty p { font: italic 500 1.02rem/1.4 "Cormorant Garamond", Georgia, serif !important; }
.vc-notif-detail h2, .vc-notif-detail h3 { font-family: "Cormorant Garamond", Georgia, serif !important; font-weight: 600; }

/* dark desk: gilt and cream */
.vc-notif-popover .vc-notif-new, #app:not([data-theme="light"]) .vc-notif-new { background: rgba(216, 178, 90, .16) !important; color: #d8b25a !important; }
.vc-notif-popover .vc-notif-card.is-unread { border-left: 3px solid #d8b25a !important; }
.vc-notif-popover .vc-notif-pop-close { color: #d8c9a6 !important; }

/* light: seal red on paper */
body:has(#app[data-theme="light"]) .vc-notif-popover header button[data-notif-read-all],
body:has(#app[data-theme="light"]) .vc-notif-view-all { color: #9b2c25 !important; }
body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-pop-close { color: #6d5f4d !important; background: transparent !important; }
body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-pop-close:hover { color: #9b2c25 !important; }
body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-new, #app[data-theme="light"] .vc-notif-new { background: rgba(155, 44, 37, .1) !important; color: #9b2c25 !important; }
body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-card.is-unread, #app[data-theme="light"] .vc-notif-card.is-unread { border-left: 3px solid #9b2c25 !important; }
body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-icon, #app[data-theme="light"] .vc-notif-icon { color: #9b2c25 !important; }
body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-view-all { border-top-color: rgba(43, 34, 25, .1) !important; }
/* dark desk: the panel is solid (it let the page show through) */
body:not(:has(#app[data-theme="light"])) .vc-notif-popover { background: #1b1410 !important; border-color: rgba(216, 178, 90, .22) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body:not(:has(#app[data-theme="light"])) .vc-notif-popover .vc-notif-card { background: rgba(239, 230, 204, .035) !important; border-color: rgba(216, 178, 90, .12) !important; }
body:not(:has(#app[data-theme="light"])) .vc-notif-popover .vc-notif-card.is-unread { background: rgba(216, 178, 90, .07) !important; }
/* the bell with something unread: the old glow (pale cream on a pale halo,
   purple pulse) made it vanish on the light bar. Now the bell keeps its
   ink colour and just rings now and then; the count is a red seal. */
.vc-notification-bell.has-unread, .vc-notification-bell.has-unread:hover {
  background: transparent !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important;
  animation: none !important; color: #d8b25a !important;
}
.vc-notification-bell.has-unread svg { filter: none !important; }
#app[data-theme="light"] .vc-notification-bell, #app[data-theme="light"] .vc-notification-bell.has-unread, #app[data-theme="light"] .vc-notification-bell.has-unread:hover { color: #9b2c25 !important; }
.vc-notification-badge {
  top: -5px !important; right: -7px !important; min-width: 18px !important; height: 18px !important; border: 2px solid #fbf8f1 !important;
  background: #9b2c25 !important; color: #fbf6e8 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important;
  font: 700 .62rem/1 "JetBrains Mono", monospace !important;
}
#app:not([data-theme="light"]) .vc-notification-badge { border-color: #120e0b !important; }
/* the notification opened (detail window): a sheet of paper in both
   themes. It was the old dark navy box, and on the light theme its title
   took the page's dark ink, so it could not be read. */
.vc-notif-detail-bg { background: rgba(18, 14, 11, .62) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.vc-notif-detail {
  border: 0 !important; border-radius: 4px !important; color: #2b2219 !important;
  background: linear-gradient(180deg, transparent 52px, rgba(155, 44, 37, .45) 52px 53px, transparent 53px), linear-gradient(180deg, #fbf6e8, #f1e6cc) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(120, 90, 50, .2), 0 28px 60px -20px rgba(0, 0, 0, .7) !important;
}
.vc-notif-detail > header .vc-notif-icon { color: #9b2c25 !important; border-color: rgba(155, 44, 37, .35) !important; background: rgba(155, 44, 37, .06) !important; }
.vc-notif-detail > header button { background: transparent !important; color: #6d5f4d !important; }
.vc-notif-detail > header button:hover { color: #9b2c25 !important; }
.vc-notif-detail > small { color: #9b2c25 !important; font: 700 .6rem/1.4 "JetBrains Mono", monospace !important; letter-spacing: .2em; }
.vc-notif-detail h2 { color: #2b2219 !important; font-size: clamp(1.5rem, 5vw, 1.9rem) !important; line-height: 1.2 !important; }
.vc-notif-detail-body {
  border: 0 !important; border-left: 2px solid rgba(155, 44, 37, .5) !important; border-radius: 0 !important; padding: .3rem 0 .3rem 1rem !important;
  background: transparent !important; color: #3d3226 !important; font: 500 1rem/1.7 "Be Vietnam Pro", system-ui, sans-serif !important;
}
.vc-notif-detail > time { color: #9a8b74 !important; font: 600 .58rem/1.4 "JetBrains Mono", monospace !important; letter-spacing: .08em; text-transform: uppercase; }
.vc-notif-detail > footer .btn { border-radius: 3px !important; font: 700 .64rem/1 "JetBrains Mono", monospace !important; letter-spacing: .12em; text-transform: uppercase; padding: .75rem 1rem !important; }
.vc-notif-detail > footer .btn-ghost { color: #4a3520 !important; background: linear-gradient(180deg, #d9c194, #c9ab78) !important; border: 1px solid rgba(110, 75, 35, .3) !important; box-shadow: none !important; }
.vc-notif-detail > footer .btn-primary { color: #fbf6e8 !important; background: #2b2219 !important; border: 0 !important; box-shadow: none !important; }
/* Góc của tôi: every tier's card stands upright like Luxury (the portrait
   layout, .mh-lx); the lighter metals keep their dark ink */
.mh-lx.mh-cc--silver { --cc-ink: #17202a; --cc-sub: rgba(23, 32, 42, .6); --cc-line: rgba(23, 32, 42, .15); }
.mh-lx.mh-cc--gold { --cc-ink: #2b1d05; --cc-sub: rgba(43, 29, 5, .62); --cc-line: rgba(43, 29, 5, .18); }
.mh-lx:not(.mh-cc--luxury) .mh-cc-tier b { font-size: clamp(.78rem, 3.6vw, .92rem); letter-spacing: .24em; }
.mh-lx.mh-cc--silver .mh-lx-name, .mh-lx.mh-cc--gold .mh-lx-name { text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.mh-lx.mh-cc--silver .mh-lx-digits, .mh-lx.mh-cc--gold .mh-lx-digits { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5)); }

/* reading settings (Chữ / Nền / Tự cuộn): the chosen tab, the auto-scroll
   button, speeds and switch used the old lavender; now the reader's own
   accent (--raccent: seal red on light/sepia, gilt at night) */
.aa-tabs button.on { background: color-mix(in srgb, var(--raccent) 16%, var(--rpanel)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--raccent) 45%, transparent) !important; color: var(--rink) !important; }
.auto-scroll-toggle { border-color: color-mix(in srgb, var(--raccent) 50%, var(--rline)) !important; background: color-mix(in srgb, var(--raccent) 12%, transparent) !important; }
.auto-scroll-toggle.on { box-shadow: none !important; background: color-mix(in srgb, var(--raccent) 22%, transparent) !important; }
.auto-speed.on { border-color: color-mix(in srgb, var(--raccent) 55%, var(--rline)) !important; background: color-mix(in srgb, var(--raccent) 14%, transparent) !important; box-shadow: none !important; }
.auto-next input:checked + i { background: color-mix(in srgb, var(--raccent) 30%, transparent) !important; border-color: color-mix(in srgb, var(--raccent) 60%, var(--rline)) !important; }
.auto-next input:checked + i::after { background: var(--raccent) !important; box-shadow: none !important; }
.auto-scroll-float { border-color: color-mix(in srgb, var(--raccent) 50%, var(--rline)) !important; box-shadow: 0 8px 24px rgba(40, 25, 10, .18) !important; }

/* member card sleeve: the stitching stopped under the thumb cut (it ran
   straight across the notch) */
#mhScope .mh-pass::after { z-index: 0; }
#mhScope .mh-pass::before { z-index: 2; }

/* ---- Nhật ký bình luận, phones and upright tablets: the paper of the PC
   version. The numbers, the sort and "Kệ đang bàn" sit on one catalogue
   slip (the sort as kraft index tabs on its top edge, the numbers as a
   small register, the shelf on a wooden plank); "Bảng vàng tuần này" is a
   card taped on, a little askew; every sheet casts a soft shadow on the
   desk. PC / iPad landscape are unchanged. ---- */
@media (max-width: 1099.98px) and (orientation: portrait), (max-width: 1023.98px) {
  /* the slip */
  #clScope #tin-hieu .cl-left {
    display: flex; flex-direction: column; gap: 14px; position: relative; min-width: 0; max-width: 100%; box-sizing: border-box; margin: 44px 0 4px; padding: 16px 16px 6px; border-radius: 3px;
    color: var(--nb-ink);
    background:
      repeating-linear-gradient(180deg, transparent 0 27px, rgba(70, 95, 140, .08) 27px 28px),
      linear-gradient(180deg, #fbf6e8, #f1e6cc);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(120, 90, 50, .16), 0 18px 30px -18px rgba(0, 0, 0, .55);
    transform: rotate(-.4deg);
  }
  #clScope #tin-hieu .cl-left > .cl-tools { display: contents; }
  /* the sort: kraft tabs standing on the slip's top edge */
  #clScope #tin-hieu .cl-left .cl-sort {
    order: -1; display: flex; gap: 3px; margin: -54px -6px 0; padding: 0 2px; border: 0; overflow-x: auto; scrollbar-width: none;
  }
  #clScope #tin-hieu .cl-left .cl-sort .sig-tab {
    flex: none; padding: .62rem .8rem .55rem; border: 1px solid rgba(110, 75, 35, .3); border-bottom: 0; border-radius: 6px 6px 0 0;
    color: #4a3520; background: linear-gradient(180deg, #d9c194, #c9ab78); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
    font: 700 .6rem/1 "JetBrains Mono", monospace; letter-spacing: .1em;
  }
  #clScope #tin-hieu .cl-left .cl-sort .sig-tab.on { color: var(--nb-seal); background: #fbf6e8; border-color: rgba(155, 44, 37, .4); padding-top: .72rem; }
  #clScope #tin-hieu .cl-left .cl-sort .sig-tab.on::after { content: none; }
  /* the numbers: a small register */
  #clScope #tin-hieu .cl-left .cl-pulse {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 4px 0 12px; border-bottom: 1px solid rgba(155, 44, 37, .4);
  }
  #clScope #tin-hieu .cl-left .cl-pulse > i, #clScope #tin-hieu .cl-left .cl-pulse .cl-pulse-sep { display: none; }
  #clScope #tin-hieu .cl-left .cl-pulse .cl-pulse-it {
    display: grid; justify-items: center; gap: 4px; text-align: center; color: var(--nb-ink-3);
    font: 700 .5rem/1.3 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase;
  }
  #clScope #tin-hieu .cl-left .cl-pulse .cl-pulse-it + .cl-pulse-it { border-left: 1px dashed rgba(109, 95, 77, .35); }
  #clScope #tin-hieu .cl-left .cl-pulse .cl-pulse-it b { color: var(--nb-ink); font: 600 1.9rem/1 "Cormorant Garamond", Georgia, serif; letter-spacing: 0; }
  /* the shelf on its plank */
  #clScope #tin-hieu .cl-left .cl-shelf { position: relative; min-width: 0; }
  #clScope #tin-hieu .cl-center { min-width: 0; }
  #clScope #tin-hieu .cl-left .cl-label { color: var(--nb-seal); }
  #clScope #tin-hieu .cl-left .cl-stories { padding: 2px 2px 16px; }
  #clScope #tin-hieu .cl-left .cl-shelf::after {
    content: ""; position: absolute; left: -16px; right: -16px; top: calc(1.4rem + 6px + 58px + 4px); height: 10px; pointer-events: none;
    background: linear-gradient(180deg, #8a5d36, #6b4527 55%, #4f321c); box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 6px 9px -4px rgba(30, 18, 8, .5);
  }
  #clScope #tin-hieu .cl-left .cl-index { position: relative; z-index: 1; margin-top: 4px; }
  /* the book: a soft shadow on the desk, a hair the other way */
  #clScope #tin-hieu .cl-center { display: block; transform: rotate(.25deg); }
  /* the honour roll: a card taped on, a little askew */
  #clScope #tin-hieu .cl-honor { transform: rotate(-.8deg); margin-top: 22px; overflow: visible; }
  #clScope #tin-hieu .cl-honor::before, #clScope #tin-hieu .cl-honor::after {
    content: ""; position: absolute; top: -9px; width: 64px; height: 20px; background: rgba(222, 202, 160, .82); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); pointer-events: none;
  }
  #clScope #tin-hieu .cl-honor::before { left: 14px; transform: rotate(-6deg); }
  #clScope #tin-hieu .cl-honor::after { right: 14px; transform: rotate(5deg); }
  #clScope #tin-hieu .cl-honor ol { padding-top: 4px; }
  #clScope #tin-hieu .cl-honor li { padding-top: 12px; }
  #clScope #tin-hieu .cl-honor .sig-ava { box-shadow: 0 0 0 2px #fbf6e8, 0 0 0 3.5px #c9a24a, 0 4px 8px -4px rgba(0, 0, 0, .5); }
  #clScope #tin-hieu .cl-honor-seal { top: 0; right: -4px; transform: rotate(8deg); background: #fbf6e8; }
}
/* Nhật ký bình luận, upright tablets: the slip's tabs and numbers scaled to
   the wider page */
@media (min-width: 700px) and (max-width: 1099.98px) and (orientation: portrait), (min-width: 700px) and (max-width: 1023.98px) {
  #clScope #tin-hieu .cl-left { padding: 22px 24px 8px; margin-top: 54px; }
  #clScope #tin-hieu .cl-left .cl-sort { margin-top: -66px; }
  #clScope #tin-hieu .cl-left .cl-sort .sig-tab { padding: .8rem 1.1rem .7rem; font-size: .72rem; }
  #clScope #tin-hieu .cl-left .cl-sort .sig-tab.on { padding-top: .92rem; }
  #clScope #tin-hieu .cl-left .cl-pulse .cl-pulse-it { font-size: .6rem; }
  #clScope #tin-hieu .cl-left .cl-pulse .cl-pulse-it b { font-size: 2.6rem; }
  #clScope #tin-hieu .cl-left .cl-label, #clScope #tin-hieu .cl-honor h3 { font-size: .7rem; }
  #clScope #tin-hieu .cl-book { width: 200px; }
  #clScope #tin-hieu .cl-book b { font-size: 1.08rem; }
  #clScope #tin-hieu .cl-left .cl-shelf::after { left: -24px; right: -24px; }
}
/* the plank follows the slips' real height (cards with a two-line title
   are taller): drawn as the shelf row's own bottom edge */
@media (max-width: 1099.98px) and (orientation: portrait), (max-width: 1023.98px) {
  #clScope #tin-hieu .cl-left .cl-shelf::after { content: none; }
  #clScope #tin-hieu .cl-left .cl-stories {
    margin: 0 -16px; padding: 2px 16px 18px; scroll-padding-inline: 16px; align-items: flex-start;
    background: linear-gradient(180deg, #8a5d36, #6b4527 55%, #4f321c) 0 calc(100% - 4px) / 100% 10px no-repeat;
  }
}
@media (min-width: 700px) and (max-width: 1099.98px) and (orientation: portrait), (min-width: 700px) and (max-width: 1023.98px) {
  #clScope #tin-hieu .cl-left .cl-stories { margin: 0 -24px; padding: 2px 24px 18px; scroll-padding-inline: 24px; }
}

/* ---- Notifications: pinned notices + "Xóa đã đọc" (ported from the live
   site) in the library palette — a gilt pin on the dark desk, a seal-red
   pin on paper, the same fonts as the other notification cards. ---- */
.vc-notif-popover header button[data-notif-clear-read], .vc-notif-hero-actions [data-notif-clear-read] {
  font: 700 .6rem/1.2 "JetBrains Mono", monospace !important; letter-spacing: .1em; text-transform: uppercase;
}
.vc-notif-popover header button[data-notif-clear-read] { color: #d8a89a !important; }
.vc-notif-pin-badge { border-radius: 2px !important; font: 700 .5rem/1.4 "JetBrains Mono", monospace !important; letter-spacing: .12em; }
#app:not([data-theme="light"]) .vc-notif-pinned, body:not(:has(#app[data-theme="light"])) .vc-notif-popover .vc-notif-pinned {
  border-color: rgba(216, 178, 90, .38) !important; border-left: 3px solid #d8b25a !important;
  background: rgba(216, 178, 90, .08) !important; box-shadow: none !important;
}
#app:not([data-theme="light"]) .vc-notif-pinned .vc-pin-icon, .vc-notif-popover .vc-notif-pinned .vc-pin-icon { color: #d8b25a !important; border-color: rgba(216, 178, 90, .35) !important; background: rgba(216, 178, 90, .1) !important; }
#app:not([data-theme="light"]) .vc-notif-pin-badge, .vc-notif-popover .vc-notif-pin-badge { background: rgba(216, 178, 90, .16) !important; color: #d8b25a !important; }
#app[data-theme="light"] .vc-notif-pinned, body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-pinned {
  border-color: rgba(155, 44, 37, .28) !important; border-left: 3px solid #9b2c25 !important;
  background: linear-gradient(105deg, rgba(216, 178, 90, .16), #fbf6e8 55%) !important; box-shadow: none !important;
}
#app[data-theme="light"] .vc-notif-pinned .vc-pin-icon, body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-pinned .vc-pin-icon { color: #9b2c25 !important; border-color: rgba(155, 44, 37, .3) !important; background: rgba(155, 44, 37, .06) !important; }
#app[data-theme="light"] .vc-notif-pin-badge, body:has(#app[data-theme="light"]) .vc-notif-popover .vc-notif-pin-badge { background: rgba(155, 44, 37, .1) !important; color: #9b2c25 !important; }
body:has(#app[data-theme="light"]) .vc-notif-popover header button[data-notif-clear-read] { color: #7a3a2a !important; }

/* ---- Bell popover: it could not scroll. The panel is a flex column with
   overflow hidden, and the list (a flex item without min-height: 0) never
   shrank, so whatever did not fit was cut off; the pinned block had no
   real height cap either (a % of a panel with no fixed height). Now the
   title bar stays put and everything under it — pinned notices, latest
   notifications, "Xem tất cả" — scrolls as one. ---- */
.vc-notif-popover { overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.vc-notif-popover > header { position: sticky; top: 0; z-index: 2; flex: none; background: inherit; }
.vc-notif-popover .vc-notif-pinned-list, .vc-notif-popover .vc-notif-pop-list { flex: none !important; max-height: none !important; overflow: visible !important; }
.vc-notif-popover .vc-notif-view-all { flex: none; }
@supports (height: 100dvh) {
  @media (max-width: 680px) { .vc-notif-popover { max-height: calc(100dvh - 78px) !important; } }
}

/* ---- Notification opened (detail sheet), redone: a plain letter on
   paper. The boxed kind icon and the red rule running across under it are
   gone; the close button stays reachable at the top while a long notice
   scrolls; a small seal kicker, the title, the text, then the date. ---- */
.vc-notif-detail {
  padding: 0 1.4rem 1.3rem !important;
  background: linear-gradient(180deg, #fbf6e8, #f3e9d3) !important;
}
.vc-notif-detail > header {
  position: sticky; top: 0; z-index: 2;
  display: flex !important; justify-content: flex-end !important;
  margin: 0 -1.4rem; padding: .7rem .7rem .2rem;
  background: linear-gradient(180deg, #fbf6e8 72%, rgba(251, 246, 232, 0));
}
.vc-notif-detail > header .vc-notif-icon { display: none !important; }
.vc-notif-detail > header button {
  width: 36px !important; height: 36px !important; border-radius: 50% !important;
  display: grid; place-items: center; font-size: 1.35rem !important; line-height: 1;
  border: 1px solid rgba(43, 34, 25, .16) !important; background: rgba(255, 255, 255, .45) !important;
}
.vc-notif-detail > small {
  display: flex !important; align-items: center; gap: .55rem; margin-top: 0 !important;
}
.vc-notif-detail > small::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #9b2c25; box-shadow: 0 0 0 3px rgba(155, 44, 37, .12); }
.vc-notif-detail h2 { margin: .45rem 0 1rem !important; text-wrap: balance; }
.vc-notif-detail-body {
  border: 0 !important; padding: 0 !important;
  font: 400 1rem/1.75 "Be Vietnam Pro", system-ui, sans-serif !important; color: #3d3226 !important;
}
.vc-notif-detail > time {
  margin-top: 1.1rem !important; color: #8a7a62 !important;
  font: 600 .6rem/1.4 "JetBrains Mono", monospace !important; letter-spacing: .1em; text-transform: uppercase;
}
.vc-notif-detail > footer:empty { display: none !important; }

/* ---- Upright member cards (Góc của tôi, Xưởng Thẻ) on a picture skin:
   the picture keeps its own colours. The dark band laid over the top and
   bottom of the card (and the grey film over the middle) is gone; the
   wordmark, tier, name and number carry a soft shadow of their own so
   they still read on any picture. ---- */
.mh-lx.mh-skin--img::after, .mh-lx.mh-skin--img.mh-cc--light::after { background: none !important; }
.mh-lx.mh-skin--img .mh-lx-brand, .mh-lx.mh-skin--img .mh-cc-tier, .mh-lx.mh-skin--img .mh-lx-id, .mh-lx.mh-skin--img .mh-lx-net {
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55)) drop-shadow(0 0 7px rgba(0, 0, 0, .3));
}
.mh-lx.mh-skin--img.mh-cc--light .mh-lx-brand, .mh-lx.mh-skin--img.mh-cc--light .mh-cc-tier, .mh-lx.mh-skin--img.mh-cc--light .mh-lx-id, .mh-lx.mh-skin--img.mh-cc--light .mh-lx-net {
  filter: drop-shadow(0 1px 1.5px rgba(255, 255, 255, .7)) drop-shadow(0 0 7px rgba(255, 255, 255, .45));
}

/* ---- Picture skins, ink by picture (js/card-ink-v1.js): on a pale
   picture the top row (lx-ink-top) and/or the bottom row (lx-ink-foot)
   turn to dark ink with a light halo — the same ink the pale built-in
   skins use; on a dark picture the type stays white. ---- */
.mh-lx.lx-ink-top .mh-lx-top .mh-cc-mark { filter: brightness(0); opacity: .85; }
.mh-lx.lx-ink-top .mh-lx-top .mh-cc-word:not(.mh-cc-word--ink) { display: none; }
.mh-lx.lx-ink-top .mh-lx-top .mh-cc-word--ink { display: block; opacity: .85; }
.mh-lx.mh-skin--img.lx-ink-top .mh-lx-brand, .mh-lx.mh-skin--img.lx-ink-top .mh-cc-tier,
.mh-lx.mh-skin--img.lx-ink-foot .mh-lx-id, .mh-lx.mh-skin--img.lx-ink-foot .mh-lx-net {
  filter: drop-shadow(0 1px 1.5px rgba(255, 255, 255, .75)) drop-shadow(0 0 7px rgba(255, 255, 255, .5));
}
.mh-lx.lx-ink-top .mh-cc-tier b { color: #2a2116; }
.mh-lx.lx-ink-top.mh-cc--silver .mh-cc-tier b {
  background-image: linear-gradient(100deg,#2f3842 0%,#5d6976 14%,#2f3842 26%,#7d8996 38%,#e9eef3 44%,#ffffff 46%,#e9eef3 48%,#7d8996 54%,#2f3842 66%,#5d6976 82%,#2f3842 100%);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.85)) drop-shadow(0 -.5px 0 rgba(10,16,22,.45));
}
.mh-lx.lx-ink-top.mh-cc--gold .mh-cc-tier b {
  background-image: linear-gradient(100deg,#4f3103 0%,#8a5c0c 14%,#4f3103 26%,#a8761c 38%,#ffe9a0 44%,#fffbe8 46%,#ffe9a0 48%,#a8761c 54%,#4f3103 66%,#8a5c0c 82%,#4f3103 100%);
  filter: drop-shadow(0 1px 0 rgba(255,248,220,.85)) drop-shadow(0 -.5px 0 rgba(60,34,2,.5));
}
.mh-lx.lx-ink-top.mh-cc--premium .mh-cc-tier b {
  background-image: linear-gradient(100deg,#0f6f7d 0%,#2a3d8f 10%,#0e8ea0 20%,#6b3fb8 30%,#b0336f 40%,#0f6f7d 50%,#0e8ea0 60%,#2a3d8f 70%,#6b3fb8 80%,#b0336f 90%,#0f6f7d 100%);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.75));
}
.mh-lx.lx-ink-top.mh-cc--vip .mh-cc-tier b {
  background-image: linear-gradient(100deg,#141826 0%,#3a4560 10%,#141826 18%,#d0257a 23%,#1f7fd1 27%,#16924a 31%,#b7820d 35%,#141826 42%,#3a4560 52%,#141826 62%,#d0257a 73%,#1f7fd1 77%,#16924a 81%,#b7820d 85%,#141826 92%,#3a4560 100%);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.7));
}
.mh-lx.lx-ink-top.mh-cc--vip .mh-cc-tier::before, .mh-lx.lx-ink-top.mh-cc--vip .mh-cc-tier::after { filter: drop-shadow(0 0 2px rgba(31,127,209,.9)) drop-shadow(0 0 1px rgba(0,0,0,.6)); }
.mh-lx.lx-ink-top.mh-cc--premium .mh-cc-tier::after { filter: drop-shadow(0 0 2px rgba(14,142,160,.9)) drop-shadow(0 0 1px rgba(0,0,0,.5)); }
.mh-lx.lx-ink-top.mh-cc--luxury .mh-cc-tier b {
  background-image: linear-gradient(100deg,#5e420c 0%,#9c7426 14%,#5e420c 26%,#b8892e 38%,#f6e3a1 44%,#fff6d6 46%,#f6e3a1 48%,#b8892e 54%,#5e420c 66%,#9c7426 82%,#5e420c 100%);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.8));
}
.mh-lx.lx-ink-foot .mh-lx-foot { --cc-ink: #2a2116; --cc-sub: rgba(42, 33, 22, .72); }
.mh-lx.lx-ink-foot .mh-lx-name { text-shadow: 0 1px 0 rgba(255, 255, 255, .6) !important; }
.mh-lx.lx-ink-foot .mh-lx-digits { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6)) !important; }