/* lop.css — 🎮 Lớp học Pāḷi (lop.html). Dùng chung biến màu / nút của styles.css; ưu tiên điện thoại. */
.lop .topbar{padding:14px 16px 6px}
/* Ảnh đầu trang Đức Phật (duc-phat.css) — canh theo bề rộng nội dung trang lớp học */
.lop .buddhaWrap{max-width:1000px;padding:12px 14px 0}
.lop .buddhaTop .btTitle{font-size:clamp(17px,3.2vw,38px);white-space:nowrap}.lop .topbar{max-width:1000px;margin:0 auto}
/* Đang làm bài trên điện thoại: ẩn ảnh đầu trang để câu hỏi hiện trọn màn hình */
@media(max-width:760px){body.lop-playing .buddhaWrap,body.lop-playing .topbar{display:none}}
.lop .brand{text-decoration:none;color:inherit}
/* Nút về trang chủ Pāḷi Phật học + dòng phụ */
.lop-topl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-width:0}
.lop-topl .lop-sub{margin:0}
.lop-home{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--panel));color:var(--accent);font-weight:800;text-decoration:none;white-space:nowrap}
.lop-home:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
body.dark .lop-home:hover{color:#1f1b18}
.lop-sub{color:var(--muted);font-weight:700}
.lop-main{max-width:1000px;margin:0 auto;padding:6px 14px 50px}
.lop-card{padding:18px 20px;margin:12px 0}
.lop-card h2{margin:4px 0 10px;color:var(--accent);font-family:"Noto Serif",Georgia,serif;font-size:calc(24px*var(--fs-big))}
.lop-card h3{margin:0 0 10px;color:var(--accent);font-size:calc(18px*var(--fs))}
.lop-card h3 small{color:var(--muted);font-weight:600;font-size:calc(13px*var(--fs))}
.lop-login,.lop-join{max-width:520px;margin:20px auto;display:flex;flex-direction:column;gap:10px}
.lop-login .google-btn,.lop-login .secondary,.lop-login .auth-input{width:100%}
.lop-label{display:grid;gap:6px;color:var(--muted);font-size:calc(13px*var(--fs));font-weight:700}
.lop-label select{padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--text);font:inherit}
.lop-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:10px 0}
.lop-big{padding:14px 20px!important;border-radius:14px!important;font-size:calc(17px*var(--fs));font-weight:800;cursor:pointer}
.lop-small{padding:6px 11px;border-radius:9px;cursor:pointer;font-size:calc(13px*var(--fs))}
.lop .primary,.lop .secondary{cursor:pointer;border-radius:12px;padding:10px 16px}
.lop-me{text-align:center}
.lop-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0}
.lop-nav .tab{padding:9px 14px}
.lop-who{color:var(--muted);font-size:calc(13px*var(--fs))}
.lop-roomrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.lop-roomrow small{display:block;color:var(--muted);font-size:calc(12px*var(--fs))}
.lop-acts{display:flex;gap:6px;flex-wrap:wrap}
.lop-live{color:var(--ok);font-weight:800}
.lop-open{display:grid;gap:6px;padding:10px;border:1px dashed #d4a800;border-radius:12px;background:color-mix(in srgb,#ffe066 18%,var(--panel))}
.lop-openrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);cursor:pointer;text-align:left}
.lop-openrow small{display:block;color:var(--muted);font-size:calc(12px*var(--fs))}
.lop-openrow>span:last-child{color:var(--accent);font-weight:800;white-space:nowrap}
.lop-codein{font-size:calc(34px*var(--fs-big));letter-spacing:.35em;text-align:center;padding:12px;border:2px solid var(--line);border-radius:14px;background:var(--panel);color:var(--accent);font-weight:900;width:100%}
.lop-codein:focus{border-color:var(--accent);outline:none}

