/* ==========================================================================
   TIAD Student Web — page-specific pieces (workspace)
   Everything else comes from shared/css/ui.css
   ========================================================================== */

/* ---------- Journey panel (dashboard right column) ---------- */
.journey { text-align: center; padding: 34px 36px 38px; }
.journey .card-h { text-align: left; margin-bottom: 30px; }
.journey-hello { font-size: var(--fs-xl); font-weight: 400; margin-top: 26px; }
.journey-sub { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 4px; }
.journey-sec { font-size: var(--fs-lg); font-weight: 400; margin-bottom: 18px; }

/* ---------- Lesson player ---------- */
.player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0E0E0E;
  color: #fff;
}
.player video, .player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player-poster { position: absolute; inset: 0; }
.player-poster .cb { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.player-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0,0,0,.55)); }
.player-play, .player-bar { z-index: 2; }
.player-board svg { width: 70%; height: 70%; opacity: .5; }
.player-formula { position: absolute; left: 40px; top: 36px; font-size: 18px; opacity: .85; }
.player-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s var(--ease);
}
.player-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.player-bar { position: absolute; left: 28px; right: 28px; bottom: 24px; display: flex; align-items: center; gap: 18px; font-size: var(--fs-sm); }
.player-track { flex: 1; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .25); }
.player-track i { display: block; height: 100%; width: 32%; border-radius: inherit; background: var(--accent); }

.lesson-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 30px 0 4px; }
.lesson-title { font-size: clamp(22px, 1.8vw, 28px); font-weight: 400; letter-spacing: -0.02em; }
.lesson-meta { color: var(--ink-3); margin-top: 6px; }
.prose { color: var(--ink-2); line-height: 1.75; }
.formula { background: var(--page); border-radius: var(--r-md); padding: 20px 24px; margin-top: 20px; }

