/* ─────────────────────────────────────────────────────────────
   Hệ thống giao diện: nền trắng, đơn sắc, màu chỉ dùng cho đúng/sai/đánh dấu.
   Lưới 4px · vùng bấm ≥ 44px · chữ không nhỏ hơn 13px.
   ───────────────────────────────────────────────────────────── */
:root{
  --bg:#FFFFFF;
  --fill:#F4F4F5;       /* mặt nổi: thẻ, ô chọn, bảng */
  --fill-2:#E9E9EC;     /* rê chuột / đang bấm */
  --line:#E4E4E7;
  --line-2:#D4D4D8;     /* viền ô chọn */
  --ink:#18181B;
  --ink-2:#52525B;      /* chữ phụ, 7.7:1 trên nền trắng */
  --ink-3:#71717A;      /* chữ mờ, 4.8:1 */
  --ok:#15803D;   --ok-bg:#F0FAF3;   --ok-line:#86C99E;
  --bad:#B91C1C;  --bad-bg:#FDF2F2;  --bad-line:#E8A3A3;
  --flag:#B45309;

  --r-sm:8px; --r:14px; --r-lg:20px;
  /* Chuyển động: không dùng ease-in cho giao diện (chậm đúng lúc người dùng đang nhìn).
     Đổi màu dùng ease; vào/ra màn hình và phản hồi bấm dùng ease-out; di chuyển trên màn hình dùng --ease. */
  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);  /* bảng trượt, theo sheet của iOS */
  /* lò xo kiểu Apple (duration .4s, bounce .2): vượt đích ~1.5% rồi lắng, dùng cho vật trượt tới chỗ mới */
  --spring:linear(0,.02,.072,.144,.227,.316,.406,.492,.573,.647,.712,.77,.82,.863,.898,.927,.951,.969,.984,.995,1.003,1.008,1.012,1.014,1.015,1.015,1.015,1.014,1.013,1.011,1.01,1.009,1.007,1.006,1.005,1.004,1.003,1.003,1.002,1.001,1);

  /* kính mờ cho thanh trên/dưới: nội dung cuộn phía sau vẫn lờ mờ thấy được */
  --glass:rgba(255,255,255,.78);
  --blur:saturate(180%) blur(20px);

  --bar:56px;
  --col:720px;
  --wrap:1180px;
  --gutter:20px;
  --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* máy không làm được kính mờ, hoặc người dùng muốn giảm trong suốt: nền trắng đặc */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){:root{--glass:var(--bg)}}
@media (prefers-reduced-transparency:reduce){:root{--glass:var(--bg)}}

*{box-sizing:border-box}
/* giao diện chỉ có nền sáng; chừa chỗ cho thanh trên/dưới khi trình duyệt tự cuộn tới ô đang chọn (Tab) */
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable;background:var(--bg);color-scheme:light;
  scroll-padding:calc(var(--bar) + 12px + env(safe-area-inset-top)) 0 112px;
}
html.lock{overflow:hidden}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
button:disabled{cursor:default}
a{color:inherit;-webkit-tap-highlight-color:transparent}
svg{display:block;flex:none}
ul{margin:0;padding:0;list-style:none}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Vòng focus chỉ dành cho người dùng bàn phím. Safari trên iPhone vẫn vẽ vòng khi trang tự trả focus
   về nút vừa chạm (đóng bảng, đóng menu), nên vừa chạm/bấm chuột thì ẩn (JS gắn lớp pointer). */
html.pointer :focus-visible{outline:none}
/* chỉ dành cho trình đọc màn hình; margin:-1px để lề mặc định (vd. của <p>) không kéo dài trang */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Mép vùng cuộn mờ dần khi còn nội dung ở phía đó (JS bật more-up / more-down) */
@property --fade-t{syntax:"<length>";inherits:false;initial-value:0px}
@property --fade-b{syntax:"<length>";inherits:false;initial-value:0px}
.fade{
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-t),#000 calc(100% - var(--fade-b)),transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-t),#000 calc(100% - var(--fade-b)),transparent);
  transition:--fade-t .2s ease,--fade-b .2s ease;
}
.fade.more-up{--fade-t:24px}
.fade.more-down{--fade-b:24px}

/* Đổi trang: trang cũ tắt nhanh, trang mới hiện dần ngay sau, không dịch chuyển gì.
   Hai trang chồng nhau rất ít để chữ không lẫn vào nhau. */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.25s}