/* --- màn hình giáo viên (chiếu lên bảng) --- */
.lop-shell{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.lop-code-lab{color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:calc(12px*var(--fs))}
.lop-code{font-size:calc(64px*var(--fs-big));font-weight:900;letter-spacing:.14em;color:var(--accent);line-height:1.05;font-variant-numeric:tabular-nums}
.lop-url{color:var(--muted);font-size:calc(13px*var(--fs));margin-top:4px;word-break:break-all}
.lop-count{margin-top:10px;font-size:calc(18px*var(--fs))}
.lop-qr{background:#fff;padding:10px;border-radius:14px;border:1px solid var(--line)}
.lop-qr img,.lop-qr canvas{display:block;width:200px;height:200px}
.lop-qrcol{display:flex;flex-direction:column;align-items:center;gap:8px}
.lop-qr[title]{cursor:zoom-in}
.lop-shell .auth-warn{margin-top:10px;max-width:460px}
/* QR phóng to (chiếu cho cả lớp): nền trắng để camera dễ nhận */
.lop-qrbig{position:fixed;inset:0;z-index:95;background:#fff;color:#2b1d14;display:flex;align-items:center;justify-content:center;overflow:auto;padding:16px;cursor:zoom-out}
.lop-qrbig-box{text-align:center}
.lop-qrbig-qr{display:inline-block;padding:12px;background:#fff}
.lop-qrbig-qr img,.lop-qrbig-qr canvas{max-width:100%}
.lop-qrbig-code{font-size:clamp(26px,5vw,60px);font-weight:800;margin-top:4px}
.lop-qrbig-code b{letter-spacing:.14em;color:#7a2f2b;font-variant-numeric:tabular-nums}
.lop-qrbig-url{font-size:clamp(14px,1.8vw,22px);margin:4px 0}
.lop-qrbig small{color:#888}
.lop-people{display:flex;flex-wrap:wrap;gap:8px}
.lop-people span{padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));font-weight:700;animation:lopPop .3s ease}
.lop-people small{color:var(--muted);margin-left:4px}
@keyframes lopPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.lop-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px;margin-bottom:12px}
.lop-type{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);cursor:pointer;text-align:center;font-weight:700}
.lop-type b{font-size:calc(26px*var(--fs-big))}
.lop-type.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel));box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
.lop-type{position:relative}
.lop-type-n{position:absolute;top:6px;right:7px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-style:normal;font-size:12px;line-height:21px;font-weight:800}
.lop-counts{display:flex;flex-wrap:wrap;gap:8px 16px}
.lop-timerow{align-items:flex-end;flex-wrap:wrap;gap:8px 16px}
.lop-timerow>.muted-note{padding-bottom:10px}
/* lượt gồm nhiều hoạt động: nhãn hoạt động của câu đang làm */
.lop-sec{display:table;margin:10px auto 0;padding:3px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--accent);font-weight:700;font-size:calc(13px*var(--fs))}
.lop-sec:empty{display:none}
/* ✏️ Sửa bài tập cùng lớp (chiếu lên bảng) */
.lop-btl{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.lop-btlb{display:flex;flex-direction:column;align-items:center;padding:8px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font-weight:800;cursor:pointer}
.lop-btlb small{color:var(--muted);font-weight:600}
.lop-btlb.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel));box-shadow:inset 0 0 0 1px var(--accent)}
.lop-bthint{margin:0 0 10px;padding:8px 12px;border:1px dashed var(--line);border-radius:12px}
.lop-bthint summary{cursor:pointer;font-weight:700}
.lop-bthint div{margin-top:6px;line-height:1.6}
.lop-subtabs small{opacity:.7}
.lop-bttools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.lop-bttools .on{border-color:var(--accent);color:var(--accent);font-weight:800}
.lop-bthelp{color:var(--muted);font-size:calc(12px*var(--fs))}
.lop-btlist{font-size:calc(19px*var(--btfs,1))}
.lop-btlist h4{margin:14px 0 6px}
.lop-btrow{padding:10px 12px;margin:8px 0;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.lop-btq{line-height:1.5}
.lop-btq b{color:var(--muted);margin-right:4px}
.lop-btans{display:block;width:100%;margin-top:6px;padding:7px 10px;border-radius:9px;border:1px dashed var(--line);background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.lop-btans-a{display:none}
.lop-btans-h{color:var(--muted);font-size:.8em}
.lop-btrow.shown .lop-btans{border-style:solid;border-color:color-mix(in srgb,var(--good,#2f7d4f) 45%,var(--line));background:color-mix(in srgb,var(--good,#2f7d4f) 8%,var(--panel))}
.lop-btrow.shown .lop-btans-a{display:inline;font-weight:700}
.lop-btrow.shown .lop-btans-h{display:none}
.lop-btan{display:none;margin-top:6px;font-size:calc(14px*var(--fs))}
.lop-btrow.shown .lop-btan{display:block}
.lop-btan summary{cursor:pointer;color:var(--accent);font-weight:700}
.lop-btws{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
.lop-btw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.lop-btw span{cursor:pointer;border-radius:6px;padding:0 4px}
.lop-btw span.pali-v{font-weight:700}
.lop-btw span.cov{color:transparent;background:color-mix(in srgb,var(--muted) 22%,var(--panel));user-select:none}
/* ✏️ Sửa bài · 🔎 Nhận diện 8 cách: đáp án che dưới từng từ gạch dưới */
.lop-bc8{display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:8px}
.lop-bcimg{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
.lop-bcset{margin:4px 0 8px}
.lop-bcs{line-height:1.5}
.lop-bcw{cursor:pointer}
.lop-bca{display:block;min-width:5em;max-width:12em;margin-top:4px;padding:1px 8px;border-radius:8px;font-size:.74em;font-weight:800;line-height:1.35;text-align:center;color:transparent;background:color-mix(in srgb,var(--muted) 22%,var(--panel));user-select:none}
.lop-bcw.open .lop-bca,.lop-btrow.shown .lop-bca{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--panel));user-select:auto}
.lop-field{margin:10px 0}.lop-field>b{display:block;margin-bottom:4px}
.lop-field .lesson-check small{color:var(--muted);font-weight:600}
.lop-setwarn{display:block;font-style:normal;font-weight:700;font-size:calc(12px*var(--fs));color:var(--bad);margin-top:2px}
.lop-cmax{margin:8px 0 0}
.lop-cmax-warn{font-weight:700;color:var(--bad)}
.lop-picsets img{width:34px;height:34px;object-fit:cover;border-radius:7px;vertical-align:middle;margin-right:7px}
/* 🖼️ Nhìn hình đoán từ */
/* Khung ôm sát hình (cắt phần chuyển động tràn ra ngoài); hình không vượt bề ngang thẻ và 42% chiều cao màn hình */
.lop-pic{width:fit-content;margin:8px auto 12px;overflow:hidden;border-radius:16px;border:1px solid var(--line);box-shadow:0 6px 18px rgba(60,30,10,.16);background:var(--panel);animation:lopPop .28s ease-out}
.lop-pic img{display:block;width:auto;height:auto;max-width:min(calc(100vw - 64px),380px);max-height:42vh;transform-origin:var(--fo,50% 50%)}
/* Gợi ý loại từ */
.lop-kind{display:table;margin:10px auto 0;padding:3px 14px;border-radius:999px;font-weight:800;font-size:calc(14px*var(--fs));border:1px solid}
.lop-kind.n{color:#2a62a8;background:color-mix(in srgb,#2a62a8 12%,var(--panel));border-color:color-mix(in srgb,#2a62a8 40%,var(--line))}
.lop-kind.v{color:#257a46;background:color-mix(in srgb,#257a46 12%,var(--panel));border-color:color-mix(in srgb,#257a46 40%,var(--line))}
body.dark .lop-kind.n{color:#9cc2ff}body.dark .lop-kind.v{color:#8fd8a8}
/* Hình động từ: hiệu ứng chuyển động diễn tả hành động (fx trong hinh-data.js) */
.lop-pic.fx-zoom img{animation:fxZoom 3.2s ease-in-out infinite alternate}
.lop-pic.fx-pulse img{animation:fxPulse 1.5s ease-in-out infinite alternate}
.lop-pic.fx-breathe img{animation:fxBreathe 4.5s ease-in-out infinite alternate}
.lop-pic.fx-chop img{animation:fxChop 1.3s ease-in infinite}
.lop-pic.fx-r img{animation:fxR 4.2s linear infinite}
.lop-pic.fx-l img{animation:fxL 4.2s linear infinite}
.lop-pic.fx-up img{animation:fxUp 4.2s linear infinite}
.lop-pic.fx-down img{animation:fxDown 4.2s linear infinite}
.lop-pic.fx-in img{animation:fxIn 4.2s ease-in infinite}
@keyframes fxZoom{from{transform:scale(1)}to{transform:scale(1.18)}}
@keyframes fxPulse{from{transform:scale(1.03)}to{transform:scale(1.11)}}
@keyframes fxBreathe{from{transform:scale(1.01)}to{transform:scale(1.06)}}
@keyframes fxChop{0%,55%,100%{transform:scale(1.08) translateY(0)}68%{transform:scale(1.08) translateY(2.2%)}78%{transform:scale(1.08) translateY(-.6%)}}
@keyframes fxR{0%{opacity:.6;transform:scale(1.15) translateX(5%)}8%{opacity:1}88%{opacity:1;transform:scale(1.15) translateX(-5%)}100%{opacity:.6;transform:scale(1.15) translateX(-5%)}}
@keyframes fxL{0%{opacity:.6;transform:scale(1.15) translateX(-5%)}8%{opacity:1}88%{opacity:1;transform:scale(1.15) translateX(5%)}100%{opacity:.6;transform:scale(1.15) translateX(5%)}}
@keyframes fxUp{0%{opacity:.6;transform:scale(1.15) translateY(-5%)}8%{opacity:1}88%{opacity:1;transform:scale(1.15) translateY(5%)}100%{opacity:.6;transform:scale(1.15) translateY(5%)}}
@keyframes fxDown{0%{opacity:.6;transform:scale(1.15) translateY(5%)}8%{opacity:1}88%{opacity:1;transform:scale(1.15) translateY(-5%)}100%{opacity:.6;transform:scale(1.15) translateY(-5%)}}
@keyframes fxIn{0%{opacity:.6;transform:scale(1)}8%{opacity:1}88%{opacity:1;transform:scale(1.28)}100%{opacity:.6;transform:scale(1.28)}}
@media(prefers-reduced-motion:reduce){.lop-pic img{animation:none!important}}
#pMean{margin-top:8px}
.lop-rv-img{float:left;width:58px;height:58px;object-fit:cover;border-radius:9px;margin:0 10px 2px 0;border:1px solid var(--line)}
.lop-cq-h .lop-rv-img{float:none;flex:none;margin:0}
.lop-start{width:100%;margin-top:8px}
.lop-run-head{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.lop-run-head h2{margin:2px 0}
.lop-run-head small{color:var(--muted)}
.lop-timer{font-size:calc(54px*var(--fs-big));font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}
.lop-timer.low,.lop-ptime.low{color:var(--bad);animation:lopBlink 1s infinite}
@keyframes lopBlink{50%{opacity:.45}}
.lop-tbar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--accent) 10%,var(--panel));overflow:hidden;margin:10px 0}
.lop-tbar span{display:block;height:100%;width:100%;background:var(--accent);transition:width .25s linear}
.lop-prog,.lop-board{display:grid;gap:6px}
.lop-prow,.lop-brow{display:grid;grid-template-columns:42px minmax(0,1.4fr) minmax(0,2fr) auto auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--accent2) 5%,var(--panel));border:1px solid var(--line)}
.lop-brow{grid-template-columns:42px minmax(0,1.4fr) minmax(0,2fr) auto}
.lop-prow.fin{border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}
.lop-brow.top{background:color-mix(in srgb,#d8a73a 12%,var(--panel));border-color:color-mix(in srgb,#d8a73a 50%,var(--line))}
.lop-prow b,.lop-brow b{text-align:center;font-size:calc(18px*var(--fs))}
.lop-pname{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lop-pbar{height:10px;border-radius:99px;background:color-mix(in srgb,var(--accent) 10%,var(--panel));overflow:hidden}
.lop-pbar span{display:block;height:100%;background:var(--ok);transition:width .4s ease}
.lop-prow small{color:var(--muted);white-space:nowrap}
.lop-prow strong,.lop-brow strong{font-size:calc(18px*var(--fs));color:var(--accent);font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
.lop-res{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0}
.lop-res summary{cursor:pointer}.lop-res summary small{color:var(--muted)}
.lop-resbody{margin-top:10px}
.lop-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.lop table.lop-table{min-width:0;width:100%;font-size:calc(14px*var(--fs))}
.lop table.lop-table th,.lop table.lop-table td{position:static;padding:8px 10px;vertical-align:middle}
.lop table.lop-table td:first-child{font-family:inherit;font-size:inherit;color:var(--text);font-weight:600}
.lop table.lop-table td small{display:block;color:var(--muted);font-size:calc(11px*var(--fs));font-weight:400}
.lop table.lop-table th{background:color-mix(in srgb,var(--accent) 7%,var(--panel));color:var(--accent)}
.lop-textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font:inherit;font-family:"Noto Serif",Georgia,serif;font-size:calc(16px*var(--fs));resize:vertical}

/* --- màn hình học viên --- */
.lop-stuhead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 7%,var(--panel));border:1px solid var(--line);font-size:calc(13px*var(--fs));margin-top:8px}
.lop-stuhead b{color:var(--accent);font-size:calc(16px*var(--fs))}
.lop-wait{text-align:center}
.lop-wait-ico{font-size:calc(54px*var(--fs-big))}
.lop-bigscore{font-size:calc(30px*var(--fs-big));color:var(--accent)}
.lop-wait .lop-board{text-align:left;margin-top:12px}
.lop-play{padding:14px 14px 20px}
.lop-playtop{display:flex;gap:10px;align-items:center;font-weight:800}
.lop-playtop b{color:var(--accent)}
.lop-ptime{font-variant-numeric:tabular-nums}
.lop-q{font-size:calc(21px*var(--fs-big));font-weight:700;line-height:1.45;margin:14px 0 12px;text-align:center}
.lop-q i.pl,.lop-q i{font-family:"Noto Serif",Georgia,serif;color:var(--accent)}
.lop-q small{color:var(--muted);font-weight:500;font-size:.75em}
.lop-hint{text-align:center;color:var(--muted);font-size:calc(13px*var(--fs));margin:-4px 0 10px}
.lop-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lop-opt{position:relative;min-height:84px;padding:14px 12px 14px 38px;border:0;border-radius:14px;color:#fff;font-size:calc(18px*var(--fs));font-weight:800;text-align:left;cursor:pointer;line-height:1.3;font-family:"Noto Serif",Georgia,serif;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.lop-opt small{position:absolute;left:12px;top:12px;font-family:Inter,system-ui,sans-serif;opacity:.85}
.lop-opt.o0{background:#c0392b}.lop-opt.o1{background:#2471a3}.lop-opt.o2{background:#b9770e}.lop-opt.o3{background:#1e8449}
.lop-opt:active{transform:translateY(2px);box-shadow:none}
.lop-opt:disabled{opacity:.35;cursor:default}
.lop-opt.right{opacity:1;outline:4px solid var(--ok);outline-offset:2px}
.lop-opt.wrong{opacity:.9;outline:4px solid var(--bad);outline-offset:2px}
.lop-input{display:block;width:100%;font-size:calc(24px*var(--fs-big));padding:14px;border:2px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-align:center}
.lop-input:focus{border-color:var(--accent);outline:none}
.lop-keys{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0}
.lop-keys button{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--accent);font-family:"Noto Serif",Georgia,serif;font-size:calc(20px*var(--fs));cursor:pointer}
.lop-play>#pArea>.lop-big,.lop-play #pArea .lop-big{width:100%}
.lop-area{font-size:calc(19px*var(--fs));text-align:left;resize:vertical;line-height:1.45}
.lop-input.lop-area:not(.pali-input){font-family:inherit}
.lop-qpali{font-size:calc(23px*var(--fs-big));color:var(--accent);font-style:italic}
.lop-selfrate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px}
.lop-sr{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:12px;border:2px solid var(--line);background:var(--panel);font-weight:800;font-size:calc(15px*var(--fs));cursor:pointer}
.lop-sr small{color:var(--muted);font-weight:700}
.lop-sr.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}.lop-sr.near{color:#b9770e;border-color:color-mix(in srgb,#b9770e 55%,var(--line))}.lop-sr.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 55%,var(--line))}
.lop-sr:disabled{opacity:.5;cursor:default}
.lop-yours{margin:6px 0;font-family:"Noto Serif",Georgia,serif;font-size:calc(18px*var(--fs))}
.lop-w.ok{color:var(--ok)}.lop-w.near{color:#b9770e;text-decoration:underline wavy}.lop-w.bad{color:var(--bad);text-decoration:line-through}
.lop-miss{color:var(--bad);font-weight:700}
.lop-play .bt-ana{justify-content:flex-start}
.lop-tr{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0}
.lop-tr-row{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-top:1px dotted var(--line);line-height:1.45}
.lop-tr-row>div{display:flex;flex-direction:column}
.lop-tr-row i{color:var(--accent)}
.lop-ok{color:var(--ok);font-weight:900}.lop-near{color:#b9770e;font-weight:900}.lop-bad{color:var(--bad);font-weight:900}
.lop-line{min-height:62px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;padding:10px;border:2px dashed var(--line);border-radius:14px;margin-bottom:12px}
.lop-ph{color:var(--muted);align-self:center}
.lop-tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.lop-tile{padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font-family:"Noto Serif",Georgia,serif;font-size:calc(19px*var(--fs));cursor:pointer;box-shadow:0 2px 0 var(--line)}
.lop-tile.in{background:color-mix(in srgb,var(--accent) 10%,var(--panel));border-color:var(--accent);color:var(--accent);font-weight:700}
.lop-match{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lop-match>div{display:grid;gap:8px;align-content:start}
.lop-mt{min-height:56px;padding:10px;border:2px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font-size:calc(16px*var(--fs));cursor:pointer;line-height:1.3}
.lop-mt.pali-v{font-size:calc(19px*var(--fs));font-weight:700;color:var(--accent)}
.lop-mt.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel))}
.lop-mt.done{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--panel));opacity:.6}
.lop-mt.shake{border-color:var(--bad);animation:lopShake .4s}
@keyframes lopShake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.lop table.lop-decl td:first-child{width:22%;font-family:inherit}
.lop table.lop-decl td:first-child small{display:block;color:var(--muted);font-size:calc(11px*var(--fs));font-weight:600;line-height:1.25}
.lop table.lop-decl td{font-family:"Noto Serif",Georgia,serif;font-size:calc(15px*var(--fs));padding:6px 7px;word-break:break-word}
.lop table.lop-decl th{padding:6px 7px}
.lop-cellin{width:100%;min-width:0;padding:8px;border:2px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font-size:calc(17px*var(--fs))}
.lop-cellin:focus{border-color:var(--accent);outline:none}
.lop-cellin.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--panel))}
.lop-cellin.near{border-color:#b9770e}
.lop-cellin.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--panel))}
.lop-cellans{display:block;color:var(--ok);font-weight:700;margin-top:3px}
/* 🔎 Nhận diện 8 cách: câu có từ gạch dưới, ô điền ngay dưới mỗi từ */
.lop-q-sm{font-size:calc(18px*var(--fs-big))}
.lop-cs{font-size:calc(19px*var(--fs));line-height:1.5;margin:6px 0 14px;text-align:left}
.lop-cst{white-space:pre-wrap}
.lop-csw{display:inline-flex;flex-direction:column;align-items:center;vertical-align:top;margin:0 3px 10px;max-width:100%}
.lop-csw u{font-weight:800;color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.lop-csin{margin-top:5px;width:118px;max-width:100%;padding:6px 8px;border:2px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font-size:16px;text-align:center}
.lop-csin.num{width:52px;font-weight:800}
.lop-csin:focus{border-color:var(--accent);outline:none}
.lop-csin.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--panel))}
.lop-csin.near{border-color:#b9770e}
.lop-csin.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--panel))}
.lop-csans{display:block;max-width:150px;color:var(--ok);font-weight:700;font-size:calc(12.5px*var(--fs));margin-top:3px;text-align:center;line-height:1.3}
/* câu trắc nghiệm nhận diện cách: câu gốc hiện trên, từ được hỏi gạch dưới */
.lop-csq{display:block;margin:0 0 10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 6%,var(--panel));font-weight:500;font-size:.88em;line-height:1.55}
.lop-csq u{font-weight:800;color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.lop-csl{font-family:Inter,system-ui,sans-serif;font-weight:800;color:var(--accent);font-size:.68em;margin-left:2px}
/* trắc nghiệm nhiều từ: mỗi đáp án là một dãy cách a · b · c, xếp một cột cho dễ đọc */
.lop-opts.lop-opts-seq{grid-template-columns:1fr}
.lop-opts-seq .lop-opt{min-height:0;padding:13px 14px 13px 40px;font-size:calc(17px*var(--fs))}
.lop-opts-seq .lop-opt small{top:50%;transform:translateY(-50%)}
.lop-seqi{display:inline-flex;align-items:center;gap:5px;margin:2px 14px 2px 0;white-space:nowrap}
.lop-seqi i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.3);font:800 12px/1 Inter,system-ui,sans-serif}
/* điền 2 ô (số + tên) dưới mỗi từ */
.lop-cs.two .lop-csin.name{margin-top:4px}
.lop-fb{margin-top:14px;padding:14px;border-radius:14px;text-align:center;font-size:calc(17px*var(--fs));animation:lopPop .25s ease}
.lop-fb>div{margin-top:6px}
.lop-fb .lop-big{margin-top:12px;width:100%}
.lop-fb.ok{background:color-mix(in srgb,var(--ok) 15%,var(--panel));border:1px solid var(--ok)}
.lop-fb.near{background:color-mix(in srgb,#b9770e 14%,var(--panel));border:1px solid #b9770e}
.lop-fb.bad{background:color-mix(in srgb,var(--bad) 11%,var(--panel));border:1px solid var(--bad)}
body.dark .lop-qr{background:#fff}

/* --- xem lại từng câu & điểm yếu (trang Kết quả, màn hình học viên) --- */
.lop-subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 12px}
.lop-rv{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:start;padding:9px 10px;margin:5px 0;border-radius:10px;border:1px solid var(--line);border-left-width:5px;background:var(--panel);line-height:1.45;text-align:left}
.lop-rv>span:first-child{font-size:calc(17px*var(--fs));text-align:center}
.lop-rv.ok{border-left-color:var(--ok);opacity:.85}
.lop-rv.near{border-left-color:#b9770e;background:color-mix(in srgb,#b9770e 9%,var(--panel))}
.lop-rv.bad{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 11%,var(--panel));border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.lop-rv.skip{border-left-color:var(--muted);background:color-mix(in srgb,var(--muted) 8%,var(--panel))}
.lop-rv-q{font-weight:700}
.lop-rv-a{font-family:"Noto Serif",Georgia,serif;font-size:calc(15px*var(--fs))}
.lop-rv-y{color:var(--bad);text-decoration:line-through;text-decoration-thickness:1px}
.lop-rv.near .lop-rv-y{color:#b9770e;text-decoration:underline wavy}
.lop-rv-r{color:var(--ok)}
.lop-rv-okans{color:var(--ok)}
.lop-rv-k{color:var(--muted);font-size:calc(11px*var(--fs));white-space:nowrap}
.lop-skip{color:var(--muted);font-weight:900}
.lop-onlybad .lop-rv.ok{display:none}
.lop-onlybad-t{margin-bottom:8px}
.lop-rvblock{margin:12px 0}.lop-rvblock h4{margin:0 0 6px;color:var(--accent)}.lop-rvblock h4 small{color:var(--muted);font-weight:500}
.lop-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;margin:6px 0 12px}
.lop-sum>div{padding:10px 6px;border-radius:12px;text-align:center;background:color-mix(in srgb,var(--accent) 6%,var(--panel));border:1px solid var(--line)}
.lop-sum b{display:block;font-size:calc(22px*var(--fs-big));color:var(--accent)}.lop-sum span{font-size:calc(12px*var(--fs));color:var(--muted);font-weight:700}
.lop-sum .ok b{color:var(--ok)}.lop-sum .near b{color:#b9770e}.lop-sum .bad b{color:var(--bad)}.lop-sum .skip b{color:var(--muted)}
.lop-heat{margin:14px 0}.lop-heat h4{margin:0 0 8px}.lop-heat h4 small{color:var(--muted);font-weight:500}
.lop table.lop-heatt td{text-align:center;font-weight:700;font-family:inherit}
.lop table.lop-heatt td:first-child{text-align:left;font-weight:600}
.lop table.lop-heatt td small{display:inline;color:inherit;opacity:.75}
.lop-h0{color:var(--muted);opacity:.6}
.lop-wchips{display:flex;flex-wrap:wrap;gap:6px}
.lop-wchips span{display:inline-flex;flex-direction:column;padding:6px 10px;border-radius:10px;border:1px solid color-mix(in srgb,var(--bad) 35%,var(--line));line-height:1.3}
.lop-wchips span small{font-size:calc(11px*var(--fs));opacity:.85}
.lop-wchips span em{font-style:normal;font-size:calc(11px*var(--fs));font-weight:800}
.lop-wchips.good span{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));color:var(--ok)}
.lop-good{margin-top:8px}.lop-good summary{cursor:pointer;color:var(--muted);font-weight:700}
.lop-td-bad{background:color-mix(in srgb,var(--bad) 10%,var(--panel))}
.lop-td-bad b{color:var(--bad)}
.lop-td-near{background:color-mix(in srgb,#b9770e 9%,var(--panel))}
@media(max-width:480px){.lop-rv{grid-template-columns:22px minmax(0,1fr)}.lop-rv-k{display:none}.lop-panel{padding:8px 4px}.lop-panel-box{padding:12px}}
.lop-pct{display:inline-block;min-width:48px;padding:3px 8px;border-radius:8px;text-align:center;font-weight:800}
.lop-namebtn{padding:0;border:0;background:none;color:var(--accent);font:inherit;font-weight:800;text-decoration:underline;cursor:pointer;text-align:left}
.lop-cq{padding:10px;margin:6px 0;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.lop-cq.hot{border-color:color-mix(in srgb,var(--bad) 55%,var(--line));box-shadow:inset 4px 0 0 var(--bad)}
.lop-cq-h{display:flex;gap:10px;align-items:flex-start}.lop-cq-h small{color:var(--muted)}
.lop-cq-pct{flex:0 0 auto;min-width:64px;padding:4px 8px;border-radius:8px;text-align:center;font-weight:900;font-size:calc(13px*var(--fs))}
.lop-cq-who{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lop-cq-who span{padding:4px 9px;border-radius:999px;border:1px solid var(--line);font-size:calc(13px*var(--fs))}
.lop-cq-who span.bad{border-color:color-mix(in srgb,var(--bad) 50%,var(--line));background:color-mix(in srgb,var(--bad) 8%,var(--panel))}
.lop-cq-who span.near{border-color:color-mix(in srgb,#b9770e 50%,var(--line))}
.lop-panel{position:fixed;inset:0;z-index:90;background:rgba(30,20,14,.5);overflow:auto;padding:20px 10px}
.lop-panel-box{max-width:900px;margin:0 auto;padding:16px 18px}
.lop-panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;position:sticky;top:-16px;background:var(--panel);padding:8px 0;z-index:2;border-bottom:1px solid var(--line);margin-bottom:8px}
.lop-panel-head h3{margin:0;color:var(--accent)}.lop-panel-head h3 small{color:var(--muted);font-weight:500;font-size:calc(13px*var(--fs))}
.lop-myrev{margin-top:14px;text-align:left}.lop-myrev summary{cursor:pointer;font-weight:800;color:var(--bad);margin-bottom:6px}
.lop-allok{color:var(--ok);font-weight:800}
@media(max-width:760px){.lop-code{font-size:calc(46px*var(--fs-big))}
  .lop-prow{grid-template-columns:30px minmax(0,1fr) 60px auto;gap:6px}.lop-prow small{display:none}
  .lop-brow{grid-template-columns:30px minmax(0,1fr) 60px auto;gap:6px}}
@media(max-width:480px){.lop-main{padding:4px 8px 40px}.lop-card{padding:14px}.lop-opt{min-height:76px;font-size:calc(16px*var(--fs))}.lop-q{font-size:calc(18px*var(--fs-big))}}