/* ============================================================
   Lingoreflex Play UI refactor — visual layer only.
   Keeps all existing IDs, Firebase hooks, pack flow and mode JS intact.
   ============================================================ */
:root {
  --bg:#080a0b;
  --bg-2:#0d1012;
  --graphite:#14181b;
  --graphite-2:#1c2226;
  --line:rgba(232,236,235,.12);
  --line-strong:rgba(232,236,235,.22);
  --text:#f2f4ef;
  --muted:#a7b0ad;
  --soft:#d8ddd8;
  --cyan:#3ee8de;
  --cyan-dim:rgba(62,232,222,.16);
  --gold:#f4c76a;
  --gold-dim:rgba(244,199,106,.15);
  --danger:#f26f5e;
  --panel:rgba(20,24,27,.84);
  --panel-solid:#0d1012;
  --card:rgba(242,244,239,.96);
  --card-text:#071010;
  --border:var(--line);
  --accent:var(--cyan);
  --accent-2:var(--gold);
  --bad:var(--danger);
  --warn:var(--gold);
  --text-soft:var(--soft);
  --chip-bg:rgba(255,255,255,.025);
  --chip-border:var(--line);
  --hero-grad:
    radial-gradient(circle at 80% 4%, rgba(62,232,222,.08), transparent 30%),
    radial-gradient(circle at 16% 18%, rgba(244,199,106,.055), transparent 24%),
    linear-gradient(180deg,#080a0b 0%,#0a0d0f 46%,#080a0b 100%);
  --shadow:0 24px 90px rgba(0,0,0,.42);
  --radius-lg:30px;
  --radius-md:20px;
  --radius-sm:14px;
  --max:1180px;
}
body.sang {
  --bg:#080a0b;
  --bg-2:#0d1012;
  --panel:rgba(20,24,27,.84);
  --panel-solid:#0d1012;
  --text:#f2f4ef;
  --text-soft:#d8ddd8;
  --muted:#a7b0ad;
  --card:rgba(242,244,239,.96);
  --card-text:#071010;
  --border:rgba(232,236,235,.12);
  --chip-bg:rgba(255,255,255,.025);
  --chip-border:rgba(232,236,235,.12);
  --hero-grad:
    radial-gradient(circle at 80% 4%, rgba(62,232,222,.08), transparent 30%),
    radial-gradient(circle at 16% 18%, rgba(244,199,106,.055), transparent 24%),
    linear-gradient(180deg,#080a0b 0%,#0a0d0f 46%,#080a0b 100%);
}
*{box-sizing:border-box} html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--hero-grad);color:var(--text);transition:background .25s ease,color .25s ease}
.app{max-width:1060px;margin:0 auto;min-height:100vh;padding:18px 14px 28px}
.man-hinh{display:none}.man-hinh.hien{display:block}
.hero,.panel{background:var(--panel); border:1px solid var(--border); backdrop-filter:blur(12px); border-radius:24px; box-shadow:var(--shadow);}
.hero{padding:24px 18px 18px}.panel{padding:16px}
.hang-dau{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.tieu-de{font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.1;margin:0 0 8px}
.mo-ta{color:var(--text-soft);font-size:15px;line-height:1.65;margin:0;max-width:760px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.chip{padding:9px 12px;border-radius:999px;background:var(--chip-bg);border:1px solid var(--chip-border);color:var(--text);font-size:13px}
.chip.xanh{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.32)}
.tieu-muc{font-size:14px;font-weight:700;color:var(--muted);letter-spacing:.02em;margin:22px 6px 12px;text-transform:uppercase}
.hanh-dong,.hanh-dong-nho,.hang-tai,.chon-size,.chon-mode{display:flex;gap:12px;flex-wrap:wrap}
.nut,.nut-file,.nut-nho,.the-lua-chon,.size-btn{appearance:none;border:none;cursor:pointer;border-radius:16px;font-weight:700;transition:.18s transform,.18s opacity,.18s background,.18s border-color}
.nut:active,.nut-file:active,.nut-nho:active,.the-lua-chon:active,.size-btn:active{transform:scale(.985)}
.nut,.nut-file{padding:15px 18px;background:linear-gradient(180deg,#38bdf8,#0ea5e9);color:#082032;min-width:150px;text-decoration:none;text-align:center}
.nut.phu,.nut-file.phu,.nut-nho,.size-btn{background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--border)}
body.sang .nut.phu,body.sang .nut-file.phu,body.sang .nut-nho,body.sang .size-btn{background:rgba(15,23,42,.02)}
.nut-nho{padding:10px 12px;font-size:13px}.size-btn{padding:14px 16px;min-width:120px}.size-btn.active{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.45)}
.che-do-note{font-size:13px;color:var(--muted);line-height:1.6;padding:4px 2px;}
input[type="file"]{display:none}
.luoi-2{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;margin-top:14px}
.khoi{padding:16px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:20px}
body.sang .khoi, body.sang .the-thong-ke, body.sang .review-card, body.sang .deep-item, body.sang .recall-row, body.sang .board-item, body.sang .workflow-step{background:rgba(15,23,42,.02)}
.thong-ke{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:16px}
.the-thong-ke{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:18px;padding:14px}
.gia-tri{font-size:28px;font-weight:800}.nhan{color:var(--muted);font-size:13px;margin-top:4px}
.trang-thai{margin-top:10px;font-size:13px;color:var(--muted);line-height:1.6}
.thong-tin-goi{display:grid;gap:10px}.dong-thong-tin{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--border);padding-bottom:8px}.dong-thong-tin:last-child{border-bottom:none;padding-bottom:0}.dong-thong-tin .k{color:var(--muted);font-size:13px}.dong-thong-tin .v{text-align:right;font-weight:700}
.chon-mode{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.the-lua-chon{padding:14px 16px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);text-align:left}
.the-lua-chon.active{background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.35)}.the-lua-chon.tat{opacity:.45;cursor:not-allowed;pointer-events:none}
.the-lua-chon .ten{font-weight:800}.the-lua-chon .mo-ta{font-size:13px;margin-top:6px;line-height:1.5}
.mode-group-panel{grid-column:1 / -1;padding:12px;border-radius:18px;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.18);display:grid;gap:10px}
.mode-group-title{font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.mode-group-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.mode-group-option{appearance:none;border:none;cursor:pointer;border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);text-align:left;font-weight:800}
.mode-group-option.active{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.34)}
.mode-group-option .mo-ta{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--text-soft);font-weight:600}
.hoc-dau{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap}.hoc-dau h2{margin:0;font-size:24px}.muted{color:var(--muted)}
.thanh-trang-thai{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:4px 0 14px}.thanh-trang-thai .item{background:rgba(255,255,255,.04);border:1px solid var(--border);padding:10px 12px;border-radius:14px;font-size:13px;color:var(--text-soft)}
.vung-noi-dung{min-height:220px;padding:18px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid var(--border);touch-action:pan-y}
.noi-dung-tieu-de{margin:0 0 8px;font-size:30px;line-height:1.2}.noi-dung-phu{color:var(--text-soft);font-size:16px;line-height:1.7}
.chu-lon{font-size:38px;font-weight:900;line-height:1.15}.pin{margin-top:8px;font-size:18px;font-weight:700;color:var(--accent)}.goi-am{margin-top:6px;color:var(--warn);font-weight:800}.nghia{margin-top:10px;font-size:18px;font-weight:800}
.nhom-the{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.nho-chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--border);font-size:12px;color:var(--text-soft);font-weight:800}
.khoi-phu{margin-top:14px;padding:14px;border-radius:18px;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.18)}.khoi-phu h4{margin:0 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.03em;color:var(--accent)}.khoi-phu p,.khoi-phu li{color:var(--text-soft);line-height:1.7}.khoi-phu ul{margin:8px 0 0 18px;padding:0}
.lua-chon-trac-nghiem{display:grid;gap:10px;margin-top:16px}.lua-chon-trac-nghiem button{appearance:none;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);border-radius:18px;padding:14px 16px;text-align:left;font-weight:800;cursor:pointer}.lua-chon-trac-nghiem button.dung{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.42)}.lua-chon-trac-nghiem button.sai{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.34)}.lua-chon-trac-nghiem button.mo{opacity:.75}
.hop-ket-qua{margin-top:14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--border);display:none}.hop-ket-qua.hien{display:block}.ten-ket-qua{font-weight:900;margin-bottom:6px}.noi-ket-qua{color:var(--text-soft);line-height:1.7}
.review{margin-top:16px;display:none}.review.hien{display:block}.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px}.review-card{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:18px;padding:14px}.review-card h4{margin:0 0 6px;font-size:18px}.review-card .meta{margin-top:8px;font-size:13px;color:var(--text-soft);line-height:1.6}
.danh-dau-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.nut-danh-dau{padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);font-size:12px;font-weight:800;cursor:pointer}.nut-danh-dau.active-known{background:rgba(56,189,248,.14);border-color:rgba(56,189,248,.38)}.nut-danh-dau.active-weak{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.34)}.nut-danh-dau.clear-mark{background:rgba(255,255,255,.03)}body.sang .nut-danh-dau.clear-mark{background:rgba(15,23,42,.02)}
.board{display:grid;gap:12px;margin-top:14px}.board.cols-3{grid-template-columns:repeat(3,1fr)}.board.cols-4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;min-height:118px;border-radius:20px;transform-style:preserve-3d;transition:transform .32s ease;cursor:pointer}.card.flipped,.card.matched{transform:rotateY(180deg)}.card.disabled{pointer-events:none}
.card-face{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;border:1px solid rgba(255,255,255,.08)}
.card-front{background:linear-gradient(180deg,#2563eb,#1e40af);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.card-front .mark{width:58%;aspect-ratio:1;border-radius:22px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:32px;font-weight:900;color:#dff5ff}
.card-back{background:var(--card);color:var(--card-text);transform:rotateY(180deg);box-shadow:0 10px 20px rgba(0,0,0,.2)}
.card-back .main{font-size:18px;font-weight:800;line-height:1.14;overflow-wrap:anywhere;word-break:break-word;hyphens:auto;text-align:center;max-width:100%}
.card-back.term-side .main{font-size:clamp(28px,4.6vw,42px);line-height:1.08;font-weight:900;letter-spacing:.01em}
.card-back.term-side.long .main{font-size:clamp(24px,4vw,34px)}
.card-back.term-side.very-long .main{font-size:clamp(20px,3.4vw,28px)}
.card-back .subline.board-reading{margin-top:8px;font-size:12px;line-height:1.35;color:#475569;font-weight:800;display:block;-webkit-line-clamp:3}
.deep-item-title .han{display:block;font-size:clamp(28px,5vw,42px);line-height:1.08;font-weight:900;color:var(--accent);margin-bottom:4px}
.deep-item-title .meta{display:block;font-size:14px;line-height:1.5;color:var(--text-soft);font-weight:700}
.deep-item-body .vi-du-trung{font-size:18px;line-height:1.65;font-weight:900;color:var(--text);margin-top:6px}
.deep-item-body .vi-du-viet{font-size:14px;line-height:1.7;color:var(--text-soft);margin-top:4px}
.deep-item-body .deep-label{font-weight:900;color:var(--text)}
.card-back .subline{margin-top:7px;font-size:11px;line-height:1.28;color:#64748b;font-weight:700;text-align:center;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.han-highlight{color:var(--accent);font-weight:900}
.card-back .main .han-highlight,.deep-item-title .han .han-highlight{color:inherit}
.card-back.term-side .main{color:var(--accent)} .card.matched .card-back{box-shadow:0 0 0 2px rgba(34,197,94,.45),0 14px 24px rgba(34,197,94,.18)}
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.58);display:none;align-items:center;justify-content:center;padding:18px;z-index:10001}.modal-backdrop.active{display:flex}
.modal-card{width:min(760px,100%);max-height:min(84vh,860px);overflow:auto;background:var(--panel-solid);color:var(--text);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}
.modal-head{display:flex;align-items:start;justify-content:space-between;gap:12px;padding:16px 18px 10px;position:sticky;top:0;background:var(--panel-solid);z-index:1;border-bottom:1px solid var(--border)}.modal-head h3{margin:0;font-size:22px}.modal-body{padding:14px 18px 18px}
.recall-grid{display:grid;gap:12px;margin-top:16px}.recall-row{display:grid;grid-template-columns:minmax(160px,1fr) minmax(180px,1.2fr);gap:12px;align-items:center;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--border)}.recall-prompt{font-size:15px;font-weight:900;line-height:1.45}.recall-answer-wrap{display:grid;gap:6px}.recall-input{width:100%;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);padding:12px 14px;font:inherit}.recall-helper{font-size:12px;color:var(--muted);line-height:1.45}.recall-helper.good{color:#22c55e}.recall-helper.bad{color:#f59e0b}.recall-summary{margin-top:16px;padding:14px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--border);display:none}.recall-summary.active{display:block}
.deep-review{margin-top:14px;padding:16px 16px 14px;border-radius:18px;background:linear-gradient(180deg,rgba(56,189,248,.12),rgba(56,189,248,.05));border:1px solid rgba(56,189,248,.24);display:none}.deep-review.hien{display:block}.deep-review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}.deep-review-title{font-size:13px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}.deep-review-sub{font-size:13px;color:var(--text-soft);line-height:1.5}.deep-review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:12px}.deep-item{padding:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.deep-item-title{font-size:17px;font-weight:900}.deep-item-body{font-size:14px;line-height:1.65;color:var(--text-soft);margin-top:6px}
.danh-sach{display:grid;gap:12px}.board-item{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:18px;padding:14px}
.rong{font-size:14px;color:var(--text-soft);line-height:1.6}
.workflow-step{padding:14px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--border);margin-top:12px}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:rgba(56,189,248,.18);border:1px solid rgba(56,189,248,.34);font-size:12px;font-weight:900;color:var(--accent);margin-right:8px}
.kich-ban{display:grid;gap:10px;margin-top:12px}
.kich-ban-item{padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--border)}
.kich-ban-label{font-size:11px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.check-grid{display:grid;gap:12px;margin-top:12px}
.check-col{padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--border)}
.check-col h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}
.check-col ul{margin:0 0 0 18px;padding:0}
.check-col li{line-height:1.7;color:var(--text-soft)}
.danhsach-block{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

.pack-history-list{display:grid;gap:12px}
.pack-history-item{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:18px;padding:14px}
body.sang .pack-history-item{background:rgba(15,23,42,.02)}
.pack-history-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pack-history-title{font-size:16px;font-weight:900;line-height:1.35}
.pack-history-meta{font-size:13px;color:var(--muted);line-height:1.55;margin-top:6px}
.pack-history-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pack-history-actions .nut-nho{flex:1 1 180px}
.pack-history-item.active{box-shadow:0 0 0 1px rgba(56,189,248,.22) inset;border-color:rgba(56,189,248,.28)}
.pack-history-empty{margin-top:12px;font-size:14px;color:var(--text-soft);line-height:1.6}
.pack-history-current-label{margin-top:8px;font-size:12px;font-weight:800;color:var(--accent);letter-spacing:.02em}

#boardStage{padding:0;min-height:auto}
#manHinhHoc.compact-board-mode #boardStage{padding:0}
.board.viewport-fitted{width:100%}
.board.viewport-fitted .card{height:100%;min-height:0}
body.compact-dense-active #manHinhHoc #board{gap:8px}
body.compact-dense-active #manHinhHoc #board.cols-4{grid-template-columns:repeat(3,minmax(0,1fr))}
body.compact-dense-active #manHinhHoc #board.size-12{max-width:100%}
body.compact-dense-active #manHinhHoc #board.size-18{max-width:100%}
body.compact-dense-active #manHinhHoc .card{min-height:108px}


.compact-board-bar{display:none;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding:10px 12px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--border);position:relative;z-index:5;backdrop-filter:blur(10px)}
body.sang .compact-board-bar{background:rgba(15,23,42,.02)}
.compact-board-meta{min-width:0;display:grid;gap:2px}
.compact-board-title{font-size:14px;font-weight:900;line-height:1.2;color:var(--text)}
.compact-board-sub{font-size:12px;color:var(--muted);line-height:1.35}
.compact-tools-wrap{position:relative;flex:0 0 auto}
.compact-tools-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:180px;padding:8px;border-radius:16px;background:var(--panel-solid);border:1px solid var(--border);box-shadow:var(--shadow);z-index:12}
.compact-tools-menu.active{display:grid;gap:8px}
.compact-tools-menu .nut-nho{width:100%;justify-content:center}
#manHinhHoc.compact-board-mode .hoc-dau,#manHinhHoc.compact-board-mode .thanh-trang-thai{display:none}
#manHinhHoc.compact-board-mode .compact-board-bar{display:flex}
#manHinhHoc.compact-board-mode .panel{padding-top:12px}
#manHinhHoc.compact-board-mode #board{margin-top:0!important}
body.compact-dense-active .app{padding:10px 8px 16px}
body.compact-dense-active #manHinhHoc .panel{padding:10px}
body.compact-dense-active #manHinhHoc .compact-board-bar{margin-bottom:8px}
body.compact-dense-active #manHinhHoc #board{gap:8px}
body.compact-dense-active #manHinhHoc .card{min-height:108px}
@media (max-width:720px){
  .compact-board-bar{top:8px;padding:8px 10px;border-radius:16px}
  .compact-board-title{font-size:13px}
  .compact-board-sub{font-size:11px}
  .compact-tools-menu{min-width:160px}
  body.compact-dense-active .app{padding:8px 4px 12px}
  body.compact-dense-active #manHinhHoc .panel{padding:8px;border-radius:20px}
  body.compact-dense-active #manHinhHoc .compact-board-bar{margin-bottom:6px}
  body.compact-dense-active #manHinhHoc #board{gap:6px}
  body.compact-dense-active #manHinhHoc .card{min-height:100px}
}