/* PDF view */
.doc {
  position: relative;
  background: var(--page);
  border-radius: var(--r-lg);
  padding: 28px;
  overflow: hidden;
}
.doc-page { position: relative; z-index: 1; background: var(--surface); border-radius: var(--r-md); padding: 40px 44px; min-height: 360px; }
.doc-mark {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  transform: rotate(-16deg);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  opacity: .05;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

/* Chapters */
.chap { border-radius: var(--r-md); overflow: hidden; }
.chap + .chap { margin-top: 10px; }
.chap-h {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--page);
  text-align: left;
  font-weight: 400;
}
.chap-n {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.chap.done .chap-n { background: var(--ok-50); color: var(--ok); }
.chap.open .chap-h { background: var(--sky); color: #fff; }
.chap.open .chap-n { color: var(--sky-600); }
.chap.lock .chap-h { color: var(--ink-3); }
.chap-h .ellipsis { flex: 1; }
.chap-list { padding: 8px 4px 4px; }
.les {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.les:hover { background: var(--tile-2); }
.les.on { background: var(--sky-50); color: var(--ink); font-weight: 400; }
.les-ck { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; }
.les.done .les-ck { background: var(--ok); border-color: var(--ok); color: #fff; }
.les .ellipsis { flex: 1; }

/* Comments */
.cmt-box { display: flex; align-items: center; gap: 14px; background: var(--page); border-radius: var(--r-pill); padding: 6px 6px 6px 8px; }
.cmt-box input { flex: 1; min-width: 0; }
.cmt { display: flex; gap: 14px; padding: 22px 0; border-top: 1px solid var(--line); }
.cmt-b { flex: 1; min-width: 0; }
.cmt-name { font-weight: 400; }
.cmt-time { color: var(--ink-3); font-size: var(--fs-sm); }
.cmt-text { margin-top: 6px; color: var(--ink-2); }
.cmt-reply { margin-top: 14px; background: var(--page); border-radius: var(--r-md); padding: 16px 18px; }

/* ---------- Exam ---------- */
.exam-card { display: flex; flex-direction: column; gap: 18px; }
.exam-meta { display: flex; gap: 22px; color: var(--ink-3); font-size: var(--fs-sm); flex-wrap: wrap; }
.exam-meta span { display: inline-flex; align-items: center; gap: 6px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.steps i { height: 6px; border-radius: 99px; background: var(--tile); }
.steps i.on { background: var(--accent); }

.runner-top { display: flex; align-items: center; gap: 16px; background: var(--surface); border-radius: var(--r-lg); padding: 16px 16px 16px 24px; margin-bottom: 24px; }
.runner-top .grow { flex: 1; min-width: 0; }
.timer { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: var(--r-pill); background: var(--accent-50); color: var(--accent-ink); font-weight: 500; font-variant-numeric: tabular-nums; }

.q-stem { font-size: var(--fs-lg); line-height: 1.75; margin: 22px 0 28px; }
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.opt {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--surface);
  text-align: left;
  transition: border-color .2s, background .2s;
}
.opt:hover { border-color: var(--ink-4); }
.opt.on { border-color: var(--accent-ink); background: var(--accent-50); }
.opt-k { width: 36px; height: 36px; border-radius: 50%; background: var(--page); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; flex-shrink: 0; }
.opt.on .opt-k { background: var(--accent); color: var(--ink); }

.ds-row { flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; border-radius: var(--r-md); border: 1px solid var(--line-2); }
.ds-row + .ds-row { margin-top: 10px; }
.seg { display: inline-flex; background: var(--page); border-radius: var(--r-pill); padding: 4px; flex-shrink: 0; }
.seg button { height: 36px; padding: 0 18px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 400; color: var(--ink-2); }
.seg button.on { background: var(--ink); color: #fff; }

.palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.palette button {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--page);
  font-weight: 400;
  font-size: var(--fs-sm);
}
.palette button.ans { background: var(--sky-50); color: var(--sky-600); }
.palette button.cur { background: var(--ink); color: #fff; }
.palette button.flag::after { content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 18px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 4px; background: var(--page); }

.cert { border-radius: var(--r-lg); background: var(--page); padding: 40px; text-align: center; }
.cert-brand { color: var(--accent-ink); display: flex; justify-content: center; }
.cert-brand svg { height: 40px; width: auto; }

/* ---------- Chat ---------- */
.chat { display: grid; grid-template-columns: 340px minmax(0, 1fr) 300px; gap: 24px; height: calc(100vh - 230px); min-height: 560px; }
.chat > .card { display: flex; flex-direction: column; min-height: 0; padding: 24px; }
.grp { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r-md); text-align: left; width: 100%; }
.grp:hover { background: var(--tile-2); }
.grp.on { background: var(--page); }
.grp .grow { flex: 1; min-width: 0; }
.grp-n { font-weight: 400; font-size: var(--fs-sm); }
.grp-m { color: var(--ink-3); font-size: var(--fs-xs); }
.unread { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; }
.scroll { overflow-y: auto; min-height: 0; flex: 1; }
.msgs { display: flex; flex-direction: column; gap: 22px; padding: 8px 4px 8px 0; }
.msg { display: flex; gap: 12px; max-width: 78%; }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.bubble { background: var(--page); border-radius: 6px 20px 20px 20px; padding: 14px 18px; color: var(--ink-2); }
.msg.me .bubble { background: var(--sky); color: #fff; border-radius: 20px 6px 20px 20px; }
.msg-name { font-size: var(--fs-sm); font-weight: 400; margin-bottom: 6px; }
.msg.me .msg-name { text-align: right; }
.msg-time { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 6px; }
.msg.me .msg-time { text-align: right; }
.quote { border-left: 2px solid var(--accent); padding: 4px 0 4px 12px; margin-bottom: 10px; font-size: var(--fs-sm); color: var(--ink-3); }
.msg-img { margin-top: 12px; border-radius: 14px; overflow: hidden; max-height: 200px; }
.composer { display: flex; align-items: center; gap: 10px; background: var(--page); border-radius: var(--r-pill); padding: 6px 6px 6px 18px; margin-top: 16px; }
.composer input { flex: 1; min-width: 0; }

.friend { background: var(--surface); border-radius: var(--r-lg); padding: 28px 22px 22px; text-align: center; }
.friend .av { margin: 0 auto; }

/* ---------- Schedule ---------- */
.day { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 26px 0; border-top: 1px solid var(--line); }
.day:first-child { border-top: none; padding-top: 0; }
.day-d { font-size: 36px; font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
.day-w { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 6px; }

/* Heatmap */
.heat { display: grid; grid-template-columns: repeat(26, 1fr); gap: 5px; }
.heat i { aspect-ratio: 1; border-radius: 4px; background: var(--tile); }
.heat i.l1 { background: #CDF5CD; }
.heat i.l2 { background: #8BE88B; }
.heat i.l3 { background: #3FCB3F; }
.heat i.l4 { background: var(--accent); }

@media (max-width: 1280px) {
  .chat { grid-template-columns: 300px minmax(0, 1fr); }
  .chat > .card:last-child { display: none; }
}
@media (max-width: 900px) {
  .chat { grid-template-columns: 1fr; height: auto; }
  .chat > .card:first-child { display: none; }
  .opts { grid-template-columns: 1fr; }
  .day { grid-template-columns: 1fr; gap: 12px; }
}
.player-poster .cb-text { bottom: 22%; } .player-poster .cb-name { bottom: 18%; }

/* =========================================================
   My courses + lesson page (v2)
   ========================================================= */
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.mc { display: flex; flex-direction: column; background: var(--surface); border-radius: 24px; padding: 10px; cursor: pointer; transition: transform .6s var(--ease); }
.mc:hover { transform: translateY(-3px); }
.mc-art { border-radius: 18px; overflow: hidden; }
.mc-art .cb { border-radius: 18px; width: 100%; }
.mc-b { display: flex; flex-direction: column; padding: 18px 12px 8px; min-width: 0; flex: 1; }
.mc-t { font-size: 18px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 48px; }
.mc-s { color: var(--ink-3); font-size: 12.5px; margin-top: 6px; }
.mc-p { display: flex; align-items: baseline; justify-content: space-between; margin-top: 22px; }
.mc-pc { font-size: 46px; font-weight: 300; letter-spacing: -0.05em; line-height: 1; }
.mc-pc small { font-size: 18px; color: var(--ink-3); letter-spacing: 0; margin-left: 2px; }
.mc-pn { font-size: 12.5px; color: var(--ink-3); }
.mc-bar { height: 8px; border-radius: 99px; background: #fff; margin-top: 12px; overflow: hidden; }
.mc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .8s var(--ease); }
.mc-next { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 10px 10px 10px 16px; border-radius: 16px; background: #fff; }
.mc-nx { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.mc-nx small { font-size: 11.5px; color: var(--ink-3); }
.mc .circle-go { background: var(--ink); color: #fff; }
.mc:hover .circle-go { transform: rotate(-45deg); background: var(--accent); color: var(--ink); }

.lp-top { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.lp-back { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .3s, color .3s, transform .4s var(--ease); }
.lp-back:hover { background: var(--ink); color: #fff; transform: translateX(-3px); }
.lp-crumb { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lp-crumb b { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.lp-crumb span { color: var(--ink-3); font-size: var(--fs-sm); }
.lp-cprog { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 99px; padding: 10px 18px; font-size: var(--fs-sm); color: var(--ink-3); flex-shrink: 0; }
.lp-cprog b { color: var(--ink); font-weight: 500; }
.lp-cprog .bar { width: 120px; }

.lp { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.lp-main { min-width: 0; }
.player-resume { position: absolute; left: 28px; bottom: 60px; z-index: 2; background: rgba(255, 255, 255, .18); backdrop-filter: blur(8px); padding: 6px 14px; border-radius: 99px; font-size: 13px; font-weight: 400; }

.lp-head { margin: 28px 0 24px; }
.lp-sub { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.lp-title { font-size: clamp(22px, 1.9vw, 30px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.25; margin: 0; }
.lp-meta { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: var(--fs-sm); flex-wrap: wrap; }
.lp-acts { display: flex; gap: 10px; flex-shrink: 0; }
.st-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 99px; background: var(--primary-50); color: var(--primary); font-weight: 500; font-size: 13px; }
.st-chip.done { background: var(--ok-50); color: var(--ok); }
.st-chip.new { background: var(--tile); color: var(--ink-2); }
.mini-ring { flex-shrink: 0; }

.lp-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.lp-card { background: var(--surface); border-radius: 28px; padding: 26px; min-width: 0; }
.lp-card-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.lp-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 10px; color: var(--ink-3); font-size: var(--fs-sm); text-align: center; }

.dg + .dg { margin-top: 14px; }
.dg-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px 4px; }
.dg-h i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.doc-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px 10px 10px; border-radius: 18px; text-align: left; transition: background .25s; }
.doc-row:hover { background: var(--tile-2); }
.doc-ic { position: relative; width: 46px; height: 52px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-ic em { position: absolute; bottom: -4px; right: -6px; font-style: normal; font-size: 9px; font-weight: 300; letter-spacing: .04em; background: var(--c); color: #fff; padding: 2px 5px; border-radius: 6px; }
.doc-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.doc-t b { font-weight: 500; font-size: 15px; }
.doc-t span { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.doc-go { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); transition: background .3s, color .3s; flex-shrink: 0; }
.doc-row:hover .doc-go { background: var(--ink); color: #fff; }

.lp-quiz { position: relative; overflow: hidden; background: var(--primary); color: #fff; display: flex; flex-direction: column; isolation: isolate; }
.lp-quiz::before { content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; border-radius: 50%; right: -110px; top: -140px; background: radial-gradient(circle, rgba(91, 225, 91, .7), transparent 65%); }
.lp-quiz.off { background: var(--surface); color: var(--ink); }
.lp-quiz.off::before { display: none; }
.lp-quiz-top { display: flex; justify-content: space-between; align-items: flex-start; }
.lp-quiz-ic { width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .16); display: inline-flex; align-items: center; justify-content: center; }
.lp-best { display: flex; flex-direction: column; align-items: flex-end; font-size: 34px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.lp-best small { font-size: 12px; font-weight: 400; opacity: .7; letter-spacing: 0; margin-bottom: 4px; }
.lp-best.ok { color: var(--accent); }
.lp-quiz-t { font-size: 24px; font-weight: 500; letter-spacing: -0.03em; margin-top: 22px; line-height: 1.2; }
.lp-quiz-f { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; opacity: .8; }
.lp-quiz-f span + span::before { content: "·"; margin-right: 14px; }
.lp-quiz-left { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; font-size: 13px; opacity: .9; }
.lp-quiz-left .bar { flex: 1; background: rgba(255, 255, 255, .2); }
.lp-quiz-left .bar i { background: var(--surface); }
.lp-quiz-a { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.lp-quiz-a .btn-white { flex: 1; justify-content: center; }
.lp-ghost { background: rgba(255, 255, 255, .14); color: #fff; }
.lp-ghost:hover { background: rgba(255, 255, 255, .24); }

.lp-ov { background: var(--surface); border-radius: 28px; padding: 28px; margin-top: 20px; }

/* side: outline + Q&A */
.lp-side { position: sticky; top: 24px; background: var(--surface); border-radius: 28px; padding: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 48px); min-height: 520px; }
.lp-side .seg { display: flex; width: 100%; margin-bottom: 12px; }
.lp-side .seg button { flex: 1; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.seg-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--ink); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.lp-outline { overflow-y: auto; overscroll-behavior: contain; position: relative; padding: 2px 4px 6px; margin: 0 -4px; }
.chap-tt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chap-tt small { font-size: 12px; font-weight: 400; opacity: .65; margin-top: 2px; }
.les-st { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary); }
.les.done .les-st { background: var(--ok); color: #fff; }
.les-tt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.les-tt small { color: var(--ink-3); font-size: 12px; margin-top: 3px; font-weight: 400; }

.lp-qa { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.lp-cmts { flex: 1; overflow-y: auto; overscroll-behavior: contain; position: relative; padding: 4px 6px; margin: 0 -6px; min-height: 200px; }
.cm { display: flex; gap: 12px; padding: 14px 0; }
.cm + .cm { border-top: 1px solid var(--line); }
.cm-b { flex: 1; min-width: 0; }
.cm-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }
.cm-h b { color: var(--ink); font-weight: 500; font-size: 14px; }
.cm-ts { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 99px; background: var(--primary-50); color: var(--primary); font-size: 12px; font-weight: 500; }
.cm-ts:hover { background: var(--primary); color: #fff; }
.cm-tag { height: 20px; padding: 0 8px; border-radius: 99px; background: var(--accent-50); color: var(--accent-ink); font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; }
.cm-t { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--ink-2); word-wrap: break-word; }
.cm-r { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--page); }
.cm-imgs { display: grid; gap: 6px; margin-top: 10px; }
.cm-imgs.n1 { grid-template-columns: minmax(0, 240px); }
.cm-imgs.n2 { grid-template-columns: repeat(2, 1fr); }
.cm-imgs.n3 { grid-template-columns: repeat(3, 1fr); }
.cm-imgs button { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--tile); }
.cm-imgs img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.cm-imgs button:hover img { transform: scale(1.04); }

.cmp { border-top: 1px solid var(--line); padding: 12px 4px 2px; }
.cmp-prev { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-prev:not(:empty) { margin-bottom: 10px; }
.cmp-im { position: relative; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--tile); }
.cmp-im img { width: 100%; height: 100%; object-fit: cover; }
.cmp-im.up img { opacity: .45; }
.cmp-im.up::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--primary); border-top-color: transparent; animation: spin .8s linear infinite; }
.cmp-im button { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.cmp-box { display: flex; gap: 10px; align-items: flex-start; background: var(--page); border-radius: 20px; padding: 10px 12px; }
.cmp-box textarea { flex: 1; border: 0; background: transparent; resize: none; font: inherit; font-size: 14px; line-height: 1.5; padding: 5px 0; outline: none; min-height: 32px; color: var(--ink); }
.cmp-bar { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.cmp-b { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); cursor: pointer; transition: background .25s; }
.cmp-b:hover { background: var(--tile); }
.cmp-stamp { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); background: var(--page); }
.cmp-stamp.on { background: var(--primary-50); color: var(--primary); }
.cmp-send { margin-left: auto; }

.lb-bg { position: fixed; inset: 0; z-index: 9000; background: rgba(10, 10, 10, .86); display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; transition: opacity .25s; cursor: zoom-out; }
.lb-bg.in { opacity: 1; }
.lb-bg img { max-width: 100%; max-height: 100%; border-radius: 16px; box-shadow: 0 40px 80px rgba(0, 0, 0, .5); }
.lb-bg .pv-x { position: absolute; top: 20px; right: 20px; }

/* =========================================================
   Quiz runner
   ========================================================= */
.qz-bg { position: fixed; inset: 0; z-index: 8000; background: rgba(0, 0, 0, .55);  display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .3s; }
.qz-bg.in { opacity: 1; }
.qz { width: min(1180px, 100%); height: min(860px, 100%); background: var(--page); border-radius: 36px; display: flex; flex-direction: column; overflow: hidden; transform: translateY(24px) scale(.98); transition: transform .45s var(--ease); }
.qz-bg.in .qz { transform: none; }
.qz.is-result, .qz.is-history { width: min(760px, 100%); height: auto; max-height: 100%; }
.qz-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px 18px 22px; background: var(--surface); }
.qz-ht { display: flex; align-items: center; gap: 14px; min-width: 0; }
.qz-ht > div { display: flex; flex-direction: column; min-width: 0; }
.qz-ht b { font-weight: 500; font-size: 16px; }
.qz-ht span { color: var(--ink-3); font-size: 13px; }
.qz-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--primary-50); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qz-timer { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 99px; background: var(--ink); color: #fff; font-variant-numeric: tabular-nums; }
.qz-timer b { font-size: 17px; font-weight: 500; letter-spacing: .02em; }
.qz-timer.low { background: var(--accent); animation: qzPulse 1s infinite; }
@keyframes qzPulse { 50% { opacity: .7; } }
.qz-run { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; padding: 20px; min-height: 0; }
.qz-q { background: var(--surface); border-radius: 28px; padding: 34px 38px; display: flex; flex-direction: column; overflow-y: auto; }
.qz-qh { display: flex; align-items: center; gap: 12px; }
.qz-no { font-size: 15px; font-weight: 500; color: var(--primary); }
.qz-no small { color: var(--ink-4); font-weight: 500; }
.qz-lv { height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; background: var(--tile); color: var(--ink-2); }
.qz-lv.lv-V { background: var(--accent-50); color: var(--accent-ink); }
.qz-lv.lv-C { background: #F2F2F2; color: #3D3D3D; }
.qz-lv.lv-N { background: var(--ok-50); color: var(--ok); }
.qz-stem { font-size: 19px; line-height: 1.7; margin: 18px 0 26px; letter-spacing: -0.005em; }
.qz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qz-opt { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 20px; border: 1.5px solid var(--line); background: var(--surface); text-align: left; font-size: 16px; transition: border-color .2s, background .2s, transform .2s; }
button.qz-opt:hover { border-color: var(--primary); transform: translateY(-2px); }
.qz-l { width: 38px; height: 38px; border-radius: 12px; background: var(--page); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; flex-shrink: 0; transition: background .2s, color .2s; }
.qz-t { min-width: 0; }
.qz-opt.on { border-color: var(--primary); background: var(--primary-50); }
.qz-opt.on .qz-l { background: var(--primary); color: #fff; }
.qz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 28px; }
.qz-rail { background: var(--surface); border-radius: 28px; padding: 26px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.qz-prog b { font-size: 34px; font-weight: 300; letter-spacing: -0.04em; }
.qz-prog span { color: var(--ink-3); font-size: 14px; }
.qz-pal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 6px; }
.qz-pal button { aspect-ratio: 1; border-radius: 12px; background: var(--page); font-weight: 500; font-size: 14px; color: var(--ink-2); transition: background .2s, color .2s; }
.qz-pal button.ans { background: var(--primary); color: #fff; }
.qz-pal button.cur { box-shadow: 0 0 0 2px var(--ink); }
.qz-keys { margin-top: auto; font-size: 12.5px; color: var(--ink-3); line-height: 1.9; }
.qz-keys kbd { font: inherit; font-weight: 500; background: var(--page); border-radius: 6px; padding: 1px 7px; color: var(--ink-2); }

.qz-res { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 40px 32px 44px; }
.qz-ring { position: relative; width: 200px; height: 200px; }
.qz-ring svg { width: 100%; height: 100%; }
.qz-ring-in { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 70px; gap: 4px; }
.qz-score { font-size: 56px; font-weight: 300; letter-spacing: -0.05em; line-height: 1; }
.qz-of { color: var(--ink-3); font-size: 16px; }
.qz-badge { height: 34px; padding: 0 16px; border-radius: 99px; font-weight: 500; display: inline-flex; align-items: center; }
.qz-badge.ok { background: var(--ok-50); color: var(--ok); }
.qz-badge.no { background: var(--accent-50); color: var(--accent-ink); }
.qz-facts, .qz-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 520px; margin: 6px 0 10px; }
.qz-facts div, .qz-sum div { background: var(--surface); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; align-items: center; }
.qz-facts b, .qz-sum b { font-size: 24px; font-weight: 500; letter-spacing: -0.03em; }
.qz-sum b small { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.qz-facts span, .qz-sum span { color: var(--ink-3); font-size: 13px; }
.qz-body { flex: 1; overflow-y: auto; padding: 24px; }
.qz-sum { max-width: none; margin: 0 0 18px; }
.qz-hist { display: flex; flex-direction: column; gap: 8px; }
.qz-hr { display: flex; align-items: center; gap: 14px; background: var(--surface); border-radius: 20px; padding: 12px 16px 12px 12px; text-align: left; transition: transform .3s var(--ease), box-shadow .3s; color: var(--ink-3); }
.qz-hr:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.qz-hn { width: 42px; height: 42px; border-radius: 14px; background: var(--page); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; flex-shrink: 0; }
.qz-hd { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.qz-hd b { color: var(--ink); font-weight: 500; font-size: 15px; }
.qz-hd span { font-size: 12.5px; }
.qz-hs { font-size: 22px; font-weight: 300; letter-spacing: -0.03em; }
.qz-hs.ok { color: var(--ok); }
.qz-hs.no { color: var(--accent-ink); }
.qz-out { text-align: center; color: var(--ink-3); margin-top: 22px; }
.qz-rv { display: flex; flex-direction: column; gap: 14px; }
.qz-rq { background: var(--surface); border-radius: 24px; padding: 26px 28px; border-left: 5px solid var(--ok); }
.qz-rq.no { border-left-color: var(--accent-ink); }
.qz-rq .qz-stem { font-size: 16px; margin: 12px 0 16px; }
.qz-rq .qz-opt { font-size: 14.5px; padding: 10px 14px 10px 10px; }
.qz-rq .qz-l { width: 30px; height: 30px; border-radius: 10px; }
.qz-mark { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--ok); }
.qz-rq.no .qz-mark { color: var(--accent-ink); }
.qz-opt.right { border-color: var(--ok); background: var(--ok-50); }
.qz-opt.right .qz-l { background: var(--ok); color: #fff; }
.qz-opt.wrong { border-color: var(--accent-ink); background: var(--accent-50); }
.qz-opt.wrong .qz-l { background: var(--accent); color: var(--ink); }
.qz-sol { margin-top: 16px; padding: 14px 18px; border-radius: 16px; background: var(--page); font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.qz-sol b { color: var(--primary); margin-right: 6px; }

@media (max-width: 1280px) {
  .lp { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 1100px) {
  .lp { grid-template-columns: 1fr; }
  .lp-side { position: static; max-height: 640px; }
}
@media (max-width: 760px) {
  .lp-row { grid-template-columns: 1fr; }
  .lp-acts { flex-wrap: wrap; width: 100%; }
  .lp-acts .btn { flex: 1; justify-content: center; }
  .lp-card, .lp-ov { padding: 20px; }
  .lp-cprog .bar, .lp-cprog > span { display: none; }
  .qz-bg { padding: 0; }
  .qz { border-radius: 0; height: 100%; }
  .qz-run { grid-template-columns: 1fr; padding: 12px; overflow-y: auto; }
  .qz-q { padding: 22px; overflow: visible; }
  .qz-opts { grid-template-columns: 1fr; }
  .qz-rail { order: -1; padding: 16px; }
  .qz-pal { grid-template-columns: repeat(10, 1fr); }
  .qz-keys { display: none; }
  .qz-h .btn-primary { display: none; }
}

/* ===== Lesson page · lighter surfaces ===== */
.lp-card, .lp-ov { background: none; border-radius: 0; padding: 22px 0 0; border-top: 1px solid var(--ink); }
.lp-ov { margin-top: 44px; }
.lp-row { gap: 36px; margin-top: 8px; }
.lp-card-h { align-items: center; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.lp-h2, .lp-ov .card-t { font-size: 26px; font-weight: 300; letter-spacing: -0.035em; line-height: 1; }
.lp-h2 sup { font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 6px; vertical-align: top; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* docs shelf */
.fd-f { display: flex; gap: 18px; flex-wrap: wrap; }
.fd-f button { position: relative; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); padding: 4px 0; transition: color .2s; }
.fd-f button i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.fd-f button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.fd-f button:hover { color: var(--ink); }
.fd-f button.on { color: var(--ink); }
.fd-f button.on::after { transform: none; }
.fd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 22px; }
.fd { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; animation: fdIn .45s var(--ease) both; }
.fd.hide { display: none; }
@keyframes fdIn { from { opacity: 0; transform: translateY(8px); } }
.fd-ic { position: relative; display: block; height: 76px; margin: 0 0 16px 2px; }
.fd-ic .file-svg { position: relative; z-index: 1; display: block; transition: transform .5s var(--ease); transform-origin: 30% 100%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .0)); }
.fd-sheet { position: absolute; left: 6px; top: 4px; width: 58px; height: 72px; border-radius: 8px; background: color-mix(in srgb, var(--c) 22%, #fff); transform-origin: 30% 100%; transition: transform .5s var(--ease); }
.fd:hover .fd-ic .file-svg { transform: translateY(-6px) rotate(-7deg); filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .14)); }
.fd:hover .fd-sheet { transform: rotate(9deg) translateX(10px); }
.fd-k { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fd-t { font-weight: 400; font-size: 15px; line-height: 1.35; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size .45s var(--ease); }
.fd:hover .fd-t { background-size: 100% 2px; }
.fd-m { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.fd-m em { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-style: normal; color: var(--ink); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .35s var(--ease); }
.fd:hover .fd-m em { opacity: 1; transform: none; }

/* quiz card */
.lp-quiz { border: 0; border-radius: 18px; padding: 26px; background: var(--ink); color: #fff; }
.lp-quiz.off { background: none; border-top: 1px solid var(--ink); border-radius: 0; padding: 22px 0 0; }
.lp-quiz-k { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.lp-quiz-k i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(91, 225, 91, .2); animation: qkPulse 2s infinite; }
@keyframes qkPulse { 50% { box-shadow: 0 0 0 7px rgba(91, 225, 91, 0); } }
.lp-best { font-size: 56px; }
.lp-best.ok { color: var(--accent); }
.lp-quiz-t { font-size: 26px; font-weight: 300; letter-spacing: -0.035em; margin-top: 30px; }
.lp-quiz-left .bar { height: 2px; }
.lp-quiz-left .bar i { background: var(--accent); }
.lp-quiz-a .btn-white:hover { background: var(--accent); color: var(--ink); }

/* outline side */
.lp-side { background: none; border-radius: 0; padding: 0 0 0 28px; border-left: 1px solid var(--line); }
.lp-side .seg { background: #F1F1F1; }
.chap + .chap { margin-top: 0; }
.chap { border-radius: 0; border-bottom: 1px solid var(--line); }
.chap-h { background: none; border-radius: 0; padding: 16px 4px; transition: color .2s; }
.chap-h:hover { color: var(--ink); }
.chap-n { background: #F1F1F1; width: 30px; height: 30px; font-size: 12px; }
.chap.open .chap-h { background: none; color: var(--ink); font-weight: 400; }
.chap.open .chap-n { background: var(--ink); color: var(--accent); }
.chap-list { padding: 0 0 12px; }
.les { border-radius: 10px; position: relative; }
.les.on { background: #F4F4F4; }
.les.on::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--accent); border-radius: 2px; }
.cm-r, .cmp-box, .cmp-stamp { background: #F4F4F4; }

/* ===== Exam room · sheet layout, no boxes ===== */
.qz-bg { background: rgba(10, 10, 10, .72); padding: 14px; }
.qz { width: 100%; height: 100%; max-width: 1440px; border-radius: 14px; background: #fff; }
.qz.is-result, .qz.is-history { width: min(720px, 100%); }
.qz-h { background: #fff; padding: 16px 16px 16px 30px; border-bottom: 1px solid var(--line); }
.qz-ht { flex-direction: column; align-items: flex-start; gap: 4px; }
.qz-k { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.qz-k i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.qz-ht b { font-size: 17px; font-weight: 400; letter-spacing: -0.02em; max-width: 52vw; }
.qz-timer { height: auto; padding: 0 14px 0 0; background: none; color: var(--ink); gap: 10px; }
.qz-timer i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: qkPulse 2s infinite; box-shadow: 0 0 0 4px rgba(91, 225, 91, .2); }
.qz-timer b { font-size: 34px; font-weight: 300; letter-spacing: -0.04em; }
.qz-timer.low { background: none; animation: none; }
.qz-timer.low b { color: #E5484D; }
.qz-timer.low i { background: #E5484D; box-shadow: 0 0 0 4px rgba(229, 72, 77, .2); }
.qz-line { height: 2px; background: transparent; flex-shrink: 0; margin-top: -1px; }
.qz-line i { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 10px rgba(91, 225, 91, .7); transition: width .5s var(--ease); }
.qz-run { grid-template-columns: minmax(0, 1fr) 280px; gap: 0; padding: 0; }
.qz-q { background: none; border-radius: 0; padding: 40px 64px 32px; animation: qzIn .4s var(--ease); }
@keyframes qzIn { from { opacity: 0; transform: translateY(10px); } }
.qz-qh { gap: 18px; align-items: flex-end; }
.qz-no { font-size: 88px; font-weight: 300; letter-spacing: -0.06em; line-height: .82; color: var(--ink); font-variant-numeric: tabular-nums; }
.qz-no small { font-size: 16px; letter-spacing: 0; color: var(--ink-4); font-weight: 300; margin-left: 8px; }
.qz-lv { height: auto; padding: 0 0 6px; background: none !important; color: var(--ink-3) !important; font-weight: 400; gap: 7px; font-size: 13px; }
.qz-lv i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
.qz-lv.lv-N i { background: var(--accent); }
.qz-lv.lv-H i { background: #8C8C8C; }
.qz-lv.lv-V i { background: var(--ink-2); }
.qz-lv.lv-C i { background: var(--ink); box-shadow: 0 0 0 3px var(--accent); }
.qz-stem { font-size: 21px; font-weight: 300; line-height: 1.7; margin: 30px 0 30px; max-width: 900px; }
.qz-opts { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); max-width: 900px; }
.qz-opt { position: relative; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 18px 8px; gap: 22px; font-size: 17px; overflow: hidden; transition: padding .35s var(--ease), background .25s; }
.qz-opt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transition: transform .35s var(--ease); }
.qz-opt:hover { padding-left: 18px; background: #FAFAFA; transform: none; }
.qz-l { width: 40px; height: 40px; border-radius: 50%; background: none; border: 1px solid var(--line-2); font-weight: 300; font-size: 16px; }
.qz-opt:hover .qz-l { border-color: var(--ink); }
.qz-ok { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--ink); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s var(--ease); flex-shrink: 0; }
.qz-opt.on { background: #F7F7F7; padding-left: 18px; border-color: var(--line); }
.qz-opt.on::before { transform: none; }
.qz-opt.on .qz-l { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.qz-opt.on .qz-ok { opacity: 1; transform: none; }
.qz-nav { align-items: center; max-width: 900px; padding-top: 36px; }
.qz-prev { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 14px; transition: color .2s, gap .3s var(--ease); }
.qz-prev:hover:not(:disabled) { color: var(--ink); gap: 12px; }
.qz-prev:disabled { opacity: .35; cursor: default; }
.qz-next { width: 60px; height: 60px; }
.qz-rail { background: none; border-radius: 0; border-left: 1px solid var(--line); padding: 40px 28px 28px; gap: 22px; }
.qz-prog { display: flex; align-items: flex-end; gap: 10px; }
.qz-prog b { font-size: 58px; line-height: .85; }
.qz-prog span { font-size: 12.5px; line-height: 1.3; }
.qz-pal { gap: 6px; }
.qz-pal button { border-radius: 50%; background: none; border: 1px solid var(--line); font-weight: 300; font-size: 13px; transition: background .2s, color .2s, border-color .2s, transform .25s var(--ease); }
.qz-pal button:hover { border-color: var(--ink); transform: translateY(-2px); }
.qz-pal button.ans { background: var(--ink); border-color: var(--ink); color: #fff; }
.qz-pal button.cur { box-shadow: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.qz-keys { line-height: 2.1; color: var(--ink-3); }
.qz-keys kbd { background: none; border: 1px solid var(--line-2); border-radius: 5px; padding: 0 6px; margin-right: 3px; font-weight: 400; font-size: 11.5px; }

/* result */
.qz-res { padding: 44px 48px 40px; align-items: stretch; gap: 0; }
.qz-badge { align-self: flex-start; height: auto; padding: 0; background: none !important; gap: 8px; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3) !important; }
.qz-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.qz-badge.ok i { background: var(--accent); box-shadow: 0 0 0 4px rgba(91, 225, 91, .2); }
.qz-big { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.qz-score { font-size: 132px; letter-spacing: -0.07em; line-height: .85; animation: qzIn .6s var(--ease); }
.qz-of { font-size: 20px; color: var(--ink-4); }
.qz-meter { position: relative; height: 2px; background: var(--line); margin: 30px 0 4px; }
.qz-meter i { display: block; height: 100%; background: var(--ink); transition: width 1s var(--ease); }
.qz-meter em { position: absolute; top: -5px; width: 1px; height: 12px; background: var(--ink-3); }
.qz-facts, .qz-sum { gap: 0; max-width: none; margin: 18px 0 30px; border-top: 1px solid var(--line); }
.qz-facts div, .qz-sum div { background: none; border-radius: 0; align-items: flex-start; padding: 16px 0 0; }
.qz-facts div + div, .qz-sum div + div { border-left: 1px solid var(--line); padding-left: 18px; }
.qz-facts b, .qz-sum b { font-size: 30px; font-weight: 300; }
.qz-res > .row { justify-content: flex-start !important; }

/* history */
.qz-body { padding: 28px 32px; }
.qz-hist { gap: 0; border-top: 1px solid var(--line); }
.qz-hr { background: none; border-radius: 0; border-bottom: 1px solid var(--line); padding: 14px 4px; gap: 18px; transition: padding .3s var(--ease), background .2s; }
.qz-hr:hover { transform: none; box-shadow: none; background: #FAFAFA; padding-left: 12px; }
.qz-hn { width: auto; height: auto; background: none; border-radius: 0; font-size: 26px; font-weight: 300; letter-spacing: -0.04em; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.qz-hd b { font-weight: 400; }
.qz-hs { font-size: 26px; }
.qz-hs.ok { color: var(--ink); }
.qz-hs.ok::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 8px; vertical-align: middle; }
.qz-hs.no { color: var(--ink-3); }

/* review */
.qz-rv { gap: 0; padding: 12px 48px 40px; }
.qz-rq { background: none; border-radius: 0; border-left: 0; border-bottom: 1px solid var(--line); padding: 32px 0; }
.qz-rq .qz-no { font-size: 44px; }
.qz-rq .qz-opt { padding: 12px 8px; font-size: 15px; }
.qz-rq .qz-opt:hover { padding-left: 8px; background: none; }
.qz-rq .qz-l { width: 32px; height: 32px; border-radius: 50%; }
.qz-mark { color: var(--ink); font-weight: 400; }
.qz-rq.no .qz-mark { color: #E5484D; }
.qz-opt.right { background: none; border-color: var(--line); }
.qz-opt.right::before { transform: none; }
.qz-opt.right .qz-l { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.qz-opt.wrong { background: none; border-color: var(--line); }
.qz-opt.wrong .qz-t { text-decoration: line-through; text-decoration-color: #E5484D; color: var(--ink-3); }
.qz-opt.wrong .qz-l { background: none; border-color: #E5484D; color: #E5484D; }
.qz-sol { background: none; border-radius: 0; border-left: 2px solid var(--ink); padding: 4px 0 4px 18px; margin-top: 20px; }
.qz-sol b { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) {
  .qz-run { grid-template-columns: 1fr; }
  .qz-rail { border-left: 0; border-top: 1px solid var(--line); padding: 20px; }
  .qz-q { padding: 26px 20px; }
  .qz-no { font-size: 60px; }
  .qz-timer b { font-size: 24px; }
}
.qz-next { background: var(--ink); color: #fff; }
.qz-next:hover { background: var(--accent); color: var(--ink); transform: rotate(-45deg); }
.lp-card .card-t { font-size: 26px; font-weight: 300; letter-spacing: -0.035em; }

/* ===================== Shop: course window · cart · SePay · notifications ===================== */
.sh-bg { position: fixed; inset: 0; z-index: 8500; background: rgba(10, 10, 10, .62); display: flex; align-items: center; justify-content: center; padding: 18px; opacity: 0; transition: opacity .28s; }
.sh-bg.in { opacity: 1; }
.cdm-x { position: absolute; top: 16px; right: 16px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; background: #F1F1F1; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s, transform .35s var(--ease); }
.cdm-x:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }
.cdm-x.static { position: static; }
.cdm-k { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.cdm-k i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.cdm-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); margin: 12px 0 0; }

/* course window */
.cdm { position: relative; width: min(1120px, 100%); max-height: 100%; overflow-y: auto; background: #fff; border-radius: 22px; transform: translateY(20px) scale(.985); transition: transform .45s var(--ease); overscroll-behavior: contain; }
.sh-bg.in .cdm, .sh-bg.in .pay { transform: none; }
.cdm-top { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px; padding: 28px 28px 30px; border-bottom: 1px solid var(--line); }
.cdm-art .cb { border-radius: 16px; }
.cdm-info { display: flex; flex-direction: column; padding: 6px 40px 0 0; min-width: 0; }
.cdm-t { font-size: clamp(26px, 2.4vw, 38px); font-weight: 300; letter-spacing: -0.04em; line-height: 1.1; margin: 12px 0 10px; }
.cdm-s { color: var(--ink-3); font-size: 14.5px; line-height: 1.6; margin: 0; }
.cdm-tch { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; }
.cdm-tch div { display: flex; flex-direction: column; min-width: 0; }
.cdm-tch b { font-weight: 500; font-size: 15px; }
.cdm-tch span { font-size: 12.5px; color: var(--ink-3); }
.cdm-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; border-top: 1px solid var(--line); }
.cdm-stats div { padding: 14px 0 0; display: flex; flex-direction: column; }
.cdm-stats div + div { border-left: 1px solid var(--line); padding-left: 16px; }
.cdm-stats b { font-size: 26px; font-weight: 300; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.cdm-stats span { font-size: 12px; color: var(--ink-3); }
.cdm-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0; }
.cdm-syl { padding: 26px 28px 30px; min-width: 0; }
.cdm-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cdm-h h3 { font-size: 22px; font-weight: 300; letter-spacing: -0.03em; margin: 0; }
.cdm-h span { font-size: 13px; color: var(--ink-3); }
.cd-ch { border-top: 1px solid var(--line); }
.cd-ch:last-child { border-bottom: 1px solid var(--line); }
.cd-ch summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 15px 2px; cursor: pointer; }
.cd-ch summary::-webkit-details-marker { display: none; }
.cd-ch summary .ic { color: var(--ink-3); transition: transform .3s var(--ease); }
.cd-ch[open] summary .ic { transform: rotate(180deg); }
.cd-n { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; width: 20px; }
.cd-ct { flex: 1; font-size: 15.5px; min-width: 0; }
.cd-cm { font-size: 12.5px; color: var(--ink-3); }
.cd-ch ol { list-style: none; margin: 0 0 12px; padding: 0 0 0 34px; }
.cd-l { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; font-size: 14px; color: var(--ink-2); }
.cd-l:hover { background: #F7F7F7; }
.cd-li { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; color: var(--ink-3); }
.cd-li i { font-style: normal; }
.cd-l.done .cd-li { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.cd-l.cur { background: #F4F4F4; color: var(--ink); }
.cd-l.cur .cd-li { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.cd-l.lock { color: var(--ink-3); }
.cd-l.lock .cd-li { border-style: dashed; }
.cd-lt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cd-lt em { font-style: normal; font-size: 12px; color: var(--accent-ink); margin-top: 2px; }
.cd-lm { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); flex-shrink: 0; }
.cd-lm b { font-weight: 400; font-variant-numeric: tabular-nums; margin-left: 6px; min-width: 40px; text-align: right; }
.cdm-side { border-left: 1px solid var(--line); padding: 26px 28px 30px; }
.cdm-side > div { position: sticky; top: 20px; }
.cdm-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 16px; }
.cdm-price b { font-size: 42px; font-weight: 300; letter-spacing: -0.05em; }
.cdm-price s { color: var(--ink-3); font-size: 15px; }
.cdm-price em { font-style: normal; font-size: 13px; font-weight: 500; background: var(--accent); color: var(--ink); padding: 3px 9px; border-radius: 99px; }
.cdm-inc { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid var(--line); }
.cdm-inc li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.cdm-inc .ic { color: var(--ink-3); flex-shrink: 0; }
.cdm-cta { display: grid; gap: 10px; }
.cdm-cta .btn { justify-content: center; width: 100%; }
.cdm-pc { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; }
.cdm-pc b { font-size: 72px; font-weight: 300; letter-spacing: -0.06em; line-height: 1; }
.cdm-pc span { font-size: 20px; color: var(--ink-3); }
.cdm-bar { height: 3px; background: var(--line); margin: 14px 0 8px; border-radius: 3px; overflow: hidden; }
.cdm-bar i { display: block; height: 100%; background: var(--accent); }
.cdm-pn { font-size: 13px; color: var(--ink-3); }
.cdm-cur { display: flex; flex-direction: column; gap: 3px; margin: 20px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cdm-cur span { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.cdm-cur b { font-weight: 400; font-size: 16px; line-height: 1.35; }
.cdm-cur small { font-size: 12.5px; color: var(--ink-3); }
.btn.is-in { background: var(--ink); color: #fff; }
.cc .btn-outline .ic, .cc .btn-dark .ic { margin-right: 2px; }

/* cart drawer */
.cart-bg { justify-content: flex-end; padding: 12px; }
.cart { width: min(460px, 100%); height: 100%; background: #fff; border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; transform: translateX(30px); transition: transform .45s var(--ease); }
.sh-bg.in .cart { transform: none; }
.cart-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 16px 22px; border-bottom: 1px solid var(--line); }
.cart-tabs { display: flex; gap: 20px; }
.cart-tabs button { position: relative; font-size: 17px; color: var(--ink-3); padding: 6px 0; display: inline-flex; align-items: center; gap: 8px; }
.cart-tabs button i { font-style: normal; font-size: 11.5px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #F1F1F1; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; }
.cart-tabs button.on { color: var(--ink); }
.cart-tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -17px; height: 2px; background: var(--ink); }
.cart-tabs button.on i { background: var(--accent); color: var(--ink); }
.cart-list { flex: 1; overflow-y: auto; padding: 6px 22px 16px; }
.ci { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); animation: fdIn .35s var(--ease) both; }
.ci-tag { width: 46px; height: 46px; border-radius: 12px; background: var(--ink); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: .04em; }
.ci-b { display: flex; flex-direction: column; min-width: 0; }
.ci-b b { font-weight: 400; font-size: 14.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ci-b span { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.ci-own { font-style: normal; font-size: 12px; color: var(--accent-ink); }
.ci-p { display: flex; flex-direction: column; align-items: flex-end; }
.ci-p b { font-weight: 500; font-size: 15px; }
.ci-p s { font-size: 12px; color: var(--ink-3); }
.ci-x { width: 34px; height: 34px; border-radius: 50%; color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.ci-x:hover { background: #FDECEA; color: #E5484D; }
.cart-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 70px 20px; color: var(--ink-3); }
.cart-empty b { color: var(--ink); font-weight: 400; font-size: 18px; margin-top: 8px; }
.cart-empty .btn { margin-top: 12px; }
.cart-f { border-top: 1px solid var(--line); padding: 18px 22px 20px; }
.cart-sum, .cart-tot { display: flex; justify-content: space-between; align-items: baseline; }
.cart-sum { font-size: 13px; color: var(--ink-3); }
.cart-tot { margin: 4px 0 16px; }
.cart-tot span { font-size: 14px; }
.cart-tot b { font-size: 34px; font-weight: 300; letter-spacing: -0.04em; }
.od { padding: 16px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.od-h { display: flex; justify-content: space-between; align-items: center; }
.od-h b { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.od-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.od-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
.od-st.ok i { background: var(--accent); }
.od-st.wait i { background: #F5A524; }
.od-st.off { color: var(--ink-3); }
.od-t { font-size: 14px; color: var(--ink-2); }
.od-items { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--ink-3); }
.od-items li { display: flex; justify-content: space-between; gap: 12px; }
.od-f { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--ink-3); }
.od-f b { color: var(--ink); font-size: 16px; font-weight: 500; }
.od .btn { align-self: flex-start; margin-top: 4px; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin .8s linear infinite; display: inline-block; }

/* SePay payment */
.pay { position: relative; width: min(860px, 100%); max-height: 100%; overflow-y: auto; background: #fff; border-radius: 22px; display: grid; grid-template-columns: 340px minmax(0, 1fr); transform: translateY(20px) scale(.985); transition: transform .45s var(--ease); }
.pay-l { background: #0E0E0E; padding: 34px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; border-radius: 22px 0 0 22px; }
.pay-qr { width: 100%; aspect-ratio: 1; background: #fff; border-radius: 14px; padding: 12px; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 0 6px rgba(91, 225, 91, .18); }
.pay-qr img { width: 100%; height: 100%; object-fit: contain; }
.pay-qr span { display: none; font-size: 13px; color: var(--ink-3); text-align: center; padding: 20px; }
.pay-qr.err img { display: none; }
.pay-qr.err span { display: block; }
.pay-cd { display: flex; flex-direction: column; align-items: center; color: rgba(255, 255, 255, .6); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.pay-cd b { color: #fff; font-size: 38px; font-weight: 300; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-transform: none; }
.pay-r-col { padding: 34px 34px 30px; min-width: 0; }
.pay-amt { font-size: 44px; font-weight: 300; letter-spacing: -0.05em; margin: 10px 0 4px; }
.pay-t { color: var(--ink-3); font-size: 14px; margin: 0 0 4px; }
.pay-rows { margin: 18px 0; border-top: 1px solid var(--line); }
.pay-r { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pay-r span { color: var(--ink-3); }
.pay-r b { font-weight: 500; overflow-wrap: anywhere; }
.pay-r mark { background: var(--accent); color: var(--ink); padding: 2px 8px; border-radius: 6px; letter-spacing: .04em; }
.pay-r button { width: 32px; height: 32px; border-radius: 8px; color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.pay-r button:hover { background: #F1F1F1; color: var(--ink); }
.pay-r button.ok { color: var(--accent-ink); }
.pay-wait { display: flex; align-items: center; gap: 12px; font-size: 14px; padding: 14px 16px; background: #F6F6F6; border-radius: 12px; }
.pay-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(91, 225, 91, .6); animation: payPing 1.6s infinite; flex-shrink: 0; }
@keyframes payPing { 70% { box-shadow: 0 0 0 10px rgba(91, 225, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 225, 91, 0); } }
.pay-sim { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); text-decoration: underline dotted; }
.pay-sim:hover { color: var(--ink); }
.pay-ok { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 10px; }
.pay-ok .btn { margin-top: 16px; }
.pay-tick { width: 64px; height: 64px; margin-bottom: 8px; }
.pay-tick circle { fill: var(--accent); }
.pay-tick path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: tick .6s .15s var(--ease) forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }
.pay.is-paid .pay-qr { box-shadow: 0 0 0 6px var(--accent); }

/* notification popover */
.icon-btn { position: relative; }
.icon-btn .badge { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.icon-btn .badge[hidden] { display: none; }
.ntf { position: fixed; z-index: 9000; width: 380px; max-height: min(520px, 70vh); background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--line), 0 24px 50px -18px rgba(0, 0, 0, .3); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .2s, transform .25s var(--ease); }
.ntf.in { opacity: 1; transform: none; }
.ntf-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 10px 18px; }
.ntf-h b { font-weight: 400; font-size: 18px; letter-spacing: -0.02em; }
.ntf-h button { font-size: 12.5px; color: var(--ink-3); }
.ntf-h button:hover { color: var(--ink); }
.ntf-list { overflow-y: auto; padding: 0 8px 8px; }
.ntf-i { width: 100%; display: flex; gap: 12px; text-align: left; padding: 11px 10px; border-radius: 12px; position: relative; transition: background .2s; }
.ntf-i:hover { background: #F6F6F6; }
.ntf-i.new::after { content: ""; position: absolute; right: 12px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ntf-ic { width: 38px; height: 38px; border-radius: 50%; background: #F1F1F1; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ntf-i.new .ntf-ic { background: var(--ink); color: var(--accent); }
.ntf-b { display: flex; flex-direction: column; min-width: 0; padding-right: 14px; }
.ntf-b b { font-weight: 400; font-size: 14px; line-height: 1.35; }
.ntf-i.new .ntf-b b { font-weight: 500; }
.ntf-b span { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.ntf-b small { font-size: 11.5px; color: var(--ink-4); margin-top: 4px; }
.ntf-empty { padding: 40px 10px; text-align: center; color: var(--ink-3); }

/* comment replies between students */
.cm-r .cm-h .av, .cm-r .cm-h img { flex-shrink: 0; }
.cm-r.is-t { background: #F2FBF2; }
.cm-at { color: var(--accent-ink); font-weight: 500; }
.cm-rb { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); transition: color .2s; }
.cm-rb:hover { color: var(--ink); }
.cm-rbox { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; background: #F4F4F4; border-radius: 14px; padding: 6px 6px 6px 12px; }
.cm-rbox textarea { flex: 1; border: 0; background: transparent; resize: none; font: inherit; font-size: 13.5px; line-height: 1.5; padding: 6px 0; outline: none; }

@media (max-width: 900px) {
  .cdm-top, .cdm-body, .pay { grid-template-columns: 1fr; }
  .cdm-info { padding-right: 0; }
  .cdm-side { border-left: 0; border-top: 1px solid var(--line); }
  .pay-l { border-radius: 22px 22px 0 0; }
  .ntf { width: calc(100vw - 24px); }
}

/* ===== Black buttons / chips carry white text, never neon ===== */
.chap.open .chap-n, .qz-opt.on .qz-l, .cd-l.cur .cd-li, .ci-tag, .ntf-i.new .ntf-ic { color: #fff; }
.fd-t, .fd:hover .fd-t { background: none !important; }
.fd:hover .fd-t { color: var(--accent-ink); }
.pay-sim { text-decoration: none; }
.pay-sim:hover { color: var(--accent-ink); }

/* ===================== Tra cứu ID sách ===================== */
.bl { display: flex; flex-direction: column; gap: 28px; }
.bl-hero { background: #0E0E0E; color: #fff; border-radius: 26px; padding: clamp(28px, 3vw, 44px); position: relative; overflow: hidden; isolation: isolate; }
.bl-hero::before { content: ""; position: absolute; z-index: -1; right: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 225, 91, .28), transparent 65%); }
.bl-k, .er-k { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.bl-k i, .er-k i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.bl-t, .er-t { margin: 14px 0 10px; font-size: clamp(38px, 4.6vw, 72px); font-weight: 300; letter-spacing: -0.055em; line-height: .95; color: #fff; }
.bl-t span, .er-t span { color: var(--accent); }
.bl-p { max-width: 560px; color: rgba(255, 255, 255, .7); margin: 0 0 24px; line-height: 1.6; }
.bl-search { display: flex; align-items: center; gap: 12px; background: #fff; color: var(--ink); border-radius: 99px; padding: 6px 6px 6px 22px; max-width: 760px; }
.bl-search input { flex: 1; border: 0; outline: none; font: inherit; font-size: 17px; letter-spacing: .02em; min-width: 0; background: transparent; }
.bl-recent { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.bl-recent button { color: #fff; border: 1px solid rgba(255, 255, 255, .2); border-radius: 99px; padding: 4px 12px; font-size: 12.5px; transition: border-color .2s, color .2s; }
.bl-recent button:hover { border-color: var(--accent); color: var(--accent); }
.bl-res { border-top: 1px solid var(--ink); padding-top: 22px; animation: fdIn .4s var(--ease); }
.bl-res.none { display: flex; gap: 16px; align-items: center; color: var(--ink-3); }
.bl-res.none b { display: block; color: var(--ink); font-weight: 400; font-size: 18px; }
.bl-rh { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bl-id { font-size: 26px; font-weight: 300; letter-spacing: -0.03em; margin-right: 8px; }
.bl-tag { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: #F1F1F1; color: var(--ink-2); }
.bl-own { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 12px; border-radius: 99px; background: var(--accent); color: var(--ink); }
.bl-stem { font-size: 19px; font-weight: 300; line-height: 1.7; margin: 18px 0; max-width: 960px; }
.bl-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; max-width: 960px; border-top: 1px solid var(--line); }
.bl-o { display: flex; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.bl-o > span { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.bl-o.ok > span { background: var(--accent); border-color: var(--accent); }
.bl-sol { margin-top: 20px; border-left: 2px solid var(--ink); padding: 4px 0 4px 18px; max-width: 960px; }
.bl-sh2 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 6px; }
.bl-lock { display: flex; gap: 16px; align-items: center; margin-top: 22px; padding: 18px 20px; border-radius: 16px; background: #F6F6F6; max-width: 960px; }
.bl-lock > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bl-lock b { font-weight: 500; }
.bl-lock span { color: var(--ink-3); font-size: 14px; }
.bl-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.bl-h { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--ink); padding-top: 18px; margin-bottom: 18px; }
.bl-h h2 { margin: 0; font-size: 26px; font-weight: 300; letter-spacing: -0.035em; }
.bl-h span { color: var(--ink-3); font-size: 13px; }
.bl-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.bl-book { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: start; }
.bl-cover .book { aspect-ratio: 3 / 4; border-radius: 6px; }
.bl-bi { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bl-bi b { font-weight: 400; font-size: 15.5px; line-height: 1.35; }
.bl-bi span, .bl-bi small { font-size: 12.5px; color: var(--ink-3); }
.bl-bi code { font: 12px ui-monospace, monospace; background: #F1F1F1; padding: 1px 6px; border-radius: 4px; color: var(--ink); }
.bl-read { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 12px; border-radius: 99px; background: var(--ink); color: #fff; margin-top: 4px; }
.bl-read:hover { background: var(--accent); color: var(--ink); }
.bl-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px; color: var(--ink-3); text-align: center; border: 1px dashed var(--line-2); border-radius: 18px; }
.bl-empty b { color: var(--ink); font-weight: 400; font-size: 17px; }
.bl-act { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 24px; }
.bl-card { background: #F4F4F4; border-radius: 22px; padding: 22px; }
.bl-card h3 { margin: 0 0 6px; font-size: 20px; font-weight: 400; letter-spacing: -0.02em; }
.bl-card p { margin: 0 0 14px; color: var(--ink-3); font-size: 13.5px; line-height: 1.55; }
.bl-card form { display: flex; flex-direction: column; gap: 10px; }
.bl-code { height: 56px; font: 500 20px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-align: center; text-transform: uppercase; background: #fff; }
.bl-scratch { position: relative; height: 92px; border-radius: 14px; background: #0E0E0E; margin-bottom: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bl-scratch span { font: 600 18px ui-monospace, monospace; letter-spacing: .16em; color: var(--accent); }
.bl-scratch i { position: absolute; inset: 22px 40px; border-radius: 8px; background: repeating-linear-gradient(115deg, #b9b9b9 0 6px, #d6d6d6 6px 12px); clip-path: polygon(0 0, 100% 0, 100% 100%, 64% 100%, 58% 40%, 30% 70%, 0 100%); animation: scratch 3.2s var(--ease) infinite alternate; }
@keyframes scratch { from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 64% 100%, 58% 40%, 30% 70%, 0 100%); } }
.bl-msg { margin-top: 10px; font-size: 13.5px; padding: 10px 12px; border-radius: 10px; }
.bl-msg.ok { background: #E3FAE3; color: var(--accent-ink); }
.bl-msg.err { background: #FDECEA; color: #C4373C; }
.bl-rules { margin: 14px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-3); line-height: 1.8; }
.bl-ship + .bl-ship { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.bl-sh b { display: block; font-weight: 400; font-size: 14px; line-height: 1.35; }
.bl-sh span { font-size: 12.5px; color: var(--ink-3); }
.bl-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 12px 0 0; padding: 0; }
.bl-steps li { position: relative; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.bl-steps li i { height: 3px; background: var(--line-2); margin-right: 4px; border-radius: 3px; }
.bl-steps li.done i { background: var(--ink); }
.bl-steps li.cur i { background: var(--accent); }
.bl-steps li.cur { color: var(--ink); }
.bl-av { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 13.5px; }
.bl-av span { font-size: 11px; letter-spacing: .06em; color: var(--ink-3); min-width: 40px; }
.bl-av b { font-weight: 400; }
@media (max-width: 1100px) { .bl-cols { grid-template-columns: 1fr; } .bl-act { position: static; } .bl-opts { grid-template-columns: 1fr; } }

/* ===================== Phòng thi ===================== */
.er { display: flex; flex-direction: column; gap: 36px; }
.er-hero { background: #0E0E0E; color: #fff; border-radius: 26px; padding: clamp(28px, 3vw, 44px); display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; position: relative; overflow: hidden; isolation: isolate; }
.er-hero::before { content: ""; position: absolute; z-index: -1; left: 40%; bottom: -260px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 225, 91, .22), transparent 65%); }
.er-kpi { display: flex; gap: clamp(20px, 3vw, 44px); }
.er-kpi div { display: flex; flex-direction: column; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .16); }
.er-kpi b { font-size: clamp(30px, 3vw, 44px); font-weight: 300; letter-spacing: -0.04em; }
.er-kpi span { font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.er-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--ink); padding-top: 18px; margin-bottom: 18px; }
.er-h h2 { margin: 0; font-size: 26px; font-weight: 300; letter-spacing: -0.035em; }
.er-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); }
.er-link:hover { color: var(--accent-ink); }
.er-tabs { display: flex; gap: 18px; flex-wrap: wrap; }
.er-tabs button { position: relative; font-size: 14px; color: var(--ink-3); padding: 4px 0; }
.er-tabs button.on { color: var(--ink); }
.er-tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--accent); }
.er-batches { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.er-b { background: #F4F4F4; border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: transform .35s var(--ease), box-shadow .35s; }
.er-b:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .35); }
.er-bh { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); }
.er-bh em { font-style: normal; color: var(--ink); }
.er-b h3 { margin: 0; font-size: 19px; font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; min-height: 2.6em; }
.er-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0; padding: 0; }
.er-steps li { display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: var(--ink-3); }
.er-steps li i { height: 3px; border-radius: 3px; background: #DADADA; }
.er-steps li.ok i { background: var(--ink); }
.er-steps li.cur i { background: var(--accent); }
.er-steps li.cur { color: var(--ink); }
.er-bf { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; }
.er-score b, .er-cnt b { display: block; font-size: 32px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.er-score span, .er-cnt span { font-size: 12.5px; color: var(--ink-3); }
.er-b .circle-go { width: 52px; height: 52px; background: var(--ink); color: #fff; }
.er-b .circle-go.neon { background: var(--accent); color: var(--ink); }
.er-b:hover .circle-go { transform: rotate(-45deg); }
.er-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.er-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto auto 90px 48px; gap: 18px; align-items: center; text-align: left; padding: 14px 6px; border-bottom: 1px solid var(--line); transition: background .2s, padding .35s var(--ease); animation: fdIn .4s var(--ease) both; animation-delay: calc(var(--i) * 30ms); }
.er-row:hover { background: #FAFAFA; padding-left: 14px; }
.er-code { width: 56px; height: 56px; border-radius: 14px; background: #F1F1F1; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; letter-spacing: .04em; }
.er-row:hover .er-code { background: var(--ink); color: #fff; }
.er-code.sm { width: 44px; height: 44px; border-radius: 12px; font-size: 11.5px; }
.er-rt { display: flex; flex-direction: column; min-width: 0; }
.er-rt b { font-weight: 400; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.er-rt span { font-size: 12.5px; color: var(--ink-3); }
.er-m { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.er-best { display: flex; flex-direction: column; align-items: flex-end; }
.er-best b { font-size: 22px; font-weight: 300; letter-spacing: -0.03em; }
.er-best small { font-size: 11.5px; color: var(--ink-3); }
.er-row .circle-go { width: 44px; height: 44px; background: #F1F1F1; color: var(--ink); }
.er-row:hover .circle-go { background: var(--ink); color: #fff; transform: rotate(-45deg); }
.er-empty { padding: 40px; text-align: center; color: var(--ink-3); }
.er-hist { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 0 28px; }
.er-hr { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.er-hr .er-rt { flex: 1; }
.er-hr .er-rt b { font-size: 14.5px; }
.er-hs { font-size: 18px; font-weight: 300; white-space: nowrap; }
/* sheet */
.ex { background: #fff; border-radius: 22px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.ex-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--line); }
.ex-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ex-tt .er-k { color: var(--accent-ink); font-size: 11px; }
.ex-tt b { font-weight: 400; font-size: 16px; }
.ex-timer { display: inline-flex; align-items: center; gap: 10px; }
.ex-timer i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(91, 225, 91, .2); }
.ex-timer b { font-size: 30px; font-weight: 300; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ex-timer.low b { color: #E5484D; }
.ex-timer.low i { background: #E5484D; box-shadow: 0 0 0 4px rgba(229, 72, 77, .2); }
.ex-line { height: 2px; background: var(--line); }
.ex-line i { display: block; height: 100%; background: var(--accent); transition: width .4s var(--ease); }
.ex-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 70vh; }
.ex-q { padding: 40px 56px 36px; min-width: 0; }
.ex-q.swap > * { animation: qzIn .35s var(--ease) both; }
.ex-q .qz-qh { flex-wrap: wrap; }
.ex-flag { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); padding: 6px 12px; border-radius: 99px; transition: background .2s, color .2s; }
.ex-flag:hover { background: #F1F1F1; color: var(--ink); }
.ex-flag.on { background: var(--ink); color: #fff; }
.ex-ds { border-top: 1px solid var(--line); max-width: 900px; }
.ex-dr { display: flex; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.ex-dk { font-weight: 500; width: 22px; }
.ex-dt { flex: 1; font-size: 16px; line-height: 1.55; }
.ex-seg { display: flex; background: #F1F1F1; border-radius: 99px; padding: 3px; flex-shrink: 0; }
.ex-seg button { height: 34px; padding: 0 16px; border-radius: 99px; font-size: 13.5px; color: var(--ink-2); transition: background .2s, color .2s; }
.ex-seg button.on { background: var(--ink); color: #fff; }
.ex-tln { max-width: 420px; display: flex; flex-direction: column; gap: 8px; }
.ex-tln label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.ex-tln .input { height: 56px; font-size: 22px; font-weight: 300; }
.ex-tln.static { display: block; font-size: 15px; max-width: none; }
.ex-rail { border-left: 1px solid var(--line); padding: 32px 24px; display: flex; flex-direction: column; gap: 20px; }
.ex-prog { display: flex; align-items: flex-end; gap: 10px; }
.ex-prog b { font-size: 58px; font-weight: 300; letter-spacing: -0.05em; line-height: .85; }
.ex-prog span { font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }
.ex-pal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-height: 46vh; overflow-y: auto; padding: 3px; }
.ex-pal button { position: relative; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); font-size: 13px; font-weight: 300; transition: background .2s, color .2s, border-color .2s, transform .25s var(--ease); }
.ex-pal button:hover { border-color: var(--ink); transform: translateY(-2px); }
.ex-pal button.ans { background: var(--ink); border-color: var(--ink); color: #fff; }
.ex-pal button.cur { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); }
.ex-pal button.flag::after { content: ""; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; }
.ex-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.ex-leg span { display: inline-flex; align-items: center; gap: 6px; }
.ex-leg i { width: 10px; height: 10px; border-radius: 50%; }
.ex-leg i.a { background: var(--ink); }
.ex-leg i.c { box-shadow: 0 0 0 2px var(--accent); }
.ex-leg i.f { background: var(--accent); }
.ex-rail .qz-keys { margin-top: auto; }
/* result */
.er-res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px 40px; align-items: end; background: #F4F4F4; border-radius: 26px; padding: clamp(26px, 3vw, 40px); }
.er-res .er-k { color: var(--accent-ink); }
.er-big { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.er-big b { font-size: clamp(90px, 10vw, 150px); font-weight: 300; letter-spacing: -0.07em; line-height: .82; }
.er-big span { font-size: 22px; color: var(--ink-3); }
.er-meter { height: 3px; background: #DADADA; margin-top: 22px; border-radius: 3px; overflow: hidden; }
.er-meter i { display: block; height: 100%; background: var(--ink); }
.er-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); border-top: 1px solid var(--line-2); }
.er-facts div { display: flex; flex-direction: column; padding: 14px 0 0 14px; border-left: 1px solid var(--line-2); }
.er-facts b { font-size: 28px; font-weight: 300; letter-spacing: -0.03em; }
.er-facts span { font-size: 12.5px; color: var(--ink-3); }
.er-ra { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.er-rv { padding: 0; }
.er-cert { position: relative; }
.er-cn { font-size: 40px; font-weight: 300; letter-spacing: -0.04em; margin-top: 10px; }
@media (max-width: 1100px) {
  .ex-body, .er-res { grid-template-columns: 1fr; }
  .ex-rail { border-left: 0; border-top: 1px solid var(--line); }
  .ex-q { padding: 26px 20px; }
  .er-row { grid-template-columns: 52px minmax(0, 1fr) 44px; }
  .er-row .er-m, .er-row .er-best { display: none; }
}

/* ===== Cửa sổ nổi luôn ở giữa màn hình, kích thước cố định ===== */
.cart-bg { justify-content: center; padding: 18px; }
.cart { width: min(520px, 100%); height: min(720px, calc(100vh - 36px)); border-radius: 24px; transform: translateY(16px) scale(.98); }

/* ===================== Mục lục bài học v2 ===================== */
.lp-outline.v2, .lp-outline.v3 { display: flex; flex-direction: column; gap: 4px; }
.ol-sum { display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 16px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.ol-sum > div:first-child { display: flex; align-items: baseline; justify-content: space-between; }
.ol-sum b { font-size: 34px; font-weight: 300; letter-spacing: -0.05em; line-height: 1; }
.ol-sum b small { font-size: 16px; color: var(--ink-3); margin-left: 2px; }
.ol-sum span { font-size: 13px; color: var(--ink-3); }
.ol-bar { display: flex; gap: 3px; }
.ol-bar i { position: relative; height: 4px; border-radius: 4px; background: #ECECEC; overflow: hidden; }
.ol-bar i b { position: absolute; inset: 0 auto 0 0; background: var(--ink); border-radius: 4px; }
.ol-ch { border-radius: 18px; transition: background .25s; }
.ol-ch.open { background: #F6F6F6; }
.ol-h { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 12px; text-align: left; border-radius: 18px; transition: background .2s; }
.ol-ch:not(.open) .ol-h:hover { background: #F6F6F6; }
.ol-n { font-size: 22px; font-weight: 300; letter-spacing: -0.04em; color: var(--ink-4); width: 32px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ol-ch.open .ol-n, .ol-ch.cur .ol-n { color: var(--ink); }
.ol-ch.done .ol-n { color: var(--accent-ink, #2c8f2c); }
.ol-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ol-tt > span { font-size: 15px; font-weight: 400; }
.ol-tt small { font-size: 12px; color: var(--ink-3); }
.ol-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); flex-shrink: 0; }
.ol-ch.done:not(.open) .ol-ic { background: var(--accent); color: var(--ink); }
.ol-ch.open .ol-ic { background: var(--ink); color: #fff; }
.ol-ic > span { display: grid; place-items: center; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.ol-chev { transform: rotate(-90deg); }
.ol-ch.open .ol-chev { transform: none; }
.ol-chk, .ol-ch.done:not(.open) .ol-chev { display: none !important; }
.ol-ch.done:not(.open) .ol-chk { display: grid !important; }
.ol-h { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ol-h > * { pointer-events: none; }
.ol-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.2, .8, .2, 1); }
.ol-wrap > .ol-list { min-height: 0; overflow: hidden; padding-bottom: 0; opacity: 0; transition: opacity .2s, padding .3s; }
.ol-ch.open .ol-wrap { grid-template-rows: 1fr; }
.ol-ch.open .ol-wrap > .ol-list { padding-bottom: 10px; opacity: 1; }
.ol-ch.lock { opacity: .55; }
.ol-ch.lock .ol-h { cursor: not-allowed; }
.ol-list { position: relative; padding: 0 8px 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.ol-list::before { content: ""; position: absolute; left: 27px; top: 8px; bottom: 22px; width: 1px; background: #DADADA; }
.ol-l { position: relative; display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 10px 10px 10px 8px; border-radius: 14px; transition: background .2s, box-shadow .25s; }
.ol-l:hover { background: #fff; }
.ol-l.on { background: #fff; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .35); }
.ol-dot { position: relative; z-index: 1; width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #F6F6F6; box-shadow: inset 0 0 0 1.5px #CFCFCF; }
.ol-l.done .ol-dot { background: var(--accent); box-shadow: none; color: var(--ink); }
.ol-l.on .ol-dot { background: var(--ink); box-shadow: none; }
.ol-l.on .ol-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: olPulse 1.6s infinite; }
@keyframes olPulse { 50% { box-shadow: 0 0 0 5px rgba(91, 225, 91, .25); } }
.ol-dot svg { display: block; }
.ol-lt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ol-lt > span { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.ol-l.on .ol-lt > span { color: var(--ink); font-weight: 500; }
.ol-l.done .ol-lt > span { color: var(--ink-3); }
.ol-lt small { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ol-lt em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); padding: 2px 8px; border-radius: 99px; background: rgba(0, 0, 0, .04); }
.ol-lt em.q { background: var(--ink); color: #fff; }
.ol-lt em.q .ic { color: var(--accent); }

/* ===== Quiz card v3 · phiếu tô đáp án ===== */
.lp-quiz.v3 { background: none; color: var(--ink); border-radius: 0; padding: 22px 0 0; border-top: 1px solid var(--ink); display: flex; flex-direction: column; overflow: visible; }
.lp-quiz.v3::before { display: none; }
.qv-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qv-hist { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); padding: 4px 0; transition: color .2s; }
.qv-hist:hover { color: var(--ink); }
.qv-sub { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.qv-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); gap: 8px 6px; margin-top: 24px; counter-reset: q; }
.qv-sheet i { position: relative; justify-self: center; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px #CFCFCF; transition: background .3s, box-shadow .3s, color .3s; }
.qv-sheet:not(.doing):not(.graded) i { animation: qvIn .5s var(--ease) both; }
.qv-sheet i:nth-child(2) { animation-delay: .03s; } .qv-sheet i:nth-child(3) { animation-delay: .06s; } .qv-sheet i:nth-child(4) { animation-delay: .09s; } .qv-sheet i:nth-child(5) { animation-delay: .12s; }
.qv-sheet i:nth-child(6) { animation-delay: .15s; } .qv-sheet i:nth-child(7) { animation-delay: .18s; } .qv-sheet i:nth-child(8) { animation-delay: .21s; } .qv-sheet i:nth-child(9) { animation-delay: .24s; } .qv-sheet i:nth-child(n+10) { animation-delay: .27s; }
@keyframes qvIn { from { opacity: 0; transform: scale(.6); } }
.lp-quiz.v3:hover .qv-sheet:not(.doing):not(.graded) i { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.qv-sheet i.f { background: var(--ink); color: #fff; box-shadow: none; }
.qv-sheet i.ok { background: var(--accent); color: var(--ink); box-shadow: none; }
.qv-sheet i.x { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.qv-sheet i.x::after { content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 1px; background: var(--ink); transform: rotate(-45deg); }
.qv-sheet i.e { box-shadow: inset 0 0 0 1px #CFCFCF; background: repeating-linear-gradient(-45deg, transparent 0 3px, #ECECEC 3px 4px); }
.qv-cap { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }
.qv-cap b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.qv-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 26px 0 0; border-top: 1px solid var(--line); }
.qv-facts > div { padding: 14px 0 0 12px; border-left: 1px solid var(--line); min-width: 0; }
.qv-facts > div:first-child { padding-left: 0; border-left: 0; }
.qv-facts dt { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.qv-facts dd { margin: 8px 0 0; font-size: 30px; font-weight: 300; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qv-facts dd small { font-size: 12px; letter-spacing: 0; color: var(--ink-3); margin-left: 3px; }
.qv-facts .hi dd { background: linear-gradient(var(--accent), var(--accent)) 0 88% / 100% 8px no-repeat; }
.qv-go { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 28px; padding: 18px 22px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 400; isolation: isolate; transition: color .35s var(--ease); }
.qv-go::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: translateX(-101%); transition: transform .45s var(--ease); }
.qv-go:hover:not(:disabled) { color: var(--ink); }
.qv-go:hover:not(:disabled)::before { transform: none; }
.qv-go .ic { transition: transform .35s var(--ease); }
.qv-go:hover:not(:disabled) .ic { transform: translateX(4px); }
.qv-go:disabled { background: #ECECEC; color: var(--ink-3); cursor: not-allowed; justify-content: center; }
@media (max-width: 520px) { .qv-facts dd { font-size: 24px; } }


/* ==========================================================================
   Mục lục v3 — ring per chapter, lesson timeline, current lesson inverted
   ========================================================================== */
.lp-outline.v3 .ol-bar i.cur { background: #DADADA; }
.lp-outline.v3 .ol-n { position: relative; width: 44px; height: 44px; display: grid; place-items: center; font-size: 15px; letter-spacing: -0.02em; }
.lp-outline.v3 .ol-n > span { position: relative; }
.ol-ring { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); }
.ol-ring circle { fill: none; stroke: #E4E4E4; stroke-width: 2.5; }
.ol-ring circle.v { stroke: var(--ink); stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease); }
.ol-ch.done .ol-ring circle.v { stroke: var(--accent-600); }
.ol-ch.lock .ol-ring circle.v { stroke: transparent; }
.lp-outline.v3 .ol-ch { animation: olIn .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes olIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lp-outline.v3 .ol-list::before { left: 31px; }
.lp-outline.v3 .ol-l { align-items: center; padding: 10px 12px 10px 12px; }
.lp-outline.v3 .ol-dot em { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.lp-outline.v3 .ol-lt { gap: 2px; }
.ol-play { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: var(--ink); background: #fff; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .45s var(--ease); }
.lp-outline.v3 .ol-l:hover .ol-play { opacity: 1; transform: none; }
.lp-outline.v3 .ol-l.on { background: var(--ink); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .55); }
.lp-outline.v3 .ol-l.on .ol-lt > span { color: #fff; }
.lp-outline.v3 .ol-l.on .ol-lt small { color: rgba(255, 255, 255, .55); }
.lp-outline.v3 .ol-l.on .ol-dot { background: var(--accent); }
.lp-outline.v3 .ol-l.on .ol-dot i { background: var(--ink); }
.lp-outline.v3 .ol-l.on .ol-play { opacity: 1; transform: none; background: var(--accent); }
.lp-outline.v3 .ol-l:not(.on):hover { background: #fff; transform: translateX(2px); }
.lp-outline.v3 .ol-l { transition: background .2s, box-shadow .25s, transform .35s var(--ease); }
@media (hover: none) { .ol-play { display: none; } }
@media (prefers-reduced-motion: reduce) { .lp-outline.v3 .ol-ch { animation: none; } .ol-ring circle.v, .lp-outline.v3 .ol-l { transition: none; } }

/* ==========================================================================
   Lịch học trên Trang chủ — một tuần, Thứ Hai → Chủ Nhật
   ========================================================================== */
.sch { margin-top: 52px; }
.sch-h { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.sch-h h2 { font-size: clamp(24px, 2vw, 32px); font-weight: 400; letter-spacing: -0.03em; }
.sch-range { font-size: var(--fs-sm); color: var(--ink-3); padding-top: 6px; }
.sch-h .grow { flex: 1; }
.sch-today { height: 40px; padding: 0 16px; border-radius: 99px; background: var(--surface); font-size: var(--fs-sm); transition: background .2s; }
.sch-today:hover { background: var(--tile); }
.sch-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.sch-d { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px 14px; border-radius: 20px; background: var(--surface); transition: background .3s, color .3s; }
.sch-d span { font-size: 11.5px; letter-spacing: .06em; color: var(--ink-3); }
.sch-d b { font-size: 26px; font-weight: 300; letter-spacing: -0.05em; line-height: 1.05; }
.sch-d i { display: flex; gap: 4px; height: 6px; }
.sch-d em { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.sch-d em.exam { background: var(--accent-600); }
.sch-d.gone { background: #F8F8F8; color: var(--ink-4); }
.sch-d.gone em { background: var(--ink-4); }
.sch-d.today { background: var(--ink); color: #fff; }
.sch-d.today span { color: var(--accent); }
.sch-d.today em { background: var(--accent); }
.sch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.sch-ev { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; border-radius: 24px; background: var(--surface); color: var(--ink); min-width: 0; transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s; }
.sch-ev:hover { transform: translateY(-5px); box-shadow: 0 26px 40px -30px rgba(0, 0, 0, .6); background: #fff; }
.sch-ev.now { background: var(--ink); color: #fff; }
.sch-ev.exam { background: var(--accent); }
.sch-ev-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sch-date { display: flex; align-items: baseline; gap: 8px; }
.sch-date b { font-size: 40px; font-weight: 300; letter-spacing: -0.06em; line-height: .9; }
.sch-date small { font-size: 12px; color: var(--ink-3); }
.sch-ev.now .sch-date small { color: var(--accent); }
.sch-ev.exam .sch-date small, .sch-ev.exam .sch-meta { color: rgba(14, 14, 14, .65); }
.sch-kind { font-size: 11px; padding: 4px 10px; border-radius: 99px; background: #fff; color: var(--ink-2); white-space: nowrap; }
.sch-ev.now .sch-kind { background: rgba(255, 255, 255, .12); color: #fff; }
.sch-ev.exam .sch-kind { background: var(--ink); color: var(--accent); }
.sch-title { font-size: 15px; font-weight: 400; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.sch-ev-f { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; }
.sch-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-3); min-width: 0; }
.sch-meta span { display: inline-flex; align-items: center; gap: 5px; }
.sch-ev.now .sch-meta { color: rgba(255, 255, 255, .6); }
.sch-go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 13px; white-space: nowrap; transition: gap .3s var(--ease); }
.sch-go:hover { gap: 10px; }
.sch-ev.now .sch-go { background: var(--accent); color: var(--ink); }
.sch-done { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.sch-ev.past { opacity: .55; }
.sch-ev.past:hover { transform: none; box-shadow: none; }
.sch-empty { padding: 26px; border-radius: 24px; background: var(--surface); font-size: var(--fs-sm); color: var(--ink-3); text-align: center; }
@media (max-width: 640px) {
  .sch-strip { gap: 3px; }
  .sch-d { padding: 8px 2px 10px; border-radius: 14px; }
  .sch-d b { font-size: 19px; }
  .sch-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sch-ev, .sch-go { transition: none; } }

/* ==========================================================================
   Tích điểm
   ========================================================================== */
.rw-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin-top: 4px; }
.rw-bal { position: relative; overflow: hidden; border-radius: 32px; background: var(--ink); color: #fff; padding: 30px 34px 30px; min-height: 250px; display: flex; flex-direction: column; }
.rw-bal::after { content: ""; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 225, 91, .55), rgba(91, 225, 91, 0) 70%); animation: rwGlow 8s ease-in-out infinite alternate; }
@keyframes rwGlow { to { transform: translate(-60px, 50px) scale(1.15); } }
.rw-k { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.rw-bal .rw-k { color: rgba(255, 255, 255, .55); }
.rw-num { position: relative; z-index: 1; font-size: clamp(96px, 11vw, 168px); font-weight: 300; letter-spacing: -0.075em; line-height: .9; margin: auto 0 14px; font-variant-numeric: tabular-nums; }
.rw-sub { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--fs-sm); color: rgba(255, 255, 255, .6); }
.rw-pend { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.rw-goal { border-radius: 32px; background: var(--surface); padding: 30px 34px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.rw-goal > b { font-size: clamp(20px, 1.6vw, 26px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.2; white-space: normal; }
.rw-gbar { height: 10px; border-radius: 99px; background: #fff; overflow: hidden; margin-top: 8px; }
.rw-gbar i { display: block; height: 100%; border-radius: 99px; background: var(--accent-600); animation: rwBar 1.1s var(--ease) both; transform-origin: left; }
@keyframes rwBar { from { transform: scaleX(0); } }
.rw-gt { font-size: var(--fs-sm); color: var(--ink-3); }
.rw-gt b { color: var(--ink); font-weight: 500; }
.rw-goal .btn { align-self: flex-start; }
.rw-tabs { display: flex; gap: 6px; margin: 34px 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.rw-tabs button { white-space: nowrap; flex-shrink: 0; }
.rw-tabs button { position: relative; height: 46px; padding: 0 16px; font-size: var(--fs-lg); color: var(--ink-3); transition: color .2s; display: inline-flex; align-items: center; gap: 8px; }
.rw-tabs button:hover { color: var(--ink); }
.rw-tabs button.on { color: var(--ink); }
.rw-tabs button.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--ink); border-radius: 2px; }
.rw-tabs i { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--ink); font-size: 12px; display: inline-grid; place-items: center; }
.rw-rules { display: flex; flex-direction: column; gap: 8px; }
.rw-rule { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 22px; align-items: center; text-align: left; padding: 18px 22px 18px 26px; border-radius: 24px; background: var(--surface); transition: background .3s, transform .45s var(--ease); }
.rw-rule:hover { background: var(--ink); color: #fff; transform: translateX(6px); }
.rw-pts { font-size: 46px; font-weight: 300; letter-spacing: -0.06em; line-height: 1; white-space: nowrap; }
.rw-pts small { font-size: 24px; color: var(--accent-ink); margin-right: 2px; }
.rw-rule:hover .rw-pts small { color: var(--accent); }
.rw-rt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rw-rt b { font-weight: 400; font-size: var(--fs-lg); }
.rw-rt small { color: var(--ink-3); font-size: var(--fs-sm); }
.rw-rule:hover .rw-rt small { color: rgba(255, 255, 255, .6); }
.rw-lv { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rw-lv em { font-style: normal; font-size: 12px; padding: 3px 10px; border-radius: 99px; background: #fff; color: var(--ink-2); }
.rw-rule:hover .rw-lv em { background: rgba(255, 255, 255, .12); color: #fff; }
.rw-go { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 99px; background: #fff; color: var(--ink); font-size: var(--fs-sm); white-space: nowrap; transition: background .3s; }
.rw-rule:hover .rw-go { background: var(--accent); }
.rw-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.rw-c { border-radius: 26px; background: var(--surface); padding: 10px; display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.rw-c:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.rw-c-art { border-radius: 18px; overflow: hidden; }
.rw-c-b { display: flex; flex-direction: column; gap: 10px; padding: 14px 10px 6px; flex: 1; }
.rw-c-t { font-weight: 400; line-height: 1.35; min-height: 2.7em; }
.rw-c-p { display: flex; align-items: baseline; gap: 10px; margin-top: auto; }
.rw-c-pts { font-size: 34px; font-weight: 300; letter-spacing: -0.05em; }
.rw-c-pts small { font-size: 14px; color: var(--ink-3); letter-spacing: 0; }
.rw-c-p s { font-size: var(--fs-sm); color: var(--ink-3); }
.rw-c.ok .rw-c-pts { color: var(--accent-ink); }
.rw-hist { display: flex; flex-direction: column; }
.rw-h { display: flex; align-items: center; gap: 16px; padding: 14px 6px; border-bottom: 1px solid var(--line); }
.rw-h-pts { width: 64px; flex-shrink: 0; font-size: 26px; font-weight: 300; letter-spacing: -0.05em; color: var(--accent-ink); }
.rw-h.pending .rw-h-pts { color: var(--ink-3); }
.rw-h.rejected .rw-h-pts { color: var(--ink-4); text-decoration: line-through; }
.rw-h-pts.minus { color: var(--ink); }
.rw-h-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rw-h-t b { font-weight: 400; }
.rw-h-t small { color: var(--ink-3); font-size: var(--fs-xs); }
.rw-h.rejected .rw-h-t small { color: var(--danger); }
.rw-h-img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; cursor: zoom-in; flex-shrink: 0; }
/* evidence form */
.rw-bg { position: fixed; inset: 0; z-index: 9000; background: rgba(8, 8, 8, .55); backdrop-filter: blur(10px); display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .3s; }
.rw-bg.in { opacity: 1; }
.rw-m { position: relative; width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: #fff; border-radius: 30px; padding: 30px; display: flex; flex-direction: column; gap: 16px; transform: translateY(24px) scale(.98); transition: transform .5s var(--ease); }
.rw-bg.in .rw-m { transform: none; }
.rw-m .pv-x { position: absolute; top: 18px; right: 18px; }
.rw-m-h { display: flex; align-items: center; gap: 18px; padding-right: 40px; }
.rw-m-h h3 { font-size: 22px; font-weight: 400; margin-top: 4px; }
.rw-m-pts { width: 84px; height: 84px; flex-shrink: 0; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font-size: 30px; letter-spacing: -0.05em; }
.rw-m-lv { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rw-m-lv button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 16px; background: var(--surface); transition: background .2s, color .2s; }
.rw-m-lv button b { font-weight: 500; }
.rw-m-lv button small { font-size: 11.5px; color: var(--ink-3); }
.rw-m-lv button.on { background: var(--ink); color: #fff; }
.rw-m-lv button.on small { color: var(--accent); }
.rw-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 150px; padding: 16px; border-radius: 22px; border: 1.5px dashed var(--line-2); cursor: pointer; text-align: center; transition: background .25s, border-color .25s; }
.rw-drop:hover, .rw-drop.over { background: var(--accent-50); border-color: var(--accent-600); }
.rw-drop small { color: var(--ink-3); font-size: var(--fs-xs); }
.rw-drop-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; margin-bottom: 6px; }
.rw-thumbs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rw-th { position: relative; width: 96px; height: 96px; border-radius: 16px; overflow: hidden; background: var(--surface); display: grid; place-items: center; }
.rw-th img { width: 100%; height: 100%; object-fit: cover; }
.rw-th.wait img { opacity: .45; }
.rw-th button { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; }
.rw-th.add { border: 1.5px dashed var(--line-2); background: #fff; color: var(--ink-3); }
@media (max-width: 900px) {
  .rw-hero { grid-template-columns: 1fr; }
  .rw-rule { grid-template-columns: 1fr; gap: 10px; padding: 18px 20px; }
  .rw-pts { font-size: 38px; }
  .rw-go { grid-column: 1 / -1; justify-content: center; }
  .rw-m-lv { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rw-bal::after, .rw-gbar i { animation: none; }
  .rw-rule, .rw-c, .rw-m, .rw-bg { transition: none; }
}

/* =====================================================================
   Cộng đồng — shared bits
   ===================================================================== */
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 11.5px; letter-spacing: .04em; font-weight: 400; flex-shrink: 0; }
.grow { flex: 1; }
.is-live { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); font-weight: 400; }
.is-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(91, 225, 91, .7); animation: livePulse 1.8s infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 7px rgba(91, 225, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 225, 91, 0); } }
.pbar { display: block; height: 6px; border-radius: 99px; background: var(--tile); overflow: hidden; flex: 1; min-width: 40px; }
.pbar i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: left; animation: rwBar 1s var(--ease) both; }
.mention { color: var(--accent-ink); font-weight: 400; }
.dot-on { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; }
.who { display: inline-flex; align-items: center; gap: 10px; text-align: left; min-width: 0; }
.who-n { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.who-n b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.who:hover .who-n b { color: var(--accent-ink); }
.ttl { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; white-space: nowrap; background: var(--surface); color: var(--ink-2); }
.ttl::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.ttl-teacher { background: var(--ink); color: #fff; }
.ttl-teacher::before { background: var(--accent); }
.ttl-mentor { background: var(--accent); color: var(--ink); }
.ttl-hof { background: var(--ink); color: var(--accent); }
.fo-empty { padding: 48px 24px; border-radius: 24px; background: var(--surface); text-align: center; color: var(--ink-3); }

/* =====================================================================
   Diễn đàn
   ===================================================================== */
.fo-head { display: flex; align-items: flex-end; gap: 18px; margin: 6px 0 22px; }
.fo-t { font-size: clamp(40px, 4.4vw, 64px); font-weight: 300; letter-spacing: -0.05em; line-height: .95; }
.fo-s { display: block; margin-top: 8px; color: var(--ink-3); font-size: var(--fs-sm); }
.fo-search { margin-left: auto; width: min(380px, 34vw); }
.fo-exams { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 26px; }
.fo-exams button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border-radius: 20px; background: var(--surface); transition: background .3s, color .3s, transform .4s var(--ease); }
.fo-exams button b { font-size: 22px; font-weight: 300; letter-spacing: -0.03em; }
.fo-exams button small { font-size: 12px; color: var(--ink-3); }
.fo-exams button:hover { transform: translateY(-3px); }
.fo-exams button.on { background: var(--ink); color: #fff; }
.fo-exams button.on small { color: rgba(255, 255, 255, .6); }
.fo-exams button.on b::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: middle; }
.fo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.fo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.fo-sort { display: flex; gap: 2px; }
.fo-sort button { height: 34px; padding: 0 12px; border-radius: 99px; font-size: var(--fs-sm); color: var(--ink-3); }
.fo-sort button.on { color: var(--ink); background: var(--surface); }
.fo-list { display: flex; flex-direction: column; }
.fo-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 70px 70px 34px; gap: 16px; align-items: center; padding: 16px 12px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 18px; transition: background .25s; }
.fo-row:hover { background: var(--surface); }
.fo-row.pin { background: var(--tile-2); }
.fo-st { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink-2); }
.fo-st.ok { background: var(--accent); color: var(--ink); }
.fo-st.new { background: var(--ink); color: #fff; }
.fo-main { min-width: 0; }
.fo-main h3 { font-size: var(--fs-lg); font-weight: 400; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fo-row:hover h3 { color: var(--ink); }
.fo-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.fo-num { display: flex; flex-direction: column; align-items: flex-end; }
.fo-num b { font-size: 22px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.fo-num small { font-size: 11.5px; color: var(--ink-3); }
.fo-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.fo-card { border-radius: 26px; background: var(--surface); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.fo-ct { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.fo-top { display: flex; align-items: center; gap: 10px; }
.fo-top .who { flex: 1; }
.fo-rk { width: 18px; font-size: 13px; color: var(--ink-3); flex-shrink: 0; }
.fo-tk { font-size: 20px; font-weight: 300; letter-spacing: -0.04em; white-space: nowrap; }
.fo-tk small { font-size: 11px; color: var(--ink-3); letter-spacing: 0; }
.fo-q { display: flex; align-items: center; gap: 10px; text-align: left; min-width: 0; padding: 8px 10px; margin: -4px -10px; border-radius: 12px; font-size: var(--fs-sm); }
.fo-q:hover { background: #fff; }
.fo-ranks > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fo-ranks small { color: var(--ink-3); font-size: 12px; }
/* topic */
.fo-crumb { display: flex; align-items: center; gap: 10px; margin: 6px 0 18px; font-size: var(--fs-sm); color: var(--ink-3); }
.fo-crumb button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: 99px; background: var(--surface); color: var(--ink); }
.fo-crumb span + span::before { content: "/"; margin-right: 10px; color: var(--line-2); }
.tp-head { margin-bottom: 22px; max-width: 980px; }
.tp-head h1 { font-size: clamp(28px, 2.6vw, 40px); font-weight: 300; letter-spacing: -0.035em; line-height: 1.12; }
.tp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; color: var(--ink-3); font-size: var(--fs-sm); }
.tp-posts { display: flex; flex-direction: column; gap: 12px; max-width: 980px; }
.tpo { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.tpo.first { box-shadow: 0 0 0 1px var(--line-2); }
.tpo.best { box-shadow: 0 0 0 2px var(--accent); }
.tp-a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 12px; background: var(--tile-2); text-align: center; }
.tp-a b { font-weight: 400; font-size: var(--fs-sm); line-height: 1.3; }
.tp-a small { font-size: 11.5px; color: var(--ink-3); }
.tp-b { padding: 22px 26px 14px; min-width: 0; display: flex; flex-direction: column; }
.tp-best { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 26px; padding: 0 12px; border-radius: 99px; background: var(--accent); font-size: 12.5px; margin-bottom: 12px; }
.tp-text { font-size: 16px; line-height: 1.7; overflow-x: auto; overscroll-behavior: contain; position: relative; }
.tp-text .katex-display { margin: .7em 0; }
.tp-f { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); }
.tp-act { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px; font-size: var(--fs-sm); color: var(--ink-2); transition: background .2s, color .2s; }
.tp-act:hover { background: var(--surface); color: var(--ink); }
.tp-act.on { background: var(--ink); color: #fff; }
.tp-act.on svg { color: var(--accent); }
.tp-act.static { cursor: default; }
.tp-act.static:hover { background: none; }
.tp-act.ghost { color: var(--ink-3); }
/* editor */
.ed { margin-top: 18px; max-width: 980px; border-radius: 26px; background: var(--surface); padding: 10px; }
.ed-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 2px 4px 8px; }
.ed-tools button { min-width: 38px; height: 34px; padding: 0 10px; border-radius: 10px; font-size: 14px; color: var(--ink-2); font-family: "Times New Roman", serif; font-style: italic; }
.ed-tools button:hover { background: #fff; color: var(--ink); }
.ed-tools .ed-pv { font-family: inherit; font-style: normal; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.ed-tools .ed-pv.on { background: var(--ink); color: #fff; }
.ed textarea { display: block; width: 100%; min-height: 110px; resize: vertical; border: 0; border-radius: 18px; background: #fff; padding: 16px 18px; font: inherit; font-weight: 300; line-height: 1.6; outline: none; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s; }
.ed textarea:focus { box-shadow: 0 0 0 1.5px var(--ink); }
.ed-out { margin-top: 8px; padding: 14px 18px; border-radius: 18px; background: #fff; line-height: 1.7; border: 1px dashed var(--line-2); overflow-x: auto; }
.ed-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 6px 2px 10px; }
/* modal (new topic, profile) */
.sm-bg { position: fixed; inset: 0; z-index: 9000; background: rgba(8, 8, 8, .55); backdrop-filter: blur(10px); display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .3s; }
.sm-bg.in { opacity: 1; }
.so-m { position: relative; width: min(720px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: #fff; border-radius: 30px; padding: 30px; display: flex; flex-direction: column; gap: 16px; transform: translateY(24px) scale(.98); transition: transform .5s var(--ease); }
.so-m.narrow { width: min(440px, 100%); }
.sm-bg.in .so-m { transform: none; }
.so-m .pv-x { position: absolute; top: 18px; right: 18px; }
.sm-h h3 { font-size: 26px; font-weight: 300; letter-spacing: -0.03em; margin-top: 4px; }
.sm-k { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.so-m .ed { margin-top: 0; }
.pf { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-top: 6px; }
.pf-av { position: relative; margin-bottom: 4px; }
.pf-av .dot-on { width: 18px; height: 18px; border-width: 3px; right: 4px; bottom: 4px; }
.pf h3 { font-size: 26px; font-weight: 300; letter-spacing: -0.03em; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin: 12px 0 4px; border-radius: 20px; background: var(--surface); padding: 14px 6px; }
.pf-stats div { display: flex; flex-direction: column; }
.pf-stats b { font-size: 28px; font-weight: 300; letter-spacing: -0.05em; }
.pf-stats small { font-size: 11.5px; color: var(--ink-3); }
.pf-cs { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; margin-bottom: 8px; }
.pf-cs > div { display: grid; grid-template-columns: auto minmax(0, 1fr) 80px 40px; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.pf-cs b { font-weight: 400; text-align: right; }

/* =====================================================================
   Nhóm học tập
   ===================================================================== */
.gr { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 6px; }
.gr-list { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 16px; }
.gr-list > button { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 20px; text-align: left; transition: background .25s; }
.gr-list > button:hover { background: var(--surface); }
.gr-list > button.on { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
.gr-art { width: 64px; height: 48px; border-radius: 12px; overflow: hidden; flex-shrink: 0; display: block; }
.gr-art > * { width: 100%; height: 100%; }
.gr-n { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.gr-n b { font-weight: 400; font-size: var(--fs-sm); }
.gr-n small { font-size: 12px; color: var(--ink-3); }
.gr-n em { font-style: normal; color: var(--accent-ink); }
.gr-main { min-width: 0; }
.gr-cover { position: relative; border-radius: 32px; overflow: hidden; background: var(--ink); color: #fff; min-height: 220px; display: flex; align-items: flex-end; }
.gr-cover-art { position: absolute; inset: 0; opacity: .5; }
.gr-cover-art > * { width: 100%; height: 100%; }
.gr-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 14, 14, .95) 30%, rgba(14, 14, 14, .2)); }
.gr-cover-b { position: relative; z-index: 1; padding: 28px 32px; display: flex; flex-direction: column; gap: 10px; }
.gr-k { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.gr-cover h1 { color: #fff; font-size: clamp(28px, 2.8vw, 42px); font-weight: 300; letter-spacing: -0.04em; line-height: 1.05; max-width: 640px; }
.gr-stack { display: flex; align-items: center; }
.gr-stack > :not(span) { margin-right: -10px; box-shadow: 0 0 0 3px var(--ink); border-radius: 50%; }
.gr-stack > span { margin-left: 22px; font-size: var(--fs-sm); color: rgba(255, 255, 255, .7); }
.gr-stack .is-live { color: var(--accent); }
.gr-tabs { display: flex; gap: 6px; margin: 18px 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.gr-tabs button, .fr-tabs button { position: relative; height: 46px; padding: 0 16px; font-size: var(--fs-lg); color: var(--ink-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.gr-tabs button:hover, .fr-tabs button:hover { color: var(--ink); }
.gr-tabs button.on, .fr-tabs button.on { color: var(--ink); }
.gr-tabs button.on::after, .fr-tabs button.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--ink); border-radius: 2px; }
.fr-tabs { display: flex; gap: 6px; margin: 6px 0 22px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.fr-tabs i { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--ink); font-size: 12px; display: inline-grid; place-items: center; }
.gr-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.gr-feed { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gr-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
/* composer */
.cp { border-radius: 26px; background: var(--surface); padding: 16px 16px 12px; }
.cp-top { display: flex; gap: 12px; align-items: flex-start; }
.cp textarea { flex: 1; min-height: 52px; resize: vertical; border: 0; border-radius: 18px; background: #fff; padding: 14px 16px; font: inherit; font-weight: 300; outline: none; box-shadow: 0 0 0 1px var(--line); }
.cp textarea:focus { box-shadow: 0 0 0 1.5px var(--ink); }
.cp-poll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0 54px; }
.input.sm { height: 42px; padding: 0 14px; font-size: var(--fs-sm); }
.cp-f { display: flex; align-items: center; gap: 4px; margin-top: 10px; padding-left: 50px; }
.cp-f > button:not(.btn) { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 99px; font-size: var(--fs-sm); color: var(--ink-2); transition: background .2s; }
.cp-f > button:not(.btn):hover { background: #fff; }
.cp-f > button.on { background: var(--ink); color: #fff; }
.cp-f > button.on svg { color: var(--accent); }
/* post */
.ps { border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line); padding: 18px 20px 12px; animation: psIn .5s var(--ease) both; }
@keyframes psIn { from { opacity: 0; transform: translateY(10px); } }
.ps.pinned { box-shadow: 0 0 0 1px var(--line-2); background: linear-gradient(180deg, var(--tile-2), #fff 120px); }
.ps-h { display: flex; align-items: center; gap: 10px; }
.ps-h .who { min-width: 0; }
.ps-pin { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); }
.ps-kind { height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; display: inline-flex; align-items: center; background: var(--surface); color: var(--ink-2); white-space: nowrap; }
.ps-kind.k-q { background: var(--ink); color: #fff; }
.ps.solved .ps-kind.k-q { background: var(--accent); color: var(--ink); }
.ps-kind.k-a { background: var(--accent-50); color: var(--accent-ink); }
.ps-text { margin: 12px 0 4px; font-size: 16px; line-height: 1.65; overflow-x: auto; overscroll-behavior: contain; position: relative; }
.poll { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; }
.poll-o { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 46px; padding: 0 16px; border-radius: 14px; background: var(--surface); overflow: hidden; text-align: left; }
.poll-o i { position: absolute; inset: 0 auto 0 0; background: var(--tile); transition: width .7s var(--ease); }
.poll-o.on i { background: var(--accent); }
.poll-o span, .poll-o b { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.poll-o b { font-weight: 400; font-variant-numeric: tabular-nums; }
.poll-o:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.rx { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rx button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px; font-size: var(--fs-sm); color: var(--ink-2); transition: background .2s, transform .3s var(--ease); }
.rx button:hover { background: var(--surface); }
.rx button:active { transform: scale(.92); }
.rx button b { font-weight: 500; font-size: 12.5px; }
.rx button.on { background: var(--ink); color: #fff; }
.rx button.on svg { color: var(--accent); }
.rx-sum { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.rx.compact { border: 0; padding: 0; margin-left: auto; }
.rx.compact button { height: 30px; padding: 0 9px; }
.gc { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.gc-more { align-self: flex-start; font-size: var(--fs-sm); color: var(--ink-3); }
.gc-more:hover { color: var(--ink); }
.gc-i { display: flex; gap: 10px; align-items: flex-start; }
.gc-b { min-width: 0; }
.gc-bub { display: inline-block; max-width: 100%; padding: 10px 14px; border-radius: 18px; background: var(--surface); line-height: 1.55; overflow-x: auto; }
.gc-bub b { font-weight: 500; margin-right: 4px; }
.gc-i.best .gc-bub { background: var(--accent-50); box-shadow: inset 0 0 0 1.5px var(--accent); }
.gc-f { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 4px 6px 0; font-size: 12px; color: var(--ink-3); }
.gc-f button { color: var(--ink-2); font-size: 12px; }
.gc-f button:hover { color: var(--accent-ink); }
.gc-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-ink); }
.gc-in { display: flex; gap: 10px; align-items: center; }
.gc-in input { flex: 1; height: 40px; border-radius: 99px; border: 0; background: var(--surface); padding: 0 16px; font: inherit; font-weight: 300; font-size: var(--fs-sm); outline: none; }
.gc-in input:focus { box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; }
.ms { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 22px; background: var(--ink); color: #fff; animation: psIn .5s var(--ease) both; }
.ms > svg { color: var(--accent); flex-shrink: 0; }
.ms > span { flex: 1; min-width: 0; }
.ms > small { color: rgba(255, 255, 255, .5); font-size: 12px; white-space: nowrap; }
.ms .rx.compact button { color: rgba(255, 255, 255, .7); }
.ms .rx.compact button:hover { background: rgba(255, 255, 255, .1); }
.ms .rx.compact button.on { background: var(--accent); color: var(--ink); }
.ms .rx.compact button.on svg { color: var(--ink); }
/* side */
.rk { display: grid; grid-template-columns: 18px 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 14px; }
.rk.me { background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent); }
.rk-n { font-size: 13px; color: var(--ink-3); text-align: center; }
.rk-b { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rk-b b { font-weight: 400; font-size: var(--fs-sm); }
.rk-b .pbar { height: 4px; }
.rk-s { display: flex; flex-direction: column; align-items: flex-end; }
.rk-s b { font-size: 22px; font-weight: 300; letter-spacing: -0.05em; line-height: 1; }
.rk-s small { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.rk-me { font-size: var(--fs-sm); color: var(--ink-3); padding-top: 8px; border-top: 1px solid var(--line); }
.rk-me b { color: var(--ink); font-weight: 500; }
.st-row { display: flex; flex-direction: column; gap: 2px; }
.st-row small { padding-left: 44px; font-size: 12px; color: var(--ink-3); margin-top: -6px; }
.ev { display: flex; align-items: center; gap: 12px; text-align: left; min-width: 0; padding: 6px 8px; margin: 0 -8px; border-radius: 14px; }
.ev:hover { background: #fff; }
.ev > b { width: 50px; height: 50px; border-radius: 14px; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 300; font-size: 15px; flex-shrink: 0; }
.ev > span { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-sm); }
.ev small { color: var(--ink-3); font-size: 12px; }
.fc { position: relative; overflow: hidden; border-radius: 26px; background: var(--surface); padding: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fc-t { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.fc-clock { font-size: 64px; font-weight: 300; letter-spacing: -0.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.fc small { color: var(--ink-3); font-size: 12.5px; margin-bottom: 8px; }
.fc.on { background: var(--ink); color: #fff; }
.fc.on::after { content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 225, 91, .5), rgba(91, 225, 91, 0) 70%); animation: rwGlow 6s ease-in-out infinite alternate; }
.fc.on .fc-t, .fc.on small { color: rgba(255, 255, 255, .6); }
.fc.on .fc-clock { color: var(--accent); }
.fc > * { position: relative; z-index: 1; }
/* members & files */
.mb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.mb { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 14px 16px; border-radius: 24px; background: var(--surface); text-align: center; min-width: 0; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.mb:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.mb > b { font-weight: 400; max-width: 100%; }
.mb > small { max-width: 100%; font-size: 12px; }
.mb .btn { margin-top: 6px; width: 100%; }
.mb-av { position: relative; display: inline-block; border-radius: 50%; flex-shrink: 0; }
.mb-p { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 12px; color: var(--ink-3); }
.fl { display: flex; flex-direction: column; }
.fl-i { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; text-align: left; border-bottom: 1px solid var(--line); }
.fl-i:hover { background: var(--surface); }
.fl-ic { position: relative; width: 46px; height: 46px; border-radius: 14px; background: var(--ink); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.fl-ic em { position: absolute; bottom: -4px; right: -6px; font-style: normal; font-size: 9.5px; padding: 1px 5px; border-radius: 6px; background: var(--accent); color: var(--ink); }
.fl-n { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fl-n b { font-weight: 400; }
.fl-n small { color: var(--ink-3); font-size: 12px; }

/* =====================================================================
   Bạn bè đang học
   ===================================================================== */
.fp-hero { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; margin-bottom: 18px; }
.fp-rank { border-radius: 32px; background: var(--ink); color: #fff; padding: 28px 30px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 240px; position: relative; overflow: hidden; }
.fp-rank::after { content: ""; position: absolute; left: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 225, 91, .45), rgba(91, 225, 91, 0) 70%); }
.fp-rank > * { position: relative; z-index: 1; }
.fp-rank .rw-k { color: rgba(255, 255, 255, .55); margin-bottom: auto; }
.fp-rank b { font-size: 120px; font-weight: 300; letter-spacing: -0.08em; line-height: .9; }
.fp-rank b small { font-size: 36px; color: rgba(255, 255, 255, .45); letter-spacing: -0.03em; margin-left: 4px; }
.fp-rank > span:last-child { color: rgba(255, 255, 255, .6); font-size: var(--fs-sm); margin-top: 6px; }
.fp-podium { border-radius: 32px; background: var(--surface); padding: 22px 24px 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 1fr; gap: 14px; height: 240px; }
.pd { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.pd > i { width: 100%; height: var(--h); flex-shrink: 0; border-radius: 18px 18px 8px 8px; background: #fff; display: flex; justify-content: center; padding-top: 10px; transform-origin: bottom; animation: pdUp .9s var(--ease) both; }
.pd:nth-child(2) > i { animation-delay: .08s; } .pd:nth-child(3) > i { animation-delay: .16s; } .pd:nth-child(4) > i { animation-delay: .24s; } .pd:nth-child(5) > i { animation-delay: .32s; }
@keyframes pdUp { from { transform: scaleY(0); } }
.pd > i b { font-size: 26px; font-weight: 300; letter-spacing: -0.05em; font-style: normal; }
.pd:first-child > i { background: var(--accent); }
.pd.me > i { background: var(--ink); color: #fff; }
.pd > small { font-size: 12.5px; max-width: 100%; }
.pd > em { position: absolute; top: 0; left: 0; font-style: normal; font-size: 12px; color: var(--ink-3); }
.pd-av { border-radius: 50%; box-shadow: 0 0 0 3px var(--surface); }
.fp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.fp { border-radius: 26px; background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 14px; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.fp:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.fp-h { display: flex; align-items: center; gap: 12px; }
.fp-h b { display: block; font-weight: 400; }
.fp-h small { font-size: 12.5px; color: var(--ink-3); }
.fp-c { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 18px; background: #fff; }
.fp-art { width: 70px; height: 52px; border-radius: 12px; overflow: hidden; flex-shrink: 0; display: block; }
.fp-art > * { width: 100%; height: 100%; }
.fp-c small { display: block; font-size: 12px; color: var(--ink-3); }
.fp-c b { display: block; font-weight: 400; font-size: var(--fs-sm); }
.fp-p { display: flex; align-items: center; gap: 12px; }
.fp-pc { font-size: 40px; font-weight: 300; letter-spacing: -0.06em; line-height: 1; min-width: 78px; }
.fp-pc small { font-size: 18px; color: var(--ink-3); }
.fp-p > small { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.fp-more { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-more span { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: #fff; color: var(--ink-2); }
/* dashboard card */
.fa { display: flex; flex-direction: column; gap: 4px; }
.fa-i { display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: 8px; margin: 0 -8px; border-radius: 16px; text-align: left; }
.fa-i:hover { background: #fff; }
.fa-i .mb-av .dot-on { width: 10px; height: 10px; right: 0; bottom: 0; }
.fa-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fa-b b { font-weight: 400; font-size: var(--fs-sm); }
.fa-b small { font-size: 12px; color: var(--ink-3); }
.fa-b .pbar { height: 4px; }
.fa-pc { font-size: 20px; font-weight: 300; letter-spacing: -0.05em; text-align: right; }

/* =====================================================================
   Tin nhắn
   ===================================================================== */
.dm { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: calc(100vh - 210px); min-height: 480px; border-radius: 30px; background: var(--surface); overflow: hidden; }
.dm-list { overflow-y: auto; overscroll-behavior: contain; padding: 10px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); }
.dm-i { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 18px; text-align: left; transition: background .2s; }
.dm-i:hover { background: #fff; }
.dm-i.on { background: var(--ink); color: #fff; }
.dm-i.on small { color: rgba(255, 255, 255, .6); }
.dm-n { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dm-n b { font-weight: 400; }
.dm-n small { font-size: 12.5px; color: var(--ink-3); }
.dm-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.dm-r small { font-size: 11px; color: var(--ink-3); }
.dm-r i { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--ink); font-size: 11px; display: grid; place-items: center; }
.dm-sep { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); padding: 16px 10px 6px; }
.dm-main { display: flex; flex-direction: column; min-width: 0; background: #fff; border-radius: 26px; margin: 8px; }
.dm-h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.dm-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; position: relative; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.dm-day { align-self: center; font-size: 12px; color: var(--ink-3); padding: 10px 0 4px; }
.bb { align-self: flex-start; max-width: min(560px, 78%); display: flex; flex-direction: column; gap: 2px; animation: psIn .35s var(--ease) both; }
.bb-t { padding: 10px 15px; border-radius: 20px 20px 20px 6px; background: var(--surface); line-height: 1.55; overflow-x: auto; }
.bb small { font-size: 11px; color: var(--ink-3); padding: 0 8px; }
.bb.me { align-self: flex-end; align-items: flex-end; }
.bb.me .bb-t { background: var(--ink); color: #fff; border-radius: 20px 20px 6px 20px; }
.dm-in { display: flex; align-items: flex-end; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }
.dm-in textarea { flex: 1; resize: none; max-height: 140px; min-height: 48px; border: 0; border-radius: 24px; background: var(--surface); padding: 13px 18px; font: inherit; font-weight: 300; outline: none; }
.dm-in textarea:focus { box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; }
.dm-in .btn { width: 48px; height: 48px; padding: 0; border-radius: 50%; flex-shrink: 0; }
.pub-me { border-radius: 50%; transition: transform .3s var(--ease); }
.pub-me:hover { transform: scale(1.06); }
.topbar .icon-btn.on { background: var(--ink); color: #fff; }

/* =====================================================================
   Đăng nhập / Đăng ký
   ===================================================================== */
.au { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100vh; background: #fff; }
.au-form { display: flex; flex-direction: column; padding: 28px clamp(24px, 5vw, 80px) 28px; }
.au-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.au-top .brand-in { cursor: pointer; }
.au-sw { font-size: var(--fs-sm); color: var(--ink-3); }
.au-sw b { color: var(--ink); font-weight: 500; }
.au-sw:hover b { color: var(--accent-ink); }
.au-box { width: min(440px, 100%); margin: auto; padding: 40px 0; display: flex; flex-direction: column; gap: 16px; }
.au-box h1 { font-size: clamp(48px, 5vw, 76px); font-weight: 300; letter-spacing: -0.06em; line-height: .95; }
.au-sub { color: var(--ink-3); margin: -4px 0 10px; }
.au-pw { position: relative; }
.au-pw .input { width: 100%; padding-right: 52px; }
.au-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); }
.au-eye:hover, .au-eye.on { color: var(--ink); background: var(--surface); }
.au-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.au-meter i { height: 4px; border-radius: 4px; background: var(--tile); transition: background .3s; }
.au-meter[data-n="1"] i:nth-child(-n+1), .au-meter[data-n="2"] i:nth-child(-n+2) { background: var(--ink-3); }
.au-meter[data-n="3"] i:nth-child(-n+3), .au-meter[data-n="4"] i { background: var(--accent-600); }
.au-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.au-chips button { height: 40px; padding: 0 16px; border-radius: 99px; background: var(--surface); font-size: var(--fs-sm); transition: background .2s, color .2s; }
.au-chips button:hover { background: var(--tile); }
.au-chips button.on { background: var(--ink); color: #fff; }
.au-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.au-agree { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.au-agree input { width: 18px; height: 18px; accent-color: var(--ink); }
.au-link { font-size: var(--fs-sm); color: var(--ink-2); }
.au-link:hover { color: var(--accent-ink); }
.au-err { padding: 12px 16px; border-radius: 14px; background: var(--danger-50); color: var(--danger); font-size: var(--fs-sm); }
.au-err[hidden] { display: none; }
.au-go { width: 100%; justify-content: center; margin-top: 4px; }
.au-demo { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; border: 1.5px dashed var(--line-2); text-align: left; transition: border-color .2s, background .2s; }
.au-demo:hover { border-color: var(--accent-600); background: var(--accent-50); }
.au-demo-k { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; padding: 6px 10px; border-radius: 10px; background: var(--ink); color: var(--accent); flex-shrink: 0; }
.au-demo > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.au-demo b { font-weight: 400; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; }
.au-demo small { font-size: 12px; color: var(--ink-3); }
.au-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-3); }
.au-back:hover { color: var(--ink); }
.au-side { position: relative; overflow: hidden; margin: 12px; border-radius: 36px; background: var(--ink); color: #fff; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.au-side::before { content: ""; position: absolute; right: -140px; top: -140px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 225, 91, .55), rgba(91, 225, 91, 0) 70%); animation: rwGlow 9s ease-in-out infinite alternate; }
.au-side > * { position: relative; z-index: 1; }
.au-big b { display: block; font-size: clamp(80px, 9vw, 150px); font-weight: 300; letter-spacing: -0.075em; line-height: .9; color: var(--accent); }
.au-big span { display: block; margin-top: 12px; font-size: var(--fs-lg); color: rgba(255, 255, 255, .7); }
.au-feed { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.au-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 22px; background: rgba(255, 255, 255, .07); backdrop-filter: blur(8px); animation: auIn .8s var(--ease) both; animation-delay: var(--d); }
.au-card:nth-child(2) { margin-left: 36px; }
.au-card:nth-child(3) { margin-left: 12px; }
@keyframes auIn { from { opacity: 0; transform: translateX(30px); } }
.au-card b { display: block; font-weight: 400; }
.au-card small { display: block; font-size: 12px; color: rgba(255, 255, 255, .55); margin: 2px 0 8px; }
.au-card .pbar { background: rgba(255, 255, 255, .14); height: 4px; }
.au-card .pbar i { background: var(--accent); }
.au-card .is-live { color: var(--accent); font-size: 12px; white-space: nowrap; }
.au-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 40px; }
.au-stats b { display: block; font-size: 44px; font-weight: 300; letter-spacing: -0.05em; line-height: 1; }
.au-stats span { font-size: 12.5px; color: rgba(255, 255, 255, .55); }

@media (max-width: 1280px) {
  .fo-grid, .gr-cols { grid-template-columns: minmax(0, 1fr) 280px; }
  .gr { grid-template-columns: 220px minmax(0, 1fr); }
  .gr-art { width: 48px; height: 40px; }
}
@media (max-width: 1100px) {
  .gr-cols, .fo-grid { grid-template-columns: minmax(0, 1fr); }
  .gr-side, .fo-side { position: static; }
}
@media (max-width: 900px) {
  .fo-head { flex-wrap: wrap; align-items: flex-start; }
  .fo-search { order: 3; width: 100%; margin: 0; }
  .fo-head .btn { margin-left: auto; }
  .fo-exams { grid-template-columns: repeat(7, 92px); overflow-x: auto; scrollbar-width: none; margin-right: -24px; padding-right: 24px; }
  .fo-row { grid-template-columns: 36px minmax(0, 1fr) 48px; gap: 12px; padding: 14px 6px; }
  .fo-row .fo-v, .fo-row .fo-last { display: none; }
  .fo-st { width: 36px; height: 36px; }
  .tpo { grid-template-columns: 1fr; }
  .tp-a { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; padding: 12px 16px; text-align: left; }
  .tp-a button .av, .tp-a button svg:first-child { width: 36px !important; height: 36px !important; }
  .tp-b { padding: 16px 18px 10px; }
  .gr { grid-template-columns: minmax(0, 1fr); }
  .gr-list { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; margin-right: -24px; padding-right: 24px; }
  .gr-list > button { flex-shrink: 0; width: 240px; background: var(--surface); }
  .gr-cover { min-height: 180px; border-radius: 26px; }
  .gr-cover-b { padding: 22px; }
  .cp-poll { grid-template-columns: 1fr; margin-left: 0; }
  .cp-f { padding-left: 0; flex-wrap: wrap; }
  .fp-hero { grid-template-columns: minmax(0, 1fr); }
  .fp-rank { min-height: 0; flex-direction: row; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
  .fp-rank .rw-k { width: 100%; }
  .fp-rank b { font-size: 84px; }
  .fp-podium { height: 210px; gap: 8px; padding: 18px 14px 14px; }
  .dm { grid-template-columns: minmax(0, 1fr); height: auto; }
  .dm-list { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .dm-list .dm-i { flex-direction: column; width: 84px; flex-shrink: 0; text-align: center; gap: 6px; padding: 8px 4px; }
  .dm-list .dm-n small, .dm-list .dm-r small, .dm-sep { display: none; }
  .dm-list .dm-n b { font-size: 12px; }
  .dm-list .dm-r { position: absolute; }
  .dm-i { position: relative; }
  .dm-list .dm-r i { position: absolute; top: -2px; left: 20px; }
  .dm-body { min-height: 50vh; max-height: 60vh; padding: 14px; }
  .bb { max-width: 88%; }
  .au { grid-template-columns: 1fr; }
  .au-side { display: none; }
  .au-box { padding: 24px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .is-live::before, .ps, .ms, .bb, .pd > i, .au-card, .au-side::before, .fc.on::after, .pbar i { animation: none; }
  .fo-exams button, .mb, .fp, .rx button, .poll-o i { transition: none; }
}
/* lesson page · Xếp hạng */
.lp-rank { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overscroll-behavior: contain; position: relative; padding: 2px; }
.lr-hero { position: relative; overflow: hidden; border-radius: 24px; background: var(--ink); color: #fff; padding: 16px 14px 0; isolation: isolate; }
.lr-hero::before { content: ""; position: absolute; left: 50%; top: 10px; width: 260px; height: 260px; margin-left: -130px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 225, 91, .4), rgba(91, 225, 91, 0) 65%); z-index: -1; animation: rwGlow 9s ease-in-out infinite alternate; }
.lr-top { display: flex; justify-content: space-between; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.lr-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 6px; margin-top: 14px; height: 210px; }
.lr-pd { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; height: 100%; justify-content: flex-end; }
.lr-pd > b { font-weight: 400; font-size: 13px; max-width: 100%; color: #fff; }
.lr-pd.me > b { color: var(--accent); }
.lr-av { position: relative; display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px rgba(255, 255, 255, .18); }
.lr-pd.p1 .lr-av { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--accent); }
.lr-crown { position: absolute; left: 50%; top: -17px; width: 26px; height: 18px; margin-left: -13px; fill: var(--accent); filter: drop-shadow(0 2px 6px rgba(91, 225, 91, .6)); }
.lr-blk { position: relative; width: 100%; border-radius: 16px 16px 0 0; background: rgba(255, 255, 255, .1); display: flex; flex-direction: column; align-items: center; padding-top: 10px; transform-origin: bottom; animation: pdUp .9s var(--ease) both; }
.lr-pd.p1 .lr-blk { height: 96px; background: var(--accent); color: var(--ink); animation-delay: .15s; }
.lr-pd.p2 .lr-blk { height: 70px; }
.lr-pd.p3 .lr-blk { height: 52px; animation-delay: .3s; }
.lr-blk em { font-style: normal; font-size: 26px; font-weight: 300; letter-spacing: -0.05em; line-height: 1; }
.lr-pd.p1 .lr-blk em { font-size: 34px; }
.lr-blk small { position: absolute; bottom: 6px; font-size: 11px; opacity: .55; }
.lr-pd.me .lr-blk { box-shadow: inset 0 0 0 1.5px var(--accent); }
.lr-track { padding: 6px 8px 0; }
.lr-line { position: relative; height: 34px; margin: 0 6px; }
.lr-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: linear-gradient(90deg, var(--tile), var(--line-2)); }
.lr-line i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ink-3); }
.lr-line i.top { background: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.lr-line i.me { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--accent); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent); z-index: 1; }
.lr-you { position: absolute; top: -14px; transform: translateX(-50%); font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--ink); color: #fff; white-space: nowrap; }
.lr-ax { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); padding: 0 2px; }
.lr-l { display: flex; flex-direction: column; gap: 2px; }
.lr-r { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 14px; }
.lr-r:hover { background: #fff; }
.lr-r.me { background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent); }
.lr-n { font-size: 13px; color: var(--ink-3); text-align: center; }
.lr-r b { font-weight: 400; font-size: var(--fs-sm); }
.lr-s { font-size: 20px; font-weight: 300; letter-spacing: -0.05em; }
.lr-me { border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.lr-me-n { display: flex; align-items: baseline; justify-content: space-between; }
.lr-me-n span { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lr-me-n b { font-size: 44px; font-weight: 300; letter-spacing: -0.07em; line-height: 1; }
.lr-me-n b small { font-size: 18px; color: var(--ink-3); letter-spacing: -0.02em; }
.lr-me-t { font-size: 14.5px; line-height: 1.45; }
.lr-me-t b { font-weight: 500; }
.lr-me-m { display: flex; gap: 6px; flex-wrap: wrap; }
.lr-me-m span { font-size: 12px; color: var(--ink-3); padding: 4px 10px; border-radius: 99px; background: var(--surface); }
.lr-me-m b { color: var(--ink); font-weight: 500; }
.lr-go { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 99px; background: var(--ink); color: #fff; font-size: var(--fs-sm); transition: background .25s, color .25s; }
.lr-go:hover { background: var(--accent); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .lr-blk, .lr-hero::before { animation: none; } }
.ctile { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 8px; background: var(--ink); color: #fff; border-radius: inherit; }
.ctile b { font-weight: 400; font-size: 14px; letter-spacing: .02em; color: var(--accent); line-height: 1; }
.ctile small { font-size: 10px; color: rgba(255, 255, 255, .55); line-height: 1; }
.gr-cover-art { left: 42%; }
.gr-cover-art .cb-text, .gr-cover-art .cb-name, .gr-cover-art .cb-logo { display: none; }
.gr-cover::after { background: linear-gradient(90deg, var(--ink) 42%, rgba(14, 14, 14, .55) 62%, rgba(14, 14, 14, 0)); }
.gr-cover-art { opacity: .9; }
.fo-st.sm { width: 26px; height: 26px; flex-shrink: 0; }
.ed-f code { font: inherit; background: #fff; padding: 2px 6px; border-radius: 6px; }
.tp-head, .tp-posts, .ed { max-width: none; }
@media (max-width: 640px) {
  .fo-exams button { padding: 10px 12px; }
  .fo-exams button b { font-size: 18px; }
  .fo-head .btn { margin-left: 0; }
  .fp-c { flex-wrap: nowrap; }
  .fp-p > small { display: none; }
  .gr-cover h1 { font-size: 24px; }
  .gr-stack > :not(span):nth-child(n+5) { display: none; }
  .gr-stack > span { margin-left: 18px; }
  .cp-f > button:not(.btn) { padding: 0 8px; }
  .rx button span { display: none; }
  .rx-sum { width: 100%; margin: 4px 0 0; }
  .ps { padding: 14px 14px 10px; }
  .dm-h .who-n .ttl { display: none; }
  .tp-f .tp-act { padding: 0 8px; }
}
.fo-exams button b { white-space: nowrap; }
.fo-sort button { white-space: nowrap; }
@media (max-width: 640px) {
  .ps-pin, .ps-h > small { display: none; }
  .dm-h > small { display: none; }
  .fo-sort { width: 100%; overflow-x: auto; scrollbar-width: none; }
}

/* Re-drawing the same page (html.re) never replays entrance animations */
html.re :is(.lp-outline.v3 .ol-ch, .fd, .ci, .er-row, .qv-sheet i, .ps, .ms, .bb, .pd > i, .pbar i, .rw-gbar i, .au-card, .champ, .hx-word, .hx-tag, .hx-p, .bn-big span, .lp-rank .lr-in, .lr-hero::before) { animation: none !important; }
html.re .rv { opacity: 1; transform: none; transition: none; }
/* math editor inside the different composers */
.ed .mxe-area { min-height: 110px; }
.ed-f b { font-weight: 500; font-family: "Times New Roman", serif; }
.cp-top .mxe { flex: 1; min-width: 0; }
.cp-top .mxe-area { min-height: 52px; }
.cmp-box .mxe, .cm-rbox .mxe { flex: 1; min-width: 0; background: transparent; box-shadow: none; padding: 0; }
.cmp-box .mxe-area, .cm-rbox .mxe-area { font-size: 14px; }
.cmp-box .mxe-fx, .cm-rbox .mxe-fx { background: #fff; width: 32px; height: 32px; }
.cm-rbox { align-items: center; }
.gc-in .mxe, .dm-in .mxe { flex: 1; min-width: 0; background: var(--surface); box-shadow: none; border-radius: 22px; padding: 4px 4px 4px 16px; }
.gc-in .mxe:focus-within, .dm-in .mxe:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.gc-in .mxe-area, .dm-in .mxe-area { font-size: var(--fs-sm); }
.gc-in .mxe-fx, .dm-in .mxe-fx { background: #fff; width: 32px; height: 32px; }
.gc-in { align-items: flex-start; }
.dm-in .mxe { padding: 7px 7px 7px 18px; }
.dm-in .mxe-area { font-size: 15px; }