/* Học Vui — hệ thiết kế "mực tím & vở ô li"
   Mực tím cho chữ và nút chính, giấy trắng xanh có ô li, đỏ cô giáo chỉ dùng cho dấu chấm và điểm. */
:root{
  --ink:#221B45; --ink-2:#4A4470; --mute:#7F7AA0;
  --violet:#4B2BB8; --violet-2:#3A1F96; --violet-soft:#ECE7FF;
  --paper:#F6F8FF; --sheet:#FFFFFF; --rule:#DCE4F7; --rule-strong:#C4CFEC; --margin:#F2A7A8;
  --red:#6E4FE6; --red-2:#4A2FB5; --gold:#FFB703; --gold-2:#E09E00;
  --toan:#F3722C; --toan-soft:#FFE9DC; --tv:#2A9D5C; --tv-soft:#DDF4E7; --ta:#2F7DF6; --ta-soft:#E1ECFF;
  --ok:#1E9E5A; --ok-soft:#DFF5E8; --bad:#E5383B; --bad-soft:#FDE4E4;
  --display:"Paytone One","Lexend",system-ui,sans-serif;
  --body:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Pangolin","Comic Sans MS",cursive;
  --r-lg:22px; --r:16px; --r-sm:12px;
  --lift:0 2px 0 var(--rule-strong);
  --tabh:68px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:16px;line-height:1.55;color:var(--ink);background:var(--paper);
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:28px 28px;background-attachment:fixed;-webkit-font-smoothing:antialiased;padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px) + 12px)}
button,input,select{font:inherit;color:inherit}
a{color:var(--violet)}
img,svg{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.15;margin:0;letter-spacing:.005em}
h1{font-size:30px} h2{font-size:24px} h3{font-size:19px}
p{margin:0}
.small{font-size:14px;color:var(--ink-2)}
.muted{color:var(--mute)}
.hand{font-family:var(--hand)}

/* ---------- thanh trên ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 16px;background:rgba(246,248,255,.92);backdrop-filter:blur(8px);border-bottom:2px solid var(--rule)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.brand-mark{width:40px;height:40px;display:block}
.brand-name{font-family:var(--display);font-size:16px;line-height:1.02;color:var(--violet)}
.brand-name span{color:var(--red);font-size:13px}
.top-right{display:flex;align-items:center;gap:6px}
.grade-btn{border:2px solid var(--violet);background:var(--sheet);color:var(--violet);font-weight:700;border-radius:999px;padding:5px 12px;cursor:pointer;font-size:14px}
.star-chip{display:flex;align-items:center;gap:4px;text-decoration:none;color:var(--ink);font-weight:700;background:#FFF4D6;border-radius:999px;padding:5px 10px;font-size:14px}
.star-chip svg{width:18px;height:18px}
.pro-chip{font-size:13px;font-weight:700;text-decoration:none;border-radius:999px;padding:6px 10px;background:var(--red);color:#fff}
.pro-chip.on{background:var(--ok-soft);color:var(--ok)}

main{max-width:880px;margin:0 auto;padding:16px 16px 24px;outline:none}

/* ---------- thanh dưới ---------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--sheet);border-top:2px solid var(--rule);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));height:calc(var(--tabh) + env(safe-area-inset-bottom,0px))}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--mute);font-size:12px;font-weight:600;border-radius:14px}
.tabs .ti svg{width:26px;height:26px;display:block}
.tabs a.on{color:var(--violet)}
.tabs a.on .ti{background:var(--violet-soft);border-radius:999px;padding:2px 14px}
@media (min-width:900px){
  body{padding-bottom:24px}
  .tabs{position:sticky;top:62px;bottom:auto;max-width:880px;margin:0 auto;height:auto;grid-template-columns:repeat(4,auto);justify-content:start;gap:4px;border:0;background:transparent;padding:10px 16px 0}
  .tabs a{flex-direction:row;gap:8px;font-size:15px;padding:8px 14px}
  .tabs .ti svg{width:22px;height:22px}
  .tabs a.on{background:var(--violet-soft)}
  .tabs a.on .ti{background:none;padding:0}
}

/* ---------- nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;
  font-weight:700;font-size:16px;border-radius:14px;padding:12px 18px;background:var(--violet);color:#fff;box-shadow:0 4px 0 var(--violet-2);transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--violet-2)}
.btn svg{width:20px;height:20px}
.btn.red{background:var(--red);box-shadow:0 4px 0 var(--red-2)}
.btn.gold{background:var(--gold);color:#3D2A00;box-shadow:0 4px 0 var(--gold-2)}
.btn.ghost{background:var(--sheet);color:var(--violet);box-shadow:inset 0 0 0 2px var(--rule-strong),0 3px 0 var(--rule-strong)}
.btn.sm{font-size:14px;padding:8px 12px;border-radius:12px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* ---------- bề mặt ---------- */
.card{background:var(--sheet);border-radius:var(--r);border:2px solid var(--rule);padding:16px}
.sec{margin-top:26px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;gap:8px}
.sec-h a{font-size:14px;font-weight:600;text-decoration:none}

/* Trang vở: điểm nhấn của site */
.vo{position:relative;background:var(--sheet);border-radius:6px 22px 22px 6px;padding:18px 18px 18px 56px;border:2px solid var(--rule-strong);
  background-image:linear-gradient(90deg,transparent 40px,var(--margin) 40px,var(--margin) 42px,transparent 42px),repeating-linear-gradient(transparent 0 35px,var(--rule) 35px 36px);
  box-shadow:6px 6px 0 var(--violet-soft)}
.vo::before{content:"";position:absolute;left:-2px;top:22px;bottom:22px;width:12px;background:radial-gradient(circle at 0 50%,var(--paper) 5px,transparent 6px) 0 0/12px 26px repeat-y}
.vo-date{font-family:var(--hand);color:var(--violet);font-size:18px}
.vo-title{font-family:var(--hand);font-size:30px;color:var(--violet);line-height:1.1;margin:2px 0 10px}
.vo-line{display:flex;align-items:center;gap:10px;min-height:36px;text-decoration:none;color:var(--violet);font-family:var(--hand);font-size:21px;position:relative}
.vo-line .tick{position:absolute;left:-44px;width:30px;height:30px}
.vo-line .tick svg{width:30px;height:30px}
.vo-line .sub{margin-left:auto;font-family:var(--body);font-size:13px;color:var(--mute);white-space:nowrap}
.vo-line.done{color:var(--ink-2)}
.vo-line.done .lbl{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.vo-stamp{position:absolute;right:14px;top:10px;font-family:var(--hand);color:var(--red);font-size:44px;line-height:1;transform:rotate(-12deg);border:3px solid var(--red);border-radius:50%;width:74px;height:74px;display:grid;place-items:center;opacity:.9}
.vo-stamp small{display:block;font-size:12px;margin-top:-10px}
.vo-cta{margin-top:12px}

.hello{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.hello .av{width:56px;height:56px;flex:none}
.hello b{font-family:var(--display);font-weight:400;font-size:24px;display:block;line-height:1.1}

/* môn học */
.subjects{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.subj{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-decoration:none;color:var(--ink);background:var(--sheet);border:2px solid var(--rule);border-radius:var(--r);padding:12px;min-height:122px;position:relative;overflow:hidden}
.subj .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-family:var(--display);font-size:20px}
.subj b{font-size:16px;line-height:1.2}
.subj .bar{position:absolute;left:12px;right:12px;bottom:10px;height:6px;border-radius:6px;background:var(--rule)}
.subj .bar i{display:block;height:100%;border-radius:6px}
.subj .pct{font-size:12px;color:var(--mute)}
.s-toan .ic,.s-toan .bar i{background:var(--toan)} .s-tv .ic,.s-tv .bar i{background:var(--tv)} .s-ta .ic,.s-ta .bar i{background:var(--ta)}

/* danh sách lối vào */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);background:var(--sheet);border:2px solid var(--rule);border-radius:var(--r);padding:12px}
.tile .gi{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center}
.tile .gi svg{width:30px;height:30px}
.tile b{display:block;font-size:15.5px;line-height:1.25}
.tile span.small{display:block;font-size:13px}
.tile.big{grid-column:1/-1;padding:14px 16px;border-color:var(--violet);background:linear-gradient(90deg,var(--violet-soft),var(--sheet) 70%)}
.tile.big b{font-family:var(--display);font-weight:400;font-size:21px}
@media (max-width:520px){.tiles{grid-template-columns:1fr}}

