:root{--nen:#0d0918;--the:#1a1230cc;--the2:#251a42;--vien:#3a2a63;--chu:#f3eefc;--mo:#b3a8cf;--vang:#f5c04e;--vang2:#ffe29a;--tim:#6b3fd1;--do:#e5484d}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--chu);font:16px/1.65 "Be Vietnam Pro",system-ui,sans-serif;background:var(--nen);
 background-image:radial-gradient(1100px 600px at 85% -10%,#4a2a9a55,transparent 60%),radial-gradient(900px 500px at -10% 30%,#7a2d8a33,transparent 60%),
 radial-gradient(1px 1px at 20% 30%,#fff8 50%,transparent),radial-gradient(1px 1px at 70% 60%,#fff6 50%,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#ffe29a88 50%,transparent),radial-gradient(1px 1px at 90% 20%,#fff7 50%,transparent);
 background-attachment:fixed}
a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}
.khung{max-width:1200px;margin:auto;padding:0 18px}
header{position:sticky;top:0;z-index:30;background:#0d0918b8;backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid #ffffff12}
header .khung{display:flex;align-items:center;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;letter-spacing:.2px}
.logo img{width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 2px #f5c04e66,0 0 18px #f5c04e44}
.logo span{background:linear-gradient(90deg,var(--vang2),var(--vang));-webkit-background-clip:text;background-clip:text;color:transparent}
nav{margin-left:auto;display:flex;gap:6px;font-size:15px}nav a{padding:8px 14px;border-radius:30px;color:var(--mo);transition:.2s}nav a:hover{color:var(--chu);background:#ffffff10}
.hero{position:relative;overflow:hidden;border-bottom:1px solid #ffffff10}
.hero .nen{position:absolute;inset:-40px;background:center/cover;filter:blur(30px) brightness(.45) saturate(1.3);transform:scale(1.1)}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,var(--nen)),linear-gradient(90deg,#0d0918e6 35%,#0d091833)}
.hero .khung{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;padding:56px 18px 64px}
.hero .bia{justify-self:center;width:min(300px,100%);border-radius:18px;transform:rotate(3deg);box-shadow:0 30px 60px #000a,0 0 0 1px #ffffff22,0 0 60px #6b3fd155;transition:.4s}
.hero .bia:hover{transform:rotate(0) scale(1.02)}
.noi-bat{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vang);background:#f5c04e1c;border:1px solid #f5c04e44;padding:5px 12px;border-radius:30px}
.gioi-web{margin-top:56px;padding:26px 28px;background:var(--the);border:1px solid #ffffff14;border-radius:18px;color:var(--mo);font-size:15px}
.gioi-web h1{font-size:20px;margin:0 0 8px;color:var(--chu)}.gioi-web a{color:var(--vang)}
.hero h1,.hero .ten{font-size:clamp(30px,4.6vw,52px);line-height:1.12;margin:16px 0 14px;font-weight:800;background:linear-gradient(100deg,#fff 10%,var(--vang2) 45%,var(--vang));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .gt{color:#d9d0ee;font-size:17px;max-width:620px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hang{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tieu-de{display:flex;align-items:center;gap:12px;margin:44px 0 18px}.tieu-de h2{margin:0;font-size:24px;font-weight:800}
.tieu-de::before{content:'';width:5px;height:26px;border-radius:4px;background:linear-gradient(var(--vang2),var(--vang))}
.tieu-de a{margin-left:auto;font-size:14px;color:var(--vang)}
h2{font-size:24px;margin:36px 0 16px}
.luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px}
.the{position:relative;display:block;border-radius:16px;overflow:hidden;background:var(--the2);aspect-ratio:2/3;box-shadow:0 10px 30px #0007;transition:.3s;isolation:isolate}
.the img{width:100%;height:100%;object-fit:cover;transition:.5s}.the:hover img{transform:scale(1.07)}
.the:hover{transform:translateY(-6px);box-shadow:0 18px 40px #000a,0 0 0 2px var(--vang),0 0 30px #f5c04e55}
.the::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#0d0918f2 92%);z-index:1}
.the .goc{position:absolute;left:10px;top:10px;z-index:2}
.the .nd{position:absolute;left:0;right:0;bottom:0;padding:14px;z-index:2}.the b{display:block;font-size:15px;line-height:1.35;text-shadow:0 2px 8px #000}
.the .tt{font-size:12.5px;color:#d8cfee}
.nhan{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;background:#ffffff14;color:var(--mo);margin:2px 5px 2px 0;backdrop-filter:blur(6px)}
.nhan.vang{background:#f5c04ee0;color:#241800}.nhan.xanh{background:#3fbf87e6;color:#04220f}.nhan.do{background:#e5484de6;color:#fff}
.the-tl{background:#ffffff10;border:1px solid #ffffff1c}
.ray{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:var(--vien) transparent}
.ray a{flex:0 0 330px;scroll-snap-align:start;background:var(--the);border:1px solid #ffffff14;border-radius:16px;overflow:hidden;transition:.3s;backdrop-filter:blur(10px)}
.ray a:hover{border-color:var(--vang);transform:translateY(-4px);box-shadow:0 14px 30px #0008}
.ray .anh{position:relative}.ray img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ray .anh::after{content:'▶';position:absolute;right:12px;bottom:12px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--vang);color:#241800;font-size:16px;box-shadow:0 0 20px #f5c04e88}
.ray .nd{padding:12px 14px}.ray b{display:block;font-size:15px;line-height:1.4}.ray small{color:var(--mo)}
.dau{display:grid;grid-template-columns:300px 1fr;gap:36px;margin-top:18px}.dau img{border-radius:18px;box-shadow:0 24px 50px #000a,0 0 50px #6b3fd144}
.dau h1{margin:4px 0 12px;font-size:34px;line-height:1.25;background:linear-gradient(100deg,#fff,var(--vang2));-webkit-background-clip:text;background-clip:text;color:transparent}.mo{color:var(--mo)}
.nut{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--vang2),var(--vang));color:#241800;font-weight:800;padding:12px 24px;border-radius:40px;border:0;cursor:pointer;font-size:15px;box-shadow:0 8px 24px #f5c04e44;transition:.2s}
.nut:hover{transform:translateY(-2px);box-shadow:0 12px 30px #f5c04e66}
.nut.phu{background:#ffffff12;color:var(--chu);box-shadow:none;border:1px solid #ffffff26;font-weight:600}.nut.phu:hover{background:#ffffff1f}
.ds{list-style:none;padding:0;margin:0;background:var(--the);border:1px solid #ffffff14;border-radius:16px;overflow:hidden;backdrop-filter:blur(10px)}
.ds li a{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid #ffffff10;transition:.2s}.ds li:last-child a{border:0}
.ds li a:hover{background:#ffffff0d;color:var(--vang);padding-left:24px}
.ds li.dang a{background:linear-gradient(90deg,#f5c04e22,transparent);color:var(--vang);font-weight:700;border-left:3px solid var(--vang)}
.trinh{position:relative;background:linear-gradient(160deg,#2a1b4dcc,#130d24e6);border:1px solid #ffffff1c;border-radius:22px;padding:20px;margin:20px 0;box-shadow:0 20px 50px #0009,inset 0 1px 0 #ffffff14;backdrop-filter:blur(12px)}
.trinh .anh{border-radius:14px;width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:18px;box-shadow:0 12px 30px #0008}
.thanh{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--vang) var(--p,0%),#ffffff22 var(--p,0%));outline:none;cursor:pointer}
.thanh::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #f5c04e55}
.thanh::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:0}
.tg{display:flex;justify-content:space-between;color:var(--mo);font-size:13px;margin-top:6px}
.dk{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.dk button,.dk select{background:#ffffff10;color:var(--chu);border:1px solid #ffffff22;border-radius:30px;padding:9px 14px;font-size:14px;cursor:pointer;font-family:inherit}
.dk button:hover,.dk select:hover{border-color:var(--vang)}.dk select option{background:#1a1230}
.dk .phat{background:linear-gradient(135deg,var(--vang2),var(--vang));color:#241800;border:0;width:64px;height:64px;border-radius:50%;font-size:24px;box-shadow:0 0 0 6px #f5c04e22,0 0 30px #f5c04e77}
.moc{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.moc li{background:var(--the);border:1px solid #ffffff12;border-radius:12px;padding:9px 14px}.moc a{color:var(--vang);cursor:pointer;font-weight:700;margin-right:6px}
.chu-truyen{background:#f7f1e3;color:#2b2416;border-radius:18px;padding:30px 36px;font-size:18.5px;line-height:1.9;margin-top:16px;font-family:"Literata",Georgia,serif;box-shadow:0 20px 50px #0008}
.chu-truyen p{margin:0 0 16px}.chu-truyen hr{border:0;text-align:center;margin:26px 0}.chu-truyen hr::after{content:'❖  ❖  ❖';color:#a08a5c}
summary{list-style:none}summary::-webkit-details-marker{display:none}
.chuyen{display:flex;justify-content:space-between;gap:12px;margin:22px 0}
footer{border-top:1px solid #ffffff12;margin-top:60px;padding:30px 0;color:var(--mo);font-size:14px;background:#0a0714aa}footer a{color:var(--vang)}
.nhan.xanh,.nhan.do{}.chip{display:inline-flex;gap:8px;align-items:center;background:var(--the);border:1px solid #ffffff1c;border-radius:30px;padding:8px 16px;margin:0 8px 10px 0;font-size:14px;font-weight:600;transition:.2s;backdrop-filter:blur(8px)}
.chip:hover,.chip.on{background:linear-gradient(135deg,#f5c04e2e,#6b3fd12e);border-color:var(--vang);color:var(--vang2)}.chip small{background:#ffffff18;border-radius:20px;padding:0 7px;color:var(--mo);font-weight:600}
.loc{display:flex;gap:10px;flex-wrap:wrap;background:var(--the);border:1px solid #ffffff14;border-radius:16px;padding:12px;margin-bottom:20px;backdrop-filter:blur(10px)}
.loc select{background:#0d0918;color:var(--chu);border:1px solid #ffffff24;border-radius:30px;padding:9px 14px;font:inherit;font-size:14px}
.tim{position:relative;flex:1;max-width:360px;margin-left:24px}.tim input{width:100%;background:#ffffff10;color:var(--chu);border:1px solid #ffffff1f;border-radius:30px;padding:10px 18px 10px 40px;font:inherit;font-size:14px;transition:.2s}
.tim::before{content:'⌕';position:absolute;left:15px;top:6px;font-size:20px;color:var(--mo)}.tim input:focus{outline:0;border-color:var(--vang);background:#ffffff16}
.tim .kq{position:absolute;top:48px;left:0;right:0;background:#1a1230f5;backdrop-filter:blur(14px);border:1px solid #ffffff1c;border-radius:16px;max-height:60vh;overflow:auto;display:none;z-index:40;box-shadow:0 20px 40px #000a}
.tim .kq a{display:block;padding:11px 16px;border-bottom:1px solid #ffffff10;font-size:14px}.tim .kq a:hover{background:#ffffff0d;color:var(--vang)}.tim .kq small{color:var(--mo);display:block}
.duong{font-size:14px;color:var(--mo);margin:24px 0 4px}.duong a:hover{color:var(--vang)}
.tiep{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;background:#f5c04e1f;border:1px solid #f5c04e44;border-radius:14px;padding:10px;margin-top:14px;font-size:14px}.tiep[hidden]{display:none}
.bao-loi{font-size:13px;color:var(--mo);text-decoration:underline}
body.doc{--giay:#f7f1e3;--muc:#2b2416;--vien-doc:#e3d6b8}body.doc[data-nen="sang"]{--giay:#ffffff;--muc:#1d1d1f;--vien-doc:#e6e6e6}
body.doc[data-nen="toi"]{--giay:#17121f;--muc:#d9d2e6;--vien-doc:#2d2540}
.tien-do{position:fixed;left:0;top:0;height:3px;background:linear-gradient(90deg,var(--vang2),var(--vang));z-index:50;width:0}
.cong-cu{position:sticky;top:68px;z-index:20;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#140e24e6;backdrop-filter:blur(12px);border:1px solid #ffffff16;border-radius:14px;padding:8px 10px;margin:14px 0}
.cong-cu button,.cong-cu select{background:#ffffff10;color:var(--chu);border:1px solid #ffffff22;border-radius:20px;padding:6px 12px;font:inherit;font-size:14px;cursor:pointer}
.cong-cu select{max-width:260px}.cong-cu select option{background:#1a1230}.cong-cu button.on{border-color:var(--vang);color:var(--vang)}
.trang-doc{background:var(--giay);color:var(--muc);border:1px solid var(--vien-doc);border-radius:18px;padding:40px 48px;font-size:var(--co,19px);line-height:1.9;box-shadow:0 20px 50px #0008;transition:background .3s,color .3s}
.trang-doc.serif{font-family:"Literata",Georgia,serif}.trang-doc p{margin:0 0 1em;text-align:justify}.trang-doc h1{font-family:"Be Vietnam Pro",sans-serif;font-size:1.45em;line-height:1.3;margin:0 0 .3em;color:inherit;background:none;-webkit-text-fill-color:inherit}
.trang-doc .meta{font-family:"Be Vietnam Pro",sans-serif;font-size:14px;opacity:.65;margin-bottom:28px}
.trang-doc hr{border:0;text-align:center;margin:30px 0}.trang-doc hr::after{content:'❖  ❖  ❖';opacity:.5}
.muc-luc{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px;list-style:none;padding:0}
.muc-luc a{display:flex;justify-content:space-between;gap:10px;background:var(--the);border:1px solid #ffffff14;border-radius:12px;padding:12px 16px;transition:.2s}
.muc-luc a:hover{border-color:var(--vang);color:var(--vang)}.muc-luc small{color:var(--mo);white-space:nowrap}
.doc-tiep{display:none;align-items:center;gap:12px;flex-wrap:wrap;background:#f5c04e1c;border:1px solid #f5c04e44;border-radius:14px;padding:12px 16px;margin:16px 0}
.sach{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:20px}
.sach>div{display:flex;gap:16px;background:var(--the);border:1px solid #ffffff14;border-radius:18px;padding:14px;backdrop-filter:blur(10px)}
.sach img{width:120px;border-radius:12px;aspect-ratio:2/3;object-fit:cover}.sach b{font-size:17px;line-height:1.35;display:block;margin-bottom:6px}
@media(max-width:820px){.trang-doc{padding:24px 20px}.cong-cu{top:68px}.sach{grid-template-columns:1fr}}
html,body{overflow-x:hidden}main,h1,h2,.ds{overflow-wrap:anywhere}
@media(max-width:820px){.hero .khung{grid-template-columns:1fr;padding:34px 18px 44px;text-align:left}.hero .bia{order:-1;width:200px}
 .dau{grid-template-columns:1fr}.dau img{max-width:240px}.ray a{flex-basis:78%}.logo{font-size:17px}.logo img{width:38px;height:38px}
 nav{display:none}.tim{margin-left:auto;max-width:none}.chu-truyen{padding:20px;font-size:17.5px}.dk{gap:8px}.luoi{grid-template-columns:repeat(2,1fr);gap:14px}}