/* =========================================================
   EngNote - Notebook design system (Arial)
   Tokens, then shell (cover + notebook), then components.
   Tên biến cũ (--bg, --surface, --surface-2...) vẫn dùng được: là bí danh trỏ về token mới.
   ========================================================= */
:root{
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --paper:#fbf9f3;--line:#e8ebf1;--margin:#f1b8b8;--card:#fffefa;--card-2:#f4f1e8;
  --ink:#1e3a6e;--text:#2a2f38;--muted:#6b7280;--border:#e0dacb;
  --accent:#1f5fd6;--accent-soft:#e6eeff;--hl:#f9dc5c;--sticky:#fbe27a;--sticky-ink:#3b3320;
  --red:#cf3a3a;--red-soft:#fdeceb;--green:#2e8b3d;--green-soft:#e4f4e3;--amber:#c56a0c;--amber-soft:#fff1dc;
  --cover:#203b2e;--cover-ink:#f3efe4;
  --t1:#6fa8dc;--t2:#f4d35e;--t3:#7cc47f;--t4:#f08aa8;--t5:#f6a35b;--t6:#b39ddb;--t7:#7fcfc4;--t8:#b8c2cc;
  --wood1:#c98d52;--wood2:#a5682f;--wood3:#87511f;
  --shadow:0 1px 0 rgba(0,0,0,.03),0 6px 16px rgba(60,40,10,.07);
  --bg:var(--paper);--surface:var(--card);--surface-2:var(--card-2);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#1e2127;--line:#2a2e36;--margin:#5a3335;--card:#262a31;--card-2:#2c3038;--ink:#a8c0ff;--text:#e6e8eb;--muted:#9aa1ab;--border:#363b44;
  --accent:#7c9cff;--accent-soft:#27304a;--hl:#7a6420;--sticky:#5d5222;--sticky-ink:#f4ead0;
  --red:#ff8a8a;--red-soft:#3b2426;--green:#79d785;--green-soft:#1f3423;--amber:#ffb15c;--amber-soft:#3b2d1b;
  --cover:#152820;--wood1:#5e3f24;--wood2:#4a311b;--wood3:#352313;--shadow:none;color-scheme:dark;}}
:root[data-theme="dark"]{
  --paper:#1e2127;--line:#2a2e36;--margin:#5a3335;--card:#262a31;--card-2:#2c3038;--ink:#a8c0ff;--text:#e6e8eb;--muted:#9aa1ab;--border:#363b44;
  --accent:#7c9cff;--accent-soft:#27304a;--hl:#7a6420;--sticky:#5d5222;--sticky-ink:#f4ead0;
  --red:#ff8a8a;--red-soft:#3b2426;--green:#79d785;--green-soft:#1f3423;--amber:#ffb15c;--amber-soft:#3b2d1b;
  --cover:#152820;--wood1:#5e3f24;--wood2:#4a311b;--wood3:#352313;--shadow:none;color-scheme:dark;}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:var(--font);font-size:15px;line-height:1.55;color:var(--text);min-height:100vh;
  background:radial-gradient(ellipse at 10% 0%,rgba(255,240,200,.3),transparent 45%),
  repeating-linear-gradient(92deg,rgba(0,0,0,.035) 0 2px,transparent 2px 11px,rgba(255,255,255,.03) 11px 13px,transparent 13px 23px),
  linear-gradient(135deg,var(--wood1),var(--wood2) 55%,var(--wood3));background-attachment:fixed}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}
input,textarea,select{font:inherit;color:var(--text)}
h1,h2{font-family:var(--font)}
a{color:var(--accent);text-decoration:none}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px;border-radius:6px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700}
.skip-link:focus{top:12px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.hl{background:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 90%,transparent 90%);padding:0 3px}

/* ---------- Shell: cover (sidebar) + notebook (main) ---------- */
.app{display:grid;grid-template-columns:236px 1fr;max-width:1320px;margin:28px auto;min-height:calc(100vh - 56px);
  box-shadow:0 30px 60px rgba(0,0,0,.35),0 6px 16px rgba(0,0,0,.2);border-radius:14px}

.sidebar{background:var(--cover);color:var(--cover-ink);border-radius:14px 0 0 14px;padding:22px 14px;display:flex;flex-direction:column;
  position:sticky;top:28px;align-self:start;height:calc(100vh - 56px);overflow-y:auto;z-index:2}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px 22px}
.brand-logo{width:40px;height:40px;border-radius:10px;background:#fff;object-fit:cover;display:block;box-shadow:0 1px 4px rgba(0,0,0,.25);flex-shrink:0}
.brand b{font-size:17px;display:block}
.brand small{font-size:12px;opacity:.7}
.nav-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px 10px;border:0;background:none;border-radius:8px;text-align:left;color:var(--cover-ink);opacity:.82;font-weight:700;font-size:14.5px;margin-bottom:2px;min-height:40px}
.nav-btn:hover{background:rgba(255,255,255,.07);opacity:1;color:var(--cover-ink)}
.nav-btn.active{background:var(--paper);color:var(--ink);opacity:1;border-radius:8px 0 0 8px;width:calc(100% + 14px);max-width:none;margin-right:-14px;padding-right:24px}
.nav-btn .tb{width:8px;height:20px;border-radius:3px;flex-shrink:0;background:var(--t1)}
.nav-btn .tb.c2{background:var(--t2)}.nav-btn .tb.c3{background:var(--t3)}.nav-btn .tb.c4{background:var(--t4)}
.nav-btn .tb.c5{background:var(--t5)}.nav-btn .tb.c6{background:var(--t6)}.nav-btn .tb.c7{background:var(--t7)}.nav-btn .tb.c8{background:var(--t8)}
.nav-btn .ico{width:20px;text-align:center}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.nav-badge[hidden]{display:none}
.side-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding:14px 8px 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.side-foot small{display:block;font-size:13px}
.side-foot .who b{display:block}
.side-foot a{color:#9fc0ff;font-size:13px}
.side-foot .who-link{color:var(--cover-ink);font-size:inherit}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--t5);color:#3a2a10;display:grid;place-items:center;font-weight:700;flex-shrink:0;text-decoration:none}
.avatar.big{width:56px;height:56px;font-size:24px}
.who-link{color:inherit}
.theme-btn{border:1px solid var(--border);background:none;border-radius:8px;padding:4px 9px;min-width:32px;min-height:30px;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:inherit;line-height:1.4}
.theme-btn[hidden]{display:none}
.side-tools{margin-left:auto;display:flex;gap:6px}
.sidebar .side-tools{margin:2px 0 0;width:100%}
.sidebar .theme-btn{border-color:rgba(255,255,255,.2);color:var(--cover-ink);border-radius:7px}
.sidebar .theme-btn:hover{background:rgba(255,255,255,.08)}

main{position:relative;border-radius:0 12px 12px 0;padding:30px 40px 60px 56px;min-width:0;
  background:repeating-linear-gradient(to bottom,transparent 0 31px,var(--line) 31px 32px),var(--paper);background-attachment:local}
main.plain{background:var(--paper)}
main.nomargin::before{display:none}
main.nomargin{padding-left:40px}
main::before{content:"";position:absolute;top:0;bottom:0;left:38px;width:2px;background:var(--margin);opacity:.7}
.spiral{position:absolute;left:-16px;top:24px;bottom:24px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;z-index:3}
.spiral i{width:34px;height:12px;border-radius:7px;border:3px solid #2b2b2b;background:linear-gradient(180deg,#a0a0a0,#444);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.view{max-width:1060px;margin:0 auto}

/* ---------- Common components ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-size:28px;line-height:1.25;font-weight:700;color:var(--ink);display:inline;
  background:linear-gradient(transparent 62%,var(--hl) 62%,var(--hl) 92%,transparent 92%);padding:0 3px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.page-head p{color:var(--muted);margin-top:6px;font-size:14.5px}
.card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;box-shadow:var(--shadow)}
.card h3{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.tape::before,.detail-panel::before{content:"";position:absolute;top:-10px;left:50%;width:80px;height:20px;transform:translateX(-50%) rotate(-3deg);background:rgba(244,211,94,.65);pointer-events:none}
.tape.b::before{background:rgba(111,168,220,.5)}.tape.g::before{background:rgba(124,196,127,.55)}.tape.p::before{background:rgba(240,138,168,.5)}
.btn{border:1.5px solid var(--border);background:var(--card);padding:8px 15px;min-height:38px;border-radius:10px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;color:var(--text);transition:border-color .15s,filter .15s}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 10px rgba(31,95,214,.22)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--border))}
.btn.danger:hover{background:var(--red-soft);border-color:var(--red)}
.btn.sm{padding:5px 11px;min-height:32px;font-size:13px;border-radius:9px}
.btn.ghost{border-color:transparent;background:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.is-loading{position:relative;color:transparent!important}
.btn.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid var(--muted);border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:20px;background:var(--card-2);color:var(--muted)}
.tag.blue{background:var(--accent-soft);color:var(--accent)}
.tag.red{background:var(--red-soft);color:var(--red)}
.tag.green,.tag.folder-tag{background:var(--green-soft);color:var(--green)}
.tag.amber{background:var(--amber-soft);color:var(--amber)}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:1.35fr 1fr}
.g-eq{grid-template-columns:1fr 1fr;align-items:start}
.muted{color:var(--muted)}
.row{display:flex;align-items:center;gap:10px}
.spacer{flex:1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Overview ---------- */
.stat .num{font-size:30px;font-weight:700;color:var(--ink);line-height:1.1}
.stat .lbl{color:var(--muted);font-size:13px}
.stat .delta{font-size:12px;color:var(--green);margin-top:2px}
.ai-banner{display:flex;align-items:center;gap:14px;background:var(--sticky);color:var(--sticky-ink);padding:16px 18px;border-radius:2px;transform:rotate(-.6deg);box-shadow:3px 6px 14px rgba(0,0,0,.14);margin:20px 0}
.ai-banner .ico{font-size:22px}
.ai-banner a{color:inherit;text-decoration:underline}
.review-item{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1.5px dashed var(--border)}
.review-item:last-child{border:0}
.review-item .ri-ico{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--card-2);font-size:16px}
.review-item b{display:block}
.review-item small{color:var(--muted)}
.bar-row{margin-bottom:14px}
.bar-row .row{justify-content:space-between;font-size:14px;margin-bottom:4px}
.bar{height:12px;border-radius:8px;background:var(--card-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:8px 14px 10px 8px;opacity:.85}
.recent{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.note-mini{position:relative;border:1px solid var(--border);border-radius:12px;padding:16px 14px 12px;background:var(--card);box-shadow:var(--shadow);color:inherit;display:block}
.note-mini::before{content:"";position:absolute;top:-8px;left:50%;width:64px;height:16px;transform:translateX(-50%) rotate(-3deg);background:rgba(244,211,94,.65)}
.note-mini:hover{border-color:var(--ink)}
.note-mini b{display:block;margin:8px 0 2px;color:var(--ink)}

/* ---------- Notes ---------- */
.capture{display:flex;gap:6px;align-items:center;margin-bottom:16px;background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:6px 6px 6px 14px}
.capture:focus-within{border-color:var(--accent)}
.capture input{flex:1;border:0;background:none;padding:6px 0;outline:none;min-width:0}
.split{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
.list-panel{padding:14px}
.search{width:100%;border:1.5px solid var(--border);border-radius:9px;padding:9px 11px;background:var(--card);margin-bottom:10px;outline:none}
.search:focus{border-color:var(--accent)}
.tabs{display:flex;gap:2px;margin-bottom:10px;background:var(--card-2);padding:3px;border-radius:10px}
.tabs a{flex:1;border:0;background:none;padding:6px 8px;border-radius:8px;font-size:13.5px;font-weight:700;color:var(--muted);text-align:center;display:block}
.tabs a.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.note-item{position:relative;display:block;padding:11px 12px 11px 16px;border-radius:10px;border:1.5px solid transparent;margin-bottom:6px;color:inherit;background:var(--card);box-shadow:var(--shadow)}
.note-item::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--t2)}
.note-item.mistake::before{background:var(--red)}
.note-item:hover{border-color:var(--border)}
.note-item.active{border-color:var(--ink)}
.note-item b{display:block;font-size:14.5px;line-height:1.3;color:var(--text)}
.note-item .meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px;font-size:12.5px;color:var(--muted)}
.editor-head{display:flex;align-items:flex-start;gap:12px;border-bottom:1.5px dashed var(--border);padding-bottom:14px;margin-bottom:14px}
.editor-head h2{font-size:22px;font-weight:700;color:var(--ink)}
.editor-body{min-height:220px;font-size:15px;line-height:1.75}
.editor-body p{margin-bottom:8px}
.editor-body ul{padding-left:20px;margin-bottom:8px}
.editor-body mark.flag{background:none;color:inherit;text-decoration:underline wavy var(--amber);text-underline-offset:4px;padding:0 2px}
.editor-body .wrong{color:var(--red);text-decoration:line-through}
.editor-body .right{color:var(--green);font-weight:700}
.check-box{display:flex;gap:10px;padding:12px 14px;border-radius:10px;margin-bottom:14px;font-size:14px}
.check-box.warn{background:var(--amber-soft)}
.check-box.ok{background:var(--green-soft)}
.field-label{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 4px}
.sec-title{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
details.kc-section{border:1px solid var(--border);border-radius:10px;padding:2px 14px;background:var(--card);margin-bottom:8px}
details.kc-section > summary{cursor:pointer;margin-bottom:0;padding:10px 0;list-style:none;display:flex;align-items:center;gap:8px;min-height:30px;font-weight:700;color:var(--ink)}
details.kc-section > summary::-webkit-details-marker{display:none}
details.kc-section > summary::before{content:"›";color:var(--muted);transition:transform .15s;font-size:20px;line-height:1}
details.kc-section[open] > summary::before{transform:rotate(90deg)}
details.kc-section[open] > summary{margin-bottom:6px}
.editor-form input[type=text],.editor-form input[type=password],.editor-form textarea{width:100%;border:1.5px solid var(--border);border-radius:9px;padding:9px 11px;background:var(--card);outline:none;margin-bottom:10px}
.editor-form textarea{min-height:220px;resize:vertical;font-size:15px;line-height:1.7}
.editor-form input:focus,.editor-form textarea:focus,.editor-form select:focus{border-color:var(--accent)}
.editor-form select.tag{width:auto;font-weight:700}
.phanhoi-luuy{display:flex;gap:8px;align-items:flex-start;background:var(--accent-soft);color:var(--accent);border-radius:10px;padding:9px 12px;font-size:12.5px;margin-bottom:10px}

/* ---------- Folders (phân loại ghi chú) ---------- */
.folder-bar{margin-bottom:12px;padding-bottom:12px;border-bottom:1.5px dashed var(--border)}
.folder-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.folder-head b{color:var(--ink);font-size:14px}
.folder-chips{max-height:104px;overflow-y:auto;scrollbar-width:thin}
.folder-chips .chip{min-height:30px;padding:3px 11px;font-size:13px;gap:6px}
.folder-chips .chip small{font-weight:400;opacity:.75}
.fdot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--t1)}
.fdot.c2{background:var(--t2)}.fdot.c3{background:var(--t3)}.fdot.c4{background:var(--t4)}.fdot.c5{background:var(--t5)}
.fdot.c6{background:var(--t6)}.fdot.c7{background:var(--t7)}.fdot.c8{background:var(--t8)}
.folder-form{display:flex;gap:6px;margin-top:8px}
.folder-form input[type=text]{flex:1;min-width:0;border:1.5px solid var(--border);border-radius:9px;padding:7px 10px;background:var(--card);outline:none}
.folder-form input[type=text]:focus{border-color:var(--accent)}
.folder-more{margin-top:8px}
.folder-more > summary{cursor:pointer;list-style:none;font-size:13px;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:6px;min-height:28px}
.folder-more > summary::-webkit-details-marker{display:none}
.folder-more > summary::before{content:"›";transition:transform .15s;font-size:18px;line-height:1}
.folder-more[open] > summary::before{transform:rotate(90deg)}
.folder-more .folder-form{margin-top:6px}
.folder-sub{font-size:13px;color:var(--muted);margin:10px 0 4px}
.folder-sub b{color:var(--ink)}
/* Trang Ghi chú: danh sách gọn + form soạn thảo */
.list-panel .capture{margin-bottom:10px}
.search-row{display:flex;gap:8px;margin-bottom:10px}
.search-row .search{flex:1;min-width:0;margin:0}
.new-note-btn{flex-shrink:0;width:40px;padding:0;font-size:20px;line-height:1}
.editor-head{align-items:center;flex-wrap:wrap;gap:8px}
.editor-form input.note-title{font-size:22px;font-weight:700;color:var(--ink);border-color:transparent;background:transparent;padding:4px 8px;margin:0 0 8px -8px;width:calc(100% + 8px)}
.editor-form input.note-title:hover{border-color:var(--border)}
.editor-form input.note-title:focus{border-color:var(--accent);background:var(--card)}
.nform{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-bottom:12px}
.editor-form .nform input[type=text]{margin-bottom:0;padding:7px 11px}.editor-form .nform select{margin-bottom:0}
.vocab-link{margin-top:12px}
.savebar{position:sticky;bottom:0;display:flex;justify-content:flex-end;padding:14px 0 2px;margin-top:6px;background:linear-gradient(transparent,var(--card) 35%);z-index:5}
.folder-error{background:var(--red-soft);color:var(--red);border-radius:9px;padding:7px 11px;font-size:13px;margin-bottom:8px}

/* ---------- Vocabulary ---------- */
.add-word{display:flex;gap:8px;margin-bottom:16px}
.add-word input{flex:1;min-width:0;border:1.5px solid var(--border);border-radius:10px;padding:10px 14px;background:var(--card);outline:none}
.add-word input:focus{border-color:var(--accent)}
/* Danh sách từ vựng: mỗi từ là 1 thẻ - ô chữ cái/ảnh, từ + loại từ, nghĩa, nút phát âm; vạch màu bên trái = mức thuộc từ */
.word-row{position:relative;display:flex;align-items:center;gap:11px;padding:9px 10px 9px 16px;border-radius:12px;border:1.5px solid transparent;margin-bottom:7px;color:inherit;background:var(--card);box-shadow:var(--shadow);--wc:var(--accent)}
.word-row.m1{--wc:var(--amber)}
.word-row.m2{--wc:var(--green)}
.word-row::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--wc)}
.word-row:hover{border-color:var(--border)}
.word-row.active{border-color:var(--ink)}
.wr-lead{position:relative;width:40px;height:40px;border-radius:10px;flex-shrink:0;overflow:hidden;display:grid;place-items:center;font-weight:700;font-size:17px;color:var(--wc);background:color-mix(in srgb,var(--wc) 14%,var(--card))}
.wr-lead img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;background:var(--card-2)}
.wr-lead img[hidden]{display:none}
.wr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wr-top{display:flex;align-items:baseline;gap:6px;min-width:0}
.wr-top b{font-size:15.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr-pos{font-size:12px;color:var(--muted);flex-shrink:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr-mean{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.word-row .audio-ico{width:32px;height:32px;display:grid;place-items:center;padding:0;flex-shrink:0;background:var(--card-2);font-size:14px}
.word-row .audio-ico:hover{background:var(--accent-soft)}
.dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;display:inline-block;box-sizing:border-box}
.dot.m0{border:2px solid var(--accent);background:transparent}
.dot.m1{border:2px solid var(--amber);background:linear-gradient(90deg,var(--amber) 50%,transparent 50%)}
.dot.m2{border:2px solid var(--green);background:var(--green)}
.word-thumb{width:38px;height:38px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--card-2)}
.word-thumb[hidden]{display:none}
.vocab-img-wrap{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.vocab-img{max-width:100%;max-height:260px;border-radius:12px;border:1px solid var(--border);background:var(--card-2);object-fit:contain}
/* Từ vựng: thông tin từ (trái) + hình minh họa (phải) */
.word-top{display:grid;grid-template-columns:minmax(0,1fr) 262px;gap:20px;align-items:start;margin-bottom:18px}
.word-main{min-width:0}
.w-head{flex-wrap:nowrap;gap:8px;margin-bottom:10px}
.w-head-input{flex:1;min-width:0;max-width:none;width:100%;border-color:transparent;background:transparent;padding:2px 8px;margin-left:-8px}
.w-head-input:hover{border-color:var(--border)}
.speak-btn{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;flex-shrink:0;font-size:15px;box-shadow:0 4px 10px rgba(31,95,214,.25)}
.speak-btn:hover{filter:brightness(1.1)}
.vform{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.vform .span2{grid-column:1/-1}
.editor-form.vform input[type=text]{margin-bottom:0;padding:7px 11px}
/* thanh chọn kiểu phân đoạn (mức thuộc từ, tab) */
.seg{display:flex;background:var(--card-2);border-radius:10px;padding:3px;gap:2px}
.seg form{display:contents}
.seg button{flex:1;padding:6px 8px;border-radius:8px;font-size:13px;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.seg .dot{width:10px;height:10px}
.mastery-seg{margin-bottom:10px}
.vtabs{width:100%;margin-bottom:14px}
.vtabs button{padding:8px 14px;font-size:14px}
[data-vpane][hidden]{display:none}
.word-pic .field-label{margin-bottom:6px}
.btn.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* Hộp thoại "thay đổi chưa lưu" */
.dlg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}
.dlg[hidden]{display:none}
.dlg-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.45)}
.dlg-box{position:relative;width:min(440px,100%);background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.dlg-box h3{font-size:18px;color:var(--ink);margin-bottom:8px}
.dlg-box p{color:var(--text);margin-bottom:14px}
.dlg-err{background:var(--red-soft);color:var(--red);border-radius:9px;padding:7px 11px;font-size:13px;margin-bottom:12px}
.dlg-err[hidden]{display:none}
.dlg-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.pic-box{border:2px dashed var(--border);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:10px;background:var(--card)}
.pic-ph{position:relative;width:100%;height:130px;border-radius:10px;background:var(--card-2);display:grid;place-items:center;font-size:34px;overflow:hidden}
.pic-ph img{width:100%;height:100%;object-fit:contain;display:block}
.pic-ph.is-broken::after{content:"🖼️";font-size:34px;opacity:.55}
.pic-x{position:absolute;top:6px;right:6px}
.pic-remove{width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:1;display:grid;place-items:center}
.pic-remove:hover{background:var(--red)}
.pic-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pic-actions .btn{padding:5px 4px;font-size:12.5px;gap:4px;min-width:0;white-space:nowrap}
.pic-actions form{display:contents}
.pic-upload{cursor:pointer;border-color:var(--ink)}
@media (max-width:1180px){.word-top{grid-template-columns:1fr}.word-pic{max-width:420px}}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:10px}
.img-grid[hidden]{display:none}
.img-pick{padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:var(--card-2);aspect-ratio:1/1}
.img-pick:hover,.img-pick:focus-visible{border-color:var(--accent)}
.img-pick img{width:100%;height:100%;object-fit:cover;display:block}
.fc-img{max-width:min(100%,320px);max-height:220px;border-radius:12px;margin:10px auto 0;display:block;object-fit:contain}
.w-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.w-head h2{font-size:34px;color:var(--ink);line-height:1.1}
.ipa{color:var(--muted);font-size:15px}
.w-head-input{font-family:var(--font);font-size:30px;font-weight:700;color:var(--ink);border:1.5px solid var(--border);background:var(--card);border-radius:9px;padding:3px 9px;max-width:260px}
.w-head-input:hover,.w-head-input:focus{border-color:var(--accent);outline:none}
.w-head-input-sm{color:var(--muted);font-size:14px;border:1.5px solid var(--border);background:var(--card);border-radius:9px;padding:6px 9px;max-width:140px}
.w-head-input-sm:hover,.w-head-input-sm:focus{border-color:var(--accent);outline:none}
.family{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.family div{border:1.5px dashed var(--border);border-radius:10px;padding:8px 11px}
.family b{display:block}
.family small{display:block;font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase}
.family .cur{border:1.5px solid var(--ink);background:var(--accent-soft)}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{flex-shrink:0;border:1.5px solid var(--border);background:var(--card);padding:5px 12px;min-height:32px;border-radius:20px;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;color:var(--text)}
a.chip:hover,button.chip:hover{border-color:var(--ink)}
a.chip.on,button.chip.on,.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.example{padding:9px 12px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 9px 9px 0;margin-bottom:6px}
.example small{display:block;color:var(--muted)}
textarea.mine{width:100%;min-height:96px;border:1.5px solid var(--border);border-radius:10px;padding:4px 12px;resize:vertical;outline:none;line-height:30px;
  background:repeating-linear-gradient(to bottom,transparent 0 29px,var(--line) 29px 30px),var(--card);background-position:0 4px}
textarea.mine:focus{border-color:var(--accent)}
.feedback{margin-top:8px;padding:10px 12px;border-radius:10px;font-size:14px}
.feedback.good{background:var(--green-soft)}
.feedback.bad{background:var(--red-soft)}

/* ---------- Login / Register ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{position:relative;width:min(420px,100%);background:var(--card);border:1px solid var(--border);border-radius:14px;padding:30px 28px 28px;box-shadow:0 30px 60px rgba(0,0,0,.3),0 6px 16px rgba(0,0,0,.18);
  background:repeating-linear-gradient(to bottom,transparent 0 31px,var(--line) 31px 32px),var(--card)}
.login-card::before{content:"";position:absolute;top:-10px;left:50%;width:90px;height:20px;transform:translateX(-50%) rotate(-3deg);background:rgba(111,168,220,.55)}
.login-card h1{font-size:24px;color:var(--ink);margin-bottom:4px}
.login-card p{color:var(--muted);margin-bottom:20px;font-size:14px}
.login-card .field{margin-bottom:14px}
.login-card label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;color:var(--muted)}
.login-card input{width:100%;border:1.5px solid var(--border);border-radius:9px;padding:10px 12px;background:var(--card);outline:none}
.login-card input:focus{border-color:var(--accent)}
.login-error{background:var(--red-soft);color:var(--red);padding:9px 12px;border-radius:10px;font-size:14px;margin-bottom:14px}
.login-card .btn.primary{width:100%;justify-content:center;padding:12px;margin-top:6px}

/* ---------- Quiz ---------- */
.quiz-card h2{font-size:20px;margin-bottom:18px;color:var(--ink)}
.quiz-options{display:flex;flex-direction:column;gap:9px}
.quiz-option{display:flex;align-items:center;gap:12px;border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;cursor:pointer;font-size:15.5px;background:var(--card)}
.quiz-option:hover{border-color:var(--ink)}
.quiz-option:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.quiz-option input{accent-color:var(--accent);width:18px;height:18px}

.flashcard{background:repeating-linear-gradient(to bottom,transparent 0 31px,var(--line) 31px 32px),var(--card);border-radius:14px}
.flashcard h1{color:var(--ink)}

.vocab-picker{border:1.5px solid var(--border);border-radius:10px;padding:8px;max-height:200px;overflow-y:auto;margin-top:6px;background:var(--card)}
.vocab-picker input[type="text"]{width:100%;border:1.5px solid var(--border);border-radius:9px;padding:8px 11px;margin-bottom:8px;background:var(--card);outline:none}
.vocab-picker-item{display:flex;align-items:center;gap:10px;padding:5px 2px;font-size:14px}
.vocab-picker-item input{width:18px;height:18px;accent-color:var(--accent)}
.vocab-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

.repeat-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.repeat-row{display:flex;gap:6px;align-items:center}
.repeat-row input[type="text"]{flex:1;min-width:0;border:1.5px solid var(--border);border-radius:9px;padding:8px 10px;background:var(--card);outline:none}
.repeat-row input[type="text"]:focus{border-color:var(--accent)}
.repeat-row input[type="text"].sm{flex:0 0 120px}

.quick-add-vocab-btn{position:fixed;z-index:60;display:none;max-width:92vw;background:#1f2937;color:#fff;border:0;border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.25);white-space:nowrap}
.quick-add-vocab-btn:hover{filter:brightness(1.2)}

.tts-toast{position:fixed;right:20px;bottom:20px;z-index:100;display:none;background:#1f2937;color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.audio-ico{cursor:pointer;font-size:16px;padding:5px;border-radius:50%;line-height:1}
.audio-ico:hover{background:var(--card-2)}

.notice{padding:10px 13px;border-radius:10px;font-size:14px;margin-bottom:14px}
.notice.ok{background:var(--green-soft);color:var(--green)}
.notice.info{background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-weight:700}
.notice.info[hidden]{display:none}
.share-row{flex-wrap:wrap}
.share-item{padding:0;margin-bottom:10px}
.share-item > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:11px 16px;min-height:44px}
.share-item > summary::-webkit-details-marker{display:none}
.share-item > summary::before{content:"›";color:var(--muted);transition:transform .15s;font-size:20px;line-height:1}
.share-item[open] > summary::before{transform:rotate(90deg)}
.share-body{padding:4px 18px 18px;border-top:1.5px dashed var(--border)}
.share-body .chips{margin-bottom:6px}
.note-body{line-height:1.75;overflow-wrap:anywhere;overflow-x:auto}
.note-body p{margin-bottom:8px}
.note-body ul,.note-body ol{padding-left:22px;margin-bottom:8px}
.note-body img{max-width:100%;height:auto;border-radius:6px}
.note-body table{border-collapse:collapse;margin:8px 0;min-width:50%}
.note-body td,.note-body th{border:1px solid var(--muted);padding:6px 10px;vertical-align:top}
.table-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px}
.table-toolbar .tbl-size{display:inline-flex;align-items:center;gap:4px}
.table-toolbar input[type=number]{width:56px;border:1.5px solid var(--border);border-radius:9px;padding:5px 6px;background:var(--card);text-align:center}
.table-toolbar .btn[disabled]{opacity:.4}

/* ---------- Chat ---------- */
.chat-layout{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
.chat-list{padding:12px;max-height:calc(100vh - 170px);overflow-y:auto}
.chat-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;border:1.5px solid transparent;color:inherit;margin-bottom:6px;min-height:54px;background:var(--card);box-shadow:var(--shadow)}
.chat-item:hover{border-color:var(--border)}
.chat-item.active{border-color:var(--ink)}
.chat-meta{min-width:0}
.chat-meta b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-preview{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-pane{padding:0;display:flex;flex-direction:column;height:calc(100vh - 170px);min-height:420px;overflow:hidden}
.chat-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;
  background:var(--paper)}
.chat-empty{text-align:center;margin:auto}
.msg{display:flex;flex-direction:column;max-width:75%}
.msg.mine{align-self:flex-end;align-items:flex-end}
.msg.theirs{align-self:flex-start;align-items:flex-start}
.bubble{padding:8px 12px;border-radius:14px;overflow-wrap:anywhere;line-height:1.5;font-size:14.5px;box-shadow:var(--shadow)}
.bubble-text{white-space:pre-wrap}
.bubble-text + a,.bubble-text + .chat-file{margin-top:8px}
.chat-img{display:block;max-width:min(100%,280px);max-height:240px;border-radius:10px;object-fit:cover;background:var(--card-2);cursor:zoom-in}
.chat-file{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.08);color:inherit;min-width:180px}
.msg.theirs .chat-file{background:rgba(0,0,0,.06)}
.chat-file-ico{font-size:22px}
.chat-file-info{display:flex;flex-direction:column;min-width:0}
.chat-file-info b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.chat-file-info small{opacity:.8}
.chat-file-chip{flex-basis:100%;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-weight:700}
.chat-file-chip[hidden]{display:none}
.chat-file-chip .spacer{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg.mine .bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.msg.theirs .bubble{background:var(--sticky);color:var(--sticky-ink);border-bottom-left-radius:4px}
.msg-time{font-size:12px;color:var(--muted);margin-top:3px;padding:0 4px}
.chat-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:10px;border-top:1px solid var(--border);background:var(--card)}
.chat-form textarea{flex:1;min-width:0;resize:none;max-height:140px;border:1.5px solid var(--border);border-radius:10px;padding:9px 12px;background:var(--card);outline:none;line-height:1.5}
.chat-form textarea:focus{border-color:var(--accent)}

.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lb-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.88)}
.lb-img{position:relative;max-width:92vw;max-height:78vh;object-fit:contain;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.lb-btn{position:absolute;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:26px;line-height:1;display:grid;place-items:center}
.lb-btn:hover{background:rgba(255,255,255,.3)}
.lb-btn[hidden]{display:none}
.lb-close{top:calc(14px + env(safe-area-inset-top));right:14px;font-size:20px}
.lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.lb-next{right:14px;top:50%;transform:translateY(-50%)}
.lb-bar{position:absolute;z-index:2;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:14px;color:#fff;font-size:14px;padding:0 70px}
.lb-cap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50vw}
.lb-count{opacity:.8}
.lb-count[hidden]{display:none}
.lb-dl{color:#fff;font-size:18px;padding:4px 8px;border-radius:8px;background:rgba(255,255,255,.16)}

/* ---------- Profile ---------- */
.profile-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.profile-head h2{font-size:22px;color:var(--ink);margin-bottom:4px;overflow-wrap:anywhere}
.profile-list > div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1.5px dashed var(--border)}
.profile-list dt{color:var(--muted)}
.profile-list dd{font-weight:700;text-align:right;overflow-wrap:anywhere}
.profile-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.profile-stat{background:var(--card-2);border-radius:12px;padding:12px 14px}
.profile-stat b{display:block;font-size:22px;color:var(--ink);line-height:1.2}
.profile-stat span{color:var(--muted);font-size:13px}
.check-line{display:flex;align-items:center;gap:10px;min-height:36px;cursor:pointer}
.check-line input{width:20px;height:20px;accent-color:var(--accent)}
.mobile-back{display:none}
.chat-head .mobile-back{margin-bottom:0!important}
body.no-scroll{overflow:hidden}

/* Thanh trên, thanh tab dưới và bảng "Thêm" chỉ dùng trên điện thoại / máy tính bảng nhỏ */
.topbar,.tabbar,.more-sheet{display:none}

@media (max-width:1100px){
  .split{grid-template-columns:260px 1fr}
  .chat-layout{grid-template-columns:230px 1fr}
}

@media (max-width:900px){
  body{background:var(--paper)}
  .app{display:block;margin:0;box-shadow:none;border-radius:0;min-height:100vh}
  .sidebar,.spiral{display:none}
  main{border-radius:0;padding:14px 16px calc(96px + env(safe-area-inset-bottom)) 28px}
  main::before{left:16px}
  main.nomargin{padding-left:16px}

  .topbar{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line);padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top))}
  .topbar-brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:17px}
  .brand-logo.sm{width:32px;height:32px;border-radius:8px}
  .topbar .side-tools{margin-left:auto}
  .topbar .theme-btn{width:36px;height:36px;border-radius:50%;background:var(--card);border-width:1.5px;font-size:14px;padding:0}

  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:4px;padding:0 6px env(safe-area-inset-bottom);background:var(--paper);border-top:1px solid var(--border)}
  .tab{flex:1;height:60px;margin-top:8px;border-radius:12px 12px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    font-size:11.5px;font-weight:700;color:#1d2b44;position:relative;transition:transform .2s,height .2s;box-shadow:0 -2px 6px rgba(0,0,0,.08);background:var(--t1);border:0}
  .tab:nth-child(2){background:var(--t2)}.tab:nth-child(3){background:var(--t3)}.tab:nth-child(4){background:var(--t7)}.tab:nth-child(5){background:var(--t5)}
  .tab.active{transform:translateY(-8px);height:68px;box-shadow:0 -4px 10px rgba(0,0,0,.15)}
  .tab-ico{font-size:18px;line-height:1;display:inline-block}
  .tab-lbl{font-size:11.5px;line-height:1.2}
  .tab-badge{position:absolute;top:3px;right:6px;margin-left:0;font-size:10px;min-width:16px;height:16px;padding:0 5px}

  .more-sheet{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:50}
  .more-sheet[hidden]{display:none}
  .more-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.35)}
  .more-panel{position:absolute;left:0;right:0;bottom:0;background:var(--paper);border-radius:16px 16px 0 0;padding:22px 16px calc(20px + env(safe-area-inset-bottom));max-height:85vh;overflow-y:auto;box-shadow:0 -8px 24px rgba(0,0,0,.2)}
  .more-panel::before{content:"";position:absolute;top:9px;left:50%;width:40px;height:4px;border-radius:2px;background:var(--border);transform:translateX(-50%)}
  .more-user{display:flex;align-items:center;gap:12px;padding:4px 4px 14px;border-bottom:1.5px dashed var(--border);margin-bottom:4px}
  .more-user .avatar{width:44px;height:44px;font-size:20px}
  .more-link{display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 4px;border-bottom:1.5px dashed var(--border);color:var(--text);font-weight:700;font-size:15px}
  .more-link .tab-ico{width:32px;text-align:center;font-size:18px}
  .more-link.active{color:var(--ink);background:var(--accent-soft);border-radius:8px;padding-left:10px}

  .page-head h1{font-size:24px}
  .page-head > .btn,.page-head > .row{width:100%}
  .page-head .btn{flex:1}
  .page-head .chips{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .page-head .chips .chip{flex-shrink:0}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g2,.g-eq,.split,.chat-layout{grid-template-columns:1fr}
  .recent{grid-template-columns:1fr 1fr}
  .stat .num{font-size:26px}
  .chat-list{max-height:none}
  .chat-pane{height:70vh}
  /* Danh sách + chi tiết: chỉ hiện 1 trong 2, tránh phải cuộn qua cả danh sách dài để tới phần chi tiết */
  .split.has-detail > .list-panel{display:none}
  .split:not(.has-detail) > .detail-panel{display:none}
  .chat-layout.has-detail > .chat-list{display:none}
  .chat-layout:not(.has-detail) > .chat-pane{display:none}
  .mobile-back{display:inline-flex;margin-bottom:12px}
  .savebar{bottom:calc(72px + env(safe-area-inset-bottom))}
  .lb-prev{left:6px}.lb-next{right:6px}.lb-btn{width:40px;height:40px}.lb-bar{padding:0 56px}
}

@media (max-width:760px){
  .card{padding:14px}
  .recent{grid-template-columns:1fr}
  .w-head-input{max-width:100%;font-size:24px}
  .w-head-input-sm{max-width:120px}
  .repeat-row{flex-wrap:wrap}
  .repeat-row input[type="text"]{flex:1 1 150px}
  .repeat-row input[type="text"].sm{flex:0 1 110px}
  .profile-list > div{flex-direction:column;gap:2px}
  .profile-list dd{text-align:left}
  .review-item{flex-wrap:wrap}
  .share-row .row{width:100%;justify-content:flex-start}
  .quiz-card h2{font-size:18px}
  .flashcard{padding:32px 16px;min-height:240px}

  .chat-pane{height:calc(100vh - 56px - 56px - 140px);height:calc(100dvh - 56px - 56px - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:320px}
  .msg{max-width:90%}
  .chat-form{padding:10px}
  .chat-head{padding:10px 12px}

  .nform{grid-template-columns:1fr}
  .tts-toast{left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));text-align:center}
  .quick-add-vocab-btn{max-width:90vw;overflow:hidden;text-overflow:ellipsis}
}

/* =========================================================
   Đăng nhập / Đăng ký: cuốn sổ mở ra trên mặt bàn gỗ (tiền tố au-)
   Màu trong khối này cố định kiểu giấy sáng, không đổi theo chế độ tối.
   ========================================================= */
body.auth-body{display:grid;place-items:center;padding:40px 16px;overflow-x:hidden;
  background:radial-gradient(ellipse at 15% 10%,rgba(255,240,200,.35),transparent 45%),
  repeating-linear-gradient(92deg,rgba(0,0,0,.035) 0 2px,transparent 2px 11px,rgba(255,255,255,.03) 11px 13px,transparent 13px 23px),
  linear-gradient(135deg,var(--wood1),var(--wood2) 55%,var(--wood3))}
.au-scene{--au-paper:#fbf9f3;--au-line:#e2e6ee;--au-ink:#1e3a6e;--au-text:#2a2f38;--au-border:#d5dae3;
  position:relative;width:min(1180px,100%);color:var(--au-text)}
.au-deco{position:absolute;pointer-events:none}
.au-plant{left:-70px;top:-60px;width:200px;opacity:.9}
.au-coffee{right:-50px;top:-70px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#2a1a10 0 45%,#f7f3ec 46% 62%,#e7e0d4 63% 66%,transparent 67%),radial-gradient(circle,rgba(0,0,0,.25),transparent 70%)}
.au-coffee::after{content:"";position:absolute;right:-6px;top:58px;width:34px;height:24px;border:9px solid #efe9df;border-left:0;border-radius:0 14px 14px 0}
.au-blue-book{left:-90px;bottom:-80px;width:260px;height:330px;background:linear-gradient(135deg,#2c4a86,#1f3768);border-radius:6px 14px 14px 6px;
  transform:rotate(-14deg);box-shadow:8px 12px 25px rgba(0,0,0,.35);color:#e9eefb;font-size:24px;line-height:1.15;padding:120px 0 0 40px}
.au-blue-book span{display:block;transform:rotate(-12deg)}
.au-sticky{right:-120px;top:240px;width:120px;height:130px;background:#f9df5b;transform:rotate(7deg);box-shadow:3px 6px 14px rgba(0,0,0,.25);padding:14px;font-size:19px;line-height:1.15;color:#2a2a2a}
.au-pen{right:-70px;bottom:-60px;width:16px;height:300px;transform:rotate(28deg);border-radius:8px 8px 3px 3px;background:linear-gradient(90deg,#14254a,#2c4f8f 45%,#14254a);box-shadow:6px 8px 12px rgba(0,0,0,.35)}
.au-pen::before{content:"";position:absolute;left:-2px;top:20px;width:5px;height:80px;background:#c9ced8;border-radius:3px}
.au-pen::after{content:"";position:absolute;left:3px;bottom:-22px;border:5px solid transparent;border-top:24px solid #c9ced8}

.au-book{position:relative;display:grid;grid-template-columns:1fr 1fr;background:#203b2e;padding:10px;border-radius:14px;box-shadow:0 30px 60px rgba(0,0,0,.4),0 8px 18px rgba(0,0,0,.25)}
.au-page{position:relative;min-height:660px;padding:56px 54px;background:repeating-linear-gradient(to bottom,transparent 0 33px,var(--au-line) 33px 34px),var(--au-paper)}
.au-left{border-radius:8px 2px 2px 8px;box-shadow:inset -22px 0 30px -18px rgba(0,0,0,.25);overflow:hidden}
.au-right{border-radius:2px 8px 8px 2px;box-shadow:inset 22px 0 30px -18px rgba(0,0,0,.2);display:flex;flex-direction:column;justify-content:center}
.au-spiral{position:absolute;left:50%;top:26px;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;justify-content:space-between;z-index:3;pointer-events:none}
.au-spiral i{display:block;width:52px;height:13px;border-radius:7px;border:3px solid #2b2b2b;background:linear-gradient(180deg,#9a9a9a,#444);box-shadow:0 2px 3px rgba(0,0,0,.35)}

.au-headline{font-size:44px;line-height:1.05;color:var(--au-ink);font-weight:700;transform:rotate(-7deg);margin:10px 0 0 10px;position:relative;display:inline-block}
.au-headline .u{position:relative;display:inline-block}
.au-headline .u::after{content:"";position:absolute;left:-8px;right:-14px;bottom:-4px;height:9px;background:#f2b51d;border-radius:50%;transform:rotate(-2deg);z-index:-1;opacity:.95}
.au-plane{position:absolute;right:30px;top:40px;width:60px}
.au-tagline{font-size:19px;color:var(--au-ink);transform:rotate(-7deg);margin:44px 0 0 50px;line-height:1.25;max-width:330px}
.au-skyline{position:absolute;left:20px;right:20px;bottom:150px;width:calc(100% - 40px)}
.au-books{position:absolute;left:24px;bottom:30px;width:62%}
.au-bk{position:relative;height:42px;border-radius:4px 8px 8px 4px;color:#fff;font-weight:700;letter-spacing:.08em;font-size:18px;display:flex;align-items:center;padding-left:30%;box-shadow:0 3px 6px rgba(0,0,0,.25);margin-top:-1px}
.au-bk::after{content:"";position:absolute;right:-12px;top:5px;bottom:5px;width:14px;background:repeating-linear-gradient(to bottom,#fff 0 2px,#e8e3d8 2px 4px);border-radius:0 4px 4px 0}
.au-bk:nth-child(1){background:linear-gradient(90deg,#28508f,#3466b0);width:92%;margin-left:6%}
.au-bk:nth-child(2){background:linear-gradient(90deg,#3c7d3f,#4f9a4f);width:96%;margin-left:2%}
.au-bk:nth-child(3){background:linear-gradient(90deg,#c9461f,#e15b31);width:90%;margin-left:4%}
.au-bk:nth-child(4){background:linear-gradient(90deg,#d6981b,#ebb432);width:98%}
.au-cup{position:absolute;right:46px;bottom:30px;width:118px;height:140px;background:linear-gradient(90deg,#ece7dc,#fbf8f2 40%,#e3ddd0);border-radius:4px 4px 16px 16px;box-shadow:0 6px 12px rgba(0,0,0,.18);text-align:center;padding-top:16px;font-size:16px;line-height:1.15;color:var(--au-ink)}
.au-pencils{position:absolute;left:50%;bottom:100%;width:90px;height:90px;transform:translateX(-50%)}
.au-pencils b{position:absolute;bottom:-10px;width:10px;border-radius:3px 3px 0 0;transform-origin:bottom}
.au-pencils b::before{content:"";position:absolute;top:-14px;left:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:14px solid #e9c99a}

.au-form{max-width:400px;width:100%;margin:0 auto}
.au-brand{display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.au-brand img{max-width:60%;height:auto;mix-blend-mode:multiply}
.au-welcome{font-size:36px;color:var(--au-ink);text-align:center;transform:rotate(-3deg);line-height:1.1;font-weight:700}
.au-sub{text-align:center;color:#4b5563;font-size:14.5px;margin:14px 0 26px;line-height:1.6}
.au-field{position:relative;margin-bottom:6px}
.au-field svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:19px;height:19px;stroke:#5b6474;pointer-events:none}
.au-field input{width:100%;height:50px;border:1.5px solid var(--au-border);border-radius:10px;background:#fff;padding:0 46px;font:inherit;font-size:14.5px;color:var(--au-text);outline:none;transition:.15s}
.au-field input:focus{border-color:#1f5fd6;box-shadow:0 0 0 4px rgba(31,95,214,.12)}
.au-field input.input-validation-error{border-color:#d63939}
.au-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:none;padding:6px;cursor:pointer;border-radius:6px;line-height:0}
.au-eye svg{position:static;transform:none;pointer-events:auto}
.au-form .field-validation-error{display:block;color:#d63939;font-size:12.5px;margin:2px 0 8px 4px}
.au-form .field-validation-valid{display:none}
.au-alert{background:#fdeceb;color:#cf3a3a;border-radius:10px;padding:9px 12px;font-size:14px;margin-bottom:14px}
.au-form a{color:#1f5fd6;font-weight:700}
.au-form a:hover{text-decoration:underline}
.au-btn{width:100%;height:50px;border-radius:10px;border:0;font:inherit;font-weight:700;font-size:15.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;transition:.15s}
.au-btn.primary{background:#1f5fd6;color:#fff;box-shadow:0 6px 14px rgba(31,95,214,.3)}
.au-btn.primary:hover{background:#174fb8}
.au-btn:disabled{opacity:.75;cursor:wait}
.au-or{display:flex;align-items:center;gap:14px;color:#6b7280;font-size:13px;margin:20px 0}
.au-or::before,.au-or::after{content:"";flex:1;height:1px;background:var(--au-border)}
.au-google{display:flex;justify-content:center}
.au-signup{text-align:center;font-size:13.5px;margin-top:28px;color:#4b5563}
.au-spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.au-lang{position:absolute;top:16px;left:18px;z-index:2;border:1.5px solid var(--au-border);background:#fff;color:var(--au-ink)!important;border-radius:8px;padding:3px 10px;font-size:12.5px;font-weight:700;text-decoration:none!important}
.au-home{position:absolute;top:16px;right:18px;z-index:2;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--au-border);background:#fff;color:var(--au-ink)!important;border-radius:8px;padding:3px 11px;font-size:12.5px;font-weight:700;text-decoration:none!important;box-shadow:0 2px 0 rgba(29,43,68,.12);transition:transform .15s,box-shadow .15s}
.au-home::before{content:"\2190";font-size:14px;line-height:1}
.au-home:hover{transform:translateY(-1px);box-shadow:0 3px 0 rgba(29,43,68,.18)}
.au-home:focus-visible{outline:2px solid var(--au-ink);outline-offset:2px}
html.nw-app .au-home{top:max(34px,calc(env(safe-area-inset-top) + 8px))}
.au-tabs{position:absolute;right:-44px;top:40px;display:flex;flex-direction:column;gap:6px;z-index:0}
.au-tabs span{width:54px;height:120px;border-radius:0 10px 10px 0;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font-size:14px;font-weight:700;color:#1d2b44;box-shadow:3px 3px 6px rgba(0,0,0,.2);padding-left:10px}
.au-tabs span:nth-child(1){background:#6fa8dc}.au-tabs span:nth-child(2){background:#f4d35e}.au-tabs span:nth-child(3){background:#7cc47f}.au-tabs span:nth-child(4){background:#f08aa8;height:80px}

@media (max-width:1300px){.au-plant,.au-coffee,.au-blue-book,.au-sticky,.au-pen,.au-tabs{display:none}}
@media (max-width:920px){
  body.auth-body{padding:20px 12px}
  .au-book{grid-template-columns:1fr;padding:8px}
  .au-left,.au-spiral{display:none}
  .au-right{border-radius:8px;min-height:auto;padding:52px 22px 40px}
  .au-welcome{font-size:30px}
}

/* ---------- Trao đổi (chat) trên điện thoại ---------- */
.chat-sub{font-size:13px}
.chat-send-ico{display:none}
@media (max-width:900px){
  .hide-m{display:none!important}
  .chat-layout{gap:0}
  .chat-pane{height:calc(100vh - 176px);height:calc(100dvh - 176px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:300px}
  .chat-head{padding:8px 10px;gap:8px}
  .chat-head .mobile-back{width:36px;height:36px;border-radius:50%;padding:0;font-size:16px;flex-shrink:0}
  .chat-head .avatar{width:34px;height:34px;font-size:15px}
  .chat-head b{font-size:15px}
  .chat-sub{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chat-view-txt{display:none}
  .chat-view-btn{width:36px;height:36px;padding:0;border-radius:50%;flex-shrink:0}
  .chat-messages{padding:10px;gap:6px}
  .msg{max-width:84%}
  .bubble{font-size:15px;padding:7px 11px}
  .chat-img{max-width:min(100%,240px);max-height:220px}
  .chat-form{flex-wrap:wrap;gap:6px;padding:8px}
  .chat-form textarea{font-size:16px;padding:8px 14px;border-radius:20px;min-height:40px}
  .chat-form #chatAttach,.chat-send{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;flex-shrink:0}
  .chat-send-txt{display:none}
  .chat-send-ico{display:inline;font-size:16px}
  .chat-item{min-height:60px}
}

/* Khung nội dung (detail-panel) có nền riêng để tách khỏi danh sách bên cạnh */
:root{--panel:#eef4ff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--panel:#222a3a}}
:root[data-theme="dark"]{--panel:#222a3a}
.detail-panel{background:var(--panel)}

/* Danh sách ghi chú gom theo thư mục: mỗi thư mục là 1 nhóm đóng/mở, có nút thêm ghi chú / đổi tên / xóa */
.folder-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.folder-form[hidden]{display:none}
.fgroups{display:flex;flex-direction:column;gap:6px}
.fgroup{border:1.5px solid var(--border);border-radius:12px;background:var(--card-2);overflow:hidden}
.fgroup.open{background:color-mix(in srgb,var(--card-2) 55%,var(--card))}
.fhead{display:flex;align-items:center;gap:4px;padding:3px 6px 3px 4px;min-height:42px}
.ftoggle{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:6px 6px;border-radius:8px;text-align:left;font-weight:700;color:var(--ink)}
.ftoggle:hover{background:var(--card)}
.fchev{display:inline-block;font-size:18px;line-height:1;color:var(--muted);transition:transform .15s;width:12px;text-align:center}
.fgroup.open .fchev{transform:rotate(90deg)}
.fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcount{font-size:12px;font-weight:700;color:var(--muted);background:var(--card);border-radius:10px;padding:0 8px;line-height:20px}
.fdot.none{background:transparent;border:2px solid var(--muted)}
.factions{display:flex;align-items:center;gap:2px;flex-shrink:0}
.factions form,.frename{display:inline-flex;margin:0}
.ibtn{width:30px;height:30px;border-radius:8px;display:inline-grid;place-items:center;font-size:14px;line-height:1;color:var(--muted);background:transparent;text-decoration:none}
.ibtn:hover{background:var(--card);color:var(--ink)}
.ibtn.danger:hover{background:var(--red-soft);color:var(--red)}
.ibtn.ok{color:var(--green);font-weight:700}
.frename{display:none;flex:1;align-items:center;gap:4px;min-width:0}
.frename input[type=text]{flex:1;min-width:0;border:1.5px solid var(--accent);border-radius:8px;padding:5px 9px;background:var(--card);outline:none}
.fhead.editing .ftoggle,.fhead.editing .factions{display:none}
.fhead.editing .frename{display:flex}
.fbody{display:none;padding:4px 8px 8px}
.fgroup.open .fbody{display:block}
.fbody .note-item{margin-bottom:5px;box-shadow:none;background:var(--card)}
.fempty{font-size:13px;color:var(--muted);padding:6px 8px}
@media (max-width:900px){.ibtn{width:34px;height:34px}}

/* Câu ví dụ: ô nhiều dòng tự giãn (đọc trọn câu dài); trên điện thoại ô chiếm cả dòng, 2 nút nằm dưới bên phải */
.repeat-row.top{align-items:flex-start}
.repeat-row textarea{flex:1;min-width:0;border:1.5px solid var(--border);border-radius:9px;padding:8px 10px;background:var(--card);outline:none;resize:none;overflow:hidden;font:inherit;line-height:1.45;min-height:38px}
.repeat-row textarea:focus{border-color:var(--accent)}
@media (max-width:760px){
  .repeat-row textarea{flex:1 1 100%;font-size:15.5px}
  .repeat-row textarea + .btn{margin-left:auto}
}

/* Tổng quan: thẻ số liệu và thanh mức thuộc từ bấm được */
a.stat-link{display:block;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
a.stat-link:hover{border-color:var(--ink);transform:translateY(-2px)}
a.bar-row{display:block;color:inherit;text-decoration:none;padding:4px 6px;margin:0 -6px 10px;border-radius:8px}
a.bar-row:hover{background:var(--card-2)}
.example p{margin:0}
.sentence-editor-wrap .ql-editor{min-height:90px}

/* Luyện đọc: danh sách bài RSS + khung đọc trong trình soạn thảo */
.nav-btn .tb.c9{background:#e3b778}
.feed-chips{margin-bottom:14px}
.reading-list{padding:12px}
.read-item{display:flex;gap:11px;padding:10px;border-radius:12px;border:1.5px solid transparent;margin-bottom:7px;background:var(--card);box-shadow:var(--shadow);color:inherit;text-decoration:none}
.read-item:hover{border-color:var(--border)}
.read-item.active{border-color:var(--ink)}
.read-thumb{width:84px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--card-2)}
.read-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.read-body b{font-size:14.5px;line-height:1.3;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.read-sum{font-size:12.5px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.read-title{font-size:24px;line-height:1.3;color:var(--ink);margin-bottom:8px}
.read-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:12px;font-size:13.5px}
.reading-detail .ql-editor{font-size:16.5px;line-height:1.85;min-height:320px}
.reading-detail .ql-editor p{margin-bottom:10px}
@media (max-width:900px){
  .read-thumb{width:72px;height:56px}
  .read-title{font-size:21px}
  .reading-detail .ql-editor{font-size:16px;min-height:240px}
}

/* Admin: quản lý nguồn RSS */
.rss-grid{display:grid;grid-template-columns:220px 1fr auto;gap:10px 12px;align-items:end}
.rss-grid .rss-act{display:flex;align-items:flex-end}
.editor-form.rss-grid input[type=text]{margin-bottom:0}
.rss-row{border-top:1.5px dashed var(--border);padding:14px 0 10px}
.rss-row:first-of-type{border-top:0}
.rss-row.off{opacity:.65}
.rss-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}
.rss-tools form{display:inline-flex;margin:0}
@media (max-width:900px){.rss-grid{grid-template-columns:1fr}.rss-grid .rss-act .btn{width:100%}}

/* Ghi chú: "Từ vựng liên quan" - danh sách có tìm kiếm, tab Đã gắn / Tất cả, mỗi từ hiện đủ loại từ, IPA, nghĩa, đồng nghĩa, ví dụ, mức thuộc */
.vl-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.vl-search{flex:1;min-width:140px;border:1.5px solid var(--border);border-radius:9px;padding:7px 11px;background:var(--card);outline:none}
.vl-search:focus{border-color:var(--accent)}
.vl-seg{flex-shrink:0}
.vl-seg button span{font-size:11.5px;background:var(--card-2);border-radius:9px;padding:0 6px;line-height:18px}
.vl-seg button.on span{background:var(--accent-soft);color:var(--accent)}
.vl-list{max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:2px}
.vl-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1.5px solid var(--border);border-radius:11px;background:var(--card);cursor:pointer}
.vl-item:hover{border-color:var(--ink)}
.vl-item.on{border-color:var(--accent);background:var(--accent-soft)}
.vl-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}
.vl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.vl-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.vl-top b{font-size:15px;color:var(--ink)}
.vl-pos{font-size:12px;color:var(--muted)}
.vl-ipa{font-size:12px;color:var(--accent)}
.vl-mean{font-size:13.5px;color:var(--text)}
.vl-extra{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vl-ex{font-style:italic}
.vl-empty{padding:10px;font-size:13.5px}
.vl-empty[hidden]{display:none}
.vl-count{color:var(--accent);font-weight:700}
/* Từ vựng: các ghi chú liên quan */
.rel-notes{display:flex;flex-direction:column;gap:7px}
.rel-note{position:relative;display:flex;flex-direction:column;gap:3px;padding:9px 12px 9px 16px;border:1.5px solid var(--border);border-radius:11px;background:var(--card);color:inherit;text-decoration:none}
.rel-note::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--t2)}
.rel-note.mistake::before{background:var(--red)}
.rel-note:hover{border-color:var(--ink)}
.rel-note b{font-size:14.5px;color:var(--text)}
.rel-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
/* ---------- Luyện viết (Writing): đề, soạn bài, bình luận ở lề, tệp đính kèm ---------- */
#wtRoot [hidden],.wt-head [hidden]{display:none!important}
#wtRoot .xs{font-size:12px}
.inline-form{display:inline}
.wt-row{display:flex;align-items:center;gap:10px}
.wt-row.wrap{flex-wrap:wrap;gap:6px 10px}
.wt-seg{display:inline-flex;background:var(--card-2);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.wt-seg a{padding:6px 14px;border-radius:8px;font-size:13.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.wt-seg a:hover{color:var(--ink)}
.wt-seg a.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.wt-alert{display:flex;gap:10px;padding:12px 14px;border-radius:10px;font-size:14px;margin:0 0 14px;background:var(--accent-soft);color:var(--text)}
.wt-alert.warn{background:var(--amber-soft)}

.wt-prompt{background:var(--sticky);color:var(--sticky-ink);padding:16px 18px;border-radius:3px;transform:rotate(-.4deg);box-shadow:3px 6px 14px rgba(0,0,0,.14)}
.wt-prompt .tag{background:rgba(255,255,255,.55);color:var(--sticky-ink)}
.wt-prompt .tag.blue{background:rgba(255,255,255,.7);color:var(--accent)}
.wt-prompt .btn.ghost{color:var(--sticky-ink)}
.wt-ptext{margin:10px 0;font-size:16px}
.wt-pnote{margin-top:8px;opacity:.75}
.wt-tchip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:13px;font-weight:700;background:rgba(255,255,255,.55);color:var(--sticky-ink);border:1.5px dashed rgba(0,0,0,.22)}
.wt-tchip.on{background:var(--green-soft);color:var(--green);border:1.5px solid var(--green)}
.wt-tchip.avoid{border-style:solid;border-color:rgba(0,0,0,.15)}
.wt-tchip.avoid.hit{background:var(--red-soft);color:var(--red);border-color:var(--red)}

.wt-editor{margin-top:18px}
.wt-lined{display:block;width:100%;min-height:300px;border:1.5px solid var(--border);border-radius:10px;padding:4px 12px;resize:vertical;outline:none;line-height:30px;font-size:16px;
  background:repeating-linear-gradient(to bottom,transparent 0 29px,var(--line) 29px 30px),var(--card);background-position:0 4px;color:var(--text)}
.wt-lined:focus{border-color:var(--accent)}
.wt-actions{margin-top:10px}
.wt-counter{flex:1;min-width:160px}
.wt-marker{height:12px;border-radius:8px;background:var(--card-2);margin-top:5px;overflow:hidden}
.wt-marker i{display:block;height:100%;border-radius:8px 14px 10px 8px;opacity:.85}

.wt-files{margin-top:16px}
.wt-filelist{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.wt-file{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--border);border-radius:9px;background:var(--card-2);min-width:0}
.wt-file-sm{margin-top:6px;padding:4px 6px}
.wt-thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;display:block;flex-shrink:0}
.wt-file-sm .wt-thumb{width:34px;height:34px}
.wt-fico{width:34px;text-align:center;font-size:20px;flex-shrink:0}
.wt-fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:13.5px}

.wt-sharebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin-bottom:14px;font-size:14px}
.wt-rubric{display:grid;grid-template-columns:1.1fr repeat(4,1fr);gap:12px;margin-bottom:18px}
.wt-rb{padding:12px 14px;font-size:14px}
.wt-total{padding:12px 14px}
.wt-big{font-size:30px;font-weight:700;color:var(--ink);line-height:1.1}
.wt-big small{font-size:14px;color:var(--muted)}
.wt-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.wt-doc-card{padding:22px 26px}
.wt-doc-head{margin-bottom:8px}
.wt-doc{white-space:pre-wrap;word-break:break-word;font-size:16.5px;line-height:32px;padding:4px 0;cursor:text;
  background:repeating-linear-gradient(to bottom,transparent 0 31px,var(--line) 31px 32px);background-position:0 4px}
.wt-hl{cursor:pointer;border-radius:3px;transition:background .2s}
.wt-hl-ai{background:rgba(246,163,91,.22);border-bottom:2px solid var(--amber)}
.wt-hl-p{background:rgba(111,168,220,.25);border-bottom:2px solid var(--accent)}
.wt-hl.active{background:var(--hl);box-shadow:0 0 0 2px var(--hl)}
del.wt-sg{color:var(--red);text-decoration:line-through;text-decoration-thickness:2px}
ins.wt-sg{color:var(--green);text-decoration:none;font-weight:700;margin-left:3px}
.wt-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:10px;border-top:1px dashed var(--border);font-size:12.5px;color:var(--muted)}
.wt-lg{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}
.wt-lg.ai{background:rgba(246,163,91,.5);border-bottom:2px solid var(--amber)}
.wt-lg.p{background:rgba(111,168,220,.5);border-bottom:2px solid var(--accent)}

.wt-margin{position:sticky;top:20px;max-height:calc(100vh - 60px);overflow-y:auto;padding:2px 4px 10px 2px}
.wt-ctitle{color:var(--ink)}
.wt-filters{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:10px 0}
.wt-filters::-webkit-scrollbar{display:none}
.wt-cmt{background:var(--card);border:1px solid var(--border);border-left:4px solid var(--t6);border-radius:10px;padding:12px;margin-bottom:10px;box-shadow:var(--shadow);cursor:pointer;transition:.15s;font-size:14px}
.wt-cmt.ai{border-left-color:var(--amber)}
.wt-cmt.active{border-color:var(--ink);border-left-width:4px;box-shadow:0 8px 22px rgba(0,0,0,.12);transform:translateX(-4px)}
.wt-cmt.done{opacity:.6}
.wt-cmt.composer{border-left-color:var(--accent);cursor:default}
.wt-quote{margin:8px 0 6px;padding-left:8px;border-left:2px solid var(--border);font-size:13.5px;color:var(--muted);word-break:break-word}
.wt-cbody{line-height:1.5;word-break:break-word}
.wt-pre{white-space:pre-wrap;word-break:break-word}
.wt-rep{display:flex;gap:8px;margin-top:10px;padding-top:8px;border-top:1px dashed var(--border);font-size:13.5px}
.wt-rep .spacer{min-width:0}
.wt-xsbtn{width:24px;height:24px;font-size:11px}
.wt-decide{margin-top:10px}
.wt-reply{display:flex;align-items:center;gap:6px;margin-top:10px}
.wt-in{width:100%;border:1.5px solid var(--border);border-radius:9px;padding:8px 10px;background:var(--card);outline:none;font-size:14px}
.wt-in:focus{border-color:var(--accent)}
.wt-reply .wt-in{padding:7px 10px;font-size:13.5px;flex:1;min-width:0}
.wt-reply .ibtn.on,.wt-composer-actions .ibtn.on{background:var(--accent-soft);border-color:var(--accent)}
.wt-composer-actions{margin-top:8px}
.wt-cmt.composer textarea{margin-top:8px;resize:vertical}
.wt-hint{margin-top:10px}
.wt-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;flex-shrink:0;color:#3a2a10}
.wt-av.sm{width:30px;height:30px;font-size:13px}
.wt-av.xs{width:22px;height:22px;font-size:11px}

.wt-fab{position:fixed;z-index:85;display:none;gap:4px;transform:translateX(-50%);background:#1f2937;border-radius:10px;padding:4px;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.wt-fab button{color:#fff;font-weight:700;font-size:13px;padding:7px 11px;border-radius:7px}
.wt-fab button:hover{background:rgba(255,255,255,.12)}
.wt-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);background:#1f2937;color:#fff;padding:10px 18px;border-radius:10px;opacity:0;transition:.25s;pointer-events:none;z-index:90;font-size:14px;max-width:90vw;text-align:center}
.wt-toast.show{opacity:1;transform:translateX(-50%)}

.wt-listbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.wt-item{margin-bottom:12px}
.wt-preview{color:var(--muted);font-size:14px;margin:8px 0 10px;line-height:1.5;word-break:break-word}
.wt-by{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.wt-score-sm{font-size:18px;color:var(--ink)}
.wt-open-n{color:var(--amber)}

@media (max-width:900px){
  .wt-grid{grid-template-columns:minmax(0,1fr)}
  .wt-rubric{grid-template-columns:1fr 1fr}
  .wt-total{grid-column:1/-1}
  .wt-margin{position:static;max-height:none;overflow:visible}
  .wt-doc-card{padding:18px 14px}
  .wt-cmt.active{transform:none}
  .wt-head .wt-seg{width:100%}
  .wt-head .wt-seg a{flex:1;text-align:center;padding:6px 8px}
  .wt-lined{min-height:240px}
}

/* Writing - tinh chỉnh điện thoại */
@media (max-width:760px){
  .wt-actions{gap:8px}
  .wt-actions .wt-counter{flex:1 0 100%}
  .wt-actions .btn{flex:1 1 40%;min-height:42px}
  .wt-actions .btn.primary{flex:1 0 100%;order:5}
  .wt-sharebar .btn{flex:1 1 40%;min-height:40px}
  .wt-doc-head .btn,.wt-item .btn.sm{min-height:38px}
  .wt-prompt{padding:14px}
  .wt-ptext{font-size:15.5px}
  .wt-in,.wt-reply .wt-in,.wt-cmt.composer textarea{font-size:16px}
  .wt-reply .ibtn,.wt-composer-actions .ibtn{width:40px;height:40px}
  .wt-decide .btn{flex:1;min-height:40px}
  .wt-doc{font-size:16px;line-height:30px;background:none}
  .wt-fab{max-width:calc(100vw - 16px)}
  .wt-fab button{padding:10px 14px;font-size:14px;white-space:nowrap}
  .wt-toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .wt-listbar .btn{flex:1}
  .wt-item .wt-row.wrap .btn,.wt-item .inline-form{flex:0 0 auto}
}

/* Writing - trình soạn thảo Quill và bài đã nộp dạng định dạng */
.wt-editor .ql-editor{min-height:300px;font-size:16px}
.wt-doc.note-body{white-space:normal;background:none;line-height:1.75}
@media (max-width:760px){.wt-editor .ql-editor{min-height:240px}}

/* Menu hành động khi quét khối chữ (từ vựng / ghi chú / hành động riêng của trang) */
.sel-menu{position:fixed;z-index:60;display:none;gap:2px;max-width:94vw;background:#1f2937;border-radius:10px;padding:4px;box-shadow:0 6px 16px rgba(0,0,0,.28)}
.sel-menu button{color:#fff;font-size:13px;font-weight:700;padding:7px 11px;border-radius:7px;white-space:nowrap}
.sel-menu button:hover{background:rgba(255,255,255,.14)}
@media (max-width:900px){.sel-menu button{padding:10px 12px;font-size:14px}}

/* Writing - nội dung bài căn chỉnh gọn, cột bình luận gọn hơn */
.wt-grid{grid-template-columns:minmax(0,1fr) 320px;gap:20px}
.wt-doc-card{padding:24px 34px 28px}
.wt-doc.note-body{font-size:16.5px;line-height:1.85;overflow-wrap:break-word;hyphens:manual;text-wrap:pretty}
.wt-doc p{margin:0 0 .9em}
.wt-doc p:has(> br:only-child){display:none}
.wt-doc h1,.wt-doc h2,.wt-doc h3{margin:1em 0 .5em;line-height:1.35}
@media (min-width:901px){.wt-doc.note-body{text-align:justify;text-justify:inter-word;text-align-last:left}}
.wt-margin{padding:0 2px 10px 0}
.wt-filters{gap:6px;margin:8px 0 10px}
.wt-filters .chip{min-height:28px;padding:3px 11px;font-size:13px}
.wt-cmt{padding:10px 12px;margin-bottom:8px;border-radius:9px;box-shadow:none}
.wt-cmt .wt-row{gap:8px}
.wt-who{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.wt-who b{font-size:13.5px}
.wt-quote{margin:6px 0 4px;font-size:13px;line-height:1.4}
.wt-cbody{font-size:14px}
.wt-cmt .btn.sm.ghost{min-height:28px;width:28px;padding:0}
.wt-reply{margin-top:8px;gap:4px}
.wt-reply .wt-in{padding:5px 9px;font-size:13px;border-radius:8px}
.wt-reply .ibtn{width:28px;height:28px;font-size:13px}
.wt-rep{margin-top:8px;padding-top:6px}
.wt-hint{margin-top:6px;line-height:1.4}
@media (max-width:900px){.wt-doc-card{padding:18px 16px}.wt-reply .ibtn{width:36px;height:36px}.wt-cmt .btn.sm.ghost{width:34px;min-height:34px}}

/* Admin - cấu hình email */
.em-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.em-grid .em-wide{grid-column:1/-1}
.em-grid .em-center{align-self:end;padding-bottom:8px}
.em-check{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.em-check input{width:auto;margin:0}
.em-body{font-family:Consolas,Menlo,monospace;font-size:13px;line-height:1.5;width:100%;min-height:200px}
.em-var{background:var(--card-2);border:1px solid var(--border);border-radius:6px;padding:1px 6px;margin:0 3px;font-size:12.5px}
@media (max-width:760px){.em-grid{grid-template-columns:1fr}}

/* Writing - sửa bố cục cột phản hồi: chip lọc xuống dòng, thẻ đang chọn không lệch/cắt mép, tiêu đề bài */
.wt-margin{padding:2px 6px 10px 2px}
.wt-filters{flex-wrap:wrap;overflow:visible}
.wt-cmt{width:100%;min-width:0;overflow-wrap:anywhere}
.wt-cmt.active{transform:none;border-color:var(--accent);border-left-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft),0 6px 16px rgba(0,0,0,.10)}
.wt-cmt.composer .field-label{margin-top:8px}
.wt-cmt .wt-row>.spacer{min-width:0}
.wt-title-in{width:100%;border:0;border-bottom:1.5px dashed var(--border);background:transparent;padding:6px 2px 8px;margin-bottom:10px;font-size:20px;font-weight:700;color:var(--ink);outline:none}
.wt-title-in:focus{border-bottom-color:var(--accent)}
.wt-title-in::placeholder{color:var(--muted);font-weight:400}
.wt-title-h{font-size:21px;line-height:1.35;color:var(--ink);margin:2px 0 12px;overflow-wrap:anywhere}
.wt-item-title{font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.wt-filters{gap:5px}
.wt-filters .chip{padding:3px 9px;font-size:12.5px}

/* Writing - điện thoại: đặt SAU các quy tắc 2 cột ở trên để 1 cột thắng (bài viết trên, bình luận dưới) */
@media (max-width:900px){
  .wt-grid{grid-template-columns:minmax(0,1fr)}
  .wt-doc-card{min-width:0}
  .wt-margin{position:static;max-height:none;overflow:visible;padding:2px 0 10px}
}

/* Admin - danh sách người dùng: tìm kiếm, lọc, phân trang */
.adm-search{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.adm-search .search{flex:1 1 260px;width:auto;min-width:0;margin:0;min-height:40px;font-size:15px;-webkit-appearance:none;appearance:none}
.adm-search select{width:auto}
.adm-search .btn{min-height:40px}
@media (max-width:760px){.adm-search .search{font-size:16px;flex-basis:100%}.adm-search select{flex:1 1 130px}.adm-search .btn{flex:1 1 100px}}
.adm-count{font-size:13px;margin-bottom:8px}
.adm-user{align-items:center;flex-wrap:wrap}
.adm-info{min-width:200px;overflow-wrap:anywhere}
.adm-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.adm-act form{display:inline}
.adm-pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:16px}
.adm-pager .btn.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.adm-gap{color:var(--muted);padding:0 4px}
@media (max-width:760px){.adm-search .btn{flex:1}.adm-act{width:100%}.adm-act .btn{flex:1}}

/* ===== Luyện đọc: danh sách bài dạng lưới + trang bài giống review Writing ===== */
.rd-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:10px}
.rd-list .read-item{margin-bottom:0}
.rd-list .read-item:hover{border-color:var(--ink)}
.reading-list > .folder-error,.reading-list > p{grid-column:1/-1}
.rd-top{margin-bottom:12px}
.rd-copy{font-size:12.5px;margin:14px 0 4px}
#rdDoc{white-space:normal}
@media (max-width:480px){
  .rd-list{grid-template-columns:minmax(0,1fr)}
}

/* ===== Đề Writing do AI sinh: danh sách câu hỏi ===== */
.wt-qs{margin:8px 0 8px 22px;padding:0}
.wt-qs li{margin:4px 0;line-height:1.5}
.wt-ptext .muted{margin-top:4px;font-size:13.5px}
.ai-key-state{display:inline-block;margin-left:8px;font-size:12.5px}

/* ===== Podcast & Video ===== */
.rss-grid{grid-template-columns:220px 1fr 190px auto}
@media (max-width:900px){.rss-grid{grid-template-columns:1fr}}
.md-player{margin:4px 0 14px}
.md-player audio{width:100%;display:block}
.md-player video{width:100%;max-height:60vh;background:#000;border-radius:10px;display:block}
.md-yt{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.md-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.md-player > * + *{margin-top:10px}
.md-nomedia{margin:6px 0 12px}

/* ===== Game từ vựng 2 người ===== */
.gm-new{display:grid;grid-template-columns:1fr 140px auto;gap:10px 12px;align-items:end}
.gm-new select,.gm-new input{margin-bottom:0}
.gm-new>div{min-width:0}
.gm-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1.5px dashed var(--border);padding:12px 0}
.gm-row:first-of-type{border-top:0}
.gm-act{display:flex;gap:8px;align-items:center}
.gm-act form{margin:0;display:inline-flex}
.gm-board{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;margin-bottom:14px}
.gm-side{padding:14px 16px;text-align:center}
.gm-name{display:block;font-size:16px;overflow-wrap:anywhere}
.gm-score{font-size:34px;font-weight:800;line-height:1.1;margin:6px 0}
.gm-score small{font-size:13px;font-weight:600;color:var(--muted)}
.gm-vs{align-self:center;font-weight:800;color:var(--muted)}
.gm-stage{padding:22px 24px;min-height:260px}
.gm-start{text-align:center;padding:30px 0}
.gm-clue{margin:14px 0;text-align:center}
.gm-img{max-width:100%;max-height:300px;border-radius:12px;object-fit:contain;background:var(--card-2)}
.gm-meaning{font-size:24px;font-weight:700;line-height:1.4;padding:16px 8px;overflow-wrap:anywhere}
.gm-hint{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:28px;letter-spacing:.12em;text-align:center;margin:8px 0 14px;white-space:pre;overflow-x:auto}
.gm-form{max-width:460px;margin:0 auto}
.gm-input{width:100%;font-size:22px;padding:12px 14px;text-align:center;border-radius:12px}
.gm-actions{margin-top:12px;max-width:460px;margin-left:auto;margin-right:auto}
.gm-fb{max-width:460px;margin:8px auto 0;padding:12px 14px;border-radius:12px;font-weight:700;text-align:center}
.gm-fb.ok{background:var(--green-soft);color:var(--green)}
.gm-fb.bad{background:rgba(220,70,70,.12);color:var(--red)}
.gm-final{text-align:center;font-size:26px;margin:40px 0}
.gm-banner{text-align:center;font-size:22px;margin-bottom:12px}
.gm-banner.win{color:var(--green)}.gm-banner.lose{color:var(--red)}.gm-banner.draw,.gm-banner.wait{color:var(--amber)}
.gm-table-wrap{overflow-x:auto}
.gm-table{width:100%;border-collapse:collapse;font-size:14px}
.gm-table th,.gm-table td{padding:8px 10px;border-top:1px solid var(--border);text-align:left;vertical-align:top}
.gm-table td.ok{color:var(--green)}.gm-table td.bad{color:var(--red)}
.gm-table small{color:var(--muted)}
@media (max-width:700px){
  .gm-new{grid-template-columns:1fr}
  .gm-board{grid-template-columns:1fr 1fr}
  .gm-vs{display:none}
  .gm-stage{padding:16px 14px}
  .gm-hint{font-size:22px}
}
.gm-side .wt-marker i{background:var(--accent);display:block;height:100%;border-radius:inherit;transition:width .3s}

/* ===== Chia sẻ: xem ghi chú + bình luận; góp ý ở trang ghi chú của chủ ===== */
.gopy-box{margin-top:18px;border-top:1.5px dashed var(--border);padding-top:12px}
.gopy-box h4{margin-bottom:8px}
.gopy-box .wt-cmt{cursor:default}
.wt-who{font-size:13.5px}

/* ===== Ghi âm bài Writing ===== */
.wt-rec{margin-top:16px}
.wt-recbox{border:1.5px dashed var(--border);border-radius:12px;padding:12px;margin:8px 0}
.wt-recdot{width:12px;height:12px;border-radius:50%;background:var(--muted);display:inline-block}
.wt-recdot.on{background:var(--red);animation:wtRecPulse 1s infinite}
@keyframes wtRecPulse{0%,100%{opacity:1}50%{opacity:.3}}
.wt-rectime{font-variant-numeric:tabular-nums;font-weight:700}
.wt-recbox audio,.wt-recitem audio{width:100%;display:block;margin-top:8px}
.wt-recitem{border-top:1.5px dashed var(--border);padding:12px 0}
.wt-recitem:first-of-type{border-top:0}
.wt-rec-comments{margin-top:10px}
.wt-rec-comments .wt-cmt{cursor:default}
.wt-rec-composer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.wt-rec-composer .wt-in{flex:1;min-width:180px}
.wt-time{border:0;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:3px 12px;font-weight:700;cursor:pointer}
.wt-quote-time{border-left:0;padding-left:0}
.wt-reclevel{height:8px;border-radius:99px;background:var(--card-2);overflow:hidden;margin:10px 0 6px}
.wt-reclevel i{display:block;height:100%;width:0;background:var(--green);transition:width .08s linear,background .15s}
.wt-recdev{gap:8px;margin:6px 0 4px}
.wt-recdev select{max-width:100%;min-width:200px;flex:1;margin-bottom:0}

/* ===== Quiz: màn chọn dạng câu hỏi, câu ghép, phản hồi, xem lại ===== */
.qz-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-top:12px}
.qz-type{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--card)}
.qz-type:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.qz-type.off{opacity:.55;cursor:not-allowed}
.qz-type input{accent-color:var(--accent);width:18px;height:18px;margin-top:3px;flex-shrink:0}
.qz-type-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.qz-ok{color:var(--green);font-weight:600}
.qz-no{color:var(--muted)}
.qz-sentence{font-size:19px;line-height:1.6;margin:0 0 16px;padding:12px 14px;border-left:3px solid var(--accent);background:var(--card-2);border-radius:8px}
.qz-match{display:flex;flex-direction:column;gap:10px}
.qz-match-row{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:10px;align-items:center}
.qz-match-word{font-size:16px;overflow-wrap:anywhere}
.qz-match select{margin-bottom:0;width:100%}
.qz-fb{border-radius:12px;padding:10px 14px;margin-bottom:12px;font-weight:600}
.qz-fb.ok{background:var(--green-soft);color:var(--green)}
.qz-fb.bad{background:rgba(220,70,70,.12);color:var(--red)}
.qz-note{font-weight:400;font-size:13.5px;margin-top:4px;color:var(--muted)}
.qz-rv{border-top:1.5px dashed var(--border);padding:12px 0}
.qz-rv:first-of-type{border-top:0}
.qz-rv.ok b:first-child{color:var(--green)}.qz-rv.bad b:first-child{color:var(--red)}
.qz-rv-q{margin:6px 0 4px;font-weight:600;overflow-wrap:anywhere}
.qz-rv-a{overflow-wrap:anywhere}
@media (max-width:600px){.qz-match-row{grid-template-columns:1fr}}

/* ===== Từ vựng: ghi âm giọng của mình để so sánh với âm gốc ===== */
.vr-box{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.speak-btn.vr-rec{background:var(--card);color:var(--ink);border:1.5px solid var(--border);box-shadow:none}
.speak-btn.vr-rec.is-rec{background:var(--red);color:#fff;border-color:var(--red);animation:wtRecPulse 1s infinite}
.speak-btn.vr-alt{background:var(--card);color:var(--ink);border:1.5px solid var(--border);box-shadow:none}
.speak-btn.vr-del{background:var(--card);color:var(--red);border:1.5px solid var(--border);box-shadow:none;font-size:13px}
.vr-state{font-size:12.5px;min-width:0}
@media (max-width:600px){.w-head{flex-wrap:wrap}}

/* ===== Từ vựng: phần từ gọn hơn, từ dài không bị cắt chữ ===== */
.w-head{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-bottom:10px}
.w-head .w-head-input{max-width:none;width:100%;margin-left:0;font-size:30px;line-height:1.25;text-overflow:ellipsis}
.w-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.w-tools .speak-btn{width:34px;height:34px;font-size:14px}
.w-tools .vr-box{gap:6px}
.w-tools .speak-btn.vr-del{font-size:12px}
.vr-state{flex:1 1 140px}
/* danh sách bên trái: cho từ / nghĩa dài xuống tối đa 2 dòng thay vì bị cắt thành "…" */
.wr-top b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.wr-mean{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.wr-top{align-items:flex-start}
@media (max-width:600px){.w-head .w-head-input{font-size:24px}}
.w-tools .vr-box{display:contents}
.w-tools .vr-state{flex:1 1 100%;order:9}
.wr-top b{-webkit-line-clamp:3}

/* Từ + các nút trên CÙNG MỘT HÀNG (không rớt dòng): ô từ co lại / thu nhỏ chữ, nút nhỏ gọn; thông báo trạng thái nổi bên dưới, không làm đổi bố cục */
.w-head{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px}
.w-head .w-head-input{flex:1 1 0;min-width:0;width:auto}
.w-tools{flex:0 0 auto;display:flex;flex-wrap:nowrap;align-items:center;gap:4px}
.w-tools .speak-btn{width:30px;height:30px;font-size:13px}
.w-tools .speak-btn.vr-del{font-size:11px}
.w-tools .vr-box{display:contents}
.w-tools .vr-state{position:absolute;right:0;top:calc(100% - 4px);z-index:3;flex:none;order:0;max-width:100%;padding:1px 10px;font-size:12px;line-height:1.5;border:1px solid var(--border);border-radius:999px;background:var(--card);box-shadow:var(--shadow);pointer-events:none}
.w-tools .vr-state:empty{display:none}
@media (max-width:600px){.w-tools .speak-btn{width:28px;height:28px}.w-head{gap:4px}}

/* Ô từ nhiều dòng tự giãn (textarea): từ dài xuống dòng trong ô, các nút giữ nguyên 1 hàng bên phải */
.w-head{align-items:flex-start}
.w-head textarea.w-head-input{resize:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.25;height:auto;min-height:44px;text-overflow:clip;display:block}
.w-tools{margin-top:5px}

/* Chữ của từ vựng 25px (từ dài tự nhỏ dần); khung hình ảnh nhỏ lại */
.w-head .w-head-input{font-size:25px}
.w-head textarea.w-head-input{min-height:38px;padding:2px 9px}
.word-top{grid-template-columns:minmax(0,1fr) 208px;gap:16px}
.word-pic .mastery-seg{margin-bottom:8px}
.pic-box{padding:8px;gap:8px}
.pic-ph{height:96px;font-size:28px}
.pic-actions{gap:4px}
.pic-actions .btn{padding:4px 2px;font-size:12px}
@media (max-width:1180px){.word-top{grid-template-columns:1fr}.word-pic{max-width:340px}}
@media (max-width:600px){.w-head .w-head-input{font-size:22px}}

/* Khung hình: nhóm trạng thái nhớ + 3 nút hình ảnh dùng chữ nhỏ hơn để không tràn khỏi nút */
.word-pic .mastery-seg{padding:2px;gap:1px}
.word-pic .mastery-seg button{font-size:11px;padding:5px 2px;gap:4px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.word-pic .mastery-seg .dot{width:8px;height:8px;flex-shrink:0}
.pic-actions .btn{font-size:10.5px;padding:3px 1px;gap:2px;min-height:30px;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px;font-weight:700}

/* ===== Cộng đồng v2: bài đăng nhiều ảnh / video, thử thách của bot, bình luận, xem toàn màn hình ===== */
.cd-wrap [hidden]{display:none!important}
.cd-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px;align-items:start}
.cd-side{position:sticky;top:16px}
.cd-xs{font-size:12.5px}
.cd-spacer{flex:1}
.cd-row{display:flex;align-items:center;gap:10px}
.cd-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow);margin-bottom:16px}
.cd-tape::before{content:"";position:absolute;top:-10px;left:50%;width:80px;height:20px;transform:translateX(-50%) rotate(-3deg);background:rgba(244,211,94,.65);z-index:1}
.cd-tape.b::before{background:rgba(111,168,220,.5)}
.cd-sticky{background:var(--sticky);color:var(--sticky-ink);padding:14px 16px;border-radius:2px;transform:rotate(-.8deg);box-shadow:3px 6px 14px rgba(0,0,0,.14);margin-bottom:18px}
.cd-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 15px;border-radius:10px;border:1.5px solid var(--border);background:var(--card);font-weight:700;font-size:14px;white-space:nowrap;color:var(--text);cursor:pointer}
.cd-btn:hover{border-color:var(--ink)}
.cd-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 10px rgba(31,95,214,.22)}
.cd-btn.sm{padding:5px 11px;font-size:13px}
.cd-btn.ghost{border-color:transparent;background:transparent}
.cd-btn:disabled{opacity:.45;cursor:not-allowed}
.cd-tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:20px;background:var(--card-2);color:var(--muted)}
.cd-tag.amber{background:var(--amber-soft);color:var(--amber)}.cd-tag.green{background:var(--green-soft);color:var(--green)}
.cd-in{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:9px 12px;background:var(--card);outline:none}
.cd-in:focus{border-color:var(--accent)}
.cd-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;flex-shrink:0;color:#3a2a10;font-size:15px}
.cd-av.sm{width:30px;height:30px;font-size:12px}
.cd-av.xs{width:24px;height:24px;font-size:11px;border:2px solid var(--card)}
.cd-av.bot{color:#fff;font-size:18px}

/* Soạn bài */
.cd-who-row{display:flex;gap:12px;align-items:flex-start}
.cd-composer textarea{flex:1;min-height:70px;border:0;background:transparent;outline:none;resize:none;font-size:16px;line-height:1.5;padding:8px 0;width:100%}
.cd-composer{border:2px dashed transparent;transition:.15s}
.cd-composer.over{border-color:var(--accent);background:var(--accent-soft)}
.cd-pv{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:10px}
.cd-pv:empty{display:none}
.cd-pvi{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--card-2);border:1px solid var(--border);cursor:grab}
.cd-pvi img,.cd-pvi video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cd-pvi.dragging{opacity:.4}.cd-pvi.target{outline:3px solid var(--accent)}
.cd-pvi .x{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:14px;line-height:1;cursor:pointer}
.cd-pvi .badge{position:absolute;left:5px;bottom:5px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px}
.cd-pvi .num{position:absolute;left:5px;top:5px;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.9);color:#222;font-size:11px;font-weight:700;display:grid;place-items:center}
.cd-pvi.add{display:grid;place-items:center;cursor:pointer;border-style:dashed;font-size:26px;color:var(--muted)}
.cd-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-top:1px dashed var(--border);padding-top:12px;margin-top:12px}
.cd-tool{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;font-weight:700;font-size:13.5px;cursor:pointer}
.cd-tool:hover:not(:disabled){background:var(--card-2)}
.cd-tool:disabled{opacity:.45;cursor:not-allowed}
.cd-tool .c{font-weight:400;color:var(--muted);font-size:12px}
.cd-err{color:var(--red);font-size:13px;margin-top:8px;white-space:pre-line}
.cd-hint{color:var(--muted);font-size:12px;margin-top:8px}
.cd-prog{height:6px;border-radius:4px;background:var(--card-2);overflow:hidden;margin-top:10px}
.cd-prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}
.cd-vis{width:auto;font-weight:700}

/* Thanh thử thách tiếp theo + bộ lọc */
.cd-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--accent-soft);border-radius:12px;padding:12px 14px;margin-bottom:14px;color:var(--ink);font-weight:700}
.cd-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.cd-chip{flex-shrink:0;border:1.5px solid var(--border);background:var(--card);padding:6px 13px;border-radius:20px;font-size:13.5px;font-weight:700;color:var(--text)}
.cd-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* Bài đăng */
.cd-feed{display:flex;flex-direction:column}
.cd-ph{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cd-who{flex:1;min-width:0}
.cd-who b{display:block}
.cd-text{white-space:pre-wrap;font-size:15.5px;margin-bottom:10px;overflow-wrap:anywhere}
.cd-ht{color:var(--accent);font-weight:700}
.cd-edit textarea{width:100%;min-height:90px;padding:9px 12px;border:1.5px solid var(--accent);border-radius:10px;background:var(--card);margin-bottom:8px;line-height:1.5}
.cd-menu{position:relative}
.cd-pop{position:absolute;right:0;top:34px;z-index:10;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.15);padding:6px;min-width:170px;display:none}
.cd-menu.open .cd-pop{display:block}
.cd-pop button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:7px;font-size:14px;cursor:pointer}
.cd-pop button:hover{background:var(--card-2)}
.cd-pop button.danger{color:var(--red)}

/* Lưới ảnh / video (1 đến 5 ô, ô thứ 5 hiện +N) */
.cd-mg{display:grid;gap:4px;border-radius:12px;overflow:hidden;margin:0 -2px 10px}
.cd-mg .cd-m{position:relative;background:#111;cursor:zoom-in;overflow:hidden;min-height:0}
.cd-mg .cd-m:nth-child(n+6){display:none}
.cd-mg .cd-m img,.cd-mg .cd-m video{width:100%;height:100%;object-fit:cover;display:block}
.cd-mg.n1{grid-template-columns:1fr}.cd-mg.n1 .cd-m{aspect-ratio:16/10;max-height:520px}
.cd-mg.n1 .cd-m img,.cd-mg.n1 .cd-m video{object-fit:contain;background:#111}
.cd-mg.n2{grid-template-columns:1fr 1fr}.cd-mg.n2 .cd-m{aspect-ratio:4/5}
.cd-mg.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:3/2}.cd-mg.n3 .cd-m:first-child{grid-row:1/3}
.cd-mg.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1}
.cd-mg.n5{grid-template-columns:repeat(6,1fr);grid-template-rows:1.3fr 1fr;aspect-ratio:6/5}
.cd-mg.n5 .cd-m:nth-child(-n+2){grid-column:span 3}.cd-mg.n5 .cd-m:nth-child(n+3){grid-column:span 2}
.cd-more-m{position:absolute;inset:0;background:rgba(0,0,0,.55);color:#fff;font-size:30px;font-weight:700;display:grid;place-items:center}
.cd-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cd-play span{width:58px;height:58px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:22px;display:grid;place-items:center;padding-left:4px;border:2px solid rgba(255,255,255,.8)}
.cd-dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:10px}
.cd-mcount{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:10px}

/* Thích / bình luận */
.cd-acts{display:flex;align-items:center;gap:6px;border-top:1px dashed var(--border);border-bottom:1px dashed var(--border);padding:6px 0;margin-top:4px}
.cd-act{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--muted);cursor:pointer}
.cd-act:hover{background:var(--card-2)}
.cd-act.on{color:var(--accent)}
.cd-cmts{margin-top:10px}
.cd-c{display:flex;gap:8px;margin-bottom:8px}
.cd-bub{flex:1;min-width:0;background:var(--card-2);border-radius:12px;padding:7px 11px;font-size:14px}
.cd-cwho{display:flex;align-items:center;gap:8px;font-size:13px}
.cd-cwho .cd-x{margin-left:auto}
.cd-x{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;line-height:1;color:var(--muted);cursor:pointer}
.cd-x:hover{background:var(--red-soft);color:var(--red)}
.cd-ctext{white-space:pre-wrap;overflow-wrap:anywhere}
.cd-bub audio{width:100%;max-width:420px;height:36px;display:block;margin:4px 0}
.cd-clist:not(.open) .cd-old{display:none}
.cd-more-c{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:6px;cursor:pointer}
.cd-compose{display:flex;gap:8px;align-items:center;margin-top:8px}
.cd-compose input{flex:1;min-width:0;border-radius:20px}

/* Thử thách đọc to */
.cd-chal{border-radius:12px;padding:16px;background:linear-gradient(135deg,var(--accent-soft),var(--amber-soft));margin-bottom:10px}
.cd-sentence{font-size:20px;font-weight:700;margin:6px 0 4px;color:var(--text);overflow-wrap:anywhere}
.cd-sentence mark{background:var(--hl);color:inherit;padding:0 4px;border-radius:3px}
.cd-chal-act{flex-wrap:wrap;margin-top:12px;gap:8px}
.cd-rec-state{font-size:13px}
.cd-rec-btn.is-rec{background:var(--red);border-color:var(--red);animation:wtRecPulse 1s infinite}
.cd-rec-box{margin-top:10px}
.cd-rec-box audio{width:100%;max-width:420px;height:36px;display:block}
.cd-closed .cd-rec-btn,.cd-closed .cd-rec-box{display:none}
.cd-subs{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;color:var(--muted)}
.cd-stack{display:flex}.cd-stack .cd-av{margin-left:-6px}.cd-stack .cd-av:first-child{margin-left:0}

/* Cột phải */
.cd-lb{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed rgba(0,0,0,.18);font-size:14px}
.cd-lb:last-child{border:0}
.cd-rank{width:22px;font-weight:700;text-align:center}

/* Xem toàn màn hình */
.cd-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);background:#1f2937;color:#fff;padding:10px 18px;border-radius:10px;opacity:0;transition:.25s;pointer-events:none;z-index:120;font-size:14px;max-width:90vw;text-align:center}
.cd-toast.show{opacity:1;transform:translateX(-50%)}
.cd-fab{display:none}

@media (max-width:960px){.cd-layout{grid-template-columns:1fr}.cd-side{display:none}}
@media (max-width:760px){
  .cd-card{padding:14px 12px}
  .cd-mg{margin:0 -12px 10px;border-radius:0}
  .cd-tool .c{display:none}
  .cd-sentence{font-size:18px}
  .cd-fab{display:grid;position:fixed;right:18px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:40;width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;font-size:26px;place-items:center;box-shadow:0 8px 20px rgba(31,95,214,.4);cursor:pointer}
}

/* Cột hình minh họa cao bằng cột thông tin từ bên trái: khung hình giãn ra lấp phần còn lại */
.word-top{align-items:stretch}
.word-pic{display:flex;flex-direction:column;min-height:0}
.word-pic .pic-box{flex:1 1 auto;min-height:0}
.word-pic .pic-ph{flex:1 1 auto;height:auto;min-height:110px}
.word-pic .pic-ph img{position:absolute;top:0;left:0;width:100%;height:100%}
.word-pic #goiYHinhKetQua{flex:none}
@media (max-width:1180px){.word-pic .pic-ph{min-height:150px}}

/* Xem ảnh / video toàn màn hình: luôn thấy trọn 100% (không bị cắt theo chiều cao hay chiều rộng) trên mọi thiết bị.
   Ảnh đặt tuyệt đối trong khung có kích thước xác định nên max-width / max-height theo % luôn có hiệu lực. */

/* Sharing: xem từ vựng của người khác (chỉ đọc) */
.w-head-ro{flex:1;min-width:0;font-size:25px;font-weight:700;line-height:1.25;color:var(--ink);padding:2px 0;overflow-wrap:anywhere}
@media (max-width:600px){.w-head-ro{font-size:22px}}
.vform input[readonly]{cursor:default;background:var(--card-2)}
.repeat-row input[readonly]{cursor:default;background:var(--card-2)}
.mastery-seg.ro button{cursor:default;pointer-events:none}
.ro-text{white-space:pre-wrap;overflow-wrap:anywhere;padding:8px 11px;background:var(--card-2);border-radius:9px;line-height:1.5}
.repeat-row.top .ro-text{flex:1;min-width:0}
.w-tools .vr-none{font-size:12.5px;white-space:nowrap}

.sv-save{justify-content:flex-end;gap:8px;margin-top:10px;flex-wrap:wrap}
.sv-save form{display:inline-flex;margin:0}

/* Từ vựng: tìm kiếm + thư mục */
.vf-bar{margin-bottom:16px;padding:14px 16px}
.vf-search{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.vf-search input[type=search]{flex:1;min-width:180px;border:1.5px solid var(--border);border-radius:10px;padding:8px 12px;background:var(--card);outline:none}
.vf-search input[type=search]:focus{border-color:var(--accent)}
.vf-head{margin-bottom:8px}
.vf-chips{margin-top:8px}
.vf-chips .chip small{margin-left:5px;opacity:.7;font-weight:700}
.vf-manage{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.vf-bar .folder-form[hidden]{display:none}
.vf-move{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vf-move .field-label{margin:0}
.vf-move select{width:auto;min-width:180px}

/* Từ vựng: thanh tìm kiếm + thư mục gọn 1 hàng; hàng thư mục + nút Lưu */
.vf-bar{padding:10px 12px;margin-bottom:12px}
.vf-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vf-search{flex:1 1 360px;display:flex;align-items:center;gap:6px;margin:0;min-width:0}
.vf-search input[type=search]{flex:1 1 140px;min-width:0;padding:7px 11px}
.vf-sel{width:auto;max-width:200px;min-width:0}
.vf-search .vf-sel{flex:0 1 190px}
.vf-search .btn.sm{min-height:34px;padding:4px 11px}
.vf-tools{display:flex;align-items:center;gap:6px}
.vf-tools .inline-form{display:inline-flex;margin:0}
.vf-tools .btn.sm{min-height:34px;padding:4px 11px}
.vf-bar .folder-form{margin-top:8px}
.vf-bar .folder-error{margin:8px 0 0}
.vf-saverow{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin-top:10px}
.vf-saverow .vf-folderlab{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.vf-saverow .vf-sel{flex:0 1 220px;max-width:none}
.vf-saverow .spacer{flex:1}
@media (max-width:600px){.vf-search{flex-basis:100%}.vf-search .vf-sel{flex:1 1 120px}.vf-saverow .vf-folderlab{display:none}.vf-saverow .vf-sel{flex:1 1 auto}}

/* ---------- Từ vựng v3: panel trái dạng thư mục (như Ghi chú) + thanh A-Z + cuộn riêng ---------- */
.vl-panel > form{margin:0}
.vl-add{flex-shrink:0;white-space:nowrap}
.vl-target{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12.5px;color:var(--muted);margin:-4px 0 8px 2px}
.vl-target[hidden]{display:none!important}
.vl-target b{color:var(--ink)}
.vl-target .ibtn{width:24px;height:24px;font-size:12px;flex-shrink:0}
.vl-panel .tabs a{padding:6px 3px;font-size:13px;white-space:nowrap}
.tabs .td{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px;background:var(--accent)}
.tabs .td.m1{background:var(--amber)}.tabs .td.m2{background:var(--green)}
.vl-panel .folder-bar{margin-bottom:8px;padding-bottom:8px}
.vl-body{display:flex;gap:6px;min-height:0;flex:1}
.vl-rail{display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:24px;flex-shrink:0;padding:3px 0;border-radius:12px;background:var(--card-2);overflow-y:auto;scrollbar-width:none}
.vl-rail::-webkit-scrollbar{display:none}
.vl-rail button{width:22px;flex:1 1 0;min-height:15px;max-height:26px;font-size:11px;font-weight:700;color:var(--accent);line-height:1;padding:0;border-radius:6px;background:none;display:grid;place-items:center}
.vl-rail button:hover:not(:disabled){background:var(--accent-soft)}
.vl-rail button:disabled{color:var(--muted);opacity:.35;cursor:default}
.vl-rail button.all{color:var(--muted)}
.vl-rail button.on:not(.all){background:var(--ink);color:var(--paper)}
.vl-scroll{position:relative;flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin}
.vl-count{font-size:12.5px;padding:0 2px 8px}
.vl-empty{padding:10px;font-size:13px}
.vl-off{display:none!important}
.fgroup.target{border-color:var(--accent)}
.fbody .word-row{margin-bottom:5px;box-shadow:none}
@media (min-width:901px){
  .vl-split{align-items:start}
  .vl-split > .vl-panel{position:sticky;top:16px;display:flex;flex-direction:column;height:calc(100vh - 190px);height:calc(100dvh - 190px);min-height:440px;overflow:hidden}
  .vl-split > .vl-panel > *{flex-shrink:0}
  .vl-split > .vl-panel > .vl-body{flex:1 1 0;flex-shrink:1}
  .vl-split > .detail-panel{min-width:0}
}
@media (max-width:900px){
  .vl-split{grid-template-columns:minmax(0,1fr)}
  .vl-panel,.vl-body{min-width:0}
  .vl-body{flex-direction:column}
  .vl-rail{flex-direction:row;width:auto;height:32px;position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:6;overflow-x:auto;justify-content:flex-start;gap:2px;padding:3px 4px;margin-bottom:6px;scrollbar-width:none}
  .vl-rail button{flex:0 0 28px;width:28px;height:26px;max-height:none;min-height:0;font-size:12.5px}
  .vl-scroll{overflow:visible;padding-right:0}
}

/* ---------- Rộng hơn + chữ danh sách nhỏ gọn hơn + nút quay lại to hơn ---------- */
.app{max-width:1560px}
main{padding-left:52px;padding-right:30px}
.view{max-width:1320px}
.split{grid-template-columns:320px 1fr}
.vl-panel{padding:12px}
.vl-panel .word-row{gap:9px;padding:7px 8px 7px 14px;margin-bottom:5px}
.vl-panel .wr-lead{width:34px;height:34px;border-radius:9px;font-size:15px}
.vl-panel .wr-top b{font-size:14.5px}
.vl-panel .wr-pos{font-size:11px}
.vl-panel .wr-mean{font-size:12px}
.vl-panel .word-row .audio-ico{width:28px;height:28px;font-size:13px}
.vl-panel .fbody{padding:3px 4px 6px}
.vl-panel .ftoggle{font-size:13.5px}
@media (min-width:901px){.vl-rail{width:22px}.vl-rail button{width:20px;font-size:10.5px}}
.vl-scroll{padding-right:2px}
@media (max-width:1100px){.split{grid-template-columns:280px 1fr}}
@media (max-width:900px){
  main{padding:12px 10px calc(96px + env(safe-area-inset-bottom)) 20px}
  main::before{left:10px}
  .split{grid-template-columns:1fr}
  .vl-split{grid-template-columns:minmax(0,1fr)}
  .vl-panel{padding:10px}
  .split .mobile-back{min-height:46px;padding:0 20px;font-size:15.5px;border-radius:12px;gap:8px}
}

/* ---------- Đăng ký / quên mật khẩu bằng email ---------- */
.au-info{background:#e8f5ec;color:#1d6b3b;border-radius:10px;padding:9px 12px;font-size:14px;margin-bottom:14px;line-height:1.5}
.au-note{font-size:12.5px;color:#5b6474;margin:-2px 2px 12px;line-height:1.45}
.au-forgot{text-align:right;margin:2px 2px 12px;font-size:13.5px}
.au-forgot a{color:#1f5fd6}

/* ---------- Support EngNote ---------- */
.sp-wrap{max-width:820px;display:flex;flex-direction:column;gap:16px}
.sp-msg p{font-size:15.5px;line-height:1.75;white-space:pre-line}
.sp-pay{display:flex;flex-direction:column;gap:10px}
.sp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:16px}
.sp-lab{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;min-width:96px}
.sp-qrs{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0 12px}
.sp-qr{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;width:200px}
.sp-qr img{display:block;width:200px;height:auto;max-height:340px;object-fit:contain;border-radius:12px;border:1px solid var(--border);background:#fff}
.sp-qr-img{padding:0;border:0;background:none;cursor:zoom-in;border-radius:12px}
.sp-qr figcaption{font-weight:700;color:var(--ink)}
.sp-warn{background:var(--amber-soft);border:1.5px solid var(--amber);border-radius:12px;padding:12px 16px;font-size:14px;line-height:1.6}
.sp-warn b{display:block;margin-bottom:4px;color:var(--ink)}
.sp-thanks{text-align:center;color:var(--muted);font-weight:700;margin:4px 0}
.sp-lbx{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.sp-lbx[hidden]{display:none!important}
.sp-lbx img{max-width:100%;max-height:100%;border-radius:12px;background:#fff}
.sp-add{margin-top:6px;padding-top:12px;border-top:1px dashed var(--border)}
@media (max-width:600px){.sp-qr,.sp-qr img{width:100%;max-width:300px}.sp-qrs{justify-content:center}}

/* ---------- Buy me a coffee: ly cà phê lúc lắc bốc khói ---------- */
.cf-cup{display:block;width:44px;height:44px;overflow:visible;color:#fff}
.cf-cupg{transform-box:fill-box;transform-origin:50% 100%;animation:cfWobble 2.8s ease-in-out infinite}
.cf-steam path{opacity:0;transform-box:fill-box;animation:cfSteam 2.6s ease-in-out infinite}
.cf-steam .s2{animation-delay:.55s}
.cf-steam .s3{animation-delay:1.1s}
@keyframes cfWobble{0%,100%{transform:rotate(0)}15%{transform:rotate(-7deg)}35%{transform:rotate(6deg)}55%{transform:rotate(-4deg)}75%{transform:rotate(2deg)}}
@keyframes cfSteam{0%{opacity:0;transform:translateY(5px) scaleY(.7)}30%{opacity:.95}100%{opacity:0;transform:translateY(-9px) scaleY(1.1)}}

.cf-card{display:flex;align-items:center;gap:11px;margin:10px 0 12px;padding:10px 12px;border-radius:12px;color:#fff;
  background:linear-gradient(135deg,#d98a3d,#a8571f);box-shadow:0 6px 16px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.28);text-decoration:none;transition:transform .15s,box-shadow .15s}
.cf-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.28);color:#fff}
.cf-card.active{outline:2px solid #ffe3b8;outline-offset:1px}
.cf-card .cf-cup{width:40px;height:40px;flex-shrink:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.cf-card .cf-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.cf-card .cf-txt b{font-size:14.5px}
.cf-card .cf-txt small{font-size:11.5px;opacity:.9}
.sidebar > .cf-card{margin-top:auto}
.sidebar > .cf-card + .side-foot{margin-top:0}
.cf-top{display:none}

.cf-hero{position:relative;text-align:center;padding:30px 22px 26px;border-radius:18px;color:#4a2a10;overflow:hidden;
  background:radial-gradient(circle at 50% 0,#fff6e4 0,#f8e0bb 55%,#efc994 100%);box-shadow:var(--shadow),inset 0 0 0 1px rgba(168,87,31,.18)}
.cf-hero::before{content:"";position:absolute;left:50%;top:-60px;width:320px;height:320px;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,255,255,.7),transparent 65%);pointer-events:none}
.cf-hero-cup{position:relative;display:inline-block;margin-bottom:6px}
.cf-hero-cup .cf-cup{width:104px;height:104px;color:#8a5a2b;filter:drop-shadow(0 6px 8px rgba(106,63,29,.25))}
.cf-hero h1{position:relative;font-size:30px;line-height:1.2;font-weight:700;color:#5a3011;margin:0}
.cf-hero .cf-sub{position:relative;color:#7b5230;margin:6px 0 12px;font-size:14.5px}
.cf-hero .cf-msg{position:relative;max-width:560px;margin:0 auto;font-size:15px;line-height:1.7;white-space:pre-line}

.cf-wrap{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.cf-grid.one{grid-template-columns:minmax(0,520px);justify-content:center}
.cf-info h2,.cf-qr h2{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px}
.cf-field{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-top:1px dashed var(--border)}
.cf-field:first-of-type{border-top:0;padding-top:0}
.cf-field span{font-size:12px;color:var(--muted);font-weight:700}
.cf-field b{font-size:19px;color:var(--ink);letter-spacing:.2px;overflow-wrap:anywhere}
.cf-copy{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cf-qr{text-align:center}
.cf-tabs{display:inline-flex;gap:4px;padding:3px;border-radius:999px;background:var(--card-2);margin-bottom:12px;max-width:100%;flex-wrap:wrap;justify-content:center}
.cf-tabs button{padding:6px 16px;border-radius:999px;font-weight:700;font-size:13.5px;color:var(--muted);background:none}
.cf-tabs button.on{background:#a8571f;color:#fff;box-shadow:0 2px 6px rgba(168,87,31,.4)}
.cf-qrbox{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.cf-qrbox[hidden]{display:none}
.cf-qrimg{padding:8px;border:0;border-radius:16px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18);cursor:zoom-in;line-height:0}
.cf-qrimg img{display:block;width:100%;max-width:250px;max-height:340px;height:auto;object-fit:contain;border-radius:10px}
.cf-qrbox figcaption{font-weight:700;color:var(--ink)}
.cf-warn{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:12px;background:var(--amber-soft);border:1.5px solid var(--amber);font-size:13.5px;line-height:1.55}
.cf-warn-ico{font-size:20px;line-height:1.3}
.cf-warn b{display:block;color:var(--ink);margin-bottom:2px}
.cf-warn p{margin:0}
.cf-thanks{text-align:center;color:var(--muted);font-weight:700;margin:2px 0 8px}
@media (max-width:760px){
  .cf-grid{grid-template-columns:1fr}
  .cf-hero{padding:22px 16px 20px}
  .cf-hero h1{font-size:26px}
  .cf-hero-cup .cf-cup{width:88px;height:88px}
  .cf-top{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#d98a3d,#a8571f);box-shadow:0 3px 8px rgba(0,0,0,.25);margin-left:auto}
  .cf-top .cf-cup{width:28px;height:28px}
  .topbar .cf-top + .side-tools{margin-left:8px}
}
@media (max-width:900px){
  .more-panel .cf-card{margin:6px 0 14px}
  .cf-top{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#d98a3d,#a8571f);box-shadow:0 3px 8px rgba(0,0,0,.25);margin-left:auto}
  .cf-top .cf-cup{width:28px;height:28px}
  .topbar .cf-top + .side-tools{margin-left:8px}
}

/* Buy me a coffee v2: 1 thẻ gộp thông tin + QR, bỏ khoảng trống */
.cf-pay{display:grid;grid-template-columns:minmax(0,1fr) 300px;padding:0;overflow:hidden}
.cf-pay.one{grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto;width:100%}
.cf-pay .cf-info{padding:22px 26px;display:flex;flex-direction:column;justify-content:center}
.cf-pay .cf-qr{padding:20px 22px 18px;background:var(--card-2);border-left:1.5px dashed var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center}
.cf-pay .cf-qr h2{margin-bottom:12px}
.cf-pay .cf-qrimg img{max-width:220px;max-height:300px}
.cf-pay .cf-qrbox figcaption{font-size:12px;font-weight:400;color:var(--muted)}
.cf-pay .cf-tabs{background:var(--card)}
.cf-steps{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px dashed var(--border);counter-reset:cfs;display:flex;flex-direction:column;gap:9px}
.cf-steps li{counter-increment:cfs;position:relative;padding-left:32px;font-size:13.5px;line-height:1.5;color:var(--text)}
.cf-steps li::before{content:counter(cfs);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:#a8571f;color:#fff;font-weight:700;font-size:12px;display:grid;place-items:center}
@media (max-width:760px){
  .cf-pay,.cf-pay.one{grid-template-columns:minmax(0,1fr)}
  .cf-pay .cf-qr{border-left:0;border-top:1.5px dashed var(--border)}
  .cf-pay .cf-info{padding:18px 18px}
}

/* ---------- Trao đổi: danh sách người có thanh A-Z + cuộn riêng; xóa tin nhắn ---------- */
.chat-list.cl-scroll{display:flex;flex-direction:column;max-height:none;overflow:hidden;padding:10px}
.chat-list.cl-scroll .vl-body{flex:1 1 0;min-height:0}
.chat-list.cl-scroll .chat-item:last-child{margin-bottom:0}
.chat-layout .chat-list.cl-scroll{height:calc(100vh - 170px);height:calc(100dvh - 170px);min-height:420px}
.msg-del{margin-left:6px;padding:0 4px;border:0;background:none;font-size:12px;line-height:1;color:var(--muted);opacity:.55;cursor:pointer;border-radius:6px}
.msg-del:hover,.msg-del:focus-visible{opacity:1;background:var(--red-soft);color:var(--red)}
.msg-del:disabled{opacity:.3}
.chat-head .chat-clear{margin-left:4px}
@media (max-width:900px){
  .chat-layout .chat-list.cl-scroll{height:auto;min-height:0;overflow:visible}
  .chat-list.cl-scroll .vl-body{flex-direction:column}
}

/* Chat trên điện thoại: thanh A-Z nằm ngang không được làm rộng layout */
@media (max-width:900px){
  .chat-layout{grid-template-columns:minmax(0,1fr)}
  .chat-layout > *{min-width:0}
  .chat-list.cl-scroll,.chat-list.cl-scroll .vl-body,.chat-list.cl-scroll .vl-scroll{min-width:0;max-width:100%}
  .chat-list.cl-scroll .vl-rail{max-width:100%}
  .chat-head .chat-clear{flex-shrink:0;margin-left:0}
  .chat-head .chat-clear .btn{width:36px;height:36px;padding:0;border-radius:50%;font-size:15px}
  .chat-head .spacer{min-width:0}
}

/* ---------- Cộng đồng trên điện thoại: ô soạn bài gọn, banner 1 dòng, bộ lọc cuộn ngang ---------- */
.cd-hint-short{display:none}
@media (max-width:760px){
  .cd-composer{padding:12px}
  .cd-who-row{gap:10px;align-items:center}
  .cd-who-row .cd-av{width:38px;height:38px;font-size:16px;flex-shrink:0}
  .cd-composer textarea{min-height:52px;font-size:15.5px;padding:4px 0}
  .cd-tools{display:grid;grid-template-columns:repeat(3,44px) minmax(0,1fr);grid-template-areas:"a b c v" "p p p p";gap:8px;align-items:center;padding-top:10px;margin-top:8px}
  .cd-tools > .cd-spacer{display:none}
  .cd-tool{width:44px;height:40px;padding:0;justify-content:center;border:1.5px solid var(--border);background:var(--card-2);font-size:18px}
  .cd-tool .lbl,.cd-tool .c{display:none}
  .cd-tool .ic{font-size:18px;line-height:1;font-weight:700}
  #cdAddImg{grid-area:a}#cdAddVid{grid-area:b}#cdAddTag{grid-area:c}
  .cd-tools .cd-vis{grid-area:v;width:100%;min-width:0;height:40px;font-size:13.5px}
  .cd-tools .cd-post{grid-area:p;width:100%;min-height:44px;font-size:15px}
  .cd-hint{display:none}
  .cd-hint-short{display:block;color:var(--muted);font-size:12px;margin-top:8px;text-align:center}

  .cd-banner{flex-wrap:nowrap;gap:8px;padding:10px 12px;font-size:14px;margin-bottom:10px}
  .cd-banner .cd-bot{font-size:20px}
  .cd-banner .cd-next-txt{min-width:0}
  .cd-banner .cd-cur{flex-shrink:0;padding:6px 10px}
  .cd-banner .cd-cur .lbl{display:none}

  .cd-chips{flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:0 -12px 12px;padding:2px 12px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cd-chips::-webkit-scrollbar{display:none}
  .cd-chip{white-space:nowrap;padding:6px 12px;font-size:13px}
}

/* Cộng đồng trên điện thoại: hàng bộ lọc cuộn ngang không được làm rộng cả trang */
@media (max-width:960px){
  .cd-layout{grid-template-columns:minmax(0,1fr)}
  .cd-layout > *,.cd-main{min-width:0;max-width:100%}
  .cd-chips{max-width:calc(100% + 24px)}
}

/* ---------- Trao đổi: Trò chuyện mới (tìm người) ---------- */
.cl-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 10px;flex-shrink:0}
.cl-head b{font-size:15px;color:var(--ink)}
.ct-box{margin:0 0 10px;padding:10px;border-radius:12px;background:var(--card-2);border:1.5px solid var(--border);flex-shrink:0}
.ct-box[hidden]{display:none}
.ct-box .search{margin:0}
.ct-hint{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.ct-hint[hidden]{display:none}
.ct-res{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:260px;overflow-y:auto}
.ct-res:empty{display:none}
.ct-res .chat-item{margin-bottom:0}
.ct-none{font-size:13px;padding:4px 2px;margin:0}
.ct-empty{max-width:420px;margin:16px auto 0;text-align:left}
.ct-empty b{display:block;margin-bottom:8px;color:var(--ink)}
@media (max-width:600px){.cl-head .btn span{display:inline}}

/* ---------- Trao đổi: ghi âm gửi tin nhắn thoại ---------- */
.chat-audio{display:block;width:240px;max-width:100%;height:38px}
.msg.mine .chat-audio{filter:none}
.chat-rec{flex-basis:100%;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;background:var(--card-2);border:1.5px solid var(--border)}
.chat-rec[hidden]{display:none}
.chat-rec-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chat-rec-row[hidden]{display:none}
.chat-rec-lab{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.chat-rec-dev{flex:1;min-width:0}
.chat-rec-dot{width:10px;height:10px;border-radius:50%;background:var(--muted)}
.chat-rec-dot.on{background:var(--red);animation:chatRecBlink 1s ease-in-out infinite}
@keyframes chatRecBlink{50%{opacity:.3}}
.chat-rec-level{flex:1;min-width:80px;height:8px;border-radius:5px;background:var(--card);overflow:hidden;border:1px solid var(--border)}
.chat-rec-level i{display:block;height:100%;width:0;background:var(--green);transition:width .06s}
.chat-rec-row audio{flex:1 1 200px;min-width:0;height:36px}
.chat-rec-msg{font-size:12.5px;min-height:0}
.chat-rec-msg:empty{display:none}
@media (max-width:900px){
  .chat-form #chatMic{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;flex-shrink:0}
  .chat-audio{width:210px}
}
/* =========================================================
   Admin xem hộ người dùng: thanh báo (chỉ hiện trong tab /vx/{mã}/...)
   ========================================================= */
.va-bar{position:sticky;top:0;z-index:150;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;background:#7a1f1f;color:#fff;font-size:14px;border-bottom:3px solid #f4d35e}
.va-eye{font-size:18px}
.va-txt{flex:1;min-width:200px;font-weight:700}
.va-end{margin:0}
.va-btn{background:#fff;color:#7a1f1f;border-radius:8px;padding:6px 14px;font-weight:700;font-size:13px}
.va-btn:hover{filter:brightness(.93)}

/* =========================================================
   Chia sẻ từ vựng (Note_VocabShare)
   ========================================================= */
.vs-entry{display:flex;align-items:center;gap:14px;margin-bottom:16px;color:inherit;transition:border-color .15s}
.vs-entry:hover{border-color:var(--ink)}
.vs-entry-ico{font-size:30px}
.vs-entry small{display:block;margin-top:2px}
.vs-tabs{max-width:560px;margin-bottom:14px}
.vs-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.vs-note{background:var(--accent-soft);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:13.5px;margin-bottom:14px}
.vs-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.vs-tools input,.vs-search input{flex:1;min-width:150px;border:1.5px solid var(--border);border-radius:10px;padding:8px 12px;background:var(--card);outline:none}
.vs-tools input:focus,.vs-search input:focus{border-color:var(--accent)}
.vs-search{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.vs-list{border:1px solid var(--border);border-radius:12px;max-height:420px;overflow-y:auto;background:var(--card)}
.vs-folder summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--card-2);position:sticky;top:0;z-index:1;border-bottom:1px solid var(--border)}
.vs-folder summary::-webkit-details-marker{display:none}
.vs-chk{display:inline-flex}
.vs-list input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);flex-shrink:0;cursor:pointer}
.vs-word{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px dashed var(--border);cursor:pointer}
.vs-word[hidden]{display:none}
.vs-word.have{opacity:.65;cursor:default}
.vs-word:hover{background:var(--card-2)}
.vs-wtxt{flex:1;min-width:0;overflow-wrap:anywhere}
.vs-wtxt small{display:block;color:var(--muted)}
.vs-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.vs-ava{width:36px;height:36px;border-radius:50%;background:var(--t5);display:grid;place-items:center;font-weight:700;color:#3a2a10;flex-shrink:0}
.vs-person{border-bottom:1.5px dashed var(--border);padding:2px 0 10px}
.vs-person:last-child{border:0}
.vs-person summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:8px 0}
.vs-person summary::-webkit-details-marker{display:none}
.vs-who{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.vs-who small{overflow:hidden;text-overflow:ellipsis}
.vs-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.vs-chip{display:inline-flex;align-items:center;gap:2px;background:var(--card-2);border:1px solid var(--border);border-radius:20px;padding:2px 3px 2px 10px;font-size:13px;margin:0}
.vs-chip button{width:22px;height:22px;border-radius:50%;color:var(--muted);font-size:11px}
.vs-chip button:hover{background:var(--red-soft);color:var(--red)}
.vs-recv-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.vs-recv-head small{display:block}
.vs-ro{font-size:13px;color:var(--muted);margin-bottom:10px}
.vs-save{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.vs-dest{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);min-width:0}
.vs-dest select{width:auto;max-width:100%;min-width:0}
.vs-remove{margin-top:8px}
@media (max-width:900px){
  .vs-grid{grid-template-columns:minmax(0,1fr)}
  .vs-list{max-height:55vh}
  .vs-save .btn{flex:1}
  .vs-dest{width:100%}.vs-dest select{flex:1}
}

/* =========================================================
   Trang Tổng quan (Home/Index)
   ========================================================= */
.ov{--s0:#ebe7dc;--s1:#c6d6f5;--s2:#8eaeea;--s3:#4f7fdc;--s4:#1f5fd6;min-width:0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ov{--s0:#30343c;--s1:#2c3a63;--s2:#3c5aa8;--s3:#5c7fe0;--s4:#8eaaff}}
:root[data-theme="dark"] .ov{--s0:#30343c;--s1:#2c3a63;--s2:#3c5aa8;--s3:#5c7fe0;--s4:#8eaaff}
.ov .xs{font-size:12.5px}
.ov .sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:middle}
.ov .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;flex-shrink:0;color:#3a2a10;font-size:13px}
.ov-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
.ov-h1{font-size:30px;font-weight:700;color:var(--ink);line-height:1.25;display:block;margin-top:2px}
.ov-sub{color:var(--muted);margin:6px 0 16px;font-size:15px}
.ov-badges{display:flex;gap:10px;flex-wrap:wrap}
.ov-badge{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow);color:inherit}
a.ov-badge:hover{border-color:var(--ink)}
.ov-bi{font-size:24px}
.ov-big{display:block;font-size:22px;font-weight:700;color:var(--ink);line-height:1}
.ov-badge .xs{display:block}
.ov-week{display:flex;gap:6px;margin-top:16px}
.ov-wd{flex:1;text-align:center;font-size:11.5px;color:var(--muted)}
.ov-wd i{display:grid;place-items:center;margin:4px auto 0;width:32px;height:32px;border-radius:50%;border:2px dashed var(--border);font-style:normal;font-size:13px;font-weight:700}
.ov-wd.done i{border:2px solid var(--green);background:var(--green-soft);color:var(--green)}
.ov-wd.today i{border:2px solid var(--accent);color:var(--accent)}
.ov-words{margin-top:24px}
.ov-words h3 .spacer{flex:1}
.ov-wchips{display:flex;gap:8px;flex-wrap:wrap}
.ov-wchip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--border);background:var(--card);border-radius:20px;padding:4px 6px 4px 12px;font-size:14px;max-width:100%}
.ov-say{font-weight:700;display:inline-flex;gap:6px;align-items:baseline;cursor:pointer;min-width:0;max-width:240px;overflow:hidden;white-space:nowrap}
.ov-say .m{font-weight:400;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.ov-wgo{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;font-size:12px;flex-shrink:0}
.ov-plan-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.ov-ring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;transition:background .4s}
.ov-ring span{width:50px;height:50px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-weight:700;color:var(--ink);font-size:14px}
.ov-task{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1.5px dashed var(--border)}
.ov-task:last-child{border:0}
.ov-task .spacer{min-width:0}
.ov-check{width:24px;height:24px;border:2px solid var(--ink);border-radius:6px;flex-shrink:0;display:grid;place-items:center;font-weight:700;color:#fff}
.ov-task.done .ov-check{background:var(--green);border-color:var(--green)}
.ov-task.done .ov-tt{text-decoration:line-through;color:var(--muted)}
.ov-ti{font-size:20px;width:26px;text-align:center;flex-shrink:0}
.ov-tt{font-weight:700;display:block}
.ov-task small{color:var(--muted);display:block}
.ov-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.ov-stat{padding:14px 16px;color:inherit;display:block;transition:border-color .15s}
.ov-stat:hover{border-color:var(--ink)}
.ov-stat .l{font-size:13px;color:var(--muted)}
.ov-stat .n{font-size:30px;font-weight:700;color:var(--ink);line-height:1.15;margin:4px 0}
.ov-stat .d{font-size:12.5px}
.ov-seg{display:flex;height:8px;border-radius:5px;overflow:hidden;gap:2px;margin:8px 0 6px;background:var(--card-2)}
.ov-seg i{display:block;height:100%}
.ov-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.ov-legend b{color:var(--text)}
.ov-sticky{margin-top:22px;background:var(--sticky);color:var(--sticky-ink);padding:16px 18px;border-radius:2px;transform:rotate(-.6deg);box-shadow:3px 6px 14px rgba(0,0,0,.14)}
.ov-sticky .btn{color:var(--text)}
.ov-sticky-sm{margin-top:14px;transform:rotate(.6deg);padding:12px 14px;font-size:13.5px}
.ov-sticky-sm .btn{margin-top:6px}
.ov-coach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.ov-tip{background:rgba(255,255,255,.55);border-radius:10px;padding:12px;font-size:14px;display:flex;flex-direction:column;gap:8px;overflow-wrap:anywhere}
:root[data-theme="dark"] .ov-tip{background:rgba(0,0,0,.18)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ov-tip{background:rgba(0,0,0,.18)}}
.ov-tip .btn{align-self:flex-start;white-space:normal;text-align:left}
.ov-two{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;margin-top:22px}
.ov-two h3 .spacer{flex:1}
.ov-chart{position:relative}
.ov-chart svg{display:block;width:100%;height:auto;overflow:visible}
.ov-chart .bar{fill:var(--accent);transition:opacity .15s}
.ov-chart .bar.today{fill:var(--s2)}
.ov-chart .hit{fill:transparent;cursor:pointer}
.ov-chart .g{stroke:var(--line);stroke-width:1}
.ov-chart .goal{stroke:var(--amber);stroke-width:1.5;stroke-dasharray:4 4}
.ov-chart text{font-family:var(--font);font-size:11.5px;fill:var(--muted)}
.ov-tipbox{position:absolute;pointer-events:none;background:#1f2937;color:#fff;font-size:12.5px;padding:7px 10px;border-radius:8px;white-space:nowrap;transform:translate(-50%,-110%);opacity:0;transition:opacity .12s;z-index:5}
.ov-tipbox.show{opacity:1}
.ov-tipbox b{display:block}
.ov-heatwrap{display:flex;gap:6px;align-items:flex-start;overflow-x:auto;padding-bottom:2px}
.ov-heatdays{display:grid;grid-template-rows:repeat(7,15px);gap:3px;margin-top:8px;font-size:10px;color:var(--muted);line-height:15px}
.ov-heat{flex:1;min-width:220px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,15px);grid-auto-columns:minmax(15px,1fr);gap:3px;margin-top:8px}
.ov-heat i{height:15px;border-radius:3px;background:var(--s0);cursor:pointer}
.ov-heat i:hover{outline:2px solid var(--ink)}
.ov-scale{display:flex;align-items:center;gap:3px;font-size:11.5px;color:var(--muted);margin:8px 0 0 34px}
.ov-scale i{width:11px;height:11px;border-radius:2px}
.ov-skill{display:grid;grid-template-columns:minmax(96px,128px) minmax(0,1fr) 38px;align-items:center;gap:10px;margin-bottom:11px;font-size:14px;color:var(--text)}
.ov-skill:hover span{color:var(--ink)}
.ov-skill .track{height:12px;border-radius:7px;background:var(--card-2);overflow:hidden}
.ov-skill .track i{display:block;height:100%;border-radius:7px 12px 9px 7px;background:var(--accent)}
.ov-skill.low .track i{background:var(--amber)}
.ov-skill.nodata{opacity:.55}
.ov-skill b{text-align:right;color:var(--ink)}
.ov-sec{margin-top:22px}
.ov-h2{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:12px}
.ov-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ov-cont{display:flex;flex-direction:column;gap:8px;color:inherit;transition:border-color .15s}
.ov-cont:hover{border-color:var(--ink)}
.ov-cont .thumb{height:86px;border-radius:9px;display:grid;place-items:center;font-size:34px}
.ov-cont .spacer{min-width:0}
.ov-cont b{color:var(--ink);overflow-wrap:anywhere}
.ov-feed{display:flex;gap:10px;padding:10px 0;border-bottom:1.5px dashed var(--border);font-size:14px;align-items:flex-start;color:inherit}
.ov-feed:last-child{border:0}
.ov-feed .spacer{min-width:0;overflow-wrap:anywhere}
a.ov-feed:hover b{color:var(--accent)}
@media (max-width:1100px){
  .ov-hero,.ov-two{grid-template-columns:minmax(0,1fr)}
  .ov-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ov-coach{grid-template-columns:minmax(0,1fr)}
  .ov-three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .ov-h1{font-size:25px}
  .ov-sticky,.ov-sticky-sm{transform:none}
  .ov-three{grid-template-columns:minmax(0,1fr)}
  .ov-cont{flex-direction:row;align-items:center}
  .ov-cont .thumb{width:64px;height:64px;flex-shrink:0;font-size:26px}
  .ov-badge{flex:1;min-width:140px}
  .ov-stats{gap:10px}
  .ov-stat{padding:12px}
  .ov-stat .n{font-size:26px}
  .ov-task{flex-wrap:wrap}
  .ov-task .btn{margin-left:auto}
}

/* ---------- Gọi thoại (cl-*) ---------- */
.cl-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:84px;padding:10px 14px;border-radius:16px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font-weight:700;font-size:13px;line-height:1.2;transition:filter .15s,transform .1s}
.cl-btn:hover{filter:brightness(.96)}
.cl-btn:active{transform:scale(.97)}
.cl-btn .cl-ico{font-size:24px;line-height:1}
.cl-btn.yes{background:var(--green);border-color:var(--green);color:#fff}
.cl-btn.no{background:var(--red);border-color:var(--red);color:#fff}
.cl-btn.mute.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cl-btn[disabled]{opacity:.55;cursor:default}
:root[data-theme="dark"] .cl-btn.yes,:root[data-theme="dark"] .cl-btn.no{color:#10131a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cl-btn.yes,:root:not([data-theme="light"]) .cl-btn.no{color:#10131a}}

/* Chuông cuộc gọi đến (mọi trang) */
.cl-ring{position:fixed;inset:0;z-index:400;display:flex;align-items:flex-start;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px 16px;background:transparent}
.cl-ring[hidden]{display:none}
.cl-ring-card{width:100%;max-width:380px;margin-top:6vh;background:var(--card);color:var(--text);border:1.5px solid var(--border);border-radius:22px;padding:22px 20px 18px;box-shadow:0 24px 60px rgba(0,0,0,.4);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.cl-ring-av,.cl-av{width:84px;height:84px;border-radius:50%;background:var(--accent);color:#fff;font-size:36px;font-weight:700;display:flex;align-items:center;justify-content:center;position:relative}
.cl-ring-av::before,.cl-av.ringing::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid var(--accent);opacity:.6;animation:cl-pulse 1.4s ease-out infinite}
.cl-ring-av::after,.cl-av.ringing::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid var(--accent);opacity:.6;animation:cl-pulse 1.4s ease-out .7s infinite}
@keyframes cl-pulse{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.cl-ring-txt{display:flex;flex-direction:column;gap:2px}
.cl-ring-txt b{font-size:20px;overflow-wrap:anywhere}
.cl-ring-txt small{color:var(--muted);font-size:13px}
.cl-ring-btns{display:flex;gap:26px;margin-top:4px}
.cl-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:390;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:12px;font-weight:700;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:calc(100vw - 32px)}
.cl-toast[hidden]{display:none}

/* Cửa sổ cuộc gọi */
body.cl-room{display:flex;align-items:center;justify-content:center;padding:16px;background:var(--paper);background-attachment:scroll;min-height:100vh;min-height:100dvh}
.cl-card{width:100%;max-width:380px;background:transparent;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:24px 8px}
.cl-card .cl-av{width:120px;height:120px;font-size:52px;margin-bottom:10px}
.cl-name{font-size:26px;font-weight:700;overflow-wrap:anywhere}
.cl-status{font-size:16px;opacity:.85;min-height:24px}
.cl-timer{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.cl-msg{background:var(--card-2);border:1px solid var(--border);border-radius:12px;padding:8px 12px;font-size:14px}
.cl-msg[hidden],.cl-timer[hidden]{display:none}
.cl-ctrl{display:flex;gap:28px;margin-top:18px}
.cl-card .cl-btn{background:var(--card);border-color:var(--border);color:var(--text)}
.cl-card .cl-btn.no{background:var(--red);border-color:var(--red);color:#fff}
.cl-card .cl-btn.mute.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cl-after{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.cl-after .btn[hidden],.cl-ctrl .cl-btn[hidden]{display:none}

/* Nhật ký cuộc gọi trong khung chat */
.msg.call{align-self:center;max-width:100%}
.msg.call .bubble{background:var(--card-2);color:var(--text);border:1px dashed var(--border);box-shadow:none;border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:700}
.msg.call.miss .bubble{color:var(--red);border-color:var(--red)}
.msg.call .msg-time{text-align:center}
.chat-call-btn{flex-shrink:0}
@media (max-width:900px){.chat-call-btn{width:36px;height:36px;padding:0;border-radius:50%;font-size:16px}}
.chat-block-btn.on{background:var(--red-soft);border-color:var(--red)}
.turn-box{background:var(--card-2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin:10px 0;line-height:1.7}
.turn-ok{color:var(--green);font-weight:700}.turn-bad{color:var(--red);font-weight:700}.turn-warn{color:var(--amber);font-weight:700}

/* Gọi video */
.cl-stage{position:relative;width:100%;aspect-ratio:3/4;max-height:56vh;border-radius:18px;background:#000;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.cl-stage[hidden]{display:none}
.cl-remote{width:100%;height:100%;object-fit:cover;background:#000}
.cl-local{position:absolute;right:10px;bottom:10px;width:30%;max-width:130px;aspect-ratio:3/4;object-fit:cover;border-radius:10px;border:2px solid rgba(255,255,255,.65);background:#222;transform:scaleX(-1)}
body.cl-live .cl-av{display:none}
body.cl-live .cl-card{gap:10px;padding-top:8px}
.cl-card .cl-btn.cam.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cl-card .cl-btn[hidden]{display:none}
.cl-ctrl{flex-wrap:wrap;justify-content:center}
@media (max-width:420px){.cl-ctrl{gap:14px}}

/* Điện thoại: nút chat ở góc trên bên phải, dòng giao diện sáng/tối trong menu Thêm */
.top-chat{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;margin-left:6px;border-radius:50%;background:var(--card);border:1.5px solid var(--border);font-size:16px;line-height:1;color:var(--text)}
.top-chat.active{border-color:var(--accent);background:var(--accent-soft)}
.top-chat .tab-badge{position:absolute;top:-5px;right:-5px;margin-left:0;font-size:10px;min-width:16px;height:16px;padding:0 5px}
.top-chat .tab-badge[hidden]{display:none}
button.more-link{width:100%;text-align:left;background:none;font-family:inherit}

/* ---------- Chat trên điện thoại: khung chat chiếm cả màn hình, dễ bấm hơn ---------- */
.chat-more{display:contents}
.chat-more > summary{display:none}
.chat-more-menu{display:contents}
.cm-txt{display:none}
@media (max-width:900px){
  .chat-page main{padding:10px 12px calc(96px + env(safe-area-inset-bottom)) 12px}
  .chat-page main::before{display:none}

  /* Menu ⋯ gom: chặn gọi, xem nội dung, xóa cuộc trò chuyện */
  .chat-more{display:block;position:relative;flex-shrink:0}
  .chat-more > summary{display:inline-flex;align-items:center;justify-content:center;list-style:none;width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;font-size:20px;line-height:1;cursor:pointer}
  .chat-more > summary::-webkit-details-marker{display:none}
  .chat-more-menu{display:flex;flex-direction:column;gap:2px;position:absolute;right:0;top:44px;z-index:6;min-width:240px;padding:6px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.28)}
  .chat-more:not([open]) .chat-more-menu{display:none}
  .chat-more-menu .btn{width:100%;height:auto;min-height:48px;justify-content:flex-start;gap:12px;padding:0 12px;border:0;border-radius:10px;background:none;font-size:15px;white-space:normal;text-align:left}
  .chat-more-menu .btn:active{background:var(--card-2)}
  .chat-more-menu .cm-ico{width:24px;text-align:center;font-size:18px}
  .chat-more-menu .cm-txt,.chat-more-menu .chat-view-txt{display:inline}
  .chat-more-menu .chat-clear{display:block;margin:0}
  .chat-more-menu .chat-clear .btn{width:100%;height:auto;border-radius:10px;font-size:15px;color:var(--red)}
  .chat-more-menu .chat-block-btn.on{background:var(--red-soft)}

  /* Đang mở 1 cuộc trò chuyện: ẩn thanh trên + thanh tab, khung chat phủ kín màn hình (cao theo vùng nhìn thấy thật khi bật bàn phím) */
  body.chat-open{overflow:hidden}
  body.chat-open .topbar,body.chat-open .tabbar{display:none}
  body.chat-open main{padding:0;background:var(--paper)}
  body.chat-open .chat-layout{display:block}
  body.chat-open .chat-pane{position:fixed;left:0;right:0;top:var(--vvt,0px);height:100vh;height:var(--vvh,100dvh);min-height:0;z-index:35;border:0;border-radius:0;box-shadow:none;background:var(--paper)}
  body.chat-open .chat-head{padding:calc(8px + env(safe-area-inset-top)) 10px 8px;background:var(--card);box-shadow:0 1px 0 var(--border)}
  body.chat-open .chat-head .mobile-back{width:40px;height:40px}
  body.chat-open .chat-head b{font-size:16px}
  body.chat-open .chat-messages{padding:10px 10px 6px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  body.chat-open .msg{max-width:88%}
  body.chat-open .bubble{font-size:16px;line-height:1.45;padding:8px 12px}
  body.chat-open .msg-time{font-size:11.5px}
  body.chat-open .msg-del{padding:8px 10px;font-size:15px;opacity:.7}
  body.chat-open .chat-form{gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));align-items:flex-end}
  body.chat-open .chat-form textarea{min-height:44px;font-size:16px}
  body.chat-open .chat-form #chatAttach,body.chat-open .chat-form #chatMic,body.chat-open .chat-send{width:44px;height:44px;min-height:44px}
  body.chat-open .chat-img{max-width:min(100%,260px);max-height:260px}
}
@media (max-width:900px){
  /* .card đặt padding 14px trên điện thoại làm khung chat bị thụt vào: bỏ để tin nhắn rộng hết cỡ */
  .chat-pane{padding:0}
}

/* ---------- Trạng thái trực tuyến, danh sách liên hệ, hàng nút trên menu Thêm ---------- */
.avatar{position:relative}
.pres-dot{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;box-sizing:border-box;border:2.5px solid var(--card);background:var(--muted)}
.pres-dot.on{background:#2fbf4a}
.pres-dot.hide{display:none}
.pres-txt.on{color:var(--green);font-weight:700}
.pres-txt:empty{display:none}
.chat-end{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.chat-time{font-size:11.5px;color:var(--muted);white-space:nowrap}
.ct-bar{display:none}
body.ct-open{overflow:hidden}

.more-top{display:flex;gap:10px;margin:0 0 12px}
.more-act{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 10px;border-radius:12px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font-weight:700;font-size:15px;font-family:inherit}
.more-act .tab-ico{font-size:18px}
.more-act.out{color:var(--red);border-color:var(--red)}
.more-act:active{background:var(--card-2)}

@media (max-width:900px){
  .chat-acc{display:none}
  .chat-list .chat-item{min-height:68px;padding:10px 10px;gap:12px}
  .chat-list .chat-item .avatar{width:46px;height:46px;font-size:19px}
  .chat-list .chat-item .chat-meta b{font-size:16px}
  .chat-list .chat-item .chat-preview{font-size:14px}
  .chat-list .chat-item .pres-dot{width:14px;height:14px}

  /* "Trò chuyện mới": mở thành màn hình riêng, ô tìm lớn, kết quả rộng dễ chạm */
  .chat-list .ct-box:not([hidden]){position:fixed;top:0;right:0;bottom:0;left:0;z-index:45;display:flex;flex-direction:column;margin:0;border:0;border-radius:0;background:var(--paper);padding:calc(10px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));overflow:hidden}
  .chat-list .ct-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .ct-close{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;font-size:18px;flex-shrink:0}
  .ct-bar b{font-size:19px;color:var(--ink)}
  .chat-list .ct-box .search{font-size:16px;min-height:48px;padding:0 18px;border-radius:24px}
  .chat-list .ct-hint{font-size:14px;margin-top:12px;text-align:center}
  .chat-list .ct-res{flex:1;min-height:0;max-height:none;overflow-y:auto;margin-top:10px;gap:0}
  .chat-list .ct-res .chat-item{border-radius:0;border-bottom:1px solid var(--line);min-height:68px}
}

/* ---------- Tổng quan: bài đọc dạng slide + bình luận đã làm ---------- */
.ov-head2{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ov-head2 .ov-h2{margin:0}
.ov-head2 .btn{margin-left:auto}
.ov-read{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;align-items:stretch}
.ov-slides{position:relative;padding:0;overflow:hidden;min-height:280px;display:flex;flex-direction:column}
.ov-track{display:flex;flex:1;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.ov-track::-webkit-scrollbar{display:none}
.ov-slide-msg{padding:24px;margin:auto}
.ov-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;color:inherit}
.ov-slide-img{position:relative;height:160px;flex-shrink:0;background:linear-gradient(135deg,var(--accent-soft),var(--card-2));overflow:hidden}
.ov-slide-img img{width:100%;height:100%;object-fit:cover;display:block}
.ov-slide-tag{position:absolute;left:10px;top:10px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.ov-slide-body{flex:1;padding:12px 16px 36px;display:flex;flex-direction:column;gap:6px}
.ov-slide-body b{font-size:17px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.ov-slide-body p{margin:0;color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ov-slide-foot{display:flex;align-items:center;gap:10px;margin-top:auto}
.ov-slide-go{margin-left:auto;font-weight:700;color:var(--accent);font-size:14px}
.ov-slide:hover .ov-slide-body b{text-decoration:underline}
.ov-nav{position:absolute;top:60px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:22px;line-height:1;display:grid;place-items:center;z-index:2}
.ov-nav[hidden]{display:none}
.ov-nav.prev{left:8px}.ov-nav.next{right:8px}
.ov-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px;pointer-events:none}
.ov-dots button{width:8px;height:8px;border-radius:50%;background:var(--border);padding:0;pointer-events:auto;transition:width .2s}
.ov-dots button.on{background:var(--accent);width:22px;border-radius:5px}
.ov-cmts{display:flex;flex-direction:column;min-width:0}
.ov-clist{display:flex;flex-direction:column;overflow-y:auto;max-height:330px}
.ov-cmt{display:block;padding:10px 2px;border-bottom:1.5px dashed var(--border);color:inherit}
.ov-cmt:last-child{border:0}
.ov-cmt:hover .ov-cmt-t{text-decoration:underline}
.ov-cmt-t{font-weight:700;color:var(--ink);font-size:14px;overflow-wrap:anywhere}
.ov-cmt-q{font-size:13px;color:var(--muted);font-style:italic;margin-top:3px;border-left:3px solid var(--hl);padding-left:8px;overflow-wrap:anywhere}
.ov-cmt-b{font-size:14px;margin:4px 0 2px;overflow-wrap:anywhere}
.ov-cmt.done{opacity:.7}
.wt-cmt.flash{animation:cmtFlash 1.6s ease-out 2}
@keyframes cmtFlash{0%,100%{box-shadow:none}35%{box-shadow:0 0 0 3px var(--hl)}}
@media (max-width:900px){
  .ov-read{grid-template-columns:minmax(0,1fr)}
  .ov-slides{min-height:300px}
  .ov-slide-img{height:170px}
  .ov-nav{display:none}
}
.ov-clist{scrollbar-width:thin;scrollbar-color:var(--border) transparent}

/* Tổng quan: bài nghe ngẫu nhiên trong thẻ kế hoạch */
.ov-listen{margin-top:12px;padding-top:12px;border-top:1.5px dashed var(--border)}
.ov-listen-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ov-listen-head b{color:var(--ink)}
.ov-listen-head .btn{margin-left:auto}
.ov-listen-title{font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.ov-listen-title a{color:var(--ink)}
.ov-listen-title a:hover{text-decoration:underline}
.ov-media{display:block;width:100%;margin-top:8px}
video.ov-media{max-height:230px;border-radius:10px;background:#000}
.ov-yt{position:relative;aspect-ratio:16/9;margin-top:8px;border-radius:10px;overflow:hidden;background:#000}
.ov-yt iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.ov-listen-open{margin-top:8px}
.ov-listen-bad{color:var(--red);margin-top:6px}

/* ---------- Tổng quan: bố cục theo luồng Hôm nay -> Tiếp tục -> Gợi ý -> Tiến độ -> Bài đọc -> Cộng đồng ---------- */
.ov-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:4px}
.ov-top .ov-greet{min-width:0;flex:1 1 340px}
.ov-top .ov-sub{margin:6px 0 0}
.ov-top .ov-badges{flex:0 1 auto;flex-wrap:nowrap}
.ov-sec{margin-top:28px}
.ov-top + .ov-sec{margin-top:16px}
.ov-h2{display:flex;align-items:center;gap:8px;font-size:17px;margin:0 0 12px}
.ov-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;align-items:stretch}
.ov-plan{display:flex;flex-direction:column;margin:0}
.ov-weekbox{margin-top:auto;padding-top:14px;border-top:1.5px dashed var(--border)}
.ov-weekbox .ov-week{margin-top:8px}
.ov-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.ov-words{margin-top:0}
.card.ov-listen{margin:0;padding:18px;border:1px solid var(--border)}
.ov-coachcard{border-left:4px solid var(--amber)}
.ov-coachcard h3{margin-bottom:10px}
.ov-coachcard .ov-coach{margin-top:0}
.ov-coachcard .ov-tip,:root[data-theme="dark"] .ov-coachcard .ov-tip{background:var(--card-2);border:1px solid var(--border)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ov-coachcard .ov-tip{background:var(--card-2);border:1px solid var(--border)}}
.ov-note{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--amber-soft);border-left:4px solid var(--amber);font-size:13.5px;color:var(--text)}
.ov-note .btn{margin-top:6px}
.ov-progress .ov-stats{margin-top:0}
.ov-progress .ov-two{margin-top:16px}
@media (max-width:900px){
  .ov-top .ov-badges{width:100%}
}
@media (max-width:760px){
  .ov-top .ov-badges{gap:8px}
  .ov-top .ov-badge{flex:1 1 0;min-width:0;padding:8px 10px;gap:8px}
  .ov-top .ov-bi{font-size:20px}
  .ov-top .ov-big{font-size:19px}
  .ov-sec{margin-top:22px}
}
@media (max-width:900px){
  .ov-hero{grid-template-columns:minmax(0,1fr)}
  .ov-slides{min-height:0}
}

/* ---------- Ảnh đại diện, bạn bè và tìm bài trong Cộng đồng ---------- */
.avatar img,.cd-av img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.cd-av{position:relative}
.av-edit{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 16px}
.av-edit .inline-form{display:inline}
.cd-chev{display:inline-block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-3px 8px 0 0;vertical-align:middle}
#cdMore{display:inline-flex;align-items:center}
#cdMore[hidden]{display:none}
.cd-search{display:flex;gap:8px;align-items:center;margin:0 0 14px}
.cd-search input[type=search]{flex:1;min-width:0;border:1.5px solid var(--border);border-radius:20px;padding:9px 14px;background:var(--card);font-size:14.5px;outline:none;color:var(--text)}
.cd-search input[type=search]:focus{border-color:var(--accent)}
.cd-friends{padding:14px}
.cd-fr-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink)}
.cd-fr-list{margin-top:10px;display:flex;flex-direction:column;max-height:340px;overflow-y:auto;scrollbar-width:thin}
.cd-fr{display:flex;align-items:center;gap:6px;border-radius:10px;padding:2px 4px}
.cd-fr:hover,.cd-fr.on{background:var(--accent-soft)}
.cd-fr-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:5px 2px;color:inherit}
.cd-fr-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.cd-fr-txt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.cd-fr-txt small{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-fr-chat{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;flex-shrink:0;color:inherit}
.cd-fr-chat:hover{background:var(--card-2)}
.cd-friends .pres-dot{border-color:var(--card)}
@media (max-width:960px){
  /* Điện thoại / máy tính bảng: chỉ giữ danh sách bạn, thành 1 hàng cuộn ngang ở đầu trang */
  .cd-side{display:block;order:-1;position:static}
  .cd-side > :not(.cd-friends){display:none}
  .cd-friends{padding:10px 12px;margin-bottom:12px}
  .cd-fr-list{flex-direction:row;gap:4px;overflow-x:auto;max-height:none;padding-bottom:2px}
  .cd-fr{flex:0 0 auto;padding:0}
  .cd-fr-main{flex-direction:column;width:64px;gap:4px;text-align:center;padding:4px 0}
  .cd-fr-txt small{display:none}
  .cd-fr-txt b{font-size:12px;max-width:62px}
  .cd-fr-chat{display:none}
  .cd-fr-main .cd-av{width:44px;height:44px;font-size:17px}
}

/* Tổng quan: hàng cuối = Bài nghe (trái) + Cộng đồng (phải); Gợi ý nằm dưới "Từ cần luyện" ở cột phải của "Hôm nay" */
.ov-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;align-items:start}
.ov-community{margin:0}
.ov-side .ov-coachcard{margin:0}
.ov-side .ov-coachcard .ov-coach{grid-template-columns:minmax(0,1fr);gap:8px}
@media (max-width:900px){
  .ov-duo{grid-template-columns:minmax(0,1fr)}
}
.cl-sel{width:auto;max-width:100%}
.cl-sel[hidden]{display:none}
/* Đăng nhập: "Ghi nhớ đăng nhập" (trái) + "Quên mật khẩu?" (phải) trên cùng 1 hàng */
.au-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 4px;flex-wrap:wrap}
.au-remember{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--au-text,#2a2f38);cursor:pointer;user-select:none;min-height:36px}
.au-remember input{width:18px;height:18px;margin:0;accent-color:#1f5fd6;flex-shrink:0}
.au-forgot-link{font-size:14px;font-weight:600;color:#1f5fd6;text-decoration:none;min-height:36px;display:inline-flex;align-items:center}
.au-forgot-link:hover{text-decoration:underline}

/* Tổng quan - "Gợi ý cho bạn hôm nay": mỗi gợi ý đúng 1 hàng (chữ cắt "…" nếu dài, đầy đủ ở tooltip), nút hành động nằm cuối hàng */
.ov-coachcard .ov-coach{display:flex;flex-direction:column;grid-template-columns:none;gap:8px;margin-top:0}
.ov-coachcard .ov-tip{flex-direction:row;align-items:center;gap:10px;padding:8px 8px 8px 12px;overflow-wrap:normal;min-width:0}
.ov-coachcard .ov-tip-t{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;font-size:14px}
.ov-coachcard .ov-tip .btn{display:block;flex:0 0 auto;align-self:center;white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis;text-align:center;min-height:0;height:34px;line-height:30px;padding:0 12px}
@media (max-width:420px){.ov-coachcard .ov-tip{padding-left:10px;gap:8px}.ov-coachcard .ov-tip .btn{max-width:42%;padding:0 10px}}
/* Quảng cáo (AdSense trên web; trong app AdMob hiện banner native nên khung này không chiếm chỗ) */
.nw-ad{margin:16px 0;text-align:center;overflow:hidden;border-radius:12px}
.nw-ad ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.nw-ad-app{height:0;overflow:hidden}

/* ---------- Ô chọn (select) dùng chung 1 kiểu, theo ô "Thư mục" trong Notes ----------
   Đặt cuối tệp, chọn bằng select + select[class] để thắng các kiểu riêng lẻ (.wt-in, .vf-sel...). Các lớp riêng chỉ còn quyết định kích thước (width / flex).
   color-scheme + màu cho option: danh sách chọn của hệ thống (nhất là trên điện thoại, giao diện tối) lấy đúng màu chữ/nền, không còn chữ sáng trên nền trắng. */
select{max-width:100%;min-width:0}
select,select[class]{-webkit-appearance:none;appearance:none;min-height:40px;border:1.5px solid var(--border);border-radius:9px;
  padding:9px 32px 9px 11px;background-color:var(--card);color:var(--text);font-size:15px;line-height:1.3;outline:none;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 54%,calc(100% - 12px) 54%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select:focus,select[class]:focus{border-color:var(--accent)}
select:disabled,select[class]:disabled{opacity:.6;cursor:default}
select option,select optgroup{background-color:var(--card);color:var(--text)}
.editor-form select{width:100%;margin-bottom:10px}
.editor-form .nform select,.gm-new select,.qz-match select,.wt-recdev select{margin-bottom:0}
@media (max-width:760px){select,select[class]{font-size:16px}}
/* Màn hình cuộc gọi: nền trơn, bỏ đường kẻ lề vở */
body.cl-room main::before{display:none}

/* ---------- Trong app di động (WebView, <html class="nw-app">): màn hình cố định ----------
   Không kéo giãn/nảy (overscroll), không phóng to; trang đăng nhập / đăng ký / quên mật khẩu chiếm trọn màn hình thay vì "cuốn vở trên mặt bàn gỗ".
   Chỉ vùng form tự cuộn khi nội dung cao hơn màn hình (ví dụ bàn phím mở). */
html.nw-app,html.nw-app body{overscroll-behavior:none}
html.nw-app body.auth-body{display:block;padding:0;height:100vh;height:100dvh;overflow:hidden;background:#fbf9f3}
html.nw-app .au-scene{width:100%;height:100%}
html.nw-app .au-book{display:block;height:100%;padding:0;border-radius:0;box-shadow:none;background:#fbf9f3}
html.nw-app .au-left,html.nw-app .au-spiral,html.nw-app .au-tabs{display:none}
html.nw-app .au-page{min-height:0}
html.nw-app .au-right{height:100%;border-radius:0;box-shadow:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;justify-content:flex-start;
  padding:max(84px,calc(env(safe-area-inset-top) + 56px)) 22px max(28px,env(safe-area-inset-bottom))}
html.nw-app .au-form{margin:auto}
html.nw-app .au-lang{top:max(34px,calc(env(safe-area-inset-top) + 8px))}

/* ---------- Báo cáo vi phạm ở Cộng đồng ---------- */
.cd-pending{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:9px 12px;border-radius:10px;background:var(--amber-soft);color:var(--amber);font-size:13.5px;font-weight:700}
.cd-pending.sm{margin:0 0 6px;padding:5px 9px;font-size:12px}
.cd-pending-post{opacity:.8;border-style:dashed}
.cd-rp-x:hover{background:var(--red-soft);color:var(--red)}
.cd-rp{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,14,20,.5)}
.cd-rp[hidden]{display:none}
.cd-rp-box{width:100%;max-width:420px;max-height:calc(100dvh - 32px);overflow:auto;background:var(--card);color:var(--text);border:1.5px solid var(--border);border-radius:16px;padding:18px 18px 14px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.cd-rp-box h3{margin-bottom:4px}
.cd-rp-reasons{display:grid;gap:4px;margin:12px 0 10px}
.cd-rp-reasons label{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;border:1.5px solid var(--border);cursor:pointer}
.cd-rp-reasons label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.cd-rp-reasons input{accent-color:var(--accent);width:18px;height:18px;flex:none}
.cd-rp-box textarea{width:100%;border:1.5px solid var(--border);border-radius:9px;padding:9px 11px;background:var(--card);resize:vertical;outline:none;font-size:15px}
.cd-rp-box textarea:focus{border-color:var(--accent)}
.cd-rp-err{margin-top:8px;padding:8px 10px;border-radius:9px;background:var(--red-soft);color:var(--red);font-size:13.5px}
.cd-rp-err[hidden]{display:none}
.cd-rp-act{justify-content:flex-end;gap:8px;margin-top:12px}

/* ---------- Trang chính sách công khai ---------- */
body.pol-body{min-height:100vh;padding:24px 16px 40px}
.pol-wrap{max-width:820px;margin:0 auto}
.pol-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pol-brand{display:flex;align-items:center;gap:10px;color:#fff;font-size:18px}
.pol-brand img{border-radius:9px;background:#fff}
.pol-lang{border:1.5px solid rgba(255,255,255,.55);color:#fff;border-radius:8px;padding:4px 12px;font-weight:700;font-size:13px}
.pol-card{background:var(--card);color:var(--text);border-radius:16px;padding:28px 30px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.pol-date{color:var(--muted);font-size:13px;margin-bottom:10px}
.pol-body-text h2{font-size:26px;color:var(--ink);margin:0 0 12px}
.pol-body-text h3{font-size:18px;color:var(--ink);margin:24px 0 8px}
.pol-body-text p{margin:0 0 12px;line-height:1.7}
.pol-body-text ul{margin:0 0 12px;padding-left:22px;line-height:1.7}
.pol-body-text li{margin-bottom:6px}
.pol-body-text a{color:var(--accent);font-weight:700;text-decoration:underline}
.pol-foot{text-align:center;margin-top:16px}
.pol-foot a{color:#fff;font-weight:700}
@media (max-width:600px){.pol-card{padding:20px 18px}.pol-body-text h2{font-size:22px}}
.au-terms{font-size:12.5px;color:#4b5563;line-height:1.5;margin-top:12px;text-align:center}
.au-terms a{text-decoration:underline}
/* ---------- Chặn người dùng ---------- */
.cd-rp-block{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;font-size:14px;cursor:pointer}
.cd-rp-block input{accent-color:var(--red);width:18px;height:18px;flex:none;margin-top:2px}
/* ---------- Lịch + thông báo ---------- */
.lich-form h3{margin-bottom:10px}
/* ---------- Ô ngày / giờ / số dùng chung kiểu với ô nhập văn bản và ô chọn ---------- */
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=number]{-webkit-appearance:none;appearance:none;min-height:42px;max-width:100%;min-width:0;
  border:1.5px solid var(--border);border-radius:9px;padding:8px 11px;background-color:var(--card);color:var(--text);font-size:15px;line-height:1.3;outline:none}
input[type=date]:focus,input[type=time]:focus,input[type=datetime-local]:focus,input[type=month]:focus,input[type=number]:focus{border-color:var(--accent)}
input[type=date]:disabled,input[type=time]:disabled,input[type=number]:disabled{opacity:.6;cursor:default}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left;min-height:1.3em;margin:0}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}
:root[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator,:root[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) input[type=date]::-webkit-calendar-picker-indicator,:root:not([data-theme="light"]) input[type=time]::-webkit-calendar-picker-indicator{filter:invert(1)}}
@media (max-width:760px){input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=number]{font-size:16px}}
/* Biểu mẫu Lịch: mọi ô cùng chiều cao và kiểu (văn bản, ngày, giờ, số, ô chọn) */
.lich-grid input[type=text],.lich-grid input[type=date],.lich-grid input[type=time],.lich-grid input[type=number],.lich-grid select{width:100%;height:44px;min-height:44px;margin:0;padding-top:0;padding-bottom:0;display:block}
.lich-grid input[type=text]{border:1.5px solid var(--border);border-radius:9px;padding-left:11px;padding-right:11px;background:var(--card);outline:none}
.lich-grid input[type=text]:focus{border-color:var(--accent)}
.lich-grid select{padding-right:32px}

/* ---------- Hồ sơ: thanh tab bên trái (máy tính) / thanh cuộn ngang (điện thoại) ---------- */
.pf-wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:start}
.pf-nav{position:sticky;top:12px;display:flex;flex-direction:column;gap:4px;background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:8px}
.pf-tab{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;color:var(--text);font-weight:700;font-size:15px}
.pf-tab:hover{background:var(--card-2)}
.pf-tab.active{background:var(--accent-soft);color:var(--accent)}
.pf-ico{width:22px;text-align:center;flex:none}
.pf-body{min-width:0}
.pf-sec-head{margin-bottom:14px}
.pf-sec-head h2{font-size:21px;color:var(--ink);margin-bottom:2px}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px}
.pf-grid input{width:100%;height:44px;margin:0;padding:0 11px;border:1.5px solid var(--border);border-radius:9px;background:var(--card);outline:none}
.pf-grid input:focus{border-color:var(--accent)}
.pf-grid input:disabled{background:var(--card-2);color:var(--muted);cursor:not-allowed}
.pf-narrow{max-width:420px}
@media (max-width:900px){
  .pf-wrap{grid-template-columns:1fr;gap:14px}
  .pf-nav{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pf-nav::-webkit-scrollbar{display:none}
  .pf-tab{flex:none;padding:9px 12px;white-space:nowrap}
}
/* tab Lịch */
.lich-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 14px}
.lich-grid .lich-wide{grid-column:1 / -1}
.lich-nhac{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0 6px}
.lich-nhac label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.lich-nhac input{accent-color:var(--accent);width:18px;height:18px}
.lich-item{align-items:center;flex-wrap:wrap}
.lich-past{opacity:.6}
.lich-url{display:flex;gap:8px;flex-wrap:wrap}
.lich-url input{flex:1 1 280px;min-width:0;margin:0;height:44px;padding:0 11px;border:1.5px solid var(--border);border-radius:9px;background:var(--card);outline:none;font-family:Consolas,monospace;font-size:13px}
.lich-url input:focus{border-color:var(--accent)}
.lich-url .btn{min-height:44px}
.lich-form textarea{min-height:70px}
/* tab Thông báo */
.notif-list{display:grid;gap:10px}
.notif-list .em-check{display:flex;align-items:flex-start;gap:10px}
.notif-list .em-check span{display:flex;flex-direction:column;gap:2px}
.notif-list input[type=checkbox],.tape .em-check input{accent-color:var(--accent);width:18px;height:18px;flex:none;margin-top:2px}
.notif-quiet{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;max-width:360px}

/* ---------- Bảng "Thêm" trên điện thoại: cụm người dùng bấm được để mở Hồ sơ ---------- */
@media (max-width:760px){
  a.more-user{display:flex;align-items:center;gap:12px;padding:12px;margin:0 0 6px;border:1.5px solid var(--border);border-radius:14px;background:var(--card);color:var(--text)}
  a.more-user.active{background:var(--accent-soft);border-color:var(--accent)}
  a.more-user .avatar{flex:none}
  a.more-user .spacer{min-width:0;display:flex;flex-direction:column}
  a.more-user .spacer b{font-size:16px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .more-user-sub{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .more-user-go{margin-left:auto;font-size:26px;line-height:1;color:var(--muted);flex:none}
}
/* Hồ sơ: giao diện + đăng xuất */
.pf-actions{display:flex;gap:10px;flex-wrap:wrap}
.pf-actions .btn{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.pf-actions .btn.out{color:var(--red);border-color:var(--red)}

/* Hồ sơ → Thông tin cá nhân: 1 thẻ, cột ảnh bên trái + biểu mẫu bên phải */
.pf-me{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start;padding:24px}
.pf-me-side{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding-right:28px;border-right:1.5px dashed var(--border)}
.pf-me-side .avatar.big{width:112px;height:112px;font-size:44px;margin-bottom:4px}
.pf-me-side h2{font-size:20px;color:var(--ink);overflow-wrap:anywhere;line-height:1.25}
.pf-me-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.pf-me-btns .inline-form{display:inline}
.pf-me-side #avMsg{max-width:200px;line-height:1.4}
.pf-me-main h3{margin-bottom:14px}
.pf-hint{font-size:13px;margin:10px 0 14px}
@media (max-width:900px){
  .pf-me{grid-template-columns:1fr;gap:18px;padding:18px}
  .pf-me-side{padding-right:0;border-right:0;padding-bottom:18px;border-bottom:1.5px dashed var(--border)}
}
.pf-me-main .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:600px){.pf-me-main .pf-grid{grid-template-columns:1fr}}

/* Ảnh đại diện trong Hồ sơ: rê chuột vào ảnh để đổi ảnh (không cần nút) */
.pf-me-side{gap:6px;padding-right:24px}
.pf-av{position:relative;width:112px;height:112px;border-radius:50%;margin-bottom:6px}
.pf-av .avatar.big{width:112px;height:112px;margin:0}
.pf-av-change{position:absolute;inset:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:700;
  color:#fff;background:rgba(20,24,32,.55);opacity:0;transition:opacity .15s;cursor:pointer;z-index:1}
.pf-av:hover .pf-av-change,.pf-av-change:focus-visible{opacity:1}
.pf-av-change span:first-child{font-size:22px;line-height:1}
.pf-av-del-form{position:absolute;top:-2px;right:-2px;z-index:2;margin:0}
.pf-av-del{width:26px;height:26px;border-radius:50%;background:var(--card);border:1.5px solid var(--border);color:var(--red);font-size:12px;line-height:1;display:grid;place-items:center;
  opacity:0;transition:opacity .15s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.pf-av:hover .pf-av-del,.pf-av-del:focus-visible{opacity:1}
.pf-av-msg{min-height:0;max-width:200px;line-height:1.4}
.pf-av-msg:empty{display:none}
/* Màn hình cảm ứng không có "rê chuột": hiện sẵn dải "Đổi ảnh" ở đáy ảnh và nút xóa */
@media (hover:none){
  .pf-av-change{inset:auto 0 0 0;height:34px;border-radius:0 0 56px 56px;flex-direction:row;gap:5px;opacity:1;background:rgba(20,24,32,.6)}
  .pf-av-change span:first-child{font-size:14px}
  .pf-av-del{opacity:1}
}

/* Quản trị: dùng chung thanh tab với Hồ sơ, có tiêu đề nhóm + số đếm */
.pf-nav-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 12px 2px}
.pf-nav-title:first-child{padding-top:4px}
.pf-tab .pf-count{margin-left:auto}
.adm-wrap .pf-nav{max-height:calc(100vh - 24px);overflow-y:auto}
@media (max-width:900px){
  .pf-nav-title{display:none}
  .adm-wrap .pf-nav{max-height:none;overflow-y:hidden}
  .pf-tab .pf-count{margin-left:6px}
}

/* Writing: ảnh -> văn bản */
.wt-ocr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.wt-ocr .btn{min-height:36px}
.wt-ocr .wt-ocr-sel{width:auto;min-height:36px;max-width:100%;font-size:13px;padding-top:6px;padding-bottom:6px}
.wt-ocr .wt-ocr-sel[hidden]{display:none}
/* Ảnh -> văn bản: nút xanh lá, nút và các ô chọn cùng chiều cao, canh giữa */
.wt-ocr{align-items:center}
.wt-ocr .btn,.wt-ocr .wt-ocr-sel{height:42px;min-height:42px;margin:0;box-sizing:border-box}
.wt-ocr .btn{padding-top:0;padding-bottom:0}
.wt-ocr .wt-ocr-sel{padding-top:0;padding-bottom:0}
.wt-ocr .btn.ocr-go{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 4px 10px rgba(46,139,61,.25)}
.wt-ocr .btn.ocr-go:hover{filter:brightness(1.08)}
.wt-ocr .btn.ocr-go:disabled{opacity:.6;cursor:default}
:root[data-theme="dark"] .wt-ocr .btn.ocr-go{color:#10131a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wt-ocr .btn.ocr-go{color:#10131a}}

/* Gói công khai (Tổng quan + Kho gói) */
.pk-grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pk-card{display:flex;flex-direction:column;gap:10px}
.pk-head{display:flex;align-items:center;gap:12px}
.pk-ico{width:48px;height:48px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;font-size:26px;flex:none}
.pk-name{display:block;color:var(--ink);font-size:16px;overflow-wrap:anywhere}
.pk-meta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:13px;color:var(--muted);align-items:center}
.pk-desc{font-size:14px;color:var(--text);margin:0}
.pk-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:auto}
.pk-act .inline-form{display:inline}
.pk-folder{font-size:15px;color:var(--ink);margin-bottom:6px}
.pk-list{list-style:none;padding:0;margin:0;display:grid;gap:4px;font-size:14px}
.ov-packs .ov-h2{display:flex;align-items:center;gap:8px}

/* Tổng quan: huy hiệu "Gói có sẵn" nổi bật cạnh chuỗi ngày / hoạt động / từ cần ôn */
.ov-badge.ov-pack{position:relative;color:#fff;border-color:transparent;background:linear-gradient(135deg,#2e8b3d,#1f9d8a);box-shadow:0 6px 16px rgba(46,139,61,.35)}
.ov-badge.ov-pack .ov-big{color:#fff}
.ov-badge.ov-pack .xs{color:rgba(255,255,255,.9);font-weight:700}
a.ov-badge.ov-pack:hover{border-color:transparent;filter:brightness(1.08)}
.ov-badge.ov-pack:not(.is-new){background:var(--card);color:inherit;border-color:var(--border);box-shadow:var(--shadow)}
.ov-badge.ov-pack:not(.is-new) .ov-big{color:var(--ink)}
.ov-badge.ov-pack:not(.is-new) .xs{color:var(--muted);font-weight:400}
.ov-badge.ov-pack.is-new::after{content:"";position:absolute;inset:-3px;border-radius:15px;border:2px solid rgba(46,139,61,.55);animation:ovPackPulse 1.8s ease-out infinite;pointer-events:none}
@keyframes ovPackPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.08,1.25)}}
@media (prefers-reduced-motion:reduce){.ov-badge.ov-pack.is-new::after{animation:none;opacity:.6}}
/* 4 huy hiệu Tổng quan luôn nằm trên 1 hàng */
.ov-top .ov-badges{display:flex;flex-wrap:nowrap;gap:10px}
.ov-top .ov-badge{flex:1 1 auto;min-width:0}
@media (max-width:900px){
  .ov-top .ov-badges{width:100%}
  .ov-top .ov-badge{flex:1 1 0}
}
@media (max-width:760px){
  .ov-top .ov-badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .ov-top .ov-badge{flex-direction:column;align-items:center;text-align:center;gap:2px;padding:8px 4px;border-radius:12px}
  .ov-top .ov-badge > div{min-width:0}
  .ov-top .ov-bi{font-size:20px;line-height:1}
  .ov-top .ov-big{font-size:18px;line-height:1.1}
  .ov-top .ov-badge .xs{font-size:10.5px;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
  .ov-badge.ov-pack.is-new::after{border-radius:14px}
}

/* Thanh tìm kiếm ở Tổng quan */
.ov-search{position:relative;display:flex;align-items:center;gap:10px;margin:14px 0 4px;background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:0 14px;box-shadow:var(--shadow)}
.ov-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.ov-search-ico{font-size:18px;flex:none;opacity:.8}
.ov-search input[type=search]{flex:1;min-width:0;height:50px;margin:0;border:0;background:transparent;outline:none;font-size:16px;padding:0;-webkit-appearance:none;appearance:none}
.ov-search input[type=search]::-webkit-search-cancel-button{cursor:pointer}
.ov-search-key{flex:none;font:700 12px/1 var(--font);color:var(--muted);border:1.5px solid var(--border);border-bottom-width:3px;border-radius:6px;padding:4px 7px;background:var(--card-2)}
.ov-search.busy::after{content:"";position:absolute;right:48px;top:50%;width:16px;height:16px;margin-top:-8px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:ovSpin .7s linear infinite}
@keyframes ovSpin{to{transform:rotate(360deg)}}
.ov-search-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;max-height:min(70vh,560px);overflow-y:auto;background:var(--card);border:1.5px solid var(--border);border-radius:14px;box-shadow:0 14px 32px rgba(0,0,0,.18);padding:6px}
.ov-search-pop[hidden]{display:none}
.ov-s-grp{display:flex;align-items:center;gap:8px;padding:8px 10px 4px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ov-s-grp i{font-style:normal;background:var(--card-2);border-radius:9px;padding:1px 8px}
.ov-s-item{display:block;padding:9px 10px;border-radius:10px;color:var(--text)}
.ov-s-item:hover,.ov-s-item.on{background:var(--accent-soft)}
.ov-s-t{color:var(--ink);font-size:15px;margin-right:8px;overflow-wrap:anywhere}
.ov-s-p{font-size:13px;color:var(--muted)}
.ov-s-s{display:block;font-size:13px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere;line-height:1.45}
.ov-s-s em{font-style:normal;font-weight:700;color:var(--ink)}
.ov-s-item mark{background:var(--hl);color:inherit;border-radius:3px;padding:0 1px}
.ov-s-all{display:block;text-align:center;padding:10px;font-weight:700;border-top:1.5px dashed var(--border);margin-top:4px}
.ov-s-empty{padding:16px;text-align:center;color:var(--muted)}
.ov-search-page{margin:0 0 6px}
.ov-search-page .btn{flex:none;margin:6px 0}
.ov-s-page{padding:6px}
@media (max-width:760px){.ov-search-key{display:none}.ov-search input[type=search]{height:46px}}

/* Writing: ghi âm lại đoạn góp ý + so sánh 2 phiên bản (A gốc / B góp ý) */
.wt-rec-composer{flex-wrap:wrap}
.wt-rc{margin:8px 0 2px;padding:10px 12px;border:1.5px dashed var(--border);border-radius:12px;background:var(--card-2)}
.wt-rc audio{width:100%;max-width:420px;margin-top:6px}
.wt-ab{margin:8px 0;padding:10px 12px;border:1.5px solid var(--border);border-radius:12px;background:var(--card-2)}
.wt-ab-head{font-weight:700;color:var(--ink);font-size:13px;margin-bottom:8px}
.wt-ab-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.wt-ab-col{display:flex;flex-direction:column;gap:6px;min-width:0;padding:8px;border-radius:10px;background:var(--card);border:1px solid var(--border)}
.wt-ab-col .tag{align-self:flex-start;white-space:normal}
.wt-ab-col audio{width:100%;min-width:0;height:36px}
@media (max-width:600px){.wt-ab-cols{grid-template-columns:1fr}}

/* Writing: giao diện gọn cho ghi âm lại + so sánh */
.wt-rec-composer{gap:6px;flex-wrap:nowrap}
.wt-rec-composer .wt-in{flex:1;min-width:0}
.wt-rec-at{flex:none;font-size:12px;color:var(--muted);background:var(--card-2);border-radius:8px;padding:5px 8px;white-space:nowrap}
.wt-rec-at b{color:var(--ink)}
.wt-rc-ico{flex:none;width:36px;height:36px;border-radius:10px;border:1.5px solid var(--border);background:var(--card);display:inline-grid;place-items:center;font-size:16px;line-height:1;cursor:pointer}
.wt-rc-ico:hover{border-color:var(--accent)}
.wt-rc-ico.send{background:var(--accent);border-color:var(--accent);color:#fff}
.wt-rc{margin:6px 0 0;padding:6px 10px;border:1.5px dashed var(--border);border-radius:10px;background:var(--card-2)}
.wt-rc-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.wt-rc-row[hidden]{display:none}
.wt-rc-row audio{flex:1;min-width:0;height:34px;margin:0;width:auto}
.wt-ab{margin:6px 0;padding:8px 10px;border:1.5px solid var(--border);border-radius:10px;background:var(--card-2)}
.wt-ab-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-bottom:6px;font-size:12px;color:var(--muted)}
.wt-ab-head b{color:var(--ink);font-size:13px}
.wt-ab-legend i{font-style:normal;font-weight:700;border-radius:5px;padding:0 5px;color:#fff}
.wt-ab-legend i.a{background:var(--accent)}
.wt-ab-legend i.b{background:var(--green)}
.wt-ab-row{display:flex;align-items:center;gap:8px}
.wt-ab-row .wt-ab-a{flex:none;min-width:52px}
.wt-ab-row audio{flex:1;min-width:0;width:auto;height:34px;margin:0}
.wt-ab-row .wt-ab-seq{flex:none;border:1.5px solid var(--border);background:var(--card)}

/* So sánh 2 phiên bản: A (trái) và B (phải) cân đối */
.wt-ab{padding:10px 12px}
.wt-ab-head{display:block;margin-bottom:8px;font-weight:700;font-size:13px;color:var(--ink)}
.wt-ab-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.wt-ab-col{display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-width:0;padding:10px;border-radius:12px;background:var(--card);border:1.5px solid var(--border)}
.wt-ab-col.a{border-top:3px solid var(--accent)}
.wt-ab-col.b{border-top:3px solid var(--green)}
.wt-ab-who{display:flex;align-items:center;gap:8px;min-width:0}
.wt-ab-who i{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px;color:#fff}
.wt-ab-who i.a{background:var(--accent)}
.wt-ab-who i.b{background:var(--green)}
.wt-ab-who span{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.wt-ab-who b{font-size:13px;color:var(--ink)}
.wt-ab-who small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wt-ab-col .wt-ab-play{width:100%;height:40px;min-height:40px;justify-content:center;margin:0}
.wt-ab-col audio{width:100%;height:40px;margin:0;display:block}
.wt-ab-foot{display:flex;justify-content:center;margin-top:10px}
.wt-ab-foot .btn{min-width:200px}
@media (max-width:560px){.wt-ab-cols{grid-template-columns:1fr}.wt-ab-foot .btn{width:100%}}

/* Menu: đường kẻ ngăn nhóm học tập với nhóm cộng đồng */
.sidebar .nav-sep{height:0;border-top:1.5px dashed var(--border);margin:10px 14px}

/* Từ vựng: thanh chuyển nhanh Từ vựng / Ôn tập / Quiz / Game */
.vt-tabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 14px;padding:5px;background:var(--card);border:1.5px solid var(--border);border-radius:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vt-tabs::-webkit-scrollbar{display:none}
.vt-tab{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border-radius:10px;font-weight:700;font-size:14px;color:var(--text);white-space:nowrap}
.vt-tab:hover{background:var(--card-2)}
.vt-tab.active{background:var(--accent-soft);color:var(--accent)}

/* Tổng quan: cột trái = kế hoạch hôm nay (thu gọn) + lịch hẹn */
.ov-left{display:flex;flex-direction:column;gap:14px;min-width:0}
.ov-plan-sm{padding:14px 16px}
.ov-plan-sm .ov-plan-head{gap:10px;margin-bottom:2px}
.ov-plan-sm .ov-ring{width:44px;height:44px;font-size:12px}
.ov-plan-sm .ov-plan-head h3{font-size:15px}
.ov-plan-sm .ov-task{padding:6px 2px;gap:9px}
.ov-plan-sm .ov-task small{font-size:12px}
.ov-plan-sm .ov-task .btn.sm{min-height:30px;padding:4px 10px;font-size:13px}
.ov-plan-sm .ov-weekbox{padding-top:8px}
.ov-plan-sm .ov-weekbox .ov-week{margin-top:4px}
.ov-lich{margin:0;padding:14px 16px}
.ov-lich h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:15px}
.ov-lich-item{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:10px;color:var(--text);border-bottom:1.5px dashed var(--border)}
.ov-lich-item:last-child{border-bottom:0}
.ov-lich-item:hover{background:var(--accent-soft)}
.ov-lich-when{flex:none;width:58px;text-align:center;line-height:1.15;background:var(--card-2);border-radius:10px;padding:6px 4px}
.ov-lich-item.today .ov-lich-when{background:var(--accent-soft);color:var(--accent)}
.ov-lich-when b{display:block;font-size:16px;color:var(--ink)}
.ov-lich-when small{font-size:11px;color:var(--muted)}
.ov-lich-main{min-width:0}
.ov-lich-t{display:block;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-lich-main small{display:block;color:var(--muted);font-size:12px}

/* Tổng quan: nhận xét bài viết chưa xử lý (cột phải, cân với Lịch hẹn) */
.ov-fb{margin:0;padding:14px 16px}
.ov-fb h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:15px}
.ov-fb-count{margin-left:0}
.ov-fb-item{display:flex;align-items:flex-start;gap:10px;padding:9px 6px;border-radius:10px;color:var(--text);border-bottom:1.5px dashed var(--border)}
.ov-fb-item:last-child{border-bottom:0}
.ov-fb-item:hover{background:var(--accent-soft)}
.ov-fb-av{width:32px;height:32px;font-size:14px;flex:none}
.ov-fb-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.ov-fb-who b{color:var(--ink);font-size:14px}
.ov-fb-who small{color:var(--muted);font-size:12px}
.ov-fb-q{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-fb-q ins{color:var(--green);text-decoration:none;font-weight:700}
.ov-fb-t{font-size:13.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}

/* Nhận xét bài viết nằm trong kế hoạch hôm nay (todo list) */
.ov-fb-sec{margin-top:8px;padding-top:8px;border-top:1.5px dashed var(--border)}
.ov-fb-head{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:2px}
.ov-fb-head b{color:var(--ink)}
.ov-fb-link{font-size:12.5px;font-weight:700}
.ov-fb-empty{font-size:13px;color:var(--muted);padding:6px 2px}
.ov-fb-sec .ov-fb-item{padding:7px 4px}
.ov-fb-sec .ov-fb-t{-webkit-line-clamp:1}
.ov-fb-sec .ov-fb-av{width:28px;height:28px;font-size:13px}
/* Lịch hẹn nằm trong cột phải, dưới "Từ cần luyện" */
.ov-side .ov-lich{margin:0}

/* "Tiếp tục từ chỗ đang dở" gọn trong thẻ Cân bằng kỹ năng */
.ov-cont-sec{margin-top:14px;padding-top:10px;border-top:1.5px dashed var(--border)}
.ov-cont-head{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:4px}
.ov-cont-row{display:flex;align-items:center;gap:10px;padding:7px 4px;border-radius:10px;color:var(--text)}
.ov-cont-row:hover{background:var(--accent-soft)}
.ov-cont-ico{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:19px}
.ov-cont-main{min-width:0;display:flex;flex-direction:column;gap:1px}
.ov-cont-t{font-weight:700;color:var(--ink);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-cont-p{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-cont-p .tag{font-size:11px;padding:0 6px;margin-right:4px}
.ov-cont-go{flex:none;font-size:22px;color:var(--muted);line-height:1}
/* Khi Cân bằng kỹ năng đang ẩn, "Tiếp tục từ chỗ đang dở" là nội dung chính của thẻ */
.ov-two .card > .ov-cont-sec:first-child{margin-top:0;padding-top:0;border-top:0}
.ov-cont-h{margin:0 0 6px;font-size:16px}

/* "Listening for today" nằm dưới "Tiếp tục từ chỗ đang dở" */
.ov-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.ov-col > .card{margin:0}
.ov-col .card.ov-listen{margin:0;padding:16px;border-top:1.5px solid var(--border)}
.ov-duo.ov-solo{grid-template-columns:minmax(0,1fr)}

/* Nhận xét bài viết trong kế hoạch hôm nay: khung nền nhẹ, không viền kẻ thừa */
.ov-plan .ov-fb-sec{margin:8px 0 6px;padding:8px 10px;border:0;border-radius:12px;background:var(--card-2)}
.ov-plan .ov-fb-head{margin:0 0 4px;padding:0}
.ov-plan .ov-fb-sec .ov-fb-item{margin:0 -6px;padding:6px;border:0;border-radius:9px}
.ov-plan .ov-fb-sec .ov-fb-item:hover{background:var(--card)}
.ov-plan .ov-fb-empty{padding:2px 0}
.ov-plan .ov-task:nth-last-child(2),.ov-plan .ov-task:has(+ .ov-fb-sec){border-bottom:0}

/* Ôn tập: chế độ chạy tự động (từ → nghĩa → câu ví dụ) */
.ap-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.ap-top[hidden],.ap[hidden]{display:none}
.ap{padding:18px;margin-bottom:12px}
.ap-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ap-card{text-align:center;padding:18px 12px;border-radius:14px;background:var(--card-2);display:flex;flex-direction:column;gap:6px;min-height:200px;justify-content:center}
.ap-ipa{color:var(--muted);font-size:15px;min-height:20px}
.ap-pos{color:var(--muted);font-size:13px;min-height:18px}
.ap-seg{border-radius:12px;padding:6px 10px;transition:background .2s,transform .2s;overflow-wrap:anywhere}
.ap-seg.on{background:var(--accent-soft);transform:scale(1.02);box-shadow:0 0 0 2px var(--accent) inset}
.ap-word{font-size:34px;font-weight:700;color:var(--ink);line-height:1.2}
.ap-mean{font-size:22px;color:var(--text)}
.ap-ex{font-size:16px;color:var(--muted);font-style:italic;line-height:1.5}
.ap-ex:empty{display:none}
.ap-prog{height:6px;background:var(--card-2);border-radius:4px;margin:12px 0;overflow:hidden}
.ap-prog i{display:block;height:100%;width:0;background:var(--green);transition:width .3s}
.ap-ctrl{display:flex;justify-content:center;align-items:center;gap:14px}
.ap-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--border);background:var(--card);font-size:18px;display:grid;place-items:center;cursor:pointer}
.ap-btn.main{width:62px;height:62px;background:var(--accent);border-color:var(--accent);color:#fff;font-size:24px}
.ap-opts{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin-top:14px;font-size:13.5px}
.ap-opt{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ap-opt input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px}
.ap-opt select{min-height:34px;padding:4px 28px 4px 8px}
.ap-note{text-align:center;margin-top:12px}
@media (max-width:600px){.ap-word{font-size:28px}.ap-mean{font-size:19px}.ap-card{min-height:170px}}
.flashcard[hidden]{display:none!important}
.ap-warn{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--amber-soft);color:var(--amber);font-size:13px;line-height:1.5}
.ap-warn[hidden]{display:none}
.ap-warn p{margin:4px 0 0;color:var(--text)}

/* Đăng nhập / đăng ký / quên mật khẩu trên máy tính: không thanh cuộn (cuốn sổ tự thu nhỏ vừa cửa sổ, xem _AuthDecor) */
@media (min-width:921px){
  html:not(.nw-app) body.auth-body{height:100vh;height:100dvh;overflow:hidden;padding-top:12px;padding-bottom:12px}
}

/* ---------- Mời bạn bè / chia sẻ liên kết (Views/Note_Share/_MoiBanBe.cshtml) ---------- */
.inv{margin-bottom:16px}
.inv-head{display:flex;align-items:center;gap:14px}
.inv-head small,.inv-strip small{display:block}
.inv-ico{font-size:30px;flex:none}
.inv-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.inv-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.inv-strip .inv-btns{margin-top:0;margin-left:auto}
.inv-modal{position:fixed;inset:0;z-index:1000;background:rgba(15,20,30,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.inv-modal[hidden]{display:none}
.inv-box{width:100%;max-width:620px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px 18px}
.inv-box-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:17px;color:var(--ink)}
body.inv-open{overflow:hidden}
.inv-sec[hidden]{display:none}
.inv-soc{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px}
.inv-sec input[type=text],.inv-sec input[type=search]{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);min-height:40px}
.inv-sec .add-word input{flex:1;min-width:0}
.inv-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.inv-gbox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:var(--card-2)}
.inv-gbox[hidden]{display:none}
.inv-gbox small{flex:1 1 220px;display:block}
.inv-g{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff;color:#4285f4;font-weight:700;font-size:13px;margin-right:4px;border:1px solid var(--border)}
.inv-status{margin-top:10px;padding:8px 12px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:14px}
.inv-status.err{background:var(--red-soft);color:var(--red)}
.inv-status[hidden]{display:none}
#invListWrap[hidden]{display:none}
.inv-tools{display:flex;gap:8px;align-items:center;margin:12px 0 8px}
.inv-tools input{flex:1;min-width:0}
.inv-list{max-height:240px;overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.inv-row{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.inv-row:last-child{border-bottom:0}
.inv-row:hover{background:var(--card-2)}
.inv-row.done{opacity:.6}
.inv-row input{width:18px;height:18px;flex:none;accent-color:var(--accent)}
.inv-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.inv-who b,.inv-who small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-who small{color:var(--muted);font-size:12px}
.inv-row em{font-style:normal;font-size:12px;color:var(--green);flex:none}
.inv-prev{margin-top:12px;font-size:14px}
.inv-prev summary{cursor:pointer;color:var(--accent);font-weight:700}
.inv-prev-sub{margin:8px 0 6px}
.inv-prev-body{white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:14px;line-height:1.55;background:var(--card-2);border-radius:10px;padding:10px 12px;max-height:260px;overflow:auto}
.inv-send{margin-top:14px}
.inv-send .btn{width:100%;justify-content:center;padding:11px}
.inv-send .btn:disabled{opacity:.55;cursor:default}
.inv-alt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
@media (max-width:600px){
  .inv-btns .btn{flex:1 1 100%;justify-content:center}
  .inv-strip .inv-btns{margin-left:0;width:100%}
  .inv-strip .inv-btns .btn{flex:1 1 calc(50% - 5px)}
  .inv-tools{flex-wrap:wrap}
  .inv-modal{align-items:flex-end;padding:0}
  .inv-box{max-width:none;border-radius:16px 16px 0 0;max-height:92vh;max-height:92dvh}
}

/* Mời bạn bè: 2 nút biểu tượng nhỏ ở góc phải đầu trang Tổng quan */
.ov-top{position:relative}
.ov-top .inv-mini{position:absolute;top:-12px;right:0;display:flex;gap:6px;z-index:2}
.ov-top .ov-greet .ov-h1{overflow-wrap:anywhere;line-height:1.22}          /* tên dài thì xuống dòng, không cắt «…» */
.ov-top .ov-greet .ov-h1 .hl{white-space:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.inv-ib{width:34px;height:34px;display:inline-grid;place-items:center;border-radius:10px;background:var(--card);border:1px solid var(--border);color:var(--ink);box-shadow:var(--shadow);transition:border-color .15s,background .15s}
.inv-ib{color:#e5484d}
.inv-ib:hover{border-color:#e5484d;background:var(--red-soft)}
.inv-ib svg{width:18px;height:18px}

/* Dòng chữ cách điệu cạnh 2 nút chia sẻ ở đầu trang Tổng quan (phông Pacifico của Google Fonts, có tiếng Việt; thiếu mạng thì dùng chữ viết tay của hệ thống) */
.inv-slogan{align-self:center;margin-right:6px;font-family:'Pacifico','Segoe Script','Brush Script MT',cursive;font-size:18px;line-height:1.2;white-space:nowrap;transform:rotate(-3deg);
  background:linear-gradient(100deg,#ff5f8f,#e5484d 55%,#f08a24);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:2px 2px 4px;user-select:none}
@media (max-width:380px){.inv-slogan{display:none}}

/* Hàng nút đăng nhập mạng xã hội: Google / Outlook (/ Facebook) song song, cùng chiều rộng */
.au-social{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.au-social.n1{grid-template-columns:minmax(0,1fr)}
.au-social.n3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.au-sbtn{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;height:40px;padding:0 8px;border:1px solid var(--au-border);border-radius:10px;background:#fff;color:#3c4043;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
.au-sbtn:hover{background:#f6f8fb;border-color:#b9c2d3;box-shadow:0 2px 6px rgba(30,58,110,.12);color:#3c4043}
.au-social.n3 .au-sbtn{gap:7px;font-size:13px;padding:0 4px}
.au-gover{position:absolute;inset:0;overflow:hidden;opacity:.01;border-radius:10px}
.au-gover iframe{position:absolute;top:0;left:0}
.au-social-err{margin-top:10px}
.au-social-err[hidden]{display:none}
.au-form a.au-sbtn,.au-form a.au-sbtn:hover{color:#3c4043;text-decoration:none}

/* Gợi ý viết bài: mẹo, dàn ý, cụm từ bấm để chèn (trong thẻ đề .wt-prompt) */
.wt-tip{margin:8px 0;font-size:14px;line-height:1.5;font-weight:600}
.wt-help{margin-top:10px;border-top:1px dashed color-mix(in srgb,var(--sticky-ink) 35%,transparent);padding-top:8px}
.wt-help summary{cursor:pointer;font-weight:700;font-size:14px}
.wt-help-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px 22px;margin-top:8px}
.wt-help-col b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;opacity:.8}
.wt-help-col ol{margin:0;padding-left:20px;font-size:14px;line-height:1.5}
.wt-help-col small{display:block;margin-top:6px;opacity:.75}
.wt-phr-list{display:flex;flex-wrap:wrap;gap:6px}
.wt-phr{padding:4px 10px;border-radius:16px;border:1px solid color-mix(in srgb,var(--sticky-ink) 30%,transparent);background:rgba(255,255,255,.55);color:var(--sticky-ink);font-size:13px;cursor:pointer;text-align:left}
.wt-phr:hover{background:#fff;border-color:var(--sticky-ink)}
@media (max-width:700px){.wt-help-body{grid-template-columns:minmax(0,1fr)}}

/* ---------- Handwrite: viết / nhờ người khác chấm bài ---------- */
.hw-ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.hw-ic.xl{width:28px;height:28px}.hw-ic.xxl{width:56px;height:56px;opacity:.5}
.btn .hw-ic{margin-right:4px}
.btn.disabled{opacity:.55;pointer-events:none}

/* tiêu đề trang */
.hw-hero{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:20px 22px;margin-bottom:16px;border-radius:16px;color:#fff;
  background:linear-gradient(135deg,#2f5fd0 0%,#5b7fe8 55%,#7f9cf0 100%);box-shadow:var(--shadow)}
.hw-hero-sm{padding:14px 20px}
.hw-hero h1{font-size:24px;line-height:1.25;color:#fff;display:flex;align-items:center;gap:10px;word-break:break-word}
.hw-hero p{opacity:.92;margin:4px 0 0}
.hw-hero .hw-cta{margin-top:14px}
.hw-hero .btn.primary{background:#fff;color:#2f5fd0;border-color:#fff}
.hw-hero .btn{margin-top:12px}
.hw-hero-act{display:flex;gap:8px;flex-wrap:wrap}.hw-hero-act form{display:contents}.hw-hero-act .btn{margin-top:0}
.hw-hero-act .btn:not(.primary){background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.4)}
.hw-back{display:inline-flex;align-items:center;gap:4px;color:#fff;opacity:.9;font-size:13px;font-weight:700;text-decoration:none;margin-bottom:6px}
.hw-back:hover{opacity:1}
.hw-meta{font-size:13.5px}
.hw-quota-pill{background:rgba(255,255,255,.18);border-radius:20px;padding:5px 14px;font-size:13px;font-weight:700}
.hw-ring{position:relative;width:84px;height:84px;flex:none}
.hw-ring svg{width:100%;height:100%}
.hw-ring circle{fill:none;stroke-width:4}
.hw-ring .bg{stroke:rgba(255,255,255,.28)}.hw-ring .fg{stroke:#fff;stroke-linecap:round}
.hw-ring.full .fg{stroke:#ffd27a}
.hw-ring div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.hw-ring b{font-size:22px}.hw-ring small{font-size:12px;opacity:.85}

/* tab + lọc + thẻ bài */
.hw-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.hw-tabs a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:12px;background:var(--card);border:1px solid var(--border);color:var(--muted);font-weight:700;font-size:14px;text-decoration:none}
.hw-tabs a.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.hw-badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:10px;background:var(--red);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;font-style:normal}
.hw-filter{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.hw-filter button{padding:5px 12px;border-radius:16px;border:1px solid var(--border);background:var(--card);font-size:13px;font-weight:700;color:var(--muted)}
.hw-filter button i{font-style:normal;margin-left:4px;opacity:.7}
.hw-filter button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.hw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.hw-grid [hidden]{display:none}
.hw-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;color:inherit;text-decoration:none;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}
.hw-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(40,60,120,.16)}
.hw-thumb{position:relative;aspect-ratio:4/3;background:var(--card-2);overflow:hidden}
.hw-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;background:#fff}
.hw-thumb .hw-st{position:absolute;left:10px;top:10px}
.hw-score-b{position:absolute;right:10px;top:10px;background:#fff;color:#c56a0c;border-radius:14px;padding:2px 9px;font-weight:700;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.hw-pgn{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.6);color:#fff;border-radius:10px;padding:0 8px;font-size:12px;line-height:20px}
.hw-card-b{padding:10px 14px 12px}
.hw-card-b b{display:block;word-break:break-word;color:var(--ink)}
.hw-card-m{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:2px}
.hw-card-t{display:flex;align-items:center;gap:12px;margin-top:8px;font-size:13px;color:var(--muted)}
.hw-card-t em{margin-left:auto;font-style:normal;font-weight:700;color:var(--accent)}
.hw-st{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:700;background:#e8ebf1;color:#4b5563}
.hw-st.st0{background:#eef0f4;color:#5b6472}.hw-st.st1{background:var(--amber-soft);color:var(--amber)}.hw-st.st2{background:var(--accent-soft);color:var(--accent)}.hw-st.st3{background:var(--green-soft);color:var(--green)}
.hw-empty{text-align:center;padding:42px 16px;background:var(--card);border:1px dashed var(--border);border-radius:16px}
.hw-empty p{margin:10px 0 16px;color:var(--muted)}
.hw-score{font-weight:700;color:var(--green)}.hw-score.big{font-size:18px;margin:0 0 10px}

/* đưa bài lên */
.hw-new{display:flex;flex-direction:column;gap:16px;padding-bottom:84px}
.hw-step{padding:18px}
.hw-step h2{display:flex;align-items:center;gap:10px;font-size:17px;margin-bottom:4px}
.hw-num{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;align-items:center;justify-content:center;font-size:14px}
.hw-src{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:14px 0}
.hw-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:18px 12px;border:2px dashed var(--border);border-radius:14px;background:var(--card-2);cursor:pointer;color:var(--text);transition:.12s}
.hw-tile:hover{border-color:var(--accent);background:var(--accent-soft)}
.hw-tile .hw-ic.xl{color:var(--accent)}
.hw-tile small{color:var(--muted);font-size:12.5px}
.hw-tile-paper{cursor:default}.hw-tile-paper:hover{border-color:var(--border);background:var(--card-2)}
.hw-paper-btns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}
.hw-mini{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:10px;border:1px solid var(--border);background:var(--card);font-size:13px;font-weight:700}
.hw-mini:hover{border-color:var(--accent);color:var(--accent)}
.hw-pages-h{display:flex;align-items:center;gap:8px;margin:6px 0}
.hw-empty-pages{padding:18px;text-align:center;color:var(--muted);background:var(--card-2);border-radius:12px;font-size:14px}
.hw-pages{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:10px 0}
.hw-pg{position:relative;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--card-2)}
.hw-pg img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#fff}
.hw-pg-n{position:absolute;top:4px;left:4px;background:rgba(0,0,0,.65);color:#fff;border-radius:10px;padding:0 7px;font-size:12px;font-weight:700}
.hw-pg-tool{display:flex;justify-content:space-between;background:var(--card)}
.hw-pg-tool button{flex:1;padding:6px 0;font-size:13px;color:var(--text)}
.hw-pg-tool button:disabled{opacity:.3}
.hw-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;border:1px solid var(--border);border-radius:10px;background:var(--card);cursor:text}
.hw-chips:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hw-chips input{flex:1;min-width:160px;border:0;outline:0;background:none;padding:4px}
.hw-chipx{display:inline-flex;align-items:center;gap:2px;padding:2px 4px 2px 10px;border-radius:14px;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:13px}
.hw-chipx button{width:20px;height:20px;border-radius:50%;line-height:1;font-size:15px;color:var(--accent)}
.hw-chipx button:hover{background:var(--accent);color:#fff}
.hw-actionbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -6px 18px rgba(0,0,0,.08)}
.hw-actionbar-in{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.hw-act-hint{margin-right:auto;max-width:520px}
body:has(.tabbar) .hw-actionbar{bottom:56px}
.hw-msg{margin:8px 0;padding:8px 12px;border-radius:8px;background:var(--green-soft);color:var(--green);font-size:14px}
.hw-msg.err{background:var(--red-soft);color:var(--red)}

/* màn hình viết / chấm */
.hw-steps{list-style:none;display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.hw-steps li{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;opacity:.65}
.hw-steps li i{display:inline-flex;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.25);align-items:center;justify-content:center;font-style:normal;font-size:11px}
.hw-steps li+li:before{content:"";width:18px;height:2px;background:rgba(255,255,255,.35);margin-right:2px}
.hw-steps li.done{opacity:.9}.hw-steps li.done i{background:#fff;color:#2f5fd0}
.hw-steps li.cur{opacity:1}.hw-steps li.cur i{background:#ffd27a;color:#6a4300}
.hw-ask{padding:12px 16px;margin:0 0 12px;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:10px}
.hw-ask p{margin-top:4px;white-space:pre-wrap}
.notice.info{background:var(--accent-soft);color:var(--accent)}
.hw-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.hw-main{min-width:0}
.hw-side{position:sticky;top:12px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;max-height:calc(100vh - 24px);display:flex;flex-direction:column}
.hw-side-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--card-2)}
.hw-side-tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;font-size:11.5px;font-weight:700;color:var(--muted);position:relative;border-bottom:2px solid transparent}
.hw-side-tabs button.on{color:var(--accent);border-bottom-color:var(--accent);background:var(--card)}
.hw-side-tabs .hw-badge{position:absolute;top:2px;right:6px;min-width:16px;line-height:16px;font-size:10px;padding:0 4px;background:var(--accent)}
.hw-panel{padding:14px;overflow:auto}
.hw-panel h3{margin-bottom:8px;font-size:16px}
.hw-panel[hidden]{display:none}
.hw-bar{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:8px 10px;margin:0 0 6px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);position:sticky;top:0;z-index:20}
.hw-grp{display:flex;align-items:center;gap:3px;padding-right:12px;border-right:1px solid var(--line)}
.hw-grp:last-child{border-right:0;padding-right:0}
.hw-t,.hw-s{min-width:38px;height:38px;border-radius:10px;border:1px solid transparent;background:none;color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 6px;font-weight:700}
.hw-t:hover,.hw-s:hover{background:var(--card-2)}
.hw-t.on,.hw-s.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.hw-t:disabled{opacity:.3;pointer-events:none}
.hw-t.wide{padding:0 12px;background:var(--accent);color:#fff}
.hw-t.wide:hover{background:var(--accent);filter:brightness(1.08)}
.hw-s i{display:block;border-radius:50%;background:currentColor}
.hw-c{width:24px;height:24px;border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 1px var(--border);margin:0 2px}
.hw-c.on{box-shadow:0 0 0 2px var(--accent)}
.hw-zoomv{min-width:42px;text-align:center;font-size:12.5px;color:var(--muted)}
.hw-hint{margin:2px 4px 8px}
.hw-addwrap{position:relative}
.hw-menu{position:absolute;right:0;top:44px;z-index:40;min-width:210px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.25);padding:6px;display:flex;flex-direction:column}
.hw-menu[hidden]{display:none}
.hw-menu label,.hw-menu button{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px;text-align:left;color:var(--text)}
.hw-menu label:hover,.hw-menu button:hover{background:var(--accent-soft);color:var(--accent)}
.hw-menu .hw-pos{display:block;padding:6px 6px 8px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.hw-menu .hw-pos[hidden]{display:none}
.hw-menu .hw-pos label{display:block;padding:0 2px 4px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:default}
.hw-menu .hw-pos label:hover{background:none;color:var(--muted)}
.hw-menu .hw-pos select{width:100%;min-height:38px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--card-2);color:var(--text);font:inherit;font-size:14px}
.hw-stage{display:flex;flex-direction:column;align-items:center;gap:16px;overflow:auto;padding:14px 8px;background:var(--card-2);border-radius:14px}
.hw-page{position:relative;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.2);line-height:0;max-width:none}
.hw-page img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.hw-cv{position:absolute;left:0;top:0;touch-action:auto}
.hw-stage.hw-drawing .hw-cv{touch-action:none;cursor:crosshair}
.hw-page-n{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;border-radius:10px;padding:0 8px;font-size:12px;line-height:20px}
.hw-page-del{position:absolute;left:8px;top:8px;z-index:3;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--red);box-shadow:0 2px 8px rgba(0,0,0,.3);display:inline-flex;align-items:center;justify-content:center;line-height:1}
.hw-layers{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0}
.hw-layer{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.hw-layer i{width:10px;height:10px;border-radius:50%}
.hw-summary{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.hw-chip{display:inline-block;padding:2px 10px;border-radius:12px;background:var(--card-2);font-size:13px;font-weight:700}
.hw-chip.ok{background:var(--green-soft);color:var(--green)}.hw-chip.bad{background:var(--red-soft);color:var(--red)}
.hw-rv{margin:10px 0}.hw-rv p{white-space:pre-wrap;margin-top:4px}
.hw-lang{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.hw-pinlist{list-style:none;display:flex;flex-direction:column;gap:8px}
.hw-pinlist li{display:flex;gap:10px;padding:8px;border-radius:10px;background:var(--card-2);cursor:pointer}
.hw-pinlist li:hover{background:var(--accent-soft)}
.hw-pinlist i{flex:none;width:24px;height:24px;border-radius:50%;color:#fff;font-style:normal;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
.hw-pinlist small{color:var(--muted);font-size:12px}
.hw-pinlist p{white-space:pre-wrap;margin:1px 0 0;word-break:break-word}
.hw-people{list-style:none;display:flex;flex-direction:column;gap:8px;margin:6px 0 10px}
.hw-people li{display:flex;align-items:center;gap:10px}
.hw-people form{display:inline;margin-left:auto}
.hw-av{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.hw-pn{font-weight:700;word-break:break-word}
.hw-x{width:26px;height:26px;border-radius:50%;font-size:18px;line-height:1;color:var(--muted)}
.hw-x:hover{background:var(--red-soft);color:var(--red)}
.hw-addp{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.hw-addp input{flex:1;min-width:140px}
.hw-danger{margin-top:16px;padding-top:12px;border-top:1px dashed var(--border)}
.hw-danger .btn{color:var(--red)}
.hw-reply{padding:8px 12px;border-radius:10px;background:var(--card-2);margin:8px 0}
.hw-reply.me{background:var(--accent-soft)}
.hw-reply p{white-space:pre-wrap;margin-top:2px}
.hw-pop{position:fixed;z-index:60;width:280px;max-width:calc(100vw - 16px);background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px;box-shadow:0 8px 28px rgba(0,0,0,.28)}
.hw-pop textarea,.hw-pop select{width:100%;margin-bottom:6px}
.hw-pop p{white-space:pre-wrap;margin:6px 0}
.hw-pop-row{display:flex;gap:6px;justify-content:flex-end}
.hw-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:#222;color:#fff;padding:9px 16px;border-radius:20px;font-size:14px;z-index:70;transition:.2s}
.hw-toast.show{opacity:1;transform:translateX(-50%)}.hw-toast.err{background:var(--red);color:#fff}
.hw-table-wrap{overflow:auto;margin-top:10px}
.hw-table{width:100%;border-collapse:collapse;font-size:14px}
.hw-table th,.hw-table td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line)}
.hw-table th{font-size:12px;color:var(--muted);text-transform:uppercase}

@media (max-width:1000px){
  .hw-wrap{grid-template-columns:minmax(0,1fr)}
  .hw-side{position:static;max-height:none}
}
@media (max-width:700px){
  .hw-hero{padding:14px}.hw-hero h1{font-size:20px}
  .hw-bar{padding:6px;flex-wrap:nowrap;overflow-x:auto;gap:4px 8px}
  .hw-grp{flex:none}
  .hw-t,.hw-s{min-width:42px;height:42px}
  /* «Thêm trang» đứng ĐẦU thanh công cụ: trước đây nằm cuối thanh (cách mép trái hơn 1000px) nên trên điện thoại không ai thấy nếu không vuốt ngang */
  .hw-addwrap{order:-1}
  .hw-menu{position:fixed;left:12px;right:12px;top:auto;bottom:calc(78px + env(safe-area-inset-bottom));max-height:calc(100vh - 150px);overflow-y:auto;z-index:60}
  .hw-menu label,.hw-menu button{min-height:44px}
  .hw-menu .hw-pos label{min-height:0}
  .hw-actionbar-in{justify-content:stretch}.hw-actionbar-in .btn{flex:1}.hw-act-hint{display:none}
  .hw-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
}
.hw-layers[hidden],.hw-summary[hidden],.hw-badge[hidden],.hw-pages[hidden],.hw-empty-pages[hidden],.hw-msg[hidden],.hw-menu[hidden],.hw-pop[hidden]{display:none}
.hw-new input[type=text],.hw-new textarea,.hw-panel input[type=text],.hw-panel textarea,.hw-pop textarea,.hw-pop select,.hw-addp input{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font:inherit}
.hw-new input[type=text]:focus,.hw-new textarea:focus,.hw-panel input[type=text]:focus,.hw-panel textarea:focus,.hw-pop textarea:focus,.hw-addp input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hw-chips input[type=text]{border:0;box-shadow:none;width:auto;padding:4px;background:none}
.hw-new .field-label,.hw-panel .field-label{display:block;margin:12px 0 4px;font-weight:700;font-size:13px;color:var(--muted)}
.hw-panel textarea{resize:vertical}
.hw-addp input{width:auto}

/* ---- Handwrite: nhận xét, trực tuyến, toàn màn hình ---- */
.hw-ph{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.hw-ph h3{margin:0;font-size:16px}
.hw-ph-i{display:inline-flex;width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent);align-items:center;justify-content:center}
.hw-onn{margin-left:auto;color:var(--green);font-weight:700;font-size:12px}
.hw-scorecard{display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;margin-bottom:14px;background:linear-gradient(135deg,var(--green-soft),var(--accent-soft));border:1px solid var(--border)}
.hw-scorebadge{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:92px;padding:8px 14px;border-radius:14px;background:var(--card);box-shadow:var(--shadow);text-align:center}
.hw-scorebadge span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.hw-scorebadge span .hw-ic{width:13px;height:13px;color:#e6a100;vertical-align:-2px}
.hw-scorebadge b{font-size:30px;line-height:1.1;color:var(--green);word-break:break-all}
.hw-scoreby{display:flex;align-items:center;gap:10px;min-width:0}
.hw-scoreby b{display:block;word-break:break-word}
.hw-scoreby small{display:block;color:var(--muted);font-size:12.5px}
.hw-langbox{margin:6px 0 12px}
.hw-seg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--card-2);margin-bottom:10px}
.hw-seg button{position:relative;padding:5px 14px;border-radius:9px;font-size:13px;font-weight:700;color:var(--muted)}
.hw-seg button.on{background:var(--card);color:var(--accent);box-shadow:var(--shadow)}
.hw-seg button:disabled{opacity:.4;cursor:default}
.hw-fill{position:absolute;top:3px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--green)}
.hw-fill[hidden]{display:none}
.hw-quote{margin:0;padding:12px 14px;border-left:4px solid var(--accent);border-radius:0 12px 12px 0;background:var(--card-2);white-space:pre-wrap;line-height:1.6;word-break:break-word}
.hw-quote[hidden],.hw-langbox [hidden]{display:none}
.hw-scorein{position:relative;max-width:240px}
.hw-scorein .hw-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#e6a100}
.hw-panel .hw-scorein input[type=text]{padding-left:36px;font-size:18px;font-weight:700;color:var(--green)}
.hw-count{display:block;text-align:right;color:var(--muted);font-size:11.5px;margin-top:2px}
.hw-formact{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.hw-formact .btn{flex:1;justify-content:center;min-width:120px}
.hw-stats{margin-top:18px;padding-top:14px;border-top:1px dashed var(--border)}
.hw-stats[hidden]{display:none}
.hw-stats h4{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.hw-stat-chips{display:flex;gap:6px;margin-bottom:8px}
.hw-bar-row{display:grid;grid-template-columns:84px 1fr 26px;align-items:center;gap:8px;font-size:13px;margin:5px 0}
.hw-bar-track{height:8px;border-radius:6px;background:var(--card-2);overflow:hidden}
.hw-bar-track i{display:block;height:100%;border-radius:6px;background:var(--accent)}
.hw-bar-row b{text-align:right}
.hw-bar-row.t-gr i{background:#e53935}.hw-bar-row.t-vo i{background:#fb8c00}.hw-bar-row.t-sp i{background:#8e24aa}.hw-bar-row.t-pu i{background:#1e88e5}.hw-bar-row.t-st i{background:#43a047}.hw-bar-row.t-ot i{background:#607d8b}
.hw-empty-s{text-align:center;padding:22px 8px;color:var(--muted)}
.hw-empty-s p{margin-top:8px}

/* người dùng + trực tuyến */
.hw-av{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.hw-av.sm{width:26px;height:26px;font-size:12px}
.hw-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--card);background:#9aa3b2}
.hw-dot.on{background:#2fbf71;box-shadow:0 0 0 0 rgba(47,191,113,.6);animation:hwPulse 2s infinite}
.hw-dot.hide{background:transparent;border-color:transparent;box-shadow:none}
.hw-dot.view{background:#1e88e5;animation:none}
@keyframes hwPulse{0%{box-shadow:0 0 0 0 rgba(47,191,113,.55)}70%{box-shadow:0 0 0 6px rgba(47,191,113,0)}100%{box-shadow:0 0 0 0 rgba(47,191,113,0)}}
.hw-people li{padding:8px 10px;border-radius:12px;background:var(--card-2)}
.hw-pinfo{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.hw-pstat{color:var(--muted);font-size:12px}
li.is-on .hw-pstat{color:var(--green);font-weight:700}
.hw-role{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.hw-role.owner{background:var(--amber-soft);color:var(--amber)}
.hw-presence{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hw-pchip{display:inline-flex;align-items:center;gap:7px;padding:3px 12px 3px 4px;border-radius:20px;background:rgba(255,255,255,.18);color:#fff;font-size:12.5px;font-weight:700}
.hw-pchip .hw-av{background:rgba(255,255,255,.9);color:#2f5fd0}
.hw-pchip .hw-dot{border-color:#4a6fd8}
.hw-pchip .hw-pstat{color:#cdfbe0;font-style:normal;font-weight:600}
.hw-pchip.mini{padding:2px;background:none}
.hw-presence.compact{margin:0;gap:4px}
.hw-fs-head .hw-pchip.mini .hw-av{background:var(--accent-soft);color:var(--accent)}
.hw-fs-head .hw-pchip .hw-dot{border-color:var(--card)}

/* toàn màn hình */
.hw-fs-head{display:none}
.hw-backdrop{display:none}
html.hw-lock,html.hw-lock body{overflow:hidden}
.hw-wrap.hw-full{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);overflow:hidden}
.hw-full .hw-fs-head{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--border);flex:none}
.hw-fs-title{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.hw-spacer{flex:1}
.hw-t.ghost{background:var(--card-2);color:var(--text)}
.hw-t.ghost:hover{background:var(--accent-soft);filter:none}
.hw-full .hw-main{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 10px}
.hw-full .hw-bar{position:static;flex:none;margin-bottom:6px}
.hw-full .hw-hint{display:none}
.hw-full .hw-stage{flex:1;min-height:0;border-radius:12px}
.hw-full .hw-summary,.hw-full .hw-layers{flex:none}
.hw-full .hw-side{position:fixed;right:0;top:0;bottom:0;width:min(390px,92vw);max-height:none;z-index:210;border-radius:16px 0 0 16px;transform:translateX(106%);transition:transform .22s ease;box-shadow:-10px 0 30px rgba(0,0,0,.25)}
.hw-full.hw-side-open .hw-side{transform:none}
.hw-full.hw-side-open .hw-backdrop{display:block;position:fixed;inset:0;z-index:205;background:rgba(0,0,0,.35)}
.hw-pop{z-index:300}.hw-toast{z-index:310}
.hw-full .hw-menu{z-index:320}
@media (max-width:700px){
  .hw-scorecard{flex-direction:column;align-items:stretch;text-align:center}.hw-scoreby{justify-content:center}
  .hw-fs-title{max-width:30vw}.hw-t.wide.ghost span{display:none}
}

/* ---- Handwrite: banner 1 hàng, chú giải lớp + trực tuyến, nhận xét nhiều người chấm ---- */
.hw-banner{display:flex;align-items:center;gap:14px;padding:8px 14px;margin-bottom:12px;border-radius:14px;color:#fff;min-height:52px;
  background:linear-gradient(135deg,#2f5fd0 0%,#5b7fe8 60%,#7f9cf0 100%);box-shadow:var(--shadow)}
.hw-bn-back{flex:none;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.16)}
.hw-bn-back:hover{background:rgba(255,255,255,.28)}
.hw-bn-title{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1 1 auto}
.hw-bn-title h1{font-size:18px;line-height:1.3;color:#fff;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hw-bn-meta{font-size:12.5px;opacity:.85;white-space:nowrap;flex:none}
.hw-banner .hw-steps{margin:0;flex:none;flex-wrap:nowrap}
.hw-banner .hw-steps li{font-size:12px;white-space:nowrap}
.hw-banner .hw-steps li i{width:18px;height:18px;font-size:10.5px}
.hw-banner .hw-steps li+li:before{width:12px}
.hw-bn-act{display:flex;gap:6px;flex:none}
.hw-bn-act form{display:contents}
.hw-bn-act .btn{margin:0;white-space:nowrap}
.hw-bn-act .btn:not(.primary){background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.4)}
.hw-bn-act .btn.primary{background:#fff;color:#2f5fd0;border-color:#fff}
@media (max-width:1100px){.hw-banner .hw-steps li:not(.cur) span{display:none}.hw-banner .hw-steps li+li:before{display:none}}
@media (max-width:640px){.hw-banner{flex-wrap:wrap;row-gap:6px}.hw-bn-title{flex-basis:calc(100% - 50px)}.hw-bn-meta{display:none}}

/* chú giải lớp = người tham gia + màu bút + trực tuyến */
.hw-layers{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.hw-layer{display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 8px;border-radius:20px;background:var(--card);border:1px solid var(--border);font-size:13px;cursor:pointer;box-shadow:var(--shadow)}
.hw-layer input{margin:0}
.hw-layer .hw-lcol{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--border)}
.hw-layer .hw-lname{font-weight:700;color:var(--text)}
.hw-layer .hw-pstat{color:var(--muted);font-size:12px}
.hw-layer.is-on .hw-pstat{color:var(--green);font-weight:700}
.hw-layer.owner{background:var(--amber-soft)}
.hw-av.xs{width:22px;height:22px;font-size:11px}
.hw-av.xs .hw-dot{width:9px;height:9px}

/* nhận xét của từng người chấm */
.hw-prog{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--card-2)}
.hw-prog-t{font-size:13px;font-weight:700;margin-bottom:6px}
.hw-prog-bar{height:8px;border-radius:6px;background:var(--card);overflow:hidden}
.hw-prog-bar i{display:block;height:100%;background:linear-gradient(90deg,#2fbf71,#43a047);border-radius:6px;transition:width .3s}
.hw-formhead{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.hw-note{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;font-size:13.5px;margin-bottom:12px}
.hw-note.ok{background:var(--green-soft);color:var(--green)}
.hw-rvcard{margin:0 0 12px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--card);box-shadow:var(--shadow)}
.hw-rvcard header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.hw-rvcard .hw-rvwho{flex:1;min-width:0;line-height:1.3}
.hw-rvcard .hw-rvwho b{display:block;word-break:break-word}
.hw-rvcard .hw-rvwho small{display:block;color:var(--muted);font-size:12px}
.hw-rvcard .hw-langbox{margin:0}
.hw-rvcard .hw-seg{margin-bottom:8px}
.hw-rvcard.pending{background:var(--card-2);box-shadow:none;border-style:dashed}
.hw-rvcard.pending header{margin:0}
.hw-rvcard.pending .hw-rvwho small{color:var(--amber);font-weight:700}
.hw-scorebadge.sm{min-width:0;padding:4px 12px;border-radius:12px;flex-direction:row;gap:6px;background:var(--green-soft);box-shadow:none}
.hw-scorebadge.sm span{font-size:12px}
.hw-scorebadge.sm b{font-size:20px}

/* ---- Handwrite: nhóm kết quả từng người chấm + khung chat nhận xét ---- */
.hw-quick{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
.hw-quick button{min-width:38px;height:30px;padding:0 10px;border-radius:15px;border:1px solid var(--border);background:var(--card-2);font-weight:700;font-size:13px;color:var(--muted)}
.hw-quick button:hover{border-color:var(--accent);color:var(--accent)}
.hw-quick button.on{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.hw-form textarea{min-height:170px}
.hw-grp-rv{margin:0 0 14px;border:1px solid var(--border);border-radius:16px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.hw-grp-rv header{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card-2);border-bottom:1px solid var(--border)}
.hw-grp-rv .hw-rvwho{flex:1;min-width:0;line-height:1.3}
.hw-grp-rv .hw-rvwho b{display:block;word-break:break-word}
.hw-grp-rv .hw-rvwho small{display:block;color:var(--muted);font-size:12px}
.hw-grp-rv .hw-rvwho small.wait{color:var(--amber);font-weight:700}
.hw-grp-rv.pending{border-style:dashed;box-shadow:none}
.hw-lcheck{display:inline-flex;align-items:center;gap:6px;cursor:pointer;flex:none}
.hw-lcheck input{margin:0}
.hw-lcheck .hw-lcol{width:14px;height:14px;border-radius:50%;background:#999;box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--border)}
.hw-grp-stat{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px 0}
.hw-grp-stat[hidden]{display:none}
.hw-grp-stat .hw-chip{font-size:12px;padding:1px 9px}
.hw-nocomment{padding:8px 12px 12px;margin:0}
.hw-chat{display:flex;align-items:flex-start;gap:8px;padding:10px 12px 12px}
.hw-chat .hw-av.sm{flex:none}
.hw-bubble{position:relative;max-width:100%;min-width:0;padding:9px 13px;border-radius:4px 16px 16px 16px;background:var(--accent-soft);color:var(--text);line-height:1.55}
.hw-bubble p{margin:0;white-space:pre-wrap;word-break:break-word}
.hw-bubble time{display:block;margin-top:4px;text-align:right;font-size:11px;color:var(--muted)}
.hw-grp-rv.pending .hw-scorebadge{display:none}
/* ---- Handwrite: ghi âm + góp ý bằng giọng nói, trao đổi dạng chat, chữ tiếng Việt rõ nét ---- */
/* Chữ: nhãn nhỏ không viết HOA / giãn chữ (dấu tiếng Việt chồng lên nhau khó đọc), dòng đủ cao để dấu không bị cắt; biểu tượng là SVG thay cho ký tự đặc biệt */
.hw-wrap,.hw-banner,.hw-panel{line-height:1.5;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.hw-scorebadge span{text-transform:none;letter-spacing:0;font-size:12px}
.hw-panel .field-label,.hw-new .field-label,.hw-pop .field-label,.hw-addp .field-label{text-transform:none;letter-spacing:0;font-size:13px;line-height:1.5}
.hw-stats h4,.hw-table th{text-transform:none;letter-spacing:0;font-size:13px}
.hw-side-tabs button{flex:1 1 0;gap:3px;padding:8px 0 7px;font-size:11px;min-width:0}
.hw-side-tabs button span{display:block;max-width:100%;padding:1px 0;font-size:11px;letter-spacing:-.01em;line-height:1.5;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.hw-chip{display:inline-flex;align-items:center;gap:4px;line-height:1.5}
.hw-chip .hw-ic{width:14px;height:14px;stroke-width:2.2}
.hw-steps li i .hw-ic{width:12px;height:12px;stroke-width:2.8;vertical-align:0}
.hw-pg-tool button{display:flex;align-items:center;justify-content:center}
.hw-pg-tool button .hw-ic{width:16px;height:16px}
.hw-badge.inline{position:static;display:inline-block;background:var(--accent)}
.hw-side-tabs .hw-badge[hidden]{display:none}

/* bộ ghi âm */
.hw-rec{display:flex;flex-direction:column;gap:8px;min-width:0}
.hw-rec-btn{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--border);background:var(--card-2);color:var(--text);font-weight:700;font-size:13.5px}
.hw-rec-btn:hover{border-color:var(--red);color:var(--red)}
.hw-rec-btn .hw-ic{color:var(--red)}
.hw-rec-btn:disabled{opacity:.5}
.hw-rec.compact .hw-rec-btn{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%}
.hw-rec.compact .hw-rec-btn span{display:none}
.hw-rec-live{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:12px;background:var(--red-soft)}
.hw-rec-live[hidden],.hw-rec-prev[hidden],.hw-rec-btn[hidden]{display:none}
.hw-rec-dot{width:10px;height:10px;border-radius:50%;background:var(--red);animation:hwRec 1s infinite}
@keyframes hwRec{50%{opacity:.25}}
.hw-rec-state{font-size:13px;color:var(--red)}
.hw-rec-time{font-weight:700;font-variant-numeric:tabular-nums}
.hw-rec-stop{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:15px;background:var(--red);color:var(--paper);font-weight:700;font-size:13px}
.hw-rec-stop .hw-ic{width:15px;height:15px;fill:currentColor;stroke:none}
.hw-rec-level{flex:1 0 100%;height:5px;border-radius:3px;background:rgba(127,127,127,.25);overflow:hidden}
.hw-rec-level i{display:block;height:100%;width:0;background:var(--green);transition:width .08s}
.hw-rec-level i.hot{background:var(--red)}.hw-rec-level i.low{background:var(--muted)}
.hw-rec-prev{display:flex;flex-direction:column;gap:6px}
.hw-rec-note{color:var(--muted);font-size:12px}
.hw-rec-acts{display:flex;gap:6px;flex-wrap:wrap}
.hw-rec-acts .btn .hw-ic{width:15px;height:15px}
.hw-rec audio,.hw-voicecur audio,.hw-bubble audio,.hw-msg-b audio,.hw-rc-body audio,.hw-recitem>audio,.hw-pin-audio,.hw-pop-audio{display:block;width:100%;max-width:100%;height:38px}

/* nhận xét bằng giọng nói + ghi âm trên ghim */
.hw-voicebox{margin-top:12px;padding-top:10px;border-top:1px dashed var(--border)}
.hw-voicebox .field-label{margin-top:0}
.hw-voicebox p.muted{margin-top:6px}
.hw-voicecur{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.hw-voicecur[hidden]{display:none}
.hw-chat.voice .hw-bubble{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.hw-chat .hw-bubble audio{height:36px}
.hw-vtag{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--accent)}
.hw-vtag .hw-ic{width:15px;height:15px}
.hw-pin-rec{margin:6px 0 8px}
.hw-pop .hw-rec-live,.hw-pop .hw-rec-prev{font-size:13px}
.hw-pin-audio{height:34px;margin-top:6px}

/* tab Ghi âm: bản ghi của chủ bài + góp ý theo thời điểm */
.hw-own{display:flex;flex-direction:column;gap:8px;padding:12px;margin-bottom:14px;border:1px dashed var(--border);border-radius:14px;background:var(--card-2)}
.hw-own .btn{align-self:flex-start}
.hw-recitem{margin:0 0 14px;border:1px solid var(--border);border-radius:16px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.hw-recitem>header{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card-2);border-bottom:1px solid var(--border)}
.hw-recitem .hw-rvwho{flex:1;min-width:0;line-height:1.35}
.hw-recitem .hw-rvwho b{display:block;word-break:break-word}
.hw-recitem .hw-rvwho small{display:block;color:var(--muted);font-size:12px}
.hw-recitem>audio{margin:10px 12px 0;width:calc(100% - 24px)}
.hw-recitem h4{display:flex;align-items:center;gap:6px;margin:12px 12px 6px;font-size:13px;color:var(--muted)}
.hw-recitem>p{margin:0 12px 8px}
.hw-rc-list{list-style:none;margin:0;padding:0 12px;display:flex;flex-direction:column;gap:8px}
.hw-rc-list li{display:flex;align-items:flex-start;gap:8px}
.hw-seek{flex:none;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px;margin-top:2px;border-radius:13px;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:12px;font-variant-numeric:tabular-nums}
.hw-seek:hover{background:var(--accent);color:var(--paper)}
.hw-seek .hw-ic{width:13px;height:13px}
.hw-rc-body{flex:1;min-width:0;padding:7px 11px;border-radius:4px 14px 14px 14px;background:var(--card-2)}
.hw-rc-list li.me .hw-rc-body{background:var(--accent-soft)}
.hw-rc-body p{margin:2px 0 0;white-space:pre-wrap;word-break:break-word}
.hw-rc-body audio{margin-top:6px;height:34px}
.hw-msg-h{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;line-height:1.45}
.hw-msg-h b{font-size:13px}
.hw-msg-h small{color:var(--muted);font-size:11.5px}
.hw-msg-h .hw-x{margin-left:auto}
.hw-rc-comp{display:flex;flex-direction:column;gap:6px;margin:12px;padding:10px;border-radius:12px;background:var(--card-2)}
.hw-rc-at{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.hw-rc-at .hw-ic{width:14px;height:14px}
.hw-rc-comp textarea{min-height:56px}
.hw-rc-act{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.hw-rc-act .hw-rc-mic{flex:1 1 auto;min-width:0}
.hw-rc-act .hw-rc-send{margin-left:auto}

/* tab Trao đổi: khung chat */
.hw-msgs{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.hw-msg-row{display:flex;align-items:flex-start;gap:8px}
.hw-msg-row.me{flex-direction:row-reverse}
.hw-msg-b{min-width:0;max-width:calc(100% - 40px);padding:8px 12px;border-radius:4px 16px 16px 16px;background:var(--card-2)}
.hw-msg-row.me .hw-msg-b{border-radius:16px 4px 16px 16px;background:var(--accent-soft)}
.hw-msg-b p{margin:3px 0 0;white-space:pre-wrap;word-break:break-word}
.hw-msg-b audio{margin-top:6px;min-width:200px}
.hw-composer{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid var(--border)}
.hw-composer textarea{width:100%;min-height:54px}
.hw-composer-row{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.hw-composer-row .hw-rec.is-live,.hw-composer-row .hw-rec.has-blob{flex:1 1 100%;order:2}
.hw-composer-row .btn{margin-left:auto}
@media (max-width:520px){.hw-msg-b audio{min-width:0}}
/* ---- Handwrite: giao diện xem bài (thẻ lớp, thanh chuyển ghi chú, tổng quan, menu Thêm) ---- */
.hw-more{position:relative}
.hw-moremenu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:230px;padding:6px;border-radius:12px;background:var(--card);border:1px solid var(--border);box-shadow:0 10px 28px rgba(0,0,0,.25)}
.hw-moremenu[hidden]{display:none}
.hw-moremenu form{display:block}
.hw-moremenu button{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border-radius:8px;text-align:left;font-weight:700;font-size:13.5px;color:var(--text)}
.hw-moremenu button:hover{background:var(--card-2)}
.hw-bn-act .hw-more .btn{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.4)}

.hw-switch{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;user-select:none;white-space:nowrap}
.hw-switch input{position:absolute;opacity:0;width:0;height:0}
.hw-switch span{position:relative;width:32px;height:18px;border-radius:10px;background:var(--border);transition:.15s}
.hw-switch span::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s}
.hw-switch input:checked+span{background:var(--accent)}
.hw-switch input:checked+span::after{left:16px}
.hw-switch input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}

/* thẻ lớp: bấm ẩn / hiện, bấm đúp chỉ xem lớp này */
.hw-layer{cursor:pointer;user-select:none;transition:opacity .15s;font-weight:700}
.hw-layer input{position:absolute;opacity:0;width:0;height:0;margin:0}
.hw-layer .hw-lcol{display:none}
.hw-layer .hw-av.xs{color:#fff}
.hw-layer .hw-lcount{font-weight:400;color:var(--muted);font-size:12.5px}
.hw-layer.off{opacity:.45}
.hw-layer.off .hw-lname{text-decoration:line-through}
.hw-layer.off .hw-av{filter:grayscale(1)}
.hw-layer:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}

/* thanh chuyển giữa các ghi chú */
.hw-nav{position:sticky;bottom:14px;z-index:15;display:flex;align-items:center;gap:4px;width:max-content;margin:10px auto 0;padding:4px;border-radius:24px;background:#1f2937;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.hw-nav[hidden]{display:none}
.hw-nav button{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.hw-nav button:hover{background:rgba(255,255,255,.14)}
.hw-nav span{padding:0 8px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.hw-full .hw-main{position:relative}
.hw-full .hw-nav{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);margin:0}

/* tổng quan kết quả */
.hw-ov{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;padding:14px;border-radius:14px;border:1px solid var(--border);background:linear-gradient(135deg,var(--green-soft),var(--accent-soft))}
.hw-ov-score small{display:block;color:var(--muted);font-size:12.5px}
.hw-ov-score b{display:block;font-size:40px;line-height:1.15;color:var(--ink)}
.hw-ov-score b span{font-size:16px;font-weight:700;color:var(--muted)}
.hw-ov-t{font-size:13px;font-weight:700;margin-bottom:6px}
.hw-ov-read .hw-prog-bar{background:var(--card)}
#hwOvLive{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
#hwOvLive:empty{display:none}
#hwOvLive .hw-ov-read{align-self:stretch}

/* tab Ghi chú: lọc chủ đề, nhóm theo trang, chưa đọc, đang chọn */
.hw-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.hw-filters[hidden]{display:none}
.hw-fchip{padding:4px 11px;border-radius:20px;border:1.5px solid var(--border);background:var(--card);font-size:12.5px;font-weight:700;line-height:1.5}
.hw-fchip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.hw-pinlist .hw-pg-h{display:block;margin:12px 0 2px;padding:0;background:none;cursor:default;font-size:13px;font-weight:700;color:var(--muted)}
.hw-pinlist .hw-pg-h:first-child{margin-top:0}
.hw-pinlist li{position:relative;border:1.5px solid transparent}
.hw-pinlist li.active{border-color:var(--accent);background:var(--accent-soft)}
.hw-pinlist li.read i{opacity:.6}
.hw-unread{position:absolute;right:10px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.hw-pinlist li{padding-right:24px}

@media (max-width:820px){
  .hw-side-tabs{position:sticky;top:0;z-index:12}
  .hw-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));margin:0}
  .hw-full .hw-nav{position:absolute}
  .hw-bar .hw-switch{order:20}
}
/* ---- Handwrite: thẻ nhận xét của người chấm (avatar + tên + điểm, khung nhận xét nền chuyển màu, thống kê, nút Xem ghi chú) ---- */
.hw-grp-rv{--lc:var(--accent);border:0;background:none;box-shadow:none;border-radius:0;overflow:visible;margin:0 0 22px}
.hw-grp-rv header{display:flex;align-items:center;gap:10px;padding:0 0 10px;background:none;border:0}
.hw-av.lg{width:42px;height:42px;font-size:17px;box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--lc)}
.hw-av.lg .hw-dot{width:13px;height:13px}
.hw-grp-rv .hw-rvwho{flex:1;min-width:0;line-height:1.35}
.hw-rvline{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.hw-rvline b{font-size:16px;color:var(--ink);word-break:break-word}
.hw-scorepill{display:inline-block;padding:2px 9px;border-radius:14px;background:var(--amber-soft);color:var(--amber);font-size:12.5px;font-weight:700;line-height:1.5}
.hw-grp-rv .hw-rvwho small{display:block;color:var(--muted);font-size:13px}
.hw-grp-rv .hw-rvwho small.wait{color:var(--amber);font-weight:700}
.hw-gmenu{position:relative}
.hw-gmore{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.hw-gmore:hover{background:var(--card-2)}
.hw-gpop{position:absolute;right:0;top:34px;z-index:40;min-width:230px;padding:6px;border-radius:12px;background:var(--card);border:1px solid var(--border);box-shadow:0 10px 28px rgba(0,0,0,.25)}
.hw-gpop[hidden]{display:none}
.hw-gpop button{display:block;width:100%;padding:9px 10px;border-radius:8px;text-align:left;font-weight:700;font-size:13.5px}
.hw-gpop button:hover{background:var(--card-2)}
.hw-gbody{padding:16px 18px;border-radius:16px;background:linear-gradient(135deg,var(--accent-soft),var(--amber-soft));font-size:15px;font-weight:700;line-height:1.6;color:var(--ink)}
.hw-gbody p{margin:0;white-space:pre-wrap;word-break:break-word}
.hw-gvoice{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.hw-gbody p+.hw-gvoice{padding-top:12px;border-top:1px dashed color-mix(in srgb,var(--ink) 25%,transparent)}
.hw-gvoice audio{display:block;width:100%;height:38px}
.hw-grp-rv .hw-grp-stat{display:flex;flex-wrap:wrap;gap:2px 14px;padding:12px 4px 0;font-size:13.5px;color:var(--muted)}
.hw-grp-rv .hw-grp-stat b{color:var(--text);margin-left:2px}
.hw-grp-rv .hw-grp-stat .ok b{color:var(--green)}.hw-grp-rv .hw-grp-stat .bad b{color:var(--red)}
.hw-gfoot{padding-top:10px}
.hw-gfoot .btn[hidden]{display:none}
.hw-gfoot .btn{padding:8px 18px;border-radius:14px;font-size:14px}
.hw-grp-rv.pending .hw-gbody{display:none}
.hw-grp-rv .hw-lcheck{margin-right:2px}
/* ---- Handwrite: tổng quan gọn + thẻ nhận xét kiểu ghi chú dán (giống đề Writing) ---- */
/* Không xoay các thẻ ghi chú dán: xoay dù chỉ 0,4° làm chữ đậm tiếng Việt bị răng cưa / nhòe */
.wt-prompt,.ai-banner,.cd-sticky,.ov-sticky,.ov-sticky-sm{transform:none}
.hw-ov{display:flex;flex-direction:column;gap:8px;padding:10px 12px;margin-bottom:12px;border-radius:12px}
.hw-ov-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.hw-ov-score{display:flex;align-items:baseline;gap:2px;flex:none}
.hw-ov-score b{display:inline;font-size:30px;line-height:1.1;color:var(--ink)}
.hw-ov-score span{display:inline;font-size:14px;font-weight:700;color:var(--muted)}
.hw-ov-score small{display:block;margin-left:8px;font-size:12px;color:var(--muted)}
.hw-ov-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto}
.hw-ov-chips .hw-chip{background:var(--card);font-size:12.5px}
#hwOvLive{display:block}
#hwOvLive:empty{display:none}
.hw-ov-read{display:flex;align-items:center;gap:8px}
.hw-ov-t{flex:none;font-size:12.5px;font-weight:700}
.hw-ov-read .hw-prog-bar{flex:1;min-width:40px;height:6px}
.hw-ov-read .btn{flex:none;padding:3px 10px}
.hw-ov-done{display:inline-flex;color:var(--green)}
.hw-ov-done .hw-ic{width:16px;height:16px;stroke-width:2.6}

.hw-grp-rv{--lc:var(--accent);margin:0 0 14px;padding:12px 14px;border-radius:6px;background:var(--sticky);color:var(--sticky-ink);box-shadow:3px 6px 14px rgba(0,0,0,.14);overflow:visible;border:0}
.hw-grp-rv.pending{background:var(--card-2);color:var(--text);box-shadow:none;border:1.5px dashed var(--border)}
.hw-gtop{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.hw-who{display:inline-flex;align-items:center;gap:7px;padding:2px 11px 2px 3px;border-radius:20px;background:rgba(255,255,255,.6);color:var(--sticky-ink)}
.hw-grp-rv.pending .hw-who{background:var(--card)}
.hw-who .hw-av{width:26px;height:26px;font-size:12px;box-shadow:0 0 0 2px var(--lc)}
.hw-who .hw-dot{width:9px;height:9px}
.hw-who b{font-size:14px;line-height:1.4}
.hw-scorepill{display:inline-block;padding:2px 10px;border-radius:14px;background:rgba(255,255,255,.7);color:var(--amber);font-size:13px;font-weight:700;line-height:1.5}
.hw-gtime{font-size:12.5px;opacity:.75}
.hw-gtime.wait{color:var(--amber);opacity:1;font-weight:700}
.hw-spacer{flex:1}
.hw-grp-rv .hw-gmore{color:inherit;opacity:.7}
.hw-grp-rv .hw-gmore:hover{background:rgba(255,255,255,.5);opacity:1}
.hw-gtext{margin:10px 0 0;font-size:15px;font-weight:400;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.hw-gtext.muted{font-size:13px}
.hw-gvoice{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.hw-gvoice .hw-vtag{color:inherit}
.hw-gvoice audio{display:block;width:100%;height:38px}
.hw-gtools{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:10px}
.hw-grp-rv .hw-grp-stat{display:flex;flex-wrap:wrap;gap:6px;padding:0;font-size:13px;color:inherit}
.hw-grp-rv .hw-grp-stat[hidden]{display:none}
.hw-grp-rv .hw-grp-stat span{display:inline-flex;align-items:baseline;gap:3px;padding:3px 11px;border-radius:16px;border:1.5px dashed color-mix(in srgb,var(--sticky-ink) 35%,transparent);background:rgba(255,255,255,.35);line-height:1.4}
.hw-grp-rv .hw-grp-stat b{color:inherit;margin:0}
.hw-grp-rv .hw-grp-stat .ok b{color:var(--green)}.hw-grp-rv .hw-grp-stat .bad b{color:var(--red)}
.hw-gtools .btn{margin-left:auto;padding:5px 14px;border-radius:16px;background:rgba(255,255,255,.75);border-color:rgba(0,0,0,.12);color:var(--sticky-ink);font-size:13px}
.hw-gtools .btn[hidden]{display:none}
.hw-grp-rv.pending .hw-grp-stat span{background:none;border-color:var(--border)}
.hw-grp-rv.pending .hw-gtools .btn{background:var(--card);color:var(--text)}
.hw-gtop{flex-wrap:nowrap}
.hw-who{min-width:0}
.hw-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 0}
.hw-gstamp{display:block;margin-top:4px;text-align:right;font-size:11.5px;opacity:.7}
/* ---- Handwrite: thẻ nhận xét gọn (nền xám nhạt, nhận xét nhỏ nghiêng màu đỏ, đúng/sai cùng hàng, điểm cạnh nút) ---- */
.hw-grp-rv{background:var(--card-2);color:var(--text);box-shadow:none;border:1px solid var(--border);padding:9px 11px;border-radius:10px}
.hw-grp-rv.pending{border-style:dashed}
.hw-who{background:var(--card);color:var(--text)}
.hw-who b{font-size:12.5px;font-weight:700}
.hw-who .hw-av{width:22px;height:22px;font-size:11px}
.hw-gtext{margin:8px 0 0;font-size:12.5px;font-style:italic;font-weight:400;line-height:1.5;color:var(--red)}
.hw-gtext.muted{color:var(--muted)}
.hw-gstamp{font-size:11px}
.hw-grp-rv .hw-grp-stat{flex-wrap:wrap;gap:5px;margin-top:8px;font-size:12px}
.hw-grp-rv .hw-grp-stat span{padding:2px 9px;background:var(--card);border:1px solid var(--border);border-style:solid}
.hw-grp-rv .hw-grp-stat .hw-ic{width:13px;height:13px;stroke-width:2.4;vertical-align:-2px}
.hw-grp-rv .hw-grp-stat .ok .hw-ic{color:var(--green)}.hw-grp-rv .hw-grp-stat .bad .hw-ic{color:var(--red)}
.hw-gtools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.hw-gscore{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--amber)}
.hw-gscore .hw-ic{width:15px;height:15px;color:#e6a100;fill:#e6a100}
.hw-gtools .btn{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:4px 11px;font-size:12px;background:var(--card);border-color:var(--border);color:var(--text)}
.hw-gtools .btn .hw-ic{width:14px;height:14px}
.hw-gvoice .hw-vtag{color:var(--text);font-size:12px}
.hw-gvoice audio{height:34px}
.hw-chip{font-size:12.5px}
/* ---- Handwrite: chân trang thống kê gọn + tab Ghi âm gọn ---- */
.hw-summary{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:8px;padding:6px 8px;border-radius:10px;background:var(--card-2)}
.hw-summary .hw-chip{padding:1px 9px;font-size:12px;font-weight:600;line-height:1.6;background:var(--card);border:1px solid var(--border);color:var(--text)}
.hw-summary .hw-chip.ok{background:var(--green-soft);border-color:transparent;color:var(--green)}
.hw-summary .hw-chip.bad{background:var(--red-soft);border-color:transparent;color:var(--red)}
.hw-summary .hw-chip b{font-weight:700}
.hw-tdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted)}
.hw-chip.t-gr .hw-tdot{background:#e53935}.hw-chip.t-vo .hw-tdot{background:#fb8c00}.hw-chip.t-sp .hw-tdot{background:#8e24aa}
.hw-chip.t-pu .hw-tdot{background:#1e88e5}.hw-chip.t-st .hw-tdot{background:#43a047}.hw-chip.t-ot .hw-tdot{background:#607d8b}

.hw-panel[data-hw-panel="voice"] .hw-ph{margin-bottom:8px}
.hw-panel[data-hw-panel="voice"] .hw-ph h3{font-size:14.5px}
.hw-own{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 10px;margin-bottom:10px;border-radius:10px}
.hw-own>b{flex:1 0 100%;font-size:13px}
.hw-own>.muted{flex:1 0 100%;margin:0;font-size:11.5px;line-height:1.4}
.hw-own .hw-rec{flex:0 1 auto}
.hw-own .hw-rec.is-live,.hw-own .hw-rec.has-blob{flex:1 1 100%;order:2}
.hw-own .btn{align-self:center;padding:4px 12px;font-size:12.5px;box-shadow:none}
.hw-own .hw-rec-btn{height:30px;padding:0 12px;font-size:12.5px}
.hw-recitem{margin-bottom:10px;border-radius:10px;box-shadow:none}
.hw-recitem>header{padding:6px 10px;gap:8px}
.hw-recitem .hw-rvwho b{font-size:12.5px}
.hw-recitem .hw-rvwho small{font-size:11px}
.hw-recitem>audio{margin:8px 10px 0;width:calc(100% - 20px);height:32px}
.hw-recitem h4{margin:8px 10px 4px;font-size:12px}
.hw-recitem>p{margin:0 10px 6px;font-size:12px}
.hw-rc-list{padding:0 10px;gap:6px}
.hw-seek{height:22px;padding:0 7px;font-size:11px}
.hw-rc-body{padding:4px 9px;font-size:12.5px}
.hw-rc-body audio{height:30px;margin-top:4px}
.hw-msg-h b{font-size:12px}.hw-msg-h small{font-size:10.5px}
.hw-rc-comp{margin:8px 10px 10px;padding:6px 8px;gap:4px;border-radius:8px}
.hw-rc-comp textarea{min-height:36px;height:36px;padding:6px 9px;font-size:12.5px}
.hw-rc-at{font-size:11px}
.hw-rc-act{flex-wrap:nowrap;align-items:center}
.hw-rc-act .hw-rec.compact .hw-rec-btn{width:30px;height:30px}
.hw-rc-act .btn{padding:4px 11px;font-size:12px;box-shadow:none}
.hw-rc-act .hw-rec.is-live,.hw-rc-act .hw-rec.has-blob{flex:1 1 100%}
.hw-rc-act:has(.is-live),.hw-rc-act:has(.has-blob){flex-wrap:wrap}

/* ---- Handwrite: thanh công cụ + chú giải lớp gọn ---- */
.hw-bar{gap:2px 4px;padding:4px 8px;margin-bottom:4px;border-radius:10px}
.hw-grp{gap:1px;padding-right:6px;margin-right:2px}
.hw-t,.hw-s{min-width:30px;height:30px;padding:0 4px;border-radius:8px}
.hw-t .hw-ic{width:17px;height:17px}
.hw-s i{transform:scale(.8)}
.hw-c{width:18px;height:18px;margin:0 1px;border-width:2px}
.hw-c.on{box-shadow:0 0 0 2px var(--accent)}
.hw-zoomv{min-width:34px;font-size:12px}
.hw-t.wide{height:30px;padding:0 10px;font-size:12.5px;gap:4px}
.hw-t.wide .hw-ic{width:15px;height:15px}
.hw-bar .hw-switch{font-size:12px;gap:5px;margin:0 4px}
.hw-bar .hw-switch span{width:28px;height:16px}
.hw-bar .hw-switch span::after{width:12px;height:12px}
.hw-bar .hw-switch input:checked+span::after{left:14px}
.hw-hint{margin:0 4px 6px;font-size:11.5px;line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-layers{gap:5px;margin:4px 0 6px}
.hw-layer{gap:5px;padding:2px 9px 2px 3px;font-size:12px;box-shadow:none}
.hw-layer .hw-av.xs{width:18px;height:18px;font-size:10px}
.hw-layer .hw-av.xs .hw-dot{width:7px;height:7px}
.hw-layer .hw-lcount,.hw-layer .hw-pstat{font-size:11px}
@media (max-width:700px){.hw-hint{white-space:normal}}

/* ---- Handwrite: thẻ người chấm gọn, huy hiệu mới, trạng thái «Chưa trả bài» chuyển xuống hàng dưới ---- */
.hw-grp-rv{padding:10px 12px}
.hw-gtop{gap:8px}
.hw-who{flex:1;min-width:0;padding:0;background:none;gap:8px}
.hw-grp-rv.pending .hw-who{background:none}
.hw-who .hw-av{width:28px;height:28px;font-size:12px;flex:none}
.hw-who b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hw-gtop .hw-spacer{display:none}
.hw-grp-rv .hw-grp-stat{gap:4px;margin-top:8px}
.hw-grp-rv .hw-grp-stat span,.hw-ov-chips .hw-chip,.hw-gstate{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;border:0;background:rgba(127,127,127,.14);color:var(--text);font-size:11.5px;font-weight:600;line-height:1.5;font-variant-numeric:tabular-nums}
.hw-grp-rv .hw-grp-stat span b,.hw-ov-chips .hw-chip b{font-weight:700;margin:0}
.hw-grp-rv .hw-grp-stat .ok,.hw-ov-chips .hw-chip.ok{background:var(--green-soft);color:var(--green)}
.hw-grp-rv .hw-grp-stat .bad,.hw-ov-chips .hw-chip.bad{background:var(--red-soft);color:var(--red)}
.hw-grp-rv .hw-grp-stat .hw-ic,.hw-ov-chips .hw-ic,.hw-gstate .hw-ic{width:12px;height:12px;stroke-width:2.4;vertical-align:0}
.hw-gstate{background:var(--amber-soft);color:var(--amber)}
.hw-gtools{margin-top:8px;justify-content:space-between}
.hw-gtools .btn{padding:3px 10px;border-radius:6px;font-size:11.5px}
.hw-gtools .btn .hw-ic{width:13px;height:13px}
.hw-ov{padding:8px 10px;gap:6px}
.hw-ov-read .hw-ov-t{font-size:11.5px;font-weight:600}

/* ---- Tổng quan: hoạt động 7 ngày gọn + tiến độ nằm dưới thẻ kế hoạch (không còn khoảng trống) ---- */
.ov-left{display:flex;flex-direction:column;gap:14px}
.ov-actcard{padding:10px 14px 12px}
.ov-actcard h3{font-size:14px;margin:0 0 4px}
.ov-actcard .row{margin-top:8px !important}
.ov-actcard .ov-heatdays{grid-template-rows:repeat(7,11px);line-height:11px;margin-top:4px}
.ov-actcard .ov-heat{grid-template-rows:repeat(7,11px);grid-auto-columns:minmax(11px,1fr);gap:2px;margin-top:4px}
.ov-actcard .ov-heat i{height:11px;border-radius:2px}
.ov-actcard .ov-scale{margin:4px 0 0 30px;font-size:11px}
.ov-prog{display:flex;flex-direction:column;gap:8px}
.ov-prog-h{margin:0;font-size:15px;color:var(--ink)}
.ov-prog .ov-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:0}
.ov-prog .ov-stat{padding:10px 12px}
.ov-prog .ov-stat .n{font-size:24px;margin:2px 0}
.ov-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-items:stretch}
.ov-pair .ov-col{display:contents}
.ov-wd i{width:26px;height:26px;font-size:12px}
.ov-week{margin-top:10px}
.ov-row2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:stretch}
.ov-row2>.ov-actcard{margin:0}
.ov-row2 .ov-prog .ov-stats{height:100%}
@media (max-width:900px){.ov-row2{grid-template-columns:minmax(0,1fr)}}
.ov-wide .ov-row2{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px}
.ov-wide .ov-prog .ov-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.ov-hero{align-items:stretch}
.ov-left>.ov-plan{flex:1}
@media (max-width:900px){.ov-wide .ov-row2{grid-template-columns:minmax(0,1fr)}}

/* ---- Tổng quan: bố cục cân đối theo hàng ---- */
.ov-hero{align-items:stretch}
.ov-left{display:flex;flex-direction:column}
.ov-left>.ov-plan{flex:1;margin:0}
.ov-side{display:flex;flex-direction:column;gap:18px}
.ov-side>.card{margin:0}
.ov-side>.card:last-child{flex:1}
.ov-fbrow{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;margin-top:22px;align-items:stretch}          /* cùng tỉ lệ và khoảng cách với .ov-hero phía trên để hai hàng thẳng cột */
.ov-fbcard{margin:0;padding:14px 16px}
.ov-fbcard .ov-fb-sec{margin:0;padding:0;border:0}
.ov-fbcard .ov-fb-head{margin-bottom:6px}
.ov-wide,.ov-pair{margin-top:22px}
.ov-wide .ov-row2>.card,.ov-wide .ov-prog{height:100%}
.ov-pair>.ov-col>.card,.ov-pair .ov-col>.card{margin:0}
@media (max-width:900px){.ov-fbrow{grid-template-columns:minmax(0,1fr)}}

/* ---- Handwrite: trang danh sách dạng thẻ giấy ---- */
.hwv{max-width:1280px;margin:0 auto;padding:18px}
.hwv-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 22px;border-radius:20px;color:#fff;background:radial-gradient(900px 260px at 100% 0,rgba(255,255,255,.22),transparent 60%),linear-gradient(120deg,#2748b8 0%,#4f74e6 55%,#8aa6f5 100%);box-shadow:0 14px 30px rgba(39,72,184,.28)}
.hwv-hl{display:flex;align-items:center;gap:14px;flex:1 1 420px;min-width:0}
.hwv-ico{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.2);display:inline-flex;align-items:center;justify-content:center;flex:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.hwv-ico .hw-ic{width:26px;height:26px}
.hwv-hero h1{font-size:26px;line-height:1.2;color:#fff;letter-spacing:-.01em}
.hwv-hero p{margin-top:2px;font-size:14px;opacity:.9;line-height:1.5;max-width:560px}
.hwv-hr{display:flex;align-items:center;gap:18px;flex:none}
.hwv-quota{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:6px;min-width:150px}
.hwv-quota b{font-size:30px;line-height:1}.hwv-quota span{font-size:12.5px;opacity:.85}
.hwv-quota i{grid-column:1/-1;display:block;height:6px;margin-top:6px;border-radius:4px;background:rgba(255,255,255,.28);overflow:hidden}.hwv-quota u{display:block;height:100%;background:#fff;border-radius:4px}
.hwv-cta{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:14px;background:#fff;color:#2748b8;font-weight:700;font-size:15px;box-shadow:0 6px 16px rgba(0,0,0,.18);transition:transform .15s}
.hwv-cta:hover{transform:translateY(-1px)}
.hwv-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0 6px}
.hwv-k{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}
.hwv-k>span{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--k-soft);color:var(--k)}
.hwv-k b{display:block;font-size:24px;line-height:1.1;color:var(--ink)}.hwv-k small{color:var(--muted);font-size:12.5px}
.hwv-k.amber{--k:var(--amber);--k-soft:var(--amber-soft)}.hwv-k.green{--k:var(--green);--k-soft:var(--green-soft)}.hwv-k.blue{--k:var(--accent);--k-soft:var(--accent-soft)}.hwv-k.red{--k:var(--red);--k-soft:var(--red-soft)}
.hwv-tabs{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:14px 2px 16px;border-bottom:2px solid var(--line)}
.hwv-tabs nav{display:flex;gap:6px}
.hwv-tabs nav button{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;margin-bottom:-2px;font-weight:700;font-size:14.5px;color:var(--muted);border-bottom:3px solid transparent}
.hwv-tabs nav button.on{color:var(--accent);border-bottom-color:var(--accent)}
.hwv-tabs nav b{font-size:11.5px;padding:0 7px;border-radius:10px;background:var(--card-2);color:var(--muted);line-height:18px}.hwv-tabs nav b.red{background:var(--red);color:#fff}
.hwv-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:8px}
.hwv-chips{display:flex;gap:6px}
.hwv-chips button{padding:5px 13px;border-radius:16px;font-size:13px;font-weight:700;color:var(--muted);background:var(--card-2)}.hwv-chips button.on{background:var(--ink);color:var(--paper)}
.hwv-search{display:flex;align-items:center;gap:6px;padding:0 12px;height:34px;border-radius:17px;background:var(--card);border:1.5px solid var(--border)}.hwv-search input{border:0;background:none;outline:0;font-size:13.5px;width:140px}
.hwv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:22px}
.hwc{position:relative;display:flex;flex-direction:column;border-radius:18px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.hwc:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(60,40,10,.16)}
.hwc-paper{position:relative;display:block;margin:14px 14px 0;aspect-ratio:7/7.6;border-radius:6px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06),3px 3px 0 -1px #fff,3px 3px 0 0 #dcd6c6,6px 6px 0 -1px #fff,6px 6px 0 0 #dcd6c6;overflow:visible}
.hwc-paper img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:6px;border:1px solid #e6e0d2}
.hwc-tape{position:absolute;left:50%;top:-9px;width:64px;height:18px;transform:translateX(-50%);background:rgba(244,211,94,.8);z-index:2;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.hwc.green .hwc-tape{background:rgba(124,196,127,.8)}.hwc.grey .hwc-tape{background:rgba(184,194,204,.85)}
.hwc-st{position:absolute;left:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.18);background:#fff}
.hwc-st .hw-ic{width:13px;height:13px;stroke-width:2.4;vertical-align:0}
.hwc-st.amber{color:#b25e00}.hwc-st.green{color:#237a30}.hwc-st.grey{color:#566}
.hwc-score{position:absolute;right:-8px;top:18px;z-index:2;display:flex;align-items:baseline;gap:1px;padding:5px 11px;border-radius:14px 4px 4px 14px;background:linear-gradient(135deg,#f5b100,#ff8a00);color:#fff;box-shadow:0 5px 12px rgba(255,138,0,.4)}
.hwc-score b{font-size:19px;line-height:1}.hwc-score small{font-size:11px;opacity:.9}
.hwc-pg{position:absolute;right:8px;bottom:8px;z-index:2;padding:2px 9px;border-radius:12px;background:rgba(20,26,40,.72);color:#fff;font-size:11.5px}
.hwc-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px}
.hwc-body h3{font-size:15.5px;color:var(--ink);line-height:1.35;margin:0}
.hwc-meta{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted)}.hwc-meta .hw-ic{width:13px;height:13px}
.hwc-foot{display:flex;align-items:center;gap:9px;margin-top:6px;min-height:26px}
.hwc-av{display:flex}.hwc-av i{width:26px;height:26px;border-radius:50%;margin-left:-5px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:11.5px;font-weight:700;color:#fff;background:var(--c);box-shadow:0 0 0 2px var(--card);opacity:.5}.hwc-av i:first-child{margin-left:0}.hwc-av i.ok{opacity:1}
.hwc-prog{flex:1;height:5px;border-radius:3px;background:var(--card-2);overflow:hidden}.hwc-prog u{display:block;height:100%;background:var(--green);border-radius:3px}
.hwc-foot em{font-style:normal;font-size:12px;font-weight:700;color:var(--muted)}
.hwc-hint{font-size:12.5px;color:var(--muted)}
.hwc-new{align-items:center;justify-content:center;gap:6px;min-height:300px;border:2px dashed var(--border);background:transparent;box-shadow:none;color:var(--muted);text-align:center;padding:20px}
.hwc-new:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.hwc-plus{width:58px;height:58px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}.hwc-plus .hw-ic{width:28px;height:28px}
.hwc-new b{font-size:16px;color:var(--ink)}.hwc-new small{font-size:12.5px}
@media (max-width:820px){.hwv-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.hwv-hr{width:100%;justify-content:space-between}.hwv-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.hwv-tabs nav button{padding:9px 10px;font-size:13.5px}}

.hwv-quota.full u{background:#ffb3b3}
.hwv-cta.disabled{opacity:.6;cursor:not-allowed}
.hwv-k{color:inherit}a.hwv-k:hover{border-color:var(--red)}
.hwv-tabs nav a{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;margin-bottom:-2px;font-weight:700;font-size:14.5px;color:var(--muted);border-bottom:3px solid transparent}
.hwv-tabs nav a.on{color:var(--accent);border-bottom-color:var(--accent)}
.hwv-tabs nav a b{font-size:11.5px;padding:0 7px;border-radius:10px;background:var(--red);color:#fff;line-height:18px}
.hwv-chips button b{font-size:11px;margin-left:4px;padding:0 6px;border-radius:9px;background:rgba(127,127,127,.18);font-weight:700}
.hwv-chips button.on b{background:rgba(255,255,255,.22)}
.hwc[hidden],.hwv-none[hidden]{display:none}
.hwc-body h3 a{color:inherit}.hwc-body h3 a:hover{color:var(--accent)}
.hwc-blank{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);border-radius:6px;border:1px solid #e6e0d2;background:#fff}
.hwc-av i.more{background:var(--muted);opacity:1;font-size:10.5px}
.hwc-go{color:var(--accent)}
.hwc-meta{flex-wrap:wrap}
.hwv-none{text-align:center;padding:24px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hwc-paper img{filter:brightness(.92)}}

/* ---- Handwrite: giao bài (thẻ, trang theo dõi) ---- */
.hwv-cta.ghost{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.hwv-hr{flex-wrap:wrap;gap:12px}
.hwv-tabs nav a b.blue{background:var(--accent)}
.hwv-hero-sm{padding:14px 20px}
.hwv-back{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.2);color:#fff;flex:none}
.hwv-back:hover{background:rgba(255,255,255,.32)}
.hwx-st{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:6px;font-size:12px;font-weight:700;background:var(--card-2);color:var(--muted);line-height:1.5}
.hwx-st.amber{background:var(--amber-soft);color:var(--amber)}.hwx-st.green{background:var(--green-soft);color:var(--green)}.hwx-st.blue{background:var(--accent-soft);color:var(--accent)}
.hwx-score{display:inline-flex;align-items:center;gap:3px;font-weight:700;font-size:13px;color:var(--amber)}.hwx-score .hw-ic{width:14px;height:14px;color:#e6a100;fill:#e6a100}
.hwx-del{color:var(--red)}
.hwc-late{color:var(--red);font-weight:700;font-style:normal}
.hwc-actions{flex-wrap:wrap;gap:6px}.hwc-actions form{display:inline-block;margin:0}
.hwt-card{padding:14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);margin-top:6px}
.hwt-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}.hwt-bar form{margin:0}
.hwt-table{display:flex;flex-direction:column;margin:8px 0 14px}
.hwt-row{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.1fr) minmax(0,.9fr);gap:10px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--line)}
.hwt-row:last-child{border-bottom:0}
.hwt-head{font-size:12.5px;font-weight:700;color:var(--muted);padding-top:2px}
.hwt-who{display:flex;align-items:center;gap:10px;min-width:0}.hwt-who b{display:block;font-size:14px;line-height:1.35}.hwt-who small{display:block;color:var(--muted);font-size:12px}
.hwt-act{text-align:right}
.hwt-card .hw-addp{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.hwt-card .hw-addp input{flex:1;min-width:200px}
@media (max-width:760px){.hwt-row{grid-template-columns:minmax(0,1fr) auto}.hwt-row>span:nth-child(3),.hwt-row>span:nth-child(4){display:none}.hwt-head{display:none}}

/* Handwrite: chọn / di chuyển nét (thanh Chấp nhận · Hủy · Xóa) */
.hw-stage.hw-drawing.hw-move .hw-cv{cursor:grab}
.hw-selbar{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:4px;padding:4px;line-height:1.2;white-space:nowrap;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.28);touch-action:manipulation}
.hw-selbar[hidden]{display:none}
.hw-sb{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;border-radius:9px;border:1px solid var(--border);background:var(--card-2);color:var(--text);font-size:13px;font-weight:700;cursor:pointer}
.hw-sb .hw-ic{width:16px;height:16px}
.hw-sb.ok{background:var(--accent);border-color:var(--accent);color:#fff}
.hw-sb.del{padding:0 9px;color:var(--red)}
.hw-sb:hover{filter:brightness(1.06)}

/* Handwrite: hàng nút «Ghi âm» + «Đính kèm file» */
.hw-rec-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hw-rec-row[hidden]{display:none}
.hw-rec-file .hw-ic{color:var(--accent)}
.hw-rec-file:hover{border-color:var(--accent);color:var(--accent)}

/* Handwrite: ghim nghe của đề giao bài (danh sách bên cột + trình phát nhỏ) */
.hw-listen{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.hw-listen[hidden]{display:none}
.hw-listen h3{margin:0 0 2px}
.hw-nghe-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:var(--card);cursor:pointer}
.hw-nghe-item.on{border-color:#8e24aa;background:var(--card-2)}
.hw-nghe-item>i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:800;font-size:13px}
.hw-nghe-bd{min-width:0;flex:1}
.hw-nghe-bd b{display:block;font-size:13.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hw-nghe-bd small{display:block;color:var(--muted);font-size:12px}
.hw-nghe-go .hw-ic{width:15px;height:15px}
.hw-miniplay{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:320;display:flex;align-items:center;gap:10px;min-width:260px;max-width:calc(100vw - 24px);padding:8px 10px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.32)}
.hw-miniplay[hidden]{display:none}
.hw-miniplay .mp-btn,.hw-miniplay .mp-x{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--card-2);color:var(--text);display:grid;place-items:center;cursor:pointer;font-size:18px;line-height:1}
.hw-miniplay .mp-btn{background:#8e24aa;border-color:#8e24aa;color:#fff}
.hw-miniplay .mp-btn .hw-ic{width:16px;height:16px}
.hw-miniplay .mp-info{min-width:0;flex:1}
.hw-miniplay .mp-t{display:block;font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hw-miniplay .mp-bar{display:block;height:5px;border-radius:3px;background:var(--line);margin-top:5px;overflow:hidden}
.hw-miniplay .mp-bar u{display:block;height:100%;width:0;background:#8e24aa;text-decoration:none}
.hw-miniplay .mp-time{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Handwrite: nút A− / A+ trên thanh chọn + hộp hướng dẫn thu / mở rộng */
.hw-sb[hidden]{display:none}
.hw-sb.sz{padding:0 8px;gap:1px;align-items:baseline}
.hw-sb.sz b{font-size:15px;line-height:1}
.hw-sb.sz small{font-size:13px;font-weight:800;line-height:1}
.hw-hintbox{margin:2px 4px 8px;border:1px solid var(--border);border-radius:10px;background:var(--card-2)}
.hw-hintbox>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:12.5px;font-weight:700;color:var(--muted);user-select:none}
.hw-hintbox>summary::-webkit-details-marker{display:none}
.hw-hintbox>summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.hw-hintbox[open]>summary::after{transform:rotate(-135deg)}
.hw-hintbox>summary .hw-ic{width:15px;height:15px}
.hw-hintbox>p{margin:0;padding:2px 12px 10px;font-size:12.5px;line-height:1.65;color:var(--muted);white-space:normal}
.hw-full .hw-hintbox{display:none}

/* ===== Handwriting: tối ưu điện thoại / máy tính bảng ===== */
@media (max-width:900px){
  main.nomargin{padding:12px 12px calc(96px + env(safe-area-inset-bottom)) 12px}
  .hwv{padding:0}
  /* thanh công cụ vẽ: dính ở đầu màn hình khi cuộn trang dài, vuốt ngang để thấy hết công cụ */
  .hw-bar{position:sticky;top:var(--hw-top,57px);z-index:29;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;box-shadow:0 4px 14px rgba(0,0,0,.12)}
  .hw-bar::-webkit-scrollbar{display:none}
  .hw-hintbox{margin-inline:0}
  .hw-stage{padding:8px 4px;border-radius:12px}
  .hw-wrap.hw-full{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .hw-full .hw-nav{bottom:calc(14px + env(safe-area-inset-bottom))}
  .hw-pop{max-width:calc(100vw - 16px)}
  .hw-side-tabs{position:static;overflow-x:auto;scrollbar-width:none}   /* cuộn theo trang: tránh khoảng trống + đè lên danh sách khi thanh trên cùng dính */
  .hw-full .hw-side-tabs{position:sticky;top:0}
  .hw-full .hw-bar{position:static}
  .hw-side-tabs::-webkit-scrollbar{display:none}
  .hw-side-tabs button{flex:0 0 auto;min-width:72px}
}
/* nút nổi: nhảy giữa «bài» và «phần nhận xét» (bài dài, phần nhận xét nằm phía dưới) */
.hw-fab{position:fixed;right:14px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:40;width:48px;height:48px;border-radius:50%;display:none;align-items:center;justify-content:center;background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.hw-fab .hw-ic{width:22px;height:22px}
@media (max-width:1000px){.hw-fab:not([hidden]){display:inline-flex}}
.hw-full .hw-fab{display:none!important}

@media (max-width:700px){
  /* trang danh sách / giao bài / theo dõi */
  .hwv-hero{padding:14px;gap:12px;border-radius:16px}
  .hwv-ico{width:42px;height:42px;border-radius:13px}.hwv-ico .hw-ic{width:22px;height:22px}
  .hwv-hero h1{font-size:21px}
  .hwv-hero p{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hwv-hr{width:100%;gap:10px}
  .hwv-quota{flex:1 1 100%;min-width:0}
  .hwv-cta{flex:1 1 0;justify-content:center;height:42px;padding:0 12px;font-size:14px}
  .hwv-kpi{gap:8px;margin:10px 0 4px}
  .hwv-k{padding:9px 10px;gap:9px;border-radius:14px}
  .hwv-k>span{width:32px;height:32px;border-radius:10px}
  .hwv-k b{font-size:19px}.hwv-k small{font-size:11.5px;line-height:1.25;display:block}
  .hwv-tabs{margin:10px 0 12px}
  .hwv-tabs nav{width:100%;overflow-x:auto;flex-wrap:nowrap;gap:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hwv-tabs nav::-webkit-scrollbar{display:none}
  .hwv-tabs nav a,.hwv-tabs nav button{flex:none;white-space:nowrap;padding:10px 12px;font-size:14px}
  .hwv-tools{gap:8px}
  .hwv-search{flex:1 1 100%;order:-1}.hwv-search input{width:100%}
  .hwv-chips{overflow-x:auto;scrollbar-width:none}.hwv-chips button{flex:none}
  .hwv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hwc{border-radius:14px}
  .hwc-paper{margin:10px 10px 0}
  .hwc-tape{width:46px;height:14px;top:-7px}
  .hwc-body{padding:10px 11px 12px;gap:4px}
  .hwc-body h3{font-size:14px}
  .hwc-meta{font-size:12px}
  .hwc-score{right:-6px;top:12px;padding:3px 8px}.hwc-score b{font-size:16px}
  .hwc-st{left:6px;bottom:6px;padding:2px 8px;font-size:11.5px}
  .hwc-actions .btn{flex:1 1 auto;justify-content:center}
  .hwc-new{min-height:210px}
  /* trang theo dõi: dòng người nhận gọn hơn, nút hành động xuống dưới và canh phải */
  .hwt-card{padding:12px}
  .hwt-bar .btn{flex:1 1 auto;justify-content:center}.hwt-bar .hw-spacer{display:none}
  .hwt-row{grid-template-columns:minmax(0,1fr) auto;row-gap:6px;padding:10px 2px}
  .hwt-act{grid-column:1/-1;text-align:right}
  .hwt-card .hw-addp input{min-width:0;flex:1 1 100%}
  .hwt-card .hw-addp .btn{flex:1 1 100%;justify-content:center}
}
@media (max-width:380px){
  .hwv-grid{grid-template-columns:minmax(0,1fr)}
  .hwc-paper{aspect-ratio:7/5}
}

/* Handwrite: thanh nghe trong danh sách ghi chú đều nhau (nội dung thẻ chiếm hết bề ngang, thanh nghe luôn 100%) */
.hw-pinlist li>div{flex:1 1 auto;min-width:0}
.hw-pinlist .hw-pin-audio{display:block;width:100%;min-width:0;height:36px;margin-top:6px}

/* Handwrite: màn hình cảm ứng (iPad...): thanh cuộn lồng nhau luôn hiện, to dễ kéo; cuộn mượt, không "dội" sang khung ngoài */
@media (pointer:coarse){
  .hw-stage,.hw-panel{-webkit-overflow-scrolling:touch;scrollbar-width:auto}
  .hw-panel{overscroll-behavior:contain}
  .hw-stage::-webkit-scrollbar,.hw-panel::-webkit-scrollbar{width:18px;height:18px}
  .hw-stage::-webkit-scrollbar-track,.hw-panel::-webkit-scrollbar-track{background:rgba(127,127,127,.14);border-radius:9px}
  .hw-stage::-webkit-scrollbar-thumb,.hw-panel::-webkit-scrollbar-thumb{background:rgba(100,106,125,.65);border-radius:9px;border:4px solid transparent;background-clip:content-box;min-width:56px;min-height:56px}
}

/* Handwrite: huy hiệu số lượng trên từng tab (n = tổng số, trung tính; blue / red = số mục cần bạn xử lý) */
.hwv-tabs nav a b.n{background:var(--card-2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--border)}
.hwv-tabs nav a b{min-width:20px;text-align:center}

/* Handwrite: liên kết / nhúng video (khung xem video + ô nhập liên kết) */
.hw-pop input[type=url],.hw-pop input[type=text]{width:100%;margin-bottom:6px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font:inherit}
.hw-link-host{margin:0 0 6px;word-break:break-all}
.hw-pop-row .btn{text-decoration:none}
.hw-vid{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,12,20,.72)}
.hw-vid[hidden]{display:none}
.hw-vid-box{width:min(960px,100%);background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.hw-vid-box header{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border)}
.hw-vid-box header b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.hw-vid-x{width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;background:var(--card-2);color:var(--text)}
.hw-vid-body{position:relative;aspect-ratio:16/9;background:#000}
.hw-vid-body iframe,.hw-vid-body video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}

/* Handwrite: khung nhỏ xem liên kết / video thiết kế lại + khung nhỏ không tràn; điện thoại: hiện như ngăn kéo phía dưới */
.hw-pop-row{flex-wrap:wrap}
.hw-pop-link{width:min(340px,calc(100vw - 16px));padding:0;overflow:hidden;border-radius:16px}
.hw-lk-head{display:flex;align-items:center;gap:10px;padding:12px 10px 10px 12px}
.hw-lk-ic{flex:none;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff}
.hw-lk-ic .hw-ic{width:19px;height:19px}
.hw-lk-tx{min-width:0;flex:1}
.hw-lk-tx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.35;color:var(--ink);word-break:break-word}
.hw-lk-tx small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-lk-x{flex:none;align-self:flex-start;width:32px;height:32px;border-radius:50%;font-size:22px;line-height:1;background:var(--card-2);color:var(--text)}
.hw-lk-thumb{position:relative;display:block;width:calc(100% - 24px);margin:0 12px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#111;padding:0}
.hw-lk-thumb[hidden]{display:none}
.hw-lk-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hw-lk-play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.62);box-shadow:0 2px 10px rgba(0,0,0,.4)}
.hw-lk-play svg{width:24px;height:24px;margin-left:3px;fill:#fff}
.hw-lk-act{display:flex;gap:8px;flex-wrap:wrap;padding:12px}
.hw-lk-act .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;margin:0;text-decoration:none}
.hw-lk-act .hw-ic{width:17px;height:17px}
.hw-lk-main{flex:1 1 100%;font-size:15px}
.hw-lk-sec{flex:1 1 0;min-width:0}
.hw-lk-del{color:var(--red)}
@media (max-width:700px){
  #hwPop{left:8px!important;right:8px!important;top:auto!important;bottom:calc(76px + env(safe-area-inset-bottom));width:auto;max-width:none;max-height:calc(100vh - 150px);overflow:auto;border-radius:18px 18px 14px 14px;box-shadow:0 -6px 30px rgba(0,0,0,.32)}
  #hwPop.hw-pop-link{width:auto}
  .hw-full #hwPop{bottom:calc(14px + env(safe-area-inset-bottom))}
  .hw-pop-row .btn{flex:1 1 auto;justify-content:center}
}

/* Handwrite: ô đổi số lượt xem / nghe + dòng lượt còn lại */
.hw-luot{display:flex;align-items:center;gap:10px;margin:2px 0 8px;padding:0 12px}
.hw-pop:not(.hw-pop-link) .hw-luot{padding:0}
.hw-luot span{flex:1;min-width:0;font-size:12.5px;color:var(--muted);line-height:1.3}
.hw-luot select{flex:none;width:auto!important;min-width:112px;margin:0!important;padding:7px 10px}
.hw-lk-left{margin:0;padding:0 12px 6px;font-size:13px;font-weight:700;color:var(--accent)}

/* Handwrite: tải bài lên - mục «gửi cho người chấm ngay» là tùy chọn, thu gọn mặc định */
.hw-sendbox{margin-top:14px;border:1.5px dashed var(--border);border-radius:14px;background:var(--card-2)}
.hw-sendbox>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 14px;user-select:none}
.hw-sendbox>summary::-webkit-details-marker{display:none}
.hw-sendbox>summary .hw-ic{flex:none;width:20px;height:20px;color:var(--accent)}
.hw-sendbox>summary span{flex:1;min-width:0}
.hw-sendbox>summary b{display:block;font-size:14.5px;color:var(--ink)}
.hw-sendbox>summary small{display:block;margin-top:1px;font-size:12.5px;color:var(--muted);line-height:1.4}
.hw-sendbox>summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.hw-sendbox[open]>summary::after{transform:rotate(-135deg)}
.hw-sendbox[open]{background:var(--card);border-style:solid}
.hw-sendbox-body{padding:0 14px 14px}

/* Admin: phân quyền chức năng + API tra từ vựng */
.qy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.qy-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);cursor:pointer;font-size:14px}
.qy-item input{flex:none;width:18px;height:18px}
.qy-item:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.qy-ico{flex:none;font-size:17px}
.qy-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qy-row input[type=text]{flex:1 1 260px;min-width:0}
.qy-chips{display:flex;flex-wrap:wrap;gap:6px}
.qy-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 6px 4px 12px;border-radius:16px;background:var(--card-2);border:1px solid var(--border);font-size:13px}
.qy-x{width:22px;height:22px;border-radius:50%;font-size:16px;line-height:1;background:var(--card);color:var(--muted)}
.qy-x:hover{background:var(--red);color:#fff}
.vapi-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.vapi-res{font-size:12.5px;word-break:break-all}
.vapi-res.ok{color:var(--green)}.vapi-res.err{color:var(--red)}

/* Cộng đồng: bài Luyện đọc / Podcast & Video do bot đưa lên */
.cd-lien{display:flex;gap:14px;align-items:stretch;border:1.5px solid var(--border);border-radius:12px;padding:12px;margin-bottom:10px;background:var(--card-2)}
.cd-lien.doc{border-left:5px solid var(--green)}.cd-lien.nghe{border-left:5px solid var(--amber)}
.cd-lien-img{flex:0 0 150px;width:150px;border-radius:10px;overflow:hidden;background:var(--card);align-self:flex-start;aspect-ratio:4/3}
.cd-lien-img img{display:block;width:100%;height:100%;object-fit:cover}
.cd-lien-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.cd-lien-t{margin:0;font-size:18px;line-height:1.3;color:var(--text);overflow-wrap:anywhere}
.cd-lien-sum{font-size:14px;color:var(--muted);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cd-lien-act{flex-wrap:wrap;gap:8px;margin-top:2px}
.cd-lien-act a{text-decoration:none}
@media (max-width:620px){
  .cd-lien{flex-direction:column;padding:10px}
  .cd-lien-img{flex:none;width:100%;aspect-ratio:16/9}
  .cd-lien-t{font-size:16px}
}

/* Cộng đồng (sau đăng nhập): cùng ngôn ngữ thiết kế với trang công khai /cong-dong (notewise-public.css) - bìa sổ xanh + trang thử thách kẻ dòng, thẻ thử thách trong bảng tin cũng là trang kẻ dòng */
.cd-hero{background:var(--cover);color:var(--cover-ink);border-radius:6px 18px 18px 6px;padding:26px clamp(18px,3vw,40px) 26px clamp(30px,4vw,56px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;position:relative;box-shadow:var(--shadow);margin-bottom:22px}
.cd-hero::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:6px;background:repeating-linear-gradient(var(--cover-ink) 0 3px,transparent 3px 22px);opacity:.25}
.cd-hero-eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t7)}
.cd-hero h2{color:var(--cover-ink);font-size:clamp(24px,3.2vw,36px);line-height:1.15;margin:6px 0 12px;letter-spacing:-.01em}
.cd-hero h2 em{font-style:italic;color:var(--t2)}
.cd-hero p{margin:0 0 18px;opacity:.88;max-width:52ch;font-size:15.5px}
.cd-hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cd-hero-cta .cd-btn{background:var(--cover-ink);border-color:var(--cover-ink);color:var(--cover)}
.cd-hero-link{color:var(--cover-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cd-hero-page,.cd-chal{background-color:var(--card);background-image:repeating-linear-gradient(transparent 0 27px,var(--line) 27px 28px);background-position:0 44px;position:relative}
.cd-hero-page{color:var(--text);border-radius:12px;padding:16px 16px 16px 42px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cd-hero-page::before,.cd-chal::before{content:"";position:absolute;left:28px;top:0;bottom:0;width:2px;background:var(--margin)}
.cd-chal{border:1px solid var(--border);padding-left:44px}
.cd-hero-timer{font-variant-numeric:tabular-nums;font-weight:700}
@media (max-width:820px){.cd-hero{grid-template-columns:minmax(0,1fr)}}
.cd-lien-t a{color:inherit;text-decoration:none}
.cd-lien-t a:hover{text-decoration:underline}

/* Cộng đồng (sau đăng nhập): thanh tìm kiếm + biểu tượng ở đầu trang, «Chuyên mục» (bộ lọc) ở cột bên phải */
.cd-topbar{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.cd-search-top{flex:1;min-width:0;margin:0;position:relative}
.cd-search-top input[type=search]{padding:11px 40px 11px 40px}
.cd-search-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:15px;opacity:.7}
.cd-search-x{position:absolute;right:92px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;padding:4px 6px;border-radius:50%}
.cd-icons{display:flex;gap:8px;align-items:center;flex-shrink:0}
.cd-ico{position:relative;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--border);background:var(--card);display:inline-grid;place-items:center;font-size:17px;font-weight:700;color:var(--text);cursor:pointer;text-decoration:none;padding:0}
.cd-ico:hover{border-color:var(--ink)}
.cd-ico[hidden]{display:none}
.cd-ico svg{width:24px;height:24px}
.cd-ico .nav-badge{position:absolute;top:-4px;right:-4px;margin-left:0;min-width:17px;height:17px;font-size:10px;padding:0 5px}
.cd-ico .nav-badge[hidden]{display:none}
.cd-cats{padding:10px}
.cd-cats-h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 10px}
.cd-cat{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-weight:700;font-size:14px;color:var(--text);text-decoration:none}
.cd-cat:hover{background:var(--card-2)}
.cd-cat.on{background:var(--accent-soft);color:var(--accent)}
.cd-cat-ic{width:22px;text-align:center;flex-shrink:0}
.cd-chips-m{display:none}
@media (max-width:960px){.cd-chips-m{display:flex}}
@media (max-width:900px){.cd-icons{display:none}}
.cd-ico-cf{background:linear-gradient(135deg,#d98a3d,#a8571f);border-color:transparent;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.cd-ico .cf-cup{width:28px;height:28px}

/* Cộng đồng (sau đăng nhập): làm nổi bật THỬ THÁCH ĐỌC TO ở đầu trang và khung ĐĂNG BÀI MỚI */
.cd-hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr)}
.cd-hero-page{border:2px solid var(--amber);padding:20px 20px 20px 46px;box-shadow:0 0 0 6px rgba(240,164,87,.28),0 16px 40px rgba(0,0,0,.32)}
.cd-hero-top{align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink);font-weight:800;font-size:13.5px}
.cd-hero-live{display:inline-flex;align-items:center;gap:6px;background:var(--red);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:3px 10px;border-radius:99px}
.cd-hero-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:cdPulse 1.4s ease-in-out infinite}
.cd-hero-page .cd-sentence{font-size:clamp(24px,2.6vw,32px);line-height:1.3;margin:14px 0 8px}
.cd-hero-page .cd-hero-timer{font-size:16px}
.cd-hero-rec{font-size:16px;padding:12px 24px;min-height:48px;border-radius:12px;animation:cdRing 2.2s ease-out infinite}
@keyframes cdPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@keyframes cdRing{0%{box-shadow:0 0 0 0 rgba(31,95,214,.5)}70%,100%{box-shadow:0 0 0 12px rgba(31,95,214,0)}}
.cd-composer{border:2px solid var(--accent);box-shadow:0 10px 28px rgba(31,95,214,.16);padding:18px 18px 14px}
.cd-comp-h{display:flex;align-items:center;gap:12px;margin:2px 0 12px}
.cd-comp-ic{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;font-size:21px;flex-shrink:0}
.cd-comp-h b{display:block;font-size:17px;color:var(--ink)}
.cd-comp-h small{display:block;color:var(--muted);font-size:13px}
.cd-composer textarea{min-height:92px;font-size:16.5px}
.cd-composer .cd-btn.primary.cd-post{font-size:15.5px;padding:10px 24px;min-height:44px;border-radius:12px}
@media (max-width:820px){.cd-hero{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.cd-hero-rec,.cd-hero-live::before{animation:none}}

/* Tra từ vựng */
.tt-help h3{margin:0 0 8px;color:var(--ink)}
.tt-help ul{margin:0 0 12px;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--text)}
.tt-try{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tt-empty p{margin:0 0 8px}
.tt-count{margin:0 0 12px;font-size:14px}
.tt-list{display:flex;flex-direction:column}
.tt-card{padding:16px 18px}
.tt-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.tt-word{font-size:24px;color:var(--ink);line-height:1.2;overflow-wrap:anywhere}
.tt-ipa{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;color:var(--muted)}
.tt-say{border:1.5px solid var(--border);background:var(--card);border-radius:50%;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;font-size:15px;padding:0}
.tt-say:hover{border-color:var(--ink)}
.tt-mean{font-size:17.5px;font-weight:600;margin-bottom:6px;overflow-wrap:anywhere}
.tt-ex{font-style:italic;color:var(--muted);font-size:14.5px;margin-bottom:8px;overflow-wrap:anywhere}
.tt-card mark{background:var(--hl);color:inherit;padding:0 2px;border-radius:3px}
.tt-foot{border-top:1px dashed var(--border);padding-top:10px;flex-wrap:wrap}
.tt-have{color:var(--green);border-color:var(--green);cursor:default;pointer-events:none}

/* Trang Tra từ: cùng bố cục với trang tra từ điển công khai (tiêu đề + ô tìm lớn, thẻ kết quả có họ từ / đồng nghĩa / trái nghĩa) */
.tt-hero{margin:6px 0 18px}
.tt-hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tt-hero h1{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:clamp(24px,4vw,32px);color:var(--ink)}
.tt-hero-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent-soft,var(--card-2));font-size:24px}
.tt-hero p{margin:0 0 14px;color:var(--muted)}
.tt-list{gap:14px}
.tt-card{display:flex;flex-direction:column;gap:8px}
.tt-head{margin-bottom:0}
.tt-ipa{font-family:inherit}
.tt-say{color:var(--accent)}
.tt-mean{margin-bottom:0}
.tt-ex{margin:0;padding-left:12px;border-left:3px solid var(--margin,#f1b8b8)}
.tt-line{font-size:14px;color:var(--text)}
.tt-line b{color:var(--ink)}
.tt-foot{margin-top:2px}
.tt-card mark{background:linear-gradient(transparent 50%,var(--hl) 50%);padding:0 1px;border-radius:0}
.cd-dict-hint{align-self:flex-start;margin:0 0 12px}

/* ô tìm kiếm trên cùng không còn nút: dấu ✕ nằm sát mép phải; ô soạn bài 1 dòng (tự cao thêm khi gõ nhiều) */
.cd-search-x{right:14px}
/* chữ 16px: trình duyệt điện thoại không tự phóng to trang khi chạm vào ô tìm kiếm (dưới 16px sẽ bị zoom làm tràn trang) */
.cd-search-top input[type=search]{font-size:16px}
.cd-topbar{min-width:0}
.cd-composer textarea{min-height:44px;max-height:180px;overflow-y:auto;padding:10px 0;line-height:1.45}
@media (max-width:760px){.cd-composer textarea{min-height:44px;padding:10px 0}}
.cd-cat-tt{border-top:1px dashed var(--border);margin-top:6px;border-radius:0 0 10px 10px}

/* «Xem thêm» cuối mỗi thư mục (Ghi chú, Từ vựng) và cuối khung gắn từ vựng: danh sách dài được nạp theo trang */
.fmore{display:block;width:calc(100% - 8px);margin:6px 4px 4px;text-align:center;font-weight:600}
.fmore[hidden],.vl-more[hidden]{display:none}
.fmore.is-loading,.vl-more:disabled{opacity:.6;cursor:progress}
.fmore.is-error{border-color:var(--red);color:var(--red)}
.vl-foot{margin-top:8px;text-align:center}
.vl-more{min-width:60%}
.vl-rail.dang-tai{opacity:.5;cursor:progress}

/* ---- Handwrite: đáp án vẽ trên đề (thanh Gửi / Thu hồi trên bản vẽ đáp án) ---- */
.hw-keybar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-color:var(--green);background:var(--green-soft)}
.hw-keybar-t{flex:1 1 280px;min-width:0;font-weight:600}
.hw-keybar-f{display:inline-flex;align-items:center;gap:10px;margin:0;flex-wrap:wrap}
.hw-keybar-c{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
@media (max-width:640px){.hw-keybar-f,.hw-keybar-f .btn{width:100%}.hw-keybar-f .btn{justify-content:center}}

/* ---- Handwrite: xem trực tiếp (thanh «Trực tiếp», nhãn người đang xem ở góc trang, thông báo làm mới) ---- */
.hw-live{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px;padding:6px 10px;border-radius:12px;background:var(--green-soft);border:1px solid var(--green)}
.hw-live[hidden],.hw-live-banner[hidden]{display:none}
.hw-live-tag{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:12.5px;color:var(--green);letter-spacing:.02em}
.hw-live-tag i{width:9px;height:9px;border-radius:50%;background:var(--green);animation:hwLiveDot 1.4s ease-in-out infinite}
.hw-live-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 3px;border-radius:99px;background:var(--card);border:1px solid var(--border);font-size:13px}
.hw-live-av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:800;font-size:12px}
.hw-live-chip small{color:var(--muted)}
.hw-live-chip em{display:none;font-style:normal;font-size:12px;font-weight:700;color:var(--accent)}
.hw-live-chip.pen em{display:inline}
.hw-live-chip.pen{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.hw-live-chip.off{opacity:.75}
.hw-live-chip.off small{font-style:italic}
.hw-live-call{display:inline-flex;gap:2px;margin-left:2px}
.hw-live-call button{border:0;background:transparent;cursor:pointer;font-size:15px;line-height:1;padding:3px 5px;border-radius:99px}
.hw-live-call button:hover,.hw-live-call button:focus-visible{background:var(--accent-soft)}
.hw-live-chk{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--text)}
.hw-live-chk input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.hw-live-banner{margin:0 0 8px;padding:8px 12px;border-radius:12px;background:var(--amber-soft);border:1px solid var(--amber);color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hw-page{position:relative}
.hw-here{position:absolute;top:8px;right:10px;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:70%;z-index:3;pointer-events:none}
.hw-here-chip{padding:2px 9px;border-radius:99px;color:#fff;font-size:12px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.25);white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
@keyframes hwLiveDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.hw-live-tag i{animation:none}}

/* ---- Đặt lịch video 1-1 (tutor): tìm tutor, chọn giờ, lịch hẹn, cài đặt, lưới lịch rảnh ---- */
.inline-f{display:inline-block;margin:0}
.tut-search{display:flex;gap:8px;flex-wrap:wrap;padding:12px 14px;margin-bottom:14px}
.tut-search input{flex:1;min-width:200px}
.tut-list{display:grid;gap:10px;margin-bottom:16px}
.tut-card{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:start}
.tut-ava{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:20px;flex:none}
.tut-ava.lg{width:64px;height:64px;font-size:24px}
.tut-main{min-width:0}
.tut-name{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tut-h{font-size:18px;color:var(--ink)}
.tut-bio{margin:4px 0 6px;font-size:14px}
.tut-tags,.tut-types{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tut-tag{display:inline-block;padding:1px 9px;border-radius:99px;font-size:12px;font-weight:600;background:var(--card-2);color:var(--muted);border:1px solid var(--border)}
.tut-tag.amber{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.tut-tag.green{background:var(--green-soft);color:var(--green);border-color:transparent}
.tut-tag.red{background:var(--red-soft);color:var(--red);border-color:transparent}
.tut-tag.grey{background:var(--card-2);color:var(--muted)}
.tut-chip{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12.5px;background:var(--accent-soft);color:var(--ink);border:1px solid transparent;font-weight:600}
button.tut-chip{cursor:pointer;border-color:var(--border);background:var(--card)}
button.tut-chip.on{background:var(--accent-soft);border-color:var(--accent)}
.tut-act{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.tut-book-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.tut-who{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.tut-side{position:sticky;top:16px;display:flex;flex-direction:column;gap:12px}
.tut-types-pick{display:grid;gap:8px;margin-top:8px}
.tut-type{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1.5px solid var(--border);border-radius:12px;background:var(--card);cursor:pointer}
.tut-type.on{border-color:var(--accent);background:var(--accent-soft)}
.tut-type input{accent-color:var(--accent)}
.tut-type-t{flex:1;min-width:0;display:flex;flex-direction:column}
.tut-type-t small{color:var(--muted)}
.tut-type-p{font-weight:800;color:var(--ink)}
.tut-wk{display:flex;align-items:center;gap:8px;margin:8px 0}
.tut-wk-l{flex:1;text-align:center;color:var(--ink)}
.tut-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.tut-day{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 2px;border-radius:12px;border:1.5px solid var(--border);background:var(--card);font-size:12px;color:var(--muted);cursor:pointer}
.tut-day b{font-size:17px;color:var(--text)}
.tut-day.on{border-color:var(--accent);background:var(--accent-soft)}
.tut-day.off{opacity:.45;cursor:not-allowed}
.tut-part{margin:12px 0 6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.tut-slotrow{display:flex;flex-wrap:wrap;gap:6px}
.tut-slot{padding:7px 12px;border-radius:10px;border:1.5px solid var(--border);background:var(--card);font-weight:600;cursor:pointer;min-width:64px}
.tut-slot:hover{border-color:var(--accent)}
.tut-slot.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tut-empty{padding:12px 4px}
.tut-goals{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.tut-sum{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--border);font-size:14px}
.tut-sum b{text-align:right}
.tut-total b{font-size:20px;color:var(--ink)}
.tut-note{padding:12px 14px;border-radius:12px;background:var(--sticky);color:var(--sticky-ink);font-size:13px;line-height:1.5}
.tut-sec{margin:18px 0 8px;display:flex;gap:8px;align-items:center}
.tut-tabs{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap}
.tut-tabs a{padding:8px 14px;border-radius:99px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font-weight:600;display:inline-flex;gap:6px;align-items:center}
.tut-tabs a.on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.tut-bk{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:start;margin-bottom:10px}
.tut-date{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;background:var(--accent-soft);color:var(--ink);padding:6px 0}
.tut-date small{font-size:11px;opacity:.75}.tut-date b{font-size:20px;line-height:1.1}
.tut-bk-act{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.tut-bk-more{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.tut-goal-t{margin-top:2px;white-space:pre-wrap}
.tut-pop summary{list-style:none;cursor:pointer}
.tut-pop summary::-webkit-details-marker{display:none}
.tut-pop-b{margin-top:8px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--card-2);min-width:min(520px,100%)}
.tut-pop-b form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.tut-in{padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font:inherit;min-width:0}
.tut-form{display:flex;flex-direction:column;gap:6px}
.tut-form textarea,.tut-form input[type=text],.tut-form input[type=date],.tut-form input[type=time],.tut-form select,.tut-form input[type=number]{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font:inherit}
.tut-check{display:flex;gap:8px;align-items:center;cursor:pointer}
.tut-check input{width:18px;height:18px;accent-color:var(--accent)}
.tut-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tut-thead,.tut-trow{display:grid;grid-template-columns:minmax(120px,2fr) 1fr 1fr 1.2fr 40px;gap:8px;align-items:center}
.tut-thead{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:4px}
.tut-trows{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.tut-trow .tut-in{width:100%}
.tut-avail-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.tut-gridwrap{overflow-x:auto;max-height:70vh;overflow-y:auto;border:1px solid var(--border);border-radius:12px}
.tut-grid{display:grid;grid-template-columns:52px repeat(7,minmax(46px,1fr));min-width:420px;user-select:none;-webkit-user-select:none}
.tut-gh{position:sticky;top:0;background:var(--card);z-index:1;text-align:center;font-weight:700;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--border)}
.tut-gt{font-size:11px;color:var(--muted);text-align:right;padding-right:6px;height:20px;line-height:20px}
.tut-gc{height:20px;border-right:1px solid var(--line);border-bottom:1px dotted var(--line);background:var(--card-2);cursor:pointer}
.tut-gc.hr{border-top:1px solid var(--border)}
.tut-gc.on{background:color-mix(in srgb,var(--green) 70%,transparent)}
.tut-legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-top:8px}
.tut-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px;background:var(--card-2);border:1px solid var(--border)}
.tut-legend i.on{background:color-mix(in srgb,var(--green) 70%,transparent)}
.tut-off{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 0;border-bottom:1px dashed var(--border)}
.tut-book-grid textarea,.tut-pop-b input[type=text]{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font:inherit;resize:vertical}
.tut-pop-b form input[type=text]{flex:1;min-width:180px;width:auto}
.tut-tablewrap{overflow-x:auto}
.tut-table{width:100%;border-collapse:collapse;font-size:14px}
.tut-table th,.tut-table td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border)}
@media (max-width:900px){.tut-book-grid,.tut-avail-grid{grid-template-columns:minmax(0,1fr)}.tut-side{position:static}}
@media (max-width:640px){.tut-card{grid-template-columns:44px minmax(0,1fr)}.tut-card .tut-act{grid-column:1/-1;align-items:stretch}.tut-bk{grid-template-columns:44px minmax(0,1fr)}.tut-bk-act{grid-column:1/-1;justify-content:flex-start}.tut-thead{display:none}.tut-trow{grid-template-columns:1fr 1fr}.tut-trow .tut-in:first-child{grid-column:1/-1}.tut-grid2{grid-template-columns:1fr}.tut-ava{width:44px;height:44px;font-size:18px}}
/* ---- Đặt lịch 1-1: bản cải tiến trải nghiệm (điều hướng 3 khu, bước làm, thẻ tutor có giờ trống, buổi tiếp theo, thống kê tutor, thanh gửi cố định) ---- */
.tut-nav{margin:0 0 14px;display:flex;flex-direction:column;gap:8px}
.tut-nav-main{display:flex;gap:8px;flex-wrap:wrap}
.tut-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:99px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font-weight:700;min-height:42px}
.tut-pill:hover{border-color:var(--accent)}
.tut-pill.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent)}
.tut-pill .nav-badge{margin-left:2px}
.tut-nav-sub{display:flex;gap:4px;flex-wrap:wrap;padding:4px;border-radius:14px;background:var(--card-2);border:1px solid var(--border)}
.tut-nav-sub a{padding:7px 13px;border-radius:10px;color:var(--text);font-weight:600;font-size:14px}
.tut-nav-sub a:hover{background:var(--card)}
.tut-nav-sub a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.tut-nav-sub .tut-sub-r{margin-left:auto}
.tut-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none;padding:0;margin:0 0 14px}
.tut-how li{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--card-2);border:1px dashed var(--border)}
.tut-how i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:800}
.tut-how span{display:flex;flex-direction:column;min-width:0}.tut-how small{color:var(--muted);font-size:12px}
.tut-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 12px;margin-bottom:10px}
.tut-filter input[type=search]{flex:1;min-width:200px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font:inherit}
.tut-filter select{padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font:inherit}
.tut-check-inline{display:inline-flex;gap:6px;align-items:center;font-size:14px;cursor:pointer}
.tut-chiprow{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
a.tut-chip{text-decoration:none;color:var(--text)}
.tut-chip small{opacity:.65;margin-left:3px}
.tut-name-l{color:var(--ink)}
.tut-soon{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.tut-soon-l{font-weight:700;font-size:13px;color:var(--ink)}
.tut-slotlink{display:inline-block;padding:5px 11px;border-radius:99px;border:1.5px solid var(--green);background:var(--green-soft);color:var(--green);font-weight:700;font-size:13px;cursor:pointer;text-decoration:none}
.tut-slotlink:hover{background:var(--green);color:#fff}
.tut-empty-card{text-align:center;padding:28px 16px}
.tut-empty-ico{font-size:40px;margin-bottom:6px}
.btn.lg{padding:11px 20px;min-height:46px;font-size:15px;border-radius:12px}
.tut-facts{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--muted)}
.tut-step-h{display:flex;gap:10px;align-items:center;margin:0 0 8px}
.tut-step-h i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:14px}
.tut-quick{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0 8px;padding:10px 12px;border-radius:12px;background:var(--green-soft)}
.tut-quick[hidden]{display:none}
.tut-quick-l{display:contents}
.tut-submit-inline{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}
.tut-day-n{position:absolute;top:3px;right:5px;font-style:normal;font-size:10px;font-weight:700;color:var(--green)}
.tut-day{position:relative}
.tut-sticky{display:none}
.tut-summary .tut-sum:first-of-type{border-top:0}
.tut-bk.hero{border:2px solid var(--green);background:linear-gradient(180deg,var(--green-soft),var(--card) 55%)}
.tut-bk.hero .tut-date{background:var(--green);color:#fff}
.tut-bk.past{opacity:.8}
.tut-new{animation:tutPulse 2.4s ease-out 1}
@keyframes tutPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:none}}
.tut-bk{grid-template-columns:76px minmax(0,1fr) auto}
.tut-date{min-width:72px;padding:8px 6px;text-align:center}
.tut-date small{display:block;font-size:12px;font-weight:700;opacity:.85}.tut-date b{font-size:20px}
.tut-until{color:var(--green)}
.tut-urgent{color:var(--red)}
.tut-prog{display:flex;gap:6px;list-style:none;padding:0;margin:10px 0 0;flex-wrap:wrap}
.tut-prog li{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);padding:3px 10px 3px 4px;border-radius:99px;background:var(--card-2)}
.tut-prog i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;background:var(--card);border:1.5px solid var(--border)}
.tut-prog li.done{color:var(--green)}.tut-prog li.done i{background:var(--green);border-color:var(--green);color:#fff}
.tut-prog li.cur{color:var(--ink);background:var(--accent-soft);font-weight:700}.tut-prog li.cur i{border-color:var(--accent);color:var(--accent)}
.tut-room-soon{font-size:13px;color:var(--muted)}
.tut-day-h{margin:12px 2px 6px;font-weight:800;color:var(--ink)}.tut-day-h small{font-weight:500;color:var(--muted);margin-left:6px}
.tut-history{margin:18px 0 6px}
.tut-history>summary{cursor:pointer;font-weight:800;margin-bottom:8px;color:var(--ink)}
.tut-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 14px}
.tut-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px 8px;border-radius:14px;background:var(--card);border:1px solid var(--border);text-align:center}
.tut-stat b{font-size:26px;line-height:1;color:var(--ink)}.tut-stat small{color:var(--muted);font-size:12px}
.tut-stat.hot{background:var(--amber-soft);border-color:var(--amber)}.tut-stat.hot b{color:var(--amber)}
.tut-switch-f{margin:0}
.tut-switch{width:46px;height:26px;border-radius:99px;background:var(--border);position:relative;border:0;cursor:pointer;transition:background .15s}
.tut-switch i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s}
.tut-switch.on{background:var(--green)}.tut-switch.on i{left:23px}
.tut-checklist{margin:0 0 14px;border:1.5px solid var(--amber);background:var(--amber-soft)}
.tut-checklist.ready{border-color:var(--green);background:var(--green-soft)}
.tut-check-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.tut-progress{height:8px;border-radius:99px;background:var(--card);overflow:hidden;margin-bottom:10px}
.tut-progress i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .3s}
.tut-steps{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.tut-steps a{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:99px;background:var(--card);border:1.5px solid var(--border);color:var(--text);font-weight:600}
.tut-steps i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;background:var(--card-2)}
.tut-steps li.done a{border-color:var(--green)}.tut-steps li.done i{background:var(--green);color:#fff}
.tut-steps li.cur a{border-color:var(--accent);background:var(--accent-soft)}.tut-steps li.cur i{background:var(--accent);color:#fff}
.tut-two{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.tut-adv{margin-top:12px;border:1px solid var(--border);border-radius:12px;padding:8px 12px;background:var(--card-2)}
.tut-adv>summary{cursor:pointer;font-weight:700}
.tut-adv .tut-grid2{margin-top:10px}
.tut-card-mini{display:flex;gap:12px;align-items:flex-start}
.tut-preview .tut-bio{font-size:13.5px}
.tut-presets{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:4px}
.tut-grid-sum{margin-left:auto;color:var(--green)}.tut-grid-sum.warn{color:var(--red)}
.tut-gh-b,.tut-gt-b{cursor:pointer}
.tut-gh-b:hover,.tut-gt-b:hover{color:var(--accent);background:var(--accent-soft)}
.tut-gc:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;z-index:2;position:relative}
.tut-gh-b:focus-visible,.tut-gt-b:focus-visible{outline:2px solid var(--accent)}
.tut-savebar{position:sticky;bottom:0;margin:12px -4px -4px;padding:10px 4px;background:linear-gradient(0deg,var(--card) 70%,transparent)}
@media (max-width:900px){.tut-two{grid-template-columns:minmax(0,1fr)}.tut-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.tut-how{grid-template-columns:1fr}.tut-summary{display:none}
 .tut-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--border);box-shadow:0 -6px 18px rgba(0,0,0,.18)}
 .tut-sticky[hidden]{display:none}
 .tut-sticky-t{display:flex;flex-direction:column;min-width:0}.tut-sticky-t b{font-size:15px;color:var(--ink);white-space:nowrap}.tut-sticky .btn{padding-left:12px;padding-right:12px;font-size:14px}.tut-sticky-t small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .tut-book-grid{padding-bottom:76px}}
@media (max-width:640px){.tut-pill{flex:1 1 auto;justify-content:center;padding:9px 10px;font-size:14px}.tut-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.tut-stat-sw{grid-column:1/-1;flex-direction:row;justify-content:center;gap:10px}
 .tut-date{min-width:60px}.tut-bk{grid-template-columns:60px minmax(0,1fr)}.tut-bk-act .btn{flex:1;justify-content:center}.tut-nav-sub{flex-wrap:nowrap;overflow-x:auto}.tut-nav-sub a{white-space:nowrap}.tut-nav-sub .tut-sub-r{margin-left:0}
 .tut-day{padding:9px 1px}.tut-slot{min-width:72px;padding:10px 12px}.tut-slotlink{padding:8px 12px}.btn.lg{width:100%;justify-content:center}.tut-bk-act .btn.lg{width:auto}}

/* ===== Handwriting: cuộc gọi nằm trong màn chấm bài, phía bên trái (thay cho cửa sổ bật lên) =====
   - màn thường: dải ngang ở đầu cột bên trái, ngay trên tài liệu (hình 4:3 bên trái, tên / nút bên phải);
   - toàn màn hình: cột dọc bên trái; màn hẹp: dải trên cùng. */
.hw-calldock{position:relative;align-self:start;width:100%;height:190px;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#0f1218;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 32px rgba(0,0,0,.3);transition:height .22s ease;min-width:0}
.hw-calldock[hidden]{display:none}
.hw-calldock-f{flex:1;width:100%;min-height:0;border:0;background:#0f1218;color-scheme:dark}
.hw-calldock-min{position:absolute;top:8px;right:8px;z-index:3;width:30px;height:30px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hw-calldock-min:hover{background:rgba(255,255,255,.34)}
.hw-calldock-min .hw-ic{width:16px;height:16px}
.hw-calldock.mini{height:96px}
.hw-calldock.mini .hw-calldock-min{transform:rotate(180deg);top:2px;right:4px;width:24px;height:24px}
.hw-calldock.flash{animation:hwDockFlash .9s ease}
@keyframes hwDockFlash{0%,100%{box-shadow:0 12px 32px rgba(0,0,0,.3)}40%{box-shadow:0 0 0 4px var(--accent),0 12px 32px rgba(0,0,0,.3)}}
.hw-wrap.hw-incall{grid-template-columns:minmax(0,1fr) 340px;row-gap:12px}
.hw-wrap.hw-incall .hw-calldock{grid-column:1;grid-row:1}
.hw-wrap.hw-incall .hw-main{grid-column:1;grid-row:2}
.hw-wrap.hw-incall .hw-side{grid-column:2;grid-row:1 / 3}
/* toàn màn hình: khung ở bên trái, tài liệu chiếm phần còn lại */
.hw-wrap.hw-full.hw-incall{display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);row-gap:0}
.hw-full.hw-incall .hw-fs-head{grid-column:1 / -1;grid-row:1}
.hw-full.hw-incall .hw-calldock{position:relative;top:auto;grid-row:2;grid-column:1;height:auto;margin:8px 0 8px 10px;align-self:stretch}
.hw-full.hw-incall .hw-calldock.mini{height:96px;align-self:start}
.hw-full.hw-incall .hw-main{grid-row:2;grid-column:2;min-width:0}
.hw-full.hw-incall .hw-side{grid-column:auto;grid-row:auto}
@media (max-width:1000px){
  .hw-wrap.hw-incall{grid-template-columns:minmax(0,1fr)}
  .hw-wrap.hw-incall .hw-calldock{grid-column:1;grid-row:1;position:sticky;top:0;z-index:40;height:min(300px,42vh)}
  .hw-wrap.hw-incall .hw-calldock.mini{height:76px}
  .hw-wrap.hw-incall .hw-main{grid-column:1;grid-row:2}
  .hw-wrap.hw-incall .hw-side{grid-column:1;grid-row:3}
  .hw-wrap.hw-full.hw-incall{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
  .hw-full.hw-incall .hw-calldock{grid-row:2;grid-column:1;height:min(260px,34vh);margin:6px 10px 0;align-self:start;position:relative}
  .hw-full.hw-incall .hw-calldock.mini{height:76px}
  .hw-full.hw-incall .hw-main{grid-row:3;grid-column:1}
}

/* ---- trang cuộc gọi khi được nhúng (Note_Call/Phong?dock=1): nền tối, hình tràn khung, nút tròn nhỏ ---- */
body.cl-room.cl-dock{display:block;padding:0;min-height:0;height:100vh;height:100dvh;overflow:hidden;background:#0f1218;color:#fff}
.cl-dock .cl-card{position:relative;max-width:none;width:100%;height:100%;padding:0;gap:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.cl-dock .cl-av{width:84px;height:84px;font-size:36px;margin:0 0 10px}
.cl-dock .cl-name{margin:0;font-size:17px;color:#fff;max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-dock .cl-status{margin:3px 0 0;font-size:13px;color:rgba(255,255,255,.8)}
.cl-dock .cl-timer{margin:2px 0 0;font-size:13px;color:#9be7a8;font-variant-numeric:tabular-nums}
.cl-dock .cl-msg{margin:6px 12px 0;font-size:12px}
.cl-dock .cl-stage{position:absolute;inset:0;width:auto;aspect-ratio:auto;max-height:none;border-radius:0;box-shadow:none;z-index:0}
.cl-dock .cl-remote{object-fit:cover}
.cl-dock .cl-local{width:32%;max-width:92px;right:8px;bottom:66px;border-radius:9px}
.cl-dock.cl-live .cl-card{justify-content:flex-end}
.cl-dock.cl-live .cl-name,.cl-dock.cl-live .cl-status,.cl-dock.cl-live .cl-timer{position:absolute;left:12px;z-index:2;text-shadow:0 1px 4px rgba(0,0,0,.7);text-align:left;margin:0}
.cl-dock.cl-live .cl-name{top:10px;font-size:14px;max-width:62%}
.cl-dock.cl-live .cl-status{top:30px;font-size:12px}
.cl-dock.cl-live .cl-timer{top:46px;font-size:12px}
.cl-dock .cl-ctrl{position:absolute;left:0;right:0;bottom:10px;z-index:3;margin:0;gap:12px;justify-content:center;flex-wrap:nowrap}
.cl-dock .cl-card .cl-btn{min-width:0;width:46px;height:46px;padding:0;gap:0;border-radius:50%;background:rgba(255,255,255,.2);border:0;color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cl-dock .cl-card .cl-btn .cl-lbl{display:none}
.cl-dock .cl-card .cl-btn .cl-ico{font-size:21px}
.cl-dock .cl-card .cl-btn.no{background:var(--red);color:#fff}
.cl-dock .cl-card .cl-btn.mute.on,.cl-dock .cl-card .cl-btn.cam.on{background:#fff;color:#0f1218}
.cl-dock .cl-after{position:static;z-index:3;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0 10px;margin-top:12px}
.cl-dock .cl-after .btn{height:38px;font-size:13px}
.cl-dock .cl-sel{position:absolute;top:8px;left:8px;z-index:3;max-width:56%;font-size:12px}
/* khung ngang (dải ở đầu tài liệu): hình 4:3 bên trái, tên / trạng thái / thời gian xếp dọc, nút bên phải */
@media (min-aspect-ratio:5/2){
  .cl-dock .cl-card,.cl-dock.cl-live .cl-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto auto auto;align-content:center;align-items:center;justify-content:stretch;padding:0 44px 0 0;column-gap:0}
  .cl-dock .cl-av{grid-column:1;grid-row:1 / 5;margin:0 16px 0 18px;width:72px;height:72px;font-size:30px}
  .cl-dock .cl-card .cl-name{grid-column:2;grid-row:1;max-width:none;text-align:left}
  .cl-dock .cl-card .cl-status{grid-column:2;grid-row:2;text-align:left}
  .cl-dock .cl-card .cl-timer{grid-column:2;grid-row:3;text-align:left}
  .cl-dock .cl-card .cl-msg{grid-column:2;grid-row:4;text-align:left;margin:4px 0 0}
  .cl-dock .cl-ctrl,.cl-dock .cl-after{position:static;grid-column:3;grid-row:1 / 5;margin:0 0 0 12px;padding:0;justify-content:flex-end}
  .cl-dock.cl-live .cl-card{padding-left:calc(100vh * 4 / 3 + 18px)}
  .cl-dock.cl-live .cl-stage{inset:0 auto 0 0;width:calc(100vh * 4 / 3)}
  .cl-dock.cl-live .cl-av{display:none}
  .cl-dock.cl-live .cl-card .cl-name,.cl-dock.cl-live .cl-card .cl-status,.cl-dock.cl-live .cl-card .cl-timer{position:static;text-shadow:none}
  .cl-dock.cl-live .cl-card .cl-name{font-size:16px}
  .cl-dock.cl-live .cl-local{bottom:8px;width:30%}
}
/* khung bị thu nhỏ (cao <= 130px): một hàng gọn, chỉ còn tên / thời gian và nút */
@media (max-height:130px){
  .cl-dock .cl-card,.cl-dock.cl-live .cl-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;align-content:center;align-items:center;padding:0 40px 0 14px;column-gap:10px;justify-content:stretch}
  .cl-dock .cl-stage,.cl-dock.cl-live .cl-stage,.cl-dock .cl-av,.cl-dock .cl-sel,.cl-dock .cl-msg{display:none!important}
  .cl-dock .cl-card .cl-name,.cl-dock.cl-live .cl-card .cl-name{position:static;grid-column:1;grid-row:1;font-size:14px;max-width:none;text-align:left}
  .cl-dock .cl-card .cl-status,.cl-dock.cl-live .cl-card .cl-status{position:static;grid-column:1;grid-row:2;text-align:left;font-size:12px;margin:0}
  .cl-dock .cl-card .cl-timer,.cl-dock.cl-live .cl-card .cl-timer{position:static;grid-column:1;grid-row:3;text-align:left;margin:0}
  .cl-dock .cl-ctrl{position:static;grid-column:2;grid-row:1 / 4;gap:8px;margin:0}
  .cl-dock .cl-card .cl-btn{width:40px;height:40px}
  .cl-dock .cl-after{position:static;grid-column:1 / -1;padding:0;margin:0}
}

/* ---------- Trang nhúng (iframe) - chat trong lớp học 1-1: bỏ thanh bên / tiêu đề / danh sách, chỉ còn khung tin nhắn + ô soạn ---------- */
html:has(> body.nw-embed){background:var(--paper)}
body.nw-embed{display:block;min-height:0;height:100vh;height:100dvh;overflow:hidden;background:var(--paper);background-image:none}
.nw-embed .app{display:block;max-width:none;margin:0;min-height:0;height:100%;background:transparent;box-shadow:none;border-radius:0}
.nw-embed main,.nw-embed.chat-page main{height:100%;padding:0!important;margin:0;border-radius:0;box-shadow:none;background:transparent}
.nw-embed main::before,.nw-embed .spiral{display:none}
.nw-embed .view{max-width:none;height:100%;margin:0}
.nw-embed .page-head,.nw-embed #notifPrompt,.nw-embed .chat-list,.nw-embed .chat-head,.nw-embed .folder-error{display:none!important}
.nw-embed .chat-layout{display:block;height:100%}
.nw-embed .chat-pane{position:static;height:100%;min-height:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.nw-embed .chat-messages{padding:10px 14px}
.nw-embed .chat-form{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
.nw-embed .chat-form textarea{min-height:40px}

/* Đặt lịch 1-1: 2 tab lớn (người học / tutor-expert) dùng kiểu .vt-tabs + thanh mục con */
.tut-tabs{margin:0 0 8px}
.tut-tabs .vt-tab{flex:1 1 0;padding:11px 14px;font-size:15px}
.tut-tabs .nav-badge,.tut-nav-sub .nav-badge{margin-left:2px}
.tut-nav-sub a{display:inline-flex;align-items:center;gap:6px}
.tut-tabs{flex-wrap:nowrap}
@media (max-width:640px){.tut-tabs{flex-wrap:wrap;overflow:visible}.tut-tabs .vt-tab{flex:1 1 calc(50% - 6px);min-width:0;font-size:13.5px;padding:9px 8px;white-space:normal;text-align:center;line-height:1.25}}

/* Đặt lịch 1-1, tab tutor: các bước (xác minh → hồ sơ → loại buổi → lịch rảnh) và mục con bị khóa */
.tut-nav-sub .tut-sub-lock{padding:7px 13px;border-radius:10px;color:var(--muted);font-weight:600;font-size:14px;opacity:.7;cursor:not-allowed;white-space:nowrap}
.tut-nav-sub a.tut-sub-ok{color:var(--green);font-weight:700}
.tut-gate-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:none}
.tut-gate-step{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--border);border-radius:14px;background:var(--card)}
.tut-gate-step>i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--card-2);color:var(--muted);font-style:normal;font-weight:800}
.tut-gate-step.now{border-color:var(--accent)}
.tut-gate-step.now>i{background:var(--accent);color:#fff}
.tut-gate-b{min-width:0;flex:1}
.tut-gate-b>b{display:block;font-size:16px;color:var(--ink)}
.tut-gate-b>small{display:block;margin:2px 0 6px;color:var(--muted);font-size:14px}
.tut-gate-b .notice{margin:8px 0 0}
.tut-gate-step.lock{background:var(--card-2);opacity:.85}
.tut-gate-lock{display:inline-block;margin-top:2px;padding:1px 10px;border-radius:99px;background:var(--card);border:1px dashed var(--border);color:var(--muted);font-size:13px}

/* Tab tutor: thanh «Đã xác minh» gọn + danh sách việc cần làm dạng 3 bước ngang */
.tk-vbar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:10px 14px;margin:0 0 10px}
.tk-vbar .tk-vtxt{flex:1 1 260px;min-width:0;color:var(--text)}
.tk-vbar .btn{flex:none}
.tut-checklist{padding:16px 18px;margin:0 0 14px}
.tut-checklist .tut-check-h{margin:0 0 8px}
.tut-checklist .tut-check-h b{font-size:16px;color:var(--ink)}
.tut-count{padding:2px 10px;border-radius:99px;background:var(--card);border:1px solid var(--border);font-size:13px;font-weight:800;color:var(--ink)}
.tut-checklist .tut-progress{height:6px;margin-bottom:12px}
.tut-stepper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
.tut-stepper a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--card);border:1.5px solid var(--border);color:var(--text);text-decoration:none;min-height:56px}
.tut-stepper a:hover{border-color:var(--accent)}
.tut-stepper i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800;background:var(--card-2);color:var(--muted)}
.tut-stepper .tx{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.tut-stepper .tx b{font-size:15px;color:var(--ink)}
.tut-stepper .tx small{font-size:12.5px;color:var(--muted)}
.tut-stepper li.done a{border-color:var(--green)}
.tut-stepper li.done i{background:var(--green);color:#fff}
.tut-stepper li.done .tx small{color:var(--green);font-weight:700}
.tut-stepper li.cur a{border-color:var(--accent);background:var(--accent-soft)}
.tut-stepper li.cur i{background:var(--accent);color:#fff}
.tut-check-foot{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.tut-check-foot a:not(.btn){color:var(--accent);font-weight:700;text-decoration:none}
:root[data-theme="dark"] .tut-stepper li.done i,:root[data-theme="dark"] .tut-stepper li.cur i{color:#10131a}
@media (max-width:640px){.tut-stepper{gap:6px}.tut-stepper a{flex-direction:column;justify-content:center;text-align:center;gap:4px;padding:10px 4px;min-height:0}.tut-stepper .tx{align-items:center}.tut-stepper .tx b{font-size:14px}.tk-vbar .btn{width:100%;justify-content:center;text-align:center}}

/* Thư mục (Ghi chú / Từ vựng): các thao tác gom vào 1 nút «⋯» mở menu thả xuống */
.fmenu{position:relative;display:inline-flex}
.fmenu-btn{font-size:20px;font-weight:800;letter-spacing:1px;padding-bottom:5px}
.fmenu-btn[aria-expanded="true"]{background:var(--card);color:var(--ink)}
.fmenu-pop{position:fixed;z-index:80;min-width:210px;max-width:min(300px,calc(100vw - 16px));padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:0 10px 28px rgba(20,30,60,.22)}
.fmenu-pop[hidden]{display:none}
.fmenu-pop form{display:block;margin:0}
.fmi{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
.fmi:hover,.fmi:focus-visible{background:var(--card-2);outline:none}
.fmi.danger{color:var(--red)}
.fmi.danger:hover,.fmi.danger:focus-visible{background:var(--red-soft)}
.fmi-i{flex:none;width:20px;text-align:center}
.fmenu-pop form + .fmi,.fmenu-pop .fmi + form{border-top:0}
.fmenu-pop form{margin-top:4px;padding-top:4px;border-top:1px solid var(--border)}
@media (max-width:900px){.fmi{padding:12px 14px;font-size:15px}}

/* ===== Cuối thanh bên: thẻ ủng hộ + thẻ người dùng + hàng công cụ (thiết kế lại) ===== */
.sidebar .cf-card{flex:none;margin:12px 0 14px;padding:12px 14px;gap:12px;border-radius:16px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(135deg,#dd9145 0%,#b0602a 55%,#9a4e1c 100%);position:relative;overflow:hidden}
.sidebar .cf-card::after{content:"";position:absolute;right:-26px;top:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);pointer-events:none}
.sidebar .cf-card .cf-cup{width:34px;height:34px}
.sidebar .cf-card .cf-txt b{font-size:14.5px;white-space:nowrap}
.sidebar .cf-card .cf-txt small{font-size:12px;opacity:.92}
.side-foot{flex:none;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.1)}
.side-user{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.side-user .avatar{width:46px;height:46px;font-size:18px;box-shadow:0 0 0 2px rgba(255,255,255,.2),0 4px 10px rgba(0,0,0,.25)}
.side-user .who{min-width:0;flex:1}
.side-user .who b{display:block;font-size:15px;line-height:1.25;color:var(--cover-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user .who b a{color:inherit;text-decoration:none}
.side-user .who b a:hover{text-decoration:underline}
.side-user .who small{margin-top:5px}
.side-foot .logout-link{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:99px;background:rgba(159,192,255,.14);color:#b9d0ff;font-size:12.5px;font-weight:600;text-decoration:none;transition:background .15s,color .15s}
.side-foot .logout-link:hover{background:rgba(159,192,255,.26);color:#fff}
.side-foot .logout-link .lo-i{flex:none}
.sidebar .side-tools{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin:0;width:100%}
.sidebar .theme-btn{height:38px;min-height:0;padding:0 6px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);font-size:15px;font-weight:800;color:var(--cover-ink);text-decoration:none;transition:background .15s,transform .15s}
.sidebar .theme-btn:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.sidebar .theme-btn:focus-visible,.side-foot .logout-link:focus-visible{outline:2px solid #9fc0ff;outline-offset:2px}

/* Ảnh duy nhất của bài: khung ôm sát ảnh (không còn viền đen / không cắt), tối đa 520 px cao; ảnh dọc cũng nằm gọn trong 1 khung */
.cd-mg.n1 .cd-m[data-type="image"]{aspect-ratio:auto;min-height:140px;max-height:none;background:var(--card-2);display:flex;align-items:center;justify-content:center}
.cd-mg.n1 .cd-m[data-type="image"] img{width:auto;height:auto;max-width:100%;max-height:520px;object-fit:contain;background:transparent;margin:0 auto}

/* Quản trị trong Hồ sơ: trang tổng quan theo công việc + đường dẫn */
.adh-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 16px}
.adh-top h2{margin:0 0 2px}
.adh-top p{margin:0}
.adh-find input{min-width:240px;max-width:100%;padding:9px 14px;border:1.5px solid var(--border);border-radius:99px;background:var(--card);color:var(--text);font:inherit}
.adh-find input:focus{outline:none;border-color:var(--accent)}
.adh-grp{margin:0 0 22px}
.adh-grp[hidden],.adh-card[hidden]{display:none}
.adh-grp h3{margin:0 0 10px;font-size:15px;color:var(--ink);letter-spacing:.01em}
.adh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.adh-card{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border:1.5px solid var(--border);border-radius:14px;background:var(--card);color:var(--text);text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.adh-card:hover,.adh-card:focus-visible{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 6px 16px rgba(30,58,110,.12);outline:none}
.adh-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--accent-soft)}
.adh-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.adh-tx b{font-size:15px;color:var(--ink);display:flex;align-items:center;gap:6px}
.adh-tx small{font-size:12.5px;line-height:1.4;color:var(--muted)}
.adm-crumb{margin:0 0 12px;font-size:13px;color:var(--muted)}
.adm-crumb a{color:var(--accent);text-decoration:none}
.adm-crumb a:hover{text-decoration:underline}
.adm-crumb b{color:var(--ink)}
.pf-tab.adm-home{margin-bottom:6px;border:1.5px dashed var(--border)}

/* Quản lý tệp của Admin (kiểu trình quản lý tệp) */
.fx{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;align-items:start}
.fx-roots{border:1px solid var(--border);border-radius:14px;background:var(--card);padding:10px;display:flex;flex-direction:column;gap:4px;position:sticky;top:12px}
.fx-roots h4{margin:2px 6px 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fx-root{display:flex;align-items:center;gap:10px;padding:8px 9px;border:0;border-radius:10px;background:transparent;color:var(--text);text-align:left;cursor:pointer;font:inherit}
.fx-root:hover{background:var(--card-2)}.fx-root.on{background:var(--accent-soft)}.fx-root.off{opacity:.5}
.fx-ri{font-size:20px;width:26px;text-align:center}.fx-rt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}.fx-rt b{font-size:13.5px;color:var(--ink)}.fx-rt small{font-size:11.5px;color:var(--muted)}
.fx-note{margin:8px 6px 2px;font-size:11.5px;color:var(--muted)}
.fx-main{position:relative;border:1px solid var(--border);border-radius:14px;background:var(--card);min-width:0;overflow:hidden}
.fx-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--card-2)}
.fx-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:14px;min-width:0;flex:1 1 220px}
.fx-cr{border:0;background:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;padding:2px 4px;border-radius:6px}.fx-cr:hover{background:var(--accent-soft)}
.fx-sep{color:var(--muted)}
.fx-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fx-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--text);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none}
.fx-btn:hover{border-color:var(--accent)}.fx-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.fx-btn.danger{color:var(--red)}.fx-btn.danger:hover{border-color:var(--red);background:var(--red-soft)}
.fx-q,.fx-sx{padding:6px 10px;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--text);font:inherit;font-size:13.5px}.fx-q{min-width:150px}
.fx-info{padding:6px 14px;font-size:12.5px;min-height:28px}
.fx-list{padding:0 8px 10px;min-height:260px;outline:none}
.fx-row{display:grid;grid-template-columns:24px 40px minmax(0,1fr) 90px 130px auto;gap:10px;align-items:center;padding:6px 8px;border-radius:9px}
.fx-row:hover{background:var(--card-2)}.fx-row.on{background:var(--accent-soft)}
.fx-hd{grid-template-columns:24px minmax(0,1fr) 90px 130px 120px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);border-radius:0}
.fx-hd:hover{background:none}.fx-hd .fx-n{grid-column:2}
.fx-ic{width:40px;height:40px;border-radius:8px;background:var(--card-2);display:grid;place-items:center;font-size:20px;overflow:hidden}.fx-ic img{width:100%;height:100%;object-fit:cover}
.fx-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.fx-link{border:0;background:none;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;padding:0}.fx-link:hover{text-decoration:underline}
.fx-s,.fx-m{font-size:12.5px;color:var(--muted);white-space:nowrap}
.fx-a{display:flex;gap:2px;justify-content:flex-end}.fx-a .fx-btn{padding:3px 8px;border-color:transparent;background:transparent}.fx-a .fx-btn:hover{background:var(--card);border-color:var(--border)}
.fx-list.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:8px 12px 12px}
.fx-list.grid .fx-row{grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:center;text-align:center;border:1px solid var(--border);padding:8px;position:relative}
.fx-list.grid .fx-ic{width:100%;height:110px;font-size:42px;order:1}.fx-list.grid .fx-n{order:2;width:100%;text-align:center}.fx-list.grid .fx-s{order:3}.fx-list.grid .fx-m{display:none}
.fx-list.grid input[type=checkbox]{position:absolute;left:8px;top:8px;z-index:1}.fx-list.grid .fx-a{order:4;justify-content:center}
.fx-empty{padding:40px 10px;text-align:center}
.fx-drop{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);border:3px dashed var(--accent);border-radius:14px;font-weight:800;color:var(--accent);font-size:18px;pointer-events:none}
.fx-drop[hidden]{display:none}
.fx-log{width:100%;border-collapse:collapse;font-size:13px}.fx-log th,.fx-log td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;overflow-wrap:anywhere}.fx-log th{font-size:11.5px;text-transform:uppercase;color:var(--muted)}
.fx-modal{position:fixed;inset:0;z-index:100;background:rgba(10,14,25,.72);display:grid;place-items:center;padding:14px}.fx-modal[hidden]{display:none}
.fx-modal-box{background:var(--card);border-radius:14px;max-width:min(1000px,100%);width:100%;max-height:calc(100vh - 28px);display:flex;flex-direction:column;overflow:hidden}
.fx-modal-hd{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border)}.fx-sp{flex:1}
.fx-modal-body{padding:12px;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:120px}
.fx-modal-body img,.fx-modal-body video{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain}.fx-modal-body iframe{width:100%;height:calc(100vh - 160px);border:0}
.fx-pre{align-self:stretch;margin:0;padding:10px;background:var(--card-2);border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:calc(100vh - 160px);overflow:auto;font-size:13px}
.fx-nav{display:flex;gap:8px}
.fx-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:120;padding:10px 18px;border-radius:99px;background:#223;color:#fff;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:opacity .4s}.fx-toast.bad{background:#a32d2d}.fx-toast.out{opacity:0}
@media (max-width:1500px){.fx{grid-template-columns:1fr}.fx-roots{position:static;flex-direction:row;overflow-x:auto}.fx-root{flex:none}.fx-roots h4,.fx-note{display:none}}
.fx-main{container-type:inline-size;container-name:fxm}
@container fxm (max-width:640px){.fx-row{grid-template-columns:24px 40px minmax(0,1fr) auto}.fx-s,.fx-m,.fx-hd .fx-s,.fx-hd .fx-m{display:none}.fx-hd{grid-template-columns:24px minmax(0,1fr)}}
.cf-online{max-width:640px;margin:0 auto 16px}.cf-online h2{margin:0 0 6px;font-size:18px}
.cf-amts{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}.cf-amts .btn{min-width:84px}
.cf-amt-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.cf-amt-row label{font-size:13.5px;color:var(--muted)}
.cf-amt-row input{flex:1 1 140px;min-width:0;padding:8px 11px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font:inherit}
/* Handwrite: danh sách người (vai trò + giá ở dòng nhỏ dưới tên), nhãn giá trên nút «Gửi chấm», khung «Chi phí chấm bài» */
.hw-people li{align-items:flex-start}
.hw-pn{min-width:0;overflow-wrap:anywhere}
.hw-pchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.hw-role.price{background:var(--amber-soft);color:var(--amber)}
.hw-btnprice{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;background:rgba(47,95,208,.14);color:inherit;font-size:11.5px;font-weight:800}
.hw-cost{margin:10px 0;padding:10px 12px;border-radius:12px;background:var(--amber-soft);color:var(--text);font-size:13px;display:flex;flex-direction:column;gap:3px}
.hw-cost b{color:var(--amber)}
.hw-cost small{color:var(--muted);font-size:12px}
.hw-cost.bad{background:var(--red-soft,#fde4e1);color:var(--red,#b3261e);font-weight:700}
/* Handwrite: thanh tiêu đề không còn ép mất tên bài — tên trên, thông tin nhỏ dưới; chật thì các bước / nút tự xuống dòng */
.hw-banner{flex-wrap:wrap;row-gap:8px}
.hw-bn-title{flex-direction:column;align-items:flex-start;gap:0;flex:1 1 170px;min-width:120px}
.hw-bn-title h1{max-width:100%}
.hw-bn-meta{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.hw-bn-act{margin-left:auto}

/* Danh sách tutor: thẻ gọn — tên + huy hiệu + chuyên môn cùng một hàng, giới thiệu tối đa 2 dòng, loại buổi và giờ trống nhỏ gọn */
.tut-list{gap:10px}
.tut-card{padding:12px 14px;gap:12px;grid-template-columns:44px minmax(0,1fr) auto;align-items:start}
.tut-card .tut-ava{width:44px;height:44px;font-size:17px}
.tut-card .tut-name{gap:4px 8px}
.tut-card .tut-name-l b{font-size:16px}
.tut-card .tk-vbadge{padding:1px 8px;font-size:12px;font-weight:700}
.tut-card .tut-bio{margin:3px 0 0;font-size:13.5px;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.tut-card .tut-types{margin-top:8px;gap:4px 6px}
.tut-card .tut-chip{padding:1px 9px;font-size:12px;font-weight:600;background:var(--card-2);border:1px solid var(--border);color:var(--text)}
.tut-card .tut-soon{margin-top:8px;padding-top:8px;gap:5px}
.tut-card .tut-soon-l{font-size:12px;font-weight:700;color:var(--muted)}
.tut-card .tut-slotlink{padding:2px 9px;border-width:1px;font-size:12px}
.tut-card .tut-act .btn{white-space:nowrap}
@media (max-width:640px){.tut-card{padding:10px 12px}.tut-card .tut-ava{width:40px;height:40px}.tut-card .tut-act .btn{width:100%;justify-content:center}}

/* Quản trị: thanh menu trái gọn — nhóm gập được, ô tìm không dấu, mục dùng gần đây (nhớ trong trình duyệt) */
.adm-nav [hidden]{display:none !important}
.adm-nav{gap:2px;padding:8px}
.adm-nav .adm-home{padding:8px 10px;font-size:14px;margin-bottom:4px;gap:8px}
.adm-find{position:relative;margin:2px 0 6px}
.adm-find input{width:100%;height:36px;margin:0;padding:0 64px 0 30px;border:1.5px solid var(--border);border-radius:10px;background:var(--card-2);font-size:14px;outline:none;-webkit-appearance:none;appearance:none}
.adm-find input:focus{border-color:var(--accent);background:var(--card)}
.adm-find::before{content:"🔍";position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.6;pointer-events:none}
.adm-find kbd{position:absolute;right:36px;top:50%;transform:translateY(-50%);font-family:inherit;font-weight:700;font-size:11px;line-height:1;border:1px solid var(--border);border-radius:5px;padding:3px 6px;color:var(--muted);background:var(--card);pointer-events:none}
.adm-find input:focus ~ kbd,.adm-find input:not(:placeholder-shown) ~ kbd{display:none}
.adm-all{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:7px;background:none;color:var(--muted);font-size:15px;cursor:pointer;padding:0}
.adm-all:hover{background:var(--card);color:var(--accent)}
.adm-find input::-webkit-search-cancel-button{display:none}
.adm-find input::-webkit-search-cancel-button{display:none}
.adm-recent{padding:0 0 6px;border-bottom:1px solid var(--border);margin-bottom:4px}
.adm-recent .pf-nav-title{padding:4px 8px}
.adm-rc{display:flex;flex-wrap:wrap;gap:4px;padding:0 2px}
.adm-rc a{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;border:1px solid var(--border);background:var(--card-2);font-size:12.5px;font-weight:600;color:var(--text);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-rc a:hover{border-color:var(--accent);color:var(--accent)}
.adm-gh{width:100%;display:flex;align-items:center;gap:6px;padding:7px 8px;border:0;background:none;border-radius:8px;cursor:pointer;color:var(--muted);font-family:inherit;font-size:11.5px;font-weight:700;line-height:1.2;letter-spacing:.05em;text-transform:uppercase;text-align:left}
.adm-gh:hover{background:var(--card-2);color:var(--text)}
.adm-grp.has-cur .adm-gh{color:var(--accent)}
.adm-gt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-chev{display:inline-block;width:12px;text-align:center;font-size:15px;transition:transform .15s}
.adm-grp.open .adm-chev,.adm-nav.finding .adm-chev{transform:rotate(90deg)}
.adm-grp.open .adm-gh .nav-badge{display:none}
.adm-gl{display:none;flex-direction:column;gap:1px;padding:0 0 4px 6px}
.adm-grp.open .adm-gl,.adm-nav.finding .adm-gl{display:flex}
.adm-gl .pf-tab{padding:7px 10px;font-size:14px;font-weight:600;border-radius:8px;gap:9px}
.adm-gl .pf-tab.active{font-weight:700}
.adm-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-none{margin:6px 8px;font-size:13px}
@media (max-width:900px){
  .adm-find,.adm-recent{display:none}
  .adm-nav .adm-grp,.adm-nav .adm-gl{display:contents !important}
  .adm-gh{display:none}
  .adm-nav .adm-home{margin-bottom:0}
  .adm-gl .pf-tab{padding:9px 12px}
  .adm-tx{overflow:visible}
}

/* Cộng đồng: liên kết trong chữ bài + thẻ xem trước liên kết kiểu Facebook (nw-linkpreview.js) */
.cd-url{color:var(--accent);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.cd-lp{margin:2px 0 10px}
.cd-lp[hidden]{display:none}
.cd-lp-comp{margin:10px 0 0}
.cd-lpc{display:block;border:1.5px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card-2);color:var(--text);text-decoration:none}
a.cd-lpc:hover{border-color:var(--accent)}
.cd-lpc-img{display:block;background:var(--card);aspect-ratio:1.91/1;overflow:hidden;border-bottom:1.5px solid var(--border)}
.cd-lpc-img img{display:block;width:100%;height:100%;object-fit:cover}
.cd-lpc-body{display:flex;flex-direction:column;gap:3px;padding:10px 14px 12px;min-width:0}
.cd-lpc-host{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-lpc-t{font-size:16px;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.cd-lpc-d{font-size:14px;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.cd-lpc.noimg{border-left:5px solid var(--accent)}
.cd-lpc.sm{display:flex;align-items:stretch}
.cd-lpc.sm .cd-lpc-img{flex:0 0 120px;aspect-ratio:1/1;border-bottom:0;border-right:1.5px solid var(--border)}
.cd-lpc.sm .cd-lpc-body{justify-content:center}
.cd-lpc.skel{padding:14px;font-size:14px;color:var(--muted);animation:cdLpPulse 1.2s ease-in-out infinite}
@keyframes cdLpPulse{50%{opacity:.5}}
@media (max-width:620px){
  .cd-lpc-t{font-size:15px}
  .cd-lpc.sm .cd-lpc-img{flex-basis:88px}
}

/* «Khiên» trình độ: dưới thông tin đăng nhập ở thanh bên (và trong bảng «Thêm» trên điện thoại). Một dòng, không rớt chữ: chữ cắt «…» khi hẹp */
.lv-shield{--lv:#8a93a6;display:flex;align-items:center;gap:10px;min-width:0;padding:8px 12px 8px 10px;border-radius:14px;text-decoration:none;white-space:nowrap;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:var(--cover-ink);transition:background .15s,border-color .15s}
.lv-shield.a{--lv:#3fae6a}.lv-shield.b{--lv:#3b7de0}.lv-shield.c{--lv:#8a5cd6}
.lv-shield:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.22)}
.lv-shield:focus-visible{outline:2px solid #9fc0ff;outline-offset:2px}
.lv-sh{position:relative;flex:none;width:32px;height:38px;display:block}
.lv-sh svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.28))}
.lv-sh-b{fill:var(--lv);stroke:rgba(255,255,255,.92);stroke-width:1.6;stroke-linejoin:round}
.lv-sh-h{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.6;stroke-linecap:round}
.lv-code{position:absolute;left:0;right:0;top:10px;text-align:center;font-style:normal;font-weight:800;font-size:13.5px;line-height:1;color:#fff;letter-spacing:-.02em;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.lv-shield.none .lv-sh-b{stroke-dasharray:3 2.4}
.lv-tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px;line-height:1.2}
.lv-tx b{display:block;font-size:14px;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-tx small{display:block;margin:0;font-size:12px;font-weight:600;color:#9fc0ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-go{flex:none;font-size:20px;line-height:1;color:rgba(255,255,255,.5)}
.side-foot a.lv-shield{color:var(--cover-ink);font-size:inherit}
.lv-shield.in-more{margin:0 0 6px;background:var(--card);border:1.5px solid var(--border);color:var(--text)}
.lv-shield.in-more:hover{border-color:var(--accent);background:var(--card)}
.lv-shield.in-more .lv-tx b{color:var(--ink);font-size:15px}
.lv-shield.in-more .lv-tx small{color:var(--muted)}
.lv-shield.in-more .lv-go{color:var(--muted);font-size:26px}

/* Tổng quan: đầu trang gọn trong 2 hàng — hàng 1: ngày + lời chào + câu phụ (1 dòng); hàng 2: các chip số liệu (gói mới · chuỗi ngày · hoạt động · từ cần ôn), mỗi chip 1 dòng, điện thoại cuộn ngang */
.ov .ov-top{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;flex-wrap:nowrap;margin-bottom:6px}
.ov .ov-top .ov-greet{flex:none;width:100%;padding-right:150px}
.ov .ov-top .ov-greet .ov-h1{font-size:clamp(21px,2.3vw,27px);line-height:1.2;margin:1px 0 0}
.ov .ov-top .ov-greet #ovDate{font-size:12.5px;line-height:1.3}
.ov .ov-top .ov-sub{margin:3px 0 0;font-size:14px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov .ov-top .ov-badges{display:flex;flex-wrap:wrap;gap:8px;width:100%;flex:none}
.ov .ov-top .ov-badge{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;min-width:0;padding:6px 14px 6px 10px;border-radius:999px;text-align:left;white-space:nowrap;box-shadow:none}
.ov .ov-top .ov-badge .ov-bi{font-size:18px;line-height:1}
.ov .ov-top .ov-badge > div{display:flex;align-items:baseline;gap:6px;min-width:0}
.ov .ov-top .ov-badge .ov-big{display:inline;font-size:17px;line-height:1}
.ov .ov-top .ov-badge .xs{display:inline;font-size:12.5px;line-height:1.2;white-space:nowrap;overflow-wrap:normal}
.ov .ov-top .ov-badge.ov-pack.is-new{box-shadow:0 4px 12px rgba(46,139,61,.3)}
.ov .ov-top .ov-badge.ov-pack.is-new::after{border-radius:999px;inset:-3px}
@media (max-width:760px){
  .ov .ov-top .ov-greet{padding-right:0}
  .ov .ov-top .inv-mini{top:-9px;gap:5px}
  .ov .ov-top .inv-ib{width:26px;height:26px;border-radius:8px}
  .ov .ov-top .inv-ib svg{width:14px;height:14px}
  .ov .ov-top .ov-badges{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -2px;padding:3px 2px 6px}
  .ov .ov-top .ov-badges::-webkit-scrollbar{display:none}
  .ov .ov-top .ov-sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
}

/* Thông tin tài khoản + khiên trình độ: MỘT nhóm (thanh bên và bảng «Thêm») */
.side-acct{border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);overflow:hidden}
.side-acct .side-user{border:0;border-radius:0;background:none}
.side-acct .lv-shield{border:0;border-top:1px solid rgba(255,255,255,.12);border-radius:0;background:rgba(255,255,255,.03)}
.side-acct .lv-shield:hover{background:rgba(255,255,255,.1)}
.more-acct{margin:0 0 6px;border:1.5px solid var(--border);border-radius:14px;background:var(--card);overflow:hidden}
.more-acct a.more-user{margin:0;border:0;border-radius:0;background:none}
.more-acct .lv-shield.in-more{margin:0;border:0;border-top:1.5px dashed var(--border);border-radius:0;background:var(--card-2)}
.more-acct .lv-shield.in-more:hover{background:var(--accent-soft)}

/* Cộng đồng (đã đăng nhập): khối «Tra từ điển cộng đồng» — cùng nội dung với trang công khai */
.cd-dict{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px 24px;align-items:center;margin:0 0 18px;padding:18px 20px}
.cd-dict-txt{display:flex;gap:12px;align-items:flex-start;min-width:0}
.cd-dict-ic{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:var(--accent);color:#fff;box-shadow:0 4px 10px rgba(31,95,214,.28);transform:rotate(-6deg)}
.cd-dict-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cd-dict h2{margin:0 0 2px;font-size:19px;line-height:1.25;color:var(--ink)}
.cd-dict p{margin:0;font-size:14px;line-height:1.45;color:var(--muted)}
.cd-dict-form{display:flex;gap:8px;align-items:center;min-width:0}
.cd-dict-form input{flex:1;min-width:0;height:46px;padding:0 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font:inherit;font-size:16px;outline:none;-webkit-appearance:none;appearance:none}
.cd-dict-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cd-dict-form .cd-btn{height:46px;white-space:nowrap}
.cd-dict-try{grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13.5px}
@media (max-width:860px){.cd-dict{grid-template-columns:minmax(0,1fr);padding:14px 14px}}
@media (max-width:520px){.cd-dict-form{flex-wrap:wrap}.cd-dict-form input{flex-basis:100%}.cd-dict-form .cd-btn{width:100%}}

/* Tổng quan: đầu trang 2 hàng — hàng 1: lời chào (trái) + THANH TÌM KIẾM (phải); hàng 2: các chip số liệu và chip Trình độ cùng một hàng. Điện thoại: chào → tìm kiếm → chip */
.ov .ov-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,420px);grid-template-areas:"greet search" "badges badges";align-items:end;gap:10px 28px}
.ov .ov-top .ov-greet{grid-area:greet;width:auto;padding-right:0}
.ov .ov-top .ov-search{grid-area:search;margin:0;align-self:end}
.ov .ov-top .ov-search input[type=search]{height:46px}
.ov .ov-top .ov-badges{grid-area:badges}
.ov .ov-top .ov-badge.ov-lv{--lv:#8a93a6;gap:8px}
.ov .ov-top .ov-badge.ov-lv.a{--lv:#3fae6a}.ov .ov-top .ov-badge.ov-lv.b{--lv:#3b7de0}.ov .ov-top .ov-badge.ov-lv.c{--lv:#8a5cd6}
.ov .ov-top .ov-badge.ov-lv .lv-sh{width:22px;height:26px}
.ov .ov-top .ov-badge.ov-lv .lv-sh svg{filter:none}
.ov .ov-top .ov-badge.ov-lv .lv-code{top:6px;font-size:9px;text-shadow:none}
.ov .ov-top .ov-badge.ov-lv.none .lv-sh-b{stroke-dasharray:3 2.4}
@media (max-width:900px){
  .ov .ov-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"greet" "search" "badges"}
  .ov .ov-top .ov-search{align-self:stretch}
}

/* Chữ phụ dưới tên app và dưới nút «Buy me a coffee» luôn nằm trên MỘT hàng (cắt bằng … nếu máy quá hẹp) */
.brand > div{min-width:0}
.brand small,.sidebar .cf-card .cf-txt small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .cf-card .cf-txt{min-width:0}

/* Huy hiệu số việc trên tab «Bài của tôi» / «Được chia sẻ» của Writing */
.wt-seg .nav-badge{margin-left:6px;vertical-align:middle}


/* ===== Bảng điểm Writing gộp: vòng điểm tổng + 4 tiêu chí kèm nhận xét tự động ===== */
.wt-sc{display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;padding:18px 22px;margin-bottom:18px}
.wt-sc-side{display:flex;flex-direction:column;align-items:center;gap:12px;padding-right:22px;border-right:1px dashed var(--border);text-align:center}
.wt-ring{--p:0;--c:var(--green);width:136px;height:136px;border-radius:50%;display:grid;place-items:center;flex:none;background:conic-gradient(var(--c) calc(var(--p) * 1%),var(--card-2) 0)}
.wt-ring.mid{--c:var(--amber)}
.wt-ring.low{--c:var(--red)}
.wt-ring-in{width:106px;height:106px;border-radius:50%;background:var(--card);display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--border)}
.wt-ring .wt-big{font-size:36px;text-align:center}
.wt-sc-info{display:flex;flex-direction:column;align-items:center;gap:5px}
.wt-sc-stats{font-size:13px;color:var(--text)}
.wt-sc-err{font-size:12px;font-weight:700;padding:2px 10px;border-radius:99px;background:var(--card-2);color:var(--muted)}
.wt-sc-err.ok{background:#e3f4e6;color:#1b6b2b}
.wt-sc-err.mid{background:#fff1d6;color:#8a5a00}
.wt-sc-err.low{background:#fde4e1;color:#b3261e}
.wt-sc-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:8px;border-bottom:1px dashed var(--border)}
.wt-sc-head b{font-size:16px;color:var(--ink)}
.wt-sc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 26px}
.wt-sc-c{min-width:0}
.wt-sc-top{display:flex;align-items:center;gap:8px;font-size:14.5px}
.wt-sc-ico{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--card-2);font-size:14px}
.wt-sc-top b{flex:1;min-width:0;color:var(--ink);font-weight:700}
.wt-sc-v{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.wt-sc-v small{font-size:12px;font-weight:600;color:var(--muted)}
.wt-sc-c .wt-marker{margin:7px 0 8px}
.wt-sc-c.good .wt-marker i{background:var(--green)}
.wt-sc-c.mid .wt-marker i{background:var(--amber)}
.wt-sc-c.low .wt-marker i{background:var(--red)}
.wt-sc-tips{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.wt-sc-tips li{position:relative;padding-left:18px;font-size:13px;line-height:1.42;color:var(--text)}
.wt-sc-tips li::before{content:"•";position:absolute;left:5px;top:0;font-weight:900;color:var(--muted)}
.wt-sc-c.good .wt-sc-tips li::before{color:var(--green)}
.wt-sc-c.low .wt-sc-tips li::before{color:var(--red)}
.wt-sc-c.mid .wt-sc-tips li::before{color:var(--amber)}
:root[data-theme="dark"] .wt-sc-err.ok{background:#1c3a28;color:#7be0a0}
:root[data-theme="dark"] .wt-sc-err.mid{background:#3b2d1b;color:#ffb15c}
:root[data-theme="dark"] .wt-sc-err.low{background:#432322;color:#ff8a8a}
@media (max-width:900px){
  .wt-sc{grid-template-columns:minmax(0,1fr);gap:16px}
  .wt-sc-side{flex-direction:row;justify-content:center;gap:18px;padding:0 0 14px;border-right:0;border-bottom:1px dashed var(--border);text-align:left}
  .wt-sc-info{align-items:flex-start}
}
@media (max-width:620px){
  .wt-sc{padding:14px}
  .wt-sc-grid{grid-template-columns:minmax(0,1fr)}
  .wt-ring{width:112px;height:112px}
  .wt-ring-in{width:86px;height:86px}
  .wt-ring .wt-big{font-size:30px}
}
/* Thanh chia sẻ gọn: chữ bên trái, nút bên phải (xuống hàng khi hẹp) */
.wt-sharebar>span:first-child{flex:1 1 260px;min-width:0}
.wt-sharebar .spacer{display:none}
.wt-sharebar .inline-form{flex:none;margin:0}

/* ===== Trung tâm thông báo (nút chuông ở cuối hàng chip Tổng quan) ===== */
.ov-nt{position:relative;margin-left:auto;flex:none}
.ov-nt-btn{cursor:pointer;font:inherit;text-align:left;position:relative}
.ov-nt-btn .ov-big{min-width:1ch}
.ov-nt-btn.has{border-color:#e7a29c;background:linear-gradient(180deg,#fff6f4,var(--card))}
.ov-nt-btn.has .ov-big{color:#c0392b}
.ov-nt-btn.has .ov-bi{animation:ovNtRing 2.6s ease-in-out infinite;transform-origin:50% 8%}
.ov-nt-chev{font-size:12px;color:var(--muted);transition:transform .15s}
.ov-nt.open .ov-nt-chev{transform:rotate(180deg)}
.ov-nt.open .ov-nt-btn{border-color:var(--ink)}
@keyframes ovNtRing{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(14deg)}92%{transform:rotate(-12deg)}95%{transform:rotate(8deg)}98%{transform:rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.ov-nt-btn.has .ov-bi{animation:none}}
.ov-nt-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:70;width:min(410px,calc(100vw - 24px));max-height:min(72vh,580px);overflow:auto;padding:6px 0 8px;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 44px rgba(20,30,60,.24)}
.ov-nt-panel[hidden]{display:none}
.ov-nt-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px 10px;border-bottom:1px solid var(--border)}
.ov-nt-h b{font-size:15px;color:var(--ink)}
.ov-nt-set{font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap}
.ov-nt-set:hover{text-decoration:underline}
.ov-nt-sec{padding:10px 8px 2px}
.ov-nt-sec h3{display:flex;align-items:center;gap:8px;margin:0 8px 6px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ov-nt-n{font-size:11px;font-weight:800;min-width:18px;padding:1px 6px;border-radius:99px;background:#c0392b;color:#fff;text-align:center;letter-spacing:0}
.ov-nt-list{list-style:none;margin:0;padding:0}
.ov-nt-list a{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:10px;color:var(--text);text-decoration:none}
.ov-nt-list a:hover,.ov-nt-list a:focus-visible{background:var(--accent-soft);outline:none}
.ov-nt-i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--card-2);font-size:15px}
.ov-nt-t{flex:1;min-width:0;font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}
.ov-nt-t b{color:var(--ink);font-weight:800}
.ov-nt-t small{display:block;margin-top:1px;font-size:11.5px;color:var(--muted)}
.ov-nt-go{flex:none;color:var(--muted);font-size:18px}
.ov-nt-empty{margin:2px 14px 10px;font-size:13px;color:var(--muted)}
.ov-nt-empty[hidden]{display:none}
.ov-nt-list.rec .ov-nt-t{font-weight:500}
:root[data-theme="dark"] .ov-nt-btn.has{background:linear-gradient(180deg,#3a2423,var(--card));border-color:#8a4a46}
:root[data-theme="dark"] .ov-nt-btn.has .ov-big{color:#ff9a90}
@media (max-width:620px){
  .ov-nt{position:static;flex:1 1 100%;margin-left:0}
  .ov-nt-btn{width:100%}
  .ov-top .ov-badges{flex-wrap:wrap}
  .ov-nt-panel{position:fixed;left:8px;right:8px;top:auto;bottom:76px;width:auto;max-height:68vh}
}

/* Chấm tự động: mức CEFR, điểm mạnh, việc nên làm tiếp, cảnh báo */
.wt-sc-cefr{display:inline-flex;align-items:baseline;gap:6px;padding:3px 12px;border-radius:99px;background:var(--card-2);color:var(--muted);font-size:12px;font-weight:600}
.wt-sc-cefr b{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:.02em}
.wt-sc-extra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px;margin-top:16px;padding-top:12px;border-top:1px dashed var(--border)}
.wt-sc-extra b{display:block;margin-bottom:6px;font-size:13.5px;color:var(--ink)}
.wt-sc-extra ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.wt-sc-extra li{position:relative;padding-left:18px;font-size:13px;line-height:1.42;color:var(--text)}
.wt-sc-extra li::before{position:absolute;left:3px;top:0;font-weight:900}
.wt-sc-ok li::before{content:"✓";color:var(--green)}
.wt-sc-next li::before{content:"→";color:var(--amber)}
.wt-sc-flags{display:grid;gap:6px;margin-bottom:12px}
.wt-sc-flag{display:flex;gap:8px;align-items:flex-start;padding:8px 12px;border-radius:10px;background:#fff1d6;color:#8a5a00;font-size:13px;line-height:1.4}
:root[data-theme="dark"] .wt-sc-flag{background:#3b2d1b;color:#ffb15c}
@media (max-width:900px){.wt-sc-extra{grid-template-columns:minmax(0,1fr)}}
.wt-fixed{padding:12px 18px;margin-bottom:18px}
.wt-fixed summary{cursor:pointer;font-weight:700;color:var(--ink);list-style:none}
.wt-fixed summary::-webkit-details-marker{display:none}
.wt-fixed[open] summary{margin-bottom:6px}
.wt-fixed-body{margin-top:10px;font-size:15px;line-height:1.65}
.wt-fixed-body mark.wt-fx{background:#e3f4e6;color:#1b6b2b;border-radius:4px;padding:0 3px;font-weight:600}
:root[data-theme="dark"] .wt-fixed-body mark.wt-fx{background:#1c3a28;color:#7be0a0}

/* ===== Tra từ / ghi chú lúc viết bài (Content/js/nw-lookup.js) ===== */
.wt-ocr .wl-go{margin-left:auto;height:42px;min-height:42px;padding-top:0;padding-bottom:0;background:var(--accent-soft);border-color:var(--accent);color:var(--ink);font-weight:600}
.wt-ocr .wl-go.on{background:var(--accent);color:#fff}
.wl-panel{border:1px solid var(--border);background:var(--card);border-radius:12px;padding:10px 12px;margin:0 0 10px;box-shadow:var(--shadow)}
.wl-panel[hidden]{display:none}
.wl-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.wl-tabs{display:inline-flex;gap:4px;background:var(--card-2);padding:3px;border-radius:10px}
.wl-tab{border:0;background:transparent;padding:6px 14px;border-radius:8px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer}
.wl-tab.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.wl-cd{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text);cursor:pointer;margin-left:auto}
.wl-cd[hidden]{display:none}
.wl-cd.off{opacity:.45;cursor:default}
.wl-cd input{width:auto;min-height:0;margin:0}
.wl-x-btn{border:0;background:var(--card-2);color:var(--text);width:30px;height:30px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer}
.wl-cd[hidden]+.wl-x-btn{margin-left:auto}
.wl-q{width:100%;box-sizing:border-box}
.wl-status{min-height:18px;margin:6px 2px 0}
.wl-list{max-height:min(300px,42vh);overflow:auto;display:flex;flex-direction:column;gap:6px;margin-top:4px}
.wl-row{display:block;width:100%;text-align:left;font:inherit;background:var(--card-2);border:1px solid var(--border);border-radius:10px;padding:8px 10px;cursor:pointer;color:var(--text)}
.wl-row:hover,.wl-row:focus-visible{border-color:var(--accent);outline:none}
.wl-r1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wl-rw{color:var(--ink);font-size:15px}
.wl-r2{font-size:14px;margin-top:2px}
.wl-r3{font-size:12.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-r4{margin-top:3px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wl-row mark{background:var(--hl);color:inherit;border-radius:3px;padding:0 1px}
.wl-panel .tag.sm,.wl-modal .tag.sm{font-size:11px;padding:1px 7px}
.wl-empty{padding:14px 6px;text-align:center;color:var(--muted)}
.wl-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:16px}
.wl-modal[hidden]{display:none}
.wl-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5)}
.wl-box{position:relative;width:min(560px,100%);max-height:min(86vh,720px);display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.wl-box-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;border:0;background:var(--card-2);color:var(--text);font-size:22px;line-height:1;cursor:pointer;z-index:1}
.wl-box-x:hover{background:var(--accent-soft)}
.wl-body{overflow:auto;padding:18px;-webkit-overflow-scrolling:touch}
html.wl-lock{overflow:hidden}
.wl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-right:40px}
.wl-word{font-size:22px;color:var(--ink);margin:0;word-break:break-word}
.wl-say{border:0;background:var(--accent-soft);border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:15px}
.wl-ipa{color:var(--muted);margin-top:2px}
.wl-mean{font-size:17px;margin:6px 0;color:var(--text)}
.wl-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.wl-msg{color:var(--green)}
.wl-msg.bad{color:var(--red)}
.wl-pic{margin:6px 0}
.wl-pic[hidden]{display:none}
.wl-pic img{max-width:100%;max-height:200px;border-radius:10px;display:block}
.wl-sec{margin-top:14px}
.wl-sec-t{font-weight:700;color:var(--ink);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.wl-chips{display:flex;flex-wrap:wrap;gap:6px}
.wl-chip{border:1px solid var(--border);background:var(--card-2);border-radius:999px;padding:4px 11px;font:inherit;font-size:13.5px;cursor:pointer;color:var(--text)}
.wl-chip:hover{border-color:var(--accent);background:var(--accent-soft)}
.wl-chip small{color:var(--muted)}
.wl-ex{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.wl-ex li{display:flex;gap:4px;align-items:flex-start;background:var(--card-2);border-radius:8px;padding:6px 8px}
.wl-ex-t{flex:1;min-width:0}
.wl-mini{border:0;background:transparent;cursor:pointer;font-size:15px;padding:2px 5px;border-radius:6px}
.wl-mini:hover{background:var(--accent-soft)}
.wl-text{white-space:pre-wrap}
.wl-note-body{margin-top:10px;max-height:none}
@media (max-width:640px){
  .wt-ocr .wl-go{margin-left:0}
  .wl-modal{padding:0;align-items:flex-end}
  .wl-box{width:100%;max-height:92vh;border-radius:16px 16px 0 0}
  .wl-cd{margin-left:0}
}

/* ===== Nhờ người chấm bài Writing (Views/Note_Writing/_NhoCham, _PhieuCham, _ChamList; Content/js/nw-wtcham.js) ===== */
.wc-card{margin:0 0 14px;padding:14px 16px}
.wc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.wc-head b{font-size:16px;color:var(--ink)}
.wc-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.wc-row{border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:var(--card-2)}
.wc-row-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wc-late{color:var(--red);font-weight:600}
.wc-reason{margin:4px 0 0}
.wc-rev{margin-top:8px}
.wc-rev summary{cursor:pointer;font-weight:600;color:var(--accent)}
.wc-form{display:flex;flex-direction:column;gap:8px}
.wc-lab{font-size:13px;font-weight:600;color:var(--ink);margin-top:2px}
.wc-add{display:flex;gap:8px;align-items:center}
.wc-add .wc-in{flex:1;min-width:0}
.wc-ban{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wc-picked{display:flex;flex-wrap:wrap;gap:8px}
.wc-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 12px;border-radius:999px;border:1px solid var(--border);background:var(--accent-soft)}
.wc-chip.paid{border-color:var(--amber);background:var(--amber-soft)}
.wc-chip small{color:var(--muted)}
.wc-chip button{border:0;background:transparent;cursor:pointer;font-size:16px;line-height:1;color:var(--muted);width:22px;height:22px;border-radius:50%}
.wc-chip button:hover{background:rgba(0,0,0,.08);color:var(--text)}
.wc-msg{min-height:16px;margin:0;color:var(--muted)}
.wc-msg.bad{color:var(--red)}
.wc-send{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wc-sum{font-weight:600;color:var(--ink)}
.wc-scores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.wc-sel label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:3px}
.wc-sel select{width:100%}
.wc-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wc-form textarea{width:100%;box-sizing:border-box;resize:vertical}
.wc-auto{margin:0 0 6px;color:var(--muted)}
.wc-decline{margin-top:10px}
.wc-decline summary{cursor:pointer}
.wc-decline .wc-form{flex-direction:row;flex-wrap:wrap;align-items:center;margin-top:6px}
.wc-decline input[type=text]{flex:1;min-width:180px}
.wc-phieu{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.wc-phieu-top{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.wc-total-ring{width:74px;height:74px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:5px solid var(--green);color:var(--ink);line-height:1}
.wc-total-ring b{font-size:22px}
.wc-total-ring small{font-size:11px;color:var(--muted)}
.wc-total-ring.mid{border-color:var(--amber)}
.wc-total-ring.low{border-color:var(--red)}
.wc-phieu-sc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px;flex:1;min-width:220px}
.wc-sc{display:flex;align-items:center;gap:6px;font-size:14px}
.wc-sc b{margin-left:auto}
.wc-sc small{color:var(--muted);font-weight:400}
.wc-txt{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.wc-txt p{margin:4px 0 0;white-space:pre-wrap}
.wc-txt.ok{border-left:4px solid var(--green)}
.wc-txt.next{border-left:4px solid var(--amber)}
.wc-intro{margin:0 0 10px}
@media (max-width:640px){
  .wc-scores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wc-two{grid-template-columns:1fr}
  .wc-add{flex-wrap:wrap}
}
.wc-grp.now>summary{display:none}
.wc-grp.hist{margin:0 0 12px}
.wc-grp.hist>summary{cursor:pointer;color:var(--muted);font-size:13px;margin-bottom:6px}
.wc-grp.hist .wc-row{opacity:.85}

/* ===== «Nhận phản hồi»: 3 cách tách bạch (Views/Note_Writing/_PhanHoi, nw-wtcham.js) ===== */
.wf{margin:0 0 14px;padding:14px 16px}
.wf-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.wf-head b{font-size:16px;color:var(--ink)}
.wf-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wf-opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;font:inherit;color:var(--text);background:var(--card-2);border:1.5px solid var(--border);border-radius:12px;padding:12px 12px 12px 14px;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.wf-opt:hover{border-color:var(--accent)}
.wf-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wf-opt.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 4px 12px rgba(31,95,214,.12)}
.wf-n{position:absolute;top:10px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--card);border:1px solid var(--border);font-size:12px;font-weight:700;color:var(--muted);display:flex;align-items:center;justify-content:center}
.wf-opt.on .wf-n{background:var(--accent);border-color:var(--accent);color:#fff}
.wf-ot{display:flex;flex-direction:column;gap:3px;padding-right:26px}
.wf-ot b{font-size:15px;color:var(--ink)}
.wf-ot small{font-size:12.5px;color:var(--muted);line-height:1.35}
.wf-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}
.wf-tags .tag{font-size:11.5px;padding:1px 8px}
.wf-panel{margin-top:12px;border:1px solid var(--border);border-radius:12px;padding:14px 16px;background:var(--card)}
.wf-panel[hidden]{display:none}
.wf-intro{margin:0 0 10px;color:var(--text)}
.wf-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.wf-ai-res{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--card-2)}
.wf-ai-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wf-busy{color:var(--accent);font-weight:600}
.wc-in-panel .wc-list{margin-top:4px}
@media (max-width:820px){.wf-opts{grid-template-columns:1fr}.wf-opt{padding-right:12px}}

/* ===== Trang bài Writing (Note_Writing/Xem) thiết kế lại: tóm tắt gọn · bài viết · bảng phản hồi 3 tab · mục gập ===== */
.wv-sum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:14px 20px;margin-bottom:14px}
.wv-sum .wt-ring{width:94px;height:94px}
.wv-sum .wt-ring-in{width:74px;height:74px}
.wv-sum .wt-ring .wt-big{font-size:27px}
.wv-sum-main{min-width:0;display:flex;flex-direction:column;gap:8px}
.wv-sum-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wv-name{flex:1 1 200px;min-width:0;margin:0;font-size:20px;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.wv-acts{display:flex;gap:6px;flex:none}
.wv-acts .inline-form{margin:0}
.wv-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.wv-chips .tag{font-size:12px}
.wv-cefr{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);padding:1px 10px 1px 4px;border-radius:99px;background:var(--card-2);border:1px solid var(--border)}
.wv-cefr b{background:var(--accent);color:#fff;border-radius:99px;padding:0 8px;font-size:12px}
.wv-pills{display:flex;flex-wrap:wrap;gap:8px}
.wv-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;background:var(--card-2);border:1px solid var(--border);font-size:13px;color:var(--text)}
.wv-pill i{font-style:normal}
.wv-pill em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}
.wv-pill em small{font-weight:600;color:var(--muted);font-size:11px}
.wv-pill.good{border-color:var(--green)}.wv-pill.good em{color:var(--green)}
.wv-pill.mid{border-color:var(--amber)}.wv-pill.mid em{color:var(--amber)}
.wv-pill.low{border-color:var(--red)}.wv-pill.low em{color:var(--red)}
.wv-flags{display:grid;gap:8px;margin:0 0 14px}
.wv-flags .wt-alert{margin:0}

.wv-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.wv-doc{padding:20px 26px 16px;min-width:0}
.wv-doc .wt-legend{margin-top:16px}

.wv-hub{position:sticky;top:14px;max-height:calc(100vh - 28px);display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;min-width:0}
.wv-tabs{display:flex;flex:none;background:var(--card-2);border-bottom:1px solid var(--border)}
.wv-tab{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 6px 9px;border:0;border-bottom:3px solid transparent;background:transparent;font:inherit;font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap}
.wv-tab:hover{color:var(--ink)}
.wv-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.wv-tab.on{background:var(--card);color:var(--ink);border-bottom-color:var(--accent)}
.wv-n{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:800;line-height:1}
.wv-dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex:none}
.wv-pane{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 14px 14px}
.wv-pane[hidden]{display:none}
.wv-pane .wt-margin{position:static;max-height:none;overflow:visible;padding:0}
.wv-pane .wt-filters{margin-top:0}
.wv-auto-note{margin:0 0 12px}
.wv-crit{display:grid;gap:14px}
.wv-extra2{display:grid;gap:12px;margin-top:14px}
.wv-fixed{margin-top:14px;border:1px solid var(--border);border-radius:10px;padding:8px 12px;background:var(--card-2)}
.wv-fixed>summary{cursor:pointer;font-weight:700;color:var(--ink)}
.wv-fixed .wt-fixed-body{margin-top:8px}

/* Mục gập: Đính kèm / Ghi âm */
.wv-extra{margin-top:14px;padding:0}
.wv-extra>summary{display:flex;align-items:center;gap:8px;padding:12px 18px;cursor:pointer;font-weight:700;color:var(--ink);list-style:none}
.wv-extra>summary::-webkit-details-marker{display:none}
.wv-extra>summary::after{content:"▾";margin-left:auto;color:var(--muted);transition:transform .15s}
.wv-extra:not([open])>summary::after{transform:rotate(-90deg)}
.wv-extra-body{padding:0 18px 16px;border-top:1px dashed var(--border);padding-top:12px}

/* Khối «Nhận phản hồi» nằm trong tab: các cách xếp dọc kiểu xổ xuống */
.wf-in-hub{margin:0;padding:0}
.wf-lead{margin:0 0 10px;font-size:13px;color:var(--muted)}
.wf-in-hub .wf-item{margin-bottom:8px}
.wf-in-hub .wf-opt{width:100%;padding:11px 44px 11px 14px}
.wf-in-hub .wf-ot small{font-size:12px}
.wf-in-hub .wf-n{top:12px;right:12px}
.wf-in-hub .wf-panel{margin-top:8px;padding:12px 14px;border-radius:10px;background:var(--card-2)}
.wf-in-hub .wc-in-panel .wc-row{background:var(--card)}
.wv-pane .wc-card{border:0;box-shadow:none;padding:0;margin:0;background:transparent}
.wv-pane .wc-scores{grid-template-columns:repeat(2,minmax(0,1fr))}
.wv-pane .wc-two{grid-template-columns:1fr}
.wv-pane .wc-phieu-sc{grid-template-columns:1fr}

@media (max-width:1180px){
  .wv-grid{grid-template-columns:minmax(0,1fr)}
  .wv-hub{position:static;max-height:none;overflow:visible}
  .wv-pane{overflow:visible}
}
@media (max-width:900px){
  .wv-sum{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:12px 14px}
  .wv-sum .wt-ring{width:72px;height:72px}
  .wv-sum .wt-ring-in{width:56px;height:56px}
  .wv-sum .wt-ring .wt-big{font-size:21px}
  .wv-name{font-size:17px}
  .wv-grid{grid-template-columns:minmax(0,1fr)}
  .wv-doc{padding:16px 14px 12px}
  .wv-hub{position:static;max-height:none;overflow:visible}
  .wv-pane{overflow:visible}
  .wv-tab{padding:12px 4px 10px}
  .wv-extra>summary{padding:12px 14px}.wv-extra-body{padding:12px 14px 14px}
}
@media (max-width:520px){.wv-pills{gap:6px}.wv-pill{padding:3px 9px;font-size:12.5px}.wv-acts .btn{min-height:36px}}
:root[data-theme="dark"] .wv-cefr b{color:#10131a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wv-cefr b{color:#10131a}}
.wv-pane .wt-sc-extra{grid-template-columns:minmax(0,1fr);margin-top:14px}
@media (max-width:640px){
  .wv-sum{grid-template-columns:72px minmax(0,1fr);row-gap:10px;column-gap:12px;align-items:start}
  .wv-sum-main{display:contents}
  .wv-sum-top{grid-column:2;align-self:center}
  .wv-chips,.wv-pills{grid-column:1/-1}
  .wv-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .wv-pill{justify-content:flex-start}
  .wv-pill em{margin-left:auto}
}