:root { --py-initial:#1b7a3a; --py-final:#1560bd; --py-group:#7a2e9e; --py-hl:#fff3cd; --py-hd:#d62d20; }
[data-bs-theme="dark"] { --py-initial:#6fd28b; --py-final:#7db4ff; --py-group:#d3a2f0; --py-hl:#4a3f12; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif; }
.hanzi, .hanzi-logo { font-family: "Noto Serif SC", "Songti SC", "SimSun", "Noto Sans CJK SC", serif; }
.hanzi-logo { display:inline-block; background:#b3261e; color:#fff; border-radius:6px; padding:0 6px; margin-right:4px; }
.card-big { max-width: 640px; margin: 0 auto; }
.hz-xl { font-size: clamp(64px, 18vw, 120px); line-height: 1.1; }
.opt-btn { font-size: 1.25rem; padding: .75rem; }
.opt-btn.ok { background:#198754 !important; color:#fff !important; border-color:#198754 !important; }
.opt-btn.ng { background:#dc3545 !important; color:#fff !important; border-color:#dc3545 !important; }
.vi-read { color: var(--bs-secondary-color); }

/* Bảng pinyin */
.py-wrap { overflow:auto; max-height: calc(100vh - 230px); border:1px solid var(--bs-border-color); border-radius:8px; }
table.py { border-collapse: separate; border-spacing:0; font-size:14px; }
table.py th, table.py td { padding:3px 6px; border-right:1px solid var(--bs-border-color-translucent); border-bottom:1px solid var(--bs-border-color-translucent); text-align:center; white-space:nowrap; }
table.py thead th { position:sticky; top:0; z-index:3; background:var(--bs-tertiary-bg); color:var(--py-final); font-size:17px; font-weight:700; }
table.py tbody th { position:sticky; left:0; z-index:2; background:var(--bs-tertiary-bg); color:var(--py-initial); font-size:18px; font-weight:700; }
table.py thead th:first-child { left:0; z-index:4; }
table.py th.grp { color:var(--py-group); font-size:19px; }
table.py td.cell { cursor:pointer; min-width:44px; }
table.py td.cell:hover { outline:2px solid var(--py-hd); outline-offset:-2px; }
table.py td.cell.empty { cursor:default; }
table.py td.cell.dim { opacity:.35; }
table.py td.cell.sel { background:#cfe2ff !important; }
table.py .hl { background: var(--py-hl); }
table.py th.hl-head { background: var(--py-hd) !important; color:#fff !important; }
.py-tip { position:fixed; z-index:2000; background:var(--bs-body-bg); color:var(--bs-body-color); border:1px solid var(--bs-border-color); border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.25); padding:8px 10px; font-size:14px; max-width:260px; }
.py-tip .tl { display:flex; gap:8px; align-items:center; padding:2px 4px; border-radius:6px; cursor:pointer; }
.py-tip .tl:hover { background:var(--bs-tertiary-bg); }
.py-tip .tl.none { opacity:.4; text-decoration:line-through; cursor:default; }
.py-toast { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:#212529; color:#fff; padding:8px 14px; border-radius:20px; z-index:3000; }
.bar { background: var(--bs-primary); border-radius:3px 3px 0 0; min-height:2px; }
@media (max-width: 576px) {
  table.py { font-size:12px; } table.py thead th { font-size:14px; } table.py tbody th { font-size:15px; }
  .opt-btn { font-size:1.1rem; }
}

/* Viết chữ Hán + sắp xếp câu */
.hw-box { width:170px; height:170px; border:1px dashed var(--bs-border-color); border-radius:8px; margin:4px; touch-action:none; background:
  linear-gradient(var(--bs-border-color-translucent),var(--bs-border-color-translucent)) center/100% 1px no-repeat,
  linear-gradient(var(--bs-border-color-translucent),var(--bs-border-color-translucent)) center/1px 100% no-repeat; }
.hw-box.active { border-color: var(--bs-primary); border-style: solid; }
.hw-box.done { border-color: var(--bs-success); }
.hw-box svg { display:block; }
.tile { font-size:1.5rem; min-width:3rem; }
.tile-line { min-height:64px; }
@media (max-width: 576px) { .hw-box { width:140px; height:140px; } }