@media (max-width:720px){
  .app{padding:14px 12px 22px}.hero{padding:20px 14px 16px}.luoi-2{grid-template-columns:1fr}.board.cols-4{grid-template-columns:repeat(4,1fr)}.card{min-height:100px}.card-back .main{font-size:16px}.hanh-dong,.hanh-dong-nho,.hang-tai{width:100%}.nut,.nut-file,.nut-nho{flex:1 1 calc(50% - 8px);text-align:center}.recall-row{grid-template-columns:1fr}
}

body.board-scroll-locked{
  overscroll-behavior:none;
  touch-action:none;
}
.back-to-top-btn{
  position:fixed;
  right:14px;
  bottom:18px;
  z-index:10020;
  display:none;
  align-items:center;
  justify-content:center;
  min-width:auto;
  width:50px;
  height:50px;
  border-radius:999px;
  box-shadow:0 10px 24px rgba(0,0,0,.34);
  background:linear-gradient(180deg,#38bdf8,#0ea5e9);
  color:#041623 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.18);
  font-weight:900;
  opacity:1;
}
.back-to-top-btn.active{display:flex}
@media (max-width:720px){
  .back-to-top-btn{right:10px;bottom:12px}
}


.floating-nav-btn{
  position:fixed;
  z-index:10018;
  bottom:clamp(220px, 44vh, 360px);
  width:auto;
  height:auto;
  border-radius:0;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:none;
  background:transparent !important;
  color:var(--text);
  border:none;
  backdrop-filter:none;
  font-size:30px;
  font-weight:900;
  padding:0;
  min-width:0;
}
.floating-nav-btn.active{display:flex}
#navPrevFloating{left:max(10px, calc(33vw - 84px))}
#navNextFloating{right:max(10px, calc(33vw - 84px))}
body.sang .floating-nav-btn{background:transparent !important}

.speak-btn{
  appearance:none;
  border:none;
  background:transparent;
  color:var(--accent);
  cursor:pointer;
  font-size:18px;
  line-height:1;
  padding:0 0 0 8px;
  margin:0;
  vertical-align:middle;
}
.speak-btn:active{transform:scale(.96)}
.speak-inline{
  display:inline-flex;
  align-items:center;
  gap:2px;
}

.cn-viet-inline{margin-top:8px;font-size:14px;line-height:1.7;color:var(--text-soft)}
.cn-viet-stack{display:grid;gap:10px;margin-top:12px}
.cn-viet-item{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--border)}
body.sang .cn-viet-item{background:rgba(15,23,42,.02)}
.cn-viet-item .cn-row{font-size:18px;line-height:1.7;font-weight:800;color:var(--text)}
.cn-viet-item .vi-row{margin-top:6px;font-size:14px;line-height:1.7;color:var(--text-soft)}
.cn-viet-item.compact{padding:8px 10px}
.cn-viet-item.compact .cn-row{font-size:16px}

@media (max-width:720px){
  .floating-nav-btn{
    bottom:clamp(210px, 42vh, 320px);
    width:auto;
    height:auto;
    font-size:30px;
  }
  #navPrevFloating{left:10px}
  #navNextFloating{right:10px}
}

.player-home-hero{padding:24px 18px 22px}
.player-hero-head{align-items:flex-start}
.player-top-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start;align-items:center;width:100%}
.nut-theme{padding:11px 14px;font-size:14px;min-width:0;border-radius:14px;flex:0 0 auto}
#chipTaiKhoan{max-width:min(58vw,320px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;padding:9px 12px}
.player-hidden-util{display:none !important}
.player-pack-card{margin-top:18px}