::view-transition-old(root){animation:.1s var(--ease-out) both vt-out}
::view-transition-new(root){animation:.2s var(--ease-out) .05s both vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* ── Trang chọn môn ───────────────────────────────────────── */
.shelf{
  width:min(960px,100% - 2*var(--gutter));margin:0 auto;
  padding:calc(24px + env(safe-area-inset-top)) 0 calc(32px + env(safe-area-inset-bottom));
}
.courses{display:grid;gap:12px}
.course{
  position:relative;display:flex;align-items:center;gap:16px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  min-height:88px;padding:20px 20px 20px 24px;
  border-radius:var(--r-lg);background:var(--fill);
  text-decoration:none;overflow:hidden;
  transition:background-color .2s ease,transform .2s var(--ease-out);
}
.course-code{
  flex:1;min-width:0;
  font-size:clamp(1.625rem,1.3rem + 1.2vw,2.25rem);font-weight:600;
  line-height:1.15;letter-spacing:-.025em;
}
.course svg{color:var(--ink-3);transition:color .2s ease,transform .2s var(--ease-out)}
/* thanh tiến độ: co giãn bằng transform, không đổi bố cục */
.course-bar{position:absolute;left:0;right:0;bottom:0;height:4px;overflow:hidden;background:var(--line)}
.course-bar i{position:absolute;inset:0;transform-origin:0 0;transition:transform .6s var(--ease) .25s}
.course-bar .ok{background:var(--ok)}
.course-bar .no{background:var(--bad)}
/* bấm: lún xuống nhanh (100ms), nhả ra chậm hơn (200ms) */
.course:active{background:var(--fill-2);transform:scale(.985);transition-duration:.1s}
.course[aria-disabled]{opacity:.45}
@media (min-width:640px){
  .courses{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .course{flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:160px;padding:24px 28px 28px}
  .course svg{position:absolute;top:22px;right:22px}
  .course-code{flex:none}
}
@media (min-width:900px){
  .courses{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* ít môn: đặt cả khối giữa màn hình */
  .home .shelf{min-height:100vh;min-height:100svh;display:grid;align-content:center;padding:48px 0}
}

/* môn do người dùng thêm: tên người tạo nhỏ dưới mã môn */
.course-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.course-head .course-code{flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.course.locked svg{width:18px;height:18px;margin-right:2px}
.course.locked:hover svg{transform:none}
.course-by{font-size:.8125rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ô Thêm môn: chỉ có viền mảnh, nhường sự chú ý cho các môn */
.add-course{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2);gap:10px}
.add-course span{font-size:1.0625rem;font-weight:500;letter-spacing:-.01em}
.add-course svg{color:var(--ink-2)}
.add-course:active{background:var(--fill)}
@media (min-width:640px){
  .course-head{flex:none;max-width:100%}
  .add-course{flex-direction:row;align-items:center;justify-content:center}
  .add-course svg{position:static}
}

/* ── Thanh trên ───────────────────────────────────────────── */
/* kính mờ đặt ở lớp giả phía sau: backdrop-filter trên chính .bar sẽ làm menu (position:fixed) bên trong lệch chỗ */
.bar{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top)}
.bar::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.bar-in{
  max-width:var(--col);height:var(--bar);margin:0 auto;
  display:flex;align-items:center;gap:4px;
  padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));
}
.back{
  display:flex;align-items:center;gap:2px;min-width:0;height:44px;margin-right:auto;padding:0 12px 0 4px;
  border-radius:12px;text-decoration:none;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;
  transition:background-color .15s ease;
}
.back span{white-space:nowrap}
.icon-btn{
  position:relative;flex:none;width:44px;height:44px;padding:0;
  display:grid;place-items:center;border:0;border-radius:12px;background:transparent;
  transition:background-color .15s ease,color .15s ease,transform .2s var(--ease-out);
}
.icon-btn:active{transform:scale(.92);transition-duration:.1s}
/* chấm nhỏ: đang lọc câu */
.icon-btn.on::after{
  content:"";position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;
  background:var(--flag);box-shadow:0 0 0 2px var(--bg);
}
.flag{color:var(--ink-3)}
.flag svg{transition:fill .2s ease}
.flag[aria-pressed="true"]{color:var(--flag)}
.flag[aria-pressed="true"] svg{fill:currentColor}
.back:active,.icon-btn:active{background:var(--fill)}

.picker-wrap{min-width:0;flex-shrink:1}
.picker{
  position:relative;display:flex;align-items:center;gap:4px;height:40px;max-width:min(48vw,320px);margin-right:4px;padding:0 10px 0 14px;
  border:0;border-radius:999px;background:var(--fill);font-size:.9375rem;font-weight:500;
  transition:background-color .15s ease,transform .2s var(--ease-out);
}
.picker span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* nút cao 40px cho gọn thanh trên, vùng chạm vẫn đủ 44px */
.picker::before{content:"";position:absolute;inset:-2px 0}
.picker svg{width:16px;height:16px;color:var(--ink-3);transition:transform .25s var(--ease)}
/* menu đang mở: nút giữ màu đậm như đang được chọn */
.picker[aria-expanded="true"]{background:var(--fill-2)}
.picker[aria-expanded="true"] svg{transform:rotate(180deg)}
.picker:active{background:var(--fill-2);transform:scale(.97);transition-duration:.1s}
/* đang tải (chưa có tên chương): giữ chỗ bằng một ô trống cùng cỡ, như phần còn lại của khung chờ */
.picker:has(> span:empty){width:96px}
.picker:has(> span:empty) svg{opacity:0}
/* hiệu ứng mở/đóng chạy bằng JS, nở ra từ đúng chỗ nút chọn */
.chapter-menu{
  position:fixed;z-index:30;width:min(360px,calc(100vw - 24px));
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;background:var(--bg);
  box-shadow:0 16px 48px -12px rgba(24,24,27,.18),0 2px 6px rgba(24,24,27,.04);
}
/* chỉ phần danh sách bên trong cuộn và mờ ở mép; khung ngoài vẫn giữ nền trắng */
.chapter-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px}
.chapter-option{
  display:block;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:10px;
  background:transparent;text-align:left;font-size:.9375rem;line-height:1.45;
}
.chapter-option[aria-selected="true"]{background:var(--fill);font-weight:600}
.chapter-option:focus-visible{outline-offset:-2px}
.chapter-option:disabled{color:var(--ink-3)}
.chapter-code{display:block;font-family:var(--mono);font-size:.75rem;font-weight:400;color:var(--ink-3);letter-spacing:0}
.chapter-sep{height:1px;margin:6px 12px;background:var(--line)}

/* thanh tiến độ ngay dưới thanh trên */
.meter{position:relative;height:3px;overflow:hidden;background:var(--fill)}
/* Hai đoạn luôn cùng dạng translateX() scaleX() thì trình duyệt mới nội suy từng thành phần:
   đoạn đỏ bám sát đầu đoạn xanh, cả thanh dài ra như một dải. Khác dạng (và scaleX(0) không đảo được)
   thì đoạn đỏ nhảy thẳng tới chỗ cuối trong khi đoạn xanh còn đang chạy. */
.meter i{position:absolute;inset:0;transform-origin:0 0;transform:translateX(0) scaleX(0);transition:transform .3s var(--ease)}
.m-ok{background:var(--ok)}
.m-no{background:var(--bad)}

/* ── Bố cục ───────────────────────────────────────────────── */
.layout{width:100%;max-width:var(--col);margin:0 auto}
.main{min-width:0}
.side{display:none}

/* ── Câu hỏi ──────────────────────────────────────────────── */
.stage{
  overflow-anchor:none;touch-action:pan-y pinch-zoom;
  padding:28px max(var(--gutter),env(safe-area-inset-right)) 32px max(var(--gutter),env(safe-area-inset-left));
}
.qtext{
  font-size:clamp(1.1875rem,1.08rem + .45vw,1.375rem);font-weight:500;line-height:1.6;
  letter-spacing:-.005em;text-wrap:pretty;overflow-wrap:break-word;
}
.q.math .qtext{line-height:1.85}
.qtext p{margin:0 0 .6em}
.tablewrap{overflow-x:auto;margin:14px 0}
.qtext table{border-collapse:collapse;font-size:.8125rem;font-family:var(--mono);font-weight:400}
.qtext th,.qtext td{border:1px solid var(--line-2);padding:6px 12px;text-align:left;font-variant-numeric:tabular-nums}
.qtext th{background:var(--fill);font-weight:500}
/* bảng hai hàng (x / f(x)): màn hẹp thì dựng đứng thành hai cột */
@media (max-width:599px){
  .qtext table.rows tbody{display:flex;padding:1px 0 0 1px}
  .qtext table.rows tr{display:flex;flex-direction:column}
  .qtext table.rows th,.qtext table.rows td{height:32px;margin:-1px 0 0 -1px;white-space:nowrap}
}
.qtext .fig{display:block;max-width:100%;height:auto;margin:20px auto 4px}
.qtext .question-figure{margin-top:0}
.qtext .figure-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.qtext .figure-scroll .formula-figure{max-width:none;margin:12px 0 4px}
.qtext .source{margin-top:20px;font-size:.875rem;color:var(--ink-2)}
.qtext .source summary{cursor:pointer;display:list-item;width:fit-content}
.qtext .source[open] summary{margin-bottom:12px}

.qtext code,.exp code{
  font-family:var(--mono);font-size:.875em;font-weight:400;
  background:var(--fill);border-radius:6px;padding:.1em .35em;
}
.qtext code.nw,.exp code.nw{display:inline-block;max-width:100%;overflow-x:auto;white-space:nowrap;vertical-align:middle}
/* khối code: giữ thụt lề, dòng dài cuộn ngang trong khung */
.qtext pre,.exp pre{
  font-family:var(--mono);font-size:.875rem;font-weight:400;line-height:1.65;tab-size:4;letter-spacing:0;
  background:var(--fill);border-radius:12px;padding:14px 16px;margin:16px 0;
  overflow-x:auto;white-space:pre;overscroll-behavior-x:contain;
}
.exp pre{background:var(--bg)}

.need{
  display:inline-flex;align-items:center;margin:16px 0 0;padding:4px 10px;border-radius:999px;
  background:var(--fill);font-size:.8125rem;font-weight:500;color:var(--ink-2);
}

.skel{display:grid;gap:10px;opacity:0;animation:fade-in .3s var(--ease) .2s forwards}
.skel i{display:block;border-radius:8px;background:var(--fill);animation:pulse 1.4s ease-in-out .2s infinite}
.skel-line{height:22px;margin-bottom:6px}
.skel-line.short{width:62%;margin-bottom:22px}
.skel-opt{height:56px;border-radius:var(--r) !important}
@keyframes fade-in{to{opacity:1}}
@keyframes pulse{50%{opacity:.55}}

/* ── Lựa chọn ─────────────────────────────────────────────── */
.opts{display:grid;gap:10px;margin-top:24px}
.opts>li{min-width:0}
.opt{
  width:100%;height:100%;min-height:56px;display:flex;align-items:flex-start;gap:14px;
  padding:15px 16px;text-align:left;
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r);
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease,color .2s ease,transform .2s var(--ease-out);
}
/* ô chữ cái đổi màu cùng lúc với nút (kể cả khi nút được hiện trễ) */
.key{
  flex:none;width:26px;height:26px;display:grid;place-items:center;
  border-radius:var(--r-sm);background:var(--fill);color:var(--ink-2);
  font-family:var(--mono);font-size:.8125rem;font-weight:500;
  transition:background-color .2s ease,color .2s ease;transition-delay:inherit;
}
.opt .txt{flex:1;min-width:0;font-size:1.0625rem;line-height:1.5;overflow-wrap:break-word;text-wrap:pretty;padding-top:1px}
.opt .txt.code{font-family:var(--mono);font-size:.9375rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;padding-top:0}
.opt .mark{align-self:center;flex:none;width:20px;min-height:20px}
.opt .mark svg{width:20px;height:20px}
.opt:active:not(:disabled){background:var(--fill);transform:scale(.985);transition-duration:.1s}
.opt:disabled{color:inherit;opacity:1}
/* chọn tạm (câu nhiều đáp án) */
.opt.picked{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt.picked .key{background:var(--ink);color:#fff}
.opt.right{border-color:var(--ok-line);background:var(--ok-bg)}
.opt.right .key{background:var(--ok);color:#fff}
.opt.right .mark{color:var(--ok)}
.opt.wrong{border-color:var(--bad-line);background:var(--bad-bg)}
.opt.wrong .key{background:var(--bad);color:#fff}
.opt.wrong .mark{color:var(--bad)}
.opt.dim{color:var(--ink-3);border-color:var(--line)}
.opt.dim .key{color:var(--ink-3)}

/* ── Lời giải ─────────────────────────────────────────────── */
.result{margin-top:24px;padding:18px 20px 20px;border-radius:16px;background:var(--fill)}
.result::after{content:"";display:block;clear:both}
.retry{
  position:relative;float:right;width:40px;height:40px;margin:-8px -10px 4px 12px;padding:0;
  display:grid;place-items:center;border:0;border-radius:12px;background:transparent;color:var(--ink-2);
  transition:background-color .15s ease,color .15s ease,transform .2s var(--ease-out);
}
.retry svg{width:18px;height:18px}
.retry::before{content:"";position:absolute;inset:-2px}
.retry:active{background:var(--fill-2);transform:scale(.9);transition-duration:.1s}
.exp{font-size:1rem;line-height:1.75;overflow-wrap:break-word;text-wrap:pretty}
.exp>:first-child{margin-top:0}
.exp>:last-child{margin-bottom:0}
.exp b{font-weight:600}
.exp i{font-style:italic;color:var(--ink-2)}
.exp code{background:var(--bg)}

.empty{padding:88px 8px;text-align:center}
.empty p{margin:0 0 20px;color:var(--ink-2)}
.empty .go{display:inline-flex;padding:0 20px}

/* ── Thanh dưới: ‹  12 / 50  › ────────────────────────────── */
/* điện thoại: một thanh kính nổi, cách mép như thanh công cụ iOS; phần viền trong suốt không chặn chạm */
.dock{
  position:sticky;bottom:0;z-index:15;pointer-events:none;
  padding:12px max(var(--gutter),env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));
}
.dock::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.92) 55%);
}
.dock-in{
  pointer-events:auto;max-width:560px;margin:0 auto;
  display:flex;align-items:center;gap:4px;padding:6px;border-radius:32px;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 0 0 1px rgba(24,24,27,.06),0 12px 32px -12px rgba(24,24,27,.24),0 2px 6px -2px rgba(24,24,27,.08);
}
/* thanh và các nút đều là viên thuốc (như thanh công cụ iOS 26), bo góc đồng tâm: 32 − 6 = 26 */
.dock .nav,.go{
  flex:none;height:52px;min-width:60px;padding:0;
  display:flex;align-items:center;justify-content:center;gap:6px;
  border:0;border-radius:26px;background:var(--fill);font-weight:600;
  transition:background-color .2s ease,color .2s ease,opacity .2s ease,transform .2s var(--ease-out);
}
.dock .nav{background:transparent}
.go.solid{background:var(--ink);color:#fff}
.go:disabled,.dock .nav:disabled{opacity:.3}
.go:not(:disabled):active,.dock .nav:not(:disabled):active,.count:not(:disabled):active{transform:scale(.96);transition-duration:.1s}
.count{
  flex:1;min-width:0;height:52px;padding:0;
  display:flex;align-items:center;justify-content:center;gap:6px;
  border:0;border-radius:26px;background:transparent;
  font-size:1rem;font-variant-numeric:tabular-nums;
  transition:background-color .15s ease,transform .2s var(--ease-out);
}
.count b{font-weight:600}
.count>span{color:var(--ink-3)}
.count svg{width:16px;height:16px;color:var(--ink-3)}

/* ── Tiến độ · bộ lọc · danh sách câu ─────────────────────── */
/* phần trên (bộ lọc, xáo trộn) đứng yên; chỉ danh sách câu cuộn */
.pbody{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.p-head{flex:none}
.p-list{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:4px 6px 16px}
.seg{
  position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding:4px;border-radius:14px;background:var(--fill);
}
.seg-ind{
  position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 4);
  border-radius:10px;background:var(--bg);
  box-shadow:0 1px 2px rgba(24,24,27,.06),0 2px 8px -2px rgba(24,24,27,.10);
  transition:translate .28s var(--ease);
}
/* trình duyệt hiểu linear() mới dùng lò xo (var() lỗi lúc tính thì cả transition mất, nên phải hỏi trước) */
@supports (transition-timing-function:linear(0,1)){.seg-ind{transition:translate .54s var(--spring)}}
.seg button{
  position:relative;z-index:1;min-height:60px;transition:transform .2s var(--ease-out);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  padding:6px 2px;border:0;border-radius:10px;background:transparent;
}
.seg button:active{transform:scale(.95);transition-duration:.1s}
.seg b{font-size:1.1875rem;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums}
.seg button>span{font-size:.75rem;color:var(--ink-2);white-space:nowrap;transition:color .2s ease}
.seg [data-v="wrong"] b{color:var(--bad)}
.seg [data-v="flag"] b{color:var(--flag)}
.seg [aria-checked="true"]>span{color:var(--ink);font-weight:500}
/* số lăn khi đổi (JS): chữ số đổi nằm trong ô riêng, số cũ (vẽ bằng ::after) trượt đi phía trên số mới */
.roll{position:relative;display:inline-block}
.roll>span{display:inline-block}
.roll::after{content:attr(data-was);position:absolute;left:0;top:0}

.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;font-size:.9375rem}
/* chỉ chạm đúng công tắc mới bật/tắt (như Cài đặt của iPhone), chạm vào chữ hay khoảng trống thì không;
   vùng chạm quanh công tắc vẫn đủ 44px */