/* ---------- lộ trình chủ đề ---------- */
.subj-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.subj-head .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;font-family:var(--display);font-size:22px;flex:none}
.seg{display:inline-flex;background:var(--sheet);border:2px solid var(--rule);border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:none;border-radius:999px;padding:6px 14px;font-weight:600;font-size:14px;color:var(--ink-2);cursor:pointer}
.seg button.on{background:var(--violet);color:#fff}
.path{position:relative;margin-top:16px;padding-left:34px}
.path::before{content:"";position:absolute;left:15px;top:10px;bottom:10px;border-left:3px dashed var(--rule-strong)}
.node{position:relative;display:flex;align-items:center;gap:12px;background:var(--sheet);border:2px solid var(--rule);border-radius:var(--r);padding:12px 12px 12px 14px;margin-bottom:10px;cursor:pointer;width:100%;text-align:left}
.node:hover{border-color:var(--rule-strong)}
.node .dot{position:absolute;left:-34px;width:32px;height:32px;border-radius:50%;background:var(--sheet);border:3px solid var(--rule-strong);display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--mute)}
.node.m1 .dot,.node.m2 .dot{border-color:var(--sc);color:var(--sc)}
.node.m3 .dot{background:var(--sc);border-color:var(--sc);color:#fff}
.node .nm{flex:1;min-width:0}
.node .nm b{display:block;font-size:15.5px;line-height:1.3}
.node .nm span{font-size:13px;color:var(--mute)}
.node .stars{display:flex;gap:1px;flex:none}
.node .stars svg{width:18px;height:18px}
.node.next{border-color:var(--sc);box-shadow:0 3px 0 var(--sc)}
.node .lock{width:18px;height:18px;color:var(--mute);flex:none}

/* ---------- câu hỏi ---------- */
.runbar{position:sticky;top:64px;z-index:10;display:flex;align-items:center;gap:10px;background:var(--sheet);border:2px solid var(--rule);border-radius:16px;padding:8px 10px;margin-bottom:12px}
.runbar .t{flex:1;min-width:0;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog{height:10px;border-radius:10px;background:var(--rule);overflow:hidden}
.prog i{display:block;height:100%;background:var(--violet);border-radius:10px;transition:width .3s}
.qcard{background:var(--sheet);border-radius:var(--r-lg);border:2px solid var(--rule);padding:18px;max-width:720px;margin:0 auto}
.qmeta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--mute);margin-bottom:8px}
.lv{font-weight:700;border-radius:999px;padding:2px 9px;font-size:12px}
.lv1{background:var(--ok-soft);color:var(--ok)} .lv2{background:#FFF1CC;color:#8A5A00} .lv3{background:var(--bad-soft);color:var(--red-2)}
.qt{font-size:20px;line-height:1.45;font-weight:600;margin:4px 0 12px}
.qpic{font-size:44px;line-height:1.25;text-align:center;margin:6px 0 12px;letter-spacing:4px;word-break:break-all}
.qfig{display:flex;justify-content:center;margin:4px 0 12px}
.qfig svg{max-width:300px;width:100%;height:auto}
.passage{background:#FBFCFF;border:2px solid var(--rule);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;font-size:16.5px;line-height:1.75}
.passage h4{font-family:var(--display);font-weight:400;font-size:18px;margin:0 0 6px}
.passage p+p{margin-top:8px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts.one{grid-template-columns:1fr}
.opt{display:flex;align-items:center;gap:10px;text-align:left;border:2px solid var(--rule-strong);background:var(--sheet);border-radius:14px;padding:12px;cursor:pointer;font-size:17px;font-weight:600;min-height:58px;box-shadow:0 3px 0 var(--rule-strong)}
.opt .k{flex:none;width:28px;height:28px;border-radius:9px;background:var(--violet-soft);color:var(--violet);display:grid;place-items:center;font-size:14px;font-weight:700}
.opt.pic{justify-content:center;font-size:40px;min-height:84px}
.opt.ok{border-color:var(--ok);background:var(--ok-soft);box-shadow:0 3px 0 var(--ok)}
.opt.ok .k{background:var(--ok);color:#fff}
.opt.bad{border-color:var(--bad);background:var(--bad-soft);box-shadow:0 3px 0 var(--bad)}
.opt.bad .k{background:var(--bad);color:#fff}
.opt.gone{opacity:.25;pointer-events:none}
.opt[disabled]{cursor:default}
.numin{display:flex;gap:10px;align-items:center}
.numin input{flex:1;min-width:0;font-size:24px;font-weight:700;padding:10px 14px;border-radius:14px;border:2px solid var(--rule-strong);background:#FBFCFF;color:var(--violet);font-family:var(--hand)}
.numin input:focus{outline:none;border-color:var(--violet)}
.ord-ans{min-height:58px;border:2px dashed var(--rule-strong);border-radius:14px;padding:8px;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;align-items:center}
.ord-pool{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid var(--rule-strong);background:var(--sheet);border-radius:12px;padding:8px 12px;font-size:17px;font-weight:600;cursor:pointer;box-shadow:0 2px 0 var(--rule-strong)}
.chip.used{visibility:hidden}
.fb{margin-top:14px;border-radius:14px;padding:12px 14px;font-size:15.5px;display:flex;gap:10px;align-items:flex-start}
.fb svg{flex:none;width:24px;height:24px}
.fb.ok{background:var(--ok-soft);color:#11603A}
.fb.bad{background:var(--bad-soft);color:#7A1719}
.fb .ex{display:block;margin-top:4px;color:var(--ink);font-weight:400}
.next-row{display:flex;justify-content:flex-end;margin-top:14px}
.say{border:2px solid var(--ta);color:var(--ta);background:var(--ta-soft);border-radius:999px;padding:6px 12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:14px}
.say svg{width:18px;height:18px}
.say.on{background:var(--ta);color:#fff}

/* kết quả */
.result{text-align:center;padding:10px 0}
.score{font-family:var(--hand);color:var(--red);font-size:84px;line-height:1;display:inline-grid;place-items:center;width:150px;height:150px;border:4px solid var(--red);border-radius:50%;transform:rotate(-8deg);margin:8px 0 6px}
.score small{font-size:20px;display:block;margin-top:-14px}
.teacher{font-family:var(--hand);color:var(--red);font-size:22px;margin:4px 0 10px}
.report{text-align:left;margin-top:16px;background:#FBFCFF;border:2px solid var(--rule);border-radius:var(--r);padding:14px}
.report h3{font-size:17px;margin-bottom:6px}
.report ul{margin:6px 0 0;padding-left:20px}
.report li{margin:3px 0}
.upsell{margin-top:12px;border-radius:var(--r);padding:14px;background:linear-gradient(120deg,#FFF4D6,#FFE7E7);border:2px solid #FFD58A}
.upsell b{display:block;font-size:16px;margin-bottom:4px}

/* ---------- trò chơi ---------- */
.gtiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gtile{position:relative;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);border-radius:var(--r-lg);padding:14px;min-height:170px;overflow:hidden;border:2px solid var(--rule)}
.gtile .art{position:absolute;right:-6px;bottom:-6px;width:96px;height:96px;opacity:.95}
.gtile b{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.1;max-width:70%}
.gtile .small{max-width:62%}
.gtile .left{margin-top:auto;font-size:12.5px;font-weight:700;color:var(--ink-2)}
@media (max-width:520px){.gtiles{grid-template-columns:1fr}}
.tw-ladder{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none}
.tw-ladder::-webkit-scrollbar{display:none}
.tw-ladder .st{flex:none;width:46px;border-radius:12px;background:var(--sheet);border:2px solid var(--rule);text-align:center;padding:4px 0;line-height:1.15}
.tw-ladder .st b{display:block;font-family:var(--display);font-weight:400;font-size:17px;color:var(--ink-2)}
.tw-ladder .st em{font-style:normal;font-size:11px;color:var(--mute)}
.tw-ladder .st.safe{border-color:var(--gold)}
.tw-ladder .st.done{background:var(--violet-soft)}
.tw-ladder .st.done b{color:var(--violet)}
.tw-ladder .st.cur{background:var(--violet);border-color:var(--violet)}
.tw-ladder .st.cur b,.tw-ladder .st.cur em{color:#fff}
.life{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tip{background:#FFF6DB;border-radius:12px;padding:10px 12px;margin-bottom:10px;font-size:15px;display:flex;gap:8px}
.tip svg{flex:none;width:22px;height:22px;color:var(--gold-2)}
.timer{font-weight:800;font-variant-numeric:tabular-nums;border-radius:999px;padding:4px 10px;background:var(--violet-soft);color:var(--violet)}
.timer.warn{background:var(--bad-soft);color:var(--red)}
.big-q{font-family:var(--display);font-size:44px;text-align:center;margin:10px 0 14px;color:var(--ink)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:340px;margin:0 auto}
.pad button{font-size:24px;font-weight:700;border:2px solid var(--rule-strong);background:var(--sheet);border-radius:14px;padding:12px 0;cursor:pointer;box-shadow:0 3px 0 var(--rule-strong)}
.pad button.go{background:var(--violet);color:#fff;border-color:var(--violet);box-shadow:0 3px 0 var(--violet-2)}
.ans-box{font-family:var(--hand);font-size:40px;text-align:center;color:var(--violet);min-height:56px;border-bottom:3px dotted var(--rule-strong);max-width:200px;margin:0 auto 14px}
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:520px;margin:0 auto}
.mcard{aspect-ratio:3/4;border-radius:14px;border:2px solid var(--rule-strong);background:var(--violet);color:#fff;font-size:30px;font-weight:700;cursor:pointer;display:grid;place-items:center;box-shadow:0 3px 0 var(--violet-2);padding:4px;text-align:center}
.mcard.up{background:var(--sheet);color:var(--ink);box-shadow:0 3px 0 var(--rule-strong)}
.mcard.word{font-size:15px}
.mcard.got{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);box-shadow:none}
@media (max-width:420px){.mem{grid-template-columns:repeat(3,1fr)}}

/* ---------- thi ---------- */
.exam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.exam{background:var(--sheet);border:2px solid var(--rule);border-radius:var(--r);padding:12px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:4px}
.exam b{font-size:15px}
.exam .tag{align-self:flex-start;font-size:12px;font-weight:700;border-radius:999px;padding:2px 8px;background:var(--ok-soft);color:var(--ok)}
.exam .tag.pro{background:#FFF1CC;color:#8A5A00}
.exam .done{font-family:var(--hand);color:var(--red);font-size:20px}

/* ---------- bố mẹ ---------- */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{background:var(--sheet);border:2px solid var(--rule);border-radius:var(--r);padding:12px}
.kpi b{font-family:var(--display);font-weight:400;font-size:28px;display:block;line-height:1.1}
.kpi span{font-size:13px;color:var(--ink-2)}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:120px;margin-top:10px}
.week div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;font-size:12px;color:var(--mute)}
.week i{display:block;width:100%;max-width:30px;background:var(--violet);border-radius:8px 8px 3px 3px;min-height:4px}
.week i.today{background:var(--red)}
.trow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--rule-strong)}
.trow:last-child{border-bottom:0}
.trow .nm{flex:1;min-width:0;font-size:15px}
.trow .pc{font-weight:700;font-variant-numeric:tabular-nums;width:48px;text-align:right}
.trow .mini{width:90px;height:8px;border-radius:8px;background:var(--rule);overflow:hidden;flex:none}
.trow .mini i{display:block;height:100%}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--rule-strong)}

/* ---------- bảng giá ---------- */
.plans{display:grid;gap:12px}
.plan{position:relative;background:var(--sheet);border:2px solid var(--rule);border-radius:var(--r-lg);padding:16px}
.plan.best{border-color:var(--violet);box-shadow:6px 6px 0 var(--violet-soft)}
.plan .rib{position:absolute;top:-12px;right:14px;background:var(--red);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px}
.plan .price{font-family:var(--display);font-size:32px;line-height:1.1;margin:4px 0}
.plan .price small{font-family:var(--body);font-size:14px;color:var(--mute)}
.plan .per{font-size:13.5px;color:var(--ok);font-weight:600}
.plan ul{margin:10px 0 14px;padding-left:20px;font-size:15px}
.plan li{margin:3px 0}
.promo{display:flex;gap:12px;align-items:center;background:#FFF4D6;border:2px dashed var(--gold);border-radius:var(--r);padding:12px 14px;margin-bottom:14px}
.promo .pct{flex:none;font-family:var(--display);font-size:22px;background:var(--red);color:#fff;border-radius:12px;padding:6px 10px;transform:rotate(-4deg)}
.promo code{font-family:var(--body);font-weight:700;background:#fff;border:1.5px dashed var(--red);border-radius:6px;padding:0 6px}
.cmp{width:100%;border-collapse:collapse;font-size:14.5px}
.cmp th,.cmp td{padding:9px 6px;border-bottom:1px dashed var(--rule-strong);text-align:left;vertical-align:top}
.cmp th{font-size:13px;color:var(--mute);font-weight:600}
.cmp td:nth-child(2),.cmp td:nth-child(3),.cmp th:nth-child(2),.cmp th:nth-child(3){text-align:center;width:28%}
details{border-bottom:1px dashed var(--rule-strong);padding:10px 0}
details summary{font-weight:600;cursor:pointer}
details p{margin-top:6px;font-size:15px;color:var(--ink-2)}

/* ---------- modal & toast ---------- */
.modal{position:fixed;inset:0;z-index:40;background:rgba(34,27,69,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--sheet);width:100%;max-width:520px;max-height:92vh;overflow:auto;border-radius:24px 24px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px));position:relative}
@media (min-width:600px){.modal{align-items:center}.sheet{border-radius:24px}}
.sheet .x{position:absolute;right:12px;top:12px;width:38px;height:38px;border-radius:50%;border:0;background:var(--violet-soft);color:var(--violet);font-size:22px;cursor:pointer}
.field{display:block;font-weight:600;font-size:14px;margin:12px 0 6px}
.tin{width:100%;font-size:17px;padding:11px 12px;border-radius:12px;border:2px solid var(--rule-strong);background:#FBFCFF}
.tin:focus{outline:none;border-color:var(--violet)}
.err{color:var(--red);font-size:14px;min-height:20px;margin-top:4px}
.qrbox{display:flex;justify-content:center;margin:14px 0 10px}
.qrbox .q{width:220px;background:#fff;border:2px solid var(--rule-strong);border-radius:16px;padding:8px}
.qrbox svg{display:block;width:100%;height:auto}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:15px}
.kv span{color:var(--mute)}
.kv b{word-break:break-word}
.note{background:#FFF6DB;border-radius:12px;padding:10px 12px;font-size:14px;margin-top:12px}
.grades{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.grades button{border:2px solid var(--rule-strong);background:var(--sheet);border-radius:14px;padding:12px 0;font-family:var(--display);font-size:22px;color:var(--ink-2);cursor:pointer}
.grades button.on{background:var(--violet);border-color:var(--violet);color:#fff}
.avs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.avs button{border:2px solid var(--rule);background:var(--sheet);border-radius:16px;padding:6px;cursor:pointer}
.avs button.on{border-color:var(--violet);background:var(--violet-soft)}
.avs svg{width:100%;height:auto;display:block}
.toast{position:fixed;left:50%;bottom:calc(var(--tabh) + 18px);transform:translateX(-50%);z-index:50;background:var(--ink);color:#fff;border-radius:14px;padding:10px 16px;font-size:15px;max-width:92vw;box-shadow:0 6px 20px rgba(34,27,69,.3)}
.break-veil{position:fixed;inset:0;z-index:60;background:rgba(246,248,255,.97);display:grid;place-items:center;padding:20px;text-align:center}
.mascot-say{display:flex;gap:10px;align-items:flex-end}
.mascot-say .m{width:72px;flex:none}
.bubble{position:relative;background:var(--sheet);border:2px solid var(--rule-strong);border-radius:16px;padding:10px 12px;font-family:var(--hand);font-size:19px;color:var(--violet)}
.board{width:100%;border-collapse:collapse}
.board td{padding:8px 6px;border-bottom:1px dashed var(--rule-strong)}
.board tr.me td{background:var(--violet-soft);font-weight:700}
.board td:first-child{width:36px;font-family:var(--display);color:var(--violet)}
.board td:last-child{text-align:right;font-weight:700}
.pop{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.6) rotate(-14deg);opacity:0}100%{transform:scale(1) rotate(-8deg);opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.sr{display:inline-flex;gap:2px;vertical-align:middle}
.sr svg{width:26px;height:26px}
.result .sr svg{width:34px;height:34px}
.node .sr svg{width:18px;height:18px}
.tw-intro{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
@media (max-width:600px){.tw-intro{grid-template-columns:1fr;text-align:left}.tw-intro>div:first-child svg{width:90px;height:auto}}
.vo-line{line-height:36px;padding:0}
.vo-title{line-height:36px;margin:0 0 0}
.vo-date{line-height:36px}
.sheet>h2,.sheet>.mascot-say{padding-right:44px}

/* ===== Bản tinh gọn: một họ chữ, nền phẳng, nhấn mạnh tiết chế ===== */
:root{--display:"Be Vietnam Pro",system-ui,sans-serif;--body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;--paper:#F5F5FA;--rule:#E6E6F0;--rule-strong:#D4D4E2}
body{background:var(--paper);background-image:none;font-size:15.5px}
h1,h2,h3{font-weight:800;letter-spacing:-.015em}
h1{font-size:25px} h2{font-size:20px} h3{font-size:17px}
.top{padding:8px 14px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--rule)}
.brand-mark{width:34px;height:34px}
.brand-name{font-family:var(--body);font-weight:800;font-size:16px;white-space:nowrap;letter-spacing:-.01em}
.brand-name span{font-size:16px;color:var(--violet);font-weight:500}
@media (max-width:380px){.brand-name span{display:none}}
.grade-btn,.star-chip,.pro-chip{white-space:nowrap;font-size:13px;padding:5px 10px;border-width:1.5px}
.pro-chip{background:var(--violet-soft);color:var(--violet)}
.pro-chip.on{background:var(--ok-soft);color:var(--ok)}
.card,.subj,.tile,.node,.qcard,.plan,.kpi,.exam,.runbar{border:1px solid var(--rule);box-shadow:0 1px 2px rgba(34,27,69,.04),0 6px 18px rgba(34,27,69,.05)}
.btn{font-size:15px;padding:11px 16px;border-radius:12px;box-shadow:0 3px 0 var(--violet-2)}
.btn.red{box-shadow:0 3px 0 var(--red-2)} .btn.gold{box-shadow:0 3px 0 var(--gold-2)}
.btn.ghost{box-shadow:inset 0 0 0 1.5px var(--rule-strong)}
.hello{margin-bottom:12px}.hello .av{width:46px;height:46px}.hello b{font-family:var(--body);font-weight:800;font-size:20px}
/* Trang vở gọn: giữ lề đỏ và dòng kẻ nhạt, chữ thường dễ đọc */
.vo{padding:14px 16px 16px 46px;border-radius:6px 18px 18px 6px;border:1px solid var(--rule-strong);box-shadow:4px 4px 0 var(--violet-soft);
  background-image:linear-gradient(90deg,transparent 32px,var(--margin) 32px,var(--margin) 33.5px,transparent 33.5px),repeating-linear-gradient(transparent 0 43px,#EEF0F8 43px 44px)}
.vo::before{display:none}
.vo-date{font-family:var(--body);font-size:13px;color:var(--mute);line-height:1.4}
.vo-title{font-family:var(--body);font-weight:800;font-size:20px;color:var(--ink);line-height:1.3;margin:0 0 6px}
.vo-line{font-family:var(--body);font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.35;min-height:44px;padding:6px 0;gap:10px}
.vo-line .tick{left:-40px;width:26px;height:26px;border-radius:50%;border:2px solid var(--rule-strong);display:grid;place-items:center;background:#fff}
.vo-line.done .tick{border-color:transparent;background:transparent}
.vo-line .tick svg{width:28px;height:28px}
.vo-line .sub{font-size:12px;font-weight:600;color:var(--ink-2);background:var(--paper);border-radius:999px;padding:2px 8px}
.vo-line.done{color:var(--mute)}
.vo-stamp{font-size:34px;width:60px;height:60px;top:12px;right:12px}
.vo-stamp small{font-size:10px;margin-top:-6px}
.vo-cta{margin-top:10px}
.subj{min-height:112px}.subj .ic,.subj-head .ic{font-family:var(--body);font-weight:800}
.tile.big b{font-family:var(--body);font-weight:800;font-size:18px}
.gtile b{font-family:var(--body);font-weight:800;font-size:18px}
.bubble{font-family:var(--body);font-size:15px;font-weight:500;color:var(--ink)}
.teacher{font-family:var(--body);font-size:16px;font-weight:600;color:var(--red-2)}
.qt{font-size:19px}
.opt{border-width:1.5px;box-shadow:0 2px 0 var(--rule-strong);font-size:16.5px}
.big-q,.plan .price,.kpi b,.tw-ladder .st b,.grades button{font-family:var(--body);font-weight:800}
.tabs{border-top:1px solid var(--rule)}
.star-chip span{display:inline-flex}.star-chip svg{max-width:none;width:16px;height:16px}

/* ================= Giao diện mới ================= */
body{font-size:15px}
main{padding:14px 14px 24px}
.btn.white{background:#fff;color:var(--violet);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.chev{width:18px;height:18px;color:var(--mute);flex:none}
.page-h{margin:4px 0 14px}.page-h h1{margin-bottom:4px}
/* banner trang chủ */
.hero{position:relative;display:flex;gap:10px;align-items:center;justify-content:space-between;border-radius:24px;padding:18px 16px 18px 18px;color:#fff;overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%,#8B6CF6 0%,#5B39D6 45%,#3E21A8 100%);box-shadow:0 12px 28px rgba(75,43,184,.28)}
.hero::after{content:"";position:absolute;right:-40px;bottom:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08)}
.hero-txt{position:relative;z-index:1;min-width:0}
.hero-hi{font-size:12.5px;opacity:.85;margin-bottom:4px}
.hero h1{font-size:26px;color:#fff;margin-bottom:4px}
.hero-sub{font-size:14px;opacity:.92;margin-bottom:12px;line-height:1.45}
.hero-sub b{color:#FFD66B;font-weight:700}
.hero-art{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
.hero-art .owl{width:78px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.ring{width:58px;height:58px}
/* nhiệm vụ */
.missions{display:grid;gap:8px;margin-top:12px}
.mis{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:10px 12px;text-align:left;cursor:pointer;box-shadow:0 1px 2px rgba(34,27,69,.04)}
.mis .mi{flex:none;width:38px;height:38px;border-radius:12px;background:var(--violet-soft);color:var(--violet);display:grid;place-items:center}
.mis .mi svg{width:20px;height:20px}
.mis .mt{flex:1;min-width:0}.mis .mt b{display:block;font-size:14.5px}.mis .mt span{display:block;font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mis.done .mi{background:var(--ok);color:#fff}.mis.done .mt b{color:var(--mute);text-decoration:line-through}
/* môn học */
.subjects2{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sj{position:relative;display:flex;flex-direction:column;text-decoration:none;color:#fff;border-radius:20px;padding:10px 12px 14px;min-height:150px;overflow:hidden}
.sj-toan{background:linear-gradient(160deg,#FF9A5A,#F3722C)} .sj-tv{background:linear-gradient(160deg,#3CC07C,#1E8E52)} .sj-ta{background:linear-gradient(160deg,#5B9BFF,#2563EB)}
.sj-art svg{width:100%;max-width:110px;height:auto;display:block;margin:0 auto 4px}
.sj b{font-size:15.5px;font-weight:800;line-height:1.2}
.sj-meta{font-size:11.5px;opacity:.9;margin-top:2px}
.sj-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.3);margin-top:8px;overflow:hidden}.sj-bar i{display:block;height:100%;background:#fff;border-radius:6px}
/* ôn luyện */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ft{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:18px;padding:12px;box-shadow:0 1px 2px rgba(34,27,69,.04),0 6px 18px rgba(34,27,69,.05)}
.ft .fi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--fc) 14%,#fff);color:var(--fc);margin-bottom:6px}
.ft .fi svg{width:22px;height:22px}
.ft b{font-size:14.5px;line-height:1.25}.ft span{font-size:12.5px;color:var(--mute);line-height:1.35}
/* trò chơi cuộn ngang */
.hscroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;scrollbar-width:none}.hscroll::-webkit-scrollbar{display:none}
.gcard{flex:none;width:170px;scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink);border-radius:18px;padding:14px}
.gcard .gi2 svg{width:34px;height:34px}.gcard b{font-size:15px;font-weight:800;line-height:1.2}.gcard span{font-size:12.5px;color:var(--ink-2)}
.parent-cta{display:flex;gap:12px;align-items:center;justify-content:space-between;background:#FFF7E0;border:1px solid #FFE3A3;border-radius:18px;padding:14px}
.parent-cta b{font-size:15px}.parent-cta p{font-size:13px;color:var(--ink-2);margin-top:2px}
/* lộ trình */
.subj-hero{display:flex;align-items:center;gap:12px;border-radius:22px;padding:12px 16px;color:#fff}
.subj-hero .sj-art svg{width:96px;margin:0}.subj-hero h1{color:#fff;font-size:23px}.subj-hero p{font-size:13px;opacity:.9}
.grp-h{font-size:15px;color:var(--ink-2);margin:18px 0 -6px;display:flex;align-items:center;gap:8px}
.grp-h::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.path{margin-top:14px}
.cta-strip{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);background:#fff;border:1px dashed var(--violet);border-radius:16px;padding:12px;margin-top:16px}
.cta-strip>svg:first-child{width:28px;height:28px;color:var(--violet);flex:none}.cta-strip>span{flex:1}
/* bài học */
.lesson{display:grid;gap:12px;max-width:720px;margin:0 auto}
.ls-card{background:#fff;border:1px solid var(--rule);border-radius:20px;padding:16px;box-shadow:0 6px 18px rgba(34,27,69,.05)}
.ls-card h3{display:flex;align-items:center;gap:8px;font-size:17px;margin-bottom:8px}.ls-card h3 svg{width:22px;height:22px;color:var(--violet)}
.ls-card ul{margin:0;padding-left:20px}.ls-card li{margin:5px 0;line-height:1.55}
.ill{margin-top:12px;background:#FAFAFE;border:1px solid var(--rule);border-radius:16px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;overflow-x:auto}
.ill svg{max-width:340px;width:100%;height:auto}
.ill-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chipx{background:#fff;border:1px solid var(--rule-strong);border-radius:12px;padding:6px 10px;font-size:14px;cursor:default}
button.chipx{cursor:pointer;font:inherit}
.bill{border-radius:8px;padding:10px 12px;font-weight:800;font-size:13px;color:#221B45;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.shape{display:flex;flex-direction:column;align-items:center;width:110px}.shape svg{width:90px!important}.shape em{font-style:normal;font-size:12.5px}
.ill-sent{background:#fff;border-radius:12px;padding:8px 12px;font-size:16px;line-height:1.6;width:100%}
.ill-sent mark{border-radius:5px;padding:0 3px}
.ill-tbl{border-collapse:collapse;width:100%;font-size:14.5px;background:#fff;border-radius:12px;overflow:hidden}
.ill-tbl th{background:var(--violet-soft);color:var(--violet);text-align:left;padding:7px 10px;font-size:13px}.ill-tbl td{padding:7px 10px;border-top:1px solid var(--rule)}
.ill-vocab{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;width:100%}
.vw{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:1px solid var(--rule);border-radius:14px;padding:8px 4px;cursor:pointer;font:inherit}
.vw span{font-size:30px;line-height:1.1}.vw b{font-size:14px}.vw i{font-style:normal;font-size:11.5px;color:var(--mute)}
.vw.on{border-color:var(--ta);background:var(--ta-soft)}
.ill-rule{display:grid;gap:6px;width:100%}.ill-rule div{display:flex;gap:10px;background:#fff;border-radius:12px;padding:8px 10px}.ill-rule b{color:var(--red);min-width:110px}
.ls-tip{margin-top:10px;background:#FFF7E0;border-radius:12px;padding:9px 12px;font-size:14px}
.ex{border:1px solid var(--rule);border-radius:16px;padding:12px;margin-top:10px}
.exl{display:inline-block;background:var(--violet);color:#fff;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;margin-bottom:6px}
.ex-q{font-weight:600;margin-bottom:6px}.ex-a{background:var(--ok-soft);border-radius:12px;padding:9px 12px;font-size:14.5px;margin-top:6px;line-height:1.55}
.ls-go{position:sticky;bottom:calc(var(--tabh) + 10px);z-index:5}
/* banner nhỏ cho các trang chức năng */
.banner-sm{display:flex;gap:12px;align-items:center;justify-content:space-between;border-radius:22px;padding:16px;color:#fff;margin-bottom:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--bc) 82%,#fff),var(--bc))}
.banner-sm h1{color:#fff;font-size:22px;margin-bottom:4px}.banner-sm p{font-size:13.5px;opacity:.93;line-height:1.5}
.bn-ic{flex:none;width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.2);display:grid;place-items:center}.bn-ic svg{width:32px;height:32px}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qk{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:16px;padding:12px}
.qk .qi{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;margin-bottom:6px}.qk .qi svg{width:20px;height:20px}
.qk b{font-size:14.5px}.qk span{font-size:12.5px;color:var(--mute)}
.weeks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.wk{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:12px;text-align:left;cursor:pointer;font:inherit}
.wk .wn{font-weight:800;font-size:16px}.wk.final{grid-column:1/-1;border-color:var(--toan);background:#FFF6EF}
.wk .tag,.exam .tag{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 8px;background:var(--ok-soft);color:var(--ok)}
.wk .tag.pro{background:#FFF1CC;color:#8A5A00}.wk .done{color:var(--red);font-weight:800}
.checks{display:grid;gap:6px;max-height:280px;overflow:auto;border:1px solid var(--rule);border-radius:14px;padding:8px}
.ck{display:flex;gap:10px;align-items:center;font-size:14.5px;padding:4px 2px}.ck input{width:20px;height:20px;accent-color:var(--violet)}
.share-box{white-space:pre-wrap;background:#FAFAFE;border:1px solid var(--rule);border-radius:14px;padding:12px;font-family:var(--body);font-size:14px;line-height:1.55;margin:0 0 12px;user-select:all}
.lbav{display:inline-block;width:26px;height:26px;vertical-align:middle;margin-right:8px}.lbav svg{width:26px;height:26px}
.exam .done{font-family:var(--body);font-weight:800;color:var(--red);font-size:15px}
.result .score{font-family:var(--hand)}
@media (max-width:420px){.subjects2{gap:8px}.sj{padding:8px 9px 12px;min-height:138px}.sj b{font-size:14px}}
.btn{white-space:nowrap;flex:none}.spread>div{min-width:0}

/* ===== Màn chào mừng ===== */
body.onb .top-right,body.onb .tabs{display:none}
body.onb main{padding:0;max-width:none}
body.onb{padding-bottom:0}
.wl{position:relative;min-height:calc(100vh - 54px);padding:22px 16px 28px;overflow:hidden;
  background:radial-gradient(140% 90% at 50% 0%,#7C5CF0 0%,#5B39D6 42%,#3A1F96 100%);color:#fff}
.wl-sky i{position:absolute;width:6px;height:6px;border-radius:50%;background:#FFE58A;opacity:.85;box-shadow:0 0 10px #FFE58A}
.wl-sky i:nth-child(1){top:6%;left:10%}.wl-sky i:nth-child(2){top:14%;right:12%;width:4px;height:4px}.wl-sky i:nth-child(3){top:30%;left:6%;width:3px;height:3px}.wl-sky i:nth-child(4){top:24%;right:30%;width:3px;height:3px}.wl-sky i:nth-child(5){top:40%;right:6%}
.wl-top{display:flex;align-items:center;justify-content:center;gap:10px;max-width:440px;margin:0 auto}
.wl-owl{width:118px;flex:none;filter:drop-shadow(0 10px 16px rgba(0,0,0,.28));animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.wl-bub{position:relative;background:#fff;color:var(--ink);border-radius:18px;padding:12px 14px;font-size:14.5px;line-height:1.45;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.wl-bub::before{content:"";position:absolute;left:-8px;top:50%;margin-top:-8px;border:8px solid transparent;border-right-color:#fff;border-left:0}
.wl-bub b{color:var(--violet)}
.wl-title{text-align:center;color:#fff;font-size:30px;margin:18px 0 2px;letter-spacing:-.02em}
.wl-sub{text-align:center;opacity:.85;font-size:14px}
.wl-pick{max-width:440px;margin:18px auto 0;background:#fff;border-radius:24px;padding:16px;color:var(--ink);box-shadow:0 16px 36px rgba(20,8,70,.35)}
.wl-pick h2{font-size:18px;margin-bottom:10px;text-align:center}
.wl-grades{display:grid;gap:8px}
.wg{display:flex;align-items:center;gap:12px;border:0;background:#F7F6FD;border-radius:16px;padding:8px 12px 8px 8px;cursor:pointer;text-align:left;font:inherit;transition:transform .12s}
.wg:active{transform:scale(.98)}
.wg-n{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px;background:linear-gradient(150deg,var(--c1),var(--c2));box-shadow:0 4px 10px color-mix(in srgb,var(--c2) 40%,transparent)}
.wg-t{flex:1;min-width:0}.wg-t b{display:block;font-size:15.5px}.wg-t span{font-size:12.5px;color:var(--mute)}
.wl-props{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:440px;margin:16px auto 0}
.wl-props span{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:12px;line-height:1.35;background:rgba(255,255,255,.12);border-radius:16px;padding:10px 6px}
.wl-props svg{width:22px;height:22px;color:#FFE58A}
.wl-card{position:relative;max-width:440px;margin:10px auto 0;background:#fff;color:var(--ink);border-radius:24px;padding:18px 16px;box-shadow:0 16px 36px rgba(20,8,70,.35)}
.wl-card h2{font-size:18px;margin-bottom:8px}
.wl-back{display:inline-flex;align-items:center;gap:4px;border:0;background:var(--violet-soft);color:var(--violet);font-weight:700;border-radius:999px;padding:5px 12px 5px 8px;margin-bottom:12px;cursor:pointer;font:inherit;font-size:13px}
.wl-back svg{width:16px;height:16px}

/* ===== Kỹ năng sống & gỡ rối ===== */
.bn-emo{flex:none;font-size:40px;width:62px;height:62px;border-radius:18px;background:rgba(255,255,255,.22);display:grid;place-items:center}
.kn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.kn{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:#fff;border-radius:18px;padding:12px;min-height:118px;background:linear-gradient(150deg,var(--c1),var(--c2));box-shadow:0 6px 16px color-mix(in srgb,var(--c2) 25%,transparent)}
.kn-e{font-size:30px;line-height:1;margin-bottom:6px}.kn b{font-size:14.5px;line-height:1.25}.kn span{font-size:12px;opacity:.9}
.cases{display:grid;gap:8px;margin-top:12px}
.case{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:10px 12px;text-align:left;cursor:pointer;font:inherit;color:var(--ink)}
.case-sc{flex:none;font-size:24px;min-width:56px;text-align:center;letter-spacing:-2px}
.case-t{flex:1;min-width:0}.case-t b{display:block;font-size:14.5px}.case-t span{display:block;font-size:12.5px;color:var(--mute)}
.scene{font-size:52px;text-align:center;border-radius:18px;padding:18px 8px;letter-spacing:6px;margin-bottom:12px}
.story{font-size:16.5px;line-height:1.65;margin-bottom:8px}
.sos{background:#FFF1F2;border:1px solid #FECDD3;border-radius:18px;padding:14px}
.sos>b{color:#BE123C;font-size:15px}.sos p{font-size:13px;color:var(--ink-2);margin-top:8px}
.sos-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.sos-row span{background:#fff;border-radius:12px;padding:8px 4px;text-align:center;font-size:11.5px;color:var(--ink-2);line-height:1.3}
.sos-row b{display:block;font-size:22px;color:#E11D48;font-weight:800}
.feel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.feel button{display:flex;flex-direction:column;align-items:center;gap:2px;border:1.5px solid var(--rule);background:#fff;border-radius:14px;padding:8px 4px;font:inherit;font-size:13px;cursor:pointer}
.feel button span{font-size:30px}.feel button.on{border-color:var(--violet);background:var(--violet-soft)}
.breath{position:relative;height:150px;display:grid;place-items:center;cursor:pointer;margin-top:6px}
.breath i{position:absolute;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,#F9A8D4,#A78BFA);opacity:.85}
.breath.go i{animation:breathe 8s ease-in-out infinite}
.breath span{position:relative;font-weight:700;color:var(--violet);font-size:14px}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.9)}}
.steps{padding-left:22px;margin:6px 0}.steps li{margin:6px 0;line-height:1.55}
@media (max-width:380px){.sos-row{grid-template-columns:repeat(2,1fr)}}
.kn .kn-e{font-size:32px;opacity:1}

/* ===== Trò chơi dân gian: Ai là Trạng Nguyên, Hành trình, Cổ tích ===== */
.ladder-list{display:grid;gap:4px;margin-top:14px}
.ll{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding:7px 12px;border-radius:12px;background:#FFF8EC;border:1px solid #F3E2C2;font-size:14px}
.ll-n{font-weight:800;color:#B45309}.ll-t{font-weight:600}.ll-p{color:#92400E;font-weight:700}
.ll.safe{background:#FDEBD3;border-color:#F0B866}.ll.safe .ll-t:after{content:" · mốc an toàn";font-weight:500;color:#B45309;font-size:12px}
.ll.done{background:#B45309;border-color:#B45309;color:#fff}.ll.done .ll-n,.ll.done .ll-p,.ll.done .ll-t:after{color:#FFE7B8}
.ll:first-child .ll-t{color:#B45309;font-weight:800}.ll.done:first-child .ll-t{color:#fff}
.vinhquy{font-size:34px;letter-spacing:4px;text-align:center;animation:vq 1.6s ease-in-out infinite alternate}
@keyframes vq{from{transform:translateX(-8px)}to{transform:translateX(8px)}}
.tn-map{width:100%;height:auto;display:block}
.tn-list{display:grid;gap:10px;margin-top:12px}
.tn-st{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:18px;border:2px solid var(--c);background:#fff;font:inherit;cursor:pointer}
.tn-st b{display:block;color:var(--c)}.tn-st .small{display:block}
.tn-st.lock{border-color:var(--rule);opacity:.6;cursor:not-allowed}.tn-st.lock b{color:var(--ink-2,#555)}
.tn-e{width:52px;height:52px;border-radius:16px;background:#FFF4E0;display:grid;place-items:center;font-size:28px}.tn-e.big{width:64px;height:64px;font-size:36px;flex:none}
.tn-s{font-weight:700;font-size:13px;padding:6px 10px;border-radius:999px;background:var(--c);color:#fff;white-space:nowrap}.tn-st.lock .tn-s{background:var(--rule)}
.story .story-h{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.story .story-h h2{margin:2px 0 0}
.story .tag,.ct-b .tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c)}
.story>p{line-height:1.7;font-size:16px}
.moral{display:flex;gap:8px;align-items:flex-start;background:#FFF8E1;border-radius:14px;padding:10px 12px;margin:10px 0}
.moral svg{width:18px;height:18px;flex:none;color:#D97706;margin-top:3px}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:14px}
.ct-card{display:block;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--rule);text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.ct-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(60,30,120,.12)}
.ct-pic{position:relative;line-height:0}.ct-pic svg{width:100%;height:auto;display:block}
.ct-pic.big svg,.ct-pic.run svg{border-radius:16px}.ct-pic.run{margin-bottom:12px;max-width:560px;margin-inline:auto}
.ct-stamp{position:absolute;top:8px;right:8px;background:#fff;color:#F59E0B;border-radius:999px;padding:4px 9px;font-size:14px;line-height:1;font-weight:800;box-shadow:0 2px 6px #0002}
.ct-b{padding:12px 14px 14px;display:grid;gap:5px}.ct-b b{font-size:17px;color:var(--c)}
.ct-badge{width:120px;height:120px;margin:10px auto;border-radius:50%;border:5px double var(--c);display:grid;place-items:center;align-content:center;gap:2px;background:#fff;transform:rotate(-8deg);animation:pop .4s ease}
.ct-badge span{font-size:44px;line-height:1}.ct-badge b{color:#F59E0B;font-size:18px;letter-spacing:2px}
.ct-stamp{top:auto;bottom:8px}

/* tranh minh họa câu hỏi */
.qpic .epic{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;font-size:34px;letter-spacing:2px;line-height:1.3;word-break:normal}
.epic .eg{display:inline-block;background:#fff;border:2px dashed var(--rule);border-radius:16px;padding:4px 10px;max-width:100%}
.epic .eg small{display:block;font-size:13px;letter-spacing:0;font-weight:600}
.epic .eo{font-size:30px;color:var(--violet)}
.epic s{opacity:.35;text-decoration:line-through 3px #E11D48}
.epic .brk{flex-basis:100%;height:0}
/* kịch tính: đồng hồ, hồi hộp, pháo giấy */
.tw-clock{position:relative;display:flex;align-items:center;gap:10px;margin:0 0 10px;font-weight:800;color:#B45309}
.tw-clock span{min-width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#FFF4E0;border:3px solid #F59E0B;font-size:16px}
.tw-clock i{flex:1;height:8px;border-radius:9px;background:linear-gradient(90deg,#22C55E,#F59E0B,#EF4444);transform-origin:left;animation:twc linear forwards}
@keyframes twc{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.opt.pick{border-color:#F59E0B!important;background:#FFF7E0;animation:pk .5s ease-in-out infinite alternate}
@keyframes pk{from{box-shadow:0 0 0 0 #F59E0B66}to{box-shadow:0 0 0 8px #F59E0B00}}
.suspense{margin-top:12px;text-align:center;font-weight:800;color:#B45309;font-size:18px;animation:pk2 .6s ease-in-out infinite alternate}
@keyframes pk2{from{opacity:.45;transform:scale(.97)}to{opacity:1;transform:scale(1.03)}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:cf linear forwards}
@keyframes cf{to{top:105%;transform:rotate(720deg) translateX(40px)}}
.lanterns{display:flex;gap:6px;justify-content:center;margin:0 0 12px;flex-wrap:wrap}
.lanterns span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;background:#FFF4E0;color:#B45309;border:2px solid #F3E2C2}
.lanterns span.cur{border-color:#B45309;background:#fff}
.lanterns span.ok{background:#FDE68A;border-color:#F59E0B;font-size:16px}
.lanterns span.no{background:#FEE2E2;border-color:#FCA5A5;color:#B91C1C}
/* đua với bạn ảo */
.race-bots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rb{border:2px solid var(--c);border-radius:16px;padding:10px 6px;text-align:center;display:grid;gap:2px}
.rb span{font-size:34px;line-height:1}.rb b{font-size:13px;color:var(--c)}.rb small{font-size:11px;color:var(--mute)}
.track{background:#1F2937;border-radius:18px;padding:10px 10px 6px;margin-bottom:12px;display:grid;gap:6px}
.lane{display:grid;grid-template-columns:1fr 44px 26px;grid-template-rows:auto 34px;column-gap:8px;align-items:center}
.ln-name{grid-column:1/-1;font-size:11px;font-weight:700;color:#CBD5E1}.ln-name small{font-weight:500;opacity:.7}
.lane.me .ln-name{color:#86EFAC}
.ln-road{position:relative;height:34px;border-radius:10px;background:repeating-linear-gradient(90deg,#374151 0 18px,#2D3748 18px 36px);border-left:4px solid #fff}
.lane.me .ln-road{box-shadow:0 0 0 2px #22C55E}
.ln-run{position:absolute;top:1px;font-size:26px;line-height:32px;transition:left .6s cubic-bezier(.3,1.4,.6,1)}
.ln-run .avs svg{width:30px;height:30px;display:block}
.ln-flag{position:absolute;right:2px;top:5px;font-size:18px}
.ln-f{position:absolute;top:-8px;right:-10px;font-style:normal;font-size:12px;font-weight:800;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:#fff;animation:pop .3s}
.ln-f.ok{background:#22C55E}.ln-f.no{background:#EF4444}
.ln-pts{color:#fff;font-size:14px;text-align:right}
.ln-rank{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:#4B5563;color:#fff}
.ln-rank.r1{background:#F59E0B}.ln-rank.r2{background:#94A3B8}.ln-rank.r3{background:#B45309}
.podium{display:flex;justify-content:center;align-items:flex-end;gap:8px;margin:14px 0}
.pd{width:96px;text-align:center;display:grid;gap:2px}
.pd>span{font-size:34px;line-height:1}.pd .avs svg{width:40px;height:40px;margin:0 auto;display:block}
.pd b{font-size:12px;color:var(--c)}.pd small{font-size:11px;color:var(--mute)}
.pd-b{margin-top:4px;border-radius:10px 10px 0 0;background:var(--c);color:#fff;font-weight:800;font-size:22px;display:grid;place-items:center}
.pd.p1 .pd-b{height:84px}.pd.p2 .pd-b{height:60px}.pd.p3 .pd-b{height:44px}
.ln-run .avs,.pd .avs{display:block;width:30px;min-width:30px}
.pd .avs{width:40px;min-width:40px;margin:0 auto}
.ln-run{min-width:30px;white-space:nowrap}
#rSub,#rLv{flex-wrap:wrap}#rSub button,#rLv button{white-space:nowrap}
/* đề kiểm tra định kì */
.de-form{background:#F6F3FF;border:1px solid #E2DBFF;border-radius:16px;padding:12px 14px;margin-top:12px;font-size:14px}
.de-form ul{margin:6px 0 0;padding-left:18px}.de-form li{margin:3px 0}
.de-tbl{width:100%;font-size:14px}.de-tbl th{text-align:left;font-size:12px;color:var(--mute);padding:6px}.de-tbl td{padding:7px 6px;vertical-align:top}
.de-part{display:flex;flex-direction:column;gap:2px;background:linear-gradient(90deg,#4B2BB8,#7C3AED);color:#fff;border-radius:14px;padding:10px 14px;margin-bottom:10px}
.de-part span{font-size:13px;opacity:.9}
.de-prompt{background:#FFF8E1;border-left:4px solid #F59E0B;border-radius:10px;padding:10px 12px;margin:8px 0;font-size:16px}
select.crit,#ctTb{font:inherit;padding:4px 6px;border-radius:8px;border:1.5px solid var(--rule)}
.ls-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:10px}
.ls-more .btn{justify-content:center}
.de-tbl td,.de-tbl th{width:auto!important;text-align:left}.de-tbl td:first-child{min-width:55%}
.ls-more{margin-top:4px}
.de-tbl td:first-child{font-family:inherit;color:inherit}.de-tbl td:last-child{text-align:right;white-space:nowrap}
/* thử thách tuần trên trang chủ */
.chal{margin-top:18px;border-radius:24px;padding:18px;background:linear-gradient(135deg,#1E1B4B,#4B2BB8 60%,#7C3AED);color:#fff;box-shadow:0 12px 30px rgba(75,43,184,.25)}
.chal-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.chal-h h2{margin:6px 0 4px;color:#fff;font-size:22px}.chal-h p{margin:0;font-size:14px;opacity:.9}
.chal-tag{display:inline-flex;align-items:center;gap:6px;background:#FDE68A;color:#78350F;font-weight:800;font-size:12px;padding:4px 10px;border-radius:999px}.chal-tag svg{width:14px;height:14px}
.chal-time{flex:none;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);padding:6px 10px;border-radius:12px;font-size:12px;font-weight:700;white-space:nowrap}
.medals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 10px}
.md{background:rgba(255,255,255,.1);border:1px dashed rgba(255,255,255,.35);border-radius:16px;padding:8px 4px;text-align:center;display:grid;gap:1px;opacity:.75}
.md span{font-size:28px;line-height:1.1;filter:grayscale(.6)}.md b{font-size:14px}.md small{font-size:11px;opacity:.85}
.md.got{opacity:1;background:rgba(253,230,138,.22);border-style:solid;border-color:#FDE68A}.md.got span{filter:none}
.chal-me{font-size:14px;background:rgba(0,0,0,.18);border-radius:12px;padding:8px 10px}
.chal-top{margin-top:10px;background:#fff;color:var(--ink);border-radius:16px;padding:10px 12px;display:grid;gap:6px}
.ct-row{display:grid;grid-template-columns:24px 28px 1fr auto;align-items:center;gap:8px}.ct-row .lbav svg{width:26px;height:26px}
.chal .btn.wide{background:#F59E0B;box-shadow:0 4px 0 #B45309;color:#fff}
/* màu sắc vui mắt cho câu hỏi */
.opts .opt:nth-child(4n+1){--oc:#FF7A59;--ob:#FFF1EC}
.opts .opt:nth-child(4n+2){--oc:#2F9BFF;--ob:#EAF5FF}
.opts .opt:nth-child(4n+3){--oc:#22B573;--ob:#E9F9F1}
.opts .opt:nth-child(4n+4){--oc:#B85CF5;--ob:#F6ECFF}
.opts .opt:not(.ok):not(.bad){background:var(--ob);border-color:color-mix(in srgb,var(--oc) 45%,#fff);box-shadow:0 4px 0 color-mix(in srgb,var(--oc) 55%,#fff)}
.opts .opt:not(.ok):not(.bad) .k{background:var(--oc);color:#fff}
.opts .opt:not(:disabled):hover{transform:translateY(-2px)}
.opts .opt:not(:disabled):active{transform:translateY(2px);box-shadow:none}
.opt{transition:transform .12s,box-shadow .12s}
.opt.pic{font-size:52px;min-height:100px;border-radius:20px}
.qpic{background:radial-gradient(circle at 30% 20%,#FFF7D6,#FFE8F0 60%,#E8F4FF);border-radius:22px;padding:12px;width:fit-content;max-width:100%;margin:6px auto 14px;min-width:120px;box-shadow:inset 0 0 0 3px #fff,0 6px 16px rgba(75,43,184,.10)}
.qpic:has(.epic){background:none;box-shadow:none;padding:0;width:auto}
.qt{color:#2A1F66}
.qmeta .lv{border-radius:999px}
.ill-vocab .vw{transition:transform .12s}.ill-vocab .vw:hover{transform:scale(1.05)}
/* kiểm tra trình độ */
.diag-card{display:grid;grid-template-columns:48px 1fr 20px;gap:12px;align-items:center;margin-top:14px;padding:14px 16px;border-radius:20px;background:linear-gradient(135deg,#FFF4D6,#FFE1EC);border:2px solid #FBC9A8;color:var(--ink);text-decoration:none;box-shadow:0 6px 16px rgba(243,114,44,.12)}
.diag-card .dc-ic{width:48px;height:48px;border-radius:14px;background:#F3722C;color:#fff;display:grid;place-items:center}.diag-card .dc-ic svg{width:26px;height:26px}
.diag-card b{display:block;color:#B4380A;font-size:16px}.diag-card span span{font-size:13px;color:var(--ink-2)}
.diag-hero{border-radius:24px;padding:20px;background:radial-gradient(circle at 90% 8%,rgba(255,255,255,.18) 0 70px,transparent 71px),linear-gradient(135deg,#6E4FE6,#4A2FB5 50%,#0B7A75);box-shadow:0 8px 20px rgba(74,47,181,.25);color:#fff}
.diag-hero h1{color:#fff;margin:8px 0}.diag-hero p{margin:0 0 8px}
.diag-list{list-style:none;padding:0;margin:8px 0 14px;display:grid;gap:6px}.diag-list li{display:flex;gap:8px;align-items:flex-start;font-weight:600}.diag-list svg{width:18px;height:18px;flex:none;background:#fff;color:#16A34A;border-radius:50%;padding:2px}
.diag-hero .btn.red{background:#FDE68A;color:#7C2D12;box-shadow:0 4px 0 #D97706}
.dg-ring{--p:50;width:150px;height:150px;border-radius:50%;margin:12px auto;display:grid;place-items:center;align-content:center;background:conic-gradient(var(--c) calc(var(--p)*1%),#EEE 0);position:relative}
.dg-ring::before{content:"";position:absolute;inset:14px;border-radius:50%;background:#fff}.dg-ring b,.dg-ring span{position:relative}.dg-ring b{font-size:36px;color:var(--c);line-height:1}.dg-ring span{font-weight:700;color:var(--c)}
.dg-subs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.dg-sub{background:#fff;border:2px solid color-mix(in srgb,var(--c) 40%,#fff);border-radius:16px;padding:10px;display:grid;gap:3px;text-align:center}
.dg-sub b{font-size:24px;color:var(--c)}.dg-n{font-weight:700;font-size:13px}.dg-l{font-size:12px;font-weight:700;color:var(--c)}.dg-sub small{font-size:11px;color:var(--mute)}
.dg-tags{display:flex;flex-wrap:wrap;gap:6px}
.dg-tag{font:inherit;font-size:13px;padding:6px 10px;border-radius:999px;border:0}.dg-tag.ok{background:#E9F9F1;color:#166534}.dg-tag.bad{background:#FFF1EC;color:#B4380A;cursor:pointer;font-weight:600}
.dg-week{display:grid;gap:6px;margin-top:10px}.dg-week b{color:var(--violet)}
.dg-go{font:inherit;text-align:left;background:#F6F3FF;border:1.5px solid #E2DBFF;border-radius:12px;padding:8px 12px;cursor:pointer;color:var(--ink);text-decoration:none}
.dg-cta{margin-top:12px;border-radius:20px;padding:16px;background:linear-gradient(135deg,#4B2BB8,#7C3AED);color:#fff}.dg-cta p{margin:6px 0 10px;font-size:14px}
.report h3 svg,.diag-rep h3 svg{width:20px;height:20px;vertical-align:-4px;margin-right:4px;color:var(--violet)}
/* lộ trình theo tuần */
.lt-hero{border-radius:24px;padding:18px;background:linear-gradient(135deg,#0EA5E9,#2563EB 55%,#4B2BB8);color:#fff}
.lt-hero h1{color:#fff;margin:8px 0 4px}.lt-hero p{margin:0;font-size:14px;opacity:.95}
.lt-steps{display:flex;align-items:center;margin-top:14px}.lt-steps i{flex:1;height:3px;background:rgba(255,255,255,.35)}
.lt-steps span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.5)}
.lt-steps span.cur{background:#FDE68A;color:#78350F;border-color:#FDE68A}.lt-steps span.done{background:#22C55E;border-color:#22C55E}.lt-steps svg{width:18px;height:18px}
.lt-item{display:grid;grid-template-columns:58px 1fr 28px;gap:10px;align-items:center;width:100%;text-align:left;font:inherit;background:#fff;border:2px solid var(--rule);border-radius:16px;padding:10px 12px;margin-top:8px;cursor:pointer;color:var(--ink)}
.lt-item.done{border-color:#86EFAC;background:#F0FDF4}.lt-item.test{border-color:#FBC9A8;background:#FFF7ED}
.lt-day{font-size:12px;font-weight:800;color:var(--violet)}.lt-nm b{display:block}.lt-nm span{font-size:12px;color:var(--mute)}.lt-nm i{font-style:normal;font-weight:700}
.lt-ck svg{width:22px;height:22px;color:var(--violet)}.lt-item.done .lt-ck svg{color:#16A34A}
.lt-chart{display:flex;gap:10px;align-items:flex-end;height:150px;padding:8px 0}
.lt-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.lt-bar i{width:70%;border-radius:10px 10px 4px 4px;min-height:6px}.lt-bar b{font-size:14px}.lt-bar span{font-size:12px;color:var(--mute)}
.lt-wk{display:grid;gap:3px;padding:10px 0;border-bottom:1px dashed var(--rule)}.lt-wk.cur b{color:var(--violet)}.lt-sc{font-weight:800;color:#16A34A}
.lt-lock{background:#FFFBEB;border-color:#FDE68A}
.lt-card{background:linear-gradient(135deg,#E0F2FE,#EDE9FE);border-color:#BFDBFE}.lt-card .dc-ic{background:#2563EB}.lt-card b{color:#1E40AF}
.dp{text-align:center}.dp h2{margin:8px 0 4px}.dp-l{text-align:left;color:var(--ink)}.dp-l svg{background:#DCFCE7}
.dp-off{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:10px;color:var(--mute)}
/* thông báo kiểu notify */
.ntf{position:fixed;left:50%;top:10px;width:min(440px,calc(100% - 20px));transform:translate(-50%,-140%);z-index:1000;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-radius:20px;box-shadow:0 14px 40px rgba(30,20,80,.28);padding:10px 12px 12px;transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
.ntf.in{transform:translate(-50%,0)}
.ntf-top{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute)}.ntf-top b{color:var(--ink);font-size:12px}
.ntf-app{width:20px;height:20px;border-radius:6px;background:#EDE9FE;display:grid;place-items:center;overflow:hidden}.ntf-app svg{width:20px;height:20px}
.ntf-t{margin-left:auto}.ntf-x{border:0;background:#F1F0F7;width:22px;height:22px;border-radius:50%;font-size:16px;line-height:1;cursor:pointer;color:var(--mute)}
.ntf-body{display:grid;grid-template-columns:40px 1fr;gap:10px;margin-top:8px}.ntf-ic{font-size:30px;line-height:1}
.ntf-body b{display:block;font-size:15px}.ntf-body p{margin:2px 0 0;font-size:13px;color:var(--ink-2)}
.ntf-act{display:flex;gap:6px;margin-top:10px}.ntf-act button{flex:1;font:inherit;font-size:13px;font-weight:700;border:0;border-radius:12px;padding:8px;background:#F1F0F7;color:var(--ink);cursor:pointer}
.ntf-act button.go{background:var(--red,#E5383B);color:#fff}
/* rung nhẹ gây chú ý */
@keyframes wg{0%,100%{transform:rotate(0)}15%{transform:rotate(-1.6deg) scale(1.015)}30%{transform:rotate(1.4deg) scale(1.015)}45%{transform:rotate(-1deg)}60%{transform:rotate(.7deg)}75%{transform:rotate(-.3deg)}}
.wiggle{animation:wg .7s ease-in-out}
.diag-card.wiggle{box-shadow:0 8px 24px rgba(243,114,44,.35)}
@media (prefers-reduced-motion: reduce){.wiggle{animation:none}}
/* bắt nạt mở rộng */
.kn-box{background:#fff;border:2px solid var(--rule);border-radius:20px;padding:14px;margin-top:14px}.kn-box h3{margin:0 0 6px}
.sg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:8px}
.sg{font:inherit;text-align:left;border:2px dashed #FBCFE8;background:#FFF1F5;border-radius:14px;padding:10px;cursor:pointer;display:grid;gap:6px;font-size:14px;color:var(--ink)}
.sg .sg-a{display:none;font-size:14px}.sg.open{border-style:solid;background:#fff}.sg.open .sg-a{display:block}
.say-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.say-chip{font:inherit;font-weight:700;display:inline-flex;gap:6px;align-items:center;border:0;border-radius:999px;padding:9px 14px;background:linear-gradient(135deg,#FF7A9A,#E11D48);color:#fff;cursor:pointer}.say-chip svg{width:16px;height:16px}
.kn-box.kh{background:linear-gradient(135deg,#F0FDF4,#ECFEFF);border-color:#A7F3D0}.kh-in{margin-bottom:6px}
.kn-box.par summary{cursor:pointer;list-style:none}.kn-box.par{background:#F6F3FF;border-color:#E2DBFF}
.dg-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 12px}
.dg-pick button{font:inherit;text-align:left;border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.14);color:#fff;border-radius:14px;padding:8px 10px;cursor:pointer;display:grid}
.dg-pick button span{font-size:12px;opacity:.9}.dg-pick button.on{background:#fff;color:#4A2FB5;border-color:#fff}
/* ===== Toán tư duy HSG: chuyên đề & dạng ===== */
.cd-list{display:grid;gap:10px;margin-top:14px}
.cd{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:#fff;border:1.5px solid #E6E0FA;text-align:left;font:inherit;cursor:pointer;box-shadow:0 2px 0 #E6E0FA}
.cd:active{transform:translateY(1px)}
.cd-n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#8B6CF0,#6E4FE6);color:#fff;font-weight:800}
.cd-t{flex:1;display:flex;flex-direction:column;gap:2px}.cd-t span{font-size:.85rem;color:#6b6585}
.cd .chev{width:18px;height:18px;opacity:.5}
.dang{background:#fff;border:1.5px solid #E6E0FA;border-radius:18px;padding:14px;margin-top:12px}
.dang-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.dang-n{background:#6E4FE6;color:#fff;border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:700}
.dang-m{background:#F6F3FF;border-radius:12px;padding:8px 12px;font-size:.93rem}.dang-m ul{margin:4px 0 0;padding-left:18px}.dang-m li{margin:2px 0}
.ex{margin-top:10px;border-left:4px solid #F3722C;background:#FFF7F1;border-radius:0 12px 12px 0;padding:8px 12px}
.exl{font-weight:800;color:#C2410C;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.ex-q{margin:4px 0 6px;font-weight:600}
.ex details summary{cursor:pointer;color:#6E4FE6;font-weight:700}
.ex-a{margin-top:6px;line-height:1.6}
/* ===== Phiếu bài tập cuối tuần ===== */
.pf-strip{border-color:#0B7A75;color:#0B5F5B;margin-bottom:12px}
.pw-h{margin:16px 2px 8px;font-size:1rem;color:#4A2FB5}
.pw-list{display:grid;gap:8px}
.pw{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#fff;border:1.5px solid #E6E0FA;font:inherit;text-align:left;cursor:pointer}
.pw.now{border-color:#0B7A75;box-shadow:0 0 0 3px #CDEDEA}
.pw.later{opacity:.72}
.pw-n{flex:none;font-weight:800;color:#4A2FB5;min-width:62px}
.pw-t{flex:1;font-size:.9rem;color:#4b4666;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pw .done{font-weight:700;color:#0E9F6E;font-size:.85rem;white-space:nowrap}
.pf-intro{text-align:center}.pf-intro h2{margin:6px 0 10px}
.pf-ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#E2F5F3;color:#0B7A75}.pf-ic svg{width:30px;height:30px}
.pf-parts{display:inline-block;text-align:left;margin:4px 0 14px}
.pp{background:#fff;color:#111;border-radius:6px;padding:22px 20px;font-family:"Times New Roman",Times,serif;font-size:15px;line-height:1.5;box-shadow:0 1px 6px rgba(0,0,0,.12)}
.pp-head{display:flex;justify-content:space-between;gap:10px;font-size:13px;border-bottom:1px solid #999;padding-bottom:6px}
.pp-title{text-align:center;font-size:18px;margin:12px 0}
.pp h3{font-size:15.5px;margin:14px 0 4px}
.pp-note{margin:0 0 6px;color:#333}
.pp-q{margin:8px 0 10px;break-inside:avoid}.pp-q p{margin:0 0 4px}
.pp-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;padding-left:14px}
.pp-ans{padding-left:14px}
.pp-line{border-bottom:1px dotted #777;height:26px}
.pp-fig svg{max-width:260px;height:auto}.pp-pic{font-size:30px}
.pp-pass{border:1px solid #bbb;border-radius:4px;padding:8px 12px;margin:6px 0}.pp-pass p{margin:4px 0;text-indent:1.2em}
.pp-key{margin-top:24px;padding-top:10px;border-top:2px dashed #999;break-before:page}.pp-key ol{columns:2;margin:0}
@media print{
  @page{size:A4;margin:14mm}
  body *{visibility:hidden!important}
  #pv,#pv *{visibility:visible!important}
  #pv{position:absolute;left:0;top:0;width:100%;box-shadow:none;padding:0;border-radius:0}
}
/* ===== Phiếu tuần kiểu bài làm trên máy ===== */
.pt-hero{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:20px 20px 16px;border-radius:24px;color:#fff;background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.25) 0 60px,transparent 61px),linear-gradient(135deg,#6E4FE6,#0B7A75);box-shadow:0 8px 20px rgba(74,47,181,.25)}
.pt-hero h1{margin:0;font-size:2.2rem;line-height:1.1}.pt-hero p{margin:2px 0;opacity:.92}
.pt-k{text-transform:uppercase;font-size:.75rem;letter-spacing:.08em;font-weight:800}
.pt-ring{--p:0;width:78px;height:78px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(#FFD166 calc(var(--p)*1%),rgba(255,255,255,.25) 0);position:relative}
.pt-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#5A45C9}
.pt-ring b,.pt-ring span{position:relative;line-height:1}.pt-ring b{font-size:1.35rem}.pt-ring span{font-size:.75rem}
.pt-goal{flex-basis:100%;background:rgba(255,255,255,.16);border-radius:12px;padding:7px 12px;font-weight:600;font-size:.92rem}
.pt-list{display:grid;gap:12px;margin-top:14px}
.pt-sub{display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;border:2px solid color-mix(in srgb,var(--c) 30%,transparent);font:inherit;text-align:left;cursor:pointer;box-shadow:0 3px 0 color-mix(in srgb,var(--c) 35%,transparent);transition:transform .12s}
.pt-sub:active{transform:translateY(2px);box-shadow:none}
.pt-e{flex:none;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:30px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.pt-b{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.pt-b b{font-size:1.1rem;color:var(--c)}
.pt-b>span:not(.pt-st):not(.pt-n){font-size:.85rem;color:#4b4666;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pt-n{font-size:.82rem;color:#6b6585}.pt-st{color:#F5A400;font-weight:800;font-size:.9rem}.pt-st i{color:#D9D4E8;font-style:normal}
.pt-go{flex:none;background:var(--c);color:#fff;font-weight:800;border-radius:999px;padding:8px 14px;font-size:.9rem}
.pt-h{margin:20px 2px 8px;font-size:1rem;color:#4A2FB5}
.pt-weeks{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.pt-w{flex:none;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:78px;padding:10px 8px;border-radius:14px;background:#fff;border:1.5px solid #E6E0FA;font:inherit;cursor:pointer}
.pt-w.on{border-color:#6E4FE6;background:#F3EFFF}.pt-w span{font-size:.85rem;color:#6b6585}
.pt-w i{position:absolute;top:-6px;right:-4px;font-style:normal;font-size:.62rem;font-weight:800;background:#6E4FE6;color:#fff;border-radius:6px;padding:1px 5px}
.pt-print{text-align:center;margin:18px 0 6px}.pt-print a{display:inline-flex;gap:6px;align-items:center;color:#6b6585;font-size:.88rem}.pt-print svg{width:16px;height:16px}
.pt-prs{display:grid;gap:8px;margin-top:10px}
.pt-badge{margin-top:10px;padding:10px 12px;border-radius:14px;background:linear-gradient(135deg,#FFF3C4,#FFE1A8);color:#7A4B00}
/* ===== Trang chủ gọn: 4 ô lớn ===== */
.big4{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.b4{display:flex;flex-direction:column;gap:2px;padding:16px 14px;border-radius:20px;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 4px 0 color-mix(in srgb,var(--c2) 70%,#000 10%);min-height:118px}
.b4:active{transform:translateY(2px);box-shadow:none}
.b4-e{font-size:34px;line-height:1;margin-bottom:6px}
.b4 b{font-size:1.15rem}.b4 span:last-child{font-size:.88rem;opacity:.92}
/* Toán là môn chính: thẻ rộng cả hàng */
.subjects2{grid-template-columns:1fr 1fr!important}
.sj-main{grid-column:1/-1;flex-direction:row!important;align-items:center;gap:12px;min-height:0!important;padding:14px 16px!important}
.sj-main .sj-art svg{width:110px;margin:0}
.sj-txt{flex:1;display:flex;flex-direction:column;min-width:0}
.sj-main b{font-size:21px!important}
.sj-tag{align-self:flex-start;background:rgba(255,255,255,.25);border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:800;margin-bottom:4px}
.sj-main .sj-meta{font-size:13px}
.sj-go{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:10px;background:#fff;color:#E86A12;font-weight:800;font-size:14px;border-radius:999px;padding:6px 14px}.sj-go svg{width:16px;height:16px}
.subjects2 .sj:not(.sj-main){min-height:128px}
/* ===== Kiểu bài mới ===== */
.tf{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tfb{font:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;border-radius:18px;border:2.5px solid;cursor:pointer;font-size:26px;background:#fff}
.tfb b{font-size:17px}.tfb.t{color:#0E9F6E;border-color:#9BE3C6}.tfb.f{color:#E5383B;border-color:#F6B4B5}
.tfb.ok{background:#E9F9F1;border-color:#0E9F6E}.tfb.bad{background:#FDECEC;border-color:#E5383B}.tfb.pick{box-shadow:0 0 0 3px var(--violet)}
.mul{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mo{font:inherit;font-weight:700;font-size:17px;padding:12px 8px;border-radius:14px;border:2px solid #E2DCF7;background:#fff;cursor:pointer}
.mo.on{background:#ECE7FF;border-color:#6E4FE6;color:#4A2FB5}.mo.on::before{content:"✓ "}
.mo.ok{background:#E9F9F1;border-color:#0E9F6E;color:#0B6B4A}.mo.bad{background:#FDECEC;border-color:#E5383B;color:#B42318}
.mt{display:grid;grid-template-columns:1fr 1fr;gap:18px}.mt-col{display:grid;gap:8px}
.mc-i{font:inherit;font-weight:700;font-size:17px;padding:12px 8px;border-radius:14px;border:2px solid #E2DCF7;background:#fff;cursor:pointer;transition:background .15s}
.mc-i.on{color:#fff;border-color:transparent}.mc-i.cur{outline:3px dashed #6E4FE6;outline-offset:2px;background:#ECE7FF!important;color:#4A2FB5}
.mc-i.ok{box-shadow:0 0 0 3px #0E9F6E}.mc-i.bad{box-shadow:0 0 0 3px #E5383B}
.bl{font-size:26px;font-weight:800;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;padding:8px 0 4px;letter-spacing:.02em}
.bli{width:54px;height:54px;font:inherit;font-size:24px;text-align:center;border:2.5px dashed #8B6CF0;border-radius:12px;background:#F6F3FF;color:#4A2FB5}
.bli:focus{outline:none;border-style:solid;background:#fff}.bli.ok{border:2.5px solid #0E9F6E;background:#E9F9F1}.bli.bad{border:2.5px solid #E5383B;background:#FDECEC}
.gr{display:grid;gap:6px;justify-content:center;padding:6px 0}
.gr-r{display:flex;gap:6px;justify-content:center}
.gc{width:56px;height:56px;display:grid;place-items:center;font-size:22px;font-weight:800;border-radius:12px;background:#FFF4EC;border:2px solid #FBC8A5;color:#7A3A0E}
.gr .bli.gc{width:56px;height:56px}
.eqs{display:grid;gap:6px;font-size:28px;font-weight:800;color:#2B2550;text-align:center}.eqs div{background:#FFF8E6;border-radius:12px;padding:6px 10px}
.seqp{font-size:30px;letter-spacing:4px;text-align:center;line-height:1.5}.seqp b{color:#6E4FE6}
.qt{white-space:pre-line}
.ex .exl{display:inline-block;background:#FFE7D6!important;color:#C2410C!important;border-radius:999px;padding:2px 10px;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
/* ===== Bài hay chọn lọc ===== */
.bh{margin-top:12px}.bh-h{display:flex;gap:8px;align-items:center;margin:0 4px 6px}
.bh-n{font-weight:800;color:#4A2FB5}.tag.ok{background:#E9F9F1;color:#0B6B4A}
.bh-q.qcard{margin:0}
/* ===== Bản in giống giấy thi ===== */
.gt-head,.gt-mark{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:8px}
.gt-head td{vertical-align:top;padding:2px 4px;line-height:1.6}
.gt-mark td{border:1.5px solid #333;padding:6px 8px;vertical-align:top}
.pp-pt{font-weight:400;font-size:13px}
.pp-kt{width:100%;border-collapse:collapse;font-size:13.5px}.pp-kt td,.pp-kt th{border:1px solid #999;padding:4px 6px;vertical-align:top;text-align:left}
.pp-kt td:first-child,.pp-kt td:last-child{text-align:center;width:42px}
.pp.gt h3{text-transform:none}
.pp-grid{height:96px;margin:4px 0 6px 14px;width:150px;background-image:linear-gradient(#bbb 1px,transparent 1px),linear-gradient(90deg,#bbb 1px,transparent 1px);background-size:16px 16px;border:1px solid #999}
.pp-grid,.pp .gt-mark{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.eqs{font-size:clamp(18px,6.2vw,26px)}.eqs div{white-space:nowrap}
.hsg-tl{border-top:1px dashed #D9D2F5;padding-top:10px;margin-top:10px}.hsg-tl select{font:inherit;padding:4px 8px;border-radius:8px;margin-left:6px}
.pp .eqs{font-size:15px!important;gap:2px}.pp .eqs div{background:none;padding:0}.pp .pp-pic,.pp .pp-pic .epic{font-size:18px}.pp .seqp{font-size:18px}.pp-fig svg{max-width:230px!important}.pp .qpic{background:none;box-shadow:none}
/* ===== Bảng xếp hạng dùng chung ===== */
.lbw{margin-top:14px;background:#fff;border:1.5px solid #F2D27A;border-radius:18px;padding:12px 14px;box-shadow:0 3px 0 #F7E3A8;text-align:left}
.lbw-h{display:flex;gap:6px;align-items:center;margin-bottom:8px;color:#7A4B00}
.lbw .board{width:100%}.lbw .board tr.me td{background:#FFF6D6;font-weight:800}
/* ===== Bảng vàng tuần ===== */
.bv{margin-top:14px;border-radius:22px;padding:16px;background:linear-gradient(160deg,#FFF6D6,#FFE9B8);border:2px solid #F2C94C;box-shadow:0 4px 0 #E8B93A}
.bv-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.bv-h h2{margin:6px 0 4px;font-size:1.15rem;color:#5A3A00}
.bv-me{flex:none;display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:16px;padding:6px 12px;box-shadow:0 2px 0 #F2C94C}.bv-me b{font-size:1.6rem;color:#C27803;line-height:1.1}.bv-me small{font-size:.7rem;color:#7A5A1A}
.bv .board{width:100%;background:#fff;border-radius:14px;overflow:hidden;margin-top:8px}.bv .board td{padding:7px 8px}
.bv .board tr.me td{background:#E9F9F1;font-weight:800}.bv .board tr.bot td{color:#6b6585}
.bv .tag{font-size:.65rem;padding:1px 6px;background:#F3EFFF;color:#6E4FE6;border-radius:6px;font-weight:700;vertical-align:middle}
.bv-e{font-size:20px;display:inline-grid;place-items:center;width:28px}
.bv-goal{margin:10px 0 0;font-weight:600;color:#5A3A00}
.bv-note{margin:6px 0 0;color:#8A6A2A}
.bv-c .board tr:nth-child(n+7){display:none}.bv-c .board tr.me{display:table-row!important}
/* ===== Theo đặc tả 3.0 ===== */
.pp.nokey .pp-key{display:none}
.pp-src{font-size:11.5px;font-style:italic;color:#555;margin:2px 0 8px}
.rep-link{display:block;margin:6px 0 0 auto;background:none;border:0;color:#8A84A6;font:inherit;font-size:.8rem;text-decoration:underline;cursor:pointer}
.rep-opts{display:grid;gap:8px}
.fb.try{background:#FFF7E0;border-color:#F2C94C;color:#6B4E00}
#offbar{position:fixed;left:0;right:0;top:0;z-index:999;background:#4A2FB5;color:#fff;text-align:center;font-size:.85rem;padding:6px 10px}
.pp.pdfing{box-shadow:none;border-radius:0;padding:0}
/* ===== Khám phá (11/2026) ===== */
.kp-hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;gap:8px;padding:18px 18px 16px;border-radius:24px;color:#fff;background:radial-gradient(circle at 92% 10%,rgba(255,255,255,.22) 0 70px,transparent 71px),linear-gradient(135deg,#4B2BB8,#8B5CF6 60%,#EC4899);box-shadow:0 8px 20px rgba(74,47,181,.22)}
.kp-hero h1{margin:0;font-size:1.9rem;line-height:1.1;color:#fff}.kp-hero p{margin:2px 0 0;opacity:.95}
.kp-k{text-transform:uppercase;font-size:.72rem;letter-spacing:.08em;font-weight:800;opacity:.85!important}
.kp-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.kp-pills span{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:4px 10px;font-size:.82rem;font-weight:700}
.kp-owl{font-size:3.4rem;align-self:flex-start;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2))}
.kp-h{font-size:1.1rem;margin:20px 2px 10px}
.kp-big{display:grid;gap:12px}
.kp-bc{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:4px;padding:16px 16px 14px;border-radius:22px;color:#fff;text-decoration:none;box-shadow:0 6px 16px rgba(34,27,69,.14)}
.kp-bc b{font-size:1.25rem;line-height:1.2;max-width:72%}.kp-bc .kp-d{font-size:.9rem;opacity:.95;max-width:72%;line-height:1.35}
.kp-bc .kp-emo{position:absolute;right:12px;top:12px;width:68px;height:68px;border-radius:20px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:2.4rem}
.kp-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.kp-go{background:#fff;color:#221B45;font-weight:800;border-radius:999px;padding:6px 14px;font-size:.88rem}
.kp-st{font-size:.8rem;font-weight:700;opacity:.92}
.kp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kp-sc{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:18px;background:var(--sheet,#fff);border:1px solid var(--rule);text-decoration:none;color:var(--ink);box-shadow:0 1px 2px rgba(34,27,69,.04),0 6px 14px rgba(34,27,69,.05)}
.kp-sc b{font-size:1rem;line-height:1.2;margin-top:4px}.kp-sc .kp-d{font-size:.8rem;color:var(--ink-2);line-height:1.3}
.kp-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.6rem;flex:none}
.kp-st2{margin-top:auto;padding-top:6px;font-size:.75rem;font-weight:700;color:var(--ink-2)}
.kp-sc:active,.kp-bc:active,.kp-kn:active{transform:scale(.98)}
.kp-kn{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px;border-radius:18px;background:linear-gradient(90deg,#EAF8EF,#fff);border:1px solid #CDEBD8;text-decoration:none;color:var(--ink)}
.kp-kn b{display:block}.kp-kn .kp-d{display:block;font-size:.8rem;color:var(--ink-2)}.kp-arr{margin-left:auto;font-size:1.6rem;color:#16A34A;font-weight:700}
.kp-note{margin:14px 2px 0;text-align:center}
.kp-hero{display:block;padding-right:18px}.kp-hero>div{padding-right:64px}.kp-hero .kp-pills{margin-right:-64px}
.kp-owl{position:absolute;right:14px;top:14px;font-size:2.8rem}
/* ===== An toàn thân thể & Hiểu con ===== */
.xh-body{display:grid;gap:6px;margin-top:6px}.xh-body span{border-radius:12px;padding:8px 10px;font-size:14px}.xh-body span:first-child{background:#ECFDF5}.xh-body span:last-child{background:#FEF2F2}
.xh-hand{display:grid;gap:8px;margin-top:8px}.xh-hand .sg{background:#EEF2FF;border-color:#C7D2FE}.xh-hand .sg.open{background:#fff}
.xh-warn{background:#FFF7ED;border-radius:12px;padding:8px 10px;margin-top:8px}
.hc-q{font-size:1.15rem;font-weight:800;color:#6D28D9;background:#F5F3FF;border-radius:14px;padding:12px;margin:8px 0}
.hc-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;margin:8px 0}.hc-week span{display:grid;gap:2px;font-size:12px;color:var(--ink-2)}.hc-week b{font-size:24px;line-height:1.2}
.hc-swap{display:grid;gap:8px;margin-top:6px}.hc-swap div{display:grid;gap:3px;font-size:14px}.hc-no{color:#B91C1C;text-decoration:line-through;text-decoration-color:rgba(185,28,28,.4)}.hc-yes{color:#047857;font-weight:600}
.hc-know .ck{align-items:flex-start}
.hc-know .ck input{flex:none;width:20px;height:20px}

/* ===== Phiếu tuần: mức độ, tiến bộ, gợi ý luyện ===== */
.pt-lv{margin-top:14px}
.pp-box{display:inline-block;width:28px;height:22px;border:1.5px solid #555;vertical-align:middle;margin-left:6px}
.pp-match{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;padding-left:14px}.pp-match div{display:grid;gap:8px}
.td-card{background:#fff;border:1px solid var(--rule);border-radius:20px;padding:14px;margin-top:16px;box-shadow:0 6px 18px rgba(34,27,69,.05)}.td-card h3{margin:0 0 2px}
.td-ch{width:100%;height:auto;margin-top:6px}
.td-sum{display:grid;gap:6px;margin-top:4px}.td-s{display:flex;align-items:center;gap:8px;font-size:14px;flex-wrap:wrap}.td-s>b{min-width:78px}
.td-dot{width:10px;height:10px;border-radius:50%;flex:none}
.up{color:#047857;font-weight:700}.down{color:#B91C1C;font-weight:700}.eq{color:var(--ink-2)}
.td-cmp{background:#F5F3FF;border-radius:12px;padding:8px 10px;margin:10px 0 0;font-size:15px}
.td-rec{margin-top:12px;background:#FFFBEB;border:1px solid #FDE68A;border-radius:16px;padding:12px}.td-rec h3{margin:0 0 6px;font-size:1rem}.td-rec.in{text-align:left}
.td-r{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px dashed #FCD34D}.td-r:first-of-type{border-top:0}
.td-n{flex:1;display:grid;font-size:14px;line-height:1.3}.td-n span{color:var(--ink-2);font-size:12.5px}
.td-s{display:grid;grid-template-columns:10px 82px 1fr;align-items:baseline}

/* ===== Mời nâng cấp (nói với bố mẹ) ===== */
.pw-box{background:#F7F4FF;border:1px solid #E2DBFF;border-radius:16px;padding:10px 12px;margin-top:10px}
.pw-v{margin:6px 0 4px;padding-left:20px}.pw-v li{margin:3px 0}
.pw-price{color:#4A2FB5;margin:6px 0 0}
.pw-card{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px;border-radius:16px;background:linear-gradient(135deg,#F5F0FF,#FFF4EC);border:1px solid #E9D5FF;text-align:left}
.pw-card>div{flex:1;display:grid;gap:2px}.pw-card.lock{background:repeating-linear-gradient(135deg,#FAF7FF 0 10px,#F3EEFF 10px 20px)}

/* ===== Trợ lí AI thầy Cú ===== */
.ai-btn,.ai-only{display:none!important}
body.ai-on .ai-btn{display:inline-flex!important}body.ai-on .ai-only{display:block!important}body.ai-on .qk.ai-only{display:flex!important}
body.ai-on .ai-off-note{display:none}.ai-off-note{background:#FFF7ED;border-radius:12px;padding:10px;margin-top:12px}
.ai-btn{align-items:center;gap:6px;font:inherit;font-weight:700;font-size:14px;color:#4338CA;background:linear-gradient(135deg,#EEF2FF,#F5F3FF);border:1.5px solid #C7D2FE;border-radius:999px;padding:7px 14px;margin:10px 8px 0 0;cursor:pointer}
.ai-btn:disabled{opacity:.6}
.ai-out{margin-top:10px;background:#F8F7FF;border:1px solid #DDD6FE;border-radius:16px;padding:12px;text-align:left}
.ai-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}.ai-av{font-size:22px}.ai-stop{margin-left:auto;font:inherit;font-size:13px;border:1px solid #C4B5FD;background:#fff;border-radius:999px;padding:3px 10px;cursor:pointer}
.ai-t{font-size:15px;line-height:1.55}.ai-note{font-size:12px;color:var(--ink-2);margin:8px 0 0}
.ai-dots i{animation:aid 1.2s infinite;font-style:normal}.ai-dots i:nth-child(2){animation-delay:.2s}.ai-dots i:nth-child(3){animation-delay:.4s}
@keyframes aid{0%,60%,100%{opacity:.2}30%{opacity:1}}
#cvTxt{min-height:180px;font-size:16px;line-height:1.5}
#cvTxt{font-family:inherit}

/* ===== Kiểm tra trình độ: con đang học tới bài nào ===== */
.dg-upto{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:16px;padding:10px 12px;margin:0 0 12px}
.dg-up-h{margin:0 0 6px;font-weight:700}.dg-up-h span{font-weight:400;font-size:12.5px;opacity:.9}
.dg-up{display:grid;gap:3px;margin-top:6px}.dg-up b{font-size:13px}.dg-up select{color:var(--ink);font-size:14px;padding:8px}
.bv-nm{display:inline-grid;vertical-align:middle;line-height:1.15}.bv-nm i{font-style:normal;font-size:11px;font-weight:700;color:#6E4FE6}.bv .board td:first-child{width:34px}

/* ===== Nhóm thi đua ===== */
.grp-cta{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:14px;background:#fff;border:1.5px dashed #F59E0B;text-decoration:none;color:var(--ink)}
.grp-cta>span{flex:1;display:grid}.grp-cta>span span{font-size:12.5px;color:var(--ink-2)}.grp-cta i{font-style:normal;font-size:22px;color:#D97706}
.grp{background:#fff;border:1px solid var(--rule);border-radius:20px;padding:14px;margin-top:14px;box-shadow:0 6px 18px rgba(34,27,69,.05)}
.gp-h{display:flex;align-items:center;gap:10px}.gp-h>div{flex:1;display:grid}.gp-h code{font-weight:800;letter-spacing:.12em;color:#B45309}
.grp .board{width:100%;margin-top:8px}.grp .board tr.me td{background:#FFF7E6;font-weight:800}
.grp-f{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}
.grp-act{display:grid;gap:12px;margin-top:14px}@media(min-width:620px){.grp-act{grid-template-columns:1fr 1fr}}
.grp-f .rep-link{white-space:nowrap}

/* ===== Thầy Cú đồng hành ===== */
.cu-fab{position:fixed;right:14px;bottom:calc(var(--tabh,64px) + 16px + env(safe-area-inset-bottom,0px));z-index:30;display:none;align-items:center;gap:6px;border:0;border-radius:999px;padding:8px 14px 8px 8px;background:linear-gradient(135deg,#7C3AED,#4338CA);color:#fff;font:inherit;font-weight:800;box-shadow:0 8px 20px rgba(67,56,202,.35);cursor:pointer}
.cu-fab.on{display:inline-flex}.cu-fab span{font-size:26px;background:#fff;border-radius:50%;width:38px;height:38px;display:grid;place-items:center}
@media(min-width:880px){.cu-fab{bottom:24px}}
.tc{display:grid;gap:8px}.tc-log{max-height:52vh;min-height:180px;overflow:auto;display:grid;gap:8px;align-content:start;padding:2px}
#tcPage .tc-log{max-height:none;min-height:240px}
.tc-a{display:flex;gap:8px;align-items:flex-start}.tc-a>div{background:#F5F3FF;border-radius:4px 16px 16px 16px;padding:9px 12px;font-size:15px;line-height:1.5}.tc-a.err>div{background:#FFF7ED}
.tc-av{font-size:22px;flex:none}.tc-u{display:flex;justify-content:flex-end}.tc-u>div{background:#4338CA;color:#fff;border-radius:16px 4px 16px 16px;padding:9px 12px;font-size:15px;max-width:85%}
.tc-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}.tc-chips button{flex:none;font:inherit;font-size:13px;border:1.5px solid #C7D2FE;background:#EEF2FF;color:#3730A3;border-radius:999px;padding:6px 10px;cursor:pointer}
.tc-in{display:flex;gap:6px;align-items:flex-end}.tc-in textarea{flex:1;font:inherit;font-size:16px;border:2px solid var(--rule);border-radius:14px;padding:9px 10px;resize:none;min-height:44px;max-height:120px}
.tc-cam{font-size:24px;cursor:pointer;padding:6px}.tc-foot{display:grid;gap:2px;color:var(--ink-2)}
.tc-safe{background:#FDF2F8;border:1px solid #FBCFE8;border-radius:14px;padding:10px 12px;font-size:14px}

/* ===== Thầy Cú rà soát ===== */
.cu-subs{display:grid;gap:10px;margin-top:8px}.cu-s{display:grid;gap:3px}
.cu-bar{display:flex;gap:2px;height:12px}.cu-bar i,.cu-leg i{flex:1;border-radius:3px;display:inline-block}
.cu-leg{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}.cu-leg i{width:12px;height:10px;flex:none;margin-right:2px}
.st-vung{background:#10B981}.st-dangLen{background:#FBBF24}.st-yeu{background:#EF4444}.st-chuaLuyen{background:#C4B5FD}.st-chuaHoc{background:#E5E7EB}
.mis .mt{display:block}.mis .mt span{white-space:normal}

/* ===== Quản lí trang ===== */
.site-notice{display:flex;align-items:center;gap:10px;max-width:880px;margin:8px auto 0;padding:10px 12px;border-radius:14px;background:#FEF3C7;border:1px solid #FCD34D;font-size:14px}
.site-notice span{flex:1}.site-notice button{border:0;background:none;font-size:20px;cursor:pointer;color:#92400E}
.ql-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media(min-width:620px){.ql-grid{grid-template-columns:repeat(4,1fr)}}
.ls-card.ql{margin-top:12px}.ql-rep{border-top:1px dashed var(--rule);padding:10px 0;display:grid;gap:6px}.ql-q{background:#F8FAFC;border-radius:10px;padding:8px}
.ql-names{display:flex;flex-wrap:wrap;gap:6px}.ql-nm{font:inherit;font-size:13px;border:1px solid var(--rule);background:#fff;border-radius:999px;padding:4px 10px;cursor:pointer}.ql-nm.bad{background:#FEE2E2;border-color:#FCA5A5}
#qlNotice{font-family:inherit}

/* nút thầy Cú gọn hơn trên điện thoại để không che nội dung */
@media(max-width:620px){.cu-fab{padding:4px;right:10px}.cu-fab b{display:none}.cu-fab span{width:44px;height:44px}}

.bv-gs{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.bv-gs button{font:inherit;font-size:12.5px;border:1.5px solid #F59E0B;background:#fff;border-radius:999px;padding:3px 10px;cursor:pointer;color:#92400E}.bv-gs button.on{background:#F59E0B;color:#fff}

.bv-join{display:block;width:100%;margin-top:10px;font:inherit;font-weight:700;color:#92400E;background:#fff;border:1.5px dashed #F59E0B;border-radius:14px;padding:10px 12px;cursor:pointer;text-align:left}

.bv-ao{font-size:10.5px;font-weight:700;color:#8B7BC8;background:#F1EEFB;border-radius:6px;padding:0 5px;vertical-align:middle;white-space:nowrap}
@media(max-width:620px){.cu-fab{padding:4px 12px 4px 4px;right:10px}.cu-fab b{display:inline;font-size:14px}.cu-fab span{width:36px;height:36px;font-size:22px}}

.cu-adv{background:linear-gradient(135deg,#F5F3FF,#EEF2FF);border:1px solid #DDD6FE;border-radius:20px;padding:14px}
.cu-adv-h{display:flex;gap:10px;align-items:center;margin-bottom:10px}.cu-adv-h>span{font-size:34px}.cu-adv-h>div{display:grid}
.cu-adv .tc-chips{flex-wrap:wrap;margin-bottom:10px}.cu-fab.par{background:linear-gradient(135deg,#0E9F6E,#047857)}

/* ===== Toán có lời văn ===== */
.lv-list{display:grid;gap:8px;margin-top:12px}
.lv-card{display:flex;align-items:center;gap:12px;text-align:left;font:inherit;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:12px;cursor:pointer;box-shadow:0 1px 2px rgba(34,27,69,.04)}
.lv-n{width:34px;height:34px;flex:none;border-radius:10px;background:#FFE3D1;color:#C2410C;font-weight:800;display:grid;place-items:center}
.lv-t{flex:1;display:grid;gap:2px}.lv-t span{font-size:12.5px;color:var(--ink-2)}.lv-p{font-size:12px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.lv-fig{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:15px}.lv-pics{font-size:24px;letter-spacing:1px}.lv-x{font-weight:800;color:#C2410C;border:2px dashed #FDBA74;border-radius:8px;padding:2px 8px}
.lv-grp{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.lv-grp span{border:2px solid #C4B5FD;border-radius:12px;padding:4px 6px;font-size:20px;background:#F5F3FF}
.lv-sol{background:#FFFDF5;border:1px solid #F5E6B8;border-radius:12px;padding:10px 12px;margin-top:6px;font-size:15px;line-height:1.6;background-image:repeating-linear-gradient(transparent 0 23px,#F0E6C8 23px 24px)}
.lv-sol>b{display:block;text-align:center;text-decoration:underline;margin-bottom:2px}.lv-pt{padding-left:24px;font-weight:600}.lv-ds{padding-left:40%;font-style:italic}
.lv-sai{background:#FFF1F2;border:1px solid #FECDD3;border-radius:14px;padding:10px 12px;margin-top:10px}.lv-sai ul{margin:4px 0 0;padding-left:20px}
.lv-cta{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px;border-radius:16px;background:linear-gradient(135deg,#FFF4EC,#FFE3D1);border:1.5px solid #FDBA74;text-decoration:none;color:var(--ink)}
.lv-cta>span:first-child{font-size:28px}.lv-cta>span:nth-child(2){flex:1;display:grid}.lv-cta>span:nth-child(2) span{font-size:12.5px;color:var(--ink-2)}.lv-cta i{font-style:normal;font-size:22px;color:#C2410C}

/* ===== Tài khoản ===== */
.acc-card{display:grid;gap:8px;background:#fff;border:1px solid var(--rule);border-radius:18px;padding:12px 14px}.acc-card>div:first-child{display:grid;gap:2px}
.co-wait{margin-top:10px;padding:10px;border-radius:12px;background:#F5F3FF;text-align:center;font-weight:700;color:#4338CA}

/* thương hiệu: Học Vui – Khôn lớn mỗi ngày */
.brand-name{display:flex;flex-direction:column;line-height:1.05;white-space:nowrap}
.brand-name span{display:block!important;font-size:11px!important;font-weight:600;color:var(--violet);letter-spacing:.01em;opacity:.85}
.wl-slogan{text-align:center;color:#fff;font-weight:700;font-size:16px;margin:0 0 4px;opacity:.95}
/* đầu trang gọn trên điện thoại: đủ chỗ cho logo + khẩu hiệu + 3 nút */
.top{flex-wrap:nowrap}
.brand{min-width:0;flex:0 1 auto}
.top-right{flex:none}
@media (max-width:460px){
 .top{padding:7px 10px;gap:6px}
 .brand{gap:6px}
 .brand-mark{width:30px;height:30px;flex:none}
 .brand-name{font-size:15px}
 .brand-name span{font-size:10px!important}
 .top-right{gap:4px}
 .grade-btn,.star-chip,.pro-chip{font-size:12px;padding:4px 8px}
 .star-chip svg{width:14px;height:14px}
}
@media (max-width:345px){
 .brand-name span{display:none!important}
}
.brand-name{min-width:0;overflow:hidden}.brand-name span{overflow:hidden;text-overflow:ellipsis}

/* =====================================================================
   GIAO DIỆN "KẸO NGỌT" – chữ tròn, màu ấm, nút nảy (thêm 11/2026)
   Baloo 2 cho tiêu đề và số, Nunito cho chữ thường (đều có đủ dấu tiếng Việt, giấy phép OFL).
   ===================================================================== */
@font-face{font-family:"Baloo 2";src:url("../fonts/baloo2.woff") format("woff");font-weight:400 800;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito.woff") format("woff");font-weight:200 1000;font-display:swap}
:root{
  --display:"Baloo 2","Nunito",system-ui,sans-serif;
  --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --paper:#FFF8F1; --sheet:#FFFFFF; --rule:#F1E6DA; --rule-strong:#E6D6C6;
  --ink:#2B2350; --ink-2:#5A5280; --mute:#8C86A8;
  --violet:#6C47FF; --violet-2:#4F2FD6; --violet-soft:#EFEAFF;
  --red:#6C47FF; --red-2:#4F2FD6;
  --pink:#FF6FA3; --pink-soft:#FFE6F0; --mint:#22C3A6; --sun:#FFC83D;
  --r-lg:26px; --r:20px; --r-sm:14px;
}
body{font-family:var(--body);font-size:15.5px;font-weight:500;color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(#F3E3D3 1.2px,transparent 1.3px);background-size:22px 22px;background-attachment:fixed}
b,strong{font-weight:800}
h1,h2,h3,.hello b,.kpi b,.big-q,.plan .price,.tw-ladder .st b,.grades button,.tile.big b,.gtile b,.vo-title,.hero h1,.wl-title,.sec-h h2,.b4 b,.sj b{
  font-family:var(--display)!important;font-weight:800;letter-spacing:0;line-height:1.15}
h1{font-size:27px} h2{font-size:21px} h3{font-size:18px}
.small{color:var(--ink-2)}

/* đầu trang + logo */
.top{background:rgba(255,248,241,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1.5px solid var(--rule)}
.brand-name{font-family:var(--display)!important;font-weight:800;font-size:19px!important;color:var(--violet);line-height:.95}
.brand-name span{font-family:var(--body);font-weight:800;color:var(--pink)!important;opacity:1}
.grade-btn{border:2px solid var(--violet);color:var(--violet);background:#fff;font-weight:800}
.star-chip{background:#FFF1C7;font-weight:800}
.pro-chip{background:linear-gradient(135deg,#FF8DB8,#FF6FA3);color:#fff;font-weight:800;box-shadow:0 2px 0 #E04F86}
.pro-chip.on{background:var(--ok-soft);color:var(--ok);box-shadow:none}

/* thẻ, ô, nút: bo tròn hơn, viền ấm, bóng "kẹo" */
.card,.subj,.tile,.node,.qcard,.plan,.kpi,.exam,.runbar,.mis,.sheet,.ls-card{
  border:1.5px solid var(--rule)!important;border-radius:var(--r)!important;box-shadow:0 3px 0 var(--rule)!important}
.btn{border-radius:16px;font-weight:800;box-shadow:0 4px 0 var(--violet-2);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--violet-2)}
.btn.white{color:var(--violet);box-shadow:0 4px 0 rgba(40,10,120,.25)}
.btn.gold{box-shadow:0 4px 0 var(--gold-2)}
.btn.ghost{box-shadow:inset 0 0 0 2px var(--rule-strong)}
.opt{border-radius:16px;border:2px solid var(--rule-strong);box-shadow:0 3px 0 var(--rule-strong);font-weight:700}
.qt{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.3}

/* trang chủ */
.hero{border-radius:28px;background:linear-gradient(140deg,#7C5CFF 0%,#9B5CF6 55%,#FF7EB0 120%)!important;box-shadow:0 6px 0 #5A36E0}
.hero h1{font-size:30px}
.hero-sub b{color:#FFE27A}
.mis .mi{border-radius:14px}
.mis:nth-child(3n+1) .mi{background:#FFE9DC;color:#F3722C}
.mis:nth-child(3n+2) .mi{background:#E3F7EF;color:#14A37F}
.mis:nth-child(3n+3) .mi{background:#E6EEFF;color:#2F6BF0}
.mis .mt b{font-weight:800}
.sj{border-radius:24px;box-shadow:0 5px 0 rgba(0,0,0,.12)}
.b4{border-radius:24px}
.diag-card{border-radius:24px}

/* thanh tab dưới */
.tabs{background:rgba(255,255,255,.96);border-top:1.5px solid var(--rule)}
.tabs a{font-weight:800;color:var(--mute)}
.tabs a.on{color:var(--violet)}
.tabs a.on .ti{background:var(--violet-soft);border-radius:999px}

/* chỉ số */
.kpi b{font-size:32px;color:var(--violet)}
.kpi:nth-child(2) b{color:#14A37F}
.kpi:nth-child(3) b{color:#F3722C}

/* Góc bố mẹ: giữ tông gọn, chững chạc hơn để bố mẹ đọc số liệu */
body[data-tab="bo-me"]{background-image:none;background-color:#FAF7FF}
body[data-tab="bo-me"] .card,body[data-tab="bo-me"] .kpi,body[data-tab="bo-me"] .ls-card,body[data-tab="bo-me"] .sheet{
  box-shadow:0 1px 2px rgba(43,35,80,.05),0 6px 16px rgba(43,35,80,.05)!important;border-color:#ECE6F7!important}
svg text{font-family:"Baloo 2","Nunito",system-ui,sans-serif;font-weight:800}
.brand-name{line-height:1.05!important}
.brand-name span{line-height:1.3!important;padding-top:1px;margin-top:-1px}

/* bảng "Gói Pro có thêm gì?" và mục hỏi đáp */
.cmp2 h3{margin:0}
.cm-head,.cm-row{display:grid;grid-template-columns:1fr 78px 92px;align-items:center;gap:6px}
.cm-head{font-size:12.5px;font-weight:800;color:var(--mute);padding:0 0 6px}
.cm-head span{text-align:center}
.cm-head .cm-pro{color:#fff;background:linear-gradient(135deg,#7C5CFF,#FF7EB0);border-radius:12px 12px 0 0;padding:6px 0 4px}
.cm-row{border-top:1px solid #F1EAF9;min-height:48px}
.cm-l{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;line-height:1.3;padding:7px 0}
.cm-l i{font-style:normal;flex:none;width:30px;height:30px;border-radius:10px;background:#F6F2FF;display:grid;place-items:center;font-size:16px}
.cm-f,.cm-p{text-align:center;font-size:13px;line-height:1.25;align-self:stretch;display:grid;place-items:center;padding:4px 2px}
.cm-f{color:var(--mute)}
.cm-p{background:#F6F1FF;color:var(--violet);font-weight:800}
.cm-row:last-child .cm-p{border-radius:0 0 12px 12px}
.cm-ok{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#DFF5E8;color:#14A37F;font-weight:900}
.cm-p .cm-ok{background:#6C47FF;color:#fff}
.cm-no{color:#C9C2DD;font-weight:900}
.faq h3{margin:0 0 6px}
.faq details{border:0;border-top:1px solid #F1EAF9;padding:0}
.faq details summary{list-style:none;display:flex;align-items:center;gap:10px;padding:13px 2px;font-weight:700;font-size:15px}
.faq details summary::-webkit-details-marker{display:none}
.faq details summary::before{content:"?";flex:none;width:26px;height:26px;border-radius:50%;background:#FFE6F0;color:#E04F86;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:15px}
.faq details summary::after{content:"";margin-left:auto;flex:none;width:8px;height:8px;border-right:2.5px solid var(--mute);border-bottom:2.5px solid var(--mute);transform:rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{margin:0 0 12px 36px;font-size:14.5px}
@media (max-width:420px){
 .cm-head,.cm-row{grid-template-columns:1fr 62px 84px;gap:4px}
 .cm-l{font-size:13.5px;gap:7px}.cm-l i{width:26px;height:26px;font-size:14px;border-radius:8px}
 .cm-f,.cm-p{font-size:12.5px}
}

/* ===== Bầu trời tri thức + chỉnh màu (11/2026) ===== */
.wl{background:linear-gradient(180deg,#3B3FD8 0%,#5B4FF0 30%,#8C6BFF 62%,#C9A6FF 100%)!important}
.wl-sky{position:absolute;inset:0;pointer-events:none;z-index:0}
.wl-sky .sky-art{position:absolute;left:0;top:0;width:100%;height:100%;min-height:560px}
.wl>*:not(.wl-sky){position:relative;z-index:1}
.wl-sky .sky-art{animation:skyFloat 7s ease-in-out infinite}
@keyframes skyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.wl-title{text-shadow:0 3px 0 rgba(40,20,140,.35)}
/* khung chào trang chủ: nền trời xanh tím, không còn hồng ở góc vòng tiến độ */
.hero{background:linear-gradient(160deg,#4C4BEA 0%,#6C55F5 50%,#8E72FF 100%)!important;box-shadow:0 6px 0 #3E35C9!important}
.hero .sky-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero::after{display:none}
.hero .ring{filter:drop-shadow(0 2px 4px rgba(20,10,90,.35))}
.hero .ring circle:first-child{stroke:rgba(255,255,255,.35)}
/* nhiệm vụ: biểu tượng theo màu môn */
.mis .mi{background:var(--violet-soft)!important;color:var(--violet)!important}
.mis.mis-toan .mi{background:#FFE9DC!important;color:#F3722C!important}
.mis.mis-tv .mi{background:#DDF4E7!important;color:#1E9E5A!important}
.mis.mis-ta .mi{background:#E1ECFF!important;color:#2F6BF0!important}
/* nút Hỏi thầy Cú: viền trắng tách khỏi nền */
.cu-fab{border:3px solid #fff!important;box-shadow:0 6px 16px rgba(40,20,120,.32)!important}
.wl-sky .sky-art{height:auto!important;min-height:0!important}
.wl-sky .sky-art{right:0;margin:0 auto;max-width:620px}
@media(min-width:640px){.wl-sky .sky-art{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}}
/* cuối trang chủ: lời chào khép lại + chân trang, chừa chỗ cho nút Hỏi thầy Cú */
.home-end{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border-radius:24px;
  background:linear-gradient(135deg,#EFEAFF,#FFE9F2);border:1.5px solid #E7DEFF}
.he-owl{width:58px;flex:none;animation:bob 3.2s ease-in-out infinite}
.he-txt b{display:block;font-family:var(--display);font-size:16.5px;line-height:1.25;color:var(--violet)}
.he-txt span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:2px}
.home-foot{text-align:center;font-size:12.5px;line-height:1.6;color:var(--mute);margin:18px 0 0;padding-bottom:84px}
.home-foot b{color:var(--violet);font-family:var(--display)}
.home-foot a{color:var(--violet);font-weight:700;text-decoration:none}
@media(min-width:880px){.home-foot{padding-bottom:24px}}
/* chừa chỗ cho nút Hỏi thầy Cú ở cuối mọi trang trên điện thoại */
@media(max-width:879px){main{padding-bottom:96px!important}.home-foot{padding-bottom:0}}
/* phiếu tuần: các tuần trước không bị xén nhãn Pro, vuốt ngang mượt */
.pt-weeks{padding:9px 2px 8px;margin:0 -14px;padding-left:14px;padding-right:14px;scroll-snap-type:x mandatory;scrollbar-width:none}
.pt-weeks::-webkit-scrollbar{display:none}
.pt-w{scroll-snap-align:start;min-width:74px;border-radius:16px;box-shadow:0 3px 0 #ECE6FA}
.pt-w b{font-family:var(--display);font-size:17px}
.pt-w i{top:-8px;right:-2px;border-radius:999px;padding:1px 7px;background:linear-gradient(135deg,#7C5CFF,#FF7EB0)}
.lbw-h b{font-family:var(--display);font-size:18px;line-height:1.25}
.lbw-note{font-size:13px;color:var(--mute);margin:2px 0 6px 30px}
.pt-print{margin:20px 0 4px}
.pt-print a{background:#fff;border:1.5px solid var(--rule-strong);border-radius:999px;padding:9px 16px;text-decoration:none;color:var(--violet);font-weight:800;box-shadow:0 3px 0 var(--rule)}
.pt-weeks{scroll-padding-inline:14px}.lbw-note{text-align:left;margin:-4px 0 8px 0}
/* cuối trang chủ v2: tranh bầu trời nhỏ khép trang */
.home-end{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;margin-top:22px;padding:18px 16px 18px 12px;border:0;border-radius:28px;
  background:linear-gradient(160deg,#4C4BEA 0%,#6C55F5 55%,#8E72FF 100%);box-shadow:0 6px 0 #3E35C9;color:#fff}
.home-end .sky-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.home-end .he-owl{position:relative;width:84px;flex:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.home-end .he-txt{position:relative;flex:1;min-width:0}
.home-end .he-txt b{color:#fff;font-size:19px}
.home-end .he-txt span{color:rgba(255,255,255,.88);font-size:13.5px;margin:2px 0 10px}
.home-end .btn{padding:8px 18px}
.home-foot{margin:14px 0 0;font-size:12px;line-height:1.5;padding-bottom:0!important}
@media(max-width:879px){main{padding-bottom:84px!important}}
/* Toán lời văn: chọn lớp ngay trên trang */
.lv-grades{display:flex;gap:6px;overflow-x:auto;margin:12px -14px 4px;padding:8px 14px 6px;scrollbar-width:none}
.lv-grades::-webkit-scrollbar{display:none}
.lvg{position:relative;flex:none;border:2px solid var(--rule-strong);background:#fff;color:var(--ink-2);font-weight:800;border-radius:999px;padding:7px 14px;cursor:pointer;box-shadow:0 3px 0 var(--rule)}
.lvg.on{background:#F3722C;border-color:#F3722C;color:#fff;box-shadow:0 3px 0 #C2410C}
.lvg i{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-style:normal;font-size:10px;font-weight:800;white-space:nowrap;background:#6C47FF;color:#fff;border-radius:999px;padding:0 6px}
.lv-grades{display:grid;grid-template-columns:repeat(5,1fr);margin:14px 0 4px;padding:8px 0 6px;overflow:visible}.lvg{padding:7px 0;font-size:14.5px;text-align:center}
/* nút Hỏi thầy Cú: gọn hơn, tự thu thành vòng tròn khi cuộn xuống */
.cu-fab{transition:padding .2s,right .2s,box-shadow .2s;padding:3px 14px 3px 3px!important;right:10px!important}
.cu-fab b{font-size:14px!important;white-space:nowrap;transition:opacity .15s}
.cu-fab span{width:36px!important;height:36px!important;font-size:22px!important}
.cu-fab.mini{padding:3px!important;right:8px!important}
.cu-fab.mini b{display:none!important}
/* câu nói hay mỗi ngày trên tranh bầu trời cuối trang chủ */
.home-end.has-q{display:block;padding:18px 18px 16px}
.hq{position:relative}
.hq-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hq-chip{background:rgba(255,255,255,.18);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:800}
.hq-say{border:0;background:#fff;color:var(--violet);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 0 rgba(30,10,120,.25)}
.hq-say svg{width:18px;height:18px}.hq-say.on{background:#FFE27A}
.hq-q{font-family:var(--display);font-weight:800;font-size:21px;line-height:1.3;margin:12px 0 4px;text-shadow:0 2px 0 rgba(30,10,120,.25)}
.hq-a{font-size:13.5px;font-weight:700;color:#FFE27A;margin:0 0 10px}
.hq-m{font-size:13.5px;line-height:1.45;background:rgba(255,255,255,.14);border-radius:14px;padding:8px 12px;color:#fff}
.hq-m b{color:#FFE27A}
.he-row{position:relative;display:flex;align-items:center;gap:10px;margin-top:12px}
.home-end.has-q .he-owl{width:62px}
.home-end.has-q .he-txt b{font-size:16.5px;margin-bottom:6px}
@media(max-width:879px){main{padding-bottom:64px!important}}
@media(max-width:879px){main{padding-bottom:20px!important}}
@media(max-width:879px){.home-foot{padding:0 60px!important;margin-top:12px}}

/* ===== AI LÀ TRẠNG NGUYÊN: sân khấu gameshow kiểu truyền hình ===== */
.tv-stage{margin:-14px -14px 0;padding:14px 14px 22px;min-height:calc(100vh - 140px);color:#fff;
  background:radial-gradient(120% 60% at 50% 0%,#3B5BDB 0%,#1E2A78 45%,#0B1240 100%);position:relative;overflow:hidden}
.tv-stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:conic-gradient(from 200deg at 50% -10%,transparent 0 10deg,rgba(120,170,255,.16) 10deg 16deg,transparent 16deg 34deg,rgba(120,170,255,.12) 34deg 40deg,transparent 40deg 58deg,rgba(120,170,255,.14) 58deg 64deg,transparent 64deg)}
.tv-stage>*{position:relative}
.tv-logo{display:grid;place-items:center;text-align:center;margin:6px auto 14px;width:220px;height:150px;position:relative}
.tv-ring{position:absolute;inset:0;margin:auto;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,#2A3FB0 0 55%,transparent 56%),conic-gradient(#FFD54A,#FF9F1C,#FFE98A,#FFB703,#FFD54A);box-shadow:0 0 40px rgba(255,200,60,.45)}
.tv-logo b{position:relative;font-family:var(--display);font-size:18px;letter-spacing:.12em;color:#FFE98A;margin-top:28px}
.tv-logo strong{position:relative;font-family:var(--display);font-size:25px;line-height:1;color:#fff;text-shadow:0 3px 0 #0B1240,0 0 18px rgba(255,220,120,.6);margin-top:-30px}
.tv-logo em{position:relative;font-style:normal;font-size:11.5px;font-weight:800;color:#BFD0FF;margin-top:-34px}
.tv-desc{background:rgba(255,255,255,.08)!important;border:1.5px solid rgba(255,214,90,.45);box-shadow:none!important}
.tv-desc .bn-emo{display:none}
.tv-stage .ladder-list .ll{background:linear-gradient(90deg,#16226A,#1E2E8C);border:1.5px solid #3550C8;color:#DDE6FF}
.tv-stage .ladder-list .ll .ll-n,.tv-stage .ladder-list .ll .ll-p{color:#FFD54A}
.tv-stage .ladder-list .ll.safe{background:linear-gradient(90deg,#7A4A00,#B07300);border-color:#FFD54A;color:#fff}
.tv-stage .ladder-list .ll:first-child{background:linear-gradient(90deg,#B07300,#FFB703);color:#2B1A00;border-color:#FFE98A}
.tv-stage .ladder-list .ll:first-child .ll-t,.tv-stage .ladder-list .ll:first-child .ll-n,.tv-stage .ladder-list .ll:first-child .ll-p{color:#2B1A00}
.tv-stage .small,.tv-stage li{color:#C9D6FF}
.tv-stage b{color:#FFE98A}
.tv-stage .runbar{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.18)!important;box-shadow:none!important;color:#fff}
.tv-stage .runbar .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.tv-stage .timer{background:#FFD54A!important;color:#2B1A00!important}
.tv-stage .tw-ladder .st{background:#16226A;border:1.5px solid #3550C8;color:#C9D6FF}
.tv-stage .tw-ladder .st b{color:#FFD54A}
.tv-stage .tw-ladder .st.done{background:#1F7A4D;border-color:#3FD28A;color:#fff}
.tv-stage .tw-ladder .st.cur{background:linear-gradient(180deg,#FFE98A,#FFB703);border-color:#fff;color:#2B1A00}
.tv-stage .tw-ladder .st.cur b{color:#2B1A00}
.tv-stage .tw-ladder .st.safe:not(.cur):not(.done){border-color:#FFD54A}
.tv-stage .qcard{background:transparent!important;border:0!important;box-shadow:none!important;padding:6px 0 0}
.tv-stage .qcard .meta,.tv-stage .qcard .q-meta{color:#BFD0FF}
.tv-stage .qt{position:relative;color:#fff;background:linear-gradient(180deg,#1A2A8A,#0F1A5C);border:2px solid #8FB0FF;border-radius:14px;padding:16px 14px;text-align:center;
  box-shadow:0 0 0 3px #0B1240,0 0 22px rgba(120,170,255,.35)}
.tv-stage .opts{gap:10px!important}
.tv-stage .opt{background:linear-gradient(180deg,#1A2A8A,#0F1A5C)!important;border:2px solid #8FB0FF!important;color:#fff!important;border-radius:999px!important;box-shadow:0 0 0 3px #0B1240!important}
.tv-stage .opt>span:first-child,.tv-stage .opt .ol{background:transparent!important;color:#FFD54A!important;font-family:var(--display);font-weight:800}
.tv-stage .opt.pick{background:linear-gradient(180deg,#FFB703,#E08A00)!important;border-color:#FFE98A!important;color:#2B1A00!important}
.tv-stage .opt.pick>span:first-child{color:#2B1A00!important}
.tv-stage .opt.ok{background:linear-gradient(180deg,#3FD28A,#16924F)!important;border-color:#CFFFE4!important;animation:tvBlink .35s 4}
.tv-stage .opt.bad{background:linear-gradient(180deg,#FF6B6B,#C92A2A)!important;border-color:#FFD0D0!important}
.tv-stage .opt.gone{opacity:.15}
@keyframes tvBlink{50%{filter:brightness(1.5)}}
.tv-life{display:grid!important;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.lfb{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;color:#fff;cursor:pointer;font:inherit}
.lfb i{font-style:normal;display:grid;place-items:center;width:52px;height:38px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#2D47C9,#13206E);border:2px solid #FFD54A;
  font-family:var(--display);font-weight:800;font-size:14px;color:#FFE98A;box-shadow:0 0 12px rgba(255,213,74,.35)}
.lfb span{font-size:10.5px;font-weight:800;color:#C9D6FF;line-height:1.15;text-align:center}
.lfb:disabled{cursor:default}.lfb:disabled i{opacity:.35;border-color:#888;box-shadow:none;position:relative}
.lfb:disabled i::after{content:"";position:absolute;width:56px;height:3px;background:#FF6B6B;transform:rotate(-25deg);border-radius:2px}
.tv-stage .tw-clock{color:#fff}
.tv-stage .tw-clock span{background:#0B1240;border-color:#FFD54A;color:#FFE98A}
.tv-aud{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,213,74,.5);border-radius:16px;padding:10px 12px;margin:0 0 12px}
.tv-aud p{font-size:13px;font-weight:800;color:#FFE98A;margin:0 0 6px}
.tv-aud .tv-note{font-size:11.5px;color:#BFD0FF;font-weight:600;margin:6px 0 0}
.tv-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;height:110px;align-items:end}
.tv-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.tv-bar i{display:block;width:70%;height:var(--h);min-height:2px;background:linear-gradient(180deg,#FFE98A,#FFB703);border-radius:6px 6px 0 0;animation:tvGrow .9s ease-out}
.tv-bar b{font-family:var(--display);color:#fff;margin-top:3px}
.tv-bar .tv-v{font-size:12px;font-weight:800;color:#fff;margin-bottom:2px}
.tv-bar.off i{background:#555}
@keyframes tvGrow{from{height:0}}
.tv-stage .fb{background:rgba(255,255,255,.95)}
.tv-stage .suspense{color:#FFE98A}
.tv-stage .result{color:#fff}.tv-stage .result h2{color:#FFE98A}.tv-stage .result .teacher{color:#fff}
.tv-stage .btn.ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);background:transparent}
.tv-stage .opt .k{background:transparent!important;color:#FFD54A!important;box-shadow:none!important;font-family:var(--display)}.tv-stage .opt.pick .k{color:#2B1A00!important}
.tv-stage{overflow:clip;overflow-x:clip}
.tv-intro{display:flex;flex-direction:column}
.tv-intro>.tv-logo{order:0}.tv-intro>.row{order:1;justify-content:center;flex-direction:column;gap:6px;margin:0 0 14px}.tv-intro>.tv-desc{order:2}.tv-intro>ul{order:3}.tv-intro>.ladder-list{order:4}
.tv-intro>.row .btn{font-size:18px;padding:13px 34px;background:linear-gradient(180deg,#FFE98A,#FFB703);color:#2B1A00;box-shadow:0 4px 0 #B07300,0 0 24px rgba(255,200,60,.5)}
.tv-intro>.row .small{color:#C9D6FF;text-align:center}
.tv-desc h1{display:none}
.tv-logo{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0}
.tv-logo b,.tv-logo strong,.tv-logo em{margin:0!important}
.tv-logo strong{font-size:24px;margin:2px 0 4px!important}
.tv-logo em{font-size:10.5px;max-width:110px;line-height:1.2}
.tv-stage .ll.safe .ll-t:after{color:#FFE98A}
.tv-stage>.runbar{position:sticky;top:64px;z-index:10;background:rgba(20,30,100,.92)!important;backdrop-filter:blur(6px)}
/* ===== Tông màu tươi hơn (11/2026): trời xanh sáng + tím nhạt + vàng nắng ===== */
:root{--violet:#6D5BFF;--violet-2:#4F3FE0;--violet-soft:#EEEBFF;--red:#6D5BFF;--red-2:#4F3FE0;--paper:#FFFCF7;--rule:#F0E8DE;--rule-strong:#E5D9CB}
body{background-color:var(--paper);background-image:radial-gradient(#F4E6D6 1.1px,transparent 1.2px)}
.hero,.home-end{background:linear-gradient(135deg,#25B8F2 0%,#4F86FF 48%,#8E6BFF 100%)!important;box-shadow:0 6px 0 #3E62D8!important}
.hero-sub b{color:#FFF27A!important;text-shadow:0 1px 0 rgba(20,40,120,.35)}
.hq-a,.hq-m b{color:#FFF27A!important}
.wl{background:linear-gradient(180deg,#1FA8EE 0%,#4F86FF 35%,#8E6BFF 70%,#C9B2FF 100%)!important}
.top{background:rgba(255,255,255,.95)!important}
.tabs a.on{color:#4F86FF}.tabs a.on .ti{background:#E4F1FF}
.btn{box-shadow:0 4px 0 var(--violet-2)}
.sec-h h2,.page-h h1{color:#2B2350}
.tv-promo{display:flex;align-items:center;gap:12px;margin:12px 0 4px;padding:14px;border-radius:22px;text-decoration:none;color:#fff;
  background:radial-gradient(120% 120% at 20% 0%,#3B5BDB 0%,#1E2A78 55%,#0B1240 100%);box-shadow:0 5px 0 #0B1240,0 0 0 2px #FFD54A inset}
.tvp-ring{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:26px;background:radial-gradient(circle,#2A3FB0 0 58%,transparent 60%),conic-gradient(#FFD54A,#FF9F1C,#FFE98A,#FFB703,#FFD54A);box-shadow:0 0 18px rgba(255,200,60,.5)}
.tvp-t{flex:1;min-width:0;display:flex;flex-direction:column}
.tvp-t em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.14em;color:#FFE98A}
.tvp-t b{font-family:var(--display);font-size:19px;line-height:1.15}
.tvp-t span{font-size:12px;color:#C9D6FF}
.tvp-go{flex:none;background:linear-gradient(180deg,#FFE98A,#FFB703);color:#2B1A00;font-weight:800;border-radius:999px;padding:8px 14px;box-shadow:0 3px 0 #B07300;font-size:14px}
/* nhiệm vụ trang chủ: nền nhạt theo màu môn cho tươi */
.mis.mis-toan{background:linear-gradient(90deg,#FFF1E6,#fff 70%)!important;border-color:#FFD9BF!important}
.mis.mis-tv{background:linear-gradient(90deg,#E9F9F0,#fff 70%)!important;border-color:#C5EED7!important}
.mis.mis-ta{background:linear-gradient(90deg,#EAF2FF,#fff 70%)!important;border-color:#CADCFF!important}
.tv-promo{margin-bottom:14px}
.tv-stage .fb b,.tv-stage .fb .ex b{color:inherit!important}.tv-stage .fb.ok{color:#14532D}.tv-stage .fb.bad{color:#7F1D1D}
.tv-home{margin:14px 0 4px}
/* thẻ gameshow trang chủ: lắc nhẹ mỗi vài giây để gây chú ý */
@keyframes tvWiggle{0%,82%,100%{transform:rotate(0) scale(1)}85%{transform:rotate(-1.6deg) scale(1.02)}88%{transform:rotate(1.6deg) scale(1.02)}91%{transform:rotate(-1deg) scale(1.01)}94%{transform:rotate(.6deg)}}
@keyframes tvGlow{0%,100%{box-shadow:0 5px 0 #0B1240,0 0 0 2px #FFD54A inset,0 0 0 rgba(255,213,74,0)}50%{box-shadow:0 5px 0 #0B1240,0 0 0 2px #FFD54A inset,0 0 18px rgba(255,213,74,.55)}}
.tv-home{animation:tvWiggle 4s ease-in-out infinite,tvGlow 2s ease-in-out infinite;transform-origin:50% 60%}
.tv-home .tvp-go{animation:tvWiggle 4s ease-in-out .15s infinite}
@media (prefers-reduced-motion:reduce){.tv-home,.tv-home .tvp-go{animation:none}}

/* Pro: danh sách quyền lợi gọn thay cho bảng so sánh */
.pro2{background:#fff;border:1.5px solid #E7E0FF;border-radius:24px;padding:18px 16px 14px;box-shadow:0 3px 0 #EEE9FF}
.pro2-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pro2-badge{flex:none;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.08em;color:#fff;padding:4px 10px;border-radius:999px;background:linear-gradient(135deg,#4F86FF,#8E6BFF)}
.pro2-h h3{margin:0;font-size:18px;line-height:1.25}
.pro2-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pro2-list li{position:relative;padding-left:32px;font-size:15px;line-height:1.4;color:var(--ink-2)}
.pro2-list li b{color:var(--ink)}
.pro2-list li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:#DFF5E8;color:#14A37F;font-weight:900;font-size:13px;display:grid;place-items:center}
.pro2-free{margin:14px 0 0;padding:10px 12px;border-radius:14px;background:#F7F5FF;font-size:13px;line-height:1.45;color:var(--mute)}
.pro2-free b{color:var(--ink-2)}
.plan .rib.soft{background:var(--violet-soft);color:var(--violet)}
.plan.best{border:2.5px solid var(--violet)!important;box-shadow:0 4px 0 var(--violet-soft),0 0 0 4px var(--violet-soft)!important}
/* ===== hình minh họa tự động cho bài tập ===== */
.qpic:has(.mh){background:linear-gradient(180deg,#FFFBF2,#FFF4E6);border:1.5px solid #F3E2CC;border-radius:20px;padding:12px 10px;width:auto;max-width:100%;box-shadow:none;letter-spacing:0;font-size:inherit;line-height:1.2}
.mh{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px}
.mh-g{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:170px;padding:6px 8px;border-radius:14px;background:#fff;border:1.5px dashed #F0D9BE}
.mh-g i{font-style:normal;font-size:26px;line-height:1.15;position:relative}
.mh-g i.mh-x{opacity:.35}
.mh-g i.mh-x::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:3px;background:#E5383B;border-radius:2px;transform:rotate(-35deg)}
.mh-op{font-family:var(--display);font-size:26px;color:#F3722C}
.mh-q{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#FFE27A;color:#7A4B00;font-family:var(--display);font-weight:800;font-size:22px;box-shadow:0 3px 0 #E0B400}
.mh-empty{display:inline-grid;place-items:center;min-width:44px;height:40px;border-radius:12px;border:2px dashed #E5D9CB;color:var(--mute);font-weight:800}
.mh-note{text-align:center;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-top:6px;letter-spacing:0}
.mh-tens .mh-g{background:none;border:0;gap:4px;max-width:none;align-items:flex-end}
.mh-bar{width:14px;height:92px}.mh-cube{width:14px;height:14px}
.mh-ones{max-width:70px!important}
.mh-cash{gap:8px}.mh-note-svg{width:118px;height:59px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12))}
.mh-frac{flex-direction:column;gap:8px}
.mh-frow{display:flex;align-items:center;gap:10px}.mh-frow b{font-family:var(--display);font-size:18px;color:var(--violet);min-width:40px}
.mh-fbar{width:210px;height:27px}
.qst{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:8px;border-radius:12px;background:#FFF1E0;font-size:20px;vertical-align:middle;float:left}
.pp .mh-g i{font-size:16px}.pp .mh-op{font-size:16px}.pp .mh-bar{height:60px;width:10px}.pp .mh-note-svg{width:80px;height:40px}.pp .mh-fbar{width:150px}.pp .qst{display:none}
.qpic:has(.mh){word-break:normal}
.mh-g i.mh-x{opacity:1}.mh-g i.mh-x span{opacity:.4;filter:grayscale(.6)}
.mh-g i.mh-x::after{height:3.5px;left:0;right:0;transform:rotate(-40deg)}
.mh-cmp{flex-wrap:nowrap;gap:6px}.mh-cmp .mh-g{max-width:128px}.mh-cmp .mh-g i{font-size:21px}
.mh-word span{font-size:64px;line-height:1.1;filter:drop-shadow(0 3px 2px rgba(0,0,0,.12))}
.qpic:has(.mh-word){padding:10px 26px}
.opt .oe{font-size:24px;line-height:1;margin-right:2px}
.ps-pic{margin-right:8px;font-size:24px;vertical-align:-3px;letter-spacing:2px}
.pp .mh-word span{font-size:36px}.pp .opt .oe{font-size:16px}
.qfig svg{max-width:240px}
/* tranh vị trí cho giới từ tiếng Anh */
.mh-prep{position:relative;width:170px;height:120px;display:block;margin:0 auto}
.mh-prep span{position:absolute;line-height:1}
.mh-prep .pb{font-size:64px;left:50%;top:50%;transform:translate(-50%,-30%)}
.mh-prep .pa{font-size:34px;left:50%;top:50%}
.mh-on .pa{transform:translate(-50%,-150%)}
.mh-in .pa{transform:translate(-50%,-10%);font-size:26px;z-index:1}
.mh-under .pa{transform:translate(-50%,85%)}
.mh-next .pb{transform:translate(-90%,-30%)}.mh-next .pa{transform:translate(45%,-10%)}
.mh-behind .pa{transform:translate(-20%,-90%);opacity:.65}
.mh-front .pa{transform:translate(-60%,10%);z-index:1}
.qpic:has(.mh-prep){padding:8px 20px}
.numin input,input.tin,.tin{font-family:var(--body)!important}
.mh-prep .pb svg{width:80px;height:60px;display:block}
.mh-on .pa{transform:translate(-50%,-112%)}

/* ===== dùng thử Pro 7 ngày ===== */
.trial-card{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:14px;border-radius:22px;background:linear-gradient(135deg,#FFF1F6,#FFF8E6);border:2px solid #FFC7DA;box-shadow:0 3px 0 #FFE0EA}
.tc-ic{font-size:34px;flex:none}.tc-t{flex:1;min-width:0}.tc-t b{display:block;font-family:var(--display);font-size:17px;line-height:1.2;color:#C2185B}.tc-t span{display:block;font-size:13px;color:var(--ink-2);margin-top:2px;line-height:1.35}
@media(max-width:420px){.trial-card{flex-wrap:wrap}.trial-card .btn{width:100%}}
.trial-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 0;padding:10px 14px;border-radius:16px;background:#FFF4D6;border:1.5px solid #FFE08A;color:#7A4B00;text-decoration:none;font-size:14px;font-weight:700}
.trial-bar em{font-style:normal;flex:none;background:#FFB703;color:#2B1A00;border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:800}
.trial-bar.end{background:#FFE6F0;border-color:#FFC7DA;color:#9D174D}.trial-bar.end em{background:#FF6FA3;color:#fff}
.pro-chip.on{white-space:nowrap}

.btn.msgr{background:linear-gradient(135deg,#0A7CFF,#A033FF);color:#fff;box-shadow:0 4px 0 #3B2FB8;margin-top:10px;text-decoration:none;display:flex}