.player-account-summary{margin-top:10px}
.player-account-summary .status{margin-top:0;background:rgba(255,255,255,.04);border:1px solid var(--border)}
body.sang .player-account-summary .status{background:rgba(15,23,42,.02)}
.player-account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:6px}
.player-account-item{padding:6px 8px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border)}
body.sang .player-account-item{background:rgba(15,23,42,.02)}
.player-account-item .k{font-size:9px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:3px}
.player-account-item .v{font-size:11px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.player-account-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
@media (max-width:720px){
  .player-account-grid{grid-template-columns:1fr}
}
.player-login-strip{margin-top:18px;display:flex;justify-content:center}
.player-login-strip #homeAccountActions{display:flex;justify-content:center;width:100%}
.player-login-strip .nut-login{width:100%;max-width:560px;justify-content:center;margin:0 auto;padding:18px 22px;font-size:18px;box-shadow:0 10px 24px rgba(14,165,233,.22)}
.player-pack-chip-under-login{display:flex;justify-content:center;margin-top:12px}
.player-pack-chip-under-login .chip{max-width:min(100%,760px);width:fit-content;font-weight:800;justify-content:center;text-align:center}
.player-owned-inline{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;margin-top:14px}
.player-owned-chip-wrap{display:flex;gap:8px;align-items:center;justify-content:center;width:100%}
.player-owned-inline .chip{font-size:13px;padding:9px 12px;font-weight:800}
.player-owned-inline .chip-btn{appearance:none;cursor:pointer;background:var(--chip-bg);border:1px solid var(--chip-border);color:var(--text)}
.player-owned-inline .chip-btn:active{transform:scale(.985)}
.player-owned-inline-note{margin-top:6px;font-size:12px;color:var(--muted);line-height:1.45;padding-left:2px}
#nutMoThuVienTop{position:relative;width:100%;max-width:448px;min-height:58px;padding:10px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;line-height:1.25;border-radius:999px;white-space:normal;overflow:hidden;background:rgba(56,189,248,.18);border:1px solid rgba(56,189,248,.30);box-shadow:0 8px 18px rgba(14,165,233,.12)}
#nutMoThuVienTop .main,#nutMoThuVienTop .sub{position:relative;z-index:2}
#nutMoThuVienTop .main{display:block;width:100%;font-size:15px;font-weight:800;line-height:1.25;text-align:center;position:relative;z-index:2}
#nutMoThuVienTop .sub{display:block;width:100%;font-size:12px;font-weight:700;line-height:1.2;text-align:center;opacity:.92;position:relative;z-index:2}
#nutMoThuVienTop .chip-mascot{position:absolute;bottom:-78px;width:235px;height:auto;pointer-events:none;z-index:1;filter:drop-shadow(0 4px 10px rgba(15,23,42,.14));opacity:.98}
#nutMoThuVienTop .chip-mascot.left{left:-36px;transform:scaleX(-1)}
#nutMoThuVienTop .chip-mascot.right{right:-36px}
@media (max-width:720px){
  #nutMoThuVienTop{max-width:448px;padding:10px 14px;min-height:58px}
  #nutMoThuVienTop .main{font-size:15px}
  #nutMoThuVienTop .sub{font-size:12px}
  #nutMoThuVienTop .chip-mascot{width:165px;bottom:-42px}
  #nutMoThuVienTop .chip-mascot.left{left:-18px;transform:scaleX(-1)}
  #nutMoThuVienTop .chip-mascot.right{right:-18px}
}
.player-owned-panel{display:none;margin-top:10px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--border)}
body.sang .player-owned-panel{background:rgba(15,23,42,.02)}
.player-owned-panel.open{display:block}
.player-owned-head,.player-owned-foot{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.player-owned-list{display:grid;gap:10px;margin-top:8px}
.player-owned-item{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--border)}
body.sang .player-owned-item{background:rgba(15,23,42,.02)}
.player-owned-item-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.player-owned-item-title{font-size:14px;font-weight:900;line-height:1.45}
.player-owned-item-meta{font-size:12px;color:var(--muted);line-height:1.5;margin-top:4px}
.player-owned-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.player-owned-empty{font-size:13px;color:var(--text-soft);line-height:1.6;padding:4px 2px}
.player-owned-loading{font-size:13px;color:var(--muted);line-height:1.6;padding:4px 2px}
#homeAccountActions.logged-in #nutDangNhapGoogle{padding:18px 22px;font-size:18px;min-width:0;background:linear-gradient(180deg,#38bdf8,#0ea5e9);color:#082032;border:none;box-shadow:0 10px 24px rgba(14,165,233,.22)}
.player-current-pack-title{font-size:clamp(24px,4.4vw,40px);font-weight:900;line-height:1.1;color:var(--text);margin-top:2px}
.player-mini-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.player-pack-info{margin-top:14px}
.player-pack-card .thong-tin-goi{gap:8px}
.player-pack-card .dong-thong-tin{padding-bottom:10px}
.player-pack-card .dong-thong-tin .k{font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.player-pack-card .dong-thong-tin .v{font-size:15px}
.player-pack-card #tomTatKhoiNoiDung{display:block !important;margin-top:14px;font-size:14px;line-height:1.7;color:var(--text-soft)}
.player-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.player-stats .the-thong-ke{padding:7px 8px;border-radius:14px}
.player-stats .gia-tri{font-size:16px;font-weight:900;line-height:1.1}
.player-stats .nhan{font-size:10px;line-height:1.25;margin-top:3px}
.player-manage-card .hang-tai{width:100%}
.player-manage-actions .nut,.player-manage-actions .nut-file{flex:1 1 calc(50% - 8px)}
.float-link-left{position:fixed;left:14px;right:auto;top:58vh;z-index:10020;display:flex;align-items:center;justify-content:center;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.10);background:rgba(56,189,248,.34);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);color:#041623!important;border:1px solid rgba(255,255,255,.18);font-weight:900;padding:10px 14px;gap:6px;text-decoration:none;animation:floatPulse 3s ease-in-out infinite;font-size:14px;min-width:118px}
@keyframes floatPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (max-width:840px){.player-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){
  .player-home-hero{padding:22px 14px 18px}
  .player-top-actions{display:grid;grid-template-columns:auto 1fr;gap:10px;width:100%;align-items:center}
  .player-top-actions .chip{display:flex;align-items:center;justify-content:flex-start;text-align:left;min-height:40px}
  #chipTaiKhoan{max-width:100%}
  .player-current-pack-title{font-size:clamp(22px,7.2vw,34px)}
  .player-stats .the-thong-ke{padding:7px 8px}
  .float-link-left{left:10px;right:auto;top:56vh;min-width:112px;padding:9px 13px;font-size:14px}
}


