/* Hồ sen đêm · giao diện app thiennoi.com (bộ 11 của Thiết kế Giao diện, Đức chọn 26/10/2026, QD9e2f0f9).
   Token chép từ out/2026-10-26_5-bo-moi/ho-sen-dem-tokens.css; hình sen, nụ, vân nước nằm ở sprite.svg (tools/gom_sprite.py).
   Đổi màu, phông hay hình sen: 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-loi: #9E0F4F; --hs-sen-than: #E9468A; --hs-sen-sang: #FFB0CF; --hs-sen-mep: #FFF1F7; --hs-sen-man: #2A0A1E;
  --hs-sen-nhan: #FFD0E2;
  --hs-gio: #3FE0B5; --hs-gio-sang: #9FF5DA; --hs-nang: #FFC861; --hs-lua: #FF6A3A;
  --hs-serif: "Taviraj", Georgia, serif; --hs-sans: "Manrope", system-ui, sans-serif;
  --hs-nhip: 11s; --hs-em: cubic-bezier(.37, 0, .63, 1); --hs-troi-nuoc: 72s; --hs-song: 26s; --hs-chuyen: .6s;
  --hs-cham: 44px; --hs-le: 24px;
  --hs-quang-nut: 0 0 0 1px rgba(255, 194, 218, .5), 0 0 28px rgba(255, 111, 168, .45), 0 0 80px rgba(233, 70, 138, .3);
  color-scheme: dark;
}
/* app luôn là mặt 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; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
svg { color-interpolation-filters: sRGB; overflow: visible; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--hs-chu); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* chờ phông tải xong mới hiện chữ lớn (Taviraj swap có thể hiện "Thiền" thiếu dấu một nhịp) */
html.cho-phong .serif-lon { visibility: hidden; }

/* ---------- mặt hồ: lớp nền cố định ---------- */
.ho { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; transition: background 1.2s var(--hs-em);
      background: linear-gradient(180deg, #0B2C3C 0%, #071F2B 32%, #04131C 68%, #030D15 100%); }
.ho[data-nen="mo-dau"]  { background: linear-gradient(180deg, #0E3346 0%, #082331 30%, #05151F 62%, #030D15 100%); }
.ho[data-nen="ban-do"]  { background: linear-gradient(180deg, #120A1A 0%, #1E0B1E 12%, #1A4A5E 26%, #0E3242 38%, #082230 56%, #04121C 78%, #020A10 100%); }
.ho[data-nen="tu-soi"]  { background: linear-gradient(180deg, #0E3346 0%, #0A2735 18%, #071C27 40%, #05131B 62%, #140A12 86%, #1A0A14 100%); }
.ho[data-nen="ky-thuat"] { background: linear-gradient(180deg, #0B2C3C 0%, #071F2B 34%, #05161F 52%, #041A1A 74%, #030D15 100%); }
.caustic { position: absolute; left: 50%; top: -150px; width: 760px; height: 1160px; margin-left: -380px; opacity: .15;
           mix-blend-mode: screen; will-change: transform; animation: hs-troi var(--hs-troi-nuoc) var(--hs-em) infinite alternate;
           -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 85%); }
.caustic.c2 { opacity: .35; animation: hs-troi2 96s var(--hs-em) infinite alternate; }
@keyframes hs-troi { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(-70px, 46px, 0) rotate(3deg); } }
@keyframes hs-troi2 { from { transform: translate3d(0, 0, 0) scale(1.04); } to { transform: translate3d(56px, -40px, 0) scale(1.1); } }
@media (min-width: 700px) { .caustic { transform-origin: 50% 0; width: 1400px; margin-left: -700px; } }
.tint { position: absolute; inset: 0; transition: background 1.2s var(--hs-em); }
.loang { position: absolute; border-radius: 50%; animation: hs-loang var(--hs-nhip) var(--hs-em) infinite; }
@keyframes hs-loang { 0%, 100% { opacity: .8; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }

.song { animation: hs-song var(--hs-song) linear infinite; }
.song.nguoc { animation-duration: 38s; animation-direction: reverse; }
@keyframes hs-song { to { transform: translateX(-96px); } }
.song-wrap { position: relative; height: 16px; overflow: hidden; margin: 0 calc(-1 * var(--hs-le)); pointer-events: none; }
.song-wrap svg { position: absolute; left: 0; top: 0; }

/* ---------- chuyển động sen ---------- */
.halo { mix-blend-mode: screen; animation: hs-quang var(--hs-nhip) var(--hs-em) infinite; }
@keyframes hs-quang { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
.bl, .ol, .or, .il, .ir { transform-box: view-box; transform-origin: 0 0; animation-duration: var(--hs-nhip); animation-timing-function: var(--hs-em); animation-iteration-count: infinite; }
.bl { animation-name: hs-bl; } .ol { animation-name: hs-ol; } .or { animation-name: hs-or; } .il { animation-name: hs-il; } .ir { animation-name: hs-ir; }
@keyframes hs-bl { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.05); } }
@keyframes hs-ol { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-6deg); } }
@keyframes hs-or { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(6deg); } }
@keyframes hs-il { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-4deg); } }
@keyframes hs-ir { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(4deg); } }
.shard { animation: hs-shard 8s linear infinite; }
@keyframes hs-shard { 0% { transform: translate(0, 0); opacity: .95; } 100% { transform: translate(40px, -30px); opacity: .1; } }
.flow { stroke-dasharray: 22 150; animation: hs-flow 6s linear infinite; }
.flow.f2 { stroke-dasharray: 12 90; animation-duration: 4.4s; animation-direction: reverse; }
@keyframes hs-flow { to { stroke-dashoffset: -344; } }
.sway { transform-box: view-box; transform-origin: 0 0; animation: hs-sway var(--hs-nhip) var(--hs-em) infinite; }
@keyframes hs-sway { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.06, 1.03); } }
.spin { transform-box: view-box; transform-origin: 0 -34px; animation: hs-spin 90s linear infinite; }
@keyframes hs-spin { to { transform: rotate(360deg); } }
.flick { transform-box: view-box; transform-origin: 10px -30px; animation: hs-flick 3.2s var(--hs-em) infinite alternate; }
@keyframes hs-flick { from { transform: skewY(0deg) scale(1, 1); } to { transform: skewY(-4deg) scale(1.06, .96); } }
.bob { animation: hs-bob 9s var(--hs-em) infinite; }
@keyframes hs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.lift { animation: hs-lift var(--hs-nhip) var(--hs-em) infinite; }
@keyframes hs-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.pulse { stroke-dasharray: 36 460; animation: hs-pulse 5.5s var(--hs-em) infinite; }
@keyframes hs-pulse { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -430; } }

