/* Redesign v2 "Mực Đêm Ngà" (journey/13-brand-kit.md BK-32, 02/11/2026). Loaded LAST by Base.astro so it wins over the theme.
   Rules: bg #0A0A0A · ink #EDE6D6 · muted #9A9385 · Newsreader (names, titles, prose) + Inter Tight 500/600 (spaced caps labels).
   One solid ivory button per screen (.v2-btn-solid); every other button is outlined or text. Đỏ Ấn #B3302A only on pay CTAs. */
:root {
  --v2-bg: #0A0A0A;
  --v2-ink: #EDE6D6;
  --v2-muted: #9A9385;
  --v2-soft: #C9C2B3;
  --v2-rule: rgba(237, 230, 214, .8);
  --v2-line: rgba(237, 230, 214, .14);
  --v2-seal: #B3302A;
  --v2-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --v2-sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --v2-ease: cubic-bezier(.2, .8, .2, 1);
  --gh-font-body: var(--v2-sans);
  --gh-font-heading: var(--v2-serif);
  --font-sans: var(--v2-sans);
  --font-serif: var(--v2-serif);
  --dct-font: var(--v2-sans);
  --dct-bg: var(--v2-bg);
  --dct-fg: var(--v2-ink);
  --dca-font: var(--v2-sans);
  --dca-bg: var(--v2-bg);
  --dca-ink: var(--v2-ink);
  --dca-muted: var(--v2-muted);
  --das-font: var(--v2-sans);
}
html, body { background: var(--v2-bg); color: var(--v2-ink); }
body { font-family: var(--v2-sans); }
::selection { background: var(--v2-ink); color: var(--v2-bg); }

/* Shared atoms */
.v2-lbl { font: 600 10.5px/1.2 var(--v2-sans); letter-spacing: .1em; text-transform: uppercase; }
.v2-muted { color: var(--v2-muted); }
.v2-serif { font-family: var(--v2-serif); font-weight: 400; }
.v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px;
  border: 1px solid var(--v2-rule); background: transparent; color: var(--v2-ink); font: 600 11px/1 var(--v2-sans);
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: 0; }
.v2-btn:hover { background: rgba(237, 230, 214, .08); }
.v2-btn-solid { background: var(--v2-ink); color: var(--v2-bg); border-color: var(--v2-ink); }
.v2-btn-solid:hover { background: #F5F0E4; }
.v2-btn-seal { background: var(--v2-seal); color: var(--v2-ink); border-color: var(--v2-seal); }
/* Pay moments (app IAP sheet + /mo-khoa/): Đỏ Ấn, one per screen */
.dct-iap [data-pkg].is-primary, .dct-iap .dct-iap-buy, .pp-buy-btn { background: var(--v2-seal) !important; color: var(--v2-ink) !important; border-color: var(--v2-seal) !important; }

/* Titles in serif across the theme */
.dct h1, .dct h2, .dct-list-head h1, .dca-title, .das-title, .ep-title, .post-title, .dct-lib-h1 { font-family: var(--v2-serif) !important; font-weight: 400 !important; letter-spacing: -.01em; }
.dct-row-title { font-family: var(--v2-serif); font-weight: 400; font-size: 17px; }
.dct-row-author, .dct-row-tag, .dct-row-min { font-family: var(--v2-sans); letter-spacing: .06em; color: var(--v2-muted); }

/* ── App tab bar: Kệ · Tìm · Tôi (labels only, spaced caps) ── */
.dct-tabbar { background: var(--v2-bg) !important; border-top: 1px solid var(--v2-line) !important; }
.dct-tab { color: var(--v2-muted) !important; font: 600 11px/1 var(--v2-sans) !important; letter-spacing: .14em; text-transform: uppercase; gap: 6px; }
.dct-tab.is-active { color: var(--v2-ink) !important; }
.dct-tab .v2-tab-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0; }
.dct-tab.is-active .v2-tab-dot { opacity: 1; }

/* ── Home: 3D shelf hero ── */
.ke { position: relative; color: var(--v2-ink); background: var(--v2-bg); padding-bottom: 8px; overflow: hidden;
  --H: 400px; --d: 266px; --ws: 68px; }
.ke-top { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px 10px; text-align: center; }
.ke-logo { font: 400 26px/1 var(--v2-serif); letter-spacing: .1em; padding-left: .1em; color: var(--v2-ink); text-decoration: none; }
.ke-slogan { display: flex; align-items: center; gap: 10px; font: 600 9px/1 var(--v2-sans); letter-spacing: .32em; padding-left: .32em; color: var(--v2-muted); }
.ke-slogan i { width: 18px; height: 1px; background: var(--v2-muted); }
.ke-tabs { display: flex; justify-content: safe center; padding: 14px 16px 0; overflow-x: auto; scrollbar-width: none; }
.ke-tabs::-webkit-scrollbar { display: none; }
.ke-tab { flex: none; height: 26px; padding: 0 12px; margin-left: -1px; border: 1px solid var(--v2-rule); background: transparent; color: var(--v2-ink);
  font: 600 10.5px/1 var(--v2-sans); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background .3s, color .3s; }
.ke-tab.on { background: var(--v2-ink); color: var(--v2-bg); }
.ke-stage { position: relative; height: calc(var(--H) * 1.32); touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.ke-shelf { position: absolute; inset: 0; perspective: 2000px; perspective-origin: 50% 50%; }
.ke-board { position: absolute; left: 0; right: 0; top: calc(50% + var(--H) / 2 + 2px); height: 1px; background: rgba(237, 230, 214, .14); }
.ke-tape { position: absolute; left: 50%; top: 50%; width: var(--ws); height: var(--H); margin-left: calc(var(--ws) / -2); margin-top: calc(var(--H) / -2);
  transform-style: preserve-3d; will-change: transform; cursor: pointer; }
.ke-face { position: absolute; top: 0; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ke-face::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--sh, 0); pointer-events: none; }
.ke-spine { left: 0; width: var(--ws); transform: translateZ(calc(var(--d) / 2)); background: var(--bg); color: var(--fg); border-radius: 2px;
  display: flex; flex-direction: column; align-items: center; padding: calc(var(--ws) * .16) 0 calc(var(--ws) * .2); overflow: hidden;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.14), inset -5px 0 0 rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.6); }