.switch-hit{display:grid;place-items:center;margin:-8px -8px -8px 0;padding:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.switch input{
  -webkit-appearance:none;appearance:none;flex:none;position:relative;
  width:46px;height:28px;margin:0;border-radius:99px;background:var(--line-2);cursor:pointer;
  transition:background-color .2s ease;
}
.switch input::after{
  content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:11px;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s var(--ease),width .15s var(--ease-out);
}
.switch input:checked{background:var(--ink)}
.switch input:checked::after{transform:translateX(18px)}
/* giữ tay trên công tắc: núm giãn ra về phía sắp gạt tới, như công tắc của iOS */
.switch-hit:active input::after{width:28px}
.switch-hit:active input:checked::after{transform:translateX(12px)}

.map{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
.map.swap{animation:fade .24s var(--ease-out)}
@keyframes fade{from{opacity:0}}
.map button{
  position:relative;height:44px;padding:0;border:0;border-radius:10px;background:var(--fill);
  font-size:.875rem;color:var(--ink-2);font-variant-numeric:tabular-nums;
  transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s var(--ease-out);
}
.map button:active{transform:scale(.92);transition-duration:.1s}
.map .ok{background:var(--ok-bg);color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok-line)}
.map .no{background:var(--bad-bg);color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad-line)}
.map .flagged::after{
  content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--flag);
}
.map .now{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink);font-weight:600}
.map .now:not(.ok):not(.no){background:var(--ink);color:#fff}

/* Làm lại: bấm lần đầu thì ngay tại chỗ đó hiện hai nút Huỷ / Xoá (không dùng hộp thoại của trình duyệt).
   Hai lớp chồng lên nhau trong cùng một ô lưới nên đổi qua lại không làm xê dịch gì;
   lớp mới hiện ra (mờ → rõ, hơi phóng lên), lớp cũ tắt nhanh hơn. */
.danger{display:grid;margin-top:12px}
.danger>*{grid-area:1/1}
.reset,.ask button{display:block;width:100%;height:48px;border:0;border-radius:12px;font-size:.9375rem;font-weight:500}
.reset{background:transparent;color:var(--bad);transition:background-color .15s ease,opacity .15s var(--ease-out),visibility 0s}
.reset:active{background:var(--bad-bg)}
.ask{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px;
  opacity:0;visibility:hidden;transform:scale(.96);filter:blur(2px);
  transition:opacity .12s var(--ease-out),transform .12s var(--ease-out),filter .12s var(--ease-out),visibility 0s .12s;
}
.ask button{transition:background-color .15s ease,transform .2s var(--ease-out)}
.ask-no{background:var(--fill)}
.ask-yes{background:var(--bad);color:#fff}
.ask button:active{transform:scale(.97);transition-duration:.1s}
.danger.asking>.reset{opacity:0;visibility:hidden;transition:background-color .15s ease,opacity .1s var(--ease-out),visibility 0s .1s}
.danger.asking>.ask{
  opacity:1;visibility:visible;transform:none;filter:none;
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),filter .2s var(--ease-out),visibility 0s;
}

/* ── Bảng trượt từ dưới lên (điện thoại) ──────────────────── */
/* clip: không để autofocus cuộn khung dialog lúc bảng đang trượt */
.panel{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:clip;
}
.panel::backdrop{background:transparent}
/* Mở 420ms, đóng 360ms, cùng một đường cong: đóng thì đi ngay, không khựng ở đầu.
   Đích khi đóng thấp hơn mép màn hình 64px (đủ che cả bóng đổ): phần chạy nhanh của đường cong đã đưa
   bảng ra khỏi màn hình sau ~140ms, đoạn chậm dần ở cuối nằm ngoài tầm nhìn, nên mép bảng không còn
   bò chậm ở đáy rồi mới biến mất. Nền tối tắt cùng nhịp với bảng. */
.panel-dim{position:absolute;inset:0;background:rgba(24,24,27,.32);opacity:0;transition:opacity .26s var(--ease-out)}
.panel-in{
  position:absolute;left:0;right:0;bottom:0;
  height:86vh;height:86svh;max-height:100%;overflow:hidden;
  display:flex;flex-direction:column;
  padding:0 max(var(--gutter),env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));
  background:var(--bg);border-radius:24px 24px 0 0;
  /* bóng thứ hai là một tấm nền trắng dưới đáy: kéo bảng lên quá đà không lộ khe hở */
  box-shadow:0 -12px 40px -16px rgba(24,24,27,.28),0 80px 0 0 var(--bg);
  transform:translate3d(0,calc(100% + 64px),0);
  transition:transform .36s var(--ease-drawer);
}
.panel.shown .panel-dim{opacity:1;transition:opacity .42s ease}
.panel[open] .panel-in{will-change:transform}
.panel.shown .panel-in{transform:translate3d(0,0,0);transition:transform .42s var(--ease-drawer)}
/* hàng trên cùng của bảng chỉ có nút đóng */
.p-top{position:relative;flex:none;display:flex;justify-content:flex-end;margin:0 calc(-1 * var(--gutter) + 8px);padding:8px 0 4px}
#panel-slot{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.panel .switch{min-height:56px}
.grabber{position:absolute;top:8px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--line-2)}
@media (min-width:720px){.grabber{display:none}}

/* ── Màn hình báo lỗi ─────────────────────────────────────── */
.boot-error{max-width:420px;margin:96px auto;padding:0 var(--gutter);text-align:center}
/* chỉ dòng tiêu đề; chữ đậm trong câu (tên môn) vẫn nằm trên cùng dòng */
.boot-error>b{display:block;font-size:1.125rem;font-weight:600;margin-bottom:8px}
.boot-error p b{font-weight:600;color:var(--ink)}
.boot-error p{margin:0 0 24px;color:var(--ink-2);font-size:.9375rem;line-height:1.6}
.back-link{
  display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;
  background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:.9375rem;
}

.gate{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;overflow:auto;background:var(--bg);
  padding:calc(64px + env(safe-area-inset-top)) var(--gutter) 64px;animation:vt-in .2s var(--ease-out) both;
}
.gate-back{position:absolute;top:calc(6px + env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left))}
.gate-in{width:min(320px,100%);display:flex;flex-direction:column;align-items:center;text-align:center}
.gate-icon{width:44px;height:44px;padding:11px;margin-bottom:20px;border-radius:50%;background:var(--fill);color:var(--ink-2)}
.gate h1{margin:0;font-size:2rem;font-weight:600;line-height:1.15;letter-spacing:-.025em;overflow-wrap:anywhere}
.gate p{margin:4px 0 0;color:var(--ink-3);font-size:.9375rem}
.gate p:empty{display:none}
.gate input{
  width:100%;min-height:52px;margin-top:28px;padding:0 16px;border:1px solid var(--line-2);border-radius:14px;
  background:var(--bg);font-size:1rem;text-align:center;outline:none;transition:border-color .15s ease,box-shadow .15s ease;
}
.gate input:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--fill-2)}
.gate button{
  width:100%;min-height:52px;margin-top:10px;border:0;border-radius:999px;background:var(--ink);color:#fff;
  font-size:1rem;font-weight:600;transition:background-color .15s ease,opacity .15s ease,transform .2s var(--ease-out);
}
.gate button:active:not(:disabled){transform:scale(.985);transition-duration:.1s}
.gate button:disabled{opacity:.4}
.gate small{min-height:1.5em;margin-top:12px;color:var(--bad);font-size:.875rem}
.gate .otp{font-family:var(--mono);font-size:1.5rem;font-weight:500;letter-spacing:.35em;text-indent:.35em}
.gate .otp::placeholder{font-family:var(--sans);font-size:1rem;letter-spacing:0;text-indent:0}
.shake{animation:shake .32s var(--ease-out)}
@keyframes shake{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}90%{transform:translateX(1px)}}

