/* "Luyện phát âm" — thẻ tương tác pinyin ↔ chú âm ↔ Hán tự gốc. Tông trầm ấm, prefix .lpa- */
.lpa-ov{ position:fixed; inset:0; z-index:1400; display:none; align-items:flex-start; justify-content:center;
  background:rgba(30,22,10,.55); backdrop-filter:blur(3px); padding:16px; overflow-y:auto; }
.lpa-ov.open{ display:flex; }
.lpa-sheet{ width:min(680px,96vw); margin:auto; background:linear-gradient(180deg,#faf3e2,#f2e7cf);
  border:1px solid #e2d4b3; border-radius:22px; box-shadow:0 24px 60px -20px rgba(40,25,5,.6); overflow:hidden;
  color:#3a3320; font-family:inherit; }
.lpa-head{ display:flex; align-items:center; gap:10px; padding:15px 18px; background:linear-gradient(165deg,#3c4720,#2c3419);
  color:#f6efdd; border-bottom:2px solid #a9781f; }
.lpa-head .t{ font-family:"Iowan Old Style",Palatino,Cambria, Georgia,serif; font-weight:800; font-size:1.12rem; flex:1; color:#e9dcb6; }
.lpa-head .x{ background:rgba(255,255,255,.16); border:none; color:#fff; width:34px; height:34px; border-radius:50%; font-size:1rem; cursor:pointer; }
.lpa-body{ padding:16px 18px 22px; }

/* danh sách bảng */
.lpa-intro{ font-size:.86rem; color:#8a7f63; margin-bottom:14px; }
.lpa-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.lpa-tile{ border:1px solid #e2d4b3; background:#fdf8ec; border-radius:15px; padding:13px 14px; cursor:pointer; transition:.15s; text-align:left; }
.lpa-tile:hover{ border-color:#c99a3a; transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(150,110,30,.5); }
.lpa-tile .nm{ font-weight:800; font-size:.95rem; color:#3c4720; }
.lpa-tile .ds{ font-size:.75rem; color:#8a7f63; margin-top:3px; line-height:1.4; }
.lpa-tile .mt{ font-size:.72rem; color:#a9781f; font-weight:700; margin-top:7px; }
.lpa-tile.origin{ background:linear-gradient(160deg,#f3e7c6,#efe0bf); border-color:#dcc487; }
.lpa-tile .sample{ font-family:"Noto Sans TC","Songti SC",serif; font-size:1.15rem; color:#7c2d26; margin-top:6px; letter-spacing:2px; }

/* chi tiết bảng */
.lpa-back{ background:none; border:none; color:#7c6a3e; font-weight:700; cursor:pointer; font-size:.9rem; padding:2px 0 10px; }
.lpa-dtitle{ font-family:"Iowan Old Style",Palatino,serif; font-weight:800; font-size:1.05rem; color:#3c4720; margin-bottom:10px; }
.lpa-tabs{ display:flex; gap:6px; background:#eadfc6; border-radius:12px; padding:3px; margin-bottom:14px; }
.lpa-tabs button{ flex:1; border:none; background:transparent; color:#7c6a3e; font-weight:700; font-size:.86rem; padding:8px; border-radius:9px; cursor:pointer; font-family:inherit; }
.lpa-tabs button.on{ background:#fff; color:#3c4720; box-shadow:0 2px 6px -2px rgba(0,0,0,.2); }

/* thẻ lật */
.lpa-flash{ text-align:center; }
.lpa-card{ position:relative; min-height:200px; border:1px solid #e2d4b3; border-radius:20px; background:#fdf8ec;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:22px; cursor:pointer;
  box-shadow:0 8px 22px -14px rgba(60,40,10,.4); }
.lpa-zh{ font-family:"Noto Sans TC","Songti SC",serif; font-size:4.2rem; line-height:1; color:#7c2d26; letter-spacing:3px; }
.lpa-zh.small{ font-size:2.6rem; }
.lpa-py{ font-size:1.9rem; font-weight:800; color:#3c4720; }
.lpa-hanzi{ font-family:"Noto Serif TC","Songti SC",serif; font-size:3.4rem; color:#2c3419; line-height:1; }
.lpa-sub{ font-size:.95rem; color:#8a7f63; }
.lpa-sub b{ color:#a9781f; }
.lpa-flip-hint{ font-size:.76rem; color:#a99; margin-top:4px; }
.lpa-ctrl{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; }
.lpa-ctrl button{ border:1px solid #e2d4b3; background:#fdf8ec; color:#3c4720; font-weight:800; border-radius:12px; padding:10px 16px; cursor:pointer; font-family:inherit; font-size:.95rem; }
.lpa-ctrl button:active{ transform:translateY(1px); }
.lpa-count{ font-size:.85rem; color:#8a7f63; font-variant-numeric:tabular-nums; min-width:64px; }
.lpa-toolbar{ display:flex; justify-content:center; gap:8px; margin-top:10px; }
.lpa-toolbar button{ border:none; background:#eadfc6; color:#7c6a3e; font-weight:700; border-radius:999px; padding:6px 13px; cursor:pointer; font-family:inherit; font-size:.8rem; }
.lpa-toolbar button.say{ background:linear-gradient(180deg,#e6f0d8,#d7e8c4); color:#3c6b28; }
.lpa-mean{ color:#8a7f63; font-weight:700; font-size:.82em; }

/* trắc nghiệm */
.lpa-quiz{ text-align:center; }
.lpa-prompt{ min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; margin-bottom:12px; }
.lpa-ask{ font-size:.82rem; color:#8a7f63; }
.lpa-opts{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.lpa-opt{ border:1px solid #e2d4b3; background:#fdf8ec; border-radius:13px; padding:14px 10px; font-weight:800; color:#3c4720; cursor:pointer; font-family:inherit; font-size:1.15rem; transition:.12s; }
.lpa-opt:hover{ border-color:#c99a3a; }
.lpa-opt.correct{ background:#e3f0d8; border-color:#7fae63; color:#31611f; }
.lpa-opt.wrong{ background:#f3ddd8; border-color:#c98a7f; color:#8a352a; }
.lpa-opt:disabled{ cursor:default; }
.lpa-score{ margin-top:12px; font-size:.9rem; color:#a9781f; font-weight:800; }

/* ghép cặp */
.lpa-match-h{ font-size:.82rem; color:#8a7f63; text-align:center; margin-bottom:10px; }
.lpa-match{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.lpa-tok{ border:1px solid #e2d4b3; background:#fdf8ec; border-radius:12px; padding:13px 8px; text-align:center; font-weight:800; cursor:pointer; font-family:inherit; transition:.12s; }
.lpa-tok.zh{ font-family:"Noto Sans TC","Songti SC",serif; font-size:1.5rem; color:#7c2d26; }
.lpa-tok.py{ font-size:1.05rem; color:#3c4720; }
.lpa-tok.sel{ border-color:#c99a3a; background:#f6ead0; }
.lpa-tok.done{ opacity:.35; pointer-events:none; }
.lpa-tok.bad{ animation:lpaShake .35s; }
@keyframes lpaShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.lpa-match-done{ text-align:center; padding:16px; color:#3c4720; font-weight:800; }

@media (max-width:600px){ .lpa-zh{ font-size:3.4rem; } .lpa-hanzi{ font-size:2.8rem; } }

/* Nút 🔊 khi âm CHƯA có bản thu giọng thật của thầy: vẫn hiện nhưng im lặng (mờ đi). */
.lpa-toolbar button.say.mute{ opacity:.42; }

/* Màn rộng: chừa "làn" bên phải cho người đồng hành đứng trong khung giấy, không đè lên nội dung. */
@media (min-width: 760px) {
  .lpa-sheet{ width:min(860px,96vw); }
  .lpa-body{ padding-right:185px; }
}