/**
 * Pinyin Lab — style BỔ SUNG cho lab phát âm (pron.css nạp trước).
 * Chỉ khai báo phần riêng của tiếng Trung; mọi thứ khác kế thừa lab gốc
 * để 2 ngôn ngữ trông như một sản phẩm, không phải 2 trang ghép.
 */

/* ── Nút đổi ngôn ngữ (topbar) — cùng khuôn với nút đổi giao diện ── */
.pron-lang-switch{
  display:inline-flex; align-items:center; gap:2px; padding:3px;
  border:1px solid rgba(255,255,255,.14); border-radius:11px;
  background:rgba(255,255,255,.05);
}
.pron-lang-switch button{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:inherit; font-size:13px; font-weight:600;
  opacity:.62; transition:background .16s, opacity .16s;
}
.pron-lang-switch button:hover{ opacity:1; }
.pron-lang-switch button.is-on{
  opacity:1; background:linear-gradient(180deg,#2563eb 0%,#1d4ed8 100%); color:#fff;
  box-shadow:0 2px 8px -2px rgba(37,99,235,.55);
}
@media (max-width:900px){ .pron-lang-switch button span{ display:none; } }

/* ── Hero bản tiếng Trung: đổi tông sang đỏ-vàng cho khác tiếng Anh ── */
.pron-hero--zh .pron-hero-badge{
  background:linear-gradient(90deg,rgba(220,38,38,.22),rgba(245,158,11,.18));
  border-color:rgba(245,158,11,.35); color:#fbbf24;
  letter-spacing:.14em;
}
.pron-hero--zh h1 span{
  background:linear-gradient(90deg,#f87171,#fbbf24);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ── Chip âm pinyin: chữ to hơn IPA vì có dấu thanh + ký tự đặc biệt (ü, ɑ) ── */
.py-chip{ position:relative; overflow:hidden; }
.py-chip-name{
  font-size:22px; font-weight:800; letter-spacing:.01em;
  font-feature-settings:"kern" 1;
}
/* Âm dễ nhầm: VẠCH hổ phách mảnh ở đáy chip thay cho icon ⚠ (icon nhét vào ô
   vuông làm lệch bố cục). Cảnh báo đầy đủ nằm trong panel chi tiết. */
.py-chip.is-risky::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2.5px;
  background:linear-gradient(90deg,rgba(245,158,11,0),#f59e0b 22%,#fbbf24 78%,rgba(245,158,11,0));
  opacity:.75; transition:opacity .18s;
}
.py-chip.is-risky:hover::after{ opacity:1; }

.py-group-zh{
  font-size:15px; font-weight:600; opacity:.6; margin-left:8px;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
.py-warn-dot{ color:#f59e0b; font-weight:700; }

/* ── Hộp cảnh báo "người Việt hay đọc sai" (panel chi tiết) ── */
.py-tip{
  display:flex; gap:11px; align-items:flex-start;
  margin:12px 0 0; padding:13px 15px;
  border-radius:12px;
  border:1px solid rgba(245,158,11,.34);
  background:linear-gradient(135deg,rgba(245,158,11,.13),rgba(245,158,11,.05));
}
.py-tip-ic{
  flex:0 0 30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(245,158,11,.18); color:#f59e0b;
}
.py-tip-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.py-tip-body b{
  font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:#f59e0b;
}
.py-tip-body span{ font-size:14px; line-height:1.62; }

/* ── Khối đối chiếu: gần giống âm nào của Việt/Anh và KHÁC ở đâu ── */
.py-cmp{
  margin:12px 0 0; padding:13px 15px;
  border-radius:12px; border:1px solid var(--pron-bd,rgba(255,255,255,.12));
  background:rgba(255,255,255,.03);
}
.py-cmp-label{
  font-size:11px; font-weight:800; letter-spacing:.09em; opacity:.55;
  margin-bottom:9px;
}
.py-cmp-row{ display:flex; gap:10px; align-items:flex-start; padding:6px 0; }
.py-cmp-row + .py-cmp-row{ border-top:1px dashed rgba(255,255,255,.1); }
.py-cmp-flag{ flex:0 0 auto; font-size:17px; line-height:1.35; }
.py-cmp-row > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.py-cmp-row b{ font-size:14px; font-weight:700; }
.py-cmp-row span{ font-size:13.5px; line-height:1.55; opacity:.78; }
.py-cmp-row--none b{ opacity:.72; font-weight:600; }

/* ── Bản EN/中文 hiện SONG SONG cùng khối mô tả (không gấp trong menu) ── */
.pron-desc-alt{ margin:9px 0 0; font-size:13.5px; line-height:1.6; opacity:.72; }
.pron-desc-alt--zh,
.pron-step-zh{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
/* dòng 中文 trong từng bước — nằm ngay dưới dòng tiếng Anh */
.pron-step-zh{ display:block; margin-top:3px; opacity:.62; }

/* ── Chế độ 中文: ẩn những thứ chỉ dành cho tiếng Anh ── */
body.pron-lang-zh .pron-en-only{ display:none !important; }

/* Nhãn tab theo ngôn ngữ: giữ inline để không xuống dòng trong nút */
.pron-en-label, .pron-zh-label{ display:inline; }
.pron-en-label[hidden], .pron-zh-label[hidden], .pron-slash[hidden]{ display:none !important; }

/* ⚠️ display:flex ĐÈ BẸP thuộc tính [hidden] — phải chừa tường minh.
   Bốn khối dưới đây do pinyin-app.js dựng và ẩn bằng `el.hidden = true`, nhưng
   rule `display:flex` của chính chúng thắng `display:none` mặc định của [hidden]
   (cùng độ ưu tiên, class đứng sau trong nguồn). Hậu quả THẤY ĐƯỢC: xem một âm
   tiếng Trung rồi bấm 🇬🇧 sang tiếng Anh thì cờ 🇬🇧/🇨🇳 và HỘP VÀNG "Người Việt
   hay đọc sai" NẰM LẠI trên panel tiếng Anh — dù JS đã ra lệnh ẩn.
   Lỗi này cũng làm hỏng chính Pinyin: chuyển giữa hai âm Trung mà âm sau không
   có tip thì tip của âm trước vẫn treo đó.
   Thêm khối dùng chung mới có display:* thì NHỚ bổ sung vào danh sách này. */
.pron-desc-src[hidden], .py-tip[hidden], .py-cmp[hidden], .pron-desc-alt[hidden]{ display:none !important; }

/* ═══════════════════════════════════════════════════════════════════
   ĐỘ TƯƠNG PHẢN CHO ĐỦ 4 TỔ HỢP GIAO DIỆN
   flat-light · flat-dark · skeuo-light · skeuo-dark
   Bệnh gốc: gradient + -webkit-text-fill-color:transparent của bản zh
   ghi đè color đặc của skeuo → chữ chìm hẳn vào nền kem. Nền sáng dùng
   MÀU ĐẶC, chỉ nền tối mới dùng gradient.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tiêu đề hero bản tiếng Trung ── */
html:not(.ae-dark-mode) .pron-hero--zh h1 span,
html.theme-skeuo:not(.ae-dark-mode) .pron-hero--zh h1 span{
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  color:#B45309 !important;               /* hổ phách đậm — nổi trên kem lẫn trắng */
}
html.theme-skeuo.ae-dark-mode .pron-hero--zh h1 span{
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  color:#FCD34D !important;
}
html.theme-skeuo:not(.ae-dark-mode) .pron-hero--zh .pron-hero-badge{
  background:linear-gradient(180deg,#FEF3C7,#FDE68A);
  border-color:#D97706; color:#92400E;
}
html.theme-skeuo.ae-dark-mode .pron-hero--zh .pron-hero-badge{
  background:rgba(217,119,6,.2); border-color:rgba(252,211,77,.45); color:#FCD34D;
}
html:not(.ae-dark-mode):not(.theme-skeuo) .pron-hero--zh .pron-hero-badge{
  background:#FEF3C7; border-color:#FCD34D; color:#B45309;
}

/* ── Nút đổi ngôn ngữ: nền sáng cần viền/đáy rõ ── */
html:not(.ae-dark-mode):not(.theme-skeuo) .pron-lang-switch{ background:#F1F5F9; border-color:#E2E8F0; }
html:not(.ae-dark-mode):not(.theme-skeuo) .pron-lang-switch button{ color:#334155; }
html.theme-skeuo:not(.ae-dark-mode) .pron-lang-switch{
  background:linear-gradient(180deg,#FFFDF6,#F5EAD2); border-color:#C9A961;
}
html.theme-skeuo:not(.ae-dark-mode) .pron-lang-switch button{ color:#4A3A1E; }
html.theme-skeuo:not(.ae-dark-mode) .pron-lang-switch button.is-on{
  background:linear-gradient(180deg,#A5854C,#7D6234); border:1px solid #5F4A26; color:#fff;
}
html.theme-skeuo.ae-dark-mode .pron-lang-switch{
  background:rgba(255,214,150,.08); border-color:rgba(255,214,150,.28);
}
html.theme-skeuo.ae-dark-mode .pron-lang-switch button{ color:#D9C9A6; }

/* ── Hộp cảnh báo "người Việt hay đọc sai" ── */
html:not(.ae-dark-mode) .py-tip{
  border-color:#FCD34D;
  background:linear-gradient(135deg,#FEF9C3,#FEF3C7);
}
html:not(.ae-dark-mode) .py-tip-ic{ background:#FDE68A; color:#B45309; }
html:not(.ae-dark-mode) .py-tip-body b{ color:#B45309; }
html:not(.ae-dark-mode) .py-tip-body span{ color:#422006; }
html.theme-skeuo:not(.ae-dark-mode) .py-tip{
  border-color:#C9A961; background:linear-gradient(180deg,#FFFBEB,#F7EED4);
  box-shadow:inset 0 1px 0 #fff;
}
html.theme-skeuo.ae-dark-mode .py-tip{
  border-color:rgba(252,211,77,.35); background:rgba(217,119,6,.14);
}
html.theme-skeuo.ae-dark-mode .py-tip-body span{ color:#F3E7CF; }

/* ── Khối đối chiếu âm Việt / âm Anh ── */
html:not(.ae-dark-mode) .py-cmp{
  border-color:#E2E8F0; background:#F8FAFC;
}
html:not(.ae-dark-mode) .py-cmp-label{ color:#475569; opacity:1; }
html:not(.ae-dark-mode) .py-cmp-row b{ color:#0F172A; }
html:not(.ae-dark-mode) .py-cmp-row span{ color:#475569; opacity:1; }
html:not(.ae-dark-mode) .py-cmp-row + .py-cmp-row{ border-top-color:#E2E8F0; }
html.theme-skeuo:not(.ae-dark-mode) .py-cmp{
  border-color:#C9A961; background:linear-gradient(180deg,#FFFDF6,#F7F0DE);
}
html.theme-skeuo:not(.ae-dark-mode) .py-cmp-label{ color:#6B5A33; }
html.theme-skeuo:not(.ae-dark-mode) .py-cmp-row b{ color:#3A2D15; }
html.theme-skeuo:not(.ae-dark-mode) .py-cmp-row span{ color:#6B5A33; }
html.theme-skeuo:not(.ae-dark-mode) .py-cmp-row + .py-cmp-row{ border-top-color:rgba(201,169,97,.5); }
html.theme-skeuo.ae-dark-mode .py-cmp{
  border-color:rgba(255,214,150,.2); background:rgba(255,214,150,.05);
}
html.theme-skeuo.ae-dark-mode .py-cmp-row b{ color:#F3E7CF; }
html.theme-skeuo.ae-dark-mode .py-cmp-row span{ color:#D9C9A6; }

/* ── Bản EN/中文 song song ── */
html:not(.ae-dark-mode) .pron-desc-alt{ border-left-color:#CBD5E1; color:#475569; opacity:1; }
html.theme-skeuo:not(.ae-dark-mode) .pron-desc-alt{ border-left-color:#C9A961; color:#6B5A33; }
html.theme-skeuo.ae-dark-mode .pron-desc-alt{ border-left-color:rgba(255,214,150,.3); color:#D9C9A6; }
html:not(.ae-dark-mode) .pron-step-zh{ color:#64748B; opacity:1; }
html.theme-skeuo:not(.ae-dark-mode) .pron-step-zh{ color:#6B5A33; opacity:1; }
html.theme-skeuo.ae-dark-mode .pron-step-zh{ color:#BCAE8C; opacity:1; }

/* ── Vạch âm dễ nhầm: nền kem cần đậm hơn mới thấy ── */
html.theme-skeuo:not(.ae-dark-mode) .py-chip.is-risky::after{
  background:linear-gradient(90deg,rgba(180,83,9,0),#B45309 22%,#D97706 78%,rgba(180,83,9,0));
  opacity:.9;
}
html:not(.ae-dark-mode):not(.theme-skeuo) .py-chip.is-risky::after{ opacity:.9; }

/* ── Tên âm pinyin: đảm bảo luôn đọc rõ ở nền sáng ── */
html:not(.ae-dark-mode):not(.theme-skeuo) .py-chip-name{ color:#0F172A; }
html.theme-skeuo:not(.ae-dark-mode) .py-chip-name{ color:#3A2D15; }
html.theme-skeuo:not(.ae-dark-mode) .py-group-zh{ color:#6B5A33; opacity:1; }

/* ── Ghi chú đối chiếu (🇬🇧 tiếng Anh · 🇨🇳 中文) ──
   Cùng MỘT khuôn cho cả hai: cờ nhỏ bên trái + chữ, không tiêu đề, không nền
   màu, không thanh dọc màu mè — trước đây mỗi khối một kiểu (thanh xanh / thanh
   xám / chữ Hán trần) nhìn rời rạc. */
.pron-desc-src,
#pronDescZh:not([hidden]){
  display:flex; gap:9px; align-items:flex-start;
  margin:9px 0 0; padding:0;
  border:0; background:none;
}
.pron-note-flag{
  flex:0 0 auto; font-size:14px; line-height:1.55; opacity:.9;
  filter:saturate(.9);
}
.pron-desc-src p,
#pronDescZh p{
  margin:0; font-size:13.6px; line-height:1.62; opacity:.78;
}
html:not(.ae-dark-mode) .pron-desc-src{
  border-left-color:#0EA5E9; background:#F0F9FF; color:#0C4A6E;
}
html.theme-skeuo:not(.ae-dark-mode) .pron-desc-src{
  border-left-color:#A5854C; background:#FFFDF6; color:#4A3A1E;
}
html.theme-skeuo.ae-dark-mode .pron-desc-src{
  border-left-color:rgba(255,214,150,.5); background:rgba(255,214,150,.06); color:#F3E7CF;
}

/* ── Bài tập: mức độ, sân chơi, đáp án ── */
.py-quiz{ max-width:860px; margin:0 auto; }
.py-quiz-head{ text-align:center; margin:0 0 18px; }
.py-quiz-head h2{ font-size:23px; font-weight:800; margin:0 0 6px; }
.py-quiz-head p{ font-size:14px; line-height:1.6; opacity:.75; margin:0; }

.py-levels{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 20px; }
.py-level{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:11px 20px; border-radius:12px; cursor:pointer;
  border:1px solid var(--pron-bd,rgba(255,255,255,.14));
  background:rgba(255,255,255,.04); color:inherit;
  transition:border-color .16s, background .16s, transform .12s;
}
.py-level:hover{ transform:translateY(-1px); }
.py-level b{ font-size:14.5px; font-weight:700; }
.py-level small{ font-size:11.5px; opacity:.6; }
.py-level.is-on{ border-color:#0EA5E9; background:rgba(14,165,233,.14); }

.py-stage{
  border-radius:16px; padding:22px;
  border:1px solid var(--pron-bd,rgba(255,255,255,.12));
  background:rgba(255,255,255,.03);
}
.py-q-head{ display:flex; justify-content:space-between; font-size:12.5px; opacity:.7; margin-bottom:14px; }
.py-q-score{ font-variant-numeric:tabular-nums; }
.py-q-play{
  display:block; margin:0 auto 20px; padding:13px 28px;
  border:0; border-radius:999px; cursor:pointer;
  background:linear-gradient(180deg,#0EA5E9,#0284C7); color:#fff;
  font-size:15px; font-weight:700;
  box-shadow:0 4px 14px -4px rgba(14,165,233,.6);
}
.py-q-play:hover{ filter:brightness(1.08); }
.py-q-opts{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.py-q-opts--tone{ flex-direction:column; align-items:stretch; max-width:340px; margin:0 auto; }
.py-opt{
  min-width:82px; padding:14px 20px; border-radius:12px; cursor:pointer;
  border:1px solid var(--pron-bd,rgba(255,255,255,.16));
  background:rgba(255,255,255,.05); color:inherit;
  font-size:20px; font-weight:700; transition:all .14s;
}
.py-q-opts--tone .py-opt{ font-size:15px; font-weight:600; }
.py-opt:hover:not(:disabled){ border-color:#0EA5E9; transform:translateY(-1px); }
.py-opt:disabled{ cursor:default; }
.py-opt.is-right{ border-color:#16A34A !important; background:rgba(22,163,74,.22) !important; }
.py-opt.is-wrong{ border-color:#DC2626 !important; background:rgba(220,38,38,.18) !important; }
.py-q-fb{ text-align:center; margin-top:16px; min-height:22px; font-size:14px; }
.py-fb-ok{ color:#16A34A; font-weight:700; }
.py-fb-no{ color:#DC2626; font-weight:600; }

.py-done{ text-align:center; padding:14px 0; }
.py-done-pct{ font-size:44px; font-weight:900; color:#0EA5E9; line-height:1; }
.py-done p{ margin:8px 0 16px; font-size:15px; }
.py-btn{
  padding:11px 24px; border:0; border-radius:999px; cursor:pointer;
  background:linear-gradient(180deg,#0EA5E9,#0284C7); color:#fff; font-weight:700;
}

/* ── Bảng luyện 4 thanh ── */
.py-tone-legend{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 22px; }
.py-tl{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:10px; font-size:13px;
  border:1px solid var(--pron-bd,rgba(255,255,255,.12));
}
.py-tl b{ font-size:19px; }
.py-tl-1 b{ color:#38BDF8; } .py-tl-2 b{ color:#34D399; }
.py-tl-3 b{ color:#FBBF24; } .py-tl-4 b{ color:#F87171; }

.py-td-group{ margin:0 0 26px; }
.py-td-group h3{ font-size:15px; font-weight:700; margin:0 0 10px; }
.py-td-group h3 small{ font-size:12px; opacity:.55; font-weight:500; margin-left:7px; }
.py-td-rows{ display:flex; flex-direction:column; gap:8px; }
.py-td-row{ display:flex; gap:8px; flex-wrap:wrap; }
.py-td-cell{
  flex:1 1 0; min-width:64px; padding:12px 8px; border-radius:10px; cursor:pointer;
  border:1px solid var(--pron-bd,rgba(255,255,255,.14));
  background:rgba(255,255,255,.04); color:inherit;
  font-size:19px; font-weight:700; transition:all .14s;
}
.py-td-cell:hover{ transform:translateY(-1px); border-color:#0EA5E9; }
.py-opt-t1{ border-bottom:2.5px solid #38BDF8; }
.py-opt-t2{ border-bottom:2.5px solid #34D399; }
.py-opt-t3{ border-bottom:2.5px solid #FBBF24; }
.py-opt-t4{ border-bottom:2.5px solid #F87171; }

/* nền sáng: ô/nút cần nền đặc mới đọc rõ */
html:not(.ae-dark-mode) .py-level,
html:not(.ae-dark-mode) .py-opt,
html:not(.ae-dark-mode) .py-td-cell,
html:not(.ae-dark-mode) .py-stage,
html:not(.ae-dark-mode) .py-tl{ background:#fff; border-color:#E2E8F0; color:#0F172A; }
html.theme-skeuo:not(.ae-dark-mode) .py-level,
html.theme-skeuo:not(.ae-dark-mode) .py-opt,
html.theme-skeuo:not(.ae-dark-mode) .py-td-cell,
html.theme-skeuo:not(.ae-dark-mode) .py-stage,
html.theme-skeuo:not(.ae-dark-mode) .py-tl{
  background:linear-gradient(180deg,#FFFDF6,#F5EAD2); border-color:#C9A961; color:#3A2D15;
}
html.theme-skeuo.ae-dark-mode .py-level,
html.theme-skeuo.ae-dark-mode .py-opt,
html.theme-skeuo.ae-dark-mode .py-td-cell,
html.theme-skeuo.ae-dark-mode .py-stage,
html.theme-skeuo.ae-dark-mode .py-tl{
  background:rgba(255,214,150,.06); border-color:rgba(255,214,150,.22); color:#F3E7CF;
}

/* ── Kết quả AI ở chế độ tiếng Trung ── */
.pron-tr-han{ font-size:19px; line-height:1.75; font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; }
.pron-tr-py{ margin-top:6px; font-size:14px; line-height:1.65; opacity:.72; font-style:italic; }
.pron-sh-py{ margin-left:6px; font-size:12.5px; opacity:.7; font-style:italic; }
.pron-sh-tone .pron-sh-tone-item{
  display:inline-block; margin:2px 7px 2px 0; padding:2px 9px;
  border-radius:8px; background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.32);
  font-size:13px;
}
.pron-sh-tone-item s{ opacity:.6; }
.pron-sh-tone-item b{ color:#f59e0b; }
html:not(.ae-dark-mode) .pron-sh-tone .pron-sh-tone-item{ background:#FEF3C7; border-color:#FCD34D; }
html:not(.ae-dark-mode) .pron-sh-tone-item b{ color:#B45309; }
html:not(.ae-dark-mode) .pron-tr-py{ color:#475569; opacity:1; }
html.theme-skeuo:not(.ae-dark-mode) .pron-tr-py{ color:#6B5A33; opacity:1; }
.pron-desc-src-note{
  display:inline; margin-left:8px; font-size:9.5px; font-weight:600;
  letter-spacing:.04em; opacity:.62; font-style:normal; text-transform:none;
}

/* ═══════════════════════════════════════════════════════════════════
   FONT CHO KÝ HIỆU IPA — sửa lỗi hiện ô vuông ☰ trên nhiều máy.
   Gốc bệnh: theme khai báo font-family:"Plus Jakarta Sans" KHÔNG có font
   dự phòng; font này không chứa khối IPA Extensions nên trình duyệt không
   biết lấy glyph ở đâu.
   Cách chữa: khai báo một họ ảo 'AlphaIPA' chỉ trỏ tới font CÓ SẴN trong máy,
   và GIỚI HẠN bằng unicode-range → chỉ những ký tự IPA mới dùng font này,
   toàn bộ chữ Việt vẫn là Plus Jakarta Sans (không đổi diện mạo trang).
   Không tải thêm file font nào ⇒ không tốn băng thông.
   ═══════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'AlphaIPA';
  src:local('Lucida Grande'),      /* macOS */
      local('Segoe UI'),           /* Windows */
      local('Noto Sans'),          /* Android / Linux */
      local('DejaVu Sans'),        /* Linux */
      local('Lucida Sans Unicode'),
      local('Arial Unicode MS'),
      local('Times New Roman');    /* iOS — có IPA Extensions */
  /* IPA Extensions · Spacing Modifier (ʰ ː) · Combining Diacritics (◌̩ ◌̯) · Phonetic Ext */
  unicode-range:U+0250-02AF, U+02B0-02FF, U+0300-036F, U+1D00-1D7F, U+1DC0-1DFF;
  font-display:swap;
}

/* Áp cho mọi khối có thể chứa IPA. Đặt AlphaIPA TRƯỚC rồi mới tới font theme:
   unicode-range lo phần giới hạn nên không sợ đổi font chữ thường. */
.pron-desc-src p,
.pron-desc-src-lb,
#pronDescText,
#pronDescZh,
.py-tip-body span,
.py-cmp-row b,
.py-cmp-row span,
.pron-step-note p,
.pron-step-note small,
.pron-tr-py,
.pron-sh-py,
.pron-sh-tone-item{
  font-family:'AlphaIPA', 'Plus Jakarta Sans', 'Be Vietnam Pro', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Nút ngôn ngữ đang chọn: chữ phải TRẮNG trên nền xanh ở MỌI skin.
   Trước đó rule `html:not(.ae-dark-mode):not(.theme-skeuo) .pron-lang-switch button`
   (specificity 0,3,1) thắng `.pron-lang-switch button.is-on` (0,2,0) → chữ xám
   trên nền xanh, đọc không ra. Nâng cùng cấp cho từng skin. */
html:not(.ae-dark-mode):not(.theme-skeuo) .pron-lang-switch button.is-on,
html.ae-dark-mode:not(.theme-skeuo) .pron-lang-switch button.is-on,
html.theme-skeuo.ae-dark-mode .pron-lang-switch button.is-on{
  color:#fff;
}

/* ═══ Thẻ minh hoạ ĐƯỜNG THANH ĐIỆU (SVG động) ═══ */
.py-tone-legend--viz{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin:0 0 26px; justify-content:stretch;
}
@media (max-width:900px){ .py-tone-legend--viz{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .py-tone-legend--viz{ grid-template-columns:1fr; } }

.py-tone-card{
  display:flex; flex-direction:column; gap:7px; align-items:stretch;
  padding:13px 14px 14px; border-radius:14px; cursor:pointer; text-align:left;
  border:1px solid var(--pron-bd,rgba(255,255,255,.13));
  background:rgba(255,255,255,.04); color:inherit;
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.py-tone-card:hover{ transform:translateY(-2px); }
.py-tone-card.is-playing{ box-shadow:0 0 0 2px currentColor inset; }
.py-tv-1.is-playing{ color:#38BDF8; } .py-tv-2.is-playing{ color:#34D399; }
.py-tv-3.is-playing{ color:#FBBF24; } .py-tv-4.is-playing{ color:#F87171; }

.py-tone-card-hd{ display:flex; align-items:baseline; gap:9px; }
.py-tone-card-hd b{ font-size:26px; line-height:1; }
.py-tv-1 .py-tone-card-hd b{ color:#38BDF8; } .py-tv-2 .py-tone-card-hd b{ color:#34D399; }
.py-tv-3 .py-tone-card-hd b{ color:#FBBF24; } .py-tv-4 .py-tone-card-hd b{ color:#F87171; }
.py-tone-card-hd span{ font-size:13.5px; font-weight:700; opacity:.85; }

.py-tone-viz{ width:100%; height:62px; display:block; }
.py-tv-grid{ stroke:currentColor; stroke-width:.6; opacity:.14; }
.py-tv-line{ fill:none; stroke-width:3; stroke-linecap:round; opacity:.9; }
.py-tv-dot{ filter:drop-shadow(0 0 4px currentColor); }

.py-tone-card-desc{ font-size:12.5px; line-height:1.5; opacity:.72; }

/* nền sáng: thẻ cần nền đặc + lưới đậm hơn mới thấy */
html:not(.ae-dark-mode) .py-tone-card{ background:#fff; border-color:#E2E8F0; }
html:not(.ae-dark-mode) .py-tv-grid{ stroke:#0F172A; opacity:.13; }
html:not(.ae-dark-mode) .py-tone-card-desc{ color:#475569; opacity:1; }
html.theme-skeuo:not(.ae-dark-mode) .py-tone-card{
  background:linear-gradient(180deg,#FFFDF6,#F5EAD2); border-color:#C9A961;
}
html.theme-skeuo:not(.ae-dark-mode) .py-tv-grid{ stroke:#6B5A33; opacity:.2; }
html.theme-skeuo:not(.ae-dark-mode) .py-tone-card-desc{ color:#6B5A33; opacity:1; }
html.theme-skeuo.ae-dark-mode .py-tone-card{
  background:rgba(255,214,150,.06); border-color:rgba(255,214,150,.22);
}
html.theme-skeuo.ae-dark-mode .py-tone-card-desc{ color:#D9C9A6; opacity:1; }

/* Tôn trọng người dùng tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion:reduce){
  .py-tv-dot{ display:none; }
  .py-tone-card{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — sửa vỡ layout trên điện thoại.
   Ba bệnh gốc: (1) tên thương hiệu không giới hạn bề rộng nên xuống 3 dòng;
   (2) .pron-view-tab dùng flex:1 → 5 tab bị ép co, chữ vỡ dòng và đè nhau;
   (3) hàng lọc wrap làm nút cuối bị cắt.
   Cách chữa: CUỘN NGANG thay vì ép co — mỗi nút giữ đúng bề rộng chữ, người
   dùng vuốt để xem tiếp (quen thuộc trên mobile, không cần thu nhỏ chữ).
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:820px){

  /* ── Topbar ──
     Ẩn HẲN thương hiệu (kể cả icon) — trước đây icon vẫn chiếm chỗ nên hàng nút
     bị dồn sang phải, chừa một khoảng trống vô nghĩa bên trái. Hàng nút nay trải
     hết bề ngang và chia đều. Chữ "English/中文" GIỮ LẠI vì cờ 🇬🇧/🇨🇳 nhỏ, chỉ
     nhìn cờ dễ bấm nhầm. */
  .pron-topbar{ padding:8px 10px; gap:0; }
  .pron-brand{ display:none; }
  .pron-topbar-right{
    display:flex; align-items:center; gap:7px;
    flex:1 1 100%; width:100%; min-width:0;
    justify-content:space-between;
  }
  .pron-topbar-right > *{ flex:0 1 auto; min-width:0; }
  .pron-lang-switch{ flex:1 1 auto; }
  .pron-lang-switch button{ flex:1 1 0; justify-content:center; padding:6px 8px; font-size:12.5px; }
  .pron-lang-switch button span{ display:inline; }   /* giữ chữ English / 中文 */
  .pron-skin-switch button{ padding:6px 9px; }
  .pron-top-home{ padding:7px 11px; font-size:13px; white-space:nowrap; }
  .pron-top-home svg{ display:none; }

  /* ── Hàng tab khu vực: cuộn ngang, KHÔNG ép co ── */
  .pron-views{
    display:flex; gap:6px; padding:5px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; border-radius:14px;
  }
  .pron-views::-webkit-scrollbar{ display:none; }
  .pron-view-tab{
    flex:0 0 auto;                 /* bỏ flex:1 — đây là gốc của việc chữ vỡ dòng */
    white-space:nowrap;
    padding:9px 14px; font-size:13.5px; gap:6px;
  }
  .pron-vt-ic{ font-size:15px; }

  /* ── Hàng lọc nhóm âm: cuộn ngang thay vì wrap ── */
  .pron-cat-tabs{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:2px;
  }
  .pron-cat-tabs::-webkit-scrollbar{ display:none; }
  .pron-cat-tab{ flex:0 0 auto; white-space:nowrap; }

  /* ── Nội dung ── */
  .pron-wrap{ padding:0 12px; }
  .pron-hero{ padding:20px 16px; }
  .pron-hero h1{ font-size:23px; line-height:1.25; }
  .pron-hero p{ font-size:13.5px; }
  .pron-hero-stats{ gap:14px; flex-wrap:wrap; }
  .pron-stat b{ font-size:20px; }

  /* Chip âm: 3 cột cho vừa ngón tay, không quá nhỏ */
  .pron-grid{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .py-chip-name{ font-size:19px; }

  /* Thẻ thanh điệu + bài tập */
  .py-tone-legend--viz{ grid-template-columns:repeat(2,1fr); gap:9px; }
  .py-tone-card{ padding:11px 11px 12px; }
  .py-tone-card-hd b{ font-size:22px; }
  .py-tone-card-desc{ font-size:11.5px; }
  .py-levels{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; justify-content:flex-start; }
  .py-levels::-webkit-scrollbar{ display:none; }
  .py-level{ flex:0 0 auto; padding:9px 15px; }
  .py-stage{ padding:16px 13px; }
  .py-opt{ min-width:68px; padding:12px 16px; font-size:18px; }
  .py-td-cell{ min-width:0; padding:10px 4px; font-size:17px; }

  /* Panel chi tiết */
  .pron-panel{ padding:14px 12px; }
  .py-tip{ padding:11px 12px; gap:9px; }
  .py-cmp{ padding:11px 12px; }
}

@media (max-width:480px){
  /* Tên âm pinyin ngắn (b, zh, ɑng) nên 3 cột vẫn thoải mái ngón tay (~110px/ô)
     và đỡ phải cuộn dài; 2 cột phí chỗ. */
  .pron-grid{ grid-template-columns:repeat(3,1fr); gap:7px; }
  .py-chip{ padding:12px 6px; }
  .py-chip-name{ font-size:18px; }
  .py-tone-legend--viz{ grid-template-columns:1fr; }
  .pron-hero h1{ font-size:21px; }
  .pron-view-tab{ padding:8px 12px; font-size:13px; }
  /* <400px: nhường chỗ cho 2 nhóm nút chính, Trang chủ đã có ở menu site */
  .pron-top-home{ display:none; }
  .pron-lang-switch button{ font-size:12px; padding:6px 6px; }
  /* Bảng 4 thanh: 4 ô/hàng ở màn hẹp sẽ bé quá → 2 ô/hàng */
  .py-td-row{ display:grid; grid-template-columns:repeat(2,1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — PANEL CHI TIẾT bị che mất viền và nút ✕.
   Hai lỗi cộng dồn:
   1) `.pron-modal{padding:18px}` + `.pron-panel{width:min(680px,96vw)}`
      ⇒ 96vw + 36px đệm = HƠN 100vw ⇒ panel tràn ra ngoài hai mép, viền và nút ✕
      (nằm sát góc phải panel) bị đẩy ra khỏi màn.
   2) `max-height:92vh` — trên iOS Safari, `vh` tính theo khung LỚN (lúc thanh
      URL đã ẩn), nên khi thanh URL còn hiện thì đáy panel chui xuống dưới nó.
      Dùng `dvh` (khung động) và vẫn để `vh` làm dự phòng cho trình duyệt cũ.
   Kèm chừa safe-area cho tai thỏ / thanh home iPhone.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  .pron-modal{
    padding:
      calc(10px + env(safe-area-inset-top, 0px))
      calc(10px + env(safe-area-inset-right, 0px))
      calc(10px + env(safe-area-inset-bottom, 0px))
      calc(10px + env(safe-area-inset-left, 0px));
    align-items:flex-start;          /* panel dài thì bám mép trên, không bị cắt đầu */
  }
  .pron-panel{
    width:100%;                      /* lấp đúng phần còn lại — KHÔNG dùng 96vw nữa */
    max-width:100%;
    margin:auto 0;                   /* panel ngắn thì vẫn căn giữa theo chiều dọc */
    max-height:calc(100vh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height:calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding:14px 13px 18px;
    border-radius:16px;
  }
  /* Nút ✕ luôn nổi ở góc, không trôi theo nội dung khi cuộn */
  .pron-panel-head{ position:sticky; top:-14px; z-index:3; padding-top:2px; margin-bottom:12px; }
  .pron-x{ flex:0 0 auto; }
}

@media (max-width:820px){
  html:not(.ae-dark-mode):not(.theme-skeuo) .pron-panel-head{ background:#fff; }
  html.ae-dark-mode:not(.theme-skeuo) .pron-panel-head{ background:#0F172A; }
  html.theme-skeuo:not(.ae-dark-mode) .pron-panel-head{ background:#FFFDF6; }
  html.theme-skeuo.ae-dark-mode .pron-panel-head{ background:#241E16; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE v2 — ĐỔI TỪ "CUỘN NGANG" SANG "XUỐNG HÀNG".
   Vòng trước em cho các hàng nút cuộn ngang; anh phản hồi phải vuốt qua lại
   dễ bỏ sót nút. Nay cho XUỐNG HÀNG và CĂN GIỮA — thấy hết mọi lựa chọn
   trong một cái nhìn, không phải vuốt.
   Bỏ overflow luôn cũng chữa được lỗi MẤT VIỀN TRÊN của nút đang chọn:
   `overflow-x:auto` tạo vùng cắt, viền trên của nút bị xén mất.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:820px){

  /* Hàng tab khu vực (Bảng âm · Luyện nghe · Thanh điệu · Nói tự do · Shadowing) */
  .pron-views{
    flex-wrap:wrap; justify-content:center;
    overflow:visible;                 /* bỏ cắt → viền nút đang chọn hiện đủ */
    gap:6px; padding:6px;
  }
  .pron-view-tab{ flex:0 1 auto; }

  /* Hàng lọc nhóm âm (Tất cả · Thanh mẫu · Vận mẫu · Âm tiết đọc nguyên) */
  .pron-cat-tabs{
    flex-wrap:wrap; justify-content:center;
    overflow:visible;
    gap:7px; padding:2px 0;
  }

  /* Hàng mức độ bài tập (Thanh mẫu · Vận mẫu · Âm tiết đọc nguyên · Tổng hợp
     và Dễ · Vừa · Khó) */
  .py-levels{
    flex-wrap:wrap; justify-content:center;
    overflow:visible;
    gap:8px; padding:2px 0;
  }
  .py-level{ flex:0 1 auto; }

  /* Đáp án trong bài tập: căn giữa, mỗi nút đủ rộng cho ngón tay */
  .py-q-opts{ justify-content:center; gap:9px; }
  .py-opt{ flex:0 1 auto; min-width:76px; }
  /* Đoán thanh điệu: 1 cột dọc, full bề ngang cho dễ bấm */
  .py-q-opts--tone{ max-width:100%; }
  .py-q-opts--tone .py-opt{ width:100%; }
}

/* Nút đang chọn: nâng lên trên để viền không bị nút kế bên đè lên */
.pron-cat-tab.is-on, .py-level.is-on, .pron-view-tab.is-on{ position:relative; z-index:1; }