:root{--s1:#0a1640;--s2:#1b3a82;--swirl:#6a9be6;--swirl2:#f2d45c;--star:#ffe27a;--moon:#ffd95a;--panel:rgba(10,22,60,.84);--tx:#f4efd2;--mu:#b7c4e8;--ac:#ffd95a;--bd:rgba(255,217,90,.32);--bt:#ffd95a;--btx:#0a1640}
:root[data-theme=day]{--s1:#cfe3f7;--s2:#f6e7a8;--swirl:#ffffff;--swirl2:#2d5aa8;--star:#e8b923;--moon:#f6b91d;--panel:rgba(255,251,236,.9);--tx:#1b2a52;--mu:#55648f;--ac:#1f4aa8;--bd:rgba(31,74,168,.3);--bt:#1f4aa8;--btx:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Lora,Georgia,"Times New Roman",serif;color:var(--tx);background:var(--s1);line-height:1.7;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;min-height:100vh}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:-1;background:linear-gradient(170deg,var(--s1),var(--s2))}
#sky .sw{fill:none;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:spin 240s linear infinite}
#sky .sw2{animation-duration:360s;animation-direction:reverse}
#sky .st{fill:var(--star);transform-box:fill-box;transform-origin:center;animation:tw 3.2s ease-in-out infinite}
#sky .st.h{animation-name:th;animation-duration:4.5s}
#sky .sh{opacity:0;filter:drop-shadow(0 0 8px var(--star));animation:sh 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes tw{0%,100%{opacity:1;transform:scale(1.25)}50%{opacity:.12;transform:scale(.5)}}
@keyframes th{0%,100%{opacity:.4;transform:scale(1.3)}50%{opacity:.08;transform:scale(.7)}}
@keyframes sh{0%{opacity:0;transform:translate(420px,40px)}8%{opacity:1}55%{opacity:1}70%{opacity:0;transform:translate(1000px,330px)}100%{opacity:0;transform:translate(1000px,330px)}}
@media(prefers-reduced-motion:reduce){#sky *{animation:none!important}}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;max-width:860px;margin:0 auto}
.brand{font-size:1.35rem;font-weight:bold;color:var(--ac);text-decoration:none;letter-spacing:.3px}
.brand span{font-weight:normal;font-style:italic;color:var(--tx);font-size:1rem}
.gtl{margin-left:auto;color:var(--tx);text-decoration:none;font-size:.95rem}
.gtl:hover{color:var(--ac)}
#cnt{margin-bottom:6px}
.gt h2{color:var(--ac);font-size:1.25rem;margin:1.4em 0 .5em}
.gt p{margin:0 0 .9em}
.gt a{color:var(--ac)}
.gt ul{padding-left:1.2em;margin:0 0 1em}
#mode{background:var(--panel);border:1px solid var(--bd);color:var(--tx);border-radius:20px;padding:6px 14px;font:inherit;font-size:.95rem;cursor:pointer}
main{max-width:860px;margin:0 auto;padding:8px 16px 120px}
footer{text-align:center;color:var(--mu);font-size:.8rem;padding:0 16px 24px}
h1,h2,h3{line-height:1.3}
.hero{text-align:center;padding:18px 0 8px}
.hero h1{font-size:2.6rem;margin:.2em 0;color:var(--ac);text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero p{margin:0;color:var(--tx);font-style:italic;font-size:1.4rem;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.gtw{margin:18px 0 0}
.gtw+.groups{margin-top:12px}
.card,.nav a,.grp{background:var(--panel);border:1px solid var(--bd);border-radius:14px;backdrop-filter:blur(4px)}
.groups{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
@media(max-width:520px){.grp{padding:12px 6px}.grp b{font-size:1.05rem}.grp small{font-size:.75rem}}
.grp{display:block;padding:18px;text-align:center;color:var(--tx);text-decoration:none;transition:transform .15s}
.grp:hover{transform:translateY(-3px);border-color:var(--ac)}
.grp b{display:block;font-size:1.3rem;color:var(--ac)}
.grp small{color:var(--mu)}
.sec{font-size:1.1rem;color:var(--ac);margin:26px 0 10px}
.card{display:block;padding:16px 18px;margin:0 0 12px;color:var(--tx);text-decoration:none}
a.card:hover{border-color:var(--ac)}
.card h3{margin:0 0 6px;font-size:1.2rem;color:var(--ac)}
.card p{margin:6px 0 0;font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{font:inherit;font-size:.82rem;padding:3px 11px;border-radius:14px;border:1px solid var(--bd);background:transparent;color:var(--tx);text-decoration:none;cursor:pointer}
.chip.on,.chip:hover{background:var(--bt);color:var(--btx);border-color:var(--bt)}
.meta{color:var(--mu);font-size:.85rem}
.btn{display:inline-block;font:inherit;background:var(--bt);color:var(--btx);border:0;border-radius:22px;padding:8px 20px;cursor:pointer;text-decoration:none}
.btn.o{background:transparent;color:var(--tx);border:1px solid var(--bd)}
.btn:disabled{opacity:.4;cursor:default}
.chl{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;margin-top:12px}
.chl a{padding:8px 12px;border-radius:10px;border:1px solid var(--bd);background:var(--panel);color:var(--tx);text-decoration:none;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chl a:hover,.chl a.cur{border-color:var(--ac);color:var(--ac)}
.crumb{font-size:.9rem;margin:10px 0}
.crumb a{color:var(--ac);text-decoration:none}
/* trang doc */
.rd{background:var(--panel);border:1px solid var(--bd);border-radius:16px;padding:22px 22px 12px;margin:10px 0;font-size:var(--fs,1.15rem)}
.rd h2{text-align:center;color:var(--ac);margin:.2em 0 1em}
.hint{font-size:.85rem;color:var(--mu);text-align:center;margin:0 0 18px;font-style:italic}
.p{position:relative;margin:0 0 .9em;text-align:justify;-webkit-user-select:text;user-select:text}
.p .t{-webkit-user-select:text;user-select:text}
.p .t i{font-style:italic}
.p .n{border-bottom:2px dotted var(--ac)}
.p .k{background:#000;color:#fff;border-radius:3px;box-shadow:0 0 0 1px var(--ac)}
.bd{-webkit-user-select:none;user-select:none;margin-left:6px;font:inherit;font-size:.75rem;background:var(--bt);color:var(--btx);border:0;border-radius:10px;padding:0 8px;cursor:pointer;vertical-align:middle}
.nl{-webkit-user-select:none;user-select:none;margin:6px 0 12px 12px;padding:8px 12px;border-left:3px solid var(--ac);font-size:.88rem;text-align:left;background:rgba(127,127,127,.12);border-radius:0 8px 8px 0}
.nl q{color:var(--mu);font-style:italic}
.nl div{margin:6px 0}
.nl small{color:var(--mu)}
hr.dv{border:0;text-align:center;margin:1.4em 0;color:var(--ac)}
hr.dv:after{content:"✦ ✦ ✦"}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;margin:10px 0}
.tools select{font:inherit;background:var(--panel);color:var(--tx);border:1px solid var(--bd);border-radius:10px;padding:6px;max-width:100%}
/* hop nhan */
#box{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:min(560px,calc(100% - 20px));background:var(--panel);border:1px solid var(--ac);border-radius:14px;padding:12px;z-index:5;backdrop-filter:blur(8px);box-shadow:0 6px 28px rgba(0,0,0,.4);-webkit-user-select:text;user-select:text}
#box[hidden],#toast[hidden]{display:none}
#bq{font-size:.85rem;color:var(--mu);font-style:italic;margin-bottom:6px}
#box input,#box textarea{width:100%;font:inherit;font-size:.95rem;background:rgba(127,127,127,.15);color:var(--tx);border:1px solid var(--bd);border-radius:8px;padding:6px 8px;margin-bottom:6px;resize:none}
#box .row{display:flex;gap:8px;align-items:center}
#bc{flex:1;font-size:.8rem;color:var(--mu)}
#box button{font:inherit;border-radius:18px;padding:5px 16px;cursor:pointer;border:1px solid var(--bd);background:transparent;color:var(--tx)}
#box #bs{background:var(--bt);color:var(--btx);border-color:var(--bt)}
textarea,input{-webkit-user-select:text;user-select:text}
.rv{margin-top:18px}
.ri{margin:0 0 10px;padding:8px 12px;border-left:3px solid var(--ac);background:rgba(127,127,127,.12);border-radius:0 8px 8px 0;font-size:.92rem}
.ri small{color:var(--mu)}
.rf input,.rf textarea{width:100%;font:inherit;font-size:.95rem;background:rgba(127,127,127,.15);color:var(--tx);border:1px solid var(--bd);border-radius:8px;padding:6px 8px;margin-bottom:6px;resize:none}
.rf .row{display:flex;align-items:center;gap:8px}
.rf .rc{flex:1;font-size:.8rem;color:var(--mu)}
#toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:var(--bt);color:var(--btx);padding:8px 18px;border-radius:20px;z-index:9;font-size:.9rem}
@media print{body *{display:none!important}}
@media(max-width:520px){.rd{padding:16px 14px 6px}.hero h1{font-size:2rem}.hero p{font-size:1.15rem}.brand span{display:block}}
.dis{opacity:.4;pointer-events:none}