.player-load-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(2,6,23,.58);backdrop-filter:blur(6px);z-index:10060}
.player-load-modal.open{display:flex}
.player-load-card{width:min(560px,100%);background:var(--panel-solid);color:var(--text);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:20px 18px}
.player-load-title{margin:0;font-size:24px;font-weight:900;line-height:1.2}
.player-load-pack{margin-top:10px;font-size:15px;line-height:1.6;color:var(--text-soft);font-weight:800}
.player-load-bar{margin-top:16px;height:12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--border);overflow:hidden}
.player-load-fill{height:100%;width:0%;background:linear-gradient(180deg,#38bdf8,#0ea5e9);transition:width .35s ease}
.player-load-step{margin-top:14px;font-size:14px;line-height:1.6;color:var(--text-soft);min-height:24px}
.player-load-success{margin-top:12px;font-size:15px;font-weight:900;color:#22c55e;display:none}
.player-load-actions{display:none;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.player-load-actions .nut{min-width:150px}
.player-load-autoclose{display:none;margin-top:10px;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
.player-load-autoclose.show{display:block}


.tieu-muc.player-start-highlight{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(56,189,248,.10);
  border:1px solid rgba(56,189,248,.28);
  box-shadow:0 0 0 1px rgba(56,189,248,.18),0 0 18px rgba(56,189,248,.16);
  color:var(--accent);
  transition:box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
#nutBatDau.player-start-highlight{
  box-shadow:0 0 0 1px rgba(56,189,248,.24),0 0 0 8px rgba(56,189,248,.10),0 0 26px rgba(56,189,248,.18);
  transition:box-shadow .25s ease;
}


#playerLoadStudyNow{
  background:linear-gradient(180deg,#38bdf8,#0ea5e9) !important;
  color:#082032 !important;
  border:none !important;
  min-width:150px;
  padding:15px 18px;
  border-radius:16px;
  text-decoration:none;
  text-align:center;
  font-weight:700;
}
#playerLoadStudyNow:active{transform:scale(.985)}


/* === REVIEW DEBT STEP 3: SỔ ĐEN THỰC CHIẾN UI === */
.ck-blackbook-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.66);display:none;align-items:center;justify-content:center;padding:18px;z-index:10050;backdrop-filter:blur(8px)}
.ck-blackbook-backdrop.active{display:flex}
.ck-blackbook-card{width:min(560px,100%);max-height:min(86vh,760px);overflow:auto;background:var(--panel-solid);color:var(--text);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:18px}
.ck-blackbook-title{font-size:22px;font-weight:950;line-height:1.2;margin:0 0 10px;color:var(--text)}
.ck-blackbook-lines{display:grid;gap:7px;margin:12px 0 14px;color:var(--text-soft);font-size:15px;line-height:1.55}
.ck-blackbook-main{font-size:16px;font-weight:900;color:var(--text);line-height:1.55;margin:0 0 12px}
.ck-blackbook-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.ck-blackbook-btn{appearance:none;border:none;cursor:pointer;border-radius:16px;font-weight:900;padding:13px 15px;background:linear-gradient(180deg,#38bdf8,#0ea5e9);color:#082032;flex:1 1 150px}
.ck-blackbook-btn.secondary{background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--border)}
body.sang .ck-blackbook-btn.secondary{background:rgba(15,23,42,.03)}
.ck-blackbook-choice-grid{display:grid;gap:10px;margin-top:12px}
.ck-blackbook-choice{appearance:none;border:1px solid var(--border);cursor:pointer;border-radius:16px;background:rgba(255,255,255,.04);color:var(--text);padding:13px 14px;text-align:left;font-weight:900}
body.sang .ck-blackbook-choice{background:rgba(15,23,42,.02)}
.ck-blackbook-choice small{display:block;font-size:12px;line-height:1.5;color:var(--muted);font-weight:700;margin-top:4px}
.ck-blackbook-funny{padding:13px 14px;border-radius:18px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.28);line-height:1.65;color:var(--text-soft);font-weight:800}

/* === REVIEW DEBT STEP 3L: SỔ ĐEN BEAR - CROPPED PNG, HALF SIZE === */
.ck-blackbook-bear{
  position:fixed;
  left:0;
  bottom:max(0px, env(safe-area-inset-bottom));
  right:auto;
  top:auto;
  z-index:10030;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:4px;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  /* Cho phép vuốt dọc qua vùng gấu để scroll trang; chỉ khóa touch khi thật sự kéo gấu. */
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.30));

  /* reset button default: chỉ còn gấu + badge, không còn ô vuông */
  appearance:none;
  -webkit-appearance:none;
  border:0;
  outline:0;
  background:transparent;
  padding:0;
  margin:0;
  box-shadow:none;
  color:inherit;
}
.ck-blackbook-bear.active{display:flex}
.ck-blackbook-bear.in-home,
.ck-blackbook-bear.in-learning{left:0;bottom:max(0px, env(safe-area-inset-bottom));right:auto;top:auto;z-index:10030}
.ck-blackbook-bear.custom-position{right:auto;bottom:auto}
.ck-blackbook-bear.dragging{cursor:grabbing;z-index:10060;touch-action:none}
.ck-blackbook-bear.dragging .ck-blackbook-bear-inner{transform:scale(1.04)}
.ck-blackbook-bear.dragging .ck-blackbook-badge{background:#0f172a;border-color:rgba(56,189,248,.55);box-shadow:0 0 0 1px rgba(56,189,248,.18),0 10px 26px rgba(0,0,0,.34)}
.ck-blackbook-bear:focus-visible .ck-blackbook-bear-img{outline:2px solid rgba(56,189,248,.75);outline-offset:4px;border-radius:18px}
.ck-blackbook-badge{
  position:relative;
  z-index:2;
  background:#050505;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:6px 9px;
  font-size:11px;
  line-height:1;
  font-weight:950;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(0,0,0,.30);
  transform:translateY(4px);
  pointer-events:none;
}
.ck-blackbook-bear-inner{
  position:relative;
  display:grid;
  place-items:center;
  transform-origin:50% 78%;
}
.ck-blackbook-bear-img{
  width:59px;
  height:auto;
  display:block;
  pointer-events:none;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transition:filter .32s ease, opacity .32s ease, transform .32s ease;
  transform:scaleX(-1) translateY(0);
  transform-origin:center bottom;
  -webkit-user-drag:none;
  user-select:none;
}

/* Gấu trắng/xám/đen theo nợ: vẫn giữ rung, bay, badge như bản 3B */
.ck-blackbook-bear.level-clean .ck-blackbook-bear-img{filter:none;opacity:1}
.ck-blackbook-bear.level-low .ck-blackbook-bear-img{filter:grayscale(.18) brightness(.92) contrast(1.04);opacity:.98}
.ck-blackbook-bear.level-mid .ck-blackbook-bear-img{filter:grayscale(.45) brightness(.78) contrast(1.08);opacity:.96}
.ck-blackbook-bear.level-high .ck-blackbook-bear-img{filter:grayscale(.82) brightness(.52) contrast(1.22);opacity:.94}
.ck-blackbook-bear.level-danger .ck-blackbook-bear-img{filter:grayscale(1) brightness(.08) contrast(2.4);opacity:.98}

.ck-blackbook-bear.level-clean .ck-blackbook-badge{background:#102018;border-color:rgba(34,197,94,.32)}
.ck-blackbook-bear.level-low .ck-blackbook-badge{background:#050505;border-color:rgba(255,255,255,.18)}
.ck-blackbook-bear.level-mid .ck-blackbook-badge{background:#111827;border-color:rgba(245,158,11,.35)}
.ck-blackbook-bear.level-high .ck-blackbook-badge{background:#180909;border-color:rgba(239,68,68,.42)}
.ck-blackbook-bear.level-danger .ck-blackbook-badge{background:#050505;border-color:rgba(248,113,113,.72);box-shadow:0 0 0 1px rgba(239,68,68,.18),0 0 24px rgba(239,68,68,.28)}
.ck-blackbook-bear.pulse-wrong .ck-blackbook-bear-inner{animation:ckBearWrongPulse .58s cubic-bezier(.2,.9,.3,1)}
.ck-blackbook-bear.pulse-good .ck-blackbook-bear-inner{animation:ckBearGoodPulse .62s cubic-bezier(.2,.9,.3,1)}
.ck-blackbook-bear.home-soft .ck-blackbook-bear-inner{animation:ckBearSoftShake 1.15s ease-in-out}
.ck-blackbook-bear.home-hard .ck-blackbook-bear-inner{animation:ckBearHardShake 1.25s ease-in-out}
.ck-blackbook-bear.rescue .ck-blackbook-bear-inner{animation:ckBearRescueFall 4.9s cubic-bezier(.22,.78,.22,1)}
@keyframes ckBearWrongPulse{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  18%{transform:translate3d(-4px,0,0) rotate(-8deg) scale(1.05)}
  36%{transform:translate3d(5px,-2px,0) rotate(8deg) scale(1.06)}
  54%{transform:translate3d(-3px,0,0) rotate(-5deg) scale(1.03)}
  74%{transform:translate3d(2px,0,0) rotate(3deg) scale(1.02)}
}
@keyframes ckBearGoodPulse{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  35%{transform:translate3d(0,-7px,0) scale(1.07)}
  70%{transform:translate3d(0,0,0) scale(.99)}
}
@keyframes ckBearSoftShake{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  20%{transform:translate3d(-3px,0,0) rotate(-4deg)}
  40%{transform:translate3d(3px,0,0) rotate(4deg)}
  60%{transform:translate3d(-2px,0,0) rotate(-2deg)}
  80%{transform:translate3d(2px,0,0) rotate(2deg)}
}
@keyframes ckBearHardShake{
  0%,100%{transform:translate3d(0,0,0) rotate(0) scale(1)}
  12%{transform:translate3d(-8px,-1px,0) rotate(-10deg) scale(1.04)}
  24%{transform:translate3d(8px,-2px,0) rotate(10deg) scale(1.05)}
  36%{transform:translate3d(-7px,0,0) rotate(-8deg) scale(1.04)}
  48%{transform:translate3d(7px,0,0) rotate(8deg) scale(1.04)}
  60%{transform:translate3d(-4px,0,0) rotate(-5deg) scale(1.02)}
  76%{transform:translate3d(4px,0,0) rotate(5deg) scale(1.02)}
}
@keyframes ckBearRescueFall{
  /* 0 → 1.4s: bay lên nhanh nhưng không giật */
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  28.6%{transform:translate3d(18px,-66vh,0) rotate(-18deg) scale(1.08)}
  /* 1.4s → 4.4s: rơi từ từ, xoay khoảng 2 vòng */
  43%{transform:translate3d(-16px,-50vh,0) rotate(160deg) scale(1.06)}
  58%{transform:translate3d(20px,-34vh,0) rotate(340deg) scale(1.04)}
  74%{transform:translate3d(-12px,-18vh,0) rotate(540deg) scale(1.03)}
  89.8%{transform:translate3d(8px,-2px,0) rotate(720deg) scale(1.02)}
  /* 4.4s → 4.9s: lăn/về chỗ */
  94%{transform:translate3d(12px,0,0) rotate(742deg) scale(1.01)}
  97%{transform:translate3d(-6px,0,0) rotate(710deg) scale(1.005)}
  100%{transform:translate3d(0,0,0) rotate(720deg) scale(1)}
}
@media (max-width:720px){
  .ck-blackbook-bear-img{width:56px}
  .ck-blackbook-badge{font-size:10px;padding:5px 7px;transform:translateY(4px)}
}
@media (prefers-reduced-motion: reduce){
  .ck-blackbook-bear.pulse-wrong .ck-blackbook-bear-inner,
  .ck-blackbook-bear.pulse-good .ck-blackbook-bear-inner,
  .ck-blackbook-bear.home-soft .ck-blackbook-bear-inner,
  .ck-blackbook-bear.home-hard .ck-blackbook-bear-inner,
  .ck-blackbook-bear.rescue .ck-blackbook-bear-inner{animation:none}
}
/* === END REVIEW DEBT STEP 3F === */

/* === END REVIEW DEBT STEP 3 === */


/* === LingoReflex STEP: SMOOTH PLAYER → SHOP TRANSITION === */
.shop-leave-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,6,23,.58);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  z-index:10090;
}
.shop-leave-overlay.active{display:flex}
.shop-leave-card{
  width:min(420px,100%);
  border-radius:24px;
  border:1px solid var(--border);
  background:var(--panel-solid);
  color:var(--text);
  box-shadow:var(--shadow);
  padding:20px 16px;
  text-align:center;
}
.shop-leave-brand{
  font-size:25px;
  font-weight:950;
  letter-spacing:-.02em;
  color:var(--accent);
  margin-bottom:10px;
}
.shop-leave-title{
  font-size:20px;
  font-weight:950;
  line-height:1.25;
  margin:0;
}
.shop-leave-sub{
  margin-top:8px;
  color:var(--text-soft);
  font-size:14px;
  line-height:1.55;
}
.shop-leave-bar{
  margin:14px auto 0;
  width:min(260px,86%);
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
}
.shop-leave-fill{
  width:45%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#38bdf8,#22c55e,#38bdf8);
  animation:shopLeaveMove .88s ease-in-out infinite;
}
@keyframes shopLeaveMove{
  0%{transform:translateX(-105%)}
  100%{transform:translateX(230%)}
}
@media (prefers-reduced-motion: reduce){
  .shop-leave-fill{animation:none;width:100%}
}
/* === END LingoReflex STEP === */

/* === LingoReflex: sentence variants / bien_the_cau === */
.lr-variants-box{
  margin-top:14px;
  padding:12px;
  border-radius:16px;
  background:rgba(56,189,248,.07);
  border:1px solid rgba(56,189,248,.18);
}
.lr-variants-box.compact{padding:10px;margin-top:12px}
.lr-variants-title{
  font-size:13px;
  font-weight:950;
  letter-spacing:.025em;
  color:var(--accent);
  margin-bottom:8px;
}
.lr-variants-list{display:grid;gap:9px}
.lr-variant-card{
  padding:10px 11px;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--border);
}
.lr-variant-purpose{
  font-size:12px;
  font-weight:900;
  color:var(--text-soft);
  text-transform:uppercase;
  letter-spacing:.035em;
  margin-bottom:5px;
}
.lr-variant-han{
  font-size:16px;
  line-height:1.55;
  font-weight:900;
  color:var(--text);
}
.lr-variant-pinyin,
.lr-variant-dich,
.lr-variant-meta{
  margin-top:4px;
  font-size:13px;
  line-height:1.55;
  color:var(--text-soft);
}
.lr-variant-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.lr-variant-meta span{
  padding:3px 7px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.035);
}
/* === END sentence variants === */

/* === SOUND CUE v12: nhóm phát âm trong Sổ đen === */
.ck-blackbook-pron-list{display:grid;gap:10px;margin:12px 0 4px}
.ck-blackbook-pron-item{appearance:none;width:100%;border:1px solid var(--border);border-radius:16px;background:rgba(56,189,248,.08);color:var(--text);padding:12px 13px;text-align:left;cursor:pointer;display:grid;gap:5px}
body.sang .ck-blackbook-pron-item{background:rgba(14,165,233,.07)}
.ck-blackbook-pron-item strong{font-size:17px;line-height:1.25;font-weight:950;word-break:break-word}
.ck-blackbook-pron-item span{font-size:13px;line-height:1.35;color:var(--text-soft);font-weight:900}
.ck-blackbook-pron-item em{font-style:normal;font-size:12px;line-height:1.4;color:var(--muted);font-weight:800}
.ck-blackbook-pron-item:active{transform:scale(.99)}

/* === Pronunciation Mode v20: mode riêng thay popup nổi === */
.pron-mode-shell{display:grid;gap:16px}.pron-mode-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--border);border-radius:22px;background:rgba(255,255,255,.045)}body.sang .pron-mode-top{background:rgba(15,23,42,.035)}.pron-kicker{font-size:12px;font-weight:950;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.pron-mode-top h3{margin:4px 0 6px;font-size:24px;line-height:1.1}.pron-mode-top p{margin:0;color:var(--text-soft);font-weight:750;line-height:1.45}.pron-switch-btn{white-space:nowrap}.pron-engine-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.pron-engine-card{appearance:none;text-align:left;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);border-radius:18px;padding:12px;display:grid;gap:6px;cursor:pointer}.pron-engine-card.active{border-color:rgba(56,189,248,.45);background:rgba(56,189,248,.10)}.pron-engine-card strong{font-size:15px;font-weight:1000}.pron-engine-card span{width:max-content;border-radius:999px;padding:4px 8px;background:rgba(148,163,184,.12);font-size:11px;font-weight:900;color:var(--text-soft)}.pron-engine-card em{font-style:normal;font-size:12px;line-height:1.45;color:var(--muted);font-weight:760}.pron-source-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.pron-panel{border:1px solid var(--border);border-radius:20px;background:rgba(255,255,255,.035);padding:13px;display:grid;gap:10px}body.sang .pron-panel{background:rgba(15,23,42,.025)}.pron-label{font-size:12px;font-weight:1000;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.pron-choice-list{display:grid;gap:8px;max-height:280px;overflow:auto;padding-right:2px}.pron-choice,.pron-sentence-card{appearance:none;text-align:left;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.045);color:var(--text);padding:10px 11px;display:grid;gap:4px;cursor:pointer}.pron-choice.active,.pron-sentence-card.active{border-color:rgba(56,189,248,.42);background:rgba(56,189,248,.10)}.pron-choice strong,.pron-sentence-card strong{font-size:14px;line-height:1.25;font-weight:950}.pron-choice span,.pron-sentence-card span{font-size:12px;line-height:1.35;color:var(--muted);font-weight:760}.pron-sentence-list{display:grid;gap:8px;max-height:360px;overflow:auto}.pron-sentence-card.self{border-style:dashed;border-color:rgba(34,197,94,.32);background:rgba(34,197,94,.06)}.pron-practice{gap:12px}.pron-practice-head{display:grid;gap:8px}.pron-textarea{width:100%;min-height:86px;resize:vertical;border:1px solid var(--border);border-radius:16px;background:rgba(2,6,23,.24);color:var(--text);padding:12px;font-size:19px;line-height:1.45;font-weight:900}body.sang .pron-textarea{background:rgba(255,255,255,.85);color:#0f172a}.pron-pinyin{display:grid;gap:5px;border:1px solid rgba(148,163,184,.18);background:rgba(148,163,184,.07);border-radius:15px;padding:10px 11px}.pron-pinyin strong{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.pron-pinyin span{font-size:14px;line-height:1.45;font-weight:850;color:var(--text-soft)}.pron-actions{display:flex;flex-wrap:wrap;gap:8px}.pron-chunks,.pron-weak{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.pron-chunks button,.pron-weak button{appearance:none;border:1px solid rgba(56,189,248,.26);background:rgba(56,189,248,.08);color:var(--text);border-radius:999px;padding:7px 10px;font-size:12px;font-weight:950;cursor:pointer}.pron-status{border:1px solid rgba(148,163,184,.18);background:rgba(148,163,184,.065);border-radius:14px;padding:9px 10px;color:var(--muted);font-size:13px;font-weight:800}.pron-result{display:grid;gap:10px}.pron-score{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid rgba(34,197,94,.24);background:rgba(34,197,94,.07);border-radius:16px;padding:11px}.pron-score span{font-weight:900;color:var(--text-soft)}.pron-score strong{font-size:28px;line-height:1;color:var(--text)}.pron-compare{display:grid;gap:6px;border:1px solid var(--border);border-radius:15px;padding:10px;background:rgba(255,255,255,.035)}.pron-compare strong{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.pron-compare div{font-size:17px;line-height:1.45;font-weight:850;color:var(--text)}#pronAudio audio{width:100%}@media(max-width:720px){.pron-mode-top{display:grid}.pron-source-grid,.pron-engine-switch{grid-template-columns:1fr}.pron-mode-top h3{font-size:22px}.pron-textarea{font-size:18px}.pron-score strong{font-size:24px}.pron-choice-list,.pron-sentence-list{max-height:none}}

/* === Pronunciation mode v22: basic engine đầy đủ hơn === */
.pron-tip{border:1px solid rgba(56,189,248,.22);background:rgba(56,189,248,.075);border-radius:15px;padding:10px;display:grid;gap:5px}
.pron-tip strong{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pron-tip span{font-size:13px;line-height:1.45;font-weight:850;color:var(--text-soft)}
.pron-compare small{font-size:11px;line-height:1.35;color:var(--muted);font-weight:760}
.pron-diff-line{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;padding:7px;border:1px solid rgba(148,163,184,.16);background:rgba(148,163,184,.055);border-radius:13px}
.pron-diff-line span{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:26px;border-radius:9px;padding:2px 6px;font-size:16px;line-height:1.2;font-weight:950;border:1px solid transparent;color:var(--text)}
.pron-diff-line span.ok{background:rgba(34,197,94,.09);border-color:rgba(34,197,94,.22)}
.pron-diff-line span.miss{background:rgba(239,68,68,.11);border-color:rgba(239,68,68,.28)}
.pron-audio-analysis{border:1px solid rgba(148,163,184,.20);background:rgba(148,163,184,.055);border-radius:15px;padding:10px;display:grid;gap:6px}
.pron-audio-analysis>strong{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pron-audio-analysis>div{display:flex;justify-content:space-between;gap:10px;font-size:12px;line-height:1.35;color:var(--text-soft);font-weight:850}
.pron-audio-analysis b{color:var(--text);font-weight:950;text-align:right}
.pron-tone-box{border:1px solid rgba(168,85,247,.20);background:rgba(168,85,247,.060);border-radius:16px;padding:10px;display:grid;gap:8px}
.pron-tone-box>strong{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pron-tone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:7px}
.pron-tone-cell{border:1px solid rgba(148,163,184,.20);background:rgba(255,255,255,.035);border-radius:13px;padding:8px;display:grid;gap:3px}
body.sang .pron-tone-cell{background:rgba(15,23,42,.025)}
.pron-tone-cell.good{border-color:rgba(34,197,94,.26);background:rgba(34,197,94,.065)}
.pron-tone-cell.ok{border-color:rgba(245,158,11,.26);background:rgba(245,158,11,.065)}
.pron-tone-cell.weak{border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.065)}
.pron-tone-cell b{font-size:14px;line-height:1.25;color:var(--text);font-weight:1000}
.pron-tone-cell span,.pron-tone-cell em{font-size:11px;line-height:1.25;color:var(--muted);font-weight:850;font-style:normal}
.pron-muted{font-size:12px;line-height:1.45;color:var(--muted);font-weight:800}
@media(max-width:720px){.pron-diff-line span{min-width:22px;min-height:24px;font-size:15px}.pron-tone-grid{grid-template-columns:1fr 1fr}.pron-audio-analysis>div{display:grid;gap:2px}.pron-audio-analysis b{text-align:left}}

/* === Pronunciation v23: engine manager sạch === */
.pron-engine-state{
  border:1px solid rgba(56,189,248,.20);
  background:rgba(56,189,248,.065);
  border-radius:16px;
  padding:10px 12px;
  display:grid;
  gap:4px;
  color:var(--text-soft);
  font-size:13px;
  line-height:1.4;
  font-weight:850;
}
.pron-engine-state strong{color:var(--text);font-weight:1000}
.pron-engine-state em{font-style:normal;color:var(--muted);font-size:12px;line-height:1.35}
.pron-engine-note{
  border:1px solid rgba(245,158,11,.26);
  background:rgba(245,158,11,.075);
  border-radius:15px;
  padding:9px 10px;
  color:var(--text-soft);
  font-size:12px;
  line-height:1.45;
  font-weight:850;
}
.pron-engine-card.active span{background:rgba(56,189,248,.18);color:var(--text)}
@media(max-width:720px){.pron-engine-state{font-size:12px}.pron-engine-note{font-size:11.5px}}

/* === Pronunciation v24: advanced lazy engine === */
.pron-advanced-box{border:1px solid rgba(56,189,248,.24);background:rgba(56,189,248,.065);border-radius:16px;padding:10px;display:grid;gap:8px}
.pron-advanced-box>strong{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pron-advanced-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:7px}
.pron-advanced-cell{border:1px solid rgba(148,163,184,.20);background:rgba(255,255,255,.035);border-radius:13px;padding:8px;display:grid;gap:3px}
body.sang .pron-advanced-cell{background:rgba(15,23,42,.025)}
.pron-advanced-cell.good{border-color:rgba(34,197,94,.26);background:rgba(34,197,94,.065)}
.pron-advanced-cell.ok{border-color:rgba(245,158,11,.26);background:rgba(245,158,11,.065)}
.pron-advanced-cell.weak{border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.065)}
.pron-advanced-cell b{font-size:14px;line-height:1.25;color:var(--text);font-weight:1000}
.pron-advanced-cell span,.pron-advanced-cell em{font-size:11px;line-height:1.25;color:var(--muted);font-weight:850;font-style:normal}
@media(max-width:720px){.pron-advanced-grid{grid-template-columns:1fr 1fr}}


/* === LingoReflex Pronunciation v25: Offline lazy engine === */
.pron-offline-box{border:1px solid rgba(168,85,247,.24);background:rgba(168,85,247,.065);border-radius:16px;padding:10px;display:grid;gap:8px}
.pron-offline-box>strong{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pron-offline-transcript{border:1px solid rgba(148,163,184,.20);background:rgba(255,255,255,.045);border-radius:13px;padding:9px 10px;color:var(--text);font-size:16px;line-height:1.45;font-weight:900}
body.sang .pron-offline-transcript{background:rgba(15,23,42,.025)}
.pron-offline-box.error,.pron-offline-box.weak{border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.065)}
.pron-offline-box.done{border-color:rgba(34,197,94,.26);background:rgba(34,197,94,.065)}


/* === Pronunciation Mode v26: production cleanup + mobile polish === */
.lr-soundcue-fab,
.lr-soundcue-panel,
.lr-soundcue-backdrop,
.lr-soundcue-sheet,
.lr-soundcue-launcher{
  display:none !important;
}
.pron-mode-shell{
  contain:layout paint;
}
.pron-panel,
.pron-practice,
.pron-result{
  content-visibility:auto;
  contain-intrinsic-size:280px;
}
.pron-mode-top{
  position:sticky;
  top:8px;
  z-index:7;
  backdrop-filter:blur(10px);
}
.pron-choice-list,
.pron-sentence-list{
  scrollbar-width:thin;
}
@media(max-width:720px){
  .pron-mode-shell{gap:12px}
  .pron-mode-top{top:6px;padding:12px;border-radius:18px}
  .pron-source-grid{gap:10px}
  .pron-panel{padding:11px;border-radius:17px}
  .pron-choice-list{max-height:min(38vh,330px);overflow:auto}
  .pron-sentence-list{max-height:min(46vh,430px);overflow:auto}
  .pron-actions .nut,
  .pron-actions .nut.phu{flex:1 1 calc(50% - 8px);min-width:0;padding-left:10px;padding-right:10px}
  .pron-chunks button,.pron-weak button{padding:8px 10px;font-size:12px}
  .pron-engine-switch{max-height:52vh;overflow:auto;padding-right:2px}
}
@media(max-width:420px){
  .pron-actions .nut,
  .pron-actions .nut.phu{flex-basis:100%}
  .pron-mode-top h3{font-size:20px}
  .pron-textarea{font-size:17px;min-height:78px}
}

/* === Pronunciation v27B: UI wording + model chooser popup + mobile controls === */
.pron-engine-switch[hidden]{display:none!important}
.pron-engine-switch{
  position:fixed!important;
  inset:0!important;
  z-index:9999!important;
  display:block!important;
  grid-template-columns:none!important;
  max-height:none!important;
  overflow:visible!important;
  padding:0!important;
}
.pron-engine-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.48);
  backdrop-filter:blur(10px);
}
.pron-engine-sheet{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  width:min(620px,calc(100vw - 28px));
  max-height:min(76vh,720px);
  overflow:auto;
  border:1px solid rgba(148,163,184,.26);
  border-radius:24px;
  padding:14px;
  background:rgba(15,23,42,.94);
  box-shadow:0 24px 80px rgba(0,0,0,.36);
  display:grid;
  gap:12px;
}
body.sang .pron-engine-sheet{background:rgba(255,255,255,.96);box-shadow:0 24px 80px rgba(15,23,42,.16)}
.pron-engine-sheet-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 6px;
}
.pron-engine-sheet-head strong{display:block;font-size:20px;line-height:1.15;color:var(--text);font-weight:1000}
.pron-engine-sheet-head span{display:block;margin-top:5px;font-size:13px;line-height:1.45;color:var(--muted);font-weight:760}
.pron-engine-close{
  appearance:none;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(148,163,184,.10);
  color:var(--text);
  width:38px;
  height:38px;
  border-radius:999px;
  font-size:24px;
  line-height:1;
  font-weight:800;
  cursor:pointer;
}
.pron-engine-sheet-list{display:grid;gap:10px}
.pron-engine-sheet .pron-engine-card{padding:14px;border-radius:18px;background:rgba(255,255,255,.045)}
body.sang .pron-engine-sheet .pron-engine-card{background:rgba(15,23,42,.025)}
.pron-engine-sheet .pron-engine-card.active{background:rgba(56,189,248,.13);border-color:rgba(56,189,248,.48)}
.pron-mode-top h3{font-size:22px}
.pron-mode-top p{font-size:14px;line-height:1.42}
.pron-switch-btn{font-weight:950}
.pron-actions-v27{
  display:grid!important;
  gap:10px!important;
}
.pron-action-row.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.pron-actions-v27 .nut{width:100%;min-height:54px;border-radius:16px;font-weight:950}
.pron-actions-v27 .pron-full{width:100%}
.pron-record-main{font-size:16px;min-height:58px!important}
.pron-record-main.busy{opacity:.78;filter:saturate(.82)}
.pron-rate-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(148,163,184,.06);
  border-radius:15px;
  padding:8px 10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.2;
  font-weight:900;
}
.pron-rate-row select{
  appearance:none;
  border:1px solid rgba(56,189,248,.30);
  background:rgba(56,189,248,.10);
  color:var(--text);
  border-radius:999px;
  padding:7px 28px 7px 12px;
  font-size:13px;
  font-weight:950;
}
.pron-score{display:grid!important;grid-template-columns:1fr auto;align-items:center}
.pron-score small{
  grid-column:1/-1;
  display:block;
  margin-top:2px;
  color:var(--text-soft);
  font-size:13px;
  line-height:1.35;
  font-weight:850;
}
@media(max-width:720px){
  .pron-engine-sheet{bottom:10px;width:calc(100vw - 20px);border-radius:22px;padding:12px;max-height:82vh}
  .pron-engine-sheet-head strong{font-size:18px}
  .pron-engine-sheet-head span{font-size:12px}
  .pron-mode-top{padding:12px!important;border-radius:20px!important}
  .pron-mode-top h3{font-size:21px;margin:3px 0 5px}
  .pron-mode-top p{font-size:13px}
  .pron-action-row.two{grid-template-columns:1fr 1fr;gap:8px}
  .pron-actions-v27 .nut{min-height:52px}
}