.ke-mark { width: calc(var(--ws) * .42); height: calc(var(--ws) * .42); flex: none; display: block; }
.ke-spine.ink-dark .ke-mark { filter: invert(1); }
.ke-sp-title { flex: 1; writing-mode: vertical-rl; font-family: var(--v2-serif); font-weight: 400; line-height: 1.05; text-align: center;
  overflow: hidden; padding: 10px 0; display: flex; align-items: center; }
.ke-sp-auth { writing-mode: vertical-rl; font: 600 calc(var(--ws) * .13)/1 var(--v2-sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; max-height: 30%; overflow: hidden; }
.ke-cover { left: calc((var(--ws) - var(--d)) / 2); width: var(--d); transform: rotateY(90deg) translateZ(calc(var(--ws) / 2)); background: #5E5A52;
  border-radius: 2px; box-shadow: 0 46px 80px -26px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.07); }
.ke-cover img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; border-radius: 2px; }
.ke-play { position: absolute; opacity: 0; transition: opacity .3s; left: calc(var(--d) * -.06); bottom: calc(var(--d) * .1); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--v2-ink);
  background: var(--v2-bg); color: var(--v2-ink); display: grid; place-items: center; z-index: 2; }
.ke-play svg { width: 14px; height: 14px; margin-left: 2px; }
.ke-cover .dct-lock { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; padding: 6px; box-sizing: border-box; border-radius: 50%;
  background: rgba(10,10,10,.82); color: var(--v2-ink); z-index: 2; }