.choice{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:3px;border-radius:12px;background:var(--fill)}
.choice button{
  min-height:40px;padding:0 8px;border:0;border-radius:9px;background:transparent;
  font-size:.9375rem;font-weight:500;color:var(--ink-2);white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.choice button[aria-checked="true"]{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(24,24,27,.1)}

/* ── Thông tin môn ────────────────────────────────────────── */
.about{
  width:min(400px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;
  margin:auto;padding:0;border:0;border-radius:var(--r-lg);
  background:var(--bg);color:inherit;box-shadow:0 24px 64px -24px rgba(24,24,27,.3);
  opacity:0;transform:scale(.96);
  transition:opacity .16s var(--ease-out),transform .16s var(--ease-out),overlay .16s allow-discrete,display .16s allow-discrete;
}
.about[open]{opacity:1;transform:none;transition-duration:.24s}
@starting-style{.about[open]{opacity:0;transform:scale(.96)}}
.about::backdrop{background:rgba(24,24,27,0);transition:background-color .2s ease,overlay .2s allow-discrete,display .2s allow-discrete}
.about[open]::backdrop{background:rgba(24,24,27,.32)}
@starting-style{.about[open]::backdrop{background:rgba(24,24,27,0)}}
.about-in{position:relative;padding:28px 24px 12px}
.about-x{position:absolute;top:10px;right:10px;color:var(--ink-3)}
.about h2{margin:0 48px 4px 0;font-size:1.75rem;font-weight:600;line-height:1.15;letter-spacing:-.025em;overflow-wrap:anywhere}
.about-name{margin:0;color:var(--ink-2);font-weight:500}
.about-desc{margin:8px 0 0;color:var(--ink-3);font-size:.9375rem;line-height:1.55}
.about dl{margin:20px 0 0;padding:0}
.about dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:.9375rem}
.about dt{color:var(--ink-3)}
.about dd{margin:0;font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere}

.own{margin:4px 0 0;padding:20px 0 4px;border-top:1px solid var(--line)}
.own-code{margin-top:16px;padding:16px 16px 0;border-radius:var(--r);background:var(--fill);overflow:hidden;text-align:center}
.code-num{
  display:block;width:100%;min-height:56px;border:0;background:transparent;border-radius:10px;
  font-family:var(--mono);font-size:2.25rem;font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums;
}
.code-num:empty::before{content:"··· ···";color:var(--ink-3)}
.code-bar{display:block;height:3px;margin:12px -16px 0;background:var(--line)}
.code-bar i{display:block;height:100%;background:var(--ink);transform-origin:0 0;transform:scaleX(0)}
.own-pass{display:flex;gap:8px;margin-top:16px}
.own-pass input{
  flex:1;min-width:0;min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:12px;
  background:var(--bg);font-size:1rem;outline:none;transition:border-color .15s ease;
}
.own-pass input:focus{border-color:var(--ink)}
.own-pass button{flex:none;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-weight:600}
.own-pass button:disabled{opacity:.4}
.own-actions{display:flex;flex-direction:column;align-items:flex-start;margin:12px -14px 0}
.text-btn.danger{color:var(--bad)}
.own-msg{margin:4px 0 12px;font-size:.875rem;color:var(--ink-2)}
.own-msg:empty{display:none}
.own-msg.bad{color:var(--bad)}

/* ── Trang Thêm môn ───────────────────────────────────────── */
.add .bar-in{max-width:616px;padding:0}
@media (max-width:655px){.add .bar-in{padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}}
.form{
  width:min(600px,100% - 2*var(--gutter));margin:0 auto;
  padding:24px 0 calc(64px + env(safe-area-inset-bottom));
}
.form h1{margin:12px 0 32px;font-size:clamp(2rem,1.6rem + 1.6vw,2.75rem);font-weight:600;line-height:1.1;letter-spacing:-.03em}
.step{padding:28px 0 32px;border-top:1px solid var(--line)}
.step h2{display:flex;align-items:baseline;gap:12px;margin:0 0 20px;font-size:1.1875rem;font-weight:600;letter-spacing:-.01em}
.step h2 span{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--ink-3);letter-spacing:0}
.row{display:grid;gap:12px}
@media (min-width:520px){.row{grid-template-columns:160px minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span{font-size:.8125rem;font-weight:500;color:var(--ink-2)}
.field input,.paste{
  width:100%;min-height:48px;padding:0 14px;border:1px solid var(--line-2);border-radius:12px;
  background:var(--bg);font-size:1rem;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field input::placeholder,.paste::placeholder{color:#A1A1AA}
.field input:focus,.paste:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--fill-2)}
.code-field input{font-family:var(--mono);text-transform:uppercase}
.code-field input::placeholder{text-transform:none}

.prompt{position:relative;margin-top:16px;border-radius:var(--r);background:var(--fill)}
.prompt pre{
  margin:0;max-height:208px;overflow:auto;overscroll-behavior:contain;padding:16px 16px 64px;
  font-family:var(--mono);font-size:.8125rem;line-height:1.65;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;
  outline:none;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.copy{
  position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 16px 0 14px;border:0;border-radius:999px;background:var(--ink);color:#fff;
  font-size:.9375rem;font-weight:600;
  transition:background-color .15s ease,transform .2s var(--ease-out);
}
.copy:active{transform:scale(.96);transition-duration:.1s}
.copy.done{background:var(--ok)}
.hint{margin:12px 0 0;color:var(--ink-3);font-size:.875rem;line-height:1.55;text-wrap:pretty}
.hint code{font-family:var(--mono);font-size:.875em}

.drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:152px;padding:24px;
  border:1.5px dashed var(--line-2);border-radius:var(--r);text-align:center;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.drop svg{margin-bottom:8px;color:var(--ink-3)}
.drop b{font-weight:600}
.drop span{color:var(--ink-3);font-size:.875rem}
.drop.over,.drop:has(input:focus-visible){border-color:var(--ink);background:var(--fill)}
.drop:active{background:var(--fill)}
.picked{display:flex;align-items:center;gap:16px;padding:20px 20px 20px 24px;border-radius:var(--r);background:var(--fill)}
.picked-main{flex:1;min-width:0;display:flex;flex-direction:column}
.picked-main b{font-size:1.5rem;font-weight:600;line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
.picked-main span{color:var(--ink-2);overflow-wrap:anywhere}
.picked-main small{margin-top:6px;font-family:var(--mono);font-size:.8125rem;color:var(--ink-3)}
.text-btn{
  flex:none;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:transparent;
  font-size:.9375rem;font-weight:500;color:var(--ink-2);transition:background-color .15s ease;
}
.text-btn:active{background:var(--fill-2)}
.paste-toggle{margin:8px 0 0 -14px}
.paste{display:block;min-height:144px;margin-top:4px;padding:12px 14px;resize:vertical;font-family:var(--mono);font-size:.8125rem;line-height:1.6}
.msg{margin:12px 0 0;font-size:.875rem;line-height:1.55}
.msg:empty{display:none}
.msg.bad{color:var(--bad)}
.msg.warn{color:var(--flag)}

.form .choice{margin-top:2px}
.step>.field+.field{margin-top:16px}
.submit{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:16px;
  border:0;border-radius:999px;background:var(--ink);color:#fff;font-size:1rem;font-weight:600;
  transition:background-color .15s ease,opacity .15s ease,transform .2s var(--ease-out);
}
.submit:active:not(:disabled){transform:scale(.985);transition-duration:.1s}
.submit:disabled{opacity:.3}

/* ── Công thức toán (KaTeX) ───────────────────────────────── */
.katex{font-size:1.04em}
.qtext .katex-display,.exp .katex-display{margin:14px 0;overflow-x:auto;overflow-y:hidden;padding:2px 0}
.opt .txt .katex{font-size:1em}
/* công thức cao ở các dòng liền nhau: chừa khe cho khỏi dính */
.q.math .katex .base{margin:4px 0}
/* công thức dài cuộn trong khung, không kéo rộng cả trang */
.math-scroll{display:block;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:3px 0;overscroll-behavior-x:contain}

/* ── Chỉ trên máy có chuột ────────────────────────────────── */
@media (hover:hover) and (pointer:fine){
  .course:hover{background:var(--fill-2)}
  .course:hover svg{color:var(--ink);transform:translateX(3px)}
  .back:hover,.icon-btn:hover,.retry:hover{background:var(--fill)}
  .retry:hover{background:var(--bg);color:var(--ink)}
  .picker:hover,.chapter-option:hover:not(:disabled):not([aria-selected="true"]){background:var(--fill-2)}
  .opt:hover:not(:disabled){border-color:var(--ink-3)}
  .opt:hover:not(:disabled):not(.picked) .key{background:var(--fill-2);color:var(--ink)}
  .dock .nav:hover:not(:disabled),.go:hover:not(:disabled):not(.solid){background:var(--fill-2)}
  .go.solid:hover:not(:disabled){background:#3F3F46}
  .count:hover:not(:disabled){background:var(--fill)}
  .map button:hover:not(.now){box-shadow:inset 0 0 0 1px var(--ink-3)}
  .reset:hover{background:var(--bad-bg)}
  .ask-no:hover,.side .ask-no:hover{background:var(--fill-2)}
  .ask-yes:hover{background:#991B1B}
  .back-link:hover{background:#3F3F46}
  .add-course:hover{background:var(--fill);box-shadow:inset 0 0 0 1px var(--line-2)}
  .add-course:hover svg{transform:none}
  .copy:hover:not(.done),.submit:hover:not(:disabled),.gate button:hover:not(:disabled){background:#3F3F46}
  .text-btn:hover{background:var(--fill)}
  .text-btn.danger:hover{background:var(--bad-bg)}
  .choice button:hover:not([aria-checked="true"]){color:var(--ink)}
  .code-num:hover{background:var(--fill-2)}
  .drop:hover{border-color:var(--ink-3)}
}

/* ── Điện thoại, máy tính bảng: thanh dưới luôn ở đáy ─────── */
@media (max-width:1023px){
  .quiz{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
  .layout{flex:1 0 auto;display:flex;flex-direction:column}
  .main{flex:1 0 auto;display:flex;flex-direction:column}
  .stage{flex:1 0 auto}
}
@media (min-width:600px){
  .opts.short{grid-template-columns:1fr 1fr}
}
/* máy tính bảng: bảng tiến độ là hộp thoại giữa màn hình */
@media (min-width:720px){
  .panel-in{
    left:50%;right:auto;bottom:auto;top:50%;width:480px;height:min(640px,84vh);max-height:84vh;border-radius:24px;
    box-shadow:0 24px 64px -24px rgba(24,24,27,.3);
    opacity:0;transform:translate(-50%,-50%) scale(.96);
    transition:transform .16s var(--ease-out),opacity .16s var(--ease-out);
  }
  .panel.shown .panel-in{opacity:1;transform:translate(-50%,-50%);transition:transform .3s var(--ease-out),opacity .2s var(--ease-out)}
}

/* ── Máy tính: câu hỏi bên trái, tiến độ bên phải ─────────── */
@media (min-width:1024px){
  :root{--bar:64px}
  .bar-in{max-width:var(--wrap);padding:0 32px}
  .layout{
    max-width:var(--wrap);padding:0 32px;
    display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start;
  }
  /* cột câu hỏi cao ít nhất bằng màn hình để thanh dưới luôn nằm ở đáy, câu ngắn hay dài cũng vậy */
  .main{
    max-width:760px;display:flex;flex-direction:column;
    min-height:calc(100vh - var(--bar) - 3px);min-height:calc(100svh - var(--bar) - 3px);
  }
  .stage{flex:1 0 auto;padding:48px 0 32px}
  .opt .txt{font-size:1.125rem}
  /* thanh dưới: cùng kiểu thanh kính nổi như điện thoại, đứng yên ở đáy màn hình, gọn ở giữa cột câu hỏi;
     đáy thanh thẳng hàng với đáy cột tiến độ bên phải (cách mép dưới 32px) */
  .dock{padding:12px 0 32px}
  .dock-in{max-width:400px}
  /* cột tiến độ đứng yên: đỉnh ngang dòng đầu câu hỏi (48px dưới thanh trên), đáy ngang đáy thanh dưới
     (32px trên mép màn hình); vị trí dính trùng vị trí ban đầu nên cuộn trang không làm nó nhích */
  .side{
    display:flex;flex-direction:column;position:sticky;top:calc(var(--bar) + 3px + 48px);
    max-height:calc(100vh - var(--bar) - 3px - 80px);overflow:hidden;
    margin-top:48px;border-radius:var(--r-lg);background:var(--fill);
  }
  .side .p-head{padding:20px 20px 4px}
  .side .p-list{margin:0;padding:6px 20px 20px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
  .side .seg{background:var(--fill-2)}
  .side .map button{background:var(--bg)}
  .side .map .ok{background:var(--ok-bg)}
  .side .map .no{background:var(--bad-bg)}
  .side .map .now:not(.ok):not(.no){background:var(--ink)}
  .side .switch{min-height:52px}
  .side .ask-no{background:var(--bg)}
  #open-panel{display:none}
  .count{pointer-events:none}
  .count svg{display:none}
}

@media (max-width:359px){
  :root{--gutter:16px}
  .bar-in{gap:0;padding-left:4px;padding-right:4px}
  .back{font-size:1rem;padding-right:6px}
  .picker{font-size:.875rem;padding:0 8px 0 12px}
  .opt{gap:10px;padding:14px 12px}
}

/* Giảm chuyển động: bỏ mọi dịch chuyển, co giãn; giữ lại mờ dần và đổi màu vì chúng giúp hiểu chuyện gì vừa xảy ra */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;
    transition-property:color,background-color,border-color,box-shadow,opacity !important;
  }
  :active{transform:none !important}
  ::view-transition-group(*){animation:none !important}
  ::view-transition-old(*){animation:.15s ease both vt-out !important}
  ::view-transition-new(*){animation:.15s ease both vt-in !important}
}
@media (prefers-reduced-motion:reduce) and (max-width:719px){
  .panel-in{opacity:0;transform:none;transition:opacity .2s ease}
  .panel.shown .panel-in{opacity:1;transform:none;transition:opacity .2s ease}
}