/* === Pronunciation v27C: sửa popup chọn mô hình chấm không bị cắt trên mobile === */
body.pron-model-sheet-open{overflow:hidden!important;touch-action:none}
#pronEngineSwitchGlobal.pron-engine-switch[hidden]{display:none!important}
#pronEngineSwitchGlobal.pron-engine-switch{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  width:100dvw!important;
  height:100dvh!important;
  z-index:2147483000!important;
  display:block!important;
  max-height:none!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  grid-template-columns:none!important;
  contain:layout style paint;
}
#pronEngineSwitchGlobal .pron-engine-backdrop{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background:rgba(2,6,23,.52)!important;
  backdrop-filter:blur(10px);
}
#pronEngineSwitchGlobal .pron-engine-sheet{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:max(10px,env(safe-area-inset-bottom))!important;
  top:auto!important;
  transform:translate3d(-50%,0,0)!important;
  width:min(620px,calc(100dvw - 24px))!important;
  max-width:calc(100dvw - 24px)!important;
  max-height:min(82dvh,720px)!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box!important;
  padding:14px!important;
  margin:0!important;
}
#pronEngineSwitchGlobal .pron-engine-sheet *{box-sizing:border-box;max-width:100%}
#pronEngineSwitchGlobal .pron-engine-sheet-head{position:sticky;top:0;z-index:1;background:inherit;border-radius:18px;padding:4px 4px 8px!important}
#pronEngineSwitchGlobal .pron-engine-card{
  width:100%!important;
  min-width:0!important;
  overflow-wrap:anywhere;
  word-break:normal;
}
#pronEngineSwitchGlobal .pron-engine-card strong,
#pronEngineSwitchGlobal .pron-engine-card em,
#pronEngineSwitchGlobal .pron-engine-card span{max-width:100%;overflow-wrap:anywhere}
@media(max-width:720px){
  #pronEngineSwitchGlobal .pron-engine-sheet{
    width:calc(100dvw - 18px)!important;
    max-width:calc(100dvw - 18px)!important;
    max-height:min(84dvh,760px)!important;
    border-radius:22px!important;
    padding:12px!important;
  }
  #pronEngineSwitchGlobal .pron-engine-sheet-head strong{font-size:18px!important}
  #pronEngineSwitchGlobal .pron-engine-sheet-head span{font-size:12px!important}
  #pronEngineSwitchGlobal .pron-engine-card{padding:13px!important;border-radius:17px!important}
}