.ke-cap { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 12px; max-width: 980px; margin: 0 auto; padding: 4px 16px 0; }
.ke-arrow { width: 44px; height: 44px; border: 0; background: transparent; color: var(--v2-ink); display: grid; place-items: center; cursor: pointer; }
.ke-cap-txt { text-align: center; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ke-cl { display: grid; overflow: hidden; max-width: 100%; padding: .12em 0 .06em; }
.ke-cl > span { grid-area: 1/1; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; will-change: transform; }
.ke-cl-title { font: 400 34px/1.12 var(--v2-serif); letter-spacing: -.01em; margin: 0; }
.ke-cl-sub { font: 500 10.5px/1.3 var(--v2-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--v2-ink); }
.ke-cl-meta { font: 500 11px/1.3 var(--v2-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--v2-muted); }
.ke-cta { display: flex; justify-content: center; padding: 18px 16px 4px; }
/* In-app guest home: the one CTA under the shelf, full width with 20px gutters (#dct-optin pads 16px, +4px here) */
html.in-app #dct-optin .ke-cta { padding: 28px 4px 28px; }
.ke-cta .ke-signin { width: 100%; min-height: 52px; font-size: 11.5px; letter-spacing: .14em; }
.ke-cta .ke-signin:hover { background: #C23A33; border-color: #C23A33; }
/* Custom cursor (fine pointers only, 3D mode) */
.ke-cur { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--v2-ink); color: var(--v2-bg); display: none; place-items: center; opacity: 0;
  transition: width .35s var(--v2-ease), height .35s var(--v2-ease), margin .35s var(--v2-ease), opacity .2s; }
.ke-cur span { font: 600 10px/1.3 var(--v2-sans); letter-spacing: .1em; text-align: center; transform: scale(0); transition: transform .3s var(--v2-ease); }
.ke.has-cur .ke-cur { display: grid; }
.ke-cur.on { opacity: 1; }
.ke-cur.cv { width: 100px; height: 100px; margin: -50px 0 0 -50px; }
.ke-cur.cv span { transform: scale(1); }
@media (pointer: fine) { .ke.has-cur .ke-stage, .ke.has-cur .ke-stage * { cursor: none !important; } }

/* Flat fallback (prefers-reduced-motion, low-end devices, no JS): a plain horizontal row of covers */
.ke-flat { display: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 22px 16px 10px; scrollbar-width: none; }
.ke-flat::-webkit-scrollbar { display: none; }
.ke-flat-item { flex: none; width: 132px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; text-align: left;
  background: none; border: 0; padding: 0; color: var(--v2-ink); cursor: pointer; }
.ke-flat-cover { position: relative; width: 100%; aspect-ratio: 2 / 3; background: #5E5A52; border-radius: 2px; overflow: hidden; }
.ke-flat-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ke-flat-cover .dct-lock { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: rgba(10,10,10,.82); color: var(--v2-ink); }
.ke-flat-t { font: 400 15px/1.2 var(--v2-serif); }
.ke-flat-a { font: 600 9.5px/1.2 var(--v2-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--v2-muted); }
.ke.is-flat .ke-flat { display: flex; }
.ke.is-flat .ke-stage, .ke.is-flat .ke-cap, .ke.is-flat .ke-tabs { display: none; }
@media (min-width: 768px) { .ke-flat { justify-content: safe center; } .ke-flat-item { width: 160px; } }
@media (max-width: 767px) {
  .ke-top { padding-top: 18px; }
  .ke-logo { font-size: 21px; }
  .ke-tabs { justify-content: flex-start; padding: 12px 16px 0; }
  .ke-cl-title { font-size: 25px; }
  .ke-cap { grid-template-columns: 36px 1fr 36px; gap: 6px; padding: 0 8px; }
  .ke-arrow { width: 36px; height: 36px; }
  .ke-play { width: 40px; height: 40px; }
}
html.in-app .ke-web-only { display: none !important; }

/* Home sections under the hero (member + guest) */
#dct-home .dct-screen { background: var(--v2-bg); }
#dct-home .dct-sec h3, #dct-home .dct-sec-head h3 { font: 600 10.5px/1.2 var(--v2-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--v2-muted); }
#dct-home .dct-btn-sm { border: 1px solid var(--v2-rule); background: transparent; color: var(--v2-ink); border-radius: 0; font: 600 11px/1 var(--v2-sans); letter-spacing: .1em; text-transform: uppercase; }

/* ── Search (/tim/) ── */
.v2-tim { max-width: 720px; margin: 0 auto; padding: 28px 16px 40px; color: var(--v2-ink); }
.v2-tim h1 { margin: 0; font: 400 34px/1.1 var(--v2-serif); letter-spacing: -.01em; }
.v2-tim-box { margin-top: 18px; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; border: 1px solid var(--v2-rule); }
.v2-tim-box svg { flex: none; color: var(--v2-muted); }
.v2-tim-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--v2-ink); font: 400 18px/1 var(--v2-serif); -webkit-appearance: none; appearance: none; }
.v2-tim-box input::placeholder { color: #6F6A60; }
.v2-tim-box input::-webkit-search-cancel-button { display: none; }
.v2-tim-x { flex: none; width: 32px; height: 32px; border: 0; background: transparent; color: var(--v2-muted); display: grid; place-items: center; cursor: pointer; }
.v2-tim-sec { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.v2-tim-sec > .v2-lbl { color: var(--v2-muted); }
.v2-tim-recent { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-tim-recent button { height: 30px; padding: 0 12px; border: 1px solid var(--v2-line); background: transparent; color: var(--v2-ink); font: 400 14px/1 var(--v2-serif); cursor: pointer; }
.v2-tim-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .v2-tim-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-tim-cat { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 76px; padding: 12px; border: 1px solid var(--v2-line);
  color: var(--v2-ink); text-decoration: none; }
.v2-tim-cat:hover { border-color: var(--v2-rule); }
.v2-tim-cat b { font: 400 18px/1.1 var(--v2-serif); }
.v2-tim-cat span { font: 600 9.5px/1 var(--v2-sans); letter-spacing: .1em; color: var(--v2-muted); }
.v2-tim-status { margin-top: 18px; display: flex; justify-content: space-between; gap: 12px; font: 600 10px/1.2 var(--v2-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--v2-muted); }
.v2-tim-status:empty { display: none; }
.v2-tim .dct-tim-rows { margin-top: 6px; }
.v2-tim-none { margin-top: 34px; text-align: center; }
.v2-tim-none h2 { margin: 0; font: 400 24px/1.2 var(--v2-serif); }
.v2-tim-none p { margin: 10px auto 0; max-width: 360px; font: 400 15.5px/1.45 var(--v2-serif); color: var(--v2-soft); }
.v2-tim-more { margin-top: 18px; display: flex; justify-content: center; }
.in-app .v2-tim { padding-top: 18px; }

/* ── Tôi (/toi/) ── */
.v2-toi { max-width: 640px; margin: 0 auto; padding: 28px 16px 40px; color: var(--v2-ink); }
.v2-toi-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.v2-toi-head h1 { margin: 0; font: 400 34px/1.1 var(--v2-serif); }
.v2-toi-email { font: 500 11px/1.2 var(--v2-sans); letter-spacing: .04em; color: var(--v2-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.v2-toi-plan { margin-top: 20px; padding: 14px 0; border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.v2-toi-plan .v2-lbl + span { display: block; margin-top: 5px; font: 500 11px/1.3 var(--v2-sans); letter-spacing: .04em; color: var(--v2-muted); }
.v2-toi-stats { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--v2-line); }
.v2-toi-stats div { padding: 12px 0; display: flex; flex-direction: column; gap: 4px; }
.v2-toi-stats div + div { padding-left: 16px; border-left: 1px solid var(--v2-line); }
.v2-toi-stats b { font: 400 30px/1 var(--v2-serif); }
.v2-toi-stats span { font: 600 9.5px/1 var(--v2-sans); letter-spacing: .1em; color: var(--v2-muted); }
.v2-toi-sec { margin-top: 22px; }
.v2-toi-sec > .v2-lbl { color: var(--v2-muted); display: block; margin-bottom: 4px; }
.v2-toi .dct-lib-sec { margin: 22px 0 0; }
.v2-toi .dct-lib-sec h2 { font: 600 10px/1.2 var(--v2-sans) !important; letter-spacing: .1em; color: var(--v2-muted); margin: 0 0 4px; }
.v2-toi .dct-lib-row { border-bottom: 1px solid var(--v2-line); }
.v2-toi .dct-lib-art { width: 32px; height: 48px; border-radius: 2px; }
.v2-toi .dct-lib-info b { font: 400 16px/1.25 var(--v2-serif); }
.v2-toi .dct-lib-info span { font: 500 10.5px/1.3 var(--v2-sans); letter-spacing: .06em; color: var(--v2-muted); }
.v2-toi .dct-lib-btn { border-radius: 0; border: 1px solid var(--v2-rule); color: var(--v2-ink); font: 600 10px/1 var(--v2-sans); letter-spacing: .1em; text-transform: uppercase; padding: 9px 12px; }
.v2-toi .dct-lib-btn.is-link { border: 0; text-decoration: none; color: var(--v2-muted); }
.v2-toi .dct-lib-empty { font: 400 15px/1.45 var(--v2-serif); color: var(--v2-soft); }
.v2-toi-done { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-top: 6px; }
.v2-toi-done::-webkit-scrollbar { display: none; }
.v2-toi-done a { flex: none; width: 50px; }
.v2-toi-done img { width: 50px; height: 75px; object-fit: cover; border-radius: 2px; display: block; background: #5E5A52; }
.v2-toi-rows { margin-top: 26px; display: flex; flex-direction: column; border-top: 1px solid var(--v2-line); }
.v2-toi-rows > * { display: flex; justify-content: space-between; align-items: center; min-height: 50px; padding: 0; border: 0; border-bottom: 1px solid var(--v2-line);
  background: none; color: var(--v2-ink); font: 600 11px/1 var(--v2-sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; text-align: left; width: 100%; }
.v2-toi-rows > * i { font-style: normal; color: var(--v2-muted); font-family: var(--v2-serif); font-size: 18px; }
.v2-toi-rows .is-danger { color: #D9826F; }
.v2-toi-guest { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.v2-toi-guest p { margin: 0; font: 400 16px/1.45 var(--v2-serif); color: var(--v2-soft); }
.v2-toi-legal { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 600 10px/1.2 var(--v2-sans); letter-spacing: .1em; text-transform: uppercase; }
.v2-toi-legal a { color: var(--v2-muted); text-decoration: none; }
.in-app .v2-toi { padding-top: 18px; }

/* "NGHE NGAY" on the one free web book (dct-app-sheet.js markFree; detail page static). Web only. */
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; border-radius: 1px; }

/* ── WebGate (install popup, #das; layout in AppSheet.astro) ── */
.das-panel { border-color: var(--v2-line) !important; }
.das-logo { font: 400 15px/1 var(--v2-serif) !important; letter-spacing: .1em !important; }
.das-title { font: 400 26px/1.18 var(--v2-serif) !important; }
.das-t2 { color: var(--v2-soft); }
.das-meta, .das-hint, .das-qr figcaption, .das-x, .das-note { font-family: var(--v2-sans) !important; }
.das-btn { font-family: var(--v2-sans) !important; }

@media (prefers-reduced-motion: reduce) {
  .ke *, .ke *::before, .ke *::after { transition-duration: 1ms !important; }
}

/* Covers on the dark page: placeholder ground = a spine colour (never near-black); real cover images get a 1px ivory hairline
   so dark covers do not sink into #0A0A0A (owner rule, 02/11/2026). Spines are never outlined. */
.ke-cover img, .ke-flat-cover img, .dct-row-cover img, .dct-cover img, .v2-toi-done img, .dct-lib-art, .ep-cover-wrap img {
  outline: 1px solid rgba(237, 230, 214, .14); outline-offset: -1px; }
.dct-row-cover, .dct-cover { background-color: #5E5A52; }

/* [hidden] must win over the display rules above */
.ke [hidden], .v2-tim [hidden], .v2-tim[hidden], .v2-toi [hidden], .das [hidden] { display: none !important; }
.ke-tape.on .ke-play { opacity: 1; }
.v2-toi .dct-lib-list { list-style: none; margin: 0; padding: 0; }
.v2-toi .dct-lib-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.v2-toi .dct-lib-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.v2-toi .dct-lib-info b, .v2-toi .dct-lib-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-toi .dct-lib-btn { flex: none; background: none; cursor: pointer; }
.v2-toi .dct-lib-empty { list-style: none; padding: 10px 0; }

/* Category tabs at phone width: start at the 16px gutter, scroll horizontally, keep a 16px tail */
@media (max-width: 767px) {
  .ke-tabs { justify-content: flex-start; padding-left: 16px; padding-right: 0; scroll-padding-left: 16px; }
  .ke-tabs::after { content: ""; flex: 0 0 16px; }
  .ke-tab:first-child { margin-left: 0; }
}

/* Home install-app block (components/HomeInstall.astro, 2026-11-03): the page's one solid button, right under the shelf hero.
   [data-inst] on the section = ios | android | desktop; only the matching [data-inst-for] child shows. */
#dct-install { max-width: 640px; margin: 8px auto 0; padding: 28px 0 32px; border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
#dct-install .v2-install-k { color: var(--v2-muted); margin-bottom: 14px; }
#dct-install .v2-install-t { margin: 0 0 10px; font: 400 32px/1.12 var(--v2-serif); letter-spacing: -.01em; color: var(--v2-ink); }
#dct-install .v2-install-s { margin: 0 0 24px; font: 400 17px/1.45 var(--v2-serif); color: var(--v2-soft); }
#dct-install .v2-install-go, #dct-install .v2-install-qr { display: none; }
#dct-install[data-inst="ios"] [data-inst-for="ios"], #dct-install[data-inst="android"] [data-inst-for="android"] { display: flex; }
#dct-install[data-inst="desktop"] [data-inst-for="desktop"] { display: flex; }
.v2-install-go { flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.v2-install-btn { width: 100%; max-width: 360px; min-height: 54px; font-size: 13px; letter-spacing: .16em; }
.v2-install-store { color: var(--v2-muted); }
.v2-install-soon { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 360px; min-height: 54px;
  border: 1px solid var(--v2-line); color: var(--v2-soft); font: 600 12px/1.2 var(--v2-sans); letter-spacing: .12em; text-transform: uppercase; }
#dct-install .v2-install-qr { margin: 0; flex-direction: column; align-items: center; gap: 12px; }
.v2-install-qr-img { width: 176px; height: 176px; }
.v2-install-qr-img svg { width: 100%; height: 100%; display: block; }
.v2-install-qr figcaption { color: var(--v2-muted); }
#dct-install .v2-install-hint { margin: 14px 0 0; font: 600 11px/1.4 var(--v2-sans); letter-spacing: .06em; color: var(--v2-soft); }
.v2-install-hint[hidden] { display: none; }
@media (min-width: 768px) { #dct-install .v2-install-t { font-size: 40px; } }

/* ═══ Đợt 2 ═══ */
/* Home guest screen (install block): 16px gutter at phone width (the screen already pads 20px) */
#dct-optin.dct-screen { padding-left: 16px; padding-right: 16px; }

/* ── Book detail (canvas Detail.dc.html) ── */
.v2-detail.ep-header { max-width: 1200px; margin: 0 auto; padding: 36px 16px 8px; display: grid; grid-template-columns: 1fr; gap: 26px; text-align: left; }
.v2-detail .v2-detail-text { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.v2-detail .ep-kicker { margin: 0; color: var(--v2-muted); font-weight: 500; }
.v2-detail .ep-title { margin: 0; font: 400 clamp(38px, 5.4vw, 84px)/1.04 var(--v2-serif) !important; letter-spacing: -.02em; color: var(--v2-ink); }
.v2-detail .ep-title em { font-style: normal; }
.v2-detail .ep-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; color: var(--v2-muted); justify-content: flex-start; }
.v2-detail-excerpt { margin: 0; font: 400 19px/1.5 var(--v2-serif); color: var(--v2-soft); }
.v2-detail-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
header.v2-detail .ep-play.v2-btn { width: 100%; max-width: 480px; border-radius: 0; margin: 0 !important; align-self: flex-start; }
.v2-detail .v2-detail-art { order: -1; margin: 0; display: flex; justify-content: center; box-shadow: none; background: none; }
.v2-detail .ep-cover-img { width: min(58vw, 300px); height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; box-shadow: 0 40px 70px -30px rgba(0,0,0,.95); }
@media (min-width: 900px) {
  .v2-detail.ep-header { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 5vw; padding: 64px 32px 24px; min-height: min(78vh, 760px); }
  .v2-detail .v2-detail-art { order: 0; }
  .v2-detail .ep-cover-img { width: min(100%, 440px); }
}
.post-template .ep-body, .post-template .ep-post-footer { max-width: 640px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.post-template .ep-label, .post-template .ep-foot-label { font: 600 10.5px/1.2 var(--v2-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--v2-muted); }

/* ── Player v2: speed pills, sleep + download tools, sheet ── */
/* Speed = one segmented control (owner 03/11/2026): 4 equal segments, 40px tall, one 1px frame, square corners, centred
   under the transport with 20px gutters; same language as .v2-tim-sort. Each segment's tap area is 44px (::after). */
.gp-popup-speed-wrap { align-self: stretch; padding: 0 20px; }
.gp-popup-speed-pills { display: flex !important; flex-wrap: nowrap !important; gap: 0 !important; width: 100%; max-width: 360px; margin: 0 auto;
  box-sizing: border-box; border: 1px solid rgba(237,230,214,.35) !important; }
.gp-popup-speed-pills [data-speed] { position: relative; flex: 1 1 0; min-width: 0; height: 40px; margin: 0; padding: 0 !important;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  border: 0 !important; border-left: 1px solid rgba(237,230,214,.35) !important; border-radius: 0 !important;
  background: transparent !important; color: #C9C2B3 !important;
  font: 600 13px/1 var(--v2-sans) !important; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.gp-popup-speed-pills [data-speed]:first-child { border-left: 0 !important; }
.gp-popup-speed-pills [data-speed]::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
.gp-popup-speed-pills [data-speed][aria-checked="true"], .gp-popup-speed-pills [data-speed].active { background: #EDE6D6 !important; color: #0A0A0A !important; }
.gp-v2-tools { display: flex; justify-content: center; gap: 10px; margin: 14px 0 6px; }
.gp-v2-tool { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--v2-line); background: transparent; color: var(--v2-ink);
  font: 600 10.5px/1 var(--v2-sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; border-radius: 0; }
.gp-v2-tool svg { width: 16px; height: 16px; }
.gp-v2-tool.is-on { border-color: var(--v2-ink); }
.gp-v2-tool[hidden] { display: none !important; }
.v2-sheet { position: fixed; inset: 0; z-index: 2147483002; display: flex; align-items: flex-end; justify-content: center; }
.v2-sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.66); }
.v2-sheet-panel { position: relative; width: 100%; max-width: 480px; background: var(--v2-bg); border: 1px solid var(--v2-line); border-bottom: 0;
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; color: var(--v2-ink); }
.v2-sheet-grip { align-self: center; width: 36px; height: 3px; border-radius: 2px; background: rgba(237,230,214,.25); }
.v2-sheet-head { margin-top: 16px; display: flex; justify-content: space-between; align-items: baseline; }
.v2-sheet-head h2 { margin: 0; font: 400 24px/1.1 var(--v2-serif); }
.v2-sheet-head .v2-lbl { color: var(--v2-muted); }
.v2-sheet-opts { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v2-sheet-opts button { height: 48px; border: 1px solid var(--v2-line); background: transparent; color: var(--v2-ink); font: 400 17px/1 var(--v2-serif); cursor: pointer; }
.v2-sheet-opts button[aria-checked="true"] { border-color: var(--v2-ink); }
@media (min-width: 600px) { .v2-sheet { align-items: center; } .v2-sheet-panel { border-bottom: 1px solid var(--v2-line); } }

/* ── Up Next (canvas UpNext.dc.html) ── */
.v2-upnext { position: fixed; inset: 0; z-index: 2147482999; background: var(--v2-bg); color: var(--v2-ink); display: flex; flex-direction: column; align-items: center;
  padding: calc(56px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; text-align: center; }
.v2-upnext-x { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; height: 30px; padding: 0 10px; border: 1px solid var(--v2-rule); background: transparent; color: var(--v2-ink); cursor: pointer; }
.v2-upnext-done { display: flex; flex-direction: column; gap: 6px; }
.v2-upnext-done .v2-lbl, .v2-upnext-next > .v2-lbl { color: var(--v2-muted); }
.v2-upnext-done span:last-child { font: 400 19px/1.3 var(--v2-serif); color: var(--v2-soft); }
.v2-upnext-next { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.v2-upnext-cover { position: relative; width: min(46vw, 200px); aspect-ratio: 2 / 3; background: #5E5A52; border-radius: 2px; transform: rotateZ(-3deg); box-shadow: 0 40px 70px -30px rgba(0,0,0,.95); }
.v2-upnext-cover img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 2px; outline: 1px solid rgba(237,230,214,.14); outline-offset: -1px; }
.v2-upnext-cover .v2-lbl { position: absolute; top: 10px; right: 10px; padding: 6px 8px; background: rgba(10,10,10,.85); color: var(--v2-ink); }
.v2-upnext-next h2 { margin: 6px 0 0; font: 400 30px/1.12 var(--v2-serif); letter-spacing: -.01em; }
.v2-upnext-count { position: relative; width: 64px; height: 64px; margin-top: 30px; }
.v2-upnext-count svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.v2-upnext-count circle { transition: stroke-dashoffset 1s linear; }
.v2-upnext-count span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 26px/1 var(--v2-serif); }
.v2-upnext-ct { margin-top: 10px; }
.v2-upnext-note { margin: 26px auto 0; max-width: 340px; font: 400 16px/1.45 var(--v2-serif); color: var(--v2-soft); }
.v2-upnext-btns { margin-top: 22px; display: flex; gap: 10px; width: 100%; max-width: 360px; flex-wrap: wrap; justify-content: center; }
.v2-upnext-btns .v2-btn { flex: 1 1 140px; }
html.v2-upnext-open, html.v2-upnext-open body { overflow: hidden; }

/* ── Category page (canvas Author.dc.html): big name, one-line intro, cover grid ── */
.v2-cat .dct-list-head { text-align: left; max-width: 1080px; margin: 0 auto; padding: 40px 16px 20px; }
.v2-cat .dct-list-label { color: var(--v2-muted); }
.v2-cat .dct-list-title { margin: 10px 0 0; font: 400 clamp(44px, 7vw, 96px)/1 var(--v2-serif) !important; letter-spacing: -.02em; }
.v2-cat .v2-cat-intro { margin: 14px 0 0; max-width: 560px; font: 400 18px/1.45 var(--v2-serif); color: var(--v2-soft); letter-spacing: 0; text-transform: none; }
.v2-cat .dct-list-search { margin: 22px 0 0; max-width: 420px; }
.v2-cat .dct-list-body { max-width: 1080px; margin: 0 auto; padding: 0 16px 40px; }
.v2-cat .dct-list-sort { justify-content: flex-start; }
.v2-cat .dct-list-sort-btn { border-radius: 0; font: 600 10.5px/1 var(--v2-sans); letter-spacing: .09em; text-transform: uppercase; }
main.v2-cat #posts.dct-list-rows { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px 14px !important; border-top: 0; padding: 18px 0 0 !important; }
@media (min-width: 900px) { main.v2-cat #posts.dct-list-rows { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; }} @media (min-width: 600px) and (max-width: 899px) { main.v2-cat #posts.dct-list-rows { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.v2-cat #posts .dct-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 0; padding: 0; border: 0; }
.v2-cat #posts .dct-row-cover { position: relative !important; inset: auto !important; transform: none !important; width: 100% !important; height: auto !important;
  aspect-ratio: 2 / 3; margin: 0 0 6px; display: block; }
.v2-cat #posts .dct-row-cover img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 2px; }
.v2-cat #posts .dct-row-body { display: flex; flex-direction: column; gap: 4px; }
.v2-cat #posts .dct-row-title { font: 400 16px/1.2 var(--v2-serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-cat #posts .dct-row-author { font: 600 9.5px/1.2 var(--v2-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--v2-muted); }
.v2-cat #posts .dct-row-info, .v2-cat #posts .dct-row-sub, .v2-cat #posts .dct-row-side, .v2-cat #posts .dct-tag, .v2-cat #posts .dct-row-label { display: none !important; }

/* ── States (canvas States.dc.html) ── */
.v2-skel { display: grid; grid-template-columns: 75px 1fr; grid-template-rows: auto auto; gap: 10px 12px; padding: 8px 0; border-bottom: 1px solid var(--v2-line); }
.v2-skel i { grid-row: 1 / 3; width: 75px; height: 113px; background: rgba(237,230,214,.08); border-radius: 2px; }
.v2-skel b { height: 12px; background: rgba(237,230,214,.08); align-self: end; }
.v2-skel b + b { width: 50%; align-self: start; }
.v2-skel i, .v2-skel b { animation: v2-pulse 1.4s ease-in-out infinite; }
@keyframes v2-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .v2-skel i, .v2-skel b { animation: none; } }
/* App purchase sheet: Đỏ Ấn on the pay button only; serif title; ok / error messages */
.dct-iap-card { background: var(--v2-bg) !important; border-color: var(--v2-line) !important; border-radius: 0 !important; color: var(--v2-ink); }
.dct-iap-card h3 { font: 400 26px/1.15 var(--v2-serif) !important; }
.dct-iap-card h3 em { font-style: italic; }
.dct-iap-pkg { border-radius: 0 !important; }
.dct-iap-pkg.is-best { background: var(--v2-seal) !important; color: var(--v2-ink) !important; border-color: var(--v2-seal) !important; }
.dct-iap-msg { font: 400 15px/1.45 var(--v2-serif); color: var(--v2-soft); }
.dct-iap-msg.is-err { color: #D9826F; }
main.v2-cat #posts .dct-row, main.v2-cat #posts .dct-row-cover { min-width: 0; max-width: 100%; }

/* ── Fix pass (02/11): header wordmark, player fonts, category gutter ── */
/* Header: centred Newsreader wordmark + "NGHE · VIẾT · QUYẾT" between rules (mockup Detail.dc.html). The old rule
   (.dcc-hdr .dcc-logo: overflow hidden + line-height 1) clipped the stacked accents of Ế/Ự → it read "ĐE CHE". */
.dcc-hdr.v2-hdr { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 18px 16px 16px; border-bottom: 1px solid rgba(237,230,214,.14); }
.v2-hdr .v2-hdr-side { display: flex; align-items: center; min-width: 0; }
.v2-hdr .v2-hdr-end { justify-content: flex-end; gap: 14px; }
.v2-hdr .dcc-logo.v2-wordmark { display: flex; flex-direction: column; align-items: center; gap: 8px; overflow: visible; line-height: 1.15; text-transform: none; font-weight: 400; letter-spacing: 0; color: var(--v2-ink); text-decoration: none; }
.v2-wordmark-name { font: 400 21px/1.15 var(--v2-serif); letter-spacing: .1em; padding-left: .1em; white-space: nowrap; }
.v2-wordmark-tag { display: flex; align-items: center; gap: 10px; font: 600 9px/1.2 var(--v2-sans); letter-spacing: .32em; padding-left: .32em; color: var(--v2-muted); white-space: nowrap; }
.v2-wordmark-tag i { display: block; width: 18px; height: 1px; background: currentColor; }
.v2-hdr .v2-hdr-back { display: inline-flex; align-items: center; gap: 6px; color: var(--v2-soft); text-decoration: none; font: 600 10.5px/1 var(--v2-sans); letter-spacing: .09em; text-transform: uppercase; }
.v2-hdr .dcc-hdr-link { font: 600 10.5px/1 var(--v2-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--v2-ink); }
@media (max-width: 420px) { .v2-hdr .v2-hdr-back span, .v2-wordmark-tag i { display: none; } .v2-wordmark-tag { letter-spacing: .24em; padding-left: .24em; } }
@media (min-width: 900px) { .dcc-hdr.v2-hdr { padding: 22px 24px 20px; } .v2-wordmark-name { font-size: 26px; } }

/* Mini player + Now Playing: Newsreader titles, Inter Tight labels (no synthetic 800). */
.gp-title, .gp-title em, .gp-popup-title, .gp-popup-title em, .gp-popup-title i, .gp-qi-title, .gp-as-title { font-family: var(--v2-serif) !important; font-weight: 400 !important; letter-spacing: 0 !important; }
#global-player .gp-title { font-size: 16px !important; }
.gp-popup-title { font-size: 28px !important; line-height: 1.15 !important; }
.gp-artist, .gp-artist-dot, .gp-popup-artist, .gp-qi-artist, .gp-as-artist,
.gp-popup-label, .gp-current-time, .gp-popup-times { font-family: var(--v2-sans) !important; font-weight: 500 !important; }
#global-player .gp-popup-label { font-weight: 600 !important; }

/* Category page: 16px side gutter at phone width (.dct-list already pads 16px; the inner blocks added 16 more). */
@media (max-width: 899px) { .v2-cat .dct-list-head, .v2-cat .dct-list-body { padding-left: 0; padding-right: 0; } }

/* ══════════ App home after login (owner 03/11/2026, canvas home-login A/B/C/D/E) ══════════
   AppHome.astro (A not paid / B paid, switched by html.dct-paid) + dct-app-home.js overlays (.ahp = paywall C, .ahe = finished E). */
html.in-app #ah-top:not([hidden]) ~ .ke .ke-top { display: none; }
.ah { color: var(--v2-ink); font-family: var(--v2-sans); }
html.dct-paid .ah .ah-a, html:not(.dct-paid) .ah .ah-b { display: none !important; }
.ah-head { padding: 24px 20px 22px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ah-head-b { flex-direction: row; justify-content: space-between; padding-bottom: 0; }
.ah-logo { font-family: var(--v2-serif); font-size: 22px; letter-spacing: .14em; }
.ah-head-b .ah-logo { font-size: 17px; letter-spacing: .16em; }
.ah-slogan, .ah-plan, .ah-lbl { font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--v2-muted); margin: 0; }
.ah-slogan { font-size: 9.5px; letter-spacing: .3em; }
.ah-plan { letter-spacing: .12em; text-align: right; }
.ah-sec { padding: 0 20px 30px; }
.ah-b .ah-sec { padding: 30px 20px 0; }
.ah-lbl { margin-bottom: 6px; }
.ah-sec-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.ah-all { font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--v2-soft); text-decoration: none; }
.ah-row { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(237,230,214,.12); text-decoration: none; color: inherit; width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; font: inherit; cursor: pointer; }
.ah-row img, .ah-cover { width: 52px; height: 78px; flex: none; object-fit: cover; background: #1A1916; box-shadow: 0 10px 18px -10px rgba(0,0,0,.9); }
.ah-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ah-tag { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; color: var(--v2-soft); }
.ah-title { font-family: var(--v2-serif); font-size: 19px; line-height: 1.15; }
.ah-bar { height: 2px; background: rgba(237,230,214,.16); position: relative; }
.ah-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--v2-ink); }
.ah-status { font-size: 11px; color: var(--v2-muted); }
.ah-play { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid rgba(237,230,214,.5); display: flex; align-items: center; justify-content: center; }
.ah-lib { margin: 6px 20px 0; height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(237,230,214,.35); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; color: var(--v2-ink); text-decoration: none; }
.ah-unlock { margin: 30px 20px 40px; display: flex; flex-direction: column; gap: 8px; }
.ah-unlock h2 { margin: 0; font-family: var(--v2-serif); font-weight: 400; font-size: 25px; line-height: 1.1; }
.ah-unlock p { margin: 0; font-family: var(--v2-serif); font-size: 15px; line-height: 1.45; color: var(--v2-soft); }
.ah-seal { margin-top: 8px; height: 50px; width: 100%; border: 0; background: var(--v2-seal); color: var(--v2-ink); font: 600 11px var(--v2-sans); letter-spacing: .12em; cursor: pointer; }
.ah-shelf-h { margin: 32px 20px 14px; }
.ah-cont-row { display: flex; gap: 16px; align-items: stretch; margin-top: 8px; }
.ah-cont-row img { width: 124px; height: 186px; flex: none; object-fit: cover; box-shadow: 0 18px 30px -16px rgba(0,0,0,.9); }
.ah-cont-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ah-cont-title { font-family: var(--v2-serif); font-size: 25px; line-height: 1.08; }
.ah-cont-author { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--v2-soft); text-transform: uppercase; }
.ah-cont-body .ah-grow { flex: 1; }
.ah-btn-ink { margin-top: 6px; height: 46px; border: 0; background: var(--v2-ink); color: var(--v2-bg); display: flex; align-items: center; justify-content: center; gap: 10px; font: 600 11px var(--v2-sans); letter-spacing: .12em; cursor: pointer; width: 100%; }
.ah-week-row { display: flex; gap: 12px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
.ah-week-row::-webkit-scrollbar { display: none; }
.ah-wk { flex: none; width: 112px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; background: none; border: 0; padding: 0; text-align: left; font: inherit; cursor: pointer; position: relative; }
.ah-wk img { width: 112px; height: 168px; object-fit: cover; background: #1A1916; box-shadow: 0 14px 24px -14px rgba(0,0,0,.9); }
.ah-wk-new { position: absolute; top: 8px; left: 8px; height: 18px; padding: 0 6px; display: inline-flex; align-items: center; background: var(--v2-ink); color: var(--v2-bg); font-size: 8px; font-weight: 600; letter-spacing: .12em; }
.ah-wk-meta { font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--v2-muted); }
.ah-wk-t { font-family: var(--v2-serif); font-size: 14px; line-height: 1.15; }

/* C paywall + E finished: full-screen overlays (in-app) */
.ahp { position: fixed; inset: 0; z-index: 10050; background: var(--v2-bg); color: var(--v2-ink); font-family: var(--v2-sans); overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px calc(env(safe-area-inset-bottom, 0px) + 20px); box-sizing: border-box; display: flex; flex-direction: column; }
.ahp[hidden] { display: none; }
.ahp-top { display: flex; justify-content: space-between; align-items: center; }
.ahp-x { width: 40px; height: 40px; margin-left: -10px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: inherit; cursor: pointer; }
.ahp-restore { background: none; border: 0; color: var(--v2-soft); font: 600 10px var(--v2-sans); letter-spacing: .12em; cursor: pointer; padding: 10px 0; }
.ahp-book { display: flex; gap: 18px; align-items: flex-end; margin-top: 6px; }
.ahp-book img { width: 110px; height: 165px; object-fit: cover; background: #1A1916; box-shadow: 0 18px 30px -16px rgba(0,0,0,.9); }
.ahp-meta { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--v2-muted); text-transform: uppercase; }
.ahp h1 { margin: 22px 0 0; font-family: var(--v2-serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.ahp-lead { margin: 10px 0 0; font-family: var(--v2-serif); font-size: 15px; line-height: 1.45; color: var(--v2-soft); }
.ahp-kick { margin-top: 18px; font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--v2-muted); }
.ahp-plan { margin-top: 22px; display: flex; align-items: center; gap: 14px; height: 62px; padding: 0 16px; border: 1.5px solid var(--v2-ink); }
.ahp-plan-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ahp-plan-name { font-size: 11px; font-weight: 600; letter-spacing: .1em; }
.ahp-plan-sub { font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--v2-muted); }
.ahp-plan-price { font-family: var(--v2-serif); font-size: 26px; white-space: nowrap; }
.ahp-grow { flex: 1; min-height: 22px; }
.ahp-cta { height: 54px; width: 100%; border: 0; background: var(--v2-seal); color: var(--v2-ink); font: 600 11.5px var(--v2-sans); letter-spacing: .12em; cursor: pointer; }
.ahp-alt { display: block; margin-top: 14px; text-align: center; font-family: var(--v2-serif); font-size: 15px; color: var(--v2-soft); background: none; border: 0; width: 100%; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ahp-fine { margin: 12px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--v2-muted); text-align: center; }
.ahp-fine a { color: var(--v2-muted); }
.ahp .dct-iap-msg { margin: 10px 0 0; font-size: 12px; color: var(--v2-soft); text-align: center; }
.ahp .dct-iap-msg:empty { display: none; }
.ahp .dct-iap-msg.is-err { color: #E5502F; }
.ahe-next { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ahe-next button { display: flex; flex-direction: column; gap: 8px; background: none; border: 0; padding: 0; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.ahe-next img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: #1A1916; box-shadow: 0 14px 24px -14px rgba(0,0,0,.9); }
.ahe-next span { font-size: 9.5px; font-weight: 600; letter-spacing: .08em; color: var(--v2-muted); text-transform: uppercase; }

/* D: Tìm in the app = the full library */
.v2-tim-app-title { display: none; }
html.in-app .v2-tim-web-title { display: none; }
html.in-app .v2-tim-app-title { display: inline; }
.v2-tim-all { display: none; }
html.in-app .v2-tim-all:not([hidden]) { display: block; }
.v2-tim-all-head { display: flex; justify-content: space-between; align-items: center; margin: 30px 0 6px; gap: 8px; }
.v2-tim-sort { display: flex; }
.v2-tim-sort button { height: 30px; padding: 0 10px; background: transparent; color: var(--v2-ink); border: 1px solid rgba(237,230,214,.35); margin-left: -1px; font: 600 9.5px var(--v2-sans); letter-spacing: .1em; cursor: pointer; }
.v2-tim-sort button[aria-pressed="true"] { background: var(--v2-ink); color: var(--v2-bg); }
.v2-free-lbl { flex: none; height: 20px; padding: 0 7px; display: inline-flex; align-items: center; border: 1px solid rgba(237,230,214,.5); font: 600 8.5px var(--v2-sans); letter-spacing: .12em; color: var(--v2-ink); }
.v2-all-row { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(237,230,214,.12); color: inherit; text-decoration: none; width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; font: inherit; cursor: pointer; }
.v2-all-row img { width: 40px; height: 60px; flex: none; object-fit: cover; background: #1A1916; }
.v2-all-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.v2-all-t { font-family: var(--v2-serif); font-size: 17px; line-height: 1.15; }
.v2-all-m { font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--v2-muted); text-transform: uppercase; }
html.in-app .ke .dct-lock { display: none !important; }
/* App home labels: beat the global h2 (serif, large) */
.dct .ah h2.ah-lbl { font-family: var(--v2-sans) !important; font-size: 10px; font-weight: 600 !important; letter-spacing: .14em; line-height: 1.4; color: var(--v2-muted); text-transform: none; margin: 0 0 6px; }
.dct .ah .ah-sec-head h2.ah-lbl { margin: 0; }
.dct .ah h2.ah-lbl.ah-shelf-h { margin: 32px 20px 14px; }
.dct .ah-unlock h2 { letter-spacing: 0; text-transform: none; font-size: 25px; line-height: 1.1; }