/* Giao diện anime · app thiennoi.com (Thiết kế Giao diện, Đức chốt 26/10/2026, QD4ffef28: "bản anime 10 màn là đúng ý").
   Hướng dẫn: out/2026-10-26_giao-dien-anime/HUONG-DAN-CHO-APP-THIEN.md. Chữ, phông, màu chữ, nhịp thở 11 giây giữ như Hồ sen đêm;
   hình là bờ hồ đêm vẽ tay (img/*.webp). Đổi màu, phông hay hình: nhắn Thiết kế Giao diện (ui-ux), đừng tự đổi. */
:root {
  --hs-nuoc-day: #030D15; --hs-nuoc-dem: #04121C; --hs-nuoc-muoi: #0E3346;
  --hs-chu: #F0EEE9; --hs-chu-2: rgba(240, 238, 233, .80); --hs-chu-3: rgba(240, 238, 233, .72);
  --hs-vien: rgba(240, 238, 233, .22); --hs-vien-mo: rgba(240, 238, 233, .16);
  --hs-sen-man: #2A0A1E; --hs-sen-nhan: #FFD0E2; --hs-gio-sang: #9FF5DA;
  --hs-serif: "Taviraj", Georgia, serif; --hs-sans: "Manrope", system-ui, sans-serif;
  --hs-nhip: 11s; --hs-em: cubic-bezier(.37, 0, .63, 1);
  --hs-cham: 44px; --hs-le: 24px;
  --an-kem: #F7F0E6; --an-am: #FFE3C4; --an-hong: #FFE7EF;
  --an-the: linear-gradient(180deg, rgba(14, 40, 58, .62), rgba(4, 16, 26, .72));
  color-scheme: dark;
}
/* app luôn là hồ đêm, chế độ sáng cũng vậy */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hs-chu: #F0EEE9; } }
:root[data-theme="dark"] { --hs-chu: #F0EEE9; }

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--hs-nuoc-day); }
body { min-height: 100vh; min-height: 100dvh; background: var(--hs-nuoc-day); color: var(--hs-chu); font-family: var(--hs-sans);
       font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--hs-chu); text-decoration: none; }