/* === Pronunciation v28: căn giữa sticky và tinh chỉnh hiển thị điểm === */
.pron-mode-top{
  text-align:center;
  justify-items:center;
}
.pron-mode-top>div{
  width:100%;
  text-align:center;
}
.pron-mode-top .pron-switch-btn{
  justify-self:center;
  min-width:min(100%,260px);
}
.pron-engine-state{
  text-align:center;
  justify-items:center;
}
.pron-engine-state span,
.pron-engine-state em{
  text-align:center;
}
@media(max-width:720px){
  .pron-mode-top{align-items:center!important;text-align:center!important}
  .pron-mode-top h3,
  .pron-mode-top p,
  .pron-kicker{text-align:center!important}
  .pron-switch-btn{width:100%;max-width:320px;margin-inline:auto}
}

/* === Pronunciation v28B: căn giữa chắc hơn + tránh kết quả cũ đè bản ghi mới === */
body.pron-mode-active #manHinhHoc .hoc-dau{
  justify-content:center!important;
  text-align:center!important;
}
body.pron-mode-active #manHinhHoc .hoc-dau>div:first-child{
  width:100%!important;
  text-align:center!important;
}
body.pron-mode-active #tieuDeHoc,
body.pron-mode-active #manHinhHoc .hoc-dau .muted{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.pron-mode-active .pron-mode-top{
  display:grid!important;
  grid-template-columns:1fr!important;
  place-items:center!important;
  text-align:center!important;
}
body.pron-mode-active .pron-mode-top>div,
body.pron-mode-active .pron-mode-top h3,
body.pron-mode-active .pron-mode-top p,
body.pron-mode-active .pron-kicker,
body.pron-mode-active .pron-engine-state,
body.pron-mode-active .pron-engine-state span,
body.pron-mode-active .pron-engine-state em{
  width:100%!important;
  text-align:center!important;
  justify-self:center!important;
}
body.pron-mode-active .pron-switch-btn{
  justify-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* === Pronunciation v30B: chip nổi “Giữ để đọc” polish === */
body.pron-mode-active{
  padding-bottom:92px;
}
.pron-hold-dock{
  position:fixed;
  left:50%;
  bottom:max(14px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(92vw,520px);
  min-height:62px;
  padding:10px 18px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(255,214,102,.96),rgba(255,122,89,.96));
  color:#1f1300;
  box-shadow:0 18px 45px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.32);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  z-index:1200;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  font-family:inherit;
}
.pron-hold-dock strong{font-size:17px;line-height:1.1;font-weight:900;letter-spacing:.01em}
.pron-hold-dock span{font-size:12px;font-weight:700;opacity:.86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pron-hold-dock.starting{
  background:linear-gradient(135deg,rgba(255,236,170,.98),rgba(255,177,117,.98));
  color:#231304;
  cursor:wait;
}
.pron-hold-dock.recording{
  background:linear-gradient(135deg,rgba(129,255,205,.98),rgba(69,188,255,.98));
  color:#04191c;
  animation:pronHoldPulse 1.05s ease-in-out infinite;
}
.pron-hold-dock.busy{
  background:linear-gradient(135deg,rgba(214,204,255,.98),rgba(154,203,255,.98));
  color:#130b2c;
  cursor:progress;
  animation:none;
}
.pron-hold-dock:disabled{opacity:.92}
@keyframes pronHoldPulse{
  0%,100%{transform:translateX(-50%) scale(1);box-shadow:0 18px 45px rgba(0,0,0,.35),0 0 0 0 rgba(83,224,180,.32)}
  50%{transform:translateX(-50%) scale(1.018);box-shadow:0 18px 45px rgba(0,0,0,.35),0 0 0 12px rgba(83,224,180,0)}
}
@media(min-width:780px){
  body.pron-mode-active{padding-bottom:110px}
  .pron-hold-dock{bottom:22px;min-height:66px}
}

/* === Pronunciation v30E: câu dài luyện theo cụm === */
.pron-long-guide{
  display:grid;
  gap:8px;
  border:1px solid rgba(251,191,36,.28);
  background:rgba(251,191,36,.08);
  border-radius:16px;
  padding:11px;
}
.pron-long-guide strong{
  font-size:13px;
  font-weight:950;
  color:var(--text);
}
.pron-long-guide span{
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
  font-weight:780;
}
.pron-full-line{
  font-size:15px;
  line-height:1.5;
  font-weight:900;
  color:var(--text-soft);
  padding:8px 10px;
  border-radius:13px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(148,163,184,.14);
}
body.sang .pron-full-line{background:rgba(255,255,255,.72)}


/* === Pronunciation v30F: độ tin cậy và metric kết quả === */
.pron-metrics-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.pron-metric-card{
  border:1px solid rgba(148,163,184,.18);
  background:rgba(148,163,184,.065);
  border-radius:15px;
  padding:10px;
  display:grid;
  gap:5px;
}
.pron-metric-card b{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
  font-weight:1000;
}
.pron-metric-card strong{
  font-size:18px;
  line-height:1.1;
  color:var(--text);
  font-weight:1000;
}
.pron-metric-card span{
  color:var(--text-soft);
  font-size:11.5px;
  line-height:1.35;
  font-weight:780;
}
.pron-reliability{
  border:1px solid rgba(56,189,248,.22);
  background:rgba(56,189,248,.08);
  border-radius:15px;
  padding:10px 11px;
  display:grid;
  gap:4px;
}
.pron-reliability strong{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text);
  font-weight:1000;
}
.pron-reliability span{
  color:var(--text-soft);
  font-size:13px;
  line-height:1.4;
  font-weight:820;
}
.pron-reliability.high{border-color:rgba(34,197,94,.24);background:rgba(34,197,94,.075)}
.pron-reliability.mid{border-color:rgba(234,179,8,.24);background:rgba(234,179,8,.075)}
.pron-reliability.low{border-color:rgba(248,113,113,.26);background:rgba(248,113,113,.075)}
@media(max-width:720px){
  .pron-metrics-row{grid-template-columns:1fr}
  .pron-metric-card{padding:9px 10px}
}

