/* ============================================================
   site.css — bài 3 “Nguồn gốc của tôn giáo”.
   Chữ đo theo chiều cao màn hình (vh) để máy chiếu nào cũng to:
   thân ≈ 4.2vh (32px @768), tiêu đề 7–13vh. Màn dọc dùng vw.
   ============================================================ */
:root {
  --bg: #05070d; --ink: #f7f0e3; --dim: #c9c0ae; --gold: #f3c35b; --gold2: #ffe3a1; --amber: #ff9a3d; --red: #ff4a3d; --blue: #7cc0ff; --green: #7dffb5;
  --serif: 'Playfair Display', Georgia, serif; --sans: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
  --u: min(1vh, 0.56vw);            /* đơn vị chữ: theo chiều cao, nhưng không tràn chiều ngang */
  --fs-body: calc(var(--u) * 4.2);
  --fs-lead: calc(var(--u) * 4.4);
  --fs-small: calc(var(--u) * 3.1);
  --fs-h: calc(var(--u) * 7.2);
  --fs-big: calc(var(--u) * 10.5);
  --pad: calc(var(--u) * 6);
}
@media (max-aspect-ratio: 4/5) { :root { --u: 1.08vw; --pad: 5vw; --fs-small: calc(var(--u) * 3.4); } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { font-size: var(--fs-body); line-height: 1.32; }
em { font-style: normal; color: var(--gold); }
em.red, .red { color: var(--red); }
b { font-weight: 700; color: var(--gold2); }
u { text-decoration-color: var(--red); text-decoration-thickness: 0.12em; text-underline-offset: 0.18em; }
button { font-family: var(--sans); }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#stage { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
/* lớp tối giúp chữ đọc rõ trên mọi nền 3D */
#scrim { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(3,4,8,.55) 100%); transition: opacity .8s; }
#scrim.left { background: linear-gradient(90deg, rgba(3,4,8,.86) 0%, rgba(3,4,8,.62) 46%, rgba(3,4,8,.0) 78%), radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(3,4,8,.5) 100%); }
#scrim.full { background: rgba(3,4,8,.62); }
#scrim.center { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(3,4,8,.62) 0%, rgba(3,4,8,.3) 60%, rgba(3,4,8,.55) 100%); }
#scrim.bottom { background: linear-gradient(0deg, rgba(3,4,8,.9) 0%, rgba(3,4,8,.55) 48%, rgba(3,4,8,0) 75%); }

/* ---------- khung miền ---------- */
.panel { position: absolute; inset: 0; padding: calc(var(--u) * 11) var(--pad) calc(var(--u) * 7); display: flex; flex-direction: column; justify-content: center; pointer-events: none; opacity: 0; visibility: hidden; }
.panel.on { visibility: visible; }
.panel .box { position: relative; pointer-events: auto; transform: translate(var(--dx, 0px), var(--dy, 0px)); }
.panel [data-k] { outline: none; }
.kicker { font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: calc(var(--u) * 1.6); display: flex; align-items: center; gap: .6em; }
.kicker::before { content: ''; width: 2.2em; height: 2px; background: currentColor; display: inline-block; }
.h { font-family: var(--serif); font-weight: 700; font-size: var(--fs-h); line-height: 1.12; margin: 0 0 calc(var(--u) * 2.4); text-wrap: balance; text-shadow: 0 .06em .5em rgba(0,0,0,.6); }
.lead { font-size: var(--fs-lead); line-height: 1.34; color: var(--ink); max-width: 30em; text-wrap: pretty; text-shadow: 0 .05em .4em rgba(0,0,0,.7); }
.note { margin-top: calc(var(--u) * 2.2); font-size: var(--fs-small); color: var(--dim); font-style: italic; max-width: 40em; }
.srcTag { font-size: calc(var(--u) * 2.4); color: var(--dim); opacity: .85; margin-top: calc(var(--u) * 1.6); }
.w62 { max-width: 64vw; }

/* cold open & kết luận: từng dòng */
.k-cold .box, .k-conclusion .box { text-align: center; align-self: center; max-width: 86vw; }
.lines .ln { font-family: var(--serif); font-size: calc(var(--u) * 6.6); line-height: 1.18; margin: calc(var(--u) * 2) 0; text-shadow: 0 .05em .5em rgba(0,0,0,.8); }
.lines .ln:last-child { font-size: calc(var(--u) * 6.0); }

/* tiêu đề */
.k-title .box, .k-outro .box { text-align: center; align-self: center; }
.k-title .kicker, .k-outro .kicker { justify-content: center; }
.k-title .kicker::before, .k-outro .kicker::before { display: none; }
.mega { font-family: var(--serif); font-weight: 800; font-size: calc(var(--u) * 14); line-height: .98; margin: 0 0 calc(var(--u) * 3); background: linear-gradient(180deg, #fff6dc 0%, #f3c35b 55%, #b77a1e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .04em .3em rgba(0,0,0,.6)); }
.k-title .lead, .k-outro .lead { margin: 0 auto; font-size: calc(var(--u) * 4.8); max-width: 26em; }
.rule { width: calc(var(--u) * 26); height: 2px; margin: calc(var(--u) * 3) auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* mục lục / danh sách đánh số */
.rows { display: flex; flex-direction: column; gap: calc(var(--u) * 2.1); margin-top: calc(var(--u) * 1); }
.row { display: grid; grid-template-columns: calc(var(--u) * 9) 1fr; align-items: center; gap: calc(var(--u) * 2.6); }
.row .n { font-family: var(--serif); font-weight: 800; font-size: calc(var(--u) * 8); color: var(--gold); line-height: 1; text-align: center; text-shadow: 0 0 .4em rgba(243,195,91,.45); }
.row .t { font-weight: 700; font-size: calc(var(--u) * 4.7); line-height: 1.15; }
.row .d { font-size: calc(var(--u) * 3.5); color: var(--dim); margin-top: .12em; }
.k-list .row .n { font-size: calc(var(--u) * 6.4); }
.k-list.many .row .t { font-size: calc(var(--u) * 4.3); }
.k-list.many .row .d { font-size: calc(var(--u) * 3.3); }
.k-list.many .rows { gap: calc(var(--u) * 1.5); }
.foot { margin-top: calc(var(--u) * 3); font-size: var(--fs-lead); }
.k-toc .foot { color: var(--gold2); font-weight: 600; }

/* mở chương */
.k-chapter .box { align-self: center; text-align: center; }
.chapnum { font-family: var(--serif); font-weight: 800; font-size: calc(var(--u) * 30); line-height: .8; color: transparent; -webkit-text-stroke: 2px rgba(243,195,91,.85); text-shadow: 0 0 .25em rgba(243,195,91,.25); }
.chaptitle { font-family: var(--serif); font-weight: 800; font-size: calc(var(--u) * 11); line-height: 1; margin: calc(var(--u) * 1) 0 calc(var(--u) * 4); }
.chips { display: flex; gap: calc(var(--u) * 2.4); justify-content: center; flex-wrap: wrap; }
.chip { font-size: calc(var(--u) * 4.2); font-weight: 700; padding: .45em 1.05em; border-radius: 999px; border: 2px solid var(--c, var(--gold)); color: var(--ink); background: rgba(8,8,14,.6); box-shadow: 0 0 1.2em -0.2em var(--c, var(--gold)); }
.k-chapter .foot { font-size: calc(var(--u) * 3.8); color: var(--dim); }

/* trích dẫn */
.k-quote .box { display: grid; grid-template-columns: 1fr; max-width: 70vw; }
.k-quote.with-img .box { max-width: 92vw; }
.qwrap { display: grid; grid-template-columns: 1.5fr minmax(0, .75fr); gap: calc(var(--u) * 5); align-items: center; }
.qwrap .pic { height: 64vh; }
.qwrap .pic img { object-position: 50% 20%; }
.qtext { font-family: var(--serif); font-style: italic; font-size: calc(var(--u) * 5.3); line-height: 1.28; text-shadow: 0 .05em .5em rgba(0,0,0,.8); }
.qcite { margin-top: calc(var(--u) * 2.4); font-size: var(--fs-small); color: var(--gold); letter-spacing: .04em; }
.qsub { margin-top: calc(var(--u) * 3.2); font-size: calc(var(--u) * 3.4); color: var(--ink); border-left: 3px solid var(--gold); padding-left: .8em; max-width: 34em; }
.badge { justify-self: start; width: fit-content; display: inline-block; font-size: var(--fs-small); font-weight: 700; color: #1a1205; background: var(--gold); padding: .3em .8em; border-radius: .3em; margin-bottom: calc(var(--u) * 2.6); letter-spacing: .06em; text-transform: uppercase; }

/* ảnh DOM sắc nét (ảnh tư liệu gánh ý chính) */
.pic { position: relative; overflow: hidden; border-radius: calc(var(--u) * .8); box-shadow: 0 1.5em 3em -1em rgba(0,0,0,.8), 0 0 0 1px rgba(243,195,91,.45); background: #111; }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.pic figcaption, .pic .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .9em .9em .7em; font-size: calc(var(--u) * 2.9); line-height: 1.25; background: linear-gradient(0deg, rgba(0,0,0,.88), rgba(0,0,0,0)); color: #fff; }
.k-photo .box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: calc(var(--u) * 5); align-items: center; }
.k-photo .pic { height: 62vh; }
.k-photo .h { font-size: calc(var(--u) * 6.3); }
.k-photo .lead { font-size: calc(var(--u) * 4); }

.k-gallery .pics, .k-door .pics, .k-stats .pics { display: grid; gap: calc(var(--u) * 2); }
.k-gallery .pics { grid-template-columns: 1.1fr 1fr; height: 44vh; margin: calc(var(--u) * 1) 0 calc(var(--u) * 3); }
.k-gallery .lead { max-width: none; font-size: calc(var(--u) * 4); }

.k-door .box { max-width: 92vw; }
.doortitle { font-family: var(--serif); font-weight: 800; font-size: calc(var(--u) * 11); line-height: 1; margin: 0 0 calc(var(--u) * 2); color: var(--tone); text-shadow: 0 0 .35em color-mix(in srgb, var(--tone) 45%, transparent); }
.k-door .lead { max-width: 38em; margin-bottom: calc(var(--u) * 3); }
.k-door .pics { grid-template-columns: repeat(3, 1fr); height: 38vh; }
.defs { display: grid; gap: calc(var(--u) * 1.8); max-width: 72vw; margin-bottom: calc(var(--u) * 3); }
.def { display: grid; grid-template-columns: calc(var(--u) * 22) 1fr; gap: calc(var(--u) * 2.4); align-items: baseline; }
.def .t { font-weight: 800; font-size: calc(var(--u) * 4.6); color: var(--red); }
.def .d { font-size: calc(var(--u) * 3.9); }
.tags { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.6); }
.tag { font-size: calc(var(--u) * 3.6); font-weight: 700; padding: .3em .8em; border: 2px solid var(--red); color: #ffd5cf; background: rgba(60,6,6,.55); border-radius: .3em; transform: rotate(var(--r, 0deg)); }

/* ba cột */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2.6); margin-top: calc(var(--u) * 2); }
.card { background: linear-gradient(180deg, rgba(14,14,24,.86), rgba(8,8,14,.78)); border: 1px solid rgba(243,195,91,.35); border-top: 4px solid var(--c, var(--gold)); border-radius: calc(var(--u) * .8); padding: calc(var(--u) * 2.8) calc(var(--u) * 2.6); backdrop-filter: blur(4px); }
.card .t { font-family: var(--serif); font-weight: 800; font-size: calc(var(--u) * 5.2); color: var(--c, var(--gold)); line-height: 1.05; }
.card .stat { font-family: var(--serif); font-weight: 800; font-size: calc(var(--u) * 9); line-height: 1; color: var(--ink); margin: .1em 0; }
.card .d { font-size: calc(var(--u) * 3.6); margin-top: .5em; line-height: 1.32; }
.k-venn .center { margin: calc(var(--u) * 3) auto 0; text-align: center; font-size: calc(var(--u) * 4.4); padding: .6em 1.2em; border-radius: 999px; border: 2px solid var(--gold); background: rgba(30,20,6,.7); width: fit-content; box-shadow: 0 0 2em -0.4em var(--gold); }
.k-vignettes .kicker { color: var(--green); font-size: calc(var(--u) * 3.6); text-transform: none; letter-spacing: .02em; }

/* so sánh tiêu chí */
.crit { display: flex; align-items: baseline; gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 3); }
.crit .n { font-family: var(--serif); font-weight: 800; font-size: calc(var(--u) * 13); line-height: .8; color: var(--gold); }
.crit .of { font-size: var(--fs-small); color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }
.crit .t { font-family: var(--serif); font-weight: 800; font-size: calc(var(--u) * 7.4); line-height: 1.05; }
.k-compare .card .t { font-family: var(--sans); font-size: calc(var(--u) * 3.4); letter-spacing: .1em; text-transform: uppercase; }
.k-compare .card .d { font-size: calc(var(--u) * 4.1); margin-top: .45em; }
.c-tg { --c: var(--gold); } .c-tn { --c: var(--amber); } .c-mt { --c: var(--red); }

/* trò chơi */
.cases { display: flex; flex-direction: column; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 1); }
.case { display: grid; grid-template-columns: calc(var(--u) * 7) 1fr calc(var(--u) * 40); gap: calc(var(--u) * 2.4); align-items: center; padding: calc(var(--u) * 1.8) calc(var(--u) * 2.2); border-radius: calc(var(--u) * .8); background: rgba(10,10,18,.78); border: 1px solid rgba(255,255,255,.12); }
.case .i { font-family: var(--serif); font-weight: 800; font-size: calc(var(--u) * 6); color: var(--gold); text-align: center; }
.case .t { font-size: calc(var(--u) * 4.2); font-weight: 600; line-height: 1.25; }
.case .ans { position: relative; height: calc(var(--u) * 11); display: flex; align-items: center; justify-content: center; }
.case .q { font-family: var(--serif); font-size: calc(var(--u) * 8); color: rgba(255,255,255,.35); }
.case .stamp { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid var(--c); color: var(--c); border-radius: .4em; font-weight: 800; font-size: calc(var(--u) * 3.9); text-transform: uppercase; letter-spacing: .04em; transform: rotate(-4deg) scale(1.6); opacity: 0; background: rgba(0,0,0,.55); text-align: center; line-height: 1.05; }
.case .stamp small { display: block; font-size: .62em; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink); margin-top: .25em; }
.case.done .q { opacity: 0; }
.case.next { border-color: var(--gold); box-shadow: 0 0 1.4em -0.4em var(--gold); }

/* hai mặt */
.k-split .box { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); max-width: 90vw; }
.k-split .kicker { grid-column: 1 / -1; }
.side { padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 1); background: rgba(8,10,20,.78); border: 2px solid var(--c); box-shadow: 0 0 3em -1em var(--c); }
.side .t { font-family: var(--serif); font-weight: 800; font-size: calc(var(--u) * 7); color: var(--c); line-height: 1; }
.side .d { font-size: calc(var(--u) * 4.3); margin: .7em 0; }
.side .act { font-size: calc(var(--u) * 4); font-weight: 800; color: var(--ink); border-top: 1px solid rgba(255,255,255,.2); padding-top: .6em; }
.side.l { --c: var(--blue); } .side.r { --c: var(--red); }

/* số liệu */
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 3); margin: calc(var(--u) * 1) 0 calc(var(--u) * 3); }
.stat .v { font-family: var(--serif); font-weight: 800; font-size: calc(var(--u) * 15); line-height: .95; color: var(--gold); text-shadow: 0 0 .3em rgba(243,195,91,.35); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat .v small { font-size: .4em; }
.stat .l { font-size: calc(var(--u) * 3.7); color: var(--ink); margin-top: .3em; }
.k-stats .pics { grid-template-columns: repeat(3, 1fr); height: 22vh; margin-top: calc(var(--u) * 3); }
.k-stats .lead { max-width: none; }

/* luật */
.k-law .box { display: grid; grid-template-columns: 1.25fr 1fr; gap: calc(var(--u) * 4); align-items: center; max-width: 92vw; }
.k-law .h { font-size: calc(var(--u) * 6.4); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); }
.fact { background: rgba(10,10,18,.8); border-left: 4px solid var(--gold); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.2); border-radius: 0 calc(var(--u) * .6) calc(var(--u) * .6) 0; }
.fact .k { font-size: calc(var(--u) * 2.8); text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.fact .v { font-family: var(--serif); font-weight: 800; font-size: calc(var(--u) * 6.4); line-height: 1.05; color: var(--gold); }
.fact .d { font-size: calc(var(--u) * 3.1); }
.k-law .pic { height: 58vh; }

/* cảnh báo */
.k-alert .kicker { color: var(--red); }
.k-alert .h { color: #fff; }
.notifs { display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); margin: calc(var(--u) * 1) 0 calc(var(--u) * 3); max-width: 62vw; }
.notif { display: flex; align-items: center; gap: .7em; font-size: calc(var(--u) * 4.3); font-weight: 700; padding: .5em .9em; background: rgba(40,4,6,.85); border: 2px solid var(--red); border-radius: .5em; box-shadow: 0 0 1.6em -0.5em var(--red); }
.notif::before { content: '!'; font-family: var(--serif); width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; flex: none; font-size: .9em; }
.lawbox { max-width: 70vw; padding: calc(var(--u) * 2.4) calc(var(--u) * 3); border: 2px solid var(--gold); border-radius: calc(var(--u) * .8); background: rgba(14,10,4,.85); }
.lawbox .k { font-size: calc(var(--u) * 3); color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.lawbox .v { font-family: var(--serif); font-size: calc(var(--u) * 5.4); font-weight: 800; }
.lawbox .d { font-size: calc(var(--u) * 3.5); }

/* câu hỏi */
.k-quiz .box { max-width: 92vw; width: 100%; }
.qhead { display: flex; align-items: center; gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 2.4); }
.qnum { font-family: var(--serif); font-weight: 800; font-size: calc(var(--u) * 5); color: #1a1205; background: var(--gold); padding: .1em .6em; border-radius: .25em; white-space: nowrap; }
.qq { font-size: calc(var(--u) * 4.6); font-weight: 700; line-height: 1.25; flex: 1; text-wrap: balance; }
.timer { width: calc(var(--u) * 13); height: calc(var(--u) * 13); flex: none; position: relative; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 7; }
.timer .bgc { stroke: rgba(255,255,255,.15); } .timer .fgc { stroke: var(--gold); stroke-linecap: round; }
.timer .num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-weight: 800; font-size: calc(var(--u) * 5); }
.timer.low .fgc { stroke: var(--red); } .timer.low .num { color: var(--red); }
.stmts { display: grid; gap: calc(var(--u) * .9); margin-bottom: calc(var(--u) * 2); }
.stmts div { font-size: calc(var(--u) * 3.3); line-height: 1.25; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); }
.opt { display: flex; align-items: center; gap: .7em; font-size: calc(var(--u) * 4); font-weight: 600; padding: .55em .8em; border-radius: .5em; background: rgba(10,10,20,.84); border: 2px solid rgba(255,255,255,.18); transition: opacity .5s, transform .5s, border-color .5s, box-shadow .5s, background .5s; }
.opt .L { font-family: var(--serif); font-weight: 800; width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; flex: none; color: #111; background: var(--c); }
.opt:nth-child(1) { --c: #ffc04d; } .opt:nth-child(2) { --c: #6fb6ff; } .opt:nth-child(3) { --c: #ff8a5c; } .opt:nth-child(4) { --c: #7dffb5; }
.k-quiz.revealed .opt { opacity: .32; }
.k-quiz.revealed .opt.ok { opacity: 1; border-color: var(--green); background: rgba(10,50,30,.85); box-shadow: 0 0 2.2em -0.4em var(--green); transform: scale(1.03); }
.why { margin-top: calc(var(--u) * 2.4); font-size: calc(var(--u) * 3.6); padding: .6em .9em; border-left: 4px solid var(--green); background: rgba(6,24,16,.8); opacity: 0; transform: translateY(1em); transition: opacity .6s .3s, transform .6s .3s; }
.k-quiz.revealed .why { opacity: 1; transform: none; }
.k-quiz.many .qq { font-size: calc(var(--u) * 4.2); }
.k-quiz.many .opt { font-size: calc(var(--u) * 3.6); padding: .4em .7em; }

/* trao đổi */
.k-qa .box { text-align: center; align-self: center; }
.k-qa .mega { font-size: calc(var(--u) * 16); }
.k-qa .chips { margin-top: calc(var(--u) * 4); }
.k-qa .chip { font-size: calc(var(--u) * 3.4); font-weight: 600; }

/* ---------- câu nối khi bay ---------- */
#segue { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; width: min(82vw, 1500px); text-align: center; pointer-events: none; opacity: 0; }
#segue .part { font-size: var(--fs-small); color: var(--gold); letter-spacing: .18em; text-transform: uppercase; font-weight: 700; margin-bottom: .8em; min-height: 1em; }
#segue .txt { font-family: var(--serif); font-style: italic; font-size: calc(var(--u) * 6.4); line-height: 1.2; text-shadow: 0 .05em .6em rgba(0,0,0,.95), 0 0 2em rgba(0,0,0,.8); }
#segue.editing { pointer-events: auto; }
#segue.editing .txt { outline: 2px dashed var(--gold); background: rgba(0,0,0,.4); }
#cover { position: fixed; inset: 0; z-index: 7; background: #000; opacity: 0; pointer-events: none; }
#flashlayer { position: fixed; inset: 0; z-index: 9; background: #dfe8ff; opacity: 0; pointer-events: none; mix-blend-mode: screen; }

/* ---------- khung điều hướng ---------- */
#topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 1.2em; padding: .6em 1.2em; font-size: 14px; background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0)); opacity: .2; transition: opacity .4s; }
#topnav:hover, body.edit #topnav { opacity: 1; }
#topnav .brand { font-weight: 800; color: var(--gold); letter-spacing: .06em; white-space: nowrap; }
#chapters { display: flex; gap: .3em; flex: 1; overflow-x: auto; scrollbar-width: none; }
#chapters button { background: none; border: 0; color: var(--dim); font-size: 14px; padding: .35em .7em; border-radius: 999px; cursor: pointer; white-space: nowrap; }
#chapters button.cur { color: #111; background: var(--gold); font-weight: 700; }
#topnav .tools { display: flex; gap: .4em; }
#topnav .tools button { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: var(--ink); border-radius: .4em; padding: .35em .7em; cursor: pointer; font-size: 13px; }
#topnav .tools button.on { background: var(--gold); color: #111; }
#rail { position: fixed; right: .7em; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 5px; opacity: .25; transition: opacity .3s; }
#rail:hover { opacity: 1; }
#rail button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.35); cursor: pointer; }
#rail button.ch { background: rgba(243,195,91,.7); }
#rail button.cur { background: var(--gold); transform: scale(1.6); box-shadow: 0 0 8px var(--gold); }
#progwrap { position: fixed; left: 0; right: 0; bottom: 0; height: 4px; z-index: 20; background: rgba(255,255,255,.06); }
#prog { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), #fff1c4); transition: width .6s; }
#where { position: fixed; left: 1.2em; bottom: .9em; z-index: 20; font-size: 13px; color: var(--dim); letter-spacing: .08em; opacity: .55; }
#hint { position: fixed; right: 1.4em; bottom: 1em; z-index: 20; font-size: 14px; color: var(--dim); display: flex; gap: .4em; align-items: center; opacity: 0; transition: opacity .6s; }
#hint.show { opacity: .8; }
kbd { font-family: var(--sans); border: 1px solid rgba(255,255,255,.4); border-bottom-width: 3px; border-radius: 4px; padding: 0 .4em; font-size: 12px; }
#enterHint { position: fixed; left: 50%; bottom: 1.6em; transform: translateX(-50%); z-index: 21; font-size: calc(var(--u) * 2.6); color: var(--gold2); background: rgba(0,0,0,.6); padding: .35em 1em; border-radius: 999px; border: 1px solid rgba(243,195,91,.5); opacity: 0; transition: opacity .4s; pointer-events: none; }
#enterHint.show { opacity: .95; }

/* lời nói cho người trình bày */
#notes { position: fixed; left: 1em; right: 1em; bottom: 1.4em; z-index: 30; max-height: 42vh; overflow: auto; background: rgba(6,6,10,.94); border: 1px solid rgba(243,195,91,.5); border-radius: .6em; padding: 1em 1.2em; font-size: 18px; line-height: 1.5; display: none; }
#notes.show { display: block; }
#notes .who { color: var(--gold); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .3em; }
#notes .src { margin-top: .6em; color: var(--dim); font-size: 14px; }

/* nút âm thanh + màn mở khóa âm */
#soundGate { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; background: rgba(0,0,0,.55); cursor: pointer; }
#soundGate.show { display: grid; }
#soundGate div { text-align: center; font-size: calc(var(--u) * 4); padding: 1em 1.6em; border: 2px solid var(--gold); border-radius: .6em; background: rgba(10,8,4,.9); }
#soundGate small { display: block; font-size: .6em; color: var(--dim); margin-top: .5em; }

/* loader + intro */
#loader { position: fixed; inset: 0; z-index: 50; background: #030408; display: grid; place-items: center; text-align: center; transition: opacity .8s; }
#loader .t { font-family: var(--serif); font-size: calc(var(--u) * 5); color: var(--gold); }
#loader .bar { width: min(40vw, 420px); height: 3px; background: rgba(255,255,255,.12); margin: 1.2em auto .8em; }
#loader .bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .3s; }
#loader .s { font-size: 14px; color: var(--dim); }
#cine { position: fixed; inset: 0; z-index: 55; background: #000; display: none; }
#cine.show { display: block; }
#cine video { width: 100%; height: 100%; object-fit: cover; }
#cine .skip { position: absolute; right: 1.4em; bottom: 1.2em; font-size: 14px; color: rgba(255,255,255,.65); }
#cine .tap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; font-size: calc(var(--u) * 4); padding: .8em 1.4em; border: 2px solid var(--gold); color: var(--gold2); background: rgba(0,0,0,.7); border-radius: .5em; cursor: pointer; }
#cine.blocked .tap { display: block; }

/* ---------- Edit ---------- */
#editbar { position: fixed; left: 50%; top: 3.2em; transform: translateX(-50%); z-index: 40; display: none; align-items: center; gap: .4em; flex-wrap: wrap; justify-content: center; max-width: 96vw; padding: .5em .8em; font-size: 13px; background: rgba(12,10,6,.95); border: 1px solid var(--gold); border-radius: .5em; }
body.edit #editbar { display: flex; }
#editbar button { background: #2a2418; color: var(--ink); border: 1px solid rgba(243,195,91,.5); border-radius: .3em; padding: .3em .6em; cursor: pointer; font-size: 13px; }
#editbar b { color: var(--gold); }
#editbar .sep { width: 1px; height: 1.4em; background: rgba(255,255,255,.2); }
#editbar small { color: var(--dim); width: 100%; text-align: center; }
body.edit .panel.on [data-k] { outline: 1px dashed rgba(243,195,91,.55); outline-offset: 3px; cursor: text; }
body.edit .panel.on [data-k]:focus { outline: 2px solid var(--gold); background: rgba(0,0,0,.3); }
body.edit .panel.on .box { cursor: move; }
#segEditor { position: fixed; right: 1em; top: 6.5em; z-index: 41; width: min(440px, 92vw); display: none; background: rgba(12,10,6,.97); border: 1px solid var(--gold); border-radius: .5em; padding: .8em; font-size: 14px; }
#segEditor.show { display: block; }
#segEditor textarea { width: 100%; font: 16px var(--sans); background: #1b170f; color: var(--ink); border: 1px solid rgba(243,195,91,.4); border-radius: .3em; padding: .5em; }
#segEditor .acts { display: flex; gap: .4em; margin-top: .5em; }
#segEditor button { background: #2a2418; color: var(--ink); border: 1px solid rgba(243,195,91,.5); border-radius: .3em; padding: .3em .6em; cursor: pointer; }
#toast { position: fixed; left: 50%; bottom: 3em; transform: translateX(-50%); z-index: 70; background: var(--gold); color: #111; font-weight: 700; padding: .5em 1em; border-radius: .4em; opacity: 0; transition: opacity .3s; pointer-events: none; font-size: 15px; }

/* ---------- màn dọc (điện thoại) ---------- */
@media (max-aspect-ratio: 4/5) {
  .panel { padding: 14vw 5vw 10vw; justify-content: center; }
  .w62, .k-quote .box, .k-quote.with-img .box, .notifs, .lawbox, .defs { max-width: none; }
  .k-photo .box, .k-law .box, .k-split .box, .qwrap { grid-template-columns: 1fr; gap: 4vw; }
  .qwrap .pic { height: 30vh; order: -1; }
  .k-photo .pic, .k-law .pic { height: 30vh; order: -1; }
  .cols, .statrow { grid-template-columns: 1fr; gap: 2.4vw; }
  .k-door .pics, .k-stats .pics { grid-template-columns: repeat(3, 1fr); height: 16vh; }
  .k-gallery .pics { height: 26vh; }
  .opts { grid-template-columns: 1fr; }
  .case { grid-template-columns: 9vw 1fr 30vw; }
  .def { grid-template-columns: 1fr; gap: 0; }
  .facts { grid-template-columns: 1fr 1fr; }
  #topnav .brand, #where, #hint { display: none; }
  #rail { display: none; }
  .chapnum { font-size: 40vw; }
}

/* ===== vòng 2: chữ từng từ, đánh dấu, biểu tượng biến hình ===== */
.w { display: inline-block; }
.wi { display: inline-block; will-change: transform; }
.h em, .h b, .ln em, .ln b, .lead b, .qtext em, .mega em { background: linear-gradient(transparent 64%, rgba(243,195,91,.26) 64%, rgba(243,195,91,.26) 94%, transparent 94%) no-repeat 0 0 / 0% 100%; transition: background-size .9s cubic-bezier(.2,.8,.2,1); }
.marked em, .marked b, .panel.lit .lead b { background-size: 100% 100%; }
.h em.red { background-image: linear-gradient(transparent 64%, rgba(255,74,61,.3) 64%, rgba(255,74,61,.3) 94%, transparent 94%); }
.kickrow { display: flex; align-items: center; gap: calc(var(--u) * 1.6); margin-bottom: calc(var(--u) * 1.6); }
.kickrow .kicker { margin-bottom: 0; }
.kicker.has-emb::before { display: none; }
.emb { width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); flex: none; filter: drop-shadow(0 0 .5em rgba(243,195,91,.45)); overflow: visible; }
.emb path { stroke: #ffe3a1; stroke-width: 1.4; stroke-linejoin: round; }
.bigemb { width: calc(var(--u) * 22); height: calc(var(--u) * 22); display: block; margin: 0 auto calc(var(--u) * 1); overflow: visible; --ec: var(--gold); filter: drop-shadow(0 0 1.2em var(--ec)); }
.bigemb path { stroke: var(--ec); stroke-width: 1.6; stroke-linejoin: round; transition: stroke .4s; }
.k-chapter .chapnum { font-family: var(--sans); font-weight: 700; font-size: calc(var(--u) * 3.2); letter-spacing: .35em; text-transform: uppercase; color: var(--gold); -webkit-text-stroke: 0; text-shadow: none; line-height: 1.2; }
#topnav { opacity: 0; } #topnav:hover { opacity: 1; }
#rail { opacity: 0; } #rail:hover { opacity: .9; }
#where, #enterHint { display: none !important; }

/* ===== bản nhẹ (điện thoại / máy không 3D): nền chuyển màu theo chương ===== */
body.no3d { background: #05070d; transition: background 1.2s; }
body.no3d::before { content: ''; position: fixed; inset: -20%; z-index: 0; background: radial-gradient(40% 35% at 30% 30%, var(--g1, rgba(60,80,140,.55)), transparent 70%), radial-gradient(45% 40% at 75% 70%, var(--g2, rgba(160,110,40,.35)), transparent 70%); animation: drift 18s ease-in-out infinite alternate; transition: background 1.2s; }
@keyframes drift { from { transform: translate(-3%, -2%) scale(1); } to { transform: translate(3%, 2%) scale(1.08); } }
body.no3d[data-ch="mo"] { --g1: rgba(50,70,130,.6); --g2: rgba(120,90,40,.3); }
body.no3d[data-ch="p1"] { --g1: rgba(90,60,160,.55); --g2: rgba(200,160,255,.18); }
body.no3d[data-ch="p2"] { --g1: rgba(40,70,120,.6); --g2: rgba(180,90,40,.35); }
body.no3d[data-ch="p3"] { --g1: rgba(90,50,110,.5); --g2: rgba(200,150,50,.3); }
body.no3d[data-kind="door-red"], body.no3d[data-kind="alert"] { --g1: rgba(150,20,20,.6); --g2: rgba(90,10,10,.5); }
body.no3d[data-ch="p4"] { --g1: rgba(40,70,140,.55); --g2: rgba(170,100,70,.3); }
body.no3d[data-ch="ket"] { --g1: rgba(40,60,120,.55); --g2: rgba(200,120,50,.3); }
body.no3d #topnav { opacity: .85; }
.mega { padding: .1em .06em .18em; margin-top: -.1em; margin-bottom: calc(var(--u) * 3 - .18em); }

.k-split .kickrow { grid-column: 1 / -1; }
@media (max-aspect-ratio: 4/5) { .panel .box { width: 100%; } .k-door .pics, .k-stats .pics { height: 20vh; } }
.pic { margin: 0; }