/* ===== v2: giao diện sách giáo khoa minh hoạ ===== */
:root{--disp:'Baloo 2','Be Vietnam Pro',system-ui,sans-serif}
body{background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%232faa68' fill-opacity='.05'%3E%3Cpath d='M30 40c20-30 50-30 60-10-20 0-45 10-60 10zM140 150c20-30 50-30 60-10-20 0-45 10-60 10z'/%3E%3C/g%3E%3Cg fill='%234b5bb0' fill-opacity='.04'%3E%3Ccircle cx='160' cy='40' r='20'/%3E%3Ccircle cx='40' cy='170' r='14'/%3E%3C/g%3E%3C/svg%3E")}
h1,h2,.page-t,.sec,.unit-hd h1,.ucard h3,.mod h3,.hero h1{font-family:var(--disp)}
.page-t{font-weight:800;letter-spacing:-.01em;display:inline-block;background:linear-gradient(transparent 62%,#ffe38a 62%)}
.sec{font-family:var(--disp);font-size:24px;border:none;padding-left:0;display:flex;align-items:center;gap:10px}
.sec:before{content:'';flex:none;width:34px;height:10px;border-radius:9px;background:linear-gradient(90deg,var(--red),#ffb08a)}
.sec.vol1:before{background:linear-gradient(90deg,var(--blue),#9aa8f0)}.sec.vol2:before{background:linear-gradient(90deg,var(--green),#9be2bb)}
.main>*{animation:rise .45s cubic-bezier(.2,.7,.2,1) both}.main>*:nth-child(2){animation-delay:.05s}.main>*:nth-child(3){animation-delay:.1s}.main>*:nth-child(n+4){animation-delay:.15s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.fl,.main>*,.ex-card.is-ok{animation:none}}
/* sidebar */
.side{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:10px;box-shadow:var(--sh)}
.side a .ic{padding:5px;width:30px;height:30px;border-radius:9px;background:var(--blue-l);color:var(--blue-d)}
.side a:nth-child(3n+1) .ic{background:var(--red-l);color:var(--red)}.side a:nth-child(3n+2) .ic{background:var(--green-l);color:var(--green-d)}
.side a.active{background:linear-gradient(120deg,var(--blue-d),var(--blue));box-shadow:0 6px 16px rgba(53,65,138,.3)}
.side a.active .ic{background:rgba(255,255,255,.22)!important;color:#fff!important}
/* hero */
.hero{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:0;padding:0;overflow:hidden;min-height:380px;background:linear-gradient(135deg,#2b2f7a,#4b5bb0);border-radius:26px}
.hero-in{position:relative;z-index:2;padding:40px 8px 40px 40px;align-self:center}
.hero h1{font-size:clamp(44px,7vw,82px);font-weight:800;line-height:.95;margin:.25em 0 .15em;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.hero h1 em{font-style:normal;color:#ffd166;display:inline-block;transform:rotate(-4deg)}
.hero p{font-size:17px;max-width:440px}
.hero-stat{display:flex;align-items:center;gap:14px;margin-top:22px;font-size:14px}.hero-stat .ring{width:70px;height:70px;margin:0}.hero-stat .ring b{font-size:17px}
.scene{position:relative;min-height:300px}.scene svg{position:absolute;inset:0;width:100%;height:100%}
.scene:before{content:'';position:absolute;inset:0 auto 0 -1px;width:90px;background:linear-gradient(90deg,#3a439a,transparent);z-index:1}
.fl{position:absolute;font:800 clamp(34px,5vw,58px)/1 var(--disp);color:#fff;text-shadow:0 4px 14px rgba(40,20,80,.45);animation:fl 7s ease-in-out infinite;z-index:2}
.f1{left:12%;top:14%}.f2{left:34%;top:6%;animation-delay:-1.5s;color:#ffd166}.f3{right:10%;top:12%;animation-delay:-3s}.f4{right:28%;top:38%;animation-delay:-4.5s;color:#ffd166}.f5{left:8%;top:44%;animation-delay:-2s;font-size:40px}.f6{right:5%;top:52%;animation-delay:-5.5s;font-size:36px}.f7{left:44%;top:30%;animation-delay:-6s;font-size:30px;opacity:.8}
@keyframes fl{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(6deg)}}
/* modules */
.mod{position:relative;overflow:hidden;border-radius:18px}
.mod:before{content:'';position:absolute;right:-24px;top:-24px;width:90px;height:90px;border-radius:50%;background:var(--red-l);transition:.25s}.mod:hover:before{transform:scale(1.6)}
.mod>*{position:relative}.mod .ic{padding:10px;width:46px;height:46px;border-radius:14px;background:var(--red);color:#fff}
.mod:nth-child(3n+2) .ic{background:var(--blue)}.mod:nth-child(3n+2):before{background:var(--blue-l)}.mod:nth-child(3n) .ic{background:var(--green)}.mod:nth-child(3n):before{background:var(--green-l)}
.strand li{flex-wrap:wrap;align-items:baseline}.strand li .muted{font-size:13px;white-space:nowrap}
/* thẻ bài */
.ucard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.ucard{position:relative;display:flex;align-items:flex-end;min-height:190px;padding:18px;border-radius:22px;overflow:hidden;color:#fff;background:linear-gradient(150deg,var(--c),color-mix(in srgb,var(--c) 55%,#10143a));box-shadow:0 10px 24px color-mix(in srgb,var(--c) 35%,transparent);transition:transform .25s,box-shadow .25s}
.ucard:hover{text-decoration:none;transform:translateY(-6px) rotate(-.6deg);box-shadow:0 18px 34px color-mix(in srgb,var(--c) 45%,transparent)}
.ucard-no{position:absolute;left:14px;top:-6px;font:800 110px/1 var(--disp);color:rgba(255,255,255,.2);-webkit-text-stroke:2px rgba(255,255,255,.35);letter-spacing:-.04em}
.ucard-art{position:absolute;right:-8px;top:8px;width:120px;height:120px;color:rgba(255,255,255,.28);transition:.35s}.ucard:hover .ucard-art{transform:scale(1.15) rotate(8deg);color:rgba(255,255,255,.4)}
.ucard-tx{position:relative;width:100%}.ucard-tx small{font:700 11px var(--sans);letter-spacing:.14em;opacity:.85}.ucard-tx h3{font-size:21px;line-height:1.15;margin:.15em 0}.ucard-tx p{margin:0 0 8px;font-size:13px;opacity:.88}
.ucard .bar{background:rgba(255,255,255,.25)}.ucard .bar i{background:#fff}
/* trang bài */
.unit-hd{position:relative;overflow:hidden;min-height:170px;gap:22px;border-radius:24px;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 50%,#10143a))!important}
.hd-art{position:absolute;right:-10px;bottom:-24px;width:230px;height:230px;color:rgba(255,255,255,.2)}
.big-no{position:relative;z-index:1;text-align:center}.big-no small{display:block;font:700 13px var(--sans);letter-spacing:.2em}.big-no b{display:block;font:800 96px/.9 var(--disp);color:#ffd166;text-shadow:0 4px 0 rgba(0,0,0,.2)}
.hd-tx{position:relative;z-index:1}.unit-hd h1{font-family:var(--disp)}
.strand{position:relative;overflow:hidden;border-radius:18px}.strand h2{font-family:var(--disp);font-size:19px;letter-spacing:.04em}
.strand:before{content:'';position:absolute;right:-30px;top:-30px;width:100px;height:100px;border-radius:50%;background:var(--red-l)}.strand>*{position:relative}
.s-tv:before{background:var(--blue-l)}.s-viet:before{background:var(--green-l)}.s-noi:before{background:#fff0c9}
.goal{border-radius:18px;position:relative}.goal:before{content:'MỤC TIÊU';position:absolute;right:14px;top:10px;font:800 11px var(--sans);letter-spacing:.2em;color:var(--red);opacity:.5}
/* trang đọc như trang sách */
.reader{position:relative;max-width:820px;margin:0 auto;border-radius:6px 22px 22px 6px;border:1px solid var(--line);border-left:14px solid var(--c,var(--blue));background:var(--paper) linear-gradient(90deg,rgba(0,0,0,.05),transparent 28px);box-shadow:0 14px 40px rgba(40,50,90,.14)}
.reader>*{position:relative}
.reader header h1{font-family:var(--disp);font-size:clamp(30px,5vw,46px);font-weight:700;color:var(--c,var(--blue-d));line-height:1.1}.kicker2{color:var(--c,var(--red))}
.gen{text-align:center;font:italic 14px var(--serif);color:var(--mut);margin:0}
.orn{display:flex;align-items:center;gap:12px;color:var(--c,var(--red));margin:14px 0}.orn i{flex:1;height:2px;background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.5}
.rd-body>.rd-p:first-child:first-letter{float:left;font:800 66px/.8 var(--disp);color:var(--c,var(--red));padding:6px 10px 0 0}
.rd-p{text-indent:0}
.before{background:color-mix(in srgb,var(--c,#4b5bb0) 10%,transparent);padding:4px 18px 10px;border-radius:14px}.before h3,.h-red{color:var(--c,var(--red))}
.prompt{margin-left:-10px;margin-right:-10px;margin-top:30px;border-radius:14px;border-left-width:8px;box-shadow:var(--sh)}
.prompt .tag{font-family:var(--disp);font-size:15px;padding:3px 22px 3px 14px;margin:-24px 0 8px -24px;display:block;width:max-content;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.poem{border-left-color:var(--c,var(--red));background:linear-gradient(90deg,color-mix(in srgb,var(--c,#e8532b) 8%,transparent),transparent)}
.read-card{position:relative;overflow:hidden;border-left:8px solid var(--c,var(--blue))}
.read-card:before{content:'';position:absolute;right:-20px;bottom:-20px;width:90px;height:90px;border-radius:50%;background:color-mix(in srgb,var(--c,#4b5bb0) 14%,transparent)}
.read-card>*{position:relative}
/* phản hồi */
.ex-card{border-radius:18px}.ex-card.is-ok{animation:pop .4s}@keyframes pop{50%{transform:scale(1.015)}}
.btn-primary{box-shadow:0 5px 0 rgba(150,40,10,.35);transition:transform .1s,box-shadow .1s}.btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(150,40,10,.35)}
@media(max-width:900px){.hero{grid-template-columns:1fr}.scene{min-height:200px;order:-1}.scene:before{display:none}.hero-in{padding:22px}}
@media(max-width:560px){.ucard{min-height:150px}.ucard-no{font-size:84px}.big-no b{font-size:64px}.hd-art{width:150px;height:150px}.prompt .tag{margin-left:-18px}.reader{border-left-width:8px}}