a:hover { color: #fff; }
button, textarea { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, textarea:focus-visible { outline: 1px solid var(--hs-chu); outline-offset: 3px; border-radius: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.cho-phong .serif-lon { visibility: hidden; }   /* chờ Taviraj tải xong, khỏi hiện "Thiền" thiếu dấu */

/* ---------- nền hồ đêm dọc: lớp cố định, mỗi màn chỉnh độ lệch và độ tối ---------- */
.ho { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--hs-nuoc-day); }
.ho .nen { position: absolute; inset: 0; background: url(/assets/anime/img/nen_doc.webp) 50% 0 / cover no-repeat;
           transform: translateY(var(--y, 0)); transition: transform 1.2s var(--hs-em); }
.ho .mo { position: absolute; inset: 0; transition: background 1.2s var(--hs-em);
          background: linear-gradient(180deg, rgba(3, 13, 21, var(--t, .45)) 0, rgba(3, 13, 21, 0) 34%, rgba(3, 13, 21, var(--b, .55)) 100%); }
.ho .tan { position: absolute; left: 0; right: 0; top: 30vh; height: 38.5vh; opacity: 0; transition: opacity 1.2s var(--hs-em);   /* mép dưới ảnh đã đẩy lên nằm ở 68vh */
           background: linear-gradient(180deg, rgba(3, 13, 21, 0), #030D15 92%); }
.ho[data-nen="mo-dau"]    { --t: .35; --b: .25; }
.ho[data-nen="sanh"]      { --t: .5; --b: .85; --y: 14vh; }
.ho[data-nen="phong-tap"] { --t: .5; --b: .92; --y: -12vh; }
.ho[data-nen="con-duong"] { --t: .6; --b: .92; --y: 10vh; }
.ho[data-nen="thang-may"] { --t: .45; --b: .9; --y: -11vh; }
.ho[data-nen="cua-toi"]   { --t: .45; --b: .35; }
/* hình chính ở giữa phía trên: đẩy nền lên cho trăng ra khỏi khung, mép dưới tan vào nước tối */
.ho[data-nen="tu-soi"], .ho[data-nen="ky-thuat"], .ho[data-nen="chuong"] { --y: -32vh; --b: .94; --t: .72; }
.ho[data-nen="tu-soi"] .tan, .ho[data-nen="ky-thuat"] .tan, .ho[data-nen="chuong"] .tan { opacity: 1; }

/* ---------- khung màn: cột 390–480 px giữa màn, nền tràn hai bên ---------- */
#man { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
       padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--hs-le) calc(env(safe-area-inset-bottom, 0px) + 112px); }
#man.khong-nav { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); }
.dau { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.hieu { font-size: 12px; letter-spacing: .32em; color: var(--hs-chu-2); }
.lui { display: inline-flex; align-items: center; gap: 6px; min-height: var(--hs-cham); padding-right: 10px; font-size: 13px; color: rgba(240, 238, 233, .8); }
.ngon { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; font-size: 12px; letter-spacing: .2em; color: var(--hs-chu-2); }
.tron { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(240, 238, 233, .3); }

/* ---------- chữ ---------- */
.an-h { font-family: var(--hs-serif); font-weight: 200; line-height: 1.1; color: var(--hs-chu); }
.an-h i, .an-h em { font-style: italic; font-weight: 200; }
.nhan { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--hs-chu-3); }
.phu { font-size: 14px; line-height: 1.6; color: var(--hs-chu-2); }
.meta { font-size: 12px; line-height: 16px; color: var(--hs-chu-3); }
.bong-chu { text-shadow: 0 1px 8px rgba(3, 13, 21, .85), 0 0 18px rgba(3, 13, 21, .6); }

/* ---------- nút ---------- */
.an-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 22px 6px 6px; border-radius: 999px; background: var(--an-kem); color: #1B0E14;
          font: 600 15px var(--hs-sans); box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 0 24px rgba(255, 190, 215, .35), 0 0 60px rgba(233, 70, 138, .22); transition: transform .4s var(--hs-em); }
.an-btn:hover { color: #1B0E14; background: #fff; }
.an-btn:active { transform: scale(.97); }
.an-btn .o { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #FFE9C2, #FF9A6B 60%, #E9468A); color: var(--hs-sen-man); }
.an-btn.rong { display: flex; width: 100%; }
.an-btn2 { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(240, 238, 233, .3);
           background: rgba(4, 18, 28, .42); color: var(--hs-chu); font: 500 13px var(--hs-sans); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.an-btn2:hover { border-color: rgba(240, 238, 233, .6); }
.an-btn2[aria-pressed="true"] { background: rgba(255, 170, 90, .18); border-color: rgba(255, 190, 120, .7); color: var(--an-am); }
.an-the { position: relative; display: block; border-radius: 22px; background: var(--an-the);
          box-shadow: inset 0 0 0 1px rgba(240, 238, 233, .14), 0 18px 40px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
a.an-the:hover { box-shadow: inset 0 0 0 1px rgba(240, 238, 233, .32), 0 18px 40px rgba(0, 0, 0, .35); }
.gach { border-bottom: 1px solid rgba(240, 238, 233, .4); }

/* ---------- quầng sáng nhiều lớp: lõi trắng ấm → màu nguyên tố → loang rộng, hoà screen ---------- */
.quang { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; --c: 255, 190, 215; --a: .5;
         background: radial-gradient(closest-side, rgba(255, 250, 240, calc(var(--a) * .9)), rgba(var(--c), calc(var(--a) * .6)) 30%, rgba(var(--c), calc(var(--a) * .18)) 62%, rgba(var(--c), 0)); }
.vat { position: absolute; pointer-events: none; height: auto; }
.nguoi { filter: brightness(.82) saturate(.9) drop-shadow(0 0 2px rgba(190, 220, 240, .5)); }

/* ---------- chuyển động: sen thở 11 giây, đèn trôi 9 giây, quầng nhấp nháy 4,2 giây ---------- */
.an-tho { animation: an-tho var(--hs-nhip) var(--hs-em) infinite; }
@keyframes an-tho { 0%, 100% { transform: scale(.94); opacity: .78; } 50% { transform: scale(1.06); opacity: 1; } }
.an-lap { animation: an-lap 4.2s var(--hs-em) infinite alternate; }
@keyframes an-lap { from { opacity: .6; } to { opacity: 1; } }
.an-troi { animation: an-troi 9s var(--hs-em) infinite alternate; }
@keyframes an-troi { from { transform: translateY(0); } to { transform: translateY(-4px); } }

/* ---------- thanh điều hướng: 4 tab bằng hình vẽ ---------- */
.nav { position: fixed; z-index: 20; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); transform: translateX(-50%);
       width: min(calc(100% - 28px), 452px); height: 76px; display: flex; border-radius: 28px; background: rgba(3, 12, 20, .72);
       box-shadow: inset 0 0 0 1px rgba(240, 238, 233, .14), 0 10px 30px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 9px; font-size: 11px; color: rgba(240, 238, 233, .66); }
.nav a img { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); height: 38px; width: auto; opacity: .72; filter: saturate(.7); transition: opacity .4s, filter .4s; }
.nav a[aria-current="page"] { color: var(--an-hong); }
.nav a[aria-current="page"] img { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 200, 170, .55)); }
.nav a[aria-current="page"]::before { content: ""; position: absolute; top: 8px; left: 50%; width: 60px; height: 40px; margin-left: -30px; border-radius: 50%;
       background: radial-gradient(closest-side, rgba(255, 190, 150, .42), rgba(233, 70, 138, .14) 60%, rgba(233, 70, 138, 0)); }
.nav a:hover { color: var(--hs-chu); }
.nav a:hover img { opacity: 1; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }