/* Phần dùng chung: màu, nút quay lại, trang danh sách (body.home), khối câu hỏi (.quiz). */
:root{
  --page:#DDF0EA;
  --ink:#24324A;
  --ink-soft:#4E5F7A;
  --card:#FFFFFF;
  --accent:#F2668B;
  --accent-d:#C9456B;
  --sun:#FFC94A;
  --line:#B9D9CF;
  --ok:#3DB38A;
  --ok-d:#2B8D6B;
  --display:"Baloo 2","Nunito","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
html,body{background:var(--page);color:var(--ink);margin:0}

/* nút quay lại danh sách */
.backlink{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font:800 16px var(--display);color:var(--ink);text-decoration:none;
  background:var(--card);border-radius:99px;padding:6px 16px 6px 10px;box-shadow:0 3px 0 var(--line)}
.backlink svg{width:20px;height:20px}
.backlink:hover{transform:translateY(-1px)}
.backlink:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.backlink:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* màn "Hết rồi!" của truyện: 2 nút */
.end-btns{display:flex;flex-wrap:wrap;gap:1.4cqw;justify-content:center}
.bigplay.quizgo{background:var(--sun);color:var(--ink);box-shadow:0 .7cqw 0 #D9A22E}
.bigplay.quizgo:active{box-shadow:0 .3cqw 0 #D9A22E}

/* ================= TRANG DANH SÁCH ================= */
body.home{font-family:var(--body);padding:0 max(16px,env(safe-area-inset-left,0px)) 40px max(16px,env(safe-area-inset-right,0px));overflow-x:hidden}
.home *{box-sizing:border-box}
.hero{position:relative;max-width:1100px;margin:0 auto;padding:34px 0 26px;text-align:center}
.hero h1{margin:0;font:800 clamp(38px,8vw,72px)/1 var(--display);color:#fff;letter-spacing:.01em;
  text-shadow:0 4px 0 var(--accent),0 8px 0 rgba(36,50,74,.18)}
.hero h1 span{display:inline-block;animation:hop 1.8s ease-in-out infinite}
.hero p{margin:14px auto 0;display:inline-block;background:#FFF6D6;border-radius:99px;padding:6px 18px;font:700 clamp(15px,2.4vw,20px) var(--display);color:var(--ink)}
.hero .sun{position:absolute;right:0;top:12px;width:clamp(64px,12vw,120px);height:auto}
.hero .sun .rays{transform-origin:60px 60px;animation:spin 30s linear infinite}
.hero .cloud{position:absolute;width:clamp(70px,13vw,130px);height:auto;animation:float 6s ease-in-out infinite}
.hero .cloud.a{left:0;top:18px}
.hero .cloud.b{left:18%;top:110px;width:clamp(50px,8vw,80px);animation-delay:-3s}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:560px){.hero{padding-top:70px}.hero .sun{top:6px}.hero .cloud.b{display:none}}
@keyframes float{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}}

.shelf{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),360px));justify-content:center;gap:24px}
.story{position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:26px;overflow:hidden;text-decoration:none;color:var(--ink);
  box-shadow:0 6px 0 var(--c,var(--line)),0 14px 24px rgba(36,50,74,.12);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.story:hover{transform:translateY(-6px) rotate(-.6deg)}
.story:active{transform:translateY(2px)}
.story:focus-visible{outline:4px solid var(--accent);outline-offset:4px}
.story .cover{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--c,#BFE6F7)}
.story .info{padding:14px 18px 18px;display:flex;align-items:center;gap:12px}
.story .txt{flex:1;min-width:0}
.story h2{margin:0;font:800 24px/1.1 var(--display)}
.story .meta{margin:4px 0 0;font-weight:700;font-size:14px;color:var(--ink-soft)}
.story .play{flex:0 0 56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 4px 0 var(--accent-d)}
.story .play svg{width:26px;height:26px;margin-left:3px}
.story .stars{position:absolute;top:12px;right:12px;background:#fff;border-radius:99px;padding:3px 10px;display:flex;gap:2px;box-shadow:0 3px 0 rgba(36,50,74,.15)}
.story .stars svg{width:20px;height:20px}
.empty{text-align:center;font-weight:700;color:var(--ink-soft)}
.foot{max-width:1100px;margin:34px auto 0;text-align:center;color:var(--ink-soft);font-weight:700;font-size:14px}

/* ================= CÂU HỎI ================= */
.quiz{--qc:#fff;background:var(--card);border-radius:26px;padding:20px clamp(14px,3vw,28px) 24px;box-shadow:0 5px 0 var(--line);position:relative;overflow:hidden;scroll-margin-top:16px}
.quiz *{box-sizing:border-box}
.quiz:empty{display:none}
.qz-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:16px}
.qz-head h2{margin:0;font:800 clamp(22px,4vw,30px)/1.1 var(--display)}
.qz-dots{display:flex;gap:8px}
.qz-dots i{width:18px;height:18px;border-radius:50%;background:#E2EEEA;transition:transform .3s,background .3s}
.qz-dots i.on{background:var(--sun);transform:scale(1.25)}
.qz-dots i.done{background:var(--ok)}

.qz-q{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
.qz-q p{margin:0;font:800 clamp(20px,3.6vw,28px)/1.3 var(--display);text-wrap:balance}
.qz-q small{display:block;font:800 15px var(--body);color:var(--accent)}
.spk{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:0;background:#FFF0F4;color:var(--accent);display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 0 #F6C3D1}
.spk svg{width:26px;height:26px}
.spk:active{transform:translateY(2px);box-shadow:0 1px 0 #F6C3D1}
.spk.playing{animation:pulse .6s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.12)}}
.spk:focus-visible,.qz-pick:focus-visible,.qz-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.qz-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:540px){.qz-opts{grid-template-columns:1fr}}
.qz-opt{--oc:#3F8EDB;--od:#2E6DB0;position:relative;display:flex;align-items:stretch;border-radius:20px;background:var(--oc);box-shadow:0 5px 0 var(--od);transition:transform .15s,opacity .3s,background .3s,box-shadow .3s}
.qz-opt.c0{--oc:#F2668B;--od:#C9456B}
.qz-opt.c1{--oc:#3F8EDB;--od:#2E6DB0}
.qz-opt.c2{--oc:#F2B33D;--od:#C98A1C}
.qz-opt.c3{--oc:#9B6AD6;--od:#7449AD}
.qz-pick{flex:1;min-width:0;display:flex;align-items:center;gap:12px;border:0;background:none;color:#fff;cursor:pointer;text-align:left;
  padding:14px 8px 14px 14px;min-height:70px;font:800 clamp(17px,2.6vw,21px)/1.25 var(--display);border-radius:20px}
.qz-pick .shape{flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.28);display:grid;place-items:center}
.qz-pick .shape svg{width:24px;height:24px}
.qz-opt .spk{width:40px;height:40px;align-self:center;margin-right:10px;background:rgba(255,255,255,.9);box-shadow:none}
.qz-opt .spk svg{width:22px;height:22px}
.qz-opt:not(.wrong):not(.right):hover{transform:translateY(-3px)}
.qz-opt:active{transform:translateY(3px)}
.qz-opt.wrong{--oc:#C9D3DF;--od:#A7B4C4;opacity:.6;animation:shake .45s}
.qz-opt.wrong .qz-pick{cursor:default}
.qz-opt.right{--oc:var(--ok);--od:var(--ok-d);animation:boing .5s cubic-bezier(.3,1.7,.5,1)}
.qz-opt.dim{opacity:.35}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes boing{0%{transform:scale(.9)}100%{transform:scale(1)}}

.qz-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;min-height:52px}
.qz-msg{margin:0;font:800 clamp(18px,3vw,23px) var(--display)}
.qz-msg.ok{color:var(--ok-d)}
.qz-msg.no{color:var(--accent-d)}
.qz-btn{font:800 20px var(--display);text-decoration:none;color:#fff;background:var(--accent);border:0;border-radius:99px;padding:10px 26px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 5px 0 var(--accent-d)}
.qz-btn svg{width:22px;height:22px}
.qz-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--accent-d)}
.qz-btn.alt{background:var(--sun);color:var(--ink);box-shadow:0 5px 0 #D9A22E}

.qz-intro,.qz-done{text-align:center;padding:10px 0 4px}
.qz-intro svg.mascot,.qz-done svg.mascot{width:110px;height:auto}
.qz-intro p,.qz-done p{margin:8px 0 18px;font:700 clamp(17px,2.8vw,21px) var(--display);color:var(--ink-soft)}
.qz-done h3{margin:6px 0 0;font:800 clamp(28px,6vw,44px) var(--display);color:var(--accent);text-shadow:0 3px 0 #FFD9E3}
.qz-big-stars{display:flex;justify-content:center;gap:10px;margin:10px 0 0}
.qz-big-stars svg{width:clamp(52px,12vw,76px);height:auto;animation:pop .5s cubic-bezier(.3,1.7,.5,1) both}
.qz-big-stars svg:nth-child(2){animation-delay:.25s}.qz-big-stars svg:nth-child(3){animation-delay:.5s}
@keyframes pop{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}
.qz-done .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

.confetti{position:absolute;top:40%;left:50%;width:12px;height:16px;border-radius:3px;pointer-events:none;animation:burst 1.1s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes burst{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}

@media (prefers-reduced-motion:reduce){
  .hero h1 span,.hero .sun .rays,.hero .cloud,.spk.playing,.qz-opt.wrong,.qz-opt.right,.qz-big-stars svg{animation:none!important}
  .confetti{display:none}
}