/* v30G - Gợi âm Việt hóa: dòng chính đọc được ngay, tone hint để riêng */
.pron-cue-card{gap:7px}
.pron-cue-box{display:grid;gap:6px}
.pron-cue-main{font-size:16px;line-height:1.55;font-weight:950;color:var(--text);letter-spacing:.01em}
.pron-cue-tone{font-size:12px;line-height:1.45;font-weight:760;color:var(--muted)}
.pron-cue-tone b{color:var(--text-soft);font-weight:950}
@media(max-width:720px){.pron-cue-main{font-size:17px;line-height:1.55}.pron-cue-tone{font-size:12px}}


/* === Pronunciation v30J: gom nút ghi âm + giữ để đọc, bỏ chip bay === */
body.pron-mode-active{padding-bottom:0!important}
.pron-hold-inline{
  appearance:none;
  width:100%;
  min-height:60px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,214,102,.96),rgba(255,122,89,.96));
  color:#1f1300;
  box-shadow:0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.30);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  font-family:inherit;
  font-weight:950;
}
.pron-hold-inline strong{font-size:17px;line-height:1.1;font-weight:1000;letter-spacing:.01em}
.pron-hold-inline span{font-size:12px;font-weight:800;opacity:.86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pron-hold-inline.starting{background:linear-gradient(135deg,rgba(255,236,170,.98),rgba(255,177,117,.98));color:#231304;cursor:wait}
.pron-hold-inline.recording{background:linear-gradient(135deg,rgba(129,255,205,.98),rgba(69,188,255,.98));color:#04191c;animation:pronHoldInlinePulse 1.05s ease-in-out infinite}
.pron-hold-inline.busy{background:linear-gradient(135deg,rgba(214,204,255,.98),rgba(154,203,255,.98));color:#130b2c;cursor:progress;animation:none}
.pron-hold-inline:disabled{opacity:.92}
@keyframes pronHoldInlinePulse{
  0%,100%{transform:scale(1);box-shadow:0 10px 26px rgba(0,0,0,.18),0 0 0 0 rgba(83,224,180,.32)}
  50%{transform:scale(1.012);box-shadow:0 10px 26px rgba(0,0,0,.18),0 0 0 10px rgba(83,224,180,0)}
}

/* === RAW Flow Mother rendering support (2026-05-07) === */
.workflow-intro{margin-top:12px;padding:14px 16px;border-radius:18px;background:rgba(250,204,21,.08);border:1px solid rgba(250,204,21,.18);color:var(--text-soft);line-height:1.75;font-weight:700}
.workflow-goal p{margin:6px 0 0}.workflow-risk{border-color:rgba(248,113,113,.24);background:rgba(248,113,113,.08)}
.workflow-step-rich{position:relative;overflow:hidden}.workflow-step-head{display:flex;align-items:center;gap:8px}.workflow-mini-goal{margin-top:8px;color:var(--accent);font-size:13px;font-weight:900;line-height:1.55}.workflow-action{margin-top:8px}.workflow-insight{margin-top:10px;padding:12px 14px;border-radius:14px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.18);color:var(--text-soft);font-size:13px;line-height:1.65}.workflow-trap{margin-top:10px;padding:12px 14px;border-radius:14px;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.20);color:var(--text-soft);font-size:13px;line-height:1.65}.workflow-outcome{font-weight:800}.pin,.goi-am{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.5}

/* === Lingoreflex Play cockpit refactor overrides (visual only) === */
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  background:var(--hero-grad);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.015em;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom, black, transparent 72%);
  z-index:-1;
}
body.sang{background:var(--hero-grad)!important;color:var(--text)!important}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.lr-header{
  position:sticky;top:0;z-index:10000;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:rgba(8,10,11,.74);
  border-bottom:1px solid rgba(232,236,235,.08);
}
.lr-header-inner{width:min(var(--max),calc(100% - 40px));height:76px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.lr-logo{display:flex;flex-direction:column;gap:3px;min-width:160px}
.lr-logo strong{color:var(--text);font-size:22px;letter-spacing:-.055em;line-height:1}
.lr-logo span{color:var(--muted);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.lr-header-actions{display:flex;align-items:center;gap:10px}
.lr-nav-link{min-width:auto!important;text-decoration:none!important}
.app{width:min(var(--max),calc(100% - 40px));max-width:none;margin:0 auto;min-height:100vh;padding:42px 0 56px}
.man-hinh{display:none}.man-hinh.hien{display:block}
.hero,.panel,.khoi,.khoi-phu,.modal-card,.player-load-card,.shop-leave-card,.player-owned-panel,.player-owned-item,.pack-history-item,.board-item,.workflow-step,.recall-row,.recall-summary,.compact-board-bar,.compact-tools-menu{
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
  box-shadow:var(--shadow);
  color:var(--text);
}
.hero,.panel{border-radius:34px;backdrop-filter:none;position:relative;overflow:hidden}
.hero::before,.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:42px 42px;opacity:.18;mask-image:radial-gradient(circle at 50% 20%, black, transparent 72%);
}
.hero>* , .panel>*{position:relative;z-index:1}
.hero{padding:clamp(32px,5vw,62px);min-height:520px;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018)),radial-gradient(circle at top right,rgba(62,232,222,.1),transparent 34%)}
.panel{padding:clamp(22px,3.4vw,34px);margin-top:24px}
.player-home-hero{display:grid;gap:22px}
.hang-dau,.hoc-dau{display:flex;gap:18px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.player-hero-head{align-items:flex-start}
.tieu-de{font-size:clamp(46px,7vw,92px);line-height:.94;letter-spacing:-.075em;font-weight:950;max-width:900px;margin:0 0 20px;color:var(--text)}
.mo-ta{color:var(--muted);font-size:clamp(16px,2vw,20px);line-height:1.65;max-width:780px;margin:0}
.mo-ta strong{color:var(--soft);font-weight:850}
.play-hero-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.pill,.chip,.nho-chip,.badge,.tone-badge,.engine-chip,.pack-meta-pill{
  display:inline-flex;align-items:center;width:fit-content;padding:8px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.025);line-height:1;
}
.chip{font-size:12px;letter-spacing:.04em;text-transform:none;color:var(--soft)}
.chip.xanh{color:var(--gold);border-color:rgba(244,199,106,.3);background:rgba(244,199,106,.07)}
#chipTaiKhoan{max-width:280px;white-space:normal;line-height:1.35;color:var(--muted)}
.player-top-actions{display:flex;gap:10px;align-items:flex-start;justify-content:flex-end;flex-wrap:wrap}
.nut-theme,#nutThemeHoc,#compactThemeBtn{display:none!important}
.nut,.nut-file,.nut-nho,.the-lua-chon,.size-btn,.quick-menu-item{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--line-strong);color:var(--text);background:rgba(255,255,255,.035);cursor:pointer;transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease,opacity .25s ease;white-space:nowrap;font-weight:850;text-decoration:none;
}
.nut:hover,.nut-file:hover,.nut-nho:hover,.the-lua-chon:hover,.size-btn:hover{transform:translateY(-2px);border-color:rgba(62,232,222,.52);background:rgba(62,232,222,.08)}
.nut,.nut-file:not(.phu){background:var(--cyan);color:#031011;border-color:transparent;box-shadow:0 20px 52px rgba(62,232,222,.14);font-weight:900}
.nut:hover,.nut-file:not(.phu):hover{background:#83fff8}
.nut.phu,.nut-file.phu,.nut-nho,.size-btn{background:rgba(255,255,255,.035);color:var(--text);border:1px solid var(--line-strong)}
.nut-nho{min-height:40px;padding:0 14px;font-size:13px}.size-btn{min-width:120px}
.size-btn.active,.the-lua-chon.active,.mode-group-option.active{background:rgba(62,232,222,.09);border-color:rgba(62,232,222,.42);box-shadow:inset 0 0 0 1px rgba(62,232,222,.08)}
button:disabled,.nut:disabled,.nut-nho:disabled{opacity:.55;cursor:not-allowed;transform:none}
.actions,.hanh-dong,.hanh-dong-nho,.hang-tai,.chon-size,.chon-mode{display:flex;gap:12px;flex-wrap:wrap}
.play-home-kicker,.tieu-muc,.mode-group-title,.panel-kicker{
  display:inline-flex;align-items:center;gap:10px;color:var(--cyan);font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin:22px 0 14px;
}
.play-home-kicker::before,.tieu-muc::before{content:"";width:34px;height:1px;background:var(--cyan);box-shadow:0 0 16px var(--cyan)}
.player-owned-inline{align-items:stretch;margin-top:6px}.player-owned-chip-wrap{justify-content:flex-start}
#nutMoThuVienTop{position:relative;min-height:92px;width:100%;justify-content:flex-start;text-align:left;padding:22px 24px;border-radius:var(--radius-lg);background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018));border:1px solid var(--line);overflow:hidden;box-shadow:0 20px 70px rgba(0,0,0,.16)}
#nutMoThuVienTop::after{content:"Training Pack Library";position:absolute;right:22px;top:20px;color:rgba(255,255,255,.075);font-size:42px;font-weight:950;letter-spacing:-.07em;line-height:1;pointer-events:none}
#nutMoThuVienTop .chip-mascot{display:none!important}
#nutMoThuVienTop .main{position:relative;z-index:2;display:block;font-size:clamp(24px,3vw,34px);font-weight:950;line-height:1.05;letter-spacing:-.055em;color:var(--text)}
#nutMoThuVienTop .sub{position:relative;z-index:2;display:block;margin-top:8px;color:var(--muted);font-size:14px;letter-spacing:0;text-transform:none;font-weight:700}
.player-owned-panel{display:none;margin-top:12px;padding:18px;border-radius:24px;background:rgba(13,16,18,.94);box-shadow:0 18px 70px rgba(0,0,0,.28)}
.player-owned-panel.open{display:block}.player-owned-list{display:grid;gap:10px;margin-top:8px}.player-owned-item{padding:14px;border-radius:18px;background:rgba(255,255,255,.035);box-shadow:none}.player-owned-empty,.player-owned-loading{color:var(--muted);line-height:1.6}
.player-login-strip{margin-top:0}.player-pack-chip-under-login{margin-top:4px}.player-stats,.thong-ke{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
.the-thong-ke{border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(255,255,255,.025);padding:18px;box-shadow:none}.gia-tri{font-size:32px;font-weight:950;color:var(--text);letter-spacing:-.04em}.nhan{color:var(--muted);font-size:12px;line-height:1.35;margin-top:3px}
#vungChonCachHoc{margin-top:12px}.chon-mode{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.the-lua-chon{min-height:132px;border-radius:24px;padding:20px;justify-content:flex-start;align-items:flex-start;text-align:left;white-space:normal;background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018));box-shadow:0 20px 70px rgba(0,0,0,.12)}
.the-lua-chon .ten{font-size:20px;line-height:1.08;letter-spacing:-.04em;font-weight:950;color:var(--text)}
.the-lua-chon .mo-ta,.che-do-note{font-size:13px;line-height:1.55;margin-top:9px;color:var(--muted);font-weight:650}.the-lua-chon.tat{opacity:.38;cursor:not-allowed;pointer-events:none}
.mode-group-panel{grid-column:1/-1;padding:16px;border-radius:24px;background:rgba(62,232,222,.055);border:1px solid rgba(62,232,222,.18);display:grid;gap:12px}.mode-group-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.mode-group-option{border-radius:18px;padding:14px;background:rgba(255,255,255,.035);border:1px solid var(--line);color:var(--text);text-align:left;font-weight:900}.mode-group-option .mo-ta{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--muted);font-weight:650}
#hopLuaChonCheDo{margin-top:4px}.size-btn{min-height:48px;border-radius:999px;padding:0 18px}.size-btn.active{color:var(--cyan)}
#vungNutBatDau{margin-top:20px!important}#nutBatDau{min-width:200px}
.workflow-step{padding:18px;border-radius:24px;background:rgba(244,199,106,.055);border-color:rgba(244,199,106,.22);box-shadow:none}.workflow-step h3{color:var(--gold)}
.player-manage-card,.player-account-summary,.player-pack-card{border-radius:var(--radius-lg);padding:24px!important;background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018));box-shadow:0 20px 70px rgba(0,0,0,.14)}
.player-manage-card{opacity:.9}.player-account-summary{border-color:rgba(62,232,222,.16)}.player-pack-card{border-color:rgba(244,199,106,.22);background:radial-gradient(circle at 90% 0%,rgba(244,199,106,.08),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018))}
.player-account-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.player-account-item{padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025)}.player-account-item .k{color:var(--muted);font-size:12px}.player-account-item .v{margin-top:6px;font-weight:900;color:var(--text);overflow-wrap:anywhere}.status,.trang-thai{color:var(--muted);line-height:1.6;font-size:14px}.player-current-pack-title{font-size:clamp(26px,3vw,36px);line-height:1.05;letter-spacing:-.055em;font-weight:950;color:var(--text);margin-top:10px}.player-mini-chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.thong-tin-goi{display:grid;gap:10px}.dong-thong-tin{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding:10px 0}.dong-thong-tin .k{color:var(--muted);font-size:13px}.dong-thong-tin .v{text-align:right;font-weight:850;color:var(--soft)}
.float-link-left{left:auto!important;right:18px;top:auto!important;bottom:24px!important;z-index:10020;min-width:auto;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(62,232,222,.24);background:rgba(20,24,27,.78)!important;color:var(--text)!important;box-shadow:0 18px 60px rgba(0,0,0,.28);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:none;font-size:13px;font-weight:900}.float-link-left::before{content:"Get more packs · ";color:var(--muted);font-weight:800}.float-link-left:hover{border-color:rgba(62,232,222,.55);background:rgba(62,232,222,.08)!important}
#manHinhHoc .panel{min-height:calc(100vh - 132px);padding:clamp(18px,3vw,30px);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),radial-gradient(circle at 80% 0%,rgba(62,232,222,.08),transparent 30%)}
.hoc-dau{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}.hoc-dau h2{margin:0;font-size:clamp(28px,4vw,44px);line-height:1;letter-spacing:-.055em;color:var(--text)}.muted{color:var(--muted);line-height:1.55}.hanh-dong-nho{justify-content:flex-end}.thanh-trang-thai{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:4px 0 14px}.thanh-trang-thai .item{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:16px;padding:12px 14px;color:var(--muted);font-size:13px}.thanh-trang-thai strong{color:var(--soft)}
.reflex-rail{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:10px;margin:14px 0 16px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em}.rail-step{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.025);font-weight:900;white-space:nowrap}.rail-play{color:var(--cyan);border-color:rgba(62,232,222,.28);background:rgba(62,232,222,.06)}.rail-recall{color:var(--gold);border-color:rgba(244,199,106,.32);background:rgba(244,199,106,.07)}.rail-review{color:var(--cyan);border-color:rgba(62,232,222,.28);background:rgba(62,232,222,.06)}.rail-line{height:1px;background:linear-gradient(90deg,transparent,rgba(62,232,222,.75),transparent)}
.vung-noi-dung{min-height:260px;padding:clamp(18px,3vw,28px);border-radius:28px;background:rgba(8,10,11,.62);border:1px solid var(--line);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}.noi-dung-tieu-de{font-size:clamp(32px,5vw,56px);line-height:1.04;letter-spacing:-.06em}.noi-dung-phu{color:var(--muted);font-size:17px;line-height:1.7}.chu-lon{font-size:clamp(42px,7vw,76px);font-weight:950;letter-spacing:-.05em}.pin{color:var(--muted);font-size:16px}.goi-am{color:var(--gold)}.nghia{color:var(--soft)}
.khoi-phu{border-radius:22px;background:rgba(62,232,222,.055);border:1px solid rgba(62,232,222,.18);box-shadow:none}.khoi-phu h4{color:var(--cyan);font-size:12px;letter-spacing:.12em;text-transform:uppercase}.review-card,.deep-item,.check-col,.kich-ban-item,.cn-viet-item{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:18px}
#khoiBoard{padding:0}.board{gap:12px}.card{border-radius:22px}.card-face{border-radius:22px;border:1px solid var(--line)}.card-front{background:radial-gradient(circle at top right,rgba(62,232,222,.26),transparent 42%),linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.018));box-shadow:0 18px 50px rgba(0,0,0,.18),inset 0 0 0 1px rgba(62,232,222,.09)}.card-front .mark{background:rgba(62,232,222,.1);color:var(--cyan);border:1px solid rgba(62,232,222,.2)}.card-back{background:rgba(242,244,239,.96);color:#071010}.card-back.term-side .main{color:#0e7773}.card.matched .card-back{box-shadow:0 0 0 2px rgba(244,199,106,.46),0 18px 44px rgba(244,199,106,.14)}
.deep-review{margin-top:16px;padding:20px;border-radius:28px;background:radial-gradient(circle at top right,rgba(62,232,222,.1),transparent 34%),linear-gradient(180deg,rgba(62,232,222,.075),rgba(255,255,255,.018));border:1px solid rgba(62,232,222,.28);box-shadow:0 20px 70px rgba(0,0,0,.18)}.deep-review-title{color:var(--cyan);font-size:12px;letter-spacing:.14em}.deep-review-sub{color:var(--muted)}.deep-item-title{color:var(--text);font-size:18px}.deep-item-title .han{color:var(--cyan)}.deep-item-body{color:var(--soft)}
.modal-backdrop{background:rgba(0,0,0,.66);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:18px;z-index:11000}.modal-card{border-radius:30px;background:rgba(13,16,18,.96);box-shadow:var(--shadow)}.modal-head{background:rgba(13,16,18,.96);border-bottom:1px solid var(--line);padding:20px 22px 14px}.modal-head h3{font-size:30px;line-height:1;letter-spacing:-.045em}.modal-body{padding:18px 22px 22px}.recall-row{background:rgba(244,199,106,.045);border-color:rgba(244,199,106,.18);border-radius:20px}.recall-input{border:1px solid rgba(244,199,106,.32);background:rgba(244,199,106,.055);color:var(--gold);border-radius:16px}.recall-helper.bad{color:var(--gold)}.recall-helper.good{color:var(--cyan)}.recall-summary{border-radius:20px;background:rgba(255,255,255,.035)}
.compact-board-bar{border-radius:20px;background:rgba(13,16,18,.86);box-shadow:0 12px 44px rgba(0,0,0,.22)}.compact-tools-menu{background:rgba(13,16,18,.98);border-radius:18px}.compact-board-title{color:var(--text)}.compact-board-sub{color:var(--muted)}
.player-load-modal,.shop-leave-overlay{background:rgba(0,0,0,.66);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.player-load-fill,.shop-leave-fill{background:var(--cyan)}.player-load-success{color:var(--cyan)}.shop-leave-brand{color:var(--text)}.shop-leave-title{color:var(--text)}.shop-leave-sub{color:var(--muted)}
.back-to-top-btn{background:var(--cyan);color:#031011!important;border-color:transparent;box-shadow:0 18px 52px rgba(62,232,222,.18)}.floating-nav-btn{color:var(--text);text-shadow:0 10px 36px rgba(0,0,0,.55)}.speak-btn{color:var(--cyan)}
body.sang .khoi,body.sang .khoi-phu,body.sang .the-thong-ke,body.sang .review-card,body.sang .deep-item,body.sang .recall-row,body.sang .board-item,body.sang .workflow-step,body.sang .player-owned-panel,body.sang .player-owned-item,body.sang .pack-history-item,body.sang .compact-board-bar,body.sang .cn-viet-item{background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018));color:var(--text)}
@media (max-width:1040px){.player-stats,.thong-ke{grid-template-columns:repeat(2,minmax(0,1fr))}.player-account-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chon-mode{grid-template-columns:1fr}}
@media (max-width:720px){
  .lr-header-inner,.app{width:min(100% - 28px,var(--max))}.lr-header-inner{height:68px}.lr-logo strong{font-size:20px}.lr-logo span{font-size:9px}.lr-header-actions{gap:7px}.lr-header-actions .nut-nho{min-height:38px;padding:0 11px;font-size:12px}.app{padding-top:24px}.hero{padding:34px 20px;border-radius:28px;min-height:auto}.panel{padding:22px 18px;border-radius:28px}.tieu-de{font-size:clamp(40px,13vw,58px)}.player-stats,.thong-ke,.player-account-grid,.thanh-trang-thai{grid-template-columns:1fr}.hanh-dong,.hanh-dong-nho,.hang-tai,.actions{width:100%}.nut,.nut-file,.nut-nho,.size-btn{flex:1 1 auto;text-align:center}.the-lua-chon{min-height:auto;padding:18px;border-radius:22px}.player-manage-card,.player-account-summary,.player-pack-card{padding:20px!important;border-radius:24px}#nutMoThuVienTop{min-height:86px;padding:20px;border-radius:24px}#nutMoThuVienTop::after{font-size:32px;opacity:.75}.reflex-rail{grid-template-columns:1fr;gap:8px}.rail-line{display:none}.vung-noi-dung{padding:20px 16px;border-radius:24px}.board.cols-4{grid-template-columns:repeat(4,1fr)}.card{min-height:100px}.float-link-left{right:12px;bottom:14px!important;min-height:40px;padding:0 14px;font-size:13px}.float-link-left::before{content:""}.modal-card{border-radius:24px}.modal-head{padding:18px}.modal-title,.modal-head h3{font-size:24px}.modal-body{padding:16px 18px 18px}
}
@media (max-width:520px){.board.cols-3{grid-template-columns:repeat(3,1fr)}.board.cols-4{grid-template-columns:repeat(3,1fr)}.card{min-height:92px}.card-back .main{font-size:15px}.lr-logo{min-width:132px}.lr-header-actions .lr-nav-link:first-child{display:none}}

/* saved light-mode preference is visually neutralized; the public UI stays dark-only */
body.sang .nut.phu,body.sang .nut-file.phu,body.sang .nut-nho,body.sang .size-btn,body.sang .the-lua-chon,body.sang .mode-group-option,body.sang .lua-chon-trac-nghiem button,body.sang .hop-ket-qua,body.sang .nut-danh-dau.clear-mark{background:rgba(255,255,255,.035)!important;color:var(--text)!important;border-color:var(--line-strong)!important}
body.sang .modal-head,body.sang .modal-card,body.sang .compact-tools-menu,body.sang .player-load-card{background:rgba(13,16,18,.96)!important;color:var(--text)!important}
body.sang .card-back{background:rgba(242,244,239,.96)!important;color:#071010!important}