:root{--bg:#f4f6ff;--card:#fff;--ink:#1f2340;--mute:#6b7092;--pri:#5b6cff;--pri2:#4352e8;--ok:#22b07d;--bad:#ef5a6f;--warn:#ffb020;--sun:#ffd34d;--r:20px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;overscroll-behavior:none;-webkit-text-size-adjust:100%;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:18px;line-height:1.45}
#app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button,input,textarea{font:inherit;color:inherit}
.top{display:flex;align-items:center;gap:10px;padding:14px 16px 6px}
.top h1{font-size:22px;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back{border:0;background:#fff;border-radius:14px;width:48px;height:48px;font-size:24px;box-shadow:0 2px 8px #1f234014}
.chips{display:flex;gap:8px}
.chip{background:#fff;border-radius:999px;padding:6px 12px;font-weight:700;box-shadow:0 2px 8px #1f234014;white-space:nowrap}
.wrap{padding:10px 16px 20px;display:flex;flex-direction:column;gap:14px;flex:1}
.hello{font-size:26px;font-weight:800;margin:6px 2px 0}
.seg{display:grid;grid-template-columns:1fr 1fr;background:#e4e8ff;border-radius:18px;padding:5px;gap:5px}
.seg button{border:0;background:transparent;border-radius:14px;padding:12px;font-weight:800;font-size:19px;color:var(--mute)}
.seg button.on{background:#fff;color:var(--pri2);box-shadow:0 2px 8px #1f234020}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.big{border:0;border-radius:24px;min-height:128px;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:20px;font-weight:800;color:#fff;box-shadow:0 6px 16px #1f234024;transition:transform .08s}
.big:active,.btn:active{transform:scale(.97)}
.big .ic{font-size:44px;line-height:1}
.c1{background:linear-gradient(135deg,#5b6cff,#7b5bff)}.c2{background:linear-gradient(135deg,#22b07d,#1fc2a8)}.c3{background:linear-gradient(135deg,#ff8a3d,#ffb020)}.c4{background:linear-gradient(135deg,#ef5a6f,#ff7aa2)}
.btn{border:0;border-radius:18px;min-height:56px;padding:12px 18px;font-weight:800;font-size:19px;background:var(--pri);color:#fff;box-shadow:0 4px 12px #5b6cff40;width:100%}
.btn.ghost{background:#fff;color:var(--pri2);box-shadow:0 2px 8px #1f234014}
.btn.ok{background:var(--ok);box-shadow:0 4px 12px #22b07d40}
.btn.warn{background:var(--warn);color:#3b2a00;box-shadow:0 4px 12px #ffb02040}
.btn:disabled{opacity:.55}
.card{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:0 2px 10px #1f234012}
.field{width:100%;border:2px solid #dfe3ff;border-radius:16px;padding:14px;font-size:19px;background:#fff;outline:none}
.field:focus{border-color:var(--pri)}
textarea.field{min-height:150px;resize:vertical}
.login{justify-content:center;gap:16px}
.logo{font-size:64px;text-align:center}
.title{font-size:30px;font-weight:900;text-align:center;margin:0}
.err{color:var(--bad);font-weight:700;text-align:center;min-height:1.4em}
.link{background:none;border:0;color:var(--mute);font-weight:700;padding:12px;text-decoration:underline}
.preview{width:100%;max-height:44vh;object-fit:contain;border-radius:16px;background:#fff}
.chat{flex:1;display:flex;flex-direction:column;gap:10px;padding:8px 16px 12px;overflow-y:auto}
.msg{max-width:88%;padding:12px 15px;border-radius:20px;white-space:pre-wrap;word-wrap:break-word}
.msg.ai{background:#fff;border-bottom-left-radius:6px;box-shadow:0 2px 8px #1f234012}
.msg.kid{background:var(--pri);color:#fff;align-self:flex-end;border-bottom-right-radius:6px}
.msg.sol{background:#fffbe8;border:2px solid var(--sun)}
.msg.win{background:#e7fbf3;border:2px solid var(--ok)}
.problem{background:#fff;border-radius:16px;padding:10px 14px;margin:0 16px;box-shadow:0 2px 8px #1f234012}
.problem summary{font-weight:800;color:var(--pri2);cursor:pointer}
.problem div{white-space:pre-wrap;margin-top:6px}
.dots span{display:inline-block;width:9px;height:9px;margin:0 3px;border-radius:50%;background:#aab2ff;animation:b 1s infinite}
.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}
@keyframes b{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-7px)}}
.bar{position:sticky;bottom:0;background:var(--bg);padding:8px 16px 14px;display:flex;flex-direction:column;gap:8px;border-top:1px solid #e4e8ff}
.row{display:flex;gap:8px}
.row .btn{flex:1;min-height:50px;font-size:17px;padding:10px}
.send{display:flex;gap:8px}
.send .field{flex:1;padding:12px 14px;min-height:54px}
.send .btn{width:auto;min-width:84px}
.topics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tbtn{border:0;background:#fff;border-radius:18px;min-height:80px;padding:12px;font-weight:800;font-size:17px;box-shadow:0 2px 10px #1f234014;color:var(--ink)}
.tbtn.hl{background:linear-gradient(135deg,#ef5a6f,#ff7aa2);color:#fff;grid-column:1/-1;min-height:64px}
.prog{display:flex;gap:6px}.prog i{flex:1;height:10px;border-radius:9px;background:#e1e5ff}.prog i.ok{background:var(--ok)}.prog i.bad{background:var(--bad)}.prog i.cur{background:var(--pri)}
.q{font-size:21px;font-weight:700;white-space:pre-wrap}
.choices{display:flex;flex-direction:column;gap:10px}
.choice{border:2px solid #dfe3ff;background:#fff;border-radius:16px;padding:14px;text-align:left;font-size:19px;font-weight:600}
.choice.sel{border-color:var(--pri);background:#eef0ff}
.fb{border-radius:16px;padding:14px;font-weight:600;white-space:pre-wrap}
.fb.ok{background:#e7fbf3;color:#0f6b4a}.fb.bad{background:#ffeef1;color:#9b1f33}.fb.try{background:#fff6e0;color:#7a5200}
.center{text-align:center}
.huge{font-size:56px;text-align:center}
.stat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat .card{text-align:center;padding:12px 8px}.stat b{display:block;font-size:26px}
.bars{display:flex;align-items:flex-end;gap:6px;height:110px;padding-top:8px}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:12px;color:var(--mute)}
.bars span{display:block;width:100%;background:var(--pri);border-radius:8px 8px 3px 3px;min-height:3px}
table{width:100%;border-collapse:collapse;font-size:15px}td,th{padding:7px 4px;border-bottom:1px solid #eef0fb;text-align:left;vertical-align:top}
h2{font-size:19px;margin:0 0 8px}
.small{font-size:14px;color:var(--mute)}
details.sess{border-bottom:1px solid #eef0fb;padding:8px 0}details.sess summary{cursor:pointer;font-weight:700;font-size:16px}
.tx{font-size:15px;white-space:pre-wrap;margin:6px 0;padding:8px 10px;border-radius:12px}.tx.ai{background:#f4f6ff}.tx.kid{background:#eef7ff;margin-left:24px}
.tag{display:inline-block;font-size:12px;font-weight:800;border-radius:8px;padding:1px 7px;margin-left:4px}.tag.ok{background:#e7fbf3;color:#0f6b4a}.tag.no{background:#fff6e0;color:#7a5200}.tag.ph{background:#eef0ff;color:#4352e8}
.toast{position:fixed;left:50%;top:calc(18px + env(safe-area-inset-top));transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:16px;font-weight:700;z-index:9;max-width:90vw;text-align:center}
.modal{position:fixed;inset:0;background:#1f234066;display:flex;align-items:flex-end;justify-content:center;z-index:8}
.modal .card{width:100%;max-width:560px;border-radius:24px 24px 0 0;padding:22px 16px calc(26px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.hidden{display:none}
.sgk{margin:0 16px 8px;align-self:flex-start;background:#eef0ff;color:var(--pri2);border:0;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700}
button.sgk{padding:6px 14px;min-height:32px}
.tbtn.sgkb{background:linear-gradient(135deg,#5b6cff,#8a7dff)}
.topics.one{grid-template-columns:1fr;gap:8px;margin-bottom:14px}
.tbtn.ls{min-height:0;text-align:left;font-size:15px;padding:12px 14px}
.ghead{font-weight:800;color:var(--pri2);font-size:14px;margin-top:4px}

/* tutor: main column + side pane (side shown on tablet landscape only) */
.split{display:flex;flex:1;min-height:0}
.main{display:flex;flex-direction:column;flex:1;min-width:0}
.side{display:none}
.lcard h3{font-size:19px;margin:8px 0 4px}
.lcard .sgk{margin:0}
.lh{font-weight:800;color:var(--pri2);margin-top:10px;font-size:16px}
.lt{white-space:pre-wrap;margin-top:4px}
.shot img{display:block;width:100%;max-height:62vh;object-fit:contain;border-radius:12px;background:#fff}
.sheet{max-height:85dvh;overflow-y:auto}
.sheet .lcard{box-shadow:none;padding:0}
.big.span2{grid-column:1/-1;min-height:96px;flex-direction:row;gap:14px}
.c5{background:linear-gradient(135deg,#1fa2ff,#5b6cff)}
/* handwriting pad */
html.lock,html.lock body{height:100%;overflow:hidden}
#app.padmode{height:100dvh;min-height:0;overflow:hidden}
.padwrap{min-height:0;gap:10px;padding-bottom:12px}
.tools{display:flex;gap:8px;flex-wrap:wrap}
.tool{border:0;background:#fff;border-radius:14px;min-height:48px;padding:8px 14px;font-weight:800;font-size:16px;box-shadow:0 2px 8px #1f234014;color:var(--ink)}
.tool.on{background:var(--pri);color:#fff}
.padbox{flex:1;min-height:200px;border-radius:18px;background-color:#fff;box-shadow:0 2px 10px #1f234012;overflow:hidden;position:relative}
.padbox.line{background-image:linear-gradient(#dfe5ff 1px,transparent 1px);background-size:100% 34px;background-position:0 33px}
.padbox.grid{background-image:linear-gradient(#e6eaff 1px,transparent 1px),linear-gradient(90deg,#e6eaff 1px,transparent 1px);background-size:24px 24px}
.pad{display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair}
/* tablet: larger type, wider column, bigger targets */
@media (min-width:700px){
  html,body{font-size:20px}
  #app{max-width:820px}
  .top{padding:18px 24px 8px}.top h1{font-size:26px}
  .wrap{padding:12px 24px 24px;gap:16px}
  .back{width:56px;height:56px}
  .chip{padding:8px 14px;font-size:19px}
  .btn{min-height:62px;font-size:21px}
  .row .btn{min-height:58px;font-size:19px}
  .send .field{min-height:60px}
  .field{font-size:21px}
  .msg{max-width:78%;padding:14px 18px;font-size:21px}
  .chat{padding:10px 24px 14px;gap:12px}
  .bar{padding:10px 24px 16px}
  .problem,.sgk{margin-left:24px;margin-right:24px}
  button.sgk{min-height:44px;font-size:16px;padding:8px 18px}
  .lcard .sgk{font-size:15px}
  .big{min-height:170px;font-size:23px}.big .ic{font-size:54px}
  .big.span2{min-height:110px}
  .tbtn{min-height:88px;font-size:19px}.tbtn.ls{font-size:17px;padding:14px 16px}
  .q{font-size:24px}
  .choice{font-size:21px;padding:16px}
  .tool{min-height:56px;font-size:18px;padding:10px 18px}
  .modal .card{max-width:720px;border-radius:24px;margin-bottom:24px}
  .modal{align-items:center}
}
/* tablet landscape: split view in the tutor */
@media (min-width:1024px) and (orientation:landscape){
  #app{max-width:1180px}
  #app.tutor{max-width:none;height:100dvh;min-height:0;overflow:hidden}
  #app.tutor .split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0}
  #app.tutor.noside .split{display:flex;max-width:860px;margin:0 auto;width:100%}
  #app.tutor .side{display:flex;flex-direction:column;gap:14px;overflow-y:auto;padding:8px 18px 24px 24px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  #app.tutor.noside .side{display:none}
  #app.tutor .main{min-height:0;border-left:1px solid #e4e8ff}
  #app.tutor.noside .main{border-left:0}
  #app.tutor .chat{overscroll-behavior:contain}
  #app.tutor:not(.noside) .main>.sgk,#app.tutor:not(.noside) .main>.problem{display:none}
  #app.tutor .msg{max-width:86%}
  #app.padmode{max-width:none}
  .grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:520px){.padwrap .send{flex-direction:column}.padwrap .send .btn{width:100%}.padbox{min-height:160px}}
/* parent accounts */
.kids{display:grid;grid-template-columns:1fr;gap:12px}
.kidc{border:0;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:84px;color:var(--ink);font:inherit}
.kidc.off{opacity:.65}
.kname{font-size:22px;font-weight:800;display:flex;align-items:center;gap:8px}
.kmeta{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--mute);font-weight:700;font-size:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row2>.btn:only-child{grid-column:1/-1}
.form{display:flex;flex-direction:column;gap:10px}
.lab{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:15px;color:var(--mute)}
.lab .field{color:var(--ink)}
.chip.fixed{align-self:flex-start;box-shadow:none;background:#eef0ff;color:var(--pri2)}
.btn.bad{background:var(--bad);box-shadow:0 4px 12px #ef5a6f40}
.btn.dangert{color:var(--bad)}
.warnc{background:#fff6e0;color:#7a5200;font-weight:800;text-align:center}
.field.pin{letter-spacing:.2em}
@media (min-width:700px){.kids{grid-template-columns:1fr 1fr}.pwrap{max-width:820px;margin:0 auto;width:100%}}
@media (min-width:1024px) and (orientation:landscape){.kids{grid-template-columns:repeat(3,1fr)}}
/* ---------- Tiếng Anh ---------- */
.seg.seg3{grid-template-columns:1fr 1fr 1fr}
.seg.seg3 button{font-size:16px;padding:12px 4px;white-space:nowrap}
.rt{display:flex;gap:8px;align-items:center}
.vctl{display:flex;gap:6px}
.vb{border:0;background:#fff;border-radius:12px;min-width:44px;height:40px;font-size:20px;box-shadow:0 2px 8px #1f234014}
.vb.on{background:#e7fbf3;box-shadow:inset 0 0 0 2px var(--ok)}
.spk{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:12px;background:#eef0ff;font-size:19px;cursor:pointer;flex:none;-webkit-user-select:none;user-select:none}
.spk.talk,.en.talk{background:#ffe9a8;animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.en{background:#eef0ff;color:var(--pri2);border-radius:8px;padding:0 5px;font-weight:700;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.en i{font-style:normal;font-size:.8em}
.encard h2{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.encard .pg{font-size:14px;color:var(--mute);font-weight:700}
.enrow{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #f0f2ff}
.enrow:last-child{border-bottom:0}
.ent{font-weight:700;flex:1;font-size:18px}
.vi{color:var(--mute);text-align:right;max-width:45%}
.dlg{background:#f7f8ff;border-radius:14px;padding:6px 10px;margin-top:8px}
.dlg .enrow{border-bottom-color:#e8ebff}
.dlg .ent{font-weight:600;font-size:17px}
.chipbtn{border:0;background:var(--pri);color:#fff;border-radius:12px;padding:8px 14px;font-weight:800;margin:6px 0}
.song{margin-top:6px}
.lyr{white-space:pre-wrap;color:var(--ink);background:#fffaf0;border-radius:12px;padding:8px 12px;margin-top:4px}
.chips.wrapc{flex-wrap:wrap;margin:6px 0}
.chip.enw{display:inline-flex;align-items:center;gap:4px;padding:3px 10px 3px 3px;font-size:17px}
.chip.enw .spk{min-width:34px;height:34px;font-size:16px}
.tbtn .un{color:var(--pri2)}
.tbtn.rv{background:#fff6e0}
.enwrap{padding-bottom:96px}
.stick{position:sticky;bottom:0;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 30%)}
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mcol{display:flex;flex-direction:column;gap:10px}
.match .choice{display:flex;align-items:center;gap:6px;min-height:58px;font-size:17px;padding:8px 10px}
.match .choice .spk{min-width:34px;height:34px;font-size:16px}
.match .choice.sel{border-color:var(--pri);box-shadow:0 0 0 3px #5b6cff33}
.choice.m1{border-color:#5b6cff;background:#eef0ff}.choice.m2{border-color:#22b07d;background:#e7fbf3}
.choice.m3{border-color:#ffb020;background:#fff6e0}.choice.m4{border-color:#ef5a6f;background:#ffeef1}
.choice.m5{border-color:#9b5de5;background:#f4ecff}.choice.m6{border-color:#00a6c8;background:#e5f8fc}
.choice .spk{margin-right:2px}
.fb .spk{vertical-align:middle}
@media (min-width:700px){.enwrap .encard{max-width:820px;margin-left:auto;margin-right:auto}.seg.seg3 button{font-size:19px}}
.top:has(.vctl) h1{white-space:normal;font-size:19px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (max-width:520px){.rt .chips{display:none}}
@media (min-width:700px){.enwrap .stick{max-width:820px;margin-left:auto;margin-right:auto;width:100%}}
/* pronunciation */
.mic{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:12px;background:#fff0f3;font-size:19px;cursor:pointer;flex:none;-webkit-user-select:none;user-select:none}
.mic.rec,.micbig.rec{background:var(--bad);color:#fff;animation:pulse 1s infinite}
.mic.busy{opacity:.5}
.chip.enw .mic{min-width:34px;height:34px;font-size:16px}
.pronres{background:#fffaf0;border-radius:14px;padding:8px 12px;margin:4px 0 8px}
.pstars{display:flex;align-items:center;gap:2px;font-size:24px;color:#e3e5f2}
.pstars .on{color:#ffb020}
.pmsg{font-size:16px;font-weight:800;color:var(--ink);margin-left:8px}
.pwords{display:flex;flex-wrap:wrap;gap:4px 6px;margin:6px 0;font-size:18px;font-weight:700}
.pwords .ok{color:#0f6b4a}
.pwords .miss{color:#c0263d;background:#ffeef1;border-radius:6px;padding:0 4px;text-decoration:underline wavy}
.sayq{display:flex;flex-direction:column;gap:10px}
.sayt{font-size:24px;font-weight:800;color:var(--pri2);margin-top:8px}
.micbig{font-size:22px;min-height:64px}

.rbtn{position:relative}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;margin-left:8px;border-radius:11px;background:var(--bad);color:#fff;font-size:13px;font-weight:800}
.rcard .rhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.rcard .rhead h2{margin:0}
.rkid{border-top:1px solid #eef0f6;padding:10px 0 4px;margin-top:8px}.rkid:first-of-type{border-top:0}
.rkn{font-weight:800;font-size:17px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.rmeta{font-weight:600;font-size:14px;color:#556}
.rl{margin:4px 0;font-size:15px;line-height:1.4}
.rrev,.ralert{margin:6px 0;padding:8px 10px;border-radius:12px;background:#fff7e6;font-size:14px;line-height:1.4}.ralert{background:#ffeef1;color:#9b1f33}
.rrev div,.ralert div{margin-top:3px}
.rcom{margin-top:6px;font-style:italic;color:#445;font-size:15px}

.weekc{margin:6px 0 12px}.wkhead{display:flex;align-items:center;gap:8px;font-size:18px;margin-bottom:8px}
.wkl{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.wkchip{white-space:normal;text-align:left;height:auto;min-height:40px;padding:8px 12px;line-height:1.3}
.weekc .row2 .btn{margin:0}
select.field{appearance:auto;-webkit-appearance:menulist;background:#fff}
.wkchip{background:#eef0ff;color:var(--pri);margin:0}

/* kiểm tra */
.c6{background:linear-gradient(135deg,#ef5a6f,#ff8a3d)}
.tcard .thead{display:flex;align-items:center;gap:8px;font-size:20px}.tcard .tic{font-size:26px}.tcard .tscore{margin-left:auto;font-weight:800;color:#0f6b4a;background:#e7fbf3;border-radius:10px;padding:2px 10px}
.tcard .row2{margin-top:8px}
.tlist{display:flex;flex-direction:column;gap:12px}
.ttime{font-variant-numeric:tabular-nums;font-weight:800}.ttime.low{background:#ffeef1;color:#9b1f33}
.tsec{margin:6px 2px 0;font-size:19px}
.titem,.tres{display:flex;flex-direction:column;gap:10px}
.tq{font-size:18px;line-height:1.45;white-space:pre-line}.tpt{display:inline-block;margin-left:6px;font-size:13px;font-weight:800;color:#5b6cff;background:#eef0ff;border-radius:8px;padding:0 6px;white-space:nowrap}
.titem .choices{display:flex;flex-direction:column;gap:8px}.titem .choice{font-size:17px;padding:11px 12px}.choice .tl{color:#5b6cff;margin-right:4px}
.tarea{min-height:90px;font-size:17px;line-height:1.5}
.ord{display:flex;flex-direction:column;gap:8px}.wrapc{flex-wrap:wrap}.ghostc{opacity:.7}
.tpass p{margin:0 0 10px;font-size:17px;line-height:1.6}.tpass h2{margin-top:0}
.tqs{display:flex;flex-direction:column;gap:12px}
.tkid{font-size:16px;white-space:pre-line}.tans{font-size:16px;color:#0f6b4a;font-weight:700}.tfb{font-size:16px;background:#f6f7ff;border-radius:12px;padding:8px 10px}
.tres.good{border-left:5px solid #22b07d}.tres{border-left:5px solid #ef5a6f}
.tsum .tbig{font-size:46px;font-weight:900;color:#5b6cff}
@media (min-width:700px){.twrap .tqs{max-width:820px;margin:0 auto;width:100%}}
@media (min-width:1024px) and (orientation:landscape){.twrap.haspass{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}.twrap.haspass .tpass{position:sticky;top:70px;max-height:calc(100vh - 90px);overflow:auto}.twrap.haspass .tqs{max-width:none}}

/* 5 subjects: 3 + 2 on phones, one row on iPad */
.seg.seg5{grid-template-columns:repeat(6,1fr)}.seg.seg5 button{grid-column:span 2;font-size:16px;padding:11px 4px;white-space:nowrap}.seg.seg5 button:nth-child(n+4){grid-column:span 3}
@media (min-width:700px){.seg.seg5{grid-template-columns:repeat(5,1fr)}.seg.seg5 button,.seg.seg5 button:nth-child(n+4){grid-column:auto;font-size:17px}}