/* ---------- chữ ---------- */
.nhan { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--hs-chu-3); }
.nhan i { font-style: normal; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--hs-sen-nhan); margin-left: 8px; }
.tieu-de { font-family: var(--hs-serif); font-weight: 200; font-size: clamp(44px, 13vw, 56px); line-height: 1.1; letter-spacing: -.02em; }
.tieu-de em, .nghieng { font-style: italic; }
.phu { font-size: 14px; line-height: 1.55; color: var(--hs-chu-2); max-width: 34em; }
.meta { font-size: 12px; line-height: 16px; color: var(--hs-chu-3); }

/* ---------- nút ---------- */
.pill { display: inline-flex; align-items: center; gap: 10px; min-height: var(--hs-cham); padding: 0 18px 0 6px; border-radius: 999px;
        border: 1px solid rgba(255, 194, 218, .34); background: rgba(58, 10, 34, .5); font-size: 13px; letter-spacing: .02em; color: #FFE1EC; }
.pill .pb { width: 34px; height: 34px; border-radius: 50%; background: #FFF1F7; color: var(--hs-sen-man); display: flex; align-items: center; justify-content: center; flex: none; }
.pill:hover { color: #fff; border-color: rgba(255, 214, 230, .7); }
.pill[data-nt="gio"] { background: rgba(10, 60, 52, .45); border-color: rgba(159, 245, 218, .36); color: #DFFBF1; }
.pill[data-nt="gio"] .pb { background: #DFFBF1; color: #04201B; }
.pill[data-nt="lua"] { background: rgba(70, 16, 8, .45); border-color: rgba(255, 160, 110, .38); color: #FFE6D8; }
.pill[data-nt="lua"] .pb { background: #FFE6D8; color: #3A0E06; }
.pill[data-nt="nang"] { background: rgba(70, 44, 8, .45); border-color: rgba(255, 210, 120, .4); color: #FFF2D2; }
.pill[data-nt="nang"] .pb { background: #FFF2D2; color: #3A2406; }
.thang-may { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px 0 6px; border-radius: 999px; background: var(--hs-chu);
             color: var(--hs-nuoc-dem); font-size: 14px; font-weight: 600; box-shadow: 0 0 0 1px rgba(255, 194, 218, .4), 0 0 40px rgba(233, 70, 138, .28); }
.thang-may .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--hs-sen-man); display: flex; align-items: center; justify-content: center; flex: none; }
.thang-may:hover { background: #fff; color: var(--hs-nuoc-dem); }
.lui { display: inline-flex; align-items: center; gap: 6px; min-height: var(--hs-cham); padding: 0 10px 0 0; font-size: 13px; letter-spacing: .03em; color: rgba(240, 238, 233, .82); }
.wavy { text-decoration: underline wavy rgba(240, 238, 233, .55); text-decoration-thickness: 1px; text-underline-offset: 7px; }
.wavy:hover { text-decoration-color: var(--hs-chu); }

/* ---------- thanh điều hướng ---------- */
.nav { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); transform: translateX(-50%); z-index: 20; display: flex; gap: 2px; padding: 4px;
       border-radius: 999px; background: rgba(3, 13, 21, .72); border: 1px solid var(--hs-vien-mo); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav a { min-height: var(--hs-cham); padding: 0 15px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 13px; color: var(--hs-chu-2); white-space: nowrap; }
.nav a[aria-current="page"] { background: var(--hs-chu); color: var(--hs-nuoc-dem); }
@media (max-width: 360px) { .nav a { padding: 0 11px; font-size: 